/* EAISY LABS — estilos compartidos del sitio
   Los estilos de layout/detalle viven inline en cada página (fidelidad al handoff);
   aquí van resets, tipografía base, keyframes, hovers, nav/footer y media queries. */

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:#fff;font-family:'Plus Jakarta Sans',sans-serif;color:#0C1E3E;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:#0C1E3E}

/* ---------- Keyframes ---------- */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes pulsering{0%{box-shadow:0 0 0 0 rgba(16,197,183,0.5)}100%{box-shadow:0 0 0 10px rgba(16,197,183,0)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Reveal on scroll (tolerante a ausencia de JS) ---------- */
.reveal{opacity:1}
html.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
html.js .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  [style*="floaty"],[style*="spin"],[style*="pulsering"]{animation:none !important}
}

/* ---------- Hover helpers (equivalen a style-hover del prototipo) ---------- */
.hov-navy:hover{background:#13294F !important}
.hov-outline:hover{border-color:#10C5B7 !important;color:#10C5B7 !important}
.hov-aqua:hover{background:#3BE0D3 !important}
.hov-lift{transition:transform .2s ease,box-shadow .2s ease}
.hov-lift:hover{transform:translateY(-4px);box-shadow:0 24px 54px -18px rgba(12,30,62,0.26) !important}

/* ---------- Nav ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.85);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid rgba(12,30,62,0.06)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-desktop{display:flex;align-items:center;gap:6px}
.nav-link{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:14px;color:#55617A;background:transparent;padding:8px 14px;border-radius:999px;text-decoration:none;transition:all .15s}
.nav-link:hover{color:#0C1E3E;background:#F2F6FC}
.nav-link.active{font-weight:700;color:#0C1E3E;background:#F2F6FC}
.nav-cta{font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:14px;color:#fff;background:#0C1E3E;padding:11px 22px;border-radius:999px;text-decoration:none;box-shadow:0 6px 16px rgba(12,30,62,0.18);white-space:nowrap}
.nav-cta:hover{background:#13294F}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:4px}
.hamburger span{display:block;width:22px;height:2px;background:#0C1E3E;border-radius:2px}
.mobile-menu{border-top:1px solid rgba(12,30,62,0.06);background:#fff;padding:12px 24px 20px;display:flex;flex-direction:column;gap:4px}
.mobile-menu[hidden]{display:none}
.mnav-link{font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:16px;color:#0C1E3E;padding:12px 8px;text-decoration:none;border-radius:10px}
.mnav-link:hover{background:#F2F6FC}
.mnav-cta{margin-top:8px;text-align:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:15px;color:#fff;background:#0C1E3E;padding:13px;border-radius:999px;text-decoration:none}
@media (max-width:1024px){
  .nav-desktop{display:none}
  .nav-cta{display:none}
  .hamburger{display:flex}
}

/* ---------- Footer ---------- */
.site-footer{background:#0C1E3E;color:#fff;font-family:'Plus Jakarta Sans',sans-serif}
.foot-grid{max-width:1200px;margin:0 auto;padding:64px 24px 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}
.foot-title{font-family:'Onest',sans-serif;font-weight:700;font-size:14px;color:rgba(255,255,255,0.55);margin:0 0 16px}
.foot-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.flink{color:rgba(255,255,255,0.8);text-decoration:none;font-size:15px}
.flink:hover{color:#10C5B7}
.foot-bar{max-width:1200px;margin:0 auto;padding:24px;border-top:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:760px){
  .foot-grid{grid-template-columns:1fr;gap:32px}
}

/* ---------- Acordeón FAQ (Precios) ---------- */
.acc-body{overflow:hidden;transition:max-height .35s ease,opacity .3s ease;max-height:0;opacity:0}
.acc-item.open .acc-body{max-height:280px;opacity:1}
.acc-icon{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:#F2F6FC;color:#0C1E3E;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:400;transition:all .3s;transform:rotate(0deg)}
.acc-item.open .acc-icon{background:#10C5B7;color:#fff;transform:rotate(45deg)}

/* ---------- Formularios ---------- */
input:focus,textarea:focus{border-color:#10C5B7 !important;box-shadow:0 0 0 3px rgba(16,197,183,0.14)}

/* ---------- Media queries por página (atributos data-*) ---------- */
/* Inicio */
@media (max-width:900px){
  [data-hero],[data-split]{grid-template-columns:1fr !important;gap:40px !important}
  [data-pillars],[data-cases]{grid-template-columns:1fr !important}
  [data-behind]{grid-template-columns:1fr !important;gap:48px !important}
}
@media (max-width:640px){
  [data-cmo-steps]{grid-template-columns:1fr !important;gap:24px !important}
  [data-cmo-hline]{display:none !important}
  [data-cmo-step]{flex-direction:row !important;text-align:left !important;align-items:flex-start !important;gap:16px !important}
  [data-cmo-step]:not(:last-child)::after{content:'';position:absolute;left:19px;top:44px;bottom:-24px;width:2px;background:rgba(16,197,183,0.3)}
}
@media (max-width:560px){
  [data-hero] h1{font-size:44px !important}
}
/* Servicios: en móvil el mockup (order:1) baja debajo del texto (order:2) */
@media (max-width:900px){
  [data-split] [style*="order:1"]{order:2 !important}
  [data-split] [style*="order:2"]{order:1 !important}
}
/* Metodología */
@media (max-width:900px){
  [data-band]{grid-template-columns:1fr !important;gap:32px !important}
}
/* Precios */
@media (max-width:820px){
  [data-price]{grid-template-columns:1fr !important}
}
/* Contacto */
@media (max-width:480px){
  [data-namerow]{grid-template-columns:1fr !important}
}