/* ==========================================================================
   Growth Protocol · sistema visual compartido
   Lo usan guia.html y gracias.html, y lo usará la calculadora.
   Mundo: panel de salidas de estación sobre paño azul tinta.
   ========================================================================== */

@font-face {
  font-family: "Sofia Sans";
  src: url("../fonts/sofia-sans-latin.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Sofia Sans Condensed";
  src: url("../fonts/sofia-sans-condensed-latin.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Paño: el suelo de todas las páginas */
  --pano: #14243b;
  --pano-linea: #2c4364;
  --salvia: #a9bad0;

  /* Panel de paletas */
  --grafito: #16181a;
  --carcasa: #25282c;
  --grafito-borde: #2a2d31;
  --paleta-a: #26292c;
  --paleta-b: #1f2124;
  --ranura: #0b0c0d;
  --niebla: #a8a69c;

  /* Tinta y señal */
  --hueso: #f2eee3;
  --amarillo: #f3c21b;
  --amarillo-2: #e3b00f;
  --amarillo-borde: #d4a40c;

  /* Billete de cartulina */
  --cartulina: #f3efe4;
  --cartulina-campo: #fbf9f3;
  --cartulina-linea: #dcd5c4;
  --cartulina-borde: #c9c2b0;
  --tinta: #16181a;
  --tinta-2: #4d5767;
  --marcador: #5c6677;
  --error: #b3261e;

  --f-texto: "Sofia Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-rotulo: "Sofia Sans Condensed", "Sofia Sans", ui-sans-serif, system-ui, sans-serif;

  --ancho: 1240px;
  --gutter: clamp(16px, 4.6vw, 40px);
  --salida: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
  scrollbar-color: var(--pano-linea) var(--pano);
  background-color: var(--pano);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--pano);
  /* Grano del paño: ruido opaco centrado en --pano, sin aclararlo ni degradados */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.14 0 0 0 .008 .14 0 0 0 .071 .14 0 0 0 .161 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color: var(--hueso);
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  caret-color: var(--amarillo);
  hyphens: manual;
}

::selection {
  background: var(--amarillo);
  color: var(--tinta);
}

h1,
h2,
h3,
p,
ol,
ul,
dl,
figure {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

svg {
  display: block;
}

/* «hidden» manda siempre, aunque un componente declare su propio display */
[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 50;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--amarillo);
  color: var(--tinta);
  font-family: var(--f-rotulo);
  font-weight: 760;
  text-decoration: none;
  transform: translateY(-160%);
}

.saltar:focus-visible {
  transform: none;
  outline-color: var(--hueso);
}

/* --------------------------------------------------------------------------
   Raíl: marca y reloj
   -------------------------------------------------------------------------- */

.rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(100% - 2 * var(--gutter), var(--ancho));
  margin-inline: auto;
  padding-block: 16px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--f-rotulo);
  font-weight: 720;
  font-size: 0.8125rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--hueso);
}

.monograma {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--hueso);
  color: var(--pano);
  font-family: var(--f-rotulo);
  font-weight: 820;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  line-height: 1;
}

.reloj {
  --celda: 1.0625rem;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.reloj .paleta {
  width: var(--celda);
}

.reloj__sep {
  width: 0.4rem;
  text-align: center;
  font-family: var(--f-rotulo);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  color: var(--niebla);
}

/* --------------------------------------------------------------------------
   Paleta: una casilla del panel. Dos mitades planas y la ranura.
   -------------------------------------------------------------------------- */

.paleta {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--paleta-b);
  border-radius: max(2px, calc(var(--celda) * 0.12));
  color: var(--hueso);
  font-family: var(--f-rotulo);
  font-weight: 700;
  font-size: calc(var(--celda) * 1.3);
  line-height: 1;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.paleta::before {
  content: "";
  position: absolute;
  inset: 0 0 50%;
  z-index: -1;
  background: var(--paleta-a);
}

.paleta::after {
  content: "";
  position: absolute;
  inset: calc(50% - 0.5px) 0 auto;
  z-index: 3;
  height: 1px;
  background: var(--ranura);
}

.paleta--senal {
  color: var(--amarillo);
}

.paleta__base {
  grid-area: 1 / 1;
}

/* Hojas que caen durante el giro (las crea panel.js y las retira al acabar) */
.paleta__hoja {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  z-index: 1;
  backface-visibility: hidden;
}

.paleta__hoja--sup {
  top: 0;
  background: var(--paleta-a);
  transform-origin: 50% 100%;
}

.paleta__hoja--inf {
  top: 50%;
  background: var(--paleta-b);
  transform-origin: 50% 0;
}

.paleta__hoja--cae,
.paleta__hoja--sube {
  z-index: 2;
}

.paleta__hoja--sube {
  transform: perspective(10em) rotateX(90deg);
}

.paleta__glifo {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 200%;
  display: grid;
  place-items: center;
}

.paleta__hoja--inf .paleta__glifo {
  top: -100%;
}

/* Mientras panel.js prepara la primera vuelta, el panel no enseña letras */
.paletas-en-espera [data-panel] .paleta {
  color: transparent;
}

/* --------------------------------------------------------------------------
   Panel de salidas
   Cada fila tiene casillas fijas que escalan con el ancho: nunca se parte.
   -------------------------------------------------------------------------- */

/* Carcasa más clara y cara oscura: el panel se monta por superposición */
.panel {
  --g: 2px;
  padding: 6px;
  background: var(--carcasa);
  color: var(--hueso);
}

.panel__rejilla {
  --celda: calc((100cqi - 20 * var(--g)) / 19.9);
  container-type: inline-size;
  display: grid;
  row-gap: 14px;
  padding: 14px 10px 16px;
  background: var(--grafito);
  border-radius: 2px;
}

.panel__cabecera,
.fila,
.fila__paletas {
  display: grid;
  grid-template-columns: repeat(2, 1fr) 0.45fr repeat(11, 1fr) 0.45fr repeat(6, 1fr);
  column-gap: var(--g);
}

.panel__cabecera {
  align-items: end;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--grafito-borde);
  font-family: var(--f-rotulo);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--niebla);
}

.panel__titulo {
  grid-column: 1 / 15;
  font: inherit;
}

.panel__filas {
  display: grid;
  row-gap: 14px;
}

.panel__plan {
  grid-column: 16 / -1;
}

.fila {
  row-gap: 6px;
}

.fila__paletas {
  grid-column: 1 / -1;
}

.fila__uso {
  grid-column: 4 / -1;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--niebla);
  text-wrap: pretty;
}

.fila--siguiente {
  padding-top: 14px;
  border-top: 1px dashed #3b3f43;
}

.fila--siguiente .fila__uso {
  color: var(--hueso);
}

/* Panel de estado (gracias): etiqueta + casillas */
.panel--estado .panel__rejilla {
  --celda: calc((100cqi - 5.25rem - 11 * var(--g)) / 11);
  row-gap: 10px;
}

.estado {
  display: grid;
  grid-template-columns: 5.25rem 1fr;
  column-gap: var(--g);
  align-items: center;
}

.estado__paletas {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  column-gap: var(--g);
}

.estado__etiqueta {
  font-family: var(--f-rotulo);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--niebla);
}

/* --------------------------------------------------------------------------
   Titulares y texto
   -------------------------------------------------------------------------- */

.titular {
  font-family: var(--f-rotulo);
  font-weight: 780;
  font-size: clamp(2.5rem, 1.55rem + 3.4vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.titular__senal {
  display: block;
  color: var(--amarillo);
}

.subtitulo {
  font-family: var(--f-rotulo);
  font-weight: 760;
  font-size: 1.625rem;
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.entradilla {
  max-width: 34rem;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--hueso);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Leyenda de la guía: signo + significado
   -------------------------------------------------------------------------- */

.leyenda {
  margin-top: 14px;
  border-bottom: 1px solid var(--pano-linea);
}

.leyenda li {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  align-items: center;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-top: 1px solid var(--pano-linea);
  font-size: 1.0625rem;
  line-height: 1.4;
  text-wrap: pretty;
}

.leyenda__signo {
  --celda: 1.5rem;
  display: flex;
  gap: 2px;
}

.leyenda__signo .paleta {
  width: var(--celda);
  color: var(--amarillo);
}

/* --------------------------------------------------------------------------
   Billete de cartulina: aquí vive el formulario
   -------------------------------------------------------------------------- */

.billete {
  --muesca: 13px;
  position: relative;
  color: var(--tinta);
  caret-color: var(--tinta);
  scroll-margin-top: 16px;
}

.billete ::selection {
  background: var(--pano);
  color: var(--hueso);
}

.billete :focus-visible {
  outline-color: var(--tinta);
}

/* Las muescas del troquel son recortes reales: se ve el paño a través */
.billete__cuerpo {
  --recorte:
    radial-gradient(circle var(--muesca) at 0 100%, #0000 calc(100% - 0.5px), #000 100%) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle var(--muesca) at 100% 100%, #0000 calc(100% - 0.5px), #000 100%) 100% 0 / 51% 100% no-repeat;
  padding: 22px 20px 24px;
  background: var(--cartulina);
  border-radius: 18px 18px 0 0;
  -webkit-mask: var(--recorte);
  mask: var(--recorte);
}

.billete__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cartulina-linea);
}

.billete__titulo {
  font-family: var(--f-rotulo);
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.billete__meta {
  font-family: var(--f-rotulo);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.billete__lema {
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--tinta-2);
}

.billete__formulario {
  margin-top: 18px;
}

.billete__talon {
  --recorte:
    radial-gradient(circle var(--muesca) at 0 0, #0000 calc(100% - 0.5px), #000 100%) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle var(--muesca) at 100% 0, #0000 calc(100% - 0.5px), #000 100%) 100% 0 / 51% 100% no-repeat;
  /* Solapa 1px con el cuerpo para que no asome el paño entre las dos piezas */
  margin-top: -1px;
  padding: 16px 20px 20px;
  background: var(--cartulina);
  border-top: 2px dashed rgba(22, 24, 26, 0.2);
  border-radius: 0 0 18px 18px;
  -webkit-mask: var(--recorte);
  mask: var(--recorte);
}

.legal {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--tinta-2);
  text-wrap: pretty;
}

.legal a {
  color: var(--tinta);
}

/* Dato legal pendiente: se ve a propósito para no publicar sin rellenarlo */
.pendiente {
  padding: 0 0.25em;
  border-radius: 2px;
  background: var(--amarillo);
  color: var(--tinta);
}

/* Formulario: estas reglas visten también el código HTML que pegues de
   Systeme.io (botón «Embedded Form»): etiquetas, campos y botón heredan
   este diseño sin tocar nada más. */

.billete__formulario form {
  display: grid;
  gap: 14px;
}

.billete__formulario .form-group {
  display: grid;
  gap: 6px;
}

.billete__formulario label {
  font-family: var(--f-rotulo);
  font-weight: 720;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.billete__formulario input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--cartulina-borde);
  border-radius: 12px;
  background: var(--cartulina-campo);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.3;
  caret-color: var(--tinta);
  transition: border-color 0.2s var(--salida), background-color 0.2s var(--salida);
}

.billete__formulario input::placeholder {
  color: var(--marcador);
  opacity: 1;
}

.billete__formulario input:not([type="checkbox"]):not([type="radio"]):hover {
  border-color: var(--tinta-2);
}

.billete__formulario input:not([type="checkbox"]):not([type="radio"]):focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
  border-color: var(--tinta);
  background: #fff;
}

.billete__formulario input:user-invalid {
  border-color: var(--error);
}

.billete__formulario input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--pano);
}

.billete__formulario iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   Botón: la única acción, en amarillo andén
   -------------------------------------------------------------------------- */

.boton,
.billete__formulario button,
.billete__formulario input[type="submit"] {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.85rem 1.25rem;
  border: 1px solid var(--amarillo-borde);
  border-radius: 12px;
  background: var(--amarillo);
  color: var(--tinta);
  font-family: var(--f-rotulo);
  font-weight: 800;
  font-size: 1.1875rem;
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s var(--salida), transform 0.2s var(--salida);
}

.boton:hover,
.billete__formulario button:hover,
.billete__formulario input[type="submit"]:hover {
  background: var(--amarillo-2);
}

.boton:active,
.billete__formulario button:active,
.billete__formulario input[type="submit"]:active {
  transform: translateY(1px);
}

.boton:focus-visible,
.billete__formulario button:focus-visible,
.billete__formulario input[type="submit"]:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

.boton:disabled,
.billete__formulario button:disabled {
  cursor: progress;
  opacity: 0.65;
}

.boton svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

.aviso-muestra {
  padding: 12px 14px;
  border: 1px solid var(--error);
  border-radius: 10px;
  color: var(--error);
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Barra fija del móvil: lleva al billete
   -------------------------------------------------------------------------- */

.cta-fija {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  max-width: 30rem;
  margin-inline: auto;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 3.5rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--amarillo-borde);
  border-radius: 14px;
  background: var(--amarillo);
  color: var(--tinta);
  font-family: var(--f-rotulo);
  font-weight: 800;
  font-size: 1.1875rem;
  line-height: 1.1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.45s var(--salida), opacity 0.3s var(--salida);
}

.cta-fija svg {
  width: 1.125rem;
  height: 1.125rem;
}

.cta-fija:focus-visible {
  outline: 2px solid var(--hueso);
  outline-offset: 3px;
}

.cta-fija[data-oculta] {
  transform: translateY(calc(100% + 28px));
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.pie {
  width: min(100% - 2 * var(--gutter), var(--ancho));
  margin: auto auto 0;
  padding-block: 28px 36px;
  border-top: 1px solid var(--pano-linea);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  color: var(--salvia);
  font-size: 0.875rem;
  line-height: 1.45;
}

.pie__marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.pie .monograma {
  width: 1.625rem;
  height: 1.625rem;
  font-size: 0.6875rem;
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.pie__legal a {
  color: var(--hueso);
}

/* --------------------------------------------------------------------------
   Página de la guía
   -------------------------------------------------------------------------- */

.escena {
  width: min(100% - 2 * var(--gutter), var(--ancho));
  margin-inline: auto;
  display: grid;
  row-gap: 28px;
  padding-block: 6px 56px;
}

.incluye {
  padding-top: 4px;
}

@media (max-width: 63.99em) {
  .escena > .panel,
  .escena-gracias > .panel {
    margin-inline: calc(var(--gutter) * -1);
  }
}

@media (min-width: 40em) and (max-width: 63.99em) {
  .escena > .panel,
  .escena-gracias > .panel {
    margin-inline: 0;
    border-radius: 6px;
    padding: 8px;
  }

  .panel__rejilla {
    padding: 16px 16px 18px;
  }

  .billete {
    max-width: 34rem;
  }
}

@media (min-width: 64em) {
  .cta-fija {
    display: none;
  }

  .rail {
    padding-block: 22px;
  }

  .escena {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "titular panel"
      "billete panel"
      "billete incluye";
    column-gap: clamp(40px, 5.5vw, 88px);
    row-gap: 28px;
    align-items: start;
    padding-block: 12px 88px;
  }

  .escena > .titular {
    grid-area: titular;
  }

  .escena > .panel {
    grid-area: panel;
    border-radius: 6px;
    padding: 10px;
  }

  /* La leyenda va bajo el panel, en la misma columna */
  .escena > .incluye {
    grid-area: incluye;
    padding-top: 0;
  }

  .leyenda li {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .escena > .billete {
    grid-area: billete;
  }

  .panel {
    --g: 3px;
  }

  .panel__rejilla {
    row-gap: 14px;
    padding: 16px 18px 18px;
  }

  .panel__filas {
    row-gap: 10px;
  }

  .fila {
    row-gap: 4px;
  }

  .fila__uso {
    font-size: 0.875rem;
  }

  .billete__cuerpo {
    padding: 26px 28px 28px;
  }

  .billete__talon {
    padding: 18px 28px 22px;
  }
}

/* --------------------------------------------------------------------------
   Página de gracias
   -------------------------------------------------------------------------- */

.escena-gracias {
  width: min(100% - 2 * var(--gutter), var(--ancho));
  margin-inline: auto;
  display: grid;
  row-gap: 26px;
  padding-block: 6px 56px;
}

.gracias__texto {
  display: grid;
  gap: 18px;
}

.billete .subtitulo {
  color: var(--tinta);
}

.billete__texto {
  margin-top: 12px;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--tinta);
  text-wrap: pretty;
}

.billete__accion {
  margin-top: 20px;
}

.kit__precio {
  margin-top: 14px;
  font-family: var(--f-rotulo);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
}

.kit__lista {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.kit__lista li {
  position: relative;
  padding-left: 1.25rem;
  line-height: 1.45;
}

.kit__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 1px;
  background: var(--pano);
}

@media (min-width: 64em) {
  .escena-gracias {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
      "panel  billete"
      "texto  billete"
      ".      kit";
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(40px, 5.5vw, 88px);
    row-gap: 34px;
    align-items: start;
    padding-block: 28px 96px;
  }

  .escena-gracias > .panel {
    grid-area: panel;
    border-radius: 6px;
    padding: 10px;
  }

  .escena-gracias > .gracias__texto {
    grid-area: texto;
  }

  .escena-gracias > .billete {
    grid-area: billete;
  }

  .escena-gracias > .kit {
    grid-area: kit;
  }
}

/* --------------------------------------------------------------------------
   Páginas legales: lectura
   -------------------------------------------------------------------------- */

a.marca {
  text-decoration: none;
}

.documento {
  width: min(100% - 2 * var(--gutter), 46rem);
  margin-inline: auto;
  padding-block: 10px 72px;
  overflow-wrap: break-word;
}

.documento .titular {
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
}

.documento__fecha {
  margin-top: 12px;
  font-size: 0.9375rem;
  color: var(--salvia);
}

.documento__intro {
  margin-top: 20px;
  max-width: 40rem;
  font-size: 1.125rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Resumen en la cara del panel: etiqueta y dato, como un horario */
.resumen {
  margin-top: 28px;
  border-radius: 6px;
}

.resumen__titulo {
  font-family: var(--f-rotulo);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--niebla);
}

/* El filete va encima de cada fila, también de la primera, que cierra el título */
.resumen__fila {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 4px 16px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-top: 1px solid var(--grafito-borde);
}

.resumen__fila:last-child {
  padding-bottom: 0;
}

.resumen dt {
  padding-top: 3px;
  font-family: var(--f-rotulo);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--niebla);
}

.resumen dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--hueso);
  text-wrap: pretty;
}

.documento__texto {
  max-width: 40rem;
  margin-top: 44px;
}

.documento__texto h2 {
  margin-top: 40px;
  margin-bottom: 10px;
  font-family: var(--f-rotulo);
  font-weight: 760;
  font-size: 1.5rem;
  line-height: 1.12;
  text-wrap: balance;
}

.documento__texto h2:first-child {
  margin-top: 0;
}

.documento__texto p,
.documento__texto li {
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.documento__texto p + p,
.documento__texto ul + p,
.documento__texto p + ul {
  margin-top: 12px;
}

.documento__texto ul {
  display: grid;
  gap: 8px;
}

.documento__texto li {
  position: relative;
  padding-left: 1.25rem;
}

.documento__texto li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 1px;
  background: var(--amarillo);
}

.documento__volver {
  margin-top: 48px;
  font-family: var(--f-rotulo);
  font-weight: 760;
  font-size: 1.125rem;
}

.pie__legal a[aria-current="page"] {
  text-decoration-color: transparent;
  color: var(--salvia);
}

@media (max-width: 30em) {
  .resumen__fila {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Calculadora (index.html)
   Las preguntas van en un billete; el resultado, en un panel de estado.
   -------------------------------------------------------------------------- */

.calc,
.calc-guia {
  width: min(100% - 2 * var(--gutter), var(--ancho));
  margin-inline: auto;
  display: grid;
  row-gap: 28px;
}

.calc {
  padding-top: 6px;
}

.calc-guia {
  padding-block: 44px 56px;
}

.calc__entrada,
.calc__resultado,
.calc-guia__billete {
  display: grid;
  row-gap: 22px;
  align-content: start;
}

/* Ningún contenido ensancha la columna (evita desbordar a 320px) */
.calc > *,
.calc-guia > * {
  min-width: 0;
}

/* Billete de preguntas: una hora por toque, botones de tinta (el amarillo es para la guía) */
.preguntas__lista {
  margin-top: 4px;
}

.pregunta {
  display: grid;
  gap: 6px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.pregunta + .pregunta {
  border-top: 1px solid var(--cartulina-linea);
}

.pregunta__texto {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta);
  text-wrap: pretty;
}

.pregunta__pista {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--tinta-2);
}

.paso {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.paso__boton {
  appearance: none;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1.5px solid var(--tinta);
  border-radius: 12px;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s var(--salida), transform 0.2s var(--salida);
}

.paso__boton svg {
  width: 1.125rem;
  height: 1.125rem;
}

.paso__boton:hover {
  background: var(--cartulina-linea);
}

.paso__boton:active {
  transform: translateY(1px);
}

.paso__boton:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
}

.paso__boton:disabled {
  border-color: var(--cartulina-borde);
  color: var(--cartulina-borde);
  cursor: default;
  background: transparent;
  transform: none;
}

.paso__campo {
  appearance: textfield;
  -moz-appearance: textfield;
  width: 4.5rem;
  height: 3rem;
  padding: 0 0.5rem;
  border: 1px solid var(--cartulina-borde);
  border-radius: 12px;
  background: var(--cartulina-campo);
  color: var(--tinta);
  font-family: var(--f-rotulo);
  font-weight: 760;
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  caret-color: var(--tinta);
}

.paso__campo::-webkit-outer-spin-button,
.paso__campo::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.paso__campo:hover {
  border-color: var(--tinta-2);
}

.paso__campo:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
  border-color: var(--tinta);
  background: #fff;
}

.paso__unidad {
  font-size: 1.0625rem;
  color: var(--tinta-2);
}

/* Panel de resultado: etiqueta + 9 casillas por fila, cifras alineadas a la derecha */
.panel--resultado .panel__rejilla {
  --celda: min(calc((100cqi - 6.5rem - 9 * var(--g)) / 9), 2.6rem);
  row-gap: 12px;
}

.resultado__titulo {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--grafito-borde);
  font-family: var(--f-rotulo);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--niebla);
}

.resultado__fila {
  grid-template-columns: 6.5rem auto;
  justify-content: space-between;
}

.resultado__paletas {
  display: grid;
  grid-template-columns: repeat(9, var(--celda));
  column-gap: var(--g);
}

.resultado__paletas .paleta {
  width: var(--celda);
}

.desglose {
  width: 100%;
  margin-top: 6px;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--niebla);
  font-variant-numeric: tabular-nums;
}

.desglose th,
.desglose td {
  padding-top: 9px;
  padding-bottom: 9px;
  border-top: 1px solid var(--grafito-borde);
  text-align: right;
  font-weight: 400;
}

.desglose th:first-child {
  text-align: left;
  color: var(--hueso);
}

.desglose thead th {
  padding-top: 0;
  border-top: 0;
  font-family: var(--f-rotulo);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--niebla);
}

.desglose td:last-child {
  color: var(--hueso);
}

.desglose a {
  color: var(--hueso);
}

.resultado__metodo {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--niebla);
  text-wrap: pretty;
}

/* Fuentes: la leyenda del inspector, con el porcentaje en casillas */
.fuentes__lista {
  margin-top: 14px;
  border-bottom: 1px solid var(--pano-linea);
}

.fuentes__lista li {
  display: grid;
  grid-template-columns: 6rem 1fr;
  align-items: start;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
  border-top: 1px solid var(--pano-linea);
  scroll-margin-top: 16px;
}

.fuentes__signo {
  --celda: 1.375rem;
  display: flex;
  gap: 2px;
}

.fuentes__signo .paleta {
  width: var(--celda);
  color: var(--amarillo);
}

.fuentes__dato {
  font-size: 1.0625rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.fuentes__cita {
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--salvia);
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.fuentes__cita a {
  color: var(--hueso);
}

.fuentes__nota {
  margin-top: 16px;
  max-width: 40rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--salvia);
  text-wrap: pretty;
}

.fuentes__nota + .fuentes__nota {
  margin-top: 8px;
}

/* Tira fija del móvil: material de panel, sin amarillo; se retira al ver el panel entero */
.resultado-fijo {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 30;
  display: block;
  max-width: 30rem;
  margin-inline: auto;
  padding: 4px;
  border-radius: 6px;
  background: var(--carcasa);
  color: var(--hueso);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.45s var(--salida), opacity 0.3s var(--salida);
}

.resultado-fijo[data-oculta] {
  transform: translateY(calc(100% + 28px));
  opacity: 0;
  pointer-events: none;
}

.resultado-fijo:focus-visible {
  outline: 2px solid var(--hueso);
  outline-offset: 3px;
}

.resultado-fijo__cara {
  --g: 2px;
  container-type: inline-size;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
  padding: 8px 10px;
  border-radius: 2px;
  background: var(--grafito);
}

.resultado-fijo__paletas {
  --celda: min(calc((100cqi - 6.5rem - 8 * var(--g)) / 9), 1.375rem);
  display: grid;
  grid-template-columns: repeat(9, var(--celda));
  column-gap: var(--g);
  justify-content: end;
}

.resultado-fijo__paletas .paleta {
  width: var(--celda);
}

@media (min-width: 64em) {
  .resultado-fijo {
    display: none;
  }
}

@media (max-width: 63.99em) {
  .calc__resultado > .panel {
    margin-inline: calc(var(--gutter) * -1);
  }
}

@media (min-width: 40em) and (max-width: 63.99em) {
  .calc__resultado > .panel {
    margin-inline: 0;
    border-radius: 6px;
    padding: 8px;
  }

  .calc-guia__billete .billete,
  .calc__entrada .billete {
    max-width: 34rem;
  }
}

@media (max-width: 30em) {
  .fuentes__lista li {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (min-width: 64em) {
  .calc,
  .calc-guia {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 5.5vw, 88px);
    align-items: start;
  }

  .calc {
    padding-top: 12px;
  }

  .calc-guia {
    padding-block: 64px 88px;
  }

  .calc__resultado {
    position: sticky;
    top: 24px;
  }

  .calc__resultado > .panel {
    border-radius: 6px;
    padding: 10px;
  }

  .calc-guia__billete {
    grid-column: 2;
    grid-row: 1;
  }

  .calc-guia > .fuentes {
    grid-column: 1;
    grid-row: 1;
  }
}

/* --------------------------------------------------------------------------
   Movimiento reducido
   -------------------------------------------------------------------------- */

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