/* ==========================================================================
   ChacoNET · Componentes
   ========================================================================== */

/* ============================ 1. Cabecera ============================ */
.scroll-progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:calc(var(--z-header) + 2);
  background:var(--grad-brand); transform-origin:0 50%; transform:scaleX(0);
  will-change:transform;
}

.site-header{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-header);
  height:var(--header-h);
  display:flex; align-items:center;
  transition:transform var(--d-base) var(--e-out), background-color var(--d-base) var(--e-out),
             border-color var(--d-base) var(--e-out), backdrop-filter var(--d-base) var(--e-out);
  border-bottom:1px solid transparent;
}
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  transition:opacity var(--d-base) var(--e-out);
}
.site-header.is-scrolled{ border-bottom-color:var(--line); }
.site-header.is-scrolled::before{ opacity:1; }
.site-header.is-hidden{ transform:translateY(-102%); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); width:100%; }

.brand{ display:inline-flex; align-items:center; gap:10px; flex:0 0 auto; }
.brand__mark{ width:36px; height:36px; flex:0 0 auto; transition:transform var(--d-slow) var(--e-spring); }
.brand:hover .brand__mark{ transform:rotate(-6deg) scale(1.06); }
.brand__word{
  font-family:var(--font-display); font-size:1.22rem; font-weight:600;
  letter-spacing:-.03em; line-height:1; color:var(--text);
}
.brand__word b{ font-weight:800; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }

.nav{ display:flex; align-items:center; }
.nav__list{ display:flex; align-items:center; gap:2px; }
.nav__link{
  position:relative; display:inline-flex; align-items:center; gap:5px;
  padding:9px 13px; border-radius:var(--r-pill);
  font-size:.875rem; font-weight:500; color:var(--text-2);
  transition:color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
  white-space:nowrap;
}
.nav__link:hover,.nav__link[aria-current="page"]{ color:var(--text); background:var(--card); }
.nav__link[aria-current="page"]::after{
  content:""; position:absolute; left:50%; bottom:2px; translate:-50% 0;
  width:16px; height:2px; border-radius:2px; background:var(--grad-brand);
}
.nav__caret{ width:9px; height:9px; opacity:.6; transition:transform var(--d-base) var(--e-out); }
.nav__item.is-open .nav__caret{ transform:rotate(180deg); }

.header__actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.header__phone{ font-size:.82rem; color:var(--text-2); display:inline-flex; align-items:center; gap:6px; }
.header__phone:hover{ color:var(--text); }
@media (max-width:1180px){ .header__phone{ display:none; } }
@media (max-width:1080px){ .nav,.header__actions .btn--ghost{ display:none; } }

/* --- Mega menú --- */
.mega{
  position:fixed; left:0; right:0; top:var(--header-h);
  z-index:var(--z-menu);
  background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(26px);
  backdrop-filter:saturate(180%) blur(26px);
  border-bottom:1px solid var(--line);
  box-shadow:var(--sh-lg);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out), visibility var(--d-base);
}
.mega.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.mega__inner{ display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:var(--sp-7); padding-block:var(--sp-7); }
.mega__col-title{
  font-size:var(--fs-2xs); font-weight:700; letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--text-3); margin-bottom:var(--sp-4);
}
.mega__links{ display:flex; flex-direction:column; gap:2px; }
.mega__link{
  display:flex; align-items:flex-start; gap:12px; padding:11px 12px;
  border-radius:var(--r-sm); transition:background-color var(--d-fast) var(--e-out);
}
.mega__link:hover{ background:var(--card); }
.mega__link svg{ width:20px; height:20px; flex:0 0 auto; margin-top:2px; color:var(--brand-300); }
.mega__link strong{ display:block; font-size:.92rem; font-weight:600; color:var(--text); }
.mega__link span{ display:block; font-size:.79rem; color:var(--text-3); line-height:1.45; }
.mega__promo{
  border-radius:var(--r-lg); padding:var(--sp-5);
  background:linear-gradient(150deg,rgba(122,91,255,.22),rgba(0,212,255,.10));
  border:1px solid var(--line-2);
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--sp-4);
}
@media (max-width:1080px){ .mega{ display:none; } }

/* --- Hamburguesa + menú móvil --- */
.burger{
  display:none; width:42px; height:42px; border-radius:var(--r-pill);
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  border:1px solid var(--line-2); transition:background-color var(--d-fast) var(--e-out);
}
.burger:hover{ background:var(--card); }
.burger span{ display:block; width:17px; height:1.6px; background:var(--text); border-radius:2px;
  transition:transform var(--d-base) var(--e-spring), opacity var(--d-fast) var(--e-out); }
.burger.is-active span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.burger.is-active span:nth-child(2){ opacity:0; }
.burger.is-active span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }
@media (max-width:1080px){ .burger{ display:inline-flex; } }

.mobile-nav{
  position:fixed; inset:0; z-index:var(--z-menu);
  background:var(--bg-2);
  padding:calc(var(--header-h) + 24px) var(--gutter) var(--sp-8);
  overflow-y:auto;
  opacity:0; visibility:hidden;
  transition:opacity var(--d-base) var(--e-out), visibility var(--d-base);
}
.mobile-nav.is-open{ opacity:1; visibility:visible; }
.mobile-nav__group{ border-bottom:1px solid var(--line); }
.mobile-nav__toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:18px 2px; font-family:var(--font-display); font-size:1.22rem; font-weight:600; letter-spacing:-.02em;
}
.mobile-nav__toggle svg{ width:16px; height:16px; transition:transform var(--d-base) var(--e-out); color:var(--text-3); }
.mobile-nav__group.is-open .mobile-nav__toggle svg{ transform:rotate(180deg); }
.mobile-nav__panel{ overflow:hidden; height:0; transition:height var(--d-base) var(--e-out); }
.mobile-nav__panel ul{ padding-bottom:var(--sp-4); display:flex; flex-direction:column; gap:2px; }
.mobile-nav__panel a{ display:block; padding:11px 2px; font-size:.95rem; color:var(--text-2); }
.mobile-nav__panel a:hover{ color:var(--text); }
.mobile-nav__cta{ margin-top:var(--sp-6); display:flex; flex-direction:column; gap:10px; }
.mobile-nav__link{ padding:18px 2px; font-family:var(--font-display); font-size:1.22rem; font-weight:600; display:block; }

/* ============================ 2. Botones ============================ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:0 22px; height:46px; border-radius:var(--r-pill);
  font-family:var(--font-text); font-size:.92rem; font-weight:600; letter-spacing:-.005em;
  white-space:nowrap; overflow:hidden; isolation:isolate;
  transition:transform var(--d-fast) var(--e-out), box-shadow var(--d-base) var(--e-out),
             background-color var(--d-base) var(--e-out), color var(--d-base) var(--e-out),
             border-color var(--d-base) var(--e-out), opacity var(--d-base) var(--e-out);
}
.btn svg{ width:16px; height:16px; flex:0 0 auto; }
.btn:active{ transform:scale(.972); }
.btn--sm{ height:38px; padding:0 17px; font-size:.84rem; }
.btn--lg{ height:54px; padding:0 30px; font-size:1rem; }
.btn--block{ width:100%; }

.btn--primary{ background:var(--grad-brand); color:#fff; box-shadow:0 10px 30px -12px rgba(122,91,255,.85); }
.btn--primary:hover{ box-shadow:0 18px 46px -14px rgba(122,91,255,1); transform:translateY(-1px); }
.btn--primary::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(120deg,var(--cyan-400),var(--brand-400));
  transition:opacity var(--d-base) var(--e-out);
}
.btn--primary:hover::after{ opacity:1; }

.btn--gold{ background:var(--grad-warm); color:#2B1A00; box-shadow:0 10px 30px -14px rgba(255,201,74,.9); }
.btn--gold:hover{ transform:translateY(-1px); }
.btn--light{ background:#fff; color:#0B0B10; }
.btn--light:hover{ background:#EDEDF2; transform:translateY(-1px); }
.btn--ghost{ background:var(--card); color:var(--text); border:1px solid var(--line-2); }
.btn--ghost:hover{ background:var(--card-hi); border-color:var(--text-4); }
.btn--outline{ border:1px solid var(--line-2); color:var(--text); }
.btn--outline:hover{ background:var(--card); }
.btn--quiet{ color:var(--cyan-300); padding:0; height:auto; }
.btn--quiet:hover{ color:var(--cyan-200); }

/* Destello al pasar el puntero */
.btn--sheen::before{
  content:""; position:absolute; top:0; bottom:0; width:44%; z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translateX(-180%) skewX(-18deg);
}
.btn--sheen:hover::before{ animation:btn-sheen .85s var(--e-out); }
@keyframes btn-sheen{ to{ transform:translateX(320%) skewX(-18deg); } }

.link-arrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.92rem; font-weight:600; color:var(--cyan-300);
}
.link-arrow svg{ width:13px; height:13px; transition:transform var(--d-base) var(--e-spring); }
.link-arrow:hover{ color:var(--cyan-200); }
.link-arrow:hover svg{ transform:translateX(4px); }

.link-underline{ position:relative; }
.link-underline::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--d-base) var(--e-out);
}
.link-underline:hover::after{ transform:scaleX(1); }

/* ============================ 3. Chips / badges ============================ */
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px; border-radius:var(--r-pill);
  background:var(--card); border:1px solid var(--line);
  font-size:var(--fs-xs); font-weight:500; color:var(--text-2);
}
.chip svg{ width:14px; height:14px; color:var(--cyan-300); }
.chip--solid{ background:var(--brand-500); border-color:transparent; color:#fff; }
.chip--gold{ background:rgba(255,201,74,.14); border-color:rgba(255,201,74,.3); color:var(--gold-300); }
.chip--live{ color:#fff; }
.chip--live::before{
  content:""; width:7px; height:7px; border-radius:50%; background:#FF5A5A;
  box-shadow:0 0 0 0 rgba(255,90,90,.7); animation:pulse-dot 2.1s var(--e-out) infinite;
}
@keyframes pulse-dot{
  0%{ box-shadow:0 0 0 0 rgba(255,90,90,.65); }
  70%{ box-shadow:0 0 0 9px rgba(255,90,90,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,90,90,0); }
}

.badge{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:3px 9px; border-radius:6px;
  font-size:var(--fs-2xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--card-hi); color:var(--text-2); border:1px solid var(--line);
}
.badge--hot{ background:rgba(255,201,74,.16); color:var(--gold-300); border-color:rgba(255,201,74,.28); }
.badge--new{ background:rgba(0,212,255,.14); color:var(--cyan-300); border-color:rgba(0,212,255,.26); }
.badge--ok{ background:rgba(60,220,140,.14); color:#7BF0B8; border-color:rgba(60,220,140,.26); }

.tag-flag{ font-size:var(--fs-2xs); color:var(--text-3); letter-spacing:.04em; text-transform:uppercase; font-weight:600; }

/* ============================ 4. Tarjetas ============================ */
.card{
  position:relative; border-radius:var(--r-lg);
  background:var(--card); border:1px solid var(--line);
  padding:var(--sp-5);
  transition:transform var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out),
             background-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.card--pad-lg{ padding:clamp(24px,3vw,40px); }
.card--flush{ padding:0; overflow:hidden; }
.card--glass{
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
}
.card--lift:hover{ transform:translateY(-5px); border-color:var(--line-2); box-shadow:var(--sh-lg); }
.card--ring{ overflow:hidden; }
.card--ring::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(150deg,rgba(255,255,255,.34),transparent 42%,rgba(122,91,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}

/* Foco que sigue al puntero */
.spot{
  position:relative; overflow:hidden;
}
.spot::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(122,91,255,.20),transparent 62%);
  transition:opacity var(--d-base) var(--e-out);
}
.spot:hover::after{ opacity:1; }

.section-head{ display:flex; flex-direction:column; gap:var(--sp-4); max-width:760px; }
.section-head--center{ align-items:center; text-align:center; margin-inline:auto; }
.section-head--split{ flex-direction:row; align-items:flex-end; justify-content:space-between; max-width:none; gap:var(--sp-6); }
@media (max-width:760px){ .section-head--split{ flex-direction:column; align-items:flex-start; } }

/* ============================ 5. Planes ============================ */
.plan{
  position:relative; display:flex; flex-direction:column; gap:var(--sp-5);
  border-radius:var(--r-lg); padding:clamp(22px,2.4vw,30px);
  background:linear-gradient(170deg,var(--card-hi),var(--card) 46%,transparent);
  border:1px solid var(--line);
  transform-style:preserve-3d;
  transition:border-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out),
             transform var(--d-base) var(--e-out);
}
.plan:hover{ border-color:var(--line-2); box-shadow:var(--sh-lg); }
.plan--featured{ border-color:rgba(122,91,255,.5); box-shadow:0 0 0 1px rgba(122,91,255,.22),0 30px 70px -34px rgba(122,91,255,.7); }
.plan--featured::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  background:var(--grad-brand); opacity:.19; filter:blur(22px);
}
/* Encabezado de la tarjeta: el título y el badge nunca deben chocar.
   Se permite envolver y el badge puede partirse en dos líneas. */
.plan__head{
  display:flex; flex-wrap:wrap; align-items:flex-start;
  justify-content:space-between; gap:var(--sp-3);
}
.plan__head > div{ min-width:0; }
.plan__head .badge{ white-space:normal; max-width:100%; text-align:right; }

.plan__speed{ display:flex; align-items:baseline; gap:8px; }
.plan__speed b{
  font-family:var(--font-display); font-size:clamp(2.5rem,4.6vw,3.6rem); font-weight:800;
  line-height:.9; letter-spacing:-.05em; font-variant-numeric:tabular-nums;
}
.plan__speed span{ font-size:.9rem; font-weight:600; color:var(--text-3); letter-spacing:.02em; }
.plan__kind{ font-size:var(--fs-2xs); font-weight:700; letter-spacing:var(--tracking-wide); text-transform:uppercase; }
.plan__kind--fibra{ color:var(--cyan-300); }
.plan__kind--wireless{ color:var(--gold-300); }
.plan__kind--iptv{ color:var(--brand-200); }
.plan__price{ display:flex; flex-direction:column; gap:clamp(10px,1.2vw,16px); padding-block:var(--sp-4); border-block:1px solid var(--line); }
.plan__price-row{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; }
.plan__price-row dt{
  font-size:var(--fs-2xs); font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-3);
}
.plan__price-row dd{
  font-family:var(--font-display); font-weight:700; font-size:1.12rem;
  letter-spacing:-.025em; font-variant-numeric:tabular-nums; line-height:1.2;
}
.plan__price-row--plus dd{ color:var(--gold-300); }
.plan__features{ display:flex; flex-direction:column; gap:11px; flex:1; }
.plan__features li{ display:flex; gap:10px; font-size:.875rem; color:var(--text-2); line-height:1.5; }
.plan__features svg{ width:16px; height:16px; flex:0 0 auto; margin-top:3px; color:var(--cyan-300); }
.plan__actions{ display:flex; gap:10px; }
.plan__actions .btn{ flex:1; }

/* ============================ 6. Bento / features ============================ */
.bento{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(6,1fr); }
.bento__cell{ grid-column:span 2; }
.bento__cell--wide{ grid-column:span 3; }
.bento__cell--full{ grid-column:span 6; }
.bento__cell--tall{ grid-row:span 2; }
@media (max-width:1000px){
  .bento{ grid-template-columns:repeat(4,1fr); }
  .bento__cell{ grid-column:span 2; }
  .bento__cell--wide{ grid-column:span 4; }
  .bento__cell--full{ grid-column:span 4; }
}
@media (max-width:620px){
  .bento{ grid-template-columns:1fr; }
  .bento__cell,.bento__cell--wide,.bento__cell--full{ grid-column:span 1; }
}

.feature{ display:flex; flex-direction:column; gap:var(--sp-3); height:100%; }
.feature__icon{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(150deg,rgba(122,91,255,.28),rgba(0,212,255,.14));
  border:1px solid var(--line-2); color:var(--brand-200);
}
.feature__icon svg{ width:22px; height:22px; }

.stat{ display:flex; flex-direction:column; gap:4px; }
.stat__value{
  font-family:var(--font-display); font-weight:800; letter-spacing:-.045em; line-height:1;
  font-size:clamp(2rem,4.4vw,3.2rem); font-variant-numeric:tabular-nums;
}
.stat__label{ font-size:var(--fs-xs); color:var(--text-3); letter-spacing:.02em; }

.kpi{ display:flex; flex-direction:column; gap:2px; padding:var(--sp-4); border-radius:var(--r-md); background:var(--card); border:1px solid var(--line); }
.kpi b{ font-family:var(--font-display); font-size:1.5rem; font-weight:800; letter-spacing:-.035em; }
.kpi span{ font-size:var(--fs-2xs); color:var(--text-3); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }

/* ============================ 7. Marquesina ============================ */
.marquee{
  position:relative; display:flex; overflow:hidden; gap:var(--sp-4);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee__track{ display:flex; gap:var(--sp-4); flex:0 0 auto; padding-right:var(--sp-4); animation:marquee-x var(--dur,46s) linear infinite; will-change:transform; }
.marquee--reverse .marquee__track{ animation-direction:reverse; }
.marquee--slow .marquee__track{ --dur:76s; }
.marquee--fast .marquee__track{ --dur:30s; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee-x{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

/* ============================ 8. Grilla de canales ============================ */
.chan-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3); border-radius:var(--r-md);
  background:var(--card); border:1px solid var(--line);
  position:sticky; top:calc(var(--header-h) + 10px); z-index:var(--z-sticky);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.search{
  position:relative; flex:1 1 240px; min-width:200px;
}
.search svg{ position:absolute; left:13px; top:50%; translate:0 -50%; width:16px; height:16px; color:var(--text-3); pointer-events:none; }
.search input{
  width:100%; height:42px; padding:0 14px 0 38px; border-radius:var(--r-pill);
  background:var(--bg-2); border:1px solid var(--line); color:var(--text); font-size:.9rem;
  transition:border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.search input::placeholder{ color:var(--text-4); }
.search input:focus{ outline:none; border-color:var(--brand-400); background:var(--bg); }

.seg{ display:inline-flex; padding:3px; border-radius:var(--r-pill); background:var(--bg-2); border:1px solid var(--line); }
.seg button{
  padding:8px 15px; border-radius:var(--r-pill); font-size:.83rem; font-weight:600; color:var(--text-3);
  transition:color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.seg button:hover{ color:var(--text-2); }
.seg button[aria-pressed="true"]{ background:var(--brand-500); color:#fff; }

.chan-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.chan{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:var(--r-md);
  background:var(--card); border:1px solid var(--line);
  transition:transform var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out),
             background-color var(--d-fast) var(--e-out);
}
.chan:hover{ transform:translateY(-3px); border-color:var(--line-2); background:var(--card-hi); }
.chan__logo{
  position:relative; width:52px; height:36px; flex:0 0 auto; border-radius:8px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:.72rem; letter-spacing:-.02em;
  color:#fff; overflow:hidden; text-align:center; line-height:1; padding:0 4px;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
}
.chan__body{ min-width:0; flex:1; }
.chan__name{
  font-size:.845rem; font-weight:600; color:var(--text); line-height:1.28;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.chan__meta{ display:flex; align-items:center; gap:6px; font-size:var(--fs-2xs); color:var(--text-3); }
.chan__num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.chan__plans{ display:flex; gap:3px; }
.dot-plan{ width:6px; height:6px; border-radius:50%; background:var(--text-4); }
.dot-plan.on{ background:var(--cyan-400); }
.dot-plan.on.premium{ background:var(--gold-400); }

.chan-empty{ padding:var(--sp-8) var(--sp-4); text-align:center; color:var(--text-3); }

/* ============================ 9. Tablas ============================ */
.table-wrap{ overflow-x:auto; border-radius:var(--r-md); border:1px solid var(--line); }
table.data{ font-size:.875rem; min-width:520px; }
table.data th,table.data td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--line); }
table.data thead th{
  font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-3); font-weight:700; background:var(--card);
  position:sticky; top:0; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
table.data tbody tr{ transition:background-color var(--d-fast) var(--e-out); }
table.data tbody tr:hover{ background:var(--card); }
table.data tbody tr:last-child td{ border-bottom:0; }

/* ============================ 10. Acordeón ============================ */
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:22px 2px; text-align:left; font-family:var(--font-display);
  font-size:1.05rem; font-weight:600; letter-spacing:-.02em; color:var(--text);
  transition:color var(--d-fast) var(--e-out);
}
.acc__btn:hover{ color:var(--cyan-300); }
.acc__icon{ position:relative; width:16px; height:16px; flex:0 0 auto; }
.acc__icon::before,.acc__icon::after{
  content:""; position:absolute; inset:50% 0 auto auto; width:16px; height:1.6px;
  background:currentColor; border-radius:2px; translate:0 -50%;
  transition:transform var(--d-base) var(--e-out);
}
.acc__icon::after{ transform:rotate(90deg); }
.acc__item.is-open .acc__icon::after{ transform:rotate(0deg); }
.acc__panel{ overflow:hidden; height:0; transition:height var(--d-base) var(--e-out); }
.acc__inner{ padding:0 2px 26px; color:var(--text-2); font-size:.94rem; max-width:70ch; }

/* ============================ 11. Pie ============================ */
.site-footer{
  position:relative; background:var(--bg-2); border-top:1px solid var(--line);
  padding-top:var(--sp-9); padding-bottom:var(--sp-6);
}
.footer__grid{
  display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:var(--sp-7);
  padding-bottom:var(--sp-8);
}
@media (max-width:900px){ .footer__grid{ grid-template-columns:1fr 1fr; gap:var(--sp-6); } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:1fr; } }
.footer__title{ font-size:var(--fs-2xs); font-weight:700; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--text-3); margin-bottom:var(--sp-4); }
.footer__list{ display:flex; flex-direction:column; gap:11px; }
.footer__list a{ font-size:.885rem; color:var(--text-2); transition:color var(--d-fast) var(--e-out); }
.footer__list a:hover{ color:var(--cyan-300); }
.footer__bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-4); padding-top:var(--sp-5); border-top:1px solid var(--line);
  font-size:var(--fs-xs); color:var(--text-3);
}
.footer__social{ display:flex; gap:8px; }
.footer__social a{
  width:38px; height:38px; border-radius:var(--r-pill); display:grid; place-items:center;
  border:1px solid var(--line); color:var(--text-2);
  transition:color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.footer__social a:hover{ color:var(--text); border-color:var(--line-2); transform:translateY(-2px); }
.footer__social svg{ width:17px; height:17px; }

/* ============================ 12. FAB WhatsApp ============================ */
.fab{
  position:fixed; right:22px; bottom:22px; z-index:var(--z-toast);
  display:inline-flex; align-items:center; gap:11px;
  height:52px; padding:0 20px 0 15px; border-radius:var(--r-pill);
  background:#1EBE5D; color:#fff; font-weight:600; font-size:.9rem;
  box-shadow:0 18px 40px -14px rgba(30,190,93,.7);
  transform:translateY(90px) scale(.9); opacity:0;
  transition:transform var(--d-slow) var(--e-spring), opacity var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.fab.is-in{ transform:translateY(0) scale(1); opacity:1; }
.fab:hover{ box-shadow:0 24px 52px -14px rgba(30,190,93,.95); }
.fab svg{ width:22px; height:22px; }
.fab__label{ max-width:0; overflow:hidden; white-space:nowrap; transition:max-width var(--d-slow) var(--e-out); }
@media (hover:hover){ .fab:hover .fab__label{ max-width:180px; } }
@media (max-width:600px){ .fab{ right:14px; bottom:14px; } .fab__label{ display:none; } .fab{ padding:0 15px; } }

/* ============================ 13. Migas / página ============================ */
/* Sub-navegación fija de las páginas de producto (estilo Apple) */
.subnav{
  position:sticky; top:var(--header-h); z-index:calc(var(--z-header) - 2);
  background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}
.subnav__inner{ display:flex; align-items:center; gap:var(--sp-5); height:54px; overflow-x:auto; scrollbar-width:none; }
.subnav__inner::-webkit-scrollbar{ display:none; }
.subnav a{
  position:relative; font-size:.875rem; font-weight:500; color:var(--text-2);
  white-space:nowrap; padding-block:16px; transition:color var(--d-fast) var(--e-out);
}
.subnav a:hover{ color:var(--text); }
.subnav a.is-active{ color:var(--text); }
.subnav a.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--grad-brand); border-radius:2px;
}
.subnav__spacer{ margin-left:auto; display:flex; align-items:center; gap:10px; }
@media (max-width:640px){ .subnav__spacer{ display:none; } }

.page-hero{ padding-top:calc(var(--header-h) + clamp(56px,9vw,120px)); padding-bottom:clamp(40px,6vw,72px); position:relative; overflow:hidden; }
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--text-3); }
.crumbs a:hover{ color:var(--cyan-300); }
.crumbs svg{ width:11px; height:11px; opacity:.5; }

/* ============================ 14. Formulario ============================ */
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:var(--fs-xs); font-weight:600; color:var(--text-2); letter-spacing:.01em; }
.field input,.field textarea,.field select{
  width:100%; padding:13px 15px; border-radius:var(--r-sm);
  background:var(--bg-2); border:1px solid var(--line); color:var(--text); font-size:.925rem;
  transition:border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--brand-400); background:var(--bg); }
.field input::placeholder,.field textarea::placeholder{ color:var(--text-4); }

.note{
  display:flex; gap:12px; padding:15px 17px; border-radius:var(--r-md);
  background:var(--card); border:1px solid var(--line); font-size:.875rem; color:var(--text-2);
}
.note svg{ width:18px; height:18px; flex:0 0 auto; margin-top:2px; color:var(--cyan-300); }
.note--gold{ background:rgba(255,201,74,.09); border-color:rgba(255,201,74,.24); }
.note--gold svg{ color:var(--gold-300); }