/* DJ FABY · réplica estática de djfaby.events (WordPress + Elementor) para migrarla.
   Tipografía de títulos: el original usa "Atmospheric" (de pago); aquí Michroma como sustituta libre. */
:root{--negro:#000;--blanco:#fff;--texto:#333;--ancho:1140px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Poppins,system-ui,sans-serif;color:var(--texto);background:var(--blanco);font-size:16px;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit}
.tit{font-family:Michroma,"Arial Black",sans-serif;font-weight:600;text-transform:uppercase;line-height:1;letter-spacing:.01em;color:var(--negro)}
.envolver{max-width:var(--ancho);margin:0 auto;padding:0 20px}

/* Cabecera */
.cab{position:sticky;top:0;z-index:20;background:var(--blanco);height:77px;display:flex;align-items:center}
.cab .envolver{display:flex;align-items:center;justify-content:space-between;width:100%}
.cab .logo img{height:38px;width:auto}
.menu{display:flex;gap:6px}
.menu a{font-family:Michroma,sans-serif;font-size:13px;font-weight:600;text-decoration:none;color:#7a7a7a;padding:10px 12px;border-bottom:3px solid transparent;letter-spacing:.02em}
.menu a:hover,.menu a[aria-current]{color:var(--negro);border-color:var(--negro)}
.abrir{display:none;background:none;border:0;font-size:28px;cursor:pointer}

/* Portada */
.portada{height:600px;background:url(https://djfaby.events/wp-content/uploads/2025/01/Dj.Faby_.png) center/cover;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.portada img{width:170px;opacity:.85}
.portada h1{color:var(--blanco);font-size:90px}

/* Bloques texto + foto */
.bloque{padding:16px 0}
.bloque .envolver{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.bloque h2{font-size:30px;margin-bottom:26px}
.bloque p{margin-bottom:40px}
.bloque.negro{background:var(--negro);color:var(--blanco)}
.bloque.negro .envolver{max-width:1500px;grid-template-columns:1fr 1.1fr;gap:74px}
.bloque.negro h2{color:var(--blanco)}
.lista{list-style:none}
.lista li{display:flex;justify-content:space-between;align-items:center;font-weight:600;padding:8px 8px;border-bottom:2px solid currentColor;color:var(--negro)}
.bloque.negro .lista li{color:var(--blanco);border-color:#ddd}
.lista li::after{content:"+";font-size:22px;line-height:1}

/* Sobre mí */
.sobre{background:var(--negro);color:var(--blanco);padding:40px 0 0}
.sobre .marca{width:225px;margin:0 auto 30px}
.sobre .envolver{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}
.sobre p{margin-bottom:14px}
.sobre .txt{padding-bottom:20px}

/* Eventos realizados */
.eventos h2{font-size:30px;text-align:center;padding:12px 0 24px}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;padding:0 16px 16px}
.tres figure img{aspect-ratio:3/2;object-fit:cover;width:100%;border:2px solid var(--negro)}
.tres figcaption{margin-top:16px;border:2px solid var(--negro);text-align:center;padding:6px;font-weight:500;color:var(--negro)}

/* Llamada final */
.llamada{position:relative;height:700px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;overflow:hidden}
.llamada::before{content:"";position:absolute;inset:0;background:url(https://djfaby.events/wp-content/uploads/2024/12/Dj-Events_WEB_Proyectos.png) center/cover;opacity:.5;z-index:-1}
.llamada h2{font-size:50px}
.boton{display:inline-block;border:2px solid var(--negro);padding:10px 20px;text-decoration:none;color:var(--negro);font-weight:500;transition:transform .3s}
.boton:hover{transform:scale(1.1)}

/* Pie */
.pie{padding:30px 0 40px;text-align:center}
.pie .logo{width:145px;margin:0 auto 20px}
.pie .menu{justify-content:center;margin-bottom:40px}
.fondos{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap}
.fondos img{height:48px;width:auto}
.firma{margin-top:28px;font-size:13px;color:#666}

/* Proyectos */
.cab-pag{height:600px;background:url(https://djfaby.events/wp-content/uploads/2024/12/Dj-Events_WEB_Proyectos.png) center/cover;display:flex;align-items:center;justify-content:center}
.cab-pag h1{color:var(--blanco);font-size:60px;text-align:center;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;padding:30px 20px}
.cifras b{display:block;font-family:Michroma,sans-serif;font-size:44px;color:var(--negro)}
.cifras span{font-weight:600}
.subt{font-size:24px;text-align:center;padding:18px 0}
.par{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:var(--ancho);margin:0 auto;padding:0 20px}
.par img{width:100%;height:391px;object-fit:cover}
.botones{display:flex;gap:20px;justify-content:center;padding:40px 0}

/* Contacto */
.contacto{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;max-width:var(--ancho);margin:0 auto;padding:60px 20px}
.contacto h1{font-size:40px;margin-bottom:12px}
.contacto .hola{font-size:20px;font-weight:600;margin-bottom:24px}
.form{display:grid;gap:12px}
.form input,.form textarea{font:inherit;padding:12px;border:1px solid #69727d;border-radius:3px}
.form textarea{min-height:140px}
.form button{font:inherit;font-weight:600;background:var(--negro);color:var(--blanco);border:0;padding:12px;cursor:pointer}
.aviso{font-size:14px;color:#666}

@media (max-width:767px){
  .menu{display:none;position:absolute;top:77px;left:0;right:0;flex-direction:column;background:var(--blanco);padding:10px 20px;box-shadow:0 10px 20px rgba(0,0,0,.1)}
  .menu.abierto{display:flex}
  .abrir{display:block}
  .portada{height:420px}.portada h1{font-size:44px}.portada img{width:120px}
  .bloque .envolver,.bloque.negro .envolver,.sobre .envolver,.tres,.par,.contacto,.cifras{grid-template-columns:1fr;gap:20px}
  .bloque.negro .envolver>img{order:2}
  .llamada{height:460px;padding:0 16px}.llamada h2{font-size:28px}
  .cab-pag{height:360px}.cab-pag h1{font-size:32px}
  .par img{height:240px}
  .pie .menu{display:flex;position:static;box-shadow:none;flex-direction:row;flex-wrap:wrap}
}