/* =====================================================================
   ZION · Capa móvil (7 sep 2026)
   Se carga después de Style.css. Casi todo vive dentro de
   @media (max-width: 768px); las pocas reglas globales están marcadas.
   ===================================================================== */

/* --- Globales (todas las pantallas) --- */
.loc-list{display:none}                       /* lista de sedes: solo móvil */
.m-cta{display:none}                          /* barra inferior: solo móvil */
.hero-sub{display:none}                       /* subtítulo del hero: solo móvil */
.h1-mov{display:none}                         /* versión móvil del título: solo móvil */
.grecaptcha-badge{visibility:hidden}          /* el aviso de reCAPTCHA va en texto bajo el formulario */
.recaptcha-note{font-size:.75rem;color:#777;margin-top:12px;line-height:1.4}
.recaptcha-note a{color:#777;text-decoration:underline}
/* Mapa: teselas OSM (claras) oscurecidas con filtro para mantener el look */
#map .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.2)}
#map .leaflet-control-attribution{font-size:10px}

@media (max-width: 768px){

  /* ---------- Base ---------- */
  html{-webkit-text-size-adjust:100%}
  body{font-size:16px;line-height:1.55}
  .container{padding:0 18px}
  main section{padding:44px 0 !important}
  section + section{padding-top:44px !important}
  .section-title{margin-bottom:22px !important}
  .section-title h2, h2{font-size:1.55rem !important;line-height:1.15 !important;letter-spacing:-.2px}
  .section-title p{font-size:.98rem !important;margin-top:4px !important}
  h3{font-size:1.05rem}
  .btn{padding:14px 22px;font-size:1rem;min-height:48px;justify-content:center}

  /* ---------- Encabezado + menú ---------- */
  header#header{padding:0 !important}
  header#header.hide{transform:none !important}   /* en celular el encabezado (y el menú) siempre a la vista */
  .header-wrap{padding:10px 16px !important;min-height:64px;max-width:none !important}
  .brand img{height:44px !important;width:auto}
  .menu-toggle{
    display:grid !important;place-items:center;
    width:44px;height:44px;border:0;background:transparent;border-radius:12px;
    font-size:1.35rem;color:#111;
  }
  .menu-toggle[aria-expanded="true"]{background:#f3f3f3}
  .header-wrap nav{display:contents}                 /* el <nav> no ocupa lugar: el botón ≡ queda a la derecha */
  .menu-toggle{margin-left:auto}
  .nav-menu{
    position:fixed;left:0;right:0;top:64px;bottom:0;
    display:flex !important;flex-direction:column;gap:0;
    background:#fff;padding:18px 22px 32px;margin:0;list-style:none;
    transform:translateX(100%);opacity:0;visibility:hidden;
    transition:transform .28s ease,opacity .2s ease,visibility 0s .28s;
    overflow-y:auto;z-index:1000;border-top:1px solid #eee;
  }
  .nav-menu.active{transform:none;opacity:1;visibility:visible;transition:transform .28s ease,opacity .2s ease}
  .nav-menu li{border-bottom:1px solid #f0f0f0}
  .nav-menu li a{
    display:block;padding:16px 4px;font-size:1.15rem;font-weight:600;color:#111;
    background:none !important;-webkit-text-fill-color:initial;
  }
  .nav-menu li a::after{display:none}
  .nav-menu li:last-child{border:0;margin-top:18px}
  .nav-menu li a.nav-cta{
    display:flex;justify-content:center;align-items:center;min-height:52px;
    background:var(--primary) !important;color:#fff !important;border-radius:14px;font-size:1.05rem;
  }
  body.menu-open{overflow:hidden}

  /* ---------- Hero ---------- */
  .hero, #inicio.hero{
    padding:96px 0 44px !important;min-height:0 !important;height:auto !important;
    display:block !important;
  }
  #inicio::before{
    background-size:520px auto !important;
    background-position:right -110px top 30px !important;
    opacity:.6;
  }
  .hero .container{position:relative !important;top:auto !important;margin:0 auto !important;transform:none !important;padding-top:0 !important}
  .hero .kicker{
    font-size:.72rem !important;letter-spacing:.24em !important;margin-bottom:10px !important;
    animation:none !important;background:none !important;-webkit-text-fill-color:initial;color:var(--primary) !important;
  }
  .hero .kicker::after{display:none}
  .hero br{display:none}                                   /* el <br> del H1 y el de después del kicker */
  .hero h1{
    text-transform:none !important;font-size:2.05rem !important;line-height:1.1 !important;
    letter-spacing:-.4px !important;margin:0 0 12px !important;max-width:none !important;text-wrap:balance;
  }
  .hero h1 .h1-desk{display:none}
  .hero h1 .h1-mov{display:inline}
  .hero h1 .hl{color:var(--primary);font-style:normal}
  .hero .hero-meta{display:none}                            /* el correo ya va en el botón y en contacto */
  .hero .cta-row{
    display:grid !important;grid-template-columns:1fr;gap:10px;
    margin-top:22px !important;max-width:none !important;
  }
  .hero .cta-row .btn{width:100%;margin:0}
  .hero-sub{display:block;color:#444;font-size:1rem;line-height:1.5;margin:0 0 6px;max-width:34ch}

  /* ---------- Acerca (+25 años) ---------- */
  #acerca{padding:44px 0 !important}
  #acerca .about-two-col{display:grid !important;grid-template-columns:1fr !important;gap:18px !important}
  #acerca .about-photo, #acerca .about-text-only, #acerca .section-title{transform:none !important;margin:0 !important}
  #acerca .about-photo img{width:min(58%,220px) !important;max-width:none !important;margin:0 !important;height:auto !important;aspect-ratio:640/755 !important;filter:none !important}
  #acerca .about-text-only{max-width:none !important;text-align:left}
  #acerca .about-text-only h2{font-size:1.5rem !important;margin:0 0 8px !important}
  #acerca .about-text-only p{font-size:1rem !important;line-height:1.55}
  #acerca .about-actions{margin-top:16px}
  #acerca .about-actions .btn{width:auto}

  /* ---------- Conócenos ---------- */
  #conocenos .about-grid{display:flex !important;flex-direction:column;gap:18px !important}
  #conocenos .about-video{aspect-ratio:16/9 !important;min-height:0 !important;border-radius:14px !important}
  #conocenos .about-text h2{font-size:1.5rem !important}
  #conocenos .about-text p{font-size:1rem !important;line-height:1.55 !important;margin-bottom:10px !important}
  #conocenos .about-cta{display:grid !important;grid-template-columns:1fr;gap:10px;margin-top:14px !important}
  #conocenos .about-cta .btn{width:100%}
  #conocenos .about-features{
    display:grid !important;grid-template-columns:1fr !important;gap:10px !important;margin-top:6px !important;
  }
  #conocenos .feat-card{
    display:grid !important;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;
    padding:12px 14px !important;border-radius:12px !important;align-items:center;
  }
  #conocenos .feat-ico{grid-row:1 / span 2;width:44px !important;height:44px !important;margin:0 !important;font-size:1.05rem !important}
  #conocenos .feat-title{margin:0 !important;font-size:1rem !important}
  #conocenos .feat-text{margin:0 !important;font-size:.9rem !important;line-height:1.4 !important}

  /* ---------- Ingeniería virtual ---------- */
  #simulacion-virtual{padding:48px 0 !important}
  #simulacion-virtual .svv-title{font-size:1.55rem !important;margin-bottom:16px !important}
  .svv-grid{display:flex !important;flex-direction:column;gap:22px !important}
  .svv-stage{padding:0 !important;margin:0 !important}
  .svv-viewport{aspect-ratio:16/9 !important;border-radius:14px !important}
  .svv-arrow{
    width:36px !important;height:36px !important;font-size:.9rem;
    background:rgba(255,255,255,.92) !important;box-shadow:0 4px 14px rgba(0,0,0,.35) !important;
  }
  .svv-arrow.prev{left:10px !important}
  .svv-arrow.next{right:10px !important}
  .svv-dots{padding-top:12px !important}
  #simulacion-virtual .svv-aside{
    display:grid !important;grid-template-rows:auto !important;grid-template-columns:1fr !important;gap:12px !important;
    transform:none !important;padding:0 !important;margin:0 !important;
    width:100% !important;max-width:100% !important;min-width:0 !important;justify-self:stretch !important;
  }
  #simulacion-virtual .svv-block{
    position:relative !important;display:grid !important;grid-template-columns:1fr 80px;column-gap:14px;align-items:center;
    width:auto !important;max-width:100% !important;min-width:0 !important;margin:0 !important;transform:none !important;overflow:hidden;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 16px !important;
  }
  #simulacion-virtual .svv-block .svv-h,
  #simulacion-virtual .svv-hl .svv-h{grid-column:1;grid-row:1;margin:0 0 4px !important;padding:0 !important;font-size:1.1rem !important;text-align:left !important}
  #simulacion-virtual .svv-block .svv-p,
  #simulacion-virtual .svv-hl .svv-p{grid-column:1;grid-row:2;margin:0 !important;padding:0 !important;font-size:.92rem !important;line-height:1.45 !important;text-align:left !important;max-width:none !important;inline-size:auto !important;width:auto !important;min-width:0 !important;max-inline-size:none !important}
  #simulacion-virtual .svv-block .svv-device,
  #simulacion-virtual .svv-device-left,
  #simulacion-virtual .svv-device-right{
    position:static !important;grid-column:2;grid-row:1 / span 2;justify-self:end;align-self:center;
    height:auto !important;width:80px !important;max-width:80px !important;inset:auto !important;
    transform:none !important;opacity:1 !important;filter:none !important;
  }

  /* ---------- Proyectos: carrusel horizontal ---------- */
  #proyectos{padding:48px 0 !important}
  #proyectos .container, #soluciones .container{padding:0 18px !important;max-width:none !important}
  #proyectos .projects-head{margin-bottom:14px !important}
  #proyectos .projects-head p{margin:0 !important}
  .projects-row{
    display:flex !important;grid-template-columns:none !important;gap:12px !important;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 -18px;padding:4px 18px 14px;scroll-padding-left:18px;scrollbar-width:none;
  }
  .projects-row::-webkit-scrollbar{display:none}
  .projects-row .proj-card{flex:0 0 74vw;max-width:300px;scroll-snap-align:start;border-radius:14px !important}
  .projects-row .proj-thumb{aspect-ratio:4/5 !important}
  .projects-row .proj-meta{padding:14px !important}
  .projects-row .proj-title{font-size:1.05rem !important}
  .projects-row .proj-text{font-size:.88rem !important;line-height:1.4 !important}
  .projects-row .proj-all{flex:0 0 56vw;max-width:230px}
  .projects-row .proj-all .proj-all-box{min-height:100%;padding:18px !important;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px}
  .projects-row .proj-all .proj-all-text strong{font-size:1.15rem !important}
  .projects-row .proj-more-text{display:none !important}
  .projects-hint{display:block;text-align:center;color:#888;font-size:.8rem;margin-top:4px}

  /* ---------- Soluciones: carrusel horizontal ---------- */
  #soluciones{padding:48px 0 !important}
  .solu-tiles .tiles{
    display:flex !important;grid-template-columns:none !important;gap:12px !important;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 -18px;padding:4px 18px 14px;scroll-padding-left:18px;scrollbar-width:none;list-style:none;
  }
  .solu-tiles .tiles::-webkit-scrollbar{display:none}
  .solu-tiles .tile{flex:0 0 78vw;max-width:320px;scroll-snap-align:start;grid-column:auto !important;border-radius:14px !important}
  .solu-tiles .tile-media{aspect-ratio:16/10 !important}
  .solu-tiles .tile-body{padding:12px 14px 14px !important}
  .solu-tiles .tile-body h3{font-size:1.05rem !important}
  .solu-tiles .tile-body p{font-size:.9rem !important;-webkit-line-clamp:3 !important}
  .solu-tiles .chip{font-size:.75rem !important;padding:6px 10px !important}

  /* ---------- Clientes ---------- */
  #clientes{padding:44px 0 32px !important}
  #clientes .section-title{margin-bottom:14px !important}

  /* ---------- Ubicaciones: lista en lugar de mapa ---------- */
  #ubicaciones{padding:48px 0 !important}
  #ubicaciones .map-bleed{display:none !important}
  .loc-list{display:grid;grid-template-columns:1fr;gap:10px;margin-top:4px}
  .loc-item{
    display:grid;grid-template-columns:40px 1fr;column-gap:12px;align-items:start;
    background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);
  }
  .loc-item i{
    width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
    background:#fff1f2;color:var(--primary);font-size:1rem;
  }
  .loc-item strong{display:block;font-size:.95rem;margin-bottom:2px}
  .loc-item span{display:block;color:#555;font-size:.9rem;line-height:1.45}

  /* ---------- Socios ---------- */
  #socios{padding:44px 0 !important}
  #socios .logo-grid{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:8px !important}
  #socios .logo{
    --slot-w:auto !important;--slot-h:72px !important;--img-h:44px !important;
    width:100% !important;height:72px !important;padding:8px !important;margin:0 !important;
  }
  #socios .logo img{max-height:44px !important;max-width:100% !important;width:auto;height:auto;object-fit:contain}

  /* ---------- Contacto ---------- */
  #contacto{padding:48px 0 !important}
  #contacto .section-title{margin-bottom:16px !important}
  .contact-wrap{display:grid !important;grid-template-columns:1fr !important;gap:14px !important}
  .contact-card,.form{padding:18px !important;border-radius:14px !important}
  .contact-card .contact-kicker{font-size:.72rem;letter-spacing:.2em}
  .contact-card .contact-heading{font-size:1.25rem !important;margin-bottom:6px !important}
  .contact-card .contact-intro{font-size:.95rem;line-height:1.5}
  .contact-card .contact-intro br{display:none}
  .info-row{padding:10px 0 !important;font-size:.92rem}
  .info-row strong{font-size:.95rem}
  .form .input,.form .textarea{font-size:16px !important;padding:14px !important;border-radius:12px !important}
  .form .textarea{min-height:120px !important}
  .form .btn{width:100%;margin-top:4px}

  /* ---------- Pie ---------- */
  footer{padding:36px 0 96px !important}
  .footer-grid{display:grid !important;grid-template-columns:1fr !important;gap:20px !important}
  .footer-col h4{font-size:.95rem !important;margin-bottom:6px !important}
  .footer-col p,.footer-col a{font-size:.92rem;line-height:1.55}
  .footer-col form{display:grid;grid-template-columns:1fr auto;gap:8px}
  .footer-col form .input{margin:0}
  .footer-col form .btn{padding:10px 16px;min-height:44px;font-size:.92rem}
  .copyright{font-size:.8rem !important;text-align:center;margin-top:22px !important}

  /* ---------- Barra inferior fija ---------- */
  .m-cta{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:900;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:10px;
    background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(10px);
    border-top:1px solid #e9e9e9;box-shadow:0 -8px 24px rgba(0,0,0,.06);
    transform:translateY(110%);transition:transform .25s ease;
  }
  .m-cta.is-visible{transform:none}
  .m-cta .btn{flex:1;padding:12px 14px;font-size:.95rem;min-height:46px}
  .m-cta .btn.secondary{background:#fff;flex:0 0 46px;padding:0;border-radius:14px}
}

/* Pantallas muy angostas */
@media (max-width: 360px){
  .hero h1{font-size:1.6rem !important}
  .projects-row .proj-card{flex-basis:80vw}
}

/* 14 sep 2026 · Menú móvil: el backdrop-filter de header.scrolled convierte al encabezado en el
   contenedor del menú fijo (queda de 51 px y la página se pinta encima). En celular se desactiva. */
@media (max-width: 768px){
  header#header.scrolled{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background:#fff !important}
}