/*
 * Portada (app.listosoftware.com.mx) — efectos y micro-interacciones (1024px+ y puntero fino).
 * Ideas tomadas de las mejores webs de software (Linear, Stripe, Vercel): menú compacto,
 * halo del cursor en cada sección de la página y en las tarjetas, cascada y selector de planes.
 */
@media (min-width: 768px), (pointer: fine) {
    /* Menú: más aire arriba, se compacta y oscurece al bajar. */
    .glass-nav > div { transition: padding 0.25s ease; }
    .glass-nav.pw-compacta { background: rgba(6, 6, 8, 0.94); box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.6); }
    .glass-nav.pw-compacta > div { padding-top: 0.6rem; padding-bottom: 0.6rem; }
    .glass-nav nav a { position: relative; }
    .glass-nav nav a.pw-activo { color: #fff; }
    .glass-nav nav a.pw-activo::after {
        content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
        border-radius: 2px; background: #22B8B3;
    }

    /* Halo suave que sigue al cursor en cada sección de la página (tenue pero claramente perceptible) */
    body > section {
        position: relative;
        overflow: hidden;
    }
    body > section::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0;
        transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        background: radial-gradient(
            760px circle at var(--pw-sx, 50%) var(--pw-sy, 50%),
            rgba(34, 184, 179, 0.10) 0%,
            rgba(34, 184, 179, 0.045) 32%,
            rgba(34, 184, 179, 0.012) 58%,
            transparent 72%
        );
    }
    body > section.pw-sec-activa::before {
        opacity: 1;
    }
    body > section > * {
        position: relative;
        z-index: 1;
    }

    /* Portada (Hero): halo centrado visible desde el inicio */
    .pw-hero { --pw-sx: 50%; --pw-sy: 32%; }
    .pw-hero::before {
        opacity: 0.9;
        background: radial-gradient(
            820px circle at var(--pw-sx, 50%) var(--pw-sy, 32%),
            rgba(34, 184, 179, 0.11) 0%,
            rgba(34, 184, 179, 0.048) 35%,
            rgba(34, 184, 179, 0.012) 60%,
            transparent 75%
        );
    }
    .pw-hero.pw-sec-activa::before {
        opacity: 1;
    }

    /* Tarjetas/Cajas: halo micro más concentrado y brillante que sigue al cursor con elevación */
    .apple-card { position: relative; transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }
    .apple-card::before {
        content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
        opacity: 0; transition: opacity 0.3s ease;
        background: radial-gradient(440px circle at var(--pw-x, 50%) var(--pw-y, 50%), rgba(34, 184, 179, 0.14), transparent 48%);
    }
    .apple-card:hover::before { opacity: 1; }
    #planes .apple-card:not(.plan-card-highlight):hover { transform: translateY(-4px); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.7); }
    #planes .plan-card-highlight:hover { box-shadow: 0 28px 70px -16px rgba(34, 184, 179, 0.40); }

    /* Planes: selector Mensual / Anual */
    .pw-periodo {
        display: flex; width: max-content; margin: 2.5rem auto 0; padding: 4px; gap: 4px;
        border-radius: 9999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.10);
    }
    .pw-periodo button {
        padding: 0.5rem 1.1rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 600;
        color: #a1a1aa; transition: background 0.2s ease, color 0.2s ease;
    }
    .pw-periodo button[aria-pressed="true"] { background: #fff; color: #000; }
    .pw-periodo .pw-ahorro {
        margin-left: 0.4rem; padding: 0.1rem 0.45rem; border-radius: 9999px; font-size: 0.68rem;
        background: rgba(34, 184, 179, 0.18); color: #5eead4;
    }
    .pw-periodo button[aria-pressed="true"] .pw-ahorro { background: rgba(34, 184, 179, 0.25); color: #0f766e; }
    .pw-nota-anual { display: block; margin-top: 0.25rem; font-size: 0.72rem; color: #5eead4; min-height: 1em; }

    /* Aparecer al hacer scroll */
    .pw-revelar { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .pw-revelar.pw-visible { opacity: 1; transform: none; }

    /* Titulares con brillo sutil y botones con halo */
    .pw-hero h1 span, .pw-hero h1 .text-zinc-400, .pw-hero h1 .text-zinc-500 {
        background: linear-gradient(90deg, #a1a1aa, #e4e4e7 50%, #a1a1aa);
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .pw-hero a.bg-white, .pw-final a.bg-white {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.0), 0 10px 40px -10px rgba(34, 184, 179, 0.55);
        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }
    .pw-hero a.bg-white:hover, .pw-final a.bg-white:hover { transform: translateY(-2px); box-shadow: 0 14px 50px -10px rgba(34, 184, 179, 0.75); }

    /* Todas las tarjetas en rejilla suben un poco al pasar el mouse */
    section .grid > .apple-card:hover, #demos .grid > a:hover {
        transform: translateY(-3px); border-color: rgba(34, 184, 179, 0.35);
        box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.7);
    }
    #demos .grid > a { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }

    /* Aparecer en cascada */
    .pw-cascada > * { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
    .pw-cascada.pw-visible > * { opacity: 1; transform: none; }

    /* Preguntas en dos columnas */
    #preguntas .space-y-3 { columns: 2; column-gap: 0.75rem; }
    #preguntas .space-y-3 > * { break-inside: avoid; margin: 0 0 0.75rem !important; }
    #preguntas .max-w-4xl { max-width: 72rem; }

    /* Cierre: halo del cursor + halo respiratorio detrás del título */
    .pw-final { position: relative; overflow: hidden; }
    .pw-final::after {
        content: ''; position: absolute; left: 50%; top: 45%; width: 720px; height: 320px; pointer-events: none; z-index: 0;
        transform: translate(-50%, -50%); border-radius: 50%;
        background: radial-gradient(closest-side, rgba(34, 184, 179, 0.14), transparent);
        animation: pw-respira 6s ease-in-out infinite;
    }
    @keyframes pw-respira { 50% { opacity: 0.45; transform: translate(-50%, -50%) scale(1.08); } }
}

@media (prefers-reduced-motion: reduce) {
    .pw-revelar { opacity: 1; transform: none; transition: none; }
    .apple-card, #planes .apple-card:hover, section .grid > .apple-card:hover, #demos .grid > a:hover { transform: none !important; }
    .pw-cascada > * { opacity: 1; transform: none; transition: none; }
    .pw-final::after { animation: none; }
}