/* Variables Globales */
:root {
    --primary: #442a22;
    --on-primary: #ffffff;
    --primary-container: #5d4037;
    --on-primary-container: #d4ada1;
    --secondary: #825425;
    --on-secondary: #ffffff;
    --secondary-container: #febf87;
    --on-secondary-container: #794c1e;
    --tertiary-fixed: #ffdad9;
    --on-tertiary-fixed: #2f1314;
    --background: #fef8f1;
    --on-background: #1d1b17;
    --surface: #fef8f1;
    --on-surface: #1d1b17;
    --on-surface-variant: #504441;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f9f3ec;
    --surface-container: #f3ede6;
    --surface-container-high: #ede7e0;
    --surface-container-highest: #e7e2db;
    --outline-variant: #d4c3be;
    --shadow-color: rgba(93, 64, 55, 0.08);
}

/* Reset y Reglas Base */
* { margin: 0; padding: 0; box-sizing: border-box; }

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    src: url('materialsymbolsoutlined.ttf') format('truetype');
    font-display: block;
}

body {
    background-color: var(--background);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 24 24' fill='none' stroke='%23825425' stroke-width='0.5' stroke-opacity='0.035'%3E%3Cpath d='M12 2C8.69 2 6 4.69 6 8v3.15C4.24 11.63 3 13.16 3 15v3c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-3c0-1.84-1.24-3.37-3-3.85V8c0-3.31-2.69-6-6-6zm0 2c2.21 0 4 1.79 4 4v3H8V8c0-2.21 1.79-4 4-4zm-7 11c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v3H5v-3z'/%3E%3C/svg%3E");
    background-repeat: repeat;
    color: var(--on-background);
    font-family: 'Be Vietnam Pro', sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .font-serif { 
    font-family: 'Noto Serif', serif; 
}

/* Utilidades Generales */
.text-center { text-align: center; }
.ambient-shadow { box-shadow: 0 4px 20px -5px var(--shadow-color); }
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.fill { font-variation-settings: 'FILL' 1; }

/* ======================================================== */
/* EVIDENCIA DE ANIMACIONES CSS                             */
/* ======================================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* EVIDENCIA DE ANIMACIÓN: aparición escalonada de tarjetas generadas por JS (catálogo dinámico) */
.catalog-card-enter {
    animation: fadeInUp 0.5s ease-out both;
}

/* ======================================================== */
/* ACCESIBILIDAD: foco visible con teclado                  */
/* ======================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ======================================================== */
/* ACCESIBILIDAD: respeto a la preferencia de reducción de  */
/* movimiento del sistema operativo / navegador             */
/* ======================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}