/* ==========================================================================
   RESPONSIVE.CSS — Ajustes exclusivos para celulares
   No modifica el diseño de escritorio/tablet grande. Todo va dentro de
   media queries. Se carga DESPUÉS de style.css para poder sobreescribir.
   ========================================================================== */

/* ==========================================================================
   TABLET / MÓVIL GRANDE (<= 991px)
   Solo lo mínimo indispensable para que nada se corte antes de llegar
   al breakpoint de celular.
   ========================================================================== */
@media (max-width: 991.98px){

    /* Las tags flotantes (Servicios / Industrias) usan coordenadas fijas
       pensadas para contenedores anchos. Ya desde tablet empiezan a
       desbordarse, así que las pasamos a un layout en flujo. */
    .service-block,
    .industry-block{
        height:auto;
        padding:20px 0 40px;
    }

    .floating-area{
        position:static;
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:14px;
        height:auto;
    }

    .value-section .tag,
    .floating-area .tag{
        position:static !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        transform:none !important;
        font-size:1.1rem !important;
        color:#fff !important;
        background:rgba(255,255,255,.15);
        padding:8px 16px;
        border-radius:30px;
        white-space:nowrap;
    }

    .industriaspan{
        left:auto;
        max-width:100%;
        text-align:center;
    }

    /* El "team orbit" también depende de coordenadas fijas de 900x600px */
    .team-orbit{
        width:100%;
        max-width:100%;
        height:auto;
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:30px 20px;
        padding:20px 0;
    }

    .team-orbit .orbit,
    .team-orbit .bg-circle{
        display:none;
    }

    .member,
    .director{
        position:static !important;
        transform:none !important;
        width:150px;
        height:auto;
        background:none;
    }

    .director{
        background:#51c0d1;
        border-radius:50%;
        width:170px;
        height:170px;
        padding:15px;
    }
}

/* ==========================================================================
   CELULAR (<= 767px)
   ========================================================================== */
@media (max-width: 767.98px){

    /* ---------- Header ---------- */
    .top-header{
        padding:10px 0;
        text-align:center;
    }

    /* Bootstrap le pone width:100% por defecto a estas columnas por debajo
       de 768px (porque no tienen clase col-* para ese breakpoint), y por
       eso se apilaban. Las forzamos a quedar en la misma fila. */
    .top-header .row{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        align-items:center;
        gap:6px 0;
    }

    .top-header .col-md-5,
    .top-header .col-md-6{
        width:auto !important;
        max-width:50%;
        flex:0 0 auto;
        display:flex !important;
        justify-content:center;
        align-items:center;
        text-align:center !important;
        margin-bottom:0;
    }

    .logo-video{
        width:130px;
        margin:0 auto;
    }

    .logo-video2{
        width:115px;
        margin:0 auto;
    }

    .top-header .marquee-container{
        flex:0 0 100%;
        width:100%;
        margin-top:8px;
    }

    .marquee-content span{
        font-size:14px;
    }

    .nav-link{
        padding:12px 15px !important;
        text-align:center;
    }

    /* ---------- Hero / Slider ---------- */
    .hero-slider{
        height:100svh;
    }

    .slide-content{
        max-width:100%;
        padding:0 10px;
    }

    .slide-content h1{
        font-size:2.1rem !important;
        margin-bottom:15px;
        line-height:1.2;
    }

    .slide-content p{
        font-size:1.05rem !important;
        margin-bottom:22px;
    }

    .slide-content .btn{
        display:block;
        width:100%;
        margin:0 0 12px 0 !important;
    }

    .swiper-button-next,
    .swiper-button-prev{
        transform:scale(.7);
    }

    /* ---------- Estadísticas ---------- */
    .stats-section{
        padding:60px 0;
    }

    /* En desktop background-size:100% ajusta el ancho de la imagen y su
       alto queda proporcional; como en celular la sección es mucho más
       alta (las 4 cajas se apilan), la imagen quedaba muy corta y dejaba
       huecos en blanco arriba y abajo. Con "cover" llena toda la sección. */
    .stats-overlay{
        background-size:cover;
        background-position:center;
    }

    .stats-section h2{
        font-size:2.4rem;
    }

    .stats-box{
        margin-bottom:25px;
    }

    .stats-divider{
        width:80%;
        margin:30px auto;
    }

    .statspan{
        left:0;
        max-width:100%;
        font-size:16px !important;
        padding:0 10px;
    }

    /* ---------- Quiénes somos ---------- */
    .about-title{
        min-height:auto;
        padding:30px 20px 0;
    }

    .title-content{
        padding:0;
        text-align:center;
    }

    .title-content h2{
        font-size:2.2rem !important;
    }

    .about-text{
        padding:25px 20px 40px !important;
    }

    .about-text p{
        margin-right:0;
        font-size:1rem;
        text-align:justify;
    }

    /* ---------- Portafolio ---------- */
    .portfolio-section{
        padding:60px 15px;
    }

    .titulo3{
        font-size:2.1rem;
        text-align:center;
        display:block;
    }

    .service-card{
        max-width:100%;
        margin:10px auto;
    }

    /* ---------- Servicios de valor agregado / Industrias ---------- */
    .value-section{
        min-height:auto;
        padding:60px 0;
    }

    .titulo,
    .titulo-industrias{
        font-size:2.2rem;
        text-align:center;
    }

    .service-block > .titulo,
    .industry-block .titulo-industrias{
        text-align:center;
        margin-bottom:20px;
    }

    .industry-block{
        margin-top:30px;
    }

    /* ---------- Valores (Misión / Visión) ---------- */
    .values-section{
        padding:60px 0;
    }

    .value-heading{
        font-size:2rem;
        margin-bottom:10px;
        text-align:center;
    }

    .value-item{
        margin-bottom:35px;
        text-align:center;
    }

    .value-item .col-lg-10{
        text-align:justify;
    }

    /* ---------- Equipo ---------- */
    .team-section{
        padding:60px 0;
    }

    .team-section .titulo{
        text-align:center;
        font-size:2.2rem;
    }

    .member h5{
        font-size:1rem;
    }

    .member span{
        font-size:.85rem;
    }

    .member img{
        width:80px;
        height:80px;
    }

    .director img{
        width:90px;
        height:90px;
    }

    /* ---------- Conoce más ---------- */
    .knowmore-section{
        padding:50px 0;
    }

    /* ---------- Cultura ---------- */
    .cultura_parrafo{
        margin:40px auto;
        padding:0 10px;
    }

    .cultura_parrafo h2{
        font-size:2.2rem !important;
        bottom:0;
    }

    .culture-banner{
        padding:40px 0;
        text-align:center;
    }

    .culture-banner h3{
        font-size:1.5rem;
    }

    .culture-banner .col-lg-4{
        margin-top:20px;
    }

    /* ---------- Ubicación ---------- */
    .location-section{
        padding:60px 0;
    }

    .location-card{
        padding:22px;
    }

    .map-container iframe{
        height:280px;
    }

    /* ---------- Footer ---------- */
    .footer{
        padding:50px 0 0;
        text-align:center;
    }

    .footer-logo{
        right:0;
        margin:0 auto 20px;
        display:block;
    }

    .social{
        justify-content:center;
    }

    .footer .line{
        margin:15px auto 20px;
    }

    .footer-bottom .col-md-6{
        text-align:center !important;
        margin-bottom:6px;
    }

    /* ---------- WhatsApp flotante ---------- */
    .whatsapp{
        width:55px;
        height:55px;
        font-size:26px;
        right:15px;
        bottom:15px;
    }

    /* ---------- Modales (servicios / equipo / testimonios) ---------- */
    .modal-dialog{
        margin:10px;
    }

    .modalImage{
        position:static !important;
        left:auto !important;
        width:100%;
        max-width:260px;
        display:block;
        margin:0 auto 20px;
    }

    #teamImage{
        width:150px;
        height:150px;
    }

    .modal-header h3{
        font-size:1.2rem;
    }

    .comment-card img{
        height:180px;
    }
}

/* ==========================================================================
   CELULAR PEQUEÑO (<= 480px)
   ========================================================================== */
@media (max-width: 480px){

    .logo-video{
        width:100px;
    }

    .logo-video2{
        width:90px;
    }

    .slide-content h1{
        font-size:1.7rem !important;
    }

    .slide-content p{
        font-size:.95rem !important;
    }

    .stats-section h2{
        font-size:2rem;
    }

    .title-content h2,
    .titulo3,
    .titulo,
    .titulo-industrias{
        font-size:1.8rem !important;
    }

    .cultura_parrafo h2{
        font-size:1.8rem !important;
    }

    .member{
        width:130px;
    }

    .director{
        width:150px;
        height:150px;
    }

    .value-section .tag,
    .floating-area .tag{
        font-size:.95rem !important;
        padding:6px 12px;
    }
}