/* ============================================================
   AGR Ascensores — style.css
   CSS completo: index + páginas interiores
   ============================================================ */

/* ---- VARIABLES Y RESET ---- */
:root {
  --green:     #009c49;
  --green-lt:  #00b854;
  --green-dk:  #007a38;
  --green-xdk: #003d1e;
  --g10: rgba(0,156,73,.10);
  --g20: rgba(0,156,73,.20);
  --g30: rgba(0,156,73,.30);
  --white:  #fff;
  --off:    #f5f7f5;
  --g100:   #e6ebe6;
  --g300:   #8fa08f;
  --g500:   #526052;
  --g700:   #222d22;
  --black:  #0b100b;
  --fd: 'Plus Jakarta Sans', sans-serif;
  --fb: 'Inter', sans-serif;
  --xs:   0.72rem;
  --sm:   0.8125rem;
  --base: 0.9375rem;
  --md:   1rem;
  --lg:   1.0625rem;
  --xl:   1.25rem;
  --2xl:  1.5rem;
  --3xl:  1.875rem;
  --4xl:  2.25rem;
  --r:   14px;
  --rs:  8px;
  --rx:  5px;
  --sh:  0 1px 8px rgba(0,20,0,.06);
  --shc: 0 2px 20px rgba(0,20,0,.07);
  --shh: 0 8px 32px rgba(0,156,73,.15);
  --tr:  .28s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body {
  font-family: var(--fb);
  font-size: var(--base);
  line-height: 1.65;
  color: var(--g700);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit }
img { max-width: 100%; display: block }

/* grain */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .016;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- NAV ---- */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: 66px;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background .35s, box-shadow .35s;
}
.nav.scrolled {
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 var(--g100);
}
.logo { display: flex; align-items: center }
.logo-img { height: 36px; width: auto; display: block }
.ft-brand .logo-img { height: 32px; margin-bottom: .7rem }
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
}
.nav-links a {
  font-size: var(--sm);
  font-weight: 500;
  color: var(--g500);
  letter-spacing: .01em;
  transition: color .2s;
}
.nav-links a:hover { color: var(--green) }
.nav-cta {
  background: var(--green) !important;
  color: var(--white) !important;
  padding: .42rem 1.1rem !important;
  border-radius: 100px;
  font-weight: 600 !important;
  font-size: var(--sm) !important;
  transition: background .2s, box-shadow .2s, transform .2s !important;
}
.nav-cta:hover {
  background: var(--green-lt) !important;
  box-shadow: 0 4px 14px rgba(0,156,73,.28) !important;
  transform: translateY(-1px);
}
.hbg {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.hbg span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--g700);
  border-radius: 2px;
  transition: .3s;
}
.mob {
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  transform: translateY(-100%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.mob.open { transform: translateY(0) }
.mob a {
  font-family: var(--fd);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--black);
  transition: color .2s;
}
.mob a:hover { color: var(--green) }

/* ---- HERO ---- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  overflow: hidden;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,156,73,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,156,73,.06) 1px, transparent 1px);
  background-size: 54px 54px;
  animation: gridDrift 30s linear infinite;
}
@keyframes gridDrift { to { background-position: 54px 54px } }
.hero-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0,156,73,.09) 0%, transparent 68%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  animation: glowB 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glowB {
  0%,100% { opacity: .7; transform: translate(-50%,-55%) scale(1) }
  50%      { opacity: 1; transform: translate(-50%,-55%) scale(1.07) }
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 5%;
  max-width: 780px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--g10);
  border: 1px solid rgba(0,156,73,.22);
  color: var(--green-dk);
  font-family: var(--fb);
  font-size: var(--xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .32rem .95rem;
  border-radius: 100px;
  margin-bottom: 1.6rem;
  animation: fU .65s .15s both;
}
.bdot {
  width: 5px;
  height: 5px;
  background: var(--green);
  border-radius: 50%;
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
.hero-title {
  font-family: var(--fd);
  font-size: clamp(2rem, 4.8vw, 3.6rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.028em;
  color: var(--black);
  margin-bottom: 1.15rem;
  animation: fU .65s .28s both;
}
.hl { color: var(--green); position: relative }
.hl::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  animation: lI .85s 1.1s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes lI { to { transform: scaleX(1) } }
.hero-sub {
  font-size: var(--md);
  font-weight: 400;
  color: var(--g500);
  line-height: 1.75;
  margin-bottom: 2rem;
  animation: fU .65s .4s both;
}
.hero-locs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 2.5rem;
  animation: fU .65s .5s both;
}
.lpill {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  background: var(--off);
  border: 1px solid var(--g100);
  color: var(--g500);
  font-size: var(--xs);
  font-weight: 500;
  letter-spacing: .025em;
  padding: .28rem .8rem;
  border-radius: 100px;
  transition: background .2s, border-color .2s, color .2s;
}
.lpill:hover { background: var(--g10); border-color: var(--g30); color: var(--green-dk) }
.lpill svg { width: 10px; height: 10px; fill: currentColor }
.hero-act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  flex-wrap: wrap;
  animation: fU .65s .6s both;
}
.hero-scroll {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  color: var(--g300);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  animation: fU .65s 1.4s both;
}
.sbar {
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, transparent, var(--g300));
  animation: sA 2.2s ease-in-out infinite;
}
@keyframes sA {
  0%   { transform: scaleY(0); transform-origin: top }
  45%  { transform: scaleY(1); transform-origin: top }
  55%  { transform: scaleY(1); transform-origin: bottom }
  100% { transform: scaleY(0); transform-origin: bottom }
}
@keyframes fU {
  from { opacity: 0; transform: translateY(18px) }
  to   { opacity: 1; transform: translateY(0) }
}

/* ---- BOTONES GLOBALES ---- */
.btn-p {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--green);
  color: var(--white);
  font-family: var(--fb);
  font-size: var(--sm);
  font-weight: 600;
  letter-spacing: .01em;
  padding: .72rem 1.65rem;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .2s, box-shadow .2s, transform .2s;
}
.btn-p::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform .5s;
}
.btn-p:hover::before { transform: translateX(180%) }
.btn-p:hover {
  background: var(--green-lt);
  box-shadow: 0 0 0 3px rgba(0,156,73,.18), 0 6px 22px rgba(0,156,73,.32);
  transform: translateY(-2px);
}
.btn-g {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--g500);
  font-size: var(--sm);
  font-weight: 500;
  padding: .72rem 1.35rem;
  border-radius: 100px;
  border: 1px solid var(--g100);
  transition: border-color .2s, color .2s, background .2s;
}
.btn-g:hover { border-color: var(--green); color: var(--green-dk); background: var(--g10) }

/* ---- TRUST BAR ---- */
.trust {
  background: var(--green);
  padding: .9rem 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.25rem;
  flex-wrap: wrap;
}
.ti {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: rgba(255,255,255,.88);
  font-size: var(--xs);
  font-weight: 500;
  letter-spacing: .025em;
}
.ti svg { width: 14px; height: 14px; fill: rgba(255,255,255,.7); flex-shrink: 0 }

/* ---- SECTIONS ---- */
.sec { padding: 5.5rem 5% }
.si  { max-width: 1140px; margin: 0 auto }
.ey {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--fb);
  font-size: var(--xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: .55rem;
}
.ey::before { content: ''; width: 16px; height: 1.5px; background: var(--green); border-radius: 2px }
.st {
  font-family: var(--fd);
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -.032em;
  line-height: 1.15;
  color: var(--black);
  margin-bottom: .8rem;
}
.sl {
  font-size: var(--base);
  color: var(--g500);
  line-height: 1.75;
  max-width: 500px;
}
.rev { opacity: 0; transform: translateY(22px); transition: opacity .6s, transform .6s }
.rev.visible { opacity: 1; transform: translateY(0) }

/* ---- STATS ---- */
.stats-sec { background: var(--off); padding: 3rem 5% }
.stats-g {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1px;
  background: var(--g100);
  border-radius: var(--r);
  overflow: hidden;
}
.sc { background: var(--white); padding: 1.85rem 1.6rem; text-align: center }
.sn {
  font-family: var(--fd);
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--green);
  line-height: 1;
  margin-bottom: .35rem;
}
.sl2 { font-size: var(--xs); font-weight: 500; color: var(--g300); letter-spacing: .02em }

/* ---- SERVICIOS ---- */
.svc-sec { background: var(--white) }
.svc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 2.75rem;
  flex-wrap: wrap;
}
.svc-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.15rem }
.scard {
  background: var(--off);
  border: 1px solid transparent;
  border-radius: var(--r);
  padding: 1.85rem;
  display: flex;
  gap: 1.15rem;
  align-items: flex-start;
  transition: border-color .24s, box-shadow .24s, transform .24s;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.scard::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--g10) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .24s;
}
.scard:hover { border-color: var(--g20); box-shadow: var(--shh); transform: translateY(-3px) }
.scard:hover::after { opacity: 1 }
.sico {
  width: 42px;
  height: 42px;
  background: var(--green);
  border-radius: var(--rs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.sico svg { width: 19px; height: 19px; fill: white }
.sbody { position: relative; z-index: 1 }
.sbody h3 {
  font-family: var(--fd);
  font-size: var(--md);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--black);
  margin-bottom: .35rem;
  line-height: 1.3;
}
.sbody p { font-size: var(--sm); color: var(--g500); line-height: 1.7 }
.scard.ft {
  grid-column: span 2;
  background: var(--green-xdk);
  border-color: transparent;
  flex-direction: row;
  align-items: center;
  gap: 1.85rem;
}
.scard.ft::after { background: linear-gradient(135deg, rgba(0,180,80,.1) 0%, transparent 55%); opacity: 1 }
.scard.ft:hover { border-color: rgba(0,180,80,.18); box-shadow: 0 8px 30px rgba(0,0,0,.22) }
.scard.ft .sico { width: 50px; height: 50px }
.scard.ft .sico svg { width: 22px; height: 22px }
.scard.ft .sbody h3 { font-size: var(--xl); color: var(--white) }
.scard.ft .sbody p  { color: rgba(255,255,255,.52); font-size: var(--base) }
.ftag {
  margin-left: auto;
  flex-shrink: 0;
  background: rgba(0,180,80,.13);
  border: 1px solid rgba(0,180,80,.23);
  color: rgba(0,220,110,.82);
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .28rem .7rem;
  border-radius: 100px;
  position: relative;
  z-index: 1;
}

/* ---- ABOUT ---- */
.ab-sec { background: var(--off) }
.ab-in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
}
.ab-vis { position: relative }
.ab-img { border-radius: var(--r); overflow: hidden; aspect-ratio: 4/3; background: var(--g100) }
.ab-ph {
  width: 100%;
  height: 100%;
  background: linear-gradient(140deg, #d8e8d8 0%, #bdd5bd 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .65rem;
}
.ab-ph svg  { width: 44px; height: 44px; fill: rgba(0,90,35,.25) }
.ab-ph span { font-size: var(--xs); color: var(--g300) }
.ab-bd {
  position: absolute;
  bottom: -1.15rem;
  right: -1.15rem;
  background: var(--green);
  color: var(--white);
  border-radius: var(--r);
  padding: 1rem 1.3rem;
  box-shadow: 0 6px 22px rgba(0,156,73,.32);
}
.ab-bn { font-family: var(--fd); font-size: 2rem; font-weight: 800; letter-spacing: -.05em; line-height: 1 }
.ab-bl { font-size: var(--xs); opacity: .8; margin-top: .12rem; font-weight: 500 }
.ab-txt .sl   { max-width: 100%; margin-bottom: 1.6rem }
.ab-list      { list-style: none; display: flex; flex-direction: column; gap: .6rem }
.ab-list li   { display: flex; align-items: center; gap: .65rem; font-size: var(--sm); color: var(--g700) }
.cdot {
  width: 17px;
  height: 17px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 8.5l2.5 2.5 5-5' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-size: contain;
}

/* ---- ZONAS ---- */
.cov-sec { background: var(--white) }
.cov-hd  { text-align: center; margin-bottom: 2.75rem }
.cov-hd .ey  { justify-content: center }
.cov-hd .sl  { margin: 0 auto; text-align: center }
.zon-g {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.15rem;
  max-width: 1140px;
  margin: 0 auto;
}
.zcard {
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.6rem;
  transition: transform .28s, box-shadow .28s;
}
.zcard::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,18,0,.86) 0%, rgba(0,18,0,.2) 62%, transparent 100%);
  z-index: 1;
}
.zcard:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.2) }
.z-ali { background: linear-gradient(140deg, #1a3a28 0%, #0d1f18 100%) }
.z-mad { background: linear-gradient(140deg, #1a2c3a 0%, #0d1b28 100%) }
.z-gal { background: linear-gradient(140deg, #1a2e1a 0%, #0d1b0d 100%) }
.zbgi  { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .07 }
.zbgi svg { width: 100px; height: 100px; fill: var(--green-lt) }
.zcon  { position: relative; z-index: 2 }
.zey   { font-size: .67rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--green-lt); opacity: .82; margin-bottom: .3rem }
.zname { font-family: var(--fd); font-size: var(--3xl); font-weight: 800; letter-spacing: -.04em; color: var(--white); line-height: 1.08; margin-bottom: .45rem }
.zdesc { font-size: var(--sm); color: rgba(255,255,255,.58); line-height: 1.55; margin-bottom: .65rem }
.ztags { display: flex; flex-wrap: wrap; gap: .3rem }
.ztag  {
  background: rgba(0,156,73,.17);
  border: 1px solid rgba(0,156,73,.26);
  color: rgba(255,255,255,.72);
  font-size: .65rem;
  font-weight: 500;
  padding: .18rem .58rem;
  border-radius: 100px;
}
.cit-row {
  max-width: 1140px;
  margin: 1.15rem auto 0;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: .9rem;
}
.ctile {
  background: var(--off);
  border: 1px solid var(--g100);
  border-radius: var(--rs);
  padding: .85rem 1rem;
  text-align: center;
  transition: border-color .2s, background .2s;
}
.ctile:hover  { border-color: var(--green); background: var(--g10) }
.ctile strong { display: block; font-family: var(--fd); font-size: var(--sm); font-weight: 700; letter-spacing: -.01em; color: var(--black); margin-bottom: .12rem }
.ctile span   { font-size: var(--xs); color: var(--g300) }

/* ---- WHY ---- */
.why-sec { background: var(--black); position: relative; overflow: hidden }
.why-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,156,73,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,156,73,.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.why-in  { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto }
.why-hd  { text-align: center; margin-bottom: 2.75rem }
.why-hd .st { color: var(--white) }
.why-hd .ey { justify-content: center }
.why-hd .sl { margin: 0 auto; color: rgba(255,255,255,.38); text-align: center }
.why-g  { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.15rem }
.wcard  {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r);
  padding: 1.65rem;
  transition: background .24s, border-color .24s, transform .24s;
}
.wcard:hover { background: rgba(0,156,73,.06); border-color: rgba(0,156,73,.2); transform: translateY(-3px) }
.wnum  { font-family: var(--fd); font-size: 2.25rem; font-weight: 800; letter-spacing: -.06em; color: rgba(0,156,73,.16); line-height: 1; margin-bottom: .55rem }
.wcard h3 { font-family: var(--fd); font-size: var(--md); font-weight: 700; letter-spacing: -.02em; color: var(--white); margin-bottom: .4rem; line-height: 1.3 }
.wcard p  { font-size: var(--sm); color: rgba(255,255,255,.38); line-height: 1.7 }

/* ---- SEO BLOCKS ---- */
.seo-sec { background: var(--off); padding: 4rem 5% }
.seo-in  { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.85rem }
.sblk h2 { font-family: var(--fd); font-size: var(--lg); font-weight: 700; letter-spacing: -.02em; color: var(--black); margin-bottom: .55rem; line-height: 1.3 }
.sblk h2 em { color: var(--green); font-style: normal }
.sblk p  { font-size: var(--sm); color: var(--g500); line-height: 1.78 }

/* ---- CTA BANNER ---- */
.cta-sec {
  background: var(--green);
  padding: 4.5rem 5%;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 110%, rgba(255,255,255,.09) 0%, transparent 65%);
}
.cta-sec h2 { font-family: var(--fd); font-size: clamp(1.6rem,3.8vw,2.5rem); font-weight: 800; letter-spacing: -.035em; color: var(--white); line-height: 1.15; margin-bottom: .8rem; position: relative }
.cta-sec p  { font-size: var(--base); color: rgba(255,255,255,.76); margin-bottom: 2rem; position: relative; line-height: 1.7 }
.cta-btns   { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; position: relative }
.btn-w {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--white);
  color: var(--green-dk);
  font-family: var(--fb);
  font-size: var(--sm);
  font-weight: 700;
  padding: .72rem 1.65rem;
  border-radius: 100px;
  transition: transform .2s, box-shadow .2s;
}
.btn-w:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.16) }
.btn-ow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: rgba(255,255,255,.8);
  font-size: var(--sm);
  font-weight: 500;
  padding: .72rem 1.4rem;
  border-radius: 100px;
  border: 1.5px solid rgba(255,255,255,.32);
  transition: border-color .2s, color .2s, background .2s;
}
.btn-ow:hover { border-color: rgba(255,255,255,.65); color: var(--white); background: rgba(255,255,255,.08) }

/* ---- CONTACTO ---- */
.ct-sec { background: var(--white) }
.ct-in  {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 4.5rem;
  align-items: start;
  max-width: 1140px;
  margin: 0 auto;
}
.ct-info .sl  { max-width: 100%; margin-bottom: 1.85rem }
.ct-cards     { display: flex; flex-direction: column; gap: .8rem }
.ccard {
  background: var(--off);
  border: 1px solid transparent;
  border-radius: var(--r);
  padding: 1.1rem 1.35rem;
  display: flex;
  gap: .85rem;
  align-items: center;
  transition: border-color .2s, box-shadow .2s;
}
.ccard:hover { border-color: var(--g100); box-shadow: var(--shc) }
.ccard.hi    { background: var(--green); border-color: transparent }
.ccard.hi:hover { box-shadow: 0 6px 22px rgba(0,156,73,.28) }
.cico {
  width: 34px;
  height: 34px;
  border-radius: var(--rx);
  background: var(--g10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ccard.hi .cico { background: rgba(255,255,255,.14) }
.cico svg       { width: 15px; height: 15px; fill: var(--green) }
.ccard.hi .cico svg { fill: white }
.clbl { font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--g300); margin-bottom: .08rem }
.ccard.hi .clbl { color: rgba(255,255,255,.6) }
.cval { font-size: var(--sm); font-weight: 600; color: var(--black) }
.ccard.hi .cval { color: var(--white) }
.fwrap { background: var(--off); border-radius: var(--r); padding: 2rem; border: 1px solid var(--g100) }
.fhd   { font-family: var(--fd); font-size: var(--xl); font-weight: 700; letter-spacing: -.025em; color: var(--black); margin-bottom: .3rem }
.fsub  { font-size: var(--xs); color: var(--g300); margin-bottom: 1.6rem }
.frow  { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem }
.fg    { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem }
.fg label { font-size: var(--xs); font-weight: 600; color: var(--g500); letter-spacing: .03em }
.fg input,
.fg select,
.fg textarea {
  background: var(--white);
  border: 1.5px solid var(--g100);
  border-radius: var(--rs);
  padding: .62rem .85rem;
  font-family: var(--fb);
  font-size: var(--sm);
  color: var(--black);
  width: 100%;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
}
.fg input:focus,
.fg select:focus,
.fg textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--g10) }
.fg textarea { resize: vertical; min-height: 88px }
.btn-sub {
  width: 100%;
  background: var(--green);
  color: var(--white);
  font-family: var(--fb);
  font-size: var(--sm);
  font-weight: 600;
  padding: .78rem;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .2s;
  margin-top: .2rem;
  letter-spacing: .01em;
}
.btn-sub:hover { background: var(--green-lt); box-shadow: 0 4px 16px rgba(0,156,73,.32); transform: translateY(-1px) }

/* ---- FOOTER ---- */
.foot {
  background: var(--black);
  padding: 4rem 5% 1.75rem;
  color: rgba(255,255,255,.38);
  font-size: var(--sm);
}
.ft-top {
  max-width: 1140px;
  margin: 0 auto 2.75rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.25rem;
}
.ft-brand p { line-height: 1.7; font-size: .78rem; margin-top: .7rem }
.ft-col h4  { font-family: var(--fd); font-size: var(--xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.68); margin-bottom: .9rem }
.ft-col ul  { list-style: none; display: flex; flex-direction: column; gap: .5rem }
.ft-col ul a { font-size: var(--xs); transition: color .2s }
.ft-col ul a:hover { color: var(--green-lt) }
.ft-bot {
  max-width: 1140px;
  margin: 0 auto;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: var(--xs);
}
.ft-bot a:hover { color: var(--green-lt) }

/* ============================================================
   PÁGINAS INTERIORES (servicio, blog, landing)
   ============================================================ */

/* ---- HERO INTERIOR ---- */
.page-hero {
  padding: 100px 5% 3.5rem;
  background: var(--white);
  border-bottom: 1px solid var(--g100);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,156,73,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,156,73,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto }
.page-hero--landing .page-hero__inner { text-align: center; max-width: 780px }
.page-hero__title {
  font-family: var(--fd);
  font-size: clamp(1.75rem, 3.8vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -.032em;
  line-height: 1.12;
  color: var(--black);
  margin: .6rem 0 .85rem;
}
.page-hero__title--xl { font-size: clamp(2rem, 4.5vw, 3.25rem) }
.page-hero__sub { font-size: var(--md); color: var(--g500); line-height: 1.7; margin-bottom: 1.5rem; max-width: 620px }
.page-hero--landing .page-hero__sub { margin: 0 auto 1.65rem }
.page-hero__cta { margin-top: .5rem }

/* ---- BREADCRUMB ---- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--xs);
  color: var(--g300);
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--green); transition: opacity .2s }
.breadcrumb a:hover { opacity: .75 }

/* ---- POST META ---- */
.post-meta { display: flex; align-items: center; gap: 1rem; font-size: var(--xs); color: var(--g300); margin-top: .35rem }

/* ---- LANDING TRUST ---- */
.landing-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .65rem 1.25rem;
  margin-top: 1.5rem;
  font-size: var(--xs);
  font-weight: 500;
  color: var(--g500);
}

/* ---- PAGE MAIN ---- */
.page-main { padding: 3rem 5% 5rem }
.page-wrap { max-width: 860px; margin: 0 auto }
.page-wrap--blog { max-width: 780px }

/* ---- FEATURED IMAGE ---- */
.page-featured-img { margin: 0 0 2.5rem; border-radius: var(--r); overflow: hidden; aspect-ratio: 16/7 }
.page-featured-img img { width: 100%; height: 100%; object-fit: cover }

/* ---- PROSE ---- */
.prose { color: var(--g700); font-size: var(--base); line-height: 1.78 }
.prose h1,
.prose h2,
.prose h3,
.prose h4 { font-family: var(--fd); font-weight: 700; letter-spacing: -.025em; color: var(--black); margin: 2rem 0 .65rem; line-height: 1.25 }
.prose h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 0 }
.prose h2 { font-size: clamp(1.2rem, 2.4vw, 1.55rem) }
.prose h3 { font-size: var(--xl) }
.prose h4 { font-size: var(--lg) }
.prose p  { margin: 0 0 1.1rem }
.prose ul,
.prose ol { margin: .75rem 0 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .4rem }
.prose li { font-size: var(--base) }
.prose ul li::marker { color: var(--green) }
.prose strong { font-weight: 600; color: var(--black) }
.prose em     { font-style: italic; color: var(--g500) }
.prose a      { color: var(--green); text-decoration: underline; text-decoration-color: var(--g20); text-underline-offset: 3px; transition: text-decoration-color .2s }
.prose a:hover { text-decoration-color: var(--green) }
.prose blockquote {
  border-left: 3px solid var(--green);
  padding: .75rem 1.25rem;
  margin: 1.5rem 0;
  background: var(--g10);
  border-radius: 0 var(--rs) var(--rs) 0;
  font-style: italic;
  color: var(--g500);
}
.prose table { width: 100%; border-collapse: collapse; font-size: var(--sm); margin: 1.5rem 0; border-radius: var(--rs); overflow: hidden }
.prose th { background: var(--green); color: var(--white); padding: .6rem 1rem; text-align: left; font-weight: 600 }
.prose td { padding: .55rem 1rem; border-bottom: 1px solid var(--g100) }
.prose tr:last-child td { border-bottom: none }
.prose tr:nth-child(even) td { background: var(--off) }

/* ---- AUTHOR BOX ---- */
.author-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--off);
  border: 1px solid var(--g100);
  border-radius: var(--r);
  padding: 1.1rem 1.35rem;
  margin: 2.5rem 0;
  flex-wrap: wrap;
}
.author-box__icon { width: 42px; height: 42px; background: var(--g10); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.author-box__name { font-weight: 600; font-size: var(--sm); color: var(--black) }
.author-box__role { font-size: var(--xs); color: var(--g300); margin-top: .1rem }
.author-box__dates { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; font-size: var(--xs); color: var(--g300) }

/* ---- CTA INLINE ---- */
.cta-inline {
  background: var(--green);
  border-radius: var(--r);
  padding: 2.25rem 2rem;
  margin: 2.5rem 0 0;
  position: relative;
  overflow: hidden;
}
.cta-inline::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 110%, rgba(255,255,255,.1) 0%, transparent 65%) }
.cta-inline--landing { text-align: center }
.cta-inline__title { font-family: var(--fd); font-size: clamp(1.2rem, 2.4vw, 1.55rem); font-weight: 800; letter-spacing: -.025em; color: var(--white); margin: 0 0 .5rem; position: relative }
.cta-inline p { font-size: var(--sm); color: rgba(255,255,255,.75); margin: 0 0 1.35rem; position: relative; line-height: 1.65 }
.cta-inline--landing p { max-width: 480px; margin-left: auto; margin-right: auto }
.cta-inline__btns { display: flex; gap: .65rem; flex-wrap: wrap; position: relative }
.cta-inline--landing .cta-inline__btns { justify-content: center }
.cta-inline .btn-g { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.3) }
.cta-inline .btn-g:hover { color: var(--white); border-color: rgba(255,255,255,.65); background: rgba(255,255,255,.1) }

/* ---- BLOG GRID ---- */
.blog-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; margin-top: 3rem }
.blog-card { background: var(--off); border: 1px solid var(--g100); border-radius: var(--r); overflow: hidden; transition: box-shadow .24s, transform .24s }
.blog-card:hover { box-shadow: var(--shh); transform: translateY(-3px) }
.blog-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover }
.blog-card__body { padding: 1.25rem }
.blog-card__body time { font-size: var(--xs); color: var(--g300); display: block; margin-bottom: .35rem }
.blog-card__body h2 { font-family: var(--fd); font-size: var(--md); font-weight: 700; letter-spacing: -.02em; color: var(--black); margin-bottom: .45rem; line-height: 1.35 }
.blog-card__body h2 a { color: inherit }
.blog-card__body h2 a:hover { color: var(--green) }
.blog-card__body p { font-size: var(--sm); color: var(--g500); line-height: 1.65; margin-bottom: .85rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }

/* ---- RESPONSIVE ---- */
@media(max-width: 1024px) {
  .stats-g  { grid-template-columns: repeat(2,1fr) }
  .zon-g    { grid-template-columns: 1fr 1fr }
  .cit-row  { grid-template-columns: repeat(2,1fr) }
  .ft-top   { grid-template-columns: 1fr 1fr; gap: 1.75rem }
  .ct-in    { grid-template-columns: 1fr; gap: 2.75rem }
  .ab-in    { grid-template-columns: 1fr }
  .seo-in   { grid-template-columns: 1fr }
  .why-g    { grid-template-columns: 1fr 1fr }
}
@media(max-width: 768px) {
  .nav-links { display: none }
  .hbg       { display: flex }
  .svc-grid  { grid-template-columns: 1fr }
  .scard.ft  { flex-direction: column; gap: 1.15rem }
  .ftag      { margin-left: 0 }
  .zon-g     { grid-template-columns: 1fr }
  .why-g     { grid-template-columns: 1fr }
  .frow      { grid-template-columns: 1fr }
  .ft-top    { grid-template-columns: 1fr }
  .ab-bd     { right: 0 }
  .trust     { gap: 1.15rem }
  .page-hero { padding: 90px 5% 2.5rem }
  .author-box { flex-direction: column; align-items: flex-start }
  .author-box__dates { align-items: flex-start; margin-left: 0 }
  .blog-grid { grid-template-columns: 1fr }
  .cta-inline { padding: 1.65rem 1.25rem }
}
@media(max-width: 480px) {
  .cit-row  { grid-template-columns: 1fr }
  .stats-g  { grid-template-columns: 1fr }
  .hero-act { flex-direction: column; align-items: stretch }
  .btn-p,.btn-g { justify-content: center }
  .cta-inline__btns { flex-direction: column }
  .cta-inline__btns .btn-p,
  .cta-inline__btns .btn-g { justify-content: center }
}