/* ===== Botón hamburguesa (fuera del media query, oculto por defecto) ===== */

.hamburger-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 24px;
  margin-top: 3px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 100;
}

.hamburger-line {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.hamburger-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(10.5px) rotate(45deg);
}

.hamburger-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-10.5px) rotate(-45deg);
}

/* ============================================================================
    RESPONSIVE MÓVIL (max-width: 800px)
    ============================================================================ */

@media (max-width: 800px) {

    /* layout general */
    .region-header .container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        max-height: 80px;
        overflow: hidden;
        padding: 1.4rem 1.4rem 1.6rem 1.4rem;
        gap: 1.4rem;
        transition: max-height 0.35s ease;
    }
    
    .header__logo {
        display: flex;
        align-items: center;
        gap: 15px;
        overflow: visible;
        width: 100%;
        justify-content: space-between;
        flex-shrink: 0;
    }
    
    .header__logo > a {
        width: 186px;
        overflow: hidden;
        position: relative;
        top: 5px;
    }
    
    .header__logo img {
        max-width: none;
        height: auto;
    }
    
    /* Mostrar botón hamburguesa en móvil */
    .hamburger-toggle {
        display: flex;
    }
    
    /* Menú principal - mostrar siempre en móvil */
    #block-saimacorp2025-main-menu {
        display: block;
        width: 100%;
    }
    
    .region-header .container > div:not(.header__logo) {
        display: block;
        width: 100%;
    }
    
    /* Items del menú */
    #block-saimacorp2025-main-menu > ul {
        display: block;
        width: 100%;
        margin-left: 0;
    }
    
    #block-saimacorp2025-main-menu > ul li {
        display: block;
        border-bottom: 1px solid #fffb;
        padding: 12px 0;
        height: auto !important;
        min-height: auto !important;
    }
    
    #block-saimacorp2025-main-menu > ul a {
        font-size: 1.25rem;
    }
    
    /* Ajustar grid de productos a una columna */
    .grid-modulos {
        grid-template-columns: 1fr !important;
    }
    
    .col-izq, .col-der {
        width: 100%;
    }
    
    /* Ajustes de títulos */
    .section-title {
        font-size: 1.25rem;
    }
    
    .mini-card .titulo {
        font-size: 1.1rem;
    }
    
    .mini-card .subtitulo a {
        font-size: 0.9rem;
    }
    
    /* Contenedor flex para enlace y botón */
    .menu-link-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 1rem;
    }
    
    .menu-link-container a {
        font-size: 1.25rem;
        color: white;
        text-decoration: none;
        font-family: var(--font-secondary);
        font-weight: bold;
        transition: opacity 0.2s ease;
    }
    
    .menu-link-container a:hover {
        opacity: 0.7;
    }
    
    /* Botón desplegable para submenús */
    .menu-item {
        position: relative;
    }
    
    /* Icono + para desplegar */
    .plus-icon {
        display: block;
        position: relative;
        width: 20px;
        height: 20px;
    }
    
    .plus-line {
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: white;
        left: 0;
        border-radius: 2px;
        transition: transform 0.3s ease;
    }
    
    /* Línea vertical (0deg = vertical) */
    .plus-vertical {
        top: 1px;
        left: 9px;
        height: 100%;
        width: 2px;
        transform: rotate(0deg);
    }
    
    /* Línea horizontal (90deg = horizontal) */
    .plus-horizontal {
        top: 50%;
        transform: rotate(0deg);
    }
    
    /* Estado activo - solo girar la vertical para que sea horizontal */
    .menu-item-dropdown-toggle[aria-expanded="true"] .plus-vertical {
        transform: rotate(90deg);
    }
    
    /* La horizontal se mantiene estática */
    
    .menu-item-dropdown-toggle[aria-expanded="true"] {
        background: rgba(255, 255, 255, 0.2);
        border-color: white;
    }
    
    .menu-link-content {
        display: none; /* Oculto hasta el primer clic; el JS lo pone a block y ya no vuelve */
        max-height: 0;
        overflow: hidden;
        margin-top: 0;
        padding-top: 0;
        border-top: 1px solid transparent;
        transition: max-height 0.35s ease, padding-top 0.35s ease, margin-top 0.35s ease, border-top-color 0.35s ease;
    }

    /* Forzar siempre position:relative en móvil para que el megamenú
       no flote (position:absolute del desktop) sobre los ítems inferiores */
    nav#block-saimacorp2025-main-menu .menu_link_content {
        position: relative !important;
        top: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Bloquear el hover CSS del desktop: en móvil solo el JS controla la visibilidad */
    nav#block-saimacorp2025-main-menu li:hover .menu_link_content {
        display: none;
        max-height: 0;
        overflow: hidden;
    }
    /*nav#block-saimacorp2025-main-menu .menu_link_content .col-der {
        display: none;
    }*/
    nav#block-saimacorp2025-main-menu .menu_link_content .container {
        padding: 0 1.8rem 2rem;
        display: block;
        max-height: none;
    }
    nav#block-saimacorp2025-main-menu .menu_link_content div.section-title,
    nav#block-saimacorp2025-main-menu .index-item .node__subtitle,
    nav#block-saimacorp2025-main-menu .index-item .hero__cta {
        display: none;
    }
    nav#block-saimacorp2025-main-menu .menu_link_content .grid-modulos {
        gap: 16px;
    }
    nav#block-saimacorp2025-main-menu .menu_link_content .mini-card {
        min-height: auto;
        margin-top: 20px;
    }
}

@media (max-width: 500px) {
    .region-header:has(div.container.menu-open) {
        min-height: 100dvh;
    }
    nav#block-saimacorp2025-main-menu .menu_link_content .container {
        padding: 0 0 2rem;
    }
}

/* idioma */
.link-contacto .cta__button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 5px 44px 5px 15px;
    background: transparent;
    border: 1px solid #fffb;
    border-radius: 18px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: flex-start;
    background-image: url(../img/icona_fletxa_amunt_dreta.svg);
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 13px;
}

.link-contacto .cta__button:hover {
    background: rgba(255, 255, 255, 0.1);
}

#language-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 6px;
}

#language-block li {
    display: inline-block;
}

#language-block li:first-child > * {
    border-right: 1px solid #fff;
}

#language-block a.language-link,
#language-block span.active {
    color: #777;
    padding: 0 6px;
    border-radius: 2px;
}

#language-block a.language-link:hover,
#language-block span.active {
    color: #fff;
}

@media (max-width: 800px) {
    #language-block {
        margin-top: 36px;
    }
    #language-block li {
        margin-left: 8px;
    }
    #language-block li:first-child > * {
        border-right: 0;
    }
    #language-block a.language-link,
    #language-block span.active {
        background-color: #fff5;
        color: #999;
        padding: 4px 6px;
        border-radius: 2px;
    }
    #language-block a.language-link:hover,
    #language-block span.active {
        background-color: #ffff;
        color: #222;
    }
}