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

.refrigerante-hero{
    background:linear-gradient(
        rgba(13,43,82,0.80),
        rgba(13,43,82,0.80)
    ),
    url("/footer/refrigerante/1.png");

    background-size:cover;
    background-position:center;

    padding:120px 10%;

    text-align:center;

    color:#fff;
}

.refrigerante-hero h1{
    font-size:3.2rem;
    font-weight:800;

    margin-bottom:20px;
}

.refrigerante-hero p{
    font-size:1.2rem;

    max-width:850px;

    margin:auto;

    line-height:1.7;
}


/* =========================
   HERO CADENA FRIA
========================= */

.refrigerante-hero{

    background:
    linear-gradient(
        rgba(13,43,82,.25),   /*opacidad */
        rgba(13,43,82,.25)
    ),
    url("/footer/unidad_refrigerada.png");

    background-size: cover;
    background-position: center 35%;

    min-height: 600px;

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

    text-align:center;

    padding:80px 20px;
}

.hero-frio-content{

    max-width:900px;
}

.hero-frio-content h1{

    color:#fff;

    font-size:4rem;

    font-weight:800;

    margin-bottom:20px;

    text-shadow:0 5px 15px rgba(0,0,0,.35);
}

.hero-frio-content p{

    color:#fff;

    font-size:1.3rem;

    line-height:1.8;

    margin-bottom:35px;
}

.btn-frio{

    display:inline-block;

    background:#ff6b00;

    color:#fff;

    text-decoration:none;

    padding:16px 35px;

    border-radius:40px;

    font-weight:700;

    transition:.3s;

    margin-top:220px; /* 🔥 baja el botón */
}

.btn-frio:hover{

    transform:translateY(-4px);

    background:#ff7d20;

    box-shadow:0 10px 25px rgba(255,107,0,.4);
}

@media(max-width:768px){

    .hero-frio-content h1{

        font-size:2.2rem;
    }

    .hero-frio-content p{

        font-size:1rem;
    }

}

/* =========================
   BLOG REFRIGERANTE
========================= */

.refrigerante-blog{
    background:#f5f7fa;

    padding:80px 8%;
}

/* =========================
   BANNERS CADENA FRIA
========================= */

.frio-banner{

    position:relative;

    width:100%;

    margin-bottom:60px;

    overflow:hidden;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

/* IMAGEN */

.frio-banner img{

    width:100%;

    display:block;
}

/* TEXTO */

.frio-overlay{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:90%;

    text-align:center;

    color:#fff;

    z-index:2;
}

.frio-overlay h2{

    font-size:3rem;

    font-weight:800;

    margin-bottom:20px;

    text-shadow:0 4px 15px rgba(0,0,0,.4);
}

.frio-overlay p{

    font-size:1.2rem;

    line-height:1.8;

    max-width:900px;

    margin:auto;

    text-shadow:0 2px 8px rgba(0,0,0,.5);
}

@media(max-width:768px){

    .frio-overlay h2{

        font-size:1.7rem;
    }

    .frio-overlay p{

        font-size:.95rem;

        line-height:1.5;
    }

}
/* =========================
   EFECTO APARECER
========================= */

.reveal{
    opacity:0;

    transform:translateY(70px);

    transition:all 0.8s ease;
}

.reveal.active{
    opacity:1;

    transform:translateY(0);
}

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

.hablemos-card{
    background:#2447a8;

    padding:70px 30px;

    text-align:center;
}

.hablemos-card h2{
    color:#fff;

    font-size:2.3rem;

    margin-bottom:30px;

    font-weight:800;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:900px){

    .blog-card,
    .reverse{
        flex-direction:column;
    }

    .blog-card img{
        width:100%;
    }

    .blog-content{
        text-align:center;
    }

    .blog-content h2{
        font-size:1.8rem;
    }

    .refrigerante-hero h1{
        font-size:2.2rem;
    }

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

}


@media(max-width:768px){

    .blog-card,
    .blog-card.reverse{
        flex-direction:column;
    }

    .blog-card img{
        width:100%;
    }

    .blog-content h2{
        font-size:30px;
        text-align:center;
    }

    .blog-content p{
        text-align:center;
    }

}