/* ═══════════════════════════════════════════════════════════════════
   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);

    /* ── Tubelight Nav indicator ────────────────────────────────── */
    --tubelight-bar:    rgba(255,255,255,0.88);
    --tubelight-glow-a: rgba(255,255,255,0.50);
    --tubelight-glow-b: rgba(200,225,255,0.22);
    --tubelight-glow-c: rgba(180,210,255,0.09);

    /* ── Panel / Dropdown — fully solid, NUNCA translúcidos ────── */
    /* Evita que en dark mode los dropdowns sean legibles sobre      */
    /* fondos oscuros sin depender de backdrop-filter del browser.  */
    --panel-bg:         #0e0e0e;
    --panel-border:     rgba(255,255,255,0.10);
    --panel-text:       #ffffff;
    --panel-muted:      rgba(255,255,255,0.45);
    --panel-hover:      rgba(255,255,255,0.06);
    --panel-shadow:     0 24px 80px rgba(0,0,0,0.60), 0 4px 20px rgba(0,0,0,0.35);
}

/* ─────────────────────────────────────────────────────────────────
   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: tono suave en light mode — no crear banda oscura */
    --ticker-bg:        rgba(0,0,0,0.055);
    --ticker-text:      rgba(0,0,0,0.48);
    --ticker-bold:      rgba(0,0,0,0.70);
    --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);

    /* ── Tubelight Nav indicator — light mode ───────────────────── */
    /* En light mode el tubelight se oculta: la pastilla ya indica   */
    /* el estado activo visualmente, el glow oscuro causaba un bloque */
    /* negro visible sobre el pill header blanco.                    */
    --tubelight-bar:    transparent;
    --tubelight-glow-a: transparent;
    --tubelight-glow-b: transparent;
    --tubelight-glow-c: transparent;

    /* ── Panel / Dropdown — SÓLIDO blanco en light mode ─────────── */
    /* REGLA DE ORO: fondos de panel = cero gradientes, cero rgba    */
    /* translúcidos. Solo colores sólidos para máximo contraste.     */
    --panel-bg:         #ffffff;
    --panel-border:     rgba(0,0,0,0.10);
    --panel-text:       #111111;
    --panel-muted:      rgba(0,0,0,0.50);
    --panel-hover:      rgba(0,0,0,0.04);
    --panel-shadow:     0 16px 60px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.07);
}

/* ─────────────────────────────────────────────────────────────────
   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;
}

/* Smooth theme transition on ALL elements */
*, *::before, *::after {
    transition:
        background-color 0.5s cubic-bezier(.4,0,.2,1),
        border-color     0.5s cubic-bezier(.4,0,.2,1),
        color            0.4s cubic-bezier(.4,0,.2,1);
}
/* Exclude elements where transition would fight with existing animations */
[data-reveal], [data-reveal] *,
.ice-hero-title, .ice-hero-sub, .ice-hero-ctas,
svg, svg *, canvas,
[x-cloak], [x-cloak] * {
    transition-property: opacity, transform, background-color, border-color, color;
}
/* Animations and transforms must NOT inherit the global bg transition */
.found-by-track, .ticker-inner,
.ice-diamond-cursor, #ice-diamond-cursor {
    transition: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--ice-font-body) !important;
    background:  var(--bg)   !important;
    color:       var(--text) !important;
    transition:
        background-color 0.6s cubic-bezier(.4,0,.2,1),
        color            0.5s 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;
}

/* Proteger text-black — body tiene color:var(--text)!important que lo sobreescribe */
.text-black { color: #000000 !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;
}

/* Dropdown panels (bg-black/95) in light mode */
[data-theme="light"] .bg-black\/95 {
    background-color: rgba(245,244,241,0.97) !important;
}
[data-theme="light"] .bg-black\/95 p,
[data-theme="light"] .bg-black\/95 span,
[data-theme="light"] .bg-black\/95 a {
    color: var(--text) !important;
}

/* User dropdown dividers in light mode */
[data-theme="light"] .border-gray-900 {
    border-color: rgba(0,0,0,0.08) !important;
}

/* ── Servicios section dark-mode fix ─────────────────────────────
   .svc-pill has hardcoded #ffffff — override to theme bg in dark   */
[data-theme="dark"] .svc-pill {
    background: var(--bg-3) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .svc-pill:hover {
    background: var(--bg-card-hover) !important;
    border-color: var(--border-2) !important;
}
[data-theme="dark"] .svc-pill h3 {
    color: var(--text) !important;
}
[data-theme="dark"] .svc-pill p {
    color: var(--text-2) !important;
}
[data-theme="dark"] .svc-pill .svc-pill-icon {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .svc-pill .svc-pill-icon i {
    color: rgba(255,255,255,0.55) !important;
}
[data-theme="dark"] .svc-pill .svc-pill-arrow {
    color: var(--text) !important;
}
[data-theme="dark"] .svc-pill:hover .svc-pill-icon {
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.2) !important;
}
/* ── Sección mini-servicios (bg-white) en dark mode — adaptar fondo y textos ──
   El .svc-pill ya adapta, pero el wrapper y los títulos no. Se usan selectores de
   alta especificidad para ganar sobre .text-black { color:#000 !important }          */
[data-theme="dark"] #servicios.bg-white {
    background: var(--bg-2) !important;
}
[data-theme="dark"] #servicios.bg-white h2.text-black,
[data-theme="dark"] #servicios.bg-white h2 {
    color: var(--text) !important;
}
[data-theme="dark"] #servicios.bg-white a.text-black {
    color: var(--text-2) !important;
    border-color: var(--border-2) !important;
}
[data-theme="dark"] #servicios.bg-white p.text-gray-400,
[data-theme="dark"] #servicios.bg-white .text-gray-400 {
    color: var(--text-3) !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); }

/* Dark-mode: ensure textarea text is always visible */
[data-theme="dark"] textarea {
    color: #ffffff !important;
}
[data-theme="dark"] textarea::placeholder {
    color: rgba(255,255,255,0.30) !important;
}

/* 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:        -1 !important;   /* detrás de todo el contenido */
    opacity:        1;
}
/* En light mode el canvas se elimina del árbol de compositing completamente.
   opacity:0 no es suficiente — backdrop-filter lo puede capturar antes de
   que se aplique la opacidad. display:none lo saca del pipeline del todo. */
[data-theme="light"] #ice-snow-canvas {
    display:        none !important;
    pointer-events: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   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. SMOOTH SCROLL + LEGACY CURSOR CLEANUP
   ======================================================================= */
html { scroll-behavior: smooth; }

/* Hide all legacy custom cursor elements */
.ice-orb-dot, .ice-orb-ring,
.ice-diamond-cursor, #ice-diamond-cursor,
#ice-orb-cursor { display: none !important; }

/* =======================================================================
   19. TUBELIGHT NAV — Active page indicator with neon glow from top.
       Inspired by tubelight-navbar (Magic UI / shadcn community).
       CSS-only: @keyframes + pseudo-elements.
   ======================================================================= */

@keyframes tubePulse {
    0%, 100% { opacity: 0.72; }
    50%       { opacity: 1.00; }
}

.ice-nav-link.ice-nav-active {
    color: var(--nav-hover) !important;
}

/* ::before = la barra de neón superior (el "tubo") */
.ice-nav-link.ice-nav-active::before {
    content: '';
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1.5px;
    background: linear-gradient(
        90deg,
        transparent           0%,
        var(--tubelight-bar) 25%,
        var(--tubelight-bar) 75%,
        transparent          100%
    );
    border-radius: 999px;
    box-shadow:
        0 0  6px 1px var(--tubelight-glow-a),
        0 0 18px 4px var(--tubelight-glow-b),
        0 0 40px 8px var(--tubelight-glow-c);
    animation: tubePulse 2.8s ease-in-out infinite;
}

/* ::after = halo difuso debajo del tubo */
.ice-nav-link.ice-nav-active::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 20px;
    background: radial-gradient(
        ellipse at top,
        var(--tubelight-glow-b) 0%,
        transparent 70%
    );
    pointer-events: none;
}

/* Nav link needs relative positioning for pseudo-elements */
.ice-nav-link {
    position: relative;
}

/* ── Light mode: kill tubelight entirely ──────────────────────────────
   transparent colors + animation still create a compositing layer that
   some browsers render as a faint dark artifact on the white pill.
   display:none removes the pseudo-elements from the paint tree completely. */
[data-theme="light"] .ice-nav-link.ice-nav-active::before,
[data-theme="light"] .ice-nav-link.ice-nav-active::after {
    display: none !important;
    animation: none !important;
}

/* =======================================================================
   20. ICE SPARKLES — Alpine.js iceSparkles() component
   ======================================================================= */

.ice-sparkle-wrap {
    position: relative;
    display: inline-block;
    overflow: visible;
}

.ice-sparkle {
    position: absolute;
    left: var(--sp-x, 50%);
    top:  var(--sp-y, 50%);
    width:  var(--sp-size, 14px);
    height: var(--sp-size, 14px);
    color: var(--sp-color, #A5F3FC);
    pointer-events: none;
    /* FIX: añadir animation-delay desde --sp-delay (antes ignorado) */
    animation: ice-sparkle-life var(--sp-dur, 2s) ease-in-out var(--sp-delay, 0s) forwards;
    transform-origin: center;
    z-index: 2;
    translate: -50% -50%;
}

/* FIX: variante micro ahora usa su propio keyframe (antes no se aplicaba) */
.ice-sparkle--micro {
    animation: ice-sparkle-micro var(--sp-dur, 1.6s) ease-in-out var(--sp-delay, 0s) forwards;
}

@keyframes ice-sparkle-life {
    0%   { opacity: 0;    scale: 0.10; rotate:  0deg; }
    20%  { opacity: 1;    scale: 0.65;                }
    55%  { opacity: 0.85; scale: 1.00;                }
    100% { opacity: 0;    scale: 0.30; rotate: 45deg; }
}

@keyframes ice-sparkle-micro {
    0%   { opacity: 0;   scale: 0.05; rotate:  0deg; }
    15%  { opacity: 0.9; scale: 0.50;                }
    50%  { opacity: 0.7; scale: 0.80;                }
    100% { opacity: 0;   scale: 0.20; rotate: 30deg; }
}

/* =======================================================================
   21. DASHBOARD LAYOUT — Sidebar collapsible
   ======================================================================= */

/* Sidebar transition smooth */
.dash-sidebar {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =======================================================================
   22. SHIFTING MEGAMENU — Liquid 2-column dropdown para Servicios
   ======================================================================= */

/* Modifier: shifting variant — wider, 2 columns */
.ice-shifting-menu {
    padding: 0 !important;
    overflow: hidden;
}

/* 2-column layout inside the shifting dropdown */
.shifting-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    min-height: 280px;
}

/* Left column — navigation list */
.shifting-col-nav {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1rem;
    border-right: 1px solid var(--border, rgba(255,255,255,0.07));
}

/* Right column — animated detail panel */
.shifting-col-detail {
    position: relative;
    padding: 1.5rem 1.5rem;
    background: var(--surface, rgba(255,255,255,0.02));
}

/* Footer link container in left col */
.shifting-col-footer {
    margin-top: auto;
    padding-top: 0.75rem;
}

/* Section heading above items */
.shifting-nav-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3, rgba(255,255,255,0.32));
    margin-bottom: 0.5rem;
    padding: 0 0.5rem;
}

/* Individual navigation items */
.shifting-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.shifting-item:hover,
.shifting-item.is-active {
    background: var(--panel-hover, rgba(255,255,255,0.06));
}

/* Icon box inside shifting item */
.shifting-item-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--surface, rgba(255,255,255,0.04));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    transition: background 0.15s, border-color 0.15s;
}
.shifting-item.is-active .shifting-item-icon {
    background: var(--text, #fff);
    border-color: var(--text, #fff);
}
.shifting-item.is-active .shifting-item-icon i {
    color: var(--bg, #000) !important;
}

/* Item typography */
.shifting-item-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--panel-text, #fff);
    margin: 0;
    line-height: 1.25;
}
.shifting-item-sub {
    font-size: 0.67rem;
    color: var(--panel-muted, rgba(255,255,255,0.45));
    margin: 0;
    line-height: 1.3;
}

/* Divider between item groups */
.shifting-nav-divider {
    border: none;
    border-top: 1px solid var(--border, rgba(255,255,255,0.07));
    margin: 0.5rem 0;
}

/* Footer link */
.shifting-footer-link {
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3, rgba(255,255,255,0.35));
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    transition: color 0.15s;
}
.shifting-footer-link:hover { color: var(--text, #fff); }

/* ── Right column: empty state ─── */
.shifting-detail-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    opacity: 1;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.shifting-detail-empty.is-hidden {
    opacity: 0;
}
.shifting-empty-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface, rgba(255,255,255,0.04));
    border: 1px solid var(--border, rgba(255,255,255,0.07));
    color: var(--text-3, rgba(255,255,255,0.28));
    font-size: 1rem;
}
.shifting-empty-text {
    font-size: 0.72rem;
    color: var(--text-3, rgba(255,255,255,0.28));
    letter-spacing: 0.06em;
}

/* ── Right column: detail panels ─── */
.shifting-detail-panel {
    position: absolute;
    inset: 0;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.shifting-detail-panel.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Detail panel content */
.shifting-tag {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-3, rgba(255,255,255,0.35));
    margin-bottom: 0.6rem;
}
.shifting-detail-title {
    font-family: var(--ice-font-display, 'Helvetica Neue', sans-serif);
    font-size: clamp(1.3rem, 2.5vw, 1.65rem);
    font-weight: 800;
    color: var(--panel-text, #fff);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 0.75rem;
}
.shifting-detail-body {
    font-size: 0.75rem;
    color: var(--panel-muted, rgba(255,255,255,0.5));
    line-height: 1.55;
    margin-bottom: 0;
}
.shifting-detail-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--panel-text, #fff);
    text-decoration: none;
    border-bottom: 1px solid var(--border-3, rgba(255,255,255,0.28));
    padding-bottom: 2px;
    transition: border-color 0.2s, color 0.2s;
    width: fit-content;
}
.shifting-detail-cta:hover {
    border-color: var(--text, #fff);
    color: var(--text, #fff);
}

/* =======================================================================
   23. MINI MEGAMENU — Dropdown compacto para Academia y Tienda
   ======================================================================= */

.ice-mini-menu {
    min-width: 260px !important;
    padding: 1rem 1.1rem !important;
}

/* Items dentro del mini-menu */
.mini-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background 0.15s ease;
}
.mini-menu-item:hover {
    background: var(--panel-hover, rgba(255,255,255,0.06));
}

/* Light-mode overrides for megamenus */
[data-theme="light"] .shifting-col-nav {
    border-right-color: var(--border, rgba(0,0,0,0.07));
}
[data-theme="light"] .shifting-col-detail {
    background: var(--surface, rgba(0,0,0,0.02));
}
[data-theme="light"] .shifting-item:hover,
[data-theme="light"] .shifting-item.is-active {
    background: var(--panel-hover, rgba(0,0,0,0.04));
}
[data-theme="light"] .shifting-item-icon {
    background: var(--surface, rgba(0,0,0,0.04));
    border-color: var(--border, rgba(0,0,0,0.08));
}
[data-theme="light"] .shifting-item.is-active .shifting-item-icon {
    background: var(--text, #111);
    border-color: var(--text, #111);
}
[data-theme="light"] .shifting-item.is-active .shifting-item-icon i {
    color: var(--bg, #f5f4f1) !important;
}
[data-theme="light"] .mini-menu-item:hover {
    background: var(--panel-hover, rgba(0,0,0,0.04));
}

/* =======================================================================
   24. AUTH PAGE — Login / Register layout
   ======================================================================= */

/* Full-page wrapper: centra la card verticalmente */
.ice-auth-wrap {
    min-height: calc(100vh - 80px); /* resta aprox. el header */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

/* Card container */
.ice-auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--glass-bg, rgba(255,255,255,0.04));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.10));
    border-radius: 1.25rem;
    padding: 2.5rem 2rem;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 24px 80px rgba(0,0,0,0.35);
}

[data-theme="light"] .ice-auth-card {
    background: rgba(255,255,255,0.80);
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 16px 60px rgba(0,0,0,0.08);
}

/* OAuth / social buttons */
.ice-oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.85rem 1.25rem;
    border-radius: 10px;
    font-family: var(--ice-font-body, 'DM Sans', sans-serif);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    text-decoration: none;
}
.ice-oauth-btn:hover { opacity: 0.88; }

/* Primary — white (Google) */
.ice-oauth-btn--primary {
    background: var(--btn-bg, #ffffff);
    color: var(--btn-text, #111111);
    border: none;
}
[data-theme="dark"] .ice-oauth-btn--primary {
    background: #ffffff;
    color: #111111;
}

/* Ghost — transparent with border (Email) */
.ice-oauth-btn--ghost {
    background: transparent;
    color: var(--text, #fff);
    border: 1px solid var(--border-2, rgba(255,255,255,0.15));
}
.ice-oauth-btn--ghost:hover {
    border-color: var(--border-3, rgba(255,255,255,0.28));
    background: var(--surface, rgba(255,255,255,0.04));
    opacity: 1;
}
[data-theme="light"] .ice-oauth-btn--ghost {
    color: var(--text, #111);
    border-color: var(--border-2, rgba(0,0,0,0.16));
}

/* Divider "o" between buttons */
.ice-auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.9rem 0;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3, rgba(255,255,255,0.32));
}
.ice-auth-divider::before,
.ice-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border, rgba(255,255,255,0.08));
}

/* =======================================================================
   Stat cards soft tints (light/dark adaptive)
   ======================================================================= */

/* Stat cards soft tints (light/dark adaptive) */
.stat-soft-indigo {
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.18);
}
.stat-soft-amber {
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.18);
}
.stat-soft-emerald {
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.18);
}
.stat-soft-rose {
    background: rgba(244,63,94,0.08);
    border: 1px solid rgba(244,63,94,0.18);
}

/* =======================================================================
   PAGE LOADER — Aceternity LoaderOne (3 dots bounce)
   ======================================================================= */
#ice-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg, #050505);
    transition: opacity 0.45s cubic-bezier(.4,0,.2,1);
}
#ice-loader.ice-loader--hidden {
    opacity: 0;
    pointer-events: none;
}

/* 3 dots — fiel al original: gap-2, h-4 w-4, rounded-full,
   border border-neutral-300, bg-gradient from-neutral-400 to-neutral-300 */
.ice-loader-dots {
    display: flex;
    align-items: center;
    gap: 8px; /* gap-2 = 0.5rem */
}
.ice-loader-dot {
    width:  16px; /* w-4 */
    height: 16px; /* h-4 */
    border-radius: 50%;
    border: 1px solid #d4d4d4;          /* border-neutral-300 */
    background: linear-gradient(to bottom, #a3a3a3, #d4d4d4); /* from-neutral-400 to-neutral-300 */
    animation: ice-loader-bounce 1s ease-in-out infinite;
}

@keyframes ice-loader-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(10px); }
}

/* =======================================================================
   METEOR SHOWER BACKGROUND
   ======================================================================= */
#ice-meteor-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

/* Cada meteoro: punto (cabeza) + cola via ::before */
.ice-meteor {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.35);
    animation: ice-meteor-fall linear infinite;
}

/* Cola del meteoro */
.ice-meteor::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 70px;
    height: 1px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.75), transparent);
    border-radius: 9999px;
}

/* Light mode: versión sutil oscura */
[data-theme="light"] .ice-meteor {
    background: rgba(0, 0, 0, 0.22);
    box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .ice-meteor::before {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.18), transparent);
}

/* Keyframe: dirección diagonal de la lluvia de meteoros */
@keyframes ice-meteor-fall {
    0% {
        transform: rotate(215deg) translateX(0);
        opacity: 0;
    }
    5%  { opacity: 1; }
    80% { opacity: 1; }
    100% {
        transform: rotate(215deg) translateX(-550px);
        opacity: 0;
    }
}