/* =========================================================
   ContaPagos - Home 2026 (variante AZUL, colores de marca)
   Mismo diseno/estructura que home-2026.css, pero con la
   paleta original de ContaPagos: azul rgb(0,50,185) a
   rgba(47,99,228,1) + acento coral #ff214f + verde para
   los checks (igual que ya usabas en tus botones).
   Es un archivo de PRUEBA para comparar contra la version
   indigo/violeta (home-2026.css) sin tocarla.
   ========================================================= */

:root {
    --ink: #0b1120;
    --ink-soft: #1e293b;
    --surface: #ffffff;
    --surface-alt: #f6f7fb;
    --border: #e2e8f0;
    --text: #0f172a;
    --text-muted: #64748b;

    /* Azul de marca (antes: indigo #4f46e5) */
    --primary: #0032b9;
    --primary-dark: #001f73;
    /* Acento coral de marca, mismo que ya usabas en navbar-brand (antes: violeta #8b5cf6) */
    --violet: #ff214f;
    /* Azul claro del degradado original, para el segundo tono (antes: cyan #22d3ee) */
    --cyan: #2f63e4;
    --accent: #10b981;
    --accent-dark: #059669;
    --amber: #f59e0b;
    --whatsapp: #25d366;

    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 10px;
    --shadow-md: 0 10px 30px rgba(15, 23, 42, .08);
    --shadow-lg: 0 20px 60px rgba(15, 23, 42, .16);
    --container: 1180px;
}

* {
    box-sizing: border-box;
}

body.home-2026 {
    margin: 0;
    /* Fondo azul de marca en TODA la pagina, igual que en el sitio original
       (rgb(0,50,185) a rgba(47,99,228,1)); las tarjetas quedan blancas
       "flotando" encima, tal como ya lo tenias con .services-item bg-light */
    background: linear-gradient(90deg, rgba(0, 50, 185, 1) 0%, rgba(41, 90, 194, 1) 50%, rgba(47, 99, 228, 1) 100%);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.home-2026 h1,
.home-2026 h2,
.home-2026 h3,
.home-2026 h4 {
    font-family: 'Sora', 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.home-2026 a {
    text-decoration: none;
}

.home-2026 img {
    max-width: 100%;
}

.wrap {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .4rem .9rem;
    border-radius: 999px;
}

/* ---------- Botones ---------- */

.btn-2026 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.6rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .95rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    white-space: nowrap;
}

.btn-2026:hover {
    transform: translateY(-2px);
}

.btn-gradient {
    background: linear-gradient(135deg, var(--primary), var(--cyan));
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 50, 185, .35);
}

.btn-gradient:hover {
    box-shadow: 0 16px 32px rgba(0, 50, 185, .45);
    color: #fff;
}

.btn-ghost-light {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
    backdrop-filter: blur(6px);
}

.btn-ghost-light:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.btn-outline-2026 {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-2026:hover {
    background: var(--primary);
    color: #fff;
}

.btn-whatsapp {
    background: var(--whatsapp);
    color: #fff;
}

.btn-whatsapp:hover {
    background: #1ebe5b;
    color: #fff;
}

.btn-green {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
    box-shadow: 0 10px 24px rgba(16, 185, 129, .35);
}

.btn-green:hover {
    box-shadow: 0 16px 32px rgba(16, 185, 129, .45);
    color: #fff;
}

.btn-sm-2026 {
    padding: .55rem 1.1rem;
    font-size: .82rem;
}

/* ---------- Navbar ---------- */

.nav-2026 {
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Barra oscura y solida (no translucida) para que no se vea desvaida
       sobre el fondo azul; da mas contraste con el logo y los enlaces */
    background: rgba(8, 15, 42, .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.nav-2026 .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    color: #ffffff;
}

.nav-brand .brand-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: inline-block;
}

/* Logo en imagen: se controla por altura (no por width fijo en el <img>)
   para que escale de forma responsiva en cualquier tamano de pantalla */
.logo-navbrand {
    display: block;
    height: 42px;
    width: auto;
    max-width: 100%;
}

.logo-navbrand-footer {
    height: 46px;
}

@media (max-width: 480px) {
    .logo-navbrand {
        height: 34px;
    }

    .logo-navbrand-footer {
        height: 38px;
    }
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links a:not(.btn-2026) {
    color: #dbe4ff;
    font-weight: 600;
    font-size: .92rem;
}

.nav-links a:not(.btn-2026):hover {
    color: #ffffff;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.nav-toggle {
    display: none;
    background: none;
    border: 0;
    font-size: 1.6rem;
    color: #ffffff;
    cursor: pointer;
}

@media (max-width: 992px) {
    .nav-links {
        position: fixed;
        top: 76px;
        left: 0;
        right: 0;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
        border-bottom: 1px solid var(--border);
    }

    .nav-links.abierto {
        max-height: 480px;
    }

    .nav-links li {
        border-top: 1px solid var(--border);
    }

    .nav-links a:not(.btn-2026) {
        display: block;
        padding: 1rem 24px;
        color: var(--text);
    }

    .nav-links a:not(.btn-2026):hover {
        color: var(--primary);
    }

    .nav-actions .btn-2026:not(.nav-demo-desktop) {
        display: none;
    }

    .nav-toggle {
        display: block;
    }
}

@media (min-width: 993px) {
    .nav-demo-mobile,
    .nav-login-mobile {
        display: none;
    }

    /* El grupo de enlaces + botones queda centrado como bloque en la barra,
       con el logo fijo a la izquierda (opcion elegida por el cliente) */
    .nav-2026 .wrap {
        justify-content: center;
        gap: 2.5rem;
        position: relative;
    }

    .nav-2026 .nav-brand {
        position: absolute;
        left: 24px;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* ---------- Hero ---------- */

.hero-2026 {
    position: relative;
    /* Azul mas fuerte/oscuro que el resto del body, para que el hero
       destaque con mayor contraste sobre el fondo azul general */
    background: linear-gradient(135deg, #001f73 0%, #0032b9 55%, #142f8f 100%);
    overflow: hidden;
    padding: 50px 0 0px;
}

.hero-mesh {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero-mesh span {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .45;
}

.hero-mesh span:nth-child(1) {
    width: 480px;
    height: 480px;
    background: #ffffff;
    top: -220px;
    left: -100px;
    opacity: .18;
}

.hero-mesh span:nth-child(2) {
    width: 420px;
    height: 420px;
    background: var(--violet);
    top: -60px;
    right: -120px;
    opacity: .35;
}

.hero-mesh span:nth-child(3) {
    width: 380px;
    height: 380px;
    background: #001f73;
    bottom: -220px;
    left: 30%;
    opacity: .35;
}

.hero-2026 .wrap {
    position: relative;
    z-index: 1;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 3rem;
    align-items: center;
}

.hero-content {
    text-align: left;
}

.hero-eyebrow {
    background: rgba(255, 255, 255, .15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .3);
}

.hero-2026 h1 {
    color: #fff;
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
    line-height: 1.12;
    margin: 1.25rem 0 1.1rem;
}

.hero-2026 h1 .grad-text {
    /* Palabra destacada: blanco a coral claro, para que resalte sobre el azul */
    background: linear-gradient(135deg, #ffffff, #ffc2cf);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-2026 p.lead-2026 {
    color: #e3e9ff;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1rem;
    margin-bottom: 2.75rem;
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .6rem;
}

.hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #ffffff;
    font-size: .8rem;
    font-weight: 600;
    padding: .5rem 1rem;
    border-radius: 999px;
}

.hero-trust i {
    color: #ffffff;
}

/* ---------- Carrusel de capturas/imagenes del hero ---------- */
/* Se mueve solo: avanza automaticamente cada 5s (ver home-2026.js),
   ademas de los puntos para navegar manualmente. */

.hero-media {
    position: relative;
}

.hero-carousel-img {
    position: relative;
    display: grid;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: var(--shadow-lg);
}

.hero-slide-img {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    padding: 2rem;
    text-align: center;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .6s ease;
}

.hero-slide-img.activo {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.hero-slide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--radius-lg) - 4px);
}

.hero-slide-img i {
    font-size: 2.75rem;
    opacity: .85;
}

.hero-slide-img span {
    font-size: .85rem;
    color: #e3e9ff;
    max-width: 260px;
}

.hero-carousel-dots {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.hero-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
}

.hero-dot:hover {
    background: rgba(255, 255, 255, .6);
}

.hero-dot.activo {
    background: #ffffff;
    transform: scale(1.3);
}

.hero-media .hero-carousel-dots {
    justify-content: center;
    margin: 1rem 0 0;
}

@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content {
        text-align: center;
    }

    .hero-cta-row,
    .hero-trust {
        justify-content: center;
    }

    .hero-media {
        max-width: 420px;
        margin: 0 auto;
    }
}

/* ---------- Hero: franja de precios (segunda mitad del hero, vistazo
   rapido de los paquetes por RFC - el detalle completo con carrito
   esta en preciosUsuarios-azul.php) ---------- */

.hero-pricing-strip {
    position: relative;
    z-index: 1;
    text-align: center;
}

/* Si la franja de precios va DESPUES del contenido principal del hero
   (hero-grid), la separamos con un margen/linea arriba. */
.hero-pricing-strip:not(:first-child) {
    margin-top: 72px;
    padding-top: 48px;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

/* Si va ANTES (primer elemento dentro de .hero-2026), la separamos del
   contenido que viene despues con un margen/linea abajo, en vez de dejar
   un hueco enorme arriba (el padding del propio header ya da espacio). */
.hero-pricing-strip:first-child {
    margin-bottom: 72px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

/* ---------- Franja de logos de los modulos del ecosistema ---------- */

.hero-modulos-strip {
    text-align: center;
    margin-bottom: 3rem;
}

.hero-modulos-label {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .65);
    margin-bottom: 1.25rem;
}

.hero-modulos-logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.hero-modulo-logo-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 120px;
    height: 92px;
    background: rgba(255, 255, 255, .95);
    border-radius: var(--radius-md);
    padding: 1rem 1.5rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    transition: transform .2s ease;
}

.hero-modulo-logo-chip:hover {
    transform: translateY(-3px);
}

.hero-modulo-logo-chip img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {
    .hero-modulo-logo-chip {
        min-width: 42%;
        height: 76px;
        padding: .85rem 1.1rem;
    }
}

@media (max-width: 576px) {
    .hero-modulo-logo-chip {
        min-width: 100%;
        height: 64px;
        padding: .6rem .9rem;
    }
}

/* Dos columnas: texto/CTA a la izquierda, planes + detalles a la derecha */
.hero-pricing-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 2.5rem;
    align-items: center;
    text-align: left;
}

.hero-pricing-content {
    text-align: left;
}

.hero-pricing-content .eyebrow {
    margin-bottom: 1rem;
}

.hero-pricing-content h2 {
    color: #fff;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    margin: 0 0 1rem;
}

.hero-pricing-content p {
    color: #e3e9ff;
    font-size: .95rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}

/* Columna derecha: los planes apilados en vertical + la tarjeta de detalles */
.hero-pricing-side {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.hero-pricing-cards {
    display: flex;
    flex-direction: row;
    gap: .9rem;
}

.hero-price-card {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    text-align: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.1rem 1.5rem;
    backdrop-filter: blur(6px);
    transition: transform .25s ease, background .25s ease;
}

.hero-price-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .1);
}

.hero-price-card.recomendado {
    background: rgba(255, 255, 255, .12);
    border-color: var(--amber);
}

.hero-price-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--amber);
    color: #1e1b4b;
    font-size: .68rem;
    font-weight: 800;
    padding: .25rem .7rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}

.hero-price-card h3 {
    color: #fff;
    font-size: 1rem;
    margin: 0 0 .6rem;
}

.hero-price-amount {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    color: #fff;
}

.hero-price-amount span {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: .72rem;
    color: rgba(255, 255, 255, .75);
    margin-left: .25rem;
}

.hero-price-sub {
    margin-top: .5rem;
    font-size: .8rem;
    color: rgba(255, 255, 255, .8);
}

.hero-price-features {
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .15);
    display: flex;
    flex-direction: column;
    gap: .55rem;
    text-align: left;
}

.hero-price-features li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .78rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .85);
}

.hero-price-features li i {
    color: var(--accent);
    margin-top: .15rem;
    flex-shrink: 0;
    font-size: .7rem;
}

.hero-price-btn {
    width: 100%;
    margin-top: 1.25rem;
    border: 0;
    border-radius: 999px;
    padding: .75rem 1rem;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: #fff;
    color: var(--primary);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
    transition: transform .2s ease, box-shadow .2s ease;
}

.hero-price-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .24);
}

.hero-price-btn:disabled {
    background: var(--accent);
    color: #fff;
    cursor: default;
    box-shadow: none;
}

/* Selector +/- que aparece en la tarjeta del paquete ya agregado al carrito,
   para sumar usuarios adicionales sin salir de la pagina. Mientras ese
   paquete no este en el carrito permanece oculto (ver inicializarBotonesPaqueteRFC). */
.hero-price-stepper {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
}

.hero-price-stepper-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--accent);
}

.hero-price-stepper-control {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    padding: .35rem .5rem;
}

.hero-price-stepper-control .stepper-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: var(--primary);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, box-shadow .15s ease;
}

.hero-price-stepper-control .stepper-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
}

.hero-price-stepper-control .stepper-cantidad {
    min-width: 1.5rem;
    text-align: center;
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
}

.hero-price-stepper-hint {
    font-size: .68rem;
    color: rgba(255, 255, 255, .65);
    text-align: center;
}

/* Nota de "usuario extra" propia de cada tarjeta (antes vivia junta con las
   de los otros 2 paquetes en .notas-paquetes-card). */
.hero-price-adicional {
    margin: 1rem 0 0;
    padding-top: .85rem;
    border-top: 1px dashed rgba(255, 255, 255, .18);
    font-size: .74rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .72);
    text-align: left;
}

.hero-price-adicional i {
    color: var(--amber);
    margin-right: .3rem;
}

.hero-price-adicional strong {
    color: #fff;
}

/* Nota de renovacion de folios, tambien propia de cada tarjeta (antes vivia
   junta en la tarjeta compartida .notas-paquetes-card, ya retirada). */
.hero-price-nota {
    margin: .5rem 0 0;
    font-size: .72rem;
    font-style: italic;
    line-height: 1.4;
    color: rgba(255, 255, 255, .6);
    text-align: left;
}

.hero-price-nota i {
    color: var(--amber);
    margin-right: .3rem;
}

/* ---------- Notificacion flotante (agregar al carrito desde el home) ---------- */

.notification {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: .65rem;
    background: #fff;
    border-radius: var(--radius-sm);
    padding: .9rem 1.25rem;
    box-shadow: var(--shadow-lg);
    font-size: .88rem;
    font-weight: 600;
    color: var(--text);
    border-left: 4px solid var(--accent);
    animation: notifSlideIn .3s ease;
    max-width: calc(100vw - 48px);
}

.notification.success {
    border-left-color: var(--accent);
}

.notification.success i {
    color: var(--accent);
}

.notification.error {
    border-left-color: #ef4444;
}

.notification.error i {
    color: #ef4444;
}

.notification.warning {
    border-left-color: var(--amber);
}

.notification.warning i {
    color: var(--amber);
}

.notification.info {
    border-left-color: var(--cyan);
}

.notification.info i {
    color: var(--cyan);
}

@keyframes notifSlideIn {
    from {
        transform: translateX(30px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@media (max-width: 576px) {
    .notification {
        top: 16px;
        right: 16px;
        left: 16px;
        max-width: none;
    }
}

/* ---------- Icono flotante del carrito (mismo patron que precios-2026.css) ---------- */

.cart-icon-container {
    position: fixed;
    top: 96px;
    right: 24px;
    z-index: 1040;
    cursor: pointer;
}

.cart-icon {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--violet));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: var(--shadow-lg);
    transition: transform .2s ease;
}

.cart-icon:hover {
    transform: translateY(-2px);
}

#contador {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--amber);
    color: #1e1b4b;
    font-size: .72rem;
    font-weight: 800;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

@media (max-width: 576px) {
    .cart-icon-container {
        top: 84px;
        right: 16px;
    }

    .cart-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}

/* ---------- Overlay + sidebar del carrito ---------- */

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 17, 32, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 1200;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

.cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 420px;
    max-width: 92vw;
    background: #fff;
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform .35s ease;
    z-index: 1300;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
}

.cart-sidebar.active {
    transform: translateX(0);
}

.cart-header {
    background: linear-gradient(135deg, var(--primary), var(--violet));
    color: #fff;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.cart-header h3 {
    margin: 0;
    font-size: 1.05rem;
    color: #fff;
    font-family: 'Sora', sans-serif;
    display: flex;
    align-items: center;
    gap: .55rem;
}

.close-cart {
    background: rgba(255, 255, 255, .18);
    border: 0;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.close-cart:hover {
    background: rgba(255, 255, 255, .3);
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.empty-cart-message {
    text-align: center;
    color: var(--text-muted);
    padding: 3rem 1rem;
}

.empty-cart-message i {
    font-size: 2.5rem;
    color: var(--border);
    margin-bottom: 1rem;
    display: block;
}

.empty-cart-message p {
    margin: 0 0 .3rem;
}

.cart-item {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: .85rem;
}

.cart-item.extra {
    border-left-color: var(--cyan);
}

.cart-item.folio {
    border-left-color: var(--amber);
}

.cart-item h5 {
    margin: 0 0 .6rem;
    font-size: .92rem;
    color: var(--ink);
}

.cart-item-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    font-size: .82rem;
    color: var(--text-muted);
}

.cart-item-subtotal {
    font-weight: 800;
    color: var(--ink);
}

.remove-item {
    background: none;
    border: 0;
    color: #ef4444;
    cursor: pointer;
    font-size: .9rem;
    padding: .3rem;
    flex-shrink: 0;
}

.remove-item:hover {
    color: #b91c1c;
}

.cart-footer {
    border-top: 1px solid var(--border);
    padding: 1.5rem;
    flex-shrink: 0;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: 800;
    font-size: 1.2rem;
    margin-bottom: 1.1rem;
    color: var(--ink);
    font-family: 'Sora', sans-serif;
}

.cart-actions {
    display: flex;
    gap: .75rem;
}

.btn2 {
    flex: 1;
    padding: .8rem 1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: transform .2s ease, box-shadow .2s ease;
}

.btn2:hover {
    transform: translateY(-2px);
}

.btn2.btn-secondary {
    background: var(--surface-alt);
    color: var(--text);
    border-color: var(--border);
}

.btn2.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--cyan));
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 50, 185, .3);
}

.hero-pricing-cta {
    margin-top: 1.5rem;
    text-align: left;
}

/* Entre 900px y 1100px (tablets en horizontal) el grid de 2 columnas ya
   cabe bien, pero 3 tarjetas en fila dentro de la columna derecha quedan
   muy apretadas: las apilamos en vertical antes de colapsar todo. */
@media (max-width: 1100px) {
    .hero-pricing-cards {
        flex-direction: column;
    }
}

@media (max-width: 900px) {
    .hero-pricing-grid {
        grid-template-columns: 1fr;
        gap: 2.75rem;
    }

    .hero-pricing-content {
        text-align: center;
    }

    .hero-pricing-cta {
        text-align: center;
    }

    .hero-pricing-cta.hero-trust {
        justify-content: center;
    }

    .hero-pricing-cards {
        flex-direction: column;
    }

    .hero-pricing-side {
        max-width: 480px;
        margin: 0 auto;
    }
}

/* ---------- Detalles de los paquetes (tarjeta de notas debajo de los
   planes - mismo patron que en precios-2026.css). Los selectores van
   encadenados con .notas-paquetes-card a proposito: esta tarjeta vive
   dentro de .hero-2026, que trae text-align:center y reglas propias
   para sus "p" (color claro, max-width, margin:auto); encadenar el
   selector le da mas especificidad para que no se descuadre. ---------- */

.notas-paquetes-card {
    text-align: left;
    background: rgba(255, 255, 255, .95);
    border: 1px solid rgba(255, 255, 255, .18);
    border-left: 4px solid var(--amber);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.6rem;
    box-shadow: var(--shadow-md);
}

.notas-paquetes-card h4 {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1.1rem;
    font-family: 'Sora', sans-serif;
    font-size: .95rem;
    color: var(--ink);
    text-align: left;
}

.notas-paquetes-card h4 i {
    color: var(--primary);
}

.notas-paquetes-card .notas-paquetes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    text-align: left;
}

.notas-paquetes-card .notas-paquetes li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .88rem;
    color: var(--text-muted);
    line-height: 1.5;
    text-align: left;
}

.notas-paquetes-card .notas-paquetes li i {
    color: var(--accent);
    margin-top: .2rem;
    flex-shrink: 0;
    font-size: .8rem;
}

.notas-paquetes-card .notas-paquetes li span {
    text-align: left;
}

.notas-paquetes-card .notas-paquetes li strong {
    color: var(--ink);
}

.notas-paquetes-card .nota-italica {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 1rem 0 0;
    padding-top: .9rem;
    border-top: 1px dashed var(--border);
    font-style: italic;
    font-size: .82rem;
    color: var(--text-muted);
    text-align: left;
    max-width: none;
}

.notas-paquetes-card .nota-italica i {
    color: var(--amber);
    margin-top: .15rem;
    flex-shrink: 0;
}

/* Cuando la nota es el unico contenido de la tarjeta (ya no hay lista de
   adicionales arriba, ahora cada uno vive en su propia tarjeta de precio)
   se quita la linea/espaciado que la separaba de esa lista. */
.notas-paquetes-card .nota-italica:only-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

@media (max-width: 768px) {
    .hero-pricing-strip:not(:first-child) {
        margin-top: 56px;
        padding-top: 36px;
    }

    .hero-pricing-strip:first-child {
        margin-bottom: 56px;
        padding-bottom: 36px;
    }
}

/* ---------- Secciones generales ---------- */

.seccion {
    padding: 96px 0;
}

.seccion-alt {
    /* transparente: ya no alterna blanco/azul, todo el fondo es el azul del body */
    background: transparent;
}

.seccion-head {
    max-width: 640px;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.seccion-head .eyebrow {
    /* Todas las secciones quedan sobre el fondo azul: mismo tratamiento que el eyebrow del hero */
    background: rgba(255, 255, 255, .15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .3);
    margin-bottom: 1rem;
}

.seccion-head h2 {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    margin: 0 0 .75rem;
    color: #ffffff;
}

.seccion-head p {
    color: #e3e9ff;
    font-size: 1.05rem;
    margin: 0;
}

/* ---------- Bento grid: Por que ContaPagos ---------- */

.bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;
}

.bento-card {
    grid-column: span 3;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    transition: transform .25s ease, box-shadow .25s ease;
}

.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.bento-card.grande {
    grid-column: span 4;
}

.bento-card.chico {
    grid-column: span 2;
}

.bento-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--cyan));
    margin-bottom: 1.25rem;
}

.bento-card h3 {
    font-size: 1.15rem;
    margin: 0 0 .5rem;
}

.bento-card p {
    color: var(--text-muted);
    font-size: .93rem;
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 900px) {
    .bento-card,
    .bento-card.grande,
    .bento-card.chico {
        grid-column: span 6;
    }
}

/* ---------- Por que ContaPagos: 3 grupos de beneficios + CTA ---------- */

.porque-grupos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

.porque-grupo {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    transition: transform .25s ease, box-shadow .25s ease;
}

.porque-grupo:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.porque-grupo-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 1.25rem;
}

.porque-grupo-icon-a { background: linear-gradient(135deg, var(--primary), var(--cyan)); }
.porque-grupo-icon-b { background: linear-gradient(135deg, var(--violet), var(--primary)); }
.porque-grupo-icon-c { background: linear-gradient(135deg, var(--amber), var(--accent)); }

.porque-grupo h3 {
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--ink);
    margin: 0 0 1.4rem;
}

.porque-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.porque-lista li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .87rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.porque-lista li i {
    color: var(--accent);
    margin-top: .2rem;
    flex-shrink: 0;
    font-size: .8rem;
}

.porque-lista li strong {
    color: var(--ink);
}

@media (max-width: 900px) {
    .porque-grupos {
        grid-template-columns: 1fr;
    }
}

.porque-cta {
    margin-top: 3rem;
    text-align: center;
    background: linear-gradient(135deg, var(--primary), var(--cyan));
    border-radius: var(--radius-lg);
    padding: 3rem 2rem;
    box-shadow: var(--shadow-lg);
}

.porque-cta h3 {
    font-family: 'Sora', sans-serif;
    color: #fff;
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
    margin: 0 0 .75rem;
}

.porque-cta p {
    color: rgba(255, 255, 255, .9);
    font-size: 1rem;
    margin: 0 0 1.75rem;
}

.porque-cta-btn {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
}

.porque-cta-btn:hover {
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}

@media (max-width: 576px) {
    .porque-cta {
        padding: 2.25rem 1.5rem;
    }
}

/* ---------- Modulos ---------- */

.modulos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .modulos-grid {
        grid-template-columns: 1fr;
    }
}

.modulo-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.25rem;
    box-shadow: var(--shadow-md);
}

.modulo-card .modulo-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.modulo-card .modulo-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #fff;
    flex-shrink: 0;
}

.modulo-icon.bg-a { background: linear-gradient(135deg, var(--primary), var(--cyan)); }
.modulo-icon.bg-b { background: linear-gradient(135deg, var(--violet), var(--primary)); }
.modulo-icon.bg-c { background: linear-gradient(135deg, var(--accent), var(--cyan)); }
.modulo-icon.bg-d { background: linear-gradient(135deg, var(--amber), var(--violet)); }

.modulo-card .modulo-logo {
    /* Mismo tamano de caja para los 4 logos, sin importar las dimensiones
       originales de cada imagen (object-fit evita que se deformen) */
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 12px;
    flex-shrink: 0;
}

.modulo-card h3 {
    font-size: 1.3rem;
    margin: 0;
}

.modulo-beneficios {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.modulo-beneficios li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .92rem;
    color: var(--text);
    margin-bottom: .6rem;
}

.modulo-beneficios li i {
    color: var(--accent);
    margin-top: .18rem;
}

.modulo-detalle {
    border-top: 1px dashed var(--border);
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    display: none;
    font-size: .92rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.modulo-detalle.abierto {
    display: block;
}

.modulo-detalle h4 {
    font-size: .95rem;
    color: var(--ink);
    margin: 1rem 0 .35rem;
}

.modulo-detalle h4:first-child {
    margin-top: 0;
}

.modulo-detalle ul {
    padding-left: 1.1rem;
    margin: .3rem 0 .8rem;
}

.ver-mas-btn {
    background: none;
    border: 0;
    color: var(--primary);
    font-weight: 700;
    font-size: .88rem;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.ver-mas-btn i {
    transition: transform .2s ease;
}

.ver-mas-btn.abierto i {
    transform: rotate(180deg);
}

/* ---------- Diferenciadores ---------- */

.dif-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

.dif-pills span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .65rem 1.2rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--text);
    box-shadow: var(--shadow-md);
}

.dif-pills i {
    color: var(--primary);
}

/* ---------- Stats ---------- */

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    text-align: center;
}

@media (max-width: 768px) {
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-item .stat-num {
    font-family: 'Sora', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    /* En fondo azul, un degradado azul-verde casi desaparece: usamos blanco a coral claro */
    background: linear-gradient(135deg, #ffffff, #ffc2cf);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.stat-item .stat-label {
    color: #e3e9ff;
    font-size: .88rem;
    margin-top: .35rem;
}

/* ---------- Confianza / testimonios ---------- */

.logos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 3rem 0;
}

@media (max-width: 768px) {
    .logos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.logo-slot {
    background: var(--surface-alt);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: .82rem;
}

.testimonios-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .testimonios-grid {
        grid-template-columns: 1fr;
    }
}

.testimonio-card-2026 {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: var(--shadow-md);
}

.testimonio-card-2026 i.bi-quote,
.testimonio-card-2026 > i.bi {
    font-size: 1.4rem;
    color: var(--primary);
}

.testimonio-card-2026 h3 {
    font-size: 1.05rem;
    color: var(--ink);
    margin: .75rem 0 0;
}

.testimonio-card-2026 h3 + p {
    margin-top: .5rem;
    margin-bottom: 0;
}

.testimonio-card-2026 p {
    color: var(--text);
    font-size: .93rem;
    line-height: 1.55;
    margin: .75rem 0 1rem;
}

.testimonio-card-2026 strong {
    font-size: .85rem;
    color: var(--ink);
}

/* ---------- Videos ---------- */

.videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .videos-grid {
        grid-template-columns: 1fr;
    }
}

.video-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.video-card iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    border: 0;
}

.video-card-body {
    padding: 1.25rem 1.5rem;
}

.video-card-body h4 {
    font-size: 1rem;
    margin: 0 0 .25rem;
}

.video-card-body p {
    color: var(--text-muted);
    font-size: .85rem;
    margin: 0 0 .85rem;
}

.video-card-socials {
    display: flex;
    gap: .5rem;
}

.video-card-socials a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface-alt);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
}

.video-card-socials a:hover {
    background: var(--primary);
    color: #fff;
}

/* ---------- CTA final ---------- */

.cta-final {
    /* Como ahora TODA la pagina es azul, aqui invertimos: un panel blanco que
       destaca al final, igual que las demas tarjetas del home */
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: 4rem 2rem;
    text-align: center;
    margin: 0 auto;
    max-width: var(--container);
    box-shadow: var(--shadow-lg);
}

.cta-final h2 {
    color: var(--ink);
    margin-bottom: .75rem;
}

.cta-final p {
    color: var(--text-muted);
    margin-bottom: 2rem;
    font-size: 1.05rem;
}

.cta-final .hero-cta-row {
    margin-bottom: 0;
}

/* ---------- Footer ---------- */

.footer-2026 {
    /* Misma barra oscura solida que el navbar, para que ambos hagan juego */
    background: rgba(8, 15, 42, .88);
    color: #eaf0ff;
    padding: 60px 0 30px;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    margin-bottom: 1.75rem;
}

.footer-brand {
    max-width: 320px;
}

.footer-brand .nav-brand {
    color: #fff;
}

.footer-brand p {
    font-size: .88rem;
    line-height: 1.6;
    margin-top: 1rem;
}

.footer-cols {
    display: flex;
    gap: 3.5rem;
    flex-wrap: wrap;
}

.footer-col h5 {
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 1rem;
}

.footer-col a {
    display: block;
    color: #d6e0ff;
    font-size: .88rem;
    margin-bottom: .6rem;
}

.footer-col a:hover {
    color: #fff;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .8rem;
}

.footer-bottom a {
    color: #d6e0ff;
}

/* =========================================================
   Widgets flotantes: WhatsApp + Asistente
   Reusan las mismas clases que ya existian; solo se retematizan.
   ========================================================= */

.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.whatsapp-float .whatsapp-bubble {
    background: #ffffff;
    color: var(--text);
    padding: .5rem .9rem;
    border-radius: 1rem;
    font-size: .85rem;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
}

.whatsapp-float .whatsapp-btn {
    background: var(--whatsapp);
    color: #fff;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: var(--shadow-lg);
    text-decoration: none;
}

.whatsapp-float .whatsapp-btn:hover {
    background: #1ebe5b;
    color: #fff;
}

@media (max-width: 576px) {
    .whatsapp-float .whatsapp-bubble {
        display: none;
    }
}

.asistente-flotante {
    position: fixed;
    bottom: 96px;
    right: 24px;
    z-index: 1049;
    font-family: 'Inter', sans-serif;
}

.asistente-boton {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, var(--primary), var(--violet));
    color: #fff;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
}

.asistente-panel {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 340px;
    max-width: calc(100vw - 32px);
    height: 460px;
    max-height: 70vh;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.asistente-header {
    background: linear-gradient(135deg, var(--primary), var(--violet));
    color: #fff;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-family: 'Sora', sans-serif;
    font-size: .95rem;
}

.asistente-header button {
    background: none;
    border: 0;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.asistente-mensajes {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.asistente-msg {
    max-width: 85%;
    padding: .55rem .8rem;
    border-radius: var(--radius-sm);
    font-size: .88rem;
    line-height: 1.4;
    white-space: pre-wrap;
}

.asistente-msg-bot {
    background: var(--surface-alt);
    color: var(--text);
    align-self: flex-start;
    border-bottom-left-radius: 0;
}

.asistente-msg-user {
    background: var(--primary);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 0;
}

.asistente-escribiendo {
    padding: 0 1rem .5rem;
    font-size: .78rem;
    color: var(--text-muted);
    font-style: italic;
}

.asistente-form {
    display: flex;
    border-top: 1px solid var(--border);
}

.asistente-form input {
    flex: 1;
    border: 0;
    padding: .75rem 1rem;
    font-size: .88rem;
    outline: none;
    font-family: 'Inter', sans-serif;
}

.asistente-form button {
    border: 0;
    background: var(--primary);
    color: #fff;
    width: 50px;
    cursor: pointer;
}

.asistente-form button:hover {
    background: var(--primary-dark);
}

.asistente-footer {
    display: flex;
    justify-content: space-around;
    padding: .5rem;
    border-top: 1px solid var(--border);
    background: var(--surface-alt);
}

.asistente-footer a {
    font-size: .76rem;
    color: var(--primary);
    font-weight: 700;
}

.asistente-footer a:hover {
    text-decoration: underline;
}

@media (max-width: 576px) {
    .asistente-flotante {
        right: 16px;
        bottom: 88px;
    }

    .asistente-panel {
        width: calc(100vw - 32px);
    }
}