:root {
  --blue: #140DD9;
  --blue-dark: #0D088C;
  --navy: #0B0F59;
  --peri: #B4B6F0;
  --peri-text: #C3C5F4;   /* peri legible sobre navy (10,3:1) */
  --lav: #E8E9F5;
  --ink: #0E1020;
  --soft: #54587A;
  --hint: #6B6F94;        /* placeholders: el más claro que aún pasa AA (4,7:1) */
  --line: #DEDFF0;
  --field-line: #8A8EBC;  /* contorno de control: 3,07:1 sobre el campo (WCAG 1.4.11) */
  --disabled: #676BA3;    /* fondo del botón esperando: 4,99:1 con texto blanco */
  --prose: #2A2D45;       /* cuerpo de los textos legales */
  --skeleton: #F4F5FB;    /* destello del hueco mientras carga el embed */
  --star: #AE7600;        /* estrella: 3,9:1 sobre blanco, es información */
  --money: #16B981;       /* verde del importe, el mismo de laborai.es/revisa-* */
  --accent: #5B57FF;      /* azul claro de marca: 4,9:1 sobre blanco y 3,5:1 contra el navy */
  --field: #FCFCFE;
  --bg: #FFFFFF;
  --error: #B3261E;
  --error-bg: #FEF4F3;
  --ok: #1E8E5A;
  --mark: #C9F2DD;         /* rotulador verde tras el texto destacado */
  --amber: #8A6200;
  --amber-bg: #FFF6DF;

  /* Tokens por papel. Un mismo azul era texto en unos sitios y fondo en otros;
     en oscuro esos papeles piden valores opuestos, así que cada uno tiene el suyo.
     En claro valen exactamente lo de antes. */
  --text-strong: var(--navy);   /* titulares y texto destacado */
  --band: var(--navy);          /* franjas de fondo oscuro (barra, pie) */
  --on-band: var(--lav);        /* texto sobre esas franjas */
  --link: var(--blue);          /* enlaces e iconos en azul */
  --link-hover: var(--blue-dark);
  --focus: var(--blue);         /* anillo de foco y borde activo */
  --fill: var(--blue);          /* fondo del botón principal */
  --fill-hover: var(--blue-dark);
  --on-fill: #FFFFFF;           /* texto sobre un relleno de color */
  --tint: var(--lav);           /* fondos suaves */
  --surface: #FFFFFF;           /* tarjetas */
  --glass: rgba(255, 255, 255, 0.94);
  --error-fill: var(--error);
  --error-glyph: #FFFFFF;
  --card-shadow: 0 20px 44px -26px rgba(11, 15, 89, 0.5);
  --card-head: var(--navy);     /* cabecera de la tarjeta del formulario */

  --pad-x: 20px;          /* margen lateral; crece en pantallas grandes */
  --cta-h: 72px;          /* alto de la barra fija del móvil */

  accent-color: var(--fill);
  color-scheme: light dark;
}

/* Modo oscuro: sigue la preferencia del sistema. Paleta medida: todo el texto
   pasa AA sobre su fondo real, y los controles 3:1 (WCAG 1.4.11). */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0D26;
    --surface: #14173D;
    --tint: #1C2050;
    --band: #1A1E4C;
    --field: #0F1232;
    --glass: rgba(11, 13, 38, 0.92);

    --text-strong: #F2F3FB;
    --ink: #E3E5F4;
    --soft: #A9ACD2;
    --hint: #8E92C4;
    --prose: #D6D8EC;
    --on-band: #E8E9F5;
    --peri-text: #C3C5F4;

    --link: #A6A3FF;
    --link-hover: #C9C7FF;
    --focus: #A6A3FF;
    --fill: #4B46FF;
    --fill-hover: #5E5AFF;
    --on-fill: #FFFFFF;
    --disabled: #3B3F78;
    --accent: #9C98FF;

    --peri: #3A3F85;
    --line: #262A5C;
    --field-line: #7D81BE;
    --skeleton: #1A1D45;

    --money: #16B981;
    --star: #F2B63D;
    --error: #FF928A;
    --error-bg: #2A1220;
    --error-fill: #FF928A;
    --error-glyph: #2A0A0D;
    --ok: #3FD08A;
    --mark: #11573B;
    --amber: #F2B63D;
    --amber-bg: #2A2410;

    --card-shadow: 0 20px 44px -26px rgba(0, 0, 0, 0.8);
    --card-head: #272C75;       /* en oscuro, un escalón por encima de la tarjeta */
  }
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

a { color: inherit; text-decoration: none; }
p, h1, h2, ul { margin: 0; }
ul { list-style: none; padding: 0; }

/* Superficies que pinta el navegador: también son parte del diseño. */
::selection { background: var(--tint); color: var(--text-strong); }
input { caret-color: var(--link); }

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

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 40;
  padding: 12px 18px;
  border-radius: 0 0 9px 9px;
  background: var(--band);
  color: var(--on-fill);
  font-weight: 600;
  transition: top 0.18s ease;
}

.skip:focus { top: 0; }

/* --------------------------------------------------------------- cabecera */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--pad-x);
  border-bottom: 1px solid var(--line);
}

/* Marca propia a la izquierda y el aval de Laborai a la derecha, los dos al
   mismo peso óptico. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  min-width: 0;
}

/* La casilla se dibuja en navy y la corrección que se sale, en azul: la misma
   gramática de color que el titular. */
.mark {
  width: 32px;
  height: 32px;
  display: block;
  color: var(--text-strong);
  flex: none;
}

.mark-check { stroke: var(--link); }

.brandname {
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text-strong);
  white-space: nowrap;
}

/* "tus" parte una palabra larga en algo legible. Va en el azul claro: el azul
   fuerte solo tiene 1,7:1 contra el navy de al lado y no se distinguía. */
.brandname .mid { color: var(--accent); }
.brandname .tld { color: var(--soft); font-weight: 600; }

/* Logo oficial de Laborai, sin recolorear. Empuja a la derecha lo que venga
   detrás (el teléfono, si lo hay). */
.nav-laborai { margin-left: auto; flex: none; }
.nav-laborai img { height: 18px; width: auto; display: block; }

@media (max-width: 379px) {
  .mark { width: 28px; height: 28px; }
  .brandname { font-size: 17px; }
  .nav-laborai img { height: 15px; }
}

/* El teléfono es un objetivo táctil, no una palabra suelta. */
.phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  color: var(--link);
  white-space: nowrap;
}

.phone svg { width: 15px; height: 15px; flex: none; }
.phone:active { background: var(--tint); }

/* ------------------------------------------------------------------- hero */

.hero {
  background: linear-gradient(180deg, var(--tint) 0%, var(--bg) 62%);
  display: grid;
  grid-template-areas: "copy" "form" "bullets";
  gap: 20px;
  padding: 26px var(--pad-x) 34px;
}

.hero-copy { grid-area: copy; }
.hero .fcard { grid-area: form; }
.hero .bullets { grid-area: bullets; }

h1 {
  display: grid;
  gap: 8px;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.02;
  letter-spacing: -1px;
  color: var(--text-strong);
  text-wrap: balance;
}

/* La pregunta es el gancho: va a tamaño completo y al máximo peso. La
   respuesta baja un escalón de tamaño pero no de peso, para que se lea como
   una sola frase contundente y no como un subtítulo. */
h1 .q { font-weight: 700; }

/* La palabra clave se distingue por peso, no por color. Para recuperar el
   segundo azul, basta con darle un color a esta regla. */
h1 .kw { font-weight: 700; }

h1 .a {
  font-size: 0.95em;   /* en móvil casi al tamaño de la pregunta: es la promesa */
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
h1 .a .em, h1 .a strong { font-weight: 700; }

/* La cifra es la promesa: sube a escala de titular dentro de la frase. */
h1 .a strong {
  color: var(--money);
  font-weight: 700;
  font-size: 1.24em;
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (min-width: 768px) {
  h1 { font-size: 58px; line-height: 0.98; letter-spacing: -2px; gap: 12px; }
  h1 .a { font-size: 0.68em; line-height: 1.12; }
  h1 .a strong { font-size: 1.32em; }
}

@media (min-width: 1025px) {
  h1 { font-size: 66px; line-height: 0.94; letter-spacing: -2.6px; gap: 14px; }
  h1 .a { font-size: 0.66em; line-height: 1.1; letter-spacing: -0.035em; }
  h1 .a strong { font-size: 1.46em; letter-spacing: -0.045em; }
}

.bullets { display: grid; gap: 12px; }

.bullets li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 17.5px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
  text-wrap: pretty;
}

.bullets strong { font-weight: 700; color: var(--text-strong); }

.tick svg { width: 15px; height: 15px; display: block; }

.tick {
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--fill);
  color: var(--on-fill);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  flex: none;
}

/* ------------------------------------------------------------- formulario */

.fcard {
  background: var(--surface);
  border: 1px solid var(--peri);
  border-radius: 14px;
  padding: 18px 16px 20px;
  scroll-margin-top: 16px;
}

.fcard h2 {
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: clamp(21px, 5.2vw, 26px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text-strong);
  margin-bottom: 7px;
  text-wrap: balance;
}

.fnote { font-size: 15px; line-height: 1.45; color: var(--soft); margin-bottom: 16px; text-wrap: pretty; }

/* La cabecera de la tarjeta lleva la franja navy de la marca (la misma de los
   datos y el pie): es donde se convierte, y se nota. */
.fcard-cabecera {
  margin: -18px -16px 18px;
  padding: 18px 16px 17px;
  background: var(--card-head);
  border-radius: 13px 13px 0 0;
}
.fcard .fcard-cabecera h2 { color: var(--on-fill); margin-bottom: 5px; }
.fcard-cabecera .fnote { color: var(--peri-text); margin-bottom: 0; }

.field { margin-bottom: 13px; }

.field label {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 5px;
}

.field input {
  width: 100%;
  height: 52px;
  border: 1px solid var(--field-line);
  border-radius: 9px;
  padding: 0 14px;
  font: inherit;
  font-size: 17px;      /* menos de 16px y iOS hace zoom al enfocar */
  color: var(--ink);
  background: var(--field);
}

.field input::placeholder { color: var(--hint); }

.field input:focus { border-color: var(--focus); }

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: 14.5px;
  color: var(--soft);
  line-height: 1.5;
  margin-bottom: 18px;
  /* El área táctil de la casilla llega a 44px sin engordar el texto. */
  padding: 6px 0;
}

.consent input { width: 24px; height: 24px; margin: 0; flex: none; }
.consent a { color: var(--link); text-decoration: underline; }

.btn {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 9px;
  background: var(--fill);
  color: var(--on-fill);
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: 18.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}

.btn:active { transform: scale(0.985); background: var(--fill-hover); }

.legal { font-size: 12.5px; color: var(--soft); line-height: 1.5; margin-top: 14px; }



/* --------------------------------------------- barra fija de acción (móvil) */

.cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px max(var(--pad-x), env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(var(--pad-x), env(safe-area-inset-left));
  background: var(--glass);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.cta-bar.is-visible { transform: translateY(0); }

.cta-bar p {
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--soft);
  flex: 1;
  min-width: 0;
}

/* La cifra se lee de un vistazo; la frase la acompaña en pequeño. */
.cta-bar p b {
  display: block;
  color: var(--text-strong);
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: 21px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.cta-bar .btn { width: auto; padding: 0 18px; font-size: 16px; white-space: nowrap; }

body.cta-open { padding-bottom: var(--cta-h); }

/* ------------------------------------------------------------------ tira */

.strip {
  background: var(--band);
  color: var(--on-fill);
  padding: 22px clamp(20px, 5vw, 64px) 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  text-align: left;
}

.strip div {
  display: grid;
  gap: 1px;
  align-content: start;
}

.strip b {
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.strip span {
  font-size: 16px;
  font-weight: 600;
  color: var(--peri-text);
  line-height: 1.3;
}

/* ------------------------------------------------------------------ pie */

.foot {
  display: grid;
  gap: 14px;
  padding: 22px var(--pad-x) 26px;
  font-size: 13px;
  color: var(--soft);
  border-top: 1px solid var(--line);
}

.foot-by {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nav-laborai picture, .foot-by picture { display: contents; }
.foot-by img { height: 16px; width: auto; display: block; }

.flinks { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.flinks a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------------------------------------------------------- páginas legales */

.legal-page {
  max-width: 78ch;
  margin: 0 auto;
  padding: 22px var(--pad-x) 40px;
}

.legal-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.legal-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 16px;
}

.legal-nav a[aria-current="page"] {
  background: var(--tint);
  border-color: var(--peri);
  color: var(--text-strong);
}

.prose { color: var(--prose); font-size: 16px; line-height: 1.7; }

.prose h1 {
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: clamp(27px, 6.6vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--text-strong);
  margin-bottom: 8px;
}

.prose h1 b { font-weight: inherit; }

.prose h2 {
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: clamp(18px, 4.4vw, 23px);
  letter-spacing: -0.02em;
  color: var(--text-strong);
  margin: 34px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  text-wrap: balance;
}

.prose h3 { font-size: 17px; font-weight: 700; color: var(--text-strong); margin: 24px 0 6px; }

.prose p { margin: 0 0 14px; text-wrap: pretty; }

.prose ol, .prose ul { margin: 0 0 18px; padding-left: 22px; }
.prose ol { list-style: decimal; }
.prose ul { list-style: disc; }
.prose li { margin-bottom: 10px; }
.prose li::marker { color: var(--link); font-weight: 600; }

/* La política de privacidad numera sus secciones con <li><strong>Título</strong>texto. */
.prose ol > li > strong:first-child {
  display: block;
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: 17.5px;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  margin-bottom: 6px;
  text-wrap: balance;
}

.prose a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--text-strong); }
.prose .laborai-legal-date { color: var(--soft); font-size: 14px; }

.prose .table-wrap { overflow-x: auto; margin: 0 0 20px; -webkit-overflow-scrolling: touch; }

.prose table {
  width: 100%;
  min-width: 460px;          /* por debajo de esto la tabla se scrollea, no se aplasta */
  border-collapse: collapse;
  font-size: 14.5px;
}

.prose th, .prose td {
  border: 1px solid var(--line);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}

.prose th { background: var(--tint); color: var(--text-strong); font-weight: 600; }

.legal-source {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--soft);
  line-height: 1.55;
}

.legal-source a { color: var(--link); text-decoration: underline; }

/* ====================================================== pantallas medianas */

@media (min-width: 620px) {
  :root { --pad-x: 32px; }

  .mark { width: 38px; height: 38px; }
  .brand { gap: 11px; }
  .brandname { font-size: 24px; }
  .nav-laborai img { height: 24px; }

  .strip {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 22px 48px;
  }

  .foot {
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
  }
}

/* ======================================================== dos columnas */

@media (min-width: 900px) {
  :root { --pad-x: clamp(32px, 5vw, 64px); }

  .nav { padding-top: 14px; padding-bottom: 14px; }

  .hero {
    /* Titular y garantías van juntos, centrados en vertical junto a la tarjeta. */
    grid-template-areas: ". form" "copy form" "bullets form" ". form";
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-columns: 1.02fr 0.98fr;
    align-items: start;
    gap: 30px clamp(32px, 4vw, 56px);
    padding: clamp(44px, 5vw, 72px) var(--pad-x);
    background: linear-gradient(180deg, var(--tint) 0%, var(--bg) 100%);
  }

  /* Flotando junto al texto, la tarjeta se sostiene por elevación, no por borde. */
  .hero .fcard .fcard-cabecera { margin: -26px -24px 22px; padding: 24px 24px 22px; }
  .hero .fcard .fcard-cabecera h2 { font-size: 28px; }

  .hero .fcard {
    align-self: center;
    padding: 26px 24px 28px;
    border-color: transparent;
    box-shadow: var(--card-shadow);
  }

  h1 { max-width: 560px; }

  .bullets { align-self: start; }

  .strip { gap: 22px clamp(28px, 6vw, 72px); padding-block: 26px; }
  .strip b { font-size: 36px; }

  /* En escritorio el formulario está siempre a la vista: la barra sobra. */
  .cta-bar { display: none; }
  body.cta-open { padding-bottom: 0; }
}

/* =================================================== entrada y puntero */

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--fill-hover); }
  .phone:hover { border-color: var(--peri); background: var(--tint); }
  .legal-nav a:hover { color: var(--link); border-color: var(--peri); }
  .flinks a:hover { color: var(--link); }
  .legal-source a:hover, .prose a:hover { color: var(--link-hover); }
}

/* Dedo en vez de ratón: más aire entre objetivos táctiles. */
@media (pointer: coarse) {
  .flinks { gap: 4px 20px; }
  .legal-nav { gap: 10px; }
}

/* En horizontal el notch se come el lateral: ahí sí hacen falta los insets. */
@media (orientation: landscape) {
  .nav, .hero, .strip, .foot, .legal-page {
    padding-left: max(var(--pad-x), env(safe-area-inset-left));
    padding-right: max(var(--pad-x), env(safe-area-inset-right));
  }
}

/* Móvil en horizontal: la altura es el recurso escaso. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { padding-top: 18px; padding-bottom: 22px; gap: 18px; }
  h1 { font-size: 30px; line-height: 1.05; letter-spacing: -0.6px; }
  .cta-bar { padding-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }

  /* El cambio a éxito sigue siendo legible: un fundido, sin trazos ni barridos. */
  .success.is-entrando { animation: exito-fundido 0.24s ease both !important; }
  .btn.is-enviando::before { border-right-color: currentColor; opacity: 0.6; }

  /* Sin transición, la barra tiene que poder colocarse igual. */
  .cta-bar { transform: translateY(110%); }
  .cta-bar.is-visible { transform: translateY(0); }
}

/* ------------------------------ prueba, alcance y errores del formulario */

.proof-text {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

.proof {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--tint);
}

.proof-body { display: grid; gap: 1px; }
.proof-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.proof b { font-size: 15.5px; color: var(--text-strong); letter-spacing: -0.01em; }
.proof .proof-link { font-size: 13.5px; color: var(--link); font-weight: 600; }

/* Logo de Google: el mismo glifo en tres tamaños. */
.g-mark { width: 19px; height: 19px; flex: none; display: block; }
.g-mark.g-lg { width: 28px; height: 28px; }
.g-mark.g-xl { width: 34px; height: 34px; }

.stars { display: inline-flex; gap: 1.5px; }
.star { width: 16px; height: 16px; fill: var(--star); flex: none; }

.field-error {
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--error);
  display: flex;
  gap: 7px;
}

/* El error no se fía solo del color: lleva su propia marca. */
.field-error::before {
  content: "!";
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: 50%;
  background: var(--error-fill);
  color: var(--error-glyph);
  font-size: 12px;
  line-height: 1;
}

.field input[aria-invalid="true"] { border-color: var(--error); background: var(--error-bg); }
.consent input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }

.btn:disabled { background: var(--disabled); cursor: progress; }

/* Enviando: el botón dice que está trabajando, no solo que está apagado. */
.btn.is-enviando { grid-auto-flow: column; grid-auto-columns: max-content; justify-content: center; gap: 10px; }
.btn.is-enviando::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- éxito */

.success { display: grid; justify-items: start; gap: 18px; padding: 14px 4px 10px; }

.success-mark {
  width: 34px;
  height: 34px;
  color: var(--ok);
  stroke-width: 2.4;
}

.success h2 {
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: clamp(27px, 7.4vw, 32px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--text-strong);
  text-wrap: balance;
}

.success p { font-size: 15px; line-height: 1.6; color: var(--soft); }

/* ----------------------------------------------------------- cookies */

.cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  gap: 12px;
  padding: 16px var(--pad-x) max(16px, env(safe-area-inset-bottom));
  background: var(--band);
  color: var(--on-band);
  border-top: 1px solid var(--band);
}

.cookies p { font-size: 13.5px; line-height: 1.5; }
.cookies a { color: var(--peri-text); text-decoration: underline; }
.cookies-actions { display: flex; gap: 10px; }
.cookies .btn { min-height: 46px; font-size: 15.5px; }

.ghost {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(180, 182, 240, 0.45);
  border-radius: 9px;
  background: transparent;
  color: var(--on-band);
  font: inherit;
  font-weight: 600;
  font-size: 15.5px;
  cursor: pointer;
  white-space: nowrap;
}

.ghost:active { background: rgba(180, 182, 240, 0.16); }

/* Mientras se decide sobre cookies, la barra de acción no compite. */
body.consent-open .cta-bar { transform: translateY(110%); }

@media (min-width: 620px) {
  .cookies {
    grid-auto-flow: column;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .cookies p { max-width: 70ch; }
}

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

.thanks {
  max-width: 60ch;
  margin: 0 auto;
  padding: clamp(40px, 10vw, 90px) var(--pad-x);
}

.thanks .success { gap: 14px; }

.thanks h1 {
  font-size: clamp(28px, 6.4vw, 40px);
  color: var(--text-strong);
  line-height: 1.08;
  max-width: none;
}

.thanks .success p { font-size: 16.5px; }

/* ------------------------------------------------------- cierre con CTA */

.final {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
  padding: 32px var(--pad-x) 38px;
  background: var(--tint);
}

.final p {
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-strong);
  text-wrap: pretty;
}

.final .btn { width: auto; min-width: 260px; padding: 0 30px; }

@media (min-width: 900px) {
  .final { padding: 44px var(--pad-x) 50px; gap: 20px; }
  .final p { font-size: 16.5px; }
}

/* ------------------------------------------------------------- reseñas */

/* El carril sale a sangre hasta el borde de la sección, no más allá: sin esto
   la página tenía scroll horizontal en escritorio. */
.reviews { padding: 34px var(--pad-x) 38px; overflow-x: clip; }

.reviews-head { display: grid; gap: 18px; margin-bottom: 22px; }

.reviews h2 {
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: clamp(24px, 6vw, 34px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-strong);
  text-wrap: balance;
  margin-bottom: 8px;
}

.reviews-head p { font-size: 15.5px; color: var(--soft); text-wrap: pretty; }

.reviews-score {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--tint);
}

.reviews-score b {
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.reviews-score .stars { margin-bottom: 3px; }
.reviews-score .star { width: 18px; height: 18px; }
.reviews-score-label { display: block; font-size: 13.5px; color: var(--soft); font-weight: 600; }

/* En móvil se deslizan de lado: cuatro tarjetas apiladas alargarían la página. */
.table-wrap:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Dos filas en marcha continua, en sentidos opuestos. Cada fila lleva sus
   tarjetas dos veces: al recorrer la mitad exacta la animación vuelve al inicio
   y el empalme no se nota. El medio gap del calc es el que sobra al partir la
   pista por la mitad. */
.reviews-rail {
  --gap: 14px;
  display: grid;
  gap: var(--gap);
  overflow: hidden;
  margin-inline: calc(var(--pad-x) * -1);
}

.reviews-rail:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

.reviews-track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  animation: reviews-marquee 72s linear infinite;
}

.reviews-track.is-reverse { animation-duration: 88s; animation-direction: reverse; }

@keyframes reviews-marquee {
  to { transform: translateX(calc(-50% - var(--gap) / 2)); }
}

/* Al pasar por encima, al tabular dentro o al tocarla, la fila se para. */
.reviews-rail:hover .reviews-track,
.reviews-rail:focus-within .reviews-track,
.reviews-rail.is-paused .reviews-track { animation-play-state: paused; }

.review {
  width: min(82vw, 330px);
  flex: none;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.review-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; }

.review-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--band);
  color: var(--on-fill);
  display: grid;
  place-items: center;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.review-who { display: grid; min-width: 0; }
.review-who b { font-size: 15px; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-who span { font-size: 13px; color: var(--soft); }
.review-g { width: 19px; height: 19px; flex: none; }

.review p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review.is-open p { -webkit-line-clamp: unset; }

.review-more {
  justify-self: start;
  border: 0;
  background: none;
  padding: 6px 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--link);
  text-decoration: underline;
  cursor: pointer;
}

@media (min-width: 900px) {
  .reviews { padding: 54px 0 58px; }
  .reviews-head {
    padding-inline: var(--pad-x);
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    margin-bottom: 28px;
  }
  .reviews-rail { --gap: 18px; }
  .review { width: 360px; }
}

/* Sin movimiento: las filas se quedan quietas, se recorren a mano y cada
   tarjeta aparece una sola vez. */
@media (prefers-reduced-motion: reduce) {
  .reviews-rail { overflow-x: auto; }
  .reviews-track { width: auto; padding-inline: var(--pad-x); }
  .reviews-track .review[aria-hidden="true"] { display: none; }
}

/* ------------------------------------------------ campos del formulario */

.pareja { display: grid; gap: 0; }

select {
  width: 100%;
  height: 52px;
  border: 1px solid var(--field-line);
  border-radius: 9px;
  padding: 0 40px 0 13px;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--field);
  appearance: none;
  /* Flecha propia: la del sistema no se puede colorear y rompe el conjunto. */
  background-image: linear-gradient(45deg, transparent 50%, var(--text-strong) 50%),
                    linear-gradient(135deg, var(--text-strong) 50%, transparent 50%);
  background-position: calc(100% - 20px) 23px, calc(100% - 14px) 23px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

select:focus { border-color: var(--focus); }
select:invalid, select option[value=""] { color: var(--hint); }

/* El prefijo va dentro del campo: solo se pide el móvil español de 9 cifras. */
.tel-wrap { position: relative; }

.tel-prefijo {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  font-weight: 600;
  color: var(--soft);
  pointer-events: none;
}

.tel-wrap input { padding-left: 52px; }

/* Trampa para bots: fuera de la pantalla, fuera del orden de tabulación. */
.trampa {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.form-alerta {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 9px;
  background: var(--error-bg);
  color: var(--error);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

@media (min-width: 360px) {
  .pareja { grid-template-columns: 1fr 1fr; gap: 0 14px; }
}

/* ------------------------------------------------------- tras enviar */

/* Subtítulo y frase del botón van al mismo tamaño: son las dos frases que
   empujan a seguir. */
.success .exito-sub { margin-top: -8px; }

.success .exito-sub,
.success .exito-app p {
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-size: clamp(20px, 5.4vw, 23px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-strong);
}

.exito-camino { width: 100%; display: grid; gap: 14px; }

.exito-whatsapp {
  grid-template-columns: 30px 1fr;
  align-items: center;
  margin-top: 4px;
  padding: 20px 18px;
  border-radius: 12px;
  background: var(--tint);
}

.exito-icono { width: 30px; height: 30px; display: block; color: var(--money); }

.success .exito-whatsapp p {
  font-size: 17px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
}

/* El plazo es lo que tranquiliza: va marcado como con rotulador. */
.destacado {
  color: var(--text-strong);
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 5px;
  white-space: nowrap;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.exito-o {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.success .exito-o { color: var(--soft); }
.exito-o::before, .exito-o::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.exito-app .btn { width: 100%; }

/* ---------------------------------------------- ajustes tras el critique */

/* El desplegable también se marca en rojo: sin esto la alerta decía "corrige
   los campos marcados" y no había ninguno marcado. */
select[aria-invalid="true"] { border-color: var(--error); background-color: var(--error-bg); }

/* La garantía va justo encima del botón: la razón para enviar tiene que estar
   donde se decide, no debajo de la letra pequeña. */
.fcard .proof-text {
  margin: 4px 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
}

.field .req { color: var(--soft); font-weight: 600; }
.form-alerta strong { display: block; margin-bottom: 2px; }

/* El carrusel se puede parar (WCAG 2.2.2): contenido que se mueve más de cinco
   segundos necesita un control con nombre, no solo :hover. */
.reviews-controles { display: flex; justify-content: flex-end; padding: 0 var(--pad-x) 12px; }

.pausa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-strong);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.pausa svg { width: 14px; height: 14px; }
.pausa[aria-pressed="true"] { background: var(--tint); border-color: var(--peri); }

/* En móvil, una sola fila: dos pistas cruzándose bajo el pulgar es ruido. */
@media (max-width: 899px) {
  .reviews-track.is-reverse { display: none; }
}

@media (min-width: 900px) {
  .reviews-score b { font-size: 42px; }
  .reviews-controles { padding-inline: var(--pad-x); }
}

/* ================================================== la entrada del éxito

   El momento que la página se gana: el tick se traza como la corrección del
   logo, el título se enfoca y el rotulador pasa por "1 minuto". Todo parte de
   un estado visible: sin .is-entrando (o sin JS) el éxito se ve completo. */

@keyframes exito-fundido { from { opacity: 0; } }

@keyframes exito-trazo { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

@keyframes exito-enfoque {
  from { opacity: 0; filter: blur(6px); transform: translateY(10px); }
}

@keyframes exito-rotulador { from { background-size: 0% 100%; } }

.is-entrando .success-mark path {
  stroke-dasharray: 1;
  animation: exito-trazo 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.12s both;
}

.is-entrando > h2,
.is-entrando > h1,
.is-entrando .exito-sub,
.is-entrando .exito-camino,
.is-entrando .exito-o {
  animation: exito-enfoque 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.is-entrando > h2, .is-entrando > h1 { animation-delay: 0.22s; }
.is-entrando .exito-sub { animation-delay: 0.3s; }
.is-entrando .exito-whatsapp { animation-delay: 0.38s; }
.is-entrando .exito-o { animation-delay: 0.46s; }
.is-entrando .exito-app { animation-delay: 0.52s; }

/* El resaltado es un rotulador: se pinta de izquierda a derecha cuando el
   texto ya está quieto. */
.destacado {
  background: linear-gradient(var(--mark), var(--mark)) no-repeat left center / 100% 100%;
}
.is-entrando .destacado { animation: exito-rotulador 0.55s cubic-bezier(0.65, 0, 0.35, 1) 0.75s both; }

/* Errores y avisos del formulario: entran, no aparecen de golpe. */
@keyframes aviso-entra { from { opacity: 0; transform: translateY(-4px); } }
.field-error:not([hidden]),
.form-alerta:not([hidden]) { animation: aviso-entra 0.2s cubic-bezier(0.16, 1, 0.3, 1); }