/* ==========================================================================
   Juguetes Quevedo — Design Tokens (prototipo Claude Design 2026)
   Paleta: Naranja/ocre marca Quevedo + warm neutrals
   Fuentes: Nunito (display) + Mulish (cuerpo)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=Mulish:wght@400;500;600;700&display=swap');

:root {
    /* ----- Brand ----- */
    --brand:            #cc7a17;
    --brand-strong:     #a85f10;
    --brand-ink:        #8a4e0c;
    --brand-tint:       #f7ecda;
    --brand-contrast:   #ffffff;

    /* Legacy aliases */
    --color-primary:        var(--brand);
    --pdp-thumb-selected:   var(--color-primary); /* color de miniatura seleccionada (galería #17) */
    --color-primary-dark:   var(--brand-strong);
    --color-cta:            var(--brand);
    --color-cta-dark:       var(--brand-strong);
    --color-text-on-primary:var(--brand-contrast);

    /* ----- Neutrals (warm) ----- */
    --ink:              #26221d;
    --ink-soft:         #5b554c;
    --muted:            #8a8377;
    --line:             #e9e4da;
    --surface:          #ffffff;
    --page:             #faf6ee;
    --hero-bg:          #f4ecdd;
    --section-alt:      #f5f0e6;

    /* Legacy aliases */
    --color-bg:             var(--page);
    --color-surface:        var(--surface);
    --color-surface-alt:    #fffbf5;
    --color-text:           var(--ink);
    --color-text-muted:     var(--ink-soft);
    --color-text-soft:      var(--muted);
    --color-border:         var(--line);
    --color-border-strong:  #d1d5db;

    /* ----- Semantic ----- */
    --ok:               #2f9e44;
    --warn:             #e8883a;
    --warn-bg:          #fdecd8;
    --danger:           #e03131;
    --color-success:    var(--ok);
    --color-warning:    var(--warn);
    --color-danger:     var(--danger);
    --color-info:       #2563eb;

    /* ----- Typography ----- */
    --font-display: 'Nunito', system-ui, sans-serif;
    --font-body:    'Mulish', system-ui, sans-serif;
    --font-heading: var(--font-display);

    --fs-xs:    12px;
    --fs-sm:    14px;
    --fs-base:  16px;
    --fs-lg:    18px;
    --fs-xl:    20px;
    --fs-2xl:   24px;
    --fs-3xl:   32px;
    --fs-4xl:   40px;
    --fs-5xl:   56px;

    --lh-tight: 1.12;
    --lh-base:  1.55;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold:600;
    --fw-bold:    700;
    --fw-extra:   800;

    /* ----- Spacing (base 4) ----- */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

    --space-xs:   var(--s1);
    --space-sm:   var(--s2);
    --space-md:   var(--s4);
    --space-lg:   var(--s5);
    --space-xl:   var(--s6);
    --space-2xl:  var(--s7);
    --space-3xl:  var(--s8);
    --space-4xl:  var(--s9);

    /* ----- Radii ----- */
    --r-sm:   8px;
    --r-md:   14px;
    --r-lg:   20px;
    --r-pill: 999px;

    --radius-sm:  var(--r-sm);
    --radius-md:  var(--r-md);
    --radius-lg:  var(--r-lg);
    --radius-xl:  24px;
    --radius-full:var(--r-pill);

    /* ----- Shadows ----- */
    --shadow-card:       0 1px 2px rgba(38,34,29,.04), 0 8px 24px rgba(38,34,29,.06);
    --shadow-card-hover: 0 4px 12px rgba(38,34,29,.10), 0 18px 44px rgba(38,34,29,.14);
    --shadow-pop:        0 12px 40px rgba(38,34,29,.18);

    --shadow-sm:  0 1px 2px rgba(38,34,29,.04);
    --shadow-md:  0 4px 12px rgba(38,34,29,.08);
    --shadow-lg:  0 12px 28px rgba(38,34,29,.12);
    --shadow-xl:  0 24px 48px rgba(38,34,29,.18);
    --shadow-cta: 0 6px 16px rgba(204, 122, 23, 0.28);
    --shadow-brand: 0 8px 20px color-mix(in oklab, var(--brand) 38%, transparent);

    /* ----- Transitions ----- */
    --t-fast:   150ms ease;
    --t-base:   200ms ease;
    --t-slow:   300ms ease;

    /* ----- Z-index ----- */
    --z-base:    1;
    --z-dropdown:10;
    --z-sticky:  20;
    --z-overlay: 30;
    --z-modal:   50;
    --z-toast:   60;

    /* ----- Layout ----- */
    --container-sm:  640px;
    --container-md:  768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl:1500px;

    /* Ancho maximo del contenedor global (fuente unica de verdad por tienda) */
    --container-max-width: 1360px;
}

/* ==========================================================================
   Base global
   ========================================================================== */

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--ink);
    background-color: var(--page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--ink);
    letter-spacing: -.01em;
    margin: 0;
}

p a,
.cms-content a,
.footer-container a {
    color: var(--brand-ink);
    transition: color var(--t-base);
}
p a:hover,
.cms-content a:hover,
.footer-container a:hover {
    color: var(--brand-strong);
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--t-base);
}

:focus-visible {
    outline: 3px solid rgba(204, 122, 23, 0.5);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

@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;
    }
}

/* ==========================================================================
   Buttons (shared pattern — color from brand tokens)
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    padding: 13px 22px;
    border-radius: var(--r-pill);
    min-height: 48px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary {
    background: var(--brand);
    color: var(--brand-contrast);
}
.btn-primary:hover {
    background: var(--brand-strong);
    color: var(--brand-contrast);
    transform: translateY(-1px);
    box-shadow: var(--shadow-brand);
}
.btn-ghost {
    background: transparent;
    color: var(--brand-ink);
    box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--brand) 40%, transparent);
}
.btn-ghost:hover {
    background: var(--brand-tint);
}
.btn-block { width: 100%; }
.btn-lg { font-size: 16px; padding: 16px 28px; min-height: 54px; }

/* ==========================================================================
   Icon circle
   ========================================================================== */

.iconc {
    width: 56px;
    height: 56px;
    border-radius: var(--r-pill);
    background: var(--brand-tint);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.iconc svg { width: 26px; height: 26px; }

/* ==========================================================================
   Section headers
   ========================================================================== */

.sec { padding: var(--s8) 0; }
.sec__head { text-align: center; margin-bottom: var(--s6); }
.sec__head h2 { font-size: 30px; font-weight: 800; color: var(--ink); }
.sec__rule {
    width: 54px;
    height: 4px;
    border-radius: var(--r-pill);
    background: var(--brand);
    margin: var(--s3) auto 0;
}
.sec__head p {
    color: var(--ink-soft);
    margin-top: var(--s3);
    max-width: 560px;
    margin-inline: auto;
}