/* ==========================================================================
   Inicio como una sola superficie.
   Un fondo fijo para toda la página (rejilla de puntos + manchas azul y verde
   que se mueven despacio + puntos que se encienden), secciones transparentes
   encima, la barra de navegación integrada y todas las tarjetas con el mismo
   vidrio de las tarjetas de fuentes del hero (.ds-card).

   Solo lo carga home.html, después de su <style>, para ganar en empates sin
   tocar pricing.css (que también usan /precios/ y /planes/).
   Las manchas son círculos de un solo color difuminados (no degradados CSS).
   ========================================================================== */

:root{
  --hb-bg:#070b16;
  --hb-dot:rgba(255,255,255,.10);
  --hb-glass:rgba(255,255,255,.04);
  --hb-glass-hover:rgba(255,255,255,.06);
  --hb-glass-border:rgba(255,255,255,.09);
  --hb-glass-border-hover:rgba(96,165,250,.32);
  --hb-glass-shadow:0 14px 30px -18px rgba(0,0,0,.6);
  --hb-blur:blur(16px) saturate(140%);
  --hb-blue:#3b82f6;
  --hb-green:#22c55e;
  --hb-spark-blue:#60a5fa;
  --hb-spark-green:#4ade80;
  --hb-glow-a:.30;
  --hb-glow-b:.18;
  --hb-glow-c:.16;
  --hb-header:rgba(7,11,22,.62);
}
[data-theme="light"]{
  --hb-bg:#f4f8fc;
  --hb-dot:rgba(15,23,42,.10);
  --hb-glass:rgba(255,255,255,.62);
  --hb-glass-hover:rgba(255,255,255,.8);
  --hb-glass-border:rgba(15,23,42,.10);
  --hb-glass-border-hover:rgba(37,99,235,.35);
  --hb-glass-shadow:0 14px 30px -18px rgba(15,23,42,.22);
  --hb-spark-blue:#2563eb;
  --hb-spark-green:#16a34a;
  --hb-glow-a:.20;
  --hb-glow-b:.13;
  --hb-glow-c:.11;
  --hb-header:rgba(244,248,252,.72);
}

/* ---------- Fondo único ---------- */
[data-theme] body{background:var(--hb-bg);}
body:has(.hb-ambient) .main-wrapper{background:transparent;}   /* inicio con sesión abierta */

.hb-ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--hb-bg);}
.hb-dots{
  position:absolute;inset:0;
  background-image:radial-gradient(var(--hb-dot) 1px,transparent 1.4px);
  background-size:34px 34px;
}
.hb-glow{position:absolute;border-radius:50%;filter:blur(100px);will-change:transform;animation:hb-drift 24s ease-in-out infinite;}
.hb-glow--a{width:560px;height:560px;background:var(--hb-blue);opacity:var(--hb-glow-a);top:-180px;right:3%;}
.hb-glow--b{width:440px;height:440px;background:var(--hb-green);opacity:var(--hb-glow-b);bottom:-160px;left:5%;animation-duration:28s;animation-delay:-9s;}
.hb-glow--c{width:380px;height:380px;background:var(--hb-blue);opacity:var(--hb-glow-c);top:42%;left:-150px;animation-duration:32s;animation-delay:-17s;}
@keyframes hb-drift{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(44px,-30px) scale(1.07);}
  66%{transform:translate(-32px,26px) scale(.95);}
}

/* Puntos de la rejilla que se encienden en verde y azul */
.hb-spark{
  position:absolute;
  left:calc(var(--gx) * 34px + 17px);top:calc(var(--gy) * 34px + 17px);
  width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:var(--c);box-shadow:0 0 10px var(--c);
  opacity:0;transform:scale(.4);
  animation:hb-spark 8s ease-in-out infinite;animation-delay:var(--d);
}
.hb-spark--g{--c:var(--hb-spark-green);}
.hb-spark--b{--c:var(--hb-spark-blue);}
@keyframes hb-spark{
  0%,100%{opacity:0;transform:scale(.4);}
  10%{opacity:1;transform:scale(1);}
  28%{opacity:.8;transform:scale(1);}
  44%{opacity:0;transform:scale(.5);}
}

/* ---------- Secciones transparentes (sin cortes de color) ---------- */
.jh-hero,.features,.src-section,.cmp-section,.pg-section,.ref-section,.hf-faq-section,.ds-section,.pf-footer,
[data-theme="light"] .jh-hero,[data-theme="light"] .features,[data-theme="light"] .src-section,
[data-theme="light"] .cmp-section,[data-theme="light"] .pg-section,[data-theme="light"] .ds-section{background:transparent;}
.features::before,.features::after,
[data-theme="light"] .features::before,[data-theme="light"] .features::after{display:none;}
.pf-footer{border-top-color:var(--hb-glass-border);}

/* ---------- Barra de navegación integrada ---------- */
.public-header{background:transparent;border-bottom-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
.public-header.scrolled{
  background:var(--hb-header);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--hb-glass-border);
  box-shadow:0 12px 30px -22px rgba(0,0,0,.7);
}

/* ---------- Vidrio común (el de las tarjetas de fuentes) ---------- */
.feat-card,.src-card,.cmp-panel,.ref-card,.hf-faq,.hb-note,.pg-toggle,.pf-social-link,
[data-theme="light"] .feat-card,[data-theme="light"] .src-card,[data-theme="light"] .cmp-panel--without,
[data-theme="light"] .cmp-panel--with,[data-theme="light"] .ref-card,[data-theme="light"] .hf-faq{
  background:var(--hb-glass);
  border:1px solid var(--hb-glass-border);
  backdrop-filter:var(--hb-blur);-webkit-backdrop-filter:var(--hb-blur);
  box-shadow:var(--hb-glass-shadow);
}
.feat-card{border-radius:16px;position:relative;}
.feat-card:hover,.src-card:hover,.hf-faq:hover{background:var(--hb-glass-hover);}
.feat-card:hover,[data-theme="light"] .feat-card:hover{border-color:var(--hb-glass-border-hover);}
.hf-faq{border-radius:14px;}

/* Los paneles de la comparación conservan su color de significado en el borde */
.cmp-panel--without,[data-theme="light"] .cmp-panel--without{border-color:rgba(248,113,113,.24);}
.cmp-panel--with,[data-theme="light"] .cmp-panel--with{border-color:rgba(59,130,246,.34);box-shadow:var(--hb-glass-shadow),0 20px 50px -24px rgba(59,130,246,.35);}
.ref-card,[data-theme="light"] .ref-card{border-color:rgba(59,130,246,.34);}

/* Planes: mismo vidrio, sin tocar pricing.css */
.pg-section{--pg-surface-1:var(--hb-glass);--pg-border-1:var(--hb-glass-border);}
.pg-section .pg-card,[data-theme="light"] .pg-section .pg-card{background:var(--hb-glass);backdrop-filter:var(--hb-blur);-webkit-backdrop-filter:var(--hb-blur);}
[data-theme="light"] .pg-section .pg-card--popular{background:var(--hb-glass-hover);}

/* El botón de referidos usa .pg-cta fuera de .pg-section y se quedaba sin fondo */
.ref-card .pg-cta--primary{background:var(--hb-blue);color:#fff;border-radius:12px;box-shadow:0 12px 28px -10px rgba(59,130,246,.55);}
.ref-card .pg-cta--primary:hover{background:#2563eb;color:#fff;}

.hb-note{max-width:640px;margin:2rem auto 0;text-align:center;padding:1.1rem 1.4rem;border-radius:14px;}

/* ---------- Puntos de estado que laten ---------- */
/* Fuentes de "Cobertura": cada punto con su color, latiendo a destiempo */
.src-dot{position:relative;}
.src-dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid var(--src);opacity:0;
  animation:hb-ring 3s ease-out infinite;
}
.src-card:nth-child(2) .src-dot::after{animation-delay:.5s;}
.src-card:nth-child(3) .src-dot::after{animation-delay:1s;}
.src-card:nth-child(4) .src-dot::after{animation-delay:1.5s;}
.src-card:nth-child(5) .src-dot::after{animation-delay:2s;}
.src-card:nth-child(6) .src-dot::after{animation-delay:2.5s;}

/* Tarjetas de funciones: indicador "activo" como en el diagrama del hero */
.feat-card::after{
  content:"";position:absolute;top:20px;right:20px;width:7px;height:7px;border-radius:50%;
  background:var(--hb-spark-green);animation:hb-pulse 2.6s ease-out infinite;
}
.feat-card:nth-child(even)::after{background:var(--hb-spark-blue);animation-name:hb-pulse-b;animation-delay:.6s;}
.feat-card:nth-child(3)::after{animation-delay:1.2s;}
.feat-card:nth-child(5)::after{animation-delay:1.8s;}

/* Etiquetas de sección con el mismo punto "en vivo" del badge del hero */
.src-eyebrow,.ds-eyebrow,.ref-badge{display:inline-flex;align-items:center;gap:8px;}
.src-eyebrow::before,.ds-eyebrow::before,.ref-badge::before{
  content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--hb-spark-green);animation:hb-pulse 2.4s ease-out infinite;
}

@keyframes hb-ring{0%{transform:scale(.5);opacity:.9;}100%{transform:scale(2.2);opacity:0;}}
@keyframes hb-pulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.55);}
  70%{box-shadow:0 0 0 7px rgba(74,222,128,0);}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}
}
@keyframes hb-pulse-b{
  0%{box-shadow:0 0 0 0 rgba(96,165,250,.55);}
  70%{box-shadow:0 0 0 7px rgba(96,165,250,0);}
  100%{box-shadow:0 0 0 0 rgba(96,165,250,0);}
}

/* ---------- Celular: menos carga para el teléfono ---------- */
@media (max-width:768px){
  .hb-glow{filter:blur(70px);animation:none;}
  .hb-glow--a{width:340px;height:340px;top:-120px;right:-80px;}
  .hb-glow--b{width:300px;height:300px;bottom:-100px;left:-60px;}
  .hb-glow--c{width:240px;height:240px;}
  .hb-sparks .hb-spark:nth-child(n+9){display:none;}
}

/* ---------- Movimiento reducido: todo quieto ---------- */
@media (prefers-reduced-motion:reduce){
  .hb-glow,.hb-spark,.src-dot::after,.feat-card::after,
  .src-eyebrow::before,.ds-eyebrow::before,.ref-badge::before{animation:none;}
  .hb-spark{opacity:.55;transform:none;}
}