/* ==========================================================================
   Maritima Dental — LP variante B · "En Voz Baja"
   Una sola conversación: cursiva serif = el paciente piensa · recta = la clínica responde.
   Firma: "el hilo en voz baja" — un hilo verde continuo que crece con el scroll.
   ========================================================================== */

/* ------------------------------------------------------------------ fuentes */
/* Fraunces viene ya fijada en SOFT=100 / WONK=0: aquí solo quedan opsz y wght. */
@font-face {
  font-family: Fraunces;
  src: url("/lp/fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Fraunces;
  src: url("/lp/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Karla;
  src: url("/lp/fonts/karla.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------- tokens */
:root {
  --porcelana: #FBF7F4;
  --tinta: #26211E;
  --tinta-suave: #5C534D;
  --verde: #2E4B3F;
  --verde-hover: #263F35;
  --rubor: #E5BDB5;
  --arena: #F1E7DC;
  --arena-hover: #E9DCCD;
  --lino: #D8CCC0;
  --teja: #9C4F3C;
  --teja-texto: #7C3A2A;
  --noche: #1E2B26;
  --noche-texto: #F3EDE7;
  --hilo-noche: #4F7060;

  --serif: Fraunces, Georgia, "Times New Roman", serif;
  --sans: Karla, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --t-quote: clamp(2rem, 7.5vw, 4.25rem);
  --t-hero: clamp(2.05rem, 6.6vw, 3.5rem);
  --t-h2: clamp(1.55rem, 5vw, 2.6rem);
  --t-body: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-micro: 0.8125rem;

  /* El ritmo desigual ES el diseño: silencio largo antes de cada pregunta,
     respuesta pegada justo detrás. */
  --silencio: clamp(96px, 18vw, 180px);
  --respiro: 24px;
  --seccion: clamp(64px, 11vw, 120px);

  --max: 1200px;
  --pad: 24px;      /* margen de contenido */
  --hilo-x: 12px;   /* el hilo vive EN el margen: el texto nunca cae detrás */

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 620ms;
}

@media (min-width: 900px) {
  :root {
    --pad: 120px;
    --hilo-x: 56px;
  }
}

/* --------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--porcelana);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
strong { font-weight: 700; }

a { color: var(--verde); }
a:hover { color: var(--verde-hover); }

:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 2px;
}

.contenedor {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.kicker {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(0.6875rem, 0.62rem + 0.3vw, 0.8rem);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  line-height: 1.4;
}

.titulo {
  font-family: var(--serif);
  font-weight: 500;
  font-style: normal;
  font-size: var(--t-h2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 20ch;
  font-variation-settings: "opsz" 60;
}

.ico { width: 20px; height: 20px; flex: none; }

.salta {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--verde);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  text-decoration: none;
  font-weight: 700;
}
.salta:focus { left: 0; }

/* ----------------------------------------------------- las dos voces / marca */
.voz-paciente {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
}
.voz-clinica {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
}

/* La marca se abre como una respiración, línea a línea. Cada línea es su propio
   span (roturas fijadas a mano) para que clip-path funcione sin tocar el pintado. */
.marca {
  position: relative;
  isolation: isolate;
  display: block;
  width: max-content;
  max-width: 100%;
}
.marca::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.14em;
  right: -0.16em;
  top: 0.2em;
  bottom: 0.08em;
  background: var(--rubor);
  border-radius: 3px;
  transform: skewX(var(--marca-inclina, 0deg));
}

/* ------------------------------------------------------ el hilo (la firma) */
.hilo-track { position: relative; }

.hilo {
  position: absolute;
  left: var(--hilo-x);
  top: 0;
  bottom: 0;
  width: 2px;
  view-timeline: --hilo block;
  pointer-events: none;
}
.hilo__linea {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--verde);
  transform-origin: top;
  /* Por defecto (sin soporte o sin movimiento): el hilo ya está dibujado. */
  transform: scaleY(1);
}
/* El último tramo se desvanece: la clínica termina de preguntar y calla. */
.hilo__linea--fin {
  background: linear-gradient(to bottom, var(--verde) 0, var(--verde) calc(100% - 34px), rgba(46, 75, 63, 0) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hilo__linea {
      animation-name: hilo-crece;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-range: cover 0% cover 92%;
      animation-timeline: --hilo; /* al final: el atajo `animation` lo resetearía */
    }
  }
}
@keyframes hilo-crece {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* Cada pregunta es un nudo del hilo. El último nudo es el punto del footer. */
.nodo {
  position: absolute;
  left: calc(var(--hilo-x) - var(--pad) - 3px);
  top: 0.44em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde);
}

/* ------------------------------------------------------------------ botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.boton--principal {
  background: var(--verde);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--verde-hover), 0 6px 16px -10px rgba(46, 75, 63, 0.55);
}
.boton--principal:hover {
  background: var(--verde-hover);
  color: #fff;
}
.boton--principal:focus-visible {
  outline-color: var(--rubor);
}
@media (prefers-reduced-motion: no-preference) {
  .boton--principal {
    transition: background 200ms ease, transform 200ms var(--ease), box-shadow 200ms ease;
  }
  .boton--principal:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px var(--verde-hover), 0 10px 24px -12px rgba(46, 75, 63, 0.6);
  }
  .boton--principal:active { transform: scale(0.98); }
}

/* Rutas secundarias (WhatsApp / teléfono): mismo peso visual, sin ruido de botón. */
.rutas { display: flex; flex-wrap: wrap; gap: 8px; }
.rutas--apilada { flex-direction: column; align-items: flex-start; }
.rutas__intro {
  margin-top: 18px;
  margin-bottom: 8px;
  font-size: var(--t-micro);
  color: var(--tinta-suave);
}
.ruta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--arena);
  color: var(--tinta);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}
.ruta:hover { background: var(--arena-hover); color: var(--tinta); }
.ruta .ico { color: var(--verde); }
@media (prefers-reduced-motion: no-preference) {
  .ruta, .ruta .ico { transition: background 180ms ease, transform 180ms var(--ease); }
  .ruta:hover .ico { transform: translateX(2px); }
}

.enlace-flecha {
  display: inline-block;
  margin-top: 22px;
  color: var(--verde);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.enlace-flecha:hover { text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------- cabecera */
.cabecera { padding: 12px 0; }
.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.marca-verbal {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1.0625rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.marca-verbal em { font-style: italic; font-weight: 400; }
.cabecera__tel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 6px 4px;
  color: var(--verde);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.cabecera__tel .ico { width: 17px; height: 17px; }

/* -------------------------------------------------------------------- hero */
.hero { padding-top: 14px; padding-bottom: 8px; }
.hero__kicker { margin-bottom: 14px; }

.hero__kop {
  font-size: var(--t-hero);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 500;
  margin-bottom: 16px;
  font-variation-settings: "opsz" 90;
}
.hero__kop .voz-paciente,
.hero__kop .voz-clinica { display: block; }
.hero__kop .voz-clinica { margin-top: 0.06em; }

.hero__sub {
  font-size: clamp(0.9688rem, 0.85rem + 0.5vw, 1.1875rem);
  line-height: 1.6;
  max-width: 52ch;
  margin-bottom: 20px;
  text-wrap: pretty;
}
.hero__cta { display: flex; width: 100%; }
.hero__micro {
  margin-top: 12px;
  font-size: var(--t-micro);
  color: var(--tinta-suave);
}

/* Franja de hechos: la señal de precio ya está por encima del pliegue. */
.tira-hechos {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 34px;
  padding-bottom: 6px;
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--tinta-suave);
}
.tira-hechos li { display: flex; align-items: center; gap: 10px; }
.tira-hechos li::before {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lino);
}
@media (min-width: 700px) {
  .tira-hechos { flex-direction: row; flex-wrap: wrap; gap: 6px 22px; }
  .tira-hechos li:first-child::before { display: none; }
}

@media (min-width: 900px) {
  .cabecera { padding: 20px 0; }
  .hero { padding-top: 40px; padding-bottom: 24px; }
  .hero__kop { margin-bottom: 22px; max-width: 16ch; }
  .hero__sub { margin-bottom: 26px; }
  .hero__cta { display: inline-flex; width: auto; }
  .hero__micro { display: inline-block; margin-left: 20px; }
  .rutas__intro { margin-top: 26px; }
}

/* Pantallas muy bajas: el CTA sigue entrando en el primer scroll. */
@media (max-height: 620px) {
  .hero { padding-top: 8px; }
  .hero__kicker { margin-bottom: 10px; }
  .hero__kop { margin-bottom: 12px; }
  .hero__sub { margin-bottom: 16px; line-height: 1.5; }
  .tira-hechos { padding-top: 26px; }
}

/* ------------------------------------------------ preguntas y respuestas */
.bloque { padding-top: var(--seccion); }
.bloque .titulo { margin-bottom: 8px; }

/* El silencio antes de cada pregunta es la mitad del diseño. */
.tanda { padding-top: var(--silencio); }

.pregunta {
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-quote);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
  --marca-inclina: -8deg;
}
.pregunta .marca + .marca { margin-top: 0.1em; }

.respuesta {
  margin-top: var(--respiro);
  background: var(--arena);
  /* Ángulo de habla: dos esquinas hablan, dos escuchan. */
  border-radius: 24px 4px 24px 4px;
  padding: clamp(20px, 5vw, 32px);
  max-width: 58ch;
}
.respuesta p { text-wrap: pretty; }
.respuesta--amplia { max-width: 62ch; }

@media (min-width: 900px) {
  /* El « cuelga en el margen hasta rozar el hilo: la pregunta cuelga del hilo. */
  .pregunta {
    margin-left: -40px;
    max-width: 15ch;
    text-indent: -0.36em;
    padding-bottom: 34px;
  }
  .pregunta .marca { text-indent: 0; }
  .pregunta .marca:first-of-type { text-indent: -0.36em; }
  .respuesta {
    margin-left: 180px;
    margin-top: -32px;   /* la respuesta se solapa con el bloque de la pregunta */
  }
}

/* ------------------------------------------------------------------ proceso */
.pasos { margin-top: clamp(40px, 8vw, 64px); }
/* El número es marca de agua a la izquierda y el texto le pasa por encima;
   el dibujo se va al margen derecho para que ninguno de los dos se estorbe. */
.paso {
  position: relative;
  padding-block: clamp(26px, 5vw, 36px);
  padding-left: 34px;
  padding-right: 70px;
}
.paso + .paso { border-top: 1px solid var(--lino); }

.paso__num {
  position: absolute;
  top: clamp(10px, 3vw, 20px);
  left: -6px;
  z-index: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(5rem, 17vw, 7.5rem);
  line-height: 0.82;
  color: var(--arena);
  font-variation-settings: "opsz" 144;
  pointer-events: none;
}
.paso__dibujo {
  position: absolute;
  right: 0;
  top: clamp(24px, 5vw, 36px);
  color: var(--verde);
}
.paso__texto { position: relative; z-index: 1; }
.paso__dibujo svg { width: 56px; height: 56px; }
.paso__titulo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.25rem, 3.4vw, 1.6rem);
  line-height: 1.2;
  margin-bottom: 4px;
  font-variation-settings: "opsz" 40;
}
.paso__texto p { max-width: 46ch; text-wrap: pretty; }

.franja-calma {
  margin-top: clamp(40px, 7vw, 64px);
  background: var(--rubor);
  color: var(--tinta);
  border-radius: 24px 4px 24px 4px;
  padding: clamp(24px, 5vw, 40px);
  font-size: clamp(1.125rem, 3.4vw, 1.5rem);
  line-height: 1.35;
  text-wrap: pretty;
}
.franja-calma strong {
  font-family: var(--serif);
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "opsz" 60;
}

@media (min-width: 900px) {
  .paso { padding-block: 48px; padding-left: 74px; padding-right: 120px; }
  .paso__num { left: 0; top: 26px; }
  .paso__dibujo { top: 46px; }
  .paso__dibujo svg { width: 72px; height: 72px; }
  .franja-calma { max-width: 46ch; margin-left: auto; }
}

/* -------------------------------------------------------------------- equipo */
.equipo__intro {
  margin-top: 18px;
  max-width: 54ch;
  text-wrap: pretty;
}
.equipo { margin-top: clamp(44px, 8vw, 72px); }

.medico + .medico { margin-top: clamp(40px, 8vw, 56px); }
.medico__nombre {
  margin-top: 18px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.125rem, 3.2vw, 1.375rem);
  line-height: 1.2;
  font-variation-settings: "opsz" 40;
}
.medico__col {
  margin-top: 3px;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--tinta-suave);
}

/* Cuatro formas orgánicas, una por persona: nada de rejilla uniforme. */
.forma {
  display: block;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #3A2E2A;               /* sombras del duotono cálido */
}
.forma img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  filter: grayscale(1) contrast(1.06);
}
.forma::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #F5E7DA;               /* luces del duotono cálido */
  mix-blend-mode: multiply;
  pointer-events: none;
}
.medico--1 .forma { aspect-ratio: 4 / 5;  border-radius: 58% 10px 58% 10px / 46% 10px 46% 10px; }
.medico--2 .forma { aspect-ratio: 5 / 6;  border-radius: 10px 58% 10px 58% / 10px 46% 10px 46%; }
.medico--3 .forma { aspect-ratio: 4 / 5;  border-radius: 50% 50% 14px 14px / 32% 32% 9px 9px; }
.medico--4 .forma { aspect-ratio: 5 / 6;  border-radius: 44% 56% 48% 52% / 40% 40% 60% 60%; }

.medico--1 .forma img { object-position: 48% 14%; }
.medico--2 .forma img { object-position: 50% 13%; }
.medico--3 .forma img { object-position: 52% 16%; }
.medico--4 .forma img { object-position: 55% 12%; }

/* Móvil: sangrías y anchos distintos — un racimo, no una tabla. */
.medico--1 { width: 100%; }
.medico--2 { width: 88%; margin-left: auto; }
.medico--3 { width: 94%; margin-left: 6%; }
.medico--4 { width: 86%; }

@media (min-width: 900px) {
  .equipo {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
  }
  .medico { width: auto; margin: 0; }
  .medico--1 { grid-area: 1 / 1 / 2 / 6; }
  .medico--2 { grid-area: 1 / 7 / 2 / 12; margin-top: 96px; }
  .medico--3 { grid-area: 2 / 2 / 3 / 7;  margin-top: -40px; }
  .medico--4 { grid-area: 2 / 8 / 3 / 13; margin-top: 28px; }
}

/* ---------------------------------------------------------------- la cita */
.cita { scroll-margin-top: 16px; padding-bottom: clamp(72px, 12vw, 120px); }

/* El tramo final del hilo: aquí quien pregunta es la clínica (recta, no cursiva). */
.hilo-track--final { padding-top: var(--silencio); }
.pregunta--final {
  font-style: normal;
  --marca-inclina: 0deg;
}
@media (min-width: 900px) {
  .pregunta--final { padding-bottom: 0; }
}

.cita__cuerpo { padding-top: clamp(36px, 6vw, 56px); }

.lista-visita { max-width: 52ch; }
.lista-visita li {
  position: relative;
  padding-left: 26px;
  text-wrap: pretty;
}
.lista-visita li + li { margin-top: 12px; }
.lista-visita li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 2px;
  background: var(--verde);
}
.cita__enfasis {
  margin-top: 24px;
  font-weight: 700;
  font-size: clamp(1.0625rem, 3vw, 1.25rem);
}

.cita__directo { margin-top: 36px; }
.cita__directo-intro {
  font-size: var(--t-micro);
  color: var(--tinta-suave);
  margin-bottom: 10px;
}
.horario {
  margin-top: 14px;
  font-size: var(--t-micro);
  color: var(--tinta-suave);
  max-width: 40ch;
}
.horario span { display: block; }

.cita__panel {
  margin-top: clamp(40px, 7vw, 56px);
  background: var(--arena);
  border-radius: 24px 4px 24px 4px;
  padding: clamp(24px, 5vw, 40px);
}

@media (min-width: 900px) {
  .cita__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
  .cita__panel { margin-top: 0; }
}

/* ---------------------------------------------------------------- formulario */
.campo { display: block; }
.campo + .campo { margin-top: 18px; }
.campo label {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: 6px;
}
.opcional { font-weight: 400; color: var(--tinta-suave); }

.campo input,
.campo textarea {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border: 1.5px solid var(--lino);
  border-radius: 10px;
  background: #fff;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;      /* ≥16px: evita el zoom automático de iOS */
  line-height: 1.5;
}
.campo textarea { min-height: 108px; resize: vertical; }
.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 4px rgba(46, 75, 63, 0.18);
}
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] { border-color: var(--teja); }

.ayuda {
  display: block;
  margin-top: 6px;
  font-size: var(--t-micro);
  color: var(--tinta-suave);
}
.error {
  display: block;
  margin-top: 6px;
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--teja-texto);
}

/* Trampa para bots: fuera de la vista, nunca fuera del DOM. */
.trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rgpd { margin-top: 24px; }
.consentimiento {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.consentimiento input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--verde);
}
.consentimiento label {
  font-size: 0.9375rem;
  line-height: 1.5;
}
.rgpd__art9,
.rgpd__info {
  margin-top: 10px;
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--tinta-suave);
}

.boton--envio {
  width: 100%;
  margin-top: 24px;
}
.boton--envio:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.boton--envio[aria-busy="true"]::after {
  content: "…";
  display: inline-block;
  width: 0.95em;
  overflow: hidden;
  text-align: left;
  vertical-align: bottom;
}
@media (prefers-reduced-motion: no-preference) {
  .boton--envio[aria-busy="true"]::after {
    animation: puntos 1.2s steps(4, end) infinite;
  }
}
@keyframes puntos { from { width: 0; } to { width: 0.95em; } }

.fallo {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #FAEAE5;
  border: 1.5px solid var(--teja);
  color: var(--teja-texto);
  font-size: 0.9375rem;
  font-weight: 500;
}

.exito { padding: 4px 0; }
.exito:focus { outline: none; }
.exito__titulo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.25rem, 3.6vw, 1.6rem);
  line-height: 1.25;
  font-variation-settings: "opsz" 60;
}
.exito__horario,
.exito__rutas {
  margin-top: 12px;
  font-size: 0.9375rem;
  color: var(--tinta-suave);
}
.exito__rutas a { font-weight: 700; }

/* -------------------------------------------------------------------- pie */
.pie {
  background: var(--noche);
  color: var(--noche-texto);
  padding-bottom: clamp(40px, 7vw, 64px);
}
.pie a { color: var(--noche-texto); text-decoration-color: rgba(243, 237, 231, 0.45); }
.pie a:hover { color: #fff; text-decoration-color: currentColor; }
.pie :focus-visible { outline-color: var(--rubor); }

/* El hilo entra 48px en el footer y termina en un punto: la conversación cierra. */
.hilo-final {
  display: block;
  position: relative;
  width: 2px;
  height: 48px;
  margin-left: calc(var(--hilo-x) - var(--pad));
  background: var(--hilo-noche);
}
.hilo-final::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rubor);
}

.pie__marca {
  margin-top: 34px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.125rem, 3.2vw, 1.375rem);
  font-variation-settings: "opsz" 40;
}
.pie__marca em { font-style: italic; font-weight: 400; }
.pie__desde {
  margin-top: 4px;
  font-size: var(--t-micro);
  color: rgba(243, 237, 231, 0.72);
}

.pie__rejilla {
  display: grid;
  gap: 22px;
  margin-top: 32px;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.pie__legal,
.pie__enlaces {
  margin-top: 28px;
  font-size: var(--t-micro);
  line-height: 1.6;
  color: rgba(243, 237, 231, 0.78);
}
.pie__enlaces { margin-top: 8px; }

@media (min-width: 700px) {
  .pie__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}

/* ------------------------------------------------------------- barra fija */
.barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: var(--noche);
  box-shadow: 0 -8px 24px -16px rgba(30, 43, 38, 0.9);
  transform: translateY(110%);
  visibility: hidden;
}
.barra.is-visible { transform: none; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .barra { transition: transform 300ms var(--ease), visibility 0s 300ms; }
  .barra.is-visible { transition: transform 300ms var(--ease), visibility 0s; }
}

.barra__cta {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 10px 16px;
  font-size: 0.9375rem;
}
.barra__vaso {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 64px;
  min-height: 48px;
  border-radius: 14px;
  background: rgba(243, 237, 231, 0.1);
  box-shadow: inset 0 0 0 1px rgba(243, 237, 231, 0.24);
  color: var(--noche-texto);
  text-decoration: none;
}
.barra__vaso:hover { background: rgba(243, 237, 231, 0.18); color: #fff; }
.barra__vaso .ico { width: 18px; height: 18px; }
.barra__etiqueta { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.02em; }
.barra :focus-visible { outline-color: var(--rubor); }

@media (min-width: 900px) {
  .barra { justify-content: flex-end; padding: 10px 24px calc(10px + env(safe-area-inset-bottom)); }
  .barra__cta { flex: 0 0 auto; }
}

/* ------------------------------------------------------------------ motion */
/* Todo el movimiento vive aquí dentro: con reduced-motion no se declara nada,
   así que el contenido nace visible aunque el JS nunca llegue a marcar .is-in. */
@media (prefers-reduced-motion: no-preference) {

  [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  [data-reveal].is-in { opacity: 1; transform: none; }

  /* La respuesta llega 120ms después de su pregunta: se oye el turno de palabra. */
  .tanda .respuesta {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur) var(--ease) 120ms, transform var(--dur) var(--ease) 120ms;
  }
  .tanda.is-in .respuesta { opacity: 1; transform: none; }

  /* La marca se abre como una respiración, una línea tras otra. */
  .marca::before {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 600ms var(--ease) 220ms;
  }
  [data-reveal].is-in .marca::before,
  .hero__kop .marca::before { clip-path: inset(0); }
  .pregunta .marca:nth-of-type(2)::before { transition-delay: 330ms; }
  .pregunta .marca:nth-of-type(3)::before { transition-delay: 440ms; }

  .paso__dibujo svg {
    clip-path: circle(0% at 50% 50%);
    transition: clip-path 700ms var(--ease) 140ms;
  }
  .paso.is-in .paso__dibujo svg { clip-path: circle(75% at 50% 50%); }

  /* Entrada del hero sin JS. El h1 arranca sin retardo: es el LCP. */
  .hero__kicker,
  .hero__kop,
  .hero__sub,
  .hero__cta,
  .hero__micro,
  .rutas__intro,
  .hero .rutas {
    animation: entra 620ms var(--ease) both;
  }
  .hero__kop   { animation-delay: 0ms; }
  .hero__sub   { animation-delay: 120ms; }
  .hero__cta   { animation-delay: 200ms; }
  .hero__micro { animation-delay: 260ms; }
  .rutas__intro,
  .hero .rutas { animation-delay: 320ms; }
  .hero__kop .marca::before { transition-delay: 520ms; }
}
@keyframes entra {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}