@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  --color-blue: #1A35E0;
  --color-blue-dark: #0D1638;
  --color-green: #2FB350;
  --color-cyan: #22D3EE;
  --color-glow-green: #39E75F;
  --color-bg: #FFFFFF;
  --color-bg-tint: #F4F7FF;
  --color-text: #111111;
  --color-text-muted: #666666;
  --color-border: #E5E9F5;
  --radius-card: 12px;
  --radius-pill: 24px;
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.08);
  --font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#footer-placeholder { margin-top: auto; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* NAV */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-blue-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: box-shadow .2s ease;
}
.site-nav.is-scrolled { box-shadow: 0 4px 18px rgba(0,0,0,.28); }

/* On pages with a dark hero directly under the nav, let the nav go
   transparent and sit on top of the hero's own background — one
   continuous canvas instead of two stacked colors trying to match.
   As soon as the page scrolls (is-scrolled), the nav regains its solid
   background so it stays readable over whatever section follows. */
body[data-page="servicios"] .site-nav,
body[data-page="empresarial"] .site-nav,
body[data-page="pagos"] .site-nav,
body[data-page="inicio"] .site-nav { background: transparent; border-bottom: none; }
body[data-page="servicios"] .site-nav.is-scrolled,
body[data-page="empresarial"] .site-nav.is-scrolled,
body[data-page="pagos"] .site-nav.is-scrolled,
body[data-page="inicio"] .site-nav.is-scrolled { background: var(--color-blue-dark); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

/* Inicio goes one step further than servicios: the hero is a carousel of
   full-bleed banner images the client composed themselves, so the nav has to
   FLOAT on top of them rather than sit in its own band above. `sticky` still
   occupies layout space, which pushed the carousel down and left a white
   strip across the top of the page — `fixed` takes the nav out of flow
   entirely so the carousel starts at y=0 with the nav overlaid, and it still
   stays pinned while scrolling exactly like sticky did. */
body[data-page="inicio"] .site-nav { position: fixed; left: 0; right: 0; }
/* Slides 2-4 have "Cable Red | Conexión y Entretenimiento" baked into the
   artwork at top-left, so showing the nav's own logo there too would double
   it up. Hide it while the nav is transparent; bring it back once the nav
   turns solid on scroll and the artwork is no longer behind it. */
body[data-page="inicio"] .site-nav:not(.is-scrolled) .site-nav__logo { visibility: hidden; }

/* Floating over photography, plain white links are unreadable — the client's
   design puts them inside a solid white capsule instead. The nav markup keeps
   the CTA as the last <li> of the same <ul>, so the capsule is built from the
   non-CTA items: no gap between them, white fill on each, rounded caps on the
   two ends, which reads as one continuous pill. Desktop only — below 860px the
   links collapse into the hamburger overlay, which has its own styling. */
@media (min-width: 861px) {
  body[data-page="inicio"] .site-nav:not(.is-scrolled) .site-nav__links { gap: 0; align-items: stretch; }
  body[data-page="inicio"] .site-nav:not(.is-scrolled) .site-nav__links > li { display: flex; align-items: center; }
  body[data-page="inicio"] .site-nav:not(.is-scrolled) .site-nav__links > li:not(:last-child) { background: #fff; }
  body[data-page="inicio"] .site-nav:not(.is-scrolled) .site-nav__links > li:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); padding-left: 10px; }
  body[data-page="inicio"] .site-nav:not(.is-scrolled) .site-nav__links > li:nth-last-child(2) { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; padding-right: 10px; }
  body[data-page="inicio"] .site-nav:not(.is-scrolled) .site-nav__links > li:not(:last-child) a { color: var(--color-blue-dark); }
  body[data-page="inicio"] .site-nav:not(.is-scrolled) .site-nav__links > li:not(:last-child) a:hover { background: rgba(26, 53, 224, 0.08); }
  body[data-page="inicio"] .site-nav:not(.is-scrolled) .site-nav__cta {
    margin-left: 16px;
    background: #fff;
    border-color: #fff !important;
    color: var(--color-blue) !important;
  }
}
/* Alto total 56px -> 156px (+100px, pedido explícito del usuario). Se agregó todo
   a padding-top/bottom (12px->62px) para no tocar el layout horizontal. Como el
   nav es sticky (position:sticky, no fixed salvo en Inicio) y ocupa espacio real
   en el flujo, los -64px de margin-top usados en los heroes de Servicios/
   Empresarial/Pagos para que el hero se meta "debajo" del nav transparente
   tuvieron que subir a -164px, y el padding-top compensatorio de
   `.servicios-hero` de 120px a 220px — si el nav vuelve a cambiar de alto, buscar
   `-164px` y `220px` en este archivo, son los puntos que dependen de esto. */
.site-nav__inner {
  width: 100%; padding: 30px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.site-nav__logo img { height: 46px; }
.site-nav__links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.site-nav__links a {
  display: block;
  font-size: 17px; color: #fff; background: none; border: none; cursor: pointer; font-family: inherit;
  padding: 11px 20px; border-radius: 20px; transition: background 0.2s ease, color 0.2s ease;
}
.site-nav__links a:hover { background: rgba(255, 255, 255, 0.1); }
.site-nav__links a.is-active { background: #fff; color: var(--color-blue-dark); font-weight: 700; }
.site-nav__cta {
  margin-left: 8px;
  border: 2px solid #fff !important;
  color: #fff !important; font-weight: 700;
  padding: 8px 20px !important;
}
.site-nav__cta:hover { background: #fff !important; color: var(--color-blue-dark) !important; }
.site-nav__toggle { display: none; background: none; border: none; font-size: 22px; cursor: pointer; color: #fff; }

@media (max-width: 860px) {
  .site-nav__toggle { display: block; }
  .site-nav__links {
    position: fixed; inset: 106px 0 0 0; background: #fff; flex-direction: column; align-items: stretch;
    padding: 20px; gap: 12px; display: none; overflow-y: auto;
  }
  .site-nav__links.is-open { display: flex; }
  .site-nav__links a { color: var(--color-text); }
  .site-nav__links a:hover { background: rgba(26, 53, 224, 0.12); }
  .site-nav__links a.is-active { background: var(--color-bg-tint); color: var(--color-blue); }
  .site-nav__cta { border-color: var(--color-blue) !important; color: var(--color-blue) !important; text-align: center; }
  .site-nav__cta:hover { background: var(--color-blue) !important; color: #fff !important; }
}

/* BUTTONS */
.btn { display: inline-block; padding: 10px 22px; border-radius: var(--radius-pill); font-weight: 600; font-size: 14px; border: none; cursor: pointer; font-family: inherit; }
.btn-primary { background: var(--color-green); color: #fff; }
.btn-secondary { background: var(--color-blue); color: #fff; }
.btn-outline { background: transparent; border: 2px solid var(--color-blue); color: var(--color-blue); }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* INICIO — HERO CAROUSEL */
.hero-carousel { position: relative; overflow: hidden; background: var(--color-blue-dark); width: 100%; height: 0; padding-bottom: 37.5%; }
.hero-carousel__track { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-carousel__slide {
  position: absolute; inset: 0; display: block;
  opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0.6s ease; pointer-events: none;
}
.hero-carousel__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.hero-carousel__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.85); color: var(--color-blue-dark);
  font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.hero-carousel__arrow--prev { left: 16px; }
.hero-carousel__arrow--next { right: 16px; }
.hero-carousel__arrow:hover { background: #fff; }
.hero-carousel__dots {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 2;
}
.hero-carousel__dot {
  width: 9px; height: 9px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.5); cursor: pointer; padding: 0;
  transition: width 0.2s ease, border-radius 0.2s ease, background 0.2s ease;
}
.hero-carousel__dot.is-active { background: #fff; width: 22px; border-radius: 5px; }
@media (max-width: 700px) {
  .hero-carousel__arrow { width: 32px; height: 32px; font-size: 16px; }
}

/* SECTIONS / SERVICES */
.section-title { text-align: center; font-size: 24px; margin: 0 0 6px; }
.section-subtitle { text-align: center; color: var(--color-text-muted); font-size: 13px; margin: 0 0 28px; }
/* Landscape cards whose mascot artwork deliberately spills past the card's
   edges, with the "Más información" button as a separate block underneath.
   Hovering a card flips it to the white offer artwork (the client's design:
   the mascot is the resting state, the plan/price is the reveal) and the
   button flips with it, since the whole card is one hover target. */
.mascot-cards { padding: 48px 20px; }
/* max-width 1240px->1990px->2440px (+250px, luego +150px más por card, 3 cards)
   — pedido explícito del usuario tras quitar el título/subtítulo y el botón
   "Ver todos los servicios". max-width solo pone un techo: la fila usa
   grid-template-columns:1fr fijo (nunca hace wrap por sí sola), así que subir
   este valor no rompe la fila de 3 en ninguna resolución — el único punto
   donde pasa a 1 columna es el breakpoint explícito de abajo (860px). */
.mascot-cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 2440px; margin: 0 auto; }
@media (max-width: 860px) { .mascot-cards__grid { grid-template-columns: 1fr; gap: 40px; } }

.mascot-card { display: block; }
/* height:0 + padding-bottom rather than aspect-ratio — see the hero carousel
   note above; aspect-ratio computed to 0 height in this environment. The
   padding box still gives absolutely-positioned children a real height to
   resolve their percentages against, so the art can be sized in %. */
.mascot-card__face {
  position: relative;
  width: 100%; height: 0; padding-bottom: 68.8%;
  border-radius: 20px;
  background: linear-gradient(150deg, #2036e8, #0d1eaa);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.mascot-card__art, .mascot-card__offer {
  position: absolute;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.mascot-card__offer {
  left: 7%; right: 7%; top: 7%; bottom: 7%;
  width: 86%; height: 86%;
  object-fit: contain;
  opacity: 0;
}
.mascot-card__text {
  position: absolute; z-index: 1;
  transition: opacity 0.25s ease;
}
.mascot-card__text h3 {
  margin: 0;
  color: var(--color-cyan);
  font-weight: 800; line-height: 1.05;
  text-transform: uppercase;
}
.mascot-card__text p { margin: 2px 0 0; color: #fff; }

/* Per-card composition, matching the client's reference video: the artwork is
   anchored to a different edge on each card and overflows the rounded box, and
   each title is sized to fit its own card on one line (they differ in the
   reference too — "INTERNET" is set much larger than the two-word titles). */
.mascot-card--internet .mascot-card__art { left: 2%; bottom: 0; height: 108%; width: auto; }
.mascot-card--internet .mascot-card__text { right: 6%; top: 50%; transform: translateY(-50%); text-align: left; }
.mascot-card--internet .mascot-card__text h3 { font-size: clamp(20px, 2.6vw, 36px); }
.mascot-card--internet .mascot-card__text p { font-size: clamp(11px, 1.15vw, 16px); }

.mascot-card--fibra .mascot-card__art { left: 50%; bottom: 7%; height: 102%; width: auto; transform: translateX(-50%); }
.mascot-card--fibra .mascot-card__text { left: 2%; right: 2%; bottom: 6%; text-align: center; }
.mascot-card--fibra .mascot-card__text h3 { font-size: clamp(14px, 1.9vw, 27px); }

.mascot-card--tv .mascot-card__art { right: -6%; bottom: -5%; height: 118%; width: auto; }
.mascot-card--tv .mascot-card__text { left: 6%; top: 50%; transform: translateY(-50%); text-align: left; max-width: 62%; }
.mascot-card--tv .mascot-card__text h3 { font-size: clamp(17px, 2.2vw, 31px); }
.mascot-card--tv .mascot-card__text p { font-size: clamp(9px, 0.85vw, 12px); }
/* En el breakpoint de 1 columna (abajo) la card ocupa casi todo el ancho de la
   sección, y el -6% de la card TV (pensado para desbordar apenas el cuadro
   redondeado en columnas angostas) se vuelve una cantidad de px grande y empuja
   scroll horizontal a nivel de página. Se recorta solo ahí — el resto de
   resoluciones conserva el desborde intencional. Nada de `overflow` en un
   ancestro: eso rompe el truco height:0+padding-bottom de .mascot-card__face
   (colapsa toda la sección, ver commit que revirtió esa versión del fix). */
@media (max-width: 860px) {
  .mascot-card--tv .mascot-card__art { right: 0; }
}

.mascot-card__link {
  display: block; margin-top: 14px; text-align: center;
  background: var(--color-blue); color: #fff;
  font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 15px 10px; border-radius: 10px;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* The reveal. :focus-within keeps it reachable by keyboard, since the only
   focusable thing in the card is the button underneath it. */
.mascot-card:hover .mascot-card__face,
.mascot-card:focus-within .mascot-card__face {
  background: #fff;
  box-shadow: 0 10px 30px rgba(13, 22, 56, 0.16);
}
.mascot-card:hover .mascot-card__art,
.mascot-card:focus-within .mascot-card__art,
.mascot-card:hover .mascot-card__text,
.mascot-card:focus-within .mascot-card__text { opacity: 0; }
.mascot-card:hover .mascot-card__offer,
.mascot-card:focus-within .mascot-card__offer { opacity: 1; }
.mascot-card:hover .mascot-card__link,
.mascot-card:focus-within .mascot-card__link {
  background: #fff; color: var(--color-blue);
  box-shadow: 0 6px 18px rgba(13, 22, 56, 0.14);
}

/* SERVICE DETAIL PAGE */
.service-detail-list { display: flex; flex-direction: column; gap: 24px; max-width: 900px; margin: 0 auto; padding: 40px 20px; }
.service-detail { display: flex; gap: 24px; align-items: center; background: #fff; box-shadow: var(--shadow-card); border-radius: var(--radius-card); padding: 24px; }
.service-detail img { width: 140px; height: 140px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.service-detail h3 { font-size: 18px; margin: 0 0 8px; }
.service-detail p { font-size: 13px; color: var(--color-text-muted); margin: 0 0 10px; }
.service-detail ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--color-text-muted); }
.service-detail ul li { margin-bottom: 4px; }
@media (max-width: 600px) {
  .service-detail { flex-direction: column; text-align: center; }
  .service-detail img { margin: 0 auto; }
  .service-detail ul { text-align: left; }
}

/* INICIO — EMPRESARIAL TEASER */
/* Reference video has a plain white gap here before the next section (no
   respaldo strip / "empresas que confían" band directly under this
   carousel — that content doesn't belong on this section per the video). */
.empresarial-teaser { margin-bottom: 48px; }
/* .empresarial-teaser__carousel IS a .hero-carousel (see index.html) — this
   rule only overrides the flat background with the two-tone gradient this
   section uses in the reference video; sizing, slide transitions and the
   arrow/dot controls all come from the shared .hero-carousel rules. */
.empresarial-teaser__carousel { background: linear-gradient(100deg, #1B2A6B, var(--color-blue) 65%); }
/* All 3 slides are now flat client images — no composed HTML/CSS slide to
   special-case anymore, just the shared .hero-carousel crossfade/aspect-box
   behavior (same as the main hero-carousel above). */

/* INICIO — CONEXION BANNER */
.conexion-banner { width: 100%; }
.conexion-banner img { width: 100%; height: auto; display: block; }
.conexion-banner a { display: block; transition: opacity 0.2s ease; }
.conexion-banner a:hover { opacity: 0.92; }

/* INICIO — CHECA CARDS */
.checa-cards { padding: 48px 20px; }
/* max-width 1100px->1450px (+350px a la sección) — el paso siguiente a 2450px
   (+250px más por card) se revirtió: a ese ancho la card queda 451x229 (ratio
   1.97:1, una tira plana), mientras que en 1450px la card sale 348x268 (ratio
   1.3:1) — el ancho ya no es el único factor: al ser más angosta el texto de
   "Checa Tu Plan" ocupa más líneas y la fila entera crece en alto (grid stretch
   iguala las 4 a esa altura), dando la proporción cuadrada del ejemplo del
   usuario. Agrandar el ancho por sí solo no puede lograr esa forma porque el
   alto es 100% dependiente del contenido — para crecer de verdad manteniendo la
   proporción hay que subir padding/font-size de .checa-card junto con el ancho. */
/* Todo el bloque de abajo (max-width, gap, padding, radius, tipografía, botón)
   escalado x2 en conjunto (+100% pedido explícito del usuario) — no solo el
   ancho: como el alto de .checa-card depende 100% de su contenido (ver nota de
   arriba), duplicar únicamente max-width angosta el texto y ROMPE la
   proporción en vez de agrandarla.
   Primer intento (valores fijos en px al doble) se probó y falló: a 2900px de
   viewport llega bien a 691x535 (ratio 1.3), pero en 1920px (resolución común)
   el ancho de la card queda limitado por el viewport a ~436px (no llega a
   duplicarse) mientras que el alto sigue fijo en 691px porque viene de
   font-size/padding constantes — resultado: 436x691, ratio 0.63 (angosta y muy
   alta), la forma se rompe en la dirección opuesta a la vez pasada. Con
   clamp(mínimo, vw, máximo) — mismo patrón que .mascot-card__text h3/p en
   este archivo — la tipografía/padding escalan junto con el ancho real de la
   card en vez de ser un número fijo, así el ratio ~1.3 se mantiene en
   cualquier resolución: el mínimo de cada clamp es el valor ORIGINAL (previo a
   este pedido) y el máximo es el valor x2, con el vw calibrado para llegar al
   máximo justo en los ~2940px de viewport donde max-width satura en 2900px. */
.checa-cards__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 1.36vw, 40px); max-width: 2900px; margin: 0 auto; }
@media (max-width: 860px) { .checa-cards__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .checa-cards__grid { grid-template-columns: 1fr; } }
.checa-card {
  background: linear-gradient(160deg, var(--color-blue), #0d1eaa);
  border-radius: clamp(12px, 0.82vw, 24px);
  box-shadow: var(--shadow-card);
  padding: clamp(26px, 1.77vw, 52px) clamp(24px, 1.63vw, 48px);
  display: flex; flex-direction: column;
}
.checa-card h3 { color: #fff; font-size: clamp(19px, 1.29vw, 38px); margin: 0 0 clamp(12px, 0.82vw, 24px); }
.checa-card p { color: #dbe1ff; font-size: clamp(13px, 0.88vw, 26px); line-height: 1.5; margin: 0 0 clamp(20px, 1.36vw, 40px); flex: 1; }
.checa-card__link {
  align-self: flex-start;
  background: #fff; color: var(--color-blue); font-weight: 700; font-size: clamp(12px, 0.82vw, 24px);
  text-transform: uppercase; padding: clamp(10px, 0.68vw, 20px) clamp(22px, 1.5vw, 44px); border-radius: clamp(24px, 1.63vw, 48px);
  transition: background 0.2s ease, color 0.2s ease;
}
.checa-card__link:hover { background: #00FF00; color: #001BC2; }

/* FOOTER */
.site-footer {
  background: linear-gradient(180deg, #1A35E0, #0B1550);
  color: #C7CDEF;
  padding: 40px 20px 24px;
}
/* Servicios ends on .repeater-banner, which is the same #1A35E0 as this
   gradient's top stop — a plain background here would make that seam
   invisible (see body[data-page="inicio"] for the plain version, correct
   there because Inicio's last section is white). This thin shadow band
   restores a visible seam only where two blue sections touch. */
body[data-page="servicios"] .site-footer {
  background:
    linear-gradient(180deg, transparent 0px, transparent 6px, rgba(5, 10, 40, 0.35) 14px, transparent 22px, transparent 100%),
    linear-gradient(180deg, #1A35E0, #0B1550);
}
.site-footer__inner {
  width: 100%;
  display: flex; flex-wrap: wrap; gap: 0;
  align-items: flex-start;
}
.site-footer__brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  margin-right: 28px; flex-shrink: 0;
}
.site-footer__brand img { display: block; height: 28px; width: auto; }
.site-footer__tagline { font-size: 12px; color: #cdd3f5; white-space: nowrap; }
.site-footer__col {
  padding: 0 24px; border-left: 1px solid rgba(255, 255, 255, 0.25);
  min-width: 150px;
}
.site-footer__col--push { margin-left: auto; }
.site-footer__col h4 { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 12px; letter-spacing: 0.02em; }
.site-footer__col a, .site-footer__col p { display: flex; align-items: center; font-size: 13px; color: #fff; margin: 0 0 8px; line-height: 1.5; }
.site-footer__col a:hover { color: var(--color-cyan); }
.site-footer__col a svg { width: 14px; height: 14px; margin-right: 8px; stroke: #fff; flex-shrink: 0; }
.site-footer__socials { display: flex; gap: 10px; }
.site-footer__socials a {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex; align-items: center; justify-content: center;
  margin: 0; transition: background 0.2s ease;
}
.site-footer__socials a svg { width: 16px; height: 16px; fill: #fff; margin: 0; }
.site-footer__socials a:hover { background: var(--color-cyan); }
.site-footer__socials a:hover svg { fill: var(--color-blue-dark); }
.site-footer__complaints {
  font-size: 15px; font-weight: 700; color: #fff;
  text-align: right; line-height: 1.4; white-space: nowrap;
  padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, 0.25);
  align-self: center;
}
.site-footer__complaints:hover { color: var(--color-cyan); }
.site-footer__bottom {
  margin: 32px 0 0; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15); text-align: center;
}
.site-footer__bottom p { font-size: 12px; margin: 0; color: #cdd3f5; }

/* GENERIC "EN CONSTRUCCIÓN" PAGE */
.info-page { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 20px; }
.info-page h1 { font-size: 24px; margin: 0 0 10px; }
.info-page p { color: var(--color-text-muted); max-width: 420px; }

/* GENERIC FORMULARIO PAGE (external form embebido en iframe) */
.form-page { padding: 40px 20px 56px; display: flex; flex-direction: column; align-items: center; }
.form-page__frame-wrap { width: 100%; max-width: 900px; }
.form-page__frame { width: 100%; height: 80vh; border: none; border-radius: var(--radius-card); box-shadow: var(--shadow-card); display: block; overflow-y: auto; }

/* CONTACT PAGE */
.contact-hero {
  background: linear-gradient(180deg, var(--color-bg-tint), #fff);
  padding: 56px 20px 8px;
  text-align: center;
}
.contact-intro {
  color: var(--color-text-muted);
  font-size: 14px; line-height: 1.65;
  max-width: 560px; margin: 18px auto 0;
}
.contact-intro a { color: var(--color-blue); font-weight: 600; }

.contact-page { max-width: 760px; margin: 0 auto; padding: 40px 20px 56px; }

.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 620px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: #fff; box-shadow: var(--shadow-card); border-radius: var(--radius-card);
  padding: 22px; text-align: left;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.contact-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,.1); }
.contact-card__icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--color-bg-tint);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-card__icon svg { width: 24px; height: 24px; stroke: var(--color-blue); }
.contact-card__icon--green { background: rgba(47, 179, 80, 0.12); }
.contact-card__icon--green svg { stroke: var(--color-green); }
.contact-card__label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: 4px; }
.contact-card__value { display: block; font-size: 16px; font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
.contact-card__value a { color: inherit; }
.contact-card__desc { display: block; font-size: 12px; color: var(--color-text-muted); line-height: 1.4; }

/* SERVICIOS PAGE — HERO */
.servicios-hero {
  background-image: url(../img/servicios/hero-bg.png), linear-gradient(135deg, var(--color-blue-dark), #131c4f 60%, var(--color-blue-dark));
  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  padding: 56px 20px;
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 28px;
  align-items: center;
  position: relative;
  z-index: 1;
  margin-top: -114px;
  padding-top: 220px;
}
@media (max-width: 900px) {
  .servicios-hero { grid-template-columns: 1fr; text-align: center; }
}
.servicios-hero__content h1 {
  color: #fff; font-size: 32px; font-weight: 800; line-height: 1.15; margin: 0 0 16px;
  text-transform: uppercase;
}
.servicios-hero__content h1 .accent-cyan { color: var(--color-cyan); display: block; text-transform: none; }
.servicios-hero__features { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 900px) { .servicios-hero__features { align-items: center; } }
.servicios-hero__features li { color: #fff; font-size: 15px; font-weight: 700; }
.btn-outline-white { background: transparent; border: 2px solid #fff; color: #fff; }
.btn-outline-white:hover { background: #fff; color: var(--color-blue-dark); }
.servicios-hero__media { width: 100%; height: auto; object-fit: contain; }
.servicios-hero__widget { width: 100%; height: auto; object-fit: contain; border-radius: var(--radius-card); }

/* Animación de entrada al cargar la página, los 3 elementos a la vez (sin delay):
   texto entra de izquierda a derecha, jugadores bajan de arriba hacia abajo,
   widget solo aparece (fade, sin movimiento). Corre una vez, sin loop. */
@keyframes servicios-hero-slide-x {
  from { opacity: 0; transform: translateX(-120px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes servicios-hero-drop-in {
  from { opacity: 0; transform: translateY(-120px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes servicios-hero-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.servicios-hero__content { animation: servicios-hero-slide-x 1.1s ease-out both; }
.servicios-hero__media { animation: servicios-hero-drop-in 1.1s ease-out both; }
.servicios-hero__widget { animation: servicios-hero-fade-in 1.1s ease-out both; }

/* SERVICIOS PAGE — TV PLAN CARDS */
.tv-plans { padding: 56px 20px; background: #fff; }
/* Título en el azul del diseño (muestreado de los propios PNGs de las tarjetas;
   en el video se ve como #0213DD por la compresión, pero el valor real es este).
   Scopeado a .tv-plans: `.section-title` es global y lo usan Inicio, contáctenos,
   velocidad y admin, donde sigue siendo el título negro chico. */
.tv-plans .section-title {
  color: #001FE8; font-weight: 800; text-transform: uppercase;
  font-size: clamp(26px, 4.6vw, 46px); line-height: 1.1; margin-bottom: 4px;
}
.tv-plans .section-subtitle {
  color: #001FE8; font-weight: 700;
  font-size: clamp(15px, 2.2vw, 31px); margin-bottom: 36px;
}
.tv-plans__grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; max-width: 1100px; margin: 0 auto; }
/* 520px (antes 320px), a pedido del usuario. El hover (`::before` + halo, ver nota
   de flujo "Hover de las tarjetas de TV") usa todo % en vez de px, así que escala
   proporcional sin romperse. */
.tv-plan-card { width: 520px; max-width: 100%; }
.tv-plan-card__link-wrap { position: relative; display: block; }
/* Las imágenes de tarjeta blanca traen el interior transparente (se ven blancas
   porque la página lo es), mientras que las azules son opacas. Sin un fondo azul
   detrás, el borde difuminado de la imagen azul deja pasar el blanco de la página
   y se ve un halo. Esto pinta ese fondo, recortado a la silueta del cuerpo de la
   tarjeta (el botón sobresale por debajo y queda fuera, como en el diseño). */
.tv-plan-card__link-wrap::before {
  content: ""; position: absolute; z-index: 0;
  left: 1.99%; right: 1.99%; top: 0.78%; bottom: 3.91%;
  border-radius: 14.5% / 8.6%;
  background: linear-gradient(180deg, #001FEA, #001074);
  opacity: 0;
}
.tv-plan-card__link-wrap:hover::before { opacity: 1; }
.tv-plan-card__img { display: block; position: relative; z-index: 1; width: 100%; height: auto; }
.tv-plan-card__img--hover { position: absolute; inset: 0; opacity: 0; }
.tv-plan-card__link-wrap:hover .tv-plan-card__img--default { opacity: 0; }
.tv-plan-card__link-wrap:hover .tv-plan-card__img--hover { opacity: 1; }

/* SERVICIOS PAGE — PROMO BANNER (single full-width image, no composed elements) */
.promo-banner { padding: 0; }
.promo-banner__media { width: 100%; height: auto; display: block; margin: 0; border-radius: 0; }

/* SERVICIOS PAGE — DARK BAND (carousel + internet plans share one background, one div) */
.dark-band { background: linear-gradient(180deg, #151A5E, #2E2FA0 45%, var(--color-blue)); }

/* SERVICIOS PAGE — CHANNEL CAROUSEL */
.channel-carousel { padding: 90px 0px; text-align: center; }
.channel-carousel h2 { color: #fff; font-size: 20px; margin: 0 0 24px; }
/* max-width quitado (antes 1180px) para que el track ocupe todo el ancho de la
   pantalla, a pedido del usuario. */
.channel-carousel__track {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 12px;
  margin: 0 auto;
  cursor: grab; scrollbar-width: none;
}
.channel-carousel__track::-webkit-scrollbar { display: none; }
.channel-carousel__track.is-dragging { cursor: grabbing; }
/* 158x216 (antes 140x120, +80%): la caja ahora respeta la proporción real de los
   logos (~0.7:1, ancho:alto, medida en los 9 PNG) en vez de una caja más ancha que
   alta — con `object-fit:contain` puro, una caja de proporción distinta a la
   imagen deja de sobra en el eje que no restringe (pasaba antes: ~27px de aire a
   los costados en vez de los 10px pedidos). Con la caja ajustada al aspect ratio
   real + `padding:10px` (border-box), el aire queda parejo en los 4 lados. */
.channel-carousel__logo { flex: 0 0 158px; height: 216px; padding: 10px; padding-right: 2px; box-sizing: border-box; object-fit: contain; background: #fff; user-select: none; -webkit-user-drag: none; }

/* SERVICIOS PAGE — INTERNET PLAN CARDS */
.internet-plans { padding: 56px 20px; }
.internet-plans .section-title { color: var(--color-cyan); font-size: 34px; text-transform: uppercase; }
.internet-plans .section-subtitle { color: #fff; font-size: 16px; }
/* align-items:flex-start (default de flex es stretch) — sin esto, Básico/Estándar
   (imagen más corta que Premium, ver nota abajo en .internet-plan-card) se
   estiraban a la altura de Premium y dejaban un hueco blanco vacío debajo del
   botón "+Instalación Gratis". Con flex-start cada tarjeta termina en su propio
   contenido, igual que en el video. */
.internet-plans__grid {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; justify-content: center;
  max-width: 1800px; margin: 0 auto 48px;
}
/* 530px (antes 280px, +250px a pedido del usuario). El Plan Premium ya sale más
   alto que Básico/Estándar sin CSS aparte — su propia imagen
   (internet-premium.png, 440x652) tiene una relación alto:ancho mayor que las
   otras dos (387x555): a cualquier `width` igual entre las 3 tarjetas, Premium
   siempre va a quedar más alta porque `.internet-plan-card__img` usa
   `width:100%; height:auto`. Confirmado contra el video de referencia
   (video_pantalla_maketado.mp4) que esto es a propósito (Premium ya se ve más
   grande ahí, en cualquier frame, no solo en hover). El hover (glow verde) es la
   misma regla `.internet-plan-card:hover` para las 3 tarjetas por igual, no hace
   falta nada especial para la del medio. */
.internet-plan-card {
  position: relative;
  width: 530px; max-width: 100%;
  border-radius: 20px;
  border: 3px solid transparent;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.internet-plan-card:hover {
  border-color: var(--color-glow-green);
  box-shadow: 0 0 0 4px rgba(57, 231, 95, 0.25), 0 12px 28px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px);
}
.internet-plan-card__img { display: block; width: 100%; height: auto; }
/* Swap de imagen en hover solo para Plan Premium (AGOSTO/CAJA 5 FONDO BLANCO 2.png,
   trae más canales: Cartoon Network/Discovery Kids/Disney/FX/Space), a pedido
   explícito del usuario. Básico y Estándar no tienen `__link-wrap` así que no les
   aplica nada de esto.
   A diferencia de .tv-plan-card (crossfade SIN transition, a propósito — ver esa
   sección: ahí el borde opaco vs. relleno transparente de los PNG dejaba un flash
   de color mal si se animaba), acá el usuario pidió explícitamente una apertura
   lenta — se probó visualmente con Edge headless (clase forzada) y no aparece
   ningún halo/flash raro, así que sí lleva transition. */
.internet-plan-card__link-wrap { position: relative; display: block; }
.internet-plan-card__img--default,
.internet-plan-card__img--hover { transition: opacity 0.6s ease; }
.internet-plan-card__img--hover { position: absolute; inset: 0; opacity: 0; }
.internet-plan-card__link-wrap:hover .internet-plan-card__img--default { opacity: 0; }
.internet-plan-card__link-wrap:hover .internet-plan-card__img--hover { opacity: 1; }

/* SERVICIOS PAGE — COVERAGE CHECKER */
.coverage-checker { text-align: center; }
.coverage-checker h2 { color: var(--color-cyan); font-size: 46px; margin: 0 0 20px; text-transform: uppercase; }
/* max-width 700px->900px->1530px (+70%) para agrandar los dropdown, no la sección —
   pedido explícito del usuario. Padding/fuente/chevron escalados x1.7 en conjunto. */
.coverage-checker__fields { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; max-width: 1530px; margin: 0 auto; }
.coverage-checker__field { position: relative; flex: 1; min-width: 374px; }
.coverage-checker__select {
  width: 100%;
  appearance: none; -webkit-appearance: none;
  background: #fff; border: none; border-radius: 41px;
  padding: 37px 92px 37px 48px; font-size: 31px; color: var(--color-text-muted);
  cursor: pointer;
}
.coverage-checker__chevron {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--color-blue); display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.coverage-checker__chevron svg { width: 29px; height: 29px; stroke: #fff; }

/* SERVICIOS PAGE — BENEFIT ICONS + REPEATER PROMO BANNER, misma fila
   (antes eran dos <section> apiladas; el usuario pidió juntarlas en una
   sola fila y agrandarlas, con una captura de referencia como spec exacto).
   Íconos a ancho fijo a la izquierda, banner ocupa el resto vía flex:1 y
   se recorta con object-fit:cover a la misma altura que los íconos — así
   la fila queda a todo el ancho disponible sin depender de un número
   "+200px" fijo que no escalaría igual en todas las resoluciones. */
.benefits { background: var(--color-blue); padding: 40px 20px 56px; }
/* max-width:1800px a propósito (restaurado tras probar sin tope): sin él,
   .repeater-banner__link (flex:1) se estira sin límite en pantallas muy
   anchas. Combinado con eso, la altura (236px, ver abajo) se calculó para
   que object-fit:cover NUNCA tenga que recortar el banner incluso cuando
   la fila llega a su ancho máximo de 1800px — ver nota junto a
   .repeater-banner__media-full con la cuenta exacta. */
.benefits__row { display: flex; align-items: center; gap: 20px; max-width: 1800px; margin: 0 auto; flex-wrap: wrap; }
/* .benefits__grid era un flex de 4 .benefit-box con SVGs reales; ahora es
   la imagen plana del cliente (beneficios.png, mismo contenido), así que
   solo necesita altura (igual a .repeater-banner__media-full, mismos
   breakpoints) — .benefit-box queda sin uso, se quitó. */
/* Altura como fórmula continua, no un número fijo por breakpoint — el primer
   intento (236px fijo) solo evitaba el recorte EXACTO a 1800px de ancho de
   fila; a anchos menores (tablet, ~700-900px) esos mismos 236px (o el 184px
   "escalado a ojo" que probé después) dejaban muy poco espacio para el
   banner una vez restado el ancho del grid, y volvía a recortarse fuerte.
   La cuenta real (con gridWidth=H*3.87, bannerWidth=H*3.67, gap=20px,
   padding=40px): H = (viewportWidth - 60) / 7.545 ≈ 13.254vw - 7.952px da
   la altura exacta de cero recorte... en teoría. En la práctica sobraba un
   recorte residual de ~15px porque `vw` se calcula sobre el viewport
   completo (incluye el scrollbar vertical), pero el ancho real disponible
   de la fila es document.documentElement.clientWidth, que lo excluye
   (~15-17px menos en Windows) — medido con getBoundingClientRect, no
   supuesto. Por eso el término fijo bajó a -10.5px (margen de seguridad
   sobre el -7.952px "exacto"): un poco de azul de sobra a los costados es
   preferible a que se recorte el banner. min(236px, ...) la topa en el
   punto exacto donde la fila misma se topa en su max-width:1800px (viewport
   ~1840px) — más allá de eso la fórmula seguiría creciendo pero la fila ya
   no lo hace, así que hay que congelar la altura ahí también. Si max-width
   o el gap/padding de .benefits cambian, HAY que rehacer esta cuenta. */
.benefits__grid { display: block; height: min(236px, calc(13.254vw - 10.5px)); width: auto; }
.repeater-banner__link { display: block; flex: 1; min-width: 380px; }
.repeater-banner__media-full { display: block; width: 100%; height: min(236px, calc(13.254vw - 10.5px)); object-fit: cover; border-radius: 16px; }
/* 880px, no 700px: entre ~701-861px la fórmula de arriba da una H tan chica
   que gridWidth + gap + el .repeater-banner__link{min-width:380px} de abajo
   ya no caben en la fila (261+20+380 > rowWidth ahí), así que flex-wrap
   manda el banner a su propia línea completa mientras SIGUE con el height
   chico calculado para compartir fila — el resultado es un recorte enorme
   (~97px medido en la práctica, no una suposición). Apilar antes de llegar
   a esa zona (861px es el punto exacto, 880px deja margen) evita el
   conflicto por completo en vez de pelear contra min-width. */
@media (max-width: 880px) {
  .benefits__row { flex-direction: column; align-items: stretch; }
  .benefits__grid { height: auto; width: 100%; margin: 0 auto; }
  .repeater-banner__link { min-width: 0; width: 100%; }
  .repeater-banner__media-full { height: auto; object-fit: initial; }
}

/* SPEEDTEST PAGE */
.speedtest-page {
  background: linear-gradient(180deg, var(--color-bg-tint), #fff 55%);
  padding: 56px 20px 64px;
}
.speedtest-hero { text-align: center; margin-bottom: 8px; }

.speedtest-panel {
  position: relative;
  overflow: hidden;
  max-width: 420px;
  margin: 32px auto 0;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(13, 22, 56, 0.12);
  padding: 40px 32px 32px;
  text-align: center;
}
.speedtest-panel::before {
  content: '';
  position: absolute;
  top: -70px; right: -70px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 53, 224, 0.10), transparent 70%);
}
.speedtest-panel::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 179, 80, 0.09), transparent 70%);
}

.gauge {
  --phase-color: var(--color-blue);
  position: relative;
  width: 220px; height: 220px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.gauge__ring { transform: rotate(-90deg); overflow: visible; }
.gauge__track { fill: none; stroke: var(--color-bg-tint); stroke-width: 14; }
.gauge__fill {
  fill: none;
  stroke: var(--phase-color);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 552.9;
  transition: stroke-dashoffset 0.4s ease, stroke 0.3s ease;
}
.gauge.is-indeterminate .gauge__fill { animation: gauge-pulse 1.4s ease-in-out infinite; }
@keyframes gauge-pulse {
  0%, 100% { stroke-dashoffset: 552.9; opacity: 0.35; }
  50% { stroke-dashoffset: 400; opacity: 0.9; }
}
.gauge__center { position: absolute; display: flex; flex-direction: column; align-items: center; }
.gauge__phase { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--phase-color); margin-bottom: 6px; transition: color 0.3s ease; }
.gauge__value { font-size: 32px; font-weight: 800; color: var(--phase-color); line-height: 1; transition: color 0.3s ease; }
.gauge__unit { font-size: 11px; color: var(--color-text-muted); margin-top: 4px; }

/* Speed button doubles as the progress/status indicator: no separate floating
   status text competing with it for space. The fill sweeps left-to-right over
   the real elapsed time of the current phase, so progress reads as genuine
   even when raw throughput numbers (esp. on localhost) jump around wildly. */
.speed-btn {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: block;
  width: 100%;
  max-width: 260px;
  height: 54px;
  margin: 28px auto 0;
  border: none;
  border-radius: 27px;
  cursor: pointer;
  font-family: inherit;
  background: var(--color-green);
  box-shadow: 0 8px 20px rgba(47, 179, 80, 0.32);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.speed-btn.is-running { background: var(--color-bg-tint); box-shadow: none; }
.speed-btn:disabled { cursor: default; }
.speed-btn__fill {
  position: absolute; inset: 0;
  width: 0%;
  background: var(--phase-color, var(--color-blue));
  transition: width 0.15s linear;
}
.speed-btn__label {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 0 18px;
  font-weight: 700; font-size: 14px; letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.speed-btn.is-running .speed-btn__label { color: var(--color-text); }

.speedtest-results {
  display: flex; justify-content: center; gap: 12px;
  max-width: 420px; margin: 28px auto 0; flex-wrap: wrap;
}
.stat-tile {
  flex: 1; min-width: 108px;
  background: #fff;
  border-top: 3px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px 12px;
  text-align: center;
}
.stat-tile strong { display: block; font-size: 22px; font-weight: 800; color: var(--color-text); }
.stat-tile span { font-size: 10px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-tile--blue { border-top-color: var(--color-blue); }
.stat-tile--blue strong { color: var(--color-blue); }
.stat-tile--green { border-top-color: var(--color-green); }
.stat-tile--green strong { color: var(--color-green); }

/* ADMIN PAGE */
.admin-login { max-width: 360px; margin: 80px auto; padding: 32px; box-shadow: var(--shadow-card); border-radius: var(--radius-card); }
.admin-login h1 { font-size: 18px; margin: 0 0 18px; text-align: center; }
.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px; }
.form-field input { width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 14px; }
.form-error { color: #d33; font-size: 12px; margin-top: 10px; text-align: center; min-height: 16px; }
.admin-gallery { max-width: 900px; margin: 40px auto; padding: 0 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.admin-slot { background: #fff; box-shadow: var(--shadow-card); border-radius: var(--radius-card); padding: 16px; text-align: center; }
.admin-slot img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; margin-bottom: 10px; background: var(--color-bg-tint); }
.admin-bar { display: flex; justify-content: space-between; align-items: center; max-width: 900px; margin: 30px auto 0; padding: 0 20px; }

/* EMPRESARIAL PAGE — HERO */
.empresarial-hero { position: relative; margin-top: -114px; }
.empresarial-hero__banner { width: 100%; height: auto; display: block; }
/* La imagen fuente (1920x719) sale muy alta a ancho completo en pantallas anchas
   — el video de referencia se grabó en un lienzo corto (1870x778) donde todo el
   hero + la tarjeta de respaldo cabían juntos sin scroll. Los íconos/badges del
   banner llegan hasta ~79% de su alto (y≈569 de 719px, medido con el canal de
   brillo), así que solo hay margen seguro para recortar por debajo de ese punto.
   Recién a partir de ~1600px de ancho la altura natural (ancho/2.67) supera los
   600px que sí dejan ese margen — por eso el recorte solo se activa ahí; a
   anchos menores la altura natural ya es más corta que 600px, y forzar
   object-fit:cover en un contenedor más angosto que la imagen recortaría los
   costados (texto a la izquierda, íconos a la derecha) en vez de la franja vacía
   de abajo. */
@media (min-width: 1600px) {
  .empresarial-hero__banner { height: 680px; object-fit: cover; object-position: top; }
}
/* La imagen fuente (respaldo-stats.png) es un recorte muy ajustado alrededor
   de los íconos (apenas 8px de aire arriba, 12px abajo) — aplicarle el borde
   redondeado directamente y solaparla con margen negativo grande dejaba muy
   poco "cuerpo" blanco visible sobre el banner. En vez de eso, el fondo
   blanco/padding/sombra van en un contenedor propio con la imagen adentro,
   así el solape queda sobre fondo blanco sólido del contenedor, no sobre el
   recorte ajustado de la imagen. */
.empresarial-hero__stats {
  position: relative; z-index: 2;
  width: 90%; max-width: 900px;
  margin: -30px auto 0;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 16px 32px rgba(13, 22, 56, 0.18);
  padding: 20px 32px;
}
.empresarial-hero__stats img { width: 100%; height: auto; display: block; }
@media (max-width: 700px) {
  .empresarial-hero__stats { width: 94%; margin-top: -20px; padding: 14px 18px; }
}

/* EMPRESARIAL PAGE — MISION / VISION */
.mision-vision { margin-bottom: 50px;padding: 48px 20px 8px; }
.mision-vision__grid { display: flex; flex-wrap: wrap; gap: 20px; max-width: 1100px; margin: 0 auto; }
.mision-vision__card {
  flex: 1; min-width: 280px;
  background: linear-gradient(160deg, var(--color-blue), #0d1eaa);
  border-radius: 20px;
  padding: 28px 32px;
}
.mision-vision__card h2 { color: var(--color-cyan); font-size: 22px; font-weight: 800; text-transform: uppercase; text-align: center; margin: 0 0 14px; }
.mision-vision__card p { color: #fff; font-size: 14px; line-height: 1.6; text-align: center; margin: 0; }

/* EMPRESARIAL PAGE — MARCAS QUE CONFIAN */
.marcas-confian { background: var(--color-blue); padding: 56px 0; text-align: center; }
.marcas-confian h2 { color: #fff; font-size: 20px; font-weight: 700; margin: 0 0 32px; text-transform: uppercase; }
.marcas-confian__scroll {
  overflow-x: auto; width: 100%; padding: 0 20px;
  cursor: grab; scrollbar-width: none;
}
.marcas-confian__scroll::-webkit-scrollbar { display: none; }
.marcas-confian__scroll.is-dragging { cursor: grabbing; }
.marcas-confian__scroll img { height: 130px; width: auto; max-width: none; margin: 0 auto; user-select: none; -webkit-user-drag: none; }

/* EMPRESARIAL PAGE — CABLE RED GO PLAN CAROUSEL */
.plan-carousel { padding: 48px 20px 56px; background: var(--color-bg-tint); }
.plan-carousel__inner { position: relative; max-width: 1100px; margin: 0 auto; }
/* .drag-carousel__track se comparte con la franja de "Marcas que confían" —
   dejarlo solo con lo genérico de arrastre/scroll acá; el padding/gap/display
   propios del carrusel de planes van en #plan-carousel-track (por id) para
   que no se filtren a la otra sección que usa la misma clase. */
.drag-carousel__track {
  overflow-x: auto; cursor: grab; scrollbar-width: none;
}
.drag-carousel__track::-webkit-scrollbar { display: none; }
.drag-carousel__track.is-dragging { cursor: grabbing; }
#plan-carousel-track {
  display: flex; gap: 20px; padding: 4px 450px 12px 4px;
  scroll-snap-type: x proximity;
}
.plan-carousel__photo {
  position: absolute; right: 0; bottom: 0;
  width: auto; height: 605px; pointer-events: none; z-index: 2;
}
@media (max-width: 900px) {
  .plan-carousel__photo { display: none; }
  #plan-carousel-track { padding-right: 4px; }
}

/* Tarjetas planas provistas por el cliente (RED GO BARATO/PREMIUM, lienzo
   453x767 — el mismo tamaño que .tv-plan-card en Servicios) en vez del texto
   armado en HTML/CSS que tenía antes esta sección. Mismo problema de canal
   alfa que .tv-plan-card: el PNG default tiene el interior transparente (se
   ve blanco solo porque el fondo de la sección lo es) y el PNG hover es
   opaco con un borde difuminado — sin pintar un fondo detrás, el hover deja
   ver un halo claro alrededor en vez de fundirse limpio contra el azul.
   Mismo fix: un ::before con el degradado recortado a la silueta redondeada
   de la tarjeta, con los porcentajes de recorte/radio medidos igual que ahí
   (mismo lienzo). A diferencia de .tv-plan-card, acá el botón "CONTRATA
   AHORA" va DENTRO del cuerpo de la tarjeta (no sobresale por debajo), así
   que el recorte es simétrico en los 4 lados, sin el bottom más grande que
   excluye el botón. */
.plan-card { flex: 0 0 260px; scroll-snap-align: start; }
.plan-card__link-wrap { position: relative; display: block; }
.plan-card__link-wrap::before {
  content: ""; position: absolute; z-index: 0;
  left: 1.99%; right: 1.99%; top: 0.78%; bottom: 0.78%;
  border-radius: 14.5% / 8.6%;
  background: linear-gradient(180deg, #001FEA, #001074);
  opacity: 0;
}
.plan-card__link-wrap:hover::before { opacity: 1; }
.plan-card__img { display: block; position: relative; z-index: 1; width: 100%; height: auto; }
.plan-card__img--hover { position: absolute; inset: 0; opacity: 0; }
.plan-card__link-wrap:hover .plan-card__img--default { opacity: 0; }
.plan-card__link-wrap:hover .plan-card__img--hover { opacity: 1; }

/* EMPRESARIAL PAGE — OTRO OPERADOR + MODAL */
.otro-operador { background: #fff; }
.otro-operador__ticker { background: var(--color-blue); overflow: hidden; padding: 10px 0; }
.otro-operador__ticker-track { display: flex; width: max-content; animation: ticker-scroll 18s linear infinite; }
.otro-operador__ticker-track span {
  color: #fff; font-size: 14px; font-weight: 600; text-transform: uppercase;
  white-space: nowrap; padding-right: 8px;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.otro-operador__body {
  display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
  max-width: 1100px; margin: 0 auto; padding: 48px 20px;
}
.otro-operador__mascota { width: 180px; height: auto; flex-shrink: 0; margin: 0 auto; }
.otro-operador__content { flex: 1; min-width: 280px; }
.otro-operador__content h2 { color: var(--color-blue); font-size: 26px; font-weight: 800; text-transform: uppercase; margin: 0 0 6px; }
.otro-operador__content > p { color: var(--color-blue); font-weight: 600; font-size: 14px; margin: 0 0 20px; }
.otro-operador__form {
  display: flex; gap: 12px; flex-wrap: wrap;
  border: 2px solid var(--color-blue); border-radius: var(--radius-pill);
  padding: 6px 6px 6px 20px;
}
.otro-operador__input { flex: 1; min-width: 160px; border: none; outline: none; font-family: inherit; font-size: 14px; }
.otro-operador__submit {
  background: var(--color-blue); color: var(--color-cyan); font-weight: 700; font-size: 13px;
  text-transform: uppercase; border: none; padding: 12px 26px; border-radius: var(--radius-pill); cursor: pointer;
}
.otro-operador__submit:hover { opacity: 0.9; }

.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(13, 22, 56, 0.6);
  align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.is-open { display: flex; }
.modal-card {
  position: relative; width: 100%; max-width: 640px;
  background: var(--color-blue); border-radius: 20px; padding: 40px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.modal-card__close {
  position: absolute; top: 14px; left: 14px;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 14px; cursor: pointer;
}
.modal-card__close:hover { background: rgba(255, 255, 255, 0.3); }
.modal-card__body { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.modal-card__text { flex: 1; min-width: 220px; }
.modal-card__text h2 { color: #fff; font-size: 24px; font-weight: 800; margin: 0 0 16px; line-height: 1.3; }
.modal-card__text .accent-cyan { color: var(--color-cyan); }
.modal-card__text p { color: #dbe1ff; font-size: 14px; line-height: 1.6; margin: 0; }
.modal-card__mascota { width: 160px; height: auto; margin: 0 auto; }

/* PAGOS PAGE — HERO */
.pagos-hero { position: relative; margin-top: -114px; }
.pagos-hero__banner { width: 100%; height: auto; display: block; }
.pagos-hero__logos {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: 48px; flex-wrap: wrap;
  max-width: 1530px; margin: -77px auto 0;
  background: #fff; border-radius: var(--radius-pill);
  padding: 31px 54px;
  box-shadow: 0 16px 32px rgba(13, 22, 56, 0.18);
}
/* Íconos + contenedor ~70% más grandes que el original (34px/900px/18-32px/28px), a
   pedido explícito del usuario — luego ajustado 10px más chico y 7px más arriba
   sobre la imagen del hero (margin-top -40px -> -47px). */
.pagos-hero__logos img { height: 48px; width: auto; object-fit: contain; }
/* Rango intermedio (tablet/ventana angosta, ~701-1000px): con el tamaño de escritorio
   los 5 logos no entran en una fila (14.08x el alto + 4 gaps + padding necesita
   ~976px) y KASNET se cae a una 2da línea dentro de la píldora. Se achica lo
   suficiente para que quepan en una sola línea hasta 701px (el resto ya lo cubre el
   layout de ancho completo de abajo). */
@media (min-width: 701px) and (max-width: 1000px) {
  .pagos-hero__logos { gap: 20px; padding: 24px 32px; }
  .pagos-hero__logos img { height: 36px; }
}
@media (max-width: 700px) {
  /* La imagen fuente es un banner ancho (4001x1501) pensado para escritorio: a lo
     ancho completo en un teléfono el texto de los letreros queda ilegible (~13px
     medido en un viewport de 375px). En vez de encogerla entera, se recorta con
     object-fit:cover centrada en la mascota — se pierde ver los letreros completos,
     pero la mascota queda grande y legible. */
  .pagos-hero__banner { height: 380px; object-fit: cover; object-position: center; }
  /* En mobile, en vez de escalar el mismo tamaño de escritorio (que obliga a 2 líneas
     dentro de la píldora, ver versión anterior), la píldora pasa a ancho completo de
     pantalla (sin max-width, sin margen lateral) y los íconos se recalculan para que
     los 5 logos entren en una sola fila: suma de anchos naturales (yape 1.69:1, plin
     1:1, bbva 3.29:1, caja huancayo 3.33:1, kasnet 4.77:1 → 14.08x el alto) + 4 gaps +
     padding lateral, resuelto para caber en ~375px con margen de sobra para pantallas
     de 320px. */
  .pagos-hero__logos {
    width: 100%; max-width: none; margin: -28px auto 0;
    gap: 14px; padding: 26px 10px;
  }
  .pagos-hero__logos img { height: 28px; }
}

/* PAGOS PAGE — TITULO + OFICINAS */
.pagos-title { padding: 56px 20px 0; }
/* El título/subtítulo comparten `.section-title`/`.section-subtitle` (24px/13px
   fijos) con el resto del sitio, pero en el video de referencia
   (`video_pagos.mp4`, canvas 1490x756) este título en particular es mucho más
   grande — medido: cap-height ~46px acá vs ~38px en "ESCOGE TU MÉTODO DE PAGO"
   (que ya usa clamp(24px,3.8vw,42px), calibración confirmada: mismo cap-height de
   38px en el video y en el sitio a 1490px). Con esa misma proporción, el tamaño
   correcto acá es ~51px a 1490px de ancho (3.42vw) — se sobreescribe solo dentro
   de `.pagos-title`, sin tocar `.section-title` global. */
.pagos-title .section-title { font-size: clamp(28px, 3.5vw, 52px); color: var(--color-blue); margin-bottom: 10px; }
.pagos-title .section-subtitle { font-size: clamp(14px, 1.8vw, 20px); color: var(--color-blue); margin-bottom: 0; }
.pagos-oficinas { padding: 24px 90px 56px; }
.pagos-oficinas__toggle {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
  max-width: 700px; margin: 0 auto 28px;
}
.pagos-toggle {
  flex: 1; min-width: 200px; max-width: 300px; text-align: center;
  font-weight: 800; font-size: 16px; text-transform: uppercase;
  padding: 16px; border-radius: var(--radius-pill); cursor: default;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
/* Ambas píldoras arrancan iguales (blanco/borde azul). */
.pagos-toggle { background: #fff; color: var(--color-blue); border: 2px solid var(--color-blue); }

.pagos-oficinas__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px;
}
@media (max-width: 780px) { .pagos-oficinas__grid { grid-template-columns: 1fr; } }

/* Ambas tarjetas arrancan blancas. */
.pagos-office-card {
  border-radius: 20px; padding: 24px;
  background: #fff; border: 2px solid var(--color-blue);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.pagos-office-card--huancayo { display: flex; gap: 16px; flex-wrap: wrap; }

/* El botón-píldora y la tarjeta de un mismo lado son UN solo grupo de hover:
   pasar el mouse por cualquiera de los dos (botón O tarjeta) activa el color
   en ambos a la vez. :has() con lista agrupa los dos triggers; se repite el
   bloque completo para huancayo y para huancavelica, cada uno sin afectar al
   otro lado. */
.pagos-oficinas:has(.pagos-toggle--huancayo:hover, .pagos-office-card--huancayo:hover) .pagos-toggle--huancayo,
.pagos-oficinas:has(.pagos-toggle--huancayo:hover, .pagos-office-card--huancayo:hover) .pagos-office-card--huancayo {
  background: var(--color-blue); border-color: var(--color-glow-green);
}
.pagos-oficinas:has(.pagos-toggle--huancayo:hover, .pagos-office-card--huancayo:hover) .pagos-toggle--huancayo { color: #fff; }

.pagos-oficinas:has(.pagos-toggle--huancavelica:hover, .pagos-office-card--huancavelica:hover) .pagos-toggle--huancavelica,
.pagos-oficinas:has(.pagos-toggle--huancavelica:hover, .pagos-office-card--huancavelica:hover) .pagos-office-card--huancavelica {
  background: var(--color-blue); border-color: var(--color-glow-green);
}
.pagos-oficinas:has(.pagos-toggle--huancavelica:hover, .pagos-office-card--huancavelica:hover) .pagos-toggle--huancavelica { color: #fff; }

.pagos-office-sub, .pagos-office-single { flex: 1; min-width: 140px; text-align: center; }
/* El nombre en píldora se monta sobre el borde inferior de la foto (margen
   negativo), igual que en el video — no queda separado debajo de la imagen. */
.pagos-office-sub img, .pagos-office-single img { width: 100%; border-radius: 14px; display: block; }
.pagos-office-sub__label {
  position: relative; z-index: 1; margin: -20px 0 10px;
  display: inline-block; background: #fff; color: var(--color-blue); font-weight: 700; font-size: 13px;
  padding: 6px 16px; border-radius: var(--radius-pill); box-shadow: var(--shadow-card);
}
.pagos-office-sub__address {
  font-size: 13px; line-height: 1.5; margin: 0 0 14px; color: var(--color-blue);
}
.pagos-oficinas:has(.pagos-toggle--huancayo:hover, .pagos-office-card--huancayo:hover) .pagos-office-card--huancayo .pagos-office-sub__address,
.pagos-oficinas:has(.pagos-toggle--huancavelica:hover, .pagos-office-card--huancavelica:hover) .pagos-office-card--huancavelica .pagos-office-sub__address { color: #fff; }

/* Blanco (default) => botón azul/texto verde; azul (hover) => botón verde/texto
   azul oscuro. Mismo par de colores invertido, igual en las dos tarjetas. */
.pagos-office-sub__link, .pagos-office-single__link {
  display: inline-block; font-weight: 700; font-size: 13px;
  padding: 10px 22px; border-radius: var(--radius-pill);
  background: var(--color-blue); color: var(--color-green);
}
.pagos-oficinas:has(.pagos-toggle--huancayo:hover, .pagos-office-card--huancayo:hover) .pagos-office-card--huancayo .pagos-office-sub__link,
.pagos-oficinas:has(.pagos-toggle--huancavelica:hover, .pagos-office-card--huancavelica:hover) .pagos-office-card--huancavelica .pagos-office-single__link {
  background: var(--color-green); color: var(--color-blue-dark);
}

/* PAGOS PAGE — ESCOGE TU METODO DE PAGO */
.pagos-methods { padding-bottom: 56px; }
/* Tamaños medidos sobre el frame del video (1490x756): banda de 143px de alto
   (~19% del canvas), título con cap-height ~38px (~3.6vw de font-size),
   subtítulo ~21px de font-size (~1.4vw) — usa clamp() para mantener esa
   proporción en cualquier ancho, mismo criterio que `.tv-plans .section-title`. */
.pagos-methods__banner { background: var(--color-blue); color: #fff; text-align: center; padding: 40px 20px 28px; }
.pagos-methods__banner h2 { font-size: clamp(24px, 3.8vw, 42px); font-weight: 800; text-transform: uppercase; margin: 0 0 12px; line-height: 1.1; }
.pagos-methods__banner p { font-size: clamp(13px, 1.6vw, 18px); margin: 0; opacity: 0.9; }
/* 1200px (antes 900px): con los paneles más anchos/altos y el alineado bajo cada tab
   (payment-methods.js), un contenedor de 900px dejaba muy poco margen para centrar
   el panel bajo los tabs de los extremos (yape/bipay) sin que se saliera del
   contenedor — medido en el navegador, con 900px el panel de yape (664px) quedaba a
   252px de distancia del centro de su tab en vez de alineado. */
.pagos-methods__body { max-width: 1400px; margin: 0 auto; padding: 32px 20px 0; }
.pagos-methods__tabs { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.payment-tab {
  flex: 1; min-width: 140px;
  background: #fff; border: 2px solid var(--color-blue); border-radius: var(--radius-pill);
  padding: clamp(10px, 1.4vw, 20px) 24px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
/* Medido sobre el frame del video (1490x756): el logo ocupa ~60px de alto
   (~4vw) dentro de la píldora. El usuario pidió ~30% más grande que esa medida
   (clamp original 28/4vw/60 → 36/5.2vw/78). */
.payment-tab img { height: clamp(36px, 5.2vw, 78px); width: auto; object-fit: contain; }
.payment-tab:hover { border-color: var(--color-glow-green); }
.payment-tab.is-active { background: var(--color-blue); border-color: var(--color-glow-green); box-shadow: 0 0 0 3px rgba(57, 231, 95, 0.25); }
/* logo-plin.png is the only tab logo with an opaque (non-transparent) square
   background — brightness(0) invert(1) turns a fully-opaque image into a
   solid white block instead of a white silhouette, so it's excluded here and
   keeps its own colors on the blue active background. */
.payment-tab.is-active img:not([alt="Plin"]) { filter: brightness(0) invert(1); }

.payment-panel { display: none; }
/* width:fit-content para que el wrapper mida lo mismo que la tarjeta visible de
   adentro (antes solo el panel de yape lo tenía; plin/caja-huancayo/kasnet/bipay
   quedaban con el wrapper a lo ancho completo del contenedor y la tarjeta angosta
   flotando pegada a la izquierda) — necesario para que payment-methods.js pueda
   centrar el panel bajo su tab usando el ancho real del contenido. */
.payment-panel.is-active { display: block; width: fit-content; max-width: 100%; }

.payment-panel__step-label {
  display: inline-block; background: #fff; color: var(--color-blue); font-weight: 800; font-size: 13px;
  padding: 6px 18px; border-radius: var(--radius-pill);
}

/* El panel se ajusta al contenido (steps + placeholder), no estira a lo ancho
   del contenedor — en el video ocupa ~40% del canvas, pegado a su contenido,
   no una franja azul vacía.
   Selector calificado con `.payment-panel.is-active` (misma especificidad que
   la regla que pone `display:block` en `.payment-panel.is-active`, pero
   definida después) — si se usa solo `[data-payment-panel="yape"]` pierde esa
   pelea de especificidad y el panel queda en `display:block`, apilando el
   placeholder debajo de los pasos en vez de al lado. */
.payment-panel.is-active[data-payment-panel="yape"],
.payment-panel.is-active[data-payment-panel="bipay"] {
  background: var(--color-blue); border-radius: 20px; padding: 40px; border: 2px solid var(--color-glow-green);
  display: flex; gap: 36px; align-items: flex-start;
  width: fit-content; max-width: 100%;
}
/* El panel de bipay ya trae su propio recuadro azul/borde verde (regla de
   arriba) envolviendo texto + video; sin esto el .payment-panel__text-card de
   adentro (que también trae fondo azul/borde propio, pensado para cuando va
   solo en kasnet/caja-huancayo) quedaba duplicado y el video se veía como una
   caja aparte, suelta, en vez de compartir el mismo cuadro. */
[data-payment-panel="bipay"] .payment-panel__text-card {
  background: none; border: none; padding: 0; max-width: 400px; text-align: left;
}
.payment-panel__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; flex: 0 0 400px; }
.payment-panel__steps p { margin: 6px 0 0; color: #fff; font-size: 17px; }
.payment-panel__media {
  background: #fff; border-radius: 16px; flex: 0 0 360px; width: 360px; height: 480px; overflow: hidden;
}
.payment-panel__media img,
.payment-panel__media video {
  width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
}
@media (max-width: 600px) {
  [data-payment-panel="yape"], [data-payment-panel="bipay"] { flex-wrap: wrap; width: 100%; }
  .payment-panel__steps { flex-basis: 100%; }
  /* flex-basis:100% (no solo width:100%) — bug preexistente: flex:0 0 360px
     de la regla base fija el flex-basis en 360px, y ese gana sobre width:100%
     en el eje principal de un flex item, dejando el video/imagen desbordando
     el panel en mobile aunque width diga 100%. */
  .payment-panel__media { width: 100%; flex-basis: 100%; height: 320px; }
}

/* width en vw, no % — el ancestro .payment-panel.is-active es width:fit-content,
   y un % contra un ancestro fit-content no se resuelve de forma predecible
   (el navegador vuelve a su tamaño intrínseco en vez de encoger). vw sí
   funciona porque es relativo al viewport, no al ancestro. */
[data-payment-panel="plin"] .payment-panel__qr-card {
  background: var(--color-blue); border-radius: 20px; padding: clamp(18px, 5vw, 40px); border: 2px solid var(--color-glow-green);
  text-align: center; width: min(770px, 90vw); box-sizing: border-box;
}
.payment-panel__qr-logo { height: 38px; margin: 0 auto 18px; }
[data-payment-panel="plin"] h3 { color: #fff; font-size: 18px; margin: 0 0 22px; line-height: 1.4; }
/* La imagen del cliente (qr-plin.png) es el póster completo (mascotas +
   título + QR + pasos, 1081x1350, ratio 0.8:1), no solo el QR recortado —
   la caja respeta esa proporción en vez de forzar un cuadrado. width/height
   explícitos (no aspect-ratio): la regla mobile de .payment-panel__media
   (línea ~1238, pensada para el video de Yape/BiPay) fija height:320px y
   gana porque aspect-ratio no compite con un height ya declarado — acá se
   escala width y height por el mismo factor de vw para mantener el ratio.
   object-fit:contain (no cover, ver más abajo) para que no se recorte nada. */
.payment-panel__media--qr { width: min(610px, 78vw); height: min(763px, 97.5vw); margin: 0 auto; border-radius: 10px; }
.payment-panel__media--qr img { object-fit: contain; }
.payment-panel__qr-caption { color: #fff; font-size: 14px; margin: 18px 0 0; }

.payment-panel__text-card {
  background: var(--color-blue); color: #fff; border-radius: 20px; padding: 40px; max-width: 620px;
  border: 2px solid var(--color-glow-green); text-align: center;
}
.payment-panel__text-card p { font-size: 17px; line-height: 1.7; margin: 12px 0 0; }
.payment-panel__whatsapp {
  display: inline-block; margin-top: 20px; background: var(--color-green); color: #fff; font-weight: 700;
  font-size: 14px; padding: 12px 32px; border-radius: var(--radius-pill);
}

/* PAGOS PAGE — AYUDA CTA */
.pagos-help { text-align: center; padding: 56px 20px; }
.pagos-help h2 { color: var(--color-blue); font-size: 22px; margin: 0 0 20px; }
.pagos-help__link {
  display: inline-block; background: var(--color-blue); color: var(--color-glow-green); font-weight: 800; font-size: 15px;
  border: 2px solid var(--color-glow-green); padding: 14px 40px; border-radius: var(--radius-pill);
  transition: background 0.2s ease, color 0.2s ease;
}
.pagos-help__link:hover { background: var(--color-glow-green); color: var(--color-blue-dark); }