/* =========================================
   BOTÓN HAMBURGUESA Y MENÚ MÓVIL (NORSEIN)
========================================= */

/* Por defecto en escritorio el botón y el checkbox de control están ocultos */
.menu-toggle,
.menu-checkbox {
    display: none;
}

@media (max-width: 768px) {
    /* Ajustamos el contenedor del menú en la cabecera móvil */
    .site-header {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .menu-norsein {
        width: 100%;
    }

    /* Ocultamos el menú principal por defecto en móvil */
    .menu-norsein .menu-principal {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        background: rgba(255, 255, 255, 0.98);
        position: absolute;
        top: 100%;
        left: 0;
        box-shadow: 0 10px 25px rgba(13, 32, 58, 0.1);
        padding: 10px 0;
        border-top: 1px solid #e9edf1;
    }

    /* Estilos del botón de las 3 líneas (Hamburguesa) usando un <label> */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 24px;
        cursor: pointer;
        background: transparent;
        border: none;
        padding: 0;
        z-index: 1001;
    }

    .menu-toggle span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: var(--navy);
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* Estilos de los elementos del menú desplegado en móvil */
    .menu-norsein .menu-principal li {
        width: 100%;
        border-bottom: 1px solid #e9edf1;
        text-align: left;
    }

    .menu-norsein .menu-principal li a {
        padding: 15px 24px;
        font-size: 16px;
    }

    /* MAGIA DEL CHECKBOX: Al marcarlo, se despliega el menú y cambia el icono a "X" */
    .menu-checkbox:checked ~ .menu-principal {
        display: flex;
    }

    /* Animación del botón hamburguesa a una "X" cuando está abierto */
    .menu-checkbox:checked ~ .menu-toggle span:nth-child(1) {
        transform: translateY(10.5px) rotate(45deg);
    }

    .menu-checkbox:checked ~ .menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    .menu-checkbox:checked ~ .menu-toggle span:nth-child(3) {
        transform: translateY(-10.5px) rotate(-45deg);
    }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 126px; }
  .site-header { min-height: 116px; align-content: center; flex-wrap: wrap; gap: 7px 14px; padding: 9px 16px; }
  .brand { flex: 0 0 125px; }
  .brand img { max-height: 48px; }
  .main-nav { flex: 1; }
  .header-actions { width: 100%; justify-content: space-between; gap: 8px; }
  .header-link { font-size: .82rem; }
  .button-small { min-height: 36px; padding: 7px 10px; font-size: .78rem; }
  main { padding-top: 116px; }
  
  /* relative para contener el overlay */
  .hero { 
    min-height: 500px; 
    position: relative; 
  }
  
  /* contenido esté por encima del degradado */
  .hero-content { 
    padding: 60px 24px; 
    position: relative; 
    z-index: 2; 
  }
  
  /* el overlay en una capa que cubre todo el hero */
  .hero-overlay { 
    position: absolute;
    inset: 0; /* Equivale a top: 0; right: 0; bottom: 0; left: 0; */
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(90deg, rgba(9,27,50,.84), rgba(14,37,65,.45)); 
  }

  .section { padding-block: 62px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card p { min-height: 0; }
  .contact-strip { padding-block: 42px; }
  .contact-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
}