/* ============================================================
   Calcula tu Finiquito — hoja de estilo única
   Dirección visual: "despacho serio, pero de este siglo".
   Tinta azul profunda + ámbar (dinero). Titulares en serif,
   cifras en tabular. Mobile-first. Cero dependencias externas.
   ============================================================ */

:root {
  /* Escala de profundidad: cada nivel se separa lo bastante del anterior para
     que se distinga sin necesidad de bordes duros. Antes estaban todos tan
     juntos que las tarjetas parecían pegatinas planas sobre el fondo. */
  --ink:        #060A13;   /* fondo de página, el más hondo */
  --ink-2:      #0A1120;
  --surface:    #111C30;   /* tarjetas */
  --surface-2:  #18263F;   /* elementos sobre tarjeta */
  --line:       #26385A;   /* bordes visibles */
  --line-soft:  #1A2840;   /* separadores internos */

  --text:       #EEF3FA;
  --text-soft:  #B0C1D9;
  --text-dim:   #7E92AF;

  --amber:      #FFB627;
  --amber-soft: #FFD37A;
  --amber-deep: #E08C00;
  --red:        #FF6B6B;
  --green:      #3DD68C;

  /* Una sola familia, la del sistema. El carácter lo dan el peso, el
     interletrado y la escala — no una fuente exótica que además costaría
     una petición de red y retrasaría el primer pintado. */
  --display: 'Segoe UI Variable Display', system-ui, -apple-system, 'SF Pro Display',
             'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Cifras de altura uniforme y ancho fijo: se leen de un vistazo y las
     columnas de importes quedan alineadas. Georgia usaba números de estilo
     antiguo, de alturas desiguales — ilegibles para dinero. */
  --num: lining-nums tabular-nums;

  --wrap: 1120px;
  --r: 14px;
  --r-lg: 20px;

  /* Sombra + filo superior claro. Ese filo de 1px es lo que hace que una
     tarjeta oscura parezca levantada en vez de un rectángulo pintado. */
  --shadow: 0 24px 60px -28px rgba(0, 0, 0, .95);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .055);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Tres luces, no una: un halo ámbar arriba que hace de "amanecer", un
     azul frío a la derecha para que el fondo no sea plano, y un velo oscuro
     abajo que asienta la página. Todo con gradientes: cero imágenes. */
  background-image:
    radial-gradient(1200px 560px at 50% -220px, rgba(255, 182, 39, .16), transparent 68%),
    radial-gradient(800px 500px at 105% 5%, rgba(74, 138, 255, .10), transparent 62%),
    radial-gradient(900px 600px at -10% 40%, rgba(255, 182, 39, .045), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--amber); color: var(--ink);
  padding: 12px 18px; border-radius: 0 0 10px 0; font-weight: 700; z-index: 99;
}
.skip:focus { left: 0; top: 0; }

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

/* ---------- Cabecera ---------- */

.site-header {
  border-bottom: 1px solid var(--line-soft);
  background: rgba(11, 18, 32, .8);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 20;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 64px;
}
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--text);
}
/* El sello ya no es una caja de CSS con un símbolo dentro: la forma del papel
   la lleva el propio SVG, así que el rasgado no se puede perder por el camino.
   El resplandor se hace con drop-shadow, que sigue la silueta real —
   box-shadow dibujaría la sombra de un rectángulo. */
.brand-mark {
  display: grid; place-items: center;
  filter: drop-shadow(0 5px 12px rgba(255, 182, 39, .45));
  transition: transform .18s ease, filter .18s ease;
}
.brand-logo { width: 34px; height: 36px; display: block; }
.brand-logo .hoja { fill: url(#oroSello); }
/* Filo claro siguiendo el canto superior: el papel parece tener grosor */
.brand-logo .brillo {
  fill: none; stroke: #FFF6DF; stroke-width: 1.5;
  stroke-linecap: round; opacity: .5;
}
.brand-logo .cifra {
  fill: none;
  stroke: #38220A;              /* tinta sobre el oro, no negro puro */
  stroke-width: 3;
  stroke-linecap: round;
}
.brand:hover .brand-mark {
  transform: translateY(-1px);
  filter: drop-shadow(0 8px 16px rgba(255, 182, 39, .6));
}

/* Logotipo: "El" pequeño y en versalitas hace de artículo sin robar
   protagonismo; "Finiquito" carga todo el peso y el interletrado cerrado. */
.brand-text {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--display); line-height: 1;
}
.brand-el {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber); opacity: .85;
}
.brand-text strong {
  color: var(--text); font-weight: 800;
  font-size: 19px; letter-spacing: -.035em;
}

/* Insignia de vigencia. El punto que la precede es lo que la convierte de
   etiqueta decorativa en señal de "esto está al día" — el mismo recurso que
   usan los indicadores de estado. */
.badge-year {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--amber-soft);
  border: 1px solid rgba(255, 182, 39, .28);
  background: linear-gradient(180deg, rgba(255, 182, 39, .13), rgba(255, 182, 39, .05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  padding: 6px 12px 6px 10px; border-radius: 999px; white-space: nowrap;
}
.badge-year::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); flex: none;
  box-shadow: 0 0 0 3px rgba(255, 182, 39, .16);
}

/* ---------- Hero ---------- */

.hero { padding: 46px 0 34px; }

.eyebrow {
  margin: 0 0 18px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim);
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.2rem, 7.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  margin: 0 0 22px;
  font-weight: 800;
  text-wrap: balance;
}
/* Solo el remate va en ámbar. Si se tiñe el titular entero, compite con
   el botón y con la cifra del resultado, que son lo que debe destacar.
   Sin fondo de resalte: al partirse en varias líneas dejaba bandas sueltas. */
.hero h1 em {
  font-style: normal;
  font-weight: 800;
  color: var(--amber);
}

.lede {
  margin: 0 0 26px; max-width: 66ch;
  font-size: clamp(1.04rem, 2.4vw, 1.24rem);
  line-height: 1.55;
  color: var(--text-soft);
  text-wrap: pretty;
}

.hero-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hero-points li {
  position: relative; padding-left: 30px;
  font-size: 15.5px; color: var(--text-soft);
}
/* Marca de verificación en vez de un rombo: dice "esto lo hacemos", que es
   justo lo que enumera la lista. Un rombo no dice nada. */
.hero-points li::before {
  content: ''; position: absolute; left: 0; top: .12em;
  width: 18px; height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23FFB627' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 8.4l3.3 3.3L13 4.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ---------- Rejilla calculadora ---------- */

.calc-section { padding: 22px 0 64px; scroll-margin-top: 76px; }
.calc-grid { display: grid; gap: 20px; align-items: start; }

.card {
  background: linear-gradient(168deg, var(--surface), var(--ink-2) 90%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  box-shadow: var(--edge), var(--shadow);
}

.card-title {
  font-family: var(--display); font-weight: 700;
  font-size: 1.3rem; margin: 0 0 22px; letter-spacing: -.022em;
}

/* ---------- Formulario ---------- */

.field { margin-bottom: 20px; }
.field-row { display: grid; gap: 16px; }

label {
  display: block; margin-bottom: 8px;
  font-size: 14.5px; font-weight: 600; color: var(--text);
  letter-spacing: -.005em;
}
.opt { font-weight: 400; color: var(--text-dim); font-size: .88em; }

input[type="number"], input[type="date"], input[type="text"], select {
  width: 100%;
  /* background-color y no el atajo `background`: el atajo borraría la flecha
     del <select>, que se pinta más abajo como background-image. */
  background-color: #05090F;
  /* Sombra hacia dentro: el campo se lee como un hueco donde escribir,
     no como otra tarjeta apilada encima. */
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* evita el zoom automático en iOS */
  font-variant-numeric: var(--num);
  padding: 13px 14px;
  transition: border-color .16s, box-shadow .16s;
  min-height: 50px;
}
/* Las cifras de dinero, con más presencia que el resto del formulario */
.input-money input { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
input::placeholder { color: #55688A; }
input:hover, select:hover { border-color: #354C70; }
input:focus, select:focus {
  outline: none;
  border-color: var(--amber);
  /* Se conserva la sombra interior al enfocar; si no, el campo "salta" */
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), 0 0 0 4px rgba(255, 182, 39, .15);
}
input[type="date"] { color-scheme: dark; }

select {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23A9BAD1' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px;
}

.input-money { position: relative; display: flex; align-items: center; }
.input-money input { padding-right: 78px; }
.input-money .suffix {
  position: absolute; right: 14px;
  font-size: 13.5px; color: var(--text-dim); pointer-events: none;
  font-weight: 600;
}

.hint { margin: 8px 0 0; font-size: 13.2px; line-height: 1.5; color: var(--text-dim); }
.hint strong { color: var(--amber-soft); font-weight: 700; }

.check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; margin-bottom: 4px; font-weight: 400; }
.check input { width: 20px; height: 20px; accent-color: var(--amber); margin: 2px 0 0; flex: none; }
.check span { font-size: 15px; color: var(--text-soft); }

/* Bloque plegable de ajustes finos */
.advanced {
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  margin-bottom: 20px;
  background: rgba(0, 0, 0, .22);
  transition: border-color .16s, background .16s;
}
.advanced:hover { border-color: var(--line); }
.advanced[open] { background: rgba(0, 0, 0, .3); border-color: var(--line); }
.advanced > summary {
  cursor: pointer; padding: 14px 16px; list-style: none;
  font-size: 14.5px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::after {
  content: '+'; margin-left: auto; font-size: 20px; color: var(--amber);
  line-height: 1; transition: transform .18s;
}
.advanced[open] > summary::after { transform: rotate(45deg); }
.advanced-body { padding: 4px 16px 16px; border-top: 1px solid var(--line-soft); }
.advanced-body .field:last-of-type { margin-bottom: 16px; }

.offer-field {
  border-top: 1px solid var(--line-soft);
  padding-top: 20px;
}

.btn-primary {
  width: 100%;
  background: linear-gradient(180deg, var(--amber-soft), var(--amber) 45%, var(--amber-deep));
  color: #2A1600;
  border: none; border-radius: var(--r);
  font: inherit; font-size: 16.5px; font-weight: 800; letter-spacing: -.015em;
  padding: 17px 20px;
  cursor: pointer;
  box-shadow: 0 12px 30px -12px rgba(255, 182, 39, .65), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .12s, box-shadow .16s, filter .16s;
}
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 16px 38px -12px rgba(255, 182, 39, .8), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-primary:active { transform: translateY(1px); }

.privacy-note {
  margin: 14px 0 0; text-align: center;
  font-size: 12.8px; color: var(--text-dim);
}

/* ---------- Resultado ---------- */

/* La tarjeta del resultado no es una caja más: es la respuesta. Se separa del
   formulario con un borde entonado en ámbar y un resplandor propio detrás de
   la cifra, para que la vista vaya sola hasta ahí. */
.result-card {
  position: relative; overflow: hidden;
  border-color: rgba(255, 182, 39, .22);
  background:
    radial-gradient(620px 300px at 12% -8%, rgba(255, 182, 39, .10), transparent 62%),
    linear-gradient(168deg, var(--surface), var(--ink-2) 90%);
  /* Al calcular en móvil se hace scroll hasta aquí: sin este margen,
     la cabecera fija tapa la cifra y el veredicto. */
  scroll-margin-top: 78px;
}

/* Estado vacío: en vez de una caja con una frase suelta, se adelanta el
   desglose que va a salir. Ocupa el espacio con sentido y de paso explica
   qué se va a calcular antes de que el usuario rellene nada. */
.result-empty { color: var(--text-dim); }
.empty-lead {
  margin: 0 0 22px; font-size: 1.22rem; font-weight: 700;
  letter-spacing: -.025em; color: var(--text-soft);
}
.empty-list { list-style: none; margin: 0; padding: 0; }
.empty-list li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 0; border-bottom: 1px dashed var(--line-soft);
  font-size: 15px;
}
.empty-list i {
  margin-left: auto; font-style: normal; color: var(--line);
  font-size: 18px; font-weight: 700;
}
.empty-foot {
  margin: 20px 0 0; font-size: 13.6px; line-height: 1.55;
  padding: 14px 16px; border-radius: var(--r);
  border: 1px dashed var(--line);
  background: rgba(255, 176, 32, .04);
}

.result-label {
  margin: 0 0 4px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim);
}
.result-total {
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(2.9rem, 11vw, 4.05rem); line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: var(--num);
  color: var(--amber); /* color sólido: es lo que se ve si el degradado falla */
}

/* Degradado de oro claro a oro profundo: da volumen a la cifra sin sombras,
   que en texto grande ensucian. Va dentro de @supports porque `color:
   transparent` sin el recorte dejaría el número invisible — y justo ese
   número es la razón de ser de la página. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .result-total {
    background: linear-gradient(180deg, var(--amber-soft), var(--amber) 55%, var(--amber-deep));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}
.result-sub { margin: 10px 0 0; font-size: 14px; color: var(--text-dim); }

/* El veredicto: la pieza que convierte */
.verdict {
  margin: 22px 0 6px; padding: 18px;
  border-radius: var(--r); border: 1px solid;
  font-size: 15px; line-height: 1.55;
}
.verdict strong {
  display: block; font-size: 21px; font-weight: 800;
  margin-bottom: 5px; letter-spacing: -.03em;
  font-variant-numeric: var(--num);
}
.verdict.short { background: rgba(255, 107, 107, .1); border-color: rgba(255, 107, 107, .42); color: #FFD3D3; }
.verdict.short strong { color: var(--red); }
.verdict.ok { background: rgba(61, 214, 140, .09); border-color: rgba(61, 214, 140, .38); color: #C9F5E0; }
.verdict.ok strong { color: var(--green); }

.break-title {
  font-family: var(--display); font-weight: 700; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim);
  margin: 28px 0 4px; padding-top: 20px; border-top: 1px solid var(--line-soft);
}

.breakdown { width: 100%; border-collapse: collapse; font-size: 15px; }
.breakdown td { padding: 13px 0; border-bottom: 1px dashed var(--line-soft); vertical-align: top; }
.breakdown td:last-child {
  text-align: right; white-space: nowrap; font-weight: 700;
  font-variant-numeric: var(--num); font-size: 16px;
  letter-spacing: -.015em; padding-left: 14px;
}
.breakdown .concept-note { display: block; font-size: 12.6px; color: var(--text-dim); font-weight: 400; margin-top: 3px; }
.breakdown tr.is-indem td { color: var(--amber-soft); }
.breakdown tr.is-negative td:last-child { color: var(--red); }
.breakdown tr.is-total td {
  border-bottom: none; border-top: 2px solid var(--line);
  padding-top: 15px; font-size: 17px; font-weight: 700;
  letter-spacing: -.02em;
}
.breakdown tr.is-total td:last-child { font-size: 19px; color: var(--text); }

.tax-note {
  margin-top: 18px; padding: 14px 16px;
  background: rgba(61, 214, 140, .07);
  border: 1px solid rgba(61, 214, 140, .26);
  border-radius: var(--r);
  font-size: 14.2px; color: #C6EEDB; line-height: 1.55;
}
.tax-note strong { color: var(--green); }

.method {
  margin-top: 20px; border-top: 1px solid var(--line-soft); padding-top: 14px;
  font-size: 14px; color: var(--text-soft);
}
.method > summary {
  cursor: pointer; font-weight: 600; color: var(--text-soft); font-size: 14px;
  padding: 11px 2px; /* zona táctil cómoda en móvil */
}
.method ul { margin: 12px 0 0; padding-left: 20px; }
.method li { margin-bottom: 7px; line-height: 1.5; }
.method code { font-size: 13px; color: var(--amber-soft); }

.btn-ghost {
  margin-top: 20px; width: 100%;
  background: transparent; color: var(--text-soft);
  border: 1px solid var(--line); border-radius: var(--r);
  font: inherit; font-size: 15px; font-weight: 600;
  padding: 13px; cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: #33496A; }

.error-box {
  background: rgba(255, 107, 107, .1);
  border: 1px solid rgba(255, 107, 107, .4);
  color: #FFD3D3;
  border-radius: var(--r); padding: 14px 16px; font-size: 14.5px;
  margin-bottom: 18px;
}

/* ---------- Contenido editorial ---------- */

/* Banda propia para el contenido de lectura: al ir sobre un fondo algo más
   claro que la página, se distingue de la herramienta sin necesidad de una
   línea divisoria dura. */
.content {
  padding: 34px 0 70px;
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(17, 28, 48, .5), rgba(17, 28, 48, 0) 70%);
}
.prose { max-width: 72ch; }
.prose h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.42rem, 4.2vw, 1.85rem); line-height: 1.18;
  letter-spacing: -.03em; margin: 48px 0 16px; scroll-margin-top: 80px;
}
.prose p { margin: 0 0 16px; color: var(--text-soft); text-wrap: pretty; }
.prose strong { color: var(--text); }

.callout {
  border-left: 3px solid var(--amber);
  background: rgba(255, 176, 32, .06);
  padding: 15px 18px; border-radius: 0 var(--r) var(--r) 0;
  color: var(--text) !important;
}

.table-days { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15px; }
.table-days th {
  text-align: left; padding: 11px 12px;
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); border-bottom: 1px solid var(--line);
}
.table-days td { padding: 13px 12px; border-bottom: 1px solid var(--line-soft); color: var(--text-soft); }
.table-days td:first-child { color: var(--text); }
.table-days td:nth-child(2) {
  color: var(--amber-soft); font-weight: 700; white-space: nowrap;
  font-variant-numeric: var(--num);
}

.faq { margin-top: 20px; display: grid; gap: 10px; }
.faq details {
  background: linear-gradient(168deg, var(--surface), var(--ink-2) 92%);
  border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  box-shadow: var(--edge);
  transition: border-color .16s;
}
.faq details:hover { border-color: #33496A; }
.faq details[open] { border-color: rgba(255, 182, 39, .28); }
.faq summary {
  cursor: pointer; padding: 16px 18px; font-weight: 600; font-size: 15.5px;
  list-style: none; display: flex; gap: 12px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; margin-left: auto; color: var(--amber);
  font-size: 21px; line-height: 1; flex: none; transition: transform .18s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  margin: 0; padding: 0 18px 18px; color: var(--text-soft);
  font-size: 15px; line-height: 1.62;
}

/* ---------- Migas de pan ---------- */

.migas {
  font-size: 13px; color: var(--text-dim);
  margin-bottom: 18px;
}
.migas a { color: var(--amber); text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.migas span[aria-hidden] { margin: 0 6px; opacity: .5; }

/* ---------- Enlaces a las otras páginas ----------
   Reparten autoridad entre las páginas y hacen que quien entra por una
   descubra el resto. Sin esto, cada página quedaría aislada. */

.relacionadas { padding: 10px 0 66px; }
.rel-encabezado {
  font-family: var(--display); font-weight: 700;
  font-size: 1.2rem; letter-spacing: -.025em;
  margin: 0 0 18px;
}
.rel-grid { display: grid; gap: 14px; }
.rel-card {
  display: block; text-decoration: none;
  padding: 18px 20px;
  background: linear-gradient(168deg, var(--surface), var(--ink-2) 92%);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--edge);
  transition: border-color .16s, transform .16s;
}
.rel-card:hover { border-color: rgba(255, 182, 39, .35); transform: translateY(-2px); }
.rel-titulo {
  display: block; color: var(--text);
  font-weight: 700; font-size: 16px; letter-spacing: -.02em;
  margin-bottom: 5px;
}
.rel-desc { display: block; color: var(--text-dim); font-size: 14px; line-height: 1.5; }

@media (min-width: 760px) {
  .rel-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

@media print { .relacionadas, .migas { display: none !important; } }

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

.site-footer { border-top: 1px solid var(--line-soft); padding: 34px 0 46px; background: rgba(0, 0, 0, .22); }
.disclaimer {
  margin: 0 auto 18px; max-width: 72ch;
  font-size: 13.6px; line-height: 1.62; color: var(--text-dim);
}
.disclaimer strong { color: var(--text-soft); }
.foot-meta { margin: 0; font-size: 12.6px; color: #5D708A; }

/* ---------- Escritorio ---------- */

@media (min-width: 620px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .hero { padding: 66px 0 44px; }
}

@media (min-width: 940px) {
  .calc-grid { grid-template-columns: 1.05fr .95fr; gap: 26px; }
  .card { padding: 30px 28px; }
  .result-card { position: sticky; top: 84px; }
  .hero-points { grid-auto-flow: column; grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

/* ---------- Impresión / PDF ---------- */

@media print {
  body { background: #fff; color: #000; font-size: 12pt; }
  .site-header, .hero, .form-card, .content, .btn-ghost, .skip, .privacy-note, .result-empty { display: none !important; }
  .card { border: 1px solid #999; box-shadow: none; background: #fff; padding: 0; }
  .breakdown tr.is-indem td, .method code { color: #000 !important; }
  /* En papel hay que deshacer el recorte del degradado o la cifra sale en blanco */
  .result-total {
    background: none !important;
    -webkit-background-clip: border-box !important;
            background-clip: border-box !important;
    color: #000 !important;
  }
  .verdict { border-color: #999 !important; background: #f4f4f4 !important; color: #000 !important; }
  .verdict strong, .tax-note strong { color: #000 !important; }
  .tax-note { background: #f4f4f4 !important; border-color: #999 !important; color: #000 !important; }
  .method[open] { display: block; }
  .site-footer { border-top: 1px solid #999; }
  .disclaimer, .foot-meta { color: #333; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}