:root{ color-scheme: light dark; }
body{ background:#f8fafc }
.dark body{ background:#0b1020; color:#e5e7eb }

.glass{ backdrop-filter:saturate(140%) blur(10px); background:rgba(255,255,255,.7) }
.dark .glass{ background:rgba(17,25,40,.55); border-color:rgba(255,255,255,.08) }

/* === Mesh backgrounds por sección (capas con distintos colores) === */
.mesh-hero{background-image:
        radial-gradient(40rem 30rem at 10% 10%, rgba(99,102,241,.28), transparent),
        radial-gradient(40rem 30rem at 90% 10%, rgba(59,130,246,.22), transparent),
        radial-gradient(50rem 30rem at 50% 100%, rgba(16,185,129,.20), transparent)
}
.dark .mesh-hero{background-image:
        radial-gradient(40rem 30rem at 10% 10%, rgba(99,102,241,.20), transparent),
        radial-gradient(40rem 30rem at 90% 10%, rgba(59,130,246,.16), transparent),
        radial-gradient(50rem 30rem at 50% 100%, rgba(16,185,129,.16), transparent)
}

#producto, #logos, #servicios, #precios, #contacto { position: relative; overflow: hidden; }
#producto::before, #logos::before, #servicios::before, #precios::before, #contacto::before{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background-repeat:no-repeat; background-size:cover;
}
/* Producto: morados + azules suaves */
#producto{ background-image:
        radial-gradient(32rem 24rem at 5% 15%, rgba(99,102,241,.18), transparent),
        radial-gradient(28rem 22rem at 95% 20%, rgba(59,130,246,.14), transparent),
        radial-gradient(36rem 26rem at 50% 110%, rgba(139,92,246,.12), transparent)
}
.dark #producto{ background-image:
        radial-gradient(32rem 24rem at 5% 15%, rgba(99,102,241,.14), transparent),
        radial-gradient(28rem 22rem at 95% 20%, rgba(59,130,246,.12), transparent),
        radial-gradient(36rem 26rem at 50% 110%, rgba(139,92,246,.10), transparent)
}
/* Logos: cian + lima muy sutil */
#logos, #beneficios{ background-image:
        radial-gradient(28rem 22rem at 0% 50%, rgba(34,211,238,.14), transparent),
        radial-gradient(24rem 20rem at 100% 50%, rgba(132,204,22,.10), transparent)
}
.dark #logos{ background-image:
        radial-gradient(28rem 22rem at 0% 50%, rgba(34,211,238,.12), transparent),
        radial-gradient(24rem 20rem at 100% 50%, rgba(132,204,22,.08), transparent)
}
/* Servicios: índigo + esmeralda */
#servicios{ background-image:
        radial-gradient(36rem 28rem at 10% 0%, rgba(79,70,229,.16), transparent),
        radial-gradient(30rem 24rem at 90% 10%, rgba(16,185,129,.12), transparent)
}
.dark #servicios{ background-image:
        radial-gradient(36rem 28rem at 10% 0%, rgba(79,70,229,.12), transparent),
        radial-gradient(30rem 24rem at 90% 10%, rgba(16,185,129,.10), transparent)
}
/* Precios: azul + ámbar */
#precios{ background-image:
        radial-gradient(40rem 30rem at 15% 0%, rgba(59,130,246,.12), transparent),
        radial-gradient(26rem 22rem at 85% 100%, rgba(251,191,36,.10), transparent)
}
.dark #precios{ background-image:
        radial-gradient(40rem 30rem at 15% 0%, rgba(59,130,246,.10), transparent),
        radial-gradient(26rem 22rem at 85% 100%, rgba(251,191,36,.08), transparent)
}
/* Contacto: rosa + violeta */
#contacto{ background-image:
        radial-gradient(34rem 26rem at 0% 100%, rgba(244,114,182,.12), transparent),
        radial-gradient(30rem 24rem at 100% 0%, rgba(168,85,247,.10), transparent)
}
.dark #contacto{ background-image:
        radial-gradient(34rem 26rem at 0% 100%, rgba(244,114,182,.10), transparent),
        radial-gradient(30rem 24rem at 100% 0%, rgba(168,85,247,.08), transparent)
}

/* Componentes base */
.card{ border-radius:1rem; border:1px solid rgba(0,0,0,.1); background:#fff; transition: transform .3s ease; position:relative; overflow:hidden }
.card:hover{ transform: translateY(-2px) }
.dark .card{ background:#0f172a; border-color:rgba(255,255,255,.08) }

.btn{ display:inline-flex; align-items:center; justify-content:center; border-radius:1rem; padding:.75rem 1.25rem; font-weight:600 }
.btn-primary{ background:#4f46e5; color:#fff }
.btn-ghost{ background:#fff; color:#0b1020; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1) }
.dark .btn-ghost{ background:#111827; color:#e5e7eb }

.pill{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .8rem; border-radius:.9rem; font-size:.75rem; font-weight:600; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1) }

/* Borde degradado util */
.g-border{ position:relative }
.g-border:before{ content:""; position:absolute; inset:-1px; border-radius:1.1rem; padding:1px; background:linear-gradient(120deg,#6366f1,#22c55e,#3b82f6);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude }

/* Logos marquee */
@keyframes scroll{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }

/* === Textura y borde suave para cards === */
.card::before{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), inset 0 24px 64px rgba(2,6,23,.06); pointer-events:none }
.card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:
        radial-gradient(1px 1px at 20% 30%, rgba(0,0,0,.045), transparent 1px),
        radial-gradient(1px 1px at 80% 70%, rgba(0,0,0,.035), transparent 1px),
        radial-gradient(1px 1px at 40% 80%, rgba(0,0,0,.03), transparent 1px);
    mix-blend-mode:multiply; opacity:.55
}
.dark .card::before{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 24px 64px rgba(255,255,255,.04) }
.dark .card::after{ background:
        radial-gradient(1px 1px at 25% 25%, rgba(255,255,255,.055), transparent 1px),
        radial-gradient(1px 1px at 75% 65%, rgba(255,255,255,.045), transparent 1px),
        radial-gradient(1px 1px at 45% 85%, rgba(255,255,255,.04), transparent 1px) }

/* Campos de formularios con textura suave */
input, select, textarea{
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.96));
    box-shadow: inset 0 1px 2px rgba(15,23,42,.06);
}
.dark input, .dark select, .dark textarea{
    background: linear-gradient(180deg, rgba(2,6,23,.86), rgba(2,6,23,.92));
    box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
    color:#e5e7eb;
}
.wa-pulse {
    animation: waPulse 2.8s infinite;
}

@keyframes waPulse {
    0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.35); }
    70%  { box-shadow: 0 0 0 14px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* Reduce animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
    .wa-pulse {
        animation: none;
    }
}

/* intl-tel-input: ajustes para modo oscuro cuando Tailwind usa `html.dark` */
html.dark .iti__country-list{
    background-color: rgb(15 23 42); /* slate-900 aprox */
    color: rgb(226 232 240);         /* slate-200 aprox */
    border-color: rgba(255,255,255,.10);
}

html.dark .iti__country{
    color: rgb(226 232 240);
}

html.dark .iti__country:hover,
html.dark .iti__country.iti__highlight{
    background-color: rgba(255,255,255,.08);
}

html.dark .iti__divider{
    border-color: rgba(255,255,255,.10);
}

html.dark .iti__search-input{
    background-color: rgb(30 41 59); /* slate-800 aprox */
    color: rgb(226 232 240);
    border-color: rgba(255,255,255,.10);
}

html.dark .iti__search-input::placeholder{
    color: rgba(226,232,240,.65);
}

/* Si el nombre del país aparece en un span interno */
html.dark .iti__country-name,
html.dark .iti__dial-code{
    color: rgb(226 232 240);
}
/* Contenedor del toggle con ancla para el popover */
.billing-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* Badge pequeño "Ahorra" */
.billing-badge {
    margin-left: .35rem;
    font-size: .72rem;
    line-height: 1;
    padding: .28rem .45rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, .12);
    color: rgb(22, 163, 74);
    border: 1px solid rgba(34, 197, 94, .25);
    white-space: nowrap;
}

/* Popover */
.billing-popover {
    position: absolute;
    left: 50%;
    top: calc(100% + .55rem);
    transform: translateX(-50%);
    background: rgba(15, 23, 42, .96);
    color: #fff;
    padding: .5rem .65rem;
    border-radius: .6rem;
    font-size: .85rem;
    white-space: nowrap;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

/* Flechita */
.billing-popover::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(15, 23, 42, .96);
}

/* Mostrar al hover/focus */
.billing-toggle:hover .billing-popover,
.billing-toggle:focus-visible .billing-popover,
.billing-toggle[data-open="true"] .billing-popover {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce) {
    .billing-popover { transition: none; }
}

/* Animación sutil cuando se abre automáticamente */
.billing-toggle[data-open="true"] .billing-popover {
    animation: billingNudge .9s ease-out 1;
}

@keyframes billingNudge {
    0%   { transform: translateX(-50%) translateY(-6px); opacity: 0; }
    35%  { transform: translateX(-50%) translateY(0);    opacity: 1; }
    100% { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

/* Capturas del sistema: se ven nítidas y con micro-zoom */
#benefitsImagesSwiper .swiper-slide img{
    transform: translateZ(0);
    transition: transform .35s ease, filter .35s ease;
    image-rendering: -webkit-optimize-contrast;
}

@media (hover:hover){
    #benefitsImagesSwiper .swiper-slide:hover img{
        transform: scale(1.02);
    }
}

/* Modal visible */
#shotsModal.is-open { display: block; }

/* Botones Swiper dentro del modal (visibles sobre fondo oscuro) */
#shotsModal .swiper-button-prev,
#shotsModal .swiper-button-next {
    color: rgba(255,255,255,.9);
}

#shotsModal .swiper-pagination-bullet {
    background: rgba(255,255,255,.45);
    opacity: 1;
}
#shotsModal .swiper-pagination-bullet-active {
    background: rgba(99,102,241,.95); /* brand-ish */
}

/* Imagen en modal: que NO se recorte */
#shotsModal img {
    width: 100%;
    height: min(78vh, 720px);
    object-fit: contain;
    background: rgba(255,255,255,.04);
}