/* =============================================================================
   SalarioLimpio — hoja de estilos única.
   1 Tokens · 2 Reset · 3 Utilidades · 4 Tipografía · 5 Componentes
   6 Secciones · 7 Efectos · 8 Responsive · 9 Reduced-motion
   ========================================================================== */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --ink: #10151c;
  --ink-soft: #4a5462;
  --ink-faint: #646d79;
  --line: #dfe3e9;

  --accent: #0f7b6c;
  --accent-ink: #ffffff;
  --accent-soft: #e2f2ef;

  --isss: #f0a202;
  --afp: #4c6ef5;
  --isr: #e05263;
  --resto: #cdd3db;

  --radius: 14px;
  --radius-sm: 10px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --maxw: 1080px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --shadow: 0 1px 2px rgba(16, 21, 28, .05), 0 12px 28px -18px rgba(16, 21, 28, .35);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --surface: #161b22;
    --surface-2: #1c232c;
    --ink: #e8edf4;
    --ink-soft: #a6b1bf;
    --ink-faint: #8791a1;
    --line: #2a323d;
    --accent: #2dd4a7;
    --accent-ink: #05231d;
    --accent-soft: #12302a;
    --resto: #333c48;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 28px -18px rgba(0, 0, 0, .8);
  }
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; line-height: 1.15; letter-spacing: -0.02em; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* =============================================================
   3. Utilidades
   ============================================================= */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  padding: .6rem 1rem; background: var(--accent); color: var(--accent-ink);
  border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   4. Tipografía
   ============================================================= */
h1 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem); font-weight: 700; }
h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); font-weight: 650; }
h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }

/* =============================================================
   5. Componentes
   ============================================================= */

/* --- Cabecera --- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 60px;
}
.brand { display: inline-flex; align-items: center; gap: .5rem; font-size: .98rem; flex: 0 0 auto; }
.brand__mark {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 9px; background: var(--accent); color: var(--accent-ink);
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}
.brand__name { font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.brand__name strong { font-weight: 700; }

/* --- Menú de herramientas -------------------------------------------------
   Con once herramientas una barra horizontal deja la mitad fuera de la vista.
   Se agrupan en un panel desplegable hecho con <details>, que funciona sin
   JavaScript y es accesible por teclado de serie. */
.site-nav { display: flex; align-items: center; gap: .2rem; flex: 0 0 auto; margin-left: auto; }

/* Enlaces directos a las tres más buscadas. Se ocultan en pantallas
   estrechas, donde el botón pasa a anunciar el total. */
.site-nav__directo {
  padding: .45rem .7rem; border-radius: 999px;
  font-size: .88rem; color: var(--ink-soft); white-space: nowrap;
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.site-nav__directo:hover { background: var(--surface-2); color: var(--ink); }
.site-nav__directo[aria-current="page"] {
  background: var(--accent-soft); color: var(--accent); font-weight: 650;
}
.site-nav__directo { display: none; }
.menu__btn-corto { display: inline; }
.menu__btn-largo { display: none; }

@media (min-width: 860px) {
  .site-nav__directo { display: inline-block; }
  .menu__btn-corto { display: none; }
  .menu__btn-largo { display: inline; }
}

.menu { position: relative; }
.menu__btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .8rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: .88rem; font-weight: 600; color: var(--ink);
  cursor: pointer; list-style: none; white-space: nowrap;
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
}
.menu__btn::-webkit-details-marker { display: none; }
.menu__btn:hover { border-color: var(--accent); color: var(--accent); }
.menu__btn::after {
  content: ""; width: 7px; height: 7px; margin-left: .1rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s var(--ease-out);
}
.menu[open] .menu__btn { border-color: var(--accent); color: var(--accent); }
.menu[open] .menu__btn::after { transform: translateY(1px) rotate(-135deg); }

.menu__panel {
  position: absolute; right: 0; top: calc(100% + .6rem); z-index: 40;
  width: min(92vw, 620px);
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  padding: 1.1rem 1.2rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.menu__grupo { display: grid; gap: .1rem; align-content: start; }
.menu__grupo-titulo {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; margin-bottom: .3rem;
}
.menu__panel a {
  display: block; padding: .4rem .55rem; border-radius: 8px;
  font-size: .9rem; color: var(--ink-soft);
  transition: background .18s var(--ease-out), color .18s var(--ease-out);
}
.menu__panel a:hover { background: var(--surface-2); color: var(--ink); }
.menu__panel a[aria-current="page"] {
  background: var(--accent-soft); color: var(--accent); font-weight: 650;
}

@media (max-width: 719px) {
  .menu__panel {
    position: fixed; left: var(--gutter); right: var(--gutter);
    width: auto; top: 66px; max-height: calc(100vh - 84px); overflow-y: auto;
  }
}

/* --- Tool card --- */
.tool-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1rem, 3vw, 1.5rem);
  display: grid;
  gap: 1rem;
}

.tool-card__input--grid {
  display: grid; gap: .75rem;
  /* 140px permite dos campos por fila en un teléfono de 375 px, así el
     resultado no se va por debajo del pliegue en las calculadoras con
     muchos campos (liquidación, horas extra). */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
/* El campo principal ocupa la fila entera. */
.field--ancho { grid-column: 1 / -1; }

@media (min-width: 720px) {
  .tool-card__input--grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .field--ancho { grid-column: auto; }
}

.field { display: grid; gap: .35rem; }
.field__label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.field__wrap {
  display: flex; align-items: center; gap: .4rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .1rem .8rem;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.field__wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field__prefix { font-size: 1.1rem; font-weight: 600; color: var(--ink-faint); }
.field__wrap input {
  width: 100%; border: 0; background: none; outline: none;
  padding: .65rem 0; font-size: 1.25rem; font-weight: 600;
  letter-spacing: -0.01em;
}
.field__wrap input::placeholder { color: var(--ink-faint); font-weight: 400; }

.field__wrap select {
  width: 100%; border: 0; background: none; outline: none; cursor: pointer;
  padding: .72rem 0; font-size: 1rem; font-weight: 600; color: inherit;
  appearance: none;
}
.field__wrap:has(select)::after {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-left: .4rem;
  border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
  transform: translateY(-3px) rotate(45deg);
}

/* Colores extra para las barras de horas extra y liquidación */
.bar__seg--diurnas   { background: var(--accent); }
.bar__seg--nocturnas { background: var(--afp); }
.bar__seg--descanso  { background: var(--isss); }
.dot--diurnas   { background: var(--accent); }
.dot--nocturnas { background: var(--afp); }
.dot--descanso  { background: var(--isss); }

/* Fuera las flechas nativas del type="number": son feas y cada navegador las
   dibuja distinto. Donde subir/bajar de uno en uno tiene sentido ponemos
   nuestro propio control (.stepper). */
.field__wrap input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.field__wrap input[type="number"]::-webkit-outer-spin-button,
.field__wrap input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* Selector de fecha: el icono nativo, pero que no desentone en modo oscuro. */
.field__wrap input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .55; transition: opacity .2s var(--ease-out);
}
.field__wrap input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
@media (prefers-color-scheme: dark) {
  .field__wrap input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
}

.stepper { display: inline-flex; gap: 4px; flex: 0 0 auto; margin-left: .35rem; }
.stepper__btn {
  display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft);
  font-size: 1.05rem; font-weight: 600; line-height: 1;
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out),
              color .2s var(--ease-out), transform .12s var(--ease-out);
}
.stepper__btn:hover {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}
.stepper__btn:active { transform: scale(.92); }
.stepper__btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.stepper__btn:disabled:hover { border-color: var(--line); background: var(--surface); color: var(--ink-soft); }
.field--optional .field__wrap input { font-size: 1rem; font-weight: 500; }
.field__hint { font-size: .8rem; color: var(--ink-faint); }

/* Estados del cálculo */
.tool-card__msg { font-size: .92rem; color: var(--ink-faint); padding: .35rem 0; }
.tool-card__msg--error { color: var(--isr); font-weight: 500; }
.tool-card__result { display: grid; gap: 1rem; }

.tool-card[data-state="idle"]  .tool-card__result,
.tool-card[data-state="idle"]  .tool-card__msg--error,
.tool-card[data-state="error"] .tool-card__result,
.tool-card[data-state="error"] .tool-card__msg--idle,
.tool-card[data-state="done"]  .tool-card__msg { display: none; }

/* Titular del resultado */
.headline {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: .75rem 1.5rem;
  padding: 1rem 1.1rem;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
}
.headline__label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.headline__value {
  display: block; font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.6rem);
  font-weight: 700; letter-spacing: -0.035em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.headline__value--sm { font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem); color: var(--ink); }
.headline__side { text-align: right; }
.headline__note { font-size: .85rem; color: var(--ink-soft); margin-top: -.35rem; }

/* Barra apilada */
.bar {
  display: flex; width: 100%; height: 16px; gap: 2px;
  border-radius: 999px; overflow: hidden; background: var(--surface-2);
}
.bar__seg { display: block; height: 100%; transition: width .35s var(--ease-out); }
.bar__seg[hidden] { display: none; }
.bar__seg--neto { background: var(--accent); }
.bar__seg--isss { background: var(--isss); }
.bar__seg--afp  { background: var(--afp); }
.bar__seg--isr  { background: var(--isr); }
.bar__seg--resto { background: var(--resto); }

.legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; list-style: none; padding: 0; }
.legend li { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--ink-soft); }
.dot { width: 10px; height: 10px; border-radius: 3px; }
.dot--neto { background: var(--accent); }
.dot--isss { background: var(--isss); }
.dot--afp  { background: var(--afp); }
.dot--isr  { background: var(--isr); }
.dot--resto { background: var(--resto); }

/* Tabla de desglose */
.breakdown { width: 100%; border-collapse: collapse; }
.breakdown th, .breakdown td { padding: .6rem .1rem; border-bottom: 1px solid var(--line); }
.breakdown th {
  text-align: left; font-weight: 500; font-size: .93rem;
  display: flex; flex-direction: column;
}
.breakdown th small { font-size: .74rem; font-weight: 400; color: var(--ink-faint); }
.breakdown td {
  text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 600; white-space: nowrap;
}
.breakdown__sub th, .breakdown__sub td { color: var(--ink-soft); background: var(--surface-2); }
.breakdown__total th, .breakdown__total td { border-bottom: 0; font-size: 1rem; }
.breakdown__total td { color: var(--accent); font-weight: 700; }

/* Verificador de boleta */
.check { width: 100%; border-collapse: collapse; }
.check th, .check td { padding: .55rem .4rem; border-bottom: 1px solid var(--line); text-align: left; }
.check thead th {
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; border-bottom: 2px solid var(--line);
}
.check td:first-child { font-weight: 600; font-size: .93rem; white-space: nowrap; }
.check .field__wrap { padding: .05rem .6rem; }
.check .field__wrap input { padding: .45rem 0; font-size: 1rem; }
.check__esperado { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.check__veredicto { font-size: .85rem; color: var(--ink-soft); }

.check tr[data-estado="ok"] .check__veredicto { color: var(--accent); font-weight: 600; }
.check tr[data-estado="de-mas"] .check__veredicto { color: var(--isr); font-weight: 600; }
.check tr[data-estado="de-menos"] .check__veredicto { color: var(--isss); font-weight: 600; }

.veredicto {
  display: grid; gap: .3rem; padding: 1.1rem 1.25rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border-left: 4px solid var(--line);
}
.veredicto__titulo { font-size: clamp(1.1rem, 1rem + .8vw, 1.4rem); font-weight: 700; letter-spacing: -0.02em; }
.veredicto__detalle { font-size: .88rem; color: var(--ink-soft); }
.veredicto[data-veredicto="ok"] { background: var(--accent-soft); border-left-color: var(--accent); }
.veredicto[data-veredicto="ok"] .veredicto__titulo { color: var(--accent); }
.veredicto[data-veredicto="de-mas"] { border-left-color: var(--isr); }
.veredicto[data-veredicto="de-mas"] .veredicto__titulo { color: var(--isr); }
.veredicto[data-veredicto="revisar"] { border-left-color: var(--isss); }

/* Registro de cambios legales */
.timeline { display: grid; gap: 0; margin-block: 1.5rem; }
.timeline__item {
  position: relative; padding: 0 0 1.75rem 1.75rem;
  border-left: 2px solid var(--line);
}
.timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline__item::before {
  content: ""; position: absolute; left: -7px; top: .35rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg);
}
.timeline__fecha {
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}
.timeline__item h3 { margin: .2rem 0 .35rem; }
.timeline__item p { margin: .4rem 0; font-size: .92rem; color: var(--ink-soft); }
.timeline__norma {
  display: inline-block; margin-top: .3rem; padding: .2rem .55rem;
  border: 1px solid var(--line); border-radius: 6px;
  font-size: .76rem; color: var(--ink-faint);
}

/* Avisos */
.notice {
  font-size: .84rem; line-height: 1.5; color: var(--ink-soft);
  padding: .7rem .85rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
}
.notice strong { color: var(--ink); }
.notice--legal { border-left: 3px solid var(--isss); }
.notice--info { border-left: 3px solid var(--afp); }
.notice--warn { border-left: 3px solid var(--isr); }
.notice--privacy { background: none; border: 0; padding: 0; font-size: .82rem; }

/* Huecos de publicidad.
   Por defecto NO se ven: sin borde, sin etiqueta y sin alto reservado, así que
   mientras no haya anuncios el visitante no ve cajones vacíos. Cuando pegues el
   código de AdSense, el anuncio ocupa su propio espacio y aparece solo.
   Para ver dónde queda cada hueco mientras trabajas, cambia en el <body>
   data-ads="oculto" por data-ads="ejemplo". */
.ad-slot { display: grid; place-items: center; }
.ad-slot:not(:has(iframe)):not(:has(ins)) { margin: 0; }
.ad-slot__label { display: none; }

[data-ads="ejemplo"] .ad-slot {
  min-height: 100px; margin-block: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
[data-ads="ejemplo"] .ad-slot--leaderboard { min-height: 110px; }
[data-ads="ejemplo"] .ad-slot--incontent { min-height: 250px; }
[data-ads="ejemplo"] .ad-slot__label {
  display: block;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* Tarjetas de otras herramientas */
.tools__grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tool-link {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.tool-link:hover { border-color: var(--accent); transform: translateY(-2px); }
.tool-link--soon { opacity: .55; }
.tool-link--soon:hover { border-color: var(--line); transform: none; }
.tool-link__icon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--accent-soft); color: var(--accent);
}
.tool-link__body { display: grid; gap: .15rem; }
.tool-link__body strong { font-weight: 600; }
.tool-link__body span { font-size: .85rem; color: var(--ink-soft); }

/* Tablas de contenido */
.table { width: 100%; border-collapse: collapse; margin-block: 1.25rem; font-size: .9rem; }
.table caption { text-align: left; font-size: .8rem; color: var(--ink-faint); padding-bottom: .5rem; }
.table th, .table td { padding: .55rem .7rem; border: 1px solid var(--line); text-align: left; }
.table thead th { background: var(--surface-2); font-weight: 600; font-size: .84rem; }

/* =============================================================
   6. Secciones
   ============================================================= */
.hero { padding-block: clamp(1.25rem, 4vw, 2.25rem) 0; display: grid; gap: .75rem; }
.hero__sub { color: var(--ink-soft); max-width: 62ch; font-size: 1rem; }
.hero .tool-card { margin-top: .5rem; }

.steps, .prose, .faq, .tools { padding-block: clamp(1.75rem, 5vw, 3rem); }
.steps h2, .prose h2, .faq h2, .tools h2 { margin-bottom: 1rem; }

.steps__list {
  display: grid; gap: 1rem; list-style: none; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.steps__list li {
  display: grid; gap: .3rem; padding: 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.steps__num {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 8px; background: var(--accent); color: var(--accent-ink);
  font-size: .82rem; font-weight: 700;
}
.steps__list p { font-size: .9rem; color: var(--ink-soft); }

.prose { max-width: 72ch; }
.prose p { margin-block: .85rem; color: var(--ink-soft); }
.prose h3 { margin-top: 1.75rem; color: var(--ink); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

.faq details {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); margin-bottom: .6rem; overflow: hidden;
}
.faq summary {
  cursor: pointer; padding: .85rem 1rem; font-weight: 550; font-size: .95rem;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.25rem; color: var(--accent); line-height: 1;
  transition: transform .25s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 1rem 1rem; font-size: .9rem; color: var(--ink-soft); }
.faq details a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.site-footer { border-top: 1px solid var(--line); background: var(--surface); }
.site-footer__inner { display: grid; gap: .6rem; padding-block: 2rem; }
.site-footer__brand { font-weight: 500; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }
.site-footer__nav a { font-size: .9rem; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__nav a:hover { color: var(--accent); }
.site-footer__note { font-size: .8rem; color: var(--ink-faint); max-width: 60ch; }

/* Páginas legales */
.legal { padding-block: clamp(1.5rem, 5vw, 3rem); max-width: 72ch; }
.legal h2 { margin-top: 2rem; margin-bottom: .5rem; }
.legal p, .legal li { color: var(--ink-soft); margin-block: .7rem; }
.legal ul { padding-left: 1.2rem; }
.legal .todo {
  display: inline-block; padding: .1rem .45rem; border-radius: 6px;
  background: color-mix(in srgb, var(--isss) 22%, transparent);
  border: 1px dashed var(--isss); color: var(--ink);
  font-size: .82rem; font-weight: 600;
}

/* =============================================================
   7. Efectos
   ============================================================= */
@view-transition { navigation: auto; }

/* =============================================================
   8. Responsive
   ============================================================= */
@media (min-width: 540px) {
  .site-footer__inner { gap: .75rem; }
  .brand { font-size: 1.05rem; }
  .site-nav { gap: .35rem; }
  .site-nav a { padding: .4rem .7rem; font-size: .9rem; }
}
@media (min-width: 720px) {
  .breakdown th { flex-direction: row; align-items: baseline; gap: .5rem; }
  .headline { padding: 1.15rem 1.35rem; }
}
@media (min-width: 960px) {
  .hero { padding-block: clamp(1.75rem, 4vw, 3rem) 0; }
}

/* =============================================================
   9. Reduced-motion (solo efectos intrusivos)
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bar__seg { transition: none; }
  @view-transition { navigation: none; }
}