/* ==========================================================================
   Pricing "glass" — traducción vanilla del componente PricingGlass
   (React/Tailwind/Framer Motion) a HTML/CSS/JS puro, sobre el stack real
   de Justibot (Django + CSS vanilla). Prefijo pg- para no chocar con las
   clases .plan-card/.plans-grid existentes en el <style> compartido de
   home.html (esas quedan sin usar, no las borré por seguridad).

   Todo color pasa por variables para poder redefinirlas en modo claro
   (ver bloque [data-theme="light"] .pg-section al final).
   ========================================================================== */

.pg-section{
  --pg-ease: cubic-bezier(.23,1,.32,1);
  --pg-accent:#3b82f6;
  --pg-accent-hover:#2563eb;

  --pg-glow: rgba(255,255,255,.05);

  --pg-text:#ffffff;                 /* títulos, precio, nombre popular-tag, texto botón ghost */
  --pg-text-strong: rgba(255,255,255,.8);   /* nombre del plan */
  --pg-text-soft: rgba(255,255,255,.5);     /* descripción de sección, toggle inactivo */
  --pg-text-softer: rgba(255,255,255,.35);  /* moneda, periodo */
  --pg-text-faint: rgba(255,255,255,.3);    /* features tachadas/no incluidas */
  --pg-feature-text: rgba(255,255,255,.72); /* features incluidas */

  --pg-surface-1: rgba(255,255,255,.015);   /* fondo de la card */
  --pg-surface-2: rgba(255,255,255,.05);    /* fondo del toggle */
  --pg-surface-3: rgba(255,255,255,.08);    /* fondo botón ghost */
  --pg-surface-4: rgba(255,255,255,.1);     /* pill del toggle, divider, check, popular-tag, bordes .1 */
  --pg-surface-5: rgba(255,255,255,.14);    /* botón ghost hover */

  --pg-border-1: rgba(255,255,255,.06);     /* borde de card normal */
  --pg-border-3: rgba(255,255,255,.18);     /* borde del pill del toggle */
  --pg-border-popular: rgba(255,255,255,.2);

  --pg-inset: rgba(255,255,255,.12);        /* highlight interior de card */
  --pg-inset-popular: rgba(255,255,255,.4);
  --pg-inset-cta: rgba(255,255,255,.2);

  --pg-shadow-soft: rgba(0,0,0,.35);
  --pg-shadow-mid: rgba(0,0,0,.45);
  --pg-shadow: rgba(0,0,0,.55);
  --pg-shadow-strong: rgba(0,0,0,.6);

  --pg-spotlight: rgba(255,255,255,.13);
  --pg-spin: rgba(255,255,255,.75);

  --pg-save-bg: rgba(255,255,255,.92);
  --pg-save-text:#0a0a0a;

  --pg-cta-primary-bg:#ffffff;
  --pg-cta-primary-bg-hover: rgba(255,255,255,.9);
  --pg-cta-primary-text:#0a0a0a;

  position:relative;
  isolation:isolate;
  padding:96px 0;
  overflow:hidden;
}

.pg-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:900px;height:640px;border-radius:50%;
  background:var(--pg-glow);filter:blur(120px);
  pointer-events:none;z-index:0;
}

.pg-head{position:relative;z-index:2;text-align:center;max-width:640px;margin:0 auto 40px;}
.pg-head h2{font-size:clamp(1.8rem,1.3rem + 2vw,2.6rem);font-weight:800;color:var(--pg-text);letter-spacing:-.02em;margin:0 0 14px;}
.pg-head p{color:var(--pg-text-soft);font-size:1.05rem;line-height:1.6;margin:0;}

/* ---------- Toggle mensual/anual ---------- */
.pg-toggle-wrap{display:flex;justify-content:center;margin-bottom:52px;position:relative;z-index:2;}
.pg-toggle{
  position:relative;display:inline-flex;align-items:center;padding:6px;border-radius:999px;
  background:var(--pg-surface-2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--pg-surface-4);box-shadow:inset 0 1px 4px var(--pg-shadow);
}
.pg-toggle-btn{
  position:relative;z-index:2;padding:11px 26px;border-radius:999px;border:none;background:none;
  font-size:.88rem;font-weight:600;color:var(--pg-text-soft);cursor:pointer;transition:color .3s;
}
.pg-toggle-btn.active{color:var(--pg-text);}
.pg-toggle-save{
  position:absolute;top:-11px;right:-14px;background:var(--pg-save-bg);color:var(--pg-save-text);
  font-size:.6rem;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:999px;
  box-shadow:0 4px 10px var(--pg-shadow-soft);
}
.pg-toggle-pill{
  position:absolute;top:6px;bottom:6px;left:6px;width:calc(50% - 6px);border-radius:999px;
  background:var(--pg-surface-4);border:1px solid var(--pg-border-3);
  box-shadow:0 2px 8px var(--pg-shadow-mid);
  transition:transform .4s var(--pg-ease);z-index:1;
}
.pg-toggle.is-annual .pg-toggle-pill{transform:translateX(100%);}

/* ---------- Grid ---------- */
.pg-grid{
  position:relative;z-index:2;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:24px;align-items:stretch;
}

/* ---------- Card ---------- */
.pg-card{
  position:relative;overflow:hidden;border-radius:28px;
  background:var(--pg-surface-1);
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--pg-border-1);
  box-shadow:inset 0 1px 1px var(--pg-inset), 0 28px 55px -18px var(--pg-shadow);
  display:flex;flex-direction:column;
  transition:transform .4s var(--pg-ease), box-shadow .4s var(--pg-ease), background-color .3s, border-color .3s;
}
.pg-card--popular{
  border-color:var(--pg-border-popular);
  box-shadow:inset 0 1px 1px var(--pg-inset-popular), inset 0 -1px 1px var(--pg-surface-2),
             0 32px 64px -12px var(--pg-shadow-strong), 0 0 80px rgba(59,130,246,.12);
}
@media (min-width:900px){ .pg-card--popular{ transform:translateY(-16px); } }

/* Spotlight que sigue el cursor (JS actualiza --mx/--my) */
.pg-card::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  opacity:0;transition:opacity .5s;
  background:radial-gradient(600px at var(--mx,50%) var(--my,50%), var(--pg-spotlight), transparent 60%);
}
.pg-card:hover::before{opacity:1;}

/* Borde giratorio del plan popular */
.pg-card--popular .pg-spin-border{
  position:absolute;inset:0;z-index:0;border-radius:inherit;padding:1px;pointer-events:none;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  overflow:hidden;
}
.pg-card--popular .pg-spin-border::after{
  content:"";position:absolute;inset:-150%;
  background:conic-gradient(from 0deg, transparent 70%, var(--pg-spin) 100%);
  animation:pg-spin 4s linear infinite;
}
@media (prefers-reduced-motion:reduce){ .pg-card--popular .pg-spin-border::after{animation:none;} }
@keyframes pg-spin{to{transform:rotate(360deg);}}

.pg-noise{
  position:absolute;inset:0;z-index:0;opacity:.03;mix-blend-mode:overlay;pointer-events:none;border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.pg-popular-tag{
  position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2;
  padding:5px 16px;background:var(--pg-surface-4);backdrop-filter:blur(10px);
  border:1px solid var(--pg-surface-4);border-top:none;border-radius:0 0 12px 12px;
  font-size:.68rem;font-weight:600;color:var(--pg-text);letter-spacing:.02em;
}

.pg-body{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;padding:36px 30px;}
.pg-name{font-size:1.1rem;font-weight:600;color:var(--pg-text-strong);letter-spacing:.01em;margin:0 0 16px;}

.pg-price-row{display:flex;align-items:baseline;gap:4px;margin-bottom:6px;}
.pg-currency{color:var(--pg-text-softer);font-size:1.3rem;font-weight:500;}
.pg-price-track{height:52px;overflow:hidden;display:flex;align-items:center;flex-shrink:0;}
.pg-amount{
  display:block;font-size:2.6rem;font-weight:800;color:var(--pg-text);letter-spacing:-.02em;line-height:1;
  transition:opacity .3s var(--pg-ease), transform .3s var(--pg-ease), filter .3s var(--pg-ease);
}
.pg-amount.pg-swap{opacity:0;transform:translateY(16px);filter:blur(3px);}
.pg-amount[data-custom="true"]{font-size:1.7rem;white-space:nowrap;}
.pg-period{color:var(--pg-text-softer);font-size:.92rem;font-weight:500;margin-left:2px;}

.pg-desc{color:var(--pg-text-soft);font-size:.85rem;line-height:1.6;margin:0 0 26px;min-height:40px;}
.pg-divider{width:100%;height:1px;background:var(--pg-surface-4);margin-bottom:26px;}

.pg-features{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:13px;flex:1;}
.pg-features li{display:flex;align-items:flex-start;gap:10px;font-size:.85rem;color:var(--pg-feature-text);font-weight:500;line-height:1.35;}
.pg-check{
  flex-shrink:0;width:19px;height:19px;margin-top:1px;border-radius:50%;
  background:var(--pg-surface-4);border:1px solid var(--pg-surface-4);
  box-shadow:inset 0 1px 1px var(--pg-inset-cta);
  color:var(--pg-text);
  display:flex;align-items:center;justify-content:center;
}
.pg-features li.pg-off{color:var(--pg-text-faint);}
.pg-features li.pg-off .pg-check{background:transparent;box-shadow:none;color:inherit;}

.pg-cta{
  display:block;width:100%;text-align:center;padding:15px;border-radius:16px;
  font-weight:600;font-size:.92rem;text-decoration:none;cursor:pointer;border:1px solid transparent;
  box-shadow:inset 0 1px 1px var(--pg-inset-cta);transition:transform .25s,background-color .25s,color .25s;
}
.pg-cta:hover{transform:scale(1.015);}
.pg-cta--primary{background:var(--pg-cta-primary-bg);color:var(--pg-cta-primary-text);}
.pg-cta--primary:hover{background:var(--pg-cta-primary-bg-hover);}
.pg-cta--ghost{background:var(--pg-surface-3);color:var(--pg-text);border-color:var(--pg-surface-4);}
.pg-cta--ghost:hover{background:var(--pg-surface-5);}
.pg-cta--current{opacity:.55;cursor:default;}
.pg-cta--current:hover{transform:none;}

/* ==========================================================================
   Modo claro
   ========================================================================== */
[data-theme="light"] .pg-section{
  --pg-glow: rgba(37,99,235,.06);

  --pg-text:#0f172a;
  --pg-text-strong: rgba(15,23,42,.85);
  --pg-text-soft: rgba(15,23,42,.55);
  --pg-text-softer: rgba(15,23,42,.4);
  --pg-text-faint: rgba(15,23,42,.32);
  --pg-feature-text: rgba(15,23,42,.75);

  --pg-surface-1: rgba(15,23,42,.02);
  --pg-surface-2: rgba(15,23,42,.045);
  --pg-surface-3: rgba(15,23,42,.05);
  --pg-surface-4: rgba(15,23,42,.08);
  --pg-surface-5: rgba(15,23,42,.12);

  --pg-border-1: rgba(15,23,42,.09);
  --pg-border-3: rgba(15,23,42,.14);
  --pg-border-popular: rgba(37,99,235,.35);

  --pg-inset: rgba(255,255,255,.55);
  --pg-inset-popular: rgba(255,255,255,.7);
  --pg-inset-cta: rgba(255,255,255,.4);

  --pg-shadow-soft: rgba(15,23,42,.14);
  --pg-shadow-mid: rgba(15,23,42,.16);
  --pg-shadow: rgba(15,23,42,.16);
  --pg-shadow-strong: rgba(15,23,42,.2);

  --pg-spotlight: rgba(37,99,235,.08);
  --pg-spin: rgba(37,99,235,.55);

  --pg-save-bg:#0f172a;
  --pg-save-text:#ffffff;

  --pg-cta-primary-bg:#0f172a;
  --pg-cta-primary-bg-hover:#1e293b;
  --pg-cta-primary-text:#ffffff;
}
[data-theme="light"] .pg-card{background:rgba(255,255,255,.55);}
[data-theme="light"] .pg-card--popular{background:rgba(255,255,255,.7);}

@media (max-width:640px){
  .pg-section{padding:64px 0;}
  .pg-card--popular{transform:none;}
}