/* Acabado claro: superficies blancas, sombras suaves y aire.
   Se apoya en la estructura existente; solo refina materiales. */

:root {
  --pv-white: #ffffff;
  --pv-soft: #fafbfc;
  --pv-hair: rgba(20, 24, 30, .07);
  --pv-hair-strong: rgba(20, 24, 30, .12);
  --pv-lift: 0 1px 2px rgba(16, 22, 30, .04), 0 12px 32px -18px rgba(16, 22, 30, .28);
  --pv-lift-hi: 0 2px 4px rgba(16, 22, 30, .05), 0 28px 60px -28px rgba(230, 0, 18, .3);
  --pv-r: 18px;
}

body { background: var(--pv-white); }

/* Fondo blanco con un halo muy leve en las secciones grises */
.coverage-quick,
.plans,
.solutions-showcase,
.support,
.track,
.connection-solutions,
.process {
  background:
    radial-gradient(1200px 420px at 82% -8%, rgba(230, 0, 18, .045), transparent 60%),
    var(--pv-white) !important;
}
.regional { background: var(--pv-soft) !important; }

/* Franja utilitaria + cabecera: una sola tarjeta blanca flotante y fija */
:root {
  --pv-hdr-gap: 14px;
  --pv-hdr-inset: clamp(14px, 2.6vw, 40px);
  --pv-utility-h: 42px;
}
.utility {
  position: sticky !important;
  top: var(--pv-hdr-gap) !important;
  z-index: 101 !important;
  margin: var(--pv-hdr-gap) var(--pv-hdr-inset) 0 !important;
  background: var(--pv-soft) !important;
  border: 1px solid var(--pv-hair) !important;
  border-bottom: 0 !important;
  border-radius: var(--pv-r) var(--pv-r) 0 0 !important;
  color: #5c6572 !important;
  box-shadow: 0 18px 40px -30px rgba(16, 22, 30, .4) !important;
}
.site-header {
  position: sticky !important;
  top: calc(var(--pv-hdr-gap) + var(--pv-utility-h)) !important;
  z-index: 100 !important;
  margin: 0 var(--pv-hdr-inset) var(--pv-hdr-gap) !important;
  width: auto !important;
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid var(--pv-hair) !important;
  border-top: 0 !important;
  border-radius: 0 0 var(--pv-r) var(--pv-r) !important;
  box-shadow: 0 24px 50px -28px rgba(16, 22, 30, .38) !important;
}
body.is-scrolled .site-header {
  box-shadow: 0 26px 56px -24px rgba(16, 22, 30, .48) !important;
}
@media (max-width: 1080px) {
  .utility { display: none !important; }
  .site-header { top: var(--pv-hdr-gap) !important; border-radius: var(--pv-r) !important; border-top: 1px solid var(--pv-hair) !important; }
}

/* Íconos reales en la barra utilitaria */
.utility span { display: inline-flex !important; align-items: center; gap: 6px; }
.utility .u-ico { width: 14px; height: 14px; flex: none; color: var(--pv-red, #e60012); }
.utility .social { display: inline-flex !important; align-items: center; gap: 8px; }
.utility .social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  background: #fff; border: 1px solid var(--pv-hair-strong);
  color: #6b7280;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.utility .social a svg { width: 13px; height: 13px; }
.utility .social a:hover {
  background: var(--pv-red, #e60012); border-color: var(--pv-red, #e60012);
  color: #fff; transform: translateY(-1px);
}

/* Tarjetas: blancas, esquinas suaves, borde capilar */
.service-strip article,
.connection-card-grid article,
.isp-card,
.isp-speed,
.support-grid a,
.regional .benefits article,
.showcase-grid article,
.plan-card,
.coverage-form,
form#pqrForm,
form#trackForm {
  background: var(--pv-white) !important;
  border: 1px solid var(--pv-hair) !important;
  border-radius: var(--pv-r) !important;
  box-shadow: var(--pv-lift) !important;
}
.service-strip article:hover,
.connection-card-grid article:hover,
.isp-card:hover,
.support-grid a:hover,
.regional .benefits article:hover,
.showcase-grid article:hover,
.plan-card:hover {
  border-color: var(--pv-hair-strong) !important;
  box-shadow: var(--pv-lift-hi) !important;
}

/* Medios dentro de tarjetas con el mismo radio */
.connection-card-grid .service-media,
.isp-media,
.plan-photo,
.showcase-image,
.network-photo,
.tv-guide { border-radius: 14px; }
.network-photo { box-shadow: var(--pv-lift) !important; }

/* Íconos: pastilla clara en lugar de bloque plano */
.service-strip article > span,
.connection-solutions .service-icon,
.isp-icon {
  background: linear-gradient(180deg, #fff, #f6f7f9) !important;
  border: 1px solid var(--pv-hair) !important;
  color: var(--pv-red, #e60012) !important;
  box-shadow: 0 6px 14px -10px rgba(16, 22, 30, .5);
  border-radius: 14px !important;
}

/* Tipografía: más aire y corte limpio */
h1, h2, h3 { text-wrap: balance; }
main p, .footer-about p { text-wrap: pretty; }
main p { color: #4b5563; }
.section-no {
  color: var(--pv-red, #e60012);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Formularios claros */
form input,
form select,
form textarea {
  background: var(--pv-soft) !important;
  border: 1px solid var(--pv-hair) !important;
  border-radius: 12px !important;
}
form input:focus,
form select:focus,
form textarea:focus { background: #fff !important; }

/* Botón secundario en blanco */
.video-link,
.tv-guide-link,
.button.ghost {
  background: #fff !important;
  border: 1px solid var(--pv-hair-strong) !important;
  border-radius: 999px !important;
  box-shadow: var(--pv-lift);
  transition: border-color .28s var(--pv-ease, ease), box-shadow .28s var(--pv-ease, ease), transform .28s var(--pv-ease, ease);
}
.video-link:hover,
.tv-guide-link:hover,
.button.ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(230, 0, 18, .35) !important;
}

/* Pasos del proceso: círculos claros con número rojo */
.process ol li > span {
  background: #fff !important;
  color: var(--pv-red, #e60012) !important;
  border: 1px solid rgba(230, 0, 18, .25);
  box-shadow: 0 8px 18px -12px rgba(230, 0, 18, .6);
}
/* En normatividad el número no tenía tamaño ni radio: el borde se estiraba como una caja alta. */
body[data-page="normatividad"] .process ol li > span {
  display: grid; place-items: center; flex: 0 0 auto; align-self: flex-start;
  width: 52px; height: 52px; border-radius: 50%;
  font-size: 19px !important; letter-spacing: -.03em;
}

/* Separadores capilares entre bloques */
.plans, .support, .track, .contact { border-top: 1px solid var(--pv-hair); }

/* Flotantes en blanco */
.pv-top { background: rgba(255, 255, 255, .95); border-color: var(--pv-hair-strong); }

/* Cookie banner claro */
.cookie {
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid var(--pv-hair) !important;
  border-radius: var(--pv-r) !important;
  box-shadow: 0 30px 70px -34px rgba(16, 22, 30, .55) !important;
  backdrop-filter: blur(10px);
}

@media (max-width: 560px) {
  :root { --pv-r: 14px; }
}

/* Refinamiento del encabezado: feedback en el menú, botón CTA con
   micro-interacción y bloque de llamada con insignia en vez de texto plano. */
.site-header .modern-nav .nav-home,
.site-header .modern-nav .nav-trigger {
  transition: color .2s ease !important;
}
.site-header .modern-nav .nav-home:hover,
.site-header .modern-nav .nav-trigger:hover,
.site-header .modern-nav .nav-trigger[aria-expanded="true"] {
  color: var(--pv-red, #e60012) !important;
}

.site-header .header-cta span[aria-hidden="true"] {
  display: inline-block;
  transition: transform .3s ease;
}
.site-header .header-cta:hover span[aria-hidden="true"] {
  transform: rotate(90deg);
}

.site-header .call {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-left: 20px !important;
  margin-left: 4px !important;
  border-left: 1px solid var(--pv-hair-strong, rgba(20, 24, 30, .12)) !important;
  font-size: 0 !important;
  text-decoration: none !important;
}
.site-header .call::before {
  content: "☎";
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: linear-gradient(145deg, #fff5f5, #ffe1e2);
  color: var(--pv-red, #e60012);
  font-size: 16px;
  transition: background .2s ease, transform .2s ease;
}
.site-header .call:hover::before {
  background: linear-gradient(145deg, #ffe1e2, #ffc9cb);
  transform: translateY(-1px);
}
.site-header .call span {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  color: #5c6572;
}
.site-header .call span b {
  display: block;
  margin-top: 1px;
  font-size: 14px;
  color: #1f2b39;
}
@media (max-width: 1080px) {
  .site-header .call { display: none !important; }
}

/* Submenús del menú (Servicios, Zona Usuarios, Normatividad): más aire,
   tarjetas limpias sin líneas divisorias y jerarquía más clara. */
.nav-submenu {
  padding: 10px !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 48px -20px rgba(16, 22, 30, .28), 0 4px 12px rgba(16, 22, 30, .06) !important;
}
/* El submenú se mantiene abierto al mover el cursor del botón al panel:
   puente invisible sobre el hueco + pequeño retraso al cerrar. */
@media (min-width: 1081px) {
  .nav-submenu::after {
    content: "";
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    height: 24px;
  }
  .nav-submenu {
    transition-delay: .3s;
  }
  .nav-dropdown:hover > .nav-submenu,
  .nav-dropdown:focus-within > .nav-submenu,
  .nav-dropdown.is-open > .nav-submenu {
    transition-delay: 0s;
  }
}
.modern-nav .nav-submenu a {
  grid-template-columns: 44px minmax(0, 1fr) 14px !important;
  gap: 14px !important;
  min-height: 64px !important;
  padding: 10px !important;
  border-bottom: 0 !important;
  border-radius: 12px !important;
  transition: background .18s ease, color .18s ease !important;
}
.modern-nav .nav-submenu a + a {
  margin-top: 2px;
}
.modern-nav .nav-submenu a:hover {
  background: #fdf3f3 !important;
  color: #e60012 !important;
  transform: none !important;
}
.nav-submenu a b {
  font-size: 13.5px !important;
  color: #1c2530;
}
.nav-submenu a small {
  font-size: 11.5px !important;
  line-height: 1.35 !important;
}
.nav-submenu a em {
  font-size: 16px !important;
  opacity: .55;
  transition: opacity .18s ease, transform .18s ease;
}
.modern-nav .nav-submenu a:hover em {
  opacity: 1;
  transform: translateX(2px);
  color: #e60012 !important;
}
.nav-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: #fdf1f1 !important;
}
.modern-nav .nav-submenu a:hover .nav-icon,
.modern-nav .nav-submenu a:focus-visible .nav-icon {
  background: #e60012 !important;
  color: #fff !important;
}

/* Enlace "Saltar al contenido": debe quedar oculto siempre, y solo
   aparecer si alguien navega con teclado (Tab) y lo enfoca. Algunas
   páginas usan la clase "skip-link" sin su propio estilo, dejándolo
   visible como un enlace azul suelto encima de todo. */
a.skip,
a.skip-link {
  position: fixed !important;
  top: -80px !important;
  left: 12px !important;
  z-index: 999 !important;
  padding: 12px 18px !important;
  margin: 0 !important;
  border-radius: 0 0 10px 10px !important;
  background: #14181f !important;
  color: #fff !important;
  font: 700 13px/1 "DM Sans", sans-serif !important;
  text-decoration: none !important;
  transition: top .2s ease !important;
}
a.skip:focus,
a.skip-link:focus {
  top: 0 !important;
}

/* Tipografía de encabezados: igual que en Inicio (home.css usa
   'Baloo 2', 'Manrope', sans-serif; font-weight: 800 para h1-h4). */
body[data-page="services"] h1,
body[data-page="services"] h2,
body[data-page="services"] h3,
body[data-page="services"] h4 {
  font-family: 'Baloo 2', 'Manrope', sans-serif !important;
  font-weight: 800 !important;
}

/* Hero de "Servicios": layout con corte diagonal en la foto y acentos
   decorativos, más aire entre los elementos y tipografía menos apretada. */
body[data-page="services"] .services-hero {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 560px !important;
  border-radius: 0 !important;
  margin: 0 !important;
  width: auto !important;
  background: #fff !important;
}
body[data-page="services"] .services-hero::before {
  content: "";
  position: absolute;
  left: clamp(18px, 3.6vw, 56px);
  top: 132px;
  width: 130px;
  height: 54px;
  background: repeating-linear-gradient(115deg, rgba(230, 0, 18, .32) 0 3px, transparent 3px 15px);
  transform: rotate(-6deg);
  pointer-events: none;
  z-index: 1;
}
body[data-page="services"] .services-hero::after {
  content: "";
  position: absolute;
  left: -90px;
  bottom: -90px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 0, 18, .12), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
body[data-page="services"] .hero-copy {
  position: relative !important;
  z-index: 3 !important;
  width: min(600px, 54%) !important;
  margin-left: max(4.3vw, calc((100vw - 1200px) / 2)) !important;
  gap: 10px !important;
  padding: 76px 0 !important;
}
body[data-page="services"] .services-hero h1 {
  font-family: 'Baloo 2', 'Manrope', sans-serif !important;
  margin: 18px 0 22px !important;
  line-height: 1.06 !important;
  letter-spacing: -.045em !important;
}
body[data-page="services"] .services-hero .eyebrow {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .2em !important;
}
body[data-page="services"] .hero-lead {
  line-height: 1.6 !important;
}
body[data-page="services"] .hero-actions {
  margin-top: 32px !important;
  gap: 14px !important;
}
body[data-page="services"] .hero-actions .button .sv-i {
  width: 18px !important;
  height: 18px !important;
  flex: none;
  color: #fff !important;
}
body[data-page="services"] .hero-actions .button-secondary .sv-i {
  color: var(--sv-red, #e60012) !important;
}
body[data-page="services"] .hero-highlights {
  margin-top: 38px !important;
  gap: 14px !important;
}
body[data-page="services"] .hero-highlights li {
  align-items: flex-start !important;
}
body[data-page="services"] .hero-highlights .sv-i {
  width: 22px;
  height: 22px;
  margin-bottom: 5px;
  color: var(--sv-red, #e60012);
}
body[data-page="services"] .hero-art {
  position: absolute !important;
  inset: 0 0 0 auto !important;
  width: 58% !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 900px) {
  body[data-page="services"] .hero-copy { width: 91.4vw !important; margin: auto !important; padding: 40px 0 !important; }
  body[data-page="services"] .hero-art {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 260px !important;
    margin: 0 0 24px !important;
    clip-path: none !important;
  }
  body[data-page="services"] .services-hero::before,
  body[data-page="services"] .services-hero::after { display: none; }
}

/* ===== Menú móvil: panel flotante con tarjetas, animación escalonada y CTA ===== */
@media (max-width: 1080px) {
  .site-header .modern-nav.open {
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    gap: 6px !important;
    padding: 14px !important;
    max-height: calc(100vh - 110px) !important;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 26px !important;
    background:
      radial-gradient(220px 140px at 100% 0, rgba(230, 0, 18, .10), transparent 70%),
      radial-gradient(200px 120px at 0 100%, rgba(230, 0, 18, .06), transparent 70%),
      rgba(255, 255, 255, .96) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 30px 60px -20px rgba(16, 22, 30, .45), 0 6px 16px rgba(16, 22, 30, .08) !important;
    transform-origin: 90% 0;
    animation: pv-menu-in .32s cubic-bezier(.2, .8, .25, 1) both;
    counter-reset: pvnav;
  }
  @keyframes pv-menu-in {
    from { opacity: 0; transform: translateY(-10px) scale(.96); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes pv-item-in {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: none; }
  }
  .site-header .modern-nav.open > * {
    animation: pv-item-in .42s cubic-bezier(.2, .8, .25, 1) both;
  }
  .site-header .modern-nav.open > :nth-child(1) { animation-delay: .04s; }
  .site-header .modern-nav.open > :nth-child(2) { animation-delay: .09s; }
  .site-header .modern-nav.open > :nth-child(3) { animation-delay: .14s; }
  .site-header .modern-nav.open > :nth-child(4) { animation-delay: .19s; }
  .site-header .modern-nav.open > :nth-child(5) { animation-delay: .24s; }

  /* Filas principales: píldoras numeradas */
  .modern-nav > a.nav-home:not(.nav-contact),
  .modern-nav > .nav-dropdown > .nav-trigger {
    counter-increment: pvnav;
    min-height: 54px !important;
    padding: 0 16px 0 14px !important;
    border: 1px solid #eef0f3 !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: #1b2430 !important;
    font: 700 15px/1 "DM Sans", sans-serif !important;
    box-shadow: 0 1px 0 rgba(16, 22, 30, .03);
    transition: background .2s, border-color .2s, transform .2s, box-shadow .2s !important;
  }
  .modern-nav > a.nav-home:not(.nav-contact)::before,
  .modern-nav > .nav-dropdown > .nav-trigger::before {
    content: counter(pvnav, decimal-leading-zero);
    position: static;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    border-radius: 10px;
    background: #f3f4f6;
    color: #8c949f;
    font: 800 11px "Manrope", sans-serif;
    letter-spacing: .02em;
    transition: background .2s, color .2s;
  }
  .modern-nav > .nav-dropdown > .nav-trigger {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }
  .modern-nav > a.nav-home:not(.nav-contact) { gap: 0; }
  .modern-nav > a.nav-home:not(.nav-contact):active,
  .modern-nav > .nav-dropdown > .nav-trigger:active { transform: scale(.985); }

  /* Activo / abierto: rojo protagonista */
  .modern-nav > a.active-link,
  .modern-nav > .nav-dropdown.is-open > .nav-trigger {
    border-color: transparent !important;
    background: linear-gradient(105deg, #f7192a, #d60012) !important;
    color: #fff !important;
    box-shadow: 0 14px 26px -12px rgba(230, 0, 18, .6) !important;
  }
  .modern-nav > a.active-link::before,
  .modern-nav > .nav-dropdown.is-open > .nav-trigger::before {
    background: rgba(255, 255, 255, .22) !important;
    color: #fff !important;
  }
  .modern-nav > a::after,
  .modern-nav > .nav-dropdown > .nav-trigger::after { display: none !important; }
  .modern-nav .nav-trigger .menu-caret { margin-left: 0; border-color: currentColor; }

  /* Submenú: tarjetas con icono, sin fondo plano */
  .modern-nav .nav-submenu,
  .modern-nav .services-menu .nav-submenu,
  .modern-nav .users-menu .nav-submenu,
  .modern-nav .rules-menu .nav-submenu {
    margin: 6px 0 4px 16px;
    width: calc(100% - 16px) !important;
    padding: 4px 0 4px 14px !important;
    border-left: 2px dashed rgba(230, 0, 18, .28) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  .modern-nav .nav-dropdown.is-open > .nav-submenu { animation: pv-item-in .3s ease both; }
  .modern-nav .nav-submenu a {
    min-height: 56px !important;
    margin: 0 0 6px !important;
    padding: 8px 10px !important;
    border: 1px solid #f0f1f4 !important;
    border-radius: 14px !important;
    background: #fafafb !important;
  }
  .modern-nav .nav-submenu a:last-child { margin-bottom: 0 !important; }

  /* Contacto como botón de acción */
  .modern-nav > a.nav-contact {
    justify-content: center;
    min-height: 54px !important;
    margin-top: 4px;
    border: 0 !important;
    border-radius: 16px !important;
    background: #15171b !important;
    color: #fff !important;
    font: 800 15px "DM Sans", sans-serif !important;
    letter-spacing: .01em;
  }
  .modern-nav > a.nav-contact::before {
    content: "✆";
    margin-right: 10px;
    color: #ff4b57;
    font-size: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .modern-nav.open,
  .site-header .modern-nav.open > * { animation: none !important; }
}

/* Escritorio intermedio: el bloque de teléfono y los márgenes anchos apretaban el menú
   (el logo se montaba sobre "Inicio" y "Contacto" sobre el botón). */
@media (min-width: 1081px) and (max-width: 1500px) {
  .site-header .call { display: none !important; }
  .site-header {
    padding-inline: clamp(20px, 3vw, 48px) !important;
    gap: 20px !important;
  }
  .site-header .brand { flex: none; }
  .site-header .modern-nav {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    gap: 14px !important;
  }
  .site-header .header-cta { flex: none; padding-inline: 18px !important; }
}