/* ═══════════════════════════════════════════════════════════════════
   ICE-GLOBAL.CSS — iceroom.net
   Single source of truth for design tokens, theming, and base styles.
   Loaded in every page via header.php.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS — Dark Mode (default)
   ───────────────────────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
    /* Backgrounds */
    --bg:               #050505;
    --bg-2:             #0d0d0d;
    --bg-3:             #141414;
    --bg-card:          rgba(255,255,255,0.04);
    --bg-card-hover:    rgba(255,255,255,0.07);

    /* Text */
    --text:             #ffffff;
    --text-2:           rgba(255,255,255,0.58);
    --text-3:           rgba(255,255,255,0.32);
    --text-4:           rgba(255,255,255,0.14);

    /* Borders */
    --border:           rgba(255,255,255,0.08);
    --border-2:         rgba(255,255,255,0.15);
    --border-3:         rgba(255,255,255,0.28);

    /* Glass / Surfaces */
    --glass-bg:         rgba(255,255,255,0.04);
    --glass-bg-hover:   rgba(255,255,255,0.07);
    --glass-border:     rgba(255,255,255,0.10);
    --surface:          rgba(255,255,255,0.04);
    --surface-2:        rgba(255,255,255,0.07);

    /* Nav & Header */
    --nav-color:        rgba(255,255,255,0.50);
    --nav-hover:        #ffffff;
    --header-bg:        rgba(5,5,5,0.88);
    /* Ticker: INVERSE of page bg — light band on dark site */
    --ticker-bg:        rgba(255,255,255,0.10);
    --ticker-text:      rgba(255,255,255,0.55);
    --ticker-bold:      rgba(255,255,255,0.90);
    --toggle-bg:        rgba(255,255,255,0.08);
    --toggle-color:     rgba(255,255,255,0.50);

    /* Buttons */
    --btn-bg:           #ffffff;
    --btn-text:         #000000;
    --btn-ghost-border: rgba(255,255,255,0.25);
    --btn-ghost-text:   rgba(255,255,255,0.75);

    /* Form Inputs */
    --input-bg:         rgba(255,255,255,0.04);
    --input-border:     rgba(255,255,255,0.10);
    --input-text:       #ffffff;
    --input-placeholder: rgba(255,255,255,0.28);

    /* Snow particles */
    --snow-r:           255;
    --snow-g:           255;
    --snow-b:           255;
    --snow-opacity-base: 1;

    /* Typography */
    --ice-font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --ice-font-body:    'DM Sans', system-ui, sans-serif;

    /* Legacy aliases (used in older sections) */
    --ice-bg:           #050505;
    --ice-surface:      rgba(255,255,255,0.04);
    --ice-border:       rgba(255,255,255,0.08);
    --ice-text:         #ffffff;
    --ice-muted:        rgba(255,255,255,0.42);
}

/* ─────────────────────────────────────────────────────────────────
   2. DESIGN TOKENS — Light Mode (warm editorial white)
   ───────────────────────────────────────────────────────────────── */
[data-theme="light"] {
    /* Backgrounds */
    --bg:               #f5f4f1;
    --bg-2:             #eceae6;
    --bg-3:             #e2dfdb;
    --bg-card:          rgba(0,0,0,0.03);
    --bg-card-hover:    rgba(0,0,0,0.055);

    /* Text */
    --text:             #111111;
    --text-2:           rgba(0,0,0,0.56);
    --text-3:           rgba(0,0,0,0.35);
    --text-4:           rgba(0,0,0,0.14);

    /* Borders */
    --border:           rgba(0,0,0,0.09);
    --border-2:         rgba(0,0,0,0.16);
    --border-3:         rgba(0,0,0,0.28);

    /* Glass / Surfaces */
    --glass-bg:         rgba(255,255,255,0.72);
    --glass-bg-hover:   rgba(255,255,255,0.88);
    --glass-border:     rgba(0,0,0,0.10);
    --surface:          rgba(0,0,0,0.03);
    --surface-2:        rgba(0,0,0,0.06);

    /* Nav & Header */
    --nav-color:        rgba(0,0,0,0.50);
    --nav-hover:        #111111;
    --header-bg:        rgba(245,244,241,0.92);
    /* Ticker: INVERSE of page bg — dark band on light site */
    --ticker-bg:        rgba(10,10,10,0.88);
    --ticker-text:      rgba(255,255,255,0.60);
    --ticker-bold:      rgba(255,255,255,0.92);
    --toggle-bg:        rgba(0,0,0,0.07);
    --toggle-color:     rgba(0,0,0,0.50);

    /* Buttons */
    --btn-bg:           #111111;
    --btn-text:         #ffffff;
    --btn-ghost-border: rgba(0,0,0,0.25);
    --btn-ghost-text:   rgba(0,0,0,0.75);

    /* Form Inputs */
    --input-bg:         rgba(0,0,0,0.04);
    --input-border:     rgba(0,0,0,0.12);
    --input-text:       #111111;
    --input-placeholder: rgba(0,0,0,0.30);

    /* Snow particles */
    --snow-r:           40;
    --snow-g:           60;
    --snow-b:           100;
    --snow-opacity-base: 0.5;

    /* Typography */
    --ice-font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --ice-font-body:    'DM Sans', system-ui, sans-serif;

    /* Legacy aliases */
    --ice-bg:           #f5f4f1;
    --ice-surface:      rgba(0,0,0,0.04);
    --ice-border:       rgba(0,0,0,0.09);
    --ice-text:         #111111;
    --ice-muted:        rgba(0,0,0,0.42);
}

/* ─────────────────────────────────────────────────────────────────
   3. BASE RESET & BODY
   The !important rules override any Tailwind class on <body>
   and guarantee the theme applies on EVERY page.
   ───────────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--ice-font-body) !important;
    background:  var(--bg)   !important;
    color:       var(--text) !important;
    transition:
        background-color 0.4s cubic-bezier(.4,0,.2,1),
        color            0.3s cubic-bezier(.4,0,.2,1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────────────────────────────
   4. LIGHT-MODE TAILWIND OVERRIDES
   Flips hardcoded dark Tailwind utility classes when light mode
   is active. !important needed to beat class-selector specificity.
   ───────────────────────────────────────────────────────────────── */

/* Backgrounds */
[data-theme="light"] .bg-black,
[data-theme="light"] .bg-zinc-950,
[data-theme="light"] .bg-zinc-900,
[data-theme="light"] .bg-zinc-800 {
    background-color: var(--bg) !important;
}

[data-theme="light"] .bg-gray-950,
[data-theme="light"] .bg-gray-900 {
    background-color: var(--bg-2) !important;
}

[data-theme="light"] .bg-gray-800 {
    background-color: var(--bg-3) !important;
}

/* Keep intentionally-white sections as parchment in light mode */
[data-theme="light"] .bg-white {
    background-color: var(--bg) !important;
}

/* Text colors */
[data-theme="light"] .text-white {
    color: var(--text) !important;
}

[data-theme="light"] .text-gray-300,
[data-theme="light"] .text-gray-400 {
    color: var(--text-2) !important;
}

[data-theme="light"] .text-gray-500,
[data-theme="light"] .text-gray-600 {
    color: var(--text-3) !important;
}

[data-theme="light"] .text-gray-700 {
    color: var(--text-4) !important;
}

/* Borders */
[data-theme="light"] .border-gray-900,
[data-theme="light"] .border-gray-800 {
    border-color: var(--border) !important;
}

[data-theme="light"] .border-gray-700 {
    border-color: var(--border-2) !important;
}

/* White-on-dark border inversion */
[data-theme="light"] .border-white\/8,
[data-theme="light"] .border-white\/10,
[data-theme="light"] .border-white\/15,
[data-theme="light"] .border-white\/20,
[data-theme="light"] .border-white\/25,
[data-theme="light"] .border-white\/30 {
    border-color: var(--border) !important;
}

/* Glass card backgrounds */
[data-theme="light"] .bg-white\/5,
[data-theme="light"] .bg-white\/4,
[data-theme="light"] .bg-white\/3,
[data-theme="light"] .bg-white\/10 {
    background-color: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
}

/* Zinc backgrounds used for card interiors */
[data-theme="light"] .bg-zinc-950\/90,
[data-theme="light"] .bg-black\/90,
[data-theme="light"] .bg-black\/85,
[data-theme="light"] .bg-black\/70 {
    background-color: rgba(245,244,241,0.92) !important;
}

/* Cart drawer & modals */
[data-theme="light"] aside.fixed,
[data-theme="light"] .fixed.bg-black {
    background-color: var(--bg) !important;
    border-color: var(--border) !important;
}

/* ─────────────────────────────────────────────────────────────────
   5. GLASS CARD COMPONENT
   Universal card for services, products, checkout items.
   ───────────────────────────────────────────────────────────────── */
.ice-card {
    background:    var(--glass-bg);
    border:        1px solid var(--glass-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 16px;
    transition:
        background    0.3s ease,
        border-color  0.3s ease,
        transform     0.3s cubic-bezier(.4,0,.2,1),
        box-shadow    0.3s ease;
}

.ice-card:hover {
    background:    var(--glass-bg-hover);
    border-color:  var(--border-2);
    transform:     translateY(-5px);
    box-shadow:    0 24px 64px rgba(0,0,0,0.18);
}

/* ─────────────────────────────────────────────────────────────────
   6. BUTTONS
   ───────────────────────────────────────────────────────────────── */
.ice-btn {
    background:     var(--btn-bg);
    color:          var(--btn-text);
    font-family:    var(--ice-font-body);
    font-weight:    700;
    font-size:      0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding:        0.875rem 2rem;
    border:         none;
    cursor:         pointer;
    display:        inline-flex;
    align-items:    center;
    gap:            0.5rem;
    transition:     opacity 0.2s ease, transform 0.2s ease;
    text-decoration: none;
}

.ice-btn:hover {
    opacity:   0.85;
    transform: translateY(-1px);
}

.ice-btn-ghost {
    background: transparent;
    border:     1px solid var(--btn-ghost-border);
    color:      var(--btn-ghost-text);
}

.ice-btn-ghost:hover {
    border-color: var(--border-2);
    color:        var(--text);
    background:   var(--surface);
}

/* ─────────────────────────────────────────────────────────────────
   7. FORM INPUTS
   ───────────────────────────────────────────────────────────────── */
.ice-input {
    background:  var(--input-bg);
    border:      1px solid var(--input-border);
    color:       var(--input-text);
    font-family: var(--ice-font-body);
    font-size:   0.875rem;
    padding:     0.75rem 1rem;
    border-radius: 8px;
    width:       100%;
    outline:     none;
    transition:  border-color 0.2s ease, background 0.3s ease;
}

.ice-input::placeholder { color: var(--input-placeholder); }
.ice-input:focus        { border-color: var(--border-2); }

/* Light-mode: fix inline Tailwind input classes */
[data-theme="light"] input[class*="bg-white/5"],
[data-theme="light"] input[class*="bg-zinc-9"],
[data-theme="light"] textarea[class*="bg-white/5"],
[data-theme="light"] textarea[class*="bg-zinc-9"] {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}

/* ─────────────────────────────────────────────────────────────────
   8. TYPOGRAPHY UTILITIES
   ───────────────────────────────────────────────────────────────── */
.font-logo {
    font-family: var(--ice-font-display) !important;
    font-weight: 800 !important;
    color: var(--text);
}

.ice-label {
    font-size:      0.68rem;
    font-weight:    600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          var(--text-3);
}

/* ─────────────────────────────────────────────────────────────────
   9. SECTION CONTAINERS
   ───────────────────────────────────────────────────────────────── */
.ice-section {
    padding:    clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 3rem);
    background: var(--bg);
    transition: background 0.4s ease;
}

.ice-section--alt {
    background: var(--bg-2);
}

.ice-container {
    max-width: 72rem; /* 1152px */
    margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────────
   10. SCROLL REVEAL (global — mirrors footer.php IntersectionObserver)
   ───────────────────────────────────────────────────────────────── */
[data-reveal] {
    opacity:  0;
    transform: translateY(48px);
    transition:
        opacity   0.75s cubic-bezier(.06,.9,.18,1),
        transform 0.75s cubic-bezier(.06,.9,.18,1);
}

[data-reveal].revealed {
    opacity:  1;
    transform: translateY(0);
}

[data-reveal][data-reveal-side="left"]  { transform: translateX(-48px); }
[data-reveal][data-reveal-side="right"] { transform: translateX(48px);  }
[data-reveal][data-reveal-side="left"].revealed,
[data-reveal][data-reveal-side="right"].revealed {
    transform: translateX(0);
}

/* ─────────────────────────────────────────────────────────────────
   11. SNOW CANVAS
   ───────────────────────────────────────────────────────────────── */
#ice-snow-canvas {
    position:       fixed;
    inset:          0;
    width:          100vw;
    height:         100vh;
    pointer-events: none !important;
    z-index:        0 !important;    /* above body bg — visible in hero. pointer-events:none handles clicks */
    opacity:        1;
}

/* ─────────────────────────────────────────────────────────────────
   12. HERO — ICEROOM watermark title
   Premium watermark size — clamp(3rem, 9vw, 11rem).
   Dramatic entry via GSAP in index.php.
   ───────────────────────────────────────────────────────────────── */
.ice-hero-title {
    font-size:      clamp(3rem, 9vw, 11rem) !important;
    font-weight:    800 !important;
    letter-spacing: -0.03em !important;
    color: var(--text) !important;
    transition: color 0.3s ease;
}

/* ─────────────────────────────────────────────────────────────────
   13. GLOBAL TRANSITION — sections that use inline bg colors
   ───────────────────────────────────────────────────────────────── */
section,
footer,
header,
nav,
aside,
main,
.modal,
[class*="fixed"] {
    transition:
        background-color 0.4s cubic-bezier(.4,0,.2,1),
        border-color     0.3s ease,
        color            0.3s ease;
}

/* ─────────────────────────────────────────────────────────────────
   14. x-cloak utility (Alpine.js)
   ───────────────────────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ─────────────────────────────────────────────────────────────────
   15. SECTION ALTERNATING BACKGROUNDS — solid colors, no gradients
   Alternation: hero(bg) → servicios(bg-2) → academia(bg) →
                found-by(bg-2) → tienda(bg) → about(bg-2)
   ───────────────────────────────────────────────────────────────── */
#hero     { background: var(--bg)   !important; }
#servicios{ background: var(--bg-2) !important; }
#academia { background: var(--bg)   !important; }
#faq      { background: var(--bg-2) !important; }
#found-by { background: var(--bg)   !important; }
#tienda   { background: var(--bg-2) !important; }

/* Make sure hero content sits above snow canvas */
#hero > * { position: relative; z-index: 1; }

/* ─────────────────────────────────────────────────────────────────
   16. LIGHT MODE — EXTRA OVERRIDES (inline colors not in Tailwind)
   ───────────────────────────────────────────────────────────────── */

/* Prices: always high-contrast readable */
[data-theme="light"] .price-usd,
[data-theme="light"] [data-price-usd] {
    color: #111111 !important;
}

/* nav-link hover */
[data-theme="light"] .nav-link:hover { color: #111111 !important; }

/* Checkout / Cart form field inputs */
[data-theme="light"] .field-input {
    color:              var(--input-text)  !important;
    border-bottom-color: var(--border-2)  !important;
    background:         var(--input-bg)   !important;
}
[data-theme="light"] .field-input::placeholder { color: var(--input-placeholder) !important; }
[data-theme="light"] .field-input:focus { border-bottom-color: var(--text) !important; }

/* Payment method selected border */
[data-theme="light"] .pay-method.selected { border-color: var(--text) !important; }
[data-theme="light"] .pay-method { border-color: var(--border) !important; }

/* Generic dark-on-light text fixes */
[data-theme="light"] .text-black   { color: var(--text)   !important; }
[data-theme="light"] .text-zinc-900{ color: var(--text)   !important; }
[data-theme="light"] .text-black\/25{ color: rgba(0,0,0,.25) !important; }

/* Glow divs (absolute blue blobs) — hide in light mode, too harsh */
[data-theme="light"] .blur-\[120px\],
[data-theme="light"] .blur-\[100px\],
[data-theme="light"] .blur-\[80px\]  { opacity: 0.15 !important; }

/* ─────────────────────────────────────────────────────────────────
   17. STAGGER REVEAL — Grid/flex children animate in sequence
   Add data-reveal-stagger to a container; children auto-stagger.
   ───────────────────────────────────────────────────────────────── */
[data-reveal-stagger] > * {
    opacity:   0;
    transform: translateY(28px);
    transition:
        opacity   0.55s cubic-bezier(.06,.9,.18,1),
        transform 0.55s cubic-bezier(.06,.9,.18,1);
}
[data-reveal-stagger].revealed > *             { opacity: 1; transform: translateY(0); }
[data-reveal-stagger].revealed > *:nth-child(1){ transition-delay: 0.04s; }
[data-reveal-stagger].revealed > *:nth-child(2){ transition-delay: 0.10s; }
[data-reveal-stagger].revealed > *:nth-child(3){ transition-delay: 0.16s; }
[data-reveal-stagger].revealed > *:nth-child(4){ transition-delay: 0.22s; }
[data-reveal-stagger].revealed > *:nth-child(5){ transition-delay: 0.28s; }
[data-reveal-stagger].revealed > *:nth-child(6){ transition-delay: 0.34s; }

/* ─────────────────────────────────────────────────────────────────
   18. CURSOR DIAMANTE TÓTEM
   Overlay decorativo — el cursor nativo permanece visible.
   pointer-events: none !important garantiza que NUNCA bloquea clics.
   Solo activo en dispositivos con puntero preciso (no touch).
   ───────────────────────────────────────────────────────────────── */

/* cursor: none eliminado intencionalmente — el pointero nativo es visible */

/* Elemento diamante overlay */
#ice-diamond-cursor {
    position:       fixed;
    top:            0;
    left:           0;
    z-index:        999999;           /* sobre todo, incluido modales */
    pointer-events: none !important;  /* CRÍTICO: nunca bloquea clics */
    will-change:    transform;
    transform:      translate(0px, 0px);
    opacity:        0;                /* GSAP anima la opacidad */
    transition:     opacity 0.15s ease;
}

#ice-diamond-cursor svg {
    display: block;
    filter:  drop-shadow(0 0 6px rgba(255, 255, 255, 0.45))
             drop-shadow(0 2px 12px rgba(180, 210, 255, 0.25));
}