/* ═══════════════════════════════════════════════════════════════════════════════
   Veyra · hoja de estilo

   TODO LO DE ESTE BLOQUE ESTÁ MEDIDO, no elegido. Sale del inventario de la página
   de referencia, leído regla a regla del CSSOM:

     · rejilla   ancho de contenido 1232 sobre contenedor 1428, margen 24, gutter 16
                 anchos de columna 1138 / 896 / 654 / 480
     · ritmo     espaciados 6, 8, 12, 16, 24, 40, 96 · radios 0, 6, 24, 50
                 borde dominante 1px solid #f2f2f2
     · escala    56, 40, 32, 28, 20, 18, 16, 14, 12 · ratio 3,33 sobre 8 escalones
                 peso dominante 400 · 48,9 % del texto a 16 px y 29,6 % a 14
     · secciones 11, con estas alturas: 1190 / 1029 / 799 / 174 / 813 / 742 / 550 /
                 730 / 709 / 712 / 708 / 1006 sobre una barra de 76
     · paleta    fondos #fafafa (55 %), #f7f7f7 (20 %), blanco (9 %), negro (8 %)
                 tintas negro (81 %), blanco (11 %), #a6a6a6 (6 %)

   Manrope sostiene la página entera, en una sola voz, y el acento vive únicamente
   como degradado corto en trazo de icono: nunca como área grande de color.
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Neutros. Son los del original y están exentos a propósito: que dos páginas
     sean negro sobre casi blanco no es copiar, es el género. */
  --blanco:  #ffffff;
  --negro:   #000000;
  --n50:     #fafafa;
  --n100:    #f7f7f7;
  --n200:    #f2f2f2;
  --n300:    #ededed;
  --n400:    #e6e6e6;
  --n600:    #d9d9d9;
  --n900:    #a6a6a6;
  --gris-texto: #4a4a4a;

  /* Tinta de los botones y acento. Ninguno de los dos es negro puro: el botón lleva
     un verde azulado muy oscuro y el acento un azul de medianoche, y esa diferencia
     de dos grados es lo que separa una página sobria de una apagada. */
  --tinta-boton: #0c1f24;
  --acento: #061b31;

  /* El acento vivo del original es un degradado corto magenta → índigo. Aparece en
     el 0,22 % del área: rótulos de sección, trazo de los iconos y el cuadrado de
     12 px de cada paso. Nunca como relleno grande, y por eso el extractor casi no
     lo ve: esta página es neutra y ésa es su decisión de diseño. */
  --grad-1: #be1abe;
  --grad-2: #362bf9;

  --ancho-contenedor: 1428px;
  --ancho-xl:  1138px;
  --ancho-l:   896px;
  --ancho-m:   654px;
  --ancho-s:   480px;

  --pad-s: 48px;
  --pad-m: 96px;
  --pad-l: 144px;

  --r:     24px;
  --r-min: 6px;
  --r-pil: 50px;

  --borde: 1px solid var(--n200);

  --tipo: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --barra: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--negro);
  font-family: var(--tipo);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

/* ── ESCALA · el ratio y el número de escalones son del original; la familia no ── */

.h1 { font-size: 56px; font-weight: 600; line-height: 1.1;  letter-spacing: -.015em; text-wrap: balance; }
.h2 { font-size: 40px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.h3 { font-size: 32px; font-weight: 600; line-height: 1.2;  letter-spacing: -.01em; }
.h4 { font-size: 28px; font-weight: 600; line-height: 1.2; }
.h5 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.h6 { font-size: 18px; font-weight: 500; line-height: 1.3; }

.t-l  { font-size: 18px; }
.t-m  { font-size: 16px; }
.t-s  { font-size: 14px; }
.t-xs { font-size: 12px; }

.suave  { color: var(--n900); }
.medio  { color: var(--gris-texto); }
.claro  { color: var(--blanco); }

/* El rótulo de sección: la única pieza de texto que lleva el acento, y lo lleva
   como degradado recortado sobre el propio glifo. */
.rotulo {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  background-image: linear-gradient(101deg, var(--grad-1), var(--grad-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}
.rotulo.centro { margin-inline: auto; }

/* ── ESTRUCTURA ─────────────────────────────────────────────────────────────── */

.marco   { width: 100%; max-width: var(--ancho-contenedor); margin-inline: auto; }
.marco-s { width: 100%; max-width: var(--ancho-s);  margin-inline: auto; }
.marco-m { width: 100%; max-width: var(--ancho-m);  margin-inline: auto; }
.marco-l { width: 100%; max-width: var(--ancho-l);  margin-inline: auto; }

.borde-lateral { padding-inline: 24px; }

.seccion    { display: flex; flex-direction: column; justify-content: center; }
.pad-m      { padding-block: var(--pad-m); }
.pad-s      { padding-block: var(--pad-s); }
.fondo-n50  { background: var(--n50); }
.fondo-n100 { background: var(--n100); }

/* ── BOTONES · el original los tiene neutros, con radio 50 y transición de .2s ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--r-pil);
  background: var(--tinta-boton);
  color: var(--blanco);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  transition: opacity .2s, background-color .2s;
}
.btn:hover { opacity: .8; }

.btn--2 {
  background: var(--n300);
  color: var(--negro);
  border: 1px solid var(--n200);
}
.btn--2:hover { background: var(--n50); opacity: 1; }

.btn--claro { background: var(--n300); color: var(--negro); }
.btn--claro:hover { background: var(--blanco); opacity: 1; }

.btn--g { padding: 16px 24px; }
.btn--xs { padding: 9px 24px; font-size: 12px; }

.btn-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.btn-fila.centro { justify-content: center; }

/* Botón circular de flecha: el que remata cada tarjeta de servicio. */
.flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-pil);
  background: var(--blanco);
  transition: transform .2s, background-color .2s;
}
.flecha svg { width: 18px; height: 18px; }
a:hover > .flecha, .tarjeta:hover .flecha { background: var(--n50); transform: translateX(2px); }

/* ── BARRA ──────────────────────────────────────────────────────────────────── */

.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--barra);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* El menú va centrado en el EJE DE LA PÁGINA. Con `space-between` lo empujaba el
   ancho del grupo derecho y quedaba 68 px a la izquierda del centro real. */
.barra__fila {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.barra__lado { justify-self: end; }
.marca { display: flex; align-items: center; gap: 10px; }
.marca__signo {
  width: 32px; height: 32px; flex: none;
  border-radius: 8px;
  background: var(--negro);
  display: flex; align-items: center; justify-content: center;
}
.marca__signo svg { width: 18px; height: 18px; }
.marca__nombre { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }

.barra__medio { display: flex; align-items: center; justify-content: center; gap: 28px; font-size: 16px; }
.barra__medio a { transition: opacity .2s; }
.barra__medio a:hover { opacity: .6; }
.barra__punto { display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--negro); margin-right: 8px; vertical-align: middle; }

.barra__lado { display: flex; align-items: center; gap: 12px; }
.barra__nota {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: var(--borde);
  border-radius: var(--r-min);
  background: var(--blanco);
  font-size: 14px;
}

/* El botón de tres barras sólo existe en el estrecho. */
.barra__hamburguesa {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  border: var(--borde);
  border-radius: var(--r-min);
  background: var(--blanco);
}
.barra__hamburguesa span { display: block; height: 1.5px; background: var(--negro); transition: transform .2s, opacity .2s; }
.barra__hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.barra__hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.barra__hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* `display:flex` gana a `[hidden]`, así que hay que decirlo: sin esta línea el panel
   plegado se pintaba también en ancho de escritorio. */
.menu-movil[hidden] { display: none; }
@media (min-width: 721px) { .menu-movil { display: none !important; } }

.menu-movil {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 20px 24px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--borde);
}
.menu-movil a { padding: 12px 0; font-size: 18px; border-bottom: var(--borde); }
.menu-movil a:last-child { border-bottom: 0; }

/* ── HERO ───────────────────────────────────────────────────────────────────── */

.hero { padding-top: 96px; }
.hero__texto { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.hero__sub { max-width: 520px; }
.hero__valoracion { display: flex; align-items: center; gap: 8px; margin-top: 8px; }

.caras { display: flex; align-items: center; }
.caras img {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--n50);
  object-fit: cover;
  object-position: 50% 18%;
  margin-left: -6px;
}
.caras img[src$="expert-2.jpg"] { object-position: 58% 16%; }
.caras img:first-child { margin-left: 0; }
.estrellas { display: flex; gap: 2px; }
.estrellas svg { width: 14px; height: 14px; }

/* Tira de retratos del hero: se mueve sola, por tiempo, no por scroll. */
.tira { position: relative; overflow: hidden; margin-top: 136px; }
.tira__pista { display: flex; width: max-content; animation: correr 46s linear infinite; }
.tira__grupo { display: flex; gap: 6px; flex: none; }
.tira__grupo + .tira__grupo { margin-left: 6px; }
.tira:hover .tira__pista { animation-play-state: paused; }

@keyframes correr { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.retrato { position: relative; width: 480px; flex: none; border-radius: var(--r); overflow: hidden; }
.retrato__fondo {
  width: 480px; aspect-ratio: 6 / 8;
  object-fit: cover;
  filter: brightness(82%) blur(5px);
  transform: scale(1.05);
}
/* El marco interior existe para poder AMPLIAR la foto sin que se salga de su caja: a
   390 px la tarjeta es estrecha, `cover` sólo recorta de lado y el sujeto se queda con
   dos tercios de pared encima. Con el recorte en un envoltorio propio, la ampliación se
   hace sobre la foto y el borde redondeado sigue siendo el mismo. */
.retrato__caja { position: absolute; inset: 0; padding: 40px; }
.retrato__marco { display: block; height: 100%; border-radius: 16px; overflow: hidden; }
.retrato__foto {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--anclaje, 50% 24%);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 16px;
}
/* La cartela va en blanco, como en el original, pero el original la apoya sobre
   fotografías oscuras y las de esta casa son de luz de día: sin este velo el texto
   cae en blanco sobre casi blanco y no se lee. El velo va SOBRE el fondo
   desenfocado y por debajo de la foto nítida, así que no ensucia el retrato. */
.retrato::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 160px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .74));
  pointer-events: none;
}
.retrato__pie {
  position: absolute; inset: auto 0 0;
  z-index: 1;
  margin-bottom: 12px;
  padding-inline: 16px;
  color: var(--blanco);
  text-align: center;
  font-size: 12px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

/* ── SERVICIOS ──────────────────────────────────────────────────────────────── */

.entradilla { font-size: 40px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.entradilla span { color: var(--n900); }

.rejilla-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }

.tarjeta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 320px;
  padding: 16px;
  border-radius: var(--r);
  background: var(--n100);
  transition: background-color .2s;
}
/* El original NO voltea la tarjeta a oscuro al apuntarla: lo que en su toma de hover
   parece una tarjeta volteada es la SEXTA celda de la rejilla, la llamada negra, que
   está ahí también en reposo. Así que el fondo no cambia. Lo que sí cambia es el
   borde y la flecha, que es un estado que se lee a 120 ms sin inventarle a la
   referencia un comportamiento que no tiene. */
.tarjeta { border: 1px solid transparent; }
.tarjeta:hover { border-color: var(--n400); }
.tarjeta__icono { width: 60px; height: 60px; }
.tarjeta__pie { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.tarjeta__mas { display: flex; align-items: center; gap: 16px; margin-top: 12px; }

.tarjeta--negra {
  background: var(--negro);
  color: var(--blanco);
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 40px 24px;
}


/* ── SOBRE LA CASA ──────────────────────────────────────────────────────────── */

.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.dos-col--arriba { align-items: start; }

.bloque { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.bloque__texto { display: flex; flex-direction: column; gap: 16px; }

.lista-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.lista-2 li {
  display: flex;
  gap: 12px;
  padding: 24px;
  border-radius: var(--r);
  background: var(--n50);
}
.tic { width: 20px; height: 20px; flex: none; margin-top: 2px; }

.ficha-negra {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px;
  border-radius: var(--r);
  background: var(--negro);
  color: var(--blanco);
}
.ficha-negra img { width: 80px; height: 80px; border-radius: 16px; object-fit: cover; flex: none; }
.ficha-negra .btn { margin-left: auto; }

/* El mock de reserva: en el original es una imagen; aquí es marcado de verdad,
   que es más fiel de ver y no obliga a meter interfaz dentro de una fotografía. */
.panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  border-radius: var(--r);
  background: var(--n100);
  min-height: 480px;
}
.mock {
  width: 100%;
  max-width: 424px;
  padding: 20px;
  border-radius: var(--r);
  background: var(--blanco);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .06);
}
.mock__quien { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; }
.mock__quien img { width: 68px; height: 68px; border-radius: 12px; object-fit: cover; }
.mock__pestanas {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 16px 0;
  border-top: var(--borde);
  text-align: center;
  font-size: 13px;
}
.mock__pestanas span { padding: 8px 0; border-radius: var(--r-min); color: var(--n900); }
.mock__pestanas .es { background: var(--tinta-boton); color: var(--blanco); font-weight: 500; }
.mock__caja { padding: 16px; border-radius: 16px; background: var(--n50); }
.mock__titulo { font-size: 12px; font-weight: 600; margin-bottom: 12px; }
.mock__dias { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.mock__dia {
  padding: 8px 0; border-radius: var(--r-min); text-align: center;
  background: var(--blanco); border: var(--borde);
}
.mock__dia b { display: block; font-size: 15px; font-weight: 500; }
.mock__dia small { font-size: 10px; color: var(--n900); }
.mock__dia.es { background: var(--tinta-boton); border-color: var(--tinta-boton); color: var(--blanco); }
.mock__dia.es small { color: rgba(255, 255, 255, .6); }
.mock__horas { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin-top: 8px; }
.mock__hora {
  padding: 8px 0; border-radius: var(--r-min); text-align: center;
  font-size: 11px; background: var(--blanco); border: var(--borde);
}
.mock__hora.no { background: var(--n200); color: var(--n900); border-color: var(--n200); }

/* ── TIRA DE TITULARES ──────────────────────────────────────────────────────── */

.titulares { position: relative; overflow: hidden; padding-block: 47px; }
.titulares__pista { display: flex; width: max-content; animation: correr 34s linear infinite; }
.titulares__grupo { display: flex; align-items: stretch; gap: 16px; flex: none; margin-right: 16px; }
/* Los rótulos van SIN relleno. En el original la caja existe pero su fondo es el
   mismo #fafafa del entorno, así que lo que se ve es texto plano corriendo sobre el
   fondo; la única pastilla con forma es la de la foto. Dejarlos grises rellenos le
   daba a esta banda un peso que no tiene. */
.pastilla {
  display: flex; align-items: center;
  padding: 16px 40px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--n900);
  white-space: nowrap;
}
.pastilla--foto { width: var(--ancho-s); padding: 0; border-radius: var(--r-pil); background: var(--n50); overflow: hidden; position: relative; }
/* La foto va ABSOLUTA dentro de su pastilla: si estuviera en flujo, su relación de
   aspecto marcaría la altura de la banda entera —al cambiarla de 480x78 a 960x411 la
   tira pasó de 174 a 300 px de golpe—, y la altura de esta banda la manda el cuerpo de
   los rótulos, no la imagen. */
.pastilla--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }

/* ── EXPERTOS ───────────────────────────────────────────────────────────────── */

.media-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.media-rejilla__ancha { grid-column: 1 / -1; }
.media-rejilla__ancha img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); }

.cita {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border-radius: var(--r);
  background: var(--negro);
  color: var(--blanco);
}
.cita__autor { display: flex; align-items: center; gap: 8px; }
.cita__autor img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }

.dato {
  min-height: 280px;
  position: relative;
  display: flex;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--n200);
}
/* La toma sale de cámara en tono bajo y a 295x280 se leía como una mancha. Se le
   levantan los medios tonos aquí, no en la generación, y el contraste del rótulo lo
   sigue poniendo el velo de la caja de cristal. */
.dato img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(1.42) contrast(1.04);
}
.dato__caja {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  margin: 20px;
  padding: 16px;
  border-radius: var(--r);
  background: rgba(0, 0, 0, .58);
  border: 1px solid rgba(255, 255, 255, .28);
  color: var(--blanco);
}
.dato__n { font-size: 40px; font-weight: 600; line-height: 1.1; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
.dato__caja .t-s { color: #fff; }

.gente { display: flex; flex-direction: column; gap: 16px; }
.gente li { display: flex; align-items: center; gap: 8px; }
.gente img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }

/* ── PROCESO ────────────────────────────────────────────────────────────────── */

.cabecera-centro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.cabecera-izq { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pasos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
.paso { display: flex; flex-direction: column; gap: 12px; }
.paso__linea { display: flex; align-items: center; gap: 8px; }
.paso__cuadro { width: 12px; height: 12px; flex: none;
  background-image: linear-gradient(131deg, var(--grad-1), var(--grad-2)); }
.paso__regla { flex: 1; height: 1px; background: var(--n200); }
.paso img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); margin-top: 12px; }

/* ── TESTIMONIOS ────────────────────────────────────────────────────────────── */

.testimonios { position: relative; overflow: hidden; }
.testimonios__pista { display: flex; width: max-content; animation: correr 60s linear infinite; }
.testimonios__grupo { display: flex; gap: 6px; flex: none; margin-right: 6px; }
/* La tarjeta mide 480 de ancho y 220 de alto: el ancho es content-width--small y
   el alto es lo que da la cita del original a 16 px sobre esa medida. */
.testimonio {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
  width: var(--ancho-s);
  padding: 24px;
  border-radius: var(--r);
  background: var(--n50);
}
.testimonio__quien { display: flex; align-items: center; gap: 16px; }
.testimonio__quien img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

/* ── MEMBRESÍA ──────────────────────────────────────────────────────────────── */

.plan {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: var(--r);
  background: var(--negro);
  color: var(--blanco);
}
.plan__marca { display: flex; align-items: center; gap: 10px; }
.plan__marca .marca__signo { background: var(--blanco); }
.plan__marca .marca__signo svg path { fill: var(--negro); }
.plan__precio { display: flex; align-items: flex-end; gap: 4px; }
.plan__precio b { font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.plan .btn { width: 100%; margin-top: auto; }

.incluye { display: flex; flex-direction: column; gap: 20px; }
.incluye li { display: flex; gap: 12px; }

/* ── DIARIO ─────────────────────────────────────────────────────────────────── */

.cabecera-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.diario { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 40px; row-gap: 32px; }
.nota { display: flex; flex-direction: column; }
.nota__marco {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  background: var(--n100);
  overflow: hidden;
  transition: background-color .2s;
}
.nota:hover .nota__marco { background: var(--n200); }
.nota__marco svg { width: 96px; height: 96px; }
.nota__cuerpo .h5 { text-wrap: balance; }
.incluye p, .nota__cuerpo .t-s { text-wrap: pretty; }
.nota__cuerpo { display: flex; flex-direction: column; flex: 1; justify-content: space-between; gap: 16px; padding-top: 16px; }
.nota__pie { display: flex; align-items: center; gap: 16px; }
.sello { padding: 6px 8px; border-radius: 2px; background: var(--n200); font-size: 12px; color: var(--gris-texto); }
.categoria { font-size: 12px; line-height: 1.4; text-transform: uppercase; letter-spacing: .03em; }

/* ── PREGUNTAS ──────────────────────────────────────────────────────────────── */

/* La seccion de preguntas gasta 72 px de aire exterior en ancho de escritorio porque el
   acordeon gano 12 por fila; a 390 px, donde la rejilla se apila, recupera los 96. */
.seccion--faq { padding-block: 72px; }

.faq-rejilla { display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; align-items: start; }
/* El acordeón va sobre #f2f2f2 y no sobre #f7f7f7. Los dos están en la paleta del
   original, pero #f7f7f7 sobre una sección #fafafa son tres unidades de diferencia
   y la caja desaparece: en las tomas del original cada pregunta se lee como un
   bloque con esquina redondeada, y ésa es la estructura que hay que clonar. */
.faq-lista { display: flex; flex-direction: column; gap: 12px; }
.faq {
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  border-radius: var(--r);
  background: var(--n200);
  transition: padding .2s;
}
.faq:hover { padding-inline: 24px; background: var(--n300); }
.faq:hover .faq__signo { background: var(--tinta-boton); }
.faq:hover .faq__signo svg { stroke: #fff; }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  text-align: left;
  font-size: 16px;
}
.faq__signo {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none;
  border: var(--borde);
  border-radius: var(--r-min);
  background: var(--blanco);
  transition: transform .2s;
}
.faq__signo svg { width: 16px; height: 16px; }
.faq[open] .faq__signo { transform: rotate(45deg); }
.faq__a { overflow: hidden; }
.faq__a p { margin-top: 12px; padding-right: 68px; }

/* ── LLAMADA FINAL ──────────────────────────────────────────────────────────── */

.banda {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 6px;
  align-items: center;
  padding: 40px;
  border-radius: var(--r);
  background: var(--n100);
}
.banda__texto { max-width: var(--ancho-m); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.banda__foto { position: relative; border-radius: var(--r); overflow: hidden; display: flex; }
.banda__foto::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .62));
  pointer-events: none;
}
.banda__foto img { width: 100%; aspect-ratio: 11 / 12; object-fit: cover; }

/* ── PIE ────────────────────────────────────────────────────────────────────── */

.pie { background: var(--n100); }
.pie__caja { padding: 28px 40px 32px; display: flex; flex-direction: column; gap: 20px; }
/* `overflow: clip` y no `hidden`: los 48 px de `translateY` con que entra cada banda
   creaban área desplazable dentro de esta caja y el navegador pintaba una BARRA DE
   DESPLAZAMIENTO de verdad entre la tarjeta blanca y su marco de foto. Un crítico la vio
   y tenía razón: no era un elemento de diseño, era suciedad. `clip` recorta sin crear
   contenedor de scroll. */
.pie__bandas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: none; overflow: clip; }
.pie__compra {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  padding: 20px 32px;
  border-radius: var(--r);
  background: var(--negro);
  color: var(--blanco);
  text-align: center;
}
.pie__foto { position: relative; border-radius: var(--r); overflow: hidden; display: flex;
  align-items: center; justify-content: center; min-height: 168px; }
.pie__foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pie__foto .mock { position: relative; max-width: 300px; padding: 12px; transform: scale(.88); }

.pie__nav { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; }
.pie__col { display: flex; flex-direction: column; gap: 10px; }
.pie__col h4 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-texto); font-weight: 500; }
.pie__col ul { display: flex; flex-direction: column; gap: 0; font-size: 14px; line-height: 1.45; }
.pie__col a { display: inline-block; transition: opacity .2s, transform .2s; }
.pie__col a:hover { opacity: .5; transform: translateX(6px); }

.pie__boletin { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; }
.pie__boletin form { display: flex; gap: 8px; }
.pie__boletin input {
  flex: 1; min-width: 0;
  padding: 10px 16px;
  border: var(--borde);
  border-radius: var(--r-pil);
  background: var(--blanco);
  font: inherit;
  font-size: 14px;
}
.pie__info { display: flex; justify-content: space-between; gap: 24px; padding-top: 14px; border-top: var(--borde); }
.pie__legal { color: var(--gris-texto); font-size: 11px; line-height: 1.5; }

/* ── MOVIMIENTO ─────────────────────────────────────────────────────────────────
   El original NO hace scrub: entra y se queda. Medido en la pasada de vuelta —las
   mismas fracciones salen vacías al bajar y montadas al subir— y en el inventario:
   48 px de desplazamiento en las secciones de contenido, opacidad 0→1, escalonado
   entre hermanos. Aquí es lo mismo, con IntersectionObserver y sin rebobinar.
   ───────────────────────────────────────────────────────────────────────────── */

.entra {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--i, 0) * .09s);
}
.entra.visto { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .entra { opacity: 1; transform: none; transition: none; }
  .tira__pista, .titulares__pista, .testimonios__pista { animation: none; }
}

/* ── LA OBERTURA · lo único que dispara por CARGA y no por scroll ──────────────
   Es donde se juega la primera impresión entera, y por eso está puesta UNA vez. El
   resto de la página entra con el barrido de arriba, que es sobrio a propósito:
   repetir el gesto de la portada en cada sección lo convertiría en un tic.

   LA CLASE `.movimiento` LA PONE UN BLOQUE SÍNCRONO EN LA CABEZA, y sin ella aquí no
   se esconde nada. Es el contrato entero: si el JS no llega, no corre o el sistema
   pide menos movimiento, la portada se sirve montada y quieta en vez de en blanco.

   El contrato con el JS va en un solo sentido: todo selector de aquí abajo lo destapa
   `gsap.set(...)` como primera línea de la obertura, antes de construir ningún tween. */
.movimiento .hero .o-pieza,
.movimiento .hero .o-titular,
.movimiento .hero .o-tira { opacity: 0; }

/* ── SCROLL SUAVE ───────────────────────────────────────────────────────────────
   Lenis toma el control del desplazamiento y necesita estas cuatro reglas suyas:
   sin ellas convive con `scroll-behavior` nativo y el resultado son dos suavizados
   peleándose por el mismo gesto. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── ANCHOS INTERMEDIOS ─────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .rejilla-3, .pasos, .diario { grid-template-columns: 1fr 1fr; }
  .faq-rejilla, .dos-col, .banda, .pie__bandas { grid-template-columns: 1fr; }
  .pie__nav { grid-template-columns: 1fr 1fr; }
  .h1 { font-size: 44px; }
  .entradilla, .h2, .pastilla { font-size: 32px; }
}

/* ── MÓVIL ─────────────────────────────────────────────────────────────────────
   A 390 px todo lo que era rejilla se apila y las tres tiras siguen corriendo,
   porque el movimiento por tiempo no depende del ancho. Dos cosas hay que
   deshacer a mano: las alturas fijas de 280 de la cita y la tarjeta de dato —que
   a ancho completo cortarían el texto— y el relleno de 40 del panel del mock, que
   dejaría la tarjeta de reserva en 262 px y sus seis chips de día ilegibles.
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  /* El aire entre secciones NO se recorta en el estrecho: el original mantiene sus 96 px
     a 390 px de ancho, y bajarlos a 64 dejaba la pagina en 17,0 pantallas frente a las
     18,5 que mide el original. */
  :root { --pad-m: 96px; }

  /* Las tarjetas apiladas pierden 60 px de alto minimo: una rejilla de 3x2 que se
     convierte en una columna de seis no necesita el mismo suelo por tarjeta. */
  .tarjeta { min-height: 260px; }

  .borde-lateral { padding-inline: 20px; }

  .rejilla-3, .pasos, .diario, .lista-2, .pie__nav, .media-rejilla { grid-template-columns: 1fr; }

  /* El original pone sus llamadas a ancho de columna en el estrecho; ajustadas al texto
     desalineaban el borde derecho en cinco sitios. */
  .hero__texto .btn-fila .btn,
  .banda__texto .btn-fila .btn,
  #equipo .bloque > .btn,
  .bloque > .btn { width: 100%; }
  .btn-fila { width: 100%; }
  .btn-fila .btn { flex: 1 1 100%; }

  /* Una tarjeta entera en pantalla con el borde de la siguiente asomando. */
  .testimonio { width: 82vw; }
  .mock__horas { grid-template-columns: 1fr 1fr; }

  .h1 { font-size: 36px; }
  /* El titular de sección del original mide 40 px a 390 de ancho y rompe en tres o
     cuatro líneas: es lo que puntúa la página. A 26 px la aplanaba a un tamaño
     intermedio uniforme. El h1 del hero y los títulos de paso NO se tocan, que ésos ya
     encajaban. */
  .entradilla, .h2 { font-size: 35px; line-height: 1.15; }

  /* La fila de valoración va pegada al margen izquierdo, como en el original, y sin
     animación de entrada: en su primer fotograma ya está puesta. */
  .hero__texto .hero__valoracion { align-self: flex-start; }
  .h4 { font-size: 22px; }
  .pastilla { font-size: 22px; padding: 12px 24px; }

  .retrato__pie { font-size: 11px; padding-inline: 12px; }

  /* A 390 px sólo se ve una tarjeta y media, así que la primera imagen de la página tiene
     que enseñar a alguien. La foto y el hueco comparten relación 3:4, de modo que
     `object-position` por sí solo no recorta nada: hay que estrechar el hueco para que
     `cover` tenga de dónde cortar, y entonces el encuadre sube al torso y la cabeza. */
  .retrato__caja { display: flex; }
  /* La ampliación va sobre la foto, dentro de su marco: sube la cara al tercio superior
     y llena la tarjeta sin dejar costura con el desenfoque del fondo. */
  .retrato__foto { transform: scale(1.45); transform-origin: 50% 24%; border: 0; }

  /* La tarjeta blanca del pie, centrada de verdad dentro de su foto. */
  .pie__foto { padding: 16px; }
  .pie__foto .mock { width: 100%; }

  /* La altura fija sólo tiene sentido cuando la cita y el dato comparten fila. */
  .cita, .dato { height: auto; min-height: 220px; overflow: visible; }

  .panel { padding: 16px; min-height: 0; }
  .mock { padding: 16px; max-width: none; }
  .mock__quien img { width: 56px; height: 56px; }
  .mock__dia b { font-size: 13px; }
  .mock__dia small { font-size: 9px; }

  .barra__medio, .barra__nota, .barra__lado .btn--2 { display: none; }
  .barra__hamburguesa { display: flex; }

  /* Con el menú del centro en `display:none` deja de ser un elemento de la rejilla, así
     que el grupo derecho caía en la columna del medio y la barra terminaba 24 pt antes
     que el resto de la página. En el estrecho la barra no es rejilla: es una fila con los
     dos extremos pegados al margen, como todo lo demás. */
  .barra__fila { display: flex; justify-content: space-between; }

  .cabecera-fila { flex-direction: column; align-items: flex-start; }
  .seccion--faq { padding-block: 96px; }
  .banda { padding: 24px; }
  /* En el estrecho la foto del cierre vuelve al 3:4 del resto de retratos de la casa. */
  .banda__foto img { aspect-ratio: 3 / 4; }
  .faq__a p { padding-right: 0; }
  .faq:hover { padding-inline: 16px; }

  .pie__caja { padding: 96px 20px 64px; gap: 32px; }
  .pie__compra { padding: 40px 20px; gap: 24px; }
  .pie__foto { min-height: 0; padding: 16px; }
  .pie__foto .mock { max-width: none; transform: none; }
  .pie__info { flex-direction: column; gap: 8px; }
  .pie__boletin { grid-template-columns: 1fr; gap: 10px; }
  .pie__boletin form { flex-direction: column; align-items: stretch; }

  .ficha-negra { flex-wrap: wrap; }
  .ficha-negra .btn { margin-left: 0; }
}

/* ── Distintivo de Clínicas: el camino de vuelta al portafolio ────────────────
   Lo añade scripts/publicar-piezas.mjs al publicar. NO está en la fuente de la pieza, y no debe:
   el vídeo del portafolio se graba de la fuente y ahí este sello sobra. */
.ct-firma{position:fixed;left:14px;bottom:14px;z-index:2147483000;display:inline-flex;align-items:center;gap:.35em;
  padding:.55em .85em;border-radius:999px;background:rgba(17,17,17,.84);color:#fff;
  font:500 12px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  letter-spacing:.01em;text-decoration:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 1px 4px rgba(0,0,0,.22);opacity:.6;transition:opacity .18s ease}
.ct-firma:hover,.ct-firma:focus-visible{opacity:1;color:#fff;text-decoration:none}
.ct-firma b{font-weight:700}
@media (max-width:520px){.ct-firma{left:10px;bottom:10px;font-size:11px;padding:.5em .75em}}
@media (prefers-reduced-motion:reduce){.ct-firma{transition:none}}
@media print{.ct-firma{display:none}}