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

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

.glass-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

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

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

@media (max-width: 768px) {
    body {
        padding-bottom: 4.5rem;
    }

    .whatsapp-float {
        display: none;
        /* Ocultado en móviles para usar el botón de WhatsApp integrado en el bottom nav */
    }
}

/* Custom Scrollbar Premium UI */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #475569;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* ── Cómo funciona — Timeline (vertical mobile · horizontal desktop) ──
   Mobile  : timeline vertical + acordeón inline por paso.
   Desktop : timeline horizontal + panel compartido (click cambia el panel).
   Todo el layout responsive vive acá (CSS puro) para no depender de
   utilidades Tailwind que podrían estar purgadas. */

/* Aire inferior de la sección — la linterna global llena este espacio
   hasta el borde del footer (strip de las 4 características). */
.cf-section { padding-bottom: 4rem; }

.cf-wrap { position: relative; }

/* ── BASE = MOBILE: timeline vertical acordeón ── */
.cf-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 42rem;            /* ~max-w-2xl, centrado en mobile/tablet */
    margin: 0 auto;
}
/* Línea conectora vertical */
.cf-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2.25rem;               /* centro del nodo: padding .75rem + radio 1.5rem */
    width: 2px;
    transform: translateX(-50%);
    pointer-events: none;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(14, 165, 233, .50) 8%,
        rgba(34, 211, 238, .28) 75%,
        transparent 100%);
}

.cf-step { cursor: pointer; user-select: none; }
.cf-step:not(:last-child) .cf-content { padding-bottom: 2rem; }

.cf-row {
    display: flex;
    gap: 1.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: 1.125rem;
    transition: background .2s ease;
}
.cf-row:hover            { background: rgba(14, 165, 233, .03); }
.cf-step.is-open .cf-row { background: rgba(14, 165, 233, .05); }

.cf-node {
    position: relative;
    z-index: 1;
    transition: box-shadow .35s ease, transform .25s ease;
}
.cf-step:hover .cf-node { transform: scale(1.05); }
.cf-step.is-open  .cf-node,
.cf-step.is-active .cf-node {
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .22),
                0 0 28px rgba(14, 165, 233, .55) !important;
    transform: scale(1.10);
}

.cf-content { flex: 1; min-width: 0; }

.cf-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.375rem;
}

.cf-chevron {
    flex-shrink: 0;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.cf-step.is-open .cf-chevron { transform: rotate(180deg); }

.cf-detail {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height .42s cubic-bezier(.4, 0, .2, 1),
        opacity    .30s ease;
}
.cf-step.is-open .cf-detail { max-height: 600px; opacity: 1; }

/* Panel compartido: oculto en mobile (mobile usa acordeón inline) */
.cf-panel { display: none; }

/* ── DESKTOP (≥768px): timeline horizontal + panel compartido ── */
@media (min-width: 768px) {
    .cf-section { padding-bottom: 5rem; }

    .cf-timeline {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.5rem;
        max-width: none;
    }
    /* Línea conectora horizontal, a la altura del centro del nodo */
    .cf-timeline::before {
        top: 1.5rem;
        bottom: auto;
        left: 12.5%;
        right: 12.5%;
        width: auto;
        height: 2px;
        transform: translateY(-50%);
        background: linear-gradient(to right,
            transparent 0%,
            rgba(14, 165, 233, .50) 12%,
            rgba(34, 211, 238, .28) 88%,
            transparent 100%);
    }

    .cf-step { flex: 1 1 0; }
    .cf-step:not(:last-child) .cf-content { padding-bottom: 0; }

    .cf-row {
        flex-direction: column;
        align-items: center;
        gap: 0.85rem;
        padding: 0;
        background: transparent !important;   /* sin hover-bg por columna */
    }

    .cf-content { text-align: center; }
    .cf-head    { justify-content: center; }
    .cf-chevron { display: none; }   /* en desktop no hay acordeón por paso */
    .cf-detail  { display: none; }   /* el detalle va al panel compartido */

    .cf-panel {
        display: block;
        max-width: 46rem;
        margin: 2.75rem auto 0;
        padding: 1.5rem 1.75rem;
        border-radius: 1.125rem;
        border: 1px solid rgba(14, 165, 233, .18);
        background: rgba(14, 165, 233, .04);
    }
    .cf-panel > * + * { margin-top: 0.625rem; }   /* equivale a space-y-2.5 */
    .cf-panel-title {
        font-weight: 700;
        font-size: 1.05rem;
        margin-bottom: 0.85rem;
        color: #0f172a;
    }
    .dark .cf-panel-title { color: #fff; }
}
/* ─────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════
   HERO 3D (parallax + mesh) + FONDO LANDING "Linterna Pura"
   Portado del prototipo design/prototipos-fondo/hero-combo-2-espacio-profundidad.html
   El JS vive en static/js/modules/hero-fx.js (setea --mx/--my y --cursor-x/--cursor-y).
   ═══════════════════════════════════════════════════════════════════ */

/* ── NOISE: textura estática fija ── */
.noise-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0.05;
    background-repeat: repeat;
    background-size: 200px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dark .noise-layer { opacity: 0.07; }

/* ── PARALLAX 3D: wrapper del hero ── */
#js-hero {
    perspective: 1200px;
    transform-style: preserve-3d;
}
.layer-bg {
    transform: translate(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -4px));
    transition: transform .8s cubic-bezier(.05,.5,0,1);
    will-change: transform;
}
.layer-text {
    transform: translate(calc(var(--mx, 0) * -15px), calc(var(--my, 0) * -8px));
    transition: transform .6s cubic-bezier(.05,.5,0,1);
    will-change: transform;
}
.layer-cards {
    transform: translate(calc(var(--mx, 0) * 22px), calc(var(--my, 0) * 12px));
    transition: transform .4s cubic-bezier(.05,.5,0,1);
    will-change: transform;
}

/* ── FONDO DEL HERO — celeste vibrante (light) / navy profundo (dark) ── */
.hero-bg-base {
    background: linear-gradient(135deg, #0BC5F3 0%, #2563eb 100%);
}
.dark .hero-bg-base {
    background: linear-gradient(135deg, #0f0c29 0%, #1a1045 35%, #0d1b3e 65%, #051520 100%);
}

/* ── MESH: 3 radiales (light = glows luminosos / dark = brand) ── */
.mesh-1 { background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 65%); }
.mesh-2 { background: radial-gradient(circle, rgba(11,197,243,0.30) 0%, transparent 65%); }
.mesh-3 { background: radial-gradient(circle, rgba(37,99,235,0.28) 0%, transparent 65%); }
.dark .mesh-1 { background: radial-gradient(circle, rgba(79,70,229,0.50) 0%, transparent 65%); }
.dark .mesh-2 { background: radial-gradient(circle, rgba(37,99,235,0.45) 0%, transparent 65%); }
.dark .mesh-3 { background: radial-gradient(circle, rgba(6,182,212,0.40) 0%, transparent 65%); }

/* ── FONDO GLOBAL LANDING (post-hero) — "Linterna Pura" ──
   base: degradé sutil · textura: puntitos celeste revelados por la luz ·
   luz: spotlight celeste grande que sigue el cursor. */
.linterna-base {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(160deg, #f1f5f9 0%, #e2e8f0 50%, #f8fafc 100%);
}
.dark .linterna-base {
    background: linear-gradient(160deg, #0f0c29 0%, #0d1b3e 50%, #051520 100%);
}
.linterna-textura {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image: radial-gradient(circle, rgba(20, 115, 220, 0.12) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(
        600px circle at var(--cursor-x, -999px) var(--cursor-y, -999px),
        rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 100%);
    mask-image: radial-gradient(
        600px circle at var(--cursor-x, -999px) var(--cursor-y, -999px),
        rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 100%);
}
.dark .linterna-textura {
    background-image: radial-gradient(circle, rgba(120, 190, 255, 0.14) 1px, transparent 1px);
    -webkit-mask-image: radial-gradient(
        600px circle at var(--cursor-x, -999px) var(--cursor-y, -999px),
        rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.03) 100%);
    mask-image: radial-gradient(
        600px circle at var(--cursor-x, -999px) var(--cursor-y, -999px),
        rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.03) 100%);
}
.linterna-luz {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(
        600px circle at var(--cursor-x, -999px) var(--cursor-y, -999px),
        rgba(20, 115, 220, 0.18) 0%, rgba(11, 197, 243, 0.08) 40%, transparent 65%);
}
.dark .linterna-luz {
    background: radial-gradient(
        600px circle at var(--cursor-x, -999px) var(--cursor-y, -999px),
        rgba(11, 197, 243, 0.28) 0%, rgba(37, 99, 235, 0.14) 40%, transparent 65%);
}

/* ── Modo CLARO: sin linterna ──
   La luz cyan que sigue el cursor guia bien sobre fondo oscuro, pero en claro
   genera confusion (parece un artefacto). Dejamos solo .linterna-base (degrade
   neutro estatico) y apagamos el spotlight + los puntitos revelados. */
html:not(.dark) .linterna-textura,
html:not(.dark) .linterna-luz {
    display: none;
}

/* Accesibilidad: sin parallax si el usuario reduce movimiento */
@media (prefers-reduced-motion: reduce) {
    .layer-bg, .layer-text, .layer-cards { transition: none; transform: none; }
}

/* ── Banner WhatsApp "¿Tenés dudas?" — resplandor verde reactivo ──
   El blob deriva hacia el cursor (con inercia) vía wa-glow.js, que setea
   --wa-x / --wa-y (px relativos al banner). Sin JS (touch / reduce-motion)
   queda en su posición de reposo gracias a los valores fallback (% → esquina
   superior derecha). Conserva la iluminación verde de marca (#00E676). */
.wa-glow {
    position: absolute;
    width: 20rem;
    height: 20rem;
    border-radius: 9999px;
    pointer-events: none;
    z-index: 0;
    left: var(--wa-x, 88%);
    top:  var(--wa-y, -8%);
    transform: translate(-50%, -50%);
    filter: blur(64px);
    opacity: 0.65;
    transition: opacity .45s ease;
    background: radial-gradient(circle,
        rgba(0, 230, 118, .55) 0%,
        rgba(0, 230, 118, .16) 45%,
        transparent 70%);
}
.group:hover .wa-glow { opacity: 0.95; }   /* además se intensifica al hover */