/* Existing styles isolated to the original quotation component. */
/* ============================================== */
/* VARIABLES DE COLOR Y CONFIGURACION */
/* ============================================== */
.bw-wizard-skin {
    --primary-color: #ff4b5c;
    --primary-hover: #e03c4b;
    --primary-light: #ff6b7a;
    --primary-blue: #2979ff;
    --primary-blue-hover: #1565c0;
    --violet: #7c5cff;

    /* Fondos oscuros (hero, CTA, footer) */
    --navy-900: #0b1120;
    --navy-800: #0f172a;
    --navy-700: #1e293b;

    /* Texto */
    --dark-color: #0f172a;
    --gray-600: #475569;
    --gray-500: #64748b;
    --gray-400: #94a3b8;

    /* Superficies claras */
    --light-color: #ffffff;
    --background-color: #f4f7fb;
    --background-soft: #eef2f9;
    --border-color: #e2e8f0;

    --success-color: #10b981;
    --warning-color: #f59e0b;
    --radius: 12px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.06);
    --shadow: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.08);
    --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.10), 0 4px 6px -4px rgb(15 23 42 / 0.08);
    --shadow-xl: 0 20px 25px -5px rgb(15 23 42 / 0.12), 0 8px 10px -6px rgb(15 23 42 / 0.08);
    --transition: all 0.3s ease;
}

/* ============================================== */
/* ESTILOS GENERALES */
/* ============================================== */
:where(.bw-wizard-skin) * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:where(.bw-wizard-skin) html {
    scroll-behavior: smooth;
}

:where(.bw-wizard-skin) body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--dark-color);
    background-color: var(--light-color);
    line-height: 1.6;
    overflow-x: hidden;
}

:where(.bw-wizard-skin) img {
    max-width: 100%;
}

:where(.bw-wizard-skin) .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

:where(.bw-wizard-skin) h1 {
    font-size: clamp(36px, 5vw, 58px);
    font-weight: 700;
    line-height: 1.12;
    margin: 10px 0;
}

:where(.bw-wizard-skin) h2 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
}

:where(.bw-wizard-skin) h3 {
    font-size: 22px;
    font-weight: 600;
}

:where(.bw-wizard-skin) .highlight {
    background: linear-gradient(120deg, var(--primary-color) 0%, var(--violet) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================== */
/* ANIMACION SCROLL-REVEAL */
/* ============================================== */
:where(.bw-wizard-skin) .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

:where(.bw-wizard-skin) .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

:where(.bw-wizard-skin) .reveal-delay-1 { transition-delay: 0.1s; }
:where(.bw-wizard-skin) .reveal-delay-2 { transition-delay: 0.2s; }
:where(.bw-wizard-skin) .reveal-delay-3 { transition-delay: 0.3s; }
:where(.bw-wizard-skin) .reveal-delay-4 { transition-delay: 0.4s; }
:where(.bw-wizard-skin) .reveal-delay-5 { transition-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
    :where(.bw-wizard-skin) html { scroll-behavior: auto; }
    :where(.bw-wizard-skin) .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    :where(.bw-wizard-skin) * { animation: none !important; }
}

/* ============================================== */
/* ESTILOS DEL ENCABEZADO (HEADER) */
/* ============================================== */
:where(.bw-wizard-skin) header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 14px 0;
    border-bottom: 1px solid transparent;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

:where(.bw-wizard-skin) header.scrolled {
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
}

:where(.bw-wizard-skin) header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

:where(.bw-wizard-skin) .logo a {
    display: flex;
    align-items: center;
}

:where(.bw-wizard-skin) .logo img {
    max-height: 36px;
    width: auto;
}

:where(.bw-wizard-skin) nav ul {
    list-style: none;
    display: flex;
    gap: 28px;
    align-items: center;
}

:where(.bw-wizard-skin) nav a {
    text-decoration: none;
    color: var(--dark-color);
    font-weight: 500;
    font-size: 15px;
    transition: var(--transition);
    position: relative;
}

:where(.bw-wizard-skin) nav a:not(.contact-button):not(.edunex-link):not(.medicare-link):not(.plataformas-link)::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--violet));
    transition: width 0.3s ease;
}

:where(.bw-wizard-skin) nav a:not(.contact-button):not(.edunex-link):not(.medicare-link):not(.plataformas-link):hover::after {
    width: 100%;
}

:where(.bw-wizard-skin) nav a:hover {
    color: var(--primary-color);
}

:where(.bw-wizard-skin) .contact-button {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: var(--light-color) !important;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(255, 75, 92, 0.4);
    transition: var(--transition);
}

:where(.bw-wizard-skin) .contact-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 75, 92, 0.5);
}

/* Edunex Link */
:where(.bw-wizard-skin) .edunex-link {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

:where(.bw-wizard-skin) .edunex-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

:where(.bw-wizard-skin) .edunex-link::before {
    content: '🎓';
    font-size: 14px;
}

/* Mobile Menu Button */
:where(.bw-wizard-skin) .mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

:where(.bw-wizard-skin) .mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--dark-color);
    transition: var(--transition);
}

:where(.bw-wizard-skin) .mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

:where(.bw-wizard-skin) .mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

:where(.bw-wizard-skin) .mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ============================================== */
/* SECCION HERO - OSCURA Y MODERNA */
/* ============================================== */
:where(.bw-wizard-skin) .hero {
    background:
        radial-gradient(ellipse 55% 60% at 82% 18%, rgba(41, 121, 255, 0.28) 0%, transparent 60%),
        radial-gradient(ellipse 45% 55% at 12% 85%, rgba(255, 75, 92, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 65% 90%, rgba(124, 92, 255, 0.18) 0%, transparent 60%),
        linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 55%, #14203a 100%);
    min-height: 88vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 80px 0;
    color: var(--light-color);
}

/* Malla de puntos decorativa */
:where(.bw-wizard-skin) .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black 30%, transparent 75%);
    z-index: 1;
}

/* Texto "Bweb" gigante decorativo */
:where(.bw-wizard-skin) .hero::after {
    content: 'Bweb';
    position: absolute;
    bottom: -4%;
    right: 2%;
    font-size: clamp(5em, 14vw, 13em);
    font-weight: 800;
    color: rgba(255, 255, 255, 0.04);
    z-index: 1;
    user-select: none;
    pointer-events: none;
    line-height: 1;
}

:where(.bw-wizard-skin) .hero .container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 40px;
}

:where(.bw-wizard-skin) .hero-text {
    max-width: 60%;
}

:where(.bw-wizard-skin) .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #dbe7ff;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 20px;
    backdrop-filter: blur(6px);
}

:where(.bw-wizard-skin) .hero-badge .pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success-color);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
    70% { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

:where(.bw-wizard-skin) .subtitle {
    font-size: 15px;
    font-weight: 600;
    color: #7fa8ff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

:where(.bw-wizard-skin) .hero h1 {
    color: #ffffff;
}

:where(.bw-wizard-skin) .tagline {
    font-size: clamp(18px, 3vw, 26px);
    color: #b9c6dd;
    margin-bottom: 34px;
}

:where(.bw-wizard-skin) .hero-cta {
    display: flex;
    gap: 16px;
    margin-bottom: 52px;
    flex-wrap: wrap;
}

:where(.bw-wizard-skin) .cta-button {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: var(--light-color);
    padding: 16px 32px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    box-shadow: 0 4px 18px rgba(255, 75, 92, 0.45);
    border: none;
    cursor: pointer;
}

:where(.bw-wizard-skin) .cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(255, 75, 92, 0.55);
}

:where(.bw-wizard-skin) .cta-button.whatsapp {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
}

:where(.bw-wizard-skin) .cta-button.whatsapp:hover {
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5);
}

/* Outline claro: para usar sobre fondos OSCUROS (hero, CTA) */
:where(.bw-wizard-skin) .cta-button-outline {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    padding: 16px 32px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    border: 2px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(4px);
}

:where(.bw-wizard-skin) .cta-button-outline:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
}

:where(.bw-wizard-skin) .hero-stats {
    display: flex;
    gap: 20px;
}

:where(.bw-wizard-skin) .hero-stats .stat {
    text-align: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 16px 26px;
    backdrop-filter: blur(6px);
    transition: var(--transition);
}

:where(.bw-wizard-skin) .hero-stats .stat:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.3);
}

:where(.bw-wizard-skin) .hero-stats .stat strong {
    display: block;
    font-size: 30px;
    font-weight: 700;
    background: linear-gradient(120deg, #ffffff 30%, #9db9ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

:where(.bw-wizard-skin) .hero-stats .stat span {
    font-size: 13px;
    color: #a9b8d4;
}

/* Tarjeta visual flotante del hero */
:where(.bw-wizard-skin) .hero-visual {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 340px;
    animation: float 5s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-18px); }
}

:where(.bw-wizard-skin) .hero-card {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 22px;
    padding: 26px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

:where(.bw-wizard-skin) .hero-card-dots {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
}

:where(.bw-wizard-skin) .hero-card-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

:where(.bw-wizard-skin) .hero-card-dots span:nth-child(1) { background: #ff5f57; }
:where(.bw-wizard-skin) .hero-card-dots span:nth-child(2) { background: #febc2e; }
:where(.bw-wizard-skin) .hero-card-dots span:nth-child(3) { background: #28c840; }

:where(.bw-wizard-skin) .hero-card-line {
    height: 10px;
    border-radius: 6px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.14);
}

:where(.bw-wizard-skin) .hero-card-line.w-75 { width: 75%; }
:where(.bw-wizard-skin) .hero-card-line.w-50 { width: 50%; }
:where(.bw-wizard-skin) .hero-card-line.accent {
    background: linear-gradient(90deg, var(--primary-color), var(--violet));
    width: 62%;
}

:where(.bw-wizard-skin) .hero-card-chips {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    flex-wrap: wrap;
}

:where(.bw-wizard-skin) .hero-card-chips span {
    font-size: 11px;
    font-weight: 600;
    color: #cfe0ff;
    background: rgba(41, 121, 255, 0.18);
    border: 1px solid rgba(41, 121, 255, 0.35);
    padding: 5px 12px;
    border-radius: 40px;
}

/* ============================================== */
/* ESTILOS DE SECCION GENERALES */
/* ============================================== */
:where(.bw-wizard-skin) .section-title {
    text-align: center;
    margin-bottom: 60px;
}

:where(.bw-wizard-skin) .section-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(41, 121, 255, 0.12) 0%, rgba(124, 92, 255, 0.10) 100%);
    color: var(--primary-blue);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: 1px solid rgba(41, 121, 255, 0.15);
}

:where(.bw-wizard-skin) .section-title h2 {
    margin-bottom: 16px;
}

:where(.bw-wizard-skin) .section-title p {
    font-size: 18px;
    color: var(--gray-600);
    max-width: 620px;
    margin: 0 auto;
}

/* ============================================== */
/* SECCION DE SERVICIOS */
/* ============================================== */
:where(.bw-wizard-skin) .services {
    padding: 100px 0;
    background:
        radial-gradient(ellipse 40% 50% at 100% 0%, rgba(41, 121, 255, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 0% 100%, rgba(255, 75, 92, 0.05) 0%, transparent 60%),
        var(--background-color);
    position: relative;
}

:where(.bw-wizard-skin) .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

:where(.bw-wizard-skin) .service-card {
    background-color: var(--light-color);
    padding: 40px 32px;
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid var(--border-color);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

:where(.bw-wizard-skin) .service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--violet), var(--primary-blue));
    opacity: 0;
    transition: opacity 0.3s ease;
}

:where(.bw-wizard-skin) .service-card:hover::before {
    opacity: 1;
}

:where(.bw-wizard-skin) .service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

:where(.bw-wizard-skin) .service-card.featured {
    border: 2px solid var(--primary-color);
    box-shadow: 0 8px 30px rgba(255, 75, 92, 0.12);
}

:where(.bw-wizard-skin) .featured-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
}

:where(.bw-wizard-skin) .service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, rgba(255, 75, 92, 0.1) 0%, rgba(124, 92, 255, 0.08) 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    transition: var(--transition);
}

:where(.bw-wizard-skin) .service-card:hover .service-icon {
    transform: scale(1.08) rotate(-3deg);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--violet) 100%);
    color: white;
    box-shadow: 0 10px 24px rgba(255, 75, 92, 0.35);
}

:where(.bw-wizard-skin) .service-card h3 {
    margin-bottom: 12px;
}

:where(.bw-wizard-skin) .service-card p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--gray-600);
    margin-bottom: 20px;
}

:where(.bw-wizard-skin) .service-link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

:where(.bw-wizard-skin) .service-link:hover {
    color: var(--primary-hover);
    gap: 8px;
}

/* ============================================== */
/* SECCION "SOBRE NOSOTROS" */
/* ============================================== */
:where(.bw-wizard-skin) .about {
    padding: 100px 0;
    background:
        radial-gradient(ellipse 50% 55% at 12% 8%, rgba(255, 75, 92, 0.06) 0%, transparent 62%),
        radial-gradient(ellipse 50% 55% at 88% 92%, rgba(124, 92, 255, 0.07) 0%, transparent 62%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 55%, #f7faff 100%);
    position: relative;
}

:where(.bw-wizard-skin) .about-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

:where(.bw-wizard-skin) .about-card {
    background: linear-gradient(180deg, var(--light-color) 0%, #fafcff 100%);
    padding: 40px 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    text-align: center;
    transition: var(--transition);
}

:where(.bw-wizard-skin) .about-card:hover {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px rgba(41, 121, 255, 0.08), var(--shadow-lg);
    transform: translateY(-6px);
}

:where(.bw-wizard-skin) .about-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, rgba(41, 121, 255, 0.1) 0%, rgba(124, 92, 255, 0.08) 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    transition: var(--transition);
}

:where(.bw-wizard-skin) .about-card:hover .about-icon {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--violet) 100%);
    color: white;
    transform: scale(1.08);
}

:where(.bw-wizard-skin) .about-card h3 {
    margin-bottom: 12px;
}

:where(.bw-wizard-skin) .about-card p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--gray-600);
}

/* ============================================== */
/* SECCION PORTAFOLIO */
/* ============================================== */
:where(.bw-wizard-skin) .portfolio {
    padding: 100px 0;
    background:
        radial-gradient(ellipse 45% 55% at 0% 0%, rgba(124, 92, 255, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 45% 55% at 100% 100%, rgba(41, 121, 255, 0.06) 0%, transparent 60%),
        var(--background-color);
}

:where(.bw-wizard-skin) .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

:where(.bw-wizard-skin) .portfolio-card {
    background: var(--light-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

:where(.bw-wizard-skin) .portfolio-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

:where(.bw-wizard-skin) .portfolio-image {
    height: 220px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 20px;
    transition: transform 0.5s ease;
    position: relative;
    overflow: hidden;
}

:where(.bw-wizard-skin) .portfolio-card:hover .portfolio-image {
    transform: scale(1.02);
}

:where(.bw-wizard-skin) .portfolio-category {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dark-color);
    box-shadow: var(--shadow-sm);
}

:where(.bw-wizard-skin) .portfolio-content {
    padding: 24px;
}

:where(.bw-wizard-skin) .portfolio-content h3 {
    margin-bottom: 8px;
}

:where(.bw-wizard-skin) .portfolio-content p {
    color: var(--gray-600);
    font-size: 14px;
    line-height: 1.6;
}

/* ============================================== */
/* SECCION BLOG */
/* ============================================== */
:where(.bw-wizard-skin) .blog {
    padding: 100px 0;
    background:
        radial-gradient(ellipse 45% 55% at 90% 5%, rgba(41, 121, 255, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 45% 55% at 5% 95%, rgba(255, 75, 92, 0.05) 0%, transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 60%, #f6f9ff 100%);
}

:where(.bw-wizard-skin) .blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

:where(.bw-wizard-skin) .blog-card {
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}

:where(.bw-wizard-skin) .blog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: transparent;
}

:where(.bw-wizard-skin) .blog-card-image {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    position: relative;
}

:where(.bw-wizard-skin) .blog-card-image.grad-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
:where(.bw-wizard-skin) .blog-card-image.grad-2 { background: linear-gradient(135deg, #ff4b5c 0%, #ff9a44 100%); }
:where(.bw-wizard-skin) .blog-card-image.grad-3 { background: linear-gradient(135deg, #2979ff 0%, #00d4ff 100%); }

:where(.bw-wizard-skin) .blog-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

:where(.bw-wizard-skin) .blog-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--gray-500);
    margin-bottom: 12px;
}

:where(.bw-wizard-skin) .blog-card-tag {
    background: rgba(41, 121, 255, 0.1);
    color: var(--primary-blue);
    padding: 4px 12px;
    border-radius: 40px;
    font-weight: 600;
}

:where(.bw-wizard-skin) .blog-card h3 {
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 10px;
}

:where(.bw-wizard-skin) .blog-card h3 a {
    color: var(--dark-color);
    text-decoration: none;
    transition: var(--transition);
}

:where(.bw-wizard-skin) .blog-card h3 a:hover {
    color: var(--primary-color);
}

:where(.bw-wizard-skin) .blog-card p {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.7;
    flex: 1;
}

:where(.bw-wizard-skin) .blog-card .blog-read-more {
    margin-top: 16px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition);
}

:where(.bw-wizard-skin) .blog-card .blog-read-more:hover {
    gap: 8px;
}

/* Pagina interna del blog (blog.html) */
:where(.bw-wizard-skin) .blog-page-hero {
    background:
        radial-gradient(ellipse 50% 60% at 80% 20%, rgba(41, 121, 255, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 15% 90%, rgba(255, 75, 92, 0.18) 0%, transparent 60%),
        linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 100%);
    color: white;
    padding: 90px 0 70px;
    text-align: center;
}

:where(.bw-wizard-skin) .blog-page-hero h1 {
    color: white;
    font-size: clamp(30px, 4vw, 44px);
}

:where(.bw-wizard-skin) .blog-page-hero p {
    color: #b9c6dd;
    font-size: 18px;
    max-width: 640px;
    margin: 12px auto 0;
}

:where(.bw-wizard-skin) .blog-article {
    max-width: 780px;
    margin: 0 auto;
    padding: 70px 24px;
    scroll-margin-top: 90px;
}

:where(.bw-wizard-skin) .blog-article + .blog-article {
    border-top: 1px solid var(--border-color);
}

:where(.bw-wizard-skin) .blog-article h2 {
    font-size: clamp(24px, 3vw, 32px);
    margin-bottom: 18px;
    line-height: 1.3;
}

:where(.bw-wizard-skin) .blog-article h3 {
    font-size: 20px;
    margin: 28px 0 12px;
}

:where(.bw-wizard-skin) .blog-article p {
    color: var(--gray-600);
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 1.8;
}

:where(.bw-wizard-skin) .blog-article ul, :where(.bw-wizard-skin) .blog-article ol {
    color: var(--gray-600);
    margin: 0 0 16px 24px;
    line-height: 1.8;
}

:where(.bw-wizard-skin) .blog-article li {
    margin-bottom: 8px;
}

:where(.bw-wizard-skin) .blog-article .article-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 24px;
}

:where(.bw-wizard-skin) .blog-article .article-cta {
    background: linear-gradient(135deg, rgba(41, 121, 255, 0.08) 0%, rgba(124, 92, 255, 0.06) 100%);
    border: 1px solid rgba(41, 121, 255, 0.2);
    border-radius: var(--radius);
    padding: 22px 26px;
    margin-top: 28px;
}

:where(.bw-wizard-skin) .blog-article .article-cta p {
    margin-bottom: 12px;
    font-weight: 500;
    color: var(--dark-color);
}

:where(.bw-wizard-skin) .blog-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 24px;
    font-size: 14px;
}

:where(.bw-wizard-skin) .blog-article table th {
    background: var(--background-color);
    text-align: left;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    color: var(--dark-color);
}

:where(.bw-wizard-skin) .blog-article table td {
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    color: var(--gray-600);
}

/* ============================================== */
/* WIZARD/COTIZADOR MODERNO */
/* ============================================== */
:where(.bw-wizard-skin) .cotizador-section {
    padding: 100px 0;
    background:
        radial-gradient(ellipse 50% 60% at 85% 10%, rgba(41, 121, 255, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 45% 55% at 10% 95%, rgba(255, 75, 92, 0.07) 0%, transparent 60%),
        linear-gradient(180deg, var(--background-soft) 0%, var(--background-color) 100%);
    position: relative;
}

:where(.bw-wizard-skin) #asistente-cotizador {
    max-width: 700px;
    margin: 0 auto;
    background: var(--light-color);
    border: 1px solid var(--border-color);
    padding: 48px;
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
    position: relative;
}

:where(.bw-wizard-skin) #asistente-cotizador::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(90deg, var(--primary-color), var(--violet), var(--primary-blue));
}

/* Progress Bar */
:where(.bw-wizard-skin) .wizard-progress {
    margin-bottom: 40px;
}

:where(.bw-wizard-skin) .progress-bar {
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 16px;
}

:where(.bw-wizard-skin) .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-blue) 100%);
    border-radius: 3px;
    transition: width 0.5s ease;
    width: 33%;
}

:where(.bw-wizard-skin) .progress-steps {
    display: flex;
    justify-content: space-between;
}

:where(.bw-wizard-skin) .progress-steps .step {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-600);
    transition: var(--transition);
}

:where(.bw-wizard-skin) .progress-steps .step.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-blue) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(255, 75, 92, 0.35);
}

:where(.bw-wizard-skin) .progress-steps .step.completed {
    background: var(--success-color);
    color: white;
}

:where(.bw-wizard-skin) .asistente-header {
    text-align: center;
    margin-bottom: 32px;
}

:where(.bw-wizard-skin) .asistente-header h3 {
    font-size: 24px;
    margin-bottom: 8px;
}

:where(.bw-wizard-skin) .asistente-header p {
    color: var(--gray-600);
}

:where(.bw-wizard-skin) .asistente-paso {
    margin-bottom: 24px;
    animation: pasoEntra 0.4s ease;
}

@keyframes pasoEntra {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: translateX(0); }
}

:where(.bw-wizard-skin) .asistente-paso h3 {
    margin-bottom: 24px;
    font-size: 20px;
    text-align: center;
}

/* Option Cards (Radio/Checkbox) */
:where(.bw-wizard-skin) .opcion-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--background-color);
    padding: 20px 24px;
    margin-bottom: 12px;
    border-radius: var(--radius);
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition);
}

:where(.bw-wizard-skin) .opcion-card:hover {
    border-color: var(--primary-blue);
    background: rgba(41, 121, 255, 0.05);
    transform: translateX(4px);
}

:where(.bw-wizard-skin) .opcion-card.selected {
    border-color: var(--primary-color);
    background: rgba(255, 75, 92, 0.05);
}

:where(.bw-wizard-skin) .opcion-card input {
    display: none;
}

:where(.bw-wizard-skin) .opcion-icon {
    width: 48px;
    height: 48px;
    background: var(--light-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

:where(.bw-wizard-skin) .opcion-card.selected .opcion-icon {
    background: var(--primary-color);
    color: white;
}

:where(.bw-wizard-skin) .opcion-content {
    flex: 1;
}

:where(.bw-wizard-skin) .opcion-content strong {
    display: block;
    margin-bottom: 4px;
}

:where(.bw-wizard-skin) .opcion-content span {
    font-size: 13px;
    color: var(--gray-600);
}

:where(.bw-wizard-skin) .opcion-check {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
}

:where(.bw-wizard-skin) .opcion-card.selected .opcion-check {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

:where(.bw-wizard-skin) .opcion-card.selected .opcion-check::after {
    content: '';
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

/* Legacy radio styles (fallback) */
:where(.bw-wizard-skin) .opcion-radio {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--background-color);
    padding: 16px 20px;
    margin-bottom: 10px;
    border-radius: var(--radius);
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition);
}

:where(.bw-wizard-skin) .opcion-radio:hover {
    border-color: var(--primary-blue);
}

:where(.bw-wizard-skin) .opcion-radio input[type="radio"]:checked + span,
:where(.bw-wizard-skin) .opcion-radio input[type="checkbox"]:checked + span {
    color: var(--primary-color);
    font-weight: 600;
}

/* Form Inputs */
:where(.bw-wizard-skin) .form-input {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    transition: var(--transition);
    background: var(--light-color);
    color: var(--dark-color);
}

:where(.bw-wizard-skin) .form-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px rgba(41, 121, 255, 0.1);
}

:where(.bw-wizard-skin) .form-input::placeholder {
    color: var(--gray-400);
}

:where(.bw-wizard-skin) textarea.form-input {
    min-height: 100px;
    resize: vertical;
}

/* Navigation Buttons */
:where(.bw-wizard-skin) .asistente-navegacion {
    display: flex;
    justify-content: space-between;
    margin-top: 32px;
    gap: 16px;
}

:where(.bw-wizard-skin) .btn-primary, :where(.bw-wizard-skin) .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-family: 'Poppins', sans-serif;
}

:where(.bw-wizard-skin) .btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
    margin-left: auto;
    box-shadow: 0 4px 14px rgba(255, 75, 92, 0.4);
}

:where(.bw-wizard-skin) .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 75, 92, 0.5);
}

:where(.bw-wizard-skin) .btn-secondary {
    background: var(--background-color);
    color: var(--dark-color);
    border: 2px solid var(--border-color);
}

:where(.bw-wizard-skin) .btn-secondary:hover {
    border-color: var(--gray-400);
}

/* Result Section */
:where(.bw-wizard-skin) .resultado-final {
    background: linear-gradient(135deg, var(--background-color) 0%, #fff 100%);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
    border-left: 4px solid var(--primary-color);
}

:where(.bw-wizard-skin) .precio-final {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--primary-color);
}

@media (max-width: 600px) {
    :where(.bw-wizard-skin) .precio-final { font-size: 26px; }
}

/* Las lineas del resumen respiran mas: con las cifras mas grandes se
   amontonaban contra el borde de cada fila. */
:where(.bw-wizard-skin) .resumen-respuestas p {
    line-height: 1.6;
}

:where(.bw-wizard-skin) .resumen-respuestas {
    background: var(--background-color);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 24px;
}

:where(.bw-wizard-skin) .resumen-respuestas p {
    margin: 8px 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

:where(.bw-wizard-skin) .resumen-respuestas p:last-child {
    border-bottom: none;
}

:where(.bw-wizard-skin) #form-contacto {
    margin-top: 24px;
}

:where(.bw-wizard-skin) #form-contacto .form-input {
    margin-bottom: 16px;
}

:where(.bw-wizard-skin) #form-contacto button {
    width: 100%;
}

:where(.bw-wizard-skin) .form-privacy-note {
    font-size: 12px;
    color: var(--gray-500);
    text-align: center;
    margin-top: 12px;
}

/* ============================================== */
/* SECCION CTA */
/* ============================================== */
:where(.bw-wizard-skin) .cta-section {
    padding: 100px 0;
    background:
        radial-gradient(ellipse 50% 70% at 85% 20%, rgba(41, 121, 255, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 45% 60% at 10% 90%, rgba(255, 75, 92, 0.20) 0%, transparent 60%),
        linear-gradient(160deg, var(--navy-900) 0%, var(--navy-700) 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

:where(.bw-wizard-skin) .cta-content {
    position: relative;
    z-index: 2;
}

:where(.bw-wizard-skin) .cta-content h2 {
    color: var(--light-color);
    margin-bottom: 16px;
}

:where(.bw-wizard-skin) .cta-content p {
    color: #b9c6dd;
    font-size: 18px;
    margin-bottom: 32px;
}

:where(.bw-wizard-skin) .cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================== */
/* FOOTER */
/* ============================================== */
:where(.bw-wizard-skin) footer {
    background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
    color: var(--gray-400);
    padding: 80px 0 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

:where(.bw-wizard-skin) .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 48px;
    margin-bottom: 48px;
}

:where(.bw-wizard-skin) .footer-brand img {
    margin-bottom: 16px;
    filter: brightness(0) invert(1);
}

:where(.bw-wizard-skin) .footer-brand p {
    font-size: 14px;
    line-height: 1.7;
}

:where(.bw-wizard-skin) .footer-social {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}

:where(.bw-wizard-skin) .footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    transition: var(--transition);
}

:where(.bw-wizard-skin) .footer-social a:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: translateY(-3px);
}

:where(.bw-wizard-skin) .footer-links h4,
:where(.bw-wizard-skin) .footer-contact h4 {
    color: var(--light-color);
    font-size: 16px;
    margin-bottom: 20px;
}

:where(.bw-wizard-skin) .footer-links ul {
    list-style: none;
}

:where(.bw-wizard-skin) .footer-links li {
    margin-bottom: 12px;
}

:where(.bw-wizard-skin) .footer-links a {
    color: var(--gray-400);
    text-decoration: none;
    font-size: 14px;
    transition: var(--transition);
}

:where(.bw-wizard-skin) .footer-links a:hover {
    color: var(--light-color);
    padding-left: 4px;
}

:where(.bw-wizard-skin) .footer-contact p {
    font-size: 14px;
    margin-bottom: 8px;
}

:where(.bw-wizard-skin) .footer-contact a {
    color: var(--gray-400);
    text-decoration: none;
    transition: var(--transition);
}

:where(.bw-wizard-skin) .footer-contact a:hover {
    color: var(--light-color);
}

:where(.bw-wizard-skin) .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

:where(.bw-wizard-skin) .footer-bottom a {
    color: var(--gray-400);
    text-decoration: none;
    transition: var(--transition);
}

:where(.bw-wizard-skin) .footer-bottom a:hover {
    color: var(--light-color);
}

/* ============================================== */
/* BOTONES FLOTANTES (WhatsApp + Volver arriba) */
/* ============================================== */
:where(.bw-wizard-skin) .whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
    z-index: 90;
    transition: var(--transition);
    animation: waPulse 2.5s infinite;
}

@keyframes waPulse {
    0% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0.4); }
    70% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 0 0 14px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0); }
}

:where(.bw-wizard-skin) .whatsapp-float:hover {
    transform: scale(1.1);
}

:where(.bw-wizard-skin) .back-to-top {
    position: fixed;
    bottom: 94px;
    right: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--navy-800);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
    box-shadow: var(--shadow-lg);
}

:where(.bw-wizard-skin) .back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

:where(.bw-wizard-skin) .back-to-top:hover {
    background: var(--primary-color);
}

/* ============================================== */
/* RESPONSIVIDAD */
/* ============================================== */
@media (max-width: 1024px) {
    :where(.bw-wizard-skin) .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    :where(.bw-wizard-skin) .about-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    :where(.bw-wizard-skin) .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    :where(.bw-wizard-skin) .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    :where(.bw-wizard-skin) .hero-visual {
        width: 280px;
    }
}

@media (max-width: 768px) {
    :where(.bw-wizard-skin) h1 {
        font-size: 36px;
    }

    :where(.bw-wizard-skin) .mobile-menu-btn {
        display: flex;
    }

    :where(.bw-wizard-skin) nav {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--light-color);
        padding: 24px;
        border-bottom: 1px solid var(--border-color);
        box-shadow: var(--shadow-lg);
        transform: translateY(-110%);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
    }

    :where(.bw-wizard-skin) nav.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    :where(.bw-wizard-skin) nav ul {
        flex-direction: column;
        gap: 18px;
        align-items: stretch;
        text-align: center;
    }

    :where(.bw-wizard-skin) nav ul li a {
        display: block;
        padding: 6px 0;
        font-size: 16px;
    }

    :where(.bw-wizard-skin) .contact-button,
    :where(.bw-wizard-skin) .edunex-link {
        display: block !important;
        text-align: center;
    }

    :where(.bw-wizard-skin) .hero {
        min-height: auto;
        padding: 70px 0 60px;
    }

    :where(.bw-wizard-skin) .hero .container {
        flex-direction: column;
        text-align: center;
    }

    :where(.bw-wizard-skin) .hero-text {
        max-width: 100%;
    }

    :where(.bw-wizard-skin) .hero-cta {
        justify-content: center;
    }

    :where(.bw-wizard-skin) .hero-stats {
        justify-content: center;
        flex-wrap: wrap;
    }

    :where(.bw-wizard-skin) .hero-stats .stat {
        padding: 12px 18px;
        flex: 1;
        min-width: 90px;
    }

    :where(.bw-wizard-skin) .hero-visual {
        width: min(320px, 86vw);
        margin-top: 44px;
    }

    :where(.bw-wizard-skin) .hero::after {
        font-size: 5em;
        bottom: 0;
    }

    :where(.bw-wizard-skin) .services-grid {
        grid-template-columns: 1fr;
    }

    :where(.bw-wizard-skin) .about-grid {
        grid-template-columns: 1fr;
    }

    :where(.bw-wizard-skin) .portfolio-grid {
        grid-template-columns: 1fr;
    }

    :where(.bw-wizard-skin) .blog-grid {
        grid-template-columns: 1fr;
    }

    :where(.bw-wizard-skin) #asistente-cotizador {
        padding: 32px 20px;
    }

    :where(.bw-wizard-skin) .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }

    :where(.bw-wizard-skin) .footer-social {
        justify-content: center;
    }

    :where(.bw-wizard-skin) .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    :where(.bw-wizard-skin) .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    :where(.bw-wizard-skin) .whatsapp-float {
        width: 52px;
        height: 52px;
        bottom: 18px;
        right: 18px;
    }

    :where(.bw-wizard-skin) .back-to-top {
        bottom: 82px;
        right: 21px;
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 480px) {
    :where(.bw-wizard-skin) .container {
        padding: 0 16px;
    }

    :where(.bw-wizard-skin) h1 {
        font-size: 31px;
    }

    :where(.bw-wizard-skin) .hero-badge {
        font-size: 12px;
        padding: 7px 14px;
    }

    :where(.bw-wizard-skin) .hero-stats {
        gap: 10px;
    }

    :where(.bw-wizard-skin) .hero-stats .stat strong {
        font-size: 22px;
    }

    :where(.bw-wizard-skin) .cta-button,
    :where(.bw-wizard-skin) .cta-button-outline {
        padding: 14px 24px;
        font-size: 14px;
        width: 100%;
        justify-content: center;
    }

    :where(.bw-wizard-skin) .section-title {
        margin-bottom: 40px;
    }

    :where(.bw-wizard-skin) .services,
    :where(.bw-wizard-skin) .about,
    :where(.bw-wizard-skin) .portfolio,
    :where(.bw-wizard-skin) .blog,
    :where(.bw-wizard-skin) .cotizador-section,
    :where(.bw-wizard-skin) .cta-section {
        padding: 70px 0;
    }
}

/* ============================================== */
/* PAGINAS LOCALES POR CIUDAD (SEO) */
/* ============================================== */
:where(.bw-wizard-skin) .local-hero {
    background:
        radial-gradient(ellipse 55% 60% at 80% 15%, rgba(41, 121, 255, 0.28) 0%, transparent 60%),
        radial-gradient(ellipse 45% 55% at 10% 90%, rgba(255, 75, 92, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 60% 95%, rgba(124, 92, 255, 0.16) 0%, transparent 60%),
        linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 55%, #14203a 100%);
    color: var(--light-color);
    padding: 60px 0 80px;
    position: relative;
    overflow: hidden;
}

:where(.bw-wizard-skin) .local-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black 30%, transparent 75%);
}

:where(.bw-wizard-skin) .local-hero .container {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

:where(.bw-wizard-skin) .local-hero h1 {
    color: #ffffff;
    margin-bottom: 20px;
}

:where(.bw-wizard-skin) .local-hero-text {
    font-size: clamp(16px, 2vw, 19px);
    color: #c3d0e6;
    line-height: 1.8;
    margin-bottom: 34px;
    max-width: 760px;
}

:where(.bw-wizard-skin) .local-hero-text strong {
    color: #ffffff;
}

/* Migas de pan sobre fondo oscuro */
:where(.bw-wizard-skin) .breadcrumbs {
    font-size: 13px;
    margin-bottom: 22px;
    color: #93a5c4;
}

:where(.bw-wizard-skin) .breadcrumbs a {
    color: #93a5c4;
    text-decoration: none;
    transition: var(--transition);
}

:where(.bw-wizard-skin) .breadcrumbs a:hover {
    color: #ffffff;
}

:where(.bw-wizard-skin) .breadcrumbs span {
    margin: 0 6px;
}

:where(.bw-wizard-skin) .breadcrumbs span[aria-current] {
    color: #ffffff;
    margin: 0;
}

/* Tarjetas de sector - sobre fondo claro */
:where(.bw-wizard-skin) .local-card {
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 30px 28px;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

:where(.bw-wizard-skin) .local-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--violet), var(--primary-blue));
    opacity: 0;
    transition: opacity 0.3s ease;
}

:where(.bw-wizard-skin) .local-card:hover::before { opacity: 1; }

:where(.bw-wizard-skin) .local-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

:where(.bw-wizard-skin) .local-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: var(--dark-color);
}

:where(.bw-wizard-skin) .local-card p {
    font-size: 14.5px;
    color: var(--gray-600);
    line-height: 1.7;
    margin: 0;
}

/* Bloque de texto largo - fondo claro */
:where(.bw-wizard-skin) .local-prose {
    max-width: 820px;
    margin: 0 auto;
}

:where(.bw-wizard-skin) .local-prose p {
    color: var(--gray-600);
    font-size: 16px;
    line-height: 1.85;
    margin-bottom: 18px;
}

:where(.bw-wizard-skin) .local-prose strong { color: var(--dark-color); }

:where(.bw-wizard-skin) .local-prose h3 {
    margin: 32px 0 14px;
    font-size: 20px;
    color: var(--dark-color);
}

:where(.bw-wizard-skin) .local-prose ul {
    margin: 0 0 18px 22px;
    color: var(--gray-600);
    line-height: 1.9;
}

:where(.bw-wizard-skin) .local-prose li { margin-bottom: 6px; }

:where(.bw-wizard-skin) .price-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: var(--light-color);
}

:where(.bw-wizard-skin) .price-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    min-width: 440px;
}

:where(.bw-wizard-skin) .price-table-wrap th {
    background: linear-gradient(135deg, rgba(41, 121, 255, 0.08) 0%, rgba(124, 92, 255, 0.06) 100%);
    color: var(--dark-color);
    text-align: left;
    padding: 14px 18px;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

:where(.bw-wizard-skin) .price-table-wrap td {
    padding: 14px 18px;
    color: var(--gray-600);
    border-bottom: 1px solid var(--border-color);
}

:where(.bw-wizard-skin) .price-table-wrap tr:last-child td { border-bottom: none; }

/* Preguntas frecuentes - fondo claro con profundidad */
:where(.bw-wizard-skin) .faq-section {
    padding: 100px 0;
    background:
        radial-gradient(ellipse 45% 55% at 0% 10%, rgba(124, 92, 255, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 45% 55% at 100% 90%, rgba(41, 121, 255, 0.07) 0%, transparent 60%),
        var(--background-color);
}

:where(.bw-wizard-skin) .faq-list {
    max-width: 820px;
    margin: 0 auto;
}

:where(.bw-wizard-skin) .faq-item {
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: 14px;
    overflow: hidden;
    transition: var(--transition);
}

:where(.bw-wizard-skin) .faq-item[open] {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px rgba(41, 121, 255, 0.08);
}

:where(.bw-wizard-skin) .faq-item summary {
    padding: 20px 24px;
    font-weight: 600;
    color: var(--dark-color);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 16px;
}

:where(.bw-wizard-skin) .faq-item summary::-webkit-details-marker { display: none; }

:where(.bw-wizard-skin) .faq-item summary::after {
    content: '+';
    font-size: 24px;
    font-weight: 400;
    color: var(--primary-color);
    flex-shrink: 0;
    transition: transform 0.3s ease;
    line-height: 1;
}

:where(.bw-wizard-skin) .faq-item[open] summary::after {
    transform: rotate(45deg);
}

:where(.bw-wizard-skin) .faq-item summary:hover { color: var(--primary-color); }

:where(.bw-wizard-skin) .faq-item p {
    padding: 0 24px 22px;
    margin: 0;
    color: var(--gray-600);
    line-height: 1.8;
    font-size: 15px;
}

/* Enlaces a otras ciudades - fondo oscuro, texto claro */
:where(.bw-wizard-skin) .otras-ciudades {
    padding: 70px 0;
    background: linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 100%);
    text-align: center;
}

:where(.bw-wizard-skin) .otras-ciudades h2 {
    color: #ffffff;
    font-size: clamp(22px, 3vw, 30px);
    margin-bottom: 28px;
}

:where(.bw-wizard-skin) .ciudades-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

:where(.bw-wizard-skin) .ciudades-links a {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #d7e1f2;
    padding: 11px 22px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    transition: var(--transition);
}

:where(.bw-wizard-skin) .ciudades-links a:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Cuadricula de coberturas */
:where(.bw-wizard-skin) .coberturas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

:where(.bw-wizard-skin) .cobertura-card {
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 30px 26px;
    text-decoration: none;
    display: block;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

:where(.bw-wizard-skin) .cobertura-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-blue);
}

:where(.bw-wizard-skin) .cobertura-card .cobertura-flag {
    font-size: 30px;
    margin-bottom: 12px;
    display: block;
}

:where(.bw-wizard-skin) .cobertura-card h3 {
    color: var(--dark-color);
    font-size: 19px;
    margin-bottom: 8px;
}

:where(.bw-wizard-skin) .cobertura-card p {
    color: var(--gray-600);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

:where(.bw-wizard-skin) .cobertura-card .cobertura-link {
    display: inline-block;
    margin-top: 14px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 14px;
}

@media (max-width: 1024px) {
    :where(.bw-wizard-skin) .coberturas-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    :where(.bw-wizard-skin) .coberturas-grid { grid-template-columns: 1fr; }
    :where(.bw-wizard-skin) .local-hero { padding: 40px 0 60px; }
    :where(.bw-wizard-skin) .faq-section { padding: 70px 0; }
    :where(.bw-wizard-skin) .otras-ciudades { padding: 55px 0; }
}

/* ============================================== */
/* CHIP DE ALL-MEDICARE EN EL MENU */
/* ============================================== */
:where(.bw-wizard-skin) .medicare-link {
    background: linear-gradient(135deg, #0f766e 0%, #0891b2 100%);
    color: #fff !important;
    padding: 10px 18px;
    border-radius: 25px;
    font-weight: 600;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

:where(.bw-wizard-skin) .medicare-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(15, 118, 110, 0.45);
}

:where(.bw-wizard-skin) .medicare-link::before {
    content: '🏥';
    font-size: 14px;
}

/* ============================================== */
/* SECCION DE PLATAFORMAS PROPIAS */
/* ============================================== */
:where(.bw-wizard-skin) .plataformas-demo {
    padding: 100px 0;
    background:
        radial-gradient(ellipse 50% 55% at 8% 12%, rgba(102, 126, 234, 0.09) 0%, transparent 62%),
        radial-gradient(ellipse 50% 55% at 92% 88%, rgba(8, 145, 178, 0.09) 0%, transparent 62%),
        linear-gradient(180deg, #ffffff 0%, #f7fafd 55%, #f2f7fc 100%);
}

:where(.bw-wizard-skin) .plataformas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 940px;
    margin: 0 auto;
}

:where(.bw-wizard-skin) .plataforma-card {
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 34px 32px;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

:where(.bw-wizard-skin) .plataforma-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
}

:where(.bw-wizard-skin) .plataforma-card.edu::before {
    background: linear-gradient(90deg, #667eea, #764ba2);
}

:where(.bw-wizard-skin) .plataforma-card.salud::before {
    background: linear-gradient(90deg, #0f766e, #0891b2);
}

:where(.bw-wizard-skin) .plataforma-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

:where(.bw-wizard-skin) .plataforma-icono {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    color: #ffffff;
}

:where(.bw-wizard-skin) .plataforma-card.edu .plataforma-icono {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

:where(.bw-wizard-skin) .plataforma-card.salud .plataforma-icono {
    background: linear-gradient(135deg, #0f766e 0%, #0891b2 100%);
}

:where(.bw-wizard-skin) .plataforma-etiqueta {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 40px;
    margin-bottom: 12px;
    align-self: flex-start;
}

:where(.bw-wizard-skin) .plataforma-card.edu .plataforma-etiqueta {
    background: rgba(102, 126, 234, 0.12);
    color: #5b4bc4;
}

:where(.bw-wizard-skin) .plataforma-card.salud .plataforma-etiqueta {
    background: rgba(15, 118, 110, 0.12);
    color: #0f766e;
}

:where(.bw-wizard-skin) .plataforma-card h3 {
    font-size: 24px;
    margin-bottom: 12px;
    color: var(--dark-color);
}

:where(.bw-wizard-skin) .plataforma-card > p {
    color: var(--gray-600);
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 18px;
}

:where(.bw-wizard-skin) .plataforma-lista {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    flex: 1;
}

:where(.bw-wizard-skin) .plataforma-lista li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 9px;
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.6;
}

:where(.bw-wizard-skin) .plataforma-lista li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 15px;
    height: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

:where(.bw-wizard-skin) .plataforma-card.edu .plataforma-lista li::before { color: #667eea; }
:where(.bw-wizard-skin) .plataforma-card.salud .plataforma-lista li::before { color: #0891b2; }

:where(.bw-wizard-skin) .plataforma-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    color: #ffffff;
    transition: var(--transition);
    align-self: flex-start;
}

:where(.bw-wizard-skin) .plataforma-boton.edu {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

:where(.bw-wizard-skin) .plataforma-boton.salud {
    background: linear-gradient(135deg, #0f766e 0%, #0891b2 100%);
    box-shadow: 0 4px 16px rgba(15, 118, 110, 0.4);
}

:where(.bw-wizard-skin) .plataforma-boton:hover {
    transform: translateY(-3px);
    filter: brightness(1.06);
}

@media (max-width: 900px) {
    :where(.bw-wizard-skin) .plataformas-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    :where(.bw-wizard-skin) .plataformas-demo { padding: 70px 0; }
    :where(.bw-wizard-skin) .medicare-link { display: block !important; text-align: center; }
    :where(.bw-wizard-skin) .plataforma-boton { align-self: stretch; }
}

/* ============================================== */
/* PROMOCION DESTACADA */
/* ============================================== */
:where(.bw-wizard-skin) .promo-destacada {
    padding: 80px 0;
    background:
        radial-gradient(ellipse 55% 60% at 85% 15%, rgba(255, 75, 92, 0.22) 0%, transparent 62%),
        radial-gradient(ellipse 45% 55% at 10% 90%, rgba(124, 92, 255, 0.20) 0%, transparent 62%),
        linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 60%, #16213c 100%);
    position: relative;
    overflow: hidden;
}

:where(.bw-wizard-skin) .promo-destacada::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black 30%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black 30%, transparent 78%);
}

:where(.bw-wizard-skin) .promo-caja {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 24px;
    padding: 44px 40px 32px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}

:where(.bw-wizard-skin) .promo-cinta {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 8px 24px;
    border-radius: 50px;
    box-shadow: 0 6px 20px rgba(255, 75, 92, 0.45);
    white-space: nowrap;
}

:where(.bw-wizard-skin) .promo-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 40px;
    align-items: center;
}

:where(.bw-wizard-skin) .promo-etiqueta {
    display: inline-block;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #d7e1f2;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 40px;
    margin-bottom: 14px;
}

:where(.bw-wizard-skin) .promo-info h2 {
    color: #ffffff;
    margin-bottom: 12px;
    font-size: clamp(26px, 3.4vw, 38px);
}

:where(.bw-wizard-skin) .promo-bajada {
    color: #b9c6dd;
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 26px;
}

:where(.bw-wizard-skin) .promo-precios {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 28px;
}

:where(.bw-wizard-skin) .promo-antes {
    color: #8fa0bd;
    font-size: 19px;
    text-decoration: line-through;
}

:where(.bw-wizard-skin) .promo-ahora {
    font-size: clamp(32px, 4.5vw, 44px);
    font-weight: 800;
    background: linear-gradient(120deg, #ffffff 25%, #ffc9cf 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

:where(.bw-wizard-skin) .promo-ahorro {
    background: rgba(16, 185, 129, 0.18);
    border: 1px solid rgba(16, 185, 129, 0.45);
    color: #6ee7b7;
    font-size: 13.5px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 40px;
}

:where(.bw-wizard-skin) .promo-botones {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* Imagen de la promocion */
:where(.bw-wizard-skin) .promo-imagen {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.42);
    line-height: 0;
}

:where(.bw-wizard-skin) .promo-imagen img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

:where(.bw-wizard-skin) .promo-incluye {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 16px;
    padding: 26px 30px 22px;
    margin-top: 32px;
}

/* La lista ocupa todo el ancho, repartida en columnas */
:where(.bw-wizard-skin) .promo-incluye ul {
    column-count: 3;
    column-gap: 34px;
}

:where(.bw-wizard-skin) .promo-incluye li {
    break-inside: avoid;
}

:where(.bw-wizard-skin) .promo-incluye h3 {
    color: #ffffff;
    font-size: 17px;
    margin-bottom: 16px;
}

:where(.bw-wizard-skin) .promo-incluye ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

:where(.bw-wizard-skin) .promo-incluye li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    color: #c3d0e6;
    font-size: 14px;
    line-height: 1.6;
}

:where(.bw-wizard-skin) .promo-incluye li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 7px;
    border-left: 2px solid #6ee7b7;
    border-bottom: 2px solid #6ee7b7;
    transform: rotate(-45deg);
}

:where(.bw-wizard-skin) .promo-legal {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    color: #8fa0bd;
    font-size: 12.5px;
    line-height: 1.7;
    text-align: center;
}

/* Enlace de promocion en el menu */
:where(.bw-wizard-skin) .nav-promo {
    color: var(--primary-color) !important;
    font-weight: 700 !important;
}

:where(.bw-wizard-skin) .nav-promo::before {
    content: '🔥';
    margin-right: 4px;
    font-size: 13px;
}

@media (max-width: 1024px) {
    :where(.bw-wizard-skin) .promo-incluye ul { column-count: 2; }
}

@media (max-width: 900px) {
    :where(.bw-wizard-skin) .promo-grid { grid-template-columns: 1fr; gap: 28px; }
    /* En movil la imagen va primero: entra por los ojos antes que el texto */
    :where(.bw-wizard-skin) .promo-imagen { order: -1; }
    :where(.bw-wizard-skin) .promo-imagen img { aspect-ratio: 16 / 10; }
    :where(.bw-wizard-skin) .promo-incluye ul { column-count: 1; }
}

@media (max-width: 768px) {
    :where(.bw-wizard-skin) .promo-destacada { padding: 60px 0; }
    :where(.bw-wizard-skin) .promo-caja { padding: 38px 22px 26px; }
    :where(.bw-wizard-skin) .promo-cinta { font-size: 11px; padding: 7px 16px; }
    :where(.bw-wizard-skin) .promo-botones .cta-button,
    :where(.bw-wizard-skin) .promo-botones .cta-button-outline { width: 100%; justify-content: center; }
    :where(.bw-wizard-skin) .promo-precios { gap: 10px; }
}

/* Chip unico de plataformas en el menu */
:where(.bw-wizard-skin) .plataformas-link {
    background: linear-gradient(135deg, #667eea 0%, #0891b2 100%);
    color: #fff !important;
    padding: 10px 18px;
    border-radius: 25px;
    font-weight: 600;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

:where(.bw-wizard-skin) .plataformas-link::before { content: '🚀'; font-size: 13px; }

:where(.bw-wizard-skin) .plataformas-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.45);
}

/* Menu mas compacto para que quepan todos los enlaces */
:where(.bw-wizard-skin) nav ul { gap: 20px; }

@media (max-width: 1100px) {
    :where(.bw-wizard-skin) nav ul { gap: 14px; }
    :where(.bw-wizard-skin) nav a { font-size: 14px; }
    :where(.bw-wizard-skin) .contact-button { padding: 10px 18px; }
    :where(.bw-wizard-skin) .plataformas-link { padding: 9px 14px; }
}

@media (max-width: 768px) {
    :where(.bw-wizard-skin) nav ul { gap: 18px; }
    :where(.bw-wizard-skin) .plataformas-link { display: block !important; text-align: center; }
}

/* Distintivos de la promocion */
:where(.bw-wizard-skin) .promo-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

:where(.bw-wizard-skin) .promo-etiquetas .promo-etiqueta { margin-bottom: 0; }

:where(.bw-wizard-skin) .promo-etiqueta.destacada {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.5);
    color: #6ee7b7;
    font-weight: 700;
}

:where(.bw-wizard-skin) .promo-etiqueta.destacada::before {
    content: '⚡';
    margin-right: 5px;
}

/* Condiciones de la promocion */
:where(.bw-wizard-skin) .promo-condiciones {
    margin-top: 26px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid rgba(251, 191, 36, 0.7);
    border-radius: 16px;
    padding: 24px 28px 20px;
}

:where(.bw-wizard-skin) .promo-condiciones > h3 {
    color: #fcd34d;
    font-size: 15px;
    letter-spacing: 0.3px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

:where(.bw-wizard-skin) .promo-condiciones > h3::before { content: '⚠'; font-size: 15px; }

:where(.bw-wizard-skin) .promo-condiciones-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 34px;
}

:where(.bw-wizard-skin) .promo-condicion h4 {
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 600;
    margin-bottom: 7px;
    line-height: 1.45;
}

:where(.bw-wizard-skin) .promo-condicion p {
    color: #b9c6dd;
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0;
}

:where(.bw-wizard-skin) .promo-condicion strong { color: #ffffff; }

@media (max-width: 900px) {
    :where(.bw-wizard-skin) .promo-condiciones-grid { grid-template-columns: 1fr; gap: 18px; }
    :where(.bw-wizard-skin) .promo-condiciones { padding: 20px 20px 16px; }
}

/* ============================================== */
/* LANDING DE RESERVAS PARA BOTES */
/* ============================================== */
:where(.bw-wizard-skin) .botes-precio {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    padding: 22px 26px;
    margin: 0 0 30px;
    display: inline-block;
    backdrop-filter: blur(8px);
}

:where(.bw-wizard-skin) .botes-precio-fila {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 16px;
}

:where(.bw-wizard-skin) .botes-antes {
    color: #8fa0bd;
    font-size: 19px;
    text-decoration: line-through;
}

:where(.bw-wizard-skin) .botes-ahora {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 800;
    background: linear-gradient(120deg, #ffffff 25%, #ffc9cf 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

:where(.bw-wizard-skin) .botes-precio-nota {
    color: #b9c6dd;
    font-size: 13.5px;
    margin: 10px 0 0;
    line-height: 1.6;
}

:where(.bw-wizard-skin) .botes-precio-nota strong { color: #ffffff; }

/* Formas de pago */
:where(.bw-wizard-skin) .pagos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 940px;
    margin: 0 auto;
}

:where(.bw-wizard-skin) .pago-card {
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 32px 26px 26px;
    text-align: center;
    position: relative;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

:where(.bw-wizard-skin) .pago-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

:where(.bw-wizard-skin) .pago-card.destacado {
    border: 2px solid var(--primary-color);
    box-shadow: 0 10px 34px rgba(255, 75, 92, 0.16);
}

:where(.bw-wizard-skin) .pago-insignia {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 50px;
    white-space: nowrap;
}

:where(.bw-wizard-skin) .pago-card h3 {
    font-size: 19px;
    color: var(--dark-color);
    margin-bottom: 4px;
}

:where(.bw-wizard-skin) .pago-desc {
    color: var(--gray-500);
    font-size: 13.5px;
    margin-bottom: 16px;
}

:where(.bw-wizard-skin) .pago-monto {
    font-size: 30px;
    font-weight: 800;
    color: var(--dark-color);
    line-height: 1.15;
    margin-bottom: 6px;
}

:where(.bw-wizard-skin) .pago-card.destacado .pago-monto { color: var(--primary-color); }

:where(.bw-wizard-skin) .pago-detalle {
    font-size: 13.5px;
    color: var(--gray-600);
    margin-bottom: 10px;
}

:where(.bw-wizard-skin) .pago-ahorro.vacio {
    background: transparent;
    color: transparent;
}

:where(.bw-wizard-skin) .pago-ahorro {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #047857;
    background: rgba(16, 185, 129, 0.12);
    border-radius: 40px;
    padding: 5px 14px;
    margin: 0;
    min-height: 26px;
}

/* Requisitos de los 10 dias */
:where(.bw-wizard-skin) .requisitos {
    max-width: 820px;
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

:where(.bw-wizard-skin) .requisito {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 24px 26px;
}

:where(.bw-wizard-skin) .requisito-num {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--violet) 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(.bw-wizard-skin) .requisito h3 {
    font-size: 17px;
    color: var(--dark-color);
    margin-bottom: 7px;
}

:where(.bw-wizard-skin) .requisito p {
    color: var(--gray-600);
    font-size: 14.5px;
    line-height: 1.75;
    margin: 0;
}

:where(.bw-wizard-skin) .requisito strong { color: var(--dark-color); }

:where(.bw-wizard-skin) .requisitos-aviso {
    max-width: 820px;
    margin: 22px auto 0;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-left: 3px solid #f59e0b;
    border-radius: var(--radius);
    padding: 18px 22px;
}

:where(.bw-wizard-skin) .requisitos-aviso p {
    color: #92400e;
    font-size: 14px;
    line-height: 1.75;
    margin: 0;
}

:where(.bw-wizard-skin) .requisitos-aviso strong { color: #78350f; }

@media (max-width: 900px) {
    :where(.bw-wizard-skin) .pagos-grid { grid-template-columns: 1fr; gap: 28px; }
    :where(.bw-wizard-skin) .botes-precio { display: block; }
}

@media (max-width: 768px) {
    :where(.bw-wizard-skin) .requisito { flex-direction: column; gap: 12px; padding: 20px; }
}

/* ============================================== */
/* INTEGRACIONES INCLUIDAS (landing de botes) */
/* ============================================== */
:where(.bw-wizard-skin) .integraciones {
    padding: 90px 0;
    background:
        radial-gradient(ellipse 45% 55% at 8% 10%, rgba(41, 121, 255, 0.07) 0%, transparent 62%),
        radial-gradient(ellipse 45% 55% at 92% 90%, rgba(124, 92, 255, 0.07) 0%, transparent 62%),
        linear-gradient(180deg, #ffffff 0%, #f8fafd 60%, #f3f7fc 100%);
}

:where(.bw-wizard-skin) .integra-bloque {
    max-width: 820px;
    margin: 0 auto 32px;
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 28px 30px 26px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

:where(.bw-wizard-skin) .integra-bloque:last-child { margin-bottom: 0; }

:where(.bw-wizard-skin) .integra-bloque h3 {
    font-size: 18px;
    color: var(--dark-color);
    margin-bottom: 8px;
}

:where(.bw-wizard-skin) .integra-nota {
    color: var(--gray-600);
    font-size: 14.5px;
    line-height: 1.75;
    margin: 0 auto;
    max-width: 640px;
}

:where(.bw-wizard-skin) .integra-nota strong { color: var(--dark-color); }

:where(.bw-wizard-skin) .integra-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
}

:where(.bw-wizard-skin) .integra-logo {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 24px;
    min-width: 160px;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

:where(.bw-wizard-skin) .integra-logo:hover {
    border-color: var(--primary-blue);
    box-shadow: 0 6px 18px rgba(41, 121, 255, 0.12);
    transform: translateY(-3px);
}

:where(.bw-wizard-skin) .integra-logo img {
    max-width: 100%;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Respaldo cuando el logo aun no esta subido */
:where(.bw-wizard-skin) .integra-texto {
    font-weight: 700;
    font-size: 17px;
    color: var(--gray-600);
    letter-spacing: 0.3px;
}

@media (max-width: 768px) {
    :where(.bw-wizard-skin) .integraciones { padding: 70px 0; }
    :where(.bw-wizard-skin) .integra-bloque { padding: 24px 20px 22px; }
    :where(.bw-wizard-skin) .integra-logos { gap: 12px; }
    :where(.bw-wizard-skin) .integra-logo { min-width: 132px; padding: 14px 18px; }
}

:where(.bw-wizard-skin) .botes-precio-label {
    color: #93a5c4;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 10px;
}


/* ============================================== */
/* SISTEMAS DE RESERVAS: MENU, AVISO Y SECCION    */
/* ============================================== */

/* Enlace del menu (cabecera clara: color oscuro) */
:where(.bw-wizard-skin) .nav-botes {
    color: #0e7490 !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

:where(.bw-wizard-skin) .nav-botes::before {
    content: '\2693';
    margin-right: 5px;
    font-size: 13px;
}

:where(.bw-wizard-skin) .nav-botes:hover { color: #0891b2 !important; }

/* Aviso en el hero (fondo oscuro: texto claro) */
:where(.bw-wizard-skin) .hero-aviso {
    /* Sin el margen inferior el aviso queda pegado a las tarjetas de
       estadisticas y los dos bloques se leen como uno solo. */
    margin: 24px 0 30px;
}

:where(.bw-wizard-skin) .hero-aviso a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px 9px 10px;
    border-radius: 999px;
    border: 1px solid rgba(125, 211, 252, 0.35);
    background: rgba(8, 145, 178, 0.18);
    color: #e0f2fe;
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
}

:where(.bw-wizard-skin) .hero-aviso a:hover {
    background: rgba(8, 145, 178, 0.32);
    border-color: rgba(125, 211, 252, 0.6);
    transform: translateY(-2px);
}

:where(.bw-wizard-skin) .hero-aviso-tag {
    background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%);
    color: #04202b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
}

:where(.bw-wizard-skin) .hero-aviso-flecha { color: #67e8f9; font-weight: 700; }

/* Seccion con las dos verticales */
:where(.bw-wizard-skin) .banda-reservas {
    padding: 90px 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(8, 145, 178, 0.26), transparent 55%),
        radial-gradient(circle at 88% 82%, rgba(124, 92, 255, 0.22), transparent 55%),
        linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%);
}

/* El titulo de seccion vive aqui sobre fondo oscuro: hay que aclararlo */
:where(.bw-wizard-skin) .banda-reservas .section-title { margin-bottom: 44px; }
:where(.bw-wizard-skin) .banda-reservas .section-title h2 { color: #f8fafc; }
:where(.bw-wizard-skin) .banda-reservas .section-title p { color: #cbd5e1; max-width: 760px; }

:where(.bw-wizard-skin) .banda-reservas .section-badge {
    background: rgba(34, 211, 238, 0.14);
    border-color: rgba(34, 211, 238, 0.4);
    color: #67e8f9;
}

:where(.bw-wizard-skin) .reservas-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}

:where(.bw-wizard-skin) .reserva-card {
    display: flex;
    flex-direction: column;
    padding: 34px 30px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-xl);
    transition: var(--transition);
}

:where(.bw-wizard-skin) .reserva-card:hover {
    transform: translateY(-4px);
    border-color: rgba(34, 211, 238, 0.45);
}

:where(.bw-wizard-skin) .reserva-card.botes { border-top: 3px solid #22d3ee; }
:where(.bw-wizard-skin) .reserva-card.hoteles { border-top: 3px solid #a78bfa; }

:where(.bw-wizard-skin) .reserva-etiqueta {
    align-self: flex-start;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.14);
    border: 1px solid rgba(34, 211, 238, 0.38);
    color: #67e8f9;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

:where(.bw-wizard-skin) .reserva-card.hoteles .reserva-etiqueta {
    background: rgba(167, 139, 250, 0.14);
    border-color: rgba(167, 139, 250, 0.4);
    color: #c4b5fd;
}

:where(.bw-wizard-skin) .reserva-card h3 {
    margin: 16px 0 12px;
    color: #f8fafc;
    font-size: 1.6rem;
    line-height: 1.25;
}

:where(.bw-wizard-skin) .reserva-card h3 span {
    background: linear-gradient(135deg, #22d3ee 0%, #38bdf8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

:where(.bw-wizard-skin) .reserva-card.hoteles h3 span {
    background: linear-gradient(135deg, #a78bfa 0%, #f0abfc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

:where(.bw-wizard-skin) .reserva-bajada {
    color: #cbd5e1;
    font-size: 15px;
    line-height: 1.75;
    margin: 0 0 18px;
}

:where(.bw-wizard-skin) .reserva-lista {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}

:where(.bw-wizard-skin) .reserva-lista li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
    color: #e2e8f0;
    font-size: 14.5px;
    line-height: 1.6;
}

:where(.bw-wizard-skin) .reserva-lista li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    color: #22d3ee;
    font-weight: 700;
}

:where(.bw-wizard-skin) .reserva-card.hoteles .reserva-lista li::before { color: #c4b5fd; }

:where(.bw-wizard-skin) .reserva-precio {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: auto;
    padding: 20px;
    border-radius: var(--radius);
    border: 1px solid rgba(34, 211, 238, 0.28);
    background: linear-gradient(160deg, rgba(8, 145, 178, 0.2) 0%, rgba(15, 23, 42, 0.7) 100%);
}

:where(.bw-wizard-skin) .reserva-card.hoteles .reserva-precio {
    border-color: rgba(167, 139, 250, 0.3);
    background: linear-gradient(160deg, rgba(124, 92, 255, 0.2) 0%, rgba(15, 23, 42, 0.7) 100%);
}

:where(.bw-wizard-skin) .reserva-rotulo {
    color: #94a3b8;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

:where(.bw-wizard-skin) .reserva-antes {
    color: #94a3b8;
    font-size: 16px;
    text-decoration: line-through;
}

:where(.bw-wizard-skin) .reserva-ahora {
    color: #f8fafc;
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.1;
}

:where(.bw-wizard-skin) .reserva-nota {
    color: #a5f3fc;
    font-size: 12.5px;
}

:where(.bw-wizard-skin) .reserva-card.hoteles .reserva-nota { color: #ddd6fe; }

:where(.bw-wizard-skin) .reserva-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

:where(.bw-wizard-skin) .reserva-botones .cta-button,
:where(.bw-wizard-skin) .reserva-botones .cta-button-outline {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
}

:where(.bw-wizard-skin) .reservas-pie {
    margin: 32px 0 0;
    text-align: center;
    color: #94a3b8;
    font-size: 14.5px;
}

:where(.bw-wizard-skin) .reservas-pie a {
    color: #67e8f9;
    font-weight: 600;
    text-decoration: underline;
}

@media (max-width: 900px) {
    :where(.bw-wizard-skin) .reservas-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    :where(.bw-wizard-skin) .banda-reservas { padding: 60px 0; }
    :where(.bw-wizard-skin) .reserva-card { padding: 28px 22px; }
    :where(.bw-wizard-skin) .reserva-card h3 { font-size: 1.4rem; }
    :where(.bw-wizard-skin) .reserva-botones .cta-button,
    :where(.bw-wizard-skin) .reserva-botones .cta-button-outline { flex: 1 1 100%; }
    :where(.bw-wizard-skin) .hero-aviso a { font-size: 13.5px; }
}

/* ============================================== */
/* PORTADA DE LAS LANDINGS DE RESERVAS            */
/* ============================================== */
/* La imagen se agrega cuando este lista. Si no existe todavia, el onerror
   quita la columna y el hero vuelve a su version de una sola columna. */

:where(.bw-wizard-skin) .local-hero.con-portada .container { max-width: 1180px; }

:where(.bw-wizard-skin) .local-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 48px;
    align-items: center;
}

/* En dos columnas el titulo tiene menos ancho: si se deja el tamano del
   hero a pagina completa se parte en cuatro renglones. */
:where(.bw-wizard-skin) .local-hero.con-portada h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
:where(.bw-wizard-skin) .local-hero.con-portada .local-hero-text { margin-bottom: 26px; font-size: 16.5px; }

:where(.bw-wizard-skin) .local-hero-portada img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 26px 60px rgba(2, 6, 23, 0.55);
}

@media (max-width: 900px) {
    :where(.bw-wizard-skin) .local-hero-grid { grid-template-columns: 1fr; gap: 32px; }
    /* En movil la imagen entra por los ojos antes que el texto */
    :where(.bw-wizard-skin) .local-hero-portada { order: -1; }
}

/* ============================================== */
/* PANTALLAZOS DE LAS DEMOS                       */
/* ============================================== */
/* La seccion llega oculta y solo aparece cuando al menos una captura carga.
   Asi la landing no muestra huecos mientras las demos se terminan. */

:where(.bw-wizard-skin) .demo-galeria[hidden] { display: none; }

:where(.bw-wizard-skin) .demo-galeria {
    padding: 90px 0;
    background:
        radial-gradient(ellipse 45% 55% at 85% 10%, rgba(41, 121, 255, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 45% 55% at 10% 95%, rgba(124, 92, 255, 0.07) 0%, transparent 60%),
        var(--background-soft);
}

:where(.bw-wizard-skin) .demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 26px;
}

:where(.bw-wizard-skin) .demo-shot {
    margin: 0;
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
}

:where(.bw-wizard-skin) .demo-shot:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

:where(.bw-wizard-skin) .demo-shot img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid var(--border-color);
}

:where(.bw-wizard-skin) .demo-shot figcaption {
    padding: 16px 18px;
    color: var(--gray-600);
    font-size: 14.5px;
    line-height: 1.6;
}

:where(.bw-wizard-skin) .demo-acciones {
    margin-top: 34px;
    text-align: center;
}

/* Nota bajo la grilla de precios por tamano (seccion clara) */
:where(.bw-wizard-skin) .pagos-nota {
    max-width: 760px;
    margin: 28px auto 0;
    text-align: center;
    color: var(--gray-600);
    font-size: 14.5px;
    line-height: 1.8;
}

:where(.bw-wizard-skin) .pagos-nota strong { color: var(--dark-color); }

/* ============================================== */
/* HERO CON FOTO DE PORTADA                       */
/* ============================================== */
/* La foto va como capa de fondo, nunca como <img>: el texto del hero tiene
   que seguir siendo HTML para que Google lo lea y para que escale en movil.
   Encima va un velo oscuro en degradado que garantiza el contraste: la foto
   es oscura, pero eso no se puede dar por hecho si manana se cambia.
   El degradado navy de siempre queda como ultima capa, asi que si la imagen
   no carga el hero se ve igual que antes. */

:where(.bw-wizard-skin) .hero.con-foto {
    background-image:
        linear-gradient(100deg,
            rgba(8, 13, 28, 0.95) 0%,
            rgba(8, 13, 28, 0.88) 32%,
            rgba(8, 13, 28, 0.55) 55%,
            rgba(8, 13, 28, 0.28) 100%),
        radial-gradient(ellipse 45% 55% at 10% 88%, rgba(255, 75, 92, 0.18) 0%, transparent 60%),
        url('/img/hero/home-hero.webp'),
        linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 55%, #14203a 100%);
    background-size: auto, auto, cover, auto;
    background-position: center, center, right center, center;
    background-repeat: no-repeat;
}

/* La foto ya trae su propio portatil: la tarjeta decorativa chocaria con el. */
:where(.bw-wizard-skin) .hero.con-foto .hero-visual { display: none; }

/* Sin la tarjeta, el texto puede respirar un poco mas, pero no tanto como
   para montarse sobre el portatil de la foto. */
:where(.bw-wizard-skin) .hero.con-foto .hero-text { max-width: 54%; }

/* La malla de puntos y el "Bweb" gigante ensucian la foto. */
:where(.bw-wizard-skin) .hero.con-foto::before,
:where(.bw-wizard-skin) .hero.con-foto::after { display: none; }

@media (max-width: 1100px) {
    :where(.bw-wizard-skin) .hero.con-foto .hero-text { max-width: 64%; }
}

@media (max-width: 900px) {
    /* En movil el texto ocupa todo el ancho y queda encima del portatil, asi
       que el velo tiene que ser casi opaco o el titulo no se lee. */
    :where(.bw-wizard-skin) .hero.con-foto .hero-text { max-width: 100%; }
    :where(.bw-wizard-skin) .hero.con-foto {
        background-image:
            linear-gradient(180deg,
                rgba(8, 13, 28, 0.93) 0%,
                rgba(8, 13, 28, 0.90) 55%,
                rgba(8, 13, 28, 0.80) 100%),
            url('/img/hero/home-hero.webp'),
            linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 55%, #14203a 100%);
        background-size: auto, cover, auto;
        background-position: center, 72% center, center;
    }
}

/* ============================================== */
/* MENU: PASAR A HAMBURGUESA ANTES DE QUE APRIETE */
/* ============================================== */
/* El menu tiene ocho enlaces y necesita unos 890 px en una sola fila. Con el
   logo y los margenes eso exige una ventana de 1200 px: por debajo los
   enlaces se comprimen, "Cotizar Gratis" parte su texto en dos renglones
   y "Promocion" se monta sobre el logo. A 1150 px entraba por 13 px,
   margen que cualquier diferencia de fuentes se come, asi que el corte
   va en 1200. Antes eran seis enlaces y por eso 768 px alcanzaba.
   Solo se adelanta el comportamiento del menu: el resto de reglas de movil
   (tamanos de titulo, hero en una columna) siguen en su corte de 768 px,
   porque a 1000 px si hay espacio para el diseno de escritorio. */

@media (max-width: 1200px) {
    :where(.bw-wizard-skin) .mobile-menu-btn {
        display: flex;
    }

    :where(.bw-wizard-skin) nav {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--light-color);
        padding: 24px;
        border-bottom: 1px solid var(--border-color);
        box-shadow: var(--shadow-lg);
        transform: translateY(-110%);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
        z-index: 99;
    }

    :where(.bw-wizard-skin) nav.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    :where(.bw-wizard-skin) nav ul {
        flex-direction: column;
        gap: 18px;
        align-items: stretch;
        text-align: center;
    }

    :where(.bw-wizard-skin) nav ul li a {
        display: block;
        padding: 6px 0;
        font-size: 16px;
    }

    :where(.bw-wizard-skin) .contact-button,
    :where(.bw-wizard-skin) .edunex-link,
    :where(.bw-wizard-skin) .plataformas-link {
        display: block !important;
        text-align: center;
    }
}

/* Las tablas de los articulos no caben en la pantalla de un telefono.
   Sin esto empujan toda la pagina y aparece el desplazamiento horizontal:
   el lector tiene que mover el dedo para leer cualquier parrafo. Asi la
   tabla se desplaza sola dentro de su propia caja. */
:where(.bw-wizard-skin) .blog-article table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    :where(.bw-wizard-skin) .blog-article table {
        font-size: 14px;
    }
}

/* ============================================== */
/* BANDA DE IMAGEN DE LAS TARJETAS DE SERVICIO    */
/* ============================================== */
/* Todas las tarjetas llevan una banda de la misma altura. Si la foto existe
   la cubre; si todavia no se ha subido, el onerror quita el <img> y queda el
   icono sobre el degradado. Asi la grilla no queda despareja mientras se
   completan las fotos, y nunca aparece el icono de imagen rota. */

:where(.bw-wizard-skin) .service-media {
    position: relative;
    aspect-ratio: 16 / 10;
    margin-bottom: 22px;
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(.bw-wizard-skin) .service-media.grad-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
:where(.bw-wizard-skin) .service-media.grad-2 { background: linear-gradient(135deg, #ff4b5c 0%, #ff9a44 100%); }
:where(.bw-wizard-skin) .service-media.grad-3 { background: linear-gradient(135deg, #2979ff 0%, #00d4ff 100%); }

:where(.bw-wizard-skin) .service-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* El icono de respaldo tiene su propia capa por el hover de la tarjeta;
       sin esto se dibujaria encima de la foto. */
    z-index: 2;
}

/* El icono vive debajo de la foto: solo se ve cuando no hay foto.
   Sobre el degradado va en blanco, que es el contraste correcto. */
:where(.bw-wizard-skin) .service-media .service-icon {
    /* Anula el recuadro de 80px del icono suelto: aqui el fondo lo pone
       la banda, no el icono. */
    width: auto;
    height: auto;
    margin: 0;
    background: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    opacity: 0.92;
}

:where(.bw-wizard-skin) .service-media .service-icon svg {
    width: 56px;
    height: 56px;
}

/* Foto opcional en las tarjetas del blog. Mismo criterio que en las
   tarjetas de servicio: si el archivo no existe, el onerror quita el <img>
   y queda el emoji sobre el degradado. */
:where(.bw-wizard-skin) .blog-card-image {
    overflow: hidden;
}

:where(.bw-wizard-skin) .blog-card-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 2;
}

:where(.bw-wizard-skin) .blog-card-emoji {
    line-height: 1;
}