/* ============================================================
   CINE MÉDICO — Sistema visual
   "Encuadre y pulso": geometría clínica + acento humano.
   ============================================================
   ÍNDICE
   01. Tokens
   02. Reset y base
   03. Tipografía
   04. Utilidades y layout
   05. Botones
   06. Header y navegación
   07. Hero
   08. Secciones de inicio
   09. Servicios
   10. Showreel y modal de video
   11. Portafolio y lightbox
   12. Metodología
   13. Caso de estudio
   14. Diferenciadores
   15. Testimonios
   16. Público objetivo
   17. FAQ
   18. CTA final
   19. Footer
   20. Formulario
   21. WhatsApp flotante
   22. Animaciones de scroll
   23. Responsive
   ============================================================ */

/* ---------- 01. TOKENS ---------- */
:root {
  /* Color — extraído del logotipo */
  --navy:        #07182B; /* Azul quirófano — fondo dominante */
  --navy-soft:   #0C2340; /* Superficie elevada sobre navy */
  --oxford:      #20242B; /* Grafito Oxford */
  --clinic:      #F7F9FB; /* Blanco clínico */
  --blue:        #0876B9; /* Azul señal — el color del logo */
  --blue-deep:   #065C91;
  --pink:        #F39AA2; /* Rosa REC — acento escaso, nunca decorativo */
  --champagne:   #C8B27A; /* Acento premium, uso mínimo */

  /* Neutros derivados */
  --ink:         #0B1725; /* Texto sobre blanco */
  --ink-soft:    #4A5A6B; /* Texto secundario sobre blanco */
  --mist:        #93A2B3; /* Texto secundario sobre navy */
  --line-dark:   rgba(247, 249, 251, 0.12); /* Hairline sobre navy */
  --line-light:  rgba(11, 23, 37, 0.10);    /* Hairline sobre blanco */

  /* Tipografía */
  --font-display: 'Fraunces', Georgia, serif;      /* Solo 3 momentos del sitio */
  --font-ui:      'Jost', system-ui, sans-serif;   /* Gemela del logotipo */
  --font-body:    'Inter', system-ui, sans-serif;  /* Lectura larga */

  /* Escala */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  --step-3:  clamp(2.1rem, 1.7rem + 2vw, 3.2rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 5rem);

  /* Ritmo */
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --maxw:    1280px;
  --measure: 62ch;

  /* Movimiento */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.6s;
}

/* ---------- 02. RESET Y BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--clinic);
  background: var(--navy);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }

/* Foco visible — requisito de accesibilidad, no opcional */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Salto al contenido para lectores de pantalla y teclado */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 200;
  background: var(--blue);
  color: var(--clinic);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-ui);
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 03. TIPOGRAFÍA ---------- */

/* Fraunces aparece SOLO en: hero, frase de posicionamiento y CTA final.
   Si se usa en más lugares, pierde su valor. */
.display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-4);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h1, h2, h3, h4 {
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

/* Eyebrow: la etiqueta pequeña que precede a cada título.
   Encodifica sección, no decora. */
.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--blue);
}

.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--mist);
  max-width: var(--measure);
  font-weight: 300;
}

.muted { color: var(--mist); }

/* ---------- 04. UTILIDADES Y LAYOUT ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }

/* Superficies */
.s-navy  { background: var(--navy);  color: var(--clinic); }
.s-oxford{ background: var(--oxford);color: var(--clinic); }
.s-light { background: var(--clinic);color: var(--ink); }
.s-light .lead,
.s-light .muted { color: var(--ink-soft); }
.s-light .eyebrow { color: var(--blue-deep); }
.s-light .eyebrow::before { background: var(--blue-deep); }

/* EL PULSO — divisor de secciones.
   Es la "M" del logotipo convertida en línea. Firma de la marca. */
.pulse-rule {
  width: 100%;
  height: 40px;
  color: var(--blue);
  opacity: 0.55;
}
.pulse-rule svg { width: 100%; height: 100%; }
.pulse-rule path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* EL ENCUADRE — marco abierto, se dibuja al entrar en pantalla. */
.frame {
  position: relative;
  padding: clamp(1.75rem, 4vw, 3rem);
}
.frame::before,
.frame::after {
  content: '';
  position: absolute;
  width: 90px;
  height: 90px;
  border: 2px solid var(--blue);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  opacity: 0;
}
.frame::before {
  top: 0; left: 0;
  border-right: none; border-bottom: none;
  transform: translate(12px, 12px);
}
.frame::after {
  bottom: 0; right: 0;
  border-left: none; border-top: none;
  transform: translate(-12px, -12px);
}
.frame.is-visible::before,
.frame.is-visible::after {
  opacity: 1;
  transform: translate(0, 0);
}

/* EL PUNTO REC — un solo punto por pantalla. Nunca más. */
.rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pink);
  display: inline-block;
  flex: none;
}
.rec-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mist);
}

/* ---------- 05. BOTONES ---------- */
.btn {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border-radius: 2px; /* Casi recto: el encuadre no tiene esquinas blandas */
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), transform 0.15s var(--ease);
  cursor: pointer;
  text-align: center;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--blue);
  color: var(--clinic);
  border: 1px solid var(--blue);
}
.btn-primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); }

.btn-ghost {
  background: transparent;
  color: var(--clinic);
  border: 1px solid var(--line-dark);
}
.btn-ghost:hover { border-color: var(--clinic); background: rgba(247, 249, 251, 0.06); }

.s-light .btn-ghost { color: var(--ink); border-color: var(--line-light); }
.s-light .btn-ghost:hover { border-color: var(--ink); background: rgba(11, 23, 37, 0.04); }

/* Enlace con flecha — micro-interacción de la marca */
.link-arrow {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.link-arrow span { transition: transform 0.3s var(--ease); }
.link-arrow:hover span { transform: translateX(5px); }

/* ---------- 06. HEADER Y NAVEGACIÓN ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
              padding 0.4s var(--ease);
  border-bottom: 1px solid transparent;
  padding-block: 1.25rem;
}
/* Al hacer scroll el header se "materializa" */
.header.is-scrolled {
  background: rgba(7, 24, 43, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line-dark);
  padding-block: 0.85rem;
}

.header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* >>> REEMPLAZAR: assets/images/logo-cinemedico.svg <<< */
.logo img { height: 38px; width: auto; }

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}
.nav-link {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  color: var(--clinic);
  padding: 0.35rem 0;
  position: relative;
  opacity: 0.82;
  transition: opacity 0.25s;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--blue);
  transition: width 0.3s var(--ease);
}
.nav-link:hover { opacity: 1; }
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { width: 100%; }
.nav-link[aria-current="page"] { opacity: 1; }

.nav-actions { display: flex; align-items: center; gap: 1rem; }

/* Botón hamburguesa */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--clinic);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- 07. HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media video,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Overlay doble: oscurece y tiñe de navy para que el texto siempre lea */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7,24,43,0.55) 0%, rgba(7,24,43,0.75) 55%, rgba(7,24,43,0.95) 100%),
    linear-gradient(90deg, rgba(7,24,43,0.85) 0%, rgba(7,24,43,0.25) 70%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding-block: 9rem 6rem;
  width: 100%;
}
.hero h1 { max-width: 15ch; }
.hero .lead { margin-top: 1.75rem; max-width: 46ch; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.5rem;
}

.hero-rec {
  position: absolute;
  top: 6.5rem;
  right: var(--gutter);
  z-index: 2;
}
/* El punto late — es lo único vivo en el encuadre */
.hero-rec .rec-dot { animation: rec-pulse 2.4s ease-in-out infinite; }
@keyframes rec-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.82); }
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mist);
}
.scroll-cue i {
  display: block;
  width: 1px; height: 44px;
  background: linear-gradient(180deg, var(--blue), transparent);
  animation: cue 2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue {
  0%, 100% { transform: scaleY(0.3); opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* ---------- 08. SECCIONES DE INICIO ---------- */

/* Posicionamiento — momento Fraunces #2 */
.stance { text-align: left; }
.stance .display {
  font-size: var(--step-3);
  max-width: 20ch;
  line-height: 1.15;
}
.stance .display em {
  font-style: normal;
  color: var(--blue);
}
.stance-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}
.stance-grid p { max-width: 46ch; }

/* Encabezado de sección reutilizable */
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.sec-head p { max-width: 44ch; }

/* ---------- 09. SERVICIOS ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1px;
  background: var(--line-light); /* El gap se convierte en hairline */
  border: 1px solid var(--line-light);
}
.s-navy .services-grid,
.s-oxford .services-grid {
  background: var(--line-dark);
  border-color: var(--line-dark);
}

.service {
  position: relative;
  background: var(--clinic);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  min-height: 340px;
  overflow: hidden;
  transition: background 0.45s var(--ease);
}
.s-navy .service, .s-oxford .service { background: var(--navy); }

/* La imagen aparece al hover, contenida y oscurecida: nunca grita */
.service-media {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.55s var(--ease), transform 1.2s var(--ease);
  transform: scale(1.06);
  z-index: 0;
}
.service-media img { width: 100%; height: 100%; object-fit: cover; }
.service-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,24,43,0.7), rgba(7,24,43,0.94));
}
.service:hover .service-media,
.service:focus-within .service-media {
  opacity: 1;
  transform: scale(1);
}
.service:hover, .service:focus-within { background: var(--navy); }

.service > * { position: relative; z-index: 1; }

.service-num {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--blue);
  margin-bottom: auto;
}
.service h3 {
  margin-top: 2.5rem;
  transition: color 0.4s var(--ease);
}
.service p {
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin-top: 0.75rem;
  transition: color 0.4s var(--ease);
}
.service .link-arrow { margin-top: 1.5rem; }

.service:hover h3, .service:focus-within h3 { color: var(--clinic); }
.service:hover p,  .service:focus-within p  { color: var(--mist); }
.s-navy .service h3 { color: var(--clinic); }
.s-navy .service p  { color: var(--mist); }

/* ---------- 10. SHOWREEL Y MODAL DE VIDEO ---------- */
.reel {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--oxford);
  cursor: pointer;
  display: block;
  width: 100%;
}
.reel img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease), filter 0.6s var(--ease);
  filter: saturate(0.85) brightness(0.7);
}
.reel:hover img { transform: scale(1.04); filter: saturate(1) brightness(0.8); }

.reel-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.reel-play i {
  width: clamp(64px, 8vw, 92px);
  aspect-ratio: 1;
  border: 1px solid var(--clinic);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(7, 24, 43, 0.35);
  backdrop-filter: blur(6px);
  transition: background 0.35s var(--ease), transform 0.35s var(--ease);
}
.reel:hover .reel-play i {
  background: var(--blue);
  transform: scale(1.06);
}
.reel-play svg { width: 20px; height: 20px; fill: var(--clinic); margin-left: 3px; }

.reel-meta {
  position: absolute;
  left: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2rem);
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Modal — sirve para showreel y para lightbox */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  place-items: center;
  padding: var(--gutter);
  background: rgba(7, 24, 43, 0.96);
  backdrop-filter: blur(10px);
}
.modal.is-open { display: grid; }
.modal-body {
  width: min(1120px, 100%);
  max-height: 86vh;
}
.modal-body iframe,
.modal-body video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}
.modal-body img {
  width: 100%;
  max-height: 86vh;
  object-fit: contain;
}
.modal-close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  width: 48px; height: 48px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color 0.3s, background 0.3s;
}
.modal-close:hover { border-color: var(--clinic); background: rgba(247,249,251,0.08); }
.modal-caption {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--mist);
  margin-top: 1rem;
  text-align: center;
}

/* ---------- 11. PORTAFOLIO Y LIGHTBOX ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}
.filter {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  color: var(--mist);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.filter:hover { color: var(--clinic); border-color: var(--clinic); }
.filter[aria-pressed="true"] {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--clinic);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}

.work {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--oxford);
  aspect-ratio: 16 / 10;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color 0.4s var(--ease);
}
.work:hover { border-color: var(--blue); }

.work-poster,
.work-preview {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.work-poster {
  transition: opacity 0.5s var(--ease), transform 1.2s var(--ease);
  filter: brightness(0.72) saturate(0.9);
}
/* El video de preview solo se carga y reproduce al hover (rendimiento) */
.work-preview { opacity: 0; transition: opacity 0.5s var(--ease); }
.work:hover .work-preview,
.work:focus-visible .work-preview { opacity: 1; }
.work:hover .work-poster { opacity: 0; transform: scale(1.05); }

.work::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(7,24,43,0.92));
  pointer-events: none;
}

.work-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.5rem;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.work-info h3 { font-size: var(--step-0); }
.work-cat {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  display: block;
  margin-bottom: 0.35rem;
}
/* Etiqueta obligatoria en piezas que no son trabajo real de cliente */
.badge-demo {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  font-family: var(--font-ui);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  background: rgba(200, 178, 122, 0.15);
  border: 1px solid var(--champagne);
  color: var(--champagne);
}
.work.is-hidden { display: none; }

.work-empty {
  grid-column: 1 / -1;
  padding: 3rem 0;
  color: var(--mist);
  font-family: var(--font-ui);
}

/* ---------- 12. METODOLOGÍA ---------- */
/* Los números SÍ importan aquí: es una secuencia real de trabajo. */
.method {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-dark);
  margin-top: 3rem;
}
.step {
  padding: 2rem 1.5rem 0 0;
  position: relative;
}
.step::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 0; height: 1px;
  background: var(--blue);
  transition: width 1s var(--ease);
}
.method.is-visible .step::before { width: 100%; }
.method.is-visible .step:nth-child(2)::before { transition-delay: 0.15s; }
.method.is-visible .step:nth-child(3)::before { transition-delay: 0.3s; }
.method.is-visible .step:nth-child(4)::before { transition-delay: 0.45s; }
.method.is-visible .step:nth-child(5)::before { transition-delay: 0.6s; }

.step-num {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--blue);
  display: block;
  margin-bottom: 1rem;
}
.step h3 { margin-bottom: 0.6rem; }
.step p { font-size: var(--step--1); color: var(--mist); }

.method-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-dark);
}
.method-note {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--step--1);
  color: var(--mist);
  max-width: 26ch;
}
.method-note strong {
  display: block;
  color: var(--clinic);
  font-weight: 400;
  font-family: var(--font-ui);
  margin-bottom: 0.15rem;
}

/* ---------- 13. CASO DE ESTUDIO ---------- */
.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line-dark);
  border-block: 1px solid var(--line-dark);
  margin-top: 3rem;
}
.case-cell {
  background: var(--navy);
  padding: 2rem 1.75rem;
}
.s-light .case-grid { background: var(--line-light); border-color: var(--line-light); }
.s-light .case-cell { background: var(--clinic); }
.case-cell h3 {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1rem;
}
.case-cell p { font-size: var(--step--1); }

.bts-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.bts-strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(1) brightness(0.85);
  transition: filter 0.5s var(--ease);
  cursor: pointer;
}
.bts-strip img:hover { filter: grayscale(0) brightness(1); }

/* ---------- 14. DIFERENCIADORES ---------- */
.diffs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 3rem 2.5rem;
  margin-top: 3.5rem;
}
.diff {
  border-top: 1px solid var(--line-dark);
  padding-top: 1.25rem;
}
.diff h3 {
  font-size: var(--step-0);
  margin-bottom: 0.5rem;
}
.diff p { font-size: var(--step--1); color: var(--mist); }

.diff-statement {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--step-3);
  line-height: 1.2;
  max-width: 18ch;
}
.diff-statement b { font-weight: 500; color: var(--blue); }

/* ---------- 15. TESTIMONIOS ---------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.quote {
  border: 1px solid var(--line-light);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.s-navy .quote { border-color: var(--line-dark); }

.quote-video {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--oxford);
  overflow: hidden;
  cursor: pointer;
  margin: -2rem -1.75rem 0;
}
.quote-video img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.75); }
.quote-video .reel-play i { width: 52px; border-color: var(--clinic); }

.quote blockquote {
  font-size: var(--step-0);
  line-height: 1.6;
  font-style: italic;
  color: var(--ink-soft);
}
.s-navy .quote blockquote { color: var(--mist); }

.quote figcaption {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line-light);
}
.s-navy .quote figcaption { border-color: var(--line-dark); }
.quote figcaption b { display: block; font-weight: 500; }
.quote figcaption span { color: var(--ink-soft); font-size: 0.82rem; }
.s-navy .quote figcaption span { color: var(--mist); }

.legal-note {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 2rem;
  padding-left: 1rem;
  border-left: 2px solid var(--champagne);
  max-width: 60ch;
}
.s-navy .legal-note { color: var(--mist); }

/* ---------- 16. PÚBLICO OBJETIVO ---------- */
.audience {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  margin-top: 3rem;
}
.aud {
  background: var(--navy);
  padding: 2rem 1.5rem;
  transition: background 0.4s var(--ease);
}
.aud:hover { background: var(--navy-soft); }
.aud h3 { font-size: var(--step-0); margin-bottom: 0.4rem; }
.aud p { font-size: 0.82rem; color: var(--mist); }

/* ---------- 17. FAQ ---------- */
.faq { max-width: 820px; margin-top: 2.5rem; }
.faq-item { border-bottom: 1px solid var(--line-light); }
.s-navy .faq-item { border-color: var(--line-dark); }

.faq-q {
  width: 100%;
  text-align: left;
  padding: 1.5rem 3rem 1.5rem 0;
  font-family: var(--font-ui);
  font-size: var(--step-1);
  font-weight: 400;
  position: relative;
  transition: color 0.3s;
}
.faq-q:hover { color: var(--blue); }
.faq-q::after {
  content: '';
  position: absolute;
  right: 0.5rem; top: 50%;
  width: 12px; height: 1px;
  background: currentColor;
  transition: transform 0.35s var(--ease);
}
.faq-q::before {
  content: '';
  position: absolute;
  right: 0.5rem; top: 50%;
  width: 12px; height: 1px;
  background: currentColor;
  transform: rotate(90deg);
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.faq-q[aria-expanded="true"]::before { transform: rotate(0deg); opacity: 0; }

.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.45s var(--ease);
}
.faq-a p {
  padding-bottom: 1.75rem;
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: var(--step--1);
}
.s-navy .faq-a p { color: var(--mist); }

/* ---------- 18. CTA FINAL ---------- */
/* Momento Fraunces #3 — el último. */
.cta {
  text-align: center;
  padding-block: clamp(5rem, 10vw, 9rem);
  position: relative;
}
.cta .display {
  font-size: var(--step-3);
  max-width: 18ch;
  margin-inline: auto;
}
.cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.5rem;
}

/* ---------- 19. FOOTER ---------- */
.footer {
  background: var(--oxford);
  padding-top: clamp(3.5rem, 6vw, 5rem);
  padding-bottom: 2rem;
  border-top: 1px solid var(--line-dark);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer-grid h4 {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.25rem;
  font-weight: 500;
}
.footer-grid li { margin-bottom: 0.6rem; }
.footer-grid a {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--mist);
  transition: color 0.25s;
}
.footer-grid a:hover { color: var(--clinic); }
.footer-brand p {
  font-size: var(--step--1);
  color: var(--mist);
  max-width: 30ch;
  margin-top: 1.25rem;
}
.footer-logo img { height: 34px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.78rem;
  color: var(--mist);
  font-family: var(--font-ui);
}
.footer-legal { max-width: 65ch; line-height: 1.6; }

.socials { display: flex; gap: 0.75rem; }
.socials a {
  width: 40px; height: 40px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color 0.3s, background 0.3s;
}
.socials a:hover { border-color: var(--blue); background: rgba(8,118,185,0.12); }
.socials svg { width: 17px; height: 17px; fill: currentColor; }

/* ---------- 20. FORMULARIO ---------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field.full { grid-column: 1 / -1; }

.field label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
}
.field .req { color: var(--pink); }

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--clinic);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  padding: 0.75rem 0;
  border-radius: 0;
  transition: border-color 0.3s var(--ease);
  width: 100%;
}
.field select { cursor: pointer; }
.field select option { background: var(--navy); color: var(--clinic); }
.field textarea { resize: vertical; min-height: 110px; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--blue);
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(147,162,179,0.5); }

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-bottom-color: var(--pink); }

.error-msg {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--pink);
  min-height: 1.1em;
}

.check {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  cursor: pointer;
}
.check input { width: 18px; height: 18px; flex: none; margin-top: 3px; accent-color: var(--blue); }
.check span { font-size: 0.85rem; color: var(--mist); line-height: 1.5; }
.check a { color: var(--blue); text-decoration: underline; }

.form-status {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  display: none;
  border-left: 2px solid;
}
.form-status.is-success {
  display: block;
  border-color: var(--blue);
  background: rgba(8, 118, 185, 0.1);
  color: var(--clinic);
}
.form-status.is-error {
  display: block;
  border-color: var(--pink);
  background: rgba(243, 154, 162, 0.1);
  color: var(--pink);
}

/* ---------- 21. WHATSAPP FLOTANTE ---------- */
.wa {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--navy-soft);
  border: 1px solid var(--line-dark);
  display: grid;
  place-items: center;
  color: var(--clinic);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s;
}
.wa:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-3px);
}
.wa svg { width: 22px; height: 22px; fill: currentColor; }

/* ---------- 22. ANIMACIONES DE SCROLL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }

/* Nadie debería marearse con nuestro sitio. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .frame::before, .frame::after { opacity: 1; transform: none; }
  .method .step::before { width: 100%; }
}

/* ---------- 23. RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .method { grid-template-columns: repeat(2, 1fr); gap: 0 2rem; }
  .step { padding-bottom: 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stance-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    inset: 0;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(100%);
    transition: transform 0.45s var(--ease);
    z-index: 110;
  }
  .nav.is-open { transform: translateX(0); }
  .nav-list {
    flex-direction: column;
    gap: 1.75rem;
    text-align: center;
  }
  .nav-link { font-size: 1.4rem; }

  .header .nav-actions .btn { display: none; }
  .nav-list .btn { display: inline-flex; margin-top: 1rem; }

  .hero-inner { padding-block: 8rem 7rem; }
  .hero-rec { top: 5.5rem; }
  .form-grid { grid-template-columns: 1fr; }
  .method { grid-template-columns: 1fr; }
  .method-notes { gap: 1.75rem; }
  .footer-bottom { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .reel { aspect-ratio: 16 / 10; }
  .hero-actions .btn { flex: 1 1 100%; }
  .frame::before, .frame::after { width: 48px; height: 48px; }
}

/* El menú móvil no debe ser visible en escritorio si el JS falla */
@media (min-width: 861px) {
  .nav-list .btn { display: none; }
}