/* ==========================================================================
   Biencel — capa "clean"
   Se carga DESPUÉS de styles.css. Convierte el sitio a base blanca:
   mucho aire, tipografía grande, color solo donde hay intención
   (azul = línea nueva · menta = recarga · naranja = promoción).
   Si se quita este archivo (y motion.js), el sitio vuelve al diseño oscuro.
   ========================================================================== */

:root {
  --bg: #FFFFFF;
  --bg-alt: #F5F5F7;
  --surface: #F5F5F7;
  --card: #FFFFFF;
  --text: #1D1D1F;
  --text-2: #5E5E63;
  --text-3: #6E6E73;
  --line: #E3E3E8;

  /* Lo que antes era "sobre oscuro" ahora es texto oscuro sobre claro */
  --on-dark: #1D1D1F;
  --on-dark-2: #5E5E63;
  --line-dark: rgba(0, 0, 0, .08);
  --glass: rgba(255, 255, 255, .72);

  --blue-600: #0B5CE6;
  --blue-700: #0849BA;
  --blue-500: #2F7BFF;
  --blue-400: #0B5CE6;   /* en claro el "azul brillante" se lee mal: se usa el fuerte */
  --promo-500: #FF6B0A;
  --promo-400: #E85D00;
  --promo-600: #C94F00;
  --mint-400: #0A9A6C;
  --mint-500: #14C48A;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .05);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .04), 0 24px 60px rgba(0, 0, 0, .08);
  --glow-blue: var(--shadow-2);
  --glow-promo: var(--shadow-2);

  --font-display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --r-lg: 28px;
  --section-y: clamp(80px, 11vw, 148px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

body { background: var(--bg); color: var(--text); letter-spacing: -.005em; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.035em; }
::selection { background: rgba(11, 92, 230, .14); }
:focus-visible { outline-color: var(--blue-600); }

/* ---------- Tipografía ---------- */
.display { font-size: clamp(44px, 7vw, 88px); line-height: 1; letter-spacing: -.045em; font-weight: 600; }
.h2 { font-size: clamp(34px, 5vw, 64px); line-height: 1.04; letter-spacing: -.04em; }
.lead { color: var(--text-2); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; }
.eyebrow { font-size: 14px; letter-spacing: .01em; text-transform: none; font-weight: 600; color: var(--blue-600); }
.eyebrow::before { display: none; }
.eyebrow--promo, .on-dark .eyebrow--promo { color: var(--promo-600); }
.eyebrow--mint, .on-dark .eyebrow--mint { color: var(--mint-400); }
.on-dark .eyebrow { color: var(--blue-600); }
.section-head--center { text-align: center; justify-items: center; margin-inline: auto; }
.section-head--center .lead { margin-inline: auto; }

/* Nada de texto con degradado ni brillos: color sólido */
.grad-text, .hero-title .grad-text { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--blue-600); animation: none; }
.price-glow { color: var(--promo-500); text-shadow: none; }
.promo-text, .on-dark .promo-text { color: var(--promo-500); }

/* ---------- Botones ---------- */
.btn { font-weight: 500; letter-spacing: -.01em; transition: transform .25s var(--ease-out), background-color .2s, box-shadow .25s, color .2s; }
.btn:hover { transform: none; }
.btn:active { transform: scale(.97); }
.btn--primary { --btn-bg: var(--blue-600); }
.btn--primary:hover { --btn-bg: var(--blue-700); box-shadow: none; }
.btn--promo { --btn-fg: #fff; background: var(--promo-500); }
.btn--promo:hover { background: var(--promo-400); box-shadow: none; }
.btn--recarga { --btn-bg: var(--text); --btn-fg: #fff; }
.btn--recarga:hover { --btn-bg: #000; box-shadow: none; }
.btn--ghost, .btn--ghost-dark { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: rgba(0, 0, 0, .14); }
.btn--ghost:hover, .btn--ghost-dark:hover { --btn-bg: rgba(0, 0, 0, .04); --btn-bd: rgba(0, 0, 0, .2); }
.btn--glow { box-shadow: none; }
.btn--glow::after { display: none; }
.btn-text { color: var(--blue-600); font-weight: 500; }
.btn-text:hover { color: var(--blue-700); }
.link-arrow, .on-dark .link-arrow { color: var(--blue-600); font-weight: 500; }
.badge { background: var(--bg-alt); color: var(--text); letter-spacing: .02em; }
.badge--dark { background: var(--bg-alt); color: var(--text); }
.badge--promo { background: var(--promo-500); color: #fff; }
.chip, .on-dark .chip { background: var(--bg); border-color: var(--line); color: var(--text-2); }

/* ---------- Barra de promoción ---------- */
.promo-bar { background: var(--bg-alt); color: var(--text); animation: none; border-bottom: 1px solid var(--line); }
.promo-bar__pulse { background: var(--promo-500); }
.promo-bar__link { color: var(--promo-600); }
.promo-bar__close { color: var(--text-2); }

/* ---------- Header ---------- */
.site-header, .site-header.is-scrolled {
  background: rgba(255, 255, 255, .78); color: var(--text);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.site-header.is-scrolled { border-bottom-color: rgba(0, 0, 0, .08); }
.brand img { height: 30px; }
.nav__link { color: var(--text-2); font-size: 14px; }
.nav__link:hover { color: var(--text); background: transparent; }
.nav__link[aria-current="page"] { color: var(--text); background: transparent; }
.nav__dot--promo { animation: none; box-shadow: none; }
.burger { border-color: rgba(0, 0, 0, .1); color: var(--text); }
.mobile-menu { background: var(--bg); }
.mobile-menu__item { background: var(--bg-alt); border-color: transparent; color: var(--text); }
.mobile-menu__item .i { color: var(--text-2); }
.mobile-menu__item--linea .i { color: var(--blue-600); }
.mobile-menu__item--recarga .i { color: var(--mint-400); }
.mobile-menu__item--promo { background: #FFF3EA; border-color: transparent; }
.mobile-menu__item--promo .i { color: var(--promo-500); }

/* ---------- Secciones ---------- */
.section--white { background: var(--bg); }
.section--dark { background: var(--bg-alt); color: var(--text); }
.section--dark::before { display: none; }

/* ---------- Hero (páginas internas) ---------- */
.hero, .hero--tech, .hero--compact { background: var(--bg); color: var(--text); padding-block: clamp(56px, 9vw, 120px) clamp(48px, 7vw, 96px); }
.hero__bg, .hero__floor, .hero__network { display: none; }
.hero--compact .hero__inner { justify-items: center; text-align: center; }
.hero--compact .hero__copy { justify-items: center; margin-inline: auto; }
.hero--compact .hero__ctas { justify-content: center; }
.hero__legal { color: var(--text-3); }
.hero-sub { color: var(--text-2); }
.hero-pill { color: var(--promo-600); background: #FFF3EA; border-color: transparent; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 14px; }
.hero-pill b { color: var(--text); border-left-color: rgba(0, 0, 0, .12); }
.hero-pill__dot { animation: none; }
.hero-pill--blue { color: var(--blue-600); background: #EEF4FF; }
.hero-pill--mint { color: var(--mint-400); background: #E6F8F1; }
.hero-price__big { color: var(--promo-500); text-shadow: none; }

/* Holograma de promo y distribuidores: tarjeta blanca flotando en 3D */
.holo-stage__core, .holo-stage__rings, .holo-stage__radar, .holo-stage__wave, .holo-stage__links,
.holo__beam, .holo__circuit, .holo__sheen, .holo__scan { display: none; }
.holo-stage { min-height: 560px; }
.holo__card {
  background: var(--bg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 40px 90px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .05);
}
.holo__tag { color: var(--mint-400); background: #E6F8F1; border-color: transparent; }
.holo__tag i { box-shadow: none; }
.holo__ticks { stroke: rgba(0, 0, 0, .14); }
.holo__track { stroke: var(--bg-alt); }
.holo__arc--base { stroke: #C9D8F5; }
.holo__arc--extra { filter: none; }
.holo__gb strong { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--text); filter: none; }
.holo__gb em { color: #fff; background: var(--promo-500); }
.holo__legend i { background: #C9D8F5; }
.holo__legend i.is-extra { background: var(--blue-600); box-shadow: none; }
.holo__foot { border-top-color: var(--line); }
.holo__price { color: var(--promo-500); text-shadow: none; }
.bubble {
  background: rgba(255, 255, 255, .86); border: 1px solid rgba(0, 0, 0, .06); color: var(--text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
}
.bubble__icon { background: var(--bg-alt); box-shadow: none; }
.bubble__icon .i { color: var(--text); }
.bubble small { color: var(--text-3); }
.panel-stat, .panel-feed li { background: var(--bg-alt); border-color: transparent; }
.panel-stat strong { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--text); }
.panel-chart i, .panel-chart i:last-child { background: var(--mint-500); box-shadow: none; }
.panel-chart i:last-child { background: var(--blue-600); }
.panel-feed__icon { background: #EEF4FF; color: var(--blue-600); }

/* ---------- Marquee ---------- */
.marquee { background: var(--bg); color: var(--text-2); border-color: var(--line); }
.marquee .i { color: var(--text-3); }

/* ---------- Tarjetas ---------- */
.intent { margin-top: 0; padding-top: clamp(24px, 4vw, 48px); }
.intent__title { color: var(--text); font-size: 15px; font-weight: 500; color: var(--text-2); }
.intent-card { background: var(--bg-alt); border: 0; box-shadow: none; border-radius: var(--r-lg); padding: 30px; }
.intent-card::before { display: none; }
a.intent-card:hover, .intent-card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-2); background: var(--bg); }
.intent-card__icon { background: var(--bg); }
.intent-card--promo { color: var(--text); background: #FFF3EA; border: 0; }
.intent-card--promo p { color: var(--text-2); }
.intent-card--promo .intent-card__icon { background: var(--bg); color: var(--promo-500); }
.intent-card--promo .link-arrow { color: var(--promo-600); }
.intent-card__price { color: var(--promo-500); }
.intent-card__price small { color: var(--text-2); }

.promo-card {
  background: var(--bg); border: 0; box-shadow: var(--shadow-1); color: var(--text);
}
.promo-card::before { display: none; }
.promo-card:hover { box-shadow: var(--shadow-2); }
.promo-card__gb s, .promo-card__price small { color: var(--text-3); }
.promo-card__price { background: #FFF3EA; border-color: transparent; }
.promo-card__price .big { color: var(--promo-500); }
.promo-card ul { color: var(--text); }
.promo-card li .i { color: var(--mint-400); }
.countdown { background: #FFF3EA; border-color: transparent; color: var(--promo-600); }

.step-card__n, .on-dark .step-card__n { color: var(--blue-600); }
.on-dark .step-card { border-top-color: var(--text); }

.bento { gap: 16px; }
.bento__item, .bento__item--third, .bento__item--mint { background: var(--bg-alt); border: 0; border-radius: var(--r-lg); padding: clamp(24px, 3vw, 34px); }
.bento__stat { color: #fff; }
.bento__item--dark { background: var(--text); color: #fff; }
.bento__item--dark p, .bento__item--dark h3 { color: #fff; }
.bento__item--dark p { opacity: .72; }
.bento__item--mint { background: #E6F8F1; }

.calc__panel { background: var(--bg-alt); border: 0; }
.calc__panel--result { background: var(--text); color: #fff; }
.calc__panel--result::before { display: none; }
.calc__panel--result .muted, .calc__panel--result small, .calc__rec .price span { color: rgba(255, 255, 255, .66); }
.calc__rec .price { color: #fff; }
.calc__save { background: rgba(20, 196, 138, .14); border-color: transparent; color: #5BE3B3; }
.bar--biencel .bar__fill { background: var(--blue-600); }
.bar--biencel .bar__head strong { color: var(--blue-600); }

.app-showcase__visual::before { background: radial-gradient(circle, rgba(11, 92, 230, .12), transparent 65%); }
.app-showcase__visual img { filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .18)); }
.on-dark .feature-list span { color: var(--text-2); }

.media-card { box-shadow: none; border-radius: var(--r-lg); }
.media-card__tag { background: rgba(255, 255, 255, .86); color: var(--text); }
.media-card__tag .i { color: var(--mint-400); }

.imei-box, .info-card, .form-card { background: var(--bg); border: 0; box-shadow: var(--shadow-1); }
.faq { background: var(--bg); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.faq[open] { box-shadow: none; border-color: var(--line); }
.faq summary { padding-inline: 0; }
.faq__body { padding-inline: 0; }

.recarga-card { background: var(--bg); border: 0; box-shadow: var(--shadow-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
.progress-steps li { color: var(--text-3); }
.progress-steps li::before { background: var(--line); }
.progress-steps li.is-active { color: var(--text); }

.price-list li, .gan-result div { background: var(--bg-alt); border-color: transparent; }
.price-list small { color: var(--text-3); }
.stat { border-left-color: var(--line); }
.earn-card { background: var(--bg); color: var(--text); box-shadow: var(--shadow-2); border: 0; }
.earn-card p { color: var(--text-2); }
.earn-card .bento__icon { background: #E6F8F1; color: var(--mint-400); }
.earn-card .field__label, .earn-card label { color: var(--text); }

.cross-sell { background: var(--bg-alt); color: var(--text); }
.cross-sell p { color: var(--text-2); }

.cta-band { background: var(--bg-alt); color: var(--text); }
.cta-band p { color: var(--text-2); }

.segmented button[aria-checked="true"] { background: var(--text); box-shadow: none; }
.segmented--promo button[aria-checked="true"][data-value="porta"] { background: var(--promo-500); box-shadow: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-alt); color: var(--text-2); font-size: 14px; }
.site-footer__col h2 { color: var(--text); font-weight: 600; }
.site-footer__col a:hover, .site-footer__legal-grid a:hover { color: var(--text); }
.site-footer__col .i { color: var(--text-3); }
.site-footer__legal summary { color: var(--text); }
.site-footer__brand img { height: 36px; }
.site-footer__bottom img { background: transparent; padding: 0; }
.store-badge { background: var(--text); border-color: var(--text); }

/* ---------- Flotantes y móvil ---------- */
.wa-float { box-shadow: 0 10px 26px rgba(0, 0, 0, .14); }
.drawer__scrim { background: rgba(0, 0, 0, .32); }
.drawer__panel { box-shadow: -30px 0 80px rgba(0, 0, 0, .12); }

@media (max-width: 920px) {
  .tabbar { background: rgba(255, 255, 255, .86); border-top: 1px solid rgba(0, 0, 0, .08); }
  .tabbar__item { color: var(--text-3); }
  .tabbar__item[aria-current="page"] { color: var(--text); background: transparent; }
  .tabbar__item[aria-current="page"] .i { color: var(--blue-600); }
  .tabbar__item--recarga[aria-current="page"] .i { color: var(--mint-400); }
  .tabbar__item--promo .i { color: var(--promo-500); }
  .tabbar__badge { border-color: #fff; animation: none; }
  .holo-stage { min-height: 0; }
}

/* Selector "Sí, lo porto": texto legible sobre naranja */
.segmented--promo button[aria-checked="true"][data-value="porta"] small,
.segmented button[aria-checked="true"] small { color: rgba(255, 255, 255, .82); }

/* Tarjetas de plan: sin brillos ni bordes de degradado */
.plan-card { border-color: var(--line); box-shadow: none; }
.plan-card--featured { background: var(--card); border: 1.5px solid var(--blue-600); }
.plan-card--promo { background: var(--card); border: 1.5px solid var(--promo-500); box-shadow: none; }
.plan-card--promo::before, .plan-card--promo::after { display: none; }
.plan-card--featured:hover { border-color: var(--blue-600); }
.plan-card--promo:hover { border-color: var(--promo-500); }

/* Distribuidores */
.hero-title .grad-mint { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--mint-400); animation: none; }
.btn--mint { --btn-bg: var(--text); --btn-fg: #fff; }
.btn--mint:hover { --btn-bg: #000; box-shadow: none; }
.btn--glow-mint { box-shadow: none; }
.btn--glow-mint::after { display: none; }
.hero-title { font-weight: 600; letter-spacing: -.045em; }

/* Banda de foto a todo lo ancho */
.photo-band { padding-block: clamp(24px, 4vw, 48px) var(--section-y); }
.photo-band__media { margin: 0; overflow: hidden; border-radius: clamp(20px, 3vw, 36px); aspect-ratio: 16 / 9; }
.photo-band__media img { width: 100%; height: 115%; object-fit: cover; object-position: 50% 30%; transform: translateY(var(--py, 0px)); will-change: transform; }
.photo-band__copy { display: grid; gap: 14px; max-width: 720px; margin: clamp(28px, 4vw, 44px) auto 0; text-align: center; justify-items: center; }
.compat-photo { width: 100%; max-width: 520px; height: auto; margin-top: 12px; mix-blend-mode: multiply; }
@media (max-width: 640px) { .photo-band__media { aspect-ratio: 4 / 5; } }