/********** Template CSS **********/

:root {

    /* --- Colores de marca --- */
    --primary: #9333ea;
    --primary-dark: #7c3aed;
    --secondary: #a855f7;
    --purple-light: #c084fc;
    --purple-soft: #e9d5ff;
    --success: #22c55e;

    /* --- Colores de fondo oscuro --- */
    --dark: #09090f;
    --dark-soft: #130d25;

    /* --- Texto --- */
    --text-light: #ffffff;
    --text-soft: #d4d4d8;
    --text-muted: #a1a1aa;

    /* --- Radios --- */
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 28px;

    /* --- Espaciado --- */
    --spacing-sm: 20px;
    --spacing-md: 40px;
    --spacing-lg: 80px;

    /* --- Transiciones --- */
    --transition-fast: .25s ease;
    --transition-main: .35s ease;

    /* --- Sombras --- */
    --shadow-premium: 0 20px 45px rgba(0,0,0,0.25);
    --shadow-glow:    0 20px 60px rgba(147,51,234,0.25);

    /* --- Gradiente principal --- */
    --bg-premium:
        linear-gradient(
            135deg,
            #09090f 0%,
            #130d25 50%,
            #1a1036 100%
        );

    /* -----------------------------------------------
       [F2-1] ESCALA DE Z-INDEX SEMÁNTICA
       Escala: contenido → sticky → dropdown →
               overlay → modal → toast/spinner
       Todos los valores anteriores hardcoded han sido
       mapeados a estos tokens manteniendo su orden
       relativo exacto.
    ----------------------------------------------- */
    --z-content:   1;      /* elementos dentro de flujo normal (owl center) */
    --z-raised:    3;      /* secciones ligeramente elevadas (.facts, .hero-content) */
    --z-sticky:    100;    /* back-to-top, elementos flotantes secundarios */
    --z-fab:       200;    /* botones flotantes de acción (WhatsApp) */
    --z-navbar:    300;    /* navbar fijo y topbar */
    --z-dropdown:  400;    /* dropdowns, search modal */
    --z-modal:     500;    /* modales de Bootstrap */
    --z-toast:     600;    /* spinner de carga — siempre encima de todo */

    /* -----------------------------------------------
       [F2-2] TOKENS DE OPACIDAD BLANCA
       Dos grupos:

       · glass-*     → superficies y bordes de UI oscura (dark cards,
                        inputs, separadores). Opacidades bajas 3–12%.
       · white-text-* → texto blanco con distintos niveles de énfasis
                        sobre fondos oscuros. Opacidades 70–90%.

       Los tokens heredados (--white-soft, --dark-card, --border-glass)
       se mantienen apuntando a los nuevos para no romper código externo
       que ya los use.
    ----------------------------------------------- */

    /* Superficies y fondos de glass cards */
    --glass-3:   rgba(255,255,255,0.03);   /* grid decorativo hero */
    --glass-4:   rgba(255,255,255,0.04);   /* btn-outline fondo sutil */
    --glass-5:   rgba(255,255,255,0.05);   /* dark-card, mini-cards */
    --glass-6:   rgba(255,255,255,0.06);   /* cards principales, dashboard */
    --glass-8:   rgba(255,255,255,0.08);   /* borders, badges, hover states */
    --glass-12:  rgba(255,255,255,0.12);   /* btn-outline border */
    --glass-15:  rgba(255,255,255,0.15);   /* toggler border */
    --glass-18:  rgba(255,255,255,0.18);   /* topbar btn border, topbar glow */
    --glass-75:  rgba(255,255,255,0.75);   /* value-card fondo claro (sección light) */

    /* Texto blanco sobre fondos oscuros */
    --white-text-70:  rgba(255,255,255,0.70);  /* párrafos en dark cards */
    --white-text-72:  rgba(255,255,255,0.72);  /* subtítulos de sección */
    --white-text-90:  rgba(255,255,255,0.90);  /* nav links */

    /* Aliases de compatibilidad — apuntan a los tokens nuevos */
    --white-soft:   var(--glass-8);
    --dark-card:    var(--glass-5);
    --border-glass: var(--glass-8);
}

/* ==================================================
   GLOBAL RESET
================================================== */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body{
    font-family: 'Nunito', sans-serif;
    background: var(--dark, #09090f); /* [F1-3] fallback añadido */
    color: var(--text-light, #ffffff); /* [F1-3] fallback añadido */
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

/* ==================================================
   GLOBAL SPACING SYSTEM
================================================== */

.section-padding{
    padding: 120px 0;
}

.section-padding-sm{
    padding: 80px 0;
}

.section-padding-lg{
    padding: 160px 0;
}

/* ==================================================
   GLOBAL CARD SYSTEM
================================================== */

.card-premium{
    position: relative;
    background: var(--glass-6);
    border: 1px solid var(--glass-8);
    border-radius: 28px;
    padding: 40px;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease; /* [F3-3] era: all */
    box-shadow: var(--shadow-premium, 0 20px 45px rgba(0,0,0,0.25));
}
/* [F3-2] Safari necesita prefijo; Firefox sin soporte recibe fondo opaco */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .card-premium {
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
    }
}
@supports not (backdrop-filter: blur(1px)) {
    .card-premium { background: rgba(15,10,30,0.92); }
}

.card-premium:hover{
    transform: translateY(-8px);
    box-shadow: var(--shadow-glow, 0 20px 60px rgba(147,51,234,0.25)); /* [F1-3] fallback */
}

/* ==================================================
   GLOBAL BUTTON SYSTEM
================================================== */

.btn-premium{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 34px;
    border-radius: 16px;
    border: none;
    font-weight: 700;
    transition: transform .3s ease, box-shadow .3s ease; /* [F3-3] era: all */
}

/* PRIMARY */

.btn-primary-premium{
    background: var(--bg-premium, linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%)); /* [F1-3] fallback */
    color: white;
}

.btn-primary-premium:hover{
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(147,51,234,.35);
    color: white;
}

/* OUTLINE */

.btn-outline-premium{
    border: 1px solid var(--glass-12);
    background: var(--glass-4);
    color: white;
}

.btn-outline-premium:hover{
    background: var(--glass-8);
    color: white;
}

/* ==================================================
   GLOBAL TITLES
================================================== */

.section-label{
    color: var(--purple-light);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 18px;
}

.section-title-global{
    font-size: clamp(2.2rem,5vw,4rem);
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 24px;
}

.section-subtitle{
    color: var(--text-soft);
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 760px;
}

/* ==================================================
   EFFECTS SYSTEM
================================================== */

.glow-purple{
    box-shadow: 0 20px 60px rgba(147,51,234,.25);
}

.glass-effect{
    background: var(--glass-5);
    border: 1px solid var(--glass-8);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .glass-effect {
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
    }
}
@supports not (backdrop-filter: blur(1px)) {
    .glass-effect { background: rgba(15,10,30,0.92); }
}

/*** Spinner ***/
.spinner {
    width: 40px;
    height: 40px;
    background: var(--primary);
    margin: 100px auto;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
    0% {
        -webkit-transform: perspective(120px)
    }
    50% {
        -webkit-transform: perspective(120px) rotateY(180deg)
    }
    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
}

@keyframes sk-rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: var(--z-toast); /* [F2-1] era 99999 */
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

/*** Heading ***/

/* [F1-2] Eliminados los !important de font-weight.
   Razón: bloqueaban cualquier override contextual en cards, hero o dark mode.
   Si Bootstrap sobreescribe estos valores en tu proyecto, aumenta la especificidad
   usando "body h1, body h2" en lugar de volver a poner !important. */

h1,
h2,
.fw-bold {
    font-weight: 800;
}

h3,
h4,
.fw-semi-bold {
    font-weight: 700;
}

h5,
h6,
.fw-medium {
    font-weight: 600;
}

/* Headline */
.enterprise-title {
  margin-bottom: 22px;
  line-height: 1.25;
}

/* Supporting text */
.enterprise-subtitle {
  margin-bottom: 36px;
}

/* Features row */
.enterprise-features-horizontal {
  margin-top: 48px;
  margin-bottom: 24px;
  padding-left: 0;
}

/*** Hosting _ Logos ***/
.enterprise-features-horizontal li {
  background: transparent;
  box-shadow: none;
  padding: 0 18px;
}

.enterprise-features-horizontal li:not(:last-child) {
  border-right: 1px solid #e5e7eb;
}
.enterprise-features-horizontal li {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}

.enterprise-features-horizontal li:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  background-color: #f8fafc;
}

.enterprise-features-horizontal li i {
  transition: transform 0.25s ease, color 0.25s ease;
}

.enterprise-features-horizontal li:hover i {
  transform: scale(1.15);
  color: #9333ea;
}

/*** Button ***/
.btn {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    transition: .5s;
}

.btn-primary,
.btn-secondary {
    color: #FFFFFF;
    box-shadow: inset 0 0 0 50px transparent;
}

/* [F1-4] Corregido color: #ebe3e3 → color: #ffffff
   El valor anterior (#ebe3e3) era un blanco roto fuera de paleta,
   probablemente un error tipográfico. */
.btn-primary:hover {
    color: #ffffff;
    box-shadow: inset 0 0 0 0 var(--primary);
}

.btn-secondary:hover {
    box-shadow: inset 0 0 0 0 var(--secondary);
}

.btn-square {
    width: 36px;
    height: 36px;
}

.btn-sm-square {
    width: 30px;
    height: 30px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

/* =========================================
   PREMIUM TOPBAR
   [F1-1] Bloques duplicados fusionados en uno solo.
   El archivo original tenía dos bloques .topbar-premium:
   el primero definía background, border, box-shadow y estilos de hijos;
   el segundo sobreescribía position, z-index y padding.
   Ahora todo está en un único bloque ordenado.
========================================= */

.topbar-premium{
    /* Posicionamiento */
    position: relative;
    z-index: var(--z-navbar); /* [F2-1] era 10000 */

    /* Espaciado */
    padding: 6px 0;

    /* Visual */
    background:
        radial-gradient(
            circle at top left,
            rgba(139,92,246,0.18),
            transparent 35%
        ),
        var(--bg-premium, linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%)); /* [F1-3] fallback */

    border-bottom: 1px solid rgba(168,85,247,0.10);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .topbar-premium {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
}
@supports not (backdrop-filter: blur(1px)) {
    .topbar-premium { background: rgba(9,9,15,0.98); }
}

/* ICONOS */
.topbar-premium i{
    color: var(--purple-light);
}

/* BOTONES REDES */
.topbar-premium .btn-outline-light{
    border-color: var(--glass-18);
    color: white;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; /* [F3-3] era: all */
}

.topbar-premium .btn-outline-light:hover{
    background: rgba(96,165,250,0.15);
    border-color: rgba(96,165,250,0.4);
    color: #9333ea;
    transform: translateY(-2px);
}

/*** Navbar ***/

.navbar {
    height: 90px;
    position: relative; /* fluye dentro del hero, debajo del topbar (antes: fixed, encimaba el logo sobre el topbar) */
    width: 100%;
    z-index: var(--z-navbar);
    background: transparent !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* [F3-3] era: all */
}

.modal {
    z-index: var(--z-modal); /* [F2-1] era 20000 */
}

/* LINKS */
.navbar-dark .navbar-nav .nav-link {
    font-family: 'Nunito', sans-serif;
    position: relative;
    margin-left: 25px;
    padding: 30px 0;
    color: var(--white-text-90);
    font-size: 18px;
    font-weight: 600;
    outline: none;
    transition: .3s;
}

/* HOVER */
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--purple-light);
}

/* LINE EFFECT */
.navbar-dark .navbar-nav .nav-link::before {
    position: absolute;
    content: "";
    width: 0;
    height: 2px;
    bottom: -1px;
    left: 50%;
    background: #a855f7;
    transition: .3s;
}

.navbar-dark .navbar-nav .nav-link:hover::before,
.navbar-dark .navbar-nav .nav-link.active::before {
    width: 100%;
    left: 0;
}

/* LOGO */
.navbar-brand img {
    margin-top: 10px;
}

/* TOGGLER */
.navbar-dark .navbar-toggler {
    color: white;
    border-color: var(--glass-15);
}

/* DROPDOWN */
.dropdown-menu {
    background: rgba(20,20,30,0.96);
    border-radius: 16px;
    border: 1px solid var(--glass-6);
    padding: 10px;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .dropdown-menu {
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
    }
}

.dropdown-item {
    color: white;
    border-radius: 10px;
    transition: .3s;
}

.dropdown-item:hover {
    background: rgba(168,85,247,0.15);
    color: var(--purple-light);
}

/* MOBILE */
@media (max-width: 991.98px) {
    .navbar {
        background: rgba(10,10,20,0.96) !important;
    }
    @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
        .navbar {
            -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
        }
    }

    .navbar-collapse {
        padding-top: 20px;
    }

    .navbar-dark .navbar-nav .nav-link {
        padding: 12px 0;
        color: white;
    }
}

/*** Section Title ***/
.section-title::before {
    position: absolute;
    content: "";
    width: 150px;
    height: 5px;
    left: 0;
    bottom: 0;
    background: var(--primary);
    border-radius: 2px;
}

.section-title.text-center::before {
    left: 50%;
    margin-left: -75px;
}

.section-title.section-title-sm::before {
    width: 90px;
    height: 3px;
}

.section-title::after {
    position: absolute;
    content: "";
    width: 6px;
    height: 5px;
    bottom: 0px;
    background: #FFFFFF;
    -webkit-animation: section-title-run 5s infinite linear;
    animation: section-title-run 5s infinite linear;
}

.section-title.section-title-sm::after {
    width: 4px;
    height: 3px;
}

.section-title.text-center::after {
    -webkit-animation: section-title-run-center 5s infinite linear;
    animation: section-title-run-center 5s infinite linear;
}

.section-title.section-title-sm::after {
    -webkit-animation: section-title-run-sm 5s infinite linear;
    animation: section-title-run-sm 5s infinite linear;
}

@-webkit-keyframes section-title-run {
    0% {left: 0; } 50% { left : 145px; } 100% { left: 0; }
}
@keyframes section-title-run {
    0% {left: 0; } 50% { left : 145px; } 100% { left: 0; }
}

@-webkit-keyframes section-title-run-center {
    0% { left: 50%; margin-left: -75px; } 50% { left : 50%; margin-left: 45px; } 100% { left: 50%; margin-left: -75px; }
}
@keyframes section-title-run-center {
    0% { left: 50%; margin-left: -75px; } 50% { left : 50%; margin-left: 45px; } 100% { left: 50%; margin-left: -75px; }
}

@-webkit-keyframes section-title-run-sm {
    0% {left: 0; } 50% { left : 85px; } 100% { left: 0; }
}
@keyframes section-title-run-sm {
    0% {left: 0; } 50% { left : 85px; } 100% { left: 0; }
}

/* =========================================
   PREMIUM PRICING SECTION
========================================= */

.pricing-section-premium::before{
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -200px;
    right: -120px;
    background: rgba(168,85,247,0.12);
    border-radius: 50%;
    filter: blur(90px);
}

.enterprise-title{
    color: white;
}

.pricing-section-premium{
    position: relative;
    overflow: hidden; /* contiene el ::before decorativo (right:-120px) que causaba scroll horizontal */
    background: var(--bg-premium, linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%));
    color: white;
}

.enterprise-subtitle-premium{
    color: var(--white-text-72);
    font-size: 1.1rem;
    max-width: 760px;
    margin: 0 auto;
}

/* =========================================
   VALUE SECTION PREMIUM
========================================= */

.value-section-premium{
    background: var(--bg-premium, linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%));
    position: relative;
    color: white;
}

/* Headings dentro de secciones oscuras — Bootstrap sobreescribe el color heredado
   con su propio valor por defecto. Esta regla lo corrige de forma permanente
   para todas las secciones con fondo var(--bg-premium), sin parchear el HTML. */
.pricing-section-premium h1,
.pricing-section-premium h2,
.pricing-section-premium h3,
.pricing-section-premium h4,
.pricing-section-premium h5,
.pricing-section-premium h6,
.value-section-premium h1,
.value-section-premium h2,
.value-section-premium h3,
.value-section-premium h4,
.value-section-premium h5,
.value-section-premium h6,
.section-dark h1, .section-dark h2, .section-dark h3,
.section-dark h4, .section-dark h5, .section-dark h6,
.section-soft h1, .section-soft h2, .section-soft h3,
.section-soft h4, .section-soft h5, .section-soft h6 {
    color: white;
}

/* -----------------------------------------
   [F3-1] VALUE CARD — BASE COMPARTIDA
   Propiedades de layout, radio, padding y
   transición que son iguales en ambos temas.
   Siempre se usa junto a un modificador.
   HTML: <div class="value-card-premium value-card-premium--light">
         <div class="value-card-premium value-card-premium--dark">
----------------------------------------- */

.value-card-premium{
    border-radius: 24px;
    padding: 40px 28px;
    height: 100%;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; /* [F3-3] era: all */
}

.value-card-premium:hover{
    transform: translateY(-8px);
}

/* -----------------------------------------
   VARIANTE LIGHT — para .value-section (fondo oscuro, card blanca)
   Texto oscuro sobre fondo blanco translúcido.
   Úsala cuando la sección tenga fondo var(--bg-premium).
----------------------------------------- */

.value-card-premium--light{
    background: var(--glass-75);
    border: 1px solid rgba(168,85,247,0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.04);
}

.value-card-premium--light:hover{
    box-shadow: 0 20px 45px rgba(168,85,247,.12);
    border-color: rgba(168,85,247,.20);
}

.value-card-premium--light i{
    color: var(--primary);
    font-size: 2.7rem;
}

.value-card-premium--light h5{
    font-weight: 700;
    margin-bottom: 14px;
    color: #111827;
}

.value-card-premium--light p{
    color: #6b7280;
    line-height: 1.7;
}

/* -----------------------------------------
   VARIANTE DARK — para .pricing-section (card glass sobre fondo oscuro)
   Texto claro sobre superficie translúcida oscura.
   Úsala dentro de bloques con fondo var(--bg-premium).
----------------------------------------- */

.value-card-premium--dark{
    background: var(--glass-6);
    border: 1px solid var(--glass-8);
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

.value-card-premium--dark:hover{
    box-shadow: 0 20px 45px rgba(168,85,247,.18);
    border-color: rgba(168,85,247,.25);
}

.value-card-premium--dark i{
    color: var(--purple-light);
    font-size: 2.7rem;
}

.value-card-premium--dark h5{
    font-weight: 700;
    margin-bottom: 14px;
    color: white;
}

.value-card-premium--dark p{
    color: var(--white-text-70);
    line-height: 1.7;
}

/* ==========================================
   PREMIUM HOSTING CAROUSEL
========================================== */

.pricing-carousel .owl-stage {
    display: flex;
    align-items: stretch;
}

.pricing-carousel .owl-item {
    display: flex;
    height: auto;
}

.pricing-item {
    width: 100%;
    height: 100%;
}

.pricing-carousel .card {
    position: relative;
    border: none;
    border-radius: 24px;
    overflow: hidden;
    background: #ffffff;
    transition: transform .35s ease, box-shadow .35s ease; /* [F3-3] era: all */
    width: 100%;
    height: 100%;
    box-shadow:
        0 10px 35px rgba(0,0,0,0.05),
        0 2px 10px rgba(0,0,0,0.04);
}

.pricing-carousel .card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 20px 45px rgba(0,0,0,0.08),
        0 5px 18px rgba(0,0,0,0.06);
}

.pricing-carousel .card-header {
    border: none;
    padding: 45px 30px 25px;
    background: var(--bg-premium, linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%)); /* [F1-3] fallback */
}

.plan-icon {
    width: 82px;
    height: 82px;
    border-radius: 20px;
    background: var(--bg-premium, linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%)); /* [F1-3] fallback */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    box-shadow: 0 10px 30px rgba(15,23,42,.18);
}

.plan-icon i {
    font-size: 34px;
    color: #fff;
}

.pricing-carousel h4 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.plan-price {
    font-size: 3rem;
    font-weight: 800;
    color: #9333ea;
    line-height: 1;
}

.plan-price small {
    font-size: .95rem;
    font-weight: 500;
    color: #6c757d;
}

.pricing-carousel .card-body {
    padding: 10px 35px 35px;
    display: flex;
    flex-direction: column;
}

.pricing-list {
    margin-top: 10px;
    flex-grow: 1;
}

.pricing-list li {
    padding: 14px 0;
    border-bottom: 1px solid #eef2f7;
    font-size: 15px;
    color: #495057;
}

.pricing-carousel .btn {
    margin-top: auto;
    border-radius: 14px;
    padding: 14px;
    font-weight: 700;
    font-size: 15px;
}

.featured-plan {
    border: 2px solid #9333ea;
    box-shadow:
        0 18px 40px rgba(13,110,253,.15),
        0 8px 20px rgba(13,110,253,.10);
}

.featured-plan::before {
    content: "RECOMENDADO";
    position: absolute;
    top: 18px;
    right: -38px;
    background: #9333ea;
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 40px;
    transform: rotate(45deg);
    letter-spacing: 1px;
}

#planes {
    background:
        radial-gradient(circle at top left, #ede5ff 0%, #f0eaff 40%, #f5f0ff 100%);
    padding-bottom: 0 !important;
    position: relative;
}
/* Degradado de cierre: transición suave del fondo claro al oscuro de la sección siguiente */
#planes::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to bottom, transparent, rgba(9,9,15,0.08));
    pointer-events: none;
}

/* ==================================================
   FIX LEGIBILIDAD — SECCIÓN DE PLANES (fondo claro)
   La sección .pricing-section-premium fue diseñada para
   fondo oscuro (texto blanco), pero #planes la pinta clara.
   Estos overrides (con especificidad de ID) corrigen TODOS
   los textos a colores oscuros legibles sobre fondo claro.
   Las tarjetas internas conservan su propio diseño oscuro.
================================================== */

/* Encabezado de la sección */
#planes .enterprise-title{
    color: #1a1036; /* morado muy oscuro, casi negro */
}
#planes .enterprise-subtitle-premium{
    color: #4b4060; /* gris-morado para el subtítulo */
}
#planes .section-label{
    color: var(--primary); /* morado de marca para "NUESTROS PLANES" */
}
/* El h5.section-label recibe white de .pricing-section-premium h5.
   Usamos el selector de elemento para ganar la cascada. */
#planes h5.section-label{
    color: #1a1036;
}
/* La nota inferior de Zoho también va oscura */
#planes > .container > p.white-text-72{
    color: #4b4060 !important;
}

/* Las TARJETAS sí mantienen fondo oscuro (glass) → su texto sigue blanco.
   Reforzamos para asegurar contraste dentro de cada card. */
#planes .pricing-card-premium{
    background: var(--bg-premium, linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%));
    border: 1px solid rgba(168,85,247,.20);
}
#planes .pricing-card-premium.pricing-featured{
    border: 1px solid rgba(168,85,247,.55);
}
#planes .pricing-card-premium h5{
    color: white;
}
#planes .pricing-card-premium .price-amount{
    color: white;
}
#planes .pricing-card-premium .white-text-72{
    color: var(--white-text-72) !important;
}

/* Franja empresarial — ahora es .enterprise-strip-full fuera de #planes */

#planes .container {
    max-width: 1450px;
}

.pricing-carousel .owl-stage-outer {
    padding: 25px 10px 40px;
}

/* .pricing-carousel .card::after eliminado — el pseudo-elemento tenía
   background: var(--bg-premium) con inset:0, lo que cubría visualmente
   todo el contenido de las cards de precios con un overlay oscuro opaco.
   pointer-events:none lo hacía indetectable en tests de clic pero visible. */

.whatsapp-float {
    will-change: transform;
}

/*** Service ***/
.service-item {
    position: relative;
    height: 100%;
    min-height: 360px;
    padding: 40px 30px 80px;
    transition: .5s;
    background: #f8f9fa;
}

.service-item .service-icon {
    margin: 0 auto 25px;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 6px;
    transform: rotate(-45deg);
}

.service-item .service-icon i {
    transform: rotate(45deg);
    font-size: 28px;
}

.service-item h4 {
    margin-bottom: .5rem;
}

.service-item h3 {
    font-size: 1.1rem;
    margin-bottom: .75rem;
}

.service-item p {
    margin-bottom: 0;
}

.service-item a.btn {
    position: absolute;
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    opacity: 0;
    transition: .3s;
}

.service-item:hover a.btn {
    opacity: 1;
}

/*** Testimonial ***/
.testimonial-carousel .owl-dots {
    margin-top: 15px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: #DDDDDD;
    border-radius: 2px;
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    width: 30px;
    background: var(--primary);
}

.testimonial-carousel .owl-item.center {
    position: relative;
    z-index: var(--z-content); /* [F2-1] era 1 */
}

.testimonial-carousel .owl-item .testimonial-item {
    transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-item {
    background: #FFFFFF;
    box-shadow: 0 0 30px #DDDDDD;
}
/* Texto oscuro cuando la tarjeta central pasa a fondo blanco */
.testimonial-carousel .owl-item.center .testimonial-item,
.testimonial-carousel .owl-item.center .testimonial-item div {
    color: #1a1036;
}
.testimonial-carousel .owl-item.center .testimonial-item small {
    color: var(--primary);
}
.testimonial-carousel .owl-item.center .testimonial-item h4 {
    color: var(--primary);
}
.testimonial-carousel .owl-item.center .testimonial-item .border-bottom {
    border-color: #e5e7eb !important;
}

/*** Team ***/
.team-social {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .5s;
}

.team-social a.btn {
    position: relative;
    margin: 0 3px;
    margin-top: 100px;
    opacity: 0;
}

.team-item:hover {
    box-shadow: 0 0 30px #DDDDDD;
}

.team-item:hover .team-social {
    background: rgba(9, 30, 62, .7);
}

.team-item:hover .team-social a.btn:first-child {
    opacity: 1;
    margin-top: 0;
    transition: .3s 0s;
}

.team-item:hover .team-social a.btn:nth-child(2) {
    opacity: 1;
    margin-top: 0;
    transition: .3s .05s;
}

.team-item:hover .team-social a.btn:nth-child(3) {
    opacity: 1;
    margin-top: 0;
    transition: .3s .1s;
}

.team-item:hover .team-social a.btn:nth-child(4) {
    opacity: 1;
    margin-top: 0;
    transition: .3s .15s;
}

.team-item .team-img img,
.blog-item .blog-img img  {
    transition: .5s;
}

.team-item:hover .team-img img,
.blog-item:hover .blog-img img {
    transform: scale(1.15);
}

/*** Miscellaneous ***/

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: var(--z-sticky); /* [F2-1] era 99 */
}

.facts {
    position: relative;
    padding-top: 140px;
    background-color: transparent;
    z-index: var(--z-raised); /* [F2-1] era 3 */
}

/*** Miscellaneous Whatsapp***/
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25D366;
    color: #fff;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    z-index: var(--z-fab); /* [F2-1] era 999 */
    box-shadow: 0 4px 10px rgba(0,0,0,.25);
    transition: transform .3s ease;
}

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

/* ===== HERO BACKGROUND ===== */

.hero-gears{
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at top left,
        rgba(139,92,246,0.35),
        transparent 30%),

        radial-gradient(circle at bottom right,
        rgba(168,85,247,0.25),
        transparent 30%),

        var(--bg-premium, linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%)); /* [F1-3] fallback */

    color: white;
}

/* El .container dentro del hero debe centrarse con su margin auto normal.
   Antes .hero-gears tenía display:flex, lo que convertía al .container en
   flex-item y anulaba su centrado horizontal (contenido pegado a la izquierda).
   Forzamos aquí el centrado y padding lateral porque el bootstrap.min.css
   personalizado del proyecto puede no estar aplicando los valores estándar. */
.hero-gears > .container{
    position: relative;
    z-index: var(--z-raised);
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
    width: 100%;
}
@media (min-width: 1200px){
    .hero-gears > .container{ max-width: 1140px; }
}
@media (min-width: 992px) and (max-width: 1199.98px){
    .hero-gears > .container{ max-width: 960px; }
}
@media (min-width: 768px) and (max-width: 991.98px){
    .hero-gears > .container{ max-width: 720px; }
}

/* ===== GRID EFFECT ===== */

.hero-grid{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.25;
    background-image:
        linear-gradient(var(--glass-3) 1px, transparent 1px),
        linear-gradient(90deg, var(--glass-3) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

/* ===== HERO CONTENT ===== */

.hero-content{
    padding-top: 40px;
    position: relative;
    z-index: var(--z-raised); /* [F2-1] era 2 */
}

/* Altura del hero descontando navbar (90px). Antes la fila usaba min-vh-100
   pero con el navbar ya dentro del flujo eso forzaba scroll extra. */
.hero-row{
    min-height: calc(100vh - 90px);
}

/* ===== BADGE ===== */

.hero-badge{
    display: inline-block;
    background: var(--glass-8);
    border: 1px solid var(--glass-8);
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    color: white;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .hero-badge {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}

/* ===== TITLE ===== */

.hero-title{
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -2px;
    color: white;
}

/* ===== DESCRIPTION ===== */

.hero-description{
    font-size: 1.2rem;
    line-height: 1.8;
    color: #d4d4d8;
    max-width: 550px;
}

/* ===== BENEFITS ===== */

.hero-benefits{
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

.benefit-item{
    color: #e4e4e7;
    font-weight: 500;
}

.benefit-item i{
    color: #a855f7;
    margin-right: 8px;
}

/* ===== MAIN BUTTON ===== */

.btn-main:hover{
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(147,51,234,0.4);
    color: white;
}

/* ===== PRICE ===== */

.starting-price{
    color: #d4d4d8;
    font-size: 1rem;
}

.starting-price span{
    color: white;
    font-size: 2.2rem;
    font-weight: 800;
}

/* ===== DASHBOARD ===== */

.hero-dashboard{
    position: relative;
    background: var(--glass-6);
    border: 1px solid var(--glass-8);
    border-radius: 30px;
    padding: 40px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.35);
    transition: transform 0.4s ease, box-shadow 0.4s ease; /* [F3-3] era: all */
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .hero-dashboard {
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
    }
}
@supports not (backdrop-filter: blur(1px)) {
    .hero-dashboard { background: rgba(15,10,30,0.95); }
}

.hero-dashboard:hover{
    transform: translateY(-10px);
    box-shadow: 0 30px 80px rgba(168,85,247,0.25);
}

/* ===== GLOW ===== */

.dashboard-glow{
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(168,85,247,0.25);
    border-radius: 50%;
    top: -120px;
    right: -100px;
    filter: blur(40px);
}

/* ===== STATUS ===== */

.server-online{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(34,197,94,0.15);
    color: #86efac;
    padding: 10px 18px;
    border-radius: 50px;
    font-weight: 600;
}

/* ===== PULSE DOT ===== */

.pulse-dot{
    width: 10px;
    height: 10px;
    background: #22c55e;
    border-radius: 50%;
    display: inline-block;
    animation: pulse 1.5s infinite;
}

@keyframes pulse{
    0%{
        opacity: 1;
        transform: scale(1);
    }
    50%{
        opacity: 0.4;
        transform: scale(1.5);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== DASHBOARD GRID ===== */

.dashboard-content{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-top: 40px;
}

/* ===== MINI CARDS ===== */

.mini-card{
    background: var(--glass-5);
    border: 1px solid var(--glass-6);
    border-radius: 20px;
    padding: 30px 20px;
}

.mini-card-title{
    color: var(--purple-light);
    margin-bottom: 10px;
    font-weight: 600;
}

.mini-card h2{
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: white;
}

.mini-card p{
    color: #d4d4d8;
    margin: 0;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 991px){
    .hero-title{
        font-size: 3rem;
    }
    .hero-dashboard{
        margin-top: 60px;
    }
    .dashboard-content{
        grid-template-columns: 1fr;
    }
    .hero-content{
        padding-top: 180px;
    }
}

/* =========================================
   NAVBAR SCROLL EFFECT
========================================= */

.navbar.scrolled{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(10,10,20,0.92) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .navbar.scrolled {
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }
}

/* =========================================
   FIX SEARCH MODAL FULLSCREEN
========================================= */

.modal-fullscreen {
    background: transparent !important;
}

.modal-fullscreen .modal-content {
    background: var(--bg-premium, linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%)); /* [F1-3] fallback */
    border: none !important;
    box-shadow: none !important;
}

.search-modal-premium {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at top left,
            rgba(139,92,246,0.18),
            transparent 35%
        ),
        var(--bg-premium, linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%)); /* [F1-3] fallback */
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .search-modal-premium {
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }
}

.search-modal-premium .modal-header {
    padding: 30px 40px;
}

.search-modal-premium .btn-close {
    opacity: 1;
    filter: invert(1);
    transform: scale(1.2);
}

.search-group-premium {
    max-width: 700px;
    width: 100%;
}

.search-input-premium {
    height: 70px;
    font-size: 1.1rem;
    background: var(--glass-6);
    border: 1px solid rgba(168,85,247,0.25);
    color: white;
    border-radius: 18px 0 0 18px;
    padding-left: 24px;
}

.btn-search-premium {
    width: 80px;
    border-radius: 0 18px 18px 0;
    background: var(--bg-premium, linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%));
    border: none;
    color: white;
}

/* ==================================================
   GLOBAL PREMIUM SECTIONS
================================================== */

.section-dark{
    background: var(--bg-premium, linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%)); /* [F1-3] fallback */
    color: white;
}

.section-soft{
    background: var(--bg-premium, linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%)); /* [F1-3] fallback */
    color: white;
}

.section-light-premium{
    background: var(--bg-premium, linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%)); /* [F1-3] fallback */
}

/* ==================================================
   PREMIUM PRICING CARDS
================================================== */

.pricing-card-premium{
    position: relative;
    background: var(--glass-6);
    border: 1px solid var(--glass-8);
    border-radius: 28px;
    padding: 45px 35px;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease; /* [F3-3] era: all */
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
    color: white;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .pricing-card-premium {
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
    }
}
@supports not (backdrop-filter: blur(1px)) {
    .pricing-card-premium { background: rgba(15,10,30,0.95); }
}

.pricing-card-premium:hover{
    transform: translateY(-8px);
    box-shadow: 0 30px 80px rgba(147,51,234,.20);
}

.pricing-card-premium h5{
    color: white;
    font-weight: 700;
}

.pricing-card-premium p{
    color: #d4d4d8;
}

.pricing-card-premium h3{
    color: white;
    font-size: 3rem;
    font-weight: 800;
}

.pricing-card-premium ul li{
    padding: 10px 0;
    color: #e4e4e7;
}

.pricing-featured{
    border: 1px solid rgba(168,85,247,.35);
    box-shadow: 0 20px 60px rgba(168,85,247,.25);
}

/* ==================================================
   TESTIMONIAL PREMIUM
================================================== */

.testimonial-item{
    background: linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%);
    border: 1px solid rgba(168,85,247,.18);
    border-radius: 24px;
    overflow: hidden;
    color: white;
    transition: transform .35s ease, box-shadow .35s ease;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .testimonial-item {
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
    }
}
@supports not (backdrop-filter: blur(1px)) {
    .testimonial-item { background: rgba(15,10,30,0.95); }
}

.testimonial-item:hover{
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(147,51,234,.20);
}

.testimonial-item small{
    color: var(--purple-light);
}

.testimonial-item .border-bottom{
    border-color: var(--glass-8);
}

/* ==================================================
   PREMIUM FOOTER
================================================== */

.footer-premium{
    background: var(--bg-premium, linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%)); /* [F1-3] fallback */
    color: white;
    border-top: 1px solid var(--glass-6);
}

.footer-premium p,
.footer-premium a{
    color: #d4d4d8;
}

.footer-premium a:hover{
    color: var(--purple-light);
}


/* ==================================================
   FASE 4 — REDISEÑO MARKETING: NUEVAS SECCIONES
   Componentes añadidos para el rediseño orientado a
   conversión. Coherentes con el sistema de tokens.
================================================== */

/* --- btn-main: estado base (antes solo tenía :hover) --- */
.btn-main{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 16px;
    border: none;
    font-weight: 700;
    color: white;
    background: var(--primary, #9333ea);
    box-shadow: 0 10px 30px rgba(147,51,234,.25);
    transition: transform .3s ease, box-shadow .3s ease;
}
.btn-main:hover{
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(147,51,234,0.4);
    color: white;
}
/* Variante 30% más pequeña — usada en el navbar */
.btn-main--sm{
    padding: 10px 22px;
    border-radius: 11px;
    gap: 6px;
}
/* Botón dentro de tarjeta oscura: fondo blanco con texto oscuro para contrastar */
.pricing-card-premium .btn-main{
    background: #ffffff;
    color: #1a1036;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.pricing-card-premium .btn-main:hover{
    background: #f0e6ff;
    color: #1a1036;
    box-shadow: 0 14px 32px rgba(147,51,234,.30);
}

/* --- helper de texto translúcido (uso fuera de var en HTML) --- */
.white-text-72{
    color: var(--white-text-72);
}

/* --- TRUST BAR --- */
.trust-bar{
    background: #0d0a1a;
    border-top: 1px solid var(--glass-8);
    border-bottom: 1px solid var(--glass-8);
    padding: 40px 0;
}
.trust-stat span{
    display: block;
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--purple-light);
    line-height: 1.1;
}
.trust-stat small{
    color: var(--white-text-72);
    font-size: .95rem;
}

/* --- FEATURE BLOCK (dominios + correo) --- */
.feature-block{
    background: var(--glass-6);
    border: 1px solid var(--glass-8);
    border-radius: var(--radius-lg);
    padding: 48px 40px;
}
.feature-block h3{
    color: white;
    font-weight: 800;
    margin: 18px 0 12px;
}
.feature-icon{
    font-size: 2.8rem;
    color: var(--purple-light);
}
.domain-input{
    height: 56px;
    border: 1px solid var(--glass-8);
    background: var(--glass-5);
    color: white;
    border-radius: 14px 0 0 14px;
    padding-left: 18px;
}
.domain-input::placeholder{ color: var(--text-muted); }
.domain-search .btn-main{
    border-radius: 0 14px 14px 0;
}

/* --- PRICING FEATURES (lista con check) --- */
.pricing-features li{
    padding: 9px 0;
    color: #e4e4e7;
    display: flex;
    align-items: flex-start;
}
.pricing-features i{
    color: var(--success);
    margin-top: 3px;
}

/* --- STEP NUMBER (cómo funciona) --- */
.step-number{
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--bg-premium);
    border: 1px solid rgba(168,85,247,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--purple-light);
}

/* --- SERVICE FEATURE ICON --- */
.service-feature-icon{
    font-size: 2.4rem;
    color: var(--primary);
    display: block;
    margin-bottom: 14px;
}

/* Tarjetas de features (sección "Infraestructura") — fondo oscuro sólido.
   Usan .pricing-card-premium pero sobre fondo blanco el glass translúcido
   no contrasta; necesitan el mismo bg-premium sólido que las de precios. */
.service-item.pricing-card-premium{
    background: var(--bg-premium, linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%));
    background: linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%);
    border: 1px solid rgba(168,85,247,.18);
    min-height: auto; /* reset del min-height del .service-item original */
    padding: 36px 28px;
}
.service-item.pricing-card-premium h5{
    color: white;
}
.service-item.pricing-card-premium p{
    color: var(--text-soft, #d4d4d8);
}
.service-item.pricing-card-premium .service-feature-icon{
    color: var(--purple-light, #c084fc);
}

/* --- BADGE "MÁS CONTRATADO" --- */
/* bg-primary de Bootstrap usa color hardcoded en el .min.css personalizado
   (rgb(6,163,218) cyan/azul). Usamos clase propia para control total. */
.badge-featured{
    display: inline-block;
    background: #9333ea; /* var(--primary) con fallback hardcoded */
    background: var(--primary, #9333ea);
    color: #ffffff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    border-radius: 50px;
    white-space: nowrap;
}

/* --- PRICE BLOCK (mensual grande + anual pequeño) --- */
.price-block{
    line-height: 1.1;
}
.price-amount{
    font-size: 2.6rem;
    font-weight: 800;
    color: white;
}
.price-amount small{
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--white-text-72);
}
.price-period{
    font-size: 1rem;
    color: var(--white-text-72);
    font-weight: 600;
}
.price-annual{
    margin-top: 8px;
    font-size: .85rem;
    color: var(--purple-light);
    font-weight: 600;
}
.plan-tag{
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    background: rgba(168,85,247,.20);
    color: var(--purple-light);
    border-radius: 8px;
    padding: 2px 8px;
    vertical-align: middle;
    margin-left: 4px;
}

/* --- ENTERPRISE STRIP (franja plan a medida) --- */
/* Versión legacy dentro del container — ya no se usa */
.enterprise-strip{
    background: var(--bg-premium, linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%));
    border: 1px solid rgba(168,85,247,.25);
    border-radius: var(--radius-lg);
    padding: 32px 40px;
}

/* Versión full-width — igual que section-dark, sin márgenes laterales */
.enterprise-strip-full{
    width: 100%;
    background: var(--bg-premium, linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%));
    background: linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%);
    padding: 48px 0;
    border-top: 1px solid rgba(168,85,247,.20);
}

/* --- FINAL CTA --- */
.final-cta{
    background:
        radial-gradient(circle at center, rgba(147,51,234,.18), transparent 60%),
        var(--bg-premium, linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%));
    padding: 90px 0;
    border-top: 1px solid var(--glass-8);
}

/* --- FOOTER CTA BOX (reemplaza bg-primary plano) --- */
.footer-cta-box{
    background: var(--bg-premium, linear-gradient(135deg,#09090f 0%,#130d25 50%,#1a1036 100%));
    border: 1px solid rgba(168,85,247,.25);
    border-radius: var(--radius-lg);
}

/* --- responsive trust stat --- */
@media (max-width: 767px){
    .trust-stat span{ font-size: 1.9rem; }
    .feature-block{ padding: 36px 24px; }
}

/* Fondo lila tenue — mismo degradado que #planes, reutilizable en cualquier sección */
.bg-lila{
    background: radial-gradient(circle at top left, #ede5ff 0%, #f0eaff 40%, #f5f0ff 100%) !important;
}

/* ==================================================
   FIX — FALLBACK DE VISIBILIDAD PARA WOW.js
   La librería WOW.js oculta los elementos .wow (opacity:0)
   hasta que entran al viewport. Si la librería no se
   inicializa (main.js sin new WOW().init(), o el script
   falla al cargar), el contenido queda invisible/difuminado.

   Esta regla garantiza que TODO elemento .wow sea visible
   por defecto. Cuando WOW.js sí funciona, añade la clase
   .animated y toma el control de la animación normalmente.
================================================== */
.wow{
    visibility: visible !important;
    opacity: 1 !important;
    animation-name: none; /* sin animación si la librería no actúa; al activarse, WOW reasigna el nombre */
}
/* Cuando WOW.js sí dispara (añade .animated), se permite la animación */
.wow.animated{
    animation-name: fadeInUp;
}

/* ==================================================
   [F1-5] ACCESIBILIDAD — prefers-reduced-motion
   Usuarios con epilepsia, vértigo o preferencias
   de sistema verán todas las animaciones desactivadas.
   Este bloque va siempre al final del archivo.
================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .pulse-dot {
        animation: none;
    }

    .spinner {
        animation: none;
    }
}