/* Papyvo · /calculadora (calculadora de regalías de KDP). 3 nov 2026.
   Va encima de /sitio/e/estilos.css y /sitio/historia/historia.css: mismos tokens, Gambarino + General Sans, vidrio y radios.
   El héroe es la librería a la hora azul (ilustración de Magnific), así que va en oscuro con texto crema. */

/* ——— Héroe ——— */
.ca-heroe { position: relative; isolation: isolate; display: grid; align-items: end; min-height: min(84svh, 820px); padding: 150px 0 clamp(72px, 10vh, 110px); overflow: hidden; color: var(--crema); }
.ca-heroe__fondo { position: absolute; inset: 0; z-index: -2; }
.ca-heroe__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
html.mov .ca-heroe__fondo img { animation: hi-acerca 18s var(--salida) both; }
.ca-heroe__velo { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(15 42 34 / .25) 0%, rgb(15 42 34 / .35) 45%, rgb(15 42 34 / .86) 82%, var(--osc) 100%); }
.ca-heroe__texto { display: grid; justify-items: center; text-align: center; }
.ca-heroe .pildora { color: var(--osc); }
.ca-display { margin-top: 20px; font-size: clamp(2.75rem, 1rem + 6vw, 6.25rem); line-height: .98; color: var(--crema); text-shadow: 0 2px 30px rgb(15 42 34 / .45); }
.ca-display .display__linea { display: block; }
.ca-gris { color: #a8c3b5; }
.ca-heroe__sub { max-width: 56ch; margin-top: 22px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.6; color: rgb(243 239 226 / .9); }

/* ——— Calculadora ——— */
.ca-zona { background: var(--osc); padding: 8px 0 clamp(72px, 10vw, 120px); }
.ca-rejilla { display: grid; gap: 20px; align-items: start; }
@media (min-width: 980px) { .ca-rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px; } }

.ca-datos { display: grid; gap: 14px; }
.ca-grupo { margin: 0; padding: 22px 22px 20px; border: 0; border-radius: var(--r-xl); background: var(--claro); box-shadow: var(--sombra-suave); min-width: 0; }
.ca-grupo legend { float: left; width: 100%; margin-bottom: 14px; font: 400 1.5rem/1.1 var(--f-display); color: var(--osc); }
.ca-grupo legend + * { clear: both; }
.ca-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ca-campo { display: grid; gap: 6px; font: 500 .875rem/1.35 var(--f-ui); color: var(--tinta-2); }
.ca-campo--entero { margin-top: 12px; }
.ca-campo output { font-weight: 700; color: var(--osc); }
.ca-entrada { display: flex; align-items: center; gap: 6px; height: 50px; padding: 0 14px; border-radius: var(--r-m); background: var(--hoja, #fff); border: 1px solid var(--linea-2); transition: border-color .2s, box-shadow .2s; }
.ca-entrada:focus-within { border-color: var(--accion); box-shadow: 0 0 0 3px rgb(47 93 14 / .16); }
.ca-entrada b { font: 600 .9375rem/1 var(--f-ui); color: var(--tinta-3); }
.ca-entrada input { width: 100%; min-width: 0; height: 100%; border: 0; background: none; font: 600 1.125rem/1 var(--f-ui); color: var(--tinta); font-variant-numeric: tabular-nums; outline: none; }
.ca-campo select { height: 50px; padding: 0 14px; border-radius: var(--r-m); border: 1px solid var(--linea-2); background: var(--hoja, #fff); font: 600 1rem/1 var(--f-ui); color: var(--tinta); }
.ca-campo select:focus-visible { outline: 3px solid rgb(47 93 14 / .3); outline-offset: 1px; }
.ca-campo input[type="range"] { width: 100%; accent-color: var(--accion); height: 28px; }

.ca-segmentos { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: var(--claro-3); }
.ca-segmentos label { flex: 1; position: relative; }
.ca-segmentos input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ca-segmentos span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 14px; border-radius: 999px; font: 600 .9375rem/1.1 var(--f-ui); color: var(--tinta-2); text-align: center; transition: background .2s, color .2s; }
.ca-segmentos small { font-weight: 500; font-size: .8125rem; color: inherit; opacity: .75; }
.ca-segmentos input:checked + span { background: var(--osc); color: var(--crema); }
.ca-segmentos input:focus-visible + span { outline: 3px solid rgb(47 93 14 / .35); outline-offset: 2px; }
.ca-segmentos--chico { margin-top: 12px; max-width: 260px; }
.ca-nota { margin-top: 10px; font: 500 .8125rem/1.45 var(--f-ui); color: var(--tinta-3); }
.ca-nota.es-aviso { color: var(--aviso); }

.ca-resultado { position: sticky; top: 96px; padding: 26px 24px 24px; border-radius: var(--r-xl); background: var(--osc-2); border: 1px solid rgb(243 239 226 / .1); color: var(--crema); }
.ca-resultado__eyebrow { font: 600 .8125rem/1.2 var(--f-ui); letter-spacing: .04em; text-transform: uppercase; color: #a8c3b5; }
.ca-unidades { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 24px; }
.ca-unidades div { padding: 16px; border-radius: var(--r-l); background: rgb(243 239 226 / .06); }
.ca-unidades span { display: block; font: 500 .875rem/1.2 var(--f-ui); color: #b8c6bb; }
.ca-unidades b { display: block; margin-top: 8px; font: 400 clamp(1.875rem, 1.4rem + 1.4vw, 2.5rem)/1 var(--f-display); color: var(--lima); font-variant-numeric: tabular-nums; }
.ca-unidades b.es-negativo { color: #f0a58f; }
.ca-tabla { width: 100%; margin-top: 10px; border-collapse: collapse; font: 500 .9375rem/1.2 var(--f-ui); font-variant-numeric: tabular-nums; }
.ca-tabla th { padding: 8px 6px; font-size: .8125rem; font-weight: 500; color: #b8c6bb; text-align: right; }
.ca-tabla th:first-child, .ca-tabla td:first-child { text-align: left; }
.ca-tabla td { padding: 12px 6px; border-top: 1px solid rgb(243 239 226 / .1); text-align: right; color: rgb(243 239 226 / .85); }
.ca-tabla td:last-child { font-weight: 700; color: var(--crema); }
.ca-tabla tr.es-destacada td { color: var(--crema); }
.ca-tabla tr.es-destacada td:last-child { color: var(--lima); }
.ca-letra { margin-top: 16px; font: 500 .75rem/1.5 var(--f-ui); color: #9fb2a6; }
.ca-cta { margin-top: 20px; width: 100%; justify-content: space-between; }
.ca-cta__sub { margin-top: 10px; font: 500 .8125rem/1.4 var(--f-ui); color: #b8c6bb; text-align: center; }

/* ——— Cómo se calcula ——— */
.ca-explica { padding-block: clamp(72px, 10vw, 120px) 0; }
.ca-explica__rejilla { display: grid; gap: 14px; margin-top: 32px; }
@media (min-width: 900px) { .ca-explica__rejilla { grid-template-columns: repeat(3, 1fr); } }
.ca-explica article { padding: 24px; border-radius: var(--r-xl); background: var(--claro-2); }
.ca-explica h3 { font: 400 1.5rem/1.1 var(--f-display); color: var(--osc); }
.ca-explica p { margin-top: 10px; font: 400 1rem/1.6 var(--f-ui); color: var(--tinta-2); }
.ca-fuentes { margin-top: 20px; font: 500 .8125rem/1.5 var(--f-ui); color: var(--tinta-3); }
.ca-fuentes a { color: var(--accion); }

.ca-cierre { display: grid; justify-items: center; text-align: center; gap: 18px; padding-block: clamp(80px, 11vw, 140px); }
.ca-cierre p { max-width: 56ch; font: 400 1.0625rem/1.6 var(--f-ui); color: var(--tinta-2); }

@media (max-width: 560px) {
  .ca-grupo { padding: 18px 16px; }
  .ca-campos { grid-template-columns: 1fr; }
  .ca-resultado { position: static; padding: 22px 16px; }
  .ca-tabla { font-size: .875rem; }
  .ca-tabla th, .ca-tabla td { padding-inline: 3px; }
}