/* ---------- SELF-HOSTED FONTS ---------- */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: optional;
    src: url(../fonts/roboto-300-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: optional;
    src: url(../fonts/roboto-300-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: optional;
    src: url(../fonts/roboto-400-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: optional;
    src: url(../fonts/roboto-700-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: optional;
    src: url(../fonts/roboto-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Rowdies';
    font-style: normal;
    font-weight: 400;
    font-display: optional;
    src: url(../fonts/rowdies-400-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Rowdies';
    font-style: normal;
    font-weight: 400;
    font-display: optional;
    src: url(../fonts/rowdies-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Rowdies';
    font-style: normal;
    font-weight: 700;
    font-display: optional;
    src: url(../fonts/rowdies-700-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Section backgrounds (.section--white, .section--accent) are in critical.css */

/* ---------- VISUAL ENHANCEMENTS (structural skeleton in critical.css) ---------- */
::selection { background-color: var(--accent); color: var(--white); }
.site-header { transition: box-shadow 0.3s ease; }
.site-header.scrolled { box-shadow: 0 2px 10px rgba(70, 62, 55, 0.1); }
.site-header__logo img { transition: transform 0.3s ease; }
.site-nav a { transition: color 0.3s ease; }
.site-nav a::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px;
    background: var(--accent); transform: scaleX(0); transform-origin: right;
    transition: transform 0.3s ease-out;
}
.site-nav a:hover { color: var(--accent); }
.site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
/* h1 structural (font-size, family, weight) in critical.css */
h1 { text-shadow: 3px 3px 0px rgba(255, 255, 255, 0.6); }

/* Inline links inside the page-header subtitle (e.g. "Contado por Alvaro").
   Inherit the uppercase tracked typography from the subtitle and pick up the
   accent on hover — same pattern as voice-card__name a / audiofied-term meta. */
.page-header__subtitle a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.page-header__subtitle a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.button { cursor: pointer; transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.cart-bottom-bar { box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15); }
.cart-bottom-bar.is-visible { animation: cart-bar-slide-up 0.35s ease-in-out; }
@keyframes cart-bar-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .cart-bottom-bar.is-visible { animation: none; } }

/* ---------- SHARED: Content Card Base ---------- */
/* .expressionario-term-card structural (padding, border-radius) in critical.css */
.expressionario-term-card {
    background: var(--bg-light-gray);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* ---------- Community Voices ---------- */
/* .voice-player structural (grid, gap) in critical.css */
/* Smooth progress fill — --progress is updated by JS via timeupdate on the nearest .voice-player ancestor */
.voice-player__wave-bars--fg { transition: clip-path 0.1s linear; }
/* .voice-player__play structural (size, radius, bg, color) in critical.css */
.voice-player__play { cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); }
.voice-player__play:hover { background: var(--accent-dark); transform: scale(1.05); }
.voice-player__play.is-playing i::before { content: "\f04c"; }

/* .voice-card structural (flex, gap, padding, radius, background) in critical.css */
.voice-card { box-shadow: var(--shadow); border: 1px solid rgba(0, 0, 0, 0.04); transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; }
.voice-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); border-color: rgba(0, 0, 0, 0.06); }
.voice-card__name a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.voice-card__name a:hover { color: var(--accent); }
/* .voice-card__term structural (position, padding, radius, font, bg, color) in critical.css */
.voice-card__term { transition: background 0.2s ease, color 0.2s ease; }
.voice-card__term:hover { background: var(--accent); color: var(--white); }
.voice-card__term:hover .voice-card__term-icon { color: var(--white); }
.voice-card__region { transition: color 0.2s ease; }
.voice-card__region:hover { color: var(--accent); }
a.voice-card__spotlight { text-decoration: none; transition: color 0.2s ease; }
a.voice-card__spotlight:hover { color: var(--accent); }
/* Share button visuals unified under the shared .share-btn rule below.
   .voice-card__share no longer exists as a class — markup uses .share-btn. */
/* .voice-card__fresh structural (position, padding, radius, font, bg, color) in critical.css */
.voice-card__fresh { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); animation: voice-fresh-pulse 2.4s ease-in-out infinite; }
@keyframes voice-fresh-pulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); }
    50% { box-shadow: 0 2px 14px rgba(34, 197, 94, 0.5); }
}

/* .audiofied-term-card structural in critical.css */
.audiofied-term-card { box-shadow: var(--shadow); border: 1px solid rgba(0, 0, 0, 0.04); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.audiofied-term-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.audiofied-term-card__title a { transition: color 0.2s ease; }
.audiofied-term-card__title a:hover { color: var(--accent); }
.audiofied-term-card__voice-meta a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.audiofied-term-card__voice-meta a:hover { color: var(--accent); }

/* .magikito-card structural (flex, padding, radius, bg) in critical.css */
.magikito-card { box-shadow: var(--shadow); border: 1px solid rgba(0, 0, 0, 0.04); transition: box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease; }
.magikito-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); color: var(--accent); }
.magikito-card:hover .magikito-card__avatar { background-color: var(--accent); color: var(--white); }
.magikito-card__avatar { transition: background-color 0.2s ease, color 0.2s ease; }

/* .humano-feature-card structural (flex, padding, radius, bg) in critical.css */
.humano-feature-card { box-shadow: var(--shadow); border: 1px solid rgba(0, 0, 0, 0.04); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.humano-feature-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.humano-feature-card__link { transition: color 0.2s ease; }
.humano-feature-card:hover .humano-feature-card__link { color: var(--accent); }
/* profile-socials__link (used here and on profile pages) — structural in critical.css */
.profile-socials__link { transition: background-color 0.2s ease, color 0.2s ease; }
.profile-socials__link:hover { background-color: var(--accent); color: var(--white); }

/* .expressionario-editors-grid card structural (grid, white card, padding) in critical.css */
.expressionario-editors-grid .term-editor { box-shadow: var(--shadow); border: 1px solid rgba(0, 0, 0, 0.04); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.expressionario-editors-grid .term-editor:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }

/* .expressionario-map-preview structural (block, sizing, radius) in critical.css */
.expressionario-map-preview { box-shadow: var(--shadow); border: 1px solid rgba(0, 0, 0, 0.06); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.expressionario-map-preview:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.expressionario-map-preview__hint { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }

/* .voces-cta-block structural (flex, gap, padding) in critical.css */
.voces-cta-block__icon { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); }

/* .button--whatsapp-voice structural skeleton (display, padding, radius, font) in critical.css.
   Colors and visual polish live here. */
.button--whatsapp-voice { background: #25D366; color: var(--white); cursor: pointer; transition: background 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 14px rgba(37, 211, 102, 0.25); }
.button--whatsapp-voice:hover { background: #1fb855; box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35); }

/* .send-audio-modal structural (reuses .magikitos-modal shell) in critical.css. Visual polish only here. */
.send-audio-modal__icon { box-shadow: 0 4px 16px rgba(37, 211, 102, 0.2); }
.send-audio-modal__recipe li { line-height: 1.4; }

/* .voice-card__append-cta structural in critical.css. Entry animation + button hover polish. */
.voice-card__append-cta { animation: voice-cta-appear 0.35s ease-out both; }
.voice-card__append-cta__button { transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; box-shadow: 0 2px 8px rgba(37, 211, 102, 0.25); }
.voice-card__append-cta__button:hover { background: #1fb855; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35); }
@keyframes voice-cta-appear {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* .expressionario-empty-term structural in critical.css. Visual polish only here. */
.expressionario-empty-term { box-shadow: var(--shadow); border: 1px dashed rgba(37, 211, 102, 0.35); }
.expressionario-empty-term__icon { box-shadow: 0 4px 16px rgba(37, 211, 102, 0.2); }

/* .expressionario-counter structural in critical.css. Visual polish only here. */
.expressionario-counter__link { transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; box-shadow: var(--shadow); }
.expressionario-counter__link:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }

/* .expressionario-recent-voices / .recent-voice-item structural in critical.css */
.recent-voice-item { transition: background 0.2s ease; }
.recent-voice-item:hover { background: var(--bg-light-gray); }
.recent-voice-item__play { cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; }
.recent-voice-item__play:hover { background: var(--accent-dark); transform: scale(1.08); }
.recent-voice-item__play.is-playing i::before { content: "\f04c"; }
.recent-voice-item__body:hover .recent-voice-item__term { color: var(--accent); }


/* ---------- SHARED: Audio Button ---------- */
.audio-btn {
    background: none;
    border: 1px solid var(--accent);
    cursor: pointer;
    color: var(--accent);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}

.audio-btn:hover {
    background: var(--accent);
    color: var(--white);
}

.audio-btn.is-playing {
    background: var(--color-green-dark);
    border-color: var(--color-green-dark);
    color: var(--white);
}

.audio-btn.is-playing:hover {
    background: var(--color-green-dark);
    border-color: var(--color-green-dark);
}

.audio-btn.is-playing i::before {
    content: "\f28b"; /* fa-circle-pause */
}

.audio-btn.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

.audio-btn.is-loading i::before {
    content: "\f110"; /* fa-spinner */
}

.audio-btn.is-loading i {
    animation: fa-spin 1s linear infinite;
}

/* Audio button round inline variant (used in content block headers) */

/* ---------- SHARED: Share Button ----------
   Modern borderless pill, neutral gray by default with a subtle tinted
   background on hover and a nudged icon. Structure (flex, gap, padding,
   radius, font-size) lives in critical.css. This file only paints the
   visual layer.
*/
.share-btn {
    background: transparent;
    border: none;
    color: var(--color-gray-dark);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.share-btn i {
    transition: transform 0.15s ease;
}
.share-btn:hover {
    background: rgba(70, 62, 55, 0.08);
    color: var(--accent);
}
.share-btn:hover i {
    transform: scale(1.12);
}

/* ---------- HERO DE BIENVENIDA (SOLO HOME) ---------- */
/* .home-hero / .home-bubbles structural skeleton in critical.css.
   The home no longer ships a logo, hero-intro, hero-ctas or its own
   navigation drawer — the global .site-header from main.php carries those
   responsibilities on every page including this one. */

/* Hero background blobs (reused by page-header-orbs.php on non-home pages). */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
    animation: heroFloat 10s ease-in-out infinite;
}
@keyframes heroFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(15px, -25px) scale(1.08); }
    50% { transform: translate(-10px, 15px) scale(0.95); }
    75% { transform: translate(20px, 10px) scale(1.05); }
}
.hero-sparkle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    filter: blur(4px);
    pointer-events: none;
    z-index: 0;
    animation: heroSparkle 15s ease-in-out infinite;
}
@keyframes heroSparkle {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 0.9; transform: scale(1.5); }
}

/* Smaller variants for page-header (shorter sections) */
.hero-orb--sm.hero-orb--1 {
    width: 180px;
    height: 180px;
    top: -20%;
    left: -8%;
}
.hero-orb--sm.hero-orb--2 {
    width: 150px;
    height: 150px;
    bottom: -25%;
    right: -8%;
}
.hero-orb--sm.hero-orb--3 {
    width: 100px;
    height: 100px;
    top: 20%;
    right: 3%;
}

/* Randomised page-header sparkles: top/left/delay/color injected per render via inline CSS vars
   (page-header-orbs.php). */
.hero-sparkle.hero-sparkle--rand {
    top: var(--sparkle-top, 30%);
    left: var(--sparkle-left, 10%);
    right: auto;
    bottom: auto;
    animation-delay: var(--sparkle-delay, 0s);
    background: var(--sparkle-color, var(--accent));
}

/* Home hero polish.

   The title is treated as a giant engraved background label in critical.css.

   Bubble reveal: JS positions each bubble then staggers .is-revealed. The
   bouncy cubic-bezier makes them pop with personality. Float drift lives
   on the face (child of the bubble) so it doesn't fight either the reveal
   transform on the parent or the scroll-spring translate. Each bubble
   carries its own --drift-x/y and --float-dur (set by JS) so floats are
   independent and don't beat in unison. */
.home-bubble {
    transition:
        opacity 0.6s ease,
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease,
        top 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        left 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        /* Per-bubble catchup-lag: each bubble eases toward the JS-driven
           --cloud-lag / --cloud-tilt-vel on its own duration (--lag-react
           is randomised by JS), so the cloud responds to scroll with a
           bit of staggered independence instead of moving in lock-step. */
        translate var(--lag-react, 0.12s) cubic-bezier(0.33, 1, 0.68, 1),
        rotate    var(--lag-react, 0.12s) cubic-bezier(0.33, 1, 0.68, 1);
    will-change: transform, opacity, translate, rotate;
}
.home-bubble.is-revealed {
    opacity: 1;
    transform: scale(1);
}
.home-bubble.is-revealed:hover,
.home-bubble.is-revealed:focus-visible {
    transform: scale(1.06);
    box-shadow: 0 14px 28px var(--shadow-hover);
    outline: none;
    z-index: 2;
}
.home-bubble__face {
    will-change: translate;
}
.home-bubble.is-revealed .home-bubble__face {
    animation: homeBubbleFloat var(--float-dur, 10s) ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
}
@keyframes homeBubbleFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: var(--drift-x, 0) var(--drift-y, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .home-bubble { transition: opacity 0.2s linear; }
    .home-bubble.is-revealed { transform: scale(1); }
    .home-bubble.is-revealed .home-bubble__face { animation: none; }
}

/* ---------- BUTTON VARIANTS ---------- */

/* Disabled button state */
.button:disabled,
.button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--color-border);
    border-color: var(--color-border);
    box-shadow: none;
    transform: none;
}

/* Adopted / sold-out CTA — disabled but fully legible (dark text on soft gray) */
.button--disabled,
.button--disabled[disabled] {
    opacity: 1;
    background: var(--bg-light-gray);
    border-color: var(--color-gray-medium);
    color: var(--txt);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* Button variants — single .button-- family. Default .button uses var(--txt) bg. */
.button--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}

.button--primary:hover:not(:disabled) {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: var(--white);
    box-shadow: 0 12px 25px -5px rgba(255, 138, 61, 0.5);
}

.button--secondary {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--white);
}

.button--secondary:hover:not(:disabled) {
    background: var(--color-blue-dark);
    border-color: var(--color-blue-dark);
    color: var(--white);
    box-shadow: 0 12px 25px -5px rgba(33, 150, 243, 0.5);
}

.button--success {
    background: var(--color-green-dark);
    border-color: var(--color-green-dark);
    color: var(--white);
}

.button--success:hover:not(:disabled) {
    background: var(--color-green);
    border-color: var(--color-green);
    color: var(--white);
    box-shadow: 0 12px 25px -5px rgba(139, 195, 74, 0.5);
}

.button--large {
    padding: 1.25rem 3rem;
    font-size: 1.2rem;
}

.button--small {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    margin-top: 0;
}

/* Inline "or" separator: thin rule with centred uppercase label, used between alternative
   actions (e.g. Express Checkout vs manual form). Reusable anywhere — drop a
   <div class="or-separator"><span>texto</span></div> and it formats itself. */
.or-separator {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    margin: var(--gap-lg) 0;
    color: var(--color-gray);
}
.or-separator::before,
.or-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}
.or-separator span {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
}


.button:focus-visible {
    outline: 3px dashed var(--accent);
    outline-offset: 4px;
}

/* Link button - inline button style for text flow */
.link-button {
    display: inline;
    padding: 0.15em 0.5em;
    font-weight: 600;
    color: var(--accent);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--accent);
    border-radius: 3px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-bottom-color 0.2s ease;
    font-family: var(--font-body);
}

.link-button:hover {
    background: var(--accent);
    color: var(--white);
    border-bottom-color: var(--accent);
}

.link-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------- TEXT AND IMAGE / TEXT AND OBJECT COMPONENTS ---------- */
/* Structure (.text-and-img + .text-and-object, their __* children, responsive) is in critical.css */

.text-and-img__image, .gallery-item {
    border-radius: var(--radius-lg);
    box-shadow: 0 15px 30px var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.text-and-img__image:hover, .gallery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 40px var(--shadow-hover);
}

/* Prose hyperlink styling — scoped to text-flow elements (p / li / blockquote)
   so component-class anchors that sit as direct children of __text (account-btn,
   .button, future button families) retain their own styling without needing an
   ever-growing :not() exclusion list. */
.text-and-img__text :is(p, li, blockquote) a,
.text-and-object__text :is(p, li, blockquote) a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid rgba(255, 138, 61, 0.4);
    transition: border-bottom-color 0.3s ease, color 0.3s ease;
}

.text-and-img__text :is(p, li, blockquote) a:hover,
.text-and-object__text :is(p, li, blockquote) a:hover {
    border-bottom-color: var(--accent);
    color: var(--txt);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

/* ---------- VIDEO Y GALERÍA ---------- */
/* Structure (.video-container base) is in critical.css */
.video-container {
    border-radius: var(--radius-lg);
    box-shadow: 0 15px 30px var(--shadow);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ---------- PREVIEW CARDS (DRY abstract grid + card) ---------- */
/* Two visual idioms share the same naming and grid:
   - default .preview-card        — square image then title below (e.g. cuentos)
   - .preview-card--feature       — image fills card, title+text overlay (e.g. creature families)
   Density is controlled per instance via --preview-cols / --preview-cols-mobile inline vars.
   Aspect-ratio + min-height are set explicitly on the children to prevent CLS. */
.preview-grid {
    display: grid;
    grid-template-columns: repeat(var(--preview-cols-mobile, 1), 1fr);
    gap: var(--gap-lg);
    margin-top: 2rem;
}
@media (min-width: 768px) {
    .preview-grid { grid-template-columns: repeat(var(--preview-cols, 3), 1fr); }
}

.preview-card { display: block; text-decoration: none; color: inherit; }
.preview-card__image {
    position: relative; width: 100%; aspect-ratio: 1; overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px var(--shadow);
    transition: box-shadow 0.3s ease;
}
.preview-card:hover .preview-card__image { box-shadow: 0 4px 16px var(--shadow-hover); }
.preview-card__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.preview-card__title {
    margin-top: 0.75rem; font-size: 0.95rem; font-weight: 600;
    color: var(--txt); text-align: center; line-height: 1.3;
}
@media (min-width: 768px) { .preview-card__title { font-size: 1rem; } }

/* Feature variant: image-bg with text overlaid through a darkening gradient */
.preview-card--feature {
    position: relative; overflow: hidden;
    border-radius: var(--radius-lg);
    color: var(--white);
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 320px;
    transition: box-shadow 0.3s ease;
}
.preview-card--feature::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
    transition: background 0.3s ease;
}
.preview-card--feature:hover { box-shadow: 0 12px 30px rgba(0,0,0,0.25); }
.preview-card--feature:hover::after { background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.2) 70%, transparent 100%); }
.preview-card--feature .preview-card__image {
    position: absolute; inset: 0; aspect-ratio: auto;
    border-radius: 0; box-shadow: none;
}
.preview-card--feature:hover .preview-card__image { box-shadow: none; }
.preview-card--feature .preview-card__image img { transition: transform 0.5s ease; }
.preview-card--feature:hover .preview-card__image img { transform: scale(1.05); }
.preview-card--feature h3, .preview-card--feature p {
    position: relative; z-index: 2; padding: 0 var(--gap-md);
}
.preview-card--feature h3 {
    font-family: var(--font-title); color: var(--white);
    margin-bottom: var(--gap-xs); font-size: 1.4rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.preview-card--feature h3 i { margin-right: 0.3rem; }
.preview-card--feature p { font-size: 0.95rem; line-height: 1.5; padding-bottom: var(--gap-md); opacity: 0.9; }

/* ---------- FOOTER ---------- */
/* Structure (.footer base, .footer .container grid, .footer__logo dimensions) is in critical.css */
.footer {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    transition: padding-bottom 0.3s ease;
}

.footer__logo-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer__logo {
    margin-bottom: 0.5rem;
}

.footer__logo.border-rounded {
    background-color: var(--bg);
    border-radius: var(--radius-md);
    opacity: .4;
    transition: opacity linear 300ms;
}

.footer__logo.border-rounded:hover {
    opacity: 1;
}

.footer__copyright {
    font-size: 0.9rem;
    opacity: 0.8;
    line-height: 1.5;
    margin: 0;
}

.footer__col h4 {
    font-family: var(--font-title);
    font-size: 1.3rem;
    margin-bottom: 1.2rem;
    color: var(--white);
    font-weight: 400;
}

.footer__nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.footer__nav--two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem 1.5rem;
}

.footer__nav--three-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.8rem 1.5rem;
}

.footer__nav li {
    padding: 0;
    margin: 0;
}

.footer__nav a {
    color: var(--bg);
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    opacity: 0.9;
}

.footer__nav a:hover {
    color: var(--accent);
    opacity: 1;
}

.socials-nav {
    flex-direction: row;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.footer__socials-separated {
    margin-top: 3rem;
}

.socials-nav a {
    font-size: 1.8rem;
}

.socials-nav a:hover {
    transform: scale(1.15);
}

.language-switcher {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
}

.language-switcher__list {
    list-style: none;
    display: flex;
    gap: var(--gap-xs);
    padding: 0;
    margin: 0;
}

.language-switcher__link {
    font-size: 0.8rem;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}

.language-switcher__link:hover {
    background: rgba(255, 255, 255, 0.15);
    color: inherit;
}

.language-switcher__current {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.15);
    opacity: 0.6;
}

@media (max-width: 900px) {
    .footer__nav--three-cols {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    /* grid-template-columns: 1fr + text-align: center are in critical.css */
    .footer .container { gap: 2.5rem; }
    .footer__logo-col, .footer__nav { align-items: center; }
    .footer__nav a:hover { transform: scale(1.05); }
    .socials-nav { justify-content: center; }
}

/* ---------- ESTILOS DE PÁGINAS INTERNAS ---------- */

/* Breadcrumb Navigation */
/* Structure (.breadcrumb base, .breadcrumb__list, responsive) is in critical.css */

.breadcrumb__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb__item:not(:last-child)::after {
    content: '\f054';
    font-family: 'Font Awesome 6 Pro';
    font-weight: 900;
    font-size: 0.65rem;
    color: var(--white);
    opacity: 0.5;
}

.breadcrumb__link {
    color: var(--white);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.breadcrumb__link:hover {
    opacity: 1;
}

.breadcrumb__current {
    color: var(--white);
    opacity: 1;
    font-weight: 500;
}

/* Hero chispas badges (circular icons in header) */
.hero-chispas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.hero-chispa-badge {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--chispa-color, var(--accent));
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.3rem;
    box-shadow: 0 4px 12px rgba(70, 62, 55, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.hero-chispa-badge::before {
    content: attr(title);
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--txt);
    color: var(--white);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    font-family: var(--font-body);
    font-weight: 400;
}

.hero-chispa-badge::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--txt);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.hero-chispa-badge:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(70, 62, 55, 0.25);
}

.hero-chispa-badge:hover::before,
.hero-chispa-badge:hover::after {
    opacity: 1;
}

.hero-chispa-badge i {
    display: block;
}

@media (max-width: 767px) {
    .hero-chispa-badge {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
}

.page-content {
    background: var(--white);
}

.page-content.section--accent {
    background: var(--bg);
}

.page-content.section--light {
    background: var(--bg-light);
}

/* ---------- PÁGINA LISTADO DE ITEMS (CUENTOS, DUENDES) ---------- */
/* Structure (.item-grid, .item-card, __image, __content, __actions) is in critical.css */
.item-grid { margin-top: 0; }
.item-card {
    box-shadow: 0 15px 30px var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    text-decoration: none; color: var(--txt); position: relative;
    will-change: transform, box-shadow;
}
.item-card:hover { box-shadow: 0 20px 40px var(--shadow-hover); }
.item-card__image-link { display: block; }
.item-card__title-link { text-decoration: none; color: inherit; }
.item-card__title-link:hover, .item-card__title-link:focus { text-decoration: none; color: inherit; }
.item-card__image-wrapper { position: relative; width: 100%; display: block; flex-shrink: 0; }
.item-card__image { vertical-align: middle; }
.item-card__content { flex-shrink: 0; }

/* Archetype listing collage polish — structural grid is in critical.css.
   Each tile lifts subtly when the card is hovered, like papers fanning out
   of an open folder. Sold and available tiles render identically so every
   making in the folder gets its moment, regardless of who took it home. */
.archetype-collage { transition: transform 0.25s ease; }
.archetype-collage__tile { transition: transform 0.3s ease; }
.item-card--archetype-listing:hover .archetype-collage__tile { transform: scale(1.02); }
/* Intro modifier polish — pairs with .archetype-collage--intro in critical.css.
   Same shadow as .text-and-img__image had before so the section reads the same. */
.archetype-collage--intro { box-shadow: 0 15px 30px var(--shadow); }
.item-card--archetype-listing h3 a {
    text-decoration: none; color: inherit;
}
.item-card--archetype-listing h3 a:hover { color: var(--accent); }

/* Multi-image carousel — visual polish. Structural skeleton in critical.css. */
.item-card__carousel-track { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.item-card__carousel-arrow {
    cursor: pointer;
    box-shadow: 0 2px 8px var(--shadow);
    transition: opacity 0.25s ease, background 0.2s ease, color 0.2s ease;
}
.item-card__carousel:hover .item-card__carousel-arrow { opacity: 0.92; }
.item-card__carousel-arrow:hover { background: var(--accent); color: var(--white); }
.item-card__carousel-arrow:disabled { opacity: 0; pointer-events: none; }
.item-card__carousel-dot {
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: background 0.2s ease, transform 0.2s ease;
}
.item-card__carousel-dot.is-active { transform: scale(1.25); }

/* Product gallery — visual polish. Structural skeleton in critical.css. */
.product-gallery__track { scroll-behavior: smooth; }
.product-gallery__main { box-shadow: 0 4px 18px var(--shadow); }
.product-gallery__arrow {
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.product-gallery__arrow:hover:not(:disabled) {
    background: var(--accent); color: var(--white);
    transform: translateY(-50%) scale(1.08);
}
.product-gallery__arrow:disabled { opacity: 0; pointer-events: none; }
.product-gallery__zoom {
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.product-gallery__zoom:hover { background: var(--accent); color: var(--white); transform: scale(1.08); }
.product-gallery__counter { box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.product-gallery__dot { transition: background 0.2s ease, transform 0.2s ease; cursor: pointer; }
.product-gallery__dot.is-active { transform: scale(1.3); }
.product-gallery__thumb { transition: border-color 0.2s ease, transform 0.2s ease; }
.product-gallery__thumb:hover { transform: translateY(-2px); }
.product-gallery__slide { transition: opacity 0.3s ease; }

.product-lightbox { transition: opacity 0.2s ease; backdrop-filter: blur(8px); }
.product-lightbox__close,
.product-lightbox__arrow { transition: background 0.2s ease, transform 0.2s ease; }
.product-lightbox__close:hover { background: rgba(255,255,255,0.3); transform: scale(1.08); }
.product-lightbox__arrow:hover:not(:disabled) { background: rgba(255,255,255,0.3); transform: translateY(-50%) scale(1.08); }
.product-lightbox__arrow:disabled { opacity: 0.3; pointer-events: none; }

/* Archetype + product-detail page polish (structure in critical.css). */
.archetype-products-section__count a { color: var(--accent-dark); text-decoration: none; transition: color 0.2s ease; }
.archetype-products-section__count a:hover { color: var(--accent); }
.item-card__title-link { transition: color 0.2s ease; }
.item-card__title-link:hover { color: var(--accent); }
.product-detail-grid__sold-out-banner .out-of-stock-text { box-shadow: 0 4px 18px var(--shadow-hover); }

.item-card__content h3 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

.item-card__content h3 a,
.item-card__content h3 a:hover,
.item-card__content h3 a:focus,
.item-card__content h3 a:active,
.item-card__content h3 a:visited {
    color: inherit;
    text-decoration: none;
}

.item-card__content p {
    font-size: 0.85rem;
    margin-bottom: 0;
    flex-grow: 1;
}

/* Article card author byline. Structure (.item-card__meta, __meta-author,
   __meta-avatar) and the 16:9 image modifier live in critical.css. */
.item-card__meta-author {
    color: var(--txt);
    text-decoration: none;
    transition: color 0.2s ease;
}
.item-card__meta-author:hover,
.item-card__meta-author:focus { color: var(--accent-dark); }
.item-card__meta-author strong { font-weight: 700; }

/* ---------- PÁGINA DE CONTENIDO INDIVIDUAL (CUENTO, DUENDE) ---------- */
.single-content__body {
    max-width: 70ch;
    margin: 0 auto;
    font-size: clamp(1.1rem, 1.5vw, 1.25rem);
    line-height: 1.8;
    color: var(--txt);
}

/* Headings */
.single-content__body h1,
.single-content__body h2,
.single-content__body h3,
.single-content__body h4 {
    font-family: var(--font-title);
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    line-height: 1.3;
    color: var(--txt);
}

.single-content__body h2 {
    font-size: clamp(2rem, 4vw, 2.5rem);
    position: relative;
    padding-bottom: 0.75rem;
}

.single-content__body h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), transparent);
    border-radius: 2px;
}

.single-content__body h3 {
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    color: var(--accent);
}

.single-content__body h4 {
    font-size: clamp(1.3rem, 2.5vw, 1.6rem);
}

/* Paragraphs */
.single-content__body p {
    margin: 0 0 1.5rem 0;
}

/* Links */
.single-content__body a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid rgba(255, 138, 61, 0.4);
    transition: border-bottom-color 0.3s ease, color 0.3s ease;
}

.single-content__body a:hover {
    border-bottom-color: var(--accent);
    color: var(--txt);
}

/* Strong and Emphasis */
.single-content__body strong {
    font-weight: 700;
    color: var(--txt);
    background: linear-gradient(180deg, transparent 60%, rgba(255, 138, 61, 0.15) 60%);
    padding: 0 0.15em;
}

.single-content__body em {
    font-style: italic;
    color: var(--accent);
}

/* Lists */
.single-content__body ul,
.single-content__body ol {
    margin: 2rem 0;
    padding-left: 1.5rem;
}

.single-content__body ul {
    list-style: none;
}

.single-content__body ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.7;
}

.single-content__body ul li::before {
    content: '✦';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-size: 0.9em;
}

.single-content__body ol {
    counter-reset: list-counter;
    list-style: none;
}

.single-content__body ol li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1.7;
    counter-increment: list-counter;
}

.single-content__body ol li::before {
    content: counter(list-counter);
    position: absolute;
    left: 0;
    top: 0.1em;
    background: var(--accent);
    color: var(--white);
    font-weight: 700;
    font-size: 0.85em;
    width: 1.6em;
    height: 1.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Blockquotes */
.single-content__body blockquote {
    margin: 2.5rem 0;
    padding: 1.5rem 2rem;
    background: var(--bg-light-orange);
    border-left: 5px solid var(--accent);
    border-radius: var(--radius-sm);
    font-style: italic;
    color: rgba(70, 62, 55, 0.9);
}

.single-content__body blockquote p {
    margin-bottom: 0;
}

/* Horizontal Rules */
.single-content__body hr {
    margin: 3rem auto;
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    max-width: 200px;
}

/* Code blocks */
.single-content__body code {
    background: var(--bg-light-gray);
    padding: 0.2em 0.5em;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: var(--txt);
}

.single-content__body pre {
    background: var(--bg-light-gray);
    padding: 1.5rem;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    margin: 2rem 0;
}

.single-content__body pre code {
    background: none;
    padding: 0;
}

/* Images within content (figure.image skeleton in critical.css) */
.single-content__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px var(--shadow);
}

/* figure.image visual polish (structural skeleton in critical.css) */
figure.image img {
    border-radius: var(--radius-md);
}

figure.image figcaption {
    color: var(--color-gray-medium);
    font-style: italic;
    line-height: 1.4;
}

/* Article body components polish — structure/skeleton in critical.css
   (.article-media/__figure/__text, .article-figure, .article-callout,
   .article-list, .article-pullquote). Component images reuse the
   generic .single-content__body img radius + shadow. */
.single-content__body .article-callout { border-left: 5px solid var(--accent); }
.single-content__body .article-pullquote { box-shadow: 0 4px 16px var(--shadow); }
.single-content__body .article-pullquote::before { box-shadow: 0 2px 8px var(--shadow); }
/* Caption-card shadow takes over from .single-content__body img so the shadow
   wraps the whole card (image + figcaption) instead of leaking between them. */
.single-content__body .article-figure:has(> figcaption),
.single-content__body .article-media__figure:has(> figcaption) { box-shadow: 0 4px 16px var(--shadow); }
.single-content__body .article-figure:has(> figcaption) > img,
.single-content__body .article-media__figure:has(> figcaption) > img { box-shadow: none; }
.single-content__body .article-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0.05em;
    color: var(--accent);
    font-weight: 700;
}

/* YouTube embed */
.single-content__body .yt-embed {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 2.5rem auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 24px var(--shadow);
}

.single-content__body .yt-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Tables (if used) */
.single-content__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    background: var(--white);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: 0 2px 8px var(--shadow);
}

.single-content__body table th,
.single-content__body table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(70, 62, 55, 0.1);
}

.single-content__body table th {
    background: var(--bg-light-orange);
    font-weight: 700;
    color: var(--txt);
}

.single-content__body table tr:last-child td {
    border-bottom: none;
}

/* Nested lists */
.single-content__body ul ul,
.single-content__body ol ol,
.single-content__body ul ol,
.single-content__body ol ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* ---------- CONTENT SINGLE LAYOUT (Duendes, Hadas, Chispas) ---------- */
/* Structure (.content-single__grid, __image-container, __image base) is in critical.css */

.content-single__image-container .video-container {
    max-width: 500px;
    max-height: none;
}

@media (min-width: 1200px) {
    /* Structure (.content-single__grid 2-col, __image-container max-height) is in critical.css */

    .content-single__image-container {
        position: sticky;
        top: 7rem;
        align-self: flex-start;
    }

    .content-single__image-container .video-container {
        max-width: none;
    }
}

.content-single__image {
    box-shadow: 0 15px 30px var(--shadow);
}

.content-single__content {
    min-width: 0;
}

/* ---------- PÁGINA 404 ---------- */
.not-found__image {
    max-width: 300px;
    margin: 2rem auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 15px 30px var(--shadow);
    transform: rotate(-3deg);
}

/* ---------- CONTACT PAGE ---------- */
.contact-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 768px) {
    .contact-form-grid {
        grid-template-columns: 1fr 1.5fr;
        gap: 3rem;
    }

    .contact-form-intro {
        position: sticky;
        top: 6.3rem;
        align-self: start;
    }
}

.contact-form-intro h2 {
    margin-top: 0;
    font-size: 2rem;
}

.contact-form-intro p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--txt);
}

.contact-form {
    background: var(--white);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.contact-form-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .contact-form-actions {
        flex-direction: row;
        gap: 1.5rem;
    }

    .contact-form-actions .button {
        flex: 1;
    }
}

.button--whatsapp {
    background: var(--color-green-bright);
    border-color: var(--color-green-bright);
    color: var(--white);
}

.button--whatsapp:hover {
    background: #128C7E;
    border-color: #128C7E;
    color: var(--white);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: var(--txt);
    font-size: 1rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    border: 2px solid var(--color-border);
    border-radius: 12px;
    font-size: 1rem;
    font-family: var(--font-body);
    transition: border-color 0.2s ease;
    background: var(--white);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--color-gray-medium);
    font-style: italic;
}

.form-group textarea {
    resize: vertical;
    min-height: 150px;
    line-height: 1.6;
}

.form-group .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    font-weight: 400;
}

.form-group .checkbox-label input[type="checkbox"] {
    width: auto;
    margin-top: 0.25rem;
    cursor: pointer;
    flex-shrink: 0;
}

.form-group .checkbox-label span {
    line-height: 1.5;
}

.form-group .checkbox-label a {
    color: var(--accent);
    text-decoration: underline;
}

.form-group .checkbox-label a:hover {
    color: var(--accent-dark);
}

/* Inline CTA on chiste-single, sits below transcription. Visual only —
   structural margin lives here because audio-single-content is purely a swap
   surface and we want zero layout shift when audio-card.js replaces it. */
.chiste-single__cta {
    margin-top: var(--gap-lg);
    text-align: center;
}

/* ---------- SHOP STYLES ---------- */

/* When a modal is open, prevent body scroll (position: fixed required for iOS Safari) */
.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* Chispa pills (tesoro detail body) */
.product-chispas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.product-chispas__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pill);
    background-color: color-mix(in srgb, var(--chispa-color) 12%, white);
    color: var(--chispa-color);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.product-chispas__pill:hover {
    background-color: var(--chispa-color);
    color: white;
}

.product-chispas__pill i {
    font-size: 0.8rem;
}

.item-card__actions {
    display: flex;
    gap: 0.8rem;
    padding: 0 1rem 1rem;
    margin-top: auto;
}

.item-card__actions > * {
    flex: 1;
}

.item-card__button {
    width: 100%;
    margin-top: 0;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    border-radius: var(--radius-md);
}

.item-card__button--add {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}

.item-card__button--add:hover {
    background: var(--txt);
    border-color: var(--txt);
    box-shadow: none;
    transform: scale(1.05);
}

/* Checkout Modal Cart View */
#cart-items-container {
    margin-bottom: 2rem;
}

.cart-item {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1rem 2.5rem 1rem 0;
    border-bottom: 1px solid var(--bg-light-gray);
    position: relative;
}

@media (min-width: 768px) {
    .cart-item {
        grid-template-columns: 80px 1fr auto auto;
        gap: 1.5rem;
        align-items: center;
        padding: 1rem 0;
    }
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item__image img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 10px;
}

@media (min-width: 768px) {
    .cart-item__image img {
        width: 80px;
        height: 80px;
    }
}

.cart-item__name {
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
}

@media (min-width: 768px) {
    .cart-item__name {
        font-size: 1.1rem;
    }
}

.cart-item__price {
    font-size: 0.9rem;
    color: #555;
    margin: 0.25rem 0 0.5rem 0;
}

@media (min-width: 768px) {
    .cart-item__price {
        font-size: 1rem;
        margin: 0;
    }
}

.cart-item__quantity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

@media (min-width: 768px) {
    .cart-item__quantity {
        margin-top: 0;
    }
}

.cart-item__quantity input {
    width: 40px;
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    padding: 0.3rem;
}

/* +/- quantity stepper for stock_type=multiple cart items. The trash-icon
   remove button has its own scoped styling under .checkout-summary in
   critical.css (skeleton) + style.css (hover), so it lives separately. */
.cart-item__quantity-btn {
    background: none;
    border: 1px solid var(--color-border);
    cursor: pointer;
    width: 30px; height: 30px; min-width: 30px; min-height: 30px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease, color .2s ease;
    padding: 0; font-size: 1rem; line-height: 1; flex-shrink: 0;
}
.cart-item__quantity-btn:hover { background: var(--txt); color: var(--white); }

.cart-summary__row {
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.cart-summary__row--total {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--color-border);
}

/* Site Form Styles */
.site-form {
    margin-top: 2rem;
}

.form-row {
    margin-bottom: 1rem;
}

.form-row label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.form-row input,
.form-row textarea,
.form-row select {
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    font-size: 1rem;
    font-family: var(--font-body);
}

/* Phone input with country prefix */
.phone-input-wrapper {
    display: flex;
    gap: 0.5rem;
}

.phone-prefix {
    width: 90px !important;
    flex-shrink: 0;
    text-align: center;
    font-weight: 600;
}

.phone-input-wrapper input[type="tel"] {
    flex: 1;
}

.form-hint {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: var(--color-gray);
}

.form-row textarea {
    resize: vertical;
    min-height: 120px;
}

#card-element {
    padding: 0.8rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: white;
}

/* ---------- CHECKOUT PURPOSE TOGGLE ---------- */
.checkout-purpose {
    margin-bottom: var(--gap-lg);
    padding: var(--gap-md);
    background: var(--bg-light-gray);
    border-radius: var(--radius-md);
}

.checkout-purpose__label {
    font-weight: 600;
    margin-bottom: var(--gap-sm);
}

.checkout-purpose__options {
    display: flex;
    gap: var(--gap-sm);
    margin-bottom: var(--gap-sm);
}

.checkout-purpose__option {
    flex: 1;
    cursor: pointer;
}

.checkout-purpose__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkout-purpose__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    transition: all 0.2s ease;
    background: var(--white);
    color: var(--txt);
}

.checkout-purpose__option input:focus-visible + .checkout-purpose__btn {
    outline: 3px dashed var(--accent);
    outline-offset: 2px;
}

.checkout-purpose__option input:checked + .checkout-purpose__btn {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--white);
}

.checkout-purpose__note {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
}

.checkout-purpose__note.is-visible {
    max-height: 200px;
    opacity: 1;
    margin-top: var(--gap-sm);
}

.checkout-purpose__note label {
    display: block;
    font-size: 0.95rem;
    margin-bottom: var(--gap-xs);
    font-weight: 500;
}

.checkout-purpose__note textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.95rem;
    resize: vertical;
    min-height: 70px;
}

.checkout-purpose__note textarea:focus {
    outline: none;
    border-color: var(--accent);
}

#card-errors {
    color: #fa755a;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    /* Stripe error messages can contain long unbreakable tokens (e.g.
       confirmParams.payment_method_data.billing_details.address.state). Without
       this they overflow the form width, and html{overflow-x:clip} then clips
       the whole page "cut on the sides". Force any token to wrap. */
    overflow-wrap: break-word;
    word-break: break-word;
}

.out-of-stock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* .out-of-stock-text structural moved to critical.css (shared with product-detail overlay, above the fold) */

.item-card.is-out-of-stock {
    opacity: 0.7;
}

.item-card.is-out-of-stock .item-card__actions {
    pointer-events: none;
    filter: grayscale(1);
}

.item-card.is-out-of-stock:hover {
    transform: none;
    box-shadow: 0 15px 30px var(--shadow);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

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

.infinite-scroll-sentinel {
    min-height: 1px;
}

.infinite-scroll-loader {
    text-align: center;
    padding: var(--gap-lg) 0;
}

.infinite-scroll-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: var(--accent);
    animation: spin 1s ease infinite;
    margin: 0 auto;
}

#payment-form .button {
    width: 100%;
}

/* Fly to cart animation */
.product-fly-to-cart {
    position: fixed;
    z-index: 9999;
    border-radius: 15px;
    transition: transform 0.8s cubic-bezier(0.55, 0, 0.875, 0.34), opacity 0.8s cubic-bezier(0.55, 0, 0.875, 0.34);
    pointer-events: none;
    object-fit: cover;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Flash Messages */
.flash-message {
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    font-weight: bold;
    border-left: 5px solid;
}

.flash-message.success {
    background-color: var(--bg-medium-green);
    color: #2e7d32;
    border-color: #2ecc71;
}

.flash-message.error {
    background-color: #ffebee;
    color: #c62828;
    border-color: var(--color-red);
}

/* ---------- CATEGORY FEATURES ---------- */

/* ---------- CHISPAS ICONS ON CARDS ---------- */
.item-card__chispas {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    z-index: 15;
}

.chispa-icon {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 32px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: var(--txt);
    overflow: visible;
    white-space: nowrap;
    position: relative;
    padding: 0;
}

.chispa-icon i {
    font-size: 1rem;
    transition: color 0.3s ease;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chispa-icon__label {
    max-width: 0;
    opacity: 0;
    margin-right: 0;
    font-size: 0.85rem;
    font-weight: 600;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    white-space: nowrap;
}

.chispa-icon:hover,
.chispa-icon:focus {
    padding-left: 0.75rem;
    padding-right: 0;
    background-color: var(--chispa-color, var(--accent));
    color: white;
}

.chispa-icon:hover .chispa-icon__label,
.chispa-icon:focus .chispa-icon__label {
    max-width: 150px;
    opacity: 1;
    margin-right: 0.5rem;
}

.chispa-icon:hover i {
    color: white;
}

/* ---------- CARD META (author + price) ---------- */
/* Structure (.item-card__meta, __meta-author, __meta-avatar dimensions) is in critical.css */

.item-card__meta {
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.item-card__meta-author {
    color: var(--color-gray-medium);
}

.item-card__meta-author a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.item-card__meta-author a:hover {
    color: var(--accent);
}

.item-card__meta-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light-gray);
    color: #bbb;
    font-size: 0.6rem;
}

.item-card__meta-price {
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
}

/* ---------- QUIZ CTA HERO ---------- */
.quiz-cta-hero {
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, var(--accent) 0%, var(--color-purple) 100%);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.quiz-cta-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.quiz-cta-hero__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
}

@supports (backdrop-filter: blur(10px)) {
    .quiz-cta-hero__icon {
        background: rgba(255, 255, 255, 0.2);
    }
}

.quiz-cta-hero__icon i {
    font-size: 3rem;
    color: white;
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.1) rotate(10deg);
    }
}

.quiz-cta-hero__title {
    position: relative;
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.quiz-cta-hero__text {
    position: relative;
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.quiz-cta-hero__text strong {
    color: white;
    font-weight: 700;
}

.quiz-cta-hero__button {
    position: relative;
    background: white;
    color: var(--accent);
    border: none;
    font-size: 1.2rem;
    padding: 1.25rem 3rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.quiz-cta-hero__button:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.95);
    color: var(--accent);
}

.quiz-cta-hero__button i {
    margin-right: 0.5rem;
}

@media (max-width: 767px) {
    .quiz-cta-hero {
        padding: 3rem 1.5rem;
    }

    .quiz-cta-hero__title {
        font-size: 2rem;
    }

    .quiz-cta-hero__text {
        font-size: 1.1rem;
    }

    .quiz-cta-hero__button {
        font-size: 1.1rem;
        padding: 1rem 2rem;
    }
}

/* .icon-pill structural in critical.css */
.icon-pill {
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    outline: none;
}

.icon-pill i {
    font-size: 0.9rem;
    color: var(--pill-color, var(--txt));
}

.icon-pill:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.icon-pill.is-active {
    background: var(--pill-color, var(--txt));
    color: var(--white);
    border-color: var(--pill-color, var(--txt));
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.icon-pill.is-active i {
    color: var(--white);
}

.item-card.is-filtered-out {
    opacity: 0;
    transform: scale(0.9);
}

/* ---------- SHOP FAMILY FILTER (sidebar) ---------- */
/* Layout skeleton (.shop-layout / .shop-sidebar sticky / .shop-catalog /
   .shop-sidebar__pills direction) lives in critical.css. */
.shop-sidebar {
    background: var(--bg);
    padding: 1.25rem;
    border-radius: var(--radius-lg);
}

.shop-filters__label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--txt);
}

.shop-filters__label i {
    color: var(--accent);
    margin-right: 0.3rem;
}

.shop-sidebar__pills .icon-pill {
    font-size: 0.92rem;
    padding: 0.55rem 0.9rem;
    border-width: 1.5px;
}

.shop-pill__main {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.shop-pill__count {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--txt);
    background: var(--bg);
    border-radius: var(--radius-pill);
    padding: 0.08rem 0.45rem;
    min-width: 1.5rem;
    text-align: center;
}

.icon-pill.is-active .shop-pill__count {
    background: rgba(255, 255, 255, 0.28);
    color: var(--white);
}

.shop-filters__active-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 0.6rem 1rem;
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--bg-dark);
}

.shop-filters__results {
    font-size: 0.9rem;
    color: var(--txt);
    font-weight: 500;
}

.shop-filters__clear {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: background 0.2s ease;
}

.shop-filters__clear:hover {
    background: var(--bg);
}

/* Shop Empty State */
.shop-empty-state {
    text-align: center;
    padding: 4rem 2rem;
}

.shop-empty-state i {
    font-size: 4rem;
    color: var(--bg-dark);
    margin-bottom: 1rem;
    display: block;
}

.shop-empty-state p {
    font-size: 1.15rem;
    color: var(--txt);
    margin-bottom: 1.5rem;
}

/* Tablet & mobile: the sidebar becomes a clean sticky bar pinned just under
   the header — a horizontal scroll of slim, icon-forward family chips. White
   bg matches section--white so cards scroll seamlessly beneath it. */
@media (max-width: 1023px) {
    .shop-sidebar {
        margin: 0 0 0.9rem;
        padding: 0.7rem 0;
        background: var(--white);
        border-bottom: 1px solid var(--bg-dark);
        box-shadow: 0 6px 12px -10px var(--shadow);
    }

    .shop-filters__label {
        display: none;
    }

    .shop-sidebar__pills {
        padding: 0 0.6rem;
        scrollbar-width: none;
    }

    .shop-sidebar__pills::-webkit-scrollbar {
        display: none;
    }

    .shop-sidebar__pills .icon-pill {
        font-size: 0.85rem;
        padding: 0.45rem 0.85rem;
    }

    .shop-pill__count {
        display: none;
    }
}

/* Very small screens: chips collapse to centered icon-only circles so the
   whole family row stays on one line */
@media (max-width: 559px) {
    .shop-pill__label {
        display: none;
    }

    .shop-sidebar__pills .icon-pill {
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        border-radius: 50%;
    }

    .shop-sidebar__pills .icon-pill i {
        font-size: 1.05rem;
    }

    .shop-pill__main {
        gap: 0;
    }
}

/* ---------- TRUST BADGES ---------- */
/* Structure (.trust-badges base + responsive) is in critical.css */

.trust-badges--compact {
    gap: 1.5rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.trust-badge {
    padding: 1rem;
}

.trust-badge--compact {
    padding: 0.75rem;
}

.trust-badge__icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.trust-badge__icon--compact {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.trust-badge__icon--orange {
    color: var(--accent);
}

.trust-badge__icon--green {
    color: var(--color-green);
}

.trust-badge__icon--pink {
    color: var(--color-pink);
}

.trust-badge__icon--blue {
    color: var(--color-blue);
}

.trust-badge__title {
    margin: 0.5rem 0;
    color: var(--txt);
    font-size: 1rem;
    font-weight: bold;
}

.trust-badge__title--compact {
    font-size: 0.9rem;
}

.trust-badge__text {
    color: var(--color-gray);
    font-size: 0.9rem;
    margin: 0;
}

.trust-badge__text--compact {
    font-size: 0.8rem;
}

/* ---------- INFO BOXES ---------- */
/* Structure (.info-box base) is in critical.css */

.content-two-col .info-box,

.info-box--orange {
    background: var(--bg-light-orange);
    border-left: 4px solid var(--accent);
}

.info-box--blue {
    background: var(--bg-light-blue);
    border-left: 4px solid var(--color-blue);
}

.info-box--gray {
    background: var(--bg-light-gray);
}

.info-box--light-green {
    background: var(--bg-light-green);
}

.info-box--light-pink {
    background: var(--bg-light-pink);
}

.info-box--light-orange {
    background: var(--bg-light-orange);
}

.info-box--light-blue {
    background: var(--bg-light-blue);
}

.info-box h3 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.info-box--orange h3 {
    color: var(--accent);
}

.info-box--blue h3 {
    color: var(--color-blue);
}

.info-box p {
    margin: 0 0 1rem 0;
    line-height: 1.8;
}

.info-box p:last-child {
    margin-bottom: 0;
}

.info-box ul {
    max-width: none;
    margin: 0 0 1rem 0;
    padding-left: 1.5rem;
    line-height: 1.8;
}

.info-box ul:last-child {
    margin-bottom: 0;
}

.info-box a {
    color: var(--accent);
}

.info-box .button {
    background: var(--txt);
    color: var(--white);
    border-color: var(--txt);
    padding: 0.7rem 1.5rem;
    font-size: 0.95rem;
}

.info-box .button:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.info-box--light-green .button {
    background: var(--color-green);
    border-color: var(--color-green);
}

.info-box--light-green .button:hover {
    background: var(--txt);
    border-color: var(--txt);
}

.info-box--light-pink .button {
    background: var(--color-pink);
    border-color: var(--color-pink);
}

.info-box--light-pink .button:hover {
    background: var(--txt);
    border-color: var(--txt);
}

/* ---------- REUSABLE CONTENT COMPONENTS ---------- */
.quote-box {
    background: var(--bg-light-orange);
    padding: 1.5rem;
    border-radius: var(--radius-sm);
    font-style: italic;
    border-left: 4px solid var(--accent);
    margin: 2rem 0;
}

.checklist-box {
    background: var(--bg-light-gray);
    padding: 2rem;
    border-radius: var(--radius-sm);
    margin: 2rem 0;
}

.checklist-box h3 {
    margin-top: 0;
}

/* .captioned-image divs are converted to figure.image by processContentImages() at render time.
   Structural skeleton for figure.image is in critical.css, visual polish above in "Images within content". */

/* ---------- PRODUCT SHOWCASE (CONTENT PAGES) ---------- */
.product-showcase {
    margin: 4rem 0;
    padding: 3rem;
    background: linear-gradient(135deg, var(--bg-light-orange) 0%, var(--bg-light-pink) 100%);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px var(--shadow);
}

.product-showcase__title {
    text-align: center;
    margin-bottom: 2rem;
    font-size: clamp(1.8rem, 4vw, 2.2rem);
    color: var(--txt);
}

.product-showcase__title i {
    color: var(--accent);
    margin-right: 0.5rem;
}

.product-showcase__card {
    background: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 0 auto;
}

.product-showcase__content {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.product-showcase__name {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 1rem;
    color: var(--txt);
    font-family: var(--font-title);
}

.product-showcase__description {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    color: var(--color-gray);
    flex-grow: 1;
}

.product-showcase__price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 1.5rem;
    font-family: var(--font-title);
}

.product-showcase__add-to-cart {
    width: 100%;
    margin-bottom: 1rem;
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
    font-size: 1.1rem;
    padding: 1rem;
}

.product-showcase__add-to-cart:hover {
    background: var(--txt);
    border-color: var(--txt);
    transform: scale(1.02);
}

.product-showcase__add-to-cart[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--color-border);
    border-color: var(--color-border);
    transform: none;
}

.product-showcase__link {
    display: inline-block;
    text-align: center;
    color: var(--txt);
    text-decoration: none;
    font-weight: 600;
    padding: 0.5rem;
    transition: color 0.3s ease;
}

.product-showcase__link:hover {
    color: var(--accent);
}

.product-showcase__link i {
    margin-left: 0.25rem;
}

/* Mobile layout for product showcase */
@media (max-width: 767px) {
    .product-showcase {
        padding: 2rem 1.5rem;
        margin: 3rem 0;
    }

    .product-showcase__content {
        padding: 2rem 1.5rem;
    }

    .product-showcase__name {
        font-size: 1.5rem;
    }

    .product-showcase__price {
        font-size: 1.8rem;
    }
}

/* ---------- RELATED CONTENT SECTIONS ---------- */
.related-section {
    margin-top: 1rem;
    padding-top: 0;
}

.related-section__title {
    text-align: center;
    margin-bottom: 2rem;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.related-grid--stories {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.related-card {
    text-decoration: none;
    color: inherit;
    display: block;
}

.related-card__content {
    text-align: center;
}

.related-card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

.related-card__title {
    margin: 0.5rem 0;
    color: var(--accent);
}

.related-card__description {
    font-size: 0.9rem;
    color: var(--color-gray);
    margin: 0;
}

/* ---------- ICON CARD (unified for values, personalities, etc.) ---------- */
.icon-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

@media (min-width: 992px) {
    .icon-card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.icon-card {
    background: var(--white);
    padding: 1.5rem;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px var(--shadow);
    text-align: center;
    text-decoration: none;
    color: var(--txt);
    transition: box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
    display: block;
}

.icon-card:hover {
    box-shadow: 0 4px 16px var(--shadow-hover);
}

.icon-card__icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
    transition: color 0.3s ease;
}

.icon-card h3,
.icon-card h4 {
    margin: 0.5rem 0;
    transition: color 0.3s ease;
}

.icon-card p {
    font-size: 0.9rem;
    color: var(--color-gray);
    margin: 0;
    transition: color 0.3s ease;
}

/* Icon card hover effects with CSS custom property (for dynamic chispa colors) */
.icon-card[style*="--chispa-color"] .icon-card__icon {
    color: var(--chispa-color);
}

.icon-card[style*="--chispa-color"]:hover {
    background: var(--chispa-color);
    color: var(--white);
}

.icon-card[style*="--chispa-color"]:hover .icon-card__icon,
.icon-card[style*="--chispa-color"]:hover h3,
.icon-card[style*="--chispa-color"]:hover h4,
.icon-card[style*="--chispa-color"]:hover p {
    color: var(--white);
}

/* Icon card hover effects with colored backgrounds (static modifiers) */
.icon-card--green {
    --icon-card-hover-bg: var(--color-green);
}

.icon-card--pink {
    --icon-card-hover-bg: var(--color-pink);
}

.icon-card--orange {
    --icon-card-hover-bg: var(--accent);
}

/* Hover effects using custom property */
.icon-card[class*="--"]:hover {
    background: var(--icon-card-hover-bg);
    color: var(--white);
}

/* White text on all children when any modifier is hovered */
.icon-card[class*="--"]:hover :is(.icon-card__icon, h3, h4, p) {
    color: var(--white);
}

/* ---------- CONTENT LAYOUT ---------- */
.content-two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 768px) {
    .content-two-col {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

.content-two-col img {
    width: 100%;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px var(--shadow);
}

/* ---------- FAQ accordion polish ---------- */
/* Structure (.faq-accordion + .faq-accordion__* children) lives in critical.css.
   Polish only here: transitions, hover, themed backgrounds per category and the
   answer-link styling. The same component drives /faq (categorised, themed) and
   the homepage mini-FAQ (default white). */
.faq-accordion__item { transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.faq-accordion__item:hover { box-shadow: 0 6px 18px var(--shadow-hover); transform: translateY(-1px); }
.faq-accordion__item[open] { box-shadow: 0 6px 22px var(--shadow-hover); }
.faq-accordion__question { transition: color 0.2s ease; }
.faq-accordion__question:hover { color: var(--accent-dark); }
.faq-accordion__item[open] .faq-accordion__question { color: var(--accent-dark); }
.faq-accordion__question::after { transition: transform 0.25s ease, border-color 0.2s ease; }
.faq-accordion__item:hover .faq-accordion__question::after,
.faq-accordion__item[open] .faq-accordion__question::after { border-color: var(--accent-dark); }
.faq-accordion__answer a { color: var(--accent-dark); text-decoration: underline; }
.faq-accordion__answer a:hover { color: var(--accent); }

/* /faq page: themed backgrounds per category, inherited via sibling selectors
   from the section-heading. Keeps the visual rhythm of the old design while
   running on the new collapsible structure. */
.color-accent ~ .faq-accordion .faq-accordion__item { background: var(--bg-light-orange); border-left: 4px solid var(--accent); }
.section-heading--green ~ .faq-accordion .faq-accordion__item { background: var(--bg-medium-green); border-left: 4px solid var(--color-green); }
.section-heading--pink ~ .faq-accordion .faq-accordion__item { background: var(--bg-light-pink); border-left: 4px solid var(--color-pink); }
.section-heading--blue ~ .faq-accordion .faq-accordion__item { background: #e3f2fd; border-left: 4px solid var(--color-blue); }
.section-heading--pink-light ~ .faq-accordion .faq-accordion__item { background: #ffe0ec; border-left: 4px solid var(--color-pink-light); }
.section-heading--purple ~ .faq-accordion .faq-accordion__item { background: #f3e5f5; border-left: 4px solid var(--color-purple); }

/* ---------- UTILITY CLASSES ---------- */

/* Margin bottom - consistent with --gap-* variables */
.mb-xl { margin-bottom: var(--gap-xl); }
.mb-xxl { margin-bottom: var(--gap-xxl); }

/* Margin top - consistent with --gap-* variables */
.mt-xs { margin-top: var(--gap-xs); }
.mt-sm { margin-top: var(--gap-sm); }
.mt-md { margin-top: var(--gap-md); }
.mt-lg { margin-top: var(--gap-lg); }
.mt-xl { margin-top: var(--gap-xl); }
.mt-xxl { margin-top: var(--gap-xxl); }

.align-items-center { align-items: center; }

/* Icon color utilities */
.icon-color-green { color: var(--color-green); }
.icon-color-pink { color: var(--color-pink); }

/* ---------- QUIZ STYLES ---------- */
.quiz-box {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

#submit-quiz {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.quiz-question {
    animation: fadeInUp 0.5s ease;
}

/* Multiple Choice & Single Choice Styles */
.quiz-options {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quiz-options li {
    position: relative;
    background: var(--bg-light-gray);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.5rem 1rem 3.5rem;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    font-size: 1rem;
    line-height: 1.5;
    display: flex;
    align-items: center;
}

.quiz-options li:hover {
    background: var(--bg-light-gray);
    border-color: var(--accent);
}

.quiz-options li.selected {
    background: var(--color-green-dark);
    border-color: var(--color-green-dark);
    color: var(--white);
    font-weight: 600;
}

/* Custom Checkbox for Multiple Choice */
.quiz-options[data-max-selections] li::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-gray-medium);
    border-radius: 6px;
    background: var(--white);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.quiz-options[data-max-selections] li.selected::before {
    background: var(--color-green-dark);
    border-color: var(--color-green-dark);
}

.quiz-options[data-max-selections] li.selected::after {
    content: '✓';
    position: absolute;
    left: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--white);
    font-size: 1.2rem;
    font-weight: bold;
}

/* Radio Button for Single Choice */
.quiz-options:not([data-max-selections]) li::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-gray-medium);
    border-radius: 50%;
    background: var(--white);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.quiz-options:not([data-max-selections]) li.selected::before {
    border-color: var(--color-green-dark);
}

.quiz-options:not([data-max-selections]) li.selected::after {
    content: '';
    position: absolute;
    left: 1.35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-green-dark);
}

/* Icon Choice Styles */
.quiz-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.quiz-icon-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: var(--bg-light-gray);
    border: 3px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.quiz-icon-option:hover {
    background: var(--bg-light-gray);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.quiz-icon-option.selected {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(255, 138, 61, 0.4);
}

.quiz-icon-option i {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.quiz-icon-option span {
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}

/* Word Association Styles */
.quiz-word-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    padding: 1rem;
}

.quiz-word-option {
    padding: 0.75rem 1.5rem;
    background: var(--bg-light-gray);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-weight: 500;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.quiz-word-option:hover {
    background: var(--bg-light-gray);
    border-color: var(--accent);
}

.quiz-word-option.selected {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 138, 61, 0.3);
}

/* Priority Rank Styles */
.quiz-sortable-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.quiz-sortable-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem 1rem 2.5rem;
    background: var(--bg-light-gray);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: move;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    position: relative;
}

.quiz-sortable-list li:hover {
    background: var(--bg-light-gray);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.quiz-sortable-list li.dragging {
    opacity: 0.5;
    transform: scale(1.02);
}

/* Flash animation when reordered via buttons */
@keyframes quizFlashGreen {
    0% { background: var(--bg-light-gray); color: inherit; }
    50% { background: var(--color-green-dark); color: white; }
    100% { background: var(--bg-light-gray); color: inherit; }
}

.quiz-sortable-list li.quiz-flash {
    animation: quizFlashGreen 0.6s ease;
}

/* Drag handle */
.quiz-sortable-list li::before {
    content: '☰';
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-medium);
    font-size: 1rem;
}

/* Priority number badge - top left corner */
.quiz-sortable-list li::after {
    content: attr(data-position);
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.1);
    color: var(--color-gray);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Up/Down arrows for accessibility */
.quiz-priority-btn {
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.quiz-priority-btn:hover:not(:disabled) {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
}

.quiz-priority-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Slider Styles */
.slider-label-left,
.slider-label-right {
    display: block;
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-gray);
    margin-bottom: 1rem;
}

.slider-label-right {
    margin-top: 1rem;
    margin-bottom: 0;
}

.quiz-slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #e9ecef 0%, var(--accent) 100%);
    outline: none;
    -webkit-appearance: none;
}

.quiz-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.quiz-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(255, 138, 61, 0.4);
}

.quiz-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    border: none;
}

.slider-value {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent);
    margin-top: 1rem;
}

/* Text Input Styles */
.quiz-text-input {
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--bg-light-gray);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    font-family: var(--font-body);
}

.quiz-text-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(255, 138, 61, 0.1);
}

/* Quiz Custom Input Container */
.quiz-custom-input-container {
    max-width: 400px;
    margin: 2rem auto;
}

/* Quiz Icon Grid Modifiers */
.quiz-icon-grid--narrow {
    max-width: 500px;
    margin: 2rem auto;
}

.quiz-icon-grid--medium {
    max-width: 600px;
    margin: 2rem auto;
}

/* Quiz Submit Centered */
.quiz-submit-centered {
    margin-left: auto;
    margin-right: auto;
}

/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Responsiveness */
@media (max-width: 767px) {

    .quiz-nav-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
        min-width: 80px;
    }

    .quiz-progress {
        width: 100%;
        order: 3;
    }

    .quiz-content {
        padding: 1.5rem 1rem;
    }

    .quiz-question-text {
        font-size: 1.1rem;
    }

    .quiz-icon-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    .quiz-icon-option {
        padding: 1rem 0.5rem;
    }

    .quiz-icon-option i {
        font-size: 2rem;
    }

    .quiz-sortable-list li::after {
        left: auto;
        right: -1rem;
    }
}

/* ---------- CONTENT LAYOUTS ---------- */

@media (max-width: 767px) {
}

/* FAQ Section Colors */
.section-heading--green {
    color: var(--color-green);
}

.section-heading--pink {
    color: var(--color-pink);
}

.section-heading--blue {
    color: var(--color-blue);
}

.section-heading--pink-light {
    color: var(--color-pink-light);
}

.section-heading--purple {
    color: var(--color-purple);
}

.color-green {
    color: var(--color-green);
}

.color-pink {
    color: var(--color-pink);
}

.color-blue {
    color: var(--color-blue);
}

.color-pink-light {
    color: var(--color-pink-light);
}

.color-purple {
    color: var(--color-purple);
}

/* Admin content preview (for product linking) */

/* ---------- QUIZ MODAL STYLES ---------- */
/* Quiz Modal Styles */
.quiz-fullscreen-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    overflow-y: auto;
    will-change: opacity, transform;
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
    .quiz-fullscreen-modal {
        background: rgba(0, 0, 0, 0.75);
    }
}

.quiz-fullscreen-modal .desktop-only {
    display: block;
}

.quiz-fullscreen-modal .mobile-only {
    display: none;
}

.quiz-close-btn {
    position: fixed;
    top: 2rem;
    right: 2rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: white;
    border: none;
    color: var(--accent);
    font-size: 1.8rem;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.quiz-close-btn:hover {
    background: var(--accent);
    color: white;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.quiz-top-bar {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--accent);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1500;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.quiz-top-title {
    color: white;
    font-size: 1.2rem;
    margin: 0;
    font-weight: 600;
}

.quiz-close-btn-mobile {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-close-btn-mobile:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.quiz-fullscreen-container {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.quiz-wrapper-content {
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 12px;
}

@media (max-width: 1180px) {
    .quiz-fullscreen-modal .desktop-only {
        display: none !important;
    }

    .quiz-fullscreen-modal .mobile-only {
        display: flex !important;
    }

    .quiz-fullscreen-modal {
        background: var(--bg);
    }

    .quiz-fullscreen-container {
        padding: 0;
        min-height: calc(100vh - 60px);
        display: block;
        align-items: stretch;
    }

    .quiz-wrapper-content {
        max-height: none;
        height: calc(100vh - 60px);
        border-radius: 0;
        overflow-y: auto;
    }
}

.quiz-screen {
    display: none;
    animation: quizFadeIn 0.5s ease;
    min-height: 400px;
    padding: 2rem 1rem;
}

.quiz-screen.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes quizFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Welcome Screen */
.quiz-welcome-content {
    text-align: center;
    background: white;
    padding: 2.5rem 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.quiz-welcome-icon {
    font-size: 4rem;
    color: var(--accent);
    margin-bottom: 1.5rem;
}

.quiz-welcome-content h2 {
    color: var(--txt);
    margin-bottom: 1rem;
}

.quiz-welcome-content p {
    color: var(--txt);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.quiz-info {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
}

.quiz-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.quiz-info-item i {
    font-size: 1.5rem;
    color: var(--accent);
}

.quiz-info-item span {
    color: var(--txt);
    font-size: 0.9rem;
}

/* Quiz Navigation Bar */
.quiz-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: white;
    margin-bottom: 0;
    position: relative;
}

.quiz-question-counter {
    text-align: center;
    color: #aaa;
    font-size: 0.8rem;
    font-weight: 400;
    margin: 0.5rem 0 0;
    max-width: none;
}

.quiz-question-text {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    font-weight: 600;
    text-align: left;
}

.quiz-nav-btn {
    width: 70px;
    height: 70px;
    min-width: 70px;
    min-height: 70px;
    border-radius: 50%;
    border: none;
    background: var(--color-blue);
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(33, 150, 243, 0.4);
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1100;
}

.quiz-nav-btn.prev-btn {
    left: calc(50% - 550px);
}

.quiz-nav-btn.next-btn {
    right: calc(50% - 550px);
}

.quiz-nav-btn:hover:not(:disabled) {
    background: #1976D2;
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 6px 24px rgba(33, 150, 243, 0.6);
}

.quiz-nav-btn:active:not(:disabled) {
    transform: translateY(-50%) scale(1.05);
}

.quiz-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: var(--color-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.quiz-progress-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.quiz-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--color-pink));
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: var(--radius-sm);
}

@media (max-width: 767px) {
    .quiz-nav-bar {
        padding: 1.5rem;
        gap: 1rem;
        position: relative;
        border-radius: 0;
        margin-bottom: 0;
    }

    .quiz-nav-btn {
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
        font-size: 1.3rem;
        position: static;
        transform: none;
    }

    .quiz-nav-btn:hover:not(:disabled) {
        transform: scale(1.1);
    }

    .quiz-nav-btn:active:not(:disabled) {
        transform: scale(0.95);
    }

    .quiz-progress-bar {
        height: 10px;
    }

    .quiz-progress-container {
        flex: 1;
    }

    .quiz-info {
        flex-direction: column;
        gap: 1rem;
    }

}

/* Quiz Box */
.quiz-box {
    transition: height 0.3s ease-out;
}

/* Quiz Content Container */
.quiz-content {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-height: 300px;
}

/* Questions */
.quiz-question-container {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

#question-container > .question {
    animation: quizSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes quizSlideIn {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

#question-container.slide-prev > .question {
    animation: quizSlideInPrev 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes quizSlideInPrev {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Loading Screen */
.quiz-loading-content {
    text-align: center;
    background: white;
    padding: 3rem 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
}

.quiz-loading-content h2 {
    color: var(--txt);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.quiz-loading-content p {
    color: var(--txt);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.quiz-magic-loader {
    font-size: 3rem;
    color: var(--accent);
    animation: quizPulse 2s infinite;
    margin-bottom: 1.5rem;
}

@keyframes quizPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.quiz-loading-bar {
    max-width: 300px;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    margin: 2rem auto;
    overflow: hidden;
}

.quiz-loading-fill {
    height: 100%;
    background: var(--accent);
    animation: quizLoading 3s ease-in-out infinite;
}

@keyframes quizLoading {
    0% { width: 0; }
    50% { width: 70%; }
    100% { width: 100%; }
}

/* Email Form */

.quiz-fullscreen-modal .form-group {
    display: flex;
    flex-direction: column;
}

.quiz-fullscreen-modal .form-group label {
    color: var(--txt);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.quiz-fullscreen-modal .form-group input[type="text"],
.quiz-fullscreen-modal .form-group input[type="email"] {
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.quiz-fullscreen-modal .form-group input:focus {
    outline: none;
    border-color: var(--accent);
}

.quiz-name-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}

.quiz-name-input {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 1.1rem;
    text-align: center;
    transition: border-color 0.3s ease;
}

.quiz-name-input:focus {
    outline: none;
    border-color: var(--accent);
}

.quiz-checkbox-group label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.quiz-checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Results */

.quiz-round-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    max-width: 400px;
    margin: 1.5rem auto 0;
}

.quiz-round-actions .button {
    width: 100%;
}

/* Slider Questions */
.quiz-slider-container {
    margin: 2rem 0;
}

.quiz-slider {
    width: 100%;
    margin: 2rem 0;
}

.quiz-slider-value {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent);
}

/* ---------- CHAPTER NUMBER BADGE ---------- */
.chapter-number {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--accent);
    color: white;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 700;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---------- CHAPTER SUBTITLE IN HEADER ---------- */
.chapter-subtitle {
    font-family: var(--font-title);
    font-size: 1.2rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    text-align: center;
}

/* ---------- CHAPTER NAVIGATION (PREV/NEXT) ---------- */
.chapter-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1rem;
    padding-top: 0;
}

@media (max-width: 767px) {
    .chapter-navigation {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.chapter-nav-button {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: var(--bg-light-blue);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px var(--shadow);
    text-decoration: none;
    color: var(--txt);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    border: 2px solid transparent;
}

.chapter-nav-button:hover {
    box-shadow: 0 8px 20px var(--shadow-hover);
    border-color: var(--accent);
}

.chapter-nav-button--prev {
    text-align: left;
}

.chapter-nav-button--next {
    text-align: right;
}

.chapter-nav-button__label {
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.chapter-nav-button__title {
    font-family: var(--font-title);
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--txt);
}

.chapter-nav-number {
    display: inline-block;
    font-size: 0.9rem;
    color: var(--accent);
    margin-right: 0.3rem;
}

/* ============================================
   SCROLLYTELLING
   ============================================ */

/* Scrollytelling structural in critical.css */
.scrollytelling-image {
    transition: opacity 1.5s ease-in-out;
    will-change: opacity;
}

.scrollytelling-content .single-content__body p::first-letter {
    font-size: 1.8em;
    font-weight: 600;
    line-height: 0;
    vertical-align: baseline;
}

/* Fixed bottom audio player for cuentos/taramundi */
.audio-player-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45px;
    background-color: var(--txt);
    transform: translate3d(0, 0, 0);
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 99;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.audio-player-fixed__button {
    width: 45px;
    height: 45px;
    min-width: 45px;
    border: none;
    background: var(--accent);
    color: white;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: background 0.3s ease;
    flex-shrink: 0;
}

.audio-player-fixed__button:hover {
    background: var(--accent-dark);
}

.audio-player-fixed__button:active {
    background: var(--accent);
    opacity: 0.9;
}

.audio-player-fixed__info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
}

.audio-player-fixed__track {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
}

.audio-player-fixed__track-fill {
    height: 100%;
    width: 0%;
    background: var(--accent);
    transition: width 0.1s ease;
    border-radius: 2px;
}

.audio-player-fixed__time {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    min-width: 42px;
    text-align: right;
    font-weight: 500;
}

/* Scrollytelling responsive overrides in critical.css */

@media (max-width: 767px) {
    /* .scrollytelling-content responsive in critical.css */

    .audio-player-fixed {
        height: 42px;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        gap: 0;
    }

    .audio-player-fixed__button {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 0.85rem;
    }

    .audio-player-fixed__info {
        padding: 0 0.75rem;
        gap: 0.5rem;
    }

    .audio-player-fixed__time {
        font-size: 0.7rem;
        min-width: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scrollytelling-image {
        transition: opacity 0.3s ease;
    }
}

/* ========================================
   MAGIKITOS SHARE MODAL
   Global share modal component
   ======================================== */

.magikitos-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.magikitos-modal.is-active {
    opacity: 1;
    visibility: visible;
}

.magikitos-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.magikitos-modal__content {
    position: relative;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 90%;
    padding: 2rem;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
}

.magikitos-modal.is-active .magikitos-modal__content {
    transform: scale(1) translateY(0);
}

.magikitos-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--txt);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    padding: 0;
}

.magikitos-modal__close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--accent);
}

.magikitos-modal__title {
    font-family: var(--font-title);
    font-size: 1.75rem;
    color: var(--txt);
    margin-bottom: 1.5rem;
    text-align: center;
}

.magikitos-modal__buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.magikitos-share-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    background: var(--bg);
    color: var(--txt);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.magikitos-share-btn i {
    font-size: 1.75rem;
    transition: transform 0.3s ease;
}

.magikitos-share-btn:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.magikitos-share-btn:hover i {
    transform: scale(1.1);
}

/* WhatsApp button */
.magikitos-share-btn--whatsapp {
    background: #E8F5E9;
    color: var(--color-green-bright);
    border-color: var(--color-green-bright);
}

.magikitos-share-btn--whatsapp:hover {
    background: var(--color-green-bright);
    color: white;
}

/* Telegram button */
.magikitos-share-btn--telegram {
    background: #E3F2FD;
    color: #0088CC;
    border-color: #0088CC;
}

.magikitos-share-btn--telegram:hover {
    background: #0088CC;
    color: white;
}

/* Email button */
.magikitos-share-btn--email {
    background: #FFF3E0;
    color: #FF9800;
    border-color: #FF9800;
}

.magikitos-share-btn--email:hover {
    background: #FF9800;
    color: white;
}

/* Copy link button */
.magikitos-share-btn--copy {
    background: #F3E5F5;
    color: var(--second-accent);
    border-color: var(--second-accent);
}

.magikitos-share-btn--copy:hover {
    background: var(--second-accent);
    color: white;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .magikitos-modal__content {
        padding: 1.5rem;
    }

    .magikitos-modal__title {
        font-size: 1.5rem;
        margin-bottom: 1.25rem;
    }

    .magikitos-modal__buttons {
        gap: 0.75rem;
    }

    .magikitos-share-btn {
        padding: 1rem 0.75rem;
        font-size: 0.85rem;
    }

    .magikitos-share-btn i {
        font-size: 1.5rem;
    }
}

/* ========================================
   CONTENT LIST (Magikito Content Display)
   ======================================== */

.content-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    margin-bottom: var(--gap-xl);
}

@media (max-width: 767px) {
    #modal-add-to-cart-button {
        width: 100%;
        justify-content: center;
    }
}

/* ─── Audio Collections (chistes + cuentos) ───────────────────────────
 * Structural skeleton lives in critical.css (.audio-collections-grid,
 * .audio-collection-card and children, .audio-collection-badge*).
 * Below: visual enhancements only — borders, transitions, hover states.
 */

.audio-collection-card {
    border: 2px solid rgba(70, 62, 55, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.audio-collection-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: var(--accent);
}

.audio-collection-card__icon {
    background: var(--bg-light-pink);
    color: var(--accent);
}

.audio-collection-card__title {
    color: var(--txt);
}

.audio-collection-card__description {
    color: var(--color-gray-dark);
}

.audio-collection-card__meta {
    color: var(--accent-dark);
}

.audio-collection-card__meta i {
    color: var(--accent);
}

.audio-collection-badges-block {
    padding: var(--gap-lg) 0;
}

.audio-collection-badges-block__title {
    color: var(--txt);
}

.audio-collection-badge {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.audio-collection-badge:hover {
    transform: translateY(-2px);
    background: var(--accent);
    color: var(--white);
    box-shadow: var(--shadow);
}

@media (prefers-reduced-motion: reduce) {
    .audio-collection-card,
    .audio-collection-badge { transition: none; }
    .audio-collection-card:hover,
    .audio-collection-badge:hover { transform: none; }
}

/* ---------- COLOREAR (structural skeleton in critical.css) ---------- */
/* .colorear-grid / .colorear-sheet / .colorear-sheet__img / .colorear-card__placeholder
   structural rules (grid, aspect-ratio, padding, background) live in critical.css. */
.colorear-sheet { box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.colorear-sheet:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.colorear-sheet__frame { cursor: pointer; }
.colorear-sheet__img { transition: opacity 0.2s ease; }
.colorear-sheet__frame:hover .colorear-sheet__img { opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
    .colorear-sheet { transition: none; }
    .colorear-sheet:hover { transform: none; }
    .colorear-sheet__img { transition: none; }
}

/* ===== DISCOVERY (rollo magikito): POLISH. Skeleton en critical.css ===== */
.discovery { animation: discoveryFadeIn 0.4s ease both; }
.discovery__avatar { box-shadow: 0 4px 12px var(--shadow); border: 3px solid var(--white); transition: transform 0.3s ease; }
.discovery__turn--consumed { animation: discoveryTurnOut 0.24s ease both; pointer-events: none; }
@keyframes discoveryTurnOut {
    from { opacity: 1; transform: translateY(0) scale(1); max-height: 800px; }
    to   { opacity: 0; transform: translateY(-8px) scale(0.96); max-height: 0; margin: 0; padding: 0; }
}
.discovery__turn:hover .discovery__avatar { transform: scale(1.04); }
.discovery__bubble {
    box-shadow: 0 2px 8px var(--shadow);
    animation: discoveryBubbleIn 0.35s cubic-bezier(.22,.61,.36,1) both;
}
.discovery__bubble::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 16px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 12px 8px 0;
    border-color: transparent var(--white) transparent transparent;
}
.discovery__btn {
    box-shadow: 0 2px 6px var(--shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
    will-change: transform;
}
.discovery__btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--shadow-hover); }
.discovery__btn:active { transform: translateY(0); }
.discovery__btn--primary:hover { background: var(--accent-dark); }
.discovery__btn--reaction-seta:hover   { background: var(--accent); color: var(--white); }
.discovery__btn--reaction-risa:hover   { background: var(--color-green-bright); color: var(--white); }
.discovery__btn--reaction-tomate:hover { background: var(--color-red); color: var(--white); }
.discovery__btn-emoji { display: inline-block; transition: transform 0.15s ease; }
.discovery__btn:hover .discovery__btn-emoji { transform: scale(1.2) rotate(-6deg); }
.discovery__card {
    box-shadow: 0 4px 16px var(--shadow);
    animation: discoveryCardIn 0.45s cubic-bezier(.22,.61,.36,1) both;
}
.discovery__card-link { transition: color 0.2s ease; }
.discovery__card-link:hover { color: var(--accent); text-decoration: underline; }
.discovery__setometro-option {
    transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.discovery__setometro-option:hover { transform: translateY(-3px); border-color: var(--accent); background: var(--bg-light-orange); box-shadow: 0 4px 14px var(--shadow); }
.discovery__setometro-icon { transition: color 0.2s ease; }
.discovery__setometro-option:hover .discovery__setometro-icon { color: var(--accent-dark); }
.discovery__bubble--thinking { display: inline-flex; align-items: center; gap: 4px; }
.discovery__dot { animation: discoveryDot 1.2s ease-in-out infinite; }
.discovery__dot:nth-child(2) { animation-delay: 0.2s; }
.discovery__dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes discoveryDot {
    0%, 60%, 100% { transform: scale(1); opacity: 0.4; }
    30% { transform: scale(1.4); opacity: 1; }
}
@keyframes discoveryFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes discoveryBubbleIn {
    from { opacity: 0; transform: translateY(8px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes discoveryCardIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .discovery, .discovery__bubble, .discovery__card { animation: none; }
    .discovery__btn, .discovery__setometro-option, .discovery__avatar { transition: none; }
    .discovery__btn:hover, .discovery__setometro-option:hover { transform: none; }
}

/* ===== CHECKOUT PAGE — polish (skeleton lives in critical.css) ===== */
.checkout-page__main { box-shadow: 0 2px 12px var(--shadow); }
.checkout-summary { box-shadow: 0 2px 12px var(--shadow); transition: box-shadow 0.2s ease; }
.checkout-summary__toggle { transition: background 0.15s ease; }
.checkout-summary__toggle:hover { background: var(--bg-light-gray); }
.checkout-page__empty .button:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }

/* Mobile: full-bleed cards (radius removed in critical.css) read as flat
   sections, so the floating-card shadow would just clip at the screen edges. */
@media (max-width: 767px) {
    .checkout-page__main,
    .checkout-summary { box-shadow: none; }
}

/* Cart-item polish (structure in critical.css, hover/colour here). */
.checkout-summary .cart-item__name { font-weight: 700; font-size: 0.95rem; line-height: 1.25; }
.checkout-summary .cart-item__price { font-size: 0.9rem; color: var(--color-gray-dark); }
.checkout-summary .cart-item__remove-btn { transition: background 0.15s ease, color 0.15s ease; }
.checkout-summary .cart-item__remove-btn:hover { background: var(--bg-light-pink); color: var(--color-red); }

/* Coupon widget polish (structure in critical.css). */
.coupon-toggle { transition: color 0.15s ease; }
.coupon-toggle:hover { color: var(--accent); text-decoration: underline; }
.coupon-input { transition: border-color 0.15s ease, background 0.15s ease; }
.coupon-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-light-orange);
}
.coupon-apply { transition: background 0.15s ease, transform 0.1s ease; }
.coupon-apply:hover { background: var(--accent-dark); }
.coupon-apply:active { transform: translateY(1px); }
.coupon-apply:disabled { opacity: 0.6; cursor: wait; }
.coupon-remove { transition: color 0.15s ease, transform 0.1s ease; }
.coupon-remove:hover { color: var(--color-red); transform: scale(1.1); }
.coupon-error { animation: coupon-shake 0.3s ease; }
@keyframes coupon-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* Desktop: take the chevron out of the accessibility tree (open is always
   true via [open]) and keep the toggle styled as a static section header. */
@media (min-width: 900px) {
    .checkout-summary__toggle:hover { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .checkout-summary, .checkout-summary__toggle { transition: none; }
    .checkout-page__empty .button:hover { transform: none; }
}