/* Estabilización técnica: accesibilidad, navegación móvil y preferencias del usuario. */
.form-honeypot{
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}

:where(a,button,input,textarea):focus-visible{
  outline:3px solid var(--verde);
  outline-offset:3px;
}

.modal-card:focus{outline:none;}

/* El control no existe visualmente en desktop; solo recupera la navegación
   que styles.css oculta en pantallas <= 860px. */
.mobile-nav-toggle{
  display:none;
  font-family:'Work Sans',sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--cafe);
  background:transparent;
  border:0;
  padding:8px 0;
  cursor:pointer;
}

@media(max-width:860px){
  nav .wrap{position:relative;}
  .mobile-nav-toggle{display:inline-flex;align-items:center;justify-content:center;}
  nav.mobile-open .links{
    display:flex;
    position:absolute;
    top:calc(100% - 1px);
    left:32px;
    right:32px;
    flex-direction:column;
    gap:0;
    padding:8px 0;
    background:rgba(243,234,217,0.98);
    border:1px solid rgba(63,34,12,0.15);
    border-top:0;
    box-shadow:0 12px 24px rgba(42,22,8,0.12);
  }
  nav.mobile-open .links a{padding:11px 14px;}

  /* En responsive los seis servicios se organizan 2 × 3 para evitar
     una sección excesivamente larga sin alterar iconos ni tipografía. */
  .lab-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:36px 24px;
  }
}

@media(max-width:480px){
  nav.mobile-open .links{left:20px;right:20px;}
  .lab-grid{gap:32px 18px;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
  .reveal{
    opacity:1!important;
    transform:none!important;
  }
}