/**
 * BASE / RESET
 * -----------------------------------------------------------------------------
 * Normalización mínima. No define estética: solo neutraliza defaults del
 * navegador. Todo lo visual vive en typography.css o en los componentes.
 */

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

html {
    scroll-behavior: smooth;
    /* Compensa el header fijo al navegar con anclas (#servicios, #contacto...) */
    scroll-padding-top: var(--header-height);
}

body {
    overflow-x: hidden;
}

img,
svg,
video,
iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

ul,
ol {
    list-style: none;
}

table {
    border-collapse: collapse;
    width: 100%;
}

:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 3px;
}

/*
 * El atributo `hidden` tiene que ganar SIEMPRE.
 *
 * El navegador lo aplica con `[hidden] { display: none }`, una regla de
 * especificidad mínima: cualquier `display` que el tema ponga en una clase la
 * gana. Eso dejó el visor de galería (`.gallery-viewer { display: flex }`)
 * pintado sobre todas las páginas aunque el JS lo marcara como oculto.
 *
 * Como el tema usa `el.hidden = true` en varios sitios (visor de galería,
 * miniaturas, botón de aplicar precio en la tienda), la regla va aquí una vez
 * y para todos.
 */
[hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}