/* ============================================================
   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;

  /* Dos voces, ambas del sistema: cero peticiones de red.
     Titulares en serif de transición — seria, editorial, y distinta del
     cuerpo. Cambria va primera porque está pensada para pantalla y trae
     cifras de altura uniforme; Georgia queda de último recurso porque sus
     números son de estilo antiguo y descuadran.
     Las cifras de dinero NO usan esta familia: van en la sans, que es donde
     los números tabulares se alinean. */
  --display: Cambria, 'Palatino Linotype', Palatino, 'Noto Serif',
             Georgia, 'Times New Roman', 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);
  /* Padding vertical para que la zona pulsable llegue a los 44 px que
     recomienda WCAG: el logo por sí solo se quedaba en 38. */
  padding: 4px 0;
}
/* 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: 33px; height: 38px; 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-family: var(--sans);   /* versalitas: más limpias en palo seco */
  font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber); opacity: .85;
}
.brand-text strong {
  color: var(--text); font-weight: 700;
  font-size: 21px; letter-spacing: -.01em;
}

/* Insignia de vigencia. "Datos 2026" no decía nada; "Normativa 2026" sí:
   afirma que la ley aplicada está al día, que es la duda real de quien
   entra. La marca de verificación la convierte en sello, no en adorno. */
.badge-year {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-soft);
  border: 1px solid rgba(255, 182, 39, .3);
  background: linear-gradient(180deg, rgba(255, 182, 39, .11), rgba(255, 182, 39, .03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  padding: 7px 13px 7px 10px; border-radius: 8px; white-space: nowrap;
}
.badge-year strong { color: var(--amber-soft); font-weight: 800; letter-spacing: .06em; }
.badge-check {
  width: 13px; height: 13px; flex: none;
  fill: none; stroke: var(--amber); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- 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.05rem, 6.6vw, 3.5rem);
  line-height: 1.12;
  /* Una serif no admite el interletrado cerrado de una sans de palo:
     se pisarían los remates. */
  letter-spacing: -.015em;
  margin: 0 0 22px;
  font-weight: 700;
  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.35rem; margin: 0 0 22px; letter-spacing: -.008em;
}

/* ---------- 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;
  /* Altura común a todos los campos. El de dinero usa un tamaño de letra mayor
     y crecía por su cuenta, dejando las fechas más bajas y la columna
     descuadrada. */
  min-height: 56px;
}
/* Las cifras de dinero, con más presencia que el resto del formulario.
   La altura se fija porque el cuerpo mayor hacía crecer la caja un píxel
   respecto a los demás campos. */
.input-money input {
  font-size: 18px; font-weight: 600; letter-spacing: -.015em;
  height: 56px;
}
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);
}
/* Safari en iOS da a los campos de fecha una altura intrínseca propia y los
   deja más altos que el resto, además de no pintar el "dd/mm/aaaa" que sí
   muestra Chrome cuando están vacíos. Se normaliza la caja y el contenido se
   alinea a la izquierda, que por defecto va centrado. */
input[type="date"] {
  color-scheme: dark;
  -webkit-appearance: none;
  appearance: none;
  height: 56px;
  line-height: normal;
  display: block;
}
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  min-height: 22px;
}
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .75; cursor: pointer; }

/* iOS deja el campo de fecha en blanco cuando está vacío: el usuario ve una
   caja sin nada y no sabe que hay que tocarla. Se superpone un texto real
   —no un ::before, que en un <input> no es fiable— y se oculta al rellenar.

   Oculto por defecto: Chrome, Firefox y Safari de escritorio ya pintan su
   propio "dd/mm/aaaa", y superponerle el nuestro lo dejaba ilegible. Se
   activa solo donde hace falta, detectando la capacidad y no el nombre del
   navegador: `-webkit-touch-callout` solo existe en WebKit táctil, que es
   justo iOS —Safari y también Chrome, que allí usa el mismo motor—. */
.input-fecha { position: relative; }
.fecha-formato { display: none; }

@supports (-webkit-touch-callout: none) {
  .fecha-formato {
    display: block;
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    pointer-events: none; color: #55688A;
    font-size: 16px; font-variant-numeric: var(--num);
  }
  .input-fecha.con-valor .fecha-formato { display: none; }
}

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);
}
/* En sans, no en la serif de los titulares: los números tabulares solo
   existen aquí, y son los que alinean la columna de importes. */
.result-total {
  margin: 0; font-family: var(--sans); 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-family: var(--sans);
  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); }

/* Etiqueta en versalitas: en sans, porque una serif en mayúsculas pequeñas
   y muy espaciada pierde legibilidad. */
.break-title {
  font-family: var(--sans); font-weight: 700; font-size: .78rem;
  letter-spacing: .12em; 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.4rem, 4vw, 1.8rem); line-height: 1.25;
  letter-spacing: -.012em; 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.22rem; letter-spacing: -.008em;
  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; }
}