/* La navegación cambia donde los mega-menús ya dejaban de mostrarse.
   Las composiciones de laptop y monitor conservan estilos.css. */
.nav-movil-btn, .nav-movil { display:none }

@media (max-width:1000px) {
  .barra { grid-template-columns:minmax(0,1fr) auto; gap:12px }
  .barra .hnav, .barra .idioma, .barra .icono { display:none }
  .barra .marca { justify-self:start }
  .nav-movil-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    min-height:44px; padding:8px 10px;
    border:1px solid var(--line); border-radius:8px;
    background:var(--bg-card); color:var(--tx); font:inherit; cursor:pointer;
  }
  .nav-movil-btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2 }
  .nav-movil-btn[aria-expanded="true"] { color:var(--acc); border-color:var(--acc) }
  .nav-movil:not([hidden]) {
    display:flex; flex-direction:column;
    position:absolute; top:100%; left:0; right:0;
    max-height:calc(100vh - var(--isla));
    max-height:calc(100dvh - var(--isla));
    overflow-y:auto; overscroll-behavior:contain;
    padding:12px var(--aire) max(20px, env(safe-area-inset-bottom));
    background:var(--bg-alt); border-bottom:1px solid var(--line);
    box-shadow:0 16px 28px rgb(0 0 0 / .3);
  }
  .nav-movil a {
    display:flex; align-items:center; min-height:44px; padding:10px 12px;
    color:var(--tx); text-decoration:none; border-radius:8px;
  }
  .nav-movil-idioma { display:flex; align-items:center; justify-content:space-between; padding:4px 12px 12px; color:var(--tx-mid) }
  .nav-movil .idioma { display:inline-flex; min-height:44px }
  .nav-movil .idioma__op { min-width:44px }
  .nav-movil a:hover, .nav-movil a[aria-current="page"] { background:var(--bg-card); color:var(--acc) }
  .nav-movil-etiqueta {
    margin-top:8px; padding:14px 12px 6px; border-top:1px solid var(--line);
    color:var(--tx-mid); font-size:var(--caption);
  }
  .nav-movil .nav-movil-contacto { margin-top:10px; background:var(--acc); color:#04121f; font-weight:600 }
  .nav-movil-btn:focus-visible, .nav-movil a:focus-visible { outline:2px solid var(--acc); outline-offset:2px }
}

@media (max-width:760px) {
  .hero-txt { max-width:100%; min-width:0 }
  /* El titular se mide por el ancho disponible, no por la altura del teléfono. */
  .titular { --tit:clamp(82px, 25vw, 150px) }
  .hero { padding-top:calc(var(--isla) + 32px) }
  .hero .wrap { padding-bottom:20px }
  .hero-txt .sub { font-size:16px; line-height:1.6 }
  .hero-txt .sub br { display:none }
  .hero-txt .sub strong { display:block; margin-bottom:8px }
  .hero::after {
    background:linear-gradient(180deg, rgba(8,12,20,.72), rgba(8,12,20,.78) 55%, var(--bg));
  }
  .hero .btn { min-height:44px; padding:12px 16px; font-size:15px; text-align:center }
  .caminos, .servicios, .grid-apps { grid-template-columns:minmax(0,1fr) }
  .caso2, .caso2-vista, .caso2-info, .casos-cab > *, .met-caja > * { min-width:0 }
  .caso2, .caso-detalle { overflow-wrap:anywhere }
  .met-lista .mserv-cat, .casos-tab, .ficha-nav a, .chip, .srv-indice a { min-height:44px }
  .ficha-nav { flex-wrap:nowrap; overflow-x:auto }
  .ficha-nav a { flex:none; display:flex; align-items:center }
  .modal-caja { min-width:0; max-height:calc(100dvh - 32px) }
  .modal-cab { padding:16px; gap:8px; overflow-wrap:anywhere }
  .modal-cab > div { min-width:0 }
  .modal-x { flex:0 0 44px; min-height:44px }
  .modal-cuerpo, .modal-pie { padding:16px }
  .modal-id { overflow-wrap:anywhere; min-width:0 }
  .tabp { height:100dvh }
  .tabp-barra { flex-wrap:wrap; gap:8px 12px }
  .tabp-volver, .tabp-abrir { min-height:44px }
}

@media (max-width:620px) {
  .barra .acciones > .btn { display:none }
  .barra .marca { font-size:15px; letter-spacing:.06em }
  .aviso { height:44px; padding-inline:8px }
  :root { --isla:calc(44px + clamp(58px, calc(42px + 2.4vh), 78px)) }
  .aviso-caja { width:100%; min-width:0 }
  .aviso-f { min-width:32px; min-height:44px; padding:0 }
  .aviso-msg { font-size:11px }
  .hero .ctas { flex-direction:column; align-items:stretch; gap:10px }
  .hero .tira { margin-top:16px }
  .hero .lang { width:240px }
  section { padding-block:56px }
  .ficha { padding-top:calc(var(--isla) + 28px) }
  .ficha-enc { margin-bottom:28px; padding-bottom:24px }
  .caso2 { padding:12px; border-radius:16px }
  .caso2-vista { padding:20px 14px }
  .caso2-info { padding:20px 4px 8px }
  .caso2-cta { align-self:stretch; text-align:center; min-height:44px }
  .contacto { padding-top:calc(var(--isla) + 24px); grid-template-columns:minmax(0,1fr) }
  .contacto .panel, .contacto .formulario, .contacto .tarjeta { min-width:0 }
  .contacto .panel, .contacto .formulario { padding:20px var(--aire) }
  .contacto .tarjeta { padding:20px 16px }
  .campo input, .campo select, .campo textarea { font-size:16px; min-height:44px }
  .campo textarea { min-height:132px }
  .tabp-abrir { margin-left:0 }
  .pie a { display:inline-flex; align-items:center; min-height:44px }
}