/* ==================================== */
/* MEDIA QUERY GLOBAL (max-width: 800px) */
/* ==================================== */

@media screen and (max-width: 800px) { 
    a, .dropdown-link { font-size: 16px; }
    h1 {font-size: 34px;}
    h2, .secondsectionsubtitle { font-size: 25px; } 
    p { font-size: 16px; } 
    h3 { font-size: 20px; }
}

/* ==================================== */
/* MENÚ HAMBURGUESA */
/* ==================================== */

/*¡¡¡¡MENU HAMBURGUER!!!!*/

.hamburger {
    display: none; flex-direction: column; cursor: pointer; background: none; border: none;
}

.hamburger span {
    width: 20px; height: 3px; background-color: rgb(255, 255, 255); margin: 3px 0; transition: 0.5s;
}

/* ==================================== */
/* MEDIA QUERY MENÚ RESPONSIVE (max-width: 800px) */
/* ==================================== */

@media screen and (max-width: 950px) {
    .logo { max-width: 130px; }
    
    /* Mostrar botón hamburguesa */
    .hamburger { display: flex; }
    
    /* Cambiar de display none a opacity/visibility para poder hacer fade */
    .nav-menu { 
        display: block; position: absolute; top: 0; left: 0;
        width: 100%; background-color: #333333f5; padding-top: 80px; opacity: 0; visibility: hidden;
        transition: opacity 0.5s ease, visibility 0.5s ease; animation: none;
    }
    
    /* Mostrar menú cuando está activo - con fade */
    .nav-menu.active { opacity: 1; visibility: visible; }
    
    /* Cambiar disposición del menú a vertical */
    .menu { 
        flex-direction: column; padding: 20px; gap: 20px;
        border-radius: 0; align-items: center; border-radius: 0 0 20px 20px; margin: 0;
    }
    
    .menu li { width: 100%; text-align: center; list-style: none; cursor: pointer; }
    
    .menulink { display: block; padding: 10px; color: white; text-decoration: none; }
}

/* ==================================== */
/* MEDIA QUERY PANTALLAS MUY PEQUEÑAS (max-width: 480px) - MENÚ */
/* ==================================== */

@media screen and (max-width: 480px) {
    .menu { gap: 15px; }
}

/* ==================================== */
/* ESTILOS PARA MÓVIL - DROPDOWN HAMBURGUESA (max-width: 800px) */
/* ==================================== */

@media screen and (max-width: 950px) {
    /* Resetear estilos del dropdown para móvil */
    .dropdown { position: static; width: 100%; }
    
    .dropdown-menu { 
        position: static; transform: none; opacity: 1; visibility: visible;
        display: none; /* Usamos display none/block en móvil */
        background: rgba(0, 0, 0, 0.5); margin: 10px auto; min-width: 90%;
        border-radius: 15px; padding: 5px 0; box-shadow: inset -6px 5px 53px 5px rgba(255, 255, 255, 0.1);
        left: auto; transform: none;
    }
    
    /* Mostrar dropdown cuando está activo en móvil */
    .dropdown.active .dropdown-menu { display: block; animation: fadeIn 0.3s ease; }
    
    .dropdown-link { padding: 12px 20px; }
    
    /* La flecha en móvil */
    .dropdown > .menulink::after { content: "▼"; font-size: 12px; margin-left: 8px; transition: transform 0.3s ease; }
    
    /* Rotar flecha cuando está activo */
    .dropdown.active > .menulink::after { transform: rotate(180deg); }
    
    /* Ajustar padding del menú principal en móvil */
    .menu { padding: 20px 10px; }
    
    .menu li { width: 100%; }
    
    /* Hacer que el enlace Solutions ocupe todo el ancho */
    .dropdown > .menulink { display: flex; justify-content: center; align-items: center; width: 100%; }
}

/* ==================================== */
/* MEDIA QUERY PANTALLAS MUY PEQUEÑAS (max-width: 480px) - DROPDOWN */
/* ==================================== */

@media screen and (max-width: 480px) {
    .dropdown-menu { min-width: 95%; }
    .dropdown-link { padding: 10px 15px; }
}

/* ==================================== */
/*          BREADCRUMBS                 */
/* ==================================== */

@media screen and (max-width: 400px){
  .breadcrumblist{padding: 10px; text-align: center;} .itemlistname { font-size: 13px;} .itemlistname.a{font-size: 15px;}
}

/* ==================================== */
/*                 HERO                 */
/* ==================================== */

@media screen and (max-width: 800px) {
    .hero::before{width: 250px; height: 150px;}
    .hero {min-height: 63vh; }
    .herocontent {padding: 0; top: 60px;}
    .secondsection h2{ font-size: 25px; }
    .buttons { padding: 20px; } 
    .btn-primar{ padding: 8px 20px; }
    .subtitle{font-size: 20px; width: 100%;}

}

@media screen and (max-width: 800px){
    .whatiserptext{width: 100%; gap: 20px;}
}


@media (max-width: 800px)

{.rotarycardscontainer{flex-direction: column; align-items: center; padding: 20px; gap: 10px;} .card-image{max-width: 150px;}
.card-container { max-width: 100%; min-width: auto; } .card-flipper { aspect-ratio: 3 / 4.5; } .card-front, .card-back { padding: 12px; }
.card-image {max-width: 120px; } .back-description { font-size: 0.8rem; max-height: 55%;} .flip-hint { font-size: 0.7rem; padding: 3px 10px; } }

/* ==================================== */
/* RESPONSIVE CARDS (max-width: 800px) */
/* ==================================== */

@media screen and (max-width: 800px) {
    .secondsection, .sixthsection { padding: 20px; gap: 20px; min-height: auto; }
    .secondsection::before { width: 250px; height: 250px; }
    .thirdsection{padding: 0 20px 20px 20px; gap: 30px; min-height: auto;} 
    .cardinformation {padding: 20px; max-width: none; min-height: 250px; width: 100%; }
    .cardscontainer { flex-direction: column; align-items: center; width: 100%; } 
    .separator { width: 100px; }     
    .inputcontainer{padding: 10px;}
}


/* ==================================== */
/*       FOOTER (max-width: 968px)      */
/* ==================================== */

@media (max-width: 800px){
 .footer{flex-direction: column; gap: 20px; align-items: center;}
 .pagelinks.info{display: none;}
 

}