/* =============================================================================
   estilos.css — Sistema de diseño de Ratenzify (V2 editorial).
   -----------------------------------------------------------------------------
   Una sola hoja y sin dependencias: no importa ninguna otra hoja ni declara
   ninguna tipografía propia. Las series son pilas del sistema, así que la
   página no le pide nada a nadie.

   NORTE VISUAL — «pricing studio», dirección V2

     1. Papel cálido y contraste entre bloques. El lienzo es papel; las
        superficies de producto suben de tono. Y hay dos superficies OSCURAS
        con retícula, contadas: la portada y la primera tarjeta del índice de
        herramientas. Ese salto es lo que ordena la lectura.

     2. La cifra es la marca. El trío bajo/referencia/alto se compone como la
        lectura de un aparato de medida. El bermellón aparece exactamente en
        la cifra de referencia, en el botón que la produce, en la numeración
        y en el foco. En nada más.

     3. Tres series tipográficas y tres funciones: serif editorial para los
        titulares y las cifras grandes, sans del sistema para el texto de
        trabajo, monoespaciada para rótulos, importes y numeración.

     4. Geometría declarada: cuatro radios y tres profundidades. La sombra
        existe pero es contenida y con nombre; no hay una cuarta.

     5. Dos anchuras, siempre. El producto ocupa la anchura de aplicación; el
        texto corrido se limita a una medida de lectura. Nunca al revés.

   La escala de espaciado (--e1..--e9) es la única fuente de huecos.
   ============================================================================= */

:root {
  /* --- Papel y superficies ------------------------------------------------
     El lienzo no es blanco: es papel cálido. Las superficies de producto
     suben de tono, no bajan, y por eso se recortan sin necesidad de sombra. */
  --lienzo: #f2eee5;
  --superficie: #fcf9f2;
  --superficie-elevada: #fffdf8;
  --superficie-sutil: #faf7f0;
  --superficie-alt: #ebe6dd;
  --superficie-banda: #e9dfcf;
  --superficie-calida: #fff9ef;
  --superficie-resultado: #f8f2e8;

  /* --- Superficies oscuras -----------------------------------------------
     Son dos y están contadas: la portada y la herramienta destacada. El
     contraste fuerte entre bloques es parte de la identidad, no un adorno. */
  --oscuro: #1e1d1a;
  --oscuro-alt: #26231f;

  /* --- Tinta --------------------------------------------------------------
     Tres niveles sobre papel y dos sobre oscuro. Si un texto necesita un
     nivel más, casi siempre es que sobra ese texto. */
  --tinta: #181713;
  --tinta-suave: #56514a;
  --tinta-tenue: #5f594f;
  --tinta-inversa: #fffaf1;
  --tinta-inversa-suave: #d5cfc4;

  /* --- Filetes ------------------------------------------------------------ */
  --borde-suave: #e2dbd0;
  --borde: #d7d0c5;
  --borde-medio: #c8c0b4;
  --borde-fuerte: #bdb5a9;

  /* --- Marca --------------------------------------------------------------
     Bermellón. Aparece en la cifra de referencia, en el botón que la calcula,
     en el foco, en la numeración y en el sello de la marca. En nada más. */
  --acento: #c4491d;
  --acento-oscuro: #a63c14;
  --acento-vivo: #d74e1c;
  --acento-tenue: #fdefe7;
  --acento-borde: #efd3c3;
  --acento-texto: #7a2c0f;
  --acento-rotulo: #8b3b20;
  --acento-claro: #ff956e;

  /* --- Semánticos --------------------------------------------------------- */
  --exito: #256251;
  --exito-tenue: #e4f2ec;
  --error: #b3261e;
  --error-tenue: #fdecea;
  --aviso: #7a4c00;
  --aviso-tenue: #fff4e0;
  --aviso-borde: #d98600;
  --foco: #c4491d;

  /* --- Velos y tramas -----------------------------------------------------
     Los únicos colores translúcidos del sistema, declarados aquí para que no
     aparezca un rgba() suelto a mitad de la hoja. */
  --reticula: rgba(255, 250, 241, .055);
  --filete-inverso: rgba(255, 250, 241, .22);
  --velo-marca: rgba(196, 73, 29, .05);
  --marca-al-fondo: rgba(196, 73, 29, .06);
  --trama: rgba(66, 56, 45, .04);

  /* --- Escala de espaciado -------------------------------------------------
     Micro (e1-e3) dentro de un control, componente (e4-e6) entre piezas,
     sección (e7-e9) entre bloques grandes. */
  --e1: .25rem;   /*  4px */
  --e2: .5rem;    /*  8px */
  --e3: .75rem;   /* 12px */
  --e4: 1rem;     /* 16px */
  --e5: 1.5rem;   /* 24px */
  --e6: 2rem;     /* 32px */
  --e7: 3rem;     /* 48px */
  --e8: 4rem;     /* 64px */
  --e9: 6rem;     /* 96px */

  /* --- Geometría -----------------------------------------------------------
     Cuatro radios y ni uno más. El pequeño es el ángulo cortado del sello y
     del panel; el grande, las superficies que flotan. */
  --r-s: 5px;
  --r-m: 11px;
  --r-l: 16px;
  --r-xl: 22px;

  /* --- Profundidad --------------------------------------------------------
     Contenida y con nombre: elevada (superficie de producto), flotante (el
     panel del rango) y botón. No hay una cuarta. */
  --sombra-elevada: 0 16px 45px rgba(56, 43, 29, .10);
  --sombra-flotante: 0 24px 55px rgba(38, 28, 18, .17);
  --sombra-boton: 0 8px 20px rgba(196, 73, 29, .22);

  /* --- Anchuras ------------------------------------------------------------ */
  --ancho: 76rem;          /* 1216px — el producto */
  --ancho-lectura: 45rem;  /* 720px  — el texto corrido */
  --gutter: 1.125rem;      /* 18px móvil */

  /* Serie de interfaz: la que hace el trabajo. Pila del sistema. */
  --tipo: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  /* Serie editorial: titulares y cifras grandes. Serif del sistema con
     transición modulada: es la equivalencia local más cercana a la serie
     editorial de la V2 sin descargar ni autoalojar nada. */
  --tipo-editorial: "Iowan Old Style", "Palatino Linotype", Palatino,
    "Book Antiqua", Georgia, "Times New Roman", serif;
  /* Serie de cifras: tabulares del sistema. Alinean en columna y se comparan
     de un vistazo, que es exactamente de lo que va el producto. */
  --tipo-cifra: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  --transicion: 160ms ease;
}

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

/* Autoridad: un elemento marcado como oculto está oculto, y ninguna regla de
   autor puede taparlo por accidente. La interfaz de las calculadoras se apoya
   en esto para retirar un resultado que ha dejado de ser válido. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--lienzo);
  color: var(--tinta);
  font-family: var(--tipo);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--acento-oscuro); text-underline-offset: .18em; }
a:hover { color: var(--acento-vivo); }

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

/* --- Titulares -----------------------------------------------------------
   La serie editorial solo aparece aquí y en las cifras grandes: es lo que
   distingue un titular de Ratenzify de un titular de plantilla. */
h1, h2, h3, h4 { margin: 0 0 var(--e3); }

h1, .display {
  font-family: var(--tipo-editorial);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.14;
}
h1 { font-size: clamp(2.1rem, 1.45rem + 2.9vw, 3.4rem); }

h2 {
  font-family: var(--tipo-editorial);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.28rem + 1vw, 2.05rem);
  letter-spacing: -.025em;
  line-height: 1.2;
}

h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.012em; }

p { margin: 0 0 var(--e4); }
p:last-child { margin-bottom: 0; }

/* --- Rótulo de sistema ---------------------------------------------------
   El rótulo pequeño en versal y monoespaciado es la voz de servicio de la
   V2: dice qué es cada cosa sin robarle el sitio al titular. */
.rotulo {
  margin: 0 0 var(--e2);
  color: var(--acento-rotulo);
  font-family: var(--tipo-cifra);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
}

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

.salto {
  position: absolute; left: -9999px; top: var(--e2);
  z-index: 20;
  background: var(--acento); color: #fff;
  padding: var(--e2) var(--e4);
  border-radius: var(--r-m);
}
.salto:focus { left: var(--e2); color: #fff; }

/* --------------------------------------------------------------- anchuras */
.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 48rem) { :root { --gutter: 1.5rem; } }
@media (min-width: 64rem) { :root { --gutter: 2rem; } }

.contenedor--lectura { max-width: calc(var(--ancho-lectura) + var(--gutter) * 2); }

/* ---------------------------------------------------------------- cabecera
   Barra clara sobre el papel, con el sello de la marca como única mancha de
   color. La sección actual se marca con un filete bermellón bajo el enlace,
   no solo con un cambio de tono. */
.cabecera {
  background: var(--superficie-elevada);
  border-bottom: 1px solid var(--borde);
}
.cabecera__fila {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  min-height: 4.125rem;
  padding-block: var(--e3);
}

.marca {
  display: inline-flex; align-items: center; gap: var(--e2);
  color: var(--tinta); text-decoration: none;
}
.marca__simbolo {
  display: grid; place-items: center;
  width: 1.9375rem; height: 1.9375rem;
  /* El ángulo inferior izquierdo cortado es la firma geométrica de la V2:
     se repite en el panel del rango y en nada más. */
  border-radius: 9px 9px 9px 2px;
  background: var(--acento);
  box-shadow: var(--sombra-boton);
  color: var(--superficie-calida);
  font-family: var(--tipo-editorial);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1;
}
.marca__texto {
  font-family: var(--tipo-editorial);
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -.035em;
}

.nav { flex: 1 1 100%; order: 3; }
@media (min-width: 56rem) { .nav { flex: 0 1 auto; order: 0; margin-left: auto; } }

.nav ul, .idiomas ul, .lista, .rejilla, .pie ul {
  list-style: none; margin: 0; padding: 0;
}
.nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--e5); }
.nav a {
  display: inline-flex; align-items: center;
  min-height: 2.25rem;
  color: var(--tinta-suave);
  text-decoration: none;
  font-size: .9375rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--tinta); }
.nav a[aria-current] {
  color: var(--tinta);
  border-bottom-color: var(--acento);
  font-weight: 600;
}

/* El par de idiomas se lee como un dato del sistema, no como navegación */
.idiomas {
  display: flex; align-items: center; gap: var(--e2);
  font-family: var(--tipo-cifra);
  font-size: .8125rem;
}
@media (min-width: 56rem) {
  .idiomas { padding-left: var(--e5); border-left: 1px solid var(--borde); }
}
.idiomas__etiqueta {
  color: var(--tinta-tenue);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .6875rem;
}
.idiomas ul { display: flex; align-items: center; gap: var(--e1); }
.idiomas li + li::before { content: "·"; color: var(--borde-fuerte); margin-right: var(--e1); }
.idiomas a { color: var(--tinta-tenue); text-decoration: none; }
.idiomas a:hover { color: var(--acento-oscuro); text-decoration: underline; }
.idiomas [aria-current] { color: var(--tinta); font-weight: 500; }

/* Por debajo del corte la navegación baja a su propia fila. Cuatro enlaces
   caben en una sola línea si se les ajusta cuerpo y hueco: sin esto la
   cabecera se comía 120px de un móvil. */
@media (max-width: 55.99rem) {
  /* Con la navegación en su propia fila, la altura mínima de escritorio se
     sumaba a las tres filas y la cabecera pasaba de 100px en un móvil. */
  .cabecera__fila { min-height: 0; padding-block: var(--e2); gap: var(--e2) var(--e4); }
  .nav ul { gap: 0 var(--e4); flex-wrap: nowrap; justify-content: space-between; }
  .nav a { min-height: 2.375rem; font-size: .8125rem; white-space: nowrap; }
  .idiomas { margin-left: auto; }
}
@media (max-width: 22.5rem) {
  .nav ul { gap: 0 var(--e2); }
  .nav a { font-size: .78125rem; }
  .idiomas__etiqueta {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* ------------------------------------------------------------------- migas
   El <ol> ES el contenedor: comparte gutter y anchura con el contenido de la
   página, así que arranca alineado con el H1. */
.migas { background: var(--superficie); border-bottom: 1px solid var(--borde); }
.migas ol {
  list-style: none;
  /* `margin: 0` a secas anularía el `margin-inline: auto` de .contenedor y
     las migas dejarían de centrarse con el resto del contenido: solo se
     ponen a cero los márgenes de bloque, que son los del navegador. */
  margin-block: 0;
  display: flex; flex-wrap: wrap; gap: var(--e1);
  padding-block: var(--e2);
  font-family: var(--tipo-cifra);
  font-size: .75rem;
}
.migas li + li::before { content: "/"; color: var(--borde-fuerte); margin-right: var(--e1); }
.migas a { color: var(--tinta-tenue); text-decoration: none; }
.migas a:hover { color: var(--acento-oscuro); text-decoration: underline; }
.migas [aria-current] { color: var(--tinta-suave); }

/* --------------------------------------------------------------- principal */
.principal { padding-block: var(--e6) var(--e9); }

/* =============================================================================
   Portada de página — tres formas, una por tipo de página

     .portada-seccion            editorial: rótulo, titular y entradilla
     .portada-seccion--hero      la home: superficie oscura con retícula
     .portada-seccion--calc      una calculadora: banda cálida y compacta
   ============================================================================= */
.portada-seccion { margin-bottom: var(--e7); }
.portada-seccion h1 { max-width: 24ch; }
.entradilla {
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.1875rem);
  color: var(--tinta-suave);
  max-width: 58ch;
  margin-bottom: 0;
  text-wrap: pretty;
}

/* --- la portada de la home ----------------------------------------------
   Superficie oscura con retícula de 32px y una mancha bermellón desbordando
   por la esquina: es el único gesto gráfico grande del sitio y solo ocurre
   aquí. Dentro, el titular a la izquierda y el panel del rango a la derecha. */
.portada-seccion--hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: var(--e8);
  padding: var(--e7) var(--e5);
  border-radius: var(--r-xl);
  color: var(--tinta-inversa);
  background:
    linear-gradient(var(--reticula) 1px, transparent 1px),
    linear-gradient(90deg, var(--reticula) 1px, transparent 1px),
    var(--oscuro);
  background-size: 32px 32px;
}
.portada-seccion--hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -5rem; top: -5.5rem;
  width: 17rem; height: 17rem;
  border-radius: 50%;
  background: var(--acento-vivo);
}
@media (min-width: 62rem) {
  .portada-seccion--hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--e8);
    align-items: center;
    padding: var(--e8) var(--e7);
  }
}
.portada-seccion--hero .rotulo { color: var(--acento-claro); }
.portada-seccion--hero h1 { max-width: 16ch; }
.portada-seccion--hero .entradilla { color: var(--tinta-inversa-suave); max-width: 52ch; }

/* Los hechos que sostienen la confianza. Se leen como sellos, no como
   botones, y cada uno lleva su marca de verificación: no dependen del color. */
.insignias {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5);
  list-style: none; margin: var(--e5) 0 0; padding: 0;
  font-size: .8125rem;
  color: var(--tinta-suave);
}
.insignias li { display: flex; align-items: baseline; gap: var(--e2); }
.insignias li::before { content: "\2713"; color: var(--acento); font-size: .875em; }
.portada-seccion--hero .insignias { color: var(--tinta-inversa-suave); }
.portada-seccion--hero .insignias li::before { color: var(--acento-claro); }

/* --- acciones de portada ------------------------------------------------- */
.acciones {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  margin-top: var(--e5);
}
.acciones .boton { text-decoration: none; }

/* --- el panel del rango -------------------------------------------------
   La pieza que define la marca: un instrumento de lectura, ligeramente
   girado, con su propio filete desplazado por detrás. Enseña un cálculo
   REAL del motor con los valores por defecto del formulario, y lo dice. */
.instrumento {
  position: relative;
  margin-top: var(--e7);
  padding: var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-l) var(--r-l) var(--r-l) var(--r-s);
  box-shadow: var(--sombra-flotante);
  color: var(--tinta);
}
@media (min-width: 62rem) {
  .instrumento { margin-top: 0; transform: rotate(1.3deg); }
  .instrumento::before {
    content: "";
    position: absolute;
    inset: .5rem -.5rem -.5rem .5rem;
    z-index: -1;
    border: 1px solid var(--acento);
    border-radius: inherit;
  }
}
.instrumento__cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e4);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--borde);
}
.instrumento__cabecera .rotulo { margin: 0; }
.instrumento .rangos { margin-top: var(--e3); }
.instrumento__nota {
  margin: var(--e4) 0 0;
  font-size: .8125rem;
  color: var(--tinta-tenue);
  line-height: 1.5;
}
/* Señal de que la cifra la ha calculado el motor, no una plantilla */
.directo {
  display: inline-flex; align-items: center; gap: var(--e2);
  color: var(--exito);
  font-family: var(--tipo-cifra);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.directo::before {
  content: "";
  width: .4375rem; height: .4375rem;
  border-radius: 50%;
  background: currentColor;
}

/* La escala del rango: un riel con la marca de la referencia. Decorativa y
   marcada como tal; la información está en las filas de arriba. */
.pista {
  position: relative;
  height: 7px;
  margin: var(--e4) 0 var(--e1);
  border-radius: 999px;
  background: var(--superficie-alt);
}
.pista::after {
  content: "";
  position: absolute;
  top: -4px; left: 48%;
  width: 3px; height: 15px;
  border-radius: 1px;
  background: var(--acento);
}

/* ----------------------------------------------------------------- bloques */
.bloque { margin-top: var(--e8); }
.bloque__intro { color: var(--tinta-suave); max-width: var(--ancho-lectura); }
.lista { display: grid; gap: var(--e2); padding-left: 1.1rem; list-style: disc; }
.lista li::marker { color: var(--borde-fuerte); }

/* Medida de lectura. El contenedor mide 1216px porque tiene que dar cabida a
   rejillas y tablas, pero un párrafo a ese ancho cansa. El texto corrido se
   limita; rejillas, tablas y tarjetas siguen ocupando todo el ancho. */
.bloque > p,
.bloque > .lista,
.bloque--faq .faq__item > p { max-width: var(--ancho-lectura); }

/* Encabezado de sección con filete superior: da ritmo de panel sin encerrar
   cada sección en una tarjeta. */
.bloque > h2 {
  padding-top: var(--e5);
  border-top: 1px solid var(--borde-medio);
}

/* --- definiciones ------------------------------------------------------
   Fichas con filete propio y hueco real entre ellas. No hay fondo pintado
   debajo, así que una fila incompleta no puede dejar un panel gris a la
   vista: lo que sobra es papel, igual que el resto de la página. */
.definiciones {
  display: flex; flex-wrap: wrap;
  gap: var(--e3);
  margin: var(--e5) 0 0;
  counter-reset: definicion;
}
.definicion {
  counter-increment: definicion;
  flex: 1 1 100%; min-width: 0;
  padding: var(--e4) var(--e4) var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
}
@media (min-width: 44rem) { .definicion { flex-basis: 19rem; } }
@media (min-width: 68rem) { .definicion { flex-basis: 14rem; } }
.definicion::before {
  content: counter(definicion, decimal-leading-zero);
  display: block;
  margin-bottom: var(--e3);
  color: var(--acento);
  font-family: var(--tipo-cifra);
  font-size: .75rem;
  letter-spacing: .06em;
}
.definicion dt {
  font-weight: 600; margin-bottom: var(--e1); font-size: .9375rem;
  letter-spacing: -.008em;
}
.definicion dd { margin: 0; color: var(--tinta-suave); font-size: .875rem; line-height: 1.55; }
.definiciones--compacta .definicion { padding: var(--e3) var(--e4); flex-basis: 100%; }
.definiciones--compacta .definicion::before { display: none; }
@media (min-width: 44rem) { .definiciones--compacta .definicion { flex-basis: 18rem; } }

/* --- hub editorial ----------------------------------------------------
   La sección que conduce del contenido a la herramienta: la explicación a la
   izquierda y las condiciones numeradas a la derecha, como un sumario. */
.bloque__enlace { margin: var(--e4) 0 0; }
.bloque--hub .definiciones {
  display: block;
  border-top: 1px solid var(--borde-fuerte);
}
.bloque--hub .definicion {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: var(--e3);
  padding: var(--e4) var(--e1);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--borde);
  border-radius: 0;
}
.bloque--hub .definicion::before {
  grid-column: 1; grid-row: 1 / span 2;
  margin: 0;
  font-size: .8125rem;
}
.bloque--hub .definicion dt { grid-column: 2; grid-row: 1; font-size: 1.0625rem; }
.bloque--hub .definicion dd { grid-column: 2; grid-row: 2; }
@media (min-width: 62rem) {
  .bloque--hub {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    column-gap: var(--e8);
    align-items: start;
  }
  .bloque--hub > h2 { grid-column: 1; grid-row: 1; }
  .bloque--hub > .bloque__intro { grid-column: 1; grid-row: 2; }
  .bloque--hub > .bloque__enlace { grid-column: 1; grid-row: 3; }
  .bloque--hub > .definiciones { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
}

/* --- marcador legal pendiente ----------------------------------------- */
.pendiente {
  background: var(--aviso-tenue);
  border-left: 3px solid var(--aviso-borde);
  padding-left: var(--e2);
  font-family: var(--tipo-cifra);
  font-size: .8125rem;
  color: var(--aviso);
  /* Un marcador es una sola palabra larga: tiene que partirse antes que
     desbordar la tarjeta. Sigue leyéndose entero, que es el objetivo. */
  overflow-wrap: anywhere;
}

.aviso {
  margin-top: var(--e5);
  padding: var(--e4) var(--e5);
  background: var(--aviso-tenue);
  border: 1px solid var(--aviso-borde);
  border-radius: var(--r-l);
  color: var(--aviso);
  font-size: .9375rem;
}
.aviso p { margin: 0; }

/* --- preguntas frecuentes ---------------------------------------------
   details/summary: el contenido está en el HTML y se lee sin JavaScript, el
   teclado funciona sin escribir una línea y en un móvil la sección ocupa de
   entrada la altura de sus preguntas en lugar de la de todas sus respuestas.
   El H3 va dentro del summary para no romper el esquema de encabezados. */
.bloque--faq .faq__item { border-bottom: 1px solid var(--borde); }
.bloque--faq .faq__item > summary {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e4);
  padding-block: var(--e4);
  cursor: pointer;
  list-style: none;
}
/* El triángulo del navegador se retira en los dos motores y se sustituye
   por el mismo signo que usa el panel de opciones avanzadas. */
.bloque--faq .faq__item > summary::-webkit-details-marker { display: none; }
.bloque--faq .faq__item > summary::marker { content: ""; }
.bloque--faq .faq__item > summary::after {
  content: "+";
  flex: none;
  font-family: var(--tipo-cifra);
  color: var(--acento);
}
.bloque--faq .faq__item[open] > summary::after { content: "\2212"; }
.bloque--faq .faq__item > summary:hover { color: var(--acento-oscuro); }
/* El foco se ve en la fila entera, no en un rectángulo de una palabra */
.bloque--faq .faq__item > summary:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: -2px;
  border-radius: var(--r-s);
}
.faq__pregunta { margin: 0; font-size: 1.0625rem; }
.faq__respuesta { padding-bottom: var(--e5); }
.faq__respuesta p { color: var(--tinta-suave); max-width: var(--ancho-lectura); }

/* =============================================================================
   Índice de herramientas
   -----------------------------------------------------------------------------
   Cuatro tarjetas con filete propio y hueco entre ellas. La primera va en
   oscuro: es la que cubre el caso más frecuente y el contraste lo dice sin
   necesidad de una etiqueta que diga «recomendada».
   ============================================================================= */
.rejilla {
  display: flex; flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e5);
  counter-reset: herramienta;
}
.tarjeta {
  position: relative;
  counter-increment: herramienta;
  flex: 1 1 100%; min-width: 0;
  display: flex; flex-direction: column;
  gap: var(--e2);
  padding: var(--e5) var(--e4);
  background: var(--superficie-sutil);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  transition: transform var(--transicion), border-color var(--transicion);
}
@media (min-width: 44rem) { .tarjeta { flex-basis: 19rem; } }
@media (min-width: 68rem) { .tarjeta { flex-basis: 14rem; } }
.tarjeta:hover { transform: translateY(-4px); border-color: var(--borde-fuerte); }

/* La numeración la pone la hoja, no el contenido: añadir una calculadora no
   obliga a renumerar nada a mano. */
.tarjeta__categoria {
  margin: 0;
  color: var(--acento-rotulo);
  font-family: var(--tipo-cifra);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tarjeta__categoria::before { content: counter(herramienta, decimal-leading-zero) " · "; }

/* Marca geométrica de la tarjeta: dos trazos del propio sistema, sin
   iconoteca y sin ninguna petición externa. */
.tarjeta__marca {
  display: block;
  width: 2.25rem; height: 2.25rem;
  margin: var(--e2) 0 var(--e3);
  border: 2px solid var(--acento);
  border-radius: var(--r-m) var(--r-m) var(--r-m) 2px;
  background: linear-gradient(var(--acento), var(--acento)) no-repeat 50% 60% / 55% 2px;
}

.tarjeta__titulo {
  margin: 0;
  font-family: var(--tipo-editorial);
  font-size: 1.125rem; font-weight: 500;
  letter-spacing: -.02em;
}
.tarjeta__titulo a { color: inherit; text-decoration: none; }
.tarjeta__titulo a:hover { color: var(--acento-oscuro); }
/* Toda la tarjeta es el enlace, pero el nombre accesible sigue siendo el suyo */
.tarjeta__titulo a::after { content: ""; position: absolute; inset: 0; }
.tarjeta__texto { color: var(--tinta-suave); font-size: .875rem; margin: 0; line-height: 1.55; }
.tarjeta__estado {
  margin: 0;
  font-family: var(--tipo-cifra);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tinta-tenue);
}
.tarjeta__accion { margin: auto 0 0; padding-top: var(--e3); }
.enlace-accion { font-weight: 600; text-decoration: none; font-size: .875rem; }
.enlace-accion::after { content: " \2192"; }
.enlace-accion:hover { text-decoration: underline; }

/* La destacada: superficie oscura, el mismo contraste que la portada */
.tarjeta--destacada {
  color: var(--tinta-inversa);
  background: var(--oscuro-alt);
  border-color: var(--oscuro-alt);
}
.tarjeta--destacada .tarjeta__categoria { color: var(--acento-claro); }
.tarjeta--destacada .tarjeta__texto,
.tarjeta--destacada .tarjeta__estado { color: var(--tinta-inversa-suave); }
.tarjeta--destacada .tarjeta__estado--activa { color: var(--acento-claro); }
.tarjeta--destacada .tarjeta__titulo a { color: var(--tinta-inversa); }
.tarjeta--destacada .enlace-accion { color: var(--acento-claro); }
.tarjeta--destacada .tarjeta__marca {
  border-color: var(--acento-claro);
  background: linear-gradient(var(--acento-claro), var(--acento-claro)) no-repeat 50% 60% / 55% 2px;
}
.tarjeta--destacada:hover { border-color: var(--acento); }
.tarjeta__estado--activa { color: var(--acento-oscuro); }

/* =============================================================================
   Selector de herramientas
   -----------------------------------------------------------------------------
   En una página de calculadora, saltar a otra tiene que costar un clic. Es
   navegación real, marcada con aria-current, no una pestaña decorativa.
   ============================================================================= */
.selector { margin-bottom: var(--e5); }
.selector ul {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  list-style: none; margin: 0; padding: 0;
  counter-reset: paso-herramienta;
}
.selector li { counter-increment: paso-herramienta; flex: 1 1 10rem; min-width: 0; }
.selector a, .selector [aria-current] {
  display: block;
  padding: var(--e2) var(--e3);
  min-height: 2.5rem;
  text-align: center;
  font-family: var(--tipo-cifra);
  font-size: .75rem;
  letter-spacing: .04em;
  text-decoration: none;
  border: 1px solid var(--borde-medio);
  border-radius: var(--r-m);
  background: var(--superficie-sutil);
  color: var(--tinta-suave);
  overflow-wrap: anywhere;
}
.selector a::before, .selector [aria-current]::before {
  content: counter(paso-herramienta, decimal-leading-zero) " · ";
  color: var(--acento-rotulo);
}
.selector a:hover { border-color: var(--borde-fuerte); color: var(--tinta); }
.selector [aria-current] {
  color: var(--tinta-inversa);
  background: var(--oscuro-alt);
  border-color: var(--oscuro-alt);
  font-weight: 500;
}
.selector [aria-current]::before { color: var(--acento-claro); }

/* --- portada de una calculadora --------------------------------------
   Banda cálida y compacta: la herramienta tiene que aparecer arriba, así
   que el encabezado es un rótulo, no una portada. */
.portada-seccion--calc {
  margin-bottom: var(--e5);
  padding: var(--e5);
  background: var(--superficie-banda);
  border-radius: var(--r-l);
}
@media (min-width: 62rem) {
  .portada-seccion--calc {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--e7);
    align-items: end;
    padding: var(--e6) var(--e7);
  }
  .portada-seccion--calc .insignias { grid-column: 1 / -1; }
}
.portada-seccion--calc h1 {
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.4rem);
  max-width: 26ch;
  margin-bottom: 0;
}
.portada-seccion--calc .entradilla { font-size: 1rem; max-width: 46ch; }
.portada-seccion--calc .insignias { margin-top: var(--e4); font-size: .75rem; }

/* =============================================================================
   La calculadora — el componente que define a Ratenzify
   -----------------------------------------------------------------------------
   UNA superficie de producto dividida por dentro, no dos tarjetas puestas
   una al lado de la otra. En pantalla ancha el formulario ocupa ~57% y el
   resultado ~43%, separados por un filete: quien rellena ve la cifra sin
   desplazarse. El orden del DOM no cambia (formulario antes que resultado),
   y por debajo del punto de corte todo vuelve a una columna.
   ============================================================================= */
.calculadora {
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-xl);
  margin-bottom: var(--e4);
  overflow: hidden;
  box-shadow: var(--sombra-elevada);
}
.calculadora__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) var(--e5);
  border-bottom: 1px solid var(--borde);
  background: var(--superficie-sutil);
}
.calculadora__cabecera h2 { margin: 0; }
.etiqueta-estado {
  margin: 0;
  font-family: var(--tipo-cifra);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinta-tenue);
}
.etiqueta-estado--activa { color: var(--acento-oscuro); }
.calculadora__aviso { color: var(--tinta-suave); font-size: .9375rem; padding: var(--e4) var(--e5) 0; }

.calculadora__form { padding: var(--e5); counter-reset: paso; }
.calculadora--activa .resultado { padding: var(--e5); }

@media (min-width: 62rem) {
  .calculadora--activa {
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
    align-items: start;
  }
  .calculadora--activa .calculadora__cabecera { grid-column: 1 / -1; }
  .calculadora--activa .calculadora__form { padding: var(--e6); }
  .calculadora--activa .resultado {
    border-left: 1px solid var(--borde-fuerte);
    padding: var(--e6);
    align-self: stretch;
  }
}
/* En pantalla ancha la mitad derecha se tiñe COMPLETA: el velo del color de
   marca y la inicial gigante pasan al contenedor, no al panel, para que la
   columna llegue hasta abajo aunque el resultado todavía esté vacío. El
   formulario pinta su propio blanco encima de la mitad izquierda. */
@media (min-width: 62rem) {
  .calculadora--activa {
    position: relative;
    background: linear-gradient(var(--velo-marca), var(--velo-marca)), var(--superficie-resultado);
  }
  .calculadora--activa .calculadora__form { background: var(--superficie); }
  .calculadora--activa .resultado { background: none; overflow: visible; z-index: 1; }
  .calculadora--activa .resultado::after { display: none; }
  .calculadora--activa::after {
    content: "R";
    position: absolute;
    right: -.5rem; bottom: -3.25rem;
    z-index: 0;
    color: var(--marca-al-fondo);
    font-family: var(--tipo-editorial);
    font-size: 12.5rem;
    line-height: 1;
    pointer-events: none;
  }
}
/* En pantallas altas el resultado acompaña mientras se rellena */
@media (min-width: 62rem) and (min-height: 46rem) {
  .calculadora--activa .resultado { position: sticky; top: var(--e4); align-self: start; }
}

/* ------------------------------------------------------------ formularios
   Cada fieldset es un paso, y la hoja lo numera: el contenido no repite
   «paso 1», «paso 2» en dos idiomas. */
.grupo {
  border: 0; margin: var(--e6) 0 0; padding: var(--e5) 0 0;
  border-top: 1px solid var(--borde);
  counter-increment: paso;
}
.grupo:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.grupo > legend {
  padding: 0;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -.012em;
}
.grupo > legend::before {
  content: counter(paso) " · ";
  color: var(--acento-rotulo);
  font-family: var(--tipo-cifra);
  font-size: .8125rem;
  letter-spacing: .06em;
}
.grupo__nota {
  margin: var(--e1) 0 0;
  font-size: .8125rem;
  color: var(--tinta-tenue);
  line-height: 1.5;
  max-width: 60ch;
}
.grupo > .campo, .grupo > .campo--opciones, .grupo > fieldset { margin-top: var(--e4); }

@media (min-width: 40rem) {
  .grupo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--e4);
    align-items: start;
  }
  .grupo > legend, .grupo > .grupo__nota { grid-column: 1 / -1; }
  .grupo > .campo, .grupo > .campo--opciones, .grupo > fieldset { margin-top: 0; }
}

.campo { display: grid; gap: var(--e1); align-content: start; }
.campo > label, .campo--opciones > legend { font-size: .875rem; font-weight: 600; }
.campo__opcional { font-weight: 400; color: var(--tinta-tenue); font-size: .75rem; }
.campo__ayuda { margin: 0; font-size: .75rem; color: var(--tinta-tenue); line-height: 1.5; }
.campo__error { margin: 0; font-size: .75rem; color: var(--error); font-weight: 600; }
.campo__error:empty { display: none; }

.campo__entrada { position: relative; display: flex; align-items: center; }
.campo__unidad {
  position: absolute; right: var(--e3);
  color: var(--tinta-tenue);
  font-family: var(--tipo-cifra);
  font-size: .8125rem;
  pointer-events: none;
}

input[type="text"], input[type="number"], select {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--e2) var(--e3);
  font: inherit;
  color: var(--tinta);
  background: var(--superficie-elevada);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-m);
}
input[type="text"], input[type="number"] {
  font-family: var(--tipo-cifra);
  font-variant-numeric: tabular-nums;
}
select {
  appearance: none;
  padding-right: var(--e6);
  /* Punta dibujada con dos gradientes: sin imagen y sin petición */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tinta-tenue) 50%),
    linear-gradient(135deg, var(--tinta-tenue) 50%, transparent 50%);
  background-position:
    calc(100% - 1.125rem) calc(50% - 1px),
    calc(100% - .8125rem) calc(50% - 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
input:hover, select:hover { border-color: var(--tinta-tenue); }
.campo__entrada input { padding-right: var(--e7); }

.campo--opciones { border: 0; margin: 0; padding: 0; display: grid; gap: var(--e1); }
.campo--opciones > legend { padding: 0; margin-bottom: var(--e1); }
.opcion, .campo--casilla { display: flex; align-items: baseline; gap: var(--e2); }
.opcion input, .campo--casilla input {
  width: 1.125rem; height: 1.125rem; margin: 0; flex: none;
  accent-color: var(--acento);
  align-self: center;
}
.opcion label, .campo--casilla label { font-size: .875rem; font-weight: 400; margin: 0; }
.campo--casilla { flex-wrap: wrap; }
.campo--casilla .campo__ayuda { flex-basis: 100%; margin-left: 1.7rem; }

/* --- opciones avanzadas ---------------------------------------------- */
.avanzadas { margin-top: var(--e5); }
.boton--desplegar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e2);
  width: 100%;
  padding: var(--e3) var(--e4);
  background: var(--superficie-sutil);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  color: var(--tinta);
  font-weight: 600;
  font-size: .9375rem;
  text-align: left;
}
.boton--desplegar:hover { border-color: var(--borde-fuerte); background: var(--superficie-alt); }
.boton--desplegar::after {
  content: "+";
  font-family: var(--tipo-cifra);
  color: var(--acento);
}
.boton--desplegar[aria-expanded="true"]::after { content: "\2212"; }
.avanzadas__panel > .campo__ayuda { margin-top: var(--e3); }
.avanzadas__panel .grupo:first-of-type {
  border-top: 1px solid var(--borde); margin-top: var(--e5); padding-top: var(--e5);
}

/* -------------------------------------------------------------- acciones */
.calculadora__acciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3);
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--borde);
}
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e2);
  font: inherit; font-weight: 600;
  border-radius: var(--r-m);
  padding: var(--e3) var(--e5);
  min-height: 2.75rem;
  cursor: pointer;
  border: 1px solid transparent;
  letter-spacing: -.006em;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
/* El botón principal lleva el color de marca, el mismo que la cifra que
   produce: pulsarlo y obtener el número son visiblemente la misma cosa. */
.boton--principal {
  background: var(--acento); color: #fff;
  border-color: var(--acento);
  padding-inline: var(--e6);
  box-shadow: var(--sombra-boton);
}
.boton--principal::after { content: "\2192"; }
.boton--principal:hover:not(:disabled) {
  background: var(--acento-oscuro); border-color: var(--acento-oscuro);
}
/* El secundario es claramente secundario: contorno, nunca macizo */
.boton--secundario {
  background: transparent; color: var(--tinta);
  border-color: var(--borde-fuerte);
}
.boton--secundario:hover { border-color: var(--tinta-tenue); background: var(--superficie-alt); }
.boton:disabled {
  background: var(--superficie-alt); color: var(--tinta-tenue);
  border-color: var(--borde); cursor: not-allowed; box-shadow: none;
}
.boton:disabled::after { content: ""; }
/* Sobre la superficie oscura de la portada el contorno se aclara */
.portada-seccion--hero .boton--secundario {
  color: var(--tinta-inversa);
  border-color: var(--filete-inverso);
  background: transparent;
}
.portada-seccion--hero .boton--secundario:hover {
  border-color: var(--tinta-inversa-suave); background: transparent;
}
.nota { flex: 1 1 14rem; margin: 0; font-size: .75rem; color: var(--tinta-tenue); }

/* =============================================================================
   El resultado — la firma visual de Ratenzify
   -----------------------------------------------------------------------------
   Se compone como la lectura de un instrumento: rótulo pequeño arriba, la
   referencia grande en bermellón y los extremos como filas. El fondo lleva un
   velo del color de marca y la inicial de la marca al fondo, en enorme: NO un
   símbolo de moneda, porque la moneda la elige quien calcula.
   ============================================================================= */
.resultado {
  position: relative;
  overflow: hidden;
  background: linear-gradient(var(--velo-marca), var(--velo-marca)), var(--superficie-resultado);
}
.resultado::after {
  content: "R";
  position: absolute;
  right: -.5rem; bottom: -3.25rem;
  z-index: 0;
  color: var(--marca-al-fondo);
  font-family: var(--tipo-editorial);
  font-size: 12.5rem;
  line-height: 1;
  pointer-events: none;
}
.resultado > * { position: relative; z-index: 1; }
.resultado h2 {
  font-family: var(--tipo-cifra);
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-tenue);
  margin-bottom: var(--e3);
  border-top: 0; padding-top: 0;
}
.resultado__marcador {
  color: var(--tinta-tenue); font-size: .8125rem; margin: 0; max-width: 34ch;
  line-height: 1.5;
}

/* Un resultado invalidado no es lo mismo que no haber calculado todavía */
.resultado[data-estado="invalidado"] { box-shadow: inset 3px 0 0 0 var(--aviso-borde); }
.resultado[data-estado="invalidado"] .resultado__marcador { color: var(--aviso); font-weight: 600; }

.rangos { display: grid; gap: 0; margin: var(--e4) 0 0; }
.rango {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e3);
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--borde-suave);
}
.rango dt {
  margin: 0;
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600;
  color: var(--tinta-tenue);
}
.rango dd {
  margin: 0;
  font-family: var(--tipo-cifra);
  font-size: 1.125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  color: var(--tinta-suave);
  text-align: right;
  overflow-wrap: anywhere;
}
/* La referencia domina, pero sigue siendo una referencia: lo dice la nota que
   acompaña al resultado, no un adorno. */
.rango--referencia {
  flex-direction: column; align-items: flex-start;
  gap: var(--e1);
  padding: var(--e4) 0;
  border-bottom-color: var(--borde-fuerte);
}
.rango--referencia dt { color: var(--acento-texto); }
.rango--referencia dd {
  font-family: var(--tipo-editorial);
  color: var(--acento);
  font-size: clamp(2.1rem, 1.5rem + 2vw, 2.9rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.035em;
  text-align: left;
}

.resultado__nota {
  margin: var(--e4) 0 0;
  font-size: .75rem;
  color: var(--tinta-tenue);
  line-height: 1.5;
}

/* ------------------------------------------------------- tablas de datos */
.tabla-envoltorio { overflow-x: auto; margin-top: var(--e4); }
.tabla-datos {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--tipo-cifra);
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  overflow: hidden;
}
.tabla-datos th, .tabla-datos td {
  padding: var(--e2) var(--e3);
  text-align: left;
  border-bottom: 1px solid var(--borde-suave);
  white-space: nowrap;
}
.tabla-datos thead th {
  font-family: var(--tipo);
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-tenue);
  background: var(--superficie-alt);
  border-bottom: 1px solid var(--borde-fuerte);
}
.tabla-datos tbody th { font-family: var(--tipo); font-size: .875rem; font-weight: 600; }
.tabla-datos td { color: var(--tinta-suave); }
.tabla-datos tbody tr:hover { background: var(--superficie-sutil); }
.tabla-datos td.celda-evidencia { white-space: normal; font-family: var(--tipo); }
.celda-evidencia__nota {
  display: block; margin-top: var(--e1);
  font-size: .75rem; color: var(--tinta-tenue);
}
.tabla-datos tbody tr:last-child th,
.tabla-datos tbody tr:last-child td { border-bottom: 0; }

.tabla-datos--desglose { font-size: .8125rem; }
.tabla-datos--desglose th, .tabla-datos--desglose td { padding: var(--e1) var(--e3); }
.tabla-datos--desglose tfoot th,
.tabla-datos--desglose tfoot td {
  border-top: 1px solid var(--borde-fuerte);
  font-weight: 700;
  color: var(--tinta);
}

/* ----------------------------------------------- evidencia y confianza
   La naturaleza de un dato NUNCA se distingue solo por el color: cada una
   lleva su texto y su propio glifo de trazo. */
.evidencia {
  display: inline-flex; align-items: baseline; gap: var(--e1);
  padding: 0 var(--e2);
  border-left: 3px solid var(--borde-fuerte);
  font-family: var(--tipo);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-tenue);
  white-space: nowrap;
}
.evidencia::before { font-size: .8em; }
.evidencia[data-naturaleza="source"]::before { content: "\25CF"; }
.evidencia[data-naturaleza="derived"]::before { content: "\25D0"; }
.evidencia[data-naturaleza="heuristic"]::before { content: "\25D4"; }
.evidencia[data-naturaleza="custom"]::before { content: "\25CB"; }
.evidencia[data-naturaleza="source"] { border-left-color: var(--exito); color: var(--exito); }
.evidencia[data-naturaleza="derived"] { border-left-color: var(--acento); color: var(--acento-texto); }
.evidencia[data-naturaleza="heuristic"] { border-left-color: var(--aviso-borde); color: var(--aviso); }
.evidencia[data-naturaleza="custom"] { border-left-color: var(--borde-fuerte); color: var(--tinta-tenue); }
.evidencia__confianza { font-family: var(--tipo-cifra); letter-spacing: .04em; }
.celda-evidencia .evidencia { white-space: normal; }

/* --- registro de fuentes ---------------------------------------------- */
.registro__grupo {
  margin: var(--e6) 0 var(--e3);
  font-family: var(--tipo-cifra);
  font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-tenue);
}
.registro {
  display: flex; flex-wrap: wrap;
  gap: var(--e3);
  list-style: none; margin: 0; padding: 0;
}
.fuente {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  padding: var(--e4);
  flex: 1 1 100%; min-width: 0;
}
@media (min-width: 56rem) { .fuente { flex-basis: 24rem; } }
.fuente__titulo { margin: 0 0 var(--e1); font-size: .9375rem; }
.fuente__meta {
  margin: 0 0 var(--e2); font-size: .75rem;
  color: var(--tinta-tenue); font-family: var(--tipo-cifra);
}
.fuente__enlace, .fuente__pendiente, .fuente__campo { margin: var(--e2) 0 0; font-size: .875rem; }
.fuente__pendiente { color: var(--tinta-tenue); font-style: italic; }
.lista--compacta { margin: var(--e1) 0 0; font-size: .875rem; }

.nota-naturaleza { margin-top: var(--e4); font-size: .8125rem; color: var(--tinta-tenue); }

.notas-resultado { margin-top: var(--e5); }
.notas-resultado h3 {
  font-family: var(--tipo-cifra);
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-tenue);
  margin-bottom: var(--e2);
}
.notas-resultado .lista { font-size: .875rem; color: var(--tinta-suave); }
.lista--avisos li::marker { color: var(--aviso-borde); }

/* ------------------------------------------------- llamada complementaria */
.cta {
  margin-top: var(--e5);
  background: var(--superficie-calida);
  border: 1px solid var(--acento-borde);
  border-radius: var(--r-l);
  padding: var(--e5);
  display: grid; gap: var(--e2);
}
@media (min-width: 52rem) {
  .cta { grid-template-columns: 1fr auto; align-items: center; column-gap: var(--e6); }
  .cta__accion { grid-row: 1 / span 2; grid-column: 2; margin: 0; }
}
.cta__titulo {
  font-family: var(--tipo-editorial); font-weight: 500;
  font-size: 1.125rem; margin-bottom: 0;
}
.cta__texto { color: var(--tinta-suave); font-size: .875rem; margin: 0; max-width: 60ch; }
.cta__accion { margin: var(--e3) 0 0; }
.cta__accion .boton { display: inline-flex; text-decoration: none; }
.cta__accion .boton--secundario { background: var(--superficie); }

/* ------------------------------------------ condiciones informativas */
.contexto { margin-top: var(--e5); }
.contexto h3 {
  font-family: var(--tipo-cifra);
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-tenue);
  margin-bottom: var(--e2);
}
.contexto .nota { margin-bottom: var(--e3); }
.contexto .definicion dd { color: var(--tinta); font-weight: 600; }

/* =============================================================================
   Dos estimaciones independientes (calculadora de influencer)
   ============================================================================= */
.estimaciones { display: grid; gap: var(--e4); margin-top: var(--e4); }
.estimacion {
  padding: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
}
.estimacion h3 {
  font-family: var(--tipo-cifra);
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-tenue);
  margin-bottom: var(--e2);
}
.estimacion .rangos { margin: 0; }
.estimacion .rango { padding: var(--e1) 0; }
.estimacion .rango dd { font-size: 1rem; }
.estimacion .rango--referencia { padding: var(--e2) 0; }
.estimacion .rango--referencia dd { font-size: 1.75rem; }

.estimaciones__aviso {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--e3) var(--e4);
  background: var(--aviso-tenue);
  border-left: 3px solid var(--aviso-borde);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  font-size: .8125rem;
  color: var(--aviso);
}

.desglose-estimacion + .desglose-estimacion { margin-top: var(--e5); }
.desglose-estimacion h3 { font-size: .9375rem; margin-bottom: var(--e2); }

/* =============================================================================
   Publicidad — el hueco y su maqueta.
   -----------------------------------------------------------------------------
   Con los tres modos apagados el build no emite este marcado y estas reglas no
   se aplican a nada. Existen para tres estados:

     data-modo="maqueta"    prelanzamiento PRIVADO. Se ve el hueco, rotulado,
                            para juzgar la distribución antes de monetizar.
     data-modo="reservado"  PRODUCCIÓN pública. El espacio está reservado y
                            dicho, pero todavía no contiene publicidad.
     data-modo="real"       publicidad de verdad, algún día.

   La GEOMETRÍA la fija data-posicion y es la MISMA en los tres: el día que se
   sustituya un espacio reservado por un anuncio real no habrá que rediseñar
   nada ni habrá salto de maquetación, porque el sitio ya estaba guardado. Por
   eso ninguna regla de altura cuelga de data-modo.

   Lo único que cambia entre maqueta y reservado es el acabado, y por un motivo
   concreto: el trazo discontinuo de la maqueta significa «esto está a medias»,
   que es exactamente lo que se quiere decir dentro del equipo y exactamente lo
   que NO se quiere decir a quien visita la web. En producción el mismo hueco
   lleva un filete continuo y muy tenue: se lee como un espacio deliberado, no
   como contenido roto.
   ============================================================================= */
.anuncio {
  /* Respiración generosa: tiene que quedar claro dónde acaba el producto y
     dónde empieza la publicidad. Nunca pegado a un botón ni al pie. */
  margin: var(--e8) 0;
  padding: 0;
  color: var(--tinta-tenue);
}
.anuncio__etiqueta {
  margin: 0 0 var(--e2);
  font-family: var(--tipo-cifra);
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-tenue);
  display: flex; align-items: center; gap: var(--e3);
}
/* Filete de continuación a la derecha del rótulo: separa sin encajonar */
.anuncio__etiqueta::after { content: ""; flex: 1; height: 1px; background: var(--borde); }
/* Espacio reservado. Es lo que evita el salto al activar la publicidad, y la
   trama diagonal dice «esto todavía no es un anuncio» sin depender del color:
   sigue leyéndose en blanco y negro. */
.anuncio__contenido {
  min-height: 250px;
  display: grid; place-items: center;
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--r-l);
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, var(--trama) 12px 13px),
    var(--superficie-alt);
}
.anuncio__nota {
  font-family: var(--tipo-cifra);
  font-size: .75rem; letter-spacing: .04em;
  color: var(--tinta-tenue);
}

/* Acabado del espacio reservado en producción.

   Mismo tamaño, mismo sitio, mismo contenedor: solo cambia el trazo. El filete
   continuo y la trama más suave lo convierten en un hueco tranquilo del diseño
   en vez de en un aviso de que algo no ha cargado. Y la nota va en versalitas
   pequeñas, para que se lea como un rótulo editorial y no compita con las
   cifras de una calculadora, que es lo único que importa en esa página. */
.anuncio[data-modo="reservado"] .anuncio__contenido {
  border: 1px solid var(--borde);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, var(--trama) 14px 15px),
    var(--superficie-alt);
}
.anuncio[data-modo="reservado"] .anuncio__nota {
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

@media (min-width: 48rem) {
  /* Banda horizontal en las principales; bloque más profundo en las de abajo */
  .anuncio[data-posicion$="-principal"] .anuncio__contenido { min-height: 112px; }
  .anuncio[data-posicion$="-secundaria"] .anuncio__contenido { min-height: 200px; }
  .anuncio[data-posicion="indice-principal"] .anuncio__contenido { min-height: 160px; }
}
@media (min-width: 62rem) {
  .anuncio[data-posicion$="-principal"] .anuncio__contenido { min-height: 120px; }
  .anuncio[data-posicion$="-secundaria"] .anuncio__contenido { min-height: 240px; }
  /* La editorial y la del índice son únicas en su página, así que se quedan
     en la banda intermedia: ni una tira fina ni un bloque que domine. */
  .anuncio[data-posicion="editorial-principal"] .anuncio__contenido,
  .anuncio[data-posicion="indice-principal"] .anuncio__contenido { min-height: 180px; }
}

/* --------------------------------------------------------------------- pie */
.pie {
  background: var(--superficie-elevada);
  border-top: 1px solid var(--borde);
  padding-block: var(--e7) var(--e6);
  font-size: .875rem;
}
.pie__rejilla { display: grid; gap: var(--e6); }
@media (min-width: 44rem) { .pie__rejilla { grid-template-columns: repeat(3, 1fr); } }
.pie h2 {
  font-family: var(--tipo-cifra);
  font-size: .6875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinta-tenue);
  margin-bottom: var(--e3);
}
.pie ul { display: grid; gap: var(--e1); }
.pie a { color: var(--tinta-suave); text-decoration: none; }
.pie a:hover { color: var(--acento-oscuro); text-decoration: underline; }
.pie__aviso {
  margin: var(--e7) 0 var(--e2);
  padding-top: var(--e5);
  border-top: 1px solid var(--borde);
  color: var(--tinta-tenue);
  font-size: .8125rem;
  max-width: var(--ancho-lectura);
}
.pie__marca {
  color: var(--tinta-tenue); font-size: .75rem; margin: 0;
  font-family: var(--tipo-cifra);
}

/* ------------------------------------------------------------ preferencias */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Y nada gira ni se levanta: el panel del rango se queda recto */
  .instrumento { transform: none !important; }
  .tarjeta:hover { transform: none !important; }
}

/* --------------------------------------------------- calculadora en espera */
.calculadora--activa { border-color: var(--borde-fuerte); }

/* =============================================================================
   Capa de producto — orientación, ejemplos y recorridos
   -----------------------------------------------------------------------------
   Todo lo de aquí extiende el sistema V2 con sus mismos tokens: no hay ningún
   color, radio, sombra ni familia que no estuviera ya declarada arriba.
   ============================================================================= */

/* --- línea de confianza junto al H1 ---------------------------------
   Cuándo se revisó, que es gratis, que no hay registro y cuánto se tarda.
   Cuatro datos separados por un punto medio, en la serie de cifras: se lee
   como una ficha técnica, no como cuatro insignias de escaparate. */
.meta-linea {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--e1) var(--e3);
  margin: var(--e4) 0 0;
  font-family: var(--tipo-cifra);
  font-size: .75rem;
  color: var(--tinta-tenue);
}
.meta-linea span + span::before {
  content: "\00b7";
  margin-right: var(--e3);
  color: var(--borde-fuerte);
}
.meta-linea span:first-child { color: var(--tinta-suave); }

/* --- la pregunta de cada tarjeta -------------------------------------
   Es la frase con la que llega quien busca. Va antes de la descripción y en
   la serie editorial, porque es lo que de verdad ayuda a elegir. */
.tarjeta__pregunta {
  margin: 0;
  font-family: var(--tipo-editorial);
  font-size: .9375rem;
  line-height: 1.35;
  color: var(--tinta-suave);
}
.tarjeta--destacada .tarjeta__pregunta { color: var(--tinta-inversa-suave); }
.tarjeta__tiempo::before {
  content: "\00b7";
  margin: 0 var(--e1);
  color: var(--borde-fuerte);
}

/* --- estado vacío del resultado -------------------------------------
   Antes de calcular el panel dice qué va a aparecer y en qué orden, en vez
   de parecer una caja a medio hacer. */
.resultado__titulo-vacio {
  margin: 0 0 var(--e2);
  font-family: var(--tipo-editorial);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--tinta);
}
.resultado__pasos {
  margin: var(--e4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: paso-vacio;
  display: grid;
  gap: var(--e2);
  font-size: .8125rem;
  color: var(--tinta-suave);
  max-width: 36ch;
}
.resultado__pasos li {
  counter-increment: paso-vacio;
  display: grid;
  grid-template-columns: 1.375rem minmax(0, 1fr);
  gap: var(--e2);
  align-items: baseline;
}
.resultado__pasos li::before {
  content: counter(paso-vacio);
  font-family: var(--tipo-cifra);
  font-size: .6875rem;
  color: var(--acento);
  text-align: right;
}

/* --- acciones del resultado -----------------------------------------
   Copiar el resumen aparece cuando hay algo que copiar, y la confirmación
   vive en su propia región para que un lector de pantalla la anuncie. */
.resultado__acciones {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e3);
  margin: var(--e5) 0 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--borde);
}
.resultado__estado {
  font-family: var(--tipo-cifra);
  font-size: .75rem;
  color: var(--exito);
}

/* --- avisos de la calculadora ---------------------------------------
   Uno dice que lo que hay en pantalla es un ejemplo; el otro, que un dato
   viene de un cálculo anterior. Los dos son informativos y ninguno es un
   error: filete lateral y nada más. */
.aviso-ejemplo, .aviso-importado {
  margin: var(--e5) 0 0;
  padding: var(--e2) var(--e3);
  border-left: 3px solid var(--acento-borde);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  background: var(--acento-tenue);
  color: var(--acento-texto);
  font-size: .8125rem;
}
.aviso-importado { margin: 0 0 var(--e5); }

/* --- rótulo del siguiente paso -------------------------------------- */
.cta__rotulo {
  margin: 0 0 var(--e1);
  font-family: var(--tipo-cifra);
  font-size: .625rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--acento-rotulo);
}
@media (min-width: 52rem) {
  .cta__rotulo { grid-column: 1; }
}

/* --- sugerencia de idioma -------------------------------------------
   Posición fija a propósito: así no desplaza ni un píxel de la maquetación
   cuando el navegador la activa. Es una sugerencia, no un aviso legal: cabe
   en una línea, se descarta con un botón o con Escape y no vuelve a
   aparecer en esta carga de página. */
.aviso-idioma {
  position: fixed;
  z-index: 30;
  left: var(--gutter); right: var(--gutter);
  /* La zona segura del navegador: en un móvil con barra inferior el aviso
     se apoya encima de ella, no debajo. Sin ella el fallback es 0. */
  bottom: calc(var(--e3) + env(safe-area-inset-bottom, 0px));
  max-width: 24rem;
  margin-inline: auto;
  padding: var(--e3);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e2) var(--e3);
  background: var(--superficie-elevada);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-m);
  box-shadow: var(--sombra-flotante);
}
@media (min-width: 62rem) {
  .aviso-idioma {
    left: auto; right: var(--e6);
    bottom: calc(var(--e6) + env(safe-area-inset-bottom, 0px));
    margin-inline: 0;
    padding: var(--e4);
  }
}
/* Una pregunta corta que cabe en una línea: el aviso es una sugerencia, no
   un aviso legal, y su altura tiene que decirlo. */
.aviso-idioma__texto {
  flex: 1 1 100%;
  margin: 0;
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--tinta-suave);
}
.aviso-idioma__acciones {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  flex: 1 1 auto;
  margin: 0;
}
/* 2,25rem son 36px: por encima del mínimo de área táctil de WCAG 2.2 y sin
   convertir una sugerencia en dos botones de formulario. */
.aviso-idioma__acciones .boton {
  min-height: 2.25rem;
  /* El relleno vertical del botón de formulario aquí sobra: la altura la fija
     el mínimo táctil y no una caja pensada para un envío. */
  padding-block: var(--e1);
  padding-inline: var(--e3);
  font-size: .8125rem;
  text-decoration: none;
}
@media (min-width: 62rem) {
  .aviso-idioma__texto { font-size: .875rem; }
  .aviso-idioma__acciones .boton {
    min-height: 2.5rem;
    padding-block: var(--e2);
    padding-inline: var(--e4);
  }
}

/* --- guías editoriales ------------------------------------------------
   Un artículo, no una página de producto: columna de lectura, ficha con la
   fecha y el alcance declarado, ejemplos calculados y tarjetas para seguir.
   Todo con los tokens del sistema V2. */
.portada-seccion--guia { margin-bottom: var(--e6); }
.portada-seccion--guia h1 { max-width: 30ch; }
.portada-seccion--guia .meta-linea { margin: 0 0 var(--e3); }

/* El alcance se declara siempre: una guía del mercado español no vale para
   cualquier país, y decirlo es parte del rigor. */
.alcance {
  margin: var(--e4) 0 0;
  padding: var(--e3) var(--e4);
  background: var(--superficie-alt);
  border-radius: var(--r-m);
  font-size: .8125rem;
  color: var(--tinta-suave);
}
.alcance__rotulo {
  font-family: var(--tipo-cifra);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--acento-rotulo);
}

/* Ejemplo calculado: los datos de partida como lista y el rango como el
   mismo instrumento de lectura que usa la calculadora. */
.bloque--ejemplo .ejemplo {
  margin-top: var(--e4);
  padding: var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-l);
}
.ejemplo__datos {
  margin: var(--e4) 0 0;
  padding-left: 1.1rem;
  display: grid; gap: var(--e1);
  font-size: .875rem;
  color: var(--tinta-suave);
}
.ejemplo__datos li::marker { color: var(--borde-fuerte); }
.ejemplo .rangos { margin: 0; }
.ejemplo .rangos + .ejemplo__titulo { margin-top: var(--e5); }
.ejemplo__titulo {
  margin: 0 0 var(--e2);
  font-family: var(--tipo-cifra);
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-tenue);
}
.ejemplo__aviso {
  margin: var(--e4) 0 0;
  padding: var(--e2) var(--e3);
  border-left: 3px solid var(--aviso-borde);
  background: var(--aviso-tenue);
  color: var(--aviso);
  font-size: .8125rem;
}
.ejemplo__nota {
  margin: var(--e3) 0 0;
  font-size: .8125rem;
  color: var(--tinta-tenue);
}

/* Tarjetas de guía: la misma familia que las de herramienta, sin numeración
   ni marca geométrica —una guía no es un paso de un recorrido—. */
.rejilla--guias { counter-reset: none; }
.tarjeta--guia { padding: var(--e4); }
.tarjeta--guia .tarjeta__titulo { font-size: 1.0625rem; }
.tarjeta--guia .tarjeta__categoria::before { content: none; }
@media (min-width: 44rem) { .tarjeta--guia { flex-basis: 17rem; } }
/* --- fuentes y metodología de una guía -------------------------------
   Cierra el contenido editorial y abre paso a la herramienta: se lee como
   una ficha técnica, no como una nota al pie. */
.bloque--fuentes .registro { margin-top: var(--e5); }
.fuente__naturaleza {
  margin: 0 0 var(--e2);
  font-family: var(--tipo-cifra);
  font-size: .625rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--acento-rotulo);
}
.fuentes-guia__enlaces {
  display: flex; flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--borde);
}
/* ------------------------------------------------------- campo con error */
.campo--invalido > label,
.campo--invalido > legend { color: var(--error); }
.campo--invalido input,
.campo--invalido select { border-color: var(--error); background: var(--error-tenue); }