/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.025em; font-weight: 700; }
h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); }
h3 { font-size: 1.25rem; letter-spacing: -.015em; }
h4 { font-size: 1.1rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--brand); color: var(--on-brand); }

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

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--brand); color: var(--on-brand); padding: 10px 14px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* Iconos de línea */
/* Iconos de línea duotono (partials/icons.svg.php): trazo en currentColor + acento de marca */
:root { --ic-accent: var(--brand); --ic-soft: .28; }
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-sm { width: 18px; height: 18px; }
.ic-xs { width: 14px; height: 14px; }
/* Sobre fondo amarillo el acento pasa a tinta */
.btn-brand, .tag-ia, .case-type.ia, .done-icon, .msg.user,
.tab-list [aria-selected="true"], .opt-chip input:checked + span, .nav .nav-cta-mobile { --ic-accent: #111; --ic-soft: .14; }

/* Teselas de icono: negro con degradado y brillo sutil, el icono en blanco y el acento en amarillo */
/* En secciones oscuras el relleno suave es blanco translúcido (amarillo sobre negro quedaría verdoso) */
.dark, .site-header, .site-footer { --ic-soft-color: #fff; --ic-soft: .12; }
.ic-tile { display: grid; place-items: center; flex: none; border-radius: 14px; color: #fff; --ic-soft-color: #fff; --ic-soft: .13;
    background: linear-gradient(150deg, #2a2a2a 0%, #0b0b0b 70%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .04), 0 8px 18px -8px rgba(0, 0, 0, .45); }
.ic-tile.is-brand { color: #111; --ic-accent: #111; --ic-soft-color: #fff; --ic-soft: .45;
    background: linear-gradient(150deg, #ffe55a 0%, #f1d50c 60%, #e2c300 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 24px -10px rgba(241, 213, 12, .6); }

/* Secciones siempre oscuras */
.dark {
    --bg: var(--dark-bg); --bg-alt: var(--dark-bg-2); --surface: var(--dark-surface); --surface-2: var(--dark-surface-2);
    --text: var(--dark-text); --muted: var(--dark-muted); --line: var(--dark-line); --accent-text: var(--brand);
    --todo: #fb923c;
    background: var(--bg); color: var(--text); color-scheme: dark;
}

/* Marcadores de contenido pendiente de validar */
.todo { color: var(--todo); font-weight: 700; background: color-mix(in srgb, var(--todo) 12%, transparent); padding: 0 .3em; border-radius: 6px; white-space: nowrap; }

/* Aparición al hacer scroll */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .js .reveal { opacity: 1; transform: none; }
}
.js .reveal.settled { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }