/* ENNEVOON — Ajustes compartidos de UI/UX (se carga después de los estilos de cada página) */

:root{ --env-header-h: 76px; }

/* ---------- Encabezado ---------- */
header#siteHeader, body > header{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:nowrap;
  padding-left:clamp(16px,4vw,48px); padding-right:clamp(16px,4vw,48px);
}
header .logo img{
  height:clamp(30px,3.4vw,40px); width:auto; display:block;
  image-rendering:auto;
}
header .logo{ flex:0 0 auto; min-width:0; }
.logo-tagline{ white-space:nowrap; }
@media (max-width:1180px){ .logo-tagline{ display:none; } }

.nav-links{ min-width:0; }
.nav-links ul{ flex-wrap:nowrap; }
.nav-links a{ white-space:nowrap; }

/* ---------- Menú móvil (drawer accesible) ---------- */
.menu-toggle{
  background:none; border:0; font-size:26px; line-height:1; cursor:pointer;
  color:inherit; padding:8px; border-radius:8px;
}
.menu-toggle:focus-visible,
.nav-links a:focus-visible,
a:focus-visible, button:focus-visible{
  outline:2px solid currentColor; outline-offset:3px;
}

#envNavOverlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
  z-index:900;
}
body.env-nav-open #envNavOverlay{ opacity:1; visibility:visible; }

@media (max-width:1024px){
  .nav-links{
    position:fixed; top:0; right:0; height:100dvh; width:min(320px,86vw);
    background:#0d0f0e; color:#fff;
    display:flex !important; flex-direction:column; align-items:stretch;
    gap:8px; padding:88px 24px 32px; overflow-y:auto;
    transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
    z-index:950; box-shadow:-20px 0 60px rgba(0,0,0,.35);
    visibility:hidden;
  }
  .nav-links.open{ transform:translateX(0); visibility:visible; }
  .nav-links ul{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    list-style:none; margin:0; padding:0;
  }
  .nav-links ul li a{
    display:block; padding:14px 4px; font-size:17px; color:#fff;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav-links .btn{ margin-top:20px; text-align:center; }
  .env-nav-close{
    position:absolute; top:18px; right:18px; background:none; border:0;
    color:#fff; font-size:28px; line-height:1; cursor:pointer; padding:8px;
  }
  body.env-nav-open{ overflow:hidden; }
}
@media (min-width:1025px){
  .env-nav-close{ display:none; }
  #envNavOverlay{ display:none; }
}

/* ---------- Hero: menos aire muerto ---------- */
.hero{ min-height:auto !important; padding-top:clamp(120px,16vh,180px); padding-bottom:clamp(80px,12vh,130px); }
.hero h1{ font-size:clamp(2rem,6vw,4.25rem); line-height:1.05; }
.hero .lede{ font-size:clamp(1rem,2.2vw,1.35rem); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }
@media (max-width:520px){
  .hero-cta .btn{ width:100%; text-align:center; }
  .scroll-cue{ display:none; }
}

/* ---------- Anti-desbordes ---------- */
html, body{ max-width:100%; overflow-x:hidden; }
img, svg, video, canvas{ max-width:100%; }
table{ max-width:100%; }
h1,h2,h3,p,li,a{ overflow-wrap:anywhere; }

/* ---------- Tipografía y ritmo en móvil ---------- */
@media (max-width:640px){
  .section-pad{ padding-top:64px; padding-bottom:64px; }
  .section-tag{ font-size:clamp(1.5rem,6.2vw,2rem); line-height:1.15; }
  .wrap{ padding-left:20px; padding-right:20px; }
}

/* ---------- Objetivos táctiles ---------- */
.btn{ min-height:46px; display:inline-flex; align-items:center; justify-content:center; }

/* ---------- Pie ---------- */
footer .logo img{ height:34px; width:auto; }

/* ---------- Preferencia de movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- Ajustes finos de encabezado y menú ---------- */
@media (max-width:1279px){ .logo-tagline{ display:none !important; } }
header .nav-links{ gap:clamp(14px,2vw,28px); }
header .nav-links ul li{ margin-right:18px; }
header .nav-links ul li{ margin-right:clamp(12px,1vw,20px); }
header .nav-links ul li:last-child{ margin-right:0; }

@media (max-width:1024px){
  .nav-links ul li a,
  .nav-links ul li a:link,
  .nav-links ul li a:visited{ color:#f4f6f5 !important; opacity:1; }
  .nav-links ul li a:hover,
  .nav-links ul li[class*="active"] a{ color:#c8f24c !important; }
}

/* ---------- Áreas táctiles cómodas en celular ---------- */
@media (max-width: 768px){
  .nav-links a,
  footer a,
  .footer a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  .faq-item summary{ min-height:48px; }
}