/* =========================================================
   1920px
========================================================= */
@media (max-width:1920px){

    /* ================== INDEX.HTML ================== */

    /* BLOG - IMAGEN DESTACADA */
    .blog-featured-image img{
        object-position:center 38%;
    }

    /* =============== PROYECTOS.HTML ================ */

   

    /* INTRODUCCIÓN */
    .texto-editorial > p:not(.texto-destacado){
        font-size:1.3rem;
        line-height:1.7;
    }

    .destacado-integral p{
        font-size:1.3rem;
        line-height:1.7;
    }

    /* SECCIONES PUBLICIDAD / WEB / BRANDING / CONTENIDOS / CONSULTORÍA */
    .proyecto-texto p{
        font-size:1.3rem;
        line-height:1.7;
    }
}


/* =========================================================
   1600px
========================================================= */
@media (max-width:1600px){

    /* =============== PROYECTOS.HTML ================ */

    .texto-editorial > p:not(.texto-destacado){
        font-size:1.3rem;
        line-height:1.7;
    }

    .destacado-integral p{
        font-size:1.3rem;
        line-height:1.7;
    }

    .proyecto-texto p{
        font-size:1.3rem;
        line-height:1.7;
    }
}


/* =========================================================
   1440px
========================================================= */
@media (max-width:1440px){

    /* ================== INDEX.HTML ================== */

    /* HERO - CARDS GIRATORIAS */
    .hero-right{
        transform:translateX(90px);
    }

    /* =============== PROYECTOS.HTML ================ */

    /* PÁRRAFOS */
    .texto-editorial > p:not(.texto-destacado){
        font-size:1.3rem;
        line-height:1.7;
    }

    .destacado-integral p{
        font-size:1.3rem;
        line-height:1.7;
    }

    .proyecto-texto p{
        font-size:1.3rem;
        line-height:1.7;
    }

   
}


/* =========================================================
   1400px
========================================================= */
@media (max-width:1400px){
    /* ================== INDEX.HTML ================== */
    .hero-left h1{
        width:600px;
        max-width:none;
    }

    .hero-right .hero-card{
        left:120px;
    }

    /* =============== PROYECTOS.HTML ================ */
    .texto-editorial > p:not(.texto-destacado){
        font-size:1.3rem;
        line-height:1.7;
    }

    .destacado-integral p{
        font-size:1.3rem;
        line-height:1.7;
    }

    .proyecto-texto p{
        font-size:1.3rem;
        line-height:1.7;
    }

    /* FLECHAS SERVICIOS */
    .servicios-arrow{
        display:flex !important;
    }

   

}

/* =========================================================
   DESARROLLO WEB - FLECHA DESDE 1400 HACIA ABAJO
========================================================= */

@media (max-width:1400px){

    /* SOLO MOSTRAMOS LA PRIMERA FILA */
    .web-showcase:not(.web-showcase-open) .web-fila:nth-child(n+2){
        display:none !important;
    }

    /* AL ABRIR, MOSTRAMOS TODAS */
    .web-showcase.web-showcase-open .web-fila{
        display:flex !important;
    }

    /* BOTÓN FLECHA */
    .web-showcase-toggle{
        display:flex !important;
        width:44px !important;
        height:44px !important;
        margin:18px auto 0 !important;
        padding:0 !important;

        align-items:center !important;
        justify-content:center !important;

        border:1px solid rgba(255,255,255,.25) !important;
        border-radius:50% !important;

        background:rgba(255,255,255,.08) !important;
        color:#fff !important;

        font-size:1.5rem !important;
        line-height:1 !important;
        font-family:inherit !important;

        cursor:pointer;
    }

    .web-showcase-toggle:hover{
        background:rgba(255,255,255,.15) !important;
    }


}

/* =========================================================
   1280px
========================================================= */
@media (max-width:1280px){
    /* ================== INDEX.HTML ================== */
    .hero-left h1{
        width:600px;
        max-width:none;
    }

    .hero-right .hero-card{
        left:-100px !important;
    }

    /* =============== PROYECTOS.HTML ================ */
    .texto-editorial > p:not(.texto-destacado){
        font-size:1.3rem;
        line-height:1.7;
    }

    .destacado-integral p{
        font-size:1.3rem;
        line-height:1.7;
    }

    .proyecto-texto p{
        font-size:1.3rem;
        line-height:1.7;
    }

      /* FLECHAS SERVICIOS */
    .servicios-arrow{
        display:flex !important;
    }


}

/* =========================================================
   1024px
========================================================= */
@media (max-width:1024px){

    /* ================== GENERAL ================== */

    /* NAV */
    #navbar,
    .blog-nav{
        padding-left:45px;
        padding-right:45px;
    }

    .logo-img{
        width:250px;
        height:auto;
    }

    .nav-links{
        gap:24px;
    }

    .nav-links a{
        font-size:.9rem;
    }

    .nav-cta{
        padding:11px 20px !important;
        font-size:.9rem !important;
    }       

      /* FLECHAS SERVICIOS */
    .servicios-arrow{
        display:flex !important;
    }

    /* ================== INDEX.HTML ================== */

    /* HERO */
    .hero-content{
        width:100%;
        max-width:none;
    }

    .hero-left{
        width:48%;
    }

    .hero-left h1{
        width:500px;
        max-width:none;
        font-size:3.7rem;
        line-height:1.05;
    }

    .hero-left p{
        width:520px;
        max-width:none;
        font-size:1.05rem;
        line-height:1.55;
    }

    .hero-right .hero-card{
        left:85px;
    }

    .hero-buttons .btn-primary{
        width:auto !important;
        min-width:max-content;
        white-space:nowrap;
        padding-left:24px;
        padding-right:24px;
    }


    /* BLOG DEL INDEX */
    .blog-layout{
        display:grid;
        grid-template-columns:1fr;
        gap:28px;
        width:100%;
    }

    /* ARTÍCULO DESTACADO */
    .blog-featured{
        width:100%;
        min-width:0;
    }

    .blog-featured-image{
        width:100%;
    }

    .blog-featured-image img{
        width:100%;
        height:340px;
        object-fit:cover;
        object-position:center 38%;
    }

    /* TRES ARTÍCULOS INFERIORES */
    .blog-secondary{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        grid-template-rows:auto;
        gap:18px;
        width:100%;
        align-items:stretch;
    }

    /* CARD */
    .blog-small-card{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        width:100% !important;
        height:100% !important;
        min-width:0;
        box-sizing:border-box;
        overflow:hidden;
    }

    /* IMÁGENES IGUALES */
    .blog-small-card > a:first-child img{
        display:block;
        width:100% !important;
        height:155px !important;
        min-height:155px;
        object-fit:cover;
        object-position:center;
        border-radius:0;
        margin:0;
    }

    /* CONTENIDO */
    .blog-small-card > div{
        display:flex;
        flex-direction:column;
        flex:1;
        width:100%;
        padding:20px;
        box-sizing:border-box;
    }

    /* CATEGORÍA */
    .blog-small-card .blog-category{
        margin:0 0 10px;
    }

    /* TÍTULO */
    .blog-small-card h3{
        margin:0 0 15px;
        font-size:1.05rem;
        line-height:1.35;
    }

    /* LEER MÁS ABAJO */
    .blog-small-card a{
        margin-top:auto;
    }

    

    /* ================== PROYECTOS.HTML ================== */

    /* NAV */
    .proyectos-page #navbar{
        padding-left:45px;
        padding-right:45px;
    }

    .proyectos-page #navbar .logo-img{
        width:250px;
    }

    .proyectos-page #navbar .nav-links{
        gap:22px;
    }

    .proyectos-page #navbar .nav-links a{
        font-size:.9rem;
    }

    /* TEXTOS */
    .texto-editorial > p:not(.texto-destacado),
    .destacado-integral p,  
    .proyecto-texto p{
        font-size:1.2rem;
        line-height:1.65;
    }


    .proyectos-hero{
        background-image:url("../assets/proyectos/fondo_proyectos_900.png") !important;
        background-size:cover !important;
        background-position:70% center !important;
        background-repeat:no-repeat !important;
    }


    /* ================== BLOG.HTML ================== */

    /* FONDO */
    body.blog-page{
        width:100%;
        min-width:100%;
        background-size:cover;
        background-position:center top;
        background-attachment:fixed;
    }

    .blog-page #navbar{
        width:100%;
        box-sizing:border-box;
        padding-left:45px;
        padding-right:45px;
    }

    .blog-page #navbar .logo-img{
        width:250px;
    }

    .blog-page #navbar .nav-links{
        gap:22px;
    }

    .blog-page #navbar .nav-links a{
        font-size:.9rem;
    }


    /* ================== ARTICULO.HTML ================== */

    body.articulo-page{
        width:100%;
        min-width:100%;
        overflow-x:hidden;
    }

    .articulo-page #navbar{
        width:100%;
        box-sizing:border-box;
        padding-left:45px;
        padding-right:45px;
    }

    .articulo-page #navbar .logo-img{
        width:250px;
    }

    .articulo-page #navbar .nav-links{
        gap:22px;
    }

    .articulo-page #navbar .nav-links a{
        font-size:.9rem;
    }

   /* ================== FOOTER ================== */
    .footer{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        grid-template-rows:auto auto auto !important;
        column-gap:60px !important;
        row-gap:15px !important;
        width:100% !important;
        padding:50px 70px 25px !important;
        margin:0 !important;
        box-sizing:border-box !important;
    }

    /* LOGO */
    .footer-top{
        grid-column:1 !important;
        grid-row:1 !important;
        display:block !important;
        width:100% !important;
        margin:0 !important;
        padding:0 !important;
        text-align:left !important;
        transform:none !important;
    }

    .footer-top .logo-img{
        display:block !important;
        width:230px !important;
        max-width:100% !important;
        height:auto !important;
        margin:0 !important;
        transform:none !important;
    }

    /* ELIMINAMOS EL LAYOUT ORIGINAL DEL CONTENEDOR */
    .footer-middle{
        display:contents !important;
    }

    /* REDES - DEBAJO DEL LOGO */
    .footer-middle .footer-col:first-child{
        grid-column:1 !important;
        grid-row:2 !important;
        width:100% !important;
        margin:-5px 0 0 !important;
        padding:0 !important;
        text-align:left !important;
        transform:none !important;
    }

    .footer-middle .footer-col:first-child h4{
        display:none !important;
    }

    .footer-middle .social-icons{
        display:flex !important;
        justify-content:flex-start !important;
        align-items:center !important;
        gap:16px !important;
        margin:0 !important;
        padding:0 !important;
        transform:none !important;
    }

    /* CONTACTO - COLUMNA DERECHA */
    .footer-middle .footer-col:last-child{
        grid-column:2 !important;
        grid-row:1 / span 2 !important;
        width:100% !important;
        margin:0 !important;
        padding:0 !important;
        text-align:left !important;
        transform:none !important;
        align-self:start !important;
    }

    .footer-middle .footer-col:last-child h4{
        margin:0 0 12px !important;
        padding:0 !important;
        text-align:left !important;
    }

    .footer-middle .footer-col:last-child p{
        margin:0 0 7px !important;
        padding:0 !important;
        text-align:left !important;
    }

    /* COPYRIGHT */
    .footer-bottom{
        grid-column:1 / -1 !important;
        grid-row:3 !important;
        width:100% !important;
        margin:25px 0 0 !important;
        padding:18px 0 0 !important;
        text-align:center !important;
        transform:none !important;
    }

    .footer-bottom p{
        margin:0 !important;
        padding:0 !important;
        text-align:center !important;
    }
    
    /* HERO PROYECTOS - 1024px */
    .proyectos-hero .proyectos-hero-content h1{
        font-size:4.2rem !important;
        line-height:.92 !important;
    }

    .proyectos-hero .hero-frase{
        font-size:1rem !important;
        line-height:1.4 !important;
        max-width:300px !important;
    }



}

/* =========================================================
   900px
========================================================= */
@media (max-width:900px){

    /* =====================================================
       GENERAL - NAV TODAS LAS PÁGINAS
    ===================================================== */

    #navbar,
    .blog-nav,
    .proyectos-page #navbar,
    .blog-page #navbar,
    .articulo-page #navbar{
        padding-left:28px !important;
        padding-right:28px !important;
    }

    #navbar .logo-img,
    .blog-nav .logo-img,
    .proyectos-page #navbar .logo-img,
    .blog-page #navbar .logo-img,
    .articulo-page #navbar .logo-img{
        width:250px !important;
        height:auto !important;
    }

    #navbar .nav-links,
    .blog-nav .nav-links,
    .proyectos-page #navbar .nav-links,
    .blog-page #navbar .nav-links,
    .articulo-page #navbar .nav-links{
        gap:15px !important;
    }

    #navbar .nav-links a,
    .blog-nav .nav-links a,
    .proyectos-page #navbar .nav-links a,
    .blog-page #navbar .nav-links a,
    .articulo-page #navbar .nav-links a{
        font-size:.96rem !important;
    }

    #navbar .nav-cta,
    .blog-nav .nav-cta{
        padding:8px 14px !important;
        font-size:.96rem !important;
        white-space:nowrap !important;
    }


    /* =====================================================
       INDEX - HERO
       Solo achicamos. NO cambiamos estructura.
    ===================================================== */

    .hero-left h1,
    .hero-title{
        font-size:3rem !important;
        line-height:1.05 !important;

        /* mantenemos el ancho heredado de 1024 */
        width:500px !important;
        max-width:none !important;
    }

    .hero-left p,
    .hero-subtitle{
        font-size:.9rem !important;
        line-height:1.5 !important;

        /* mantenemos el ancho para que no genere más líneas */
        width:520px !important;
        max-width:none !important;
    }

    /* FONDO HERO ADAPTADO */
    .hero-bg{
        background-image:url("../assets/imagenes/fondo_hero_900.png") !important;
        background-size:cover !important;
        background-position:center center !important;
        background-repeat:no-repeat !important;
    }



    /* =====================================================
    BLOG - HERO
    ===================================================== */


   /* ================== BLOG - HERO ================== */

    .blog-page .blog-hero{
        position:relative !important;
    }

    /* BLOQUE COMPLETO DE TEXTO */
    .blog-page .blog-hero-content{
        position:absolute !important;

        left:50px !important;
        top:50% !important;
        transform:translateY(-42%) !important;

        width:440px !important;
        max-width:440px !important;

        margin:0 !important;
        padding:0 !important;

        text-align:left !important;
    }

    /* TÍTULO */
    .blog-page .blog-hero h1{
        width:440px !important;
        max-width:440px !important;

        font-size:3.4rem !important;
        line-height:1.02 !important;

        margin:0 0 24px !important;

        text-align:left !important;
    }

    /* SUBTÍTULO */
    .blog-page .blog-hero p{
        width:390px !important;
        max-width:390px !important;

        font-size:1.4rem !important;
        line-height:1.55 !important;

        margin:0 !important;

        text-align:left !important;
    }


    /* =====================================================
    INDEX - GIRATORIAS
    ===================================================== */

    .hero-right{
        display:none !important;
    }
/* =====================================================
       PROYECTOS
       Quitamos SOLAMENTE las imágenes principales.
    ===================================================== */

    .proyecto-imagen{
        display:none !important;
    }

    /*
       Al desaparecer la imagen, el texto aprovecha el espacio.
       No cambiamos el orden ni contenido.
    */

    .proyecto-grid,
    .proyecto-grid-invertido{
        grid-template-columns:1fr !important;
    }

    .proyecto-texto{
        width:100% !important;
        max-width:100% !important;
    }


    /* =====================================================
       PROYECTOS - DESARROLLO WEB
       Videos más chicos
    ===================================================== */

    .web-showcase{
        gap:1.5rem !important;
        margin-top:3rem !important;
    }

    .web-fila{
        height:300px !important;
        gap:1.2rem !important;
    }

    .web-fila video{
        max-width:100% !important;
    }


    /* ================== SERVICIOS - FLECHAS ================== */

    .servicios-slider{
        position:relative;
    }

    .servicios-arrow{
        display:flex !important;
        position:absolute !important;
        top:50% !important;
        transform:translateY(-50%) !important;
        z-index:50 !important;

        width:42px !important;
        height:42px !important;

        align-items:center !important;
        justify-content:center !important;

        padding:0 !important;

        border:1px solid rgba(120,102,239,.25) !important;
        border-radius:50% !important;

        background:#fff !important;
        color:#7866ef !important;

        font-size:2rem !important;
        line-height:1 !important;

        cursor:pointer;
        box-shadow:0 8px 25px rgba(44,38,92,.15);
    }

    .servicios-prev{
        left:8px !important;
    }

    .servicios-next{
        right:8px !important;
    }
}

/* =========================================================
   768px - MENÚ HAMBURGUESA
========================================================= */
@media (max-width:768px){

    /* NAV */
    #navbar,
    .blog-nav{
        padding-left:28px !important;
        padding-right:28px !important;
    }

    /* HAMBURGUESA */
    .menu-toggle{
        display:block !important;
        margin-left:auto;
        color:#fff;
        font-size:2rem;
        line-height:1;
        cursor:pointer;
        z-index:1001;
    }

  
    /* MENÚ */
    .nav-links{
        display:none !important;

        position:absolute;
        top:calc(100% + 12px);
        right:28px;
        left:auto;

        width:230px !important;
        padding:12px !important;

        flex-direction:column;
        align-items:stretch !important;
        gap:4px !important;

        background:linear-gradient(
            135deg,
            #7C5CFF 0%,
            #A56BFF 48%,
            #FF9F8B 100%
        );

        border:1px solid rgba(255,255,255,.18);
        border-radius:18px;

        box-shadow:
            0 18px 45px rgba(0,0,0,.30),
            0 0 30px rgba(124,92,255,.18);

        backdrop-filter:blur(18px);

        z-index:1000;
    }

    .nav-links.active{
        display:flex !important;
    }


    /* LINKS */
    .nav-links li{
        width:100%;
    }

    .nav-links a{
        display:block;
        width:100%;
        box-sizing:border-box;

        padding:11px 14px;

        color:#fff !important;
        font-size:.92rem !important;
        font-weight:600;

        text-align:left;
        border-radius:10px;

        transition:.2s ease;
    }

    .nav-links a:hover{
        background:rgba(255,255,255,.12);
        transform:translateX(3px);
    }


    /* AGENDAR - SIN FONDO PROPIO */
    .nav-links .nav-cta{
        display:block !important;
        width:100%;

        margin-top:5px;
        padding:12px 14px 9px !important;

        background:none !important;
        box-shadow:none !important;
        border:none !important;
        border-top:1px solid rgba(255,255,255,.30) !important;
        border-radius:0 !important;

        color:#fff !important;
        font-size:.95rem !important;
        font-weight:800 !important;

        text-align:left;
    }

    /* TÍTULO Y SUBTÍTULO SERVICIOS */
    #servicios .section-title{
        font-size:2.7rem !important;
        line-height:1.05 !important;
    }

    #servicios .section-subtitle{
        font-size:1.15rem !important;
        line-height:1.5 !important;
        margin-top:16px !important;
    }

    /* =====================================================
    SERVICIOS - CARDS HORIZONTALES APILADAS
    ===================================================== */

    .servicios-slider{
        width:100% !important;
        overflow:visible !important;
    }

    .servicios-track{
        display:flex !important;
        flex-direction:column !important;
        gap:14px !important;
        width:100% !important;
    }

    .servicio-link{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        flex:none !important;
    }

    .servicio-card{
        display:grid !important;
        grid-template-columns:70px 1fr !important;
        grid-template-rows:auto auto !important;
        column-gap:18px !important;
        row-gap:4px !important;

        width:100% !important;
        min-height:0 !important;
        height:auto !important;

        padding:18px 22px !important;

        align-items:center !important;
        transform:none !important;
    }

    /* ICONO */
    .servicio-card .servicio-icon{
        grid-column:1 !important;
        grid-row:1 / 3 !important;

        width:62px !important;
        height:62px !important;

        margin:0 !important;
        align-self:center !important;
    }

    /* TÍTULO */
    .servicio-card h3{
        grid-column:2 !important;
        grid-row:1 !important;

        margin:0 !important;
        padding:0 !important;

        font-size:1.05rem !important;
        line-height:1.2 !important;
        text-align:left !important;
    }

    /* TEXTO */
    .servicio-card p{
        grid-column:2 !important;
        grid-row:2 !important;

        margin:0 !important;
        padding:0 !important;

        font-size:.82rem !important;
        line-height:1.4 !important;
        text-align:left !important;
    }

    /* Ya no necesitamos flechas porque no hay slider horizontal */
    .servicios-arrow{
        display:none !important;
    }

    /* =====================================================
   SERVICIOS - CARDS HORIZONTALES EXPANDIBLES
    ===================================================== */

    .servicios-slider{
        width:100% !important;
        overflow:visible !important;
    }

    .servicios-track{
        display:flex !important;
        flex-direction:column !important;
        gap:14px !important;
        width:100% !important;
    }

    .servicio-link{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        flex:none !important;
    }

    .servicio-card{
        display:grid !important;
        grid-template-columns:70px 1fr !important;
        grid-template-rows:auto !important;
        column-gap:18px !important;

        width:100% !important;
        height:auto !important;
        min-height:90px !important;

        padding:16px 22px !important;

        align-items:center !important;
        transform:none !important;

        cursor:pointer;
    }

    /* ICONO */
    .servicio-card .servicio-icon{
        grid-column:1 !important;
        grid-row:1 / 4 !important;

        width:62px !important;
        height:62px !important;

        margin:0 !important;
        align-self:center !important;
    }

    /* TÍTULO - SIEMPRE VISIBLE */
    .servicio-card h3{
        grid-column:2 !important;

        margin:0 !important;

        font-size:1.1rem !important;
        line-height:1.2 !important;
        text-align:left !important;
    }

    /* TEXTO CERRADO */
    .servicio-card p{
        grid-column:2 !important;

        max-height:0 !important;
        opacity:0 !important;
        overflow:hidden !important;

        margin:0 !important;

        font-size:.85rem !important;
        line-height:1.45 !important;
        text-align:left !important;

        transition:
            max-height .35s ease,
            opacity .25s ease,
            margin .35s ease;
    }

    /* VER MÁS CERRADO */
    .servicio-ver-mas{
        grid-column:2 !important;

        display:block !important;
        max-height:0 !important;
        opacity:0 !important;
        overflow:hidden !important;

        margin:0 !important;

        font-size:.8rem !important;
        font-weight:700 !important;
        text-align:left !important;

        transition:
            max-height .35s ease,
            opacity .25s ease,
            margin .35s ease;
    }

    /* CARD ABIERTA - TEXTO */
    .servicio-link.active .servicio-card p{
        max-height:100px !important;
        opacity:1 !important;
        margin-top:8px !important;
    }

    /* CARD ABIERTA - VER MÁS */
    .servicio-link.active .servicio-ver-mas{
        max-height:40px !important;
        opacity:1 !important;
        margin-top:8px !important;
    }

    /* SIN FLECHAS DEL SLIDER */
    .servicios-arrow{
        display:none !important;
    }

    /* =====================================================
    BLOG INDEX - SMALL CARDS
    ===================================================== */

    /* Ocultamos solamente el título */
    .blog-small-card h3{
        display:none !important;
    }

    /* Card más compacta */
    .blog-small-card > div{
        padding:15px 16px !important;
    }

    /* Etiqueta */
    .blog-small-card .blog-category{
        display:block !important;
        margin:0 0 12px !important;
    }

    /* Leer más */
    .blog-small-card > div > a{
        display:inline-block !important;
        margin:0 !important;
    }


    /* =====================================================
    BLOG.HTML
    ===================================================== */

    .blog-page{
        background:
            linear-gradient(90deg,rgba(7,6,27,.92) 0%,rgba(7,6,27,.75) 38%,rgba(7,6,27,.35) 65%,rgba(7,6,27,.12) 100%),
            url("../assets/blog/fondo_blog_768.png") center/cover fixed no-repeat;
        color:#091128;
    }

    .blog-page .blog-list{
        display:flex !important;
        flex-direction:column !important;
        gap:28px !important;
        width:100% !important;
    }

    .blog-page .blog-post-card{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;

        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        overflow:visible !important;
    }

    /* IMAGEN */
    .blog-page .blog-post-image{
        display:block !important;
        position:relative !important;

        width:100% !important;
        height:260px !important;
        min-height:260px !important;

        flex:none !important;
        overflow:hidden !important;
    }

    .blog-page .blog-post-image img{
        display:block !important;

        width:100% !important;
        height:100% !important;

        object-fit:cover !important;
    }

    /* CONTENIDO */
    .blog-page .blog-post-content{
        display:block !important;
        position:relative !important;

        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        padding:22px !important;
        margin:0 !important;

        opacity:1 !important;
        visibility:visible !important;
        overflow:visible !important;

        transform:none !important;

        box-sizing:border-box !important;
    }

    /* CATEGORÍA */
    .blog-page .blog-post-content .blog-category{
        display:inline-block !important;
        opacity:1 !important;
        visibility:visible !important;
    }

    /* TÍTULO */
    .blog-page .blog-post-content h2{
        display:block !important;
        opacity:1 !important;
        visibility:visible !important;

        margin:10px 0 12px !important;

        font-size:1.35rem !important;
        line-height:1.3 !important;
    }

    /* TEXTO */
    .blog-page .blog-post-content p{
        display:block !important;
        opacity:1 !important;
        visibility:visible !important;

        margin:0 0 15px !important;

        font-size:.95rem !important;
        line-height:1.5 !important;
    }

    /* LEER ARTÍCULO */
    .blog-page .blog-post-content a{
        display:inline-block !important;
        opacity:1 !important;
        visibility:visible !important;
        position:relative !important;

        margin-top:4px !important;
    }

    /* Bajar visualmente contenido 3 y 5 */
    
    .contenido-3{
        transform: translate(-65px, 99px) !important;
    }

    .contenido-5{
        transform: translate(65px, 99px) !important;
    }

    /* BRANDING - imágenes apiladas */
    .branding-galeria{
        display:flex !important;
        flex-direction:column !important;
        gap:22px !important;
        width:100% !important;
    }

    .branding-galeria img{
        width:100% !important;
        max-width:100% !important;
        height:auto !important;
        display:block !important;
    }

}




/* =========================================================
   740px - DESARROLLO WEB
========================================================= */
@media (max-width:740px){

    .web-showcase{
        width:100%;
        padding-left:25px !important;
        padding-right:25px !important;
        box-sizing:border-box;
    }

    .web-fila{
        width:100%;
        display:flex;
        align-items:flex-start;
        justify-content:center;
        gap:14px;
    }

    .web-fila .video-web{
        width:78% !important;
        max-width:78% !important;
        height:auto !important;
    }

    .web-fila .video-mobile{
        width:18% !important;
        max-width:18% !important;
        height:auto !important;
    }

    
/* PUBLICIDAD - PLATAFORMAS ADS */
    #publicidad .plataformas{
        gap:12px !important;
        justify-content:center !important;
    }

    #publicidad .plataforma-card{
        width:120px !important;
        min-width:120px !important;
        height:120px !important;
        min-height:120px !important;
        padding:14px !important;
        box-sizing:border-box !important;
    }

    #publicidad .plataforma-card img{
        width:48px !important;
        height:48px !important;
        object-fit:contain !important;
        margin-bottom:8px !important;
    }

    #publicidad .plataforma-card h3{
        font-size:.82rem !important;
        line-height:1.15 !important;
        margin:0 !important;
    }
}


/* =========================================================
   600px
========================================================= */
@media (max-width:600px){

    /* ================== GENERAL ================== */

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

    section,
    main,
    header,
    footer,
    .secciones-claro{
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    /* Evita que containers heredados de desktop desborden */
    .hero-content,
    .proyectos-container,
    .blog-main,
    .blog-list,
    .contacto-inner{
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
    }


    /* ================== BLOG DEL INDEX ================== */

    #blog{
        width:100% !important;
        max-width:100% !important;
        padding-left:22px !important;
        padding-right:22px !important;
        box-sizing:border-box !important;
    }

    #blog .blog-layout{
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        gap:22px !important;
    }

    /* LAS 3 SMALL CARDS VUELVEN A HORIZONTAL */
    #blog .blog-secondary{
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        gap:12px !important;
    }

    #blog .blog-small-card{
        display:grid !important;
        grid-template-columns:115px 1fr !important;

        width:100% !important;
        height:125px !important;
        min-height:125px !important;

        padding:0 !important;
        margin:0 !important;

        overflow:hidden !important;
        box-sizing:border-box !important;
    }

    /* El <a> contiene la imagen */
    #blog .blog-small-card > a:first-child{
        display:block !important;
        width:115px !important;
        height:125px !important;
        margin:0 !important;
        padding:0 !important;
    }

    #blog .blog-small-card > a:first-child img{
        display:block !important;
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        border-radius:0 !important;
    }

    /* CONTENIDO */
    #blog .blog-small-card > div{
        display:flex !important;
        flex-direction:column !important;
        justify-content:center !important;

        width:100% !important;
        min-width:0 !important;

        padding:14px 16px !important;
        box-sizing:border-box !important;
    }

    /* Como habíamos decidido:
       categoría + Leer más, sin título */
    #blog .blog-small-card h3{
        display:none !important;
    }

    #blog .blog-small-card .blog-category{
        display:block !important;
        margin:0 0 10px !important;

        font-size:.68rem !important;
        line-height:1.2 !important;
    }

    #blog .blog-small-card > div > a{
        display:inline-block !important;
        margin:0 !important;
        font-size:.82rem !important;
    }


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

    .footer{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;

        width:100% !important;
        max-width:100% !important;

        padding:32px 22px 18px !important;

        column-gap:22px !important;
        row-gap:12px !important;

        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .footer-top{
        width:100% !important;
        min-width:0 !important;
    }

    .footer-top .logo-img{
        width:150px !important;
        max-width:100% !important;
        height:auto !important;
    }

    .footer-middle{
        display:contents !important;
    }

    .footer-middle .footer-col{
        width:100% !important;
        min-width:0 !important;
    }

    /* REDES */
    .footer-middle .footer-col:first-child{
        grid-column:1 !important;
    }

    .footer-middle .social-icons{
        display:flex !important;
        gap:12px !important;
        flex-wrap:wrap !important;
    }

    .footer-middle .social-icons img{
        width:28px !important;
        height:28px !important;
    }

    /* CONTACTO */
    .footer-middle .footer-col:last-child{
        grid-column:2 !important;
        min-width:0 !important;
    }

    .footer-middle .footer-col:last-child h4{
        font-size:1.15rem !important;
        margin-bottom:8px !important;
    }

    .footer-middle .footer-col:last-child p,
    .footer-middle .footer-col:last-child a{
        font-size:.78rem !important;
        line-height:1.45 !important;

        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }

    /* COPYRIGHT */
    .footer-bottom{
        grid-column:1 / -1 !important;
        width:100% !important;

        margin-top:15px !important;
        padding-top:14px !important;

        text-align:center !important;
    }

    .footer-bottom p{
        font-size:.65rem !important;
    }




    /* =====================================
    DESARROLLO WEB
    ===================================== */

    #desarrollo-web .web-showcase{
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;

        padding-left:22px !important;
        padding-right:22px !important;

        gap:14px !important;
        box-sizing:border-box !important;
    }

    /* Quitamos el layout anterior de las filas */
    #desarrollo-web .web-fila{
        display:contents !important;
    }


    /* VIDEO WEB APPICE - GRANDE */
    #desarrollo-web .web-fila:first-child .video-web{
        display:block !important;

        width:100% !important;
        height:auto !important;

        margin:0 !important;
    }


    /* OCULTAMOS LOS OTROS DOS VIDEOS WEB */
    #desarrollo-web .web-fila:nth-child(2) .video-web,
    #desarrollo-web .web-fila:nth-child(3) .video-web{
        display:none !important;
    }


    /* VIDEOS MOBILE */
    #desarrollo-web .video-mobile{
        display:block !important;

        width:30% !important;
        max-width:30% !important;
        height:auto !important;

        margin:0 !important;
    }


    /* LOS 3 MOBILE EN UNA MISMA LÍNEA */
    #desarrollo-web .web-showcase{
        flex-direction:row !important;
        flex-wrap:wrap !important;
        justify-content:space-between !important;
    }

    /* El video web ocupa una fila completa */
    #desarrollo-web .web-fila:first-child .video-web{
        flex:0 0 100% !important;
        max-width:100% !important;
    }


    /* ==============================
    QUITAR FLECHA VER MÁS
    ============================== */

    .web-showcase-toggle{
        display:none !important;
    }


    /* =========================================
   PROYECTOS - MOBILE 600
    ========================================= */

    .proyecto-intro,
    .proyecto-seccion,
    .proyectos-final{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        overflow:hidden;
    }

    /* MARGEN LATERAL DE TODAS LAS SECCIONES */
    .proyectos-container{
        width:calc(100% - 48px) !important;
        max-width:calc(100% - 48px) !important;

        margin-left:auto !important;
        margin-right:auto !important;

        padding-left:0 !important;
        padding-right:0 !important;

        box-sizing:border-box !important;
    }

    /* GRIDS A UNA COLUMNA */
    .proyecto-grid,
    .proyecto-grid-invertido{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
    }

    /* TEXTO */
    .proyecto-texto,
    .texto-editorial{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        margin-left:0 !important;
        margin-right:0 !important;

        box-sizing:border-box !important;
    }

    .proyecto-texto h2{
        font-size:1.8rem !important;
        line-height:1.12 !important;
    }

    .proyecto-texto p{
        font-size:.92rem !important;
        line-height:1.55 !important;
    }

    /* EVITAR DESBORDES */
    .proyecto-texto h2,
    .proyecto-texto p,
    .texto-editorial p{
        max-width:100% !important;
        overflow-wrap:break-word;
    }

    /* IMÁGENES */
    .proyecto-imagen,
    .proyecto-imagen img{
        max-width:100% !important;
    }

    /* GALERÍAS */
    .plataformas,
    .branding-galeria,
    .contenidos-galeria,
    .web-showcase{
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    /* =========================================
   PROYECTOS - SECCIONES MOBILE
    ========================================= */

    /* PUBLICIDAD, WEB, BRANDING, CONTENIDOS Y CONSULTORÍA */
    #publicidad,
    #desarrollo-web,
    #branding,
    #contenidos,
    #consultoria{
        width:100% !important;
        max-width:100% !important;
        padding-left:24px !important;
        padding-right:24px !important;
        box-sizing:border-box !important;
    }

    /* El container ya NO agrega otro margen */
    #publicidad > .proyectos-container,
    #desarrollo-web > .proyectos-container,
    #branding > .proyectos-container,
    #contenidos > .proyectos-container,
    #consultoria > .proyectos-container{
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
        padding-left:0 !important;
        padding-right:0 !important;
        box-sizing:border-box !important;
    }

    /* GRID */
    #publicidad .proyecto-grid,
    #desarrollo-web .proyecto-grid,
    #branding .proyecto-grid,
    #contenidos .proyecto-grid,
    #consultoria .proyecto-grid{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        margin:0 !important;
        padding:0 !important;
        grid-template-columns:none !important;
    }

    /* BLOQUE DE TEXTO */
    #publicidad .proyecto-texto,
    #desarrollo-web .proyecto-texto,
    #branding .proyecto-texto,
    #contenidos .proyecto-texto,
    #consultoria .proyecto-texto{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding:0 !important;

        transform:none !important;
        box-sizing:border-box !important;
    }

    /* TEXTOS */
    #publicidad .proyecto-texto h2,
    #desarrollo-web .proyecto-texto h2,
    #branding .proyecto-texto h2,
    #contenidos .proyecto-texto h2,
    #consultoria .proyecto-texto h2{
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;

        font-size:1.75rem !important;
        line-height:1.12 !important;
    }

    #publicidad .proyecto-texto p,
    #desarrollo-web .proyecto-texto p,
    #branding .proyecto-texto p,
    #contenidos .proyecto-texto p,
    #consultoria .proyecto-texto p{
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;

        font-size:.9rem !important;
        line-height:1.55 !important;
    }

    /* ANULAR DESPLAZAMIENTOS DE REVEAL */
    #publicidad .reveal-left,
    #publicidad .reveal-right,
    #desarrollo-web .reveal-left,
    #desarrollo-web .reveal-right,
    #branding .reveal-left,
    #branding .reveal-right,
    #contenidos .reveal-left,
    #contenidos .reveal-right,
    #consultoria .reveal-left,
    #consultoria .reveal-right{
        transform:none !important;
    }

    /* ==============================
   PROYECTOS - INTRO MOBILE
    ============================== */

    .proyecto-intro{
        width:100% !important;
        max-width:100% !important;

        padding-left:24px !important;
        padding-right:24px !important;

        box-sizing:border-box !important;
    }

    .proyecto-intro > .proyectos-container{
        width:100% !important;
        max-width:100% !important;

        margin:0 !important;
        padding:0 !important;

        box-sizing:border-box !important;
    }

    .proyecto-intro .texto-editorial{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding-left:0 !important;
        padding-right:0 !important;

        transform:none !important;
        box-sizing:border-box !important;
    }

    .proyecto-intro .texto-editorial p,
    .proyecto-intro .texto-destacado,
    .proyecto-intro .destacado-integral{
        width:100% !important;
        max-width:100% !important;

        margin-left:0 !important;
        margin-right:0 !important;

        box-sizing:border-box !important;
    }

    .proyecto-intro .reveal-up{
        transform:none !important;
    }


    /* CONTENIDOS - conjunto más chico */
    .contenidos-galeria{
        transform:scale(.82);
        transform-origin:center top;
        margin-bottom:-80px;
    }

    /* Cards delanteras 3 y 5:
    más chicas, más abajo y separadas */
    .contenido-3{
        transform:translate(-55px, 120px) scale(.82) !important;
    }

    .contenido-5{
        transform:translate(70px, 150px) scale(.82) !important;
    }

    .footer .social-icons{
        padding-left:18px !important;
        box-sizing:border-box !important;
    }

    .proyectos-hero{
        background-image:url("../assets/proyectos/fondo_proyectos_600.png") !important;
        background-size:cover !important;
        background-position:70% center !important;
        background-repeat:no-repeat !important;
    }
}


/* =========================================================
   480px - INDEX HERO
========================================================= */
@media (max-width:480px){

    #hero .hero-bg{
        background-image:url("../assets/imagenes/fondo_hero_480.png") !important;
        background-size:cover !important;
        background-position:center center !important;
        background-repeat:no-repeat !important;
    }


    /* 1. Quitar subtítulo */
    #hero .hero-subtitle{
        display:none !important;
    }

    /* Hero en columna */
    #hero .hero-content{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
    }

    /* BOTONES HERO - 480px */

    #hero .hero-left{
        width:100% !important;
        max-width:100% !important;
    }

    #hero .hero-buttons{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;

        width:100% !important;
        max-width:100% !important;

        gap:24px !important;
        margin-top:28px !important;
    }

    #hero .hero-buttons .btn-primary,
    #hero .hero-buttons .btn-secondary{
        width:100% !important;
        min-width:0 !important;
        height:56px !important;

        padding:0 10px !important;
        margin:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        box-sizing:border-box !important;
        text-align:center !important;
        white-space:nowrap !important;
    }
 

    #hero .hero-buttons .btn-primary{
        font-size:0 !important;
    }

    #hero .hero-buttons .btn-primary::after{
        content:"Consultar";
        font-size:.85rem;
        font-weight:600;
    }

   /* Ocultamos las giratorias SOLO en móvil */
    #hero .hero-right{
        display:none !important;
    }


    /* =========================
    CINTA MÓVIL
    ========================= */

    #hero .hero-mobile-marquee{
        display:block !important;

        width:100vw;
        max-width:100vw;

        margin-top:188px;

        overflow:hidden;
        position:relative;

        margin-left:calc(50% - 50vw);
    }


    #hero .hero-mobile-track{
        display:flex;
        align-items:center;

        width:max-content;

        animation:mobileMarquee 12s linear infinite;
    }


    #hero .hero-mobile-item{
        flex:0 0 110px;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        text-align:center;
    }


    #hero .hero-mobile-item img{
        width:50px;
        height:50px;
        object-fit:cover;
        border-radius:50%;
        margin-bottom:7px;
    }


    #hero .hero-mobile-item span{
        color:#fff;
        font-size:.85rem;
        font-weight:700;
        white-space:nowrap;
    }


    @keyframes mobileMarquee{

        from{
            transform:translateX(0);
        }

        to{
            transform:translateX(-440px);
        }

    }

    /* CLIENTES - 480px */
    #clientes .clientes-track{
        gap:2rem !important;
    }

    #clientes .clientes-track img{
        width:210px !important;   /* 30% menos que 300px */
        height:126px !important;  /* 30% menos que 180px */
        transform:none !important;
    }

    /* =========================================================
    CONTACTO - 480px
    ========================================================= */

    /* Cards una debajo de la otra */
    #contacto .contacto-options{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;

        width:100% !important;
        gap:20px !important;
    }

   /* CONTACTO - 480px */
    #contacto .contacto-options{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        width:100% !important;
        gap:14px !important;
    }

    #contacto .contacto-option{
        width:100% !important;
        max-width:340px !important;
        min-height:0 !important;
        height:90px !important;
        aspect-ratio:auto !important;
        padding:14px 18px !important;

        display:grid !important;
        grid-template-columns:1fr 58px !important;
        align-items:center !important;
        column-gap:16px !important;

        text-align:left !important;
    }

    #contacto .contacto-option .opt-icon{
        grid-column:2 !important;
        grid-row:1 !important;
        width:54px !important;
        height:54px !important;
        margin:0 !important;
        justify-self:end !important;
    }

    #contacto .contacto-option .opt-value{
        grid-column:1 !important;
        grid-row:1 !important;
        max-width:none !important;
        margin:0 !important;
        font-size:.95rem !important;
        line-height:1.3 !important;
        text-align:left !important;
    }

    #contacto .contacto-option .opt-label,
    #contacto .contacto-option .opt-line{
        display:none !important;
    }

    #contacto .contacto-option .opt-icon img{
        width:28px !important;
        height:28px !important;
    }    

    #contacto .contacto-option .opt-line{
        display:none !important;
    }
    
    #contacto .contacto-cierre p{
        display:none !important;
    }

    .proyectos-hero{
        background-image:url("../assets/proyectos/fondo_proyectos_480.png") !important;
        background-size:cover !important;
        background-position:70% center !important;
        background-repeat:no-repeat !important;
    }


    /* INTRO PROYECTOS - 480px */
    #intro-proyectos .resaltado-titulo{
        white-space:normal !important;
        box-decoration-break:clone;
        -webkit-box-decoration-break:clone;
        background:linear-gradient(
            transparent 58%,
            rgba(198,154,255,.55) 58%,
            rgba(198,154,255,.55) 92%,
            transparent 92%
        ) !important;
    }

    #intro-proyectos .resaltado-titulo::after{
        display:none !important;
    }

    #intro-proyectos .texto-editorial{
        width:100% !important;
        max-width:100% !important;
    }

    #intro-proyectos .texto-destacado,
    #intro-proyectos .texto-editorial > p{
        width:100% !important;
        max-width:100% !important;
    }

    #intro-proyectos .destacado-integral{
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
        padding:1.5rem !important;
    }
   

    /* =========================================
   PROYECTOS - PUBLICIDAD - 480px
    ========================================= */

    #publicidad .plataformas{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
        width:100% !important;
        max-width:100% !important;
        gap:12px !important;
        margin:2rem 0 0 !important;
        padding:0 !important;
    }

    #publicidad .plataforma-card{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        min-height:105px !important;
        padding:12px 8px !important;
        margin:0 !important;
        border-radius:15px !important;
        box-sizing:border-box !important;
    }

    #publicidad .plataforma-card img{
        width:36px !important;
        height:36px !important;
        max-width:36px !important;
        max-height:36px !important;
        object-fit:contain !important;
    }

    #publicidad .plataforma-card h3{
        margin:.5rem 0 0 !important;
        font-size:.85rem !important;
        line-height:1.15 !important;
    }

    /* PROYECTOS - CONTENIDOS */
    .contenidos-galeria .contenido-2,
    .contenidos-galeria .contenido-5,
    .contenidos-galeria .contenido-6{
        display:none !important;
    }

    .contenidos-galeria{
        height:430px !important;
        margin-top:2.5rem !important;
    }

    .contenidos-galeria .contenido-1{
        width:125px !important;
        left:0 !important;
        top:35px !important;
    }

    .contenidos-galeria .contenido-3{
        width:135px !important;
        left:50% !important;
        top:0 !important;
        transform:translateX(-50%) !important;
    }

    .contenidos-galeria .contenido-4{
        width:125px !important;
        left:auto !important;
        right:0 !important;
        top:35px !important;
    }

    /* PROYECTOS - CTA FINAL */
    .proyectos-final{
        padding:4rem 0 !important;
    }

    .proyectos-final-content{
        max-width:700px !important;
    }

    .proyectos-final h2{
        font-size:2.1rem !important;
        line-height:1.05 !important;
        margin-bottom:1rem !important;
    }

    .proyectos-final p{
        font-size:.9rem !important;
        line-height:1.5 !important;
        margin-bottom:1.5rem !important;
    }

    .proyectos-final .btn-proyecto-final{
        font-size:.85rem !important;
        padding:.75rem 1.25rem !important;
    }


   /* =========================================
   FOOTER - 480px
    ========================================= */

    .footer{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        width:100% !important;
        padding:2.5rem 6% 1.5rem !important;
        text-align:center !important;
        overflow:hidden !important;
    }

    .footer-top{
        display:flex !important;
        justify-content:center !important;
        width:100% !important;
        margin:0 0 1.5rem !important;
    }

    .footer-top .logo-img{
        width:180px !important;
        height:auto !important;
        margin:0 auto !important;
    }

    .footer-middle{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        width:100% !important;
        margin:0 !important;
        gap:1.5rem !important;
    }

    .footer-middle .footer-col{
        width:100% !important;
        margin:0 !important;
        padding:0 !important;
        text-align:center !important;
        transform:none !important;
    }

    .footer-middle .footer-col:first-child{
        order:1 !important;
        transform:none !important;
    }

    .footer-middle .footer-col:last-child{
        order:2 !important;
    }

    .footer-col h4{
        margin:0 0 .7rem !important;
        font-size:1.2rem !important;
        text-align:center !important;
    }

    .footer-col p{
        margin:0 0 .4rem !important;
        font-size:.85rem !important;
        text-align:center !important;
    }

    .footer .social-icons{
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        width:100% !important;
        margin:0 !important;
        gap:.8rem !important;
    }

    .footer .social-icons img{
        width:32px !important;
        height:32px !important;
    }

    .footer-bottom{
        width:100% !important;
        margin:1.5rem 0 0 !important;
        padding:1rem 0 0 !important;
        text-align:center !important;
    }

    .footer-bottom p{
        margin:0 !important;
        font-size:.7rem !important;
        text-align:center !important;
    }


    .footer-middle .footer-col:last-child{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        width:100% !important;
        margin:0 auto !important;
        text-align:center !important;
    }

    .footer-middle .footer-col:last-child h4,
    .footer-middle .footer-col:last-child p,
    .footer-middle .footer-col:last-child a{
        width:100% !important;
        margin-left:auto !important;
        margin-right:auto !important;
        text-align:center !important;
    }

    .blog-page .blog-hero h1{
        width:340px !important;
        max-width:340px !important;
        font-size:2.47rem !important;
        line-height:1.08 !important;
        margin-bottom:18px !important;
    }

    .blog-page .blog-hero p{
        width:340px !important;
        max-width:340px !important;
        font-size:.98rem !important;
        line-height:1.5 !important;
        margin-top:18px !important;
    }
    
        
}


@media (max-width:390px){
    #hero .hero-left h1,
    #hero .hero-title{
        font-size:clamp(2rem, 8vw, 2.5rem) !important;
        line-height:1.08 !important;
        width:100% !important;
        max-width:100% !important;
    }


    .blog-page .blog-hero h1{
        width:300px !important;
        max-width:300px !important;
        font-size:2.1rem !important;
        line-height:1.08 !important;
    }

    .blog-page .blog-hero p{
        width:300px !important;
        max-width:300px !important;
        font-size:.85rem !important;
        line-height:1.5 !important;
    }

    .blog-page .blog-hero-content{
        left:5% !important;
        width:90% !important;
        max-width:90% !important;
        box-sizing:border-box !important;
    }

    .blog-page .blog-hero h1,
    .blog-page .blog-hero p{
        width:100% !important;
        max-width:100% !important;
    }
}