/* ============================================================================
   CRYBS · estilos compartidos (lo que Tailwind no cubre cómodo)
   Motion: acciones frecuentes < 200 ms; aparición suave de secciones; el envase flota.
   ============================================================================ */

:root {
    --crybs-green: #22A852;
    --crybs-blue: #1354A1;
    --crybs-deep: #0B2347;
    --crybs-ink: #06162C;
    --grad: linear-gradient(90deg, #22A852, #1354A1);
}

html { scroll-padding-top: 120px; }
body { font-feature-settings: "ss01", "cv11"; }

/* Texto con el degradado de marca */
.grad-text {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.grad-line { height: 3px; background: var(--grad); border-radius: 3px; }

/* Etiqueta superior de sección (eyebrow) */
.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--crybs-green);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--grad); border-radius: 2px; }
.eyebrow.on-dark { color: #7FD9A0; }

/* Aparición al hacer scroll */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="2"] { transition-delay: .1s; }
[data-reveal="3"] { transition-delay: .2s; }

/* Flotación del envase (solo en el momento estrella) */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.float { animation: floaty 6s ease-in-out infinite; }

/* Fondo molecular (hexágonos del logo) para bandas oscuras */
.bg-hex {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66 0 50V18L28 2l28 16v32L28 66zm0 32L0 82V66l28-16 28 16v16L28 98z' fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E");
}
.bg-hex-light {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66 0 50V18L28 2l28 16v32L28 66zm0 32L0 82V66l28-16 28 16v16L28 98z' fill='none' stroke='%231354A1' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E");
}

/* Brillo verde/azul difuso para fondos premium */
.glow { position: absolute; border-radius: 9999px; filter: blur(90px); pointer-events: none; }

/* Tarjetas */
.card-lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-lift:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(11,35,71,.28); border-color: rgba(19,84,161,.25); }

/* Enlace con flecha que se desliza */
.link-arrow i { transition: transform .18s ease; }
.link-arrow:hover i { transform: translateX(4px); }

/* ---------- Header y mega menú ---------- */
.site-header { transition: box-shadow .2s ease, background-color .2s ease; }
.site-header.is-scrolled { box-shadow: 0 8px 30px -12px rgba(11,35,71,.18); }
.nav-btn[aria-expanded="true"] { color: var(--crybs-blue); }
.nav-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-btn .chev { transition: transform .18s ease; }
.nav-btn::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--grad); transform: scaleX(0); transition: transform .18s ease; transform-origin: left;
}
.nav-btn[aria-expanded="true"]::after, .nav-btn.is-current::after { transform: scaleX(1); }

.mega { opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; }
.mega.is-open { opacity: 1; visibility: visible; transform: none; }

/* Menú móvil */
.mobile-panel { transform: translateX(100%); transition: transform .22s ease; }
.mobile-panel.is-open { transform: none; }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; }
.acc-body > div { overflow: hidden; }
.acc.is-open .acc-body { grid-template-rows: 1fr; }
.acc.is-open .chev { transform: rotate(180deg); }

/* Widget de ayuda */
.help-card { opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98); transition: all .16s ease; transform-origin: bottom right; }
.help.is-open .help-card { opacity: 1; visibility: visible; transform: none; }

/* Botones de filtro del catálogo */
.chip { transition: all .15s ease; }
.chip.is-active { background: var(--crybs-deep); color: #fff; border-color: var(--crybs-deep); }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    .float { animation: none; }
    .mega, .mobile-panel, .help-card, .card-lift, .acc-body { transition: none; }
}