/*==================================================
  RESPONSIVE.CSS
  CENTRAL DE INGENIERÍA
==================================================*/

/*==================================================
  TABLET / PANTALLAS MEDIANAS
==================================================*/

@media (max-width: 1100px){

    /* CONTENEDOR GENERAL */

    .container{
        width:92%;
    }


    /* HEADER */

    .header-container{
        gap:20px;
        min-height:85px;
    }

    .logo img{
        width:180px;
    }

    .navbar{
        gap:22px;
    }

    .navbar a{
        font-size:.9rem;
    }

    .banner-superior-ciem{
        width:350px;
        height:70px;
    }


    /* HERO */

    .hero-content{
        max-width:700px;
    }

    .hero-content h1{
        font-size:3.2rem;
    }

    .hero-content p{
        font-size:1rem;
    }


    /* EMPRESA */

    .empresa-grid{
        grid-template-columns:1fr 1fr;
        gap:40px;
    }


    /* ESTADÍSTICAS */

    .stats-grid{
        grid-template-columns:repeat(2,1fr);
    }


    /* CATÁLOGO */

    .catalogo-page{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:25px;
    }

    .marketplace-track{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    #btnAnterior{
        left:-20px;
    }

    #btnSiguiente{
        right:-20px;
    }


    /* GALERÍA */

    .galeria-grid{
        grid-template-columns:repeat(2,1fr);
    }


    /* MARCAS */

    .marcas-grid{
        grid-template-columns:repeat(3,1fr);
    }


    /* CONTACTO */

    .contacto-grid{
        grid-template-columns:1fr 1fr;
        gap:35px;
    }


    /* FOOTER */

    .footer-grid{
        grid-template-columns:2fr 1fr 1fr;
        gap:35px;
    }

}


/*==================================================
  TABLET PEQUEÑA
==================================================*/

@media (max-width: 900px){

    /* HEADER */

    .header-container{
        min-height:80px;
        gap:15px;
    }

    .logo img{
        width:165px;
    }

    .navbar{
        gap:18px;
    }

    .navbar a{
        font-size:.82rem;
    }

    .banner-superior-ciem{
        width:300px;
        height:65px;
    }


    /* HERO */

    .hero{
        min-height:760px;
        height:auto;
    }

    .hero-content{
        width:92%;
        max-width:700px;
        padding:150px 0 90px;
    }

    .hero-content h1{
        font-size:2.8rem;
    }

    .hero-content p{
        font-size:1rem;
        line-height:1.7;
    }


    /* EMPRESA */

    .empresa-grid{
        grid-template-columns:1fr;
        gap:40px;
    }


    /* CATÁLOGO */

    .catalogo-page{
        grid-template-columns:repeat(2,minmax(0,1fr));
        width:100%;
    }

    .producto-card{
        min-height:540px;
    }

    .producto-imagen{
        height:230px;
    }


    /* CONTACTO */

    .contacto-grid{
        grid-template-columns:1fr;
        gap:35px;
    }


    /* FOOTER */

    .footer-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


/*==================================================
  CELULAR
==================================================*/

@media (max-width: 650px){

    /*================================================
      CONFIGURACIÓN GENERAL
    =================================================*/

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    .container{
        width:90%;
        max-width:100%;
    }

    section{
        padding:70px 0;
    }


    /*================================================
      HEADER
    =================================================*/

    .header{
        width:100%;
    }

    .header-container{
        min-height:70px;
        width:90%;
        gap:10px;
    }

    .logo img{
        width:145px;
        height:auto;
    }


    /*===============================================
      MENÚ MÓVIL
    ===============================================*/

    .navbar{
        position:absolute;

        top:70px;
        left:0;

        width:100%;

        background:#111;

        display:none;

        flex-direction:column;

        align-items:flex-start;

        gap:0;

        padding:20px 7vw;

        box-shadow:0 15px 30px rgba(0,0,0,.25);
    }

    .navbar.open{
        display:flex;
    }

    .navbar a{
        width:100%;
        padding:13px 0;

        font-size:1rem;
    }

    .navbar a::after{
        display:none;
    }


    /*================================================
      BANNER SUPERIOR
    =================================================*/

    .banner-superior-ciem{

        width:210px;

        height:55px;

        flex-shrink:0;

        overflow:hidden;

        border-radius:0 !important;

    }

    .banner-superior-ciem img{

        width:100%;

        height:100%;

        object-fit:cover;

        border-radius:0 !important;

    }


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

    .hero{

        min-height:720px;

        height:auto;

        display:flex;

        align-items:center;

    }

    .hero-banner{

        position:absolute;

        inset:0;

        width:100%;

        height:100%;

    }

    .hero-media{

        width:100%;

        height:100%;

        object-fit:cover;

        object-position:center;

    }

    .hero-overlay{

        background:linear-gradient(

            90deg,

            rgba(0,0,0,.86),

            rgba(0,0,0,.55)

        );

    }

    .hero-content{

        width:90%;

        max-width:none;

        padding:130px 0 70px;

        margin:0 auto;

    }

    .hero-top{

        font-size:.7rem;

        padding:7px 12px;

        margin-bottom:18px;

        line-height:1.4;

    }

    .hero-content h1{

        font-size:2.35rem;

        line-height:1.15;

        margin-bottom:20px;

    }

    .hero-content p{

        font-size:.95rem;

        line-height:1.7;

        margin-bottom:30px;

    }

    .hero-buttons{

        display:flex;

        flex-direction:column;

        gap:12px;

        width:100%;

    }

    .hero-buttons .btn{

        width:100%;

        padding:14px 20px;

    }


    /*================================================
      TÍTULOS
    =================================================*/

    .section-title{

        margin-bottom:40px;

    }

    .section-title span{

        font-size:.72rem;

    }

    .section-title h2{

        font-size:2rem;

    }

    .section-title p{

        font-size:.95rem;

        line-height:1.7;

    }


    /*================================================
      EMPRESA
    =================================================*/

    .empresa-grid{

        grid-template-columns:1fr;

        gap:30px;

    }

    .empresa-imagen{

        border-radius:18px;

    }

    .empresa-info{

        gap:18px;

    }

    .info-box{

        padding:20px;

        gap:15px;

    }

    .info-box i{

        font-size:28px;

        min-width:38px;

    }

    .info-box h3{

        font-size:1.1rem;

    }

    .info-box p{

        font-size:.92rem;

        line-height:1.65;

    }

    .empresa-botones{

        flex-direction:column;

        gap:12px;

    }

    .empresa-botones .btn{

        width:100%;

    }


    /*================================================
      ESTADÍSTICAS
    =================================================*/

    .stats-grid{

        grid-template-columns:1fr 1fr;

        gap:15px;

    }

    .stat-card{

        padding:30px 12px;

        border-radius:15px;

    }

    .stat-card i{

        font-size:32px;

    }

    .stat-card h2{

        font-size:2rem;

    }

    .stat-card p{

        font-size:.82rem;

    }


    /*================================================
      CATÁLOGO
    =================================================*/

    .catalogo-header{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

    }

    .catalogo-header h3{

        font-size:1.7rem;

    }


    /* TÍTULO DEL CATÁLOGO */

    .catalogo-top{

        margin-bottom:35px;

    }

    .categoria-centro h2{

        font-size:1.7rem;

    }


    /* BOTONES LATERALES */

    .catalogo-arrow{

        width:48px;

        height:48px;

        font-size:18px;

    }

    #btnAnterior{

        left:-8px;

    }

    #btnSiguiente{

        right:-8px;

    }


    /* PRODUCTOS */

    .catalogo-page{

        display:none;

        grid-template-columns:1fr;

        gap:25px;

        width:100%;

        margin-top:30px;

    }

    .catalogo-page.active{

        display:grid;

    }

    .marketplace-wrapper{

        width:100%;

        gap:8px;

    }

    .marketplace-container{

        width:100%;

        min-width:0;

    }

    .marketplace-track{

        grid-template-columns:1fr;

        gap:25px;

    }

    .producto-card{

        width:100%;

        min-width:0;

        min-height:0;

        height:auto;

        border-radius:18px;

    }

    .producto-imagen{

        width:100%;

        height:220px;

    }

    .producto-info{

        padding:22px;

    }

    .producto-info h3{

        font-size:1.2rem;

    }

    .producto-info p{

        min-height:auto;

        font-size:.92rem;

        line-height:1.65;

    }

    .producto-buttons{

        flex-direction:column;

        gap:10px;

    }

    .producto-buttons .btn{

        width:100%;

    }

    .btn-vermas{

        width:100%;

    }


    /*================================================
      GALERÍA
    =================================================*/

    .galeria-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .galeria-item{

        border-radius:16px;

    }

    .galeria-item img{

        height:240px;

    }


    /*================================================
      MARCAS
    =================================================*/

    .marcas-grid{

        grid-template-columns:repeat(2,1fr);

        gap:15px;

    }

    .marcas-grid img{

        padding:12px;

        border-radius:12px;

    }


    /*================================================
      CTA
    =================================================*/

    .cta{

        padding:70px 7vw;

    }

    .cta h2{

        font-size:2rem;

    }

    .cta p{

        font-size:.95rem;

    }

    .cta .btn{

        width:100%;

    }


    /*================================================
      CONTACTO
    =================================================*/

    .contacto-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .contacto-info{

        gap:18px;

    }

    .info-item{

        padding:20px;

        gap:15px;

        border-radius:16px;

    }

    .info-item i{

        font-size:26px;

        min-width:30px;

    }

    .info-item h3{

        font-size:1.05rem;

    }

    .info-item p{

        font-size:.9rem;

        line-height:1.6;

        word-break:break-word;

    }


    /* FORMULARIO */

    .contact-form{

        padding:25px 20px;

        border-radius:16px;

    }

    .contact-form input,

    .contact-form textarea{

        padding:14px;

        font-size:14px;

    }

    .contact-form .btn{

        width:100%;

    }


    /*================================================
      FOOTER
    =================================================*/

    .footer{

        padding:55px 0 20px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:35px;

    }

    .footer-logo{

        width:70px;

        height:70px;

        object-fit:contain;

    }

    .footer p{

        font-size:.9rem;

        line-height:1.6;

    }

    .social-icons{

        gap:10px;

    }

    .social-icons a{

        width:42px;

        height:42px;

    }

    .footer-bottom{

        margin-top:35px;

        font-size:.78rem;

        line-height:1.6;

    }


    /*================================================
      WHATSAPP
    =================================================*/

    .floating-whatsapp{

        width:55px;

        height:55px;

        right:16px;

        bottom:16px;

        font-size:26px;

    }


    /*================================================
      VOLVER ARRIBA
    =================================================*/

    #backToTop{

        width:48px;

        height:48px;

        left:16px;

        bottom:16px;

        font-size:17px;

    }


    /*================================================
      IDENTIDAD EMPRESARIAL
    =================================================*/

    .identidad-empresa{

        padding:60px 0;

    }

    .identidad-contenedor{

        width:90%;

    }

    .identidad-titulo{

        margin-bottom:40px;

    }

    .identidad-titulo h2{

        font-size:1.9rem;

        line-height:1.2;

    }

    .identidad-titulo p{

        font-size:.9rem;

    }

    .mision-vision-grid{

        grid-template-columns:1fr;

        gap:20px;

        margin-bottom:60px;

    }

    .identidad-card{

        flex-direction:column;

        gap:18px;

        padding:25px;

    }

    .identidad-icono{

        width:50px;

        height:50px;

        min-width:50px;

        font-size:18px;

    }

    .identidad-card-contenido h3{

        font-size:1.5rem;

    }

    .identidad-card-contenido p{

        font-size:.9rem;

        line-height:1.7;

    }

    .politicas-titulo{

        margin-bottom:35px;

    }

    .politicas-titulo h2{

        font-size:1.8rem;

    }

    .politica-card{

        padding:20px;

        gap:14px;

    }

    .politica-icono{

        width:44px;

        height:44px;

        min-width:44px;

    }

    .politica-card h3{

        font-size:1rem;

    }

    .politica-card p{

        font-size:.86rem;

        line-height:1.65;

    }

}


/*==================================================
  CELULARES MUY PEQUEÑOS
==================================================*/

@media (max-width: 400px){

    .header-container{

        width:92%;

    }

    .logo img{

        width:125px;

    }

    .banner-superior-ciem{

        width:165px;

        height:48px;

    }

    .hero{

        min-height:680px;

    }

    .hero-content{

        padding-top:120px;

    }

    .hero-content h1{

        font-size:2rem;

    }

    .hero-top{

        font-size:.62rem;

    }

    .hero-content p{

        font-size:.88rem;

    }

    .stats-grid{

        grid-template-columns:1fr;

    }

    .producto-imagen{

        height:200px;

    }

    .marcas-grid{

        grid-template-columns:1fr;

    }

    .catalogo-arrow{

        width:42px;

        height:42px;

    }

    #btnAnterior{

        left:-5px;

    }

    #btnSiguiente{

        right:-5px;

    }

}


/*==================================================
  EVITAR DESBORDAMIENTO
==================================================*/

@media (max-width: 650px){

    .header-container,
    .hero-content,
    .empresa-grid,
    .stats-grid,
    .catalogo-page,
    .marketplace-wrapper,
    .contacto-grid,
    .footer-grid,
    .identidad-contenedor{

        max-width:100%;

    }

    .header-search{

        max-width:100%;

    }

    .banner-superior-ciem{

        max-width:45vw;

    }

}
/*==================================================
  AJUSTE EXCLUSIVO DEL BANNER PRINCIPAL EN CELULAR
==================================================*/

@media (max-width: 650px){

    .hero{
        min-height:650px;
        height:650px;
        overflow:hidden;
    }

    .hero-banner{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
    }

    .hero-media{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center center;
    }

    .hero-content{
        position:relative;
        z-index:3;
        width:90%;
        margin:0 auto;
        padding:120px 0 60px;
    }

}


/*==================================================
  CELULAR MUY PEQUEÑO
==================================================*/

@media (max-width:400px){

    .hero{
        min-height:600px;
        height:600px;
    }

    .hero-content{
        padding-top:110px;
    }

    .hero-media{
        object-position:center center;
    }

}

/*==================================================
  REORGANIZACIÓN RESPONSIVE V2
  - Una sola landing para todos los dispositivos.
  - Desktop: navegación horizontal.
  - Tablet/móvil: menú hamburguesa.
  - El banner superior conserva su imagen y contenido.
  - La misión, visión y políticas quedan inmediatamente
    después del banner principal.
==================================================*/

.header-main-row{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
}

.menu-toggle{
    display:none;
    width:46px;
    height:46px;
    flex:0 0 46px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:12px;
    background:rgba(255,255,255,.06);
    padding:10px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    transition:.3s ease;
}

.menu-toggle span{
    display:block;
    width:23px;
    height:2px;
    background:#fff;
    border-radius:10px;
    transition:.3s ease;
}

.menu-toggle:hover{
    border-color:var(--naranja);
}

.menu-toggle.active span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

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

.menu-toggle.active span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

/* La nueva sección de identidad tiene prioridad después del hero. */
#identidad{
    scroll-margin-top:100px;
}

/* Evita que la nueva navegación se salga de pantallas medianas. */
@media (max-width:1100px){
    .header-main-row{
        gap:18px;
    }

    .navbar{
        gap:18px;
    }

    .navbar a{
        font-size:.84rem;
    }
}

/* Tablet y móvil: header limpio + hamburguesa. */
@media (max-width:900px){
    .header{
        padding:8px 0 0;
    }

    .header-container{
        min-height:0;
        flex-direction:column;
        align-items:stretch;
        gap:8px;
        padding-bottom:8px;
    }

    .header-main-row{
        min-height:68px;
    }

    .menu-toggle{
        display:flex;
    }

    .navbar{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:10px 6%;
        background:rgba(17,17,17,.98);
        border-top:1px solid rgba(255,255,255,.08);
        box-shadow:0 18px 35px rgba(0,0,0,.25);
        opacity:0;
        visibility:hidden;
        transform:translateY(-8px);
        pointer-events:none;
        transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
    }

    .navbar.open{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
        pointer-events:auto;
    }

    .navbar a{
        width:100%;
        padding:14px 4px;
        font-size:.98rem;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .navbar a:last-child{
        border-bottom:0;
    }

    .navbar a::after{
        display:none;
    }

    /* El banner superior no se reemplaza ni se recorta: solo se coloca
       en su propia fila para evitar que compita con el logo/menú. */
    .banner-superior-ciem{
        align-self:center;
        margin:0 auto;
    }

    .hero-content{
        padding-top:150px;
    }
}

@media (max-width:650px){
    .header-main-row{
        min-height:62px;
    }

    .logo img{
        width:145px;
    }

    .menu-toggle{
        width:44px;
        height:44px;
        flex-basis:44px;
    }

    .navbar{
        padding-left:5%;
        padding-right:5%;
    }

    .banner-superior-ciem{
        max-width:100%;
    }

    /* Misión/visión/políticas: una lectura cómoda y sin tarjetas comprimidas. */
    .mision-vision-grid,
    .politicas-grid{
        width:100%;
    }

    .identidad-card,
    .politica-card{
        width:100%;
    }
}

@media (max-width:400px){
    .logo img{
        width:125px;
    }

    .menu-toggle{
        width:42px;
        height:42px;
        flex-basis:42px;
    }
}

/*==================================================
  AJUSTE DE ESTRUCTURA DEL HEADER V2
==================================================*/
.header-container{
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    min-height:90px;
}

.header-main-row{
    min-height:90px;
}

.banner-superior-ciem{
    align-self:center;
}

@media (max-width:900px){
    .header-main-row{
        min-height:68px;
    }
}

@media (max-width:650px){
    .header-main-row{
        min-height:62px;
    }
}
/* ==================================================
   BANNER COMPLETO - SIN RECORTE
================================================== */

.hero{
    height:auto;
    min-height:0;
    display:block;
    overflow:hidden;
}

.hero-banner{
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
}

.hero-media{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
    object-position:center;
}

.hero-overlay{
    display:none;
}

.hero-content{
    display:none;
}