/* ═══════════════════════════════════════════════════════
   site.css — Edwin Ruiz / SEO Consultoria
   CSS compartido entre las 10 paginas del sitio (nav, footer,
   megamenu, tipografia base, reset, variables, componentes comunes)
═══════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{background:#F5F5F7;overflow-x:clip}

body{font-family:'Manrope',sans-serif;background:#F5F5F7;color:var(--seoText);overflow-x:clip;cursor:none;-webkit-font-smoothing:antialiased}

h1,h2,h3,h4,h5,h6{font-family:'Sora',sans-serif}

::-webkit-scrollbar{width:2px}

a{text-decoration:none}

@keyframes pshim{0%{background-position:0 0}100%{background-position:200% 0}}

#nav.scrolled{background:rgba(255,255,255,.96);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border-bottom-color:#E2E8F0;padding:12px 48px;box-shadow:0 2px 16px rgba(0,0,0,.07)}

.nav-brand{font-family:'Sora',sans-serif;font-size:1.18rem;color:#0F172A;letter-spacing:-.02em;flex-shrink:0}

.nav-brand em{color:#2563EB;font-style:normal}

.nav-links{display:flex;align-items:center;gap:4px;list-style:none}

.nav-links > li > a{font-family:'Manrope',sans-serif;font-size:.78rem;font-weight:500;color:#475569;letter-spacing:.02em;transition:color .2s;padding:8px 14px;border-radius:6px;display:inline-flex;align-items:center}

.nav-links > li > a:hover{color:#0F172A}

.nav-btn:hover{background:#1D4ED8;transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,.35)}

#nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08);border-radius:8px;cursor:pointer;padding:9px;transition:background .2s}

#nav-hamburger span{display:block;height:1.5px;background:#0F172A;border-radius:1px;transition:transform .3s,opacity .3s,width .3s}

#nav-hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}

#nav-hamburger.open span:nth-child(2){opacity:0;width:0}

#nav-hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

#mobile-drawer{position:fixed;top:0;right:0;bottom:0;width:min(88vw,360px);background:rgba(10,17,32,.99);border-left:1px solid rgba(255,255,255,.07);backdrop-filter:blur(32px);z-index:999;transform:translateX(100%);transition:transform .38s cubic-bezier(.4,0,.2,1);overflow-y:auto;padding:80px 0 40px}

#mobile-drawer.open{transform:translateX(0)}

#drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:998;opacity:0;pointer-events:none;transition:opacity .3s}

#drawer-backdrop.open{opacity:1;pointer-events:auto}

.mob-section{padding:8px 24px}

.mob-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.04);color:rgba(255,255,255,.75);font-family:'Manrope',sans-serif;font-size:.88rem;font-weight:500;transition:color .2s}

.mob-item:hover{color:#fff}

.mob-item-icon{font-size:1.1rem;flex-shrink:0;width:28px;text-align:center}

.mob-divider{height:1px;background:rgba(255,255,255,.06);margin:16px 0}

.mob-cta:hover{background:#1D4ED8}

.section{padding:100px 0}

.section-light{background:#F5F5F7}

.section-white{background:#fff}

.section-dark{background:var(--seoDark);color:#fff}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}

.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}

.serif-lg{font-family:'Sora',sans-serif;font-size:clamp(2rem,3vw,3rem);line-height:1.1;letter-spacing:-.035em}

.body-text{font-family:'Manrope',sans-serif;font-size:.95rem;line-height:1.78;color:var(--seoTextSecondary)}

.on-dark{color:#fff}

.italic{font-style:italic}

.overline{display:flex;align-items:center;gap:10px;font-family:'Manrope',sans-serif;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--seoTextSecondary)}

.overline.dark{color:var(--seoText)}

.overline::before{content:'';width:20px;height:1px;background:currentColor;flex-shrink:0}

.tag-err{background:rgba(239,68,68,.1);color:var(--seoAlert);border:1px solid rgba(239,68,68,.2)}

.tag-wrn{background:rgba(245,158,11,.1);color:#D97706;border:1px solid rgba(245,158,11,.2)}

.tag-ok{background:rgba(34,197,94,.1);color:#16A34A;border:1px solid rgba(34,197,94,.2)}

.tag-blue{background:var(--blue-10);color:var(--seoBlue);border:1px solid var(--blue-20)}

.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;background:var(--growth-10);border:1px solid var(--growth-30);border-radius:100px;font-family:'Manrope',sans-serif;font-size:.7rem;color:var(--seoGrowth)}

.light-card{background:#fff;border:1px solid var(--light-border);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.06);transition:all .3s cubic-bezier(.4,0,.2,1)}

.light-card:hover{box-shadow:0 10px 40px rgba(0,0,0,.1);transform:translateY(-4px);border-color:#CBD5E1}

.dark-card{background:rgba(255,255,255,.04);border:1px solid var(--dark-border);border-radius:16px;transition:all .4s cubic-bezier(.4,0,.2,1)}

.dark-card:hover{background:rgba(255,255,255,.07);border-color:var(--dark-border-strong);transform:translateY(-4px);box-shadow:0 28px 60px rgba(0,0,0,.35)}

.f-input{width:100%;background:#fff;border:1.5px solid #E2E8F0;border-radius:10px;padding:14px 18px;color:var(--seoText);font-family:'Manrope',sans-serif;font-size:.9rem;transition:all .25s;outline:none}

.f-input::placeholder{color:#94A3B8}

.f-label{display:block;font-family:'Manrope',sans-serif;font-size:.62rem;color:var(--seoTextSecondary);letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}

.g-in{opacity:0}

.g-scale{opacity:0;transform:scale(.93)}

.g-left{opacity:0;transform:translateX(-28px)}

.breadcrumb a{color:#94A3B8;transition:color .2s}

.breadcrumb span{color:#CBD5E1}

.feature-item{display:flex;align-items:flex-start;gap:14px;padding:18px 0;border-bottom:1px solid var(--light-border)}

.feature-item:last-child{border-bottom:none}

.step-item{display:flex;gap:20px;align-items:flex-start;padding:24px;border-radius:14px;background:#fff;border:1px solid var(--light-border);transition:all .3s;box-shadow:0 1px 3px rgba(0,0,0,.04)}

.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#E2E8F0;border:1px solid #E2E8F0;border-radius:16px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.04)}

.stat-cell{background:#fff;padding:24px;text-align:center}

.stat-num{font-family:'Sora',sans-serif;font-size:1.8rem;font-weight:800;line-height:1;margin-bottom:4px}

.stat-label{font-family:'Manrope',sans-serif;font-size:.62rem;color:var(--seoTextSecondary);letter-spacing:.06em;text-transform:uppercase}

/* ═══ MEGAMENU (inyectado, replicado de index.html) ═══ */
/* ═══ NAV ═══ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:18px 48px;display:flex;align-items:center;
  justify-content:space-between;
  transition:padding .4s,background .4s,border-color .4s;
  border-bottom:1px solid transparent;
}

#nav.scrolled{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-bottom-color:#E2E8F0;
  padding:12px 48px;
  box-shadow:0 2px 16px rgba(0,0,0,.07);
}

/* ── Desktop nav links ── */
.nav-links{display:flex;align-items:center;gap:4px}

.nav-links > li{list-style:none;position:relative}

.nav-links > li > a,
.nav-links > li > button{
  font-family:'Manrope',sans-serif;font-size:.78rem;font-weight:500;
  color:#475569;letter-spacing:.02em;
  transition:color .2s;background:none;border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 14px;border-radius:6px;
}

.nav-links > li > a:hover,
.nav-links > li > button:hover,
.nav-links > li.open > button{color:#0F172A}

.nav-links > li.open > button{background:rgba(37,99,235,.06)}

.nav-chevron{width:10px;height:10px;transition:transform .25s}

.nav-links > li.open .nav-chevron{transform:rotate(180deg)}

/* ── Megamenu panel — FULL WIDTH ── */
.mega-panel{
  position:fixed;top:var(--nav-h,62px);left:0;right:0;
  transform:translateY(-8px);
  opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
  background:rgba(8,14,28,.98);
  border-top:1px solid rgba(37,99,235,.15);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  backdrop-filter:blur(32px);
  -webkit-backdrop-filter:blur(32px);
  z-index:1500;
  padding:36px 48px 28px;
}

.nav-links > li.open .mega-panel{
  opacity:1;pointer-events:auto;
  transform:translateY(0);
}

/* Inner wrapper max-width */
.mega-inner{max-width:1240px;margin:0 auto;display:grid;gap:32px}

/* Servicios: 5 cols + aside */
.mega-inner.layout-servicios{grid-template-columns:repeat(5,1fr) 200px}

/* Países: 4 cols + aside */
.mega-inner.layout-paises{grid-template-columns:repeat(4,1fr)}

/* Casos / Blog: 3 cols + aside */
.mega-inner.layout-3{grid-template-columns:repeat(3,1fr) 220px}

.mega-header{
  font-family:'Manrope',sans-serif;font-size:.55rem;letter-spacing:.2em;
  color:rgba(37,99,235,.55);text-transform:uppercase;
  padding-bottom:20px;margin-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.06);
  grid-column:1/-1;
}

.mega-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;border-radius:12px;
  transition:background .18s;cursor:pointer;text-decoration:none;
}

.mega-item:hover{background:rgba(255,255,255,.05)}

.mega-item-icon{
  width:36px;height:36px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:1.05rem;margin-top:1px;
}

.mega-item-title{font-family:'Manrope',sans-serif;font-size:.82rem;font-weight:700;color:#fff;margin-bottom:4px}

.mega-item-desc{font-family:'Manrope',sans-serif;font-size:.68rem;color:rgba(255,255,255,.38);line-height:1.5}

/* Aside promo card */
.mega-aside{
  background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(29,78,216,.1));
  border:1px solid rgba(37,99,235,.18);
  border-radius:14px;padding:22px;
  display:flex;flex-direction:column;justify-content:space-between;
  grid-row:2;
}

.mega-aside-tag{font-family:'Manrope',sans-serif;font-size:.55rem;letter-spacing:.18em;color:var(--seoGrowth);text-transform:uppercase;margin-bottom:10px}

.mega-aside-title{font-family:'Sora',sans-serif;font-size:1rem;font-weight:700;color:#fff;line-height:1.3;margin-bottom:8px}

.mega-aside-sub{font-family:'Manrope',sans-serif;font-size:.68rem;color:rgba(255,255,255,.38);line-height:1.5;margin-bottom:16px}

.mega-aside-cta{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;background:var(--seoGrowth);
  color:#fff;font-family:'Manrope',sans-serif;font-size:.72rem;font-weight:600;
  border-radius:8px;letter-spacing:.04em;width:fit-content;
  transition:background .2s,gap .2s;
}

.mega-aside-cta:hover{background:#1D4ED8;gap:10px}

/* Footer bar */
.mega-footer{
  grid-column:1/-1;
  padding-top:16px;margin-top:4px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}

.mega-footer-text{font-family:'Manrope',sans-serif;font-size:.65rem;color:rgba(255,255,255,.22);display:flex;align-items:center;gap:16px}

.mega-footer-text span{display:flex;align-items:center;gap:5px}

.mega-footer-text span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--seoGrowth);flex-shrink:0}

.mega-footer-cta{
  font-family:'Manrope',sans-serif;font-size:.7rem;font-weight:600;
  color:var(--seoGrowth);display:flex;align-items:center;gap:5px;
  transition:gap .2s;white-space:nowrap;
}

.mega-footer-cta:hover{gap:9px}

/* ── CTA button ── */
.nav-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 20px;
  background:var(--seoGrowth);
  color:#fff;
  font-family:'Manrope',sans-serif;font-size:.73rem;font-weight:600;
  border-radius:8px;letter-spacing:.04em;
  border:none;cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  white-space:nowrap;flex-shrink:0;
}

/* ── Hamburger ── */
#nav-hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:38px;height:38px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);border-radius:8px;
  cursor:pointer;padding:9px;transition:background .2s;
}

#nav-hamburger:hover{background:rgba(255,255,255,.1)}

#nav-hamburger span{display:block;height:1.5px;background:#fff;border-radius:1px;transition:transform .3s,opacity .3s,width .3s}

/* ── Mobile drawer ── */
#mobile-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(88vw,360px);
  background:rgba(10,17,32,.99);
  border-left:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(32px);
  -webkit-backdrop-filter:blur(32px);
  z-index:999;
  transform:translateX(100%);
  transition:transform .38s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
  padding:80px 0 40px;
}

#drawer-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:998;opacity:0;pointer-events:none;
  transition:opacity .3s;
}

.mob-section-title{
  font-family:'Manrope',sans-serif;font-size:.55rem;letter-spacing:.2em;
  color:rgba(37,99,235,.5);text-transform:uppercase;
  padding:0 0 8px;margin-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.mob-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 8px;border-radius:8px;
  font-family:'Manrope',sans-serif;font-size:.85rem;font-weight:500;
  color:rgba(255,255,255,.65);cursor:pointer;
  transition:background .15s,color .15s;text-decoration:none;
}

.mob-item:hover{background:rgba(255,255,255,.05);color:#fff}

.mob-item-icon{font-size:.95rem;width:24px;text-align:center;flex-shrink:0}

.mob-divider{height:1px;background:rgba(255,255,255,.06);margin:10px 24px}

.mob-cta{
  margin:20px 24px 0;display:flex;align-items:center;justify-content:center;
  gap:8px;padding:14px;background:var(--seoGrowth);
  color:#fff;font-family:'Manrope',sans-serif;font-size:.82rem;font-weight:600;
  border-radius:10px;letter-spacing:.04em;text-decoration:none;
  transition:background .2s;
}

/* ── 1024px: tablet landscape ── */
@media(max-width:1024px){
  #nav{padding:16px 24px}
  #nav.scrolled{padding:12px 24px}
  .nav-links,.nav-btn{display:none}
  #nav-hamburger{display:flex}
  .wrap,.wrap-sm{padding-inline:28px}
  .section{padding-block:96px}
  .mega-panel{display:none!important}
}