/* ============================================================
   BUNGIE · Sistema de diseño "Cintillo"
   Un solo archivo de variables para todo el sitio.
   Cambias un color aquí y cambia en las 15 páginas.
   ============================================================ */

/* ---------- 1. VARIABLES ---------- */
:root{
  /* Marca — muestreados del logo imagenes/bungie.png */
  --azur:#007BFC;          /* azul de la "B"  */
  --azur-oscuro:#0059C7;   /* para hover y texto sobre blanco */
  --frambuesa:#E61A57;     /* el resorte de la "i" */
  --tinta:#0A0A0A;
  --tinta-suave:#3A3A3A;
  --gris:#6E6E6E;
  --gris-claro:#F2F2F2;
  --blanco:#FFFFFF;
  --whatsapp:#25D366;

  /* Punto de color por operador — solo como punto, nunca como fondo */
  --op-movistar:#00A9E0;
  --op-att:#1162AC;
  --op-unefon:#6A1B9A;
  --op-bait:#FFCB00;
  --op-telcel:#00549F;

  /* Escala tipográfica */
  --t-display:clamp(30px,8vw,54px);
  --t-h1:clamp(26px,6.5vw,40px);
  --t-h2:clamp(21px,5vw,28px);
  --t-h3:18px;
  --t-base:16px;
  --t-chico:14px;
  --t-mini:12px;

  /* Espaciado */
  --e-1:4px;  --e-2:8px;  --e-3:12px; --e-4:16px;
  --e-5:24px; --e-6:32px; --e-7:48px; --e-8:64px;

  /* Cintillo: sin radios, sin sombras, reglas gruesas */
  --regla:3px solid var(--tinta);
  --regla-fina:1px solid #D4D4D4;
  --radio:0px;
  --tap:44px;              /* área táctil mínima */
  --ancho:1100px;
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--blanco);
  color:var(--tinta);
  font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:var(--t-base);
  line-height:1.55;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--azur-oscuro);text-underline-offset:3px}
a:hover{color:var(--frambuesa)}
:focus-visible{outline:3px solid var(--azur);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.solo-lectores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 var(--e-4)}

/* ---------- 3. TIPOGRAFÍA ---------- */
.display,h1,h2{
  font-family:'Archivo Black','Archivo',Arial,sans-serif;
  font-weight:400;letter-spacing:-.03em;line-height:1;
  text-transform:uppercase;margin:0;text-wrap:balance;
}
.display{font-size:var(--t-display)}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:var(--t-h3);letter-spacing:-.01em;margin:0}
p{margin:0}
.kicker{
  font-size:var(--t-mini);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--frambuesa);margin:0 0 var(--e-2);
}
.etiqueta{
  display:inline-block;background:var(--tinta);color:var(--blanco);
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 10px;
}
.etiqueta.azur{background:var(--azur)}
.etiqueta.frambuesa{background:var(--frambuesa)}

/* ---------- 4. ENCABEZADO ---------- */
.cabecera{
  position:sticky;top:0;z-index:100;
  background:var(--azur);color:var(--blanco);
  border-bottom:var(--regla);
  padding-top:env(safe-area-inset-top);
}
.cabecera-fila{
  max-width:var(--ancho);margin:0 auto;
  padding:10px var(--e-4);
  display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);
}
.cabecera-logo{
  display:flex;align-items:center;min-height:var(--tap);
  background:var(--blanco);padding:7px 11px;
}
.cabecera-logo img{max-height:30px;width:auto}
.cabecera-acciones{display:flex;align-items:center;gap:var(--e-1)}
.btn-icono{
  width:var(--tap);height:var(--tap);
  display:grid;place-items:center;
  background:none;border:0;color:var(--blanco);cursor:pointer;padding:0;
}
.btn-icono:hover{background:rgba(255,255,255,.18)}
.btn-icono svg{width:24px;height:24px}

/* ---------- 5. MENÚ ---------- */
.menu{
  position:fixed;inset:0;z-index:200;
  background:var(--azur);color:var(--blanco);
  display:none;overflow-y:auto;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.menu.abierto{display:block}
body.menu-abierto{overflow:hidden}
.menu-cabecera{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px var(--e-4);border-bottom:3px solid rgba(255,255,255,.25);
}
.menu-cabecera .placa{background:var(--blanco);padding:7px 11px;display:flex;align-items:center}
.menu-cabecera img{max-height:30px;width:auto}
.menu-lista{display:flex;flex-direction:column;padding:var(--e-4);gap:var(--e-2)}
.menu-lista a{
  display:flex;align-items:center;gap:var(--e-4);
  min-height:56px;padding:var(--e-3) var(--e-4);
  background:rgba(255,255,255,.10);
  color:var(--blanco);text-decoration:none;
  font-weight:700;font-size:17px;
}
.menu-lista a:hover,.menu-lista a:focus-visible{background:var(--blanco);color:var(--azur)}
.menu-lista a[aria-current="page"]{background:var(--frambuesa);color:var(--blanco)}
.menu-lista svg{width:24px;height:24px;flex:0 0 auto}

/* ---------- 6. PORTADA DE SECCIÓN ---------- */
.portada{padding:var(--e-5) 0 var(--e-4);border-bottom:var(--regla)}
.portada p{margin-top:var(--e-3);color:var(--tinta-suave);font-size:var(--t-chico);max-width:60ch}

/* ---------- 7. CINTILLO (la franja que da nombre al sistema) ---------- */
.cintillo{
  background:var(--tinta);color:var(--blanco);
  border-bottom:var(--regla);
  padding:var(--e-3) var(--e-4);
  font-family:'Archivo Black',sans-serif;font-size:var(--t-h3);
  text-transform:uppercase;letter-spacing:-.01em;
}
.cintillo.azur{background:var(--azur)}
.cintillo.frambuesa{background:var(--frambuesa)}

/* ---------- 8. SELECTOR DE PESTAÑAS ---------- */
.pestanas{display:flex;border-bottom:var(--regla);background:var(--gris-claro)}
.pestanas button{
  flex:1;min-height:52px;border:0;background:none;cursor:pointer;
  font-family:'Archivo Black',sans-serif;font-size:16px;color:#8A8A8A;
  border-right:var(--regla-fina);letter-spacing:-.01em;padding:0 var(--e-2);
}
.pestanas button:last-child{border-right:0}
.pestanas button[aria-selected="true"]{background:var(--tinta);color:var(--blanco)}

/* ---------- 9. TARJETA DE PLAN ---------- */
.planes{display:grid;grid-template-columns:1fr;gap:0}
.plan{
  border-bottom:var(--regla);padding:var(--e-4);position:relative;background:var(--blanco);
}
.plan.destacado{background:#FFF3F6}
.plan-cabeza{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e-3)}
.plan-operador{
  font-family:'Archivo Black',sans-serif;font-size:20px;
  text-transform:uppercase;letter-spacing:-.02em;
  display:flex;align-items:center;gap:var(--e-2);
}
.punto-op{width:10px;height:10px;border-radius:50%;flex:0 0 auto;display:inline-block}
.plan-precio{
  font-family:'Archivo Black',sans-serif;font-size:40px;line-height:.9;
  letter-spacing:-.04em;color:var(--azur);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.plan.destacado .plan-precio{color:var(--frambuesa)}
.plan-vigencia{display:inline-block;margin:var(--e-2) 0 var(--e-3)}
.plan-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--e-2)}
.plan-lista li{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-chico);line-height:1.4}
.plan-lista svg{width:15px;height:15px;flex:0 0 auto;margin-top:3px;color:var(--azur)}
.plan.destacado .plan-lista svg{color:var(--frambuesa)}
.plan-nota{margin-top:var(--e-3);font-size:13px;color:var(--gris);line-height:1.45}
/* Franja completa: como cintillo del sistema, y no choca con el precio */
.plan-banderin{
  display:block;
  margin:calc(var(--e-4) * -1) calc(var(--e-4) * -1) var(--e-4);
  background:var(--frambuesa);color:var(--blanco);
  font-family:'Archivo Black',sans-serif;font-size:11px;letter-spacing:.12em;
  padding:7px var(--e-4);text-transform:uppercase;
}
@media (min-width:820px){
  .planes{grid-template-columns:1fr 1fr}
  .plan:nth-child(odd){border-right:var(--regla)}
}

/* ---------- 10. BOTONES ---------- */
.boton{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:50px;padding:0 var(--e-4);
  background:var(--tinta);color:var(--blanco);
  border:0;cursor:pointer;text-decoration:none;
  font-family:'Archivo Black',sans-serif;font-size:14px;
  letter-spacing:.02em;text-transform:uppercase;
  transition:background .18s ease;
}
.boton:hover{background:var(--azur);color:var(--blanco)}
.boton svg{width:18px;height:18px;flex:0 0 auto}
.boton.frambuesa{background:var(--frambuesa)}
.boton.frambuesa:hover{background:var(--tinta)}
.boton.whatsapp{background:var(--whatsapp);color:var(--tinta)}
.boton.whatsapp:hover{background:var(--tinta);color:var(--blanco)}
.plan .boton{margin-top:var(--e-4)}

/* ---------- 11. TARJETA DE NAVEGACIÓN (portada) ---------- */
.rejilla-hub{display:grid;grid-template-columns:1fr;gap:0}
.hub{
  display:flex;align-items:center;gap:var(--e-4);
  padding:var(--e-4);border-bottom:var(--regla);
  text-decoration:none;color:var(--tinta);background:var(--blanco);
  min-height:88px;transition:background .18s ease;
}
.hub:hover{background:var(--azur);color:var(--blanco)}
.hub-icono{
  width:52px;height:52px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--azur);color:var(--blanco);transition:background .18s ease;
}
.hub:hover .hub-icono{background:var(--blanco);color:var(--azur)}
.hub-icono svg{width:26px;height:26px}
.hub-texto{flex:1;min-width:0}
.hub-texto strong{
  display:block;font-family:'Archivo Black',sans-serif;font-size:17px;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1.1;
}
.hub-texto span{display:block;font-size:13px;color:var(--gris);margin-top:3px;line-height:1.4}
.hub:hover .hub-texto span{color:rgba(255,255,255,.85)}
.hub-flecha{flex:0 0 auto;color:var(--azur)}
.hub:hover .hub-flecha{color:var(--blanco)}
.hub-flecha svg{width:22px;height:22px}
@media (min-width:820px){
  .rejilla-hub{grid-template-columns:1fr 1fr}
  .hub:nth-child(odd){border-right:var(--regla)}
}

/* ---------- 12. WHATSAPP FLOTANTE ---------- */
.wa-flotante{
  position:fixed;z-index:90;
  right:calc(var(--e-4) + env(safe-area-inset-right));
  bottom:calc(var(--e-4) + env(safe-area-inset-bottom));
  width:56px;height:56px;
  background:var(--whatsapp);color:var(--tinta);
  display:grid;place-items:center;text-decoration:none;
  border:var(--regla);
  transition:transform .18s ease;
}
.wa-flotante:hover{transform:translateY(-3px);color:var(--tinta)}
.wa-flotante svg{width:28px;height:28px}

/* ---------- 13. PIE ---------- */
.pie{
  margin-top:auto;background:var(--tinta);color:#9A9A9A;
  border-top:var(--regla);
  padding:var(--e-5) var(--e-4) calc(var(--e-6) + env(safe-area-inset-bottom));
}
.pie-fila{max-width:var(--ancho);margin:0 auto;display:flex;flex-direction:column;gap:var(--e-3)}
.pie img{max-height:34px;width:auto}
.pie a{
  color:var(--blanco);font-weight:700;
  display:inline-flex;align-items:center;min-height:var(--tap);
}
.pie a:hover{color:var(--frambuesa)}
.pie small{font-size:var(--t-mini);line-height:1.6;display:block}

/* ============================================================
   COMPONENTES ADICIONALES
   ============================================================ */

/* ---------- 14. SECCIÓN Y REJILLA GENÉRICAS ---------- */
.seccion{padding:var(--e-5) 0}
.seccion-titulo{margin-bottom:var(--e-4)}
.rejilla{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:820px){
  .rejilla.dos{grid-template-columns:1fr 1fr}
  .rejilla.dos > *:nth-child(odd){border-right:var(--regla)}
  .rejilla.tres{grid-template-columns:repeat(3,1fr)}
  .rejilla.tres > *:not(:nth-child(3n)){border-right:var(--regla)}
}
.prosa{max-width:65ch}
.prosa p + p{margin-top:var(--e-3)}
.prosa strong{font-weight:700}

/* ---------- 15. TARJETA GENÉRICA ---------- */
.tarjeta{
  border-bottom:var(--regla);padding:var(--e-4);background:var(--blanco);
  display:flex;flex-direction:column;gap:var(--e-3);
}
.tarjeta-media{
  background:var(--gris-claro);border:var(--regla);
  display:grid;place-items:center;padding:var(--e-4);
}
.tarjeta-media img{max-height:110px;width:auto;object-fit:contain}
.tarjeta h3{font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  font-size:var(--t-h3);letter-spacing:-.02em;font-weight:400}
.tarjeta p{font-size:var(--t-chico);color:var(--tinta-suave);line-height:1.5}
.tarjeta .boton{margin-top:auto}
.tarjeta-op{display:flex;align-items:center;gap:var(--e-2)}

/* ---------- 16. PASOS ---------- */
.pasos{counter-reset:paso;display:flex;flex-direction:column}
.paso{
  counter-increment:paso;border-bottom:var(--regla);
  padding:var(--e-4);display:flex;gap:var(--e-4);align-items:flex-start;
}
.paso::before{
  content:counter(paso);
  flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;
  background:var(--azur);color:var(--blanco);
  font-family:'Archivo Black',sans-serif;font-size:20px;
}
.paso.hecho::before{background:var(--frambuesa)}
.paso-cuerpo{flex:1;min-width:0}
.paso-cuerpo h3{
  font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-weight:400;
  font-size:16px;letter-spacing:-.01em;margin-bottom:var(--e-1);
}
.paso-cuerpo p{font-size:var(--t-chico);color:var(--tinta-suave);line-height:1.5}
.paso-cuerpo ul{margin:var(--e-2) 0 0;padding-left:18px;font-size:var(--t-chico);color:var(--tinta-suave);line-height:1.6}

/* ---------- 17. ACORDEÓN ---------- */
.acordeon{border-bottom:var(--regla)}
.acordeon summary{
  list-style:none;cursor:pointer;
  min-height:56px;display:flex;align-items:center;justify-content:space-between;
  gap:var(--e-3);padding:var(--e-3) var(--e-4);
  font-weight:700;font-size:15px;background:var(--blanco);
}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary:hover{background:var(--gris-claro)}
.acordeon summary::after{
  content:'';flex:0 0 auto;width:14px;height:14px;
  border-right:3px solid var(--azur);border-bottom:3px solid var(--azur);
  transform:rotate(45deg);margin-top:-6px;transition:transform .2s ease;
}
.acordeon[open] summary{background:var(--tinta);color:var(--blanco)}
.acordeon[open] summary::after{transform:rotate(-135deg);margin-top:4px;border-color:var(--blanco)}
.acordeon-cuerpo{padding:var(--e-4);background:var(--gris-claro);font-size:var(--t-chico);line-height:1.6;color:var(--tinta-suave)}
.acordeon-cuerpo ul{margin:var(--e-2) 0 0;padding-left:18px}
.acordeon-cuerpo li{margin-bottom:var(--e-1)}

/* ---------- 18. TABLA ---------- */
.tabla-envoltorio{overflow-x:auto;border-bottom:var(--regla);-webkit-overflow-scrolling:touch}
.tabla{border-collapse:collapse;width:100%;min-width:520px;font-size:var(--t-chico)}
.tabla th,.tabla td{padding:var(--e-3);text-align:left;border-bottom:var(--regla-fina);white-space:nowrap}
.tabla thead th{
  background:var(--tinta);color:var(--blanco);
  font-family:'Archivo Black',sans-serif;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:400;
}
.tabla tbody th{font-weight:700;background:var(--gris-claro)}
.tabla td{font-variant-numeric:tabular-nums}
.tabla td.gana{background:#FFF3F6;font-weight:700;color:var(--frambuesa)}
.tabla-nota{padding:var(--e-3) var(--e-4);font-size:var(--t-mini);color:var(--gris)}

/* ---------- 19. DATO DESTACADO ---------- */
.datos{display:grid;grid-template-columns:1fr 1fr;gap:0}
.dato{border-right:var(--regla);border-bottom:var(--regla);padding:var(--e-4)}
.dato:nth-child(2n){border-right:0}
.dato .cifra{
  font-family:'Archivo Black',sans-serif;font-size:34px;line-height:1;
  letter-spacing:-.04em;color:var(--azur);font-variant-numeric:tabular-nums;
}
.dato .rotulo{margin-top:var(--e-2);font-size:var(--t-mini);color:var(--gris);line-height:1.4}
@media (min-width:820px){
  .datos{grid-template-columns:repeat(4,1fr)}
  .dato:nth-child(2n){border-right:var(--regla)}
  .dato:nth-child(4n){border-right:0}
}

/* ---------- 20. AVISO ---------- */
.aviso{
  border:var(--regla);padding:var(--e-4);margin:var(--e-4) 0;
  display:flex;gap:var(--e-3);align-items:flex-start;background:var(--gris-claro);
}
.aviso svg{width:22px;height:22px;flex:0 0 auto;color:var(--azur)}
.aviso.ojo{background:#FFF3F6;border-color:var(--frambuesa)}
.aviso.ojo svg{color:var(--frambuesa)}
.aviso p{font-size:var(--t-chico);line-height:1.5}
.aviso strong{display:block;font-family:'Archivo Black',sans-serif;
  text-transform:uppercase;font-size:13px;margin-bottom:2px;letter-spacing:-.01em;font-weight:400}

/* ---------- 21. GALERÍA ---------- */
.galeria{display:grid;grid-template-columns:1fr;gap:0}
.galeria figure{margin:0;border-bottom:var(--regla);background:var(--gris-claro)}
.galeria img{width:100%;height:auto;display:block;cursor:zoom-in}
.galeria figcaption{
  padding:var(--e-3) var(--e-4);background:var(--tinta);color:var(--blanco);
  font-size:var(--t-mini);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
@media (min-width:820px){
  .galeria{grid-template-columns:1fr 1fr}
  .galeria figure:nth-child(odd){border-right:var(--regla)}
}
/* Visor de imagen */
.visor{
  position:fixed;inset:0;z-index:300;background:rgba(10,10,10,.94);
  display:none;align-items:center;justify-content:center;padding:var(--e-4);
}
.visor.abierto{display:flex}
.visor img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.visor-cerrar{
  position:absolute;top:calc(var(--e-3) + env(safe-area-inset-top));
  right:var(--e-3);width:var(--tap);height:var(--tap);
  display:grid;place-items:center;background:var(--blanco);color:var(--tinta);
  border:0;cursor:pointer;
}
.visor-cerrar svg{width:24px;height:24px}

/* ---------- 22. FORMULARIO ---------- */
.campo{display:flex;flex-direction:column;gap:var(--e-2);margin-bottom:var(--e-4)}
.campo label{font-weight:700;font-size:var(--t-chico)}
.campo input,.campo select,.campo textarea{
  min-height:50px;padding:var(--e-3);border:var(--regla);border-radius:0;
  font-family:inherit;font-size:16px;background:var(--blanco);color:var(--tinta);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:3px solid var(--azur);outline-offset:-3px;
}
.campo .ayuda{font-size:var(--t-mini);color:var(--gris)}

/* ---------- 23. ENLACE DE REGRESO ---------- */
.volver{
  display:inline-flex;align-items:center;gap:var(--e-2);
  min-height:var(--tap);font-weight:700;font-size:var(--t-chico);
  text-decoration:none;color:var(--azur-oscuro);
}
.volver svg{width:18px;height:18px}
.volver:hover{color:var(--frambuesa)}