/* =========================================================================
   RANGO — un diseño por plan. Cada rango suma más color y movimiento:
     0 Free         base, sin cambios
     1 Prueba       verde suave
     2 Básico       azul
     3 Profesional  ámbar + filo de color arriba
     4 Empresarial  violeta + nebulosa que se mueve
     5 Corporativo  verde-oro, el más rico, filo con destello
   Se apoya en las variables que ya usa tu sitio (--gold, --teal, --teal-dark),
   así que títulos, acentos y la tarjeta "Tu plan" cambian solos.
   ========================================================================= */

/* ---- Capa de color difuminado detrás de todo ---- */
body[data-rango]{--aur:0;--c1:#2a8f7a;--c2:#c6942d;--c3:#2563a8;}
body[data-rango]::before{
  content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;
  opacity:var(--aur);filter:blur(70px);transition:opacity .8s ease;
  background:
    radial-gradient(40% 45% at 14% 20%,var(--c1),transparent 70%),
    radial-gradient(38% 42% at 86% 14%,var(--c2),transparent 70%),
    radial-gradient(42% 42% at 72% 92%,var(--c3),transparent 70%);
}

/* ---- 1 · Prueba ---- */
body[data-rango="1"]{
  --aur:.16;--c1:#5fd0b4;--c2:#bfe9dd;--c3:#e6f3ef;
  --gold:#2f9e84;
}

/* ---- 2 · Básico ---- */
body[data-rango="2"]{
  --aur:.24;--c1:#60a5fa;--c2:#93c5fd;--c3:#bae6fd;
  --gold:#2b6cb0;--teal:#2563a8;--teal-dark:#1b4a82;
}

/* ---- 3 · Profesional ---- */
body[data-rango="3"]{
  --aur:.32;--c1:#f0c14b;--c2:#f6a35c;--c3:#fde7a8;
  --gold:#b8791a;--teal:#9a6f1c;--teal-dark:#7a5611;
}

/* ---- 4 · Empresarial ---- */
body[data-rango="4"]{
  --aur:.36;--c1:#a78bfa;--c2:#f0abfc;--c3:#93c5fd;
  --gold:#7c5cd6;--teal:#6d4bb8;--teal-dark:#523593;
}
body[data-rango="4"]::before{animation:rangoDrift 32s ease-in-out infinite alternate;}

/* ---- 5 · Corporativo ---- */
body[data-rango="5"]{--aur:.52;--c1:#14a37f;--c2:#f0c14b;--c3:#1e4078;}
body[data-rango="5"]::before{animation:rangoDrift 26s ease-in-out infinite alternate;}

/* ---- Filo de color arriba (rangos 3, 4 y 5) ---- */
body[data-rango="3"]::after,body[data-rango="4"]::after,body[data-rango="5"]::after{
  content:"";position:fixed;top:0;left:0;right:0;height:3px;z-index:5000;pointer-events:none;
  background:linear-gradient(90deg,var(--c1),var(--c2),var(--c1));background-size:200% 100%;
}
body[data-rango="5"]::after{height:4px;animation:rangoShine 5s linear infinite;}

@keyframes rangoDrift{from{transform:translate3d(-2%,-1%,0) scale(1);}to{transform:translate3d(3%,2%,0) scale(1.08);}}
@keyframes rangoShine{to{background-position:200% 0;}}

@media (prefers-reduced-motion:reduce){
  body[data-rango]::before,body[data-rango]::after{animation:none !important;}
}
@media (max-width:560px){body[data-rango]::before{filter:blur(50px);}}

/* =========================================================================
   AJUSTES CON TU styles.css REAL
   (1) Colores que estaban escritos a mano en tu CSS ahora siguen al rango.
   (2) Empresarial (4) y Corporativo (5) pasan a tema OSCURO con tarjetas de cristal.
   ========================================================================= */
body[data-rango]{--gold-2:#9a6f1c;}
body[data-rango="1"]{--gold-2:#1f7a64;}
body[data-rango="2"]{--gold-2:#1b4a82;}
body[data-rango="3"]{--gold-2:#8a5a0d;}

/* (1) Acentos que usaban dorado fijo */
body[data-rango] .hero h1 em{
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  -webkit-background-clip:text;background-clip:text;
}
body[data-rango] .product-card::before{background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 16%,transparent),transparent 55%);}
body[data-rango] .product-card:hover{border-color:color-mix(in srgb,var(--gold) 45%,var(--line));}
body[data-rango] .product-card.selected{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 18%,transparent),0 18px 36px -18px color-mix(in srgb,var(--gold) 45%,transparent);
}
body[data-rango] .product-card.selected::after{background:linear-gradient(135deg,var(--gold),var(--gold-2));}
body[data-rango] .summary::before{background:radial-gradient(320px 200px at 100% 0%,color-mix(in srgb,var(--gold) 20%,transparent),transparent 65%);}
body[data-rango] button.pay-btn{box-shadow:0 12px 24px -12px color-mix(in srgb,var(--teal) 65%,transparent);}

/* (2) Temas oscuros */
body[data-rango="4"]{
  --base:#0d0b1e;--aur:.6;--c1:#8b5cf6;--c2:#e879f9;--c3:#3b82f6;
  --gold:#c4b5fd;--gold-2:#8b5cf6;--teal:#7c5cd6;--teal-dark:#5b3fb0;
}
body[data-rango="5"]{
  --base:#08130f;--aur:.6;--c1:#14a37f;--c2:#f0c14b;--c3:#1e4078;
  --gold:#f0c14b;--gold-2:#c0923a;--teal:#1f9a7a;--teal-dark:#157a60;
}
body:is([data-rango="4"],[data-rango="5"]){
  background:radial-gradient(600px 300px at 85% -10%,color-mix(in srgb,var(--gold) 22%,transparent),transparent 60%),var(--base);
  color:#ece9f5;
}
body:is([data-rango="4"],[data-rango="5"]) :is(.hero p,.product-desc,.step-title,.foot,.secure-pill,.product-price span){color:#b9bdc6;}
body:is([data-rango="4"],[data-rango="5"]) .brand-mark{background:linear-gradient(135deg,#e9d5ff,var(--gold));}
body:is([data-rango="4"],[data-rango="5"]) .perk{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);box-shadow:none;}
body:is([data-rango="4"],[data-rango="5"]) .product-card{
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
body:is([data-rango="4"],[data-rango="5"]) .product-card:not(.selected){border-color:rgba(255,255,255,.2);}
/* El formulario de pago y las ventanas se quedan claros y legibles */
body:is([data-rango="4"],[data-rango="5"]) :is(.layout,.user-chip,.pf-card){color:var(--ink);}

/* =========================================================================
   LOGO PARA LOS RANGOS OSCUROS (4 Empresarial y 5 Corporativo)
   Rombo con aro fino y una "B" sólida en el centro, dibujado como máscara:
   toma su color de los degradados de abajo, así contrasta con cada fondo.
   ========================================================================= */
body[data-rango="4"]{--logo-a:#f5e9ff;--logo-b:#f0abfc;}   /* lavanda claro → rosa */
body[data-rango="5"]{--logo-a:#b8f5dc;--logo-b:#f0c14b;}   /* menta claro → dorado */

body:is([data-rango="4"],[data-rango="5"]) .brand-mark{
  width:52px !important;height:52px !important;
  clip-path:none !important;border-radius:0 !important;box-shadow:none !important;
  background:linear-gradient(135deg,var(--logo-a),var(--logo-b)) !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M50 2 98 50 50 98 2 50Z M50 9 91 50 50 91 9 50Z M34 28H52C60 28 65 33 65 40 65 45 62 48.5 58 50 63 51.5 67 55.5 67 61 67 69 61 72 52 72H34Z M43 35V46H51C54.5 46 56.5 44 56.5 40.5 56.5 37 54.5 35 51 35Z M43 54V65H52C56 65 58 63 58 59.5 58 56 56 54 52 54Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M50 2 98 50 50 98 2 50Z M50 9 91 50 50 91 9 50Z M34 28H52C60 28 65 33 65 40 65 45 62 48.5 58 50 63 51.5 67 55.5 67 61 67 69 61 72 52 72H34Z M43 35V46H51C54.5 46 56.5 44 56.5 40.5 56.5 37 54.5 35 51 35Z M43 54V65H52C56 65 58 63 58 59.5 58 56 56 54 52 54Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (max-width:560px){
  body:is([data-rango="4"],[data-rango="5"]) .brand-mark{width:44px !important;height:44px !important;}
}