/* ==========================================================================
   ADRIANA LOPEZ · REALTOR — Sistema de diseño
   Lujo editorial B/N · serif display + sans neutra · acento bronce
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Jost:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&family=Great+Vibes&display=swap');

/* --------------------------------------------------------------- tokens */
:root{
  --negro:#0A0A0A;
  --negro-2:#141414;
  --negro-3:#1E1E1E;
  --gris-900:#242424;
  --gris-600:#565656;   /* oscurecido: el gris anterior quedaba lavado */
  --gris-400:#B0B0B0;
  --gris-200:#D8D5D0;
  --hueso:#F4F2EF;
  --hueso-2:#EAE6E0;
  --blanco:#FFFFFF;
  --bronce:#A87C55;
  --bronce-claro:#C9A582;
  --terracota:#B5563A;

  --serif:'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --sans:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  /* geométrica tipo Century Gothic, solo para las landings */
  --geo:'Poppins', 'Century Gothic', 'Questrial', var(--sans);
  --script:'Great Vibes', 'Apple Chancery', cursive;

  --max:1320px;
  --gutter:clamp(1.25rem, 5vw, 5rem);
  --seccion:clamp(3.75rem, 7.5vw, 6.5rem);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* --------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--blanco);
  color:var(--negro);
  font-family:var(--sans);
  font-weight:400;                                  /* la 300 de Jost se veía demasiado fina */
  font-size:clamp(1rem,.95rem + .25vw,1.125rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
img,video{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3,h4{margin:0; font-weight:400; line-height:1.08}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
::selection{background:var(--negro); color:var(--blanco)}

/* --------------------------------------------------------------- tipos */
.display{
  font-family:var(--serif);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.06em;
  line-height:1.02;
}
.d-xl{font-size:clamp(2.5rem,1.2rem + 5.2vw,5.6rem)}
.d-lg{font-size:clamp(1.95rem,1.1rem + 3.1vw,3.5rem)}
.d-md{font-size:clamp(1.6rem,1.1rem + 2vw,2.6rem)}
.d-sm{font-size:clamp(1.3rem,1rem + 1.3vw,1.95rem)}
.italica{font-style:italic; text-transform:none; letter-spacing:.01em}

.kicker{
  font-family:var(--sans);
  font-size:.75rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.26em;
  color:var(--gris-600);
  display:flex; align-items:center; gap:.9rem;
  margin:0 0 1rem;
}
.kicker::before{content:''; width:2.4rem; height:1px; background:currentColor; flex:none}
.kicker.centro{justify-content:center}
.kicker.centro::after{content:''; width:2.4rem; height:1px; background:currentColor; flex:none}
.entradilla{
  font-size:clamp(1rem,.95rem + .35vw,1.2rem);
  color:var(--gris-600);
  max-width:56ch;
  line-height:1.8;
}

/* --------------------------------------------------------------- layout */
.contenedor{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter)}
.contenedor-ancho{width:100%; max-width:1680px; margin-inline:auto; padding-inline:var(--gutter)}
.seccion{padding-block:var(--seccion)}
.seccion-sm{padding-block:clamp(2.75rem,5vw,4.25rem)}
.oscuro{background:var(--negro); color:var(--hueso)}
.oscuro .kicker,.oscuro .entradilla{color:var(--gris-400)}
.hueso{background:var(--hueso)}
.centro{text-align:center}
.rejilla{display:grid; gap:clamp(2rem,4vw,4.5rem)}
@media(min-width:900px){
  .r-2{grid-template-columns:repeat(2,1fr)}
  .r-3{grid-template-columns:repeat(3,1fr)}
  .r-4{grid-template-columns:repeat(4,1fr)}
  .r-5-7{grid-template-columns:5fr 7fr}
  .r-7-5{grid-template-columns:7fr 5fr}
  .alinear-centro{align-items:center}
}
@media(min-width:600px) and (max-width:899px){
  .r-3,.r-4{grid-template-columns:repeat(2,1fr)}
}

/* --------------------------------------------------------------- botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.75rem;
  padding:1.05rem 2.4rem;
  font-family:var(--sans);
  font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.22em;
  border:1px solid var(--negro);
  background:var(--negro); color:var(--blanco);
  position:relative; overflow:hidden;
  transition:color .5s var(--ease), border-color .5s var(--ease);
  cursor:pointer;
}
.btn::after{
  content:''; position:absolute; inset:0; background:var(--blanco);
  transform:scaleY(0); transform-origin:bottom; z-index:0;
  transition:transform .5s var(--ease-out);
}
.btn > *{position:relative; z-index:1}
.btn:hover{color:var(--negro)}
.btn:hover::after{transform:scaleY(1); transform-origin:top}
.btn-linea{background:transparent; color:var(--negro)}
.btn-linea::after{background:var(--negro)}
.btn-linea:hover{color:var(--blanco)}
.btn-claro{background:var(--blanco); color:var(--negro); border-color:var(--blanco)}
.btn-claro::after{background:var(--negro)}
.btn-claro:hover{color:var(--blanco); border-color:var(--negro)}
.btn-linea-claro{background:transparent; color:var(--hueso); border-color:rgba(255,255,255,.45)}
.btn-linea-claro::after{background:var(--blanco)}
.btn-linea-claro:hover{color:var(--negro); border-color:var(--blanco)}
.btn-bloque{width:100%}

.enlace-flecha{
  display:inline-flex; align-items:center; gap:.65rem;
  font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.22em;
  padding-bottom:.5rem; border-bottom:1px solid currentColor;
  transition:gap .35s var(--ease), opacity .35s var(--ease);
}
.enlace-flecha:hover{gap:1.2rem}
.enlace-flecha svg{width:.85em; height:.85em; flex:none}

/* --------------------------------------------------------------- header */
.cabecera{
  position:fixed; inset:0 0 auto; z-index:900;
  padding-block:clamp(1rem,2vw,1.6rem);
  transition:background .55s var(--ease), box-shadow .55s var(--ease), padding .55s var(--ease);
}
.cabecera .contenedor-ancho{display:flex; align-items:center; justify-content:space-between; gap:clamp(1rem,3vw,2rem)}
/* El logotipo es PNG con transparencia y recortado al contenido,
   así que la altura CSS es la altura real de la marca.
   `flex:none` + `object-fit:contain` evitan que el flex de la cabecera
   lo comprima y lo deforme en pantallas estrechas. */
.cabecera__logo{flex:0 0 auto; display:block; line-height:0; max-width:52vw}
.cabecera__logo img{
  height:clamp(34px,3.8vw,48px); width:auto; max-width:100%;
  object-fit:contain; object-position:left center;
  transition:filter .55s var(--ease), height .55s var(--ease);
}
.cabecera--sobre-oscuro .cabecera__logo img{filter:invert(1)}
.cabecera--fija{background:rgba(255,255,255,.94); backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(0,0,0,.08); padding-block:.8rem}
.cabecera--fija .cabecera__logo img{filter:none; height:clamp(30px,3.2vw,40px)}

.nav{display:none; align-items:center; gap:clamp(1.4rem,2.4vw,2.6rem)}
@media(min-width:1080px){.nav{display:flex}}
.nav a{
  font-size:.75rem; font-weight:400; text-transform:uppercase; letter-spacing:.2em;
  position:relative; padding-block:.35rem; white-space:nowrap;
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1); transform-origin:left}
.cabecera--sobre-oscuro:not(.cabecera--fija) .nav{color:var(--blanco)}
.cabecera--sobre-oscuro:not(.cabecera--fija) .btn-nav{border-color:rgba(255,255,255,.5); color:var(--blanco); background:transparent}
.cabecera--sobre-oscuro:not(.cabecera--fija) .btn-nav::after{background:var(--blanco)}
.cabecera--sobre-oscuro:not(.cabecera--fija) .btn-nav:hover{color:var(--negro)}
.btn-nav{padding:.75rem 1.5rem; font-size:.6875rem; letter-spacing:.18em}
.cabecera__acciones{display:flex; align-items:center; gap:1rem}
@media(max-width:1079px){.btn-nav{display:none}}

/* hamburguesa */
.hamburguesa{display:flex; flex-direction:column; justify-content:center; gap:6px; width:34px; height:34px; z-index:1001}
@media(min-width:1080px){.hamburguesa{display:none}}
.hamburguesa span{display:block; height:1.5px; width:100%; background:currentColor; transition:transform .45s var(--ease), opacity .3s}
.cabecera--sobre-oscuro:not(.cabecera--fija) .hamburguesa{color:var(--blanco)}
body.menu-abierto .hamburguesa{color:var(--blanco)}
body.menu-abierto .hamburguesa span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.menu-abierto .hamburguesa span:nth-child(2){opacity:0}
body.menu-abierto .hamburguesa span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* menú móvil */
.menu-movil{
  position:fixed; inset:0; z-index:1000;
  background:var(--negro); color:var(--hueso);
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--gutter) 3rem;
  clip-path:circle(0% at calc(100% - 3rem) 3rem);
  transition:clip-path .8s var(--ease-out);
  pointer-events:none;
}
body.menu-abierto .menu-movil{clip-path:circle(150% at calc(100% - 3rem) 3rem); pointer-events:auto}
.menu-movil nav{display:flex; flex-direction:column; gap:.35rem}
.menu-movil nav a{
  font-family:var(--serif); font-size:clamp(1.9rem,7vw,3rem);
  text-transform:uppercase; letter-spacing:.05em; line-height:1.35;
  opacity:0; transform:translateY(24px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
body.menu-abierto .menu-movil nav a{opacity:1; transform:none}
body.menu-abierto .menu-movil nav a:nth-child(1){transition-delay:.18s}
body.menu-abierto .menu-movil nav a:nth-child(2){transition-delay:.24s}
body.menu-abierto .menu-movil nav a:nth-child(3){transition-delay:.30s}
body.menu-abierto .menu-movil nav a:nth-child(4){transition-delay:.36s}
body.menu-abierto .menu-movil nav a:nth-child(5){transition-delay:.42s}
body.menu-abierto .menu-movil nav a:nth-child(6){transition-delay:.48s}
body.menu-abierto .menu-movil nav a:nth-child(7){transition-delay:.54s}
.menu-movil__pie{margin-top:3rem; display:flex; flex-wrap:wrap; gap:1.5rem; font-size:.8125rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gris-400)}

/* --------------------------------------------------------------- hero */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; background:var(--hueso); overflow:hidden}
.hero__fondo{position:absolute; inset:0; z-index:0}
.hero__fondo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.42) 0%,rgba(10,10,10,.12) 38%,rgba(10,10,10,.72) 100%);
}
.hero__fondo img,.hero__fondo video{width:100%; height:100%; object-fit:cover}
.hero__contenido{position:relative; z-index:2; width:100%; padding-block:clamp(3rem,9vh,7rem); color:var(--blanco)}
.hero__titulo{max-width:17ch}
.hero__sub{max-width:44ch; margin-top:1.8rem; color:rgba(255,255,255,.82); font-size:clamp(1rem,.95rem + .3vw,1.15rem)}
.hero__acciones{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.6rem}
.hero__meta{
  display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,4rem);
  margin-top:clamp(2.5rem,6vh,4.5rem); padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.22);
}
.hero__meta div{min-width:8rem}
.hero__meta b{display:block; font-family:var(--serif); font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem); font-weight:400; line-height:1}
.hero__meta span{font-size:.6875rem; text-transform:uppercase; letter-spacing:.24em; color:rgba(255,255,255,.6)}

/* hero variante retrato (home)
   --hero-foto-y controla el encuadre vertical de la foto: menos % la baja,
   más % la sube. Es el único número que hay que tocar para reencuadrarla. */
/* La foto se ancla por ARRIBA (--hero-foto-y:0), no por porcentaje: así su
   cabeza queda siempre a la misma distancia del borde superior, sea cual sea
   el ancho de la ventana. El aire sobre su cabeza (unos 140 px, lo justo para
   librar la cabecera) va incorporado en el propio archivo adriana-hero.jpg.
   Para bajarla, sube el porcentaje; para subirla más, hay que recortar el
   archivo por arriba, no tocar este número. */
.hero-retrato{
  --hero-foto-y:0%;
  --hero-foto-aire:0rem;
  display:grid; align-items:end;
  min-height:clamp(600px,84svh,880px);
  background:var(--hueso); position:relative; overflow:hidden;
}
@media(min-width:1000px){
  .hero-retrato{grid-template-columns:1fr 1fr; align-items:stretch}
}

.hero-retrato__texto{
  position:relative; z-index:3; grid-area:1/1;
  padding:clamp(6rem,12vh,8rem) var(--gutter) clamp(3rem,6vh,4rem);
  display:flex; flex-direction:column; justify-content:flex-end;
}
@media(min-width:1000px){
  /* el bloque va en la columna derecha: se centra en vertical y su borde
     derecho se alinea con el contenedor general del sitio */
  .hero-retrato__texto{
    grid-area:auto;
    /* anclado arriba, justo bajo la cabecera, en lugar de centrado */
    justify-content:flex-start;
    padding-left:clamp(2rem,4vw,4rem);
    padding-right:max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)));
    padding-block:clamp(6.5rem,12vh,8.5rem) clamp(2.5rem,5vh,3.5rem);
  }
}

.hero-retrato__foto{
  grid-area:1/1; position:relative; height:100%; min-height:100svh;
  padding-top:var(--hero-foto-aire);
}
@media(min-width:1000px){.hero-retrato__foto{grid-area:auto; min-height:0}}
.hero-retrato__foto img{
  width:100%; height:100%; object-fit:cover;
  object-position:center var(--hero-foto-y);
}
.hero-retrato__foto::after{
  content:''; position:absolute; inset:var(--hero-foto-aire) 0 0 0;
  background:linear-gradient(180deg,rgba(244,242,239,.85) 0%,rgba(244,242,239,.35) 45%,rgba(244,242,239,.9) 100%);
}
@media(min-width:1000px){
  /* en dos columnas la foto ya no lleva texto encima: solo se difumina
     el borde derecho para coser la imagen con la columna de texto */
  .hero-retrato__foto::after{
    background:linear-gradient(90deg,rgba(244,242,239,0) 62%,rgba(244,242,239,.55) 88%,rgba(244,242,239,.92) 100%);
  }
}
/* titular del hero: primero la marca, después el eslogan y los mercados */
.hero-titular{display:block; font-family:var(--serif); font-weight:300; text-transform:uppercase}

/* el logotipo manda: se dimensiona por ancho para que crezca de verdad */
.hero-titular__logo{
  display:block; height:auto;
  width:clamp(240px,27vw,400px); max-width:100%;
  margin-bottom:clamp(1.6rem,3.4vw,2.6rem);
}
/* Eslogan: "Invest" y "Live" son las palabras ancla y van a mayor tamaño,
   en versal y con tracking; el resto las acompaña en cursiva y más pequeño. */
.hero-titular__slogan{
  display:block;
  font-size:clamp(2rem,.8rem + 4.4vw,4.2rem);
  line-height:1.06; letter-spacing:.02em;
}
.hero-titular__slogan b{
  font-weight:400; font-size:1.32em; letter-spacing:.03em;
}
.hero-titular__slogan em{
  font-style:italic; text-transform:lowercase;
  font-size:.82em; letter-spacing:.01em; color:var(--gris-600);
}
.hero-titular__regla{
  display:block; width:clamp(3rem,8vw,5.5rem); height:1px;
  background:var(--bronce); margin:clamp(1.2rem,2.4vw,1.8rem) 0;
}
.hero-titular__mercados{
  display:block; font-family:var(--sans); font-size:.75rem; font-weight:400;
  letter-spacing:.28em; color:var(--gris-600); text-transform:uppercase;
}

/* línea compacta de credenciales, sustituye al bloque de cifras grandes */
.hero__credenciales{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem;
  margin:clamp(2.2rem,4.5vw,3.2rem) 0 0; padding-top:1.4rem;
  border-top:1px solid rgba(10,10,10,.16);
  font-size:.6875rem; text-transform:uppercase; letter-spacing:.22em;
  color:var(--gris-600);
}
.hero__credenciales i{font-style:normal; color:var(--bronce)}

/* (la marca de agua del nombre se retiró: el logotipo del hero ya cumple esa función) */

/* --------------------------------------------------------------- marquesina logos */
.marquesina{
  padding-block:clamp(2.2rem,4vw,3.4rem);
  border-block:1px solid var(--gris-200);
  background:var(--blanco);
  overflow:hidden;
}
.oscuro .marquesina,.marquesina.oscura{background:var(--negro); border-color:rgba(255,255,255,.14)}
.marquesina__titulo{
  text-align:center; font-size:.6875rem; text-transform:uppercase; letter-spacing:.3em;
  color:var(--gris-600); margin-bottom:2rem;
}
.marquesina__pista{display:flex; width:max-content; animation:desliza 46s linear infinite}
.marquesina:hover .marquesina__pista{animation-play-state:paused}
.marquesina__grupo{display:flex; align-items:center; flex:none}
.marquesina__grupo img{
  height:clamp(26px,3.4vw,42px); width:auto; object-fit:contain;
  margin-inline:clamp(1.8rem,4.5vw,4.2rem);
  filter:grayscale(1); opacity:.45;
  transition:opacity .45s var(--ease), filter .45s var(--ease);
}
.marquesina__grupo img:hover{opacity:1; filter:grayscale(0)}
.marquesina.oscura .marquesina__grupo img{filter:grayscale(1) invert(1); opacity:.5}
.marquesina.oscura .marquesina__grupo img:hover{opacity:.95}
.marquesina__grupo span.logotipo-texto{
  font-family:var(--serif); font-size:clamp(1rem,1.9vw,1.55rem); text-transform:uppercase;
  letter-spacing:.18em; white-space:nowrap; color:var(--gris-600);
  margin-inline:clamp(1.8rem,4.5vw,4.2rem); opacity:.55;
  transition:opacity .45s var(--ease), color .45s var(--ease);
}
.marquesina__grupo span.logotipo-texto:hover{opacity:1; color:var(--negro)}
.marquesina.oscura .marquesina__grupo span.logotipo-texto{color:var(--gris-400)}
.marquesina.oscura .marquesina__grupo span.logotipo-texto:hover{color:var(--blanco)}
@keyframes desliza{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* cinta de texto */
.cinta{background:var(--negro); color:var(--hueso); padding-block:clamp(1.1rem,2vw,1.6rem); overflow:hidden; border-block:1px solid var(--negro)}
.cinta__pista{display:flex; width:max-content; animation:desliza 34s linear infinite}
.cinta__grupo{display:flex; flex:none; align-items:center}
.cinta__grupo span{
  font-family:var(--serif); font-size:clamp(1.1rem,2.4vw,1.9rem);
  text-transform:uppercase; letter-spacing:.12em; white-space:nowrap;
  padding-inline:clamp(1.2rem,3vw,2.4rem);
}
.cinta__grupo i{font-style:normal; color:var(--bronce); font-size:.7em; align-self:center}

/* --------------------------------------------------------------- figuras */
.figura{position:relative; overflow:hidden; background:var(--hueso-2)}
.figura img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out)}
.figura:hover img{transform:scale(1.045)}
.ratio-retrato{aspect-ratio:3/4}
.ratio-cuadro{aspect-ratio:1/1}
.ratio-paisaje{aspect-ratio:4/3}
.ratio-ancho{aspect-ratio:16/10}
.ratio-cine{aspect-ratio:21/9}
.figura__pie{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1.6rem;
  background:linear-gradient(0deg,rgba(10,10,10,.78),transparent);
  color:var(--blanco); font-size:.6875rem; text-transform:uppercase; letter-spacing:.22em;
}

/* --------------------------------------------------------------- servicios */
.servicio{padding:clamp(1.8rem,3vw,2.6rem) 0; border-top:1px solid var(--gris-200)}
.oscuro .servicio{border-color:rgba(255,255,255,.16)}
.servicio__num{font-family:var(--serif); font-size:.95rem; letter-spacing:.2em; color:var(--bronce); display:block; margin-bottom:.9rem}
.servicio h3{font-family:var(--sans); font-size:.875rem; font-weight:500; text-transform:uppercase; letter-spacing:.2em; margin-bottom:1rem}
.servicio p{font-size:1rem; color:var(--gris-600); margin-bottom:1.4rem}
.oscuro .servicio p{color:var(--gris-400)}

/* tarjeta imagen + texto */
.tarjeta{display:flex; flex-direction:column; gap:1.4rem}
.tarjeta__cuerpo h3{font-family:var(--serif); font-size:clamp(1.25rem,1.1rem + .5vw,1.6rem); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.7rem}
.tarjeta__cuerpo p{font-size:1rem; color:var(--gris-600)}
.tarjeta__num{
  position:absolute; left:1.4rem; bottom:1.1rem; z-index:2;
  font-family:var(--serif); font-size:clamp(2.4rem,5vw,3.6rem); line-height:1; color:var(--blanco);
}

/* --------------------------------------------------------------- cita */
.cita{max-width:60ch; margin-inline:auto; text-align:center}
.cita blockquote{margin:0; font-family:var(--serif); font-style:italic; font-size:clamp(1.4rem,1.1rem + 1.6vw,2.5rem); line-height:1.35}
.cita figcaption{margin-top:2rem; font-size:.6875rem; text-transform:uppercase; letter-spacing:.28em; color:var(--gris-600)}
.oscuro .cita figcaption{color:var(--gris-400)}

/* --------------------------------------------------------------- elle / proyecto
   Portada de vídeo a sangre. El velo es ligero para que la imagen respire:
   solo se oscurece la franja inferior, justo donde se apoya el texto. */
.proyecto-portada{
  position:relative; overflow:hidden; background:var(--negro);
  min-height:clamp(520px,86svh,880px);
  display:flex; align-items:flex-end;
}
.proyecto-portada__media{position:absolute; inset:0; z-index:0}
.proyecto-portada__media video,
.proyecto-portada__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block;
}
.proyecto-portada__media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,10,10,.38) 0%,rgba(10,10,10,.04) 22%,rgba(10,10,10,0) 52%,rgba(10,10,10,.58) 86%,rgba(10,10,10,.76) 100%),
    linear-gradient(90deg,rgba(10,10,10,.34) 0%,rgba(10,10,10,0) 52%);
}
.proyecto-portada__txt{
  position:relative; z-index:2; width:100%; color:var(--blanco);
  padding-block:clamp(2rem,5vh,3.5rem);
}
.proyecto-portada__txt .kicker{color:rgba(255,255,255,.78); margin-bottom:1rem}
.proyecto-portada__txt .entradilla{color:rgba(255,255,255,.84)}
/* la protagonista es la imagen, no la tipografía: titular contenido */
.proyecto-portada__titulo{
  font-family:var(--serif); font-weight:300; text-transform:uppercase;
  font-size:clamp(1.45rem,.95rem + 1.8vw,2.35rem);
  line-height:1.06; letter-spacing:.1em; margin:0;
}
.proyecto-portada__pie{
  display:flex; flex-wrap:wrap; gap:.5rem 1.3rem; align-items:center;
  margin:clamp(1.4rem,2.8vw,2rem) 0 0; padding-top:1.1rem;
  border-top:1px solid rgba(255,255,255,.22);
  font-size:.6875rem; text-transform:uppercase;
  letter-spacing:.22em; color:rgba(255,255,255,.72);
}
.proyecto-portada__pie i{font-style:normal; color:var(--bronce-claro)}

.datos{display:grid; gap:0; border-top:1px solid var(--gris-200)}
@media(min-width:700px){.datos{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.datos{grid-template-columns:repeat(4,1fr)}}
.datos div{padding:clamp(1.6rem,3vw,2.4rem) 0; border-bottom:1px solid var(--gris-200)}
@media(min-width:700px){.datos div{padding-inline:clamp(1rem,2.5vw,2rem)} .datos div:first-child{padding-left:0}}
.oscuro .datos,.oscuro .datos div{border-color:rgba(255,255,255,.16)}
.datos dt{font-size:.6875rem; text-transform:uppercase; letter-spacing:.24em; color:var(--gris-600); margin-bottom:.7rem}
.oscuro .datos dt{color:var(--gris-400)}
.datos dd{margin:0; font-family:var(--serif); font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem); line-height:1.1}

/* galería mosaico */
.mosaico{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.5rem,1.2vw,1rem)}
@media(min-width:900px){.mosaico{grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(0,1fr)}}
.mosaico .figura{aspect-ratio:1/1}
@media(min-width:900px){
  .mosaico .g-2x2{grid-column:span 2; grid-row:span 2; aspect-ratio:1/1}
  .mosaico .g-2x1{grid-column:span 2; aspect-ratio:2/1}
}

/* reproductor */
.reproductor{position:relative; aspect-ratio:16/9; background:var(--negro); overflow:hidden; cursor:pointer}
.reproductor video{width:100%; height:100%; object-fit:cover}
/* Como el vídeo ya se reproduce solo, el control no tapa la imagen:
   es una pastilla discreta en la esquina inferior derecha. */
.reproductor__boton{
  position:absolute; right:clamp(.85rem,1.8vw,1.5rem); bottom:clamp(.85rem,1.8vw,1.5rem);
  display:flex; align-items:center; gap:.65rem;
  padding:.72rem 1.15rem;
  background:rgba(10,10,10,.5); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.3); color:var(--blanco);
  transition:background .4s var(--ease), border-color .4s var(--ease), opacity .5s var(--ease);
}
.reproductor:hover .reproductor__boton{background:rgba(10,10,10,.78); border-color:rgba(255,255,255,.6)}
.reproductor__boton > span{display:grid; place-items:center; width:15px; height:15px; flex:none}
.reproductor__boton > span svg{width:100%; height:100%}
.reproductor__boton em{
  font-style:normal; font-size:.6875rem;
  text-transform:uppercase; letter-spacing:.2em; white-space:nowrap;
}
/* con el sonido activo la pastilla desaparece y quedan los controles nativos */
.reproductor.reproduciendo .reproductor__boton{opacity:0; pointer-events:none}

/* --------------------------------------------------------------- artículos */
.articulo-tarjeta{display:flex; flex-direction:column; gap:1.25rem; height:100%}
.articulo-tarjeta .figura{aspect-ratio:3/2}
.articulo-tarjeta__meta{display:flex; align-items:center; gap:.8rem; font-size:.6875rem; text-transform:uppercase; letter-spacing:.2em; color:var(--gris-600)}
.articulo-tarjeta__meta i{font-style:normal; color:var(--bronce)}
.articulo-tarjeta h3{
  font-family:var(--serif); font-size:clamp(1.2rem,1.05rem + .55vw,1.55rem);
  line-height:1.22; letter-spacing:.01em;
  transition:opacity .35s var(--ease);
}
.articulo-tarjeta:hover h3{opacity:.62}
.articulo-tarjeta p{font-size:.95rem; color:var(--gris-600); margin:0}
.articulo-tarjeta__pie{margin-top:auto; padding-top:1rem}

/* portada generada por categoría */
.portada{position:relative; display:grid; place-items:center; overflow:hidden; background:var(--negro-2)}
.portada img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; transition:transform 1.2s var(--ease-out), opacity .6s}
.figura:hover .portada img{transform:scale(1.05)}
.portada__sello{
  position:relative; z-index:2; text-align:center; color:var(--blanco);
  font-family:var(--serif); text-transform:uppercase; letter-spacing:.22em;
  font-size:clamp(.7rem,1.4vw,.85rem); padding:0 1.5rem;
}
.portada__sello b{display:block; font-size:clamp(2.2rem,5vw,3.4rem); letter-spacing:.04em; font-weight:400; line-height:1; margin-bottom:.5rem}

/* filtros */
.filtros{display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:clamp(2.5rem,5vw,4rem)}
.filtro{
  padding:.6rem 1.3rem; font-size:.6875rem; text-transform:uppercase; letter-spacing:.2em;
  border:1px solid var(--gris-200); color:var(--gris-600);
  transition:all .4s var(--ease);
}
.filtro:hover{border-color:var(--negro); color:var(--negro)}
.filtro.activo{background:var(--negro); border-color:var(--negro); color:var(--blanco)}

/* cuerpo del artículo */
.prosa{max-width:70ch; margin-inline:auto; font-size:1.125rem; line-height:1.8}
.prosa h2{font-family:var(--serif); font-size:clamp(1.6rem,1.3rem + 1.1vw,2.3rem); text-transform:uppercase; letter-spacing:.04em; margin:3rem 0 1.2rem; line-height:1.15}
.prosa h3{font-family:var(--sans); font-size:.875rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em; margin:2.4rem 0 .9rem}
.prosa p{margin-bottom:1.5em; color:var(--gris-900)}
.prosa ul,.prosa ol{margin:0 0 1.6em; padding-left:1.3em; color:var(--gris-900)}
.prosa li{margin-bottom:.6em}
.prosa li::marker{color:var(--bronce)}
.prosa strong{font-weight:500; color:var(--negro)}
.prosa a{border-bottom:1px solid var(--bronce); transition:background .35s}
.prosa a:hover{background:rgba(168,124,85,.12)}
.prosa blockquote{
  margin:2.6rem 0; padding:.4rem 0 .4rem 2rem; border-left:2px solid var(--bronce);
  font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,1rem + .7vw,1.5rem); line-height:1.5;
}
.prosa figure{margin:2.6rem 0}
.prosa figcaption{margin-top:.9rem; font-size:.8125rem; color:var(--gris-600); letter-spacing:.04em}
.prosa table{width:100%; border-collapse:collapse; margin:2.2rem 0; font-size:.95rem}
.prosa th,.prosa td{padding:.85rem 1rem; border-bottom:1px solid var(--gris-200); text-align:left}
.prosa th{font-family:var(--sans); font-size:.75rem; text-transform:uppercase; letter-spacing:.16em; font-weight:500}
.tabla-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.aviso-dato{
  margin:2.4rem 0; padding:1.4rem 1.6rem; background:var(--hueso);
  font-size:.9375rem; color:var(--gris-600); line-height:1.7; border-left:2px solid var(--gris-200);
}

/* --------------------------------------------------------------- formularios */
.campo{position:relative; margin-bottom:1.3rem}
.campo input,.campo textarea,.campo select{
  width:100%; padding:1rem 0 .8rem; background:transparent;
  border:0; border-bottom:1px solid var(--gris-200);
  font-family:var(--sans); font-size:1rem; font-weight:300; color:inherit;
  border-radius:0; -webkit-appearance:none; appearance:none;
  transition:border-color .4s var(--ease);
}
.campo textarea{resize:vertical; min-height:6rem}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none; border-color:var(--negro)}
.campo label{
  display:block; font-size:.6875rem; text-transform:uppercase; letter-spacing:.22em;
  color:var(--gris-600); margin-bottom:.2rem;
}
.oscuro .campo input,.oscuro .campo textarea{border-color:rgba(255,255,255,.28); color:var(--hueso)}
.oscuro .campo input:focus,.oscuro .campo textarea:focus{border-color:var(--blanco)}
.oscuro .campo label{color:var(--gris-400)}
.campo input::placeholder,.campo textarea::placeholder{color:var(--gris-400)}
.legal{font-size:.75rem; line-height:1.6; color:var(--gris-600); letter-spacing:.02em}
.oscuro .legal{color:var(--gris-400)}
.legal a{border-bottom:1px solid currentColor}
.casilla{display:flex; align-items:flex-start; gap:.7rem; margin-bottom:1.4rem}
.casilla input{width:16px; height:16px; margin-top:.28rem; flex:none; accent-color:var(--negro)}
.mensaje-form{margin-top:1rem; font-size:.875rem; letter-spacing:.04em; min-height:1.3em}
.mensaje-form.ok{color:#2E7D5B}
.mensaje-form.error{color:#B5563A}
.oscuro .mensaje-form.ok{color:#7FD4AC}

/* --------------------------------------------------------------- popup webinar */
.superpuesto{
  position:fixed; inset:0; z-index:1200;
  background:rgba(10,10,10,.72); backdrop-filter:blur(6px);
  display:grid; place-items:center; padding:1.25rem;
  opacity:0; visibility:hidden; transition:opacity .6s var(--ease), visibility .6s;
}
.superpuesto.visible{opacity:1; visibility:visible}
.modal{
  position:relative; width:100%; max-width:940px; max-height:92svh; overflow-y:auto;
  background:var(--blanco); display:grid;
  transform:translateY(28px) scale(.985); opacity:0;
  transition:transform .75s var(--ease-out), opacity .6s var(--ease);
}
.superpuesto.visible .modal{transform:none; opacity:1}
@media(min-width:820px){.modal{grid-template-columns:5fr 6fr; max-height:min(88svh,720px)}}
.modal__figura{position:relative; background:var(--negro); min-height:190px}
.modal__figura img{width:100%; height:100%; object-fit:cover; opacity:.82}
.modal__figura::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,10,.35),rgba(10,10,10,.72))}
.modal__sello{
  position:absolute; z-index:2; left:0; right:0; bottom:0; padding:clamp(1.4rem,3vw,2.2rem);
  color:var(--blanco);
}
.modal__sello span{font-size:.6875rem; text-transform:uppercase; letter-spacing:.26em; color:var(--bronce-claro)}
.modal__sello p{font-family:var(--serif); font-size:clamp(1.2rem,1rem + .9vw,1.7rem); text-transform:uppercase; letter-spacing:.05em; line-height:1.15; margin:.7rem 0 0}
.modal__cuerpo{padding:clamp(1.8rem,4vw,3.2rem); display:flex; flex-direction:column; justify-content:center}
.modal__cerrar{
  position:absolute; top:1rem; right:1rem; z-index:5;
  width:40px; height:40px; display:grid; place-items:center;
  background:var(--blanco); color:var(--negro); border-radius:50%;
  transition:transform .4s var(--ease), background .4s;
}
.modal__cerrar:hover{transform:rotate(90deg)}
.modal__exito{display:none; text-align:center; padding:1rem 0}
.modal__exito svg{width:46px; height:46px; margin:0 auto 1.5rem; color:var(--bronce); display:block}
.modal.enviado .modal__formulario{display:none}
.modal.enviado .modal__exito{display:block}

/* --------------------------------------------------------------- CTA flotante */
.flotante{
  position:fixed; right:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,2rem); z-index:850;
  display:flex; flex-direction:column; gap:.7rem; align-items:flex-end;
}
.flotante a{
  display:flex; align-items:center; gap:.7rem;
  padding:.9rem 1.35rem; background:var(--negro); color:var(--blanco);
  font-size:.6875rem; text-transform:uppercase; letter-spacing:.2em;
  box-shadow:0 12px 34px rgba(0,0,0,.22);
  transform:translateY(18px); opacity:0; pointer-events:none;
  transition:transform .6s var(--ease-out), opacity .5s var(--ease), background .4s;
}
.flotante.visible a{transform:none; opacity:1; pointer-events:auto}
.flotante a:hover{background:var(--bronce)}
.flotante svg{width:16px; height:16px; flex:none}
@media(max-width:560px){.flotante a span{display:none} .flotante a{padding:1rem; border-radius:50%}}

/* --------------------------------------------------------------- footer */
.pie{background:var(--negro); color:var(--hueso); padding-block:clamp(4rem,8vw,7rem) 2.5rem}
.pie__logo{line-height:0; margin-bottom:1.8rem}
.pie__logo img{height:clamp(40px,5vw,58px); width:auto; max-width:100%; object-fit:contain; object-position:left center; filter:invert(1)}
.pie__rejilla{display:grid; gap:clamp(2.5rem,5vw,4rem); margin-bottom:clamp(3rem,6vw,5rem)}
@media(min-width:820px){.pie__rejilla{grid-template-columns:1.6fr 1fr 1fr 1.4fr}}
.pie h4{font-size:.6875rem; text-transform:uppercase; letter-spacing:.26em; color:var(--gris-400); margin-bottom:1.5rem}
.pie ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.85rem}
.pie ul a{font-size:.95rem; color:var(--gris-200); transition:color .35s}
.pie ul a:hover{color:var(--blanco)}
.pie__legal{
  border-top:1px solid rgba(255,255,255,.14); padding-top:2rem;
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  font-size:.75rem; letter-spacing:.12em; color:var(--gris-600); text-transform:uppercase;
}
.pie__legal a:hover{color:var(--gris-200)}
.redes{display:flex; gap:1rem; margin-top:1.6rem}
.redes a{
  width:40px; height:40px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.22); transition:all .4s var(--ease);
}
.redes a:hover{background:var(--blanco); color:var(--negro); border-color:var(--blanco)}
.redes svg{width:16px; height:16px}

/* ==========================================================================
   LANDINGS DE EVENTO (páginas no listadas: /webinar-miami/ y similares)

   Criterios propios, distintos del resto del sitio:
   · Frase normal en vez de versales. En el sitio corporativo la mayúscula
     da empaque; en una landing entorpece la lectura rápida.
   · Contraste por peso: la negrita hace el trabajo que allí hacía el tracking.
   · El bronce se usa de verdad, no como detalle.
   · Sin menú: cada enlace de salida es una fuga de conversión.
   ========================================================================== */
/* La landing usa una geométrica tipo Century Gothic en toda la página,
   distinta de la Jost del sitio corporativo. */
body.landing{font-family:var(--geo)}
.landing .display,
.landing h1,.landing h2,.landing h3{font-family:var(--geo); text-transform:none; letter-spacing:-.015em}
.landing .campo input,.landing .campo select,.landing .campo textarea,
.landing .btn,.landing .kicker,.landing .servicio h3,
.landing .ponente__nombre,.landing .tarjeta-fecha b{font-family:var(--geo)}
.landing .btn{text-transform:none; letter-spacing:.01em; font-size:1rem; font-weight:500; padding:1.15rem 2rem}
.landing .kicker{
  display:inline-flex; text-transform:none; letter-spacing:.02em;
  font-size:.9375rem; font-weight:500; color:var(--bronce);
}
.landing .kicker::before,.landing .kicker::after{display:none}
.landing .servicio h3{font-family:var(--sans); text-transform:none; letter-spacing:-.01em; font-size:1.125rem; font-weight:600}
.landing .campo label{text-transform:none; letter-spacing:.01em; font-size:.875rem; font-weight:500; color:var(--gris-900)}
.landing .legal{text-transform:none; letter-spacing:normal}

/* palabra o frase resaltada dentro de un titular */
.destacado{font-weight:600; position:relative; white-space:nowrap}
.destacado::after{
  content:''; position:absolute; left:0; right:0; bottom:.06em; height:.14em;
  background:var(--bronce); opacity:.85; z-index:-1;
}
.destacado--suelto{white-space:normal}

/* --------------------------------------------------------- portada a sangre
   Foto de Miami ocupando todo el hero y el texto encima. El formulario baja
   a su propia sección, en tarjeta ancha, justo debajo. */
.evento-portada{
  position:relative; overflow:hidden; background:var(--negro);
  min-height:clamp(600px,92svh,940px);
  display:flex; align-items:center;
  padding-block:clamp(2rem,5vh,3.5rem);
}
.evento-portada__media{position:absolute; inset:0; z-index:0}
.evento-portada__media img{width:100%; height:100%; object-fit:cover; object-position:center 58%}
.evento-portada__media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,10,10,.6) 0%,rgba(10,10,10,.3) 40%,rgba(10,10,10,.72) 100%),
    linear-gradient(90deg,rgba(10,10,10,.78) 0%,rgba(10,10,10,.25) 58%,rgba(10,10,10,.1) 100%);
}
/* dos columnas: el mensaje a la izquierda, el formulario flotando a la derecha.
   Sin z-index en la rejilla, para que la torre pueda meterse por delante
   del titular sin quedar por encima del formulario. */
.evento-portada__rejilla{
  position:relative; width:100%;
  display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center;
}
@media(min-width:1000px){.evento-portada__rejilla{grid-template-columns:1.05fr .95fr}}
.evento-portada__txt{position:relative; z-index:2; color:var(--blanco)}
.evento-portada__form{position:relative; z-index:4}

.evento-portada__txt .entradilla{color:rgba(255,255,255,.9); max-width:44ch}
.evento-portada__pie{
  display:flex; flex-wrap:wrap; gap:clamp(1.2rem,3vw,2.2rem);
  align-items:center; margin-top:clamp(1.4rem,3vw,2rem);
}
.evento-portada__pie .cuenta-atras{margin-top:0}
.evento-portada__pie .avatares{margin-top:0}
.tarjeta-form__titulo{
  font-family:var(--sans); font-weight:600; letter-spacing:-.03em;
  font-size:clamp(1.35rem,1.2rem + .7vw,1.75rem); line-height:1.15; margin-bottom:.45rem;
}
.tarjeta-form__sub{font-size:.9375rem; color:var(--gris-600); margin-bottom:1.4rem}

/* Titular: geométrica compacta arriba y la palabra clave en script debajo,
   solapada hacia arriba para que las dos líneas se traben. */
.titular-portada{
  font-family:var(--geo); font-weight:600;
  font-size:clamp(1.85rem,1rem + 2.9vw,3.1rem);
  line-height:.94; letter-spacing:-.045em; margin:0; max-width:13ch;
}
.titular-portada__script{
  display:block; font-family:var(--script); font-weight:400;
  font-size:1.85em; line-height:.82; letter-spacing:0;
  color:var(--bronce-claro); text-transform:none;
  margin:.06em 0 0 -.03em; padding-bottom:.08em;
  text-shadow:0 2px 24px rgba(0,0,0,.45);
}


/* --------------------------------------------------------- cabecera */
.cabecera-landing{padding-block:clamp(.9rem,2vw,1.3rem); background:var(--negro)}
.cabecera-landing .contenedor-ancho{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.cabecera-landing img{height:clamp(28px,3.2vw,40px); width:auto; max-width:52vw; object-fit:contain; object-position:left center; filter:invert(1)}
.cabecera-landing__etiqueta{
  font-size:.8125rem; font-weight:500; color:var(--bronce-claro); white-space:nowrap;
}
@media(max-width:520px){.cabecera-landing__etiqueta{display:none}}

/* Antetítulo simple: sin caja, solo un filete y texto en negrita */
.evento-antetitulo{
  display:flex; align-items:center; gap:.8rem; margin:0 0 1.1rem;
  font-size:1rem; font-weight:600; letter-spacing:.01em; color:var(--blanco);
}
.evento-antetitulo::before{content:''; width:2.2rem; height:2px; background:var(--bronce); flex:none}

/* Tarjeta de fecha partida en paneles, al estilo de la referencia:
   día · hora · precio. El panel oscuro del final es el que canta el "gratis". */
.tarjeta-fecha{
  display:inline-flex; flex-wrap:wrap; margin-top:clamp(1.4rem,3vw,2rem);
  background:var(--blanco); color:var(--negro);
  box-shadow:0 14px 40px rgba(0,0,0,.3);
}
.tarjeta-fecha > div{
  padding:.9rem clamp(1rem,2vw,1.5rem);
  display:flex; flex-direction:column; justify-content:center; min-width:0;
}
.tarjeta-fecha > div + div{border-left:1px solid var(--gris-200)}
.tarjeta-fecha b{
  display:block; font-weight:600; font-size:clamp(1.05rem,1rem + .45vw,1.35rem);
  letter-spacing:-.025em; line-height:1.15; white-space:nowrap;
}
.tarjeta-fecha span{font-size:.875rem; color:var(--gris-600); white-space:nowrap}
.tarjeta-fecha__precio{background:var(--negro); border-left:0 !important}
.tarjeta-fecha__precio b{color:var(--blanco); font-size:clamp(1.15rem,1rem + .6vw,1.5rem)}
.tarjeta-fecha__precio span{color:var(--bronce-claro)}
@media(max-width:440px){
  .tarjeta-fecha{display:grid; grid-template-columns:1fr 1fr; width:100%}
  .tarjeta-fecha__precio{grid-column:1 / -1; border-top:1px solid var(--gris-200)}
  .tarjeta-fecha > div + div{border-left:1px solid var(--gris-200)}
}

/* Solo contiene la hora local del visitante, que añade el JS */
.evento-fecha{margin:.9rem 0 0}
.evento-fecha__local{font-size:.875rem; color:rgba(255,255,255,.62)}

.cuenta-atras{display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-top:clamp(1.2rem,2.5vw,1.8rem); max-width:26rem}
.cuenta-atras div{
  padding:.8rem .35rem; text-align:center;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06);
}
.cuenta-atras b{
  display:block; font-family:var(--sans); font-weight:600;
  font-size:clamp(1.35rem,1.1rem + .9vw,1.85rem); line-height:1; font-variant-numeric:tabular-nums;
}
.cuenta-atras span{font-size:.6875rem; color:rgba(255,255,255,.6)}
.cuenta-atras.terminada{opacity:.45}
.cuenta-atras--claro div{border-color:rgba(255,255,255,.22)}

/* --------------------------------------------------------- formulario */
.tarjeta-form{
  background:var(--blanco); color:var(--negro);
  padding:clamp(1.4rem,3vw,2.4rem);
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.tarjeta-form--claro{background:var(--blanco); box-shadow:none; border:1px solid var(--gris-200)}

.campo-telefono{display:grid; grid-template-columns:minmax(6.5rem,auto) 1fr; gap:.6rem}
.campo-telefono select{min-width:0}

/* --------------------------------------------------------- puntos */
.landing .servicio__num{
  font-family:var(--sans); font-weight:600; font-size:1.75rem;
  letter-spacing:-.03em; color:var(--bronce); margin-bottom:.7rem;
}

.lista-marcada{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.85rem}
.lista-marcada li{position:relative; padding-left:1.9rem; font-size:1.0625rem}
.lista-marcada li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:.75rem; height:.45rem; border-left:2px solid var(--bronce);
  border-bottom:2px solid var(--bronce); transform:rotate(-45deg);
}
.lista-marcada--no li{color:var(--gris-600)}
.lista-marcada--no li::before{
  border:0; width:.75rem; height:2px; background:var(--gris-400);
  transform:none; top:.85em;
}

/* --------------------------------------------------------- ponentes
   Retratos pequeños en círculo y en blanco y negro. Los originales tienen
   poca resolución, y a este tamaño no se nota; el B/N además unifica cuatro
   fotos hechas en sitios y con luces muy distintas. */
.ponentes{
  display:grid; gap:clamp(1.75rem,3.5vw,2.75rem);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.ponente{text-align:center}
.ponente__foto{
  width:clamp(96px,13vw,132px); aspect-ratio:1/1; margin:0 auto 1rem;
  border-radius:50%; overflow:hidden; background:var(--hueso-2);
  border:1px solid var(--gris-200);
  box-shadow:0 10px 26px rgba(0,0,0,.12);
}
.oscuro .ponente__foto{border-color:rgba(255,255,255,.22); box-shadow:0 10px 26px rgba(0,0,0,.4)}
.ponente__foto img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s var(--ease-out);
}
.ponente:hover .ponente__foto img{transform:scale(1.06)}
.ponente__nombre{
  font-family:var(--sans); font-weight:600; font-size:1.0625rem;
  letter-spacing:-.015em; margin:0 0 .15rem; line-height:1.25;
}
.ponente__rol{font-size:.875rem; font-weight:500; color:var(--bronce); margin:0; line-height:1.35}

/* fila compacta de avatares para el hero */
.avatares{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin-top:clamp(1.4rem,3vw,2rem)}
.avatares__fotos{display:flex}
.avatares__fotos img{
  width:clamp(40px,5.5vw,52px); height:clamp(40px,5.5vw,52px);
  border-radius:50%; object-fit:cover; display:block;
  border:2px solid var(--negro); box-shadow:0 0 0 1px rgba(255,255,255,.3);
  margin-left:-.65rem;
}
.avatares__fotos img:first-child{margin-left:0}
.avatares__txt{font-size:.9375rem; color:rgba(255,255,255,.78); line-height:1.3}
.avatares__txt b{display:block; font-weight:600; color:var(--hueso)}

/* --------------------------------------------------------- faq */
.faq{border-top:1px solid var(--gris-200); max-width:70ch}
.faq__item{border-bottom:1px solid var(--gris-200)}
.faq__item summary{
  cursor:pointer; list-style:none; padding:1.3rem 2.5rem 1.3rem 0; position:relative;
  font-size:1.0625rem; font-weight:600; letter-spacing:-.01em;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:''; position:absolute; right:.35rem; top:50%; width:.7rem; height:.7rem;
  border-right:2px solid var(--bronce); border-bottom:2px solid var(--bronce);
  transform:translateY(-70%) rotate(45deg); transition:transform .35s var(--ease);
}
.faq__item[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq__item p{padding:0 2.5rem 1.4rem 0; margin:0; color:var(--gris-900); font-size:1rem}

/* --------------------------------------------------------- pie */
.pie-landing{background:var(--negro); color:var(--gris-400); padding-block:2rem; font-size:.875rem}
.pie-landing .contenedor{display:flex; flex-wrap:wrap; gap:.7rem 2rem; justify-content:space-between}
.pie-landing a{margin-left:1.4rem}
.pie-landing a:first-child{margin-left:0}
.pie-landing a:hover{color:var(--blanco)}

/* --------------------------------------------------------- barra móvil
   En móvil el formulario queda lejos en cuanto bajas: esta barra fija
   devuelve la acción a un pulgar de distancia en todo momento. */
.barra-movil{
  position:fixed; left:0; right:0; bottom:0; z-index:880;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background:rgba(10,10,10,.96); backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.14);
  transform:translateY(110%); transition:transform .45s var(--ease-out);
}
.barra-movil.visible{transform:none}
@media(min-width:860px){.barra-movil{display:none}}
.barra-movil__txt{color:var(--hueso); line-height:1.25; min-width:0}
.barra-movil__txt b{display:block; font-size:.9375rem; font-weight:600}
.barra-movil__txt span{font-size:.8125rem; color:var(--gris-400)}
.barra-movil .btn{padding:.85rem 1.3rem; font-size:.9375rem; flex:none}
@media(max-width:860px){body.landing{padding-bottom:4.5rem}}

/* --------------------------------------------------------- móvil */
@media(max-width:600px){
  .landing .seccion{padding-block:clamp(2.75rem,9vw,3.75rem)}
  .evento-hero{padding-block:1.75rem 2.25rem}
  .cuenta-atras{gap:.4rem}
  .cuenta-atras div{padding:.7rem .2rem}
  .campo-telefono{grid-template-columns:1fr; gap:.5rem}
  .tarjeta-form{margin-inline:calc(var(--gutter) * -.5); padding:1.5rem 1.25rem}
  .faq__item summary{padding-right:2rem; font-size:1rem}
  .faq__item p{padding-right:0}
  .ponente__foto{max-width:14rem}
}

/* --------------------------------------------------------------- animación entrada */
.revelar{opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
.revelar.visible{opacity:1; transform:none}
.revelar-d1{transition-delay:.1s} .revelar-d2{transition-delay:.2s}
.revelar-d3{transition-delay:.3s} .revelar-d4{transition-delay:.4s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .revelar{opacity:1; transform:none}
}