/* ═══════════════════════════════════════════════════════════════════════
   PROMOX UI · "Módulo Zonas"  —  sistema visual compartido del sitio
   Origen: el módulo visual de Cobertura (paleta de zonas, cards con aro,
   cabecera con puntos, botonera oscura, franja tricolor).
   Orden de carga:  styles.css  →  promox-ui.css  →  css de la página
   Reglas: ver GUIA-DISENO.md. Prefijo de componentes nuevos: pz-
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 ─ TOKENS · única fuente de verdad de la paleta de zonas ─────────── */
:root {
  --z-norte: #ff4d4d;  --zr-norte: 255,77,77;   --z-norte-ink: #e02f2f;
  --z-oeste: #4da3ff;  --zr-oeste: 77,163,255;  --z-oeste-ink: #2a7fe0;
  --z-sur:   #2fd6c9;  --zr-sur:   47,214,201;  --z-sur-ink:   #0f9e93;
  --pz-dark: #14181D;               /* superficie oscura (botonera, mapa) */
  --pz-line: #E3E9F0;               /* bordes de cards y campos */
  --pz-radius: 14px;
  --pz-radius-lg: 22px;
  --pz-shadow: 0 2px 16px rgba(15,23,42,.07), 0 0 0 1px var(--grey-light);
  --pz-shadow-lift: 0 24px 60px -24px rgba(15,31,48,.28), 0 2px 8px rgba(15,23,42,.05);
}

/* 2 ─ PUNTOS DE ZONA ─────────────────────────────────────────────────── */
.zone-dot--norte { background: var(--z-norte); }
.zone-dot--oeste { background: var(--z-oeste); }
.zone-dot--sur   { background: var(--z-sur); }
.pz-dots, .cobertura__tab-dots { display: inline-flex; flex: none; align-items: center; padding-left: 3px; }
.pz-dots i, .cobertura__tab-dots i { width: 9px; height: 9px; border-radius: 50%; margin-left: -3px; box-shadow: 0 0 0 1.5px var(--white); }
.pz-dots i:first-child { margin-left: 0; }

/* 3 ─ FONDO DE SECCIÓN · lavado tricolor suave ───────────────────────── */
.pz-wash {
  background:
    radial-gradient(460px 280px at 4% 0%,   rgba(var(--zr-norte),.045), transparent 70%),
    radial-gradient(520px 340px at 100% 18%, rgba(var(--zr-oeste),.09), transparent 70%),
    radial-gradient(520px 340px at 60% 100%, rgba(var(--zr-sur),.09),   transparent 70%),
    linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%);
}

/* 4 ─ CARD · contenedor base (= tarjeta del mapa de Cobertura) ───────── */
.pz-card {
  position: relative; max-width: 980px; margin-inline: auto;
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--pz-shadow);
}
.pz-card--lift { border-radius: var(--pz-radius-lg); box-shadow: var(--pz-shadow-lift); border: 1px solid var(--pz-line); }
.pz-card--bar::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 1; opacity: .55;
  background: linear-gradient(90deg, var(--z-norte) 0 33.3%, var(--z-oeste) 33.3% 66.6%, var(--z-sur) 66.6% 100%); }
.pz-card--norte { box-shadow: 0 0 0 1.5px rgba(var(--zr-norte),.5),  var(--shadow-card, 0 10px 30px rgba(0,0,0,.08)); }
.pz-card--oeste { box-shadow: 0 0 0 1.5px rgba(var(--zr-oeste),.55), var(--shadow-card, 0 10px 30px rgba(0,0,0,.08)); }
.pz-card--sur   { box-shadow: 0 0 0 1.5px rgba(var(--zr-sur),.55),   var(--shadow-card, 0 10px 30px rgba(0,0,0,.08)); }
.pz-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 18px var(--card-p); border-bottom: 1px solid var(--grey-light); }
.pz-card__title { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); font-weight: 700; color: var(--text); }
.pz-card__meta { font-size: var(--fs-micro); color: var(--grey); }
.pz-card__foot { margin: 0; padding: 16px var(--card-p); border-top: 1px solid var(--grey-light);
  font-size: var(--fs-sm); line-height: 1.8; color: var(--grey); }
.pz-card__foot strong { color: var(--text); font-weight: 700; }
@media (max-width: 760px) { .pz-card { border-radius: 12px; } }

/* 5 ─ LISTA NUMERADA EN CARD (módulos, pasos, beneficios) ────────────── */
.pz-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
.pz-item { display: flex; align-items: flex-start; gap: 16px; padding: 22px var(--card-p); border-top: 1px solid var(--grey-light); }
.pz-item:first-child { border-top: 0; }
.pz-item__n { flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  font-size: var(--fs-label); font-weight: 800; color: var(--crimson);
  border: 2px solid var(--crimson); border-radius: 50%; background: var(--white); }
.pz-item h3 { margin: 0 0 4px; font-size: var(--fs-md); font-weight: 700; color: var(--text); line-height: var(--lh-snug); }
.pz-item p  { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--grey-dark); }
@media (min-width: 760px) {
  .pz-list--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pz-list--2 .pz-item:nth-child(2) { border-top: 0; }
  .pz-list--2 .pz-item:nth-child(even) { border-left: 1px solid var(--grey-light); }
}

/* 6 ─ BOTONERA OSCURA (pestañas / filtros) ───────────────────────────── */
.pz-tabs, .cobertura__tabs {
  background: var(--pz-dark); border: 1px solid rgba(255,255,255,.07); border-radius: var(--pz-radius);
  padding: 5px; gap: 4px; box-shadow: 0 8px 22px -12px rgba(15,31,48,.4);
}
.pz-tabs { display: inline-flex; }
.pz-tab, .cobertura__tabs .cobertura__tab {
  --zc: #fff; --zr: 255,255,255;
  position: relative; display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 18px;
  border-radius: 10px; border: 1px solid transparent; background: transparent; box-shadow: none;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; color: #b9c1ca; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
[data-zone="norte"].pz-tab, .cobertura__tabs .cobertura__tab[data-zone="norte"] { --zc: var(--z-norte); --zr: var(--zr-norte); }
[data-zone="oeste"].pz-tab, .cobertura__tabs .cobertura__tab[data-zone="oeste"] { --zc: var(--z-oeste); --zr: var(--zr-oeste); }
[data-zone="sur"].pz-tab,   .cobertura__tabs .cobertura__tab[data-zone="sur"]   { --zc: var(--z-sur);   --zr: var(--zr-sur); }
.pz-tab:hover:not(.active), .cobertura__tabs .cobertura__tab:hover:not(.active) { background: rgba(var(--zr),.10); color: #fff; }
.pz-tab:focus-visible, .cobertura__tabs .cobertura__tab:focus-visible { outline: 2px solid var(--zc); outline-offset: 2px; }
.pz-tab.active, .cobertura__tabs .cobertura__tab.active { color: #fff; background: rgba(var(--zr),.16); border-color: rgba(var(--zr),.55); box-shadow: none; }
.pz-tab__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--zc); }
@media (prefers-reduced-motion: reduce) { .pz-tab, .cobertura__tabs .cobertura__tab { transition: none; } }

/* 7 ─ CALLOUT oscuro con CTA (franja de cierre dentro de una sección) ── */
.pz-callout-wrap { max-width: 980px; margin: clamp(32px,5vw,48px) auto 0; }

/* 8 ─ TEXTO DE ZONA sobre fondo claro (usar -ink, nunca el color vivo) ─ */
.pz-ink--norte { color: var(--z-norte-ink); } .pz-ink--oeste { color: var(--z-oeste-ink); } .pz-ink--sur { color: var(--z-sur-ink); }

/* 9 ─ HERO CLARO · reemplaza el fondo oscuro con puntos rojos ────────── */
.hero {
  background:
    radial-gradient(460px 280px at 2% 0%,    rgba(var(--zr-norte),.05), transparent 70%),
    radial-gradient(620px 380px at 100% 10%, rgba(var(--zr-oeste),.10), transparent 70%),
    radial-gradient(560px 360px at 62% 100%, rgba(var(--zr-sur),.10),   transparent 70%),
    linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%);
}
.hero::before {
  inset: auto 0 0 0; height: 3px; opacity: .5; background-size: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  background-image: linear-gradient(90deg, var(--z-norte) 0 33.3%, var(--z-oeste) 33.3% 66.6%, var(--z-sur) 66.6% 100%);
}
.hero::after {
  top: 0; right: 0; width: 55%; height: 100%;
  background: radial-gradient(rgba(23,34,51,.11) 1px, transparent 1.4px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 85%);
          mask-image: linear-gradient(to left, #000 0%, transparent 85%);
}
.hero__eyebrow { color: var(--crimson); }
.hero__eyebrow-line { background: var(--crimson); }
.hero__title { color: var(--text); }
.hero__title-accent { color: var(--crimson); }
.hero__subtitle { color: var(--grey-dark); font-weight: 400; }
.hero .btn-secondary { color: var(--text); border-color: #c5cfdb; background: var(--white); }
.hero .btn-secondary:hover { color: var(--text); border-color: var(--text); background: var(--white); }

/* 10 ─ MENÚ AGRUPADO · desplegables con descripción ─────────────────── */
.nav__item { position: relative; }
.nav__trigger {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 0;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 500; letter-spacing: .01em;
  color: var(--grey-dark); background: none; border: 0; cursor: pointer; transition: color var(--t);
}
.nav__trigger svg { transition: transform var(--t); }
.nav__trigger:hover, .nav__trigger[aria-expanded="true"], .nav__trigger.is-current { color: var(--text); }
.nav__trigger.is-current { font-weight: 600; box-shadow: inset 0 -2px 0 var(--crimson); }
.nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__trigger:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; border-radius: 4px; }
.nav__dd {
  position: absolute; top: calc(100% + 14px); left: -16px; z-index: 110; min-width: 300px;
  padding: 12px 8px 8px; background: var(--white); border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius); box-shadow: var(--pz-shadow-lift); overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav__dd::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; opacity: .55;
  background: linear-gradient(90deg, var(--z-norte) 0 33.3%, var(--z-oeste) 33.3% 66.6%, var(--z-sur) 66.6% 100%); }
.nav__item::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.nav__item.open .nav__dd { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) { .nav__item:hover .nav__dd { opacity: 1; visibility: visible; transform: none; } }
.nav__links .nav__dd a { display: block; padding: 10px 14px; border-radius: 10px; }
.nav__links .nav__dd a::after { display: none; }
.nav__dd strong { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.nav__dd span { display: block; margin-top: 2px; font-size: var(--fs-micro); line-height: 1.45; color: var(--grey); }
.nav__links .nav__dd a:hover { background: var(--off-white); }
.nav__links .nav__dd a[aria-current] { background: rgba(193,39,45,.07); }
.nav__links .nav__dd a[aria-current] strong { color: var(--crimson); }
@media (prefers-reduced-motion: reduce) { .nav__dd, .nav__trigger svg { transition: none; } }

/* menú móvil claro, agrupado por categoría */
.nav__mobile-menu { background: var(--white); border-bottom: 1px solid var(--pz-line); box-shadow: 0 24px 40px -24px rgba(15,31,48,.3); }
.nav__mobile-menu a { color: var(--text); border-bottom: 1px solid var(--pz-line); padding: 12px 0; }
.nav__mobile-menu a:hover, .nav__mobile-menu a[aria-current] { color: var(--crimson); }
.nav__mobile-menu .nav__mobile-cta { color: var(--white); border: 0; }
.nav__mobile-menu .nav__mobile-cta:hover { color: var(--white); }
.nav__mobile-group { margin: 16px 0 2px; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--crimson); }
.nav__mobile-menu :focus-visible { outline-color: var(--crimson); }

/* 11 ─ ROJO ÚNICO · un solo rojo para CTA y acentos (--crimson #C1272D) ─ */
:root {
  --gradient-crimson: linear-gradient(var(--crimson), var(--crimson));
  --shadow-crimson: 0 4px 14px rgba(193,39,45,.22);
  --crimson-hover: #A81F25;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}
.btn-primary, .nav__links .nav__cta, .nav__mobile-menu .nav__mobile-cta, .form__submit, .plan-card__cta--solid { box-shadow: 0 2px 10px rgba(193,39,45,.20); }
.btn-primary:hover, .nav__links .nav__cta:hover, .form__submit:hover, .plan-card__cta--solid:hover { background: var(--crimson-hover); filter: none; box-shadow: 0 6px 16px rgba(193,39,45,.26); }

/* 12 ─ FOOTER CLARO ─────────────────────────────────────────────────── */
.footer {
  --on-dark-strong: var(--text); --on-dark-soft: var(--grey-dark); --on-dark-mute: var(--grey);
  --on-dark-line: var(--pz-line); --on-dark-line-strong: #cfd8e3;
  position: relative; border-top: 0;
  background:
    radial-gradient(520px 300px at 100% 0%, rgba(var(--zr-oeste),.07), transparent 70%),
    radial-gradient(520px 300px at 55% 100%, rgba(var(--zr-sur),.07), transparent 70%),
    linear-gradient(180deg, var(--off-white) 0%, #EAF0F6 100%);
}
.footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; opacity: .5;
  background: linear-gradient(90deg, var(--z-norte) 0 33.3%, var(--z-oeste) 33.3% 66.6%, var(--z-sur) 66.6% 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.footer__links a:hover { color: var(--crimson); }
.footer :focus-visible { outline-color: var(--crimson); }

/* 11 ─ SIN FONDOS OSCUROS · cita, callout, botonera, marco de mapa, chip ── */
.como-funciona__quote, .reporte__callout {
  background: linear-gradient(135deg, rgba(116,172,223,.12), #fff 55%, rgba(193,39,45,.05));
  border: 1px solid var(--pz-line); border-left: 4px solid var(--crimson);
  box-shadow: 0 14px 36px -22px rgba(15,31,48,.22);
}
.como-funciona__quote::before, .reporte__callout::before { color: rgba(193,39,45,.10); }
.como-funciona__quote-text, .reporte__callout-lead { color: var(--text); }
.reporte__callout-body { color: var(--grey-dark); }
.como-funciona__quote-text em, .reporte__callout-lead em { color: var(--crimson); }
.pz-tabs, .cobertura__tabs { background: #fff; border: 1px solid var(--pz-line); box-shadow: 0 8px 22px -14px rgba(15,31,48,.18); }
.pz-tab, .cobertura__tabs .cobertura__tab { color: var(--grey-dark); }
.pz-tab:hover:not(.active), .cobertura__tabs .cobertura__tab:hover:not(.active) { background: rgba(var(--zr),.10); color: var(--text); }
.pz-tab.active, .cobertura__tabs .cobertura__tab.active { color: var(--text); background: rgba(var(--zr),.14); border-color: rgba(var(--zr),.6); }
.cobertura__tabs .cobertura__tab--all.active { background: #eef2f7; border-color: #c5cfdb; }
.cobertura__tabs .cobertura__tab--all::after { background: var(--pz-line); }
.cobertura__tab-dots i, .cobertura__tab.active .cobertura__tab-dots i { box-shadow: 0 0 0 1.5px #fff; }
.cov2-frame { background: #eef2f7 !important; }
.ct2-chip--all, .ct2-chip--all[aria-pressed="true"] { background: #fff !important; color: var(--text) !important; border-color: #c5cfdb; }
.ct2-chip--all:hover { background: #eef2f7; border-color: #9fb0c3; }
.ct2-chip--all[aria-pressed="true"] { border-color: var(--crimson); box-shadow: 0 0 0 3px rgba(193,39,45,.14); }

/* 13 ─ FOOTER: marca, tipografía y redes integradas ───────────────────── */
/* Logo más grande: navegación (≥900px) y footer */
@media (min-width: 900px) { :root { --nav-h: 72px; } .nav__logo img { height: 56px; } }
.footer__logo { display: block; height: 92px; width: auto; padding: 10px 16px; border-radius: 16px; background: var(--white);
  border: 1px solid var(--pz-line); box-shadow: 0 10px 28px -12px rgba(15,31,48,.28); margin-bottom: 20px; }
.footer__brand-desc { font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.65; color: var(--grey-dark); max-width: 42ch; }
.footer__col-title { position: relative; margin-bottom: 20px; padding-bottom: 12px; font-size: .75rem; font-weight: 800; letter-spacing: .12em; color: var(--text); }
.footer__col-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--z-norte) 0 33.3%, var(--z-oeste) 33.3% 66.6%, var(--z-sur) 66.6% 100%); }
.footer__links a { font-weight: 500; font-size: .9375rem; color: var(--grey-dark); transition: color .2s, transform .2s; }
.footer__links a:hover { color: var(--crimson); text-decoration: none; transform: translateX(4px); }

/* Redes: sin fondo blanco, teñidas con la paleta de zonas */
.footer .social { gap: 12px; margin-top: 24px; }
.footer .social__link { --c: var(--z-norte); --ci: var(--z-norte-ink); --cr: var(--zr-norte);
  width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--cr), .10); border: 1px solid rgba(var(--cr), .35); color: var(--ci); box-shadow: none;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s; }
.footer .social__link:nth-child(2) { --c: var(--z-sur);   --ci: var(--z-sur-ink);   --cr: var(--zr-sur); }
.footer .social__link:nth-child(3) { --c: var(--z-oeste); --ci: var(--z-oeste-ink); --cr: var(--zr-oeste); }
.footer .social__link:hover { background: var(--ci); border-color: var(--ci); color: var(--white); transform: translateY(-3px); box-shadow: 0 8px 18px rgba(var(--cr), .35); }

/* Barra inferior */
.footer__bottom { flex-direction: column; gap: 10px; }
.footer__copy { font-size: .8125rem; color: var(--grey); }
.footer__zonas { display: inline-flex; align-items: center; gap: 14px; margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.footer__zonas span { display: inline-flex; align-items: center; gap: 6px; }
.footer__zonas i { width: 8px; height: 8px; border-radius: 50%; }
@media (min-width: 700px) { .footer__bottom { flex-direction: row; justify-content: space-between; } .footer__zonas { margin-right: 76px; } }