/* ==========================================================================
   GIG · Calculadora de rendimientos: la sección #calculadora

   Una sola sección, <section class="calc-sitio" id="calculadora">, que vive
   dentro de la página principal. TODAS las reglas de este archivo van bajo
   .calc-sitio: no tocan nada de fuera y nada de fuera las necesita, salvo las
   variables de :root (colores, tipografías, --margen, --cabecera-fija) y tres
   clases de la casa que vienen de estilos.css: .rotulo, .boton y .caja.
   Los campos, el deslizador, las casillas de plazo y la tabla del calendario
   están escritos aquí, completos.

   DOS ESTADOS (los pone calculadora.js en <html>, antes de pintar)
   Apagada      Así la encuentra todo el que llega. El tablero está entero, en
                su sitio y a su tamaño, pero sin encender: atenuado, sin oro en
                los mandos, con una raya corta donde irían las cifras y el
                gráfico con su retícula y sus ejes, sin curvas ni números. En
                el HTML no hay escrita ninguna cifra del tablero: las rayas las
                dibuja este archivo (.vivo:empty) y los mandos llevan «inert».
                Sobre el sitio del gráfico, el aviso «Antes de continuar»
                (.acuerdo): lo único encendido, con el único botón de oro.
   Encendida    html.calc-encendida. El aviso se retira, el tablero toma su
                color, las cifras cuentan, las curvas se trazan y debajo
                aparecen los tres plazos, el calendario y el formulario.
                Queda el enlace «Ver los términos» (.terminos-ver), que vuelve
                a mostrar el aviso (.calc-sitio.es-terminos).
   Sin JavaScript (html sin .calc-lista): el tablero apagado y una línea que
   lo dice y da el correo (.acuerdo-linea).

   EN ORDEN DE APARICIÓN
   .mesa         El tablero.
   .acuerdo      El aviso «Antes de continuar», sobre el sitio del gráfico; en
                 teléfono, entre la cifra principal y el gráfico.
   .comparar     Los tres plazos lado a lado (sobre marfil).
   .calendario-pagos   El calendario, en tabla (sobre marfil).
   .dejar        El cierre: «Dejanos tus datos.», con la consulta calculada a
                 la izquierda (.boleta) y el formulario a la derecha.

   IDEA
   La primera pantalla es un tablero de pared a pared sobre el verde de la casa:
   a la izquierda los mandos, a la derecha la pantalla (un tono más hondo) con la
   cifra principal y el gráfico. Nada decora: cada línea es un eje, un pago o un
   filete entre paneles. El poder sale de la escala de la cifra y de la precisión
   del dibujo. Debajo, sobre el marfil de la casa, los mismos números en papel:
   los tres plazos lado a lado y el calendario de pagos en tabla.

   COLOR (el del sitio, más un tono de pantalla). Contrastes calculados con la
   fórmula de WCAG; scripts/prueba-calculadora.mjs pasa axe por cada pantalla.
   --selva      #0F2A22   panel de mandos
   --pantalla   #091A15   la pantalla del gráfico, un punto más honda que el pie
   --marfil     #F4EFE4   cifras; sobre pantalla 15,7:1
   --oro-claro  #D2B77F   curva elegida, etiquetas en versales; sobre pantalla 9,3:1
   Texto secundario        marfil al 74 %  → 8,9:1 sobre pantalla
   Rótulo de curva tenue   marfil al 70 %  → 8,1:1
   Meses fuera del plazo   marfil al 56 %  → 5,6:1
   Curva tenue (1 px)      marfil al 50 %  → 4,7:1 (es una línea: pide 3:1)
   Muro tenue del capital  marfil al 34 %  → 2,9:1 (apoyo: repite lo que ya dice
                           su curva y su cifra, que sí pasan)
   Etiqueta sobre el eje   verde hondo sobre oro claro → 9,0:1
   Retícula                marfil al 9 % (cuartos) y 20 % (años); base al 55 %
   Filetes entre paneles   marfil al 14 %
   Sobre marfil: tinta #121A16 y oro tinta #7A5C26, como en el portafolio; la
   columna elegida lleva un velo de oro al 17 % (oro tinta encima: 4,7:1).
   El oro significa una sola cosa en el gráfico: lo que se cobra en intereses.
   El capital que vuelve va en marfil. Lo elegido (plazo, botón) va en oro lleno.

   CIFRAS (Newsreader, corte de exhibición, numerales de caja alta y ancho fijo)
   Cifra principal    clamp(4.5rem, min(10.4vw, 21vh), 14rem)  interlínea .74  peso 420
                      1280×680 → 133 px · 1440×900 → 150 px · 1920×1080 → 200 px
                      teléfono: clamp(4rem, 21vw, 8rem) → 82 px a 390
   Cifras del lado    clamp(1.75rem, 2.5vw, 2.5rem)           peso 500
   Título del tablero clamp(1.75rem, 2.45vw, 2.5rem)
   Comparación        fila mayor clamp(1.625rem, 3.2vw, 3.5rem); resto clamp(1.25rem, 1.8vw, 1.625rem)
   TEXTO (Inter, numerales de ancho fijo; nunca monoespaciada)
   Etiqueta           .6875rem / 600 / versales / tracking .16em
   Ejes y rótulos     .75rem / 500   ·   cinta de pagos .8125rem (.6875rem o .65rem si no caben)
   Notas              .8125rem / 1.5, las dos iguales (cálculo y riesgo)

   RETÍCULA
   La sección usa la caja del sitio (--ancho, 82.5rem): el rótulo, el titular y
   todo el texto arrancan en la misma vertical que el logo, también a 1920, y lo
   desplegado se alinea con la cabecera. Los fondos del tablero sí llegan de pared
   a pared, como las fotos a sangre del resto de la página.
   Tablero: columna de mandos clamp(21.5rem, 30vw, 28rem) y la pantalla con el
   resto de la caja. Filetes de 1 px entre paneles, a sangre.
   Las cifras del eje vertical van en el margen de la página: el cuadro del gráfico
   termina en la misma vertical que la navegación.
   El alto del tablero es el de la ventana menos la cabecera fija del sitio (tope
   72rem): al llegar por el menú se ve entero. El gráfico se queda con
   todo lo que sobra. A 1280×680 cabe entero, con las dos notas y el botón, y el
   lienzo del gráfico mide 331 px; a 1440×900, 517 px; a 1920×1080, 644 px.
   Con 900 px de alto o más aparece bajo los mandos la ficha de términos.
   Debajo de 1180 px las dos cifras del lado bajan a una fila; debajo de 900 px
   todo va en una columna y cambia el orden a la vista: título, cifra y gráfico
   arriba; mandos después, a la altura del pulgar; luego las otras dos cifras,
   las notas y el botón.

   EL GRÁFICO (SVG dibujado por calculadora.js a tamaño real: 1 unidad = 1 px)
   Eje horizontal fijo de 0 a 36 meses: cada plazo ocupa su tramo. Eje vertical
   con tope redondo (1, 2, 2,5 o 5 por potencia de diez), de tres a ocho tramos
   según el alto. Dos escalas. «Intereses» mide el eje con los intereses del plazo
   elegido, así que su curva llena el cuadro en los tres plazos: el muro del
   capital sale del cuadro con su marca de corte y las curvas de los plazos más
   largos se dibujan solo hasta ese muro, sin rótulo (los tres plazos se comparan
   en la tabla «Tres plazos, lado a lado»). «Con capital» lleva el eje hasta el
   total del plazo más largo y se ve todo a escala.
   Curva elegida   peldaños en oro de 2 px (3 px si el cuadro pasa de 240 px de
                   alto); un cuadrado en cada pago (5 o 7 px; 2 px más el último)
                   y el muro del capital en marfil de 2 px
   Otros plazos    peldaños de 1 px en marfil al 50 %, muro al 34 %, su cifra al 70 %
   Área            oro del 34 % (a la altura del último pago) al 5 % (en la base)
   Marca de corte  dos trazos inclinados donde un muro sale del cuadro
   En reposo       guía de puntos (1-4) desde el final de la curva hasta el eje,
                   con su cifra en una etiqueta de oro: la que encabeza la pantalla
   Cruz de lectura trazos 3-3 en marfil al 60 %, cuadrado hueco de 9 px en el
                   cruce y etiquetas de oro sobre los dos ejes
   Cinta de pagos  bajo cada vencimiento, cuando cada trimestre mide 46 px o más
                   y caben las cifras más largas de ese plazo con 8 px entre una
                   y otra (calculadora.js las mide). Si las del monto elegido no
                   caben a .8125rem bajan a .6875rem y, si tampoco, a .65rem; la
                   última, que lleva el capital, se corre a la derecha lo justo y
                   puede entrar en el margen. Si no caben ni así, la cinta va en
                   tira (.cinta). Va alineada en los tres plazos desde unos
                   1230 px de ancho útil (una ventana de 1280 con la barra de
                   desplazamiento a la vista deja unos 1265).
   Sin radios en ninguna parte: los puntos son cuadrados, como los botones.

   MOVIMIENTO (todo se anula con prefers-reduced-motion; el contenido es el mismo)
   Al entrar       la curva elegida se traza una vez de izquierda a derecha (1,2 s)
                   y las tres cifras cuentan desde cero (0,9 s)
   Al cambiar      las cifras cuentan de lo anterior a lo nuevo (0,36 s) y la curva
                   y el eje se desplazan (0,42 s; 0,62 s al cambiar de escala)
   Cruz            sigue al cursor o al dedo sin retraso, de pago en pago
   Nada aparece al hacer scroll.
   ========================================================================== */

.calc-sitio {
  --pantalla: #091A15;
  --linea: rgba(244, 239, 228, .14);
  --linea-suave: rgba(244, 239, 228, .075);
  --marfil-2: rgba(244, 239, 228, .74);
  /* El tablero llega de borde a borde y trae su propio aire: la sección no añade ninguno */
  padding-block: 0;
  background: var(--marfil);
  color: var(--tinta);
}
.calc-sitio [hidden] { display: none !important; }

/* Los títulos que reciben el foco al encender o al enviar no son controles: sin anillo */
.calc-sitio h2:focus,
.calc-sitio h3:focus,
.calc-sitio .calendario-pagos:focus,
.calc-sitio .dejar:focus { outline: none; }

/* Lo que solo oyen los lectores de pantalla */
.calc-sitio .solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Los mandos de la casa -----------------------------------------------------
   Deslizador   filete de 2 px; oro hasta el cursor, marfil después. El cursor
                es una pletina de oro de 12 × 28 px, sin radio.
   Plazo        tres casillas rectas con filete; la elegida, en oro lleno como
                el botón. Por dentro son botones de opción del navegador
                (flechas, espacio y lectores de pantalla funcionan solos).
   Campo        sin caja: un filete debajo, que al enfocar pasa a oro de 2 px. */

/* La etiqueta de moneda que acompaña a cada cifra */
.calc-sitio .moneda {
  font: 600 .75rem/1 var(--sans);
  letter-spacing: .16em;
  color: var(--oro-claro);
}

.calc-sitio .campo__rotulo {
  display: block;
  padding: 0;
  font: 600 .75rem/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro-claro);
}

.calc-sitio .campo {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.calc-sitio .campo__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.calc-sitio .campo__monto {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .7rem;
  border-bottom: 1px solid rgba(244, 239, 228, .45);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.calc-sitio .campo__monto:focus-within {
  border-bottom-color: var(--oro-claro);
  box-shadow: 0 2px 0 var(--oro-claro);
}
.calc-sitio .campo__entrada {
  width: 6.8ch;
  margin: 0;
  padding: .1rem 0 .2rem;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--marfil);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.012em;
  text-align: right;
  caret-color: var(--oro-claro);
}
.calc-sitio .campo__entrada:focus { outline: none; }
/* Lo seleccionado dentro del campo, en los colores de la casa y no en el azul del sistema */
.calc-sitio .campo__entrada::selection {
  background: var(--oro);
  color: var(--selva-hondo);
}

/* El deslizador. --fraccion (de 0 a 1) la pone calculadora.js; el relleno llega al centro del cursor. */
.calc-sitio .deslizador {
  --fraccion: .0361;
  --cursor: .75rem;
  --hasta: calc(var(--cursor) / 2 + (100% - var(--cursor)) * var(--fraccion));
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  margin: .35rem 0 0;
  padding: 0;
  background: none;
  border-radius: 0;
  cursor: pointer;
}
.calc-sitio .deslizador::-webkit-slider-runnable-track { height: 2px; }
.calc-sitio .deslizador::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--cursor);
  height: 1.75rem;
  margin-top: calc(1px - .875rem);
  background: var(--oro-claro);
  border: 0;
  border-radius: 0;
  transition: background-color .2s ease;
}
.calc-sitio .deslizador::-moz-range-track { height: 2px; }
.calc-sitio .deslizador::-moz-range-progress {
  height: 2px;
  background: var(--oro);
}
.calc-sitio .deslizador::-moz-range-thumb {
  width: var(--cursor);
  height: 1.75rem;
  background: var(--oro-claro);
  border: 0;
  border-radius: 0;
  transition: background-color .2s ease;
}
.calc-sitio .deslizador:hover::-webkit-slider-thumb,
.calc-sitio .deslizador:active::-webkit-slider-thumb { background: var(--marfil); }
.calc-sitio .deslizador:hover::-moz-range-thumb,
.calc-sitio .deslizador:active::-moz-range-thumb { background: var(--marfil); }
/* El foco se marca en el cursor, no alrededor de todo el control: un anillo no debe pisar la regla escrita debajo */
.calc-sitio .deslizador:focus-visible { outline: none; }
.calc-sitio .deslizador:focus-visible::-webkit-slider-thumb {
  background: var(--marfil);
  outline: 2px solid var(--foco);
  outline-offset: 3px;
}
.calc-sitio .deslizador:focus-visible::-moz-range-thumb {
  background: var(--marfil);
  outline: 2px solid var(--foco);
  outline-offset: 3px;
}

.calc-sitio .campo__ayuda {
  line-height: 1.5;
  color: var(--oro-claro);
}

.calc-sitio .plazos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.calc-sitio .plazo {
  position: relative;
  display: block;
}
.calc-sitio .plazo input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.calc-sitio .plazo__caja {
  display: grid;
  height: 100%;
  border: 1px solid rgba(244, 239, 228, .4);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.calc-sitio .plazo__meses {
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.calc-sitio .plazo__tasa {
  font: 600 .6875rem/1.2 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--oro-claro);
  transition: color .2s ease;
}
.calc-sitio .plazo:hover .plazo__caja { border-color: var(--oro-claro); }
.calc-sitio .plazo input:checked + .plazo__caja {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--selva-hondo);
}
.calc-sitio .plazo input:checked + .plazo__caja .plazo__tasa { color: var(--selva-hondo); }
.calc-sitio .plazo input:focus-visible + .plazo__caja {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
}

/* Las dos notas, la de cálculo y la de riesgo: mismo tamaño, mismo color, juntas */
.calc-sitio .notas { display: grid; }
.calc-sitio .notas p { color: rgba(244, 239, 228, .88); }

/* El calendario de pagos, sobre marfil: cabeza fija en las columnas 1 a 5 y la tabla desde la 6 */
.calc-sitio .calc__abajo {
  --foco: var(--tinta);
  padding-block: var(--seccion);
}
.calc-sitio .calendario__rejilla {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--medianil);
  align-items: start;
}
.calc-sitio .calendario__cabeza {
  grid-column: 1 / span 5;
  position: sticky;
  top: 7rem;
}
.calc-sitio .comparar h3,
.calc-sitio .calendario-pagos h3 {
  font-weight: 420;
  font-size: clamp(2.375rem, 4.8vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.022em;
}
.calc-sitio .calendario__resumen {
  max-width: 23rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--oro);
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.55;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--tinta-suave);
}
.calc-sitio .calendario__tabla { grid-column: 6 / -1; }

.calc-sitio .calendario {
  width: 100%;
  border-collapse: collapse;
}
.calc-sitio .calendario th,
.calc-sitio .calendario td {
  padding: 1.05rem 0 1.05rem 1rem;
  border-bottom: 1px solid rgba(18, 26, 22, .14);
  text-align: left;
  vertical-align: baseline;
  font-weight: 400;
}
.calc-sitio .calendario th:first-child { padding-left: 0; }
.calc-sitio .calendario .num { text-align: right; }
.calc-sitio .calendario thead th {
  padding-block: 0 .9rem;
  border-bottom: 1px solid var(--tinta);
  font: 600 .75rem/1.3 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.calc-sitio .calendario td {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.15;
  white-space: nowrap;
}
.calc-sitio .calendario tbody th { white-space: nowrap; }
.calc-sitio .calendario__n {
  display: inline-block;
  min-width: 1.5em;
  font-weight: 500;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.15;
}
.calc-sitio .calendario__mes {
  font: 400 1rem/1.35 var(--sans);
  color: var(--tinta-suave);
}
.calc-sitio .calendario .es-cero { color: var(--tinta-suave); }
.calc-sitio .calendario .calendario__pago { font-weight: 500; }
.calc-sitio .calendario tbody tr:last-child th,
.calc-sitio .calendario tbody tr:last-child td { border-bottom-color: var(--tinta); }
.calc-sitio .calendario tfoot th,
.calc-sitio .calendario tfoot td {
  border-bottom: 1px solid var(--oro);
  font-weight: 500;
}
.calc-sitio .calendario tfoot th {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.15;
}
.calc-sitio .calendario__unidad {
  margin-top: 1rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}

@media (max-width: 900px) {
  .calc-sitio .calendario__rejilla { grid-template-columns: minmax(0, 1fr); }
  .calc-sitio .calendario__rejilla > * { grid-column: 1; }
  .calc-sitio .comparar h3,
  .calc-sitio .calendario-pagos h3 { font-size: clamp(2.375rem, 7vw, 3.75rem); }
  .calc-sitio .calendario__cabeza { position: static; margin-bottom: 2.5rem; }
  .calc-sitio .calendario__resumen { max-width: 30rem; }
}
@media (max-width: 700px) {
  .calc-sitio .calendario th,
  .calc-sitio .calendario td { padding-left: .6rem; }
  .calc-sitio .calendario thead th { letter-spacing: .14em; }
  .calc-sitio .calendario__mes { font-size: .9375rem; }
}
/* La regla general de movimiento reducido no alcanza al cursor del deslizador */
@media (prefers-reduced-motion: reduce) {
  .calc-sitio .deslizador::-webkit-slider-thumb { transition: none; }
  .calc-sitio .deslizador::-moz-range-thumb { transition: none; }
}

/* Etiqueta en versales: la de las cifras, la lectura, la escala, la cinta y la boleta */
.calc-sitio .cifras dt,
.calc-sitio .lectura dt,
.calc-sitio .grafico__titulo,
.calc-sitio .escala__opcion,
.calc-sitio .cinta__t,
.calc-sitio .boleta__rotulo {
  font: 600 .6875rem/1.2 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro-claro);
}

/* La serif de la casa, con numerales de ancho fijo */
.calc-sitio .mesa h2,
.calc-sitio .cifras__mayor,
.calc-sitio .cifras__valor,
.calc-sitio .comparacion__meses,
.calc-sitio .comparacion td,
.calc-sitio .comparar h3,
.calc-sitio .calendario-pagos h3,
.calc-sitio .campo__entrada,
.calc-sitio .plazo__meses,
.calc-sitio .calendario tbody th,
.calc-sitio .calendario td,
.calc-sitio .calendario tfoot th,
.calc-sitio .dejar h3,
.calc-sitio .boleta__consulta,
.calc-sitio .dato__entrada,
.calc-sitio .recibido__titulo {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-variant-numeric: lining-nums tabular-nums;
}

/* El tablero ---------------------------------------------------------------- */

.calc-sitio .mesa {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--cabecera-fija, 4.25rem));
  min-height: min(100svh - var(--cabecera-fija, 4.25rem), 72rem);
  --foco: var(--oro-claro);
  background: var(--selva);
  color: var(--marfil);
  overflow-x: hidden;
  overflow-x: clip;
}

.calc-sitio .mesa__tablero {
  --izq: clamp(21.5rem, 30vw, 28rem);
  --aire: 2.25rem;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns:
    minmax(var(--margen), 1fr)
    minmax(0, var(--izq))
    minmax(0, calc(var(--ancho) - var(--izq)))
    minmax(var(--margen), 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  border-top: 1px solid var(--linea);
}

/* Panel de mandos: título arriba, notas abajo y, entre los dos, los mandos. Lo que sobre de alto se reparte
   por igual encima y debajo de los mandos, para que en una pantalla alta no quede un hueco al fondo. */
.calc-sitio .mesa__mandos {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1.5rem var(--aire) 0 0;
}
.calc-sitio .mesa__pie {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  padding: 1.1rem var(--aire) 1.4rem 0;
}

.calc-sitio .mesa h2 {
  margin-top: .8rem;
  font-weight: 420;
  font-size: clamp(1.75rem, 2.45vw, 2.5rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.calc-sitio .mesa__bajada {
  max-width: 26rem;
  margin-top: .6rem;
  font-size: .9375rem;
  line-height: 1.45;
  color: rgba(244, 239, 228, .86);
}

.calc-sitio .mandos {
  margin-block: auto;
  padding-top: 1.4rem;
}

/* Los campos del sitio, a la medida del tablero (crecen un poco con el alto de la ventana) */
.calc-sitio .campo + .campo { margin-top: clamp(1.15rem, 3.4vh, 2.5rem); }
.calc-sitio .campo__entrada { font-size: clamp(1.625rem, min(2.2vw, 4.2vh), 2.75rem); }
.calc-sitio .deslizador {
  height: 2.5rem;
  margin-top: .1rem;
}
.calc-sitio .campo__ayuda {
  min-height: 0;
  margin-top: 0;
  font-size: .8125rem;
}
.calc-sitio .campo__ayuda.es-aviso { margin-top: .5rem; }
.calc-sitio .plazos {
  gap: .5rem;
  margin-top: .7rem;
}
.calc-sitio .plazo__caja {
  gap: .35rem;
  padding: clamp(.7rem, 1.7vh, 1.3rem) .8rem clamp(.75rem, 1.8vh, 1.35rem);
  border-color: rgba(244, 239, 228, .4);
}
/* El borde de un plazo sin elegir (arriba) y el tramo sin llenar del deslizador son el contorno de un mando:
   piden 3:1 sobre el verde. Con el marfil al 40 % dan 3,3:1; en estilos.css van al 30 % y al 28 %. */
.calc-sitio .deslizador::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--oro) 0, var(--oro) var(--hasta), rgba(244, 239, 228, .4) var(--hasta), rgba(244, 239, 228, .4) 100%);
}
.calc-sitio .deslizador::-moz-range-track { background: rgba(244, 239, 228, .4); }
.calc-sitio .plazo__meses { font-size: clamp(1.125rem, min(1.5vw, 2.9vh), 1.5rem); }
.calc-sitio .plazo__tasa {
  font-size: .6875rem;
  letter-spacing: .12em;
}

/* La regla del deslizador: seis marcas, cada una bajo el centro del cursor en ese monto.
   --f es (monto − 1.000) ÷ 249.000. */
.calc-sitio .regla {
  --cursor: .75rem;
  position: relative;
  height: 1.45rem;
  margin-top: -.3rem;
  font: 500 .6875rem/1 var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--marfil-2);
}
.calc-sitio .regla__marca {
  position: absolute;
  top: 0;
  left: calc(var(--cursor) / 2 + (100% - var(--cursor)) * var(--f));
  padding-top: .6rem;
  transform: translateX(-50%);
  white-space: nowrap;
}
.calc-sitio .regla__marca::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: .3rem;
  background: rgba(244, 239, 228, .45);
}
.calc-sitio .regla__marca--1 { --f: 0; transform: none; }
.calc-sitio .regla__marca--1::before { left: 0; }
.calc-sitio .regla__marca--50 { --f: .19679; }
.calc-sitio .regla__marca--100 { --f: .39759; }
.calc-sitio .regla__marca--150 { --f: .59839; }
.calc-sitio .regla__marca--200 { --f: .7992; }
.calc-sitio .regla__marca--250 { --f: 1; transform: translateX(-100%); }
.calc-sitio .regla__marca--250::before { left: auto; right: 0; }

/* La ficha de términos de lo elegido. Solo cuando la ventana es alta y sobra sitio bajo los mandos. */
.calc-sitio .ficha-terminos { display: none; }
@media (min-width: 900px) and (min-height: 900px) {
  .calc-sitio .ficha-terminos {
    display: block;
    margin-block: 1.25rem .5rem;
    border-top: 1px solid var(--linea);
  }
  .calc-sitio .ficha-terminos > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: clamp(.45rem, 1.25vh - .2rem, .8rem);
    border-bottom: 1px solid var(--linea-suave);
  }
  .calc-sitio .ficha-terminos > div:last-child { border-bottom: 0; }
  .calc-sitio .ficha-terminos dt {
    font: 600 .6875rem/1.2 var(--sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--oro-claro);
  }
  .calc-sitio .ficha-terminos dd {
    font-size: .875rem;
    line-height: 1.3;
    font-variant-numeric: lining-nums tabular-nums;
    text-align: right;
    color: rgba(244, 239, 228, .92);
  }
}

/* Las dos notas, la de cálculo y la de riesgo: mismo tamaño, mismo color, juntas */
.calc-sitio .mesa__pie .notas {
  gap: .55rem;
  margin-top: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--linea);
}
.calc-sitio .mesa__pie .notas p {
  font-size: .8125rem;
  line-height: 1.5;
}
.calc-sitio .mesa__hablemos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  margin-top: 1rem;
}
.calc-sitio .mesa__hablemos .boton {
  min-height: 2.75rem;
  padding: 0 1.5rem;
}
/* El correo acompaña al botón cuando cabe a su lado; si no, el botón basta (el correo está en el cierre) */
.calc-sitio .mesa__correo {
  display: none;
  font-size: .8125rem;
  line-height: 1.3;
  color: rgba(244, 239, 228, .86);
  overflow-wrap: anywhere;
}
@media (min-width: 1400px) {
  .calc-sitio .mesa__correo { display: inline; }
}

/* La pantalla ---------------------------------------------------------------- */

.calc-sitio .mesa__pantalla {
  grid-column: 3 / 5;
  grid-row: 1 / 3;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--margen);
  grid-template-rows: auto minmax(0, 1fr);
  padding-left: var(--aire);
  background: var(--pantalla);
  border-left: 1px solid var(--linea);
}
@supports (grid-template-columns: subgrid) {
  .calc-sitio .mesa__pantalla { grid-template-columns: subgrid; }
}

/* Las tres cifras: la principal, descomunal; las otras dos, a su lado */
.calc-sitio .cifras {
  --cifra: clamp(4.5rem, min(10.4vw, 21vh), 14rem);
  position: relative;
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 2rem;
  padding-block: 1.4rem 1.2rem;
}
.calc-sitio .cifras::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--aire));
  right: -100vw;
  bottom: 0;
  height: 1px;
  background: var(--linea);
}
.calc-sitio .cifras dd {
  font-variant-numeric: lining-nums tabular-nums;
}

.calc-sitio .cifras__principal {
  grid-row: 1 / span 2;
  align-self: end;
  min-width: 0;
}
.calc-sitio .cifras__mayor {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--cifra) * .08);
  margin-top: calc(var(--cifra) * .22);
  font-weight: 420;
  font-size: var(--cifra);
  line-height: .74;
  letter-spacing: -.035em;
  white-space: nowrap;
}
/* «USD» va arriba, a la altura de la cabeza de las cifras, como un exponente. La caja de la cifra es más
   baja que sus numerales (interlínea .74): por eso sube con un margen negativo. */
.calc-sitio .cifras__mayor .moneda {
  margin-top: calc(var(--cifra) * -.15);
  font-size: clamp(.75rem, 1vw, .9375rem);
  letter-spacing: .16em;
}
.calc-sitio .cifras__base {
  margin-top: calc(var(--cifra) * .16);
  font-size: .9375rem;
  line-height: 1.4;
  color: rgba(244, 239, 228, .86);
}
/* «Es una estimación, no una garantía.», pegada a la cifra principal: solo en teléfono, donde las dos notas
   quedan más de una pantalla abajo. En escritorio las notas ya están a la vista junto a la cifra. */
.calc-sitio .cifras__estimacion { display: none; }

.calc-sitio .cifras__menor {
  grid-column: 2;
  align-self: end;
  min-width: 14rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--linea);
}
.calc-sitio .cifras__menor + .cifras__menor {
  margin-top: .85rem;
  padding-top: .85rem;
  box-shadow: 0 -1px 0 var(--linea);
}
.calc-sitio .cifras__valor {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-top: .4rem;
  font-weight: 500;
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.calc-sitio .cifras__valor .moneda { font-size: .6875rem; }
.calc-sitio .cifras__nota {
  margin-top: .35rem;
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--marfil-2);
}

/* El gráfico ------------------------------------------------------------------ */

.calc-sitio .grafico {
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--margen);
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-bottom: .6rem;
}
@supports (grid-template-columns: subgrid) {
  .calc-sitio .grafico { grid-template-columns: subgrid; }
}

.calc-sitio .grafico__cabeza {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: .5rem 1.25rem;
  padding-block: .65rem .5rem;
}
.calc-sitio .grafico__titulo {
  flex: 1 1 auto;
  color: var(--marfil);
}
.calc-sitio .grafico__titulo-moneda {
  margin-left: .5em;
  color: var(--oro-claro);
}

/* Escala del eje vertical: dos botones juntos; el elegido, con filete de oro */
.calc-sitio .escala {
  flex: none;
  display: flex;
  border: 1px solid var(--linea);
}
.calc-sitio .escala__opcion {
  min-height: 2rem;
  padding: 0 .85rem;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--marfil-2);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.calc-sitio .escala__opcion + .escala__opcion { border-left: 1px solid var(--linea); }
.calc-sitio .escala__opcion:hover { color: var(--marfil); }
.calc-sitio .escala__opcion[aria-pressed="true"] {
  background: rgba(244, 239, 228, .08);
  box-shadow: inset 0 -2px 0 var(--oro);
  color: var(--marfil);
}
.calc-sitio .escala__opcion:focus-visible { outline-offset: 2px; }

.calc-sitio .grafico__tabla {
  position: relative;
  flex: none;
  padding-block: .2rem;
  font: 500 .8125rem/1.2 var(--sans);
  color: rgba(244, 239, 228, .86);
  border-bottom: 1px solid var(--oro);
  transition: color .2s ease, border-color .2s ease;
}
.calc-sitio .grafico__tabla:hover { color: var(--oro-claro); border-color: var(--oro-claro); }
.calc-sitio .grafico__tabla::after {
  content: "";
  position: absolute;
  inset: -.6rem -.4rem;
}

.calc-sitio .grafico__lienzo {
  grid-column: 1 / -1;
  position: relative;
  min-height: 15rem;
}
.calc-sitio .grafico__svg {
  position: absolute;
  inset: 0;
  display: block;
  overflow: visible;
}
.calc-sitio .grafico__lector {
  position: absolute;
  inset: 0;
  cursor: crosshair;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.calc-sitio .grafico__lector:focus { outline: none; }
.calc-sitio .grafico__lector:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: -2px;
}

/* La lectura: qué trimestre marca la cruz, cuánto se paga y cuánto va acumulado.
   En pantallas anchas va sobre la esquina vacía del gráfico; en estrechas, en una banda encima. */
.calc-sitio .lectura {
  position: absolute;
  top: 1.1rem;
  left: 1.25rem;
  z-index: 1;
  display: grid;
  gap: .4rem;
  pointer-events: none;
}
.calc-sitio .lectura > div {
  display: grid;
  grid-template-columns: 6rem auto;
  justify-content: start;
  align-items: baseline;
}
/* Cada texto de la lectura lleva debajo el fondo de la pantalla, como los rótulos del gráfico: si una curva
   pasa por esa esquina (las de los plazos más largos, cuando se elige 12 meses), no cruza las letras. */
.calc-sitio .lectura dt,
.calc-sitio .lectura dd {
  background: var(--pantalla);
  box-shadow: 0 0 0 .2rem var(--pantalla);
}
.calc-sitio .lectura dd {
  font: 500 .8125rem/1.2 var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--marfil);
  white-space: nowrap;
}
.calc-sitio .lectura__nota {
  display: block;
  margin-top: .2rem;
  font-size: .75rem;
  color: var(--marfil-2);
}
.calc-sitio .es-banda .lectura {
  top: .5rem;
  left: .25rem;
  right: .25rem;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 .5rem;
}
.calc-sitio .es-banda .lectura > div { display: block; }
.calc-sitio .es-banda .lectura dd { margin-top: .3rem; }

/* El dibujo */
.calc-sitio .grafico__svg text {
  font: 500 .75rem/1 var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
  fill: var(--marfil-2);
}
.calc-sitio .grafico__svg line,
.calc-sitio .grafico__svg path,
.calc-sitio .grafico__svg rect { shape-rendering: crispEdges; }

.calc-sitio .g-v,
.calc-sitio .g-h { stroke: rgba(244, 239, 228, .09); stroke-width: 1; }
.calc-sitio .g-v.es-ano { stroke: rgba(244, 239, 228, .2); }
.calc-sitio .g-base { stroke: rgba(244, 239, 228, .55); stroke-width: 1; }
.calc-sitio .g-borde { stroke: rgba(244, 239, 228, .22); stroke-width: 1; }

.calc-sitio .grafico__svg .g-eje-x.es-vencimiento { fill: var(--oro-claro); font-weight: 600; }
.calc-sitio .grafico__svg .g-eje-x.es-fuera { fill: rgba(244, 239, 228, .56); }
.calc-sitio .grafico__svg .g-eje-y.es-dentro,
.calc-sitio .grafico__svg .g-rotulo {
  paint-order: stroke;
  stroke: var(--pantalla);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.calc-sitio .grafico__svg .g-leyenda,
.calc-sitio .grafico__svg .g-cinta-t {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: var(--oro-claro);
}
.calc-sitio .g-medidor { visibility: hidden; }

.calc-sitio .g-curva {
  fill: none;
  stroke: rgba(244, 239, 228, .5);
  stroke-width: 1;
  transition: stroke .3s ease;
}
.calc-sitio .g-curva.es-activa {
  stroke: var(--oro-claro);
  stroke-width: 2;
}
.calc-sitio .g-muro {
  stroke: rgba(244, 239, 228, .34);
  stroke-width: 1;
  transition: stroke .3s ease;
}
.calc-sitio .g-muro.es-activa {
  stroke: var(--marfil);
  stroke-width: 2;
}
/* En un cuadro grande, la curva elegida gana un píxel: el oro manda sobre el muro del capital */
.calc-sitio .es-grande .g-curva.es-activa { stroke-width: 3; }
.calc-sitio .g-area { fill: url(#mesa-area); }
.calc-sitio .mesa-area__arriba { stop-color: #D2B77F; stop-opacity: .34; }
.calc-sitio .mesa-area__abajo { stop-color: #D2B77F; stop-opacity: .05; }

.calc-sitio .g-guia {
  stroke: rgba(210, 183, 127, .7);
  stroke-width: 1;
  stroke-dasharray: 1 4;
}

.calc-sitio .g-punto { fill: var(--oro-claro); }
.calc-sitio .g-punto.es-cima { fill: var(--marfil); }

.calc-sitio .g-corte { stroke: rgba(244, 239, 228, .55); stroke-width: 1.25; shape-rendering: auto !important; }
.calc-sitio .g-corte.es-activa { stroke: var(--marfil); stroke-width: 1.5; }
.calc-sitio .g-corte-fondo { fill: var(--pantalla); }

.calc-sitio .grafico__svg .g-rotulo { fill: rgba(244, 239, 228, .7); }
.calc-sitio .grafico__svg .g-rotulo.es-tenue { stroke: none; }
.calc-sitio .grafico__svg .g-rotulo.es-activa { fill: var(--marfil); font-size: .8125rem; font-weight: 600; }
.calc-sitio .grafico__svg .g-rotulo.es-capital { fill: rgba(244, 239, 228, .86); }
/* En teléfono, a 36 meses, «Capital 250.000» no cabe a su tamaño entre el muro de 24 meses y el suyo */
.calc-sitio .grafico__svg .g-rotulo.es-capital.es-apretado { font-size: .6875rem; }
.calc-sitio .g-punto-tenue { fill: rgba(244, 239, 228, .6); }
/* Con las cifras del eje dentro del cuadro (teléfono) la curva elegida no lleva rótulo: ya la nombran el
   título, la etiqueta de oro y la lectura, y en ese tercio del cuadro no cabe un rótulo más. */
.calc-sitio .es-eje-dentro .grafico__svg .g-rotulo.es-activa { display: none; }

.calc-sitio .g-cinta-filete { stroke: var(--linea); stroke-width: 1; }
.calc-sitio .grafico__svg .g-cinta-v {
  font-size: .8125rem;
  fill: rgba(244, 239, 228, .92);
}
.calc-sitio .grafico__svg .es-final .g-cinta-v {
  fill: var(--oro-claro);
  font-weight: 600;
}
/* Cuando las cifras no caben a su tamaño (pagos con céntimos en una pantalla de 1280 o 1440), un punto menos;
   y medio punto menos todavía si ni así (un portátil de 1280 con la barra de desplazamiento a la vista) */
.calc-sitio .grafico__svg .g-cinta.es-prieta .g-cinta-v { font-size: .6875rem; }
.calc-sitio .grafico__svg .g-cinta.es-justa .g-cinta-v { font-size: .65rem; }

.calc-sitio .g-cruz-v,
.calc-sitio .g-cruz-h {
  stroke: rgba(244, 239, 228, .6);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.calc-sitio .g-cruz-punto {
  fill: var(--pantalla);
  stroke: var(--marfil);
  stroke-width: 1.5;
}
.calc-sitio .g-cruz-celda { fill: rgba(210, 183, 127, .16); }
.calc-sitio .g-etiqueta-caja { fill: var(--oro-claro); }
.calc-sitio .grafico__svg .g-etiqueta-t {
  fill: var(--selva-hondo);
  font-weight: 600;
}

/* Entrada: la curva elegida se traza una vez; lo demás espera a que termine */
.calc-sitio .es-entrada .g-curva.es-activa {
  stroke-dasharray: 1;
  animation: calc-trazar 1.2s cubic-bezier(.3, .55, .2, 1) both;
}
.calc-sitio .es-entrada .g-muro.es-activa,
.calc-sitio .es-entrada .g-puntos,
.calc-sitio .es-entrada .g-marcas,
.calc-sitio .es-entrada .g-cruz,
.calc-sitio .es-entrada .g-area {
  animation: calc-asomar .5s ease .95s both;
}
@keyframes calc-trazar {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes calc-asomar {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* La cinta de pagos en tira (cuando no cabe alineada bajo el gráfico): se desliza con el dedo */
.calc-sitio .cinta { display: none; }
.calc-sitio .grafico:not(.es-alineada) .cinta {
  grid-column: 1 / -1;
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-top: 1px solid var(--linea);
}
.calc-sitio .cinta::-webkit-scrollbar { display: none; }
.calc-sitio .cinta__celda {
  flex: 1 0 5.75rem;
  display: grid;
  gap: .4rem;
  padding: .75rem .9rem .8rem 0;
  cursor: pointer;
}
.calc-sitio .cinta__celda + .cinta__celda {
  padding-left: .9rem;
  border-left: 1px solid var(--linea-suave);
}
.calc-sitio .cinta__t { white-space: nowrap; }
.calc-sitio .cinta__v {
  font: 500 .9375rem/1 var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--marfil);
}
.calc-sitio .cinta__celda.es-final .cinta__v { color: var(--oro-claro); font-weight: 600; }
.calc-sitio .cinta__celda.es-leida { background: rgba(210, 183, 127, .14); }

/* Los tres plazos, lado a lado (sobre marfil) -------------------------------- */

.calc-sitio .comparar {
  --foco: var(--tinta);
  padding-block: clamp(4rem, 8vw, 7.5rem) clamp(3rem, 6vw, 5.5rem);
}
.calc-sitio .comparar__rejilla {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--medianil);
  align-items: start;
}
.calc-sitio .comparar__cabeza { grid-column: 1 / span 4; }
.calc-sitio .comparar__resumen {
  max-width: 23rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--oro);
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.55;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--tinta-suave);
}
.calc-sitio .comparar__tabla { grid-column: 5 / -1; }

.calc-sitio .comparacion {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.calc-sitio .comparacion thead td { width: 30%; }
.calc-sitio .comparacion th,
.calc-sitio .comparacion td {
  padding: 1.05rem .9rem;
  border-bottom: 1px solid rgba(18, 26, 22, .14);
  text-align: right;
  vertical-align: baseline;
  font-weight: 400;
}
.calc-sitio .comparacion thead th,
.calc-sitio .comparacion thead td {
  padding: 0;
  border-bottom: 1px solid var(--tinta);
  vertical-align: bottom;
}
.calc-sitio .comparacion__plazo {
  display: grid;
  gap: .4rem;
  width: 100%;
  padding: 1rem .9rem .95rem;
  background: none;
  border: 0;
  border-top: 3px solid transparent;
  border-radius: 0;
  color: inherit;
  text-align: right;
  cursor: pointer;
  transition: border-color .2s ease;
}
.calc-sitio .comparacion__plazo:hover { border-top-color: rgba(122, 92, 38, .5); }
.calc-sitio .comparacion__plazo[aria-pressed="true"] { border-top-color: var(--oro-tinta); }
.calc-sitio .comparacion__plazo:focus-visible { outline-offset: -3px; }
.calc-sitio .comparacion__meses {
  font-weight: 500;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.calc-sitio .comparacion__tasa {
  font: 600 .75rem/1.2 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--oro-tinta);
}
.calc-sitio .comparacion tbody th {
  padding-left: 0;
  text-align: left;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--tinta-suave);
}
.calc-sitio .comparacion td {
  font-weight: 500;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  line-height: 1.1;
  white-space: nowrap;
}
.calc-sitio .comparacion__mayor td {
  padding-block: 1.3rem 1.2rem;
  font-weight: 420;
  font-size: clamp(1.625rem, 3.2vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.calc-sitio .comparacion .es-activa { background: rgba(184, 151, 90, .17); }
.calc-sitio .comparacion tbody tr:last-child th,
.calc-sitio .comparacion tbody tr:last-child td { border-bottom-color: var(--oro); }

/* El calendario de pagos: la tabla del sitio, con una columna más --------------- */

.calc-sitio .calendario-pagos { padding-top: 0; }
.calc-sitio .calendario-pagos:focus { outline: none; }
.calc-sitio .calendario-pagos .calendario__rejilla {
  padding-top: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid rgba(18, 26, 22, .14);
}
.calc-sitio .calendario .calendario__acum { color: var(--tinta-suave); }
.calc-sitio .calendario tbody tr:last-child .calendario__acum,
.calc-sitio .calendario tfoot .calendario__acum { color: var(--tinta); }

/* Cierre: «Dejanos tus datos.» -------------------------------------------------
   Sobre el verde de la casa. A la izquierda el título y la boleta con la consulta
   (lo que marca el tablero en ese momento, en la pantalla honda); a la derecha el
   formulario, con los campos de la casa: sin caja, un filete debajo que al
   enfocar pasa a oro. Los avisos de cada campo van en oro claro.

   Título            clamp(2.375rem, 5vw, 5rem), como los títulos de sección
   Consulta          clamp(1.625rem, 2.5vw, 2.375rem), Newsreader, cifras de ancho fijo
   Rótulo de campo   .75rem / 600 / versales / tracking .2em (el de los mandos)
   Lo que se escribe Newsreader 1.3125rem
   Casilla           cuadrada, 22 px, sin radio; marcada, en oro lleno
   Contrastes sobre el verde de la casa: marfil 13,3:1; marfil al 92 % 11,5:1;
   oro claro 7,9:1; marfil al 74 % 7,9:1; el filete de los campos (marfil al
   50 %) 4,4:1, que para un borde pide 3:1. */

.calc-sitio .dejar {
  padding-block: clamp(4rem, 8vw, 7.5rem);
  background: var(--selva);
  color: var(--marfil);
}
.calc-sitio .dejar__rejilla {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--medianil);
  align-items: start;
}
.calc-sitio .dejar__cabeza { grid-column: 1 / span 5; }
.calc-sitio .dejar h3 {
  margin-top: 1.25rem;
  font-weight: 420;
  font-size: clamp(2.375rem, 5vw, 5rem);
  line-height: 1;
  letter-spacing: -.024em;
  text-wrap: balance;
}
.calc-sitio .dejar__linea {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(1.0625rem, 1.45vw, 1.3125rem);
  line-height: 1.5;
  color: rgba(244, 239, 228, .92);
}

/* La boleta: la consulta que viaja con el formulario */
.calc-sitio .boleta {
  max-width: 27rem;
  margin-top: clamp(2rem, 4vw, 3.25rem);
  padding: 1.25rem 1.5rem 1.2rem;
  background: var(--pantalla);
  border: 1px solid var(--linea);
  border-top: 2px solid var(--oro);
}
.calc-sitio .boleta__consulta {
  margin-top: .8rem;
  font-weight: 500;
  font-size: clamp(1.625rem, 2.5vw, 2.375rem);
  line-height: 1.08;
  letter-spacing: -.015em;
}
.calc-sitio .boleta__pie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--linea);
  font-size: .875rem;
  line-height: 1.4;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--marfil-2);
}
.calc-sitio .boleta__cambiar {
  position: relative;
  color: rgba(244, 239, 228, .92);
  border-bottom: 1px solid var(--oro);
  transition: color .2s ease, border-color .2s ease;
}
.calc-sitio .boleta__cambiar:hover { color: var(--oro-claro); border-color: var(--oro-claro); }
.calc-sitio .boleta__cambiar::after {
  content: "";
  position: absolute;
  inset: -.7rem -.5rem;
}

/* El formulario */
.calc-sitio .dejar__forma {
  grid-column: 7 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--medianil);
  row-gap: 1.15rem;
  padding-top: .35rem;
}
/* Los rótulos arrancan todos a la misma altura y cada campo se apoya en el fondo de su celda: si un rótulo
   parte en dos renglones («Teléfono o WhatsApp Opcional», en pantallas justas), su filete queda a la misma
   altura que el del campo de al lado. */
.calc-sitio .dato {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.calc-sitio .dato--ancho { grid-column: 1 / -1; }

.calc-sitio .dato__rotulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .6em;
  font: 600 .75rem/1.2 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro-claro);
}
.calc-sitio .dato__opcional {
  margin-left: 0;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--marfil-2);
}
.calc-sitio .dato__entrada {
  display: block;
  width: 100%;
  height: 3.25rem;
  margin: 0;
  margin-top: auto;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(244, 239, 228, .5);
  border-radius: 0;
  color: var(--marfil);
  font-weight: 500;
  font-size: 1.3125rem;
  line-height: 1.2;
  caret-color: var(--oro-claro);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.calc-sitio .dato__entrada--texto {
  height: auto;
  min-height: 6.25rem;
  padding-block: .8rem .6rem;
  line-height: 1.4;
  resize: vertical;
}
.calc-sitio .dato__entrada:focus,
.calc-sitio .dato__entrada[aria-invalid="true"] {
  outline: none;
  border-bottom-color: var(--oro-claro);
}
.calc-sitio .dato__entrada:focus { box-shadow: 0 2px 0 var(--oro-claro); }
.calc-sitio .dato__entrada::selection {
  background: var(--oro);
  color: var(--selva-hondo);
}
/* Lo que el navegador rellena solo: sin su fondo claro, en los colores de la casa */
.calc-sitio .dato__entrada:-webkit-autofill,
.calc-sitio .dato__entrada:-webkit-autofill:hover,
.calc-sitio .dato__entrada:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--marfil);
  caret-color: var(--oro-claro);
  box-shadow: inset 0 0 0 100rem var(--selva);
  transition: background-color 100000s ease 0s;
}
.calc-sitio .dato__entrada:-webkit-autofill:focus { box-shadow: inset 0 0 0 100rem var(--selva), 0 2px 0 var(--oro-claro); }

/* El aviso de cada campo: un renglón reservado, para que nada salte al aparecer */
.calc-sitio .dato__error {
  min-height: 1.4em;
  margin-top: .4rem;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--oro-claro);
}

/* La casilla de consentimiento: por dentro es la del navegador (espacio, lectores de pantalla) */
.calc-sitio .casilla {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin-top: 1.4rem;
  cursor: pointer;
}
.calc-sitio .casilla__control {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.375rem;
  height: 1.375rem;
  margin: .1rem 0 0;
  opacity: 0;
  cursor: pointer;
}
.calc-sitio .casilla__caja {
  position: relative;
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: .1rem;
  border: 1px solid rgba(244, 239, 228, .6);
  transition: background-color .2s ease, border-color .2s ease;
}
.calc-sitio .casilla__caja::after {
  content: "";
  position: absolute;
  left: .42rem;
  top: .14rem;
  width: .4rem;
  height: .75rem;
  border: solid var(--selva-hondo);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}
.calc-sitio .casilla:hover .casilla__caja { border-color: var(--oro-claro); }
.calc-sitio .casilla__control:checked + .casilla__caja {
  background: var(--oro-claro);
  border-color: var(--oro-claro);
}
.calc-sitio .casilla__control:checked + .casilla__caja::after { opacity: 1; }
.calc-sitio .casilla__control:focus-visible + .casilla__caja {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
}
.calc-sitio .casilla__control[aria-invalid="true"] + .casilla__caja { border-color: var(--oro-claro); }
.calc-sitio .casilla__texto {
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(244, 239, 228, .92);
}
/* Bajo la casilla, el aviso se alinea con su texto */
.calc-sitio .casilla + .dato__error { padding-left: 2.275rem; }

.calc-sitio .dejar__envio {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  margin-top: .6rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(184, 151, 90, .8);
}
.calc-sitio .dejar__enviar {
  min-width: 10.5rem;
  justify-content: center;
}
.calc-sitio .es-enviando .dejar__enviar {
  background: rgba(244, 239, 228, .2);
  color: var(--marfil);
  cursor: progress;
}
.calc-sitio .dejar__nota {
  flex: 1 1 14rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--marfil-2);
}
/* La sociedad que responde por los datos (14-oct-2026), debajo del botón, a lo ancho del formulario */
.calc-sitio .dejar__responsable { margin-top: .75rem; }
.calc-sitio .dejar__estado {
  min-height: 1.5em;
  margin-top: .9rem;
  /* Si el envío falla, calculadora.js trae este renglón a la vista: que no quede pegado al borde */
  scroll-margin-bottom: 1.25rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--marfil-2);
}
.calc-sitio .dejar__estado.es-error { color: var(--oro-claro); }
.calc-sitio .dejar__estado a {
  color: var(--marfil);
  border-bottom: 1px solid var(--oro);
  overflow-wrap: anywhere;
}

/* La trampa para robots: fuera de la vista y del teclado */
.calc-sitio .trampa {
  position: absolute;
  left: -200vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* «Recibido»: ocupa el lugar del formulario */
.calc-sitio .recibido {
  grid-column: 7 / -1;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(184, 151, 90, .8);
}
.calc-sitio .recibido__titulo {
  font-weight: 420;
  font-size: clamp(2rem, 3.6vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.calc-sitio .recibido__consulta {
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.5;
  font-variant-numeric: lining-nums tabular-nums;
  color: rgba(244, 239, 228, .92);
}

/* Portátil bajo (1280 × 680): se aprieta el aire, no el contenido */
@media (min-width: 900px) and (max-height: 740px) {
  .calc-sitio .mesa__mandos { padding-top: 1.15rem; }
  .calc-sitio .mesa h2 { margin-top: .65rem; }
  .calc-sitio .mandos { padding-top: 1.05rem; }
  .calc-sitio .campo + .campo { margin-top: .9rem; }
  .calc-sitio .mesa__pie { padding-block: .9rem 1.1rem; }
  .calc-sitio .mesa__pie .notas { padding-top: .8rem; gap: .45rem; }
  .calc-sitio .mesa__hablemos { margin-top: .8rem; }
  .calc-sitio .cifras { padding-block: 1.15rem 1rem; }
  .calc-sitio .grafico__cabeza { padding-block: .5rem .35rem; }
  .calc-sitio .grafico { padding-bottom: .35rem; }
}

/* Entre 900 y 1180 px: las dos cifras del lado bajan a una fila bajo la principal */
@media (max-width: 1179px) {
  .calc-sitio .mesa__tablero { --izq: 20.5rem; --aire: 1.75rem; }
  .calc-sitio .plazo__caja { padding-inline: .6rem; }
  .calc-sitio .plazo__tasa { letter-spacing: .08em; }
  .calc-sitio .cifras {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 0;
  }
  .calc-sitio .cifras__principal {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-bottom: 1rem;
  }
  .calc-sitio .cifras__menor {
    grid-column: auto;
    grid-row: 2;
    min-width: 0;
    padding: .9rem 1rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--linea);
  }
  .calc-sitio .cifras__menor + .cifras__menor {
    margin-top: 0;
    padding: .9rem 0 0 1.25rem;
    border-left: 1px solid var(--linea);
    box-shadow: none;
  }
}

/* Teléfono y tableta vertical: una columna. Lo que se lee arriba, lo que se toca abajo:
   título, cifra y gráfico; después los mandos, a la altura del pulgar; luego las otras dos cifras y las notas.
   El orden del documento no cambia (mandos antes que gráfico): solo el orden a la vista. */
@media (max-width: 899px) {
  /* En la página principal la sección empieza en medio del recorrido: lleva su propio aire arriba */
  .calc-sitio .mesa {
    min-height: 0;
    padding-top: clamp(1rem, 4vw, 2rem);
  }
  .calc-sitio .mesa__tablero {
    display: flex;
    flex-direction: column;
    border-top: 0;
  }
  .calc-sitio .mesa__mandos,
  .calc-sitio .mesa__pantalla,
  .calc-sitio .mesa__cabeza { display: contents; }

  .calc-sitio .mesa__arriba {
    order: 1;
    margin: clamp(.75rem, 3vw, 1.75rem) var(--margen) 0;
  }
  .calc-sitio .mesa h2 {
    order: 1;
    margin: .7rem var(--margen) 0;
    font-size: clamp(1.875rem, 7.4vw, 3rem);
  }

  .calc-sitio .cifras {
    --cifra: clamp(4rem, 21vw, 8rem);
    display: contents;
  }
  .calc-sitio .cifras::after { content: none; }
  .calc-sitio .cifras__principal {
    order: 2;
    align-self: stretch;
    margin-inline: var(--margen);
    padding-block: 1.25rem 1.35rem;
  }
  .calc-sitio .cifras__mayor { margin-top: calc(var(--cifra) * .26); }
  .calc-sitio .cifras__base { margin-top: calc(var(--cifra) * .15); }
  .calc-sitio .cifras__estimacion { display: block; }

  .calc-sitio .grafico {
    order: 3;
    display: block;
    padding: 0 var(--margen) .25rem;
    background: var(--pantalla);
    border-block: 1px solid var(--linea);
  }
  .calc-sitio .grafico__cabeza {
    flex-wrap: wrap;
    gap: .6rem .5rem;
    padding-block: .8rem .6rem;
  }
  .calc-sitio .grafico__titulo {
    flex: 1 1 0;
    min-width: 7.5rem;
  }
  .calc-sitio .escala__opcion {
    min-height: 2.75rem;
    padding: 0 .6rem;
    letter-spacing: .08em;
  }
  /* En un teléfono el título se queda en «Acumulado USD» para compartir fila con la escala */
  @media (max-width: 520px) {
    .calc-sitio .grafico__titulo-largo { display: none; }
  }
  /* El enlace a la tabla no cabe en la fila: queda para teclado y lectores de pantalla, y aparece al recibir el foco */
  .calc-sitio .grafico__tabla:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .calc-sitio .grafico__lienzo {
    height: clamp(16.5rem, 68vw, 25rem);
    min-height: 0;
  }
  /* En el teléfono no hay cinta: la cruz se mueve con el dedo y el calendario completo está en la tabla */
  .calc-sitio .grafico:not(.es-alineada) .cinta { display: none; }

  .calc-sitio .mesa__bajada {
    order: 4;
    max-width: none;
    margin: 1.4rem var(--margen) 0;
  }
  /* Apagada, la bajada sube bajo el titular: junto a los mandos sería una orden que todavía no se puede
     cumplir. Al encender vuelve sobre ellos (la sección ya salta a su comienzo y el cambio no se ve). */
  html:not(.calc-encendida) .calc-sitio .mesa__bajada {
    order: 1;
    margin-top: .6rem;
  }
  .calc-sitio .mandos {
    order: 5;
    margin: 0 var(--margen);
    padding-block: 1.25rem 1.75rem;
  }
  .calc-sitio .campo + .campo { margin-top: 1.4rem; }
  .calc-sitio .deslizador { height: 2.75rem; }
  .calc-sitio .plazo__caja { padding: .9rem .7rem .95rem; }
  .calc-sitio .plazo__meses { font-size: clamp(1.125rem, 4.6vw, 1.5rem); }

  /* Las otras dos cifras: etiqueta a la izquierda y cifra a la derecha, sobre la misma línea, y la nota debajo,
     a todo el ancho. Nada cambia de renglón cuando la cifra se ensancha: el tablero no salta al mover el monto. */
  .calc-sitio .cifras__menor,
  .calc-sitio .cifras__menor + .cifras__menor {
    order: 6;
    align-self: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: .75rem;
    min-width: 0;
    margin: 0 var(--margen);
    padding: 1.1rem 0;
    border: 0;
    border-top: 1px solid var(--linea);
    box-shadow: none;
  }
  .calc-sitio .cifras__menor dt {
    white-space: nowrap;
    letter-spacing: .1em;
  }
  .calc-sitio .cifras__menor .cifras__valor {
    grid-column: 2;
    grid-row: 1;
    align-self: baseline;
    margin-top: 0;
    font-size: clamp(1.75rem, 7.6vw, 2.5rem);
  }
  .calc-sitio .cifras__menor .cifras__nota { grid-column: 1 / -1; }

  .calc-sitio .mesa__pie {
    order: 7;
    padding: 1.5rem var(--margen) 2.5rem;
    border-top: 1px solid var(--linea);
  }
  .calc-sitio .mesa__pie .notas {
    padding-top: 0;
    border-top: 0;
    gap: .75rem;
  }
  .calc-sitio .mesa__pie .notas p { font-size: .875rem; }
  .calc-sitio .mesa__hablemos { margin-top: 1.5rem; }
  .calc-sitio .mesa__hablemos .boton { min-height: 3.25rem; padding: 0 2rem; }
  .calc-sitio .mesa__correo {
    display: inline;
    font-size: .9375rem;
  }

  .calc-sitio .comparar__rejilla,
  .calc-sitio .dejar__rejilla { grid-template-columns: minmax(0, 1fr); }
  .calc-sitio .comparar__rejilla > *,
  .calc-sitio .dejar__rejilla > * { grid-column: 1; }
  .calc-sitio .comparar__cabeza { margin-bottom: 2.5rem; }
  .calc-sitio .comparar__resumen { max-width: 30rem; }
  .calc-sitio .boleta { max-width: none; }
  .calc-sitio .dejar__forma,
  .calc-sitio .recibido { margin-top: 2.5rem; }
}

@media (max-width: 700px) {
  .calc-sitio .comparacion thead td { width: 27%; }
  .calc-sitio .comparacion th,
  .calc-sitio .comparacion td { padding: .9rem .4rem; }
  .calc-sitio .comparacion__plazo { padding: .85rem .5rem .8rem; }
  .calc-sitio .comparacion__meses { font-size: 1.0625rem; }
  .calc-sitio .comparacion__tasa { font-size: .6875rem; letter-spacing: .08em; }
  .calc-sitio .comparacion tbody th { font-size: .875rem; }
  .calc-sitio .comparacion td { font-size: clamp(.9375rem, 4.2vw, 1.0625rem); }
  .calc-sitio .comparacion__mayor td { font-size: clamp(1.25rem, 5.8vw, 2rem); }

  /* Plazos en un teléfono angosto: la tasa pierde algo de espaciado para caber en su casilla */
  .calc-sitio .plazo__caja { padding-inline: .55rem; }
  .calc-sitio .plazo__tasa { letter-spacing: .06em; }

  /* El calendario lleva cinco columnas: cifras un punto más chicas para que quepan «250.000» y «325.000».
     Con los montos más largos (seis cifras y céntimos) la tabla se desliza de lado dentro de su caja,
     sin mover la página; calculadora.js la hace enfocable solo cuando eso pasa. */
  .calc-sitio .calendario__tabla {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .calc-sitio .calendario__tabla:focus-visible { outline-offset: 2px; }
  .calc-sitio .calendario-pagos .calendario th,
  .calc-sitio .calendario-pagos .calendario td { padding-left: .45rem; }
  .calc-sitio .calendario-pagos .calendario th:first-child { padding-left: 0; }
  .calc-sitio .calendario-pagos .calendario td { font-size: clamp(.8125rem, 3.6vw, 1.0625rem); }
  .calc-sitio .calendario-pagos .calendario thead th {
    font-size: .625rem;
    letter-spacing: .08em;
  }
  .calc-sitio .calendario-pagos .calendario__n { min-width: 1.15em; font-size: 1.0625rem; }
  .calc-sitio .calendario-pagos .calendario__mes { font-size: .75rem; }

  /* El formulario, en una columna; el botón, a lo ancho */
  .calc-sitio .dejar__forma { grid-template-columns: minmax(0, 1fr); }
  .calc-sitio .dejar__forma > * { grid-column: 1; }
  .calc-sitio .boleta { padding-inline: 1.15rem; }
  .calc-sitio .dejar__enviar { width: 100%; }
  .calc-sitio .dejar__nota { flex-basis: 100%; }
}

/* Teléfono de 360 px con las cifras más largas (USD 250.000 a 36 meses): las dos tablas caben enteras,
   sin cortar la última cifra del calendario y sin que «36 meses» se salga de su columna. */
@media (max-width: 400px) {
  .calc-sitio .calendario-pagos .calendario th,
  .calc-sitio .calendario-pagos .calendario td { padding-left: .3rem; }
  .calc-sitio .calendario-pagos .calendario th:first-child { padding-left: 0; }
  .calc-sitio .calendario-pagos .calendario thead th { letter-spacing: .04em; }
  .calc-sitio .comparacion th,
  .calc-sitio .comparacion td,
  .calc-sitio .comparacion__plazo { padding-inline: .3rem; }
  .calc-sitio .comparacion tbody th { padding-left: 0; }
  .calc-sitio .comparacion__meses { font-size: 1rem; }
  .calc-sitio .comparacion__tasa {
    font-size: .625rem;
    letter-spacing: .04em;
  }
}

/* Pagos con céntimos en un teléfono (uno de cada dos pasos del deslizador a 12 y a 36 meses): «6.237,50» y
   «255.737,50» son más largas que las cifras redondas. Las cifras del calendario bajan hasta un punto (12 px
   a 360; a 430 ya van a su tamaño) y la tabla se aprieta lo justo: cabe entera de 360 a 430 px, sin cortar
   «Acumulado» ni la última columna. calculadora.js pone .es-centimos en la tabla cuando el pago trae céntimos. */
@media (max-width: 430px) {
  .calc-sitio .calendario-pagos .calendario.es-centimos th,
  .calc-sitio .calendario-pagos .calendario.es-centimos td { padding-left: .3rem; }
  .calc-sitio .calendario-pagos .calendario.es-centimos th:first-child { padding-left: 0; }
  .calc-sitio .calendario-pagos .calendario.es-centimos td { font-size: clamp(.75rem, 5vw - .375rem, 1rem); }
  .calc-sitio .calendario-pagos .calendario.es-centimos thead th { letter-spacing: 0; }
}

/* Ya enviado el formulario: a la izquierda quedan «Recibido.» y la consulta, una sola vez y sin enlace para cambiarla */
.calc-sitio .es-recibido .boleta__cambiar,
.calc-sitio .es-recibido .dejar__linea,
.calc-sitio .es-recibido .recibido__consulta { display: none; }

/* Movimiento reducido: sin trazo de entrada (la regla general del sitio ya anula animaciones y transiciones) */
@media (prefers-reduced-motion: reduce) {
  .calc-sitio .es-entrada .g-curva.es-activa { stroke-dasharray: none; }
}

/* ==========================================================================
   LOS DOS ESTADOS: apagada y encendida
   Todo lo de aquí abajo es lo que cambia entre una y otra. Lo decide la clase
   calc-encendida de <html>, que pone calculadora.js cuando la visita acepta el
   aviso (y antes de pintar, si ya lo había aceptado en esta sesión).
   ========================================================================== */

/* Los botones de la sección son <button>: sin el borde ni el radio del navegador */
.calc-sitio .acuerdo .boton,
.calc-sitio .dejar .boton {
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

/* La raya corta donde irá una cifra. En el HTML esas casillas están vacías: la raya es un dibujo, no un carácter. */
.calc-sitio .vivo:empty::before {
  content: "";
  display: inline-block;
  width: .56em;
  height: max(1px, .055em);
  background: currentColor;
  vertical-align: .3em;
}
/* En la cifra principal la raya va fina, como los perfiles de sus numerales: gruesa parecería un bloque */
.calc-sitio .cifras__mayor .vivo:empty::before {
  width: .5em;
  height: max(2px, .022em);
  vertical-align: .32em;
}
/* Los renglones que el tablero escribe al encender guardan su alto desde antes: nada salta */
.calc-sitio .cifras__base { min-height: 1.4em; }
.calc-sitio .cifras__nota { min-height: 1.3em; }

/* Rótulo de la sección y, a su derecha, «Ver los términos». El enlace no ocupa alto: va montado sobre la fila. */
.calc-sitio .mesa__arriba { position: relative; }
.calc-sitio .terminos-ver {
  position: absolute;
  right: 0;
  top: 50%;
  margin: 0;
  padding: .2rem 0;
  transform: translateY(-50%);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--oro);
  border-radius: 0;
  font: 500 .8125rem/1.2 var(--sans);
  color: rgba(244, 239, 228, .86);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.calc-sitio .terminos-ver:hover { color: var(--oro-claro); border-color: var(--oro-claro); }
.calc-sitio .terminos-ver::after {
  content: "";
  position: absolute;
  /* La zona de toque crece hacia arriba, hacia abajo y hacia el rótulo; a la derecha el enlace ya toca el borde de su fila */
  inset: -.8rem 0 -.8rem -.5rem;
}
html:not(.calc-encendida) .calc-sitio .terminos-ver { display: none; }
/* En un teléfono de 320 px el rótulo y el enlace no caben en la misma fila: el rótulo va sin su filete */
@media (max-width: 359px) {
  .calc-sitio .mesa__arriba .rotulo::before { content: none; }
  .calc-sitio .terminos-ver { font-size: .75rem; }
}

/* Apagada -------------------------------------------------------------------
   Lo que se atenúa: mandos, ficha, cifras, cabeza del gráfico y notas. La
   cabeza de la sección (rótulo, titular y bajada) y el aviso quedan encendidos.
   Atenuado no es borroso: misma letra, mismos filetes, a media luz y sin oro. */

.calc-sitio .mandos,
.calc-sitio .ficha-terminos,
.calc-sitio .cifras > div,
.calc-sitio .grafico__cabeza,
.calc-sitio .mesa__pie { transition: opacity .7s ease; }
.calc-sitio .g-v,
.calc-sitio .g-h { transition: stroke .7s ease; }

html:not(.calc-encendida) .calc-sitio .mandos,
html:not(.calc-encendida) .calc-sitio .ficha-terminos,
html:not(.calc-encendida) .calc-sitio .cifras > div,
html:not(.calc-encendida) .calc-sitio .grafico__cabeza,
html:not(.calc-encendida) .calc-sitio .mesa__pie { opacity: .5; }

/* Sin oro: en lo apagado, el oro de la casa pasa a marfil */
html:not(.calc-encendida) .calc-sitio [data-apagable] {
  --oro: var(--marfil);
  --oro-claro: var(--marfil);
}
html:not(.calc-encendida) .calc-sitio .campo__monto::after {
  content: "";
  position: absolute;
  right: .1rem;
  bottom: calc(50% - 1px);
  width: 1.35rem;
  height: 2px;
  background: currentColor;
}
html:not(.calc-encendida) .calc-sitio .deslizador,
html:not(.calc-encendida) .calc-sitio .plazo input,
html:not(.calc-encendida) .calc-sitio .grafico__lector { cursor: default; }
html:not(.calc-encendida) .calc-sitio .deslizador::-webkit-slider-runnable-track { background: rgba(244, 239, 228, .5); }
html:not(.calc-encendida) .calc-sitio .deslizador::-webkit-slider-thumb {
  background: var(--selva);
  box-shadow: inset 0 0 0 1px var(--marfil);
}
html:not(.calc-encendida) .calc-sitio .deslizador::-moz-range-track { background: rgba(244, 239, 228, .5); }
html:not(.calc-encendida) .calc-sitio .deslizador::-moz-range-progress { background: none; }
html:not(.calc-encendida) .calc-sitio .deslizador::-moz-range-thumb {
  background: var(--selva);
  box-shadow: inset 0 0 0 1px var(--marfil);
}
html:not(.calc-encendida) .calc-sitio .plazo input:checked + .plazo__caja {
  background: none;
  border-color: rgba(244, 239, 228, .4);
  color: inherit;
}
html:not(.calc-encendida) .calc-sitio .plazo input:checked + .plazo__caja .plazo__tasa { color: inherit; }
html:not(.calc-encendida) .calc-sitio .mesa__hablemos .boton {
  background: none;
  box-shadow: inset 0 0 0 1px rgba(244, 239, 228, .7);
  color: var(--marfil);
}
html:not(.calc-encendida) .calc-sitio .escala__opcion[aria-pressed="true"] {
  background: none;
  box-shadow: none;
  color: var(--marfil-2);
}
html:not(.calc-encendida) .calc-sitio .lectura { visibility: hidden; }

/* La retícula sola, sin curvas, tiene que verse: un punto más de marfil que cuando lleva las curvas encima */
html:not(.calc-encendida) .calc-sitio .g-v,
html:not(.calc-encendida) .calc-sitio .g-h { stroke: rgba(244, 239, 228, .14); }
html:not(.calc-encendida) .calc-sitio .g-v.es-ano { stroke: rgba(244, 239, 228, .28); }

/* Sin JavaScript nadie dibuja el gráfico: la retícula va de fondo, con su eje */
html:not(.calc-lista) .calc-sitio .grafico__lienzo {
  grid-column: 1;
  background:
    linear-gradient(to right, rgba(244, 239, 228, .14) 1px, transparent 1px) 0 0 / calc(100% / 12.5) 100%,
    linear-gradient(to bottom, rgba(244, 239, 228, .14) 1px, transparent 1px) 0 0 / 100% 25%;
  border-bottom: 1px solid rgba(244, 239, 228, .55);
  border-right: 1px solid rgba(244, 239, 228, .22);
}

/* El aviso «Antes de continuar» ---------------------------------------------
   No es una ventana: es parte de la sección y no atrapa el foco. En escritorio
   va acoplado a la derecha de la pantalla del tablero, de arriba abajo, y deja
   ver a su izquierda la cifra principal en blanco y el arranque de la retícula;
   entre 900 y 1180 px ocupa la pantalla entera. En teléfono va en la columna,
   entre la cifra principal y el gráfico.
   Es lo único encendido de un tablero apagado: su filete y su botón llevan el
   único oro que se ve. */

/* El aviso se monta sobre la pantalla: las cifras y el gráfico conservan su fila debajo de él */
.calc-sitio .cifras { grid-row: 1; }
.calc-sitio .grafico { grid-row: 2; }

.calc-sitio .acuerdo,
.calc-sitio .acuerdo-linea { display: none; }
html.calc-lista:not(.calc-encendida) .calc-sitio .acuerdo,
html.calc-lista .calc-sitio.es-terminos .acuerdo { display: flex; }
html:not(.calc-lista) .calc-sitio .acuerdo-linea { display: block; }

.calc-sitio .acuerdo {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  flex-direction: column;
  margin-left: calc(-1 * var(--aire));
  padding: clamp(1.4rem, 4.4vh, 3rem) var(--margen) clamp(1.25rem, 3.6vh, 2.5rem) var(--aire);
  background: var(--pantalla);
  box-shadow: inset 0 2px 0 var(--oro);
  color: var(--marfil);
}
/* Un escalón por debajo del titular de la sección («Calculá tu rendimiento.»): lo primero que se lee al llegar
   es qué es el bloque, no el encabezado del aviso. En teléfono lleva su propia medida, más abajo. */
.calc-sitio .acuerdo h3 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-weight: 420;
  font-size: clamp(1.5rem, min(2vw, 4vh), 2.125rem);
  line-height: 1.02;
  letter-spacing: -.022em;
}
.calc-sitio .acuerdo__lista {
  --letra: clamp(.875rem, min(1.14vw, 2.05vh), 1.0625rem);
  margin-top: clamp(1rem, 3.4vh, 2.25rem);
  counter-reset: punto;
}
.calc-sitio .acuerdo__lista > li {
  position: relative;
  counter-increment: punto;
  padding-left: 2.2em;
  font-size: var(--letra);
  line-height: 1.5;
  color: rgba(244, 239, 228, .92);
}
.calc-sitio .acuerdo__lista > li + li { margin-top: clamp(.5rem, 1.7vh, 1.1rem); }
.calc-sitio .acuerdo__lista > li::before {
  content: counter(punto);
  position: absolute;
  left: 0;
  top: -.12em;
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 500;
  font-size: 1.45em;
  line-height: 1.2;
  color: var(--oro-claro);
}
.calc-sitio .acuerdo__pie {
  margin-top: auto;
  padding-top: clamp(1rem, 3vh, 2rem);
}
.calc-sitio .acuerdo__confirma {
  padding-top: clamp(.8rem, 2.2vh, 1.25rem);
  border-top: 1px solid rgba(184, 151, 90, .8);
  font-size: clamp(.875rem, min(1.14vw, 2.05vh), 1.0625rem);
  line-height: 1.5;
  color: rgba(244, 239, 228, .92);
}
.calc-sitio .acuerdo__botones { margin-top: clamp(.8rem, 2.2vh, 1.4rem); }

/* Escritorio ancho: acoplado a la derecha; a su izquierda queda a la vista una franja de la pantalla */
@media (min-width: 1180px) {
  .calc-sitio .acuerdo {
    justify-self: end;
    width: min(41rem, 100% - 15.5rem);
    margin-left: 0;
    padding-left: clamp(1.75rem, 2.6vw, 2.75rem);
    background: var(--selva);
    border-left: 1px solid var(--linea);
  }
  /* Reabierto con «Ver los términos» (la calculadora ya encendida): ocupa la pantalla entera del tablero, como
     entre 900 y 1179 px. Acoplado a la derecha, su borde cortaba por la mitad la cifra principal. */
  .calc-sitio.es-terminos .acuerdo {
    justify-self: stretch;
    width: auto;
    margin-left: calc(-1 * var(--aire));
    padding-left: var(--aire);
    background: var(--pantalla);
    border-left: 0;
  }
  .calc-sitio.es-terminos .acuerdo__lista,
  .calc-sitio.es-terminos .acuerdo__pie { max-width: 44rem; }
}

/* Sin JavaScript: una franja al pie de la pantalla, con el tablero apagado entero a la vista */
.calc-sitio .acuerdo-linea {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  margin-left: calc(-1 * var(--aire));
  padding: 1.15rem var(--margen) 1.25rem var(--aire);
  background: var(--selva);
  box-shadow: inset 0 2px 0 var(--oro);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--marfil);
}
.calc-sitio .acuerdo-linea a {
  position: relative;
  color: var(--oro-claro);
  border-bottom: 1px solid var(--oro);
  overflow-wrap: anywhere;
}
.calc-sitio .acuerdo-linea a::after {
  content: "";
  position: absolute;
  inset: -.7rem 0;
}

/* Teléfono y tableta vertical: el aviso va en la columna, después de la cifra principal */
@media (max-width: 899px) {
  .calc-sitio .acuerdo,
  .calc-sitio .acuerdo-linea {
    order: 2;
    align-self: stretch;
    margin: 0 var(--margen) 1.75rem;
    padding: 1.35rem 1.15rem 1.4rem;
    background: var(--pantalla);
    border: 1px solid var(--linea);
    border-top: 0;
  }
  .calc-sitio .acuerdo h3 { font-size: clamp(1.75rem, 7.4vw, 2.5rem); }
  .calc-sitio .acuerdo__lista { --letra: 1rem; margin-top: 1.25rem; }
  .calc-sitio .acuerdo__lista > li + li { margin-top: .9rem; }
  .calc-sitio .acuerdo__pie { padding-top: 1.4rem; }
  .calc-sitio .acuerdo__confirma { padding-top: 1.1rem; font-size: .9375rem; }
  .calc-sitio .acuerdo__botones { margin-top: 1.1rem; }
  .calc-sitio .acuerdo .boton {
    width: 100%;
    justify-content: center;
  }
  .calc-sitio .acuerdo-linea { font-size: .9375rem; }
}

/* Encendida -----------------------------------------------------------------
   El resto de la sección (tres plazos, calendario y formulario) lleva «hidden»
   en el HTML; calculadora.js se lo quita al encender. Aparece una sola vez,
   sin deslizarse; con movimiento reducido, de una vez. */
.calc-sitio.es-encendiendo .calc-sitio__resto { animation: calc-asomar .7s ease .15s both; }

@media (prefers-reduced-motion: reduce) {
  .calc-sitio .mandos,
  .calc-sitio .ficha-terminos,
  .calc-sitio .cifras > div,
  .calc-sitio .grafico__cabeza,
  .calc-sitio .mesa__pie,
  .calc-sitio .g-v,
  .calc-sitio .g-h { transition: none; }
  .calc-sitio.es-encendiendo .calc-sitio__resto { animation: none; }
}