/* ============================================================
   Global Gas — Diseño 2026
   Moderno, profesional y ligero. Mobile-first.
   ============================================================ */

:root {
  --blue-900: #082349;
  --blue-800: #0b3573;
  --blue-700: #0d47a1;
  --blue-600: #1565d8;
  --blue-050: #eef4fd;
  --red-600: #e11d2e;
  --red-700: #c0121f;
  --green-wa: #22c05c;
  --green-wa-d: #189a49;
  --ink: #16223a;
  --ink-soft: #5a6b85;
  --line: #e3e9f2;
  --bg: #ffffff;
  --bg-soft: #f5f8fc;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(8, 35, 73, .05), 0 4px 14px rgba(8, 35, 73, .06);
  --shadow-md: 0 6px 28px rgba(8, 35, 73, .10);
  --shadow-lg: 0 18px 48px rgba(8, 35, 73, .16);
  --font-head: "Montserrat", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1400px;
  --pad-x: clamp(1.1rem, 4vw, 3rem);
  --pad-edge: max(var(--pad-x), calc((100vw - var(--wrap)) / 2));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.15;
  color: var(--blue-900);
  margin: 0 0 .55em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.3rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 700; }

p { margin: 0 0 1em; }
a { color: var(--blue-600); text-decoration: none; }

/* ---------- Utilidades ---------- */

.breadcrumbs {
  max-width: none;
  margin: 0;
  padding: .5rem var(--pad-edge);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .32rem;
  color: #7f8ba0;
  font-size: .7rem;
  line-height: 1.35;
  letter-spacing: .01em;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
}

.breadcrumbs a {
  color: #7f8ba0;
  transition: color .15s ease;
}

.breadcrumbs a:hover { color: var(--blue-700); }
.breadcrumbs i { color: #bcc4d1; font-size: .48rem; }
.breadcrumbs [aria-current="page"] { color: #59677d; font-weight: 500; }

.section {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4.25rem) var(--pad-x);
}

.section.gray { max-width: none; background: var(--bg-soft); }
.section.gray > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-600);
  margin-bottom: .8rem;
}

.eyebrow::before {
  content: "";
  width: 26px; height: 3px;
  border-radius: 3px;
  background: var(--red-600);
}

.eyebrow.center { justify-content: center; }

.section-lead {
  color: var(--ink-soft);
  font-size: 1.06rem;
  max-width: 62ch;
}

.center { text-align: center; }
.red-mark { display: none; } /* reemplazado por .eyebrow::before */

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .78rem 1.5rem;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .92rem;
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: var(--shadow-sm);
}

.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: #fff; }
.btn:active { transform: translateY(0); }

.btn-red { background: linear-gradient(135deg, var(--red-600), var(--red-700)); }
.btn-blue { background: linear-gradient(135deg, var(--blue-600), var(--blue-800)); }
.btn-whatsapp { background: linear-gradient(135deg, var(--green-wa), var(--green-wa-d)); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem var(--pad-x);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.site-header.scrolled {
  border-color: var(--line);
  box-shadow: 0 4px 20px rgba(8, 35, 73, .07);
}

.brand img { width: clamp(150px, 18vw, 196px); height: auto; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--blue-800);
  font-size: 1.05rem;
  cursor: pointer;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(.2rem, 1.2vw, .55rem);
}

.main-nav > a,
.nav-group > button {
  font-family: var(--font-head);
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
  padding: .55rem .8rem;
  border-radius: 999px;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}

.main-nav > a:hover,
.nav-group > button:hover { background: var(--blue-050); color: var(--blue-700); }

.main-nav > a.active,
.nav-group > button.active { background: var(--blue-050); color: var(--blue-700); }

.nav-group { position: relative; }
.nav-group > button i { font-size: .68rem; transition: transform .18s ease; }
.nav-group.open > button i { transform: rotate(180deg); }

.submenu {
  position: absolute;
  top: calc(100% + .55rem);
  left: 50%;
  translate: -50% 0;
  min-width: 190px;
  display: grid;
  padding: .45rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.nav-group.open .submenu,
.nav-group:hover .submenu { opacity: 1; visibility: visible; transform: translateY(0); }

.submenu a {
  padding: .55rem .8rem;
  border-radius: 9px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink);
}

.submenu a:hover { background: var(--blue-050); color: var(--blue-700); }

.coverage-submenu {
  left: auto;
  right: 0;
  translate: 0 0;
  width: min(660px, calc(100vw - 2rem));
  max-height: min(70vh, 540px);
  overflow-y: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .12rem;
  padding: .65rem;
}

/* ---------- Hero home ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: #fff url("../estrella.webp") no-repeat left -140px center;
  background-size: auto 115%;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: stretch;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.home-hero .hero-copy {
  align-self: center;
  padding:
    clamp(2.8rem, 6vw, 5.5rem)
    0
    clamp(4.2rem, 8vw, 7rem)
    var(--pad-edge);
}

.location-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem 1rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 700;
  color: var(--blue-800);
  margin-bottom: 1.2rem;
}

.location-pill i {
  color: var(--red-600);
}

.hero-kicker {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  color: var(--ink-soft);
  margin: 0;
}

.home-hero h1 {
  /*font-size: clamp(2.8rem, 7.5vw, 4.6rem);*/
  letter-spacing: -.02em;
  margin: 0 0 .35em;
  background: linear-gradient(
    120deg,
    var(--blue-800),
    var(--blue-600)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lead {
  font-size: clamp(1.08rem, 2.2vw, 1.3rem);
  font-weight: 600;
  color: var(--blue-900);
  max-width: 48ch;
}

.hero-text {
  color: var(--ink-soft);
  max-width: 52ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 1.5rem 0 1.1rem;
}

.leak-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .9rem;
  color: var(--red-600);
}

.leak-link:hover {
  color: var(--red-700);
}

.hero-note {
  font-size: .86rem;
  color: var(--ink-soft);
  margin-top: 1rem;
}

.hero-art {
  position: relative;
}

.hero-art img {
  position: relative;
  height: 100%;
  display: block;
}

.coverage-hero .hero-copy {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(3.2rem, 7vw, 6rem);
}

.coverage-hero .hero-art {
  min-height: 420px;
}

.coverage-hero .hero-art img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}


/* ---------- Hero interior ---------- */

.page-hero {
  background:
    radial-gradient(
      900px 400px at 85% -20%,
      rgba(21, 101, 216, .15),
      transparent 60%
    ),
    linear-gradient(180deg, #f7faff, #eef4fd);
  padding:
    clamp(3rem, 7vw, 5.5rem)
    var(--pad-x);
  border-bottom: 1px solid var(--line);
}

.page-hero > * {
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
}

.page-hero h1 {
  margin-bottom: .3em;
}

.page-hero p:last-child {
  color: var(--ink-soft);
  font-size: 1.08rem;
  max-width: 68ch;
  margin-bottom: 0;
  margin-right: auto;
}


/* ---------- Ajustes responsive para tablet y mobile ---------- */

@media (max-width: 900px) {
  .home-hero {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .home-hero .hero-copy {
    width: 100%;
    padding:
      clamp(3.2rem, 10vw, 4.8rem)
      clamp(1.5rem, 6vw, 2.5rem)
      clamp(3rem, 9vw, 4.5rem);
  }

  .home-hero h1 {
    font-size: clamp(2.6rem, 9vw, 4rem);
    line-height: 1.05;
    margin-bottom: .45em;
  }

  .hero-kicker {
    line-height: 1.4;
  }

  .hero-lead,
  .hero-text {
    max-width: 100%;
    line-height: 1.65;
  }

  .hero-actions {
    gap: .8rem;
    margin: 1.8rem 0 1.2rem;
  }

  .hero-art img {
    width: 100%;
    height: auto;
    min-height: 320px;
    object-fit: cover;
  }

  .page-hero {
    padding:
      clamp(3rem, 10vw, 4.5rem)
      clamp(1.5rem, 6vw, 2.5rem);
  }
}


/* ---------- Ajustes específicos para mobile ---------- */

@media (max-width: 600px) {
  .hero {
    background: #fff url("../estrella.webp") no-repeat left -220px center;
    background-size: auto 100%;
  }

  .home-hero .hero-copy {
    padding:
      3.5rem
      clamp(1.35rem, 6vw, 1.75rem)
      3rem;
  }

  .location-pill {
    max-width: 100%;
    margin-bottom: 1.4rem;
    line-height: 1.35;
  }

  .hero-kicker {
    font-size: clamp(1.05rem, 5vw, 1.3rem);
  }

  .home-hero h1 {
    font-size: clamp(2.35rem, 12vw, 3.25rem);
    line-height: 1.03;
    letter-spacing: -.025em;
  }

  .hero-lead {
    font-size: 1.08rem;
    line-height: 1.6;
  }

  .hero-text {
    line-height: 1.7;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    margin-top: 1.7rem;
  }

  .hero-actions .btn,
  .hero-actions a {
    width: 100%;
    justify-content: center;
  }

  .hero-note {
    margin-top: 1.2rem;
    line-height: 1.55;
  }

  .hero-art img {
    min-height: 260px;
    max-width: auto !important;
  }

  .page-hero {
    padding:
      3.5rem
      clamp(1.35rem, 6vw, 1.75rem);
  }

  .page-hero p:last-child {
    line-height: 1.65;
  }
}

/* ---------- Banda de servicios ---------- */

.service-band {
  max-width: var(--wrap);
  margin: clamp(-2.6rem, -4vw, -3.2rem) auto 0;
  position: relative;
  z-index: 5;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
}

.service-band article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 1.6rem 1.5rem;
  display: grid;
  justify-items: start;
  transition: transform .2s ease, box-shadow .2s ease;
}

.service-band article:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.service-band img { height: 74px; width: auto; margin-bottom: 1rem; }
.service-band h2 { font-size: 1.1rem; margin-bottom: .3em; }
.service-band p { color: var(--ink-soft); font-size: .93rem; margin: 0; }

.sb-icon {
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--blue-600), var(--blue-800));
  color: #fff;
  font-size: 1.65rem;
  margin-bottom: 1rem;
  box-shadow: 0 10px 22px rgba(21, 101, 216, .28);
}

.sb-icon .service-icon {
  width: 36px;
  height: 36px;
  margin: 0;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* ---------- Tarjetas genéricas ---------- */

.feature-grid,
.location-grid,
.legal-grid,
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 1.2rem;
}

.about-values {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1180px;
  margin: 0 auto;
}

.about-values .feature-card {
  align-items: center;
  text-align: center;
}

.about-values .feature-card > i { margin-left: auto; margin-right: auto; }

.feature-card,
.location-card,
.legal-card,
.blog-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.feature-card:hover,
.location-card:hover,
.legal-card:hover,
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: #cdd9ea;
}

.feature-card > i,
.location-card > i,
.legal-card > i {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--blue-050);
  color: var(--blue-600);
  font-size: 1.3rem;
  margin-bottom: .7rem;
}

.feature-card img { height: 70px; width: auto; margin-bottom: .8rem; }
.feature-card p, .location-card p, .legal-card p { color: var(--ink-soft); font-size: .94rem; margin: 0; }
.card-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; padding-top: 1.1rem; }
.card-actions .btn { padding: .6rem 1.15rem; font-size: .84rem; }

/* ---------- Testimonios ---------- */

.reviews-section { padding: clamp(3rem, 6vw, 5rem) 0; overflow: hidden; background: var(--bg-soft); }
.reviews-heading { max-width: 760px; margin: 0 auto 2.5rem; padding: 0 var(--pad-x); text-align: center; }
.reviews-heading h2 { margin-bottom: .45rem; }
.reviews-heading > p:last-child { color: var(--ink-soft); margin: 0; }
.reviews-marquee { display: grid; gap: 1rem; }
.reviews-row { overflow: hidden; padding: .35rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.reviews-track { display: flex; gap: 1rem; width: max-content; animation: reviews-left 38s linear infinite; }
.reviews-row--reverse .reviews-track { animation-name: reviews-right; }
.reviews-row:hover .reviews-track, .reviews-row:focus-within .reviews-track { animation-play-state: paused; }
.review-card { display: flex; flex-direction: column; gap: 1rem; width: min(390px, calc(100vw - 2rem)); min-height: 238px; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.review-card:nth-child(3n+2) { background: #f0f5ff; }
.review-card:nth-child(3n+3) { background: #fff8f8; }
.review-card__top, .review-card footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.review-card__logo { width: 34px; height: 34px; flex: 0 0 34px; object-fit: contain; }
.review-card__stars { color: #e7a50e; letter-spacing: .12em; white-space: nowrap; }
.review-card p { flex: 1; margin: 0; color: var(--blue-900); font-size: .97rem; line-height: 1.55; }
.review-card footer { justify-content: flex-start; }
.review-card__avatar { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--blue-800); color: #fff; font-size: .75rem; font-weight: 800; }
.review-card__byline { display: grid; line-height: 1.3; }
.review-card__byline strong { color: var(--blue-900); font-size: .85rem; }
.review-card__byline small { color: var(--ink-soft); font-size: .72rem; }
.review-card > a { align-self: flex-start; color: var(--blue-700); font-size: .76rem; font-weight: 700; }
.review-card > a:hover { text-decoration: underline; }
@keyframes reviews-left { to { transform: translateX(calc(-50% - .5rem)); } }
@keyframes reviews-right { from { transform: translateX(calc(-50% - .5rem)); } } 
@media (prefers-reduced-motion: reduce) { .reviews-track { animation: none; } .reviews-row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .reviews-track .review-card[aria-hidden="true"] { display: none; } }

/* ---------- Pasos ---------- */

.section-heading { max-width: 640px; margin-bottom: 1.5rem; }

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.2rem;
}

.step-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.9rem 1.5rem 1.6rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.step-number {
  position: absolute;
  top: .4rem; right: .9rem;
  font-family: var(--font-head);
  font-size: 3.6rem;
  font-weight: 800;
  color: var(--blue-050);
  line-height: 1;
}

.step-card > i {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--blue-600), var(--blue-800));
  color: #fff;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  position: relative;
}

.step-card h3 { margin-bottom: .35em; }
.step-card p { color: var(--ink-soft); font-size: .93rem; margin: 0; }

/* Pasos estilo original: encabezado a la izquierda, tarjetas 2x2 */

.steps-layout {
  display: grid;
  grid-template-columns: minmax(240px, .85fr) 2.15fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.steps-layout .section-heading { margin-bottom: 0; position: sticky; top: 110px; }

.steps-layout .steps-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.4rem, 3vw, 2.2rem);
}

.steps-layout .step-card {
  border: 0;
  border-radius: 26px;
  box-shadow: var(--shadow-md);
  padding: 2.4rem 2rem 2.1rem;
}

.steps-layout .step-number {
  top: .6rem; right: 1.2rem;
  font-size: clamp(5rem, 9vw, 8rem);
  font-weight: 700;
}

.steps-layout .step-card > i {
  width: 78px; height: 78px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--blue-600);
  color: var(--blue-700);
  font-size: 1.7rem;
  margin-bottom: 1.3rem;
}

.steps-layout .step-card h3 { font-size: 1.3rem; }
.steps-layout .step-card p { font-size: .96rem; }

.step-card p a {
  color: var(--red-600);
  font-weight: 700;
}

.step-card p a:hover { color: var(--red-700); text-decoration: underline; }

/* ---------- App ---------- */

.app-section { text-align: center; }
.app-section .eyebrow { justify-content: center; }

.store-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.6rem 0 2.6rem;
}

.store-links a {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem 1.3rem;
  border-radius: 14px;
  background: var(--blue-900);
  color: #fff;
  font-family: var(--font-head);
  font-size: .84rem;
  font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: var(--shadow-sm);
}

.store-links a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.store-links img { height: 30px; width: auto; }
.store-links i { font-size: 1.5rem; color: #ffd23f; }

.app-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  text-align: left;
}

.app-features article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-sm);
}

.app-features img { height: 44px; width: auto; margin-bottom: .9rem; }
.app-features h3 { font-size: 1.02rem; }
.app-features p { color: var(--ink-soft); font-size: .92rem; margin: 0; }

.af-icon {
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--blue-050);
  color: var(--blue-600);
  font-size: 1.35rem;
  margin-bottom: .9rem;
}

/* ---------- Nosotros ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }

.about-media img {
  border-radius: var(--radius);
}

.accent-copy {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--blue-800);
  border-left: 4px solid var(--red-600);
  padding-left: 1rem;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.6rem 0;
}

.stats article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.stats strong {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--blue-700);
}

.stats span { font-size: .8rem; color: var(--ink-soft); font-weight: 600; }

.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }

.check-list li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--ink-soft);
  font-size: .96rem;
}

.check-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0; top: .1rem;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue-600);
  font-size: .7rem;
  display: grid;
  place-items: center;
}

/* ---------- Fugas ---------- */

.leak { text-align: center; }
.leak .eyebrow { justify-content: center; }
.leak .section-lead { margin-left: auto; margin-right: auto; }
.leak .location-grid { text-align: left; margin-top: 2rem; }

.leak-card {
  background: linear-gradient(160deg, #fff, #fff7f7);
  border: 1px solid #f3d4d8;
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: .45rem;
  justify-items: start;
  max-width: 430px;
  margin: 1.8rem auto 0;
  text-align: left;
}

.leak .location-grid .leak-card { margin: 0; max-width: none; }

.leak-card p {
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red-600);
  margin: 0;
}

.leak-card strong { font-family: var(--font-head); font-size: 1.08rem; color: var(--blue-900); }
.leak-card span { font-size: .88rem; color: var(--ink-soft); }
.leak-card .btn { margin-top: .5rem; }

/* ---------- Banner de fuga (ancho completo) ---------- */

.leak-banner {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(700px 380px at 92% 10%, rgba(255, 255, 255, .35), transparent 60%),
    linear-gradient(115deg, #ffd23f 0%, #ffb400 60%, #ff9d00 100%);
}

.leak-banner::before {
  content: "\f071";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: -1.5rem;
  bottom: -3.5rem;
  font-size: 22rem;
  line-height: 1;
  color: rgba(255, 255, 255, .22);
  pointer-events: none;
}

.leak-banner-inner {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(2.8rem, 6vw, 4.5rem) var(--pad-x);
}

.leak-banner-inner.leak-banner-stack { grid-template-columns: 1fr; align-items: start; }

.leak-banner .location-grid { position: relative; margin-top: 1.6rem; }

.leak-banner .leak-card {
  background: #fff;
  border: 0;
  margin: 0;
  max-width: none;
  box-shadow: 0 14px 30px rgba(90, 60, 0, .18);
}

.leak-card .leak-phone {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--blue-900);
}

.leak-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem 1.1rem;
  border-radius: 999px;
  background: var(--blue-900);
  color: #ffd23f;
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.leak-banner h2 {
  color: var(--blue-900);
  font-size: clamp(1.8rem, 4.2vw, 2.8rem);
  margin-bottom: .4em;
}

.leak-banner-copy > p {
  color: #4a3a05;
  font-size: 1.05rem;
  font-weight: 500;
  max-width: 56ch;
}

.leak-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.4rem;
}

.btn-dark {
  background: var(--blue-900);
  color: #fff;
  box-shadow: 0 10px 24px rgba(8, 35, 73, .3);
}

.btn-outline-dark {
  background: rgba(255, 255, 255, .4);
  color: var(--blue-900);
  border: 2px solid rgba(8, 35, 73, .4);
  box-shadow: none;
}

.btn-outline-dark:hover { background: #fff; color: var(--blue-900); }

.leak-steps {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}

.leak-steps li {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--blue-900);
  font-weight: 600;
  font-size: .95rem;
}

.leak-steps li i {
  width: 30px; height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue-900);
  color: #ffd23f;
  font-size: .8rem;
}

.leak-banner-art { display: grid; justify-items: center; }

.leak-banner-art img {
  max-height: 360px;
  width: auto;
  border-radius: 24px 24px 24px 110px;
  border: 5px solid rgba(255, 255, 255, .55);
  box-shadow: 0 26px 44px rgba(90, 60, 0, .35);
}

/* ---------- Cobertura ---------- */

.coverage-intro {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(1.8rem, 4vw, 3.2rem);
  align-items: center;
}

.coverage-intro .stats { grid-template-columns: 1fr; margin: 0; }
.coverage-intro .stats article { text-align: left; padding: 1.1rem 1.4rem; display: flex; align-items: center; gap: 1rem; }
.coverage-intro .stats strong { font-size: 1.7rem; }
.coverage-intro .stats i {
  width: 46px; height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--blue-050);
  color: var(--blue-600);
  font-size: 1.1rem;
}

.zone-card { position: relative; }

.zone-card > i {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--blue-600), var(--blue-800));
  color: #fff;
  font-size: 1.25rem;
  margin-bottom: .8rem;
}

.zone-cities {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .6rem 0 0;
  padding: 0;
  list-style: none;
}

.zone-cities li {
  font-size: .78rem;
  font-weight: 600;
  color: var(--blue-800);
  background: var(--blue-050);
  border-radius: 999px;
  padding: .28rem .75rem;
}

.zone-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: start;
}

.zone-panel {
  position: sticky;
  top: 100px;
  background: linear-gradient(160deg, var(--blue-800), var(--blue-900));
  color: #dbe6f5;
  border-radius: var(--radius);
  padding: 2rem 1.7rem;
  box-shadow: var(--shadow-md);
  display: grid;
  gap: .7rem;
}

.zone-panel h3 { color: #fff; font-size: 1.2rem; margin: 0 0 .2em; }
.zone-panel p { margin: 0; font-size: .92rem; }
.zone-panel .btn { justify-content: flex-start; }
.zone-panel small { color: #9db1d1; font-size: .8rem; }

.zone-note {
  position: relative;
  background:
    radial-gradient(360px 180px at 95% 0%, rgba(255, 255, 255, .35), transparent 60%),
    linear-gradient(115deg, #ffd23f 0%, #ffb400 100%);
  border-radius: var(--radius);
  padding: 1.5rem 1.7rem 1.5rem 4.6rem;
  color: var(--blue-900);
  font-size: .96rem;
  margin-top: 1.8rem;
  box-shadow: 0 14px 30px rgba(90, 60, 0, .16);
}

.zone-note::before {
  content: "\f071";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 1.4rem;
  top: 50%;
  translate: 0 -50%;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--blue-900);
  color: #ffd23f;
  font-size: 1.15rem;
}

.zone-note a { color: var(--blue-900); font-weight: 700; text-decoration: underline; }

.coverage-value {
  border-top: 1px solid var(--line);
}

.coverage-value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.coverage-value-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.35rem;
  background: #fff;
}

.coverage-value-card i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: .9rem;
  border-radius: 12px;
  background: var(--blue-050);
  color: var(--blue-600);
}

.coverage-value-card h3 { font-size: 1rem; }
.coverage-value-card p { color: var(--ink-soft); font-size: .9rem; margin: 0; }

.coverage-checklist {
  margin-top: 1.5rem;
  padding: 1.4rem;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}

.coverage-checklist h3 { font-size: 1rem; margin-bottom: .75rem; }
.coverage-checklist ul { margin: 0; padding-left: 1.2rem; color: var(--ink-soft); }
.coverage-checklist li + li { margin-top: .35rem; }

/* ---------- Contacto ---------- */

.contact-info dl { margin: 0; display: grid; gap: 1.1rem; }
.contact-info dt {
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red-600);
}
.contact-info dd { margin: .15rem 0 0; color: var(--ink-soft); }
.contact-info dd a { color: var(--blue-700); font-weight: 600; }

form[data-contact-form] { display: grid; gap: .9rem; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }

form[data-contact-form] input,
form[data-contact-form] select,
form[data-contact-form] textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}

form[data-contact-form] :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 4px rgba(21, 101, 216, .12);
}

form[data-contact-form] textarea { min-height: 130px; resize: vertical; }
form[data-contact-form] .btn { justify-self: start; padding-inline: 2.4rem; }
.form-note { font-size: .9rem; color: var(--green-wa-d); font-weight: 600; min-height: 1.2em; margin: 0; }

/* ---------- FAQ ---------- */

.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: .8rem; }

.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color .2s ease;
}

.faq-item.active { border-color: var(--blue-600); }

.faq-item > button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: none;
  border: 0;
  font-family: var(--font-head);
  font-size: .98rem;
  font-weight: 700;
  color: var(--blue-900);
  text-align: left;
  cursor: pointer;
}

.faq-item > button::after {
  content: "\2b";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--blue-600);
  flex: 0 0 auto;
  transition: transform .2s ease;
}

.faq-item.active > button::after { content: "\f068"; }

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}

.faq-answer > p { overflow: hidden; margin: 0; padding: 0 1.3rem; color: var(--ink-soft); transition: padding .28s ease; }
.faq-item.active .faq-answer { grid-template-rows: 1fr; }
.faq-item.active .faq-answer > p { padding: 0 1.3rem 1.2rem; }

/* ---------- Blog ---------- */

.blog-card time {
  font-family: var(--font-head);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red-600);
}

.blog-card h3 { margin: .3em 0 .3em; }
.blog-card h3 a { color: var(--blue-900); }
.blog-card h3 a:hover { color: var(--blue-600); }
.blog-card p { color: var(--ink-soft); font-size: .94rem; }
.blog-card .btn { align-self: start; margin-top: auto; }

.article-body { max-width: 760px; margin: 0 auto; }
.article-body h2 { font-size: 1.4rem; margin-top: 2rem; }
.article-body p, .article-body li { color: #33415c; }

.privacy-notice {
  max-width: 920px;
}

.privacy-notice h2 {
  margin-top: 2.6rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
}

.privacy-notice h3 {
  margin-top: 1.5rem;
  font-size: 1.05rem;
}

.privacy-notice p,
.privacy-notice li {
  line-height: 1.75;
}

.privacy-notice ul {
  display: grid;
  gap: .45rem;
  padding-left: 1.35rem;
}

.privacy-index {
  margin-bottom: 2.4rem;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
}

.privacy-index h2 {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  font-size: 1.2rem;
}

.privacy-index-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.privacy-index-links a {
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--blue-800);
  font-family: var(--font-head);
  font-weight: 700;
  text-align: center;
}

.privacy-index-links a:hover {
  border-color: var(--blue-600);
  color: var(--blue-600);
}

.privacy-version {
  scroll-margin-top: 100px;
}

.privacy-version + .privacy-version {
  margin-top: 3.5rem;
  padding-top: 1rem;
}

@media (max-width: 640px) {
  .privacy-index-links {
    grid-template-columns: 1fr;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 460px at 12% 0%, rgba(21, 101, 216, .28), transparent 60%),
    linear-gradient(160deg, var(--blue-900), #051730);
  color: #cdd9ea;
  padding: clamp(3.2rem, 6vw, 5rem) var(--pad-x) 1.8rem;
}

.footer-cta {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto clamp(2.5rem, 5vw, 3.6rem);
  padding-bottom: clamp(2.2rem, 4vw, 3.2rem);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  display: grid;
  gap: .4rem;
  justify-items: center;
  text-align: center;
}

.footer-cta p {
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7f97bd;
  margin: 0;
}

.footer-cta h2 { color: #fff; font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin-bottom: .5em; }
.footer-cta .hero-actions { margin: 0; justify-content: center; }

.footer-main {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto clamp(2.4rem, 5vw, 3.4rem);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.35fr;
  gap: clamp(1.8rem, 4vw, 3rem);
  text-align: left;
}

.footer-brand .footer-logo {
  width: 190px;
  margin-bottom: 1.1rem;
  filter: brightness(0) invert(1);
}

.footer-brand > p { font-size: .92rem; color: #9db1d1; max-width: 40ch; }

.footer-col h3 {
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

.footer-col h3::after {
  content: "";
  display: block;
  width: 28px; height: 3px;
  border-radius: 3px;
  background: var(--red-600);
  margin-top: .55rem;
}

.footer-col a { display: block; color: #cdd9ea; font-size: .92rem; padding: .32rem 0; transition: color .15s ease, translate .15s ease; }
.footer-col a:hover { color: #fff; translate: 4px 0; }

.footer-contact p {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  font-size: .92rem;
  color: #9db1d1;
  margin: 0 0 .9rem;
}

.footer-contact p i {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: #ffd23f;
  font-size: .85rem;
  margin-top: -.2rem;
}

.footer-contact a { color: #fff; font-weight: 600; }
.footer-contact a:hover { color: #ffd23f; }

.social-links { display: flex; gap: .8rem; margin-top: 1.4rem; }

.social-links a {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1rem;
  transition: background .18s ease, transform .18s ease;
}

.social-links a:hover { background: var(--red-600); transform: translateY(-3px); }

.footer-bottom {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .6rem 1.5rem;
  font-size: .82rem;
}

.footer-bottom p { margin: 0; color: #7f97bd; }

.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.3rem;
}

.footer-bottom nav a { color: #cdd9ea; font-size: .82rem; font-weight: 600; }
.footer-bottom nav a:hover { color: #fff; }

/* ---------- Cobertura dinámica ---------- */

.coverage-directory { overflow: visible; }
.coverage-finder { position: relative; max-width: 720px; margin: 1.5rem auto 2rem; }
.coverage-finder--compact { margin: 1.2rem 0 1.6rem; }
.coverage-finder label { display: block; margin-bottom: .45rem; color: var(--blue-900); font-weight: 800; }
.coverage-search-wrap { position: relative; }
.coverage-search-wrap i { position: absolute; left: 1rem; top: 50%; translate: 0 -50%; color: var(--blue-600); }
.coverage-search-wrap input { width: 100%; min-height: 54px; padding: .8rem 1rem .8rem 2.9rem; border: 2px solid var(--line); border-radius: 14px; color: var(--blue-900); background: #fff; font: 600 1rem Inter, sans-serif; box-shadow: 0 8px 30px rgba(15, 48, 92, .07); }
.coverage-search-wrap input:focus { border-color: var(--blue-600); outline: 4px solid rgba(28, 102, 208, .12); }
.coverage-suggestions { position: absolute; z-index: 20; top: calc(100% + .4rem); left: 0; right: 0; max-height: 320px; overflow: auto; padding: .45rem; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow-md); }
.coverage-suggestions a { display: flex; align-items: center; gap: .55rem; padding: .72rem .8rem; border-radius: 9px; color: var(--blue-900); font-weight: 700; }
.coverage-suggestions a:hover { background: var(--bg-soft); }
.coverage-state-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.coverage-state-card { display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 12px 34px rgba(9, 46, 104, .08); }
.coverage-state-card__head { display: flex; align-items: center; gap: .8rem; }
.coverage-state-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--blue-600), var(--blue-900)); }
.coverage-state-card h3 { margin: 0; font-size: 1.08rem; }
.coverage-state-card h3 a { color: var(--blue-900); }
.coverage-state-card > p { color: var(--ink-soft); }
.coverage-count { margin: .18rem 0 0; color: var(--blue-600); font-size: .76rem; font-weight: 800; }
.coverage-mini-list { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.coverage-mini-list li:nth-child(n+7) { display: none; }
.coverage-mini-list a { display: block; padding: .32rem .5rem; border-radius: 999px; color: var(--blue-900); background: var(--bg-soft); font-size: .75rem; font-weight: 700; }
.coverage-state-card > .btn { margin-top: auto; align-self: flex-start; }
.coverage-empty { padding: 1rem; border: 1px dashed var(--line); border-radius: 12px; color: var(--ink-soft); text-align: center; }
.coverage-nearby { display: flex; flex-wrap: wrap; gap: .65rem; }
.coverage-nearby-link { display: inline-flex; align-items: center; gap: .45rem; padding: .68rem .85rem; border: 1px solid var(--line); border-radius: 10px; color: var(--blue-900); background: #fff; font-weight: 700; }
.coverage-steps { display: grid; gap: .75rem; padding-left: 1.25rem; }
.coverage-steps li { padding-left: .25rem; color: var(--ink-soft); }
.coverage-faq .faq-grid { margin-top: 1.4rem; }

/* ---------- Landing de pedidos ---------- */

.landing-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 1180px; margin: 0 auto; padding: 1rem clamp(1rem, 4vw, 2rem); }
.landing-header img { display: block; width: min(176px, 42vw); height: auto; }
.whatsapp-landing { background: linear-gradient(180deg, #f4f8ff 0, #fff 50%); }
.landing-hero { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; max-width: 1240px; min-height: min(760px, calc(100vh - 90px)); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1rem, 4vw, 2rem); }
.landing-hero__copy h1 { max-width: 760px; margin: .5rem 0 1rem; font-size: clamp(2.5rem, 6vw, 5.3rem); line-height: .98; }
.landing-hero__copy .hero-lead { max-width: 690px; font-size: clamp(1.05rem, 2vw, 1.35rem); }
.landing-checks { display: grid; gap: .6rem; margin: 1.5rem 0; padding: 0; list-style: none; color: var(--blue-900); font-weight: 700; }
.landing-checks i { margin-right: .45rem; color: #21ad59; }
.landing-microcopy { color: var(--ink-soft); font-size: .85rem; }
.landing-hero__art img { display: block; width: 100%; max-height: 620px; object-fit: contain; }
.landing-process { text-align: center; }
.landing-process .steps-grid { margin-top: 2rem; }
.landing-trust { display: flex; align-items: center; justify-content: space-between; gap: 2rem; max-width: 1120px; margin: 1rem auto 4rem; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 24px; color: #fff; background: linear-gradient(135deg, var(--blue-900), var(--blue-600)); }
.landing-trust h2, .landing-trust p, .landing-trust .eyebrow { color: inherit; }
.landing-trust div { max-width: 720px; }
.landing-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; padding: 1.3rem; color: #cdd9ea; background: var(--blue-900); font-size: .82rem; }
.landing-footer a { color: #fff; }

/* ---------- Animación de entrada ---------- */

.reveal {
  opacity: 1;
  transform: none;
}

.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .step-card, .feature-card, .location-card, .legal-card, .blog-card { transition: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .nav-toggle { display: grid; place-items: center; }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    padding: 1rem clamp(1.1rem, 4vw, 2rem) 1.4rem;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    display: none;
  }

  .main-nav.open { display: flex; }
  .main-nav > a, .nav-group > button { width: 100%; justify-content: space-between; border-radius: 10px; }

  .submenu {
    position: static;
    translate: none;
    transform: none;
    opacity: 1;
    display: none;
    visibility: visible;
    box-shadow: none;
    border: 0;
    padding-left: 1rem;
  }

  .coverage-submenu {
    width: auto;
    max-height: 55vh;
    overflow-y: auto;
    grid-template-columns: 1fr;
    padding: .35rem 0 .35rem 1rem;
  }

  .nav-group.open .submenu { display: grid; }

  .home-hero { grid-template-columns: 1fr; }
  .home-hero .hero-copy { padding: 2rem 3rem; }
  .hero-art img { height: clamp(300px, 55vw, 460px); }
  .service-band { grid-template-columns: 1fr; margin-top: 1.8rem; }
  .split { grid-template-columns: 1fr; }
  .app-features { grid-template-columns: 1fr; }
  .leak-banner-inner { grid-template-columns: 1fr; }
  .leak-banner-art img { max-height: 260px; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .steps-layout { grid-template-columns: 1fr; }
  .steps-layout .section-heading { position: static; }
  .coverage-intro { grid-template-columns: 1fr; }
  .zone-layout { grid-template-columns: 1fr; }
  .zone-panel { position: static; }
  .about-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coverage-value-grid { grid-template-columns: 1fr; }
  .coverage-state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-hero { grid-template-columns: 1fr; min-height: auto; }
  .landing-hero__art { order: -1; }
  .landing-hero__art img { max-height: 390px; }
}

@media (max-width: 640px) {
  .breadcrumbs { padding-top: .32rem; padding-bottom: .32rem; font-size: .66rem; }
  .form-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(3, 1fr); gap: .6rem; }
  .hero-actions .btn { flex: 1 1 auto; }
  .leak-banner::before { font-size: 12rem; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: center; text-align: center; }
  .steps-layout .steps-grid { grid-template-columns: 1fr; }
  .about-values { grid-template-columns: 1fr; }
  .coverage-hero .hero-art { min-height: 280px; }
  .coverage-state-grid { grid-template-columns: 1fr; }
  .landing-header .btn { padding: .7rem .8rem; font-size: .8rem; }
  .landing-trust { align-items: flex-start; flex-direction: column; margin-inline: 1rem; }
}

/* Global Gas: light heroes and unified navigation. */
.site-header { padding:.85rem var(--pad-edge); background:rgba(255,255,255,.97); border-bottom:1px solid var(--line); gap:1.5rem; }
.brand img { width:166px; }
.main-nav { gap:.15rem; }
.main-nav > a,.nav-group > button { padding:.75rem .8rem; font-size:.79rem; border-radius:10px; }
.main-nav > a.active,.nav-group > button.active { box-shadow:inset 0 -2px var(--blue-700); }
.main-nav .nav-order { margin-left:.7rem; padding:.8rem 1.1rem; color:#fff; background:var(--blue-700); box-shadow:0 5px 14px #0d47a120; }
.main-nav .nav-order:hover { color:#fff; background:var(--blue-800); }
.submenu { padding:.6rem; border-radius:16px; box-shadow:0 16px 45px #08234918; }
.submenu::before { content:""; position:absolute; height:12px; bottom:100%; left:0; right:0; }
.main-nav :is(a,button):focus-visible,.nav-toggle:focus-visible { outline:3px solid #1565d866; outline-offset:3px; }
.hero,.page-hero,.landing-hero { background:linear-gradient(115deg,#fff 25%,#f3f7fc 100%); border-bottom:1px solid var(--line); }
.home-hero,.page-hero-layout,.landing-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,470px); gap:clamp(2rem,6vw,6rem); align-items:center; max-width:1320px; margin:0 auto; padding:clamp(2.5rem,4.5vw,4.5rem) var(--pad-x); }
.home-hero .hero-copy,.coverage-hero .hero-copy { padding:0; }
.home-hero h1,.page-hero h1,.landing-hero__copy h1 { color:var(--blue-900); background:none; font-size:clamp(2.2rem,4.1vw,3.65rem); line-height:1.08; letter-spacing:-.045em; margin:.6rem 0 1.2rem; }
.hero-kicker { font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--blue-700); }
.location-pill { font-size:.72rem; box-shadow:none; background:var(--blue-050); border-color:#dbe7f6; margin-bottom:1.4rem; }
.hero-lead { font-size:clamp(1rem,1.5vw,1.18rem); font-weight:500; line-height:1.7; }
.hero-text { font-size:.94rem; line-height:1.8; }
.hero-note { max-width:46ch; font-size:.8rem; }
.leak-link { font-size:.8rem; margin-top:.8rem; }
.page-hero { padding:0; }
.page-hero-layout { max-width:1320px; }
.page-hero-copy > p:last-child { max-width:55ch; color:var(--ink-soft); font-size:1.05rem; }
.page-hero .gg-lead-head p { font-size:.86rem; }
.page-hero .gg-lead-small { font-size:.7rem; }
.landing-hero { max-width:none; min-height:0; padding-left:var(--pad-edge); padding-right:var(--pad-edge); }
@media(max-width:1100px) and (min-width:901px) { .site-header { gap:.5rem; padding-inline:1rem; } .brand img { width:140px; } .main-nav > a,.nav-group > button { padding:.65rem .5rem; font-size:.72rem; } .main-nav .nav-order { margin-left:.2rem; padding:.7rem; } }
@media(max-width:900px) {
 .site-header { padding:.75rem var(--pad-x); }
 .main-nav { padding:1rem; max-height:calc(100dvh - 85px); overflow-y:auto; border:1px solid var(--line); border-radius:0 0 20px 20px; box-shadow:0 20px 35px #08234915; }
 .main-nav .nav-order { margin:.6rem 0 0; justify-content:center; }
 .home-hero,.page-hero-layout,.landing-hero { grid-template-columns:minmax(0,1fr); gap:2rem; padding:2.5rem var(--pad-x); }
 .home-hero .hero-copy,.page-hero-copy,.landing-hero__copy { max-width:600px; width:100%; justify-self:center; padding:0; }
 .home-hero h1,.page-hero h1,.landing-hero__copy h1 { font-size:clamp(2rem,6.5vw,3rem); }
 .hero-copy .hero-note { margin-bottom:0; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .gg-lead-submit { transition:none; } }
@media(max-width:1024px) {
 .main-nav { max-height:calc(100dvh - 85px); overflow-y:auto; }
 .submenu::before { display:none; }
}
.hero:has(.gg-lead-card[hidden]) .home-hero,.page-hero-layout:has(.gg-lead-card[hidden]),.landing-hero:has(.gg-lead-card[hidden]) { grid-template-columns:minmax(0,1fr); }

/* Blue leads the brand palette; red remains reserved for emergency cues. */
.page-hero .eyebrow,.landing-hero .eyebrow { color:var(--blue-700); }
.page-hero .eyebrow::before,.landing-hero .eyebrow::before { background:var(--blue-600); }

/* One shared hero for home, pages, coverage and campaigns. */
:root { --control-radius:12px; }
.gg-hero { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(115deg,#082b59 0%,#0c4584 58%,#1260a3 100%); }
.gg-hero::before,.gg-hero::after { content:""; position:absolute; z-index:-1; pointer-events:none; background:url('../img/global-gas-logotipos-isotipo.webp') center/contain no-repeat; filter:brightness(0) invert(1); }
.gg-hero::before { width:720px; height:760px; left:-270px; bottom:-340px; opacity:.045; transform:rotate(-18deg); }
.gg-hero::after { width:610px; height:640px; right:-90px; top:-100px; opacity:.07; transform:rotate(12deg); }
.gg-hero__layout { max-width:1320px; margin:auto; padding:clamp(2.5rem,5vw,5rem) var(--pad-x); display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,470px); gap:clamp(2rem,6vw,6rem); align-items:center; }
.gg-hero__copy { max-width:650px; padding-block:1rem; }
.gg-hero__badge { display:inline-flex; align-items:center; gap:.6rem; padding:.5rem .9rem; border:1px solid #ffffff30; border-radius:var(--control-radius); background:#ffffff0d; color:#e4efff; font-size:.75rem; font-weight:600; margin-bottom:2rem; }
.gg-hero__eyebrow { color:#bcdcff; font-size:.76rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; margin:0 0 1rem; display:flex; align-items:center; gap:.7rem; }
.gg-hero__eyebrow::before { content:""; width:30px; height:3px; background:#ef3340; border-radius:3px; }
.gg-hero h1 { color:#fff; font-size:clamp(2.25rem,4.2vw,3.8rem); line-height:1.1; letter-spacing:-.04em; margin:0 0 1.5rem; overflow-wrap:anywhere; }
.gg-hero__lead { color:#ecf4ff; font-size:clamp(1.05rem,1.6vw,1.23rem); line-height:1.75; max-width:48ch; margin:0 0 1rem; }
.gg-hero__detail { color:#c5d9ee; font-size:.94rem; line-height:1.8; max-width:52ch; }
.gg-hero__detail:empty,.gg-hero__lead:empty { display:none; }
.gg-hero__links { display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-top:2rem; padding-top:1.4rem; border-top:1px solid #ffffff26; }
.gg-hero__links a { display:inline-flex; align-items:center; gap:.6rem; color:#fff; font-size:.8rem; font-weight:600; min-height:44px; }
.gg-hero__links a:hover { text-decoration:underline; text-underline-offset:5px; }
.gg-hero__links .gg-hero__emergency { color:#ffd4d9; }
.gg-hero__links a:focus-visible { outline:3px solid #fff; outline-offset:5px; border-radius:4px; }
.gg-hero .gg-lead-dialog { border:1px solid #fff; box-shadow:0 25px 65px #001b3e38; }
.gg-hero__layout:has(.gg-lead-card[hidden]) { grid-template-columns:minmax(0,1fr); }
.btn,.main-nav > a,.nav-group > button,.nav-toggle { border-radius:var(--control-radius); }
@media(max-width:900px) {
 .gg-hero__layout { grid-template-columns:minmax(0,1fr); gap:2rem; padding-block:2.5rem; }
 .gg-hero__copy { width:100%; max-width:600px; justify-self:center; padding:0; }
 .gg-hero__badge { margin-bottom:1.5rem; }
 .gg-hero h1 { font-size:clamp(2rem,6.5vw,3rem); }
 .gg-hero::after { width:450px; height:480px; right:-220px; top:40px; }
 .gg-hero__links { margin-top:1.4rem; padding-top:1rem; }
}

/* Floating navigation and continuous brand backdrop. */
.site-header { display:block; padding:16px var(--pad-x) 0; background:#082b59; border:0; box-shadow:none; backdrop-filter:none; }
.site-header.scrolled { background:#082b59ed; border:0; box-shadow:0 8px 30px #00152b15; padding-bottom:10px; backdrop-filter:blur(18px); }
.nav-shell { position:relative; max-width:1224px; margin:auto; min-height:76px; padding:12px 18px 12px 24px; display:flex; align-items:center; justify-content:space-between; gap:1rem; background:#fffffff7; border:1px solid #ffffffb3; border-radius:20px; box-shadow:0 12px 35px #001a3b24; }
.nav-shell .brand { flex:0 0 auto; }
.nav-shell .brand img { width:154px; }
.nav-shell .main-nav { gap:4px; }
.nav-shell .main-nav > a,.nav-shell .nav-group > button { min-height:44px; padding:10px 12px; font:600 .78rem var(--font-body); color:#334760; border-radius:var(--control-radius); }
.nav-shell .main-nav > a:hover,.nav-shell .nav-group > button:hover { background:#eef4fc; color:#0b4b91; }
.nav-shell .main-nav > a.active,.nav-shell .nav-group > button.active { color:#0b4b91; background:#eaf2fc; box-shadow:none; }
.nav-shell .main-nav .nav-order { margin-left:10px; padding:12px 16px; color:#fff; background:#0b4b91; box-shadow:0 4px 12px #0b4b9120; }
.nav-shell .main-nav .nav-order:hover { background:#08376b; color:#fff; }
.nav-shell .submenu { top:calc(100% + 14px); border:1px solid #e2eaf4; padding:10px; border-radius:16px; box-shadow:0 18px 45px #001b3b26; }
.nav-shell .submenu::before { height:18px; }
.nav-shell .submenu a { min-height:44px; display:flex; align-items:center; font-size:.8rem; font-weight:500; }
.nav-shell .nav-toggle { width:auto; min-width:88px; padding:0 12px; gap:8px; font:600 .82rem var(--font-body); background:#eef4fc; border:1px solid #dce7f5; }
.gg-hero { background:linear-gradient(to bottom,transparent calc(100% - 130px),#fff 100%),#082b59; border:0; }
.gg-hero__layout { position:relative; padding-top:clamp(2rem,4vw,3.5rem); padding-bottom:150px; gap:clamp(2rem,5vw,5rem); }
.gg-hero__atmosphere { position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 75% 42%,#2487ce40,transparent 60%),radial-gradient(ellipse at 8% 70%,#176aa630,transparent 52%),repeating-radial-gradient(ellipse at 110% 10%,transparent 0 88px,#d9efff0c 89px 90px,transparent 91px 160px); mask-image:linear-gradient(transparent,#000 15%,#000 68%,transparent 96%); }
.gg-hero::before { width:660px; height:690px; left:calc(50% - 650px); bottom:80px; opacity:.035; transform:rotate(-14deg); }
.gg-hero::after { width:480px; height:510px; right:-150px; top:20px; opacity:.075; transform:rotate(14deg); }
.gg-hero__badge { margin-bottom:1.5rem; }
.gg-hero__links { border:0; padding-top:0; }
@media(min-width:1101px) { .nav-shell .nav-toggle { display:none; } .nav-shell .main-nav { display:flex; position:static; } }
@media(max-width:1100px) {
 .site-header { padding:12px 16px 0; }
 .nav-shell { min-height:68px; padding:10px 14px 10px 18px; border-radius:16px; }
 .nav-shell .brand img { width:142px; }
 .nav-shell .nav-toggle { display:flex; align-items:center; justify-content:center; }
 .nav-shell .main-nav { display:none; position:absolute; top:calc(100% + 10px); left:0; right:0; padding:12px; background:#fff; border:1px solid #e2eaf4; border-radius:16px; box-shadow:0 20px 45px #001b3b33; max-height:calc(100dvh - 118px); overflow-y:auto; flex-direction:column; align-items:stretch; gap:4px; }
 .nav-shell .main-nav.open { display:flex; }
 .nav-shell .main-nav > a,.nav-shell .nav-group > button { width:100%; justify-content:space-between; min-height:48px; font-size:.88rem; padding:12px; }
 .nav-shell .main-nav .nav-order { margin:8px 0 0; justify-content:center; }
 .nav-shell .submenu { display:none; position:static; width:auto; min-width:0; translate:none; transform:none; opacity:1; visibility:visible; border:0; border-left:2px solid #dbe8f8; border-radius:0; margin:4px 0 8px 12px; padding:0 0 0 10px; box-shadow:none; grid-template-columns:1fr; max-height:none; }
 .nav-shell .submenu::before { display:none; }
 .nav-shell .nav-group.open .submenu { display:grid; }
}
@media(max-width:900px) { .gg-hero__layout { padding-bottom:110px; } .gg-hero { background:linear-gradient(to bottom,transparent calc(100% - 100px),#fff),#082b59; } }
@media(prefers-reduced-motion:reduce) { .site-header { transition:none; } }
@media(min-width:1101px) {
 .nav-shell .nav-group:not(.open) .submenu { opacity:0; visibility:hidden; transform:translateY(6px); }
 .nav-shell .nav-group.open .submenu { opacity:1; visibility:visible; transform:translateY(0); }
}

/* Defined hero boundary and restrained corner radii. */
:root { --control-radius:6px; --radius:10px; --radius-sm:6px; }
.gg-hero { background:#082b59; border-bottom:1px solid #174a7b; }
.gg-hero__layout { padding-bottom:clamp(2.5rem,5vw,4.5rem); }
.nav-shell { border-radius:10px; }
.nav-shell .submenu,.nav-shell .main-nav { border-radius:8px; }
.gg-hero .gg-lead-dialog { border-radius:10px; }
.nav-shell .main-nav > a,.nav-shell .nav-group > button,.nav-shell .nav-toggle,.btn { border-radius:var(--control-radius); }
@media(max-width:1100px) { .nav-shell { border-radius:10px; } .nav-shell .main-nav { border-radius:8px; } .nav-shell .submenu { border-radius:0; } }
@media(max-width:900px) { .gg-hero { background:#082b59; } .gg-hero__layout { padding-bottom:2.5rem; } }

/* Full-width white navigation, including its sticky state. */
.site-header,.site-header.scrolled { background:#fff; padding:12px var(--pad-x); border-bottom:1px solid var(--line); backdrop-filter:none; }
.site-header.scrolled { box-shadow:0 4px 18px rgba(8,35,73,.07); }
.nav-shell { background:#fff; border:0; box-shadow:none; }
@media(max-width:1100px) { .site-header,.site-header.scrolled { padding:8px 16px; } }

/* Content-sized mega panels, with a searchable coverage directory. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.nav-shell .nav-group { position:static; }
.nav-shell .mega-menu { left:0; right:0; top:calc(100% + 8px); translate:none; width:100%; min-width:0; max-height:calc(100dvh - 145px); overflow:auto; padding:22px; display:grid; grid-template-columns:220px minmax(0,1fr); gap:26px; border-radius:8px; }
.nav-shell .mega-menu--compact { left:auto; width:min(650px,100%); grid-template-columns:210px minmax(0,1fr); }
.mega-intro { border-right:1px solid var(--line); padding-right:22px; }
.mega-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:6px; background:#edf4fc; color:#0b4b91; margin-bottom:12px; }
.mega-title { font:700 1.15rem var(--font-head); color:var(--blue-900); margin-bottom:8px; }
.mega-description { font-size:.82rem; color:var(--ink-soft); line-height:1.65; }
.nav-shell .mega-overview { color:#0b4b91; padding:8px 0; gap:10px; font-weight:700; }
.mega-content { min-width:0; }
.mega-search { display:flex; align-items:center; gap:10px; border:1px solid #d8e3f0; border-radius:6px; padding:0 12px; color:#57708d; margin-bottom:12px; background:#f8fafd; }
.mega-search input { width:100%; min-width:0; min-height:44px; border:0; outline:none; background:transparent; color:var(--ink); font:400 16px var(--font-body); }
.mega-search:focus-within { outline:2px solid var(--blue-600); outline-offset:2px; }
.mega-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 12px; }
.mega-menu--compact .mega-links { grid-template-columns:1fr; }
.nav-shell .mega-link { gap:10px; border-radius:6px; line-height:1.4; padding:10px; }
.mega-link i { color:#7793b1; font-size:.75rem; flex-shrink:0; }
.nav-shell .mega-link.active { background:#eaf2fc; color:#0b4b91; }
.mega-empty { font-size:.85rem; color:var(--ink-soft); margin:12px 0; }
.mega-menu [hidden] { display:none!important; }
@media(max-width:1100px) {
 .nav-shell .mega-menu,.nav-shell .mega-menu--compact { display:none; position:static; width:100%; padding:12px; margin:4px 0 8px; border:1px solid #e2eaf4; border-radius:6px; background:#f9fbfe; grid-template-columns:1fr; gap:12px; max-height:none; overflow:visible; }
 .nav-shell .nav-group.open .mega-menu { display:grid; }
 .mega-intro { border:0; padding:0; }
 .mega-intro .mega-icon,.mega-intro .mega-title,.mega-intro .mega-description { display:none; }
 .nav-shell .mega-overview { min-height:44px; padding:4px 8px; }
 .mega-links { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
 .nav-shell .mega-link { min-height:44px; }
}
@media(max-width:520px) { .mega-links { grid-template-columns:1fr; } }

/* Light shared hero with the supplied star artwork. */
.gg-hero { background:linear-gradient(115deg,#fff 0%,#f1f6fc 100%); border-bottom:1px solid #dce6f2; }
.gg-hero::before { background-image:url('../img/Group-111.webp'); filter:none; width:700px; height:820px; left:-210px; bottom:-310px; transform:rotate(-12deg); opacity:.85; }
.gg-hero::after { background-image:url('../img/Group-111.webp'); filter:none; width:610px; height:720px; right:-130px; top:-60px; transform:rotate(10deg); opacity:.95; }
.gg-hero__atmosphere { background:radial-gradient(ellipse at 80% 40%,#cddff340,transparent 65%); mask-image:none; }
.gg-hero h1 { color:var(--blue-900); }
.gg-hero__badge { color:var(--blue-800); background:#fff; border-color:#d8e4f2; }
.gg-hero__eyebrow { color:var(--blue-700); }
.gg-hero__lead { color:#294566; }
.gg-hero__detail { color:#536a83; }
.gg-hero__links a { color:var(--blue-700); }
.gg-hero__links .gg-hero__emergency { color:#b72030; }
.gg-hero__links a:focus-visible { outline-color:var(--blue-600); }
.gg-hero .gg-lead-dialog { border:1px solid #dce6f2; box-shadow:0 16px 42px #08234912; }
@media(max-width:900px) { .gg-hero::after { width:400px; height:470px; right:-200px; top:15px; } }

/* Center the supplied star without rotation or duplicate motifs. */
.gg-hero::before { width:min(720px,90%); height:100%; left:50%; top:0; bottom:auto; transform:translateX(-50%); background-position:center; background-size:contain; opacity:.9; }
.gg-hero::after { display:none; }

/* Blend the hero into the white content surface without a visible edge. */
.gg-hero { border-bottom:0; background:linear-gradient(to bottom,transparent 65%,#fff 100%),linear-gradient(115deg,#fff 0%,#f1f6fc 100%); }
.gg-hero::before,.gg-hero__atmosphere { -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%); mask-image:linear-gradient(to bottom,#000 55%,transparent 100%); }

/* Editorial pages retain the shared design without a sales column. */
.gg-hero--informative .gg-hero__layout { grid-template-columns:minmax(0,1fr); padding-block:clamp(2.5rem,5vw,4.5rem); }
.gg-hero--informative .gg-hero__copy { max-width:900px; width:100%; justify-self:start; }
.gg-hero--informative h1 { font-size:clamp(2rem,3.6vw,3.2rem); }
.gg-hero--informative .gg-hero__lead { max-width:70ch; }
.gg-hero--informative .gg-hero__detail { max-width:70ch; }

/* Compact blue editorial hero, distinct from the commercial variant. */
.gg-hero.gg-hero--informative { background:linear-gradient(110deg,#082b59,#104b85); border-bottom:0; }
.gg-hero--informative .gg-hero__layout { padding-block:clamp(1.8rem,3.6vw,3rem); }
.gg-hero--informative .gg-hero__copy { max-width:960px; padding:0; }
.gg-hero--informative .gg-hero__badge { display:none; }
.gg-hero--informative .gg-hero__eyebrow { color:#bbdaf9; margin-bottom:.65rem; }
.gg-hero--informative h1 { color:#fff; font-size:clamp(1.8rem,3.1vw,2.8rem); line-height:1.17; margin-bottom:.8rem; }
.gg-hero--informative .gg-hero__lead { color:#e2edfa; font-size:1rem; line-height:1.65; margin-bottom:0; }
.gg-hero--informative .gg-hero__detail { color:#bbd3ee; font-size:.8rem; margin-top:.65rem; }
.gg-hero--informative::before { left:auto; right:3%; top:50%; transform:translateY(-50%); width:290px; height:340px; opacity:.065; mask-image:none; -webkit-mask-image:none; }
.gg-hero--informative .gg-hero__atmosphere { background:repeating-linear-gradient(125deg,transparent 0 100px,#ffffff04 101px 102px,transparent 103px 190px); mask-image:none; }
.editorial-blog { padding-top:3rem; }
.editorial-blog__toolbar { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin-bottom:1.5rem; }
.editorial-blog__toolbar h2 { font-size:1.7rem; margin:0; }
.blog-search { display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:6px; padding:0 14px; background:#f8fafc; color:#60748d; width:min(100%,330px); }
.blog-search input { min-height:48px; width:100%; min-width:0; border:0; background:none; font:400 16px var(--font-body); outline:0; color:var(--ink); }
.blog-search:focus-within { outline:2px solid var(--blue-600); outline-offset:2px; }
.editorial-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.editorial-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid #dfe7f1; border-radius:8px; background:#fff; transition:box-shadow .2s,border-color .2s; }
.editorial-card:hover { border-color:#adc5e3; box-shadow:0 10px 28px #0823490c; }
.editorial-card__visual { min-height:125px; display:grid; place-items:center; color:#1a5799; background:#edf4fc url('../img/Group-111.webp') right center/160px no-repeat; border-bottom:1px solid #e4edf7; }
.editorial-card__visual i { font-size:2rem; }
.editorial-card__body { display:flex; flex:1; flex-direction:column; padding:24px; }
.editorial-card__meta { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.72rem; color:#65758a; margin-bottom:14px; }
.editorial-card__meta > span { color:#0b4b91; font-weight:700; }
.editorial-card h3 { font-size:1.16rem; line-height:1.4; text-wrap:initial; }
.editorial-card h3 a { color:var(--blue-900); }
.editorial-card h3 a:hover { color:var(--blue-600); text-decoration:underline; text-underline-offset:4px; }
.editorial-card p { font-size:.9rem; line-height:1.75; color:var(--ink-soft); }
.editorial-card__link { display:flex; align-items:center; gap:12px; margin-top:auto; min-height:44px; font-size:.83rem; font-weight:600; color:var(--blue-700); }
.editorial-card--featured { grid-column:1/-1; display:grid; grid-template-columns:.7fr 1.3fr; }
.editorial-card--featured .editorial-card__visual { border:0; min-height:230px; background-size:280px; }
.editorial-card--featured .editorial-card__visual i { font-size:3rem; }
.editorial-card--featured h3 { font-size:clamp(1.4rem,2.4vw,1.9rem); }
.editorial-card[hidden],.blog-empty[hidden],.blog-results[hidden],.article-toc[hidden] { display:none; }
.blog-results,.blog-empty { font-size:.9rem; color:var(--ink-soft); }
.editorial-article { display:grid; grid-template-columns:240px minmax(0,760px); justify-content:center; align-items:start; gap:clamp(2rem,5vw,5rem); padding-block:3rem; }
.article-sidebar { position:sticky; top:135px; }
.article-toc { border:1px solid var(--line); border-radius:6px; padding:20px; background:#f8fafc; max-height:60vh; overflow:auto; }
.article-toc h2 { font-size:.85rem; margin-bottom:12px; }
.article-toc ol { list-style:none; padding:0; margin:0; }
.article-toc li + li { margin-top:4px; }
.article-toc a { display:block; padding:8px 0; color:#405674; font-size:.8rem; line-height:1.55; }
.article-toc a:hover { color:var(--blue-600); text-decoration:underline; }
.article-toc__sub { padding-left:12px; }
.article-back-link { display:flex; align-items:center; gap:10px; min-height:44px; margin-top:12px; font-size:.8rem; font-weight:600; }
.editorial-article .article-body { width:100%; min-width:0; font-size:1.05rem; line-height:1.85; }
.article-reading { display:flex; flex-wrap:wrap; gap:10px 24px; padding-bottom:20px; margin-bottom:26px; border-bottom:1px solid var(--line); color:#63768d; font-size:.78rem; }
.article-reading i { margin-right:6px; }
.article-body h2,.article-body h3 { scroll-margin-top:140px; }
.editorial-article .article-body h2 { font-size:1.6rem; line-height:1.35; margin-top:2.2rem; }
.editorial-article .article-body h3 { font-size:1.2rem; margin-top:1.6rem; }
.article-body img { border-radius:6px; height:auto; }
.article-body a { text-decoration:underline; text-underline-offset:3px; }
.article-body blockquote { margin:1.5rem 0; border-left:3px solid var(--blue-600); background:#f1f6fc; padding:20px 24px; }
.article-end { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:3rem; padding-top:24px; border-top:1px solid var(--line); font-size:.85rem; }
.article-end p { margin:0; }
.article-related { padding-top:1rem; }
@media(max-width:900px) { .editorial-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .editorial-article { grid-template-columns:1fr; gap:24px; } .article-sidebar { position:static; } .article-toc { max-height:none; } }
@media(max-width:600px) { .editorial-blog__toolbar { align-items:stretch; flex-direction:column; } .blog-search { width:100%; } .editorial-grid,.editorial-card--featured { grid-template-columns:1fr; } .editorial-card--featured .editorial-card__visual { min-height:140px; } .editorial-card__body { padding:20px; } .article-end { align-items:start; flex-direction:column; } .gg-hero--informative::before { right:-70px; } }
@media(prefers-reduced-motion:reduce) { .editorial-card { transition:none; } }
@media print { .article-sidebar,.article-related,.site-header,.site-footer { display:none; } .editorial-article { display:block; padding:0; } .gg-hero--informative { background:#fff!important; } .gg-hero--informative h1,.gg-hero--informative .gg-hero__lead { color:#000; } }

/* Oversized brand star within the short editorial hero. */
.gg-hero--informative::before { width:clamp(620px,76vw,1100px); height:clamp(730px,90vw,1300px); left:50%; right:auto; top:50%; transform:translate(-50%,-50%); opacity:.075; background-position:center; background-size:contain; }
@media(max-width:600px) { .gg-hero--informative::before { width:620px; height:730px; left:58%; right:auto; } }

/* Commercial heroes share one visual height; home adds its own macro brand mark. */
@media(min-width:901px) {
 .gg-hero--commercial .gg-hero__layout { min-height:640px; }
}
.gg-hero__macro { position:absolute; inset:0; z-index:-1; display:grid; place-items:center; pointer-events:none; overflow:hidden; }
.gg-hero__macro img { width:min(760px,68vw); height:min(760px,92%); object-fit:contain; opacity:.92; }
.gg-hero--home::before { display:none; }

/* National average price strip directly below the home hero. */
.gas-price-strip { background:#082b59; color:#fff; }
.gas-price-strip__inner { width:min(1320px,100%); margin:auto; padding:clamp(1.4rem,3vw,2rem) var(--pad-x); display:grid; grid-template-columns:minmax(220px,1.25fr) repeat(2,minmax(170px,.65fr)) minmax(220px,1fr); align-items:center; gap:clamp(1.25rem,3vw,2.5rem); }
.gas-price-strip__intro p,.gas-price-strip__meta p { margin:0; }
.gas-price-strip__eyebrow { color:#a9caee; font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.gas-price-strip h2 { margin:.25rem 0 0; color:#fff; font-size:clamp(1.15rem,2vw,1.55rem); }
.gas-price-strip__price { min-height:76px; padding-left:clamp(1rem,2.5vw,2rem); border-left:1px solid #ffffff2e; display:flex; flex-direction:column; justify-content:center; }
.gas-price-strip__price strong { font:700 clamp(1.65rem,3vw,2.25rem)/1 var(--font-head); letter-spacing:-.035em; }
.gas-price-strip__price span { margin-top:.4rem; color:#c8dcf3; font-size:.78rem; }
.gas-price-strip__meta { color:#c8dcf3; font-size:.74rem; line-height:1.6; }
.gas-price-strip__meta a { display:inline-flex; align-items:center; gap:.45rem; min-height:44px; color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
@media(max-width:900px) {
 .gg-hero__macro img { width:min(650px,110vw); height:82%; opacity:.72; }
 .gas-price-strip__inner { grid-template-columns:1fr 1fr; }
 .gas-price-strip__intro,.gas-price-strip__meta { grid-column:1/-1; }
 .gas-price-strip__price:first-of-type { padding-left:0; border-left:0; }
}
@media(max-width:520px) {
 .gas-price-strip__inner { grid-template-columns:1fr; }
 .gas-price-strip__intro,.gas-price-strip__meta { grid-column:auto; }
 .gas-price-strip__price { padding:1rem 0 0; border-left:0; border-top:1px solid #ffffff2e; }
}