/* Sistema visual "Nube" — variables de marca, formas orgánicas y estados de foco.
   Tailwind (CDN) cubre utilidades; esto cubre lo que Tailwind no resuelve con clases. */

:root {
    --nube-fondo: #FAF6F0;
    --nube-texto: #2B2622;
    --nube-primario: #B5502E;
    --nube-secundario: #4B5842;
    --nube-fondo-oscuro: #2B2622;
}

body {
    background-color: var(--nube-fondo);
    color: var(--nube-texto);
    font-family: 'Onest', ui-sans-serif, system-ui, sans-serif;
}

.font-display {
    font-family: 'Fraunces', ui-serif, Georgia, serif;
}

/* Elemento firma: blob orgánico detrás de fotos de producto y en el hero. */
.nube-blob {
    position: absolute;
    border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
    background: var(--nube-primario);
    z-index: 0;
}

.nube-blob-secundario {
    border-radius: 55% 45% 38% 62% / 50% 62% 38% 50%;
    background: var(--nube-secundario);
}

/* Textura de grano sutil sobre bloques de color sólido, para que no se vean planos. */
.nube-grano {
    position: relative;
}

.nube-grano::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Foco visible y consistente en toda la interfaz. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--nube-primario);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Skeleton de carga, acorde a la paleta (no gris genérico). */
.nube-skeleton {
    background: linear-gradient(90deg, #F0E9E0 25%, #E8DFD3 37%, #F0E9E0 63%);
    background-size: 400% 100%;
    animation: nube-shimmer 1.4s ease infinite;
}

@keyframes nube-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}