/* ═══════════════════════════════════════════════════════════════════════
   NATALIA DE SANDE · hoja de estilo única para las 7 páginas
   ───────────────────────────────────────────────────────────────────────
   Lenguaje visual tomado de luisfernandolopez.com (fondo claro, tipografía
   serif centrada, dorado como único color de acción, secciones oscuras de
   respiro) y paleta + tipografía del BrandBook de Natalia De Sande.

   ORDEN DEL ARCHIVO
     1. Tokens          6. Bandas y citas
     2. Base            7. Tarjetas y rejillas
     3. Cabecera        8. Acordeón
     4. Botones         9. Vídeos y reseñas
     5. Secciones      10. Pasos · Bio · CTA final · Pie
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 1. TOKENS ═══════════════════════════════════════════════════════ */
:root{
  /* Gama del BrandBook */
  --negro:#000000;
  --petroleo:#1B333F;
  --petroleo-hondo:#0F2430;   /* fondo de las secciones oscuras */
  --azul:#2C577A;
  --oro:#A78E60;
  --oro-claro:#DFBF71;
  --oro-hondo:#8A7345;
  --oro-noche:#75613A;        /* botón al pasar el ratón: 5,95 de contraste */
  --humo:#F7F7F7;
  --blanco:#FEFEFE;

  /* Roles */
  --fondo:var(--humo);
  --fondo-alt:#FFFFFF;
  --tinta:#12222B;            /* texto principal: petróleo casi negro */
  --tinta-suave:#4A5A63;
  --tinta-tenue:#7B8890;
  --linea:rgba(27,51,63,.14);
  --linea-oro:rgba(167,142,96,.45);
  --sombra:0 2px 4px rgba(18,34,43,.04), 0 12px 32px rgba(18,34,43,.07);
  --sombra-alta:0 4px 8px rgba(18,34,43,.06), 0 24px 60px rgba(18,34,43,.12);

  --ancho:1160px;
  --ancho-texto:720px;
  --pad:clamp(20px,5vw,48px);
  --alto-barra:84px;

  /* Tipografía. Cinzel sustituye a Trajan Pro (misma capital romana);
     Cormorant da el aire serif de la referencia sin perder legibilidad en
     titulares con minúsculas; Raleway es la de texto que fija el BrandBook. */
  --display:Cinzel,"Trajan Pro",Georgia,serif;
  --serif:"Cormorant Garamond",Georgia,serif;
  --texto:Raleway,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ═══ 2. BASE ════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--alto-barra) + 20px)}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:var(--texto); font-weight:400;
  font-size:clamp(16px,.55vw + 14.5px,17.5px); line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--oro); outline-offset:3px}

h1,h2,h3,h4{margin:0 0 .6em; line-height:1.25; font-weight:600}
/* Los titulares del copy vienen en mayúsculas: la capital romana es su sitio */
h1,h2{font-family:var(--display); letter-spacing:.04em; color:var(--petroleo)}
h1{font-size:clamp(24px,3.1vw,38px); line-height:1.3}
h2{font-size:clamp(20px,2.35vw,29px); line-height:1.35}
/* Los de segundo nivel llevan minúsculas y piden una serif de lectura */
h3{font-family:var(--serif); font-size:clamp(21px,2.1vw,27px); font-weight:600; color:var(--petroleo); letter-spacing:.005em}
h4{font-family:var(--texto); font-size:clamp(17px,1.5vw,19px); font-weight:600; letter-spacing:.02em}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
strong{font-weight:600; color:var(--tinta)}
/* En fondo oscuro la tinta es casi el mismo color que el fondo: sin esto, cada
   palabra en negrita de una sección oscura desaparece. Pasó en /regresion. */
.oscura strong{color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Rótulo dorado sobre el titular */
.eyebrow{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  letter-spacing:.24em; color:var(--oro);
  font-size:clamp(10.5px,.85vw,12.5px); line-height:1.6; margin:0 0 1.1em;
}
.lede{font-size:clamp(17px,1.1vw,19.5px); color:var(--tinta-suave); line-height:1.7}
.suave{color:var(--tinta-suave)}
.tenue{color:var(--tinta-suave); font-size:.9em}
.centrado{text-align:center}
.medida{max-width:var(--ancho-texto); margin-left:auto; margin-right:auto}

/* Filete dorado de separación: el hilo del logotipo */
.filete{border:0; height:1px; margin:clamp(38px,5vw,60px) auto; max-width:120px;
  background:linear-gradient(90deg,transparent,var(--oro),transparent)}

/* ═══ 3. CABECERA ════════════════════════════════════════════════════ */
.barra{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linea);
}
.barra-in{
  max-width:var(--ancho); margin:0 auto; padding:0 var(--pad);
  min-height:var(--alto-barra); display:flex; align-items:center; gap:20px;
}
/* Marca: el logotipo vectorial completo, sin retocar. Dos variantes del
   mismo archivo: el nombre en blanco para fondo oscuro y en petróleo para
   la barra, que va sobre fondo claro. */
.marca{display:flex; align-items:center; text-decoration:none; flex:none}
.marca img{height:52px; width:auto; flex:none}
@media(max-width:420px){.marca img{height:44px}}
/* En el pie no va el símbolo: solo la firma manuscrita, y con más presencia
   al ir sola. */
.marca-firma{height:auto; width:clamp(210px,24vw,290px); flex:none}
@media(max-width:420px){
  .marca-simbolo{width:40px; height:40px}
  .marca-simbolo img{width:168px; height:40px; margin-left:-64px}
  .marca-nombre{height:22px}
}

/* Firma manuscrita, para cerrar la biografía */
.firma-img{width:clamp(190px,20vw,250px); margin-top:1.4em}
.oscura .firma-img{filter:none}

.nav{margin-left:auto; display:flex; align-items:center; gap:clamp(14px,2vw,30px)}
.nav a{
  font-family:var(--texto); text-decoration:none; text-transform:uppercase;
  font-size:11.5px; letter-spacing:.14em; font-weight:500; color:var(--tinta-suave);
  padding:6px 0; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; white-space:nowrap;
}
.nav a:hover{color:var(--petroleo)}
.nav a[aria-current="page"]{color:var(--petroleo); border-bottom-color:var(--oro)}
.nav .btn{margin-left:6px; padding:.95em 1.5em; font-size:clamp(9.5px,.75vw,11px); letter-spacing:.11em}

/* Menú desplegable: casilla oculta, sin una línea de JS.
   El corte está en 1150px, no en el clásico 960: la barra lleva cinco
   enlaces, uno de ellos muy largo ("Empresas y Alta Dirección"), más la
   marca y el botón. Medido, necesita 1160px para caber en una línea;
   por debajo se salía por la derecha en tablet apaisada. */
.abrir-menu,.cerrar-menu{display:none}
@media(max-width:1150px){
  .nav{
    position:fixed; inset:var(--alto-barra) 0 auto 0; flex-direction:column; gap:0;
    background:#fff; border-bottom:1px solid var(--linea); padding:10px 0 22px;
    transform:translateY(-120%); transition:transform .32s cubic-bezier(.3,.8,.3,1);
    box-shadow:var(--sombra-alta); max-height:calc(100vh - var(--alto-barra)); overflow:auto;
  }
  .nav a{padding:15px var(--pad); width:100%; border-bottom:1px solid var(--linea); font-size:12.5px}
  .nav .btn{margin:18px var(--pad) 0; width:calc(100% - var(--pad)*2)}
  .abrir-menu{
    display:flex; margin-left:auto; width:44px; height:44px; align-items:center; justify-content:center;
    flex-direction:column; gap:5px;
  }
  .abrir-menu span{display:block; width:23px; height:1.5px; background:var(--petroleo); transition:transform .3s, opacity .2s}
  #menu:checked ~ .nav{transform:translateY(0)}
  #menu:checked ~ .abrir-menu span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  #menu:checked ~ .abrir-menu span:nth-child(2){opacity:0}
  #menu:checked ~ .abrir-menu span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}

/* Franja intermedia: cabe en una línea, pero justo. Menos aire y menos
   cuerpo para que no quede pegado al borde. */
@media(min-width:1151px) and (max-width:1340px){
  .nav{gap:17px}
  .nav a{font-size:10.5px; letter-spacing:.1em}
  .nav .btn{padding:.9em 1.15em; letter-spacing:.08em}
  .barra-in{gap:12px}
}

/* ═══ 4. BOTONES ═════════════════════════════════════════════════════ */
.btn{
  display:inline-block; text-decoration:none; text-align:center;
  background:var(--oro); color:var(--tinta); border:1px solid var(--oro);
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  letter-spacing:.13em; font-size:clamp(10.5px,.9vw,12.5px); line-height:1.4;
  padding:1.15em 2.4em; border-radius:2px;
  transition:background .2s, border-color .2s, transform .18s, box-shadow .2s;
}
.btn:hover{background:var(--oro-claro); border-color:var(--oro-claro); transform:translateY(-1px); box-shadow:0 10px 24px rgba(138,115,69,.28)}
.btn:active{transform:translateY(0)}
.btn-bloque{display:block; width:100%}
/* Secundario: solo contorno. Es el de "ver vídeo", "descargar", "leer más" */
.btn-linea{
  display:inline-block; text-decoration:none; text-align:center;
  background:none; color:var(--oro-hondo); border:1px solid var(--linea-oro);
  font-family:var(--texto); text-transform:uppercase; font-weight:600;
  letter-spacing:.13em; font-size:clamp(10px,.85vw,11.5px); line-height:1.4;
  padding:.95em 1.7em; border-radius:2px; transition:background .2s, color .2s, border-color .2s;
}
.btn-linea:hover{background:var(--oro); border-color:var(--oro); color:var(--tinta)}
/* Sobre fondo oscuro */
.oscura .btn-linea{color:var(--oro-claro); border-color:rgba(223,191,113,.5)}
.oscura .btn-linea:hover{background:var(--oro); border-color:var(--oro); color:var(--tinta)}
.btn-nota{margin-top:14px; font-size:13.5px; color:var(--tinta-tenue)}
.oscura .btn-nota{color:rgba(255,255,255,.6)}

/* Las tres condiciones de la primera conversación, bajo cada botón: duración,
   formato y coste. Son las tres preguntas que frenan a alguien con el cursor
   encima, y responderlas ahí evita que tenga que buscarlas. */
.condiciones{
  display:block; margin-top:13px;
  font-size:13px; letter-spacing:.02em; color:var(--tinta-tenue);
}
.oscura .condiciones{color:rgba(255,255,255,.62)}
.tarjeta .condiciones{margin-top:11px; text-align:center; font-size:12.5px}

/* La promesa de esfuerzo, dicha en voz alta junto a la llamada */
.alivio{
  font-family:var(--serif); font-size:clamp(18px,1.8vw,22px); line-height:1.45;
  color:var(--petroleo); max-width:34ch; margin:0 auto 22px;
}
.oscura .alivio{color:#fff}

/* ═══ 5. SECCIONES ═══════════════════════════════════════════════════ */
.seccion{position:relative; padding:clamp(56px,7vw,104px) var(--pad)}
.seccion.compacta{padding-block:clamp(40px,4.5vw,64px)}
.contenedor{position:relative; z-index:2; max-width:var(--ancho); margin:0 auto}
.contenedor.estrecho{max-width:var(--ancho-texto)}
.clara{background:var(--fondo)}
.blanca{background:var(--fondo-alt)}

/* Sección oscura: petróleo con una fotografía de textura al fondo,
   velada para que el texto nunca pelee con la imagen. */
.oscura{background:var(--petroleo-hondo); color:#fff}
.oscura h1,.oscura h2{color:#fff}
.oscura h3,.oscura h4{color:var(--oro-claro)}
.oscura .lede,.oscura .suave{color:rgba(255,255,255,.82)}
.oscura .tenue{color:rgba(255,255,255,.6)}
.oscura .eyebrow{color:var(--oro-claro)}
.fondo-foto{position:absolute; inset:0; z-index:0; overflow:hidden}
/* Las fotografías son de marca y merecen verse: la opacidad sube y el velo
   se aligera en el centro, donde no hay texto, y aprieta en los bordes, que
   es donde el titular necesita fondo limpio. Medido para que el texto blanco
   mantenga contraste de sobra sobre cualquiera de las imágenes. */
.fondo-foto img{width:100%; height:100%; object-fit:cover; opacity:.92}
/* El velo ya no tapa la imagen: solo la funde con la sección por arriba y
   por abajo, y oscurece lo justo la banda central donde cae el texto. Las
   fotografías son oscuras de origen, así que el blanco mantiene contraste. */
.fondo-foto::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(15,36,48,.92), rgba(15,36,48,.30) 22%, rgba(15,36,48,.30) 78%, rgba(15,36,48,.92)),
    radial-gradient(70% 46% at 50% 52%, rgba(15,36,48,.55), rgba(15,36,48,0) 75%);
}
/* Cuando la fotografía es clara —el rostro entre humo—, hace falta bastante
   más velo: el humo es casi blanco y el texto se le pierde encima. */
.fondo-foto.clara img{opacity:.5}
.fondo-foto.clara::after{
  background:
    linear-gradient(180deg, rgba(15,36,48,.94), rgba(15,36,48,.62) 24%, rgba(15,36,48,.62) 76%, rgba(15,36,48,.94)),
    radial-gradient(72% 50% at 50% 52%, rgba(15,36,48,.72), rgba(15,36,48,.18) 78%);
}

/* ═══ HERO ═══ */
.hero{padding-block:clamp(64px,9vw,132px); text-align:center}
.hero .emblema{width:clamp(190px,20vw,260px); margin:0 auto clamp(20px,2.6vw,32px)}
.hero h1{margin-bottom:.15em; max-width:960px; margin-left:auto; margin-right:auto}
/* Los titulares largos (el de Empresas ocupa tres líneas) no deben llegar al
   borde de la columna: con el tope de arriba respiran a los lados. */
/* El segundo renglón del titular, más pequeño y con minúsculas */
.hero .h1-b{
  display:block; font-family:var(--serif); font-weight:600; letter-spacing:.02em;
  font-size:clamp(20px,2.4vw,30px); color:var(--oro-claro); margin-bottom:.7em;
}
.hero p{max-width:660px; margin-left:auto; margin-right:auto}
.hero .btn{margin-top:clamp(20px,2.5vw,30px)}
.hero-enlaces{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px}

/* ═══ 6. BANDAS Y CITAS ══════════════════════════════════════════════ */
/* La franja de identificación: una pregunta enmarcada, nada más */
.banda{
  max-width:var(--ancho); margin:0 auto; padding:clamp(26px,3.4vw,40px) clamp(20px,3vw,40px);
  border:1px solid var(--linea-oro); text-align:center; background:var(--fondo-alt);
}
.banda h2,.banda h3{margin-bottom:.4em}
.banda p:last-child{color:var(--tinta-suave); font-size:.95em}

/* Cita destacada: una frase que respira sola */
.cita{
  max-width:820px; margin:clamp(30px,4vw,52px) auto; text-align:center;
  font-family:var(--serif); font-size:clamp(21px,2.5vw,30px); line-height:1.45;
  color:var(--petroleo); font-weight:600;
}
.oscura .cita{color:#fff}
.cita::before,.cita::after{content:""; display:block; width:34px; height:1px; background:var(--oro); margin:22px auto}

/* ═══ 7. TARJETAS Y REJILLAS ═════════════════════════════════════════ */
.rejilla{display:grid; gap:clamp(18px,2.4vw,30px)}
.rejilla-2{grid-template-columns:1fr}
.rejilla-3{grid-template-columns:1fr}
@media(min-width:760px){.rejilla-2{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.rejilla-3{grid-template-columns:repeat(3,1fr)}}

.tarjeta{
  background:var(--fondo-alt); border:1px solid var(--linea); border-radius:2px;
  box-shadow:var(--sombra); padding:clamp(26px,3.2vw,40px);
  display:flex; flex-direction:column; gap:14px;
  transition:box-shadow .25s, transform .25s;
}
.tarjeta:hover{box-shadow:var(--sombra-alta); transform:translateY(-2px)}
.tarjeta .btn{margin-top:auto}
.oscura .tarjeta{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); box-shadow:none}
.oscura .tarjeta:hover{background:rgba(255,255,255,.08)}

/* Tarjeta de servicio: ilustración circular, título dorado, texto centrado */
.tarjeta-servicio{text-align:center; align-items:center}
/* Caja cuadrada e idéntica para todas: las ilustraciones tienen proporciones
   distintas (el lobo es vertical, la rueda casi cuadrada) y, con solo el ancho
   fijado, cada tarjeta empezaba su título a una altura distinta. Con la caja
   fija y contain, todas ocupan lo mismo y los títulos quedan alineados. */
.tarjeta-servicio .ilustracion{
  width:clamp(150px,17vw,208px); aspect-ratio:1;
  object-fit:contain; margin-bottom:6px;
}
/* Las que traen fondo propio se recortan en medallón, para que no aparezca
   un rectángulo oscuro entre dos dibujos a línea */
.tarjeta-servicio .ilustracion.medallon{
  object-fit:contain; border-radius:50%; padding:10px;
  background:var(--petroleo-hondo);
  box-shadow:0 0 0 1px var(--linea-oro), 0 10px 26px rgba(18,34,43,.14);
}
.tarjeta-servicio h2,.tarjeta-servicio h3{
  font-family:var(--display); font-size:clamp(15px,1.5vw,19px); letter-spacing:.12em;
  text-transform:uppercase; color:var(--oro-hondo); margin:0;
}
.tarjeta-servicio .pregunta{font-weight:600; color:var(--tinta)}
.tarjeta-servicio p{color:var(--tinta-suave); margin:0}

/* Tarjeta de proceso: la pieza grande y centrada de la página de referencia */
.tarjeta-proceso{
  max-width:820px; margin:0 auto; text-align:center; align-items:center; gap:18px;
  padding:clamp(30px,4vw,56px);
}
.tarjeta-proceso .ilustracion{width:clamp(180px,22vw,300px)}
.tarjeta-proceso h2{margin:0}
.tarjeta-proceso p{color:var(--tinta-suave); max-width:60ch}
.tarjeta-proceso .destacado{color:var(--tinta); font-weight:600}

/* Situación reconocible: la frase que dice el cliente, entrecomillada */
.situacion{border-left:2px solid var(--oro); padding-left:clamp(18px,2.4vw,28px)}
.situacion h3{
  font-family:var(--display); font-size:clamp(14px,1.35vw,17px); letter-spacing:.09em;
  text-transform:uppercase; color:var(--petroleo); margin-bottom:.7em; line-height:1.5;
}
.situacion p{color:var(--tinta-suave); margin-bottom:.8em}

/* Caso: la versión corta, para leer de un vistazo. Sin caja ni sombra —no
   son tarjetas de producto— y con el filete dorado que ya usan las
   situaciones reconocibles, para que se lean como la misma familia. */
.caso{border-top:2px solid var(--oro); padding-top:20px}
.caso h3{
  font-family:var(--serif); font-size:clamp(19px,1.9vw,22px); line-height:1.35;
  color:var(--petroleo); margin-bottom:.7em;
}
.caso p{color:var(--tinta-suave); font-size:15.5px; line-height:1.7}
.caso p:last-child{margin-bottom:0}

/* Beneficio con icono */
.beneficio{text-align:center}
.beneficio svg{width:44px; height:44px; color:var(--oro); margin:0 auto 16px}
.beneficio h4{color:var(--petroleo)}
.oscura .beneficio h4{color:#fff}
.beneficio p{color:var(--tinta-suave); font-size:.95em; margin:0}
.oscura .beneficio p{color:rgba(255,255,255,.78)}

/* ═══ 8. ACORDEÓN ════════════════════════════════════════════════════ */
.acordeon{display:grid; gap:14px; align-content:start}
@media(min-width:860px){.acordeon-2{grid-template-columns:1fr 1fr; align-items:start}}
.acordeon details{
  background:var(--fondo-alt); border:1px solid var(--linea); border-radius:2px;
  box-shadow:var(--sombra); transition:box-shadow .2s, border-color .2s; height:max-content;
}
.acordeon details[open]{border-color:var(--linea-oro); box-shadow:var(--sombra-alta)}
.acordeon summary{
  list-style:none; cursor:pointer; display:flex; gap:18px; align-items:flex-start;
  justify-content:space-between; padding:20px clamp(18px,2.2vw,26px);
  font-weight:600; font-size:clamp(15px,1.15vw,16.5px); line-height:1.5; color:var(--petroleo);
}
.acordeon summary::-webkit-details-marker{display:none}
/* El "+" dorado que se convierte en "−" al abrir */
.acordeon summary::after{
  content:""; flex:none; width:14px; height:14px; margin-top:5px; position:relative;
  background:
    linear-gradient(var(--oro),var(--oro)) center/14px 1.5px no-repeat,
    linear-gradient(var(--oro),var(--oro)) center/1.5px 14px no-repeat;
  transition:transform .25s ease;
}
.acordeon details[open] summary::after{
  background:linear-gradient(var(--oro),var(--oro)) center/14px 1.5px no-repeat;
  transform:rotate(180deg);
}
.acordeon .respuesta{padding:0 clamp(18px,2.2vw,26px) 24px; color:var(--tinta-suave); font-size:.97em}
.acordeon .respuesta p:first-child{margin-top:0}

/* ═══ 9. VÍDEOS Y RESEÑAS ════════════════════════════════════════════ */
.videos{display:grid; gap:clamp(18px,2.4vw,28px); grid-template-columns:1fr}
@media(min-width:720px){.videos{grid-template-columns:1fr 1fr}}
.video{
  position:relative; display:block; width:100%; padding:0; overflow:hidden;
  border:1px solid var(--oro); border-radius:2px; background:#000; aspect-ratio:16/9;
  transition:transform .2s, box-shadow .2s;
}
.video:hover{transform:translateY(-2px); box-shadow:var(--sombra-alta)}
.video img{width:100%; height:100%; object-fit:cover}
.video::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.45))}
.video .play{
  position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%);
  width:62px; height:44px; border-radius:3px; background:rgba(167,142,96,.92);
  display:grid; place-items:center;
}
.video .play svg{width:18px; height:18px; color:#fff; margin-left:2px}
.video .pie{
  position:absolute; z-index:2; left:0; right:0; bottom:0; padding:12px 14px;
  color:#fff; font-size:13px; font-weight:600; text-align:center; line-height:1.35;
}

/* Reseña: la tarjeta gris con avatar, estrellas y texto */
.resenas{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:640px){.resenas{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.resenas{grid-template-columns:repeat(3,1fr)}}
.resena{background:#EDEDED; border-radius:2px; padding:18px 20px; font-size:14.5px; line-height:1.6}
.oscura .resena{background:rgba(255,255,255,.07); color:rgba(255,255,255,.86)}
.resena-cab{display:flex; align-items:center; gap:11px; margin-bottom:10px}
.resena-cab img,.resena-avatar{width:38px; height:38px; border-radius:50%; flex:none; object-fit:cover; background:var(--oro)}
.resena-cab b{display:block; font-size:14px; font-weight:600; color:var(--petroleo)}
.oscura .resena-cab b{color:#fff}
.resena-cab span{display:block; font-size:11.5px; color:var(--tinta-tenue)}
.estrellas{color:var(--oro); letter-spacing:.12em; font-size:13px; margin-bottom:8px}
.resena p{margin:0; color:var(--tinta-suave)}
.oscura .resena p{color:rgba(255,255,255,.82)}

/* ═══ 10. PASOS · BIO · CTA FINAL · PIE ══════════════════════════════ */
/* Método de 3 fases y "sigue estos 3 pasos" comparten pieza */
.pasos{counter-reset:paso; display:grid; gap:clamp(22px,3vw,34px); grid-template-columns:1fr}
@media(min-width:860px){.pasos{grid-template-columns:repeat(3,1fr)}}
.paso{position:relative; padding-top:16px}
.paso::before{
  counter-increment:paso; content:"0" counter(paso);
  font-family:var(--display); font-size:clamp(30px,3.6vw,44px); font-weight:400;
  color:var(--oro); opacity:.42; line-height:1; display:block; margin-bottom:12px;
}
.paso h3{
  font-family:var(--display); font-size:clamp(15px,1.5vw,18px); letter-spacing:.14em;
  text-transform:uppercase; color:var(--petroleo); margin-bottom:.75em;
}
.oscura .paso h3{color:#fff}
.paso p{color:var(--tinta-suave); font-size:.97em}
.oscura .paso p{color:rgba(255,255,255,.8)}

/* Variante para cuando cada paso lleva una explicación larga en vez de una
   línea. En tres columnas ese texto se queda en tiras de cinco palabras, así
   que aquí van apilados y con ancho de lectura. La usa /regresion. */
.pasos.extensos{grid-template-columns:1fr; max-width:62ch; margin:0 auto; gap:clamp(30px,4vw,46px)}
@media(min-width:860px){.pasos.extensos{grid-template-columns:1fr}}
.pasos.extensos .paso p{font-size:1em}
/* La frase que resume el paso, antes del desarrollo. */
.paso .clave{color:var(--petroleo); font-size:1.02em; margin-bottom:.7em}
.oscura .paso .clave{color:var(--oro-claro)}

/* Biografía: retrato a un lado, texto al otro */
/* La biografía creció: con el texto largo, centrar la foto la dejaba
   flotando en mitad de un hueco. Arranca arriba, a la altura del
   primer párrafo. */
.bio{display:grid; gap:clamp(28px,4vw,60px); align-items:start}
@media(min-width:900px){.bio{grid-template-columns:minmax(260px,.8fr) 1.2fr}}
.bio-foto{border-radius:2px; overflow:hidden; box-shadow:var(--sombra-alta)}
.bio-foto img{width:100%; aspect-ratio:4/5; object-fit:cover}
.bio .firma{
  font-family:var(--serif); font-size:clamp(20px,2vw,25px); font-style:italic;
  color:var(--oro-hondo); margin-top:1.2em;
}
.oscura .bio .firma{color:var(--oro-claro)}

/* Cierre: sección oscura, una frase y un botón */
.cierre{text-align:center}
.cierre .emblema{width:clamp(160px,17vw,215px); margin:0 auto 24px}
.cierre h2{max-width:22ch; margin-left:auto; margin-right:auto}
.cierre p{max-width:56ch; margin-left:auto; margin-right:auto}

.pie .tenue{color:rgba(255,255,255,.6)}
.pie{background:var(--petroleo-hondo); color:rgba(255,255,255,.7); padding:clamp(40px,5vw,66px) var(--pad); font-size:14px}
.pie-in{max-width:var(--ancho); margin:0 auto; display:grid; gap:26px; justify-items:center; text-align:center}
/* Las dos vías en el pie. Cada botón dice para quién es: sin esa línea,
   quien llega abajo tiene que adivinar cuál le toca. Van en contorno para
   no competir con la llamada del cierre, que está justo encima. */
/* Redes: discretas, entre la navegación y la llamada. Iconos y nada más:
   el nombre de la red ya lo dice su forma. */
.pie-redes{display:flex; gap:18px; justify-content:center}
.pie-redes a{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.16);
  transition:color .2s, border-color .2s, background .2s;
}
.pie-redes a:hover{color:var(--oro-claro); border-color:rgba(223,191,113,.5); background:rgba(223,191,113,.08)}
.pie-redes svg{width:17px; height:17px}

.pie-cta{display:grid; gap:16px; justify-items:center; text-align:center; width:100%}
.pie-cta-t{
  font-family:var(--serif); font-size:clamp(19px,1.9vw,23px); color:#fff; margin:0;
}
.pie-cta-n{margin:0; font-size:13px; color:rgba(255,255,255,.55)}
.pie-vias{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}
.pie-vias .btn-linea{
  padding:1.05em 1.9em; line-height:1.35; display:grid; gap:5px;
  color:var(--oro-claro); border-color:rgba(223,191,113,.45);
}
.pie-vias .btn-linea span{
  display:block; font-family:var(--texto); text-transform:none;
  letter-spacing:.01em; font-size:12px; font-weight:400; color:rgba(255,255,255,.6);
}
.pie-vias .btn-linea:hover span{color:rgba(255,255,255,.85)}
@media(max-width:560px){.pie-vias{width:100%} .pie-vias .btn-linea{flex:1 1 100%}}

.pie-nav{display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center}
.pie-nav a{
  text-decoration:none; text-transform:uppercase; font-size:11.5px;
  letter-spacing:.14em; color:rgba(255,255,255,.75); transition:color .2s;
}
.pie-nav a:hover{color:var(--oro-claro)}
.pie-legal{border-top:1px solid rgba(255,255,255,.12); padding-top:22px; width:100%;
  display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center; font-size:12.5px; color:rgba(255,255,255,.5)}
.pie-legal a{text-decoration:none}
.pie-legal a:hover{color:var(--oro-claro)}

/* ═══ ENTRADA AL SCROLL ══════════════════════════════════════════════ */
.js .aparece{opacity:0; transform:translateY(18px)}
.js .aparece.visible{opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .js .aparece{opacity:1 !important; transform:none !important}
}

/* ═══ QUÉ SE LLEVA DE LA CONVERSACIÓN ═══════════════════════════════
   La web explicaba muy bien el problema y no decía qué obtiene quien
   reserva. Esto va justo antes de la llamada, que es donde se decide.
   Sin promesas de resultado: describe la conversación, no lo que
   ocurrirá después de ella. */
.que-sale{
  max-width:560px; margin:0 auto clamp(26px,3.4vw,36px); text-align:left;
  background:var(--fondo-alt); border:1px solid var(--linea);
  border-left:2px solid var(--oro); border-radius:2px;
  padding:clamp(20px,2.6vw,26px) clamp(20px,2.8vw,30px);
}
.que-sale p{
  margin:0 0 .9em; font-family:var(--texto); font-weight:600; font-size:15px;
  color:var(--petroleo); letter-spacing:.01em;
}
.que-sale ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.que-sale li{
  display:flex; gap:11px; align-items:flex-start;
  font-size:15.5px; line-height:1.55; color:var(--tinta-suave);
}
.que-sale li::before{
  content:""; flex:none; width:15px; height:15px; margin-top:5px;
  background:linear-gradient(var(--oro),var(--oro)) no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.oscura .que-sale{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); border-left-color:var(--oro)}
.oscura .que-sale p{color:#fff}
.oscura .que-sale li{color:rgba(255,255,255,.82)}
.tarjeta .que-sale{margin:0; background:none; border:0; border-left:2px solid var(--oro); padding:0 0 0 16px; max-width:none}
.tarjeta .que-sale li{font-size:14.5px}

/* ═══ FORMULARIO ════════════════════════════════════════════════════
   Campos propios, con la tipografía y el oro de la casa. No hay iframe ni
   script de terceros: el envío va por fetch a un webhook, así la página no
   carga nada ajeno ni instala cookies. */
.formulario{max-width:640px; margin:0 auto; display:grid; gap:20px}
.campo{display:grid; gap:7px}
.campo label,.campo .etiqueta-grupo{font-size:14px; font-weight:600; color:var(--petroleo); letter-spacing:.01em}
.campo .etiqueta-grupo{display:block}
.campo input, .campo textarea{
  font-family:var(--texto); font-size:16px; color:var(--tinta);
  background:var(--fondo-alt); border:1px solid var(--linea); border-radius:2px;
  padding:13px 15px; width:100%; transition:border-color .2s, box-shadow .2s;
}
.campo textarea{min-height:130px; resize:vertical; line-height:1.6}
.campo input:focus, .campo textarea:focus{
  outline:none; border-color:var(--oro); box-shadow:0 0 0 3px rgba(167,142,96,.16);
}
.campo .ayuda{font-size:13px; color:var(--tinta-tenue)}

/* Persona o empresa: dos opciones grandes, no un desplegable escondido */
.opciones{display:grid; gap:10px; grid-template-columns:1fr 1fr}
@media(max-width:520px){.opciones{grid-template-columns:1fr}}
.opcion{position:relative; cursor:pointer; display:block}
.opcion input{position:absolute; opacity:0; width:1px; height:1px}
.opcion span{
  display:block; padding:15px 16px; text-align:center; cursor:pointer;
  background:var(--fondo-alt); border:1px solid var(--linea); border-radius:2px;
  font-size:15px; color:var(--tinta-suave); transition:all .2s;
}
.opcion input:checked + span{
  border-color:var(--oro); background:rgba(167,142,96,.09);
  color:var(--petroleo); font-weight:600;
  box-shadow:inset 0 0 0 1px var(--oro);
}
.opcion input:focus-visible + span{box-shadow:0 0 0 3px rgba(167,142,96,.3)}

.consentimiento{display:flex; gap:12px; align-items:flex-start}
.consentimiento input{width:19px; height:19px; margin-top:2px; flex:none; accent-color:var(--oro)}
.consentimiento label{font-size:14px; color:var(--tinta-suave); font-weight:400; line-height:1.6}
.consentimiento a{color:var(--oro-hondo)}

.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.form-aviso{
  background:var(--fondo-alt); border-left:2px solid var(--oro);
  padding:14px 18px; font-size:14px; color:var(--tinta-suave); line-height:1.6;
}
.form-estado{display:none; padding:16px 18px; border-radius:2px; font-size:15px; line-height:1.6}
.form-estado.visible{display:block}
.form-estado.bien{background:rgba(44,107,88,.10); border:1px solid rgba(44,107,88,.35); color:#215044}
.form-estado.mal{background:rgba(166,61,47,.09); border:1px solid rgba(166,61,47,.35); color:#8d3428}
.formulario .btn[disabled]{opacity:.55; cursor:wait}

/* ═══ PÁGINAS LEGALES ═══════════════════════════════════════════════
   Texto largo de lectura seguida: medida corta, jerarquía clara y nada
   de adornos. Lo único que hereda de la marca es la tipografía y el oro
   de los encabezados. */
.legal{max-width:760px; margin:0 auto}
.legal h2{
  font-family:var(--display); font-size:clamp(15px,1.5vw,18px); letter-spacing:.12em;
  text-transform:uppercase; color:var(--oro-hondo);
  margin:clamp(38px,4.5vw,54px) 0 .9em; padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--linea);
}
.legal h2:first-of-type{margin-top:0; padding-top:0; border-top:0}
.legal h3{font-family:var(--texto); font-weight:600; font-size:17px; color:var(--petroleo); margin:1.8em 0 .5em}
.legal p, .legal li{color:var(--tinta-suave); font-size:16px; line-height:1.75}
.legal ul{padding-left:20px; margin:0 0 1.15em}
.legal li{margin-bottom:.5em}
.legal a{color:var(--oro-hondo)}
.legal .ficha{
  background:var(--fondo-alt); border:1px solid var(--linea); border-radius:2px;
  padding:22px 26px; margin:0 0 clamp(30px,4vw,42px); box-shadow:var(--sombra);
}
.legal .ficha p{margin:0; font-size:15.5px}
.legal .ficha b{color:var(--tinta)}
.legal table{border-collapse:collapse; width:100%; margin:0 0 1.4em; font-size:15px}
.legal th,.legal td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--linea); vertical-align:top; color:var(--tinta-suave)}
.legal th{font-family:var(--texto); font-weight:600; color:var(--petroleo); font-size:14px}
.legal .fecha{font-size:14px; color:var(--tinta-tenue); margin-top:clamp(38px,4vw,50px); padding-top:20px; border-top:1px solid var(--linea)}
.tabla-scroll{overflow-x:auto}

/* ═══ WHATSAPP ══════════════════════════════════════════════════════
   En el dorado de la casa y no en el verde de WhatsApp: en una web tan
   sobria, un círculo verde fosforito sería la única nota discordante y
   el icono ya identifica el canal de sobra.
   Para el verde clásico, cambia --wa por #25D366.                     */
:root{--wa:#A78E60; --wa-hover:#8A7345}
.wa{
  position:fixed; right:clamp(16px,2.5vw,28px); bottom:clamp(16px,2.5vw,28px);
  z-index:60; width:56px; height:56px; border-radius:50%;
  background:var(--wa); color:#fff; display:grid; place-items:center;
  box-shadow:0 6px 20px rgba(18,34,43,.28), 0 0 0 1px rgba(255,255,255,.14) inset;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.wa svg{width:29px; height:29px}
.wa:hover{background:var(--wa-hover); transform:translateY(-2px); box-shadow:0 10px 28px rgba(18,34,43,.36)}
.wa:active{transform:translateY(0)}
@media(max-width:520px){.wa{width:52px; height:52px} .wa svg{width:27px; height:27px}}
@media print{.wa{display:none}}

/* ═══ VENTANA DE VÍDEO ═══════════════════════════════════════════════ */
.lb{position:fixed; inset:0; z-index:99; display:none; background:rgba(9,20,26,.94); padding:20px; align-items:center; justify-content:center}
.lb.abierto{display:flex}
.lb-in{width:min(980px,100%); position:relative}
.lb-marco{position:relative; width:100%; aspect-ratio:16/9; background:#000; border:1px solid var(--linea-oro); border-radius:2px; overflow:hidden}
.lb-marco iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.lb-cerrar{
  position:absolute; top:-54px; right:0; width:44px; height:44px; border-radius:2px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3);
  display:grid; place-items:center; color:#fff;
}
.lb-cerrar svg{width:20px; height:20px}

/* ── Fichas de caso (página Casos) ───────────────────────────────────
   Cada caso es una ficha con cuatro apartados fijos: contexto, riesgo,
   intervención y resultado. La <dl> es la etiqueta correcta —son pares
   término/definición— y además deja el apartado en una columna propia
   en escritorio, para poder saltar de un caso a otro comparando el
   mismo apartado sin releer. En móvil se apila. */
.ficha-caso{
  border-top:2px solid var(--oro);
  padding-top:22px;
  margin-bottom:64px;
}
.ficha-caso:last-of-type{margin-bottom:48px}
.ficha-caso-n{
  font-family:var(--texto); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--oro); margin-bottom:.9em;
}
.ficha-caso h2{
  font-family:var(--serif); font-weight:400; text-transform:none;
  font-size:clamp(21px,2.4vw,27px); line-height:1.3;
  color:var(--petroleo); margin-bottom:1.1em;
}
.ficha-caso dl{margin:0}
.ficha-caso dt{
  font-family:var(--texto); font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-suave); margin-bottom:.55em;
}
.ficha-caso dd{
  margin:0 0 26px; color:var(--tinta);
  font-size:16px; line-height:1.72;
}
.ficha-caso-cierre{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(16.5px,1.7vw,18.5px); line-height:1.6;
  color:var(--petroleo);
  border-left:2px solid var(--oro); padding-left:20px;
  margin:6px 0 0;
}
@media (min-width:840px){
  .ficha-caso dl{
    display:grid; grid-template-columns:170px 1fr;
    column-gap:32px; row-gap:0;
  }
  .ficha-caso dt{padding-top:3px; margin-bottom:0}
}
.ver-casos{margin:34px 0 0; text-align:center}

/* ── El dato de trayectoria ──────────────────────────────────────────
   Va antes del relato, en línea propia y con algo más de cuerpo que el
   párrafo normal: es lo único cuantificable que tiene la página y se
   lee de una pasada, sin obligar a entrar en la biografía entera. */
.dato{
  font-family:var(--texto); font-size:clamp(16px,1.7vw,17.5px);
  line-height:1.6; color:var(--petroleo);
  border-left:2px solid var(--oro); padding-left:18px;
  margin:0 0 1.5em;
}
.oscura .dato{color:#fff}

/* ── Credenciales ────────────────────────────────────────────────────
   Dos columnas en escritorio y una en móvil. Sin iconos ni sellos: en
   alta dirección, el organismo emisor dice más que cualquier insignia,
   y una rejilla de logos convertiría la sección en un escaparate. */
.credenciales{
  margin-top:56px; padding-top:34px; border-top:1px solid var(--linea);
  display:grid; gap:26px 40px; grid-template-columns:1fr;
}
@media(min-width:720px){.credenciales{grid-template-columns:1fr 1fr}}
.credenciales-cab{
  grid-column:1/-1; margin:0 0 4px;
  font-family:var(--texto); font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--oro);
}
.credencial-t{
  margin:0 0 3px; font-family:var(--serif);
  font-size:17px; line-height:1.35; color:var(--petroleo);
}
.credencial-o{
  margin:0; font-family:var(--texto); font-size:13.5px;
  line-height:1.45; color:var(--tinta-tenue);
}

/* ═══ AVISO DE COOKIES ═════════════════════════════════════════════════
   Solo aparece si hay campaña de Google Ads activa; lo decide
   assets/consentimiento.js. Barra inferior y no ventana modal: no
   secuestra la página ni obliga a decidir antes de leer nada.
   Los dos botones son idénticos —rechazar cuesta lo mismo que aceptar—,
   que es lo que exige la AEPD y lo que corresponde.

   Ambos van con fondo sólido, no en contorno. Con el diseño anterior tres
   de cada cuatro personas ignoraban el aviso: no lo rechazaban, pasaban
   de largo. Unos botones que no parecen botones no invitan a decidir, y
   sin decisión no hay consentimiento válido ni medición posible.
   ═══════════════════════════════════════════════════════════════════ */
.consentimiento{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; gap:clamp(14px,3vw,30px); align-items:center;
  flex-wrap:wrap; justify-content:center;
  padding:22px clamp(16px,4vw,34px);
  background:var(--petroleo-hondo);
  border-top:1px solid var(--linea-oro);
  box-shadow:0 -8px 30px rgba(18,34,43,.22);
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.consentimiento.visible{transform:none}

.consentimiento-t{
  margin:0; max-width:58ch;
  font-family:var(--texto); font-size:15px; line-height:1.55;
  color:rgba(255,255,255,.9);
}
.consentimiento-t a{color:var(--oro-claro); text-decoration:underline}
.consentimiento-t a:hover{color:#fff}

.consentimiento-b{display:flex; gap:12px; flex:0 0 auto}
.consentimiento .btn-linea{
  background:var(--oro-claro); color:var(--tinta);
  border-color:var(--oro-claro);
  padding:13px 30px; font-size:14px; font-weight:500;
}
.consentimiento .btn-linea:hover{background:#fff; border-color:#fff; color:var(--tinta)}

@media(max-width:560px){
  .consentimiento{gap:16px; padding:20px 16px}
  .consentimiento-t{font-size:14px; text-align:center}
  .consentimiento-b{width:100%}
  .consentimiento .btn-linea{flex:1 1 0; padding:14px 12px}
}

/* ═══ AVISO DE FIN DE SEMANA ═══
   Sale solo los sábados y domingos, debajo de cada botón de reservar: la
   agenda está cerrada y es mejor decirlo antes de que alguien abra un
   calendario vacío. Lo pone el script, no el HTML, porque los botones
   están repartidos por toda la página. */
.aviso-finde{
  display:block; margin-top:10px;
  font-size:14px; line-height:1.5; opacity:.85;
}
.aviso-finde a{
  color:inherit; text-decoration:underline;
  text-underline-offset:3px;
}
.aviso-finde a:hover{text-decoration-thickness:2px}

/* ═══ TESTIMONIOS ═══
   Lo que cuenta alguien que ya pasó por aquí. Va antes del botón, no al
   final de la página: quien duda necesita leerlo justo cuando está
   decidiendo, no cuando ya se ha ido.

   Sin foto ni nombre completo, a propósito: son procesos terapéuticos.
   La inicial y la ciudad bastan, y no restan credibilidad. */
.testimonios{
  display:grid; gap:26px;
  grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
  margin-top:34px; text-align:left;
}
.testimonio{
  border-left:2px solid var(--oro); padding:4px 0 4px 22px;
  min-width:0;
}
.testimonio p{
  margin:0 0 14px; font-size:17px; line-height:1.66;
}
.testimonio p:last-of-type{margin-bottom:12px}
.testimonio cite{
  font-style:normal; font-size:14px; letter-spacing:.04em;
  color:var(--oro); display:block;
}
@media(max-width:560px){
  .testimonios{gap:30px; margin-top:28px}
  .testimonio{padding-left:18px}
  .testimonio p{font-size:16px}
}

/* ── El sello de la IHA ─────────────────────────────────────────────────
   Va donde se habla de quién acompaña, no en la portada: primero se
   cuenta el trabajo, después se demuestra.

   Estaba definido dentro de hipnosis-miami, hipnosis-chile y
   pareja-miami, así que en las páginas nuevas la clase existía sin
   estilo y la imagen salía suelta a la izquierda. Aquí vale para todas. */
.mia-sello{
  display:flex; align-items:center; gap:22px; justify-content:center;
  flex-wrap:wrap; margin:clamp(26px,3.5vw,36px) auto 0;
}
.mia-sello img{width:150px; height:auto; background:#fff; padding:8px; border-radius:4px}
.mia-sello p{margin:0; max-width:34ch; text-align:left; font-size:15px; line-height:1.6}