/* ============================================================
   WICOM SAS — Landing Page  |  Material Design v3
   Mobile-First CSS
   ============================================================ */

/* ── 1. RESET & ROOT ──────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  /* MD3 Color Roles */
  --primary:              #0047AB;
  --on-primary:           #FFFFFF;
  --primary-container:    #D8E2FF;
  --on-primary-container: #001A41;
  --primary-dark:         #003580;
  --primary-light:        #4D7FD4;

  --secondary:              #D93B2E;
  --on-secondary:           #FFFFFF;
  --secondary-container:    #FFDAD6;
  --on-secondary-container: #410002;

  /* Tertiary role (M3 spec) */
  --tertiary:               #006B5F;
  --on-tertiary:            #FFFFFF;
  --tertiary-container:     #A6F1E1;
  --on-tertiary-container:  #00201C;

  --surface:               #FDFBFF;
  --on-surface:            #1A1B1E;
  --surface-variant:       #E1E2E8;
  --on-surface-variant:    #44474E;
  /* Surface containers — 5 niveles M3 */
  --surface-container-lowest:  #FFFFFF;
  --surface-container-low:     #F4F3F7;
  --surface-container:         #EEEDF1;
  --surface-container-high:    #E8E7EB;
  --surface-container-highest: #E2E0E5;
  --outline:               #74777F;
  --outline-variant:       #C4C6D0;
  --error:                 #BA1A1A;
  --on-error:              #FFFFFF;
  --error-container:       #FFDAD6;
  --on-error-container:    #410002;

  /* Inverse + scrim + shadow (M3 spec) */
  --inverse-surface:       #313033;
  --inverse-on-surface:    #F4EFF4;
  --inverse-primary:       #A8C4FF;
  --scrim:                 rgba(0,0,0,.32);
  --shadow:                rgba(0,0,0,.15);

  /* State layer opacities (M3 spec) */
  --state-hover:   .08;
  --state-focus:   .10;
  --state-pressed: .12;
  --state-dragged: .16;

  /* RGB equivalents para state-layers via rgba() */
  --primary-rgb:     0,71,171;
  --on-surface-rgb:  26,27,30;

  --whatsapp:              #25D366;
  --whatsapp-dark:         #1EB356;

  --font-heading: 'Outfit', sans-serif;
  --font-body:    'Roboto', sans-serif;

  /* Spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px;

  /* Shape — MD3 */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px;
  --r-xl:24px; --r-2xl:28px; --r-full:100px;

  /* Elevation — MD3 6 niveles (0/1/3/6/8/12dp) */
  --el-0: none;
  --el-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --el-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --el-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);
  --el-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.30);
  --el-5: 0 8px 12px 6px rgba(0,0,0,.15), 0 4px 4px rgba(0,0,0,.30);

  /* Breakpoints MD3 window size classes (referencia) */
  --bp-compact:       0;    /* <600  */
  --bp-medium:      600px;  /* 600-839 */
  --bp-expanded:    840px;  /* 840-1199 */
  --bp-large:      1200px;  /* 1200-1599 */
  --bp-xlarge:     1600px;  /* ≥1600 */

  /* Z-index scale — capas por layer */
  --z-content:    1;
  --z-sticky:   100;
  --z-nav:      200;
  --z-dropdown: 300;
  --z-overlay:  400;
  --z-fab:      500;
  --z-toast:    600;
  --z-skip:    9999;

  --nav-h: 64px;
}

html { scroll-behavior: smooth; }
:target, section[id] { scroll-margin-top: var(--nav-h); }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--on-surface);
  background: var(--surface);
  overflow-x: hidden;
}
img { max-width:100%; height:auto; display:block; }
a   { text-decoration:none; color:inherit; }
ul  { list-style:none; }
address { font-style:normal; }
[hidden] { display:none !important; }

/* Utilidades de visibilidad (reemplazan inline style="display:none" para CSP) */
.is-hidden { display:none; }
.svg-sprite { display:none; }
.visually-hidden {
  position:absolute; left:-9999px; top:-9999px;
  width:1px; height:1px; overflow:hidden;
}
.footer-logo-fallback {
  font-family:var(--font-heading); font-size:1.5rem;
  font-weight:700; color:#fff;
}
.footer-logo-fallback:not(.is-hidden) { display:inline; }
.logo-fallback:not(.is-hidden) { display:flex; }

/* ── Material Symbols — M3 FILL states ──────────────────── */
.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* FILL=1 for active/selected/decorative states */
.nav-link.active .material-symbols-rounded,
.tab-btn.active .material-symbols-rounded,
.mobile-nav-link.active .material-symbols-rounded,
.plan-features .material-symbols-rounded,
.testi-star,
.form-feedback .material-symbols-rounded,
.hero-badge .material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── SVG Brand Icons (reemplazo de Font Awesome) ─────────── */
.icon-svg { width:1.125rem; height:1.125rem; fill:currentColor; flex-shrink:0; display:inline-block; vertical-align:middle; }
.fab-whatsapp .icon-svg { width:1.625rem; height:1.625rem; }
.wa-icon-wrap .icon-svg { width:2rem; height:2rem; }
.footer-social .icon-svg { width:1rem; height:1rem; }
.btn .icon-svg { width:1.1rem; height:1.1rem; }

/* ── Skip-to-Content Link (WCAG) ────────────────────────── */
.skip-link {
  position:absolute; top:-100%; left:var(--sp-4); z-index:var(--z-skip);
  background:var(--primary); color:var(--on-primary);
  padding:var(--sp-3) var(--sp-5); border-radius:0 0 var(--r-md) var(--r-md);
  font-family:var(--font-heading); font-size:.875rem; font-weight:600;
  transition:top .2s ease;
}
.skip-link:focus { top:0; }

/* ── 2. TYPE ──────────────────────────────────────────────── */
h1,h2,h3,h4 { font-family:var(--font-heading); line-height:1.2; }

/* ── MD3 Type scale — roles display/headline/title/body/label ─── */
.display-lg  { font-family:var(--font-heading); font-size:clamp(2.5rem, 4.5vw + 1rem, 3.5625rem); line-height:1.12; font-weight:700; letter-spacing:-.015em; }
.display-md  { font-family:var(--font-heading); font-size:clamp(2rem, 3.2vw + 1rem, 2.8125rem); line-height:1.16; font-weight:700; letter-spacing:0; }
.display-sm  { font-family:var(--font-heading); font-size:clamp(1.75rem, 2.5vw + 1rem, 2.25rem); line-height:1.22; font-weight:700; letter-spacing:0; }
.headline-lg { font-family:var(--font-heading); font-size:2rem;    line-height:1.25; font-weight:700; letter-spacing:0; }
.headline-md { font-family:var(--font-heading); font-size:1.75rem; line-height:1.28; font-weight:700; letter-spacing:0; }
.headline-sm { font-family:var(--font-heading); font-size:1.5rem;  line-height:1.33; font-weight:600; letter-spacing:0; }
.title-lg    { font-family:var(--font-heading); font-size:1.375rem; line-height:1.27; font-weight:600; letter-spacing:0; }
.title-md    { font-family:var(--font-heading); font-size:1rem;    line-height:1.5;  font-weight:600; letter-spacing:.009em; }
.title-sm    { font-family:var(--font-heading); font-size:.875rem; line-height:1.43; font-weight:600; letter-spacing:.006em; }
.body-lg     { font-family:var(--font-body); font-size:1rem;       line-height:1.5;  font-weight:400; letter-spacing:.031em; }
.body-md     { font-family:var(--font-body); font-size:.875rem;    line-height:1.43; font-weight:400; letter-spacing:.018em; }
.body-sm     { font-family:var(--font-body); font-size:.75rem;     line-height:1.33; font-weight:400; letter-spacing:.025em; }
.label-lg    { font-family:var(--font-body); font-size:.875rem;    line-height:1.43; font-weight:500; letter-spacing:.006em; }
.label-md    { font-family:var(--font-body); font-size:.75rem;     line-height:1.33; font-weight:500; letter-spacing:.042em; }
.label-sm    { font-family:var(--font-body); font-size:.6875rem;   line-height:1.45; font-weight:500; letter-spacing:.045em; }

/* ── 3. LAYOUT ────────────────────────────────────────────── */
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 var(--sp-4); }
.section   { padding: var(--sp-16) 0; }
.section--surface { background: var(--surface-container-low); }
.section--dark {
  /* Gradiente oscurecido para garantizar WCAG AA (≥5.2:1) con texto blanco
     en todo el recorrido del degradado, no solo en los extremos. */
  background: linear-gradient(135deg, #000814 0%, #001F4D 55%, var(--primary-dark) 100%);
  color: var(--on-primary);
}
.hide-mobile { display:none; }
@media(min-width:840px){ .hide-mobile { display:inline; } }

/* Section headers */
.section-header { text-align:center; max-width:720px; margin:0 auto var(--sp-10); }
.section-eyebrow {
  display:inline-block; font-family:var(--font-heading); font-size:.875rem;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--primary); margin-bottom:var(--sp-3);
}
/* Eyebrow sobre hero oscuro: #FFB4A8 pasa AA (5.8:1) sobre #001F4D */
.section-eyebrow--light { color:#FFB4A8; }
.section-title {
  font-size: clamp(1.75rem, 4.5vw, 2.5rem); font-weight:700;
  color:var(--on-primary-container); margin-bottom:var(--sp-3);
}
.section-title--white { color:#FFF; }
.section-subtitle { font-size:clamp(1rem, 1.8vw, 1.125rem); color:var(--on-surface-variant); line-height:1.7; }
.section-subtitle--light { color:rgba(255,255,255,.75); }

/* ── 4. BUTTONS ───────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-family:var(--font-heading); font-size:.9375rem; font-weight:600;
  padding:12px 24px; border-radius:var(--r-full); border:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background-color .2s ease;
  white-space:nowrap; min-height:48px; /* M3 touch target ≥48dp */
}
.btn:hover  { transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn .material-symbols-rounded, .btn .fab { font-size:1.1rem; }

.btn-filled       { background:var(--primary); color:var(--on-primary); box-shadow:var(--el-1); }
.btn-filled:hover { background:var(--primary-dark); box-shadow:var(--el-2); }
.btn-filled-white { background:#FFF; color:var(--primary); box-shadow:var(--el-1); }
.btn-filled-white:hover { background:rgba(255,255,255,.9); box-shadow:var(--el-2); }
.btn-filled-secondary       { background:var(--secondary); color:var(--on-secondary); box-shadow:var(--el-1); }
.btn-filled-secondary:hover { background:color-mix(in srgb, var(--secondary) 85%, #000); box-shadow:var(--el-2); }
.btn-tonal        { background:var(--primary-container); color:var(--on-primary-container); }
.btn-tonal:hover  { background:color-mix(in srgb, var(--primary-container) 85%, var(--on-primary-container)); box-shadow:var(--el-1); }
.btn-outlined-white { background:transparent; color:#FFF; border:2px solid rgba(255,255,255,.6); }
.btn-outlined-white:hover { background:rgba(255,255,255,.1); border-color:#FFF; }
.btn-whatsapp     { background:var(--whatsapp); color:#FFF; box-shadow:var(--el-1); }
.btn-whatsapp:hover { background:var(--whatsapp-dark); box-shadow:var(--el-2); }
.btn-large        { padding:14px 28px; font-size:1rem; min-height:48px; }

/* ── CTA Pay — Primary emphasis for revenue action ───────── */
.btn-cta-pay {
  background:var(--primary); color:var(--on-primary);
  box-shadow:var(--el-2);
  position:relative; overflow:hidden;
}
.btn-cta-pay::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.12) 50%, transparent 100%);
  transform:translateX(-100%);
  animation:ctaShimmer 3s ease-in-out 2s infinite;
}
@keyframes ctaShimmer {
  0%   { transform:translateX(-100%); }
  40%  { transform:translateX(100%); }
  100% { transform:translateX(100%); }
}
.btn-cta-pay:hover {
  background:var(--primary-dark);
  box-shadow:0 4px 16px rgba(0,71,171,.35);
  transform:translateY(-2px);
}
.btn-cta-pay:active { transform:translateY(0); box-shadow:var(--el-1); }
.btn-cta-pay .material-symbols-rounded {
  font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;
}

/* ── 5. NAVBAR ────────────────────────────────────────────── */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  height:var(--nav-h);
  background:rgba(253,251,255,.88);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s;
}
#navbar.scrolled { border-bottom-color:var(--outline-variant); box-shadow:var(--el-1); }

.nav-container {
  max-width:1200px; margin:0 auto; padding:0 var(--sp-4);
  height:100%; display:flex; align-items:center; gap:var(--sp-6);
}
.nav-logo { display:flex; align-items:center; flex-shrink:0; }
.nav-logo img { height:42px; width:auto; object-fit:contain; }

/* Logo theme switching */
.nav-logo .logo-light,
.nav-logo .logo-dark,
.mobile-menu-brand .logo-light,
.mobile-menu-brand .logo-dark { display:inline-block; }
.nav-logo .logo-dark,
.mobile-menu-brand .logo-dark  { display:none; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme]) .nav-logo .logo-light,
  :root:not([data-theme]) .mobile-menu-brand .logo-light { display:none; }
  :root:not([data-theme]) .nav-logo .logo-dark,
  :root:not([data-theme]) .mobile-menu-brand .logo-dark  { display:inline-block; }
}
[data-theme="dark"] .nav-logo .logo-light,
[data-theme="dark"] .mobile-menu-brand .logo-light  { display:none; }
[data-theme="dark"] .nav-logo .logo-dark,
[data-theme="dark"] .mobile-menu-brand .logo-dark   { display:inline-block; }
[data-theme="light"] .nav-logo .logo-dark,
[data-theme="light"] .mobile-menu-brand .logo-dark  { display:none; }
[data-theme="light"] .nav-logo .logo-light,
[data-theme="light"] .mobile-menu-brand .logo-light { display:inline-block; }
.logo-fallback {
  align-items:center; gap:var(--sp-2);
  font-family:var(--font-heading); font-size:1.25rem; font-weight:700; color:var(--primary);
}
.logo-fallback .material-symbols-rounded { font-size:1.6rem; }

.nav-links { display:none; flex:1; justify-content:center; align-items:center; gap:0; }
.nav-link {
  font-family:var(--font-heading); font-size:.9375rem; font-weight:500;
  color:var(--on-surface-variant); padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-full); transition:color .2s, background-color .2s;
  position:relative;
}
.nav-link::after {
  content:''; position:absolute; bottom:4px; left:50%;
  transform:translateX(-50%) scaleX(0);
  width:calc(100% - 24px); height:2px; background:var(--primary);
  border-radius:2px; transition:transform .25s ease;
}
.nav-link:hover { color:var(--primary); }
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link[aria-current="page"]::after { transform:translateX(-50%) scaleX(1); }
/* Touch devices: underline visible al foco (keyboard) + aria-current */
@media (hover: none) {
  .nav-link[aria-current="page"]::after { transform:translateX(-50%) scaleX(1); }
}

/* ── M3 State Layer (overlay con opacidad semántica) ──────────
   Utilidad opt-in: aplicar .m3-state a cualquier elemento interactivo
   para overlay 0.08/0.10/0.12 (hover/focus/pressed). Usa ::before para
   no interferir con ::after existentes (ej. subrayado animado del nav). */
.m3-state { position:relative; isolation:isolate; }
.m3-state::before {
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:currentColor; opacity:0;
  transition:opacity .15s ease;
  pointer-events:none; z-index:-1;
}
.m3-state:hover::before          { opacity:var(--state-hover); }
.m3-state:focus-visible::before  { opacity:var(--state-focus); }
.m3-state:active::before         { opacity:var(--state-pressed); }
@media (prefers-reduced-motion: reduce) {
  .m3-state::before { transition:none; }
}

/* Aplicado al nav-link: añade overlay sutil sin romper el subrayado ::after */
.nav-link { position:relative; isolation:isolate; }
.nav-link::before {
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:currentColor; opacity:0;
  transition:opacity .15s ease;
  pointer-events:none; z-index:-1;
}
.nav-link:hover::before         { opacity:var(--state-hover); }
.nav-link:focus-visible::before { opacity:var(--state-focus); }
.nav-link:active::before        { opacity:var(--state-pressed); }

.nav-actions { flex-shrink:0; display:none; }

/* Hamburger */
.hamburger {
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  background:none; border:none; cursor:pointer;
  padding:var(--sp-2); border-radius:var(--r-sm); margin-left:auto;
}
.hamburger span {
  display:block; width:24px; height:2px;
  background:var(--on-surface); border-radius:2px;
  transition:transform .3s, opacity .3s;
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── 6. MOBILE MENU ───────────────────────────────────────── */
.mobile-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.5); z-index:var(--z-dropdown); opacity:0; transition:opacity .3s;
}
.mobile-overlay.visible { display:block; opacity:1; }

.mobile-menu {
  position:fixed; top:0; right:0; bottom:0; width:85%; max-width:340px;
  background:var(--surface); z-index:var(--z-overlay); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .35s cubic-bezier(.25,.46,.45,.94);
  box-shadow:var(--el-4);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.mobile-menu.open { transform:translateX(0); }

/* Menu header: logo + actions */
.mobile-menu-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--outline-variant);
  flex-shrink:0;
}
.mobile-menu-brand { display:flex; align-items:center; }
.mobile-menu-brand img { height:36px; width:auto; object-fit:contain; }
.mobile-menu-actions { display:flex; align-items:center; gap:var(--sp-2); }

.mobile-close {
  position:static; flex-shrink:0;
  background:var(--surface-container); border:none; cursor:pointer;
  width:36px; height:36px; border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center;
  color:var(--on-surface-variant); transition:background-color .2s, color .2s;
}
.mobile-close:hover { background:var(--surface-container-high); color:var(--on-surface); }
.mobile-close .material-symbols-rounded { font-size:1.125rem; }

/* Navigation links */
.mobile-nav-list { flex:1; padding:var(--sp-3) var(--sp-3); overflow-y:auto; }
.mobile-nav-list ul { display:flex; flex-direction:column; gap:2px; }

.mobile-nav-link {
  display:flex; align-items:center; gap:var(--sp-3);
  font-family:var(--font-heading); font-size:.9375rem; font-weight:500;
  color:var(--on-surface); padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-lg);
  transition:background-color .15s, color .15s;
}
.mobile-nav-link .material-symbols-rounded {
  font-size:1.25rem; color:var(--on-surface-variant);
  transition:color .15s;
}
.mobile-nav-link:hover {
  background:var(--primary-container); color:var(--primary);
}
.mobile-nav-link:hover .material-symbols-rounded { color:var(--primary); }

/* Sub-link indent */
.mobile-nav-sub-link {
  padding-left:calc(var(--sp-4) + var(--sp-3) + 1.25rem) !important;
  font-size:.875rem;
}
.mobile-nav-sub-link .material-symbols-rounded { font-size:1.125rem; }

/* Active state */
.mobile-nav-link.active {
  background:var(--primary-container); color:var(--primary); font-weight:600;
}
.mobile-nav-link.active .material-symbols-rounded { color:var(--primary); }

/* Footer contact */
.mobile-menu-footer {
  flex-shrink:0;
  padding:var(--sp-4) var(--sp-5);
  border-top:1px solid var(--outline-variant);
}
.mobile-footer-contact {
  display:flex; align-items:center; gap:var(--sp-3);
  font-family:var(--font-heading); font-size:.875rem; font-weight:600;
  color:var(--whatsapp); padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-lg); background:rgba(37,211,102,.08);
  transition:background-color .15s;
}
.mobile-footer-contact:hover { background:rgba(37,211,102,.15); }
.mobile-footer-contact .icon-svg { width:1.125rem; height:1.125rem; }

/* Dark mode mobile menu */
[data-theme="dark"] .mobile-menu { background:var(--surface-container); }
[data-theme="dark"] .mobile-menu-top { border-bottom-color:var(--outline-variant); }
[data-theme="dark"] .mobile-menu-footer { border-top-color:var(--outline-variant); }
[data-theme="dark"] .mobile-footer-contact { background:rgba(37,211,102,.12); }

/* ── 7. HERO — Mobile-First Redesign ─────────────────────── */
.hero {
  position:relative; min-height:100svh; min-height:100vh;
  background:#050E1F; color:#FFF; display:flex;
  flex-direction:column; overflow:hidden; padding-top:var(--nav-h);
}

/* Animated orbs */
.hero-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; }

/* ── Background photo — responsive picture element ─────────── */
.hero-bg-img {
  position:absolute; inset:0; display:block; overflow:hidden;
}
.hero-bg-img img {
  width:100%; height:100%;
  object-fit:cover; object-position:center 35%;
  /* Blur suave + scale: scale(1.04) oculta el halo difuminado en los bordes */
  filter:blur(1.5px); transform:scale(1.04);
  will-change:transform;
}
@media (prefers-reduced-motion: reduce) {
  /* Sin animación; blur leve sigue activo para legibilidad del texto */
  .hero-bg-img img { transform:scale(1.02); }
}

/* ── Overlay — garantiza legibilidad del texto blanco ─────── */
.hero-bg-overlay {
  position:absolute; inset:0; pointer-events:none;
  /* Light mode: gradiente direccional — más denso donde va el texto,
     más transparente en bordes para que la imagen respire */
  background:
    linear-gradient(to right,
      rgba(5,14,31,.78)  0%,
      rgba(5,14,31,.68) 40%,
      rgba(0,30,80,.55)  70%,
      rgba(5,14,31,.62) 100%),
    linear-gradient(to bottom,
      rgba(5,14,31,.25) 0%,
      transparent        40%,
      transparent         60%,
      rgba(5,14,31,.40) 100%);
}
[data-theme="dark"] .hero-bg-overlay {
  /* Dark mode: ligeramente más oscuro que light, imagen se integra al tema */
  background:
    linear-gradient(to right,
      rgba(3,8,20,.84)  0%,
      rgba(3,8,20,.74) 40%,
      rgba(0,18,55,.62)  70%,
      rgba(3,8,20,.70) 100%),
    linear-gradient(to bottom,
      rgba(3,8,20,.30) 0%,
      transparent        40%,
      transparent         60%,
      rgba(3,8,20,.45) 100%);
}

.hero-orb {
  position:absolute; border-radius:50%;
  filter:blur(90px); opacity:.4; will-change:transform;
}
.hero-orb--1 {
  width:480px; height:480px;
  background:radial-gradient(circle, #1654D0 0%, transparent 65%);
  top:-160px; right:-120px;
  animation:orbFloat 16s ease-in-out infinite;
}
.hero-orb--2 {
  width:360px; height:360px;
  background:radial-gradient(circle, var(--secondary) 0%, transparent 65%);
  bottom:60px; left:-100px;
  animation:orbFloat 22s ease-in-out infinite reverse;
  opacity:.3;
}
.hero-orb--3 {
  width:280px; height:280px;
  background:radial-gradient(circle, #0047AB 0%, transparent 65%);
  top:45%; left:45%;
  animation:orbFloat 18s ease-in-out infinite;
  animation-delay:-8s;
}
@keyframes orbFloat {
  0%,100%{ transform:translate(0,0) scale(1); }
  25%    { transform:translate(28px,-38px) scale(1.05); }
  50%    { transform:translate(-18px,22px) scale(.96); }
  75%    { transform:translate(14px,32px) scale(1.03); }
}

/* Dot grid pattern */
.hero-grid {
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:32px 32px;
  pointer-events:none;
}

/* Main layout: mobile stacked */
.hero-main {
  position:relative; z-index:2; flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:var(--sp-10) var(--sp-4) var(--sp-8);
  max-width:1200px; width:100%; margin:0 auto; gap:var(--sp-8);
}

.hero-content {
  display:flex; flex-direction:column;
  align-items:center; text-align:center; gap:var(--sp-5); max-width:600px;
}

.hero-badge {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  background:rgba(255,255,255,.08); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-full);
  padding:8px 18px; font-family:var(--font-heading);
  font-size:.875rem; font-weight:500; color:rgba(255,255,255,.88);
}
/* MD3: Pulse animation for location pin icon */
@keyframes pinPulse {
  0%, 100% { transform:scale(1);    color:#FFAB9F; }
  50%       { transform:scale(1.35); color:#FFD0CA; }
}
.hero-badge .material-symbols-rounded {
  font-size:.9rem; color:#FFAB9F;
  animation:pinPulse 2s ease-in-out infinite;
  display:inline-block; /* needed for transform */
}

.hero-title {
  font-size:clamp(2.25rem, 8vw, 4rem); font-weight:800;
  line-height:1.06; letter-spacing:-.03em;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.hero-em {
  font-style:normal;
  background:linear-gradient(90deg, #6BA5FF 0%, #FF9B94 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero-subtitle {
  font-size:clamp(1rem, 2.5vw, 1.1875rem);
  color:rgba(255,255,255,.88); line-height:1.7;
  text-shadow:0 1px 8px rgba(0,0,0,.3);
}

/* Mobile: buttons full-width stacked */
.hero-actions {
  display:flex; flex-direction:column;
  gap:var(--sp-3); width:100%; max-width:340px;
}
.hero-actions .btn { justify-content:center; width:100%; }

/* CTA secundario WhatsApp: oculto en mobile, visible desde M3 medium (840px) */
.hero-cta-wa { display:none; }
@media (min-width:840px) {
  .hero-cta-wa { display:inline-flex; }
}

/* Trust strip */
.hero-trust {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:var(--sp-2) var(--sp-3); font-size:.8125rem; color:rgba(255,255,255,.78);
}
.trust-item { display:flex; align-items:center; gap:4px; }
.trust-item .material-symbols-rounded { font-size:.9375rem; color:#8FBBFF; }
.trust-sep  { opacity:.3; }

/* ── HERO VISUAL CARD ───────────────────────────────────────── */
.hero-visual {
  position:relative; width:100%; max-width:300px; align-self:center;
  overflow:visible; isolation:isolate;
}

.hv-card {
  position:relative; isolation:isolate;
  background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  backdrop-filter:blur(24px) saturate(1.3);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
  border:1px solid rgba(255,255,255,.18); border-radius:var(--r-2xl);
  padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4);
  box-shadow:
    0 24px 64px -20px rgba(0,0,0,.55),
    0 8px 24px -8px rgba(0,71,171,.35),
    inset 0 1px 0 rgba(255,255,255,.18);
  overflow:hidden;
}
/* Accent brand bar superior */
.hv-card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, #6BA5FF, rgba(255,255,255,.6), #6BA5FF, transparent);
  opacity:.9; z-index:1;
}
/* Glow radial esquina superior derecha */
.hv-card::after {
  content:""; position:absolute; top:-30%; right:-20%;
  width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, rgba(107,165,255,.28), transparent 65%);
  pointer-events:none; z-index:-1; filter:blur(12px);
}

.hv-card-header { display:flex; align-items:center; justify-content:space-between; }

.hv-icon-ring {
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg, rgba(0,71,171,.7), rgba(107,165,255,.4));
  border:1.5px solid rgba(107,165,255,.55);
  box-shadow:0 0 20px rgba(107,165,255,.35), inset 0 1px 0 rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center; color:#DCEAFF;
}
.hv-icon-ring .material-symbols-rounded { font-size:1.4rem; }

.hv-live {
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-heading); font-size:.6875rem; font-weight:600;
  color:rgba(255,255,255,.65); letter-spacing:.05em; text-transform:uppercase;
}
.hv-live-dot {
  width:7px; height:7px; border-radius:50%; background:#4CAF50;
  animation:liveDot 2s ease-in-out infinite;
}
@keyframes liveDot {
  0%,100%{ box-shadow:0 0 0 0 rgba(76,175,80,.5); }
  50%    { box-shadow:0 0 0 5px rgba(76,175,80,0); }
}

.hv-speed { display:flex; align-items:baseline; gap:var(--sp-2); }
.hv-speed-num {
  font-family:var(--font-heading); font-size:3rem;
  font-weight:800; line-height:1;
  background:linear-gradient(180deg, #FFF 0%, #B8D4FF 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 2px 16px rgba(107,165,255,.35));
}
.hv-speed-unit {
  font-family:var(--font-heading); font-size:1.0625rem;
  font-weight:600; color:rgba(255,255,255,.5);
}
.hv-speed-sub { font-size:.8125rem; color:rgba(255,255,255,.55); margin-top:-8px; }

.hv-bars { display:flex; flex-direction:column; gap:var(--sp-3); }
.hv-bar-row { display:flex; align-items:center; gap:var(--sp-2); }
.hv-bar-row .material-symbols-rounded { font-size:.875rem; color:rgba(255,255,255,.4); flex-shrink:0; }
.hv-track {
  flex:1; height:6px; background:rgba(255,255,255,.1);
  border-radius:6px; overflow:hidden;
}
.hv-fill {
  height:100%; width:0; border-radius:6px;
  background:linear-gradient(90deg, #3B6FBE, #6BA5FF, #A8C8FF);
  box-shadow:0 0 12px rgba(107,165,255,.5);
  transition:width 1.8s cubic-bezier(.25,.46,.45,.94);
}
.hv-fill.run { width:var(--w); }
.hv-val { font-family:var(--font-heading); font-size:.6875rem; font-weight:600; color:rgba(255,255,255,.4); width:24px; text-align:right; }

/* Floating chips */
.hv-chip {
  position:absolute; display:flex; align-items:center; gap:4px;
  background:rgba(255,255,255,.09); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-full);
  padding:6px 12px; font-family:var(--font-heading); font-size:.75rem;
  font-weight:500; color:rgba(255,255,255,.82); white-space:nowrap;
}
.hv-chip .material-symbols-rounded { font-size:.875rem; }
.hv-chip--1 { top:-18px; right:16px; animation:chipFloat 6s ease-in-out infinite; }
.hv-chip--2 { bottom:16px; left:-20px; animation:chipFloat 8s ease-in-out infinite; animation-delay:-3s; }
.hv-chip--3 { bottom:-18px; right:8px; animation:chipFloat 7s ease-in-out infinite; animation-delay:-5s; }
@keyframes chipFloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

/* ── HERO STATS ─────────────────────────────────────────────── */
.hero-stats {
  position:relative; z-index:2;
  background:rgba(255,255,255,.06); backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.10);
  padding:var(--sp-5) var(--sp-4);
  display:grid; grid-template-columns:repeat(2,1fr); text-align:center;
}
.hero-stat {
  padding:var(--sp-4) var(--sp-2);
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.stat-number {
  font-family:var(--font-heading); font-size:clamp(1.5rem, 4vw, 2rem);
  font-weight:700; color:#FFF; line-height:1;
}
.stat-unit  { font-family:var(--font-heading); font-size:.8125rem; font-weight:600; color:#FFAB9F; }
.stat-text  { font-size:clamp(1rem,3vw,1.5rem); }
.stat-label { font-size:.6875rem; color:rgba(255,255,255,.78); font-family:var(--font-heading); }
.stat-divider { width:1px; background:rgba(255,255,255,.15); margin:auto 0; display:none; }

.hero-scroll {
  position:absolute; bottom:var(--sp-3); left:50%; transform:translateX(-50%);
  z-index:3; color:rgba(255,255,255,.55); animation:bounce 2s ease-in-out infinite;
  font-size:2rem; display:flex; align-items:center; justify-content:center; width:40px; height:40px;
}
@keyframes bounce { 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(6px); } }

/* ── 8. PLANS ─────────────────────────────────────────────── */
/* ── Segment pills — nivel 1 ──────────────────────────────── */
.segment-tabs {
  display:flex; justify-content:center; gap:var(--sp-2);
  margin-bottom:var(--sp-6);
}
.segment-btn {
  display:flex; align-items:center; gap:var(--sp-2);
  background:var(--surface-container); border:1.5px solid var(--outline-variant);
  cursor:pointer; font-family:var(--font-heading); font-size:1rem; font-weight:600;
  color:var(--on-surface-variant); padding:12px 24px; border-radius:var(--r-full);
  transition:background-color .25s, color .25s, border-color .25s, box-shadow .25s;
  min-height:48px;
}
.segment-btn .material-symbols-rounded { font-size:1.2rem; }
.segment-btn.active {
  background:var(--primary); color:var(--on-primary);
  border-color:var(--primary); box-shadow:var(--el-2);
}
.segment-btn:not(.active):hover {
  background:var(--surface-container-high); color:var(--primary);
  border-color:var(--primary);
}
.segment-panel[hidden] { display:none; }

.plan-tabs {
  display:flex; justify-content:center; gap:var(--sp-2); margin-bottom:var(--sp-10);
  background:var(--surface-container); border-radius:var(--r-full);
  padding:6px; max-width:fit-content; margin-left:auto; margin-right:auto;
}
.tab-btn {
  display:flex; align-items:center; gap:var(--sp-2); background:none; border:none;
  cursor:pointer; font-family:var(--font-heading); font-size:.875rem; font-weight:500;
  color:var(--on-surface-variant); padding:10px 16px; border-radius:var(--r-full);
  transition:background-color .25s, color .25s, box-shadow .25s; min-height:48px; /* M3 touch ≥48dp */
}
.tab-btn .material-symbols-rounded { font-size:1rem; }
.tab-btn.active { background:var(--primary); color:var(--on-primary); box-shadow:var(--el-1); }
.tab-btn:not(.active):hover { background:var(--surface-container-high); color:var(--primary); }

/* Reordenar jerarquía en plan-card: nombre → tipo → velocidad */
.plan-card > .plan-name        { order:-3; }
.plan-card > .plan-type-badge  { order:-2; }
.plan-card > .plan-speed-badge { order:-1; }

.tab-content { display:none; }
.tab-content.active { display:grid; }

/* Mobile: scroll horizontal con snap — cards centradas con vw */
.plans-grid {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:80vw;
  gap:var(--sp-4);
  overflow-x:auto;
  overflow-y:clip;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding-inline:10vw;
  padding-top:16px; /* Espacio para .plan-popular-badge (top:-12px) sin clip */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  align-items:stretch;
  /* Romper contenedor para scroll edge-to-edge */
  margin-inline:calc(-1 * var(--sp-4));
  width:calc(100% + var(--sp-4) * 2);
}
.plans-grid::-webkit-scrollbar { display:none; }
.plans-grid .plan-card { scroll-snap-align:center; scroll-snap-stop:always; }

@media (prefers-reduced-motion:reduce) {
  .plans-grid { scroll-snap-type:none; }
}

/* Indicador animado de swipe — solo mobile, desaparece tras interacción */
.plans-scroll-hint {
  display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
  color:var(--on-surface-variant); font-size:.8125rem; padding:var(--sp-3) 0;
  animation:swipe-hint 2s ease-in-out infinite;
}
.plans-scroll-hint .material-symbols-rounded { font-size:1.25rem; }
@keyframes swipe-hint {
  0%, 100% { opacity:.6; transform:translateX(0); }
  50%      { opacity:1;  transform:translateX(8px); }
}
@media (prefers-reduced-motion:reduce) {
  .plans-scroll-hint { animation:none; opacity:.6; }
}
/* Ocultar hint cuando su tab no está activa */
.tab-content:not(.active) + .plans-scroll-hint { display:none; }
@media (min-width:600px) {
  .plans-scroll-hint { display:none; }
}

/* Fallback para navegadores sin :has() (FF <121, Safari <15.4) */
@supports not selector(:has(*)) {
  .plans-grid { max-width:420px; margin-inline:auto; }
  @media (min-width:840px)  { .plans-grid { max-width:1100px; } }
}

/* Centrar plans-grid cuando los cards no llenan todas las columnas */
.plans-grid:has(> .plan-card:only-child) {
  grid-template-columns:minmax(0, 420px);
  justify-content:center;
}
@media (min-width:840px) {
  .plans-grid:has(> .plan-card:nth-child(2):last-child) {
    grid-template-columns:repeat(2, minmax(0, 380px));
    justify-content:center;
  }
  .plans-grid:has(> .plan-card:nth-child(3):last-child) {
    grid-template-columns:repeat(3, minmax(0, 340px));
    justify-content:center;
  }
}

.plan-card {
  height:100%;
  background:var(--surface); border:1.5px solid var(--outline-variant);
  border-radius:var(--r-xl); padding:var(--sp-6);
  display:flex; flex-direction:column; gap:var(--sp-4);
  transition:transform .25s, box-shadow .25s, border-color .25s; position:relative;
}
.plan-card:hover { transform:translateY(-5px); box-shadow:var(--el-3); border-color:var(--primary-light); }

.plan-card--featured {
  background:linear-gradient(145deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-color:transparent; color:#FFF; box-shadow:var(--el-3);
}
.plan-card--featured:hover { transform:translateY(-10px); box-shadow:var(--el-4); }

.plan-popular-badge {
  position:absolute; top:-12px; right:var(--sp-4); z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  background:var(--secondary); color:#FFF;
  font-family:var(--font-heading); font-size:.75rem; font-weight:600;
  padding:4px 12px; border-radius:var(--r-full); width:fit-content;
  box-shadow:var(--el-2);
  white-space:nowrap;
}
.plan-popular-badge .material-symbols-rounded { font-size:.875rem; }

.plan-type-badge {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--primary-container); color:var(--on-primary-container);
  font-family:var(--font-heading); font-size:.75rem; font-weight:600;
  padding:4px 12px; border-radius:var(--r-full); width:fit-content;
}
.plan-type-badge--combo { background:var(--primary-container); color:var(--on-primary-container); }
.plan-type-badge--basic { background:var(--surface-container-high); color:var(--on-surface-variant); border:1px solid var(--outline-variant); }
.plan-type-badge .material-symbols-rounded { font-size:.875rem; }

.plan-speed-badge {
  display:inline-block; background:var(--primary-container);
  color:var(--on-primary-container); font-family:var(--font-heading);
  font-size:1rem; font-weight:700; padding:5px 16px;
  border-radius:var(--r-full); width:fit-content;
}
.plan-speed-badge--white { background:rgba(255,255,255,.2); color:#FFF; }

.plan-name { font-size:1.375rem; font-weight:700; color:var(--on-primary-container); }
.plan-card--featured .plan-name { color:#FFF; }

.plan-desc {
  font-size:.875rem; color:var(--on-surface-variant); line-height:1.5;
}
.plan-card--featured .plan-desc { color:rgba(255,255,255,.78); }
.plan-price-wrapper { display:flex; align-items:baseline; gap:2px; }
.plan-currency { font-family:var(--font-heading); font-size:1.125rem; font-weight:600; color:var(--primary); }
.plan-card--featured .plan-currency { color:#FFF; opacity:.8; }
.plan-price { font-family:var(--font-heading); font-size:2.25rem; font-weight:800; color:var(--primary); line-height:1; }
.plan-card--featured .plan-price { color:#FFF; }
.plan-period { font-size:.875rem; color:var(--on-surface-variant); }
.plan-card--featured .plan-period { color:rgba(255,255,255,.65); }

.plan-features { flex:1; display:flex; flex-direction:column; gap:var(--sp-3); }
.plan-features li { display:flex; align-items:flex-start; gap:var(--sp-2); font-size:1rem; color:var(--on-surface-variant); }
.plan-card--featured .plan-features li { color:rgba(255,255,255,.85); }
.plan-features .material-symbols-rounded { font-size:1.05rem; color:var(--primary); flex-shrink:0; margin-top:1px; }
.plan-card--featured .plan-features .material-symbols-rounded { color:#FFF; }

.plan-cta { width:100%; justify-content:center; margin-top:auto; }

.plan-savings {
  display:inline-flex; align-items:center; gap:8px; font-size:.875rem; font-weight:600;
  color:var(--secondary); background:var(--secondary-container);
  padding:6px 14px; border-radius:var(--r-full); width:fit-content;
  border:1px solid color-mix(in srgb, var(--secondary) 25%, transparent);
  box-shadow:0 1px 2px color-mix(in srgb, var(--secondary) 15%, transparent);
}
.plan-savings .material-symbols-rounded { font-size:1.0625rem; font-variation-settings:'FILL' 1; }
.plan-savings bdi { font-weight:800; font-size:1rem; letter-spacing:-.01em; }
.plan-savings--white {
  color:#FFF; background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.3);
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}

/* ── Enterprise card ───────────────────────────────────────── */
.plan-enterprise-wrapper {
  display:flex; justify-content:center; padding:var(--sp-4) 0;
}
.plan-card--enterprise {
  max-width:560px; text-align:center;
  align-items:center;
}
.plan-enterprise-icon {
  font-size:3rem; color:var(--primary);
  margin-bottom:var(--sp-2);
}
.plan-enterprise-desc {
  font-size:1rem; color:var(--on-surface-variant); line-height:1.6;
  max-width:480px;
}
.plan-card--enterprise .plan-features { align-items:flex-start; text-align:left; }
.plan-card--enterprise .plan-cta { width:100%; max-width:320px; }

.plans-note {
  display:flex; align-items:flex-start; gap:var(--sp-2); margin-top:var(--sp-8);
  padding:var(--sp-4) var(--sp-5); background:var(--primary-container);
  color:var(--on-primary-container); border-radius:var(--r-lg);
  font-size:.9375rem; line-height:1.5;
}
.plans-note .material-symbols-rounded { flex-shrink:0; font-size:1.125rem; }
.plans-note a { color:var(--primary); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.plans-note a:hover { color:var(--secondary); }

.plans-view-all {
  text-align:center; margin-top:var(--sp-5);
}
.plans-view-all a {
  display:inline-flex; align-items:center; gap:var(--sp-1);
  color:var(--primary); font-weight:500; font-size:.9375rem;
  text-decoration:none; transition:gap .2s;
}
.plans-view-all a:hover { gap:var(--sp-2); text-decoration:underline; }
@media (prefers-reduced-motion:reduce) {
  .plans-view-all a { transition:none; }
}

/* ── 9. BENEFITS BENTO ────────────────────────────────────── */
.bento-grid { display:grid; grid-template-columns:1fr; gap:var(--sp-4); }

.bento-card {
  background:var(--surface); border-radius:var(--r-xl); padding:var(--sp-6);
  box-shadow:var(--el-1); transition:transform .25s, box-shadow .25s;
  display:flex; flex-direction:column; gap:var(--sp-4);
}
.bento-card:hover { transform:translateY(-4px); box-shadow:var(--el-2); }
.bento-card--accent { background:linear-gradient(145deg, var(--primary) 0%, var(--primary-dark) 100%); color:#FFF; }

.bento-icon-wrapper { width:48px; height:48px; border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bento-icon-wrapper .material-symbols-rounded { font-size:1.5rem; }
.bento-icon--primary   { background:var(--primary-container); color:var(--primary); }
.bento-icon--secondary { background:var(--secondary-container); color:var(--secondary); }
.bento-icon--tertiary  { background:#E3FBED; color:#1B7A42; }
.bento-icon--white     { background:rgba(255,255,255,.18); color:#FFF; }

.bento-title { font-size:1.125rem; font-weight:700; color:var(--on-primary-container); }
.bento-title--white { color:#FFF; }
.bento-desc { font-size:1rem; color:var(--on-surface-variant); line-height:1.6; flex:1; }
.bento-desc--white { color:rgba(255,255,255,.8); }

.bento-speed-visual { display:flex; flex-direction:column; gap:var(--sp-3); margin-top:auto; }
.speed-bar { display:flex; flex-direction:column; gap:6px; }
.speed-bar span { font-family:var(--font-heading); font-size:.75rem; font-weight:500; color:var(--on-surface-variant); }
.speed-fill {
  height:8px; border-radius:8px;
  background:linear-gradient(90deg, var(--primary), var(--primary-light));
  width:0; transition:width 1.5s cubic-bezier(.25,.46,.45,.94); position:relative;
}
.speed-fill::after {
  content:''; position:absolute; right:-4px; top:50%; transform:translateY(-50%);
  width:12px; height:12px; border-radius:50%; background:var(--primary); box-shadow:var(--el-1);
}
.bento-card.visible .speed-fill { width:var(--w); }

/* ── 10. QUIÉNES SOMOS ────────────────────────────────────── */
.nosotros-grid { display:flex; flex-direction:column; gap:var(--sp-12); }

.nosotros-content { display:flex; flex-direction:column; gap:var(--sp-5); }
.nosotros-lead {
  font-family:var(--font-heading); font-size:1.1875rem; font-weight:500;
  color:var(--on-primary-container); line-height:1.6;
}
.nosotros-body { font-size:1rem; color:var(--on-surface-variant); line-height:1.7; }

.values-grid { display:grid; grid-template-columns:1fr; gap:var(--sp-4); margin-top:var(--sp-2); }
.value-item { display:flex; align-items:flex-start; gap:var(--sp-4); }
.value-icon {
  width:44px; height:44px; border-radius:var(--r-lg); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.value-icon .material-symbols-rounded { font-size:1.375rem; }
.value-icon--blue  { background:var(--primary-container); color:var(--primary); }
.value-icon--coral { background:var(--secondary-container); color:var(--secondary); }
.value-icon--green { background:#E3FBED; color:#1B7A42; }
.value-item strong { display:block; font-size:.9375rem; font-weight:700; color:var(--on-primary-container); margin-bottom:2px; }
.value-item p      { font-size:.875rem; color:var(--on-surface-variant); }

/* Nosotros visual */
.nosotros-visual { display:flex; flex-direction:column; gap:var(--sp-4); }

.ns-main-card {
  background:linear-gradient(135deg, var(--primary-container), #EEF2FF);
  border-radius:var(--r-xl); padding:var(--sp-6);
  display:flex; flex-direction:column; gap:var(--sp-4);
}
.ns-icon-wrap {
  width:56px; height:56px; background:var(--primary); border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:center;
  color:#FFF; box-shadow:var(--el-2);
}
.ns-icon-wrap .material-symbols-rounded { font-size:1.75rem; }
.ns-main-card h3 { font-size:1.125rem; font-weight:700; color:var(--on-primary-container); }
.ns-main-card p  { font-size:.9375rem; color:var(--on-surface-variant); line-height:1.6; }

.ns-stats-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.ns-stat {
  border-radius:var(--r-xl); padding:var(--sp-5) var(--sp-4);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px;
}
.ns-stat--blue  { background:var(--primary); color:#FFF; box-shadow:var(--el-2); }
.ns-stat--coral { background:var(--secondary); color:#FFF; box-shadow:var(--el-2); }
.ns-stat-num    { font-family:var(--font-heading); font-size:1.875rem; font-weight:800; line-height:1; }
.ns-stat-unit   { font-family:var(--font-heading); font-size:.875rem; font-weight:600; opacity:.8; }
.ns-stat-label  { font-size:.75rem; opacity:.75; }

/* ── Misión / Visión ───────────────────────────────────── */
.mv-grid {
  display:grid; grid-template-columns:1fr; gap:var(--sp-4);
  margin-top:var(--sp-10);
}
.mv-card {
  background:var(--surface-container); border-radius:var(--r-xl);
  padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4);
  border-left:4px solid var(--primary);
}
.mv-card--vision { border-left-color:var(--secondary); }
.mv-card-header  { display:flex; align-items:center; gap:var(--sp-3); }
.mv-icon {
  width:40px; height:40px; background:var(--primary); border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  color:var(--on-primary); flex-shrink:0;
}
.mv-icon--vision { background:var(--secondary); color:var(--on-secondary); }
.mv-icon .material-symbols-rounded { font-size:1.25rem; }
.mv-label {
  font-family:var(--font-heading); font-size:1rem; font-weight:700;
  color:var(--on-surface); text-transform:uppercase; letter-spacing:.05em;
}
.mv-text {
  font-size:.9375rem; color:var(--on-surface-variant); line-height:1.75;
  margin:0; font-style:italic;
}

/* ── 11. COBERTURA ────────────────────────────────────────── */
.cobertura-grid { display:flex; flex-direction:column; gap:var(--sp-8); }

.cobertura-info { display:flex; flex-direction:column; gap:var(--sp-4); }
.cobertura-item { display:flex; align-items:flex-start; gap:var(--sp-4); padding:var(--sp-4); border-radius:var(--r-lg); transition:background-color .2s; }
.cobertura-item:hover { background:var(--surface-container-low); }
.cobertura-icon { font-size:1.625rem; color:var(--primary); flex-shrink:0; }
.cobertura-item strong { display:block; font-family:var(--font-heading); font-size:.9375rem; font-weight:600; color:var(--on-primary-container); margin-bottom:2px; }
.cobertura-item p { font-size:.875rem; color:var(--on-surface-variant); }
.cobertura-btn { align-self:flex-start; }

.cobertura-map { border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--el-2); border:1px solid var(--outline-variant); position:relative; }
.cobertura-map iframe { width:100%; aspect-ratio:16/10; height:auto; display:block; border:none; }

/* Map scroll guard — Ctrl+scroll to zoom */
.map-scroll-guard {
  position:absolute; inset:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  cursor:grab; background:transparent;
  transition:background-color .3s;
}
.map-scroll-guard.show-msg {
  background:rgba(0,0,0,.45);
}
.map-scroll-msg {
  display:flex; align-items:center; gap:var(--sp-2);
  background:rgba(0,0,0,.75); color:#fff;
  font-family:var(--font-heading); font-size:.875rem; font-weight:500;
  padding:var(--sp-3) var(--sp-5); border-radius:var(--r-full);
  opacity:0; transform:scale(.92);
  transition:opacity .25s, transform .25s;
  pointer-events:none;
}
.map-scroll-guard.show-msg .map-scroll-msg {
  opacity:1; transform:scale(1);
}
.map-scroll-msg kbd {
  display:inline-block; background:rgba(255,255,255,.2);
  padding:1px 6px; border-radius:var(--r-xs);
  font-family:var(--font-heading); font-size:.8125rem; font-weight:700;
  border:1px solid rgba(255,255,255,.3);
}
.map-scroll-guard.active {
  pointer-events:none;
}
.map-caption { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); font-size:.875rem; color:var(--on-surface-variant); background:var(--surface-container-low); }
.map-caption .material-symbols-rounded { font-size:1rem; color:var(--secondary); }

/* ── 12. FAQ ACCORDION ────────────────────────────────────── */
.faq-list {
  max-width:760px; margin:0 auto;
  display:flex; flex-direction:column; gap:0;
  border:1.5px solid var(--outline-variant); border-radius:var(--r-xl); overflow:hidden;
}

/* FAQ ahora usa <details>/<summary> nativo. name="wicom-faq" en cada
   <details> forma un grupo de accordion exclusivo sin JS (HTML 2024+).
   Navegadores sin soporte permiten múltiples abiertos a la vez — degradado OK. */
.faq-item { border-bottom:1px solid var(--outline-variant); }
.faq-item:last-child { border-bottom:none; }

/* Oculta el marker nativo (triángulo/chevron) en todos los engines */
.faq-trigger { list-style:none; }
.faq-trigger::-webkit-details-marker { display:none; }
.faq-trigger::marker { display:none; content:""; }

.faq-trigger {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); cursor:pointer;
  padding:var(--sp-5) var(--sp-6); text-align:left;
  transition:background-color .2s;
}
.faq-trigger:hover { background:var(--surface-container-low); }
.faq-item[open] > .faq-trigger { background:var(--primary-container); }

.faq-question {
  font-family:var(--font-heading); font-size:1rem; font-weight:600;
  color:var(--on-primary-container); line-height:1.4; flex:1;
}
.faq-item[open] > .faq-trigger .faq-question { color:var(--primary); }

.faq-icon {
  font-size:1.25rem; color:var(--on-surface-variant); flex-shrink:0;
  transition:transform .3s cubic-bezier(.25,.46,.45,.94);
}
.faq-item[open] > .faq-trigger .faq-icon { transform:rotate(180deg); color:var(--primary); }

/* Animación de entrada del contenido al abrir (reemplaza grid-rows animation
   que no funciona con <details> por el display-none implícito al cerrar) */
.faq-answer {
  padding:0 var(--sp-6) var(--sp-5);
  animation: faq-reveal .25s ease-out;
}
@keyframes faq-reveal {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
.faq-answer p {
  font-size:.9375rem; color:var(--on-surface-variant); line-height:1.7;
}
.faq-answer p a { color:var(--primary); text-decoration:underline; }
.faq-answer strong { color:var(--on-primary-container); }

/* ── 13. NORMATIVIDAD ─────────────────────────────────────── */
.norma-grid { display:grid; grid-template-columns:1fr; gap:var(--sp-4); }

.norma-card {
  display:flex; flex-direction:column; gap:var(--sp-4);
  background:var(--surface); border:1.5px solid var(--outline-variant);
  border-radius:var(--r-xl); padding:var(--sp-6);
  transition:transform .25s, box-shadow .25s, border-color .25s; cursor:pointer;
}
.norma-card:hover { transform:translateY(-4px); box-shadow:var(--el-2); border-color:var(--primary-light); }

.norma-icon { width:48px; height:48px; border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; }
.norma-icon .material-symbols-rounded { font-size:1.5rem; }
.norma-icon--blue  { background:var(--primary-container); color:var(--primary); }
.norma-icon--coral { background:var(--secondary-container); color:var(--secondary); }
.norma-icon--green { background:#E3FBED; color:#1B7A42; }

.norma-title { font-size:1rem; font-weight:700; color:var(--on-primary-container); flex:1; }
.norma-desc  { font-size:.875rem; color:var(--on-surface-variant); line-height:1.5; flex:1; }
.norma-link  { display:flex; align-items:center; gap:4px; font-family:var(--font-heading); font-size:.875rem; font-weight:600; color:var(--primary); margin-top:auto; transition:gap .2s; }
.norma-card:hover .norma-link { gap:8px; }
.norma-link .material-symbols-rounded { font-size:1rem; transition:transform .2s; }
.norma-card:hover .norma-link .material-symbols-rounded { transform:translateX(2px); }

.norma-info-bar {
  display:flex; align-items:flex-start; gap:var(--sp-4); margin-top:var(--sp-8);
  padding:var(--sp-5) var(--sp-6); background:var(--surface);
  border:1.5px solid var(--outline-variant); border-radius:var(--r-xl);
  font-size:.875rem; color:var(--on-surface-variant); line-height:1.6;
}
.norma-info-bar .material-symbols-rounded { font-size:1.5rem; color:var(--primary); flex-shrink:0; }
.norma-info-bar strong { color:var(--on-primary-container); }

/* ── 14. CONTACTO ─────────────────────────────────────────── */
.contact-grid { display:flex; flex-direction:column; gap:var(--sp-8); }

/* Left column: WhatsApp + info */
.contact-left { display:flex; flex-direction:column; gap:var(--sp-6); }

.whatsapp-card {
  background:rgba(255,255,255,.06); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--r-2xl);
  padding:var(--sp-6); text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:var(--sp-4);
}
.wa-icon-wrap {
  width:72px; height:72px; border-radius:50%; background:var(--whatsapp);
  display:flex; align-items:center; justify-content:center; font-size:2rem; color:#FFF;
  box-shadow:0 6px 20px rgba(37,211,102,.4); animation:waPulse 2.5s ease-in-out infinite;
}
@keyframes waPulse {
  0%,100%{ box-shadow:0 6px 20px rgba(37,211,102,.4); }
  50%    { box-shadow:0 6px 32px rgba(37,211,102,.65); }
}
.whatsapp-card h3 { font-size:1.25rem; font-weight:700; color:#FFF; }
.whatsapp-card p  { font-size:.9375rem; color:rgba(255,255,255,.72); line-height:1.6; }

.contact-list  { display:flex; flex-direction:column; gap:var(--sp-4); }
.contact-item  { display:flex; align-items:flex-start; gap:var(--sp-4); }
.contact-icon-wrap {
  width:40px; height:40px; background:rgba(255,255,255,.1); border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#FFF;
}
.contact-icon-wrap .material-symbols-rounded { font-size:1.125rem; }
.contact-label { display:block; font-size:.6875rem; font-weight:500; color:rgba(255,255,255,.5); letter-spacing:.05em; text-transform:uppercase; margin-bottom:3px; }
.contact-value { display:block; font-size:.9375rem; color:rgba(255,255,255,.85); line-height:1.5; transition:color .2s; }
.contact-value:hover { color:#FFF; }

/* ── 15. CONTACT FORM — MD3 Text Fields ──────────────────── */
.contact-form-card {
  background:var(--surface); border-radius:var(--r-2xl);
  padding:var(--sp-6); box-shadow:var(--el-3);
  display:flex; flex-direction:column; gap:var(--sp-5);
}

.form-card-title {
  font-family:var(--font-heading); font-size:1.375rem; font-weight:700;
  color:var(--on-primary-container);
}
.form-card-subtitle { font-size:.875rem; color:var(--on-surface-variant); margin-top:-var(--sp-3); }

/* MD3 Outlined Text Field */
.cf { display:flex; flex-direction:column; gap:var(--sp-5); }

.md-field {
  position:relative;
  /* Reserve space for floating label */
  padding-top:8px;
}

.md-field input,
.md-field select {
  width:100%; min-height:56px; padding:16px 48px 8px 48px;
  font-family:var(--font-body); font-size:1rem;
  color:var(--on-surface); background:transparent;
  border:1.5px solid var(--outline); border-radius:4px;
  outline:none; appearance:none; cursor:pointer;
  transition:border-color .2s, border-width .2s;
}
.md-field input  { cursor:text; }

/* Focus state — 2px primary border (MD3) */
.md-field input:focus,
.md-field select:focus {
  border-color:var(--primary); border-width:2px;
}

/* Floating label */
.md-field label {
  position:absolute; left:48px; top:50%; transform:translateY(calc(-50% + 8px));
  font-family:var(--font-body); font-size:1rem;
  color:var(--on-surface-variant);
  transition:top .2s ease, font-size .2s ease, color .2s ease, transform .2s ease;
  pointer-events:none;
  background:var(--surface); padding:0 4px;
  line-height:1;
}

/* Float label on focus OR when field has value */
.md-field input:focus        + label,
.md-field input:not(:placeholder-shown) + label {
  top:0; transform:translateY(0);
  font-size:.75rem; color:var(--primary);
}

/* Select — float label when has-value class added via JS */
.md-field select:focus + label,
.md-field--select.has-value label {
  top:0; transform:translateY(0);
  font-size:.75rem; color:var(--primary);
}

/* Error state */
.md-field.error input,
.md-field.error select {
  border-color:var(--error); border-width:2px;
}
.md-field.error label { color:var(--error); }

/* Leading icon */
.md-field-icon {
  position:absolute; left:12px; top:50%; transform:translateY(calc(-50% + 4px));
  color:var(--on-surface-variant); pointer-events:none; display:flex; align-items:center;
}
.md-field-icon .material-symbols-rounded { font-size:1.25rem; }
.md-field.error .md-field-icon { color:var(--error); }

/* Select dropdown arrow */
.md-select-arrow {
  position:absolute; right:12px; top:50%; transform:translateY(calc(-50% + 4px));
  pointer-events:none; color:var(--on-surface-variant); display:flex; align-items:center;
}
.md-select-arrow .material-symbols-rounded { font-size:1.25rem; }

/* Supporting text (errors) */
.md-support {
  min-height:20px; font-size:.75rem; color:var(--error);
  padding:4px 16px 0; line-height:1.4; display:none;
}
.md-field.error .md-support { display:block; }

/* Submit button */
.cf-submit { width:100%; justify-content:center; min-height:48px; margin-top:var(--sp-2); }

/* Loading spinner */
.spinner {
  width:18px; height:18px; border:2px solid rgba(255,255,255,.4);
  border-top-color:#FFF; border-radius:50%; animation:spin .7s linear infinite; display:inline-block;
}
@keyframes spin { to { transform:rotate(360deg); } }

.submit-idle   { display:flex; align-items:center; gap:var(--sp-2); }
.submit-loading{ display:flex; align-items:center; gap:var(--sp-2); }

/* Feedback (MD3 Snackbar-inspired) */
.form-feedback {
  display:flex; align-items:flex-start; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5); border-radius:var(--r-lg);
  font-size:.9375rem; font-family:var(--font-heading); font-weight:500; line-height:1.4;
}
.form-feedback .material-symbols-rounded { font-size:1.25rem; flex-shrink:0; margin-top:1px; }
.form-feedback--success { background:#E3FBED; color:#1B7A42; }
.form-feedback--error   { background:var(--error-container); color:var(--on-error-container); }

.form-note {
  display:flex; align-items:center; gap:var(--sp-2); font-size:.8125rem;
  color:var(--on-surface-variant); background:var(--surface-container-low);
  padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md);
}
.form-note .material-symbols-rounded { font-size:1rem; }

/* ── 16. FOOTER ───────────────────────────────────────────── */
.footer { background:#080F1E; color:rgba(255,255,255,.82); padding:var(--sp-12) 0 0; }

.footer-grid { display:flex; flex-direction:column; gap:var(--sp-8); padding-bottom:var(--sp-10); border-bottom:1px solid rgba(255,255,255,.08); }

.footer-brand { display:flex; flex-direction:column; gap:var(--sp-4); }
.footer-logo img { height:44px; width:auto; }
.footer-tagline  { font-size:.9375rem; line-height:1.6; max-width:260px; color:rgba(255,255,255,.72); }

.footer-social { display:flex; gap:var(--sp-3); margin-top:var(--sp-2); }
.footer-social a {
  width:40px; height:40px; background:rgba(255,255,255,.08); border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:center; font-size:1rem;
  color:rgba(255,255,255,.65); transition:background-color .2s, color .2s, transform .2s;
}
.footer-social a:hover { background:var(--primary); color:#FFF; transform:translateY(-2px); }

.footer-heading { font-family:var(--font-heading); font-size:.8125rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.58); margin-bottom:var(--sp-4); }

.footer-nav ul { display:flex; flex-direction:column; gap:var(--sp-3); }
.footer-nav a  { font-size:.9375rem; color:rgba(255,255,255,.82); transition:color .2s, padding-left .2s; }
.footer-nav a:hover { color:#FFF; padding-left:4px; }

.footer-contact-mini { display:flex; flex-direction:column; gap:var(--sp-3); }
.footer-contact-mini a,
.footer-contact-mini p { font-size:.9375rem; color:rgba(255,255,255,.82); line-height:1.6; transition:color .2s; }
.footer-contact-mini a:hover { color:#FFF; }

.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--sp-3); padding:var(--sp-5) 0; font-size:.875rem; color:rgba(255,255,255,.72); }
.footer-bottom a { color:rgba(255,255,255,.75); transition:color .2s; }
.footer-bottom a:hover { color:rgba(255,255,255,.9); }

/* ── 17. WHATSAPP FAB ─────────────────────────────────────── */
.fab-whatsapp {
  position:fixed; bottom:var(--sp-5); right:var(--sp-5); z-index:var(--z-fab);
  width:58px; height:58px; border-radius:var(--r-xl);
  background:var(--whatsapp); color:#FFF; display:flex; align-items:center; justify-content:center;
  font-size:1.625rem; box-shadow:0 4px 16px rgba(37,211,102,.5);
  transition:transform .25s ease, box-shadow .25s ease;
  animation:fab-heartbeat 2.6s ease-in-out infinite;
}
/* Anillo expansivo que invita al clic (no mueve el ícono) */
.fab-whatsapp::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);
  animation:fab-ring 2.6s ease-out infinite;
  pointer-events:none;
}
.fab-whatsapp:hover {
  transform:translateY(-3px) scale(1.04); box-shadow:0 8px 28px rgba(37,211,102,.6);
  animation-play-state:paused;
}
.fab-whatsapp:hover::before { animation-play-state:paused; }

@keyframes fab-heartbeat {
  0%, 70%, 100% { transform:scale(1); }
  35%           { transform:scale(1.06); }
}
@keyframes fab-ring {
  0%   { box-shadow:0 0 0 0   rgba(37,211,102,.55); }
  70%  { box-shadow:0 0 0 18px rgba(37,211,102,0);  }
  100% { box-shadow:0 0 0 0   rgba(37,211,102,0);   }
}
@media (prefers-reduced-motion: reduce) {
  .fab-whatsapp, .fab-whatsapp::before { animation:none; }
}

.fab-tooltip {
  position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%);
  background:var(--on-surface); color:var(--surface); font-family:var(--font-heading);
  font-size:.8125rem; font-weight:500; padding:6px 14px; border-radius:var(--r-full);
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s; box-shadow:var(--el-2);
}
.fab-tooltip::after { content:''; position:absolute; left:100%; top:50%; transform:translateY(-50%); border:6px solid transparent; border-left-color:var(--on-surface); }
.fab-whatsapp:hover .fab-tooltip { opacity:1; }

/* ── 18. SCROLL REVEAL ANIMATIONS ────────────────────────── */
.animate-in {
  opacity:0; transform:translateY(20px);
  animation:fadeInUp .65s ease forwards;
}
@keyframes fadeInUp { to { opacity:1; transform:translateY(0); } }

[data-delay="0"]   { animation-delay:.15s; }
[data-delay="100"] { animation-delay:.3s;  }
[data-delay="200"] { animation-delay:.48s; }
[data-delay="300"] { animation-delay:.65s; }
[data-delay="380"] { animation-delay:.8s;  }
[data-delay="500"] { animation-delay:1s;   }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal:nth-child(1){ transition-delay:0s; }
.reveal:nth-child(2){ transition-delay:.1s; }
.reveal:nth-child(3){ transition-delay:.2s; }
.reveal:nth-child(4){ transition-delay:.3s; }
.reveal:nth-child(5){ transition-delay:.35s; }
.reveal:nth-child(6){ transition-delay:.4s; }

/* ── 19. RESPONSIVE ── TABLET (MD3 Medium ≥600dp) ─────────── */
@media (min-width:600px) {
  .container   { padding:0 var(--sp-6); }
  .plans-grid  { grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(2, 1fr); overflow:visible; scroll-snap-type:none; margin-inline:0; width:auto; padding-inline:0; padding-top:0; }
  .bento-grid  { grid-template-columns:repeat(2, 1fr); }
  .values-grid { grid-template-columns:repeat(2, 1fr); }
  .mv-grid     { grid-template-columns:1fr 1fr; gap:var(--sp-6); }
  .norma-grid  { grid-template-columns:repeat(2, 1fr); }
  /* Stats: 4 items + 3 divisores en una fila */
  .hero-stats  { grid-template-columns:1fr 1px 1fr 1px 1fr 1px 1fr; }
  .stat-divider{ display:block; }
  /* MD3: nav-actions visible desde Medium (600dp+) */
  .nav-actions { display:flex; gap:var(--sp-2); }
}
/* MD3 Medium (600-839dp): Pagar Factura + hamburger a la derecha */
@media (min-width:600px) and (max-width:839px) {
  .nav-actions { margin-left:auto; }
  .hamburger   { margin-left:0; }
}

/* MD3 Expanded estrecho (840-1199): nav completo pero compactado
   para evitar overflow. "Pagar Factura" queda icon-only en este tramo. */
@media (min-width:840px) and (max-width:1199px) {
  .nav-container          { gap:var(--sp-3); padding:0 var(--sp-3); }
  .nav-link               { padding:var(--sp-2) 10px; font-size:.875rem; }
  .btn-cta-pay-label      { display:none; }
  .btn-cta-pay            { padding-left:12px; padding-right:12px; }
}

/* ── RESPONSIVE — MD3 Large (≥1200dp) ────────────────────── */
@media (min-width:1200px) {
  /* Plans: 4 columnas (Novato/Profesional/Ultra/Leyenda) */
  .plans-grid         { grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }
  .plans-grid .plan-card { padding:var(--sp-5); }

  /* Bento: 2 columnas (4 cards: large+accent full-width, 2 medias al centro) */
  .bento-grid { grid-template-columns:repeat(2,1fr); }
  .bento-card--large  { grid-column:span 2; }
  .bento-card--accent { grid-column:span 2; }

  /* Norma 3 columnas */
  .norma-grid         { grid-template-columns:repeat(3,1fr); }
  .pol-denuncias-grid { grid-template-columns:repeat(5,1fr); }
}

/* XL viewport: widen plans container so 5 cards breathe */
/* XL: plans container wider en pantallas grandes (no es un breakpoint M3, es content-driven) */
@media (min-width:1400px) {
  #planes > .container { max-width:1440px; }
  .plans-grid { gap:var(--sp-5); }
  .plans-grid .plan-card { padding:var(--sp-6); }
}

/* ── PLANS CAROUSEL (desktop ≥1200, cuando hay 5+ cards) ── */
.plans-carousel { position:relative; overflow:visible; }

@media (min-width:1200px) {
  .plans-grid:has(> .plan-card:nth-child(5)) {
    grid-template-columns:unset;
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - 3 * var(--sp-4)) / 4);
    overflow-x:auto;
    overflow-y:clip;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scroll-behavior:smooth;
    scrollbar-width:none;
    padding-top:16px;
  }
  .plans-grid:has(> .plan-card:nth-child(5))::-webkit-scrollbar { display:none; }
  .plans-grid:has(> .plan-card:nth-child(5)) > .plan-card {
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
}
@media (min-width:1400px) {
  .plans-grid:has(> .plan-card:nth-child(5)) {
    grid-auto-columns:calc((100% - 3 * var(--sp-5)) / 4);
  }
}

.plans-nav {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:48px; height:48px;
  border-radius:50%;
  border:2px solid var(--on-surface);
  background:var(--surface-container-high);
  color:var(--on-surface);
  display:none;
  align-items:center; justify-content:center;
  cursor:pointer;
  /* Ring bicolor para contraste sobre cualquier fondo (card claro, card oscuro o página) */
  box-shadow:
    0 0 0 2px var(--surface),
    var(--elevation-2);
  transition:background .2s ease, transform .2s ease, opacity .2s ease, color .2s ease;
}
.plans-nav:hover { background:var(--primary-container); color:var(--on-primary-container); transform:translateY(-50%) scale(1.08); }
.plans-nav:focus-visible { outline:3px solid var(--primary); outline-offset:4px; }
.plans-nav--prev { left:-8px; }
.plans-nav--next { right:-8px; }
.plans-nav .material-symbols-rounded {
  font-size:28px;
  /* Icono bold + halo bidireccional idéntico para prev y next
     — legible sobre bg primary del boton, surface o card featured */
  font-variation-settings:'wght' 700, 'FILL' 1, 'GRAD' 200;
  text-shadow:
    0 0 3px color-mix(in srgb, var(--surface) 90%, transparent),
    0 0 1.5px color-mix(in srgb, var(--on-surface) 55%, transparent),
    0 1px 1px color-mix(in srgb, #000 40%, transparent);
}
.plans-nav[hidden] { display:none !important; }

/* Invite animation: bounce horizontal + glow ring + chevron nudge */
@keyframes plans-nav-invite-next {
  0%, 60%, 100% {
    transform:translateY(-50%) translateX(0) scale(1);
    box-shadow:0 0 0 2px var(--surface), var(--elevation-2), 0 0 0 2px color-mix(in srgb, var(--primary) 55%, transparent);
  }
  15% {
    transform:translateY(-50%) translateX(8px) scale(1.08);
    box-shadow:0 0 0 2px var(--surface), var(--elevation-3), 0 0 0 10px color-mix(in srgb, var(--primary) 28%, transparent);
  }
  30% {
    transform:translateY(-50%) translateX(-3px) scale(1.02);
    box-shadow:0 0 0 2px var(--surface), var(--elevation-2), 0 0 0 6px color-mix(in srgb, var(--primary) 18%, transparent);
  }
  45% {
    transform:translateY(-50%) translateX(6px) scale(1.06);
    box-shadow:0 0 0 2px var(--surface), var(--elevation-3), 0 0 0 8px color-mix(in srgb, var(--primary) 22%, transparent);
  }
}
@keyframes plans-nav-invite-prev {
  0%, 60%, 100% {
    transform:translateY(-50%) translateX(0) scale(1);
    box-shadow:0 0 0 2px var(--surface), var(--elevation-2), 0 0 0 2px color-mix(in srgb, var(--primary) 55%, transparent);
  }
  15% {
    transform:translateY(-50%) translateX(-8px) scale(1.08);
    box-shadow:0 0 0 2px var(--surface), var(--elevation-3), 0 0 0 10px color-mix(in srgb, var(--primary) 28%, transparent);
  }
  30% {
    transform:translateY(-50%) translateX(3px) scale(1.02);
    box-shadow:0 0 0 2px var(--surface), var(--elevation-2), 0 0 0 6px color-mix(in srgb, var(--primary) 18%, transparent);
  }
  45% {
    transform:translateY(-50%) translateX(-6px) scale(1.06);
    box-shadow:0 0 0 2px var(--surface), var(--elevation-3), 0 0 0 8px color-mix(in srgb, var(--primary) 22%, transparent);
  }
}
@keyframes plans-nav-chevron-next {
  0%, 60%, 100% { transform:translateX(0); }
  15%           { transform:translateX(4px); }
  45%           { transform:translateX(3px); }
}
@keyframes plans-nav-chevron-prev {
  0%, 60%, 100% { transform:translateX(0); }
  15%           { transform:translateX(-4px); }
  45%           { transform:translateX(-3px); }
}
@keyframes plans-nav-halo {
  0%, 100% { opacity:0; transform:scale(.6); }
  20%      { opacity:.55; transform:scale(1); }
  60%      { opacity:0; transform:scale(1.6); }
}

/* Estado base invite — ambos lados */
.plans-nav:not([hidden]) {
  background:var(--primary);
  color:var(--on-primary);
  border-color:transparent;
}
.plans-nav--next:not([hidden]) {
  animation:plans-nav-invite-next 2.6s cubic-bezier(.22,1,.36,1) infinite;
}
.plans-nav--prev:not([hidden]) {
  animation:plans-nav-invite-prev 2.6s cubic-bezier(.22,1,.36,1) infinite;
}
.plans-nav--next:not([hidden]) .material-symbols-rounded {
  animation:plans-nav-chevron-next 2.6s cubic-bezier(.22,1,.36,1) infinite;
  display:inline-block;
}
.plans-nav--prev:not([hidden]) .material-symbols-rounded {
  animation:plans-nav-chevron-prev 2.6s cubic-bezier(.22,1,.36,1) infinite;
  display:inline-block;
}
/* Halo expandiéndose */
.plans-nav:not([hidden])::before {
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--primary) 45%, transparent) 0%, transparent 70%);
  animation:plans-nav-halo 2.6s ease-out infinite;
  pointer-events:none;
  z-index:-1;
}

/* Stop + transición neutra simétrica — cualquier interacción apaga AMBOS lados
   para que prev y next funcionen igual (mismo bg, border, animación) */
.plans-carousel.is-interacted .plans-nav,
.plans-carousel.is-interacted .plans-nav .material-symbols-rounded,
.plans-carousel.is-interacted .plans-nav::before {
  animation:none;
}
.plans-carousel.is-interacted .plans-nav {
  background:var(--surface-container-high);
  color:var(--on-surface);
  border-color:var(--on-surface);
}

@media (prefers-reduced-motion:reduce) {
  .plans-grid:has(> .plan-card:nth-child(5)) { scroll-behavior:auto; }
  .plans-nav:not([hidden]),
  .plans-nav:not([hidden]) .material-symbols-rounded,
  .plans-nav:not([hidden])::before { animation:none; }
  .plans-nav:hover { transform:translateY(-50%); }
  /* Sin animación invite: usar estado neutro directo para no quedar en "primary" sólido sin contexto */
  .plans-nav:not([hidden]) { background:var(--surface-container-high); color:var(--on-surface); }
  .plans-nav:not([hidden]) .material-symbols-rounded { color:var(--on-surface); }
}

@media (min-width:1200px) {
  .plans-carousel:has(.plans-grid > .plan-card:nth-child(5)) .plans-nav { display:flex; }
}

.plans-carousel:has(> .tab-content:not(.active)) + .plans-scroll-hint { display:none; }

/* ── SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:var(--surface-container); }
::-webkit-scrollbar-thumb { background:var(--outline); border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:var(--primary); }

/* ── SELECTION ────────────────────────────────────────────── */
::selection { background:var(--primary-container); color:var(--on-primary-container); }

/* ── FOCUS VISIBLE ────────────────────────────────────────── */
:focus-visible { outline:3px solid var(--primary); outline-offset:2px; }
/* A11y M3: focus visible en controles con outline:none (md-field input/select) */
.md-field input:focus-visible,
.md-field select:focus-visible {
  outline:3px solid var(--primary); outline-offset:2px;
}
/* Sobre secciones oscuras, usar inverse-primary para garantizar contraste */
.section--dark :focus-visible,
[data-theme="dark"] :focus-visible { outline-color: var(--inverse-primary); }

/* ── CONTENT-VISIBILITY — defer rendering of below-fold sections ──
   Extendido a secciones medianas/grandes fuera de la vista inicial.
   contain-intrinsic-size reserva alto estimado para evitar CLS durante scroll. */
#beneficios, #testimonios, #faq, #cobertura, #normatividad, #politicas, .footer {
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
}

/* ── 20. DARK MODE — MD3 Color Tokens ────────────────────── */
[data-theme="dark"] {
  --primary:              #A8C4FF;
  --on-primary:           #002E6C;
  --primary-container:    #1A3461;
  --on-primary-container: #D8E2FF;
  --primary-dark:         #8FAAED;
  --primary-light:        #6D90D4;

  --secondary:              #FFBA9D;
  --on-secondary:           #5C1900;
  --secondary-container:    #7A2800;
  --on-secondary-container: #FFDCC9;

  /* Tertiary role — dark */
  --tertiary:               #8AD5C5;
  --on-tertiary:            #00382F;
  --tertiary-container:     #005047;
  --on-tertiary-container:  #A6F1E1;

  --surface:               #1C1B1F;
  --on-surface:            #E6E1E5;
  --surface-variant:       #46464F;
  --on-surface-variant:    #C7C5D0;
  /* Surface containers — 5 niveles M3 dark */
  --surface-container-lowest:  #0F0D13;
  --surface-container-low:     #1E1C23;
  --surface-container:         #29272E;
  --surface-container-high:    #34323A;
  --surface-container-highest: #3E3C43;
  --outline:               #A8A8B0;
  --outline-variant:       #46464F;
  --error:                 #FFB4AB;
  --on-error:              #690005;
  --error-container:       #93000A;
  --on-error-container:    #FFDAD6;

  /* Inverse + scrim — dark */
  --inverse-surface:       #E6E0E9;
  --inverse-on-surface:    #313033;
  --inverse-primary:       #0047AB;
  --scrim:                 rgba(0,0,0,.6);
  --shadow:                rgba(0,0,0,.4);

  /* RGB overrides — dark */
  --primary-rgb:     168,196,255;
  --on-surface-rgb:  230,225,229;
}

[data-theme="dark"] body { background: var(--surface); color: var(--on-surface); }

[data-theme="dark"] #navbar {
  background: rgba(28, 27, 31, 0.92);
  border-bottom-color: var(--outline-variant);
}
[data-theme="dark"] .mobile-menu { background: var(--surface-container); }

[data-theme="dark"] .hv-card {
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-color:rgba(255,255,255,.12);
  box-shadow:
    0 24px 64px -20px rgba(0,0,0,.7),
    0 8px 24px -8px rgba(107,165,255,.25),
    inset 0 1px 0 rgba(255,255,255,.1);
}
[data-theme="dark"] .hv-chip { background: rgba(255,255,255,.1); }
[data-theme="dark"] .plan-tabs { background: var(--surface-container); }
[data-theme="dark"] .segment-btn { border-color:var(--outline-variant); }
[data-theme="dark"] .plan-enterprise-icon { color:#8FBBFF; }
[data-theme="dark"] .plan-card { background: var(--surface-container); border-color: var(--outline-variant); }
[data-theme="dark"] .bento-card { background: var(--surface-container); }
[data-theme="dark"] .ns-main-card { background: linear-gradient(135deg, var(--primary-container), #1A2844); }
[data-theme="dark"] .mv-card      { background: var(--surface-container-high); }
[data-theme="dark"] .cobertura-map { border-color: var(--outline-variant); }
[data-theme="dark"] .faq-list { border-color: var(--outline-variant); }
[data-theme="dark"] .faq-item { border-bottom-color: var(--outline-variant); }
[data-theme="dark"] .faq-trigger:hover { background: var(--surface-container); }
[data-theme="dark"] .faq-item[open] > .faq-trigger { background: var(--primary-container); }
[data-theme="dark"] .norma-card { background: var(--surface-container); border-color: var(--outline-variant); }
[data-theme="dark"] .norma-info-bar { background: var(--surface-container); border-color: var(--outline-variant); }
[data-theme="dark"] .contact-form-card { background: var(--surface-container); }
[data-theme="dark"] .testi-card { background: var(--surface-container); border-color: var(--outline-variant); }
[data-theme="dark"] .form-feedback--success { background: #1A3D2B; color: #66D4A0; }
[data-theme="dark"] .md-field label { background: var(--surface-container); }
[data-theme="dark"] .plans-note { background: var(--primary-container); }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--surface-container); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--outline); }

/* ── Dark mode: Fix secondary-as-background contrast ─────────
   En dark mode --secondary: #FFBA9D (melocotón) — con texto blanco
   tiene ratio ≈ 1.8:1, muy por debajo del 4.5:1 requerido por WCAG 2.1.
   Se sustituye por #D32F2F (Material Red 700) que alcanza ≈ 4.84:1.  */
[data-theme="dark"] .btn-cta-pay                    { background:var(--primary); color:var(--on-primary); box-shadow:0 2px 8px rgba(168,196,255,.25); }
[data-theme="dark"] .btn-cta-pay:hover              { background:var(--primary-dark); box-shadow:0 4px 16px rgba(168,196,255,.35); }
[data-theme="dark"] .btn-pay-extended               { background:var(--primary); color:var(--on-primary); box-shadow:0 2px 8px rgba(168,196,255,.25); }
[data-theme="dark"] .btn-pay-extended:hover,
[data-theme="dark"] .btn-pay-extended:focus-visible  { background:var(--primary-dark); box-shadow:0 4px 12px rgba(168,196,255,.35); }
/* Chips de "descuento/ahorro" en dark: usar error-container (7.2:1) en vez de
   secondary-container (4.1:1 borderline). Semánticamente siguen señalando urgencia. */
[data-theme="dark"] .plan-popular-badge             { background:var(--error-container); color:var(--on-error-container); }
[data-theme="dark"] .btn-filled-secondary           { background:var(--error-container); color:var(--on-error-container); }
[data-theme="dark"] .btn-filled-secondary:hover     { background:#7A2300; color:#FFDCC9; }
[data-theme="dark"] .plan-savings                   { background:var(--error-container); color:var(--on-error-container); }
[data-theme="dark"] .ns-stat--coral                 { background:var(--error-container); color:var(--on-error-container); }
[data-theme="dark"] .testi-avatar--biz              { background:var(--error-container); color:var(--on-error-container); }
[data-theme="dark"] .fab-badge                      { background:var(--error-container); color:var(--on-error-container); }

/* Dark mode: section-eyebrow contrast fix */
[data-theme="dark"] .section-eyebrow { color:#FFB4A8; }

/* ── 21. THEME TOGGLE BUTTON ──────────────────────────────── */
.theme-toggle {
  width:40px; height:40px; background:var(--surface-container);
  border:none; cursor:pointer; border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center;
  color:var(--on-surface-variant); flex-shrink:0;
  transition:background-color .2s, color .2s, transform .2s;
}
.theme-toggle:hover { background:var(--surface-container-high); color:var(--primary); transform:rotate(20deg); }
.theme-toggle .material-symbols-rounded { font-size:1.25rem; }

/* Show/hide icons based on theme */
.theme-icon-light { display:none; }                                       /* light mode: hide sun */
[data-theme="dark"] .theme-icon-dark  { display:none; }                   /* dark mode: hide moon */
[data-theme="dark"] .theme-icon-light { display:block; }                  /* dark mode: show sun  */

.theme-toggle--mobile { background:var(--surface-container); width:36px; height:36px; }
.theme-toggle--mobile .material-symbols-rounded { font-size:1.125rem; }

/* ── 22. TESTIMONIOS ──────────────────────────────────────── */
.testi-grid {
  display:grid; grid-template-columns:1fr; gap:var(--sp-5);
  align-items:stretch;
}

.testi-card {
  background:var(--surface); border:1.5px solid var(--outline-variant);
  border-radius:var(--r-xl); padding:var(--sp-6);
  display:flex; flex-direction:column; gap:var(--sp-5);
  transition:transform .25s, box-shadow .25s, border-color .25s;
  height:100%;
}
.testi-card:hover { transform:translateY(-4px); box-shadow:var(--el-2); border-color:var(--primary-light); }

.testi-stars { display:flex; gap:3px; }
.testi-stars .testi-star { color:#FFC107; font-size:1rem; }

.testi-text {
  font-size:.9375rem; color:var(--on-surface-variant); line-height:1.75;
  font-style:italic; flex:1;
}

.testi-author {
  display:flex; align-items:center; gap:var(--sp-3); margin-top:auto;
  padding-top:var(--sp-4); border-top:1px solid var(--outline-variant);
}

.testi-avatar {
  width:44px; height:44px; border-radius:var(--r-full); flex-shrink:0;
  background:var(--primary); color:var(--on-primary);
  font-family:var(--font-heading); font-size:.875rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.testi-avatar--biz { background:var(--secondary); color:var(--on-secondary); }

.testi-info { display:flex; flex-direction:column; gap:2px; }
.testi-info strong { font-size:.9375rem; font-weight:700; color:var(--on-primary-container); }
.testi-info span { font-size:.8125rem; color:var(--on-surface-variant); }

@media (min-width:600px) {
  .testi-grid { grid-template-columns:repeat(2,1fr); }
}

/* ── 23. FAB BADGE (contador WhatsApp) ───────────────────── */
.fab-badge {
  position:absolute; top:-8px; right:-8px;
  background:var(--secondary); color:#FFF;
  font-family:var(--font-heading); font-size:.6875rem; font-weight:700;
  min-width:22px; height:22px; border-radius:var(--r-full);
  padding:0 5px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.25); border:2px solid var(--surface);
  animation:badgePop .4s cubic-bezier(.34,1.56,.64,1) 2.2s both;
}
@keyframes badgePop { from { transform:scale(0); opacity:0; } to { transform:scale(1); opacity:1; } }
[data-theme="dark"] .fab-badge { border-color: var(--surface); }

/* ── 24. BENTO & NORMA equal heights ─────────────────────── */
.bento-grid { align-items:stretch; }
.bento-card { height:100%; }
.norma-grid { align-items:stretch; }
.norma-card { height:100%; }

/* ── 25. NORMATIVA EXPANDIDA ─────────────────────────────── */

/* Quick access label */
.norma-section-label {
  font-family:var(--font-heading); font-size:.75rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--on-surface-variant);
  margin-bottom:var(--sp-3); margin-top:var(--sp-4);
}
.norma-icon--amber { background:#FFF3E0; color:#E65100; }
[data-theme="dark"] .norma-icon--amber { background:#3E2000; color:#FFBA55; }

/* ── nm-legal: Marco Normativo Completo ── */
.nm-legal {
  margin-top:var(--sp-8);
  border:1.5px solid var(--outline-variant);
  border-radius:var(--r-xl);
  overflow:hidden;
  background:var(--surface);
}
[data-theme="dark"] .nm-legal { background:var(--surface-container); }

.nm-legal-header {
  display:flex; align-items:flex-start; gap:var(--sp-4);
  padding:var(--sp-6); background:var(--primary-container);
  border-bottom:1.5px solid var(--outline-variant);
}
.nm-legal-header > .material-symbols-rounded {
  font-size:2rem; color:var(--primary); flex-shrink:0; margin-top:2px;
}
.nm-legal-title { font-size:1.0625rem; font-weight:700; color:var(--on-primary-container); margin-bottom:4px; }
.nm-legal-header > div > p { font-size:.875rem; color:var(--on-surface-variant); line-height:1.5; }
[data-theme="dark"] .nm-legal-header { background:var(--primary-container); }

.nm-accordion { border-top:none; }

/* ── nm-group: <details> accordion ── */
.nm-group { border-bottom:1.5px solid var(--outline-variant); }
.nm-group:last-child { border-bottom:none; }

.nm-group-trigger {
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-6); cursor:pointer; width:100%;
  list-style:none; background:none; border:none;
  transition:background-color .2s;
}
.nm-group-trigger::-webkit-details-marker { display:none; }
.nm-group-trigger::marker { display:none; }
.nm-group-trigger:hover { background:var(--surface-container-low); }
.nm-group[open] .nm-group-trigger { background:var(--surface-container-low); }

.nm-group-info { flex:1; min-width:0; }
.nm-group-title { display:block; font-size:.9375rem; font-weight:700; color:var(--on-primary-container); }
.nm-group-count { display:block; font-size:.8125rem; color:var(--on-surface-variant); margin-top:2px; }

.nm-chevron {
  font-size:1.5rem; color:var(--on-surface-variant); flex-shrink:0;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.nm-group[open] .nm-chevron { transform:rotate(180deg); }

/* ── nm-doc-list: document rows ── */
.nm-doc-list { list-style:none; padding:0 var(--sp-6) var(--sp-4); }
.nm-doc-list li + li { border-top:1px solid var(--outline-variant); }

.nm-doc-item {
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-2); border-radius:var(--r-md);
  transition:background-color .2s, padding-left .2s;
}
.nm-doc-item:hover { background:var(--surface-container); padding-left:var(--sp-3); }
.nm-doc-item:hover .nm-doc-icon { color:var(--primary); }

.nm-doc-icon { font-size:1.125rem; color:var(--outline); flex-shrink:0; transition:color .2s; }

.nm-doc-item > div { display:flex; flex-direction:column; gap:2px; }
.nm-doc-item strong { font-size:.9rem; font-weight:700; color:var(--on-surface); }
.nm-doc-item span   { font-size:.8125rem; color:var(--on-surface-variant); line-height:1.4; }

/* Document reveal animation */
.nm-doc-list {
  animation:nmSlideDown .25s ease;
}
@keyframes nmSlideDown {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── nm-parental: Control Parental ── */
.nm-parental {
  margin-top:var(--sp-8); border:1.5px solid #FFC107;
  border-radius:var(--r-xl); overflow:hidden;
}
[data-theme="dark"] .nm-parental { border-color:#7A5800; }

.nm-parental-banner {
  display:flex; align-items:flex-start; gap:var(--sp-4);
  padding:var(--sp-6); background:#FFF8E1;
  border-bottom:1.5px solid #FFC107;
}
[data-theme="dark"] .nm-parental-banner { background:#2A1E00; border-bottom-color:#7A5800; }

.nm-parental-badge {
  width:52px; height:52px; border-radius:var(--r-full); flex-shrink:0;
  background:#FFC107; color:#FFF;
  display:flex; align-items:center; justify-content:center;
}
.nm-parental-badge .material-symbols-rounded { font-size:1.75rem; }

.nm-parental-intro h3 { font-size:1rem; font-weight:700; color:#5D4037; margin-bottom:var(--sp-2); }
[data-theme="dark"] .nm-parental-intro h3 { color:#FFD54F; }
.nm-parental-intro p  { font-size:.875rem; color:#795548; line-height:1.6; }
[data-theme="dark"] .nm-parental-intro p  { color:#D7C083; }

.nm-parental-cols {
  display:grid; grid-template-columns:1fr; gap:0;
}
@media (min-width:840px) { .nm-parental-cols { grid-template-columns:1fr 1fr; } }

.nm-parental-tools, .nm-denuncia { padding:var(--sp-6); }
.nm-parental-tools { border-bottom:1.5px solid var(--outline-variant); }
@media (min-width:840px) {
  .nm-parental-tools { border-bottom:none; border-right:1.5px solid var(--outline-variant); }
}

.nm-col-title {
  display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-4);
  font-size:.9rem; font-weight:700; color:var(--on-primary-container);
}
.nm-col-title .material-symbols-rounded { font-size:1.125rem; color:var(--primary); }

.nm-tools-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3); }

.nm-tool-card {
  display:flex; flex-direction:column; align-items:center;
  gap:var(--sp-2); padding:var(--sp-4) var(--sp-3); text-align:center;
  border:1.5px solid var(--outline-variant); border-radius:var(--r-lg);
  transition:border-color .2s, background-color .2s, transform .2s;
}
.nm-tool-card:hover {
  border-color:var(--primary); background:var(--primary-container);
  transform:translateY(-2px);
}
.nm-tool-card .material-symbols-rounded { font-size:1.5rem; color:var(--primary); }
.nm-tool-card span { font-size:.875rem; font-weight:700; color:var(--on-surface); }
.nm-tool-card small { font-size:.75rem; color:var(--on-surface-variant); }
[data-theme="dark"] .nm-tool-card { background:var(--surface-container-high); }
[data-theme="dark"] .nm-tool-card:hover { background:var(--primary-container); }

.nm-denuncia-list { list-style:none; display:flex; flex-direction:column; gap:var(--sp-3); }

.nm-denuncia-item {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); border-radius:var(--r-lg);
  background:var(--surface-container-low);
  border:1px solid var(--outline-variant);
}
[data-theme="dark"] .nm-denuncia-item { background:var(--surface-container-high); }

.nm-denuncia-item > .material-symbols-rounded { font-size:1.25rem; color:var(--primary); flex-shrink:0; }
.nm-denuncia-item > div { display:flex; flex-direction:column; gap:2px; }
.nm-denuncia-item strong { font-size:.875rem; font-weight:700; color:var(--on-surface); }
.nm-denuncia-item a { font-size:.8125rem; color:var(--primary); font-weight:600; }
.nm-denuncia-item a:hover { text-decoration:underline; }

/* ── 26. NAV DROPDOWN ────────────────────────────────────── */
.nav-dropdown { position:relative; }

button.nav-link { background:none; border:none; font:inherit; cursor:pointer; }

.nav-dropdown-trigger {
  display:inline-flex; align-items:center; gap:4px;
  padding:6px 10px; border-radius:var(--r-md);
}

.nav-dropdown-arrow {
  font-size:1.125rem; transition:transform .2s cubic-bezier(.4,0,.2,1);
  color:var(--on-surface-variant);
}
.nav-dropdown-trigger[aria-expanded="true"] .nav-dropdown-arrow { transform:rotate(180deg); }

.nav-dropdown-menu {
  position:absolute; top:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:var(--surface); border:1.5px solid var(--outline-variant);
  border-radius:var(--r-xl); padding:var(--sp-2);
  box-shadow:0 8px 24px rgba(0,0,0,.12); min-width:260px;
  opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease, transform .2s cubic-bezier(.4,0,.2,1);
  z-index:var(--z-dropdown);
}
.nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown-menu {
  opacity:1; visibility:visible;
  transform:translateX(-50%) translateY(0);
}
[data-theme="dark"] .nav-dropdown-menu { background:var(--surface-container); }

.nav-dropdown-item {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); border-radius:var(--r-lg);
  color:var(--on-surface); transition:background-color .15s, color .15s;
}
.nav-dropdown-item:hover { background:var(--surface-container); color:var(--primary); }
.nav-dropdown-item > .material-symbols-rounded { font-size:1.25rem; color:var(--primary); flex-shrink:0; }
.nav-dropdown-item > div strong { display:block; font-size:.9rem; font-weight:700; }
.nav-dropdown-item > div small { display:block; font-size:.75rem; color:var(--on-surface-variant); }

.nav-dropdown-divider { height:1px; background:var(--outline-variant); margin:var(--sp-2) var(--sp-3); }


/* ── 27. POLÍTICAS DEL PROVEEDOR ────────────────────────── */
.pol-list {
  border:1.5px solid var(--outline-variant);
  border-radius:var(--r-xl); overflow:hidden; background:var(--surface);
}
[data-theme="dark"] .pol-list { background:var(--surface-container); }

.pol-item { border-bottom:1.5px solid var(--outline-variant); }
.pol-item:last-child { border-bottom:none; }

/* Remove default summary marker */
.pol-trigger { list-style:none; }
.pol-trigger::-webkit-details-marker { display:none; }
.pol-trigger::marker { display:none; }

.pol-trigger {
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-6); cursor:pointer;
  transition:background-color .2s;
}
.pol-trigger:hover { background:var(--surface-container-low); }
.pol-item[open] .pol-trigger { background:var(--surface-container-low); }
[data-theme="dark"] .pol-trigger:hover,
[data-theme="dark"] .pol-item[open] .pol-trigger { background:var(--surface-container-high); }

.pol-num {
  font-family:var(--font-heading); font-size:.75rem; font-weight:800;
  color:var(--outline); min-width:24px; flex-shrink:0;
}
.pol-info { flex:1; min-width:0; }
.pol-title { display:block; font-size:.9375rem; font-weight:700; color:var(--on-surface); line-height:1.4; }
.pol-law   { display:block; font-size:.75rem; color:var(--on-surface-variant); margin-top:3px; font-style:italic; }

.pol-chevron {
  font-size:1.5rem; color:var(--on-surface-variant); flex-shrink:0;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.pol-item[open] .pol-chevron { transform:rotate(180deg); }

.pol-body {
  padding:0 var(--sp-6) var(--sp-5);
  padding-left:calc(var(--sp-6) + 24px + var(--sp-4) + 44px + var(--sp-4));
  animation:nmSlideDown .25s ease;
}

.pol-body > p {
  font-size:.9375rem; color:var(--on-surface-variant); line-height:1.75;
  border-left:3px solid var(--primary-light); padding-left:var(--sp-4);
  margin-bottom:var(--sp-5);
}

.pol-links { display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-1); }

.pol-link {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 16px; border-radius:var(--r-full);
  background:var(--primary-container); color:var(--primary);
  font-size:.875rem; font-weight:600;
  transition:background-color .2s, transform .15s;
}
.pol-link:hover { background:var(--primary); color:var(--on-primary); transform:translateY(-1px); }
.pol-link .material-symbols-rounded { font-size:1rem; }
.pol-link--warn { background:rgba(255,193,7,.15); color:#B45309; }
.pol-link--warn:hover { background:#B45309; color:#FFF; }
[data-theme="dark"] .pol-link--warn { background:rgba(255,193,7,.2); color:#FFC107; }

/* Denuncias grid inside policy 10 */
.pol-denuncias-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3); margin-top:var(--sp-4);
}
/* Breakpoints alineados a M3 Window Size Classes (Medium 600, Expanded 840) */
@media (min-width:600px) { .pol-denuncias-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:840px) { .pol-denuncias-grid { grid-template-columns:repeat(5,1fr); } }

.pol-denuncia-card {
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-2);
  padding:var(--sp-4); text-align:center;
  border:1.5px solid var(--outline-variant); border-radius:var(--r-lg);
  transition:border-color .2s, background .2s, transform .2s;
}
.pol-denuncia-card:hover { border-color:var(--primary); background:var(--primary-container); transform:translateY(-2px); }
.pol-denuncia-card .material-symbols-rounded { font-size:1.5rem; color:var(--primary); }
.pol-denuncia-card strong { font-size:.875rem; font-weight:700; color:var(--on-surface); }
.pol-denuncia-card small  { font-size:.75rem; color:var(--on-surface-variant); }
[data-theme="dark"] .pol-denuncia-card { background:var(--surface-container-high); }
[data-theme="dark"] .pol-denuncia-card:hover { background:var(--primary-container); }

/* Mobile: collapse pol-body left padding */
@media (max-width:599px) {
  .pol-body { padding-left:var(--sp-5); }
  .pol-trigger { padding:var(--sp-4) var(--sp-4); gap:var(--sp-3); }
  .pol-num { display:none; }
}




/* ── PLAN PROMO RIBBON ───────────────────────────────────── */
/* Actívalo en el plan con: data-promo="Tu texto de oferta"   */
/* Desactívalo eliminando el atributo data-promo              */

.plan-card[data-promo]::after {
  content: attr(data-promo);
  position: absolute;
  top: 0; right: 0;
  background: var(--secondary);
  color: #FFF;
  font-family: var(--font-heading);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 6px 14px 6px 16px;
  border-radius: 0 var(--r-xl) 0 var(--r-full);
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
  box-shadow: -2px 2px 10px color-mix(in srgb, var(--secondary) 35%, transparent);
  animation: ribbonPulse 2.5s ease-in-out infinite;
}

@keyframes ribbonPulse {
  0%, 100% { box-shadow: -2px 2px 10px color-mix(in srgb, var(--secondary) 35%, transparent); }
  50%       { box-shadow: -3px 3px 16px color-mix(in srgb, var(--secondary) 60%, transparent); }
}

[data-theme="dark"] .plan-card[data-promo]::after {
  background: var(--error-container);
  color: var(--on-error-container);
  box-shadow: -2px 2px 12px rgba(0,0,0,.35);
}

@media (max-width:599px) {
  .plan-card[data-promo]::after { font-size:.625rem; padding:5px 10px 5px 12px; }
}



/* ═══════════════════════════════════════════════════════════
   MOBILE-FIRST — MD3 COMPREHENSIVE REFINEMENTS
   ════════════════════════════════════════════════════════ */

/* ── Safe area (notch / home bar) ────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-menu  { padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom)); }
  .fab-whatsapp { bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); }
}

/* ── MD3 Touch targets — minimum 48dp ────────────────────── */
.nav-link,
button.nav-link {
  min-height:48px;
  display:inline-flex; align-items:center;
}
.faq-trigger         { min-height:60px; }
.tab-btn             { min-height:48px; }
.nm-group-trigger    { min-height:56px; }
.pol-trigger         { min-height:56px; }
.nm-doc-item         { min-height:52px; }
.mobile-nav-link     { min-height:48px; display:flex; align-items:center; }

/* ── Plans tabs — scrollable on small screens ─────────────── */
.plan-tabs {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  justify-content:flex-start;
  flex-wrap:nowrap;
}
.plan-tabs::-webkit-scrollbar { display:none; }
.tab-btn { flex-shrink:0; white-space:nowrap; }

@media (max-width:599px) {
  .segment-tabs {
    justify-content:center; flex-wrap:nowrap; gap:var(--sp-1);
  }
  .segment-btn {
    flex:1 1 0; justify-content:center;
    font-size:.875rem; padding:10px 12px;
    white-space:nowrap; min-height:48px;
  }
  .segment-btn .material-symbols-rounded { font-size:1rem; }
  .plan-tabs {
    justify-content:center; overflow-x:visible; flex-wrap:nowrap;
  }
  .tab-btn {
    flex:1 1 0; justify-content:center;
    font-size:.8125rem; padding:10px 8px;
    white-space:nowrap;
  }
  .tab-btn .material-symbols-rounded { font-size:1rem; }
}

/* ── Hero overlay — stacked layouts (< 840px): centrado, no direccional ── */
@media (max-width:839px) {
  .hero-bg-overlay {
    background:
      radial-gradient(ellipse 80% 70% at 50% 40%,
        rgba(5,14,31,.72) 0%,
        rgba(0,30,80,.58) 60%,
        rgba(5,14,31,.52) 100%),
      linear-gradient(to bottom,
        rgba(5,14,31,.30) 0%,
        transparent         35%,
        transparent          65%,
        rgba(5,14,31,.45) 100%);
  }
  [data-theme="dark"] .hero-bg-overlay {
    background:
      radial-gradient(ellipse 80% 70% at 50% 40%,
        rgba(3,8,20,.78) 0%,
        rgba(0,18,55,.65) 60%,
        rgba(3,8,20,.58) 100%),
      linear-gradient(to bottom,
        rgba(3,8,20,.35) 0%,
        transparent         35%,
        transparent          65%,
        rgba(3,8,20,.50) 100%);
  }
}

/* ── Hero tablet portrait (M3 Medium 600–839): stacked pulido ── */
@media (min-width:600px) and (max-width:839px) {
  .hero-main    { padding:var(--sp-12) var(--sp-6) var(--sp-10); gap:var(--sp-6); }
  .hero-content { max-width:560px; gap:var(--sp-4); }
  .hero-title   { font-size:clamp(2.5rem, 5.5vw, 3.25rem); }
  .hero-subtitle{ font-size:1.0625rem; max-width:520px; }
  .hero-actions { flex-direction:row; flex-wrap:wrap; justify-content:center; max-width:none; width:auto; gap:var(--sp-3); }
  .hero-actions .btn { width:auto; flex:0 0 auto; }
  .hero-visual  { max-width:420px; }
}

/* ── Hero chips — hide on very small screens ──────────────── */
/* TODO: consolidar a ≤599 cuando se unifiquen reglas de 480–599 */
/* XS: hero compacto en pantallas muy pequeñas (content-driven, no M3) */
@media (max-width:479px) {
  .hv-chip       { display:none; }
  .hero-main     { gap:var(--sp-5); padding-top:var(--sp-6); padding-bottom:var(--sp-4); }
  .hero-visual   { max-width:260px; }
  .hero-title    { font-size:clamp(1.875rem, 9vw, 2.5rem); }
  .hero-actions  { max-width:100%; }
  .hero-trust    { flex-direction:row; justify-content:center; gap:var(--sp-2) var(--sp-3); }
}

/* ── Section spacing — more compact on mobile ─────────────── */
@media (max-width:599px) {
  .section               { padding:var(--sp-10) 0; }
  .section-header        { margin-bottom:var(--sp-6); }
  .section-title         { font-size:clamp(1.625rem, 7vw, 2.125rem); }
  .section-subtitle      { font-size:.9375rem; }
  .container             { padding:0 var(--sp-4); }
}

/* ── Hero stats — better on mobile ───────────────────────── */
@media (max-width:599px) {
  .hero-stats { padding:var(--sp-4) var(--sp-2); }
  .hero-stat  { padding:var(--sp-3) var(--sp-1); }
  .stat-number{ font-size:clamp(1.375rem,6vw,1.75rem); }
}

/* ── MD3 Expanded (≥840dp): Multi-column layouts + full nav ── */
@media (min-width:840px) {
  :root { --nav-h:72px; }
  .container { padding:0 var(--sp-8); }
  .section   { padding:var(--sp-16) 0; }

  /* Nav: full links visible, hide hamburger */
  .nav-links { display:flex; }
  .hamburger { display:none; }

  /* Hero: two-column layout */
  .hero { min-height:100vh; }
  .hero-title { font-size:clamp(3rem, 4.5vw, 4rem); }
  .hero-subtitle { font-size:clamp(1.0625rem, 2vw, 1.1875rem); }
  .hero-main {
    flex-direction:row; justify-content:space-between;
    align-items:center; padding:var(--sp-16) var(--sp-6) var(--sp-12);
    gap:var(--sp-10);
  }
  .hero-content { align-items:flex-start; text-align:left; flex:1 1 0; min-width:0; }
  .hero-actions { flex-direction:row; max-width:none; }
  .hero-actions .btn { width:auto; flex:0 auto; }
  .hero-trust   { justify-content:flex-start; }
  .hero-visual  { flex:0 0 300px; max-width:340px; }

  /* Nosotros: two columns */
  .nosotros-grid       { flex-direction:row; align-items:flex-start; gap:var(--sp-16); }
  .nosotros-content    { flex:1; }
  .nosotros-visual     { flex:0 0 340px; }

  /* Contact: two columns */
  .contact-grid        { flex-direction:row; align-items:flex-start; gap:var(--sp-8); }
  .contact-left        { flex:0 0 42%; }
  .contact-form-card   { flex:1; }

  /* Cobertura: two columns */
  .cobertura-grid      { flex-direction:row; align-items:center; gap:var(--sp-10); }
  .cobertura-info      { flex:1; }
  .cobertura-map       { flex:1; }
  .cobertura-map iframe{ min-height:380px; }

  /* Footer: horizontal con wrap para evitar compresión en 840–1199 */
  .footer-grid  { flex-direction:row; flex-wrap:wrap; gap:var(--sp-6); }
  .footer-brand { flex:2; }

  /* Norma parental cols */
  .nm-parental-cols    { grid-template-columns:1fr 1fr; }
  .nm-parental-tools   { border-bottom:none; border-right:1.5px solid var(--outline-variant); }

  /* Pol denuncias */
  .pol-denuncias-grid  { grid-template-columns:repeat(3,1fr); }

  /* NM accordion nicer layout */
  .nm-group-trigger, .pol-trigger { gap:var(--sp-5); }
}

/* ── MD3 Expanded estrecho (840–1199): ajustes de hero y bento ── */
@media (min-width:840px) and (max-width:1199px) {
  /* Hero: gap reducido y visual más estrecho para caber sin overflow */
  .hero-main    { gap:var(--sp-6); }
  .hero-visual  { flex-basis:300px; }
  /* Bento: large y accent ocupan fila completa desde Expanded */
  .bento-card--large  { grid-column:span 2; }
  .bento-card--accent { grid-column:span 2; }
  /* Nosotros: visual más estrecho para no aplastar el contenido */
  .nosotros-visual { flex-basis:300px; }
}

/* ── MD3 State layer — hover only on pointer devices ─────── */
@media (hover:none) {
  .norma-card:hover,
  .plan-card:hover,
  .bento-card:hover,
  .testi-card:hover,
  .nm-tool-card:hover,
  .pol-denuncia-card:hover { transform:none; box-shadow:none; }
}

/* ── MD3 Typography — body sizing on small screens ────────── */
@media (max-width:599px) {
  .plan-price-amount { font-size:2.5rem; }
  .plan-price-period { font-size:.875rem; }
  .bento-title       { font-size:1rem; }
  .norma-title       { font-size:.9rem; }
  .faq-question      { font-size:.9375rem; }
  .testi-text        { font-size:.875rem; }
  .nm-group-title    { font-size:.875rem; }
  .pol-title         { font-size:.875rem; line-height:1.4; }
}

/* ── Normativa banner — stack on mobile ──────────────────── */
@media (max-width:599px) {
  .nm-legal-header   { flex-direction:column; gap:var(--sp-3); padding:var(--sp-5); }
  .nm-parental-banner{ flex-direction:column; padding:var(--sp-5); }
  .nm-parental-badge { width:44px; height:44px; align-self:flex-start; }
  .nm-parental-tools,
  .nm-denuncia       { padding:var(--sp-5); }
}

/* ── Contact form — comfortable on mobile ────────────────── */
@media (max-width:599px) {
  .contact-form-card { padding:var(--sp-5); }
  .contact-items     { gap:var(--sp-3); }
}

/* ── Footer — better on mobile ───────────────────────────── */
@media (max-width:599px) {
  .footer { padding:var(--sp-10) 0 var(--sp-6); }
  .footer-grid { gap:var(--sp-8); }
  .footer-tagline { max-width:100%; }
  .footer-nav-title { margin-bottom:var(--sp-3); }
}

/* ── Nosotros bento on tablet — ya cubierto por min-width:600px */

/* ── Nav active indicator on mobile ──────────────────────── */
.mobile-nav-link.active {
  background:var(--primary-container); color:var(--primary); font-weight:600;
}

/* ── Scrollbar compacto + chip overflow en mobile ─────────── */
@media (max-width:839px) {
  ::-webkit-scrollbar { width:4px; }
  .hv-chip--2 { left:-8px; }
  .hv-chip--3 { right:0; }
}

/* ══════════════════════════════════════════════════════════
   MD3 — MOBILE PAY BOTTOM ACTION BAR
   Solo visible en Compact (< 600dp) — tablet y desktop usan nav-actions
   ══════════════════════════════════════════════════════════ */
.mobile-pay-bar {
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:calc(var(--z-nav) - 10);
  background:var(--surface);
  border-top:1.5px solid var(--outline-variant);
  padding:var(--sp-3) var(--sp-4);
  padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  /* MD3 elevation — surface tint + shadow */
  box-shadow:0 -2px 8px rgba(0,0,0,.06), 0 -4px 20px rgba(0,71,171,.07);
  /* Slide-in entrance */
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.25,.46,.45,.94);
}
.mobile-pay-bar.visible { transform:translateY(0); }

.btn-pay-extended {
  display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
  width:100%;
  /* MD3 color: primary — highest prominence for revenue CTA */
  background:var(--primary); color:var(--on-primary);
  padding:14px 24px; border-radius:var(--r-full);
  font-family:var(--font-heading); font-size:1rem; font-weight:700;
  letter-spacing:.015em; text-decoration:none; min-height:52px;
  box-shadow:0 2px 8px rgba(0,71,171,.30), 0 4px 16px rgba(0,71,171,.18);
  transition:background-color .2s, transform .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;
  position:relative; overflow:hidden;
}
.btn-pay-extended::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.1) 50%, transparent 100%);
  transform:translateX(-100%);
  animation:ctaShimmer 3s ease-in-out 3s infinite;
}
.btn-pay-extended .material-symbols-rounded {
  font-size:1.35rem; flex-shrink:0;
  font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;
}
.btn-pay-extended:hover,
.btn-pay-extended:focus-visible {
  background:var(--primary-dark);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,71,171,.40), 0 6px 24px rgba(0,71,171,.22);
}
.btn-pay-extended:active { transform:translateY(0); box-shadow:none; }

/* Dark mode */
[data-theme="dark"] .mobile-pay-bar {
  background:var(--surface-container);
  border-top-color:rgba(255,255,255,.10);
  box-shadow:0 -2px 12px rgba(0,0,0,.30);
}

/* MD3: Solo visible en Compact (< 600dp) — tablet y desktop usan nav-actions */
@media (max-width:599px) {
  .mobile-pay-bar { display:block; }
  body { padding-bottom:80px; }
  .fab-whatsapp { bottom:calc(80px + var(--sp-4)); }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width:599px) {
    .fab-whatsapp { bottom:calc(80px + var(--sp-4) + env(safe-area-inset-bottom)); }
    body { padding-bottom:calc(80px + env(safe-area-inset-bottom)); }
  }
}

/* ══════════════════════════════════════════════════════════
   MD3 — SCROLL TO TOP FAB
   ══════════════════════════════════════════════════════════ */
.scroll-top-fab {
  position:fixed; left:var(--sp-5); z-index:calc(var(--z-nav) - 10);
  bottom:var(--sp-5);
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:var(--r-md);
  background:var(--on-surface); color:var(--surface);
  border:none;
  cursor:pointer; box-shadow:var(--el-3);
  /* Initially hidden */
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease,
             background-color .2s, box-shadow .15s, color .15s;
  will-change:transform, opacity;
}
.scroll-top-fab.visible {
  opacity:1; transform:translateY(0); pointer-events:auto;
  animation:scroll-top-bob 2s ease-in-out infinite;
}
.scroll-top-fab:hover {
  background:var(--primary); color:var(--on-primary);
  box-shadow:var(--el-4);
  animation-play-state:paused;
}
.scroll-top-fab:active { transform:translateY(2px); box-shadow:var(--el-1); animation-play-state:paused; }
.scroll-top-fab .material-symbols-rounded {
  font-size:1.25rem;
  animation:scroll-top-arrow 2s ease-in-out infinite;
}
.scroll-top-fab:hover .material-symbols-rounded,
.scroll-top-fab:active .material-symbols-rounded { animation-play-state:paused; }

/* Adaptive contrast: light bg → dark FAB (default), dark bg → light FAB */
.scroll-top-fab.on-dark {
  background:#ffffff; color:#1C1B1F;
}
.scroll-top-fab.on-dark:hover {
  background:var(--primary); color:var(--on-primary);
}
.scroll-top-fab.on-light {
  background:#1C1B1F; color:#ffffff;
}
.scroll-top-fab.on-light:hover {
  background:var(--primary); color:var(--on-primary);
}

@keyframes scroll-top-bob {
  0%, 100% { transform:translateY(0); }
  50%      { transform:translateY(-6px); }
}
@keyframes scroll-top-arrow {
  0%, 100% { transform:translateY(0); opacity:1; }
  50%      { transform:translateY(-2px); opacity:.85; }
}

/* Mobile: igual altura que el FAB de WhatsApp (encima del pay bar) */
@media (max-width:599px) {
  .scroll-top-fab { left:var(--sp-5); bottom:calc(80px + var(--sp-4)); }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width:599px) {
    .scroll-top-fab { bottom:calc(80px + var(--sp-4) + env(safe-area-inset-bottom)); }
  }
}
[data-theme="dark"] .scroll-top-fab { background:#E6E1E5; color:#1C1B1F; border:none; }
/* Accesibilidad: sin animacion si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .scroll-top-fab,
  .scroll-top-fab .material-symbols-rounded { transform:none !important; animation:none !important; }
  .reveal { opacity:1; transform:none; }
  .animate-in { opacity:1; transform:none; }
}

/* ============================================
   Terms & Conditions modal
   ============================================ */
.plan-terms-link {
  background:none;
  border:0;
  padding:0;
  margin:0;
  font:inherit;
  color:var(--primary);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  cursor:pointer;
  text-align:left;
  transition:color .2s ease;
}
.plan-card--featured .plan-terms-link { color:rgba(255,255,255,.85); }
.plan-card--featured .plan-terms-link:hover { color:#FFF; }
.plan-terms-link:hover { color:var(--secondary); }
.plan-terms-link:focus-visible {
  outline:3px solid var(--primary);
  outline-offset:2px;
  border-radius:4px;
}

.terms-modal {
  padding:0;
  border:0;
  background:transparent;
  max-width:min(560px, calc(100% - var(--sp-4)));
  width:100%;
  margin:auto;
  inset:0;
  color:var(--md-on-surface, #1C1B1F);
}
.terms-modal::backdrop {
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.terms-modal[open] {
  animation:terms-modal-in .42s cubic-bezier(.2, .8, .2, 1.15) both;
}
.terms-modal[open]::backdrop {
  animation:terms-backdrop-in .3s ease-out both;
}
.terms-modal.is-closing {
  animation:terms-modal-out .22s cubic-bezier(.4, 0, 1, 1) both;
}
.terms-modal.is-closing::backdrop {
  animation:terms-backdrop-out .22s ease-in both;
}
@keyframes terms-modal-in {
  0%   { opacity:0; transform:translateY(24px) scale(.92); filter:blur(6px); }
  60%  { opacity:1; transform:translateY(-4px) scale(1.015); filter:blur(0); }
  100% { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
@keyframes terms-modal-out {
  from { opacity:1; transform:translateY(0) scale(1); }
  to   { opacity:0; transform:translateY(12px) scale(.96); }
}
@keyframes terms-backdrop-in {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes terms-backdrop-out {
  from { opacity:1; }
  to   { opacity:0; }
}

.terms-modal-card {
  background:var(--md-surface, #FFFBFE);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 24px 48px rgba(0,0,0,.24), 0 8px 16px rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
  max-height:85vh;
}
.terms-modal-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5) var(--sp-3);
  border-bottom:1px solid var(--md-outline-variant, rgba(0,0,0,.08));
}
.terms-modal-title {
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  margin:0;
  font-size:1.25rem;
  font-weight:600;
  line-height:1.3;
  color:var(--md-on-surface, #1C1B1F);
}
.terms-modal-title .material-symbols-rounded {
  font-size:1.5rem;
  color:var(--primary);
}
.terms-modal-close {
  min-width:48px;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  border-radius:50%;
  cursor:pointer;
  color:var(--md-on-surface-variant, #49454F);
  transition:background .2s ease, color .2s ease;
}
.terms-modal-close:hover { background:rgba(0,0,0,.06); }
.terms-modal-close:focus-visible {
  outline:3px solid var(--primary);
  outline-offset:2px;
}

.terms-modal-body {
  padding:var(--sp-4) var(--sp-5);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.terms-list {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
.terms-list li {
  display:flex;
  gap:var(--sp-2);
  align-items:flex-start;
  font-size:0.95rem;
  line-height:1.55;
  color:var(--md-on-surface-variant, #49454F);
}
.terms-list li .material-symbols-rounded {
  flex-shrink:0;
  font-size:1.25rem;
  color:var(--primary);
  margin-top:2px;
}
.terms-list strong { color:var(--md-on-surface, #1C1B1F); }

.terms-modal-footer {
  display:flex;
  justify-content:flex-end;
  gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-5) var(--sp-4);
  border-top:1px solid var(--md-outline-variant, rgba(0,0,0,.08));
}

@media (max-width:599px) {
  .terms-modal { max-width:calc(100% - var(--sp-3)); }
  .terms-modal-card { border-radius:24px; max-height:90vh; }
  .terms-modal-header { padding:var(--sp-3) var(--sp-4) var(--sp-3); }
  .terms-modal-body   { padding:var(--sp-3) var(--sp-4); }
  .terms-modal-footer { padding:var(--sp-3) var(--sp-4); }
  .terms-modal-title  { font-size:1.125rem; }
}

[data-theme="dark"] .terms-modal-card {
  background:#2B2930;
  color:#E6E1E5;
}
[data-theme="dark"] .terms-modal-title,
[data-theme="dark"] .terms-list strong { color:#E6E1E5; }
[data-theme="dark"] .terms-list li { color:#CAC4D0; }
[data-theme="dark"] .terms-modal-close { color:#CAC4D0; }
[data-theme="dark"] .terms-modal-close:hover { background:rgba(255,255,255,.08); }
[data-theme="dark"] .terms-modal-header,
[data-theme="dark"] .terms-modal-footer { border-color:rgba(255,255,255,.1); }

@media (prefers-reduced-motion: reduce) {
  .terms-modal[open],
  .terms-modal[open]::backdrop,
  .terms-modal.is-closing,
  .terms-modal.is-closing::backdrop { animation:none; }
}

/* ── WhatsApp Contact Modal ────────────────────────── */
.wa-modal {
  border:none; border-radius:var(--r-xl); padding:0;
  max-width:440px; width:calc(100% - var(--sp-4));
  background:transparent; overflow:visible;
  position:fixed; margin:auto;
}
.wa-modal::backdrop {
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.wa-modal[open] { animation:terms-modal-in 420ms cubic-bezier(.34,1.56,.64,1) both; }
.wa-modal[open]::backdrop { animation:fadeIn 250ms ease both; }
.wa-modal.is-closing { animation:terms-modal-out 220ms ease both; }
.wa-modal.is-closing::backdrop { animation:fadeOut 200ms ease both; }

.wa-modal-card {
  background:var(--surface-container); color:var(--on-surface);
  border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--elevation-3);
  display:flex; flex-direction:column;
}
.wa-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-4) var(--sp-5) var(--sp-3);
  border-bottom:1px solid var(--outline-variant);
}
.wa-modal-title {
  font:var(--title-large); margin:0;
  display:flex; align-items:center; gap:var(--sp-2);
}
.wa-modal-close {
  background:none; border:none; cursor:pointer;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--on-surface-variant);
  transition:background .2s;
}
.wa-modal-close:hover { background:rgba(0,0,0,.06); }
.wa-modal-close:focus-visible {
  outline:3px solid var(--primary); outline-offset:2px;
}

.wa-modal-body {
  padding:var(--sp-4) var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-4);
}
.wa-field { display:flex; flex-direction:column; gap:4px; }
.wa-field label {
  font:var(--label-large); color:var(--on-surface-variant);
}
.wa-field input {
  font:var(--body-large); padding:12px 16px;
  border:1px solid var(--outline); border-radius:var(--r-xs);
  background:var(--surface); color:var(--on-surface);
  transition:border-color .2s, box-shadow .2s;
}
.wa-field input:focus {
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
}
.wa-field input[aria-invalid="true"] {
  border-color:var(--error, #B3261E);
}
.wa-field-error {
  font:var(--body-small); color:var(--error, #B3261E);
  min-height:1.2em;
}

.wa-modal-footer {
  display:flex; justify-content:flex-end; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-5) var(--sp-4);
  border-top:1px solid var(--outline-variant);
}
.wa-modal-footer .btn-whatsapp {
  display:inline-flex; align-items:center; gap:var(--sp-2);
}

@media (max-width:599px) {
  .wa-modal { max-width:calc(100% - var(--sp-3)); }
  .wa-modal-card { border-radius:24px; }
  .wa-modal-header { padding:var(--sp-3) var(--sp-4) var(--sp-3); }
  .wa-modal-body   { padding:var(--sp-3) var(--sp-4); }
  .wa-modal-footer { padding:var(--sp-3) var(--sp-4); }
  .wa-modal-title  { font-size:1.125rem; }
}

[data-theme="dark"] .wa-modal-card {
  background:var(--surface-container-high, #2B2930);
}
[data-theme="dark"] .wa-modal-title,
[data-theme="dark"] .wa-modal-title .icon-svg { color:#E6E1E5; fill:#25D366; }
[data-theme="dark"] .wa-modal-close { color:#CAC4D0; }
[data-theme="dark"] .wa-modal-close:hover { background:rgba(255,255,255,.08); }
[data-theme="dark"] .wa-modal-header,
[data-theme="dark"] .wa-modal-footer { border-color:rgba(255,255,255,.1); }
[data-theme="dark"] .wa-field input {
  background:var(--surface-container, #211F26);
  border-color:var(--outline-variant);
  color:#E6E1E5;
}

@media (prefers-reduced-motion: reduce) {
  .wa-modal[open],
  .wa-modal[open]::backdrop,
  .wa-modal.is-closing,
  .wa-modal.is-closing::backdrop { animation:none; }
}