/* =================================================================
   SAPUBLEX
   Paleta y tipografia tomadas del Catálogo Comercial 2026.
   Sin dependencias externas: ni CDN, ni fuentes remotas, ni frameworks.
   ================================================================= */

:root {
  /* --- color --- */
  --navy:       #1a507e;
  --navy-700:   #143e62;
  --navy-900:   #0c2b47;
  --navy-950:   #071b2e;
  --red:        #da251c;
  --red-700:    #b31c15;
  --cream:      #f7f4ee;
  --cream-200:  #ede8dd;
  --paper:      #ffffff;
  --ink:        #16120e;
  --muted:      #6b6459;
  --line:       rgba(22, 18, 14, .13);
  --line-soft:  rgba(22, 18, 14, .07);

  /* --- tipografia --- */
  /* Century Gothic no viene con el sistema: llega con Microsoft Office, asi
     que esta en la mayoria de Windows y Mac de escritorio, pero NO en Linux
     ni en moviles. Los respaldos son geometricas parecidas, de mas a menos
     fiel; el ultimo recurso es la sans del sistema. */
  --sans: "Century Gothic", CenturyGothic, "URW Gothic", "URW Gothic L",
          "Avant Garde", "ITC Avant Garde Gothic", Futura, "Trebuchet MS",
          sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* --- ritmo --- */
  --seccion:  clamp(4.5rem, 9vw, 8rem);
  --radio:    4px;
  --ancho:    1200px;
  --sombra:   0 1px 2px rgba(12, 43, 71, .06),
              0 12px 32px -12px rgba(12, 43, 71, .18);
  --sombra-lg:0 2px 4px rgba(12, 43, 71, .07),
              0 32px 64px -24px rgba(12, 43, 71, .32);
  --header-h: 116px;
}

/* ---------------- reset ---------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper); /* --cream */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.06;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------- utilidades ---------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

 .seccion {  padding: 40px 10px 20px 10px; } 



/* Fondo alterno, para dar ritmo entre secciones consecutivas.
   Va como clase y no como style="" porque la CSP del sitio prohíbe los
   estilos en línea (style-src 'self', sin 'unsafe-inline'). */
/* .seccion-alt { background: var(--cream-200); } */
.seccion-alt { background: var(--paper); }

.kicker {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.15rem;
  /*clm */
  border-radius: 15px;
  background-color: var(--cream);
  padding: 5px 15px;
}

.titulo-seccion { font-size: clamp(2.05rem, 5.2vw, 3.5rem); }

.entrada {
  margin-top: 1.35rem;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--muted);
  max-width: 60ch;
  line-height: 1.6;
}

.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;
}

/* ---------------- botones ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  /* 52px de alto: comodo para el pulgar en movil */
  min-height: 52px;
  padding: .85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radio);
  font-size: .96rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  text-align: center;
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primario {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(218, 37, 28, .8);
}
.btn-primario:hover { background: var(--red-700); border-color: var(--red-700); }

.btn-oscuro { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-oscuro:hover { background: var(--navy-900); border-color: var(--navy-900); }

.btn-linea { background: transparent; border-color: currentColor; color: var(--ink); }
.btn-linea:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

.btn-linea-claro { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.btn-linea-claro:hover { background: #fff; border-color: #fff; color: var(--navy-900); }

.btn-bloque { width: 100%; }

/* =================================================================
   HEADER
   ================================================================= */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  /*background: rgba(247, 244, 238, .82); */
  background-color: var(--paper);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease,
              box-shadow .25s ease;
}
.header.pegado {
  /* background: rgba(247, 244, 238, .96); */
  background-color: var(--paper);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px -8px rgba(12, 43, 71, .25);
}

.header .contenedor {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.marca { display: flex; align-items: center; gap: .7rem; margin-right: auto; }
.marca img { width: 98px; height: auto; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.05; }
.marca-nombre {
  font-size: 1.16rem; font-weight: 800; letter-spacing: .06em; color: var(--navy);
}
.marca-lema {
  font-size: .53rem; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--muted);
}

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
  font-size: .89rem; font-weight: 600; color: var(--ink);
  padding-block: .4rem; position: relative;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--red); transition: right .25s ease;
}
.nav a:hover::after { right: 0; }

/* el CTA del menu solo existe en movil */
.nav-cta { display: none; }

.header .btn { min-height: 44px; padding: .55rem 1.2rem; font-size: .87rem; }

/* boton hamburguesa */
.menu-btn {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--radio); cursor: pointer;
}
.menu-btn span {
  display: block; width: 20px; height: 2px; background: var(--ink);
  position: relative; transition: background-color .2s ease;
}
.menu-btn span::before, .menu-btn span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px;
  background: var(--ink); transition: transform .25s ease, top .25s ease;
}
.menu-btn span::before { top: -6px; }
.menu-btn span::after  { top: 6px; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* =================================================================
   HERO
   ================================================================= */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 2vw, 5rem));
  padding-bottom: clamp(3rem, 7vw, 6rem);
  /*background:
    radial-gradient(1000px 620px at 88% 8%, rgba(26, 80, 126, .09), transparent 62%),
    var(--cream); */
  background-color: var(--paper);
  overflow: hidden;
}

.hero .contenedor {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.hero h1 {
  font-size: clamp(2.5rem, 6.1vw, 3rem);
  letter-spacing: -.032em;
  line-height: .99;
}
.hero h1 em {
  font-style: normal;
  color: var(--red);
  /* subrayado grueso que no toca las descendentes */
  background-image: linear-gradient(transparent 62%, rgba(218,37,28,.16) 62%);
}

.hero-sub {
  margin-top: 1.6rem;
  font-size: clamp(1.05rem, 1.75vw, 1.28rem);
  color: var(--muted);
  max-width: 46ch;
  line-height: 1.58;
}

.hero-acciones {
  margin-top: 2.3rem;
  display: flex; flex-wrap: wrap; gap: .85rem;
}

.hero-nota {
  margin-top: 1.7rem;
  display: flex; align-items: center; gap: .6rem;
  font-size: .87rem; color: var(--muted);
}
.hero-nota strong { color: var(--ink); font-weight: 700; }

.hero-espacio { padding-top: 50px !important;}


.punto-vivo {
  width: 9px; height: 9px; border-radius: 50%;
  background: #16a34a; flex: none;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, .55);
  animation: latido 2.4s infinite;
}
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); }
  70%  { box-shadow: 0 0 0 9px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* marco de la foto del hero */
.hero-marco {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-lg);
  transform: rotate(-1.1deg);
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.hero-marco:hover { transform: rotate(0deg) scale(1.012); }
.hero-marco img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }

.hero-sello {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--navy);
  color: #fff;
  padding: .75rem 1.15rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  border-top: 3px solid var(--red);
}

/* =================================================================
   FRANJA DE CIFRAS
   ================================================================= */
.franja {
  background: var(--navy-900);
  color: #fff;
  border-top: 4px solid var(--red);
}
.franja .contenedor {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .12);
  padding-inline: 0;
}
.cifra {
  background: var(--navy-900);
  padding: clamp(1.9rem, 3.6vw, 2.9rem) clamp(1.1rem, 2.4vw, 2rem);
  text-align: center;
}
.cifra-num {
  font-size: clamp(2.1rem, 4.4vw, 3.15rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}
.cifra-txt {
  margin-top: .6rem;
  font-size: .81rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .68);
}

/* =================================================================
   LICENCIAS
   Mini-sección de confianza entre la franja de cifras y la propuesta de
   valor. Fondo blanco con filete rojo superior: el mismo acento que ya
   usan las tarjetas del sitio, y contrasta con el azul de la franja que
   tiene justo encima.
   ================================================================= */
.licencias {
  background: var(--paper);
  border-top: 4px solid var(--red);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}
.licencias .contenedor { max-width: 700px; }

.licencias-icono {
  width: 52px;
  height: 52px;
  margin: 0 auto clamp(1.2rem, 2.4vw, 1.7rem);
  display: block;
  fill: var(--red);
}
/* la palomita se recorta del escudo dejando ver el fondo blanco */
.licencias-palomita {
  fill: none;
  stroke: var(--paper);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.licencias-titulo {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  color: var(--ink);
}

.licencias-texto {
  margin-top: 1.05rem;
  margin-inline: auto;
  max-width: 54ch;
  font-size: clamp(1.1rem, 1.5vw, 1.08rem);
  line-height: 1.7;
  color: var(--muted);
}

@media (max-width: 640px) {
  .licencias-icono { width: 44px; height: 44px; }
}

/* =================================================================
   TARJETAS DE BENEFICIO
   ================================================================= */
.rejilla-beneficios {
  margin-top: clamp(2.8rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.beneficio {
  background: var(--cream);
  padding: clamp(1.8rem, 3vw, 2.5rem);
  transition: background-color .25s ease;
}
.beneficio:hover { background: var(--paper); }
.beneficio-num {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--red);
  letter-spacing: .1em;
}
.beneficio h3 { margin: .9rem 0 .7rem; font-size: 1.24rem; }
.beneficio p { color: var(--muted); font-size: .96rem; line-height: 1.6; }

/* =================================================================
   BLOQUE PARTIDO (regulada / cobertura)
   ================================================================= */
.partido {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.partido.invertido > *:first-child { order: 2; }

.lista-check { margin: 2rem 0 0; padding: 0; list-style: none; }
.lista-check li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: 1.05rem;
  color: var(--muted);
  font-size: .99rem;
}
.lista-check li strong { display: block; color: var(--ink); font-weight: 700; }
.lista-check li::before {
  content: "";
  position: absolute; left: 0; top: .42em;
  width: 1.15rem; height: 1.15rem;
  background: var(--red);
  border-radius: 50%;
  /* palomita dibujada con mascara, sin imagen externa */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/76% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/76% no-repeat;
}

.figura { position: relative; }
.figura img {
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  width: 100%;
}
.figura figcaption {
  margin-top: .9rem;
  font-size: .8rem;
  color: var(--muted);
}

/* seccion oscura */
.oscuro {
  background: var(--navy-950);
  color: #fff;
}
.oscuro .titulo-seccion { color: #fff; }
.oscuro .entrada, .oscuro p { color: rgba(255, 255, 255, .72); }
.oscuro .lista-check li { color: rgba(255, 255, 255, .72); }
.oscuro .lista-check li strong { color: #fff; }
.oscuro .kicker { color: #ff6a5e; }

/* =================================================================
   COBERTURA / MAPA
   ================================================================= */
.mapa-marco {
  border: 1px solid var(--line);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--sombra);
}
.mapa-marco img { width: 100%; }

.vialidades { margin: 2rem 0 0; padding: 0; list-style: none; }
.vialidades li {
  display: flex; align-items: baseline; gap: .9rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.vialidades li:last-child { border-bottom: 0; }
.vialidades .clave {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--red);
  flex: none;
  letter-spacing: .04em;
}
.vialidades .via { font-weight: 700; }
.vialidades .zona { color: var(--muted); font-size: .88rem; margin-left: auto; }

/* =================================================================
   UBICACIONES
   ================================================================= */
.rejilla-ubicaciones {
  margin-top: clamp(2.8rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: clamp(1.3rem, 2.4vw, 2rem);
}

.ubicacion {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.ubicacion:hover { transform: translateY(-5px); box-shadow: var(--sombra-lg); }

.ubicacion-foto { position: relative; overflow: hidden; background: var(--cream-200); }
.ubicacion-foto img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 42%;
  transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
.ubicacion:hover .ubicacion-foto img { transform: scale(1.05); }

.ubicacion-clave {
  position: absolute; top: 0; left: 0;
  background: var(--navy);
  color: #fff;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  padding: .45rem .8rem;
  border-bottom: 2px solid var(--red);
}

.ubicacion-cuerpo { padding: 1.5rem 1.5rem 1.65rem; display: flex; flex-direction: column; flex: 1; }
.ubicacion h3 { font-size: 1.18rem; line-height: 1.25; }
.ubicacion-dir {
  margin-top: .65rem;
  font-size: .86rem;
  color: var(--muted);
  line-height: 1.5;
}

.ubicacion-datos {
  margin-top: 1.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.dato-etq {
  font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
.dato-val { font-weight: 800; font-size: 1.02rem; margin-top: .18rem; }
.dato-val.precio { color: var(--red); }

.sentidos { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .45rem; }
.sentido {
  display: flex; align-items: center; gap: .55rem;
  font-size: .83rem; color: var(--muted);
}
.sentido b {
  flex: none;
  display: inline-grid; place-items: center;
  width: 20px; height: 20px;
  background: var(--cream-200);
  border-radius: 3px;
  font-size: .68rem; color: var(--navy);
}

.ubicacion .btn { margin-top: 1.5rem; }

/* =================================================================
   GALERIA
   ================================================================= */
.galeria {
  margin-top: clamp(2.8rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.galeria-item {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--navy-900);
  border: 0; padding: 0;
  display: block;
  width: 100%;
}
.galeria-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 45%;
  transition: transform .5s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
}
.galeria-item:hover img { transform: scale(1.06); opacity: .82; }
.galeria-pie {
  position: absolute; inset: auto 0 0 0;
  padding: 1.6rem .9rem .7rem;
  background: linear-gradient(transparent, rgba(7, 27, 46, .88));
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  text-align: left;
  letter-spacing: .02em;
}

/* visor */
.visor {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(7, 27, 46, .93);
  backdrop-filter: blur(6px);
}
.visor.abierto { display: grid; }
.visor img {
  max-width: 100%; max-height: 82vh;
  border-radius: var(--radio);
  box-shadow: var(--sombra-lg);
}
.visor-pie {
  margin-top: 1rem; text-align: center;
  color: rgba(255,255,255,.85); font-size: .9rem;
}
.visor-cerrar {
  position: absolute; top: 1rem; right: 1rem;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radio);
  color: #fff; font-size: 1.5rem; cursor: pointer;
}
.visor-cerrar:hover { background: rgba(255,255,255,.2); }

/* =================================================================
   PAQUETES
   ================================================================= */
.rejilla-paquetes {
  margin-top: clamp(2.8rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(1.3rem, 2.4vw, 1.9rem);
  align-items: stretch;
}
.paquete {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: clamp(1.9rem, 3vw, 2.5rem);
  transition: transform .3s ease, box-shadow .3s ease;
}
.paquete:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.paquete.destacado {
  background: var(--navy-950);
  border-color: var(--navy-950);
  color: #fff;
  box-shadow: var(--sombra-lg);
}
.paquete.destacado .paquete-etq { color: rgba(255,255,255,.55); }
.paquete.destacado .paquete-texto { color: rgba(255,255,255,.72); }
.paquete.destacado .paquete-puntos li { color: rgba(255,255,255,.8); }
.paquete.destacado .paquete-puntos li::before { background: #fff; }

.paquete-cinta {
  position: absolute; top: -1px; right: 1.5rem;
  background: var(--red); color: #fff;
  font-size: .66rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .4rem .8rem;
}
.paquete-etq {
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.paquete h3 { font-size: 1.62rem; margin: .7rem 0 .1rem; }
.paquete-precio {
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--red);
  line-height: 1.1;
  margin: .5rem 0 .2rem;
}
.paquete.destacado .paquete-precio { color: #ff5c50; }
.paquete-texto { margin-top: .9rem; font-size: .93rem; color: var(--muted); line-height: 1.6; }

.paquete-puntos { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.paquete-puntos li {
  position: relative; padding-left: 1.5rem;
  margin-bottom: .7rem; font-size: .9rem; color: var(--muted);
}
.paquete-puntos li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; background: var(--red); border-radius: 50%;
}
.paquete .btn { margin-top: auto; }
.paquete-puntos + .btn { margin-top: 1.9rem; }

/* tarjeta sin precio: solo número, título y texto */
.paquete-simple { border-top: 3px solid var(--red); }
.paquete-simple .paquete-etq {
  font-size: .95rem;
  letter-spacing: .08em;
  color: var(--red);
}
.paquete-simple h3 { font-size: 1.5rem; margin: .8rem 0 0; }
.paquete-simple .paquete-texto { font-size: 1rem; line-height: 1.65; }

.paquetes-cierre {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}
.paquetes-cierre .btn { min-width: 260px; }
.paquetes-cierre .nota-precios { margin-top: 1.2rem; }

.nota-precios {
  margin-top: 2rem;
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.6;
}

/* tabla de precios (solo si mostrar_precios = true) */
.tabla-envoltura { margin-top: 2.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-precios { width: 100%; border-collapse: collapse; min-width: 640px; }
.tabla-precios th {
  text-align: left; font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
  padding: .8rem 1rem; border-bottom: 2px solid var(--ink);
}
.tabla-precios td { padding: 1.05rem 1rem; border-bottom: 1px solid var(--line-soft); }
.tabla-precios tr:hover td { background: rgba(255,255,255,.6); }
.tabla-precios .col-clave { font-family: var(--mono); font-size: .8rem; color: var(--red); }
.tabla-precios .col-nombre { font-weight: 700; }
.tabla-precios .col-precio { text-align: right; font-weight: 800; white-space: nowrap; }

/* =================================================================
   PROCESO
   ================================================================= */
.pasos {
  margin-top: clamp(2.8rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.paso { position: relative; padding-top: 3.1rem; }
/* El icono sustituye a la numeracion "01, 02..." que habia antes. Los
   dibujos viven en app/iconos.php; aqui solo se les da tamano y color. */
.paso-icono {
  position: absolute; top: 0; left: 0;
  width: 30px; height: 30px;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* La hairline arranca despues del icono y se corta en el ultimo paso. */
.paso::after {
  content: ""; position: absolute; top: 15px; left: 2.6rem; right: -1.5rem;
  height: 1px; background: var(--line);
}
.paso:last-child::after { display: none; }
.paso h3 { font-size: 1.12rem; margin-bottom: .55rem; }
.paso p { font-size: .91rem; color: var(--muted); line-height: 1.6; }

/* =================================================================
   MARCAS
   ================================================================= */
.marcas-bloque { margin-top: clamp(3rem, 6vw, 5rem); text-align: center; }
.marcas-bloque .kicker { text-align: center; }

.marcas {
  margin-top: 3rem;
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: .7rem 1rem;
}
.marca-chip {
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 100px;
  padding: .55rem 1.15rem;
  font-size: .87rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
}

/* ---------------- carrusel de logos ----------------
   Las imagenes salen solas de public_html/assets/img/marcas/
   (ver app/marcas.php). La animacion es CSS pura; main.js solo ajusta
   la duracion segun cuantas marcas haya. */
.marcas-carrusel {
  --marca-tam:      150px;   /* lado de la ficha, cuadrada */
  --marca-hueco:    1.75rem; /* separacion entre fichas */
  --marca-alto-max: 100px;   /* tope de alto del logo dentro de la ficha */

  margin-top: 3rem;
  overflow: hidden;
  /* Difumina las orillas para que los logos no aparezcan y desaparezcan
     de golpe contra el borde de la seccion. */
  -webkit-mask-image: linear-gradient(90deg,
      transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg,
      transparent 0, #000 7%, #000 93%, transparent 100%);
}

.marcas-pista {
  display: flex;
  width: max-content;
  animation: marcas-correr var(--marcas-duracion, 40s) linear infinite;
}

/* Se detiene al pasar el mouse o al llegar con el teclado, para poder
   mirar un logo con calma. */
.marcas-carrusel:hover .marcas-pista,
.marcas-carrusel:focus-within .marcas-pista { animation-play-state: paused; }

@keyframes marcas-correr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marca-logo {
  flex: 0 0 auto;
  width:  var(--marca-tam);
  height: var(--marca-tam);
  /* El hueco va como margen del item y NO como 'gap' de la pista: con gap,
     las dos mitades no medirian exactamente lo mismo y el -50% del ciclo
     daria un brinco visible en cada vuelta. */
  margin: 0 var(--marca-hueco) 0 0;
  padding: 1.5rem;
  display: grid;
  place-items: center;
  /* Ficha blanca: la seccion es navy y casi todos los logotipos estan
     hechos para fondo claro. Sobre el navy, la mitad no se verian. */
  background: #fff;
  border-radius: var(--radio);
}

/* Ficha oscura, para los logos cuyo texto es blanco y sobre fondo claro
   desapareceria. Se activa nombrando el archivo "Marca.oscuro.png".
   El borde evita que la ficha se funda con el navy de la seccion. */
.marca-logo-oscuro {
  background: var(--navy-950);
  border: 1px solid rgba(255, 255, 255, .18);
}

.marca-logo picture {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

/* Los logos llegan con proporciones muy distintas: el de Telcel es 3.5:1 y
   el del instituto 1:1. Si solo se limita el ancho, el cuadrado se ve tres
   veces mas grande que el alargado aunque ocupen la misma ficha. Topar
   tambien el alto empareja el peso visual de toda la fila.
   El logo nunca se recorta ni se deforma: solo se reduce hasta caber. */
.marca-logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--marca-alto-max);
}

@media (max-width: 640px) {
  .marcas-carrusel {
    --marca-tam: 170px;
    --marca-hueco: 1rem;
    --marca-alto-max: 78px;
  }
  .marca-logo { padding: 1rem; }
}

/* Quien pidio menos animacion en su sistema no ve nada moverse: la pista
   se queda quieta y se puede recorrer a mano. Ahi sobran las copias. */
@media (prefers-reduced-motion: reduce) {
  .marcas-carrusel { overflow-x: auto; }
  .marcas-pista { animation: none; }
  .marcas-pista > [aria-hidden="true"] { display: none; }
}

/* =================================================================
   LLAMADA INTERMEDIA
   ================================================================= */
.llamada {
  background: var(--navy);
  color: #fff;
  border-top: 4px solid var(--red);
}
.llamada .contenedor {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 2rem;
  padding-block: clamp(2.8rem, 5vw, 4.2rem);
}
.llamada h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); max-width: 22ch; }
.llamada p { margin-top: .8rem; color: rgba(255,255,255,.75); max-width: 44ch; }
.llamada-acciones { display: flex; flex-wrap: wrap; gap: .8rem; }

/* =================================================================
   FORMULARIO
   ================================================================= */

/*   .contacto { background: var(--cream-200); } */
.contacto { background: var(--paper); }

.contacto-caja {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 0;
  background: var(--paper);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-lg);
}

.contacto-lado {
  background: var(--navy-950);
  color: #fff;
  padding: clamp(2.2rem, 4vw, 3.2rem);
  display: flex; flex-direction: column;
}
.contacto-lado h2 { margin-top: .5rem; font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.contacto-lado > p { margin-top: 2rem; color: rgba(255,255,255,.72); font-size: .98rem; }

/* .contacto-directo { margin-top: auto; padding-top: 2.5rem; display: grid; gap: 1.3rem; } */
/* Dos columnas: los datos a la izquierda y el asesor rellenando el hueco
   que quedaba a su derecha (los valores son cortos y sobraba panel azul). */
.contacto-directo { padding-top: 4rem; display: flex; align-items: center; gap: 1.5rem; }
.contacto-datos { flex: 1 1 auto; display: grid; gap: 1.3rem; }
.contacto-dato { display: flex; gap: .9rem; align-items: flex-start; }
.contacto-dato .etq {
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.contacto-dato .val { font-size: 1.06rem; font-weight: 700; margin-top: .12rem; display: block; }
.contacto-dato .val:hover { color: #ff6a5e; }

/* Asesora: es decoracion, no informacion, por eso el alt va vacio.
   La foto sale recortada, con desvanecido inferior horneado en el alfa
   del PNG (ver assets/img/asesor.png), no con un degradado de CSS: asi
   sigue funcionando aunque el panel deje de ser azul.
   El clamp la encoge sola cuando el panel se angosta; no hace falta una
   consulta de medios aparte. */
.contacto-asesor {
  flex: 0 0 auto;
  width: clamp(120px, 22vw, 200px);
  align-self: flex-end;
}
.contacto-asesor img { width: 100%; height: auto; }

.formulario { padding: clamp(2.2rem, 4vw, 3.2rem); }

.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.campo { display: flex; flex-direction: column; }
.campo.ancho { grid-column: 1 / -1; }

.campo label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .45rem;
}
.campo label .req { color: var(--red); }

.campo input, .campo select, .campo textarea {
  width: 100%;
  min-height: 52px;
  padding: .8rem 1rem;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--radio);
  font-size: 1rem;
  transition: border-color .18s ease, background-color .18s ease,
              box-shadow .18s ease;
}
.campo textarea { min-height: 128px; resize: vertical; line-height: 1.6; }

.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%236b6459' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 1.15rem;
  padding-right: 2.8rem;
}

.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--navy);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(26, 80, 126, .13);
}

.campo.con-error input, .campo.con-error select, .campo.con-error textarea {
  border-color: var(--red);
  background: rgba(218, 37, 28, .04);
}
.campo-error {
  margin-top: .4rem;
  font-size: .82rem;
  color: var(--red);
  font-weight: 600;
}

/* trampa para bots: fuera de la vista pero sin display:none,
   que algunos bots detectan */
.trampa {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

.formulario .btn { margin-top: 1.6rem; }

.aviso-privacidad {
  margin-top: 1.1rem;
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.55;
}
.aviso-privacidad a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.aviso-privacidad a:hover { color: var(--red); }

.alerta {
  padding: 1.05rem 1.25rem;
  border-radius: var(--radio);
  margin-bottom: 1.6rem;
  font-size: .93rem;
  line-height: 1.55;
  border-left: 4px solid;
}
.alerta-ok    { background: #e8f6ed; border-color: #1a7f4b; color: #14532d; }
.alerta-error { background: #fdecea; border-color: var(--red); color: #8a1610; }

/* =================================================================
   FOOTER
   ================================================================= */
.footer {
  background: var(--navy-950);
  color: rgba(255, 255, 255, .68);
  padding-block: clamp(3rem, 5vw, 4.5rem) 2rem;
  font-size: .92rem;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.footer .marca-nombre { color: #fff; }
.footer .marca-lema { color: rgba(255,255,255,.5); }
.footer h4 {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.45); margin-bottom: 1.1rem; font-weight: 700;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .65rem; }
.footer a:hover { color: #fff; }
.footer-desc { margin-top: 1.3rem; max-width: 38ch; line-height: 1.6; font-size: .89rem; }
.footer-bottom {
  padding-top: 1.8rem;
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between;
  font-size: .82rem;
  color: rgba(255, 255, 255, .45);
}

.footer-cta   { margin-top: 1.1rem; }
.footer-redes { margin-top: 1.2rem; }

.footer-legal { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.footer-legal a {
  color: rgba(255, 255, 255, .82);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-legal a:hover { color: #fff; }

/* =================================================================
   PÁGINA DE GRACIAS
   ================================================================= */
.gracias {
  padding-top: calc(var(--header-h) + 5rem);
  min-height: 76vh;
  display: grid;
  place-items: center;
  text-align: center;
}
.gracias .contenedor { max-width: 720px; }
.gracias .entrada { margin-inline: auto; }
.gracias .hero-acciones { justify-content: center; }

.gracias-icono {
  width: 74px;
  height: 74px;
  margin: 0 auto 2rem;
  border-radius: 50%;
  background: var(--red);
  display: grid;
  place-items: center;
}

.gracias-nota { margin-top: 2.5rem; font-size: .9rem; color: var(--muted); }
.gracias-nota a { color: var(--navy); font-weight: 700; }
.gracias-nota a:hover { color: var(--red); }

/* =================================================================
   PÁGINAS LEGALES (aviso de privacidad)
   ================================================================= */
.contenedor-angosto { max-width: 780px; }

.legal {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem));
  padding-bottom: var(--seccion);
}

.legal-encabezado {
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 3px solid var(--ink);
}
.legal-encabezado .titulo-seccion { font-size: clamp(2rem, 5vw, 3.1rem); }

.legal-fecha {
  margin-top: 1.6rem;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--muted);
}

.legal section { margin-bottom: 3rem; }

.legal h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.65rem);
  padding-bottom: .8rem;
  margin-bottom: 1.3rem;
  border-bottom: 1px solid var(--line);
}
.legal h3 {
  font-size: 1.05rem;
  margin: 1.9rem 0 .7rem;
  color: var(--navy);
}
.legal p { margin-bottom: 1.05rem; line-height: 1.75; }
.legal p:last-child { margin-bottom: 0; }

.legal ul, .legal ol { margin: 0 0 1.3rem; padding-left: 1.4rem; line-height: 1.75; }
.legal li { margin-bottom: .6rem; }
.legal li::marker { color: var(--red); }

.legal a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.legal a:hover { color: var(--red); }

.legal code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--cream-200);
  padding: .12rem .4rem;
  border-radius: 3px;
}

.legal-nota {
  background: var(--paper);
  border-left: 4px solid var(--red);
  border-radius: var(--radio);
  padding: 1.2rem 1.4rem;
  margin: 1.6rem 0;
  font-size: .95rem;
  line-height: 1.7;
}

.legal-cierre {
  background: var(--navy-950);
  color: rgba(255, 255, 255, .82);
  border-radius: var(--radio);
  padding: clamp(1.8rem, 4vw, 2.6rem);
  margin-top: 3.5rem;
  text-align: center;
}
.legal-cierre p { margin-bottom: 1.8rem; font-size: .97rem; }

/* =================================================================
   WHATSAPP FLOTANTE
   ================================================================= */
.wa-flotante {
  position: fixed;
  right: clamp(1rem, 3vw, 1.8rem);
  bottom: clamp(1rem, 3vw, 1.8rem);
  z-index: 90;
  display: flex; align-items: center; gap: .65rem;
  height: 58px;
  padding: 0 1.35rem 0 1.05rem;
  background: #25d366;
  color: #06331a;
  border-radius: 100px;
  font-weight: 700;
  font-size: .93rem;
  box-shadow: 0 8px 28px -6px rgba(37, 211, 102, .55);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wa-flotante:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -8px rgba(37,211,102,.7); }
.wa-flotante svg { width: 26px; height: 26px; flex: none; }
.wa-texto { display: inline; }

/* =================================================================
   ANIMACION DE APARICION
   ================================================================= */
.revelar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1),
              transform .7s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.revelar.visible { opacity: 1; transform: none; }

/* escalona los hijos de una rejilla */
.revelar-hijos > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.2,.7,.3,1),
              transform .6s cubic-bezier(.2,.7,.3,1);
}
.revelar-hijos.visible > * { opacity: 1; transform: none; }
.revelar-hijos.visible > *:nth-child(1) { transition-delay: .00s; }
.revelar-hijos.visible > *:nth-child(2) { transition-delay: .07s; }
.revelar-hijos.visible > *:nth-child(3) { transition-delay: .14s; }
.revelar-hijos.visible > *:nth-child(4) { transition-delay: .21s; }
.revelar-hijos.visible > *:nth-child(5) { transition-delay: .28s; }
.revelar-hijos.visible > *:nth-child(6) { transition-delay: .35s; }
.revelar-hijos.visible > *:nth-child(7) { transition-delay: .42s; }

/* =================================================================
   RESPONSIVO
   ================================================================= */
@media (max-width: 1080px) {
  .hero .contenedor { grid-template-columns: 1fr; }
  .hero-marco { transform: none; max-width: 620px; }
  .contacto-caja { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --header-h: 106px; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px -18px rgba(12, 43, 71, .4);
    padding: .5rem clamp(1.15rem, 4vw, 2.5rem) 1.35rem;
    /* se despliega sin saltos */
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease, opacity .25s ease;
    opacity: 0;
    pointer-events: none;
  }
  .nav > * { overflow: hidden; }
  .nav.abierto { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; }
  .nav a { padding: .95rem 0; border-bottom: 1px solid var(--line-soft); font-size: 1rem; }
  .nav a::after { display: none; }

  .nav a.nav-cta {
    display: flex;
    margin-top: 1rem;
    border-bottom: 0;
    color: #fff;
  }

  .menu-btn { display: flex; }
  .header .btn.solo-desktop { display: none; }

  .partido { grid-template-columns: 1fr; }
  .partido.invertido > *:first-child { order: 0; }

  .franja .contenedor { grid-template-columns: repeat(2, 1fr); }

  .paso::after { display: none; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }

  .campos { grid-template-columns: 1fr; }
  .campo.ancho { grid-column: auto; }

  .hero h1 { font-size: clamp(2.15rem, 9vw, 3rem); }
  .hero-acciones { flex-direction: column; }
  .hero-acciones .btn { width: 100%; }

  .llamada-acciones { flex-direction: column; width: 100%; }
  .llamada-acciones .btn { width: 100%; }

  .rejilla-ubicaciones { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .galeria-pie { font-size: .68rem; padding: 1.2rem .6rem .5rem; }

  .footer-top { grid-template-columns: 1fr; gap: 2rem; }

  /* en movil el boton se encoge para no tapar contenido */
  .wa-flotante { height: 54px; padding: 0 1.15rem 0 .95rem; }
  .wa-texto { display: none; }
  .wa-flotante { padding: 0; width: 54px; justify-content: center; }
}

@media (max-width: 380px) {
  .franja .contenedor { grid-template-columns: 1fr; }
}

/* =================================================================
   PREFERENCIAS DEL SISTEMA
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .revelar, .revelar-hijos > * { opacity: 1 !important; transform: none !important; }
}

@media print {
  .header, .wa-flotante, .visor, .llamada, .contacto { display: none !important; }
  body { background: #fff; }
}