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

/* ═══════════════════════════════════════════════════
   TOKENS — Manual de marca oficial
   Azul #126493 | Gris #59595B | Blanco #FFFFFF
═══════════════════════════════════════════════════ */
:root {
  --azul:       #126493;
  --azul-osc:   #0E4F75;
  --azul-prof:  #0A3A57;
  --azul-noche: #061F30;
  --azul-cl:    #E8F3FA;
  --azul-mid:   #1A8AC4;
  --gris:       #59595B;
  --gris-osc:   #1A1A1B;
  --gris-med:   #8A8889;
  --gris-f:     #F5F7F9;
  --blanco:     #FFFFFF;
  --linea:      rgba(18,100,147,.12);

  --fh: 'Montserrat', system-ui, sans-serif;
  --fb: 'Open Sans', system-ui, sans-serif;

  --ease: cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);

  --sh1: 0 1px 4px rgba(6,31,48,.07);
  --sh2: 0 4px 20px rgba(6,31,48,.10);
  --sh3: 0 12px 48px rgba(6,31,48,.14);
  --sh4: 0 24px 72px rgba(6,31,48,.18);
}

/* ── RESET ─────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  font-family: var(--fb);
  color: var(--gris);
  background: var(--blanco);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}
img { max-width:100%; height:auto; display:block }
a { color:var(--azul); text-decoration:none; transition:color .18s var(--ease) }
a:hover { color:var(--azul-osc) }
strong { font-weight:700; color:var(--gris-osc) }
p { margin-bottom:1rem; font-size:.97rem }
ul,ol { margin:0 0 1rem 1.25rem }
li { margin-bottom:.4rem }

/* ── TIPOGRAFÍA ────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-family:var(--fh); line-height:1.15; font-weight:700 }
h1 { font-size:clamp(2rem,5.5vw,3.4rem); letter-spacing:-.025em }
h2 { font-size:clamp(1.5rem,3.5vw,2.2rem); letter-spacing:-.015em; color:var(--gris-osc) }
h3 { font-size:clamp(1.1rem,2vw,1.3rem); color:var(--azul-prof) }
h4 { font-size:1rem; font-weight:600; color:var(--azul-prof) }

/* ── LAYOUT ─────────────────────────────────────────── */
.wrap    { max-width:1080px; margin:0 auto; padding:0 32px }
.wrap-sm { max-width:760px;  margin:0 auto; padding:0 32px }

/* ── ANIMACIONES ────────────────────────────────────── */
@keyframes up    { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes line  { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes grid  { from{background-position:0 0} to{background-position:56px 56px} }
@keyframes dots  { 0%{transform:translateY(0)} 100%{transform:translateY(-14px)} }
@keyframes scan  { 0%{top:8%;opacity:0} 10%{opacity:.3} 90%{opacity:.3} 100%{top:92%;opacity:0} }
@keyframes wap   { 0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.5)} 50%{box-shadow:0 4px 20px rgba(37,211,102,.5),0 0 0 14px rgba(37,211,102,.08)} }
@keyframes blink { 0%,100%{opacity:.3;transform:scaleY(1)} 50%{opacity:.8;transform:scaleY(1.5)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* Scroll reveal */
.rv { opacity:0; transform:translateY(32px); transition:opacity .7s var(--ease),transform .7s var(--ease) }
.rv.d1{transition-delay:.08s} .rv.d2{transition-delay:.16s}
.rv.d3{transition-delay:.24s} .rv.d4{transition-delay:.32s}
.rv.d5{transition-delay:.40s}
.rv.on { opacity:1; transform:none }

/* ── HEADER ─────────────────────────────────────────── */
.site-header {
  position: sticky; top:0; z-index:1000;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
  box-shadow: var(--sh1);
  transition: box-shadow .3s var(--ease);
}
.site-header.up { box-shadow: var(--sh2) }
.hdr {
  max-width:1080px; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; height:68px; gap:32px;
}
.hdr-logo { flex-shrink:0 }
.hdr-logo img { height:44px; width:auto }
.hdr-logo a { display:block }

/* Nav */
.hdr-nav { flex:1 }
.nav-list {
  list-style:none; display:flex; align-items:center; gap:2px;
}
.nav-list > li { position:relative }
.nav-list > li > a {
  display:block; padding:8px 14px;
  font-family:var(--fh); font-weight:600; font-size:.85rem;
  color:var(--gris-osc); letter-spacing:.02em;
  border-radius:6px;
  transition:all .18s var(--ease);
  position:relative;
}
.nav-list > li > a:hover,
.nav-list > li.current-menu-item > a { color:var(--azul); background:var(--azul-cl) }

/* Dropdown */
.nav-list .sub-menu {
  position:absolute; top:calc(100% + 6px); left:0;
  min-width:210px;
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:10px;
  box-shadow:var(--sh3);
  list-style:none; padding:6px;
  opacity:0; visibility:hidden;
  transform:translateY(-6px);
  transition:all .22s var(--ease);
  z-index:200;
}
.nav-list > li:hover > .sub-menu,
.nav-list > li:focus-within > .sub-menu {
  opacity:1; visibility:visible; transform:none;
}
.nav-list .sub-menu a {
  display:block; padding:9px 12px;
  font-size:.85rem; color:var(--gris-osc);
  border-radius:6px;
  transition:all .15s var(--ease);
}
.nav-list .sub-menu a:hover { color:var(--azul); background:var(--azul-cl); padding-left:16px }
.nav-list .sub-menu .sub-menu { top:0; left:100%; margin-top:-6px }

/* CTA header */
.hdr-cta { display:flex; align-items:center; gap:8px; flex-shrink:0 }
.hdr-wa {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--azul); color:var(--blanco);
  padding:9px 16px; border-radius:8px;
  font-family:var(--fh); font-weight:700; font-size:.82rem;
  box-shadow:0 2px 10px rgba(18,100,147,.3);
  transition:all .2s var(--ease); white-space:nowrap;
}
.hdr-wa:hover { background:var(--azul-osc); color:var(--blanco); transform:translateY(-1px); box-shadow:0 4px 16px rgba(18,100,147,.4) }

/* Hamburguesa */
.hdr-toggle {
  display:none; background:none; border:1px solid var(--linea);
  width:40px; height:40px; border-radius:8px;
  cursor:pointer; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
  transition:all .18s var(--ease);
}
.hdr-toggle:hover { background:var(--azul-cl); border-color:var(--azul) }
.hdr-toggle span {
  display:block; width:18px; height:1.5px;
  background:var(--gris-osc); border-radius:2px;
  transition:all .22s var(--ease); transform-origin:center;
}
.hdr-toggle.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
.hdr-toggle.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.hdr-toggle.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

.skip-link {
  position:absolute; top:-60px; left:16px; z-index:9999;
  background:var(--azul); color:var(--blanco);
  padding:8px 16px; border-radius:8px; font-family:var(--fh); font-weight:700;
  transition:top .2s; font-size:.85rem;
}
.skip-link:focus { top:8px }

/* ── HERO ───────────────────────────────────────────── */
.hero {
  position:relative; overflow:hidden;
  background:var(--azul-noche);
  min-height:92vh; display:flex; align-items:center;
  padding:96px 32px 80px;
}

/* Grid de coordenadas */
.hero-bg {
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(18,100,147,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(18,100,147,.07) 1px,transparent 1px);
  background-size:60px 60px;
  animation:grid 36s linear infinite;
}

/* Luz atmosférica */
.hero-light {
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 65% 55% at 72% 42%, rgba(18,100,147,.32) 0%,transparent 65%),
    radial-gradient(ellipse 35% 35% at 15% 75%, rgba(26,138,196,.14) 0%,transparent 60%),
    linear-gradient(155deg, var(--azul-noche) 0%, var(--azul-prof) 50%, var(--azul-noche) 100%);
}

/* Puntos GNSS flotantes */
.hero-dots {
  position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden;
}
.hero-dots::before {
  content:''; position:absolute;
  width:4px; height:4px; background:var(--azul-mid); border-radius:50%;
  box-shadow:
    110px 70px 0 rgba(26,138,196,.7),  260px 180px 0 rgba(18,100,147,.5),
    420px 110px 0 rgba(26,138,196,.6), 580px 280px 0 rgba(18,100,147,.4),
    740px 160px 0 rgba(26,138,196,.7), 880px 75px  0 rgba(18,100,147,.5),
    1000px 200px 0 rgba(26,138,196,.4),150px 330px 0 rgba(18,100,147,.6),
    320px 400px 0 rgba(26,138,196,.5), 500px 360px 0 rgba(18,100,147,.4),
    680px 420px 0 rgba(26,138,196,.6), 840px 340px 0 rgba(18,100,147,.5),
    1100px 300px 0 rgba(26,138,196,.3),60px 460px  0 rgba(18,100,147,.4);
  animation:dots 9s ease-in-out infinite alternate;
}

/* Línea de escáner */
.hero-scan {
  position:absolute; z-index:2; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--azul-mid) 25%,rgba(26,138,196,.9) 50%,var(--azul-mid) 75%,transparent);
  animation:scan 7s ease-in-out infinite; opacity:.3;
}

/* Borde inferior luminoso */
.hero-line {
  position:absolute; bottom:0; left:0; right:0; z-index:3; height:1px;
  background:linear-gradient(90deg,transparent,var(--azul) 25%,var(--azul-mid) 50%,var(--azul) 75%,transparent);
}

/* Coordenadas decorativas */
.hero-geo {
  position:absolute; right:32px; bottom:24px; z-index:3;
  font-family:var(--fh); font-size:.58rem; font-weight:600;
  color:rgba(255,255,255,.13); letter-spacing:.14em; pointer-events:none;
}

.hero-inner { position:relative; z-index:4; max-width:1080px; margin:0 auto; width:100% }

/* Textos hero */
.hero h1 { color:var(--blanco); margin-bottom:20px; max-width:720px }
.hero h1 em { font-style:italic; color:rgba(255,255,255,.6); font-weight:400 }
.hero-bar {
  display:block; width:52px; height:2px;
  background:linear-gradient(90deg,var(--azul-mid),var(--azul));
  margin-bottom:24px; transform-origin:left;
  animation:line .7s .9s var(--ease) both;
}
.hero-lead {
  font-size:1.08rem; font-weight:300; line-height:1.85;
  color:rgba(255,255,255,.6); max-width:500px; margin-bottom:40px;
}
.hero-scroll {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  z-index:4; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.hero-scroll span {
  font-family:var(--fh); font-size:.58rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.2);
}
.hero-scroll-line {
  width:1px; height:36px;
  background:linear-gradient(var(--azul-mid),transparent);
  animation:blink 2.2s ease-in-out infinite;
}

/* Hero animaciones orquestadas */
.hero .eyebrow { animation:up .6s .1s var(--ease) both }
.hero .w1 { display:inline-block; animation:up .7s .28s var(--ease) both }
.hero .w2 { display:inline-block; animation:up .7s .42s var(--ease) both }
.hero .w3 { display:inline-block; animation:up .7s .56s var(--ease) both }
.hero .w4 { display:inline-block; animation:up .7s .70s var(--ease) both }
.hero .hero-lead  { animation:up .7s .92s var(--ease) both }
.hero .btn-row    { animation:up .7s 1.08s var(--ease) both }
.hero-scroll      { animation:up .7s 1.3s var(--ease) both }

/* ── EYEBROW ─────────────────────────────────────────── */
.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--fh); font-size:.67rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--azul-mid);
  margin-bottom:14px;
}
.eyebrow::before { content:''; width:20px; height:1.5px; background:var(--azul-mid); flex-shrink:0 }
.dark .eyebrow, .night .eyebrow, .hero .eyebrow { color:rgba(255,255,255,.5) }
.dark .eyebrow::before, .night .eyebrow::before, .hero .eyebrow::before { background:rgba(255,255,255,.4) }

/* Rule */
.rule {
  display:block; width:38px; height:2px;
  background:linear-gradient(90deg,var(--azul),var(--azul-mid));
  border-radius:1px; margin-top:14px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s .2s var(--ease);
}
.rule.c { margin:14px auto 0 }
.rule.on { transform:scaleX(1) }

/* ── BOTONES ─────────────────────────────────────────── */
.btn-row { display:flex; flex-wrap:wrap; gap:12px }
.btn {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--fh); font-weight:700; font-size:.88rem;
  padding:13px 26px; border-radius:8px;
  border:2px solid transparent; cursor:pointer;
  min-height:48px; letter-spacing:.01em; white-space:nowrap;
  transition:all .22s var(--ease); text-decoration:none!important;
}
.btn:hover { transform:translateY(-2px) }
.btn:active { transform:none }
.btn:focus-visible { outline:3px solid var(--azul-mid); outline-offset:3px }

.btn-p { background:var(--azul); color:var(--blanco); border-color:var(--azul); box-shadow:0 4px 14px rgba(18,100,147,.3) }
.btn-p:hover { background:var(--azul-osc); border-color:var(--azul-osc); color:var(--blanco); box-shadow:0 8px 24px rgba(18,100,147,.4) }
.btn-wa { background:#25D366; color:var(--blanco); border-color:#25D366; box-shadow:0 4px 14px rgba(37,211,102,.28) }
.btn-wa:hover { background:#1db954; border-color:#1db954; color:var(--blanco) }
.btn-gh { background:transparent; color:var(--blanco); border-color:rgba(255,255,255,.35) }
.btn-gh:hover { background:rgba(255,255,255,.09); color:var(--blanco); border-color:rgba(255,255,255,.7) }
.btn-ol { background:transparent; color:var(--azul); border-color:var(--linea) }
.btn-ol:hover { border-color:var(--azul); background:var(--azul-cl) }

/* ── SECCIONES ───────────────────────────────────────── */
.sec   { padding:88px 32px }
.alt   { padding:88px 32px; background:var(--gris-f) }
.dark  { padding:88px 32px; background:var(--azul-prof) }
.night { padding:88px 32px; background:var(--azul-noche) }
.dark h2,.night h2 { color:var(--blanco) }
.dark p,.night p { color:rgba(255,255,255,.65) }
.sh { margin-bottom:56px }
.sh.c { text-align:center }
.sh.c .rule { margin:14px auto 0 }

/* ── CARDS ───────────────────────────────────────────── */
.g3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px }
.g2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:24px }

.card {
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:14px; padding:32px 28px;
  position:relative; overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
/* Línea superior animada */
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--azul),var(--azul-mid));
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
/* Brillo de hover */
.card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 38%,rgba(26,138,196,.05) 50%,transparent 62%);
  transform:translateX(-100%); transition:transform .5s var(--ease);
}
.card:hover { transform:translateY(-6px); box-shadow:var(--sh3); border-color:rgba(18,100,147,.2) }
.card:hover::before { transform:scaleX(1) }
.card:hover::after  { transform:translateX(100%) }

.card-ico {
  width:48px; height:48px; background:var(--azul-cl);
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; margin-bottom:18px;
  transition:transform .25s var(--spring);
}
.card:hover .card-ico { transform:scale(1.12) rotate(-5deg) }
.card h4 { margin-bottom:8px }
.card p  { font-size:.9rem; color:var(--gris); margin-bottom:16px; line-height:1.65 }
.card-lnk {
  font-size:.82rem; font-weight:700; color:var(--azul);
  display:inline-flex; align-items:center; gap:6px; font-family:var(--fh);
  transition:gap .16s var(--ease),color .16s var(--ease);
}
.card-lnk:hover { gap:12px; color:var(--azul-osc) }

/* ── ESCENARIOS ──────────────────────────────────────── */
.esc-g { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:40px }
.esc {
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:14px; padding:28px;
  position:relative; overflow:hidden;
  transition:all .25s var(--ease);
}
.esc::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(var(--azul),var(--azul-mid));
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .28s var(--ease);
}
.esc:hover { transform:translateY(-4px); box-shadow:var(--sh2) }
.esc:hover::before { transform:scaleY(1) }
.esc-tag {
  font-family:var(--fh); font-size:.62rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--azul-mid); margin-bottom:10px;
}
.esc h4 { font-size:.95rem; margin-bottom:8px; color:var(--gris-osc) }
.esc p  { font-size:.87rem; margin-bottom:10px }
.esc-srv { font-family:var(--fh); font-size:.7rem; font-weight:600; color:var(--gris-med) }

/* ── STATS ───────────────────────────────────────────── */
.stats {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:1px; background:rgba(255,255,255,.07);
  border-radius:14px; overflow:hidden; margin-top:64px;
}
.stat { background:rgba(255,255,255,.04); padding:36px 20px; text-align:center; transition:background .18s var(--ease) }
.stat:hover { background:rgba(255,255,255,.1) }
.stat-n {
  font-family:var(--fh); font-size:2.8rem; font-weight:800;
  color:var(--blanco); line-height:1; margin-bottom:8px;
  transition:transform .25s var(--spring);
}
.stat:hover .stat-n { transform:scale(1.1) }
.stat-l {
  font-family:var(--fh); font-size:.62rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.38);
}

/* ── STEPS ───────────────────────────────────────────── */
.steps { list-style:none; counter-reset:step }
.step {
  counter-increment:step; display:grid;
  grid-template-columns:56px 1fr; gap:22px;
  margin-bottom:40px; align-items:flex-start; position:relative;
}
.step:not(:last-child)::after {
  content:''; position:absolute; top:56px; left:27px;
  bottom:calc(-40px + 4px); width:2px;
  background:linear-gradient(var(--azul-cl),transparent);
}
.step-n {
  width:56px; height:56px; background:var(--azul);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--fh); font-size:1.1rem; font-weight:800;
  color:var(--blanco); flex-shrink:0;
  box-shadow:0 4px 16px rgba(18,100,147,.35);
  transition:transform .25s var(--spring),box-shadow .25s var(--ease);
}
.step-n::after { content:counter(step) }
.step:hover .step-n { transform:scale(1.1); box-shadow:0 8px 28px rgba(18,100,147,.45) }
.step-b h4 { padding-top:14px; margin-bottom:6px; font-size:.97rem }
.step-b p  { font-size:.91rem; margin:0 }

/* ── FAQ ─────────────────────────────────────────────── */
.faqs { border-top:1px solid var(--linea) }
.faq  { border-bottom:1px solid var(--linea) }
.faq summary {
  display:flex; justify-content:space-between; align-items:center;
  gap:24px; padding:22px 0; cursor:pointer;
  font-family:var(--fh); font-weight:600; font-size:.97rem;
  color:var(--gris-osc); list-style:none;
  transition:color .18s var(--ease);
}
.faq summary::-webkit-details-marker { display:none }
.faq summary:hover { color:var(--azul) }
.faq summary::after {
  content:'+'; font-size:1.5rem; font-weight:300; color:var(--azul);
  flex-shrink:0; transition:transform .22s var(--ease); line-height:1;
}
.faq[open] summary::after { transform:rotate(45deg); color:var(--azul-osc) }
.faq[open] summary { color:var(--azul) }
.faq-body { padding:0 0 22px; font-size:.94rem; animation:up .28s var(--ease) }

/* ── NOTA ────────────────────────────────────────────── */
.nota {
  background:var(--azul-cl); border-left:3px solid var(--azul);
  border-radius:0 8px 8px 0; padding:14px 20px;
  font-size:.9rem; margin:20px 0; color:var(--azul-prof);
}
.warn {
  background:#fff8e6; border-left:3px solid #d97706;
  border-radius:0 8px 8px 0; padding:14px 20px;
  font-size:.9rem; margin:20px 0;
}

/* ── TABLA ───────────────────────────────────────────── */
.tbl { width:100%; border-collapse:collapse; margin:20px 0; font-size:.91rem; border-radius:12px; overflow:hidden; box-shadow:var(--sh1) }
.tbl th { background:var(--azul-prof); color:var(--blanco); font-family:var(--fh); font-weight:700; padding:12px 16px; text-align:left }
.tbl td { padding:10px 16px; border-bottom:1px solid var(--linea) }
.tbl tr:nth-child(even) td { background:var(--gris-f) }
.tbl tr:last-child td { border-bottom:none }

/* ── ENTREGABLES ─────────────────────────────────────── */
.dl { list-style:none; margin:0; padding:0 }
.dl-item { display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--linea) }
.dl-item:last-child { border-bottom:none }
.dl-ico { font-size:1.1rem; flex-shrink:0; margin-top:2px }
.dl-lbl { font-weight:700; font-size:.9rem; color:var(--gris-osc); font-family:var(--fh) }
.dl-desc { font-size:.83rem; color:var(--gris-med); margin-top:2px }

/* ── USOS ────────────────────────────────────────────── */
.uso-g { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:28px }
.uso {
  background:var(--blanco); border:1px solid var(--linea);
  border-left:3px solid var(--azul);
  border-radius:0 12px 12px 0; padding:20px;
  transition:all .22s var(--ease);
}
.uso:hover { transform:translateX(4px); box-shadow:var(--sh1) }
.uso-ico { font-size:1.3rem; margin-bottom:8px }
.uso h4  { font-size:.88rem; margin-bottom:5px }
.uso p   { font-size:.83rem; margin:0 }

/* ── TEAM BOX ────────────────────────────────────────── */
.team {
  display:grid; grid-template-columns:auto 1fr; gap:32px;
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:14px; padding:36px;
  box-shadow:var(--sh2); align-items:start;
  transition:box-shadow .25s var(--ease);
}
.team:hover { box-shadow:var(--sh3) }
.team-logo {
  width:72px; height:72px; background:var(--azul-cl);
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-family:var(--fh); font-size:.68rem; font-weight:700;
  color:var(--azul); letter-spacing:.08em;
  border:1px solid rgba(18,100,147,.2); text-align:center; line-height:1.4;
}
.team-badge {
  display:inline-block; font-family:var(--fh); font-size:.62rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--azul-mid); background:var(--azul-cl);
  border:1px solid rgba(18,100,147,.2);
  padding:3px 10px; border-radius:20px; margin-bottom:8px;
}
.ck { list-style:none; margin:12px 0 0; padding:0 }
.ck li { display:flex; gap:10px; align-items:flex-start; font-size:.9rem; padding:5px 0 }
.ck li::before { content:'✓'; color:var(--azul); font-weight:800; flex-shrink:0; margin-top:1px; font-size:.85rem }

/* ── CTA FINAL ───────────────────────────────────────── */
.cta {
  padding:96px 32px; background:var(--azul-noche);
  text-align:center; position:relative; overflow:hidden;
}
.cta::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 65% 55% at 50% 100%,rgba(18,100,147,.35) 0%,transparent 70%);
}
.cta::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--azul) 30%,var(--azul-mid) 50%,var(--azul) 70%,transparent);
}
.cta > * { position:relative; z-index:1 }
.cta h2 { color:var(--blanco); margin-bottom:14px }
.cta p  { color:rgba(255,255,255,.55); max-width:460px; margin:0 auto 36px }

/* ── WA FLOAT ────────────────────────────────────────── */
.wa-float {
  position:fixed; bottom:28px; right:28px; z-index:9999;
  width:58px; height:58px; background:#25D366; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.5);
  transition:transform .25s var(--spring),box-shadow .25s var(--ease);
  animation:wap 3s ease-in-out infinite;
  text-decoration:none!important;
}
.wa-float:hover { transform:scale(1.13); box-shadow:0 8px 32px rgba(37,211,102,.65); animation:none }
.wa-float svg { width:28px; height:28px; fill:white }

/* ── MAPA ────────────────────────────────────────────── */
.mapa { border-radius:14px; overflow:hidden; box-shadow:var(--sh2) }
.mapa iframe { display:block; width:100%; height:320px; border:0 }

/* ── CONTACT CARDS ───────────────────────────────────── */
.cc-g { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px }
.cc {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:24px;
  transition:background .18s var(--ease);
}
.cc:hover { background:rgba(255,255,255,.12) }
.cc-ico { font-size:1.4rem; margin-bottom:10px }
.cc h4  { color:var(--blanco); font-size:.9rem; margin-bottom:5px }
.cc a   { color:var(--azul-mid); font-size:.88rem }
.cc p   { color:rgba(255,255,255,.5); font-size:.8rem; margin:0 }

/* ── FOOTER ──────────────────────────────────────────── */
.site-footer { background:var(--azul-noche); border-top:1px solid rgba(255,255,255,.07) }
.ftr { max-width:1080px; margin:0 auto; padding:0 32px }
.ftr-g {
  display:grid; grid-template-columns:1.6fr repeat(3,1fr);
  gap:64px; padding:72px 0 56px;
}
.ftr-logo { max-height:38px; width:auto; margin-bottom:20px }
.ftr-desc { font-size:.87rem; color:rgba(255,255,255,.45); line-height:1.75; margin-bottom:20px }
.ftr-social { display:flex; gap:8px }
.ftr-social a {
  width:36px; height:36px; background:rgba(255,255,255,.07);
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.55); transition:all .18s var(--ease);
}
.ftr-social a:hover { background:var(--azul); color:var(--blanco) }
.ftr-h {
  font-family:var(--fh); font-size:.68rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.35); margin-bottom:20px;
}
.ftr-links { list-style:none; margin:0; padding:0 }
.ftr-links li { margin-bottom:10px }
.ftr-links a {
  font-size:.87rem; color:rgba(255,255,255,.55);
  transition:color .18s var(--ease),padding-left .18s var(--ease);
}
.ftr-links a:hover { color:var(--blanco); padding-left:4px }
.ftr-contact { list-style:none; margin:0; padding:0 }
.ftr-contact li { display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; font-size:.87rem; color:rgba(255,255,255,.55) }
.ftr-contact svg { flex-shrink:0; margin-top:2px; opacity:.45 }
.ftr-contact a { color:rgba(255,255,255,.55); transition:color .18s var(--ease) }
.ftr-contact a:hover { color:var(--blanco) }
.ftr-bot {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px; padding:20px 0;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:.79rem; color:rgba(255,255,255,.3);
}
.ftr-bot a { color:rgba(255,255,255,.45); transition:color .18s var(--ease) }
.ftr-bot a:hover { color:var(--blanco) }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media(max-width:1024px) {
  .ftr-g { grid-template-columns:1fr 1fr; gap:40px }
  .ftr-col-brand { grid-column:1/-1 }
}
@media(max-width:768px) {
  .hero { padding:72px 20px 64px; min-height:auto; text-align:center }
  .hero h1,.hero .hero-lead { margin-left:auto; margin-right:auto }
  .hero-scroll { display:none }
  .btn-row { justify-content:center; flex-direction:column; align-items:center }
  .btn { width:100%; justify-content:center }
  .sec,.alt,.dark,.night,.cta { padding:64px 20px }
  .wrap,.wrap-sm { padding:0 20px }
  .team { grid-template-columns:1fr }
  .step { grid-template-columns:44px 1fr; gap:16px }
  .step-n { width:44px; height:44px; font-size:1rem }
  .step:not(:last-child)::after { left:21px }
  /* Header móvil */
  .hdr-nav {
    position:fixed; top:68px; left:0; right:0; z-index:999;
    background:var(--blanco); border-bottom:1px solid var(--linea);
    box-shadow:var(--sh3); padding:16px 20px 28px;
    transform:translateY(-100%); opacity:0;
    transition:all .25s var(--ease); pointer-events:none;
    max-height:calc(100vh - 68px); overflow-y:auto;
  }
  .hdr-nav.open { transform:none; opacity:1; pointer-events:all }
  .nav-list { flex-direction:column; gap:0 }
  .nav-list > li > a { padding:14px 0; font-size:.97rem; border-bottom:1px solid var(--linea); border-radius:0 }
  .nav-list > li > a:hover { background:none; padding-left:4px }
  .nav-list .sub-menu { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; border-radius:0; padding:4px 0 4px 16px }
  .nav-list .sub-menu a { padding:10px 0; font-size:.9rem }
  .hdr-toggle { display:flex }
  .hdr-wa span { display:none }
  .hdr-wa { padding:9px 12px }
  /* Footer móvil */
  .ftr-g { grid-template-columns:1fr; gap:36px }
  .ftr-bot { flex-direction:column; text-align:center }
}
@media(max-width:480px) {
  .stats { grid-template-columns:repeat(2,1fr) }
  .wa-float { bottom:16px; right:16px; width:52px; height:52px }
  .wa-float svg { width:24px; height:24px }
  .hdr { padding:0 16px; gap:12px }
}

/* ── ACCESIBILIDAD ───────────────────────────────────── */
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important }
}
:focus-visible { outline:3px solid var(--azul-mid); outline-offset:3px }
.skip-link { position:absolute; top:-60px; left:16px; z-index:9999; background:var(--azul); color:var(--blanco); padding:8px 16px; border-radius:8px; font-family:var(--fh); font-weight:700; font-size:.85rem; transition:top .2s }
.skip-link:focus { top:8px }

/* ═══════════════════════════════════════════════════
   HERO MEJORADO — Instrumento decorativo + parallax
═══════════════════════════════════════════════════ */

/* Instrumento decorativo (teodolito SVG) */
.hero-instrument {
  position: absolute;
  right: 6%;
  bottom: 0;
  width: min(280px, 38vw);
  z-index: 3;
  opacity: .55;
  transform: translateY(8px);
  transition: transform .1s linear, opacity .3s;
  pointer-events: none;
  filter: drop-shadow(0 0 32px rgba(26,138,196,.25));
}

/* Capas de parallax para el mouse */
.hero-bg    { will-change: transform }
.hero-light { will-change: transform }
.hero-dots  { will-change: transform }
.hero-instrument { will-change: transform }

/* Hero más alto en desktop */
@media(min-width:769px) {
  .hero {
    min-height: 96vh;
    padding: 100px 32px 80px;
    text-align: left;
    align-items: center;
  }
  .hero-inner {
    max-width: 580px;
  }
  .hero .hero-lead {
    margin-left: 0;
    margin-right: 0;
  }
  .btn-row {
    justify-content: flex-start;
  }
  .hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
  }
}

/* Línea de mira animada en el hero */
.hero::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(26,138,196,.0) 20%,
    rgba(26,138,196,.15) 50%,
    rgba(26,138,196,.0) 80%,
    transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* Punto de mira en el centro del hero */
.hero::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: rgba(26,138,196,.4);
  border-radius: 50%;
  box-shadow:
    0 0 0 12px rgba(26,138,196,.08),
    0 0 0 24px rgba(26,138,196,.04);
  z-index: 2;
  pointer-events: none;
  animation: crosshair 4s ease-in-out infinite;
}
@keyframes crosshair {
  0%,100% { opacity:.4; transform:scale(1) }
  50%      { opacity:.8; transform:scale(1.3) }
}

/* Cursor personalizado en el hero */
.hero { cursor: crosshair }
.hero .btn-wa,
.hero .btn-gh { cursor: pointer }

/* Efecto de brillo en hover sobre el hero */
.hero-light {
  transition: transform .08s linear;
}

/* Texto hero mejorado */
.hero h1 {
  text-shadow: 0 2px 32px rgba(6,31,48,.6);
}
.hero .hero-lead {
  text-shadow: 0 1px 8px rgba(6,31,48,.4);
}
/*
 * =====================================================================
 * ESTILOS DE PÁGINAS — agrimensura.com.do
 * Agregar al final de: public_html/wp-content/themes/agr2/assets/css/main.css
 * O encolar desde functions.php como archivo separado: paginas-estilos.css
 * =====================================================================
 */
 
/* ── Wrapper ─────────────────────────────────────────────────────── */
.agr-page-content { width: 100%; }
 
/* ── Hero ────────────────────────────────────────────────────────── */
.ph {
  background: linear-gradient(155deg, #061F30 0%, #0A3A57 50%, #061F30 100%);
  padding: 72px 32px 64px;
  position: relative;
  overflow: hidden;
}
.ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(18,100,147,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,100,147,.07) 1px, transparent 1px);
  background-size: 48px 48px;
}
.ph::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #126493 30%, #1A8AC4 50%, #126493 70%, transparent);
}
.phi { max-width: 1060px; margin: 0 auto; position: relative; z-index: 2; }
 
/* ── Eyebrow label ───────────────────────────────────────────────── */
.pey {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 16px;
}
.pey::before { content: ''; width: 20px; height: 1.5px; background: rgba(255,255,255,.4); flex-shrink: 0; }
.pey.b { color: #1A8AC4; }
.pey.b::before { background: #1A8AC4; }
 
/* ── Headings ────────────────────────────────────────────────────── */
.ph h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.15;
  max-width: 740px;
}
.ph p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.05rem;
  color: rgba(255,255,255,.65);
  max-width: 560px;
  margin-bottom: 32px;
  line-height: 1.8;
}
h2.p {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: #1A1A1B;
  letter-spacing: -.01em;
}
h3.p {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #0A3A57;
  margin-bottom: 8px;
}
 
/* ── Buttons ─────────────────────────────────────────────────────── */
.pbr { display: flex; flex-wrap: wrap; gap: 12px; }
.pb {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: .88rem;
  padding: 13px 26px;
  border-radius: 8px;
  border: 2px solid transparent;
  min-height: 48px;
  text-decoration: none !important;
  transition: all .22s ease;
  white-space: nowrap;
}
.pb:hover { transform: translateY(-2px); }
.pb-wa { background: #25D366; color: #fff; border-color: #25D366; }
.pb-wa:hover { background: #1db954; color: #fff; }
.pb-az { background: #126493; color: #fff; border-color: #126493; }
.pb-az:hover { background: #0E4F75; color: #fff; }
.pb-ol { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.pb-ol:hover { background: rgba(255,255,255,.09); color: #fff; }
.pb-out { background: transparent; color: #126493; border-color: rgba(18,100,147,.25); }
.pb-out:hover { background: #E8F3FA; border-color: #126493; }
 
/* ── Sections ────────────────────────────────────────────────────── */
.ps  { padding: 72px 32px; }
.psa { padding: 72px 32px; background: #F5F7F9; }
.pw  { max-width: 1060px; margin: 0 auto; }
.pws { max-width: 780px; margin: 0 auto; }
.psh { margin-bottom: 40px; }
.psh.c { text-align: center; }
 
/* ── Rule accent ─────────────────────────────────────────────────── */
.pr {
  display: block;
  width: 38px; height: 2px;
  background: linear-gradient(90deg, #126493, #1A8AC4);
  border-radius: 1px;
  margin-top: 12px;
}
.pr.c { margin: 12px auto 0; }
 
/* ── Grids ───────────────────────────────────────────────────────── */
.g3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.g2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
 
/* ── Cards ───────────────────────────────────────────────────────── */
.pc {
  background: #fff;
  border: 1px solid rgba(18,100,147,.12);
  border-radius: 14px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  text-decoration: none !important;
  display: block;
}
.pc::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #126493, #1A8AC4);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.pc:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(6,31,48,.12); }
.pc:hover::before { transform: scaleX(1); }
.pc .ico { font-size: 1.6rem; margin-bottom: 14px; }
.pc h3 { font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700; color: #0A3A57; margin-bottom: 8px; }
.pc p  { font-family: 'Open Sans', sans-serif; font-size: .88rem; color: #59595B; margin-bottom: 12px; }
.pc .lnk { font-family: 'Montserrat', sans-serif; font-size: .8rem; font-weight: 700; color: #126493; display: inline-flex; align-items: center; gap: 5px; }
 
/* ── Callouts ────────────────────────────────────────────────────── */
.pnota {
  background: #E8F3FA;
  border-left: 3px solid #126493;
  border-radius: 0 8px 8px 0;
  padding: 14px 20px;
  font-size: .9rem;
  margin: 20px 0;
  color: #0A3A57;
  font-family: 'Open Sans', sans-serif;
}
.pnota strong { color: #0A3A57; }
.palerta {
  background: #FFF8E1;
  border-left: 3px solid #F9A825;
  border-radius: 0 8px 8px 0;
  padding: 14px 20px;
  font-size: .9rem;
  margin: 20px 0;
  color: #5D4037;
  font-family: 'Open Sans', sans-serif;
}
 
/* ── Table ───────────────────────────────────────────────────────── */
.ptbl {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: .91rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(6,31,48,.08);
}
.ptbl th {
  background: #0A3A57;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  padding: 11px 16px;
  text-align: left;
}
.ptbl td {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(18,100,147,.1);
  font-family: 'Open Sans', sans-serif;
  font-size: .91rem;
  color: #1A1A1B;
}
.ptbl tr:nth-child(even) td { background: #F5F7F9; }
.ptbl tr:last-child td { border-bottom: none; }
 
/* ── Steps ───────────────────────────────────────────────────────── */
.psteps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.pstep {
  counter-increment: s;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  margin-bottom: 36px;
  align-items: flex-start;
  position: relative;
}
.pstep:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 52px; left: 25px;
  bottom: calc(-36px + 4px);
  width: 2px;
  background: linear-gradient(#E8F3FA, transparent);
}
.psn {
  width: 52px; height: 52px;
  background: #126493;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(18,100,147,.3);
}
.psn::after { content: counter(s); }
.psb h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: .97rem;
  color: #0A3A57;
  padding-top: 12px;
  margin-bottom: 6px;
}
.psb p { font-family: 'Open Sans', sans-serif; font-size: .92rem; color: #59595B; margin: 0; }
 
/* ── FAQ accordion ───────────────────────────────────────────────── */
.pfaqs { border-top: 1px solid rgba(18,100,147,.12); }
.pfaq  { border-bottom: 1px solid rgba(18,100,147,.12); }
.pfaq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  color: #1A1A1B;
  list-style: none;
}
.pfaq summary::-webkit-details-marker { display: none; }
.pfaq summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: #126493;
  flex-shrink: 0;
  transition: transform .22s ease;
}
.pfaq[open] summary::after { transform: rotate(45deg); }
.pfaq[open] summary { color: #126493; }
.pfaq .fb {
  padding: 0 0 20px;
  font-family: 'Open Sans', sans-serif;
  font-size: .93rem;
  color: #59595B;
  line-height: 1.7;
}
 
/* ── CTA bottom ──────────────────────────────────────────────────── */
.pcta {
  padding: 72px 32px;
  background: #061F30;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pcta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 55% at 50% 100%, rgba(18,100,147,.35) 0%, transparent 70%);
}
.pcta::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #126493 30%, #1A8AC4 50%, #126493 70%, transparent);
}
.pcta > * { position: relative; z-index: 1; }
.pcta h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; color: #fff; margin-bottom: 12px; }
.pcta p  { font-family: 'Open Sans', sans-serif; font-size: .97rem; color: rgba(255,255,255,.55); max-width: 480px; margin: 0 auto 32px; }
 
/* ── Pill links ──────────────────────────────────────────────────── */
.plks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.plks a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  color: #126493;
  background: #E8F3FA;
  border: 1px solid rgba(18,100,147,.2);
  padding: 6px 14px;
  border-radius: 20px;
  transition: all .18s ease;
}
.plks a:hover { background: #126493; color: #fff; }
 
/* ── Body text ───────────────────────────────────────────────────── */
p.txt { font-family: 'Open Sans', sans-serif; font-size: .97rem; color: #575556; line-height: 1.8; margin-bottom: 18px; }
ul.lst { margin: 0 0 18px; padding-left: 0; list-style: none; }
ul.lst li {
  font-family: 'Open Sans', sans-serif;
  font-size: .95rem;
  color: #575556;
  padding: 6px 0 6px 22px;
  position: relative;
  line-height: 1.7;
  border-bottom: 1px solid rgba(18,100,147,.06);
}
ul.lst li::before {
  content: '';
  position: absolute;
  left: 0; top: 14px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #126493;
}
ul.lst li:last-child { border-bottom: none; }
 
/* ── Stat row (páginas locales) ──────────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  background: rgba(18,100,147,.12);
  border-radius: 14px;
  overflow: hidden;
  margin: 32px 0;
}
.stat { background: #fff; padding: 28px 16px; text-align: center; }
.stat-n { font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: 800; color: #126493; line-height: 1; margin-bottom: 6px; }
.stat-l { font-family: 'Montserrat', sans-serif; font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #575556; }
 
/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ph  { padding: 56px 20px 48px; }
  .ps, .psa, .pcta { padding: 52px 20px; }
  .pb  { width: 100%; justify-content: center; }
  .pbr { flex-direction: column; align-items: center; }
  .pstep { grid-template-columns: 42px 1fr; gap: 14px; }
  .psn  { width: 42px; height: 42px; font-size: .9rem; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}

*, *::before, *::after {
  box-sizing: border-box;
}
a {
  transition: color .2s ease, background .2s ease;
}