/* Hoja de la portada. Vivía dentro del HTML; se separa para que la CSP
   pueda prohibir estilos en línea (style-src 'self'). */
/* ---------------------------------------------------------------------------
   Página de presentación.

   Marfil y burdeos, un solo mundo visual. Dos familias tipográficas: Archivo
   estrecho para los titulares, Spectral para el texto. Las etiquetas usan
   Archivo muy espaciado en lugar de una tercera fuente.
   --------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Granate como TEXTO, aparte del granate como fondo. Sobre papel oscuro
     #7C1421 no se lee: los usos de texto aclaran con el tema; los fondos
     (botones, discos de los pasos) se quedan como están. */
  --seal-ink: #7C1421;

  /* Claro sobre granate y sobre las secciones nocturnas. No cambia con el
     tema: el fondo bajo él tampoco cambia. */
  --claro: #FCFAF5;

  --ink:        #1A1512;
  --ink-soft:   #4E453C;
  --ink-faint:  #8A8071;
  --paper:      #F4F0E6;
  --paper-up:   #FCFAF5;
  --seal:       #7C1421;
  --seal-lift:  #9B1C2A;
  --seal-deep:  #4A0D16;
  --seal-night: #2E070E;
  --rule:       #DCD3C1;
  --stone:      #EFE7D6;
  --stone-dim:  #C3B7A0;

  --measure: 58ch;
  --pad: var(--sp-6);
  --section: var(--sp-16);
  --card-shadow: 0 30px 60px -38px rgba(74, 13, 22, 0.45);

  --t-xs: var(--fs-12);
  --t-sm: clamp(0.9rem, 0.87rem + 0.16vw, 1rem);
  --t-md: clamp(1.02rem, 0.96rem + 0.3vw, 1.22rem);
  --t-lg: clamp(1.4rem, 1.15rem + 1.2vw, 2.1rem);
  --t-xl: clamp(2.1rem, 1.5rem + 2.8vw, 4rem);
  --t-hero: clamp(2.6rem, 1.4rem + 5.4vw, 6.4rem);
}

/* Tema oscuro: sólo se invierten los tokens de «papel». El héroe, la
   navegación y las secciones oscuras están construidos sobre seal-night y
   stone: ya son oscuros y no cambian. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ink:        #EFE8DA;
    --ink-soft:   #C6BBAA;
    --ink-faint:  #A69B8B;
    --paper:      #16120F;
    --paper-up:   #201914;
    --seal-ink:   #D2606A;
    --rule:       #3A2F27;
    --stone-dim:  #6F6355;
    --card-shadow: 0 30px 60px -38px rgba(0, 0, 0, 0.75);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Spectral, Georgia, "Times New Roman", serif;
  font-size: var(--t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  font-variation-settings: "wdth" 80, "wght" 800;
  line-height: 0.98;
  letter-spacing: -0.004em;
  text-wrap: balance;
  margin: 0;
}
/* «pretty» impide la línea huérfana: una sola palabra colgando al final de un
   párrafo. El navegador que no lo entienda parte como siempre, sin romper nada. */
p, li, dd, figcaption { margin: 0; text-wrap: pretty; }
img { max-width: 100%; display: block; }

.eyebrow {
  text-wrap: balance;
  font-family: Archivo, Arial, sans-serif;
  font-variation-settings: "wdth" 96, "wght" 600;
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.wrap { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: var(--pad); }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--seal); outline-offset: 4px; border-radius: 1px; }
.hero :focus-visible, .nav :focus-visible, .panel :focus-visible, .sol__top :focus-visible { outline-color: var(--stone); }

/* --- barra ---------------------------------------------------------------- */

.nav { position: absolute; inset: 0 0 auto; z-index: 20; }
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem 1.5rem; padding-block: 1.25rem; flex-wrap: wrap;
}

/* La barra tiene exactamente DOS estados y ninguno intermedio.

   El fondo del fallo: la fila castellana mide unos 1.260px y el contenedor
   1.216 — en castellano UNA fila era imposible por aritmética, y el enlace
   sobrante caía donde podía. Un menú no puede romperse «un poco»: o cabe
   entero en una fila, o pasa entero a su propia fila.

   Estado A (pantalla ancha): una fila. Marca, enlaces, idioma y botón.
   Estado B (portátil):       dos filas deliberadas. Arriba marca + idioma +
                              botón, clavados; debajo los enlaces, todos.
   El umbral está donde la fila castellana —la más larga— cabe con margen. */
.nav__lang { margin-left: auto; }
.nav__lang, .nav__acceso, .brand { flex: 0 0 auto; }
.nav__links { order: 4; flex-basis: 100%; }
@media (min-width: 88rem) {
  .nav__links { order: 0; flex-basis: auto; }
  .nav .wrap { max-width: 84rem; }
}

/* En el móvil no caben el logotipo, el idioma y dos botones en una línea: el
   último quedaba cortado por el borde. El bloque de acceso baja a su propia
   fila en lugar de desbordarse. */
@media (max-width: 46rem) {
  /* En pantalla estrecha la barra deja de flotar sobre la cabecera. Flotando
     crecía hacia abajo y se comía el texto que había debajo; como bloque
     normal, empuja la página y no tapa nada. */
  .nav { position: static; background: var(--seal-night); }
  /* El idioma se queda en la fila del logotipo; los dos botones bajan a una
     fila propia. Los tres juntos no caben en 375 px por unos 35. */
  .nav__acceso { width: 100%; justify-content: flex-start; gap: 1rem; }
  .nav__lang { margin-left: 0; }
  .nav__links { display: none; }
  .nav__lang { margin-left: auto; }
  .hero { padding-block: var(--sp-10) var(--sp-24); }
}

/* Cualquier cosa que se toque con el dedo, 44 px de alto como mínimo: por
   debajo de eso fallar el objetivo es lo normal, no la excepción. */
.nav__entrar, .nav__lang select, .btn, .faq summary, .lang-seg {
  min-height: var(--control);
}
.nav__entrar, .nav__lang select { display: inline-flex; align-items: center; }

.brand {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: Archivo, Arial, sans-serif;
  font-variation-settings: "wdth" 88, "wght" 700;
  text-transform: uppercase; letter-spacing: 0.34em;
  font-size: var(--t-xs); color: var(--stone); text-decoration: none; white-space: nowrap;
}
.brand__mark { width: 1.5rem; height: 1.5rem; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; letter-spacing: 0; font-size: 0.75rem; }

.nav__links { display: none; gap: 1.25rem 1.5rem; flex-wrap: wrap; }
@media (min-width: 46.01rem) { .nav__links { display: flex; } }
/* En el móvil los enlaces de sección no desaparecen: pasan a una tercera fila
   compacta debajo de los botones. Sin ellos, «Preguntas» solo se alcanzaba
   bajando toda la página. */
@media (max-width: 46rem) {
  .nav__links { display: flex; order: 5; flex-basis: 100%; gap: 0.25rem 1rem; padding-top: 0.25rem; }
  .nav__links a { font-size: 0.75rem; letter-spacing: 0.09em; }
}
.nav__links a {
  font-family: Archivo, Arial, sans-serif;
  font-variation-settings: "wdth" 96, "wght" 500;
  font-size: var(--t-xs); letter-spacing: 0.11em; text-transform: uppercase;
  color: color-mix(in srgb, var(--stone) 78%, transparent);
  text-decoration: none; padding-block: 0.25rem; position: relative;
  white-space: nowrap;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--stone); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease);
}
.nav__links a:hover { color: var(--stone); }
.nav__links a:hover::after { transform: scaleX(1); }

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

.btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: Archivo, Arial, sans-serif;
  font-variation-settings: "wdth" 96, "wght" 600;
  font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; padding: 1rem 1.75rem;
  background: var(--seal); color: var(--claro); border: 0; cursor: pointer;
  transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.btn:hover { background: var(--seal-deep); }
.btn:active { transform: translateY(1px); }
.btn--sm { padding: 0.75rem 1.25rem; white-space: nowrap; }
.btn__arrow { transition: transform var(--dur-2) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--pale { background: var(--stone); color: var(--seal-deep); }
.btn--pale:hover { background: var(--claro); }

.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.btn--line:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--seal); color: var(--seal-ink); }

.btn--ghost { background: transparent; color: var(--stone); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stone) 40%, transparent); }
.btn--ghost:hover { background: color-mix(in srgb, var(--stone) 12%, transparent); }

.nav__acceso { display: flex; align-items: center; gap: 1rem; }
.nav__lang { display: flex; margin-left: auto; }
.nav__lang select {
  font-family: Archivo, Arial, sans-serif;
  font-variation-settings: "wdth" 96, "wght" 500;
  font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--stone); background: transparent; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--stone) 34%, transparent);
  padding: 0.5rem 0.5rem;
}
.nav__lang select:hover { border-color: var(--stone); }
.nav__lang option { color: var(--ink); background: var(--paper-up); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.nav__entrar {
  font-family: Archivo, Arial, sans-serif;
  font-variation-settings: "wdth" 96, "wght" 600;
  font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--stone); text-decoration: none; white-space: nowrap;
  padding-block: 0.25rem; border-bottom: 1px solid transparent; transition: border-color var(--dur-2);
}
.nav__entrar:hover { border-bottom-color: var(--stone); }

.solo-ancho { display: none; }
@media (min-width: 72rem) { .solo-ancho { display: inline; } }

/* --- portada -------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--seal-deep);
  color: var(--stone);
  padding-block: 8rem 10rem;
  overflow: hidden;
  isolation: isolate;
}
/* Sin fotografía: la profundidad la dan dos focos de luz y una retícula
   fina, como el grabado de un documento oficial. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(155, 28, 42, 0.55), transparent 62%),
    radial-gradient(80% 70% at 8% 100%, rgba(46, 7, 14, 0.9), transparent 70%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(239, 231, 214, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(239, 231, 214, 0.05) 1px, transparent 1px);
  background-size: 5rem 5rem;
  mask-image: radial-gradient(120% 100% at 60% 20%, #000 20%, transparent 78%);
}

.hero__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 62rem) { .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }

.hero h1 { font-size: var(--t-hero); font-variation-settings: "wdth" 74, "wght" 900; color: var(--claro); max-width: 14ch; }
.hero__lede { margin-top: 1.25rem; max-width: 46ch; color: color-mix(in srgb, var(--stone) 82%, transparent); }
.hero__lede b { color: var(--claro); font-weight: 600; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* Réplica de la pantalla real del producto: los datos son los de un cálculo
   hecho con el sistema, no un ejemplo inventado. */
.shot { background: var(--paper-up); color: var(--ink); box-shadow: 0 40px 90px -45px rgba(0,0,0,0.8); }
.shot__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--rule); }
.shot__bar .brand { color: var(--seal-ink); }
.shot__addr { font-family: Archivo, Arial, sans-serif; font-variation-settings: "wdth" 96, "wght" 500; font-size: var(--t-xs); color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot__body { padding: 1.5rem 1.25rem; display: grid; gap: 1rem; }
.shot__verdict { border-left: 3px solid var(--seal); background: color-mix(in srgb, var(--seal) 7%, transparent); padding: 0.75rem 1rem; display: grid; gap: 0.25rem; }
.shot__verdict strong { font-family: Archivo, Arial, sans-serif; font-variation-settings: "wdth" 92, "wght" 700; text-transform: uppercase; font-size: var(--t-xs); letter-spacing: 0.06em; color: var(--seal-ink); }
.shot__verdict span { font-size: var(--t-xs); color: var(--ink-soft); }
.shot__cap { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.25rem; }
.shot__cap b { font-family: Archivo, Arial, sans-serif; font-variation-settings: "wdth" 74, "wght" 900; font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1; font-variant-numeric: tabular-nums; color: var(--seal-ink); }
.shot__cap i { font-style: normal; font-size: var(--t-xs); color: var(--ink-faint); }
.shot__row { padding-top: 1rem; border-top: 1px solid var(--rule); display: grid; gap: 0.25rem; }
.shot__row p { font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.5; }
.shot__row .norm { color: var(--seal-ink); }

/* --- tres tarjetas a caballo entre la portada y lo que sigue -------------- */

.straddle { margin-top: -5rem; position: relative; z-index: 5; }
.straddle__grid { display: grid; gap: 1.25rem; }
@media (min-width: 50rem) { .straddle__grid { grid-template-columns: repeat(3, 1fr); } }

.pill {
  background: var(--paper-up);
  padding: 1.5rem;
  display: grid; gap: 0.75rem; align-content: start;
  box-shadow: var(--card-shadow);
  border-top: 3px solid var(--seal);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.pill:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -40px rgba(74,13,22,0.55); }
.pill h3 { font-size: var(--t-lg); }
.pill p { font-size: var(--t-sm); color: var(--ink-soft); }
.pill__n { font-family: Archivo, Arial, sans-serif; font-variation-settings: "wdth" 96, "wght" 600; font-size: var(--t-xs); letter-spacing: 0.18em; color: var(--seal-ink); }

/* --- secciones ------------------------------------------------------------ */

.section { padding-block: var(--section); }
/* Márgenes y separación de secciones por escalones, no por porcentaje de
   pantalla: así cada valor cae en la cuadrícula de 8 px. */
@media (min-width: 48rem) { :root { --pad: var(--sp-10); } }
@media (min-width: 62rem) { :root { --pad: var(--sp-16); --section: var(--sp-24); } }
@media (min-width: 88rem) { :root { --pad: var(--sp-24); --section: 8rem; } }
.section--rule { border-top: 1px solid var(--rule); }
.section__head { display: grid; gap: 1rem; max-width: var(--measure); margin-bottom: 2.5rem; }
.section h2 { font-size: var(--t-xl); }
.prose { max-width: var(--measure); color: var(--ink-soft); }

/* Cada frase, su propio párrafo. Un bloque largo parte donde quiere el
   navegador y deja frases que acaban con una palabra suelta al principio
   de la línea; separados, el texto respira y no cuelga nada. */
.sentences { display: grid; gap: 0.75rem; }

/* --- soluciones: tarjeta con pantalla y medalla circular ------------------ */

.solutions { display: grid; gap: 1.5rem; }
@media (min-width: 54rem) { .solutions { grid-template-columns: repeat(3, 1fr); } }

.sol { background: var(--paper-up); box-shadow: var(--card-shadow); display: flex; flex-direction: column; }
.sol__top { position: relative; background: var(--seal-deep); padding: 1.25rem 1.25rem 2.5rem; min-height: 11rem; display: grid; align-content: center; gap: 0.5rem; }
.sol__top::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(to right, rgba(239,231,214,0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(239,231,214,0.06) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
}
.sol__mini { position: relative; display: grid; gap: 0.25rem; color: var(--stone); }
.sol__mini .k { font-family: Archivo, Arial, sans-serif; font-variation-settings: "wdth" 96, "wght" 600; font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone-dim); }
.sol__mini .v { font-family: Archivo, Arial, sans-serif; font-variation-settings: "wdth" 74, "wght" 900; font-size: clamp(1.5rem, 3.5vw, 2rem); line-height: 1; color: var(--claro); font-variant-numeric: tabular-nums; }
.sol__mini .s { font-size: var(--t-xs); color: color-mix(in srgb, var(--stone) 72%, transparent); }

.sol__badge {
  position: absolute; right: 1.25rem; bottom: -1.5rem;
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--seal); color: var(--claro);
  display: grid; place-items: center;
  font-family: Archivo, Arial, sans-serif; font-variation-settings: "wdth" 90, "wght" 800;
  font-size: var(--t-sm); letter-spacing: 0.02em;
  box-shadow: 0 12px 24px -12px rgba(0,0,0,0.6);
  border: 3px solid var(--paper-up);
}
.sol__body { padding: 2.5rem 1.25rem 1.5rem; display: grid; gap: 0.75rem; align-content: start; flex: 1; }
.sol__body h3 { font-size: var(--t-lg); }
.sol__body p { font-size: var(--t-sm); color: var(--ink-soft); }

/* --- cómo funciona: pasos con conector ----------------------------------- */

.steps { display: grid; gap: 2rem; }
@media (min-width: 54rem) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step { position: relative; display: grid; gap: 0.75rem; justify-items: start; }
.step__disc {
  width: 4rem; height: 4rem; border-radius: 50%;
  background: var(--paper-up); color: var(--seal-ink);
  display: grid; place-items: center;
  font-family: Archivo, Arial, sans-serif; font-variation-settings: "wdth" 82, "wght" 900;
  font-size: var(--t-lg);
  box-shadow: inset 0 0 0 1px var(--rule), var(--card-shadow);
}
.step:last-child .step__disc { background: var(--seal); color: var(--claro); box-shadow: var(--card-shadow); }
/* El conector sólo existe cuando hay tres columnas de verdad. */
@media (min-width: 54rem) {
  .step:not(:last-child) .step__disc::after {
    content: ""; position: absolute; top: 2rem; left: 5rem; right: -1.5rem; height: 1px;
    background: linear-gradient(to right, var(--rule), color-mix(in srgb, var(--rule) 20%, transparent));
  }
}
.step h3 { font-size: var(--t-lg); }
.step p { font-size: var(--t-sm); color: var(--ink-soft); }

/* --- cifras --------------------------------------------------------------- */

.figures { display: grid; }
.figure {
  display: grid; gap: 0.5rem 3rem; align-items: baseline;
  padding-block: 1.5rem; border-top: 1px solid var(--rule);
}
.figure:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 52rem) { .figure { grid-template-columns: 16rem minmax(0, 1fr); } }
.figure b {
  font-family: Archivo, Arial, sans-serif; font-variation-settings: "wdth" 72, "wght" 900;
  font-size: clamp(var(--fs-40), 6vw, var(--fs-64)); line-height: 0.9; color: var(--seal-ink);
  font-variant-numeric: tabular-nums;
}
.figure p { color: var(--ink-soft); max-width: 52ch; }

/* --- preguntas ------------------------------------------------------------ */

.faq { display: grid; }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary {
  text-wrap: balance;
  cursor: pointer; list-style: none;
  padding-block: 1.25rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 2rem;
  font-family: Archivo, Arial, sans-serif; font-variation-settings: "wdth" 88, "wght" 600;
  text-transform: uppercase; font-size: var(--t-sm); transition: color var(--dur-2);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary:hover { color: var(--seal-ink); }
.faq summary::after { content: "+"; color: var(--seal-ink); font-size: 1.3em; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq__a {
  display: grid; gap: 0.75rem;
  padding-bottom: 1.25rem;
  max-width: var(--measure); color: var(--ink-soft);
}

/* --- contacto: panel oscuro montado sobre la sección --------------------- */

.contact { padding-block: 0 var(--section); }
.contact__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 62rem) { .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

.panel {
  background: var(--seal-deep); color: var(--stone);
  padding: 1.75rem;
  box-shadow: 0 40px 80px -45px rgba(74,13,22,0.7);
  display: grid; gap: 1rem;
}
.panel h2 { color: var(--claro); font-size: var(--t-lg); }
.panel .eyebrow { color: var(--stone-dim); }
.panel p { color: color-mix(in srgb, var(--stone) 76%, transparent); font-size: var(--t-sm); }

.field { display: grid; gap: 0.5rem; }
.field label { font-family: Archivo, Arial, sans-serif; font-variation-settings: "wdth" 96, "wght" 600; font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-dim); }
.field input, .field textarea {
  font: inherit; font-size: var(--t-sm);
  background: color-mix(in srgb, var(--stone) 8%, transparent);
  color: var(--claro);
  border: 1px solid color-mix(in srgb, var(--stone) 22%, transparent);
  padding: 0.75rem 1rem; width: 100%;
  transition: border-color var(--dur-2), background var(--dur-2);
}
/* 16 px en pantalla táctil: por debajo, Safari en iPhone amplía la página al
   tocar el campo y la deja ampliada. El selector de idioma y los botones
   principales suben un punto por la misma razón. */
@media (max-width: 46rem) {
  .field input, .field textarea, .nav__lang select { font-size: 16px; }
  .btn { font-size: 0.75rem; }
}
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--stone) 45%, transparent); }
.field input:focus, .field textarea:focus { border-color: var(--stone); background: color-mix(in srgb, var(--stone) 14%, transparent); }
.field textarea { resize: vertical; min-height: 6rem; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso { border-left: 2px solid currentColor; padding-left: 0.75rem; }
.aviso--success { color: var(--claro); }
.aviso--error { color: #F2B8B5; }
.pair { display: grid; gap: 1rem; }
@media (min-width: 34rem) { .pair { grid-template-columns: 1fr 1fr; } }

.foot { padding-block: 2rem; display: flex; flex-wrap: wrap; gap: 1.25rem 3rem; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--rule); }
.foot .brand { color: var(--seal-ink); }
.foot p { font-size: var(--t-sm); color: var(--ink-faint); max-width: 38ch; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.foot__links a { color: var(--ink-faint); white-space: nowrap; }
.foot__links a:hover { color: var(--seal-ink); }
.field__legal { font-size: var(--t-xs); line-height: 1.5; color: color-mix(in srgb, var(--stone) 62%, transparent); }
.field__legal a { color: var(--stone); }


/* --- volver arriba -------------------------------------------------------- */

/* Cristal esmerilado: el fondo no se pinta, se difumina de lo que hay
   debajo. Por eso el mismo botón se lee sobre el granate de la portada y
   sobre el texto claro de más abajo, sin cambiar de tema.

   `saturate` levanta el color de lo que traspasa: sin él, el desenfoque deja
   una mancha gris sucia en vez de cristal. La línea clara interior del
   box-shadow es el brillo del canto superior: es lo que hace que el cristal
   parezca tener grosor y no ser solo una transparencia. */
.totop {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;

  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: 999px;
  text-decoration: none;

  color: var(--ink);
  background: rgba(252, 250, 245, 0.55);
  border: 1px solid rgba(252, 250, 245, 0.65);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow:
    0 8px 26px -10px rgba(26, 21, 18, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);

  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.totop:hover {
  transform: translateY(-2px);
  background: rgba(252, 250, 245, 0.72);
  box-shadow:
    0 12px 30px -10px rgba(26, 21, 18, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.totop:active { transform: translateY(0); }
.totop svg { width: 1rem; height: 1rem; display: block; }

/* Un navegador sin backdrop-filter mostraría un círculo transparente con la
   flecha invisible dentro. Allí el botón pasa a ser opaco. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .totop { background: var(--paper-up); border-color: var(--rule); }
}

/* En la portada el botón sobra: todavía no hay adónde volver. Aparece solo
   con el desplazamiento, sin una línea de script. Donde no hay líneas de
   tiempo de scroll queda visible siempre: peor, pero no roto. */
@supports (animation-timeline: scroll()) {
  .totop {
    opacity: 0; visibility: hidden;
    animation: totop-in linear both;
    animation-timeline: scroll(root block);
    animation-range: 90vh 150vh;
  }
  @keyframes totop-in {
    from { opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.94); }
    to   { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .totop { animation: none; opacity: 1; visibility: visible; transition: none; }
}

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

/* Clases que sustituyen a los estilos en línea de la portada. */
.eyebrow--dim { color: var(--stone-dim); }
.hero__title { margin-top: 1.25rem; }
.shot--flush { margin: 0; }
.contact__title { font-size: var(--t-xl); margin-top: 1rem; max-width: 14ch; }
.contact__body { margin-top: 1.25rem; }
.contact__direct { margin-top: 1rem; }
.link--seal { color: var(--seal); }

/* ===================================================================
   Prototipo «Papel y sello»: capa visual sobre landing.css.
   Mismos colores, mismas fuentes, mismos textos. Solo profundidad,
   movimiento contenido y un ejemplo que se puede tocar.
   =================================================================== */
:root { --grain: .06; --edge: rgba(255,255,255,.55); }
@media (prefers-color-scheme: dark) { :root { --grain: .05; --edge: rgba(255,255,255,.06); } }

/* grano de papel sobre todo el documento */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60;
  opacity: var(--grain); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}
@media (prefers-color-scheme: dark) { body::after { mix-blend-mode: screen; } }

/* --- portada: viñeta y luz -------------------------------------------- */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 90% at 12% 18%, rgba(155,28,42,.48), transparent 62%),
    radial-gradient(45% 60% at 90% 80%, rgba(0,0,0,.45), transparent 70%),
    linear-gradient(180deg, transparent 65%, rgba(0,0,0,.28));
}
.hero__title { text-shadow: 0 2px 0 rgba(0,0,0,.18); }

/* --- tarjeta del resultado ------------------------------------------- */
.shot {
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--edge), 0 40px 90px -45px rgba(0,0,0,.8), 0 18px 40px -24px rgba(74,13,22,.55);
  transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.shot:hover { transform: perspective(1200px) rotateY(0) rotateX(0); box-shadow: inset 0 1px 0 var(--edge), 0 50px 100px -45px rgba(0,0,0,.85), 0 24px 50px -24px rgba(74,13,22,.6); }
@media (max-width: 62rem) { .shot, .shot:hover { transform: none; } }
.shot__bar::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--seal); box-shadow: 14px 0 0 var(--stone-dim), 28px 0 0 var(--rule); margin-right: 28px; }
.shot__verdict { border-radius: var(--radius); transition: border-color var(--dur-2), background var(--dur-2); }
.shot__verdict.is-stamp { animation: stamp var(--dur-3) var(--ease-stamp) both; }
@keyframes stamp { 0% { transform: scale(1.22) rotate(-3deg); opacity: 0; } 70% { transform: scale(.985) rotate(-.4deg); opacity: 1; } 100% { transform: none; } }
.shot__verdict.is-ok { border-left-color: var(--ink-faint); background: color-mix(in srgb, var(--stone) 45%, transparent); }
.shot__verdict.is-ok strong { color: var(--ink-soft); }
.num { font-variant-numeric: tabular-nums; }

.shot__slider { display: grid; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.shot__slider label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.shot__slider output { font-family: Archivo, Arial, sans-serif; font-variation-settings: "wdth" 80, "wght" 800; font-size: var(--t-sm); color: var(--ink); font-variant-numeric: tabular-nums; }
/* El control mide la altura de toque (44 px) aunque la pista dibujada siga
   siendo de 4 px: antes la caja del control era la pista misma y en el
   móvil había que acertar en 4 px. El margen negativo deja el hueco que
   ocupaba (4 px de pista más 4 px arriba y abajo), así nada se mueve. */
.shot__slider input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: var(--control);
  margin-block: calc((12px - var(--control)) / 2); background: transparent; outline: none; cursor: pointer;
}
.shot__slider input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--seal) var(--pct, 60%), var(--rule) var(--pct, 60%));
}
.shot__slider input[type=range]::-moz-range-track {
  height: 4px; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--seal) var(--pct, 60%), var(--rule) var(--pct, 60%));
}
.shot__slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--paper-up); border: 2px solid var(--seal); box-shadow: 0 2px 8px rgba(74,13,22,.35); transition: transform var(--dur-1); }
.shot__slider input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); }
.shot__slider input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--paper-up); border: 2px solid var(--seal); }
.shot__slider input[type=range]:focus-visible { outline: 2px solid var(--seal); outline-offset: 6px; }
.gauge { --lo: 15.54%; --hi: 51.69%; position: relative; height: 2rem; margin-top: 0.25rem; font-family: Archivo, Arial, sans-serif; font-size: 0.75rem; letter-spacing: .06em; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.gauge::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: repeating-linear-gradient(90deg, var(--rule) 0 6px, transparent 6px 9px); }
.gauge__range { position: absolute; top: 4px; height: 6px; left: var(--lo); width: calc(var(--hi) - var(--lo)); background: color-mix(in srgb, var(--seal) 22%, transparent); border-radius: var(--radius); }
.gauge__cap { position: absolute; top: 0; left: var(--hi); width: 2px; height: 14px; background: var(--seal); transform: translateX(-1px); }
.gauge__marker { position: absolute; top: -3px; left: var(--pct, 60%); width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 2px solid var(--paper-up); box-shadow: 0 1px 4px rgba(0,0,0,.3); transform: translateX(-50%); transition: left var(--dur-1) linear, background var(--dur-2); }
.is-over .gauge__marker { background: var(--seal); }
.gauge__lo, .gauge__hi { position: absolute; top: 17px; transform: translateX(-50%); white-space: nowrap; }
.gauge__lo { left: var(--lo); }
.gauge__hi { left: var(--hi); color: var(--seal-ink); }

/* --- tres tarjetas: iconos a línea --------------------------------- */
.pill { position: relative; border-radius: var(--radius); box-shadow: inset 0 1px 0 var(--edge), var(--card-shadow); }
.pill__icon { position: absolute; top: 1.25rem; right: 1.25rem; width: 2rem; height: 2rem; color: var(--seal-ink); opacity: .9; }
.pill__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.pill__icon path { stroke-dasharray: 140; stroke-dashoffset: 0; }
.pill:hover .pill__icon path { animation: draw 1.2s var(--ease) both; }
@keyframes draw { from { stroke-dashoffset: 140; } to { stroke-dashoffset: 0; } }

/* --- separadores: doble regla con sello ------------------------------- */
.section--rule { border-top: 0; position: relative; }
.section--rule::before { content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 4px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.section--rule::after {
  content: "C"; position: absolute; top: -1rem; left: 50%; width: 2rem; height: 2rem; transform: translateX(-50%);
  border-radius: 50%; border: 1px solid var(--rule); background: var(--paper); display: grid; place-items: center;
  font-family: Archivo, Arial, sans-serif; font-variation-settings: "wdth" 88, "wght" 700; font-size: 0.75rem; line-height: 1; letter-spacing: 0; color: var(--seal-ink);
}

/* --- quiénes somos: marca de agua ------------------------------------ */
#quienes { position: relative; overflow: hidden; }
#quienes::after {
  /* Sin inclinación: dentro de un círculo perfecto nada indica que el giro
     sea intencionado, y la letra se lee torcida. */
  content: "C"; position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%);
  width: 15rem; height: 15rem; border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  border: 1.5px solid var(--rule); box-shadow: inset 0 0 0 9px var(--paper), inset 0 0 0 10px var(--rule);
  font-family: Archivo, Arial, sans-serif; font-variation-settings: "wdth" 80, "wght" 900; font-size: var(--fs-120); line-height: 1; letter-spacing: 0; color: var(--rule);
}
@media (max-width: 62rem) { #quienes::after { display: none; } }

/* --- lo que resuelve: mapa ------------------------------------------- */
.sol__intro { display: grid; gap: 2rem; align-items: end; margin-bottom: 2.5rem; }
.sol__intro .section__head { margin-bottom: 0; }
@media (min-width: 62rem) { .sol__intro { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); } }
.mapa { margin: 0; color: var(--seal-ink); justify-self: end; width: min(21rem, 100%); }
.mapa__svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 24px rgba(74,13,22,.18)); }
.mapa__tierra { fill: url(#trama); }
.mapa__borde { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linejoin: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.mapa.is-in .mapa__borde { animation: trazo 2s var(--ease) forwards; }
@keyframes trazo { to { stroke-dashoffset: 0; } }
.zona { fill: var(--seal); opacity: 0; transform-origin: center; transform-box: fill-box; }
.mapa.is-in .zona { animation: brota var(--dur-3) var(--ease) forwards, late 3s var(--ease) infinite; animation-delay: calc(1.2s + var(--i) * 45ms), calc(2s + var(--i) * 90ms); }
@keyframes brota { from { opacity: 0; transform: scale(.2); } to { opacity: .85; transform: scale(1); } }
@keyframes late { 0%, 100% { opacity: .85; } 50% { opacity: .4; } }
.sol { border-radius: var(--radius); overflow: hidden; box-shadow: inset 0 1px 0 var(--edge), var(--card-shadow); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.sol:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 var(--edge), 0 40px 70px -40px rgba(74,13,22,.55); }

/* --- tres pasos: línea que se dibuja ---------------------------------- */
@media (min-width: 50rem) {
  .steps { position: relative; }
  .steps::before { content: ""; position: absolute; top: 2rem; left: var(--line-left, 2rem); width: 0; border-top: 1px dashed var(--stone-dim); transition: width 1.2s var(--ease) var(--dur-3); }
  .steps.is-in::before { width: var(--line, 66%); }
  .step__disc { position: relative; z-index: 1; }
}
.step__disc { transition: transform var(--dur-2) var(--ease); }
.step:hover .step__disc { transform: translateY(-3px); }
.steps.is-in .step:last-child .step__disc { animation: pulso 2s var(--ease) 2s 2; }
@keyframes pulso { 0% { box-shadow: var(--card-shadow), 0 0 0 0 color-mix(in srgb, var(--seal) 45%, transparent); } 100% { box-shadow: var(--card-shadow), 0 0 0 20px transparent; } }

/* --- cifras: regla de medida ------------------------------------------ */
.figure { position: relative; padding-left: 1.5rem; }
.figure::before { content: ""; position: absolute; left: 0; top: 1.25rem; bottom: 1.25rem; width: 9px; opacity: .8; background: repeating-linear-gradient(180deg, var(--stone-dim) 0 1px, transparent 1px 8px); }
.figure::after { content: ""; position: absolute; left: 0; top: 1.25rem; width: 15px; height: 1px; background: var(--seal-ink); }

/* --- preguntas: apertura suave ------------------------------------------ */
.faq summary::after { display: inline-block; transition: transform var(--dur-2) var(--ease), color var(--dur-2); }
.faq details[open] summary::after { content: "+"; transform: rotate(45deg); }
.faq details { transition: background var(--dur-2); }
.faq details[open] { background: color-mix(in srgb, var(--paper-up) 70%, transparent); }
.faq__a { animation: faqIn var(--dur-3) var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* --- contacto: panel y campos ------------------------------------------ */
.panel { border-radius: var(--radius); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 40px 80px -45px rgba(74,13,22,.7); }
.field { position: relative; }
.field label {
  position: absolute; left: 2.75rem; top: 1rem; z-index: 1; pointer-events: none; letter-spacing: .12em;
  transition: top var(--dur-1) var(--ease), left var(--dur-1) var(--ease), font-size var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.field:focus-within label, .field:has(input:not(:placeholder-shown)) label, .field:has(textarea) label {
  top: -0.5rem; left: 0.75rem; font-size: 0.75rem; background: var(--seal-deep); padding: 0 0.25rem; color: var(--stone);
}
.field input, .field textarea { padding-left: 2.75rem; border-radius: var(--radius); transition: border-color var(--dur-2), background var(--dur-2), box-shadow var(--dur-2); }
.field textarea { padding-left: 1rem; }
.field input:focus, .field textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--seal-lift) 45%, transparent); border-color: var(--stone); }
.field::before {
  content: ""; position: absolute; left: 1rem; top: 1rem; width: 1rem; height: 1rem; pointer-events: none;
  background: var(--stone-dim); transition: background var(--dur-2);
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.field:focus-within::before { background: var(--stone); }
.field:has(textarea)::before { display: none; }
.field:has([name=name]) { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/></svg>"); }
.field:has([name=agency_name]) { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 21V5l8-2v18M12 9l8 2v10M4 21h16M8 8h1M8 12h1M8 16h1M15 13h1M15 17h1'/></svg>"); }
.field:has([name=email]) { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m3 7 9 6 9-6'/></svg>"); }
.field:has([type=password]) { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>"); }
.panel .btn { justify-self: start; }

/* --- botones y enlaces --------------------------------------------------- */
.btn { border-radius: var(--radius); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(0,0,0,.6); }
.btn__arrow { display: inline-block; transition: transform var(--dur-2) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.nav__links a, .foot__links a, .link--seal, .nav__entrar { transition: color var(--dur-2) var(--ease); }

/* --- aparición al desplazarse ---------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal.is-in { opacity: 1; transform: none; }
@media print { .reveal { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .shot, .shot:hover { transform: none; }
  .mapa__borde { stroke-dashoffset: 0; animation: none !important; }
  .zona { opacity: .85; animation: none !important; }
  .shot__verdict.is-stamp, .pill:hover .pill__icon path, .faq__a, .steps.is-in .step:last-child .step__disc { animation: none !important; }
  .steps::before { transition: none; }
}

/* --- selector de idioma: tres botones ------------------------------------- */
.lang-seg { display: inline-flex; align-items: stretch; margin: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--stone) 34%, transparent); }
.lang-seg button {
  font-family: Archivo, Arial, sans-serif; font-variation-settings: "wdth" 96, "wght" 600;
  font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--stone-dim); background: transparent; border: 0; padding: 0 0.75rem; cursor: pointer; display: inline-flex; align-items: center;
  transition: color var(--dur-2), background var(--dur-2);
}
.lang-seg button + button { border-left: 1px solid color-mix(in srgb, var(--stone) 20%, transparent); }
.lang-seg button:hover { color: var(--stone); }
.lang-seg button[aria-current] { color: var(--seal-night); background: var(--stone); cursor: default; }

/* --- cabecera fija al subir ------------------------------------------------- */
@media (min-width: 46.01rem) {
  .nav.is-stuck { position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: color-mix(in srgb, var(--seal-night) 94%, transparent); backdrop-filter: blur(8px); box-shadow: 0 10px 30px -18px rgba(0,0,0,.6); animation: nav-in var(--dur-2) var(--ease); }
  .nav.is-stuck .nav__inner { padding-block: 0.5rem; }
  .nav.is-stuck .nav__links { display: none; }
}
@keyframes nav-in { from { transform: translateY(-100%); } to { transform: none; } }

/* --- barra de petición en el móvil ------------------------------------------ */
.cta-bar { display: none; }
@media (max-width: 46rem) {
  .cta-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; justify-content: center; align-items: center; gap: 0.5rem;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); background: var(--seal); color: var(--claro); text-decoration: none;
    font-family: Archivo, Arial, sans-serif; font-variation-settings: "wdth" 96, "wght" 600; font-size: 0.75rem; letter-spacing: .16em; text-transform: uppercase;
    box-shadow: 0 -10px 30px -18px rgba(0,0,0,.6); transform: translateY(110%); transition: transform var(--dur-2) var(--ease);
  }
  .cta-bar.is-on { transform: none; }
  body:has(.cta-bar.is-on) .totop { bottom: 5rem; }
}

/* Las preguntas van en una sola columna también en pantalla ancha. Hubo una
   regla de dos columnas, pero nunca actuó (columns no tiene efecto sobre una
   rejilla) y con el acordeón de una sola abierta sería además un estorbo: al
   cerrarse una respuesta larga las preguntas saltarían de columna. */

/* --- transición entre páginas ------------------------------------------------ */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Separaciones que antes crecían con la pantalla: ahora dos escalones fijos
   de la cuadrícula, el pequeño por defecto y el grande desde 62rem. */
@media (min-width: 62rem) {
  .hero__grid { gap: 4rem; }
  .hero__lede { margin-top: 1.75rem; }
  .hero__actions { margin-top: 2.5rem; }
  .straddle { margin-top: -8rem; }
  .pill { padding: 2rem; }
  .section__head, .sol__intro { margin-bottom: 3.5rem; }
  .solutions { gap: 2.25rem; }
  .sol__body { padding: 2.5rem 1.75rem 2rem; }
  .steps { gap: 2.5rem; }
  .figure { padding-block: 2.25rem; }
  .faq summary { padding-block: 1.5rem; }
  .faq__a { padding-bottom: 1.5rem; }
  .contact__grid { gap: 4rem; }
  .panel { padding: 3rem; }
  .foot { padding-block: 3rem; }
  .totop { right: 2.25rem; bottom: 2.25rem; }
}