body {
    font-family: 'Inter', sans-serif;
}

.hero-gradient {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 90;
    transition: transform 0.3s;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

/* ── Fade-in on load ── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-up   { animation: fadeUp 0.45s ease both; }
.fade-up-2 { animation: fadeUp 0.45s 0.1s ease both; }
.fade-up-3 { animation: fadeUp 0.45s 0.2s ease both; }

/* ── Shimmer on price ── */
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.price-shine {
    background: linear-gradient(90deg, #1d4ed8, #3b82f6, #1d4ed8);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

/* ── Tabs ── */
.tab-btn.active {
    border-bottom-color: #2563eb;
    color: #2563eb;
}
.dark .tab-btn.active {
    border-bottom-color: #3b82f6;
    color: #3b82f6;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Accordion ── */
.acc-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.acc-body.open { max-height: 500px; }
.acc-chevron { transition: transform 0.3s ease; }
.acc-chevron.open { transform: rotate(180deg); }

/* ── App icon grid hover ── */
.app-chip:hover { transform: translateY(-2px); }
.app-chip { transition: transform 0.2s ease, box-shadow 0.2s ease; }

/* ── Trust badge pulse ── */
@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.3); }
    50%       { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}
.live-dot { animation: pulse-green 2s infinite; }

/* ═══ Buy Box Sidebar ═══ */
.buy-box-sidebar {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.buy-box-sidebar:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.dark .buy-box-sidebar:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ── Mobile product layout ── */
@media (max-width: 767px) {
    .product-layout {
        align-items: flex-start;
    }

    .product-image-col {
        width: 38%;
        flex-shrink: 0;
    }

    .product-info-col {
        flex: 1;
        min-width: 0;
    }

    .product-action-zone-mobile {
        width: 100%;
        flex-basis: 100%;
    }
}

/* Custom activation checkbox */
.activation-check-icon {
    opacity: 0;
}
.activation-input:checked ~ .activation-check {
    background-color: #f59e0b;
    border-color: #f59e0b;
}
.activation-input:checked ~ .activation-check .activation-check-icon {
    opacity: 1;
}
.activation-input:checked ~ .activation-check {
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

/* Mobile activation toggle switch */
.mobile-act-track {
    transition: background-color 0.25s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}
.mobile-act-thumb {
    transition: transform 0.25s ease;
}
.mobile-act-switch-input:checked ~ .mobile-act-track {
    background-color: #f59e0b !important;
}
.mobile-act-switch-input:checked ~ .mobile-act-thumb {
    transform: translateX(18px) !important;
}

/* ── Mobile Purchase Bar: hidden when cart drawer is open ── */
#mobile-purchase-bar.cart-open-dimmed {
    transform: translateY(100%) !important;
    pointer-events: none;
}

/* ── Mobile Purchase Bar: body padding ── */
@media (max-width: 767px) {
    body {
        padding-bottom: 9rem;
    }
    /* El stock label solo se muestra en desktop */
    #prod-stock-label {
        display: none !important;
    }
}

/* ═══ Componente Licencia (_licencia.html) ═══ */

/* Texto degradado — background-clip:text no es utilidad Tailwind compilada */
.licencia-gradient {
    background: linear-gradient(135deg, #3c52bb 0%, #26a2d0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Tarjeta activa — borde + fondo de acento indigo/cyan */
.licencia-card-active {
    background: linear-gradient(145deg, #eef1fb 0%, #e8f4fb 100%);
    border-color: #3c52bb;
    box-shadow: 0 0 0 1px #3c52bb, 0 8px 24px -4px rgba(60,82,187,0.18);
}
.dark .licencia-card-active {
    background: linear-gradient(145deg, #1a2040 0%, #0f2035 100%);
    border-color: #26a2d0;
    box-shadow: 0 0 0 1px #26a2d0, 0 8px 24px -4px rgba(38,162,208,0.20);
}

/* Contenedor de icono — Perpetua (indigo) */
.licencia-icon-perpetua {
    background: linear-gradient(135deg, #eef1fb 0%, #dbeafe 100%);
    color: #3c52bb;
}
.dark .licencia-icon-perpetua {
    background: linear-gradient(135deg, #1e2a5a 0%, #1e3a5f 100%);
    color: #93c5fd;
}

/* Contenedor de icono — Suscripcion (violeta) */
.licencia-icon-suscripcion {
    background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
    color: #4f46e5;
}
.dark .licencia-icon-suscripcion {
    background: linear-gradient(135deg, #2e1f5e 0%, #1e1b4b 100%);
    color: #a5b4fc;
}

/* Contenedor de icono — Cuenta (cyan) */
.licencia-icon-cuenta {
    background: linear-gradient(135deg, #e0f4fb 0%, #cffafe 100%);
    color: #0891b2;
}
.dark .licencia-icon-cuenta {
    background: linear-gradient(135deg, #0c2a35 0%, #083344 100%);
    color: #67e8f9;
}

/* Hover lift para tarjetas */
.licencia-card-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.licencia-card-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px -6px rgba(60,82,187,0.15);
}
.dark .licencia-card-lift:hover {
    box-shadow: 0 12px 32px -6px rgba(38,162,208,0.18);
}

/* Texto de acento indigo/cyan — dark:text-brand-cyan NO esta compilado en tw-compiled.css */
.licencia-accent { color: #3c52bb; }
.dark .licencia-accent { color: #26a2d0; }

/* Badge "Este producto" — dark:text-slate-950 NO esta compilado en tw-compiled.css */
.licencia-badge { background-color: #3c52bb; color: #ffffff; }
.dark .licencia-badge { background-color: #26a2d0; color: #0f172a; }

/* Eyebrow píldora (§5.5) — padding (py-1.5) y tinte de acento NO son utilidades compiladas */
.licencia-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    background-color: rgba(60, 82, 187, 0.10);
    color: #3c52bb;
}
.dark .licencia-eyebrow {
    background-color: rgba(38, 162, 208, 0.15);
    color: #26a2d0;
}

/* NOTA LIMPIEZA FUTURA: .acc-body, .acc-chevron, .acc-trigger en product.css
   quedan sin uso ahora que _faq.html fue archivado en product/OLD/.
   El JS toggleAcc() en index.html tampoco se usa. Limpiar en un PR dedicado. */