/* ============================================================================
   SimulEV — sistema de diseño web
   ============================================================================

   DIRECCIÓN: instrumento de precisión. La referencia no es una landing de
   producto, es un panel de herramienta: Linear, Vercel, Raycast. En claro.

   Las cinco reglas que lo definen, y que hay que respetar al añadir cualquier
   cosa nueva (la versión anterior las incumplía todas):

   1. CERO DEGRADADOS EN LOS CONTROLES. Ni en botones, ni en barras, ni en
      tarjetas: un degradado verde→lima en un botón es la firma de las
      plantillas generadas a máquina.
      Matizado el 13/09/2026: los FONDOS DE AMBIENTE (la rejilla del hero, el
      resplandor) y las TRAMAS DE DATOS (la barra del folleto) sí los usan,
      porque no son un control disfrazado — uno es atmósfera y la otra codifica
      información. La prohibición es para lo que se pulsa y lo que se lee.

   2. CERO SOMBRAS. La separación se hace con una línea de 1px. Las sombras
      solo aparecen en lo que flota de verdad sobre la página: diálogos y
      avisos. Nada más.

   3. EL VERDE ES UN DATO, NO UNA DECORACIÓN. Aparece cuando significa energía
      o algo positivo que el usuario ha conseguido. Un botón no es un dato.

   4. ESCALA CERRADA. Seis tamaños de texto y ocho de espaciado. Si algo pide
      un valor que no está aquí, el problema es el diseño, no la escala. Antes
      había diez tamaños entre 0,79 y 0,95 rem, que no es una escala sino diez
      decisiones sueltas.

   5. NADA DE style="" EN EL JS. Si un bloque necesita una separación concreta,
      existe una clase. Un atributo de estilo incrustado es la confesión de que
      al sistema le falta una pieza.

   ============================================================================ */

/* ---------------------------------------------------------------- Tokens -- */

:root {
  /* Superficies. En claro el fondo es el nivel BAJO y las tarjetas suben a
     blanco; "inset" es lo que se hunde (pistas de medidores, celdas vacías). */
  --bg: #F6F8F7;
  --surface: #FFFFFF;
  --inset: #EEF2F0;
  --raised: #FFFFFF;

  /* Líneas. La hairline hace casi todo el trabajo estructural. */
  --line: #E2E8E5;
  --line-strong: #CBD5D0;

  /* Texto, en tres niveles y ni uno más. */
  --fg: #0A1712;
  --fg-2: #56655E;
  --fg-3: #84948D;

  /* Datos. Cada color significa una cosa concreta. */
  --data-energy: #0A7A3E;      /* verde legible sobre claro (5,4:1) */
  --data-energy-fill: #06C167; /* el verde de marca, solo en áreas grandes */
  --data-energy-soft: #DFF3E8;
  --data-money: #8A5D0F;       /* dorado legible; el de marca es muy claro */
  --data-money-fill: #B07A16;
  --data-money-soft: #F7EEDC;
  --data-warn: #B3261E;
  --data-warn-soft: #FBE9E7;
  --data-neutral: #A8B5B0;     /* series sin significado propio */

  /* Tipografía */
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-label: .6875rem;  /* 11 — versalitas de etiqueta */
  --fs-xs: .75rem;       /* 12 — notas al pie */
  --fs-sm: .8125rem;     /* 13 — texto secundario */
  --fs-md: .9375rem;     /* 15 — texto base */
  --fs-lg: 1.125rem;     /* 18 — subtítulos */
  --fs-xl: 1.5rem;       /* 24 — títulos de sección */

  /* Cifras: su propia escala, porque son el contenido y no el texto. */
  --fs-num-sm: 1.0625rem;  /* 17 */
  --fs-num-md: 1.375rem;   /* 22 */
  --fs-num-lg: 2rem;       /* 32 */
  --fs-num-xl: 2.75rem;    /* 44 */

  /* Espaciado, base 4. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* Radios pequeños: un instrumento no es blando. */
  --r1: 4px; --r2: 6px; --r3: 10px;

  /* Movimiento */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --fast: 120ms;
  --slow: 480ms;

  --sidebar: 216px;
  --maxw: 1240px;

  color-scheme: light;
}

/* Oscuro DISEÑADO, no un intercambio de variables: las superficies se elevan
   con luz (el fondo es el nivel más oscuro y las tarjetas suben), los verdes
   suben de luminosidad porque sobre negro el #0A7A3E desaparece, y las líneas
   bajan de contraste porque sobre oscuro una hairline clara grita. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0A0F0E;
    --surface: #111917;
    --inset: #0D1413;
    --raised: #16201D;

    --line: #1E2926;
    --line-strong: #2C3A36;

    --fg: #E6EDEA;
    --fg-2: #94A69F;
    --fg-3: #6B7C76;

    --data-energy: #22E39A;
    --data-energy-fill: #22E39A;
    --data-energy-soft: #0E2B21;
    --data-money: #F3C563;
    --data-money-fill: #E0B14C;
    --data-money-soft: #2A2312;
    --data-warn: #FF6B6B;
    --data-warn-soft: #2C1514;
    --data-neutral: #3D4B46;

    color-scheme: dark;
  }
}

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

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: 1.5;
  font-feature-settings: "cv05" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
p { margin: 0; }
a { color: var(--data-energy); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Cifras: siempre monoespaciadas y tabulares, para que no bailen al cambiar. */
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "zero" 1;
  letter-spacing: -.02em;
}

/* Etiqueta de instrumento: pequeña, en versalitas, muy espaciada. Es lo que
   hace que una cifra se lea como una medida y no como un número suelto. */
.label {
  display: block;   /* casi siempre va en <span>: sin esto ignora los márgenes */
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-3);
  line-height: 1.4;
}

.dim { color: var(--fg-2); }
.dimmer { color: var(--fg-3); }
.fs-xs { font-size: var(--fs-xs); }
.fs-sm { font-size: var(--fs-sm); }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--data-energy);
  outline-offset: 2px;
  border-radius: var(--r1);
}

/* Iconos: 16px, trazo 1.5, heredan el color del texto. Sin emoji. */
.ico { width: 16px; height: 16px; flex: none; stroke-width: 1.5; display: block; }
.ico-lg { width: 20px; height: 20px; }

/* ----------------------------------------------------------------- Marca -- */

.brand { display: inline-flex; align-items: center; gap: var(--s2); color: var(--fg); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand .mark { width: 30px; height: 30px; flex: none; display: block; }
.brand .mark text { font-family: var(--sans); }
/* El verde de marca va como atributo en el SVG y el tema se aplica desde aquí,
   que gana al atributo. Si algo fallara, la marca sale en su verde de siempre. */
.brand .mark .ink { fill: var(--fg); }
.brand .mark .s0 { stop-color: var(--data-energy-fill); }
.brand .mark .s1 { stop-color: #7DDB1E; }
@media (prefers-color-scheme: dark) { .brand .mark .s1 { stop-color: #A8F25E; } }
.brand .wordmark { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.brand .wordmark b { font-weight: 600; color: var(--data-energy); }

/* --------------------------------------------------------------- Botones -- */
/* Sólidos, sin degradado. El primario usa la tinta, no el verde: el verde es
   un dato. Solo el botón que representa energía o confirmación lo lleva. */

.btn {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 0 var(--s4);
  height: 34px;
  border: 1px solid transparent;
  border-radius: var(--r2);
  background: var(--fg);
  color: var(--bg);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn:hover { background: var(--fg-2); text-decoration: none; }
.btn:active { transform: translateY(.5px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn .ico { stroke: currentColor; }

.btn--secondary { background: var(--surface); color: var(--fg); border-color: var(--line-strong); }
.btn--secondary:hover { background: var(--inset); border-color: var(--line-strong); }

.btn--ghost { background: transparent; color: var(--fg-2); }
.btn--ghost:hover { background: var(--inset); color: var(--fg); }

.btn--danger { background: transparent; color: var(--data-warn); border-color: color-mix(in srgb, var(--data-warn) 30%, transparent); }
.btn--danger:hover { background: var(--data-warn-soft); }

.btn--lg { height: 42px; font-size: var(--fs-md); padding: 0 var(--s5); }
.btn--sm { height: 28px; font-size: var(--fs-xs); padding: 0 var(--s3); }
.btn--block { width: 100%; }
.btn--icon { width: 28px; padding: 0; }

/* --------------------------------------------------------------- Campos -- */

.field { display: block; }
.field + .field { margin-top: var(--s4); }
.field > .field-label { display: block; font-size: var(--fs-sm); font-weight: 500; margin-bottom: var(--s1); }
.field > .field-hint { display: block; font-size: var(--fs-xs); color: var(--fg-2); margin-bottom: var(--s2); line-height: 1.45; }
.field-optional { font-weight: 400; color: var(--fg-3); font-size: var(--fs-xs); margin-left: var(--s1); }

input[type="text"], input[type="number"], input[type="date"], select, textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-md);
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r2);
  padding: 0 var(--s3);
  height: 36px;
  appearance: none;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
input[type="number"], input[type="date"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* Fuera las flechitas de incremento. Hay que decirlo dos veces porque cada
   motor las pinta a su manera: en Firefox el `appearance: none` de arriba NO
   las quita —solo `textfield` lo hace—, y en Blink/WebKit viven en un
   pseudoelemento propio al que hay que ir a buscar. Sobran en los dos: el
   campo es para teclear kilómetros y euros, no para subirlos de uno en uno,
   y el sufijo de unidad se les come el sitio. */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input:hover, select:hover { border-color: var(--fg-3); }
/* El deslizador de temperatura se queda fuera: no tiene borde donde dibujar
   el anillo, y pintarlo alrededor de toda la pista no señalaría nada. Su foco
   se ve en el tirador. */
input:not([type="range"]):focus, select:focus {
  outline: none;
  border-color: var(--data-energy);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--data-energy) 14%, transparent);
}
select {
  /* Chevron dibujado, no dos triángulos girados. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2384948D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s3) center;
  padding-right: var(--s6);
  cursor: pointer;
}
select:disabled { opacity: .45; cursor: not-allowed; }

/* Sufijo de unidad dentro del campo. */
.input-unit { position: relative; }
.input-unit input { padding-right: var(--s7); }
.input-unit .unit {
  position: absolute; right: var(--s3); top: 50%; transform: translateY(-50%);
  font-size: var(--fs-xs); color: var(--fg-3); pointer-events: none;
  font-family: var(--mono);
}

/* Opciones tipo radio grande */
.options { display: grid; gap: var(--s2); }
.option { position: relative; display: block; }
.option input { position: absolute; opacity: 0; width: 0; height: 0; }
.option > span {
  display: block; cursor: pointer;
  padding: var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r2);
  background: var(--surface);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.option > span b { display: block; font-weight: 500; font-size: var(--fs-sm); }
.option > span i { display: block; font-style: normal; font-size: var(--fs-xs); color: var(--fg-2); margin-top: 2px; line-height: 1.4; }
.option:hover > span { border-color: var(--fg-3); }
.option input:checked + span { border-color: var(--data-energy); background: var(--data-energy-soft); }
.option input:focus-visible + span { outline: 2px solid var(--data-energy); outline-offset: 2px; }

/* Interruptor */
.switch { display: block; position: relative; flex: none; width: 38px; height: 22px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--line-strong);
  transition: background var(--fast) var(--ease);
  pointer-events: none;
}
.switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--surface);
  transition: transform var(--fast) var(--ease);
}
.switch input:checked ~ .track { background: var(--data-energy); }
.switch input:checked ~ .track::after { transform: translateX(16px); }
.switch input:focus-visible ~ .track { outline: 2px solid var(--data-energy); outline-offset: 2px; }

.toggle-row { display: flex; align-items: flex-start; gap: var(--s4); padding: var(--s3) 0; }
.toggle-row + .toggle-row { border-top: 1px solid var(--line); }
.toggle-row .t-text { flex: 1; min-width: 0; }
.toggle-row .t-text b { display: block; font-weight: 500; font-size: var(--fs-sm); }
.toggle-row .t-text span { display: block; font-size: var(--fs-xs); color: var(--fg-2); margin-top: 2px; line-height: 1.45; }

/* -------------------------------------------------- Preguntas y condiciones -- */
/*
 * Las piezas de "ponme a prueba". Antes eran cuatro interruptores con nombre
 * de casilla ("Invierno", "Autopista sostenida"); ahora son preguntas sobre la
 * vida de quien las contesta, y cada una trae el control que de verdad le
 * corresponde: un reparto que suma 100, una temperatura continua, un sí o no.
 *
 * Cada pregunta lleva una (i) que despliega POR QUÉ se pregunta. Va plegada
 * porque quien ya lo sabe no tiene que leerla, y desplegable porque quien
 * duda del número tiene derecho a discutirlo sin salir de la pantalla.
 */

.q { display: block; padding: var(--s5) 0; }
.q:first-child { padding-top: 0; }
.q:last-child { padding-bottom: 0; }
.q + .q { border-top: 1px solid var(--line); }

.q-head { display: flex; align-items: center; gap: var(--s2); }
.q-title { display: block; font-size: var(--fs-sm); font-weight: 500; }
.q-info {
  flex: none;
  display: grid; place-items: center;
  width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--fg-3);
  cursor: pointer;
  transition: color var(--fast) var(--ease);
}
.q-info:hover { color: var(--fg); }
.q-info[aria-expanded="true"] { color: var(--data-energy); }
.q-info .ico { width: 14px; height: 14px; }
.q-info:focus-visible { outline: 2px solid var(--data-energy); outline-offset: 1px; }

.q-hint { font-size: var(--fs-xs); color: var(--fg-2); line-height: 1.55; margin-top: var(--s2); max-width: 64ch; }
.q-hint[hidden] { display: none; }

.q-body { margin-top: var(--s3); }
.q-body .field + .field { margin-top: 0; }

/* Sí/no con las dos respuestas a la vista: un interruptor suelto obliga a
   deducir qué significa que esté apagado. */
.q-switch { display: flex; align-items: center; gap: var(--s3); }
.sw-side { display: block; font-size: var(--fs-sm); color: var(--fg-3); }
.sw-side--on { color: var(--fg); font-weight: 500; }

/* ------------------------------------------------- Reparto de conducción -- */
/*
 * Tres franjas que SUMAN 100 y dos cortes que las reparten. No son tres
 * campos de porcentaje porque con tres campos se puede escribir un reparto
 * imposible; aquí mover un corte reparte solo.
 *
 * La geometría (--a y --b) la escribe el JS: es la única cosa calculada de
 * toda la hoja, y por eso entra por variables y no por un style= suelto.
 */
/* Los valores de partida no son decorativos: si el JS no llegara a pintar,
   sin ellos calc(var(--a) * 1%) sería inválido y las tres franjas
   desaparecerían en vez de enseñar el reparto de referencia. */
.mix { display: block; --a: 30; --b: 60; }
.mix-track {
  position: relative;
  height: 60px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r2);
  background: var(--surface);
  touch-action: none;
}
.mix-seg {
  position: absolute; top: 0; bottom: 0;
  display: grid; place-items: center;
  color: var(--fg-3);
  overflow: hidden;
}
.mix-seg--city { left: 0; width: calc(var(--a) * 1%); }
.mix-seg--road {
  left: calc(var(--a) * 1%);
  width: calc((var(--b) - var(--a)) * 1%);
  border-left: 1px dashed var(--line-strong);
}
.mix-seg--hw {
  left: calc(var(--b) * 1%); right: 0;
  border-left: 1px dashed var(--line-strong);
}
.mix-handle {
  position: absolute; top: 50%;
  display: grid; place-items: center;
  width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--fg); color: var(--bg);
  cursor: ew-resize;
  touch-action: none;
}
.mix-handle--a { left: calc(var(--a) * 1%); transform: translate(-50%, -50%); }
.mix-handle--b { left: calc(var(--b) * 1%); transform: translate(-50%, -50%); }
.mix-handle .ico { width: 14px; height: 14px; }
.mix-handle:focus-visible { outline: 2px solid var(--data-energy); outline-offset: 2px; }

.mix-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: var(--s3); text-align: center; }
.mix-col { display: block; min-width: 0; }
.mix-col b { display: block; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--fs-num-sm); font-weight: 500; }
.mix-col span { display: block; font-size: var(--fs-xs); color: var(--fg-2); margin-top: 1px; line-height: 1.3; }

/* ---------------------------------------------------------- Temperatura -- */
/*
 * La pista SÍ lleva degradado, y no contradice la regla 1: no es un control
 * disfrazado de adorno sino una escala: el color ES el dato, igual que en un
 * termómetro. La burbuja sigue al tirador porque en un rango de 50 grados
 * "un poco a la izquierda" no es una respuesta.
 */
.temp { display: block; position: relative; padding-top: var(--s6); --p: 80; }
.temp-bubble {
  position: absolute; top: 0;
  left: calc(12px + (100% - 24px) * var(--p) / 100);
  transform: translateX(-50%);
  display: block;
  padding: 2px var(--s2);
  border-radius: var(--r1);
  background: var(--fg); color: var(--bg);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  white-space: nowrap;
  pointer-events: none;
}
.temp-range {
  display: block; width: 100%; height: 24px;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.temp-range:focus { outline: none; }
.temp-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, #4C2A86 0%, #2E6BD4 22%, #6E8F86 48%, #E3B23C 76%, #C0392B 100%);
}
.temp-range::-moz-range-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, #4C2A86 0%, #2E6BD4 22%, #6E8F86 48%, #E3B23C 76%, #C0392B 100%);
}
.temp-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -9px;
  border-radius: 50%;
  background: var(--fg);
  border: 3px solid var(--surface);
}
.temp-range::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--fg);
  border: 3px solid var(--surface);
}
.temp-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--data-energy); outline-offset: 2px; }
.temp-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--data-energy); outline-offset: 2px; }
.temp-scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--fs-label); color: var(--fg-3); margin-top: var(--s1); }

/* ------------------------------------------------------------ Estructura -- */
/* La rejilla de hairlines: el contenedor pinta la línea y las celdas tapan con
   su fondo, dejando exactamente 1px entre ellas. Sin bordes dobles, sin
   colapsos, y da ese aire de hoja de instrumentos. */

.sheet {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  overflow: hidden;
}
.cell { background: var(--surface); padding: var(--s4); min-width: 0; }
.cell--inset { background: var(--inset); }
/* El bloque de honestidad ocupa el ancho entero: es el argumento, no una cifra
   más entre otras. */
.cell--honesty { grid-column: 1 / -1; }
/* sheet--2 = matriz 2x2 (cuatro cifras juntas); sheet--1 = una fila que se
   reparte el ancho. Las dos colapsan a una columna en pantalla estrecha. */
.sheet--2 { grid-template-columns: 1fr; }
.sheet--1 { grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .sheet--2 { grid-template-columns: 1fr 1fr; }
  .sheet--1 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
}
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}
.panel-body { padding: var(--s4); }
.panel-body--flush { padding: 0; }

/* La banda con LA respuesta de la pantalla. Es la misma pieza que .test-head
   —franja hundida de borde a borde en lo alto del panel— y por eso le da peso
   sin inventar nada nuevo.
   El fondo es GRIS a propósito. Un fondo rojo cuando la autonomía baja
   convertiría un dato en una regañina: que el coche gaste más a −5 °C, con el
   maletero lleno y por autopista no es un fallo de nadie, es física. El color
   se reserva para la cifra, y solo cuando de verdad significa algo. */
.result-hero {
  padding: var(--s5);
  background: var(--inset);
  border-bottom: 1px solid var(--line);
}

/* Las dos franjas hundidas van en lo alto de un panel: sin esto, su esquina
   cuadrada asoma por fuera de la curva del borde. */
.test-head, .result-hero { border-radius: calc(var(--r3) - 1px) calc(var(--r3) - 1px) 0 0; }

/* ------------------------------------------------- Cabecera de prueba -- */
/*
 * Las tres pruebas del laboratorio usaban el mismo recuadro y titulaban con
 * .label, el estilo MÁS CALLADO del sistema — el mismo que una etiqueta de
 * campo. Una pared de cajas iguales en la que no se distinguía cuál era cuál.
 *
 * Aquí hubo una numeración 01/02/03. Se retiró (David, 13/09/2026) y con
 * razón: NUMERAR SIGNIFICA SECUENCIA, y estas tres pruebas son independientes
 * — se hace la que interese, cuando interese. Numerarlas inventaba un orden
 * que no existe. Los números sirven para pasos de un flujo; para herramientas
 * que son pares, lo que distingue es el ICONO: se reconoce antes de leer el
 * título y no implica que una vaya antes que otra.
 */
.test-head {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--inset);
}
.test-ico {
  flex: none;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--line-strong); border-radius: var(--r2);
  background: var(--surface);
  color: var(--data-energy);
}
.test-head .test-text { min-width: 0; }
.test-head h2 { font-size: var(--fs-lg); color: var(--fg); }
.test-head p { font-size: var(--fs-sm); color: var(--fg-2); margin-top: 2px; }

.stack > * + * { margin-top: var(--s4); }
.stack-sm > * + * { margin-top: var(--s2); }
.stack-lg > * + * { margin-top: var(--s5); }
.row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.row--end { justify-content: flex-end; }
.row--between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }

/* ------------------------------------------------------------- Métricas -- */

.stat { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.stat .stat-value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--fs-num-md); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; }
.stat .stat-value--sm { font-size: var(--fs-num-sm); }
.stat .stat-value--lg { font-size: var(--fs-num-lg); }
.stat .stat-value--xl { font-size: var(--fs-num-xl); }
/* Cuando el valor es una frase y no una cifra deja de ser monoespaciado: el
   mono está para alinear dígitos, no para maquetar texto. */
.stat .stat-value--text { font-family: var(--sans); font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.02em; }
.stat .stat-note { font-size: var(--fs-xs); color: var(--fg-2); line-height: 1.45; }
.stat--money .stat-value { color: var(--data-money); }
.stat--energy .stat-value { color: var(--data-energy); }
.stat--warn .stat-value { color: var(--data-warn); }
/* El % de una cifra grande baja de tamaño y de peso: el dato es el número, el
   símbolo solo lo cualifica. */
.stat-value .unit-suffix { font-size: .45em; color: var(--fg-3); margin-left: 2px; }

.warn-text { color: var(--data-warn); }
.ok-text { color: var(--data-energy); }

/* Fila del plan de uso: etiqueta elástica, km y frecuencia de ancho fijo. */
.plan-row { display: grid; grid-template-columns: 1fr; gap: var(--s2); align-items: center; }
.plan-row + .plan-row { margin-top: var(--s2); }
.plan-row .btn--icon { justify-self: start; }
@media (min-width: 620px) {
  .plan-row { grid-template-columns: 1fr 118px 132px 28px; }
  .plan-row .btn--icon { justify-self: center; }
}

.price-grid { display: grid; gap: var(--s3); }
@media (min-width: 620px) { .price-grid { grid-template-columns: repeat(3, 1fr); } }
.price-grid .field + .field { margin-top: 0; }

.tag {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-size: var(--fs-xs); padding: 2px var(--s2);
  border: 1px solid var(--line); border-radius: var(--r1);
  color: var(--fg-2); background: var(--surface);
}
.tag--energy { color: var(--data-energy); border-color: color-mix(in srgb, var(--data-energy) 30%, transparent); background: var(--data-energy-soft); }
.tag--warn { color: var(--data-warn); border-color: color-mix(in srgb, var(--data-warn) 30%, transparent); background: var(--data-warn-soft); }

/* ------------------------------------------------------- Medidor lineal -- */
/* Una pista continua con marcas de referencia. No diez bloques: los bloques
   sugieren una precisión que una estimación no tiene, y el ojo los cuenta en
   vez de leer la posición. */

.meter { display: block; }
.meter-track {
  position: relative;
  height: 8px;
  background: var(--inset);
  border-radius: 999px;
  overflow: hidden;
}
.meter-fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--data-energy-fill);
  border-radius: 999px;
  transition: width var(--slow) var(--ease), background var(--fast) var(--ease);
}
.meter-fill--low { background: var(--data-warn); }
.meter-ticks {
  position: relative;
  height: 12px;
  margin-top: var(--s1);
}
.meter-tick { position: absolute; top: 0; width: 1px; height: 4px; background: var(--line-strong); }
.meter-scale { display: flex; justify-content: space-between; font-size: var(--fs-label); color: var(--fg-3); font-family: var(--mono); margin-top: -2px; }


/* Folleto contra realidad. La barra nuestra va en verde (es el dato) y la del
   folleto en neutro con trama (es una afirmación de otro, no una medida
   nuestra). A la misma escala o la comparación no significaría nada. */
.rc { display: block; }
.rc-row { display: flex; align-items: center; gap: var(--s3); }
.rc-row + .rc-row { margin-top: var(--s2); }
.rc-label {
  display: block; flex: none; width: 76px;
  font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-3);
}
.rc-bar { display: block; flex: 1; height: 10px; background: var(--inset); border-radius: var(--r1); overflow: hidden; min-width: 0; }
.rc-fill { display: block; height: 100%; border-radius: var(--r1); transition: width var(--slow) var(--ease); }
.rc-fill--real { background: var(--data-energy-fill); }
.rc-fill--wltp {
  background: repeating-linear-gradient(
    -45deg, var(--data-neutral) 0 3px, transparent 3px 6px);
  border: 1px solid var(--data-neutral);
}
.rc-num { display: block; flex: none; width: 72px; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--fg-2); }
.rc-num--real { color: var(--fg); font-weight: 500; }
.rc-note { font-size: var(--fs-xs); color: var(--fg-2); margin-top: var(--s3); line-height: 1.5; }
.rc-note b { color: var(--fg); font-weight: 500; }

/* Condiciones duras: una tabla pequeña de "y si se pone feo". */
.harsh { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; }
@media (min-width: 520px) { .harsh { grid-template-columns: repeat(3, 1fr); } }
.harsh-cell { background: var(--surface); padding: var(--s3); }
.harsh-cell .harsh-label { display: block; font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.harsh-cell .harsh-value { display: block; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--fs-num-sm); margin-top: 2px; }
.harsh-cell .harsh-delta { display: block; font-size: var(--fs-xs); color: var(--data-warn); margin-top: 1px; }

/* Aquí estaban .series, .chart y .kmbars. Se retiraron con las gráficas que
   los usaban: dibujaban el mismo dato dos veces (ver charts.js). */

/* Alta de trayecto en línea, dentro del panel. En ancho es una fila; en
   estrecho se apila, que es donde el formulario se rellena de verdad. */
.addtrip { display: grid; gap: var(--s3); align-items: end; }
.addtrip .field + .field { margin-top: 0; }
@media (min-width: 760px) {
  .addtrip { grid-template-columns: 130px 1fr 165px auto; }
}

/* ----------------------------------------------------------------- Listas -- */

.rows { display: flex; flex-direction: column; }
.data-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  min-width: 0;
  background: none; border-left: 0; border-right: 0; border-bottom: 0;
  width: 100%; font: inherit; color: inherit; text-align: left;
}
.rows > .data-row:first-child { border-top: 0; }
.data-row--action { cursor: pointer; transition: background var(--fast) var(--ease); }
.data-row--action:hover { background: var(--inset); }
/* Título y subtítulo van en <span> porque el contenedor es un <button>, que
   solo admite contenido en línea: un <div> ahí dentro es marcado inválido. Al
   ser spans hay que forzarlos a bloque o salen pegados en la misma línea
   ("TrabajoHoy · 27 %"). */
.data-row .r-main { flex: 1; min-width: 0; display: block; }
.data-row .r-title { display: block; font-size: var(--fs-md); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.data-row .r-sub { display: block; font-size: var(--fs-xs); color: var(--fg-2); margin-top: 1px; }
.data-row .r-num { display: block; }
.data-row .r-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); text-align: right; white-space: nowrap; }
.data-row .r-num small { display: block; font-size: var(--fs-xs); color: var(--fg-2); font-weight: 400; }
.data-row .r-ico { color: var(--fg-3); flex: none; }
.data-row .chev { color: var(--fg-3); flex: none; }

.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--s7) var(--s5); color: var(--fg-2); gap: var(--s2);
}
.empty .empty-ico { color: var(--fg-3); margin-bottom: var(--s1); }
.empty b { color: var(--fg); font-size: var(--fs-md); font-weight: 600; }
.empty p { font-size: var(--fs-sm); max-width: 42ch; }

/* ------------------------------------------------------------- Aplicación -- */
/*
 * El panel usaba barra lateral fija. Se sustituyó por el mismo menú flotante
 * de la landing (David, 13/09/2026): una barra lateral se come 216 px de ancho
 * en una pantalla que ya es densa, y el menú flotante los devuelve al
 * contenido, que es lo que la persona vino a mirar.
 */

.main { min-width: 0; padding: var(--s5) var(--s4) var(--s8); }
.main-inner { max-width: var(--maxw); margin: 0 auto; }

.view-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s4);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--line);
}
.view-head h1 { font-size: var(--fs-xl); }
.view-head .view-sub { font-size: var(--fs-sm); color: var(--fg-2); margin-top: 2px; }

@media (min-width: 1000px) { .main { padding: var(--s6) var(--s5) var(--s8); } }

/* Condiciones a la izquierda, resultado a la derecha: se contesta y se ve al
   lado lo que le hace al coche, sin perder de vista ninguna de las dos
   mitades. La rejilla es la misma del panel (.dash), porque es el mismo
   reparto: lo que se manipula ocupa más que lo que se lee. */
.trip-verdict { border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s3); background: var(--inset); }
.trip-verdict-title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.02em; margin-top: 2px; }

/* La columna de resultados de "ponme a prueba": dos paneles apilados que
   viajan juntos como UNA celda de .dash. */
.stress-out { display: grid; gap: var(--s3); align-content: start; }

/* Rejilla del panel. Denso: lo importante cabe sin bajar. */
.dash { display: grid; gap: var(--s3); }
@media (min-width: 860px) {
  .dash { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .dash .full { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------- Diálogos -- */

dialog {
  border: 1px solid var(--line-strong);
  border-radius: var(--r3);
  padding: 0;
  background: var(--raised);
  color: var(--fg);
  box-shadow: 0 16px 48px -12px rgba(10, 23, 18, .25);
  width: min(520px, calc(100vw - var(--s6)));
  max-height: calc(100vh - var(--s7));
}
dialog::backdrop { background: rgba(10, 23, 18, .4); backdrop-filter: blur(2px); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4); border-bottom: 1px solid var(--line); }
.dlg-body { padding: var(--s4); overflow-y: auto; }
.dlg-foot { display: flex; gap: var(--s2); justify-content: flex-end; padding: var(--s4); border-top: 1px solid var(--line); }

.toast {
  position: fixed; left: 50%; bottom: var(--s5); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s2);
  background: var(--fg); color: var(--bg);
  padding: var(--s2) var(--s4); border-radius: var(--r2);
  font-size: var(--fs-sm); z-index: 60;
  box-shadow: 0 8px 24px -8px rgba(10, 23, 18, .4);
  max-width: calc(100vw - var(--s6));
  animation: toast-in 200ms var(--ease);
}
.toast[hidden] { display: none; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* --------------------------------------------------------------- Tablas -- */

.table-wrap { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
table.data th, table.data td { padding: var(--s2) 0; text-align: left; border-bottom: 1px solid var(--line); }
table.data tr:last-child th, table.data tr:last-child td { border-bottom: 0; }
table.data th { font-weight: 400; color: var(--fg-2); }
table.data td { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- Landing -- */

/* --------------------------------------------------- Cabecera flotante -- */
/*
 * El patrón es el de niba.es: la cabecera ocupa TODO el ancho, va fija y es
 * transparente, con pointer-events:none para no bloquear la página; solo sus
 * hijos vuelven a capturar el ratón. Por eso se lee como piezas sueltas
 * flotando sobre el contenido y no como una barra pegada arriba.
 *
 * Diferencia deliberada: ellos dejan el menú sin fondo, lo que funciona porque
 * su hero es una foto oscura. Aquí el contenido es claro y el texto del menú se
 * perdería al pasar por encima, así que el grupo lleva su propio fondo
 * translúcido con desenfoque. Eso además evita el JavaScript de "añadir fondo
 * al hacer scroll" que suele acompañar a este patrón: no hace falta.
 */
.site-head {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 50;
  pointer-events: none;
  padding: var(--s3) 0;
}
.site-head-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.site-head .brand,
.site-head .nav-pill,
.site-head .head-actions { pointer-events: auto; }

.nav-pill {
  display: none;
  align-items: center; gap: var(--s1);
  padding: var(--s1);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
}
.nav-pill a,
.nav-pill .nav-item {
  display: flex; align-items: center; gap: var(--s2);
  padding: 7px var(--s3);
  border: 0; border-radius: 999px;
  font: inherit;
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--fg-2); text-decoration: none;
  background: none; cursor: pointer; white-space: nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav-pill a:hover,
.nav-pill .nav-item:hover { background: var(--inset); color: var(--fg); text-decoration: none; }
/* La sección activa va rellena: en un menú de verdad hay que saber dónde estás.
   El de anclas de la landing no lo necesitaba porque no había "dónde". */
.nav-pill .nav-item[aria-current="page"] { background: var(--fg); color: var(--bg); }
.nav-pill .nav-item[aria-current="page"] .ico { color: currentColor; }
.nav-pill .nav-item .ico { color: var(--fg-3); }

/* En estrecho el menú se lleva el ancho y se desplaza en horizontal; el botón
   de acción se esconde porque su destino ya está en el propio menú. */
@media (max-width: 720px) {
  .nav-pill { display: flex; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .nav-pill::-webkit-scrollbar { display: none; }
  .site-head .head-actions { display: none; }
  .site-head-inner { gap: var(--s2); padding: 0 var(--s3); }
}
.head-actions { display: flex; align-items: center; gap: var(--s2); }
/* La marca también necesita fondo: pasa por encima del contenido igual que el
   menú. Se le da la misma píldora para que las tres piezas sean una familia. */
.site-head .brand {
  padding: var(--s1) var(--s3) var(--s1) var(--s2);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
}
/* El botón de acción es la píldora rellena, como el "Contratar" de niba. */
.btn--pill { border-radius: 999px; }

@media (min-width: 900px) { .nav-pill { display: flex; } }

/* El contenido arranca por debajo de la cabecera fija. */
body.has-floating-head { padding-top: 72px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5); }
.measure { max-width: 68ch; }

/* -------------------------------------------------- Fondo de ambiente -- */
/*
 * Rejilla técnica + resplandor, SOLO en el hero. Es la metáfora del brief
 * (instrumento de precisión, plano de ingeniería) y no una textura decorativa
 * repartida por la página: aparece una vez, se desvanece hacia el contenido y
 * no vuelve. Repetirla en cada sección la convertiría en papel pintado.
 *
 * Todo con CSS: cero imágenes que alojar, se adapta solo al tema y pesa nada.
 */
.hero-wrap { position: relative; isolation: isolate; }
.hero-wrap::before {
  content: "";
  position: absolute; inset: -72px 0 0; z-index: -1;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center top;
  /* La máscara es lo que evita que parezca una hoja de cuaderno: la rejilla
     solo existe arriba y se disuelve antes de llegar al contenido. */
  -webkit-mask-image: radial-gradient(120% 70% at 50% 0%, #000 25%, transparent 78%);
  mask-image: radial-gradient(120% 70% at 50% 0%, #000 25%, transparent 78%);
  opacity: .85;
}
.hero-wrap::after {
  content: "";
  position: absolute; inset: -72px 0 auto; height: 520px; z-index: -1;
  background: radial-gradient(52% 60% at 72% 8%,
    color-mix(in srgb, var(--data-energy-fill) 13%, transparent), transparent 70%);
  pointer-events: none;
}

/* ------------------------------------------------- Bandas de sección -- */
/* Dan ritmo al bajar sin añadir decoración. La banda OSCURA se usa UNA sola
   vez, en la sección de honestidad: una vez es énfasis, tres veces es un
   patrón y deja de significar nada. */
.band { padding: var(--s8) 0; }
.band--plain { background: var(--surface); }
.band--ink {
  background: #0A1712;
  color: #E6EDEA;
  --fg: #E6EDEA; --fg-2: #9BAEA6; --fg-3: #74857E;
  --surface: #12211C; --inset: #0E1A16; --line: #1E2E28; --line-strong: #2B3D36;
  --data-energy: #22E39A; --data-energy-fill: #22E39A; --data-energy-soft: #102B21;
  --data-neutral: #3D4B46; --data-warn: #FF8A80;
}
.band--ink h2, .band--ink .facts b { color: #E6EDEA; }

.hero { padding: var(--s7) 0 var(--s5); }
.hero h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); letter-spacing: -.035em; line-height: 1.08; }
.hero .hero-lead { font-size: var(--fs-lg); color: var(--fg-2); margin-top: var(--s4); max-width: 34ch; line-height: 1.45; }
.hero .hero-lead strong { color: var(--fg); font-weight: 500; }
.hero-grid { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: 1fr 420px; gap: var(--s7); }
  .hero { padding: var(--s8) 0 var(--s6); }
  .hero-form { position: sticky; top: 76px; }
}
.tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); list-style: none; padding: 0; }

.section { padding: var(--s8) 0 0; }
.section > h2 { font-size: var(--fs-xl); }
.section p { color: var(--fg-2); margin-top: var(--s3); }
.section p strong { color: var(--fg); font-weight: 500; }

.facts { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; }
@media (min-width: 860px) { .facts { grid-template-columns: 1fr 1fr; } }
.facts li { background: var(--surface); padding: var(--s4); font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.55; }
.facts b { color: var(--fg); font-weight: 500; }

/* --------------------------------------------------------- Contacto -- */
/* Correo, sin formulario. Un formulario pediría un servidor que recibiera el
   envío, y no tener servidor es parte del argumento de esta web. */
.contact { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 780px) { .contact { grid-template-columns: 1.2fr 1fr; gap: var(--s7); } }
.contact-mail {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: var(--fs-lg);
  color: var(--fg); text-decoration: none;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--r3);
  background: var(--surface);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.contact-mail:hover { border-color: var(--data-energy); background: var(--inset); text-decoration: none; }

/* ------------------------------------------------- Tiendas de apps -- */
/*
 * Distintivos PROPIOS, no los oficiales de Google y Apple.
 *
 * Dos motivos: los oficiales son marcas registradas con guías de uso estrictas
 * —aproximarlos a mano es un problema de marca, no un atajo de diseño— y
 * además no procede enseñarlos para una app que todavía no está publicada.
 * Cuando la app exista, se sustituyen por los distintivos oficiales de cada
 * tienda, descargados de su web y usados según sus normas.
 */
.stores { display: flex; flex-wrap: wrap; gap: var(--s2); }
.store-badge {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px dashed var(--line-strong); border-radius: var(--r2);
  color: var(--fg-3); font-size: var(--fs-xs);
  background: var(--surface);
}
.store-badge .ico { color: var(--fg-3); }
.store-badge b { display: block; color: var(--fg-2); font-size: var(--fs-sm); font-weight: 500; }
.store-badge span { display: block; font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; }

.site-foot { margin-top: 0; border-top: 1px solid var(--line); background: var(--surface); }
.site-foot .wrap { padding-top: var(--s5); padding-bottom: var(--s7); }
.site-foot p { font-size: var(--fs-xs); color: var(--fg-3); }
.site-foot p + p { margin-top: var(--s2); }

/* Veredicto */
.verdict { border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; }
.verdict-head { padding: var(--s5); border-bottom: 1px solid var(--line); background: var(--data-energy-soft); }
.verdict-head--fail { background: var(--data-warn-soft); }
.verdict-head .v-eyebrow { display: flex; align-items: center; gap: var(--s2); color: var(--data-energy); font-size: var(--fs-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.verdict-head--fail .v-eyebrow { color: var(--data-warn); }
.verdict-head h2 { font-size: var(--fs-xl); margin-top: var(--s3); letter-spacing: -.03em; }
.verdict-head p { font-size: var(--fs-sm); color: var(--fg-2); margin-top: var(--s2); line-height: 1.5; }
/* La hoja de cifras vive DENTRO del veredicto: hereda su borde exterior, así
   que se le quitan el suyo y el radio para que no haya doble línea. */
.verdict .sheet { border: 0; border-radius: 0; }

/* Dos campos en fila que colapsan a uno en móvil. */
.two-up { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
@media (min-width: 420px) { .two-up { grid-template-columns: 1fr 1fr; } }

/* --- El hero que se convierte en el veredicto -----------------------------
   La pregunta ("¿te encajaría?") y su respuesta comparten celda: en cuanto hay
   veredicto, el titular de venta ya no pinta nada y se sustituye en el sitio.
   `scroll-margin-top` deja hueco para la cabecera pegajosa al traerlo a la
   vista. */
.hero-answer { scroll-margin-top: 92px; }

/* Se le da nombre propio de transición para que SOLO se anime esta celda: el
   formulario de al lado no cambia y no tiene por qué parpadear. Mientras dura
   el cambio, `.vt-hero` (en <html>) apaga la animación por defecto del resto
   de la página. */
@supports (view-transition-name: none) {
  .hero-answer { view-transition-name: hero-answer; }
  .vt-hero::view-transition-old(root),
  .vt-hero::view-transition-new(root) { animation: none; }
  ::view-transition-old(hero-answer) { animation: heroAnswerOut 160ms ease-in both; }
  ::view-transition-new(hero-answer) { animation: heroAnswerIn 280ms cubic-bezier(.2,.7,.3,1) both; }
}

/* Donde no hay View Transitions (hoy, Firefox) se hace el mismo gesto a mano
   sobre el veredicto recién pintado. Se pierde el morfeo de altura, no el
   sentido del movimiento. */
.hero-answer.is-swapping > #result { animation: heroAnswerIn 280ms cubic-bezier(.2,.7,.3,1) both; }

@keyframes heroAnswerOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes heroAnswerIn { from { opacity: 0; transform: translateY(10px); } }

/* Sin `animation: none` explícito, la regla global de abajo no llega: `*` no
   casa con los pseudoelementos de View Transitions. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(hero-answer),
  ::view-transition-new(hero-answer),
  .hero-answer.is-swapping > #result { animation: none !important; }
}

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