/* ==========================================================
 * BASE — reset, document, typography, focus, a11y utilities,
 * icons, scrollbars, film grain, pointer-dependent hints.
 * ========================================================== */

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background-color: var(--color-fondo);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden; /* fallback */
    overflow-x: clip;
}
body {
    font-family: var(--font-body);
    color: var(--color-texto);
    line-height: 1.6;
    background-color: var(--color-fondo);
    overflow-x: hidden; /* fallback */
    overflow-x: clip;
    -webkit-overflow-scrolling: touch;
}

/* --- Typography --- */
h1, h2, h3 {
    position: relative;
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; margin-bottom: 0.75rem; }
p { font-size: 1.1rem; text-wrap: pretty; }
a { color: var(--color-texto); text-decoration: none; mix-blend-mode: lighten; }

@media (max-width: 768px) {
    h1 { font-size: 2.8rem; }
    h2 { font-size: 2rem; }
}

/* --- Icons (sprite img/icons.svg) --- */
.icon {
    width: 1em;
    height: 1em;
    flex: none;
    vertical-align: -0.125em;
    fill: currentColor;
    pointer-events: none;
}

/* --- Pointer-dependent wording: <span class="hint-fine">Click</span><span class="hint-coarse">Tap</span> --- */
.hint-coarse { display: none; }
@media (pointer: coarse) {
    .hint-fine { display: none; }
    .hint-coarse { display: inline; }
}

/* --- Focus ---
   Same indicator everywhere: 2px accent outline, no halo. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--color-primario);
    outline-offset: 3px;
}
/* Programmatic focus targets (skip-link target, route changes) never show a ring */
[tabindex="-1"]:focus,
#main-content-container:focus { outline: none; }
body.page-work :is(a, button, input, textarea, select, [tabindex]):focus-visible { outline-color: var(--color-work-accent); }
/* Initial focus set by JS on a modal opened with the pointer: no ring until the keyboard is used */
.no-focus-ring:focus,
.no-focus-ring:focus-visible { outline: none !important; }

/* --- Skip link (hidden until focused) --- */
.skip-link {
    position: fixed;
    top: calc(0.75rem + var(--safe-top));
    left: calc(0.75rem + var(--safe-left));
    z-index: calc(var(--z-transition) + 10);
    padding: 0.7rem 1.1rem;
    background: var(--color-primario);
    color: #04121a;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    border-radius: 6px;
    text-decoration: none;
    mix-blend-mode: normal; /* global 'a' uses lighten: would break contrast */
}
.skip-link:focus-visible { outline: 2px solid var(--color-texto); outline-offset: 3px; }
.skip-link:not(:focus):not(:focus-within),
.visually-hidden,
#route-announcer {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --- Scrollbars --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a0c; }
::-webkit-scrollbar-thumb { background: var(--color-texto-secundario); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primario); }
@supports not selector(::-webkit-scrollbar) {
    html { scrollbar-width: thin; scrollbar-color: var(--color-texto-secundario) #0a0a0c; }
}

/* --- Film grain (global, decorative) --- */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* --- Scroll lock (mobile menu / bottom sheets) --- */
@media (max-width: 1023px), (pointer: coarse) {
    html.body-no-scroll,
    body.body-no-scroll {
        overflow: hidden;
        height: 100%;
    }
}

/* --- Reduced motion (global) ---
   Component-specific reduced-motion rules live next to each component. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
    body::after { animation: none; }
}