/* =========================================================================
   Landing Mercedes-Benz — AutoStar
   Lenguaje visual tomado del arte de vallas de la campaña: fondo carbón,
   display serif de alto contraste, botones tipo píldora y detalle en plata.
   ========================================================================= */

/* --------------------------------------------------------------- tipografía */

/* Tipografías corporativas de Mercedes-Benz, las mismas que usa autostar.cr:
   Corporate A Condensed para display y Corporate S para interfaz.
   Convertidas a WOFF2 con subconjunto latino (39 KB las cuatro).

   OJO: son fuentes con licencia, no libres. Se toman del sitio del propio
   cliente para su propia landing; antes de publicar en el dominio definitivo
   conviene confirmar que su licencia cubre ese uso. */

@font-face {
  font-family: 'Corporate A';
  src: url('../fonts/corporate-a-con-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Corporate S';
  src: url('../fonts/corporate-s-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Corporate S';
  src: url('../fonts/corporate-s-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Corporate S';
  src: url('../fonts/corporate-s-demi.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */

:root {
  --black:      #0a0a0a;
  --surface:    #131313;
  --surface-2:  #1a1a1a;
  --white:      #ffffff;
  --silver:     #c9ccce;
  --muted:      rgba(255, 255, 255, 0.62);
  --muted-soft: rgba(255, 255, 255, 0.42);
  --line:       rgba(255, 255, 255, 0.14);
  --line-strong:rgba(255, 255, 255, 0.28);
  --danger:     #ff8a80;
  --success:    #9fe8b4;

  --font-display: 'Corporate A', 'Times New Roman', Georgia, serif;
  --font-ui: 'Corporate S', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --measure: 1240px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.22s;
  --t-med: 0.42s;
}

/* -------------------------------------------------------------- normalizado */

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

html {
  /* Base de 18 px en lugar de los 16 por defecto: todas las medidas en rem
     (tipografía, espaciados y anchos) escalan con ella. */
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; }

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.85rem 1.4rem;
  background: var(--white);
  color: var(--black);
  font-size: 0.875rem;
  text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------- utilidades de texto */

.eyebrow {
  font-size: clamp(0.6875rem, 1.6vw, 0.75rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  margin-top: 0.6rem;
}

.section-lead {
  margin-top: 0.9rem;
  color: var(--muted);
  font-size: clamp(0.95rem, 2.2vw, 1.0625rem);
  max-width: 46ch;
}

.section-head {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}
.section-head--left { text-align: left; margin-inline: 0; }

/* ----------------------------------------------------------------- botones */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-border: var(--line-strong);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.05rem 2.4rem;
  border: 1px solid var(--btn-border);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  /* Crea contexto de apilamiento para que el relleno quede detrás del texto
     aunque la etiqueta del botón sea un nodo de texto suelto, sin envoltorio. */
  isolation: isolate;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}

/* Relleno que barre desde abajo al pasar el cursor */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--white);
  transform: translateY(101%);
  transition: transform var(--t-med) var(--ease-out);
  z-index: -1;
}

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

.btn:hover,
.btn:focus-visible { border-color: var(--white); }

@media (hover: hover) {
  .btn:hover { color: var(--black); }
  .btn:hover::after { transform: translateY(0); }
}

.btn--primary { --btn-border: rgba(255, 255, 255, 0.55); }
.btn--ghost { padding: 0.9rem 1.8rem; font-size: 0.75rem; }
.btn--block { width: 100%; }

.btn[disabled] { cursor: not-allowed; opacity: 0.55; }
.btn[disabled]::after { transform: translateY(101%); }

.btn__spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--white);
  border-radius: 50%;
  display: none;
}

.btn.is-loading .btn__spinner { display: block; animation: spin 0.7s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ header */

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.1rem, 3vw, 1.9rem) var(--gutter);
}

.site-header__star { width: clamp(30px, 4.6vw, 40px); color: var(--white); }

/* Logotipo oficial de AutoStar (blanco sobre transparente) */
.site-header__logo {
  width: clamp(106px, 13vw, 138px);
  height: auto;
}

/* --------------------------------------------------------- hero + slider */

/* Móvil: titular, banda del slider y formulario, uno debajo del otro.
   Desktop: el slider pasa a fondo a sangre y el bloque se parte en dos
   columnas — contenido a la izquierda, formulario a la derecha. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(5.5rem, 14vh, 7.5rem) var(--gutter) clamp(3.5rem, 9vw, 5rem);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}

.hero__content {
  order: 1;
  position: relative;
  z-index: 4;
  max-width: 40rem;
  margin-inline: auto;
}

.hero__form {
  order: 3;
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
  text-align: left;
}

/* ---- banda / fondo del slider ---- */

.hero__media {
  order: 2;
  position: relative;
  z-index: 0;
  margin-inline: calc(var(--gutter) * -1);   /* a sangre */
  margin-block: clamp(1.75rem, 5vw, 2.5rem);
  aspect-ratio: 7912 / 3597;  /* proporción nativa de los masters (2,2:1) */
  overflow: hidden;   /* la entrada escala la foto: sin esto se sale del recorte */

  /* El deslizamiento horizontal se lo queda el slider; el vertical sigue siendo
     del navegador. Sin esto habría que frenar el evento a mano y el scroll de
     la página se sentiría trabado al arrastrar sobre la foto. */
  touch-action: pan-y;
}

/* Arrastrar sobre la foto es un gesto del slider, no una selección ni un
   "arrastrar imagen" del navegador. */
.hero__media img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.slider {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}

.slide.is-active { opacity: 1; }

.slide picture { display: block; width: 100%; height: 100%; }

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}

/* Difuminado de los bordes de la banda hacia el fondo */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--black) 0%,
    rgba(10, 10, 10, 0) 20%,
    rgba(10, 10, 10, 0) 58%,
    rgba(10, 10, 10, 0.86) 92%,
    var(--black) 100%);
}

/* ---- rótulo y navegación ---- */

/* Va en el flujo, bajo el titular, y no superpuesto sobre la foto: así se ve
   siempre, sin depender de dónde caiga la línea de flotación, y sin pelear
   contra el contraste de la imagen. */
.slider__ui {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  margin-top: clamp(1.5rem, 4vw, 2rem);
  /* El rótulo no puede encoger (lleva nowrap para que el paginador no se
     mueva), así que en pantallas muy angostas los puntos bajan de línea en
     lugar de empujar el ancho del bloque. */
  flex-wrap: wrap;
}

/* Los tres rótulos se apilan en la misma celda de la grilla. Así el ancho del
   bloque lo fija el más largo ("GLE Coupé — Desde $139.900") y deja de moverse
   al cambiar de modelo, que era lo que corría el paginador de al lado. */
.slider__caption {
  display: grid;
  justify-items: start;
}

.slider__item {
  grid-area: 1 / 1;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

.slider__item.is-active { opacity: 1; }

.slider__model {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3.6vw, 1.6rem);
  line-height: 1.1;
  white-space: nowrap;
}

.slider__price {
  font-size: clamp(0.625rem, 1.9vw, 0.6875rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
  white-space: nowrap;
}

.slider__dots {
  display: flex;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.slider__dot {
  display: block;
  width: 26px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.32);
  cursor: pointer;
  transition: background-color var(--t-med) var(--ease-out);
}

.slider__dot:hover { background: rgba(255, 255, 255, 0.6); }
.slider__dot.is-active { background: var(--white); }

/* El área táctil real es mayor que la barrita visible */
.slider__dot { position: relative; }

/* El área táctil real es mayor que la barrita visible */
.slider__dot::before {
  content: '';
  position: absolute;
  inset: -12px -4px;
}

/* ---- incentivo de campaña ---- */

/* Insignia bajo el titular: es la oferta que motiva a completar el formulario,
   así que se diferencia del botón (que también es una píldora) con relleno
   tenue en vez de solo contorno. */
.incentive {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: clamp(1rem, 2.6vw, 1.3rem);
  padding: 0.55rem 1.15rem 0.55rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--white);
  font-size: clamp(0.75rem, 2vw, 0.8125rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Sin esto, el inline-flex se dimensiona al contenido y se sale del
     contenedor en pantallas de 320 px. */
  max-width: 100%;
}

.incentive__icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  color: var(--silver);
}

/* En pantallas muy angostas el texto ya no entra en una línea */
@media (max-width: 26rem) {
  .incentive {
    white-space: normal;
    text-align: left;
    letter-spacing: 0.06em;
    align-items: flex-start;
  }
}

/* ---- titular ---- */

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.05rem, 7.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: 0.005em;
  margin: clamp(0.8rem, 2.2vw, 1.2rem) 0 0;
}

.hero__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}
.hero__title .line > span { display: block; }

.hero__lead {
  margin: clamp(1rem, 2.6vw, 1.4rem) auto 0;
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.975rem, 2.3vw, 1.125rem);
  line-height: 1.6;
}

.hero__cta { margin-top: clamp(1.5rem, 3.5vw, 2rem); }

/* ---- panel del formulario ---- */

.lead__panel {
  padding: clamp(1.6rem, 5vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
}

/* En la columna estrecha del hero, el titular del formulario tiene que caber
   en una línea: si se parte, el bloque crece y obliga a ampliar la foto de
   fondo para cubrirlo. */
.hero__form .section-title {
  font-size: clamp(1.6rem, 4.2vw, 2.1rem);
  margin-top: 0.45rem;
}

.hero__form .section-lead {
  margin-top: 0.6rem;
  font-size: 0.9375rem;
}

/* =========================== DESKTOP: dos columnas ======================== */

@media (min-width: 64em) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(25rem, 29rem);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    min-height: 100svh;
    padding-block: clamp(7rem, 15vh, 9rem) clamp(4rem, 9vh, 6rem);
    text-align: left;
  }

  .hero__content {
    order: 0;
    max-width: 37rem;   /* suficiente para que "El camino del lujo" no se parta */
    margin-inline: 0;
  }

  /* En dos columnas el titular ya no dispone de todo el ancho: se escala
     contra el viewport para que quepa en dos líneas desde 1024 px. */
  .hero__title { font-size: clamp(2.1rem, 4.4vw, 4rem); }

  .slider__ui { justify-content: flex-start; gap: 1.75rem; }

  .hero__form {
    order: 0;
    max-width: none;
    margin-inline: 0;
  }

  /* Con el formulario al lado, el botón que baja hasta él sobra */
  .hero__cta { display: none; }

  .hero__lead { margin-inline: 0; }

  /* El slider pasa a ser el fondo de todo el bloque */
  .hero__media {
    position: absolute;
    inset: 0;
    margin: 0;
    aspect-ratio: auto;
  }

  .slide img { object-position: center 54%; }

  /* Velo: oscuro a la izquierda para el titular, algo más abierto al centro
     para que se vea el auto, y otra vez oscuro bajo el formulario. */
  .hero__media::after {
    background:
      linear-gradient(90deg,
        rgba(10, 10, 10, 0.95) 0%,
        rgba(10, 10, 10, 0.78) 34%,
        rgba(10, 10, 10, 0.5) 58%,
        rgba(10, 10, 10, 0.78) 100%),
      linear-gradient(180deg,
        rgba(10, 10, 10, 0.7) 0%,
        rgba(10, 10, 10, 0.2) 34%,
        rgba(10, 10, 10, 0.45) 78%,
        var(--black) 100%);
  }

}

.form { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.4vw, 1.4rem);
}

@media (max-width: 40rem) {
  .form__grid { grid-template-columns: 1fr; }
}

.field--full { grid-column: 1 / -1; }

.field label {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  /* Si una etiqueta se parte en dos líneas, su campo baja y queda desalineado
     respecto al de al lado. El contenedor es lo bastante ancho para que todas
     entren en una línea; esto lo garantiza. */
  white-space: nowrap;
}

.req { color: var(--silver); }

.field input[type='text'],
.field input[type='tel'],
.field input[type='email'],
.field select {
  width: 100%;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--white);
  font-size: 1rem;
  transition: border-color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
}

.field input::placeholder { color: rgba(255, 255, 255, 0.28); }

.field input:hover,
.field select:hover { border-color: var(--line-strong); }

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--white);
  background: rgba(0, 0, 0, 0.55);
}

/* Autocompletado de Chrome: evita el relleno azul sobre fondo oscuro */
.field input:-webkit-autofill,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--white);
  -webkit-box-shadow: 0 0 0 1000px #101010 inset;
  caret-color: var(--white);
}

.select { position: relative; }

.select select {
  appearance: none;
  padding-right: 3rem;
  cursor: pointer;
}

/* El menú desplegable lo pinta el sistema: forzamos color legible */
.select select option { background: #1a1a1a; color: #fff; }

.select__chevron {
  position: absolute;
  right: 1rem;
  top: 50%;
  translate: 0 -50%;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
  color: var(--muted);
}

/* estados de error */
.field.has-error input,
.field.has-error select { border-color: var(--danger); }

.field__error {
  margin-top: 0.45rem;
  min-height: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--danger);
}
.field__error:empty { display: none; }

/* casilla de términos */
.field--check { margin-top: clamp(1.25rem, 3vw, 1.6rem); }

/* Se cualifica con .field para ganarle en especificidad a `.field label`,
   que es display:block y dejaría la casilla sobre el texto en vez de al lado. */
.field .check {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  cursor: pointer;
  margin-bottom: 0;
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--muted);
  /* La de términos es un párrafo, no una etiqueta corta: tiene que envolver
     pese al nowrap que llevan las demás etiquetas del formulario. */
  white-space: normal;
}

.check input {
  position: absolute;
  opacity: 0;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0;
  cursor: pointer;
}

.check__box {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.12rem;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.35);
  transition: background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}

.check__box svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--black);
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  transition: stroke-dashoffset var(--t-med) var(--ease-out);
}

.check input:checked + .check__box { background: var(--white); border-color: var(--white); }
.check input:checked + .check__box svg { stroke-dashoffset: 0; }
.check input:focus-visible + .check__box { outline: 2px solid var(--white); outline-offset: 3px; }

.check__text {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
  text-transform: none;
  letter-spacing: normal;
}

.check__text a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

.field--check.has-error .check__box { border-color: var(--danger); }

.recaptcha-widget { margin-top: 0.25rem; }

.form__foot { margin-top: clamp(1.6rem, 4vw, 2.2rem); }

.form__status {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
  color: var(--danger);
}
.form__status:empty { display: none; }

.form__legal {
  margin-top: 1.1rem;
  font-size: 0.6875rem;
  line-height: 1.55;
  text-align: center;
  color: var(--muted-soft);
}
.form__legal a { color: var(--muted); }

/* La insignia de reCAPTCHA se oculta porque la atribución va en .form__legal,
   tal como exige Google. */
.grecaptcha-badge { visibility: hidden; }

/* honeypot: fuera de la vista y del foco, sin usar display:none */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------ confirmación */

.success {
  text-align: center;
  padding: clamp(2.5rem, 7vw, 4rem) clamp(1.5rem, 5vw, 3.25rem);
  border: 1px solid var(--line);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
}

.success[hidden] { display: none; }

.success__check {
  width: clamp(56px, 12vw, 72px);
  height: auto;
  margin: 0 auto clamp(1.25rem, 3vw, 1.75rem);
  color: var(--success);
}

.success__circle { stroke-dasharray: 151; stroke-dashoffset: 151; }
.success__tick { stroke-dasharray: 40; stroke-dashoffset: 40; }

.success__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 2.875rem);
  line-height: 1.1;
}

.success__text {
  margin: 1rem auto 0;
  max-width: 34ch;
  color: var(--muted);
  font-size: clamp(0.975rem, 2.2vw, 1.0625rem);
}

.success .btn { margin-top: clamp(1.75rem, 4vw, 2.25rem); }

/* ------------------------------------------------------- página de gracias */

.gracias {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(7rem, 16vh, 9rem) var(--gutter) clamp(4rem, 9vw, 6rem);
  text-align: center;
}

.gracias__inner { max-width: 34rem; }

.gracias__check {
  color: var(--success);
  margin-inline: auto;
}

/* Sin GSAP en esta página: el trazo se dibuja con una animación CSS. */
.gracias__check .success__circle { animation: draw 0.8s var(--ease-out) 0.15s forwards; }
.gracias__check .success__tick   { animation: draw 0.5s var(--ease-out) 0.6s forwards; }

@keyframes draw { to { stroke-dashoffset: 0; } }

.gracias__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 8vw, 4rem);
  line-height: 1.05;
  margin-top: 0.6rem;
}

.gracias__text {
  margin: clamp(0.9rem, 2.5vw, 1.25rem) auto 0;
  max-width: 30ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 2.4vw, 1.125rem);
  line-height: 1.6;
}

.gracias__text strong { color: var(--white); font-weight: 600; }

.gracias__cta { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

.gracias__wa { width: 1.25rem; height: 1.25rem; }

.gracias__hint {
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  color: var(--muted-soft);
}

.gracias__back { margin-top: clamp(1.75rem, 4vw, 2.25rem); }

.gracias__back a {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
}

.gracias__back a:hover { color: var(--white); border-color: var(--line-strong); }

/* ------------------------------------------------------------------ footer */

.site-footer {
  padding: clamp(3rem, 7vw, 4.5rem) var(--gutter);
  border-top: 1px solid var(--line);
  background: #070707;
  text-align: center;
}

.site-footer__inner { max-width: 46rem; margin-inline: auto; }

.site-footer__star { width: 34px; margin: 0 auto 1.1rem; color: var(--muted); }

.site-footer__logo {
  width: 150px;
  height: auto;
  margin-inline: auto;
  opacity: 0.85;
}

.site-footer__contact { margin-top: 0.7rem; }
.site-footer__contact a {
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--silver);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.site-footer__contact a:hover { color: var(--white); border-color: var(--line-strong); }

.site-footer__legal {
  margin-top: clamp(1.5rem, 4vw, 2rem);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--muted-soft);
}

.site-footer__copy {
  margin-top: 1.25rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
}

/* ------------------------------------------------- estados previos a GSAP
   Solo se aplican cuando el script principal confirmó que va a animar
   (clase js-anim en <html>, que main.js retira si GSAP no carga).          */

.js-anim [data-anim='header'],
.js-anim [data-anim='hero-eyebrow'],
.js-anim [data-anim='hero-lead'],
.js-anim [data-anim='hero-cta'],
.js-anim [data-anim='hero-incentive'],
.js-anim [data-anim='fade'],
.js-anim [data-anim='field'] { opacity: 0; }

.js-anim [data-anim='hero-line'] > span { transform: translateY(105%); }

/* ------------------------------------------------------ movimiento reducido */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .success__circle, .success__tick { stroke-dashoffset: 0; }
  .check__box svg { transition: none; }
}