/* =========================
   RESET + BASE
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

body{
    background:#f6f6f6;
    color:#111;
}

/* =========================
   VARIABLES
========================= */

:root{
    --rojo:#d90000;
    --negro:#111;
    --gris:#777;
    --blanco:#fff;
}

/* =========================
   LINKS
========================= */

a{
    text-decoration:none;
    color:inherit;
}

/* =========================
   BOTONES BASE
========================= */

button{
    font-family:inherit;
}

/* =========================
   SCROLL
========================= */

html{
    scroll-behavior:smooth;
}

/* =========================
   SECCIONES GENERALES
========================= */

section{
    width:100%;
}

/* =========================
   TITULOS
========================= */

.section-title{
    text-align:center;
    margin:40px 0 20px;
}

.section-title h2{
    font-size:34px;
    font-weight:800;
}

.section-title p{
    color:var(--gris);
    margin-top:6px;
}

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

.stats{
    width:95%;
    max-width:1200px;
    margin:30px auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.stat{
    background:white;
    padding:25px;
    border-radius:18px;
    text-align:center;

    box-shadow:0 8px 25px rgba(0,0,0,.06);
    transition:.3s;
}

.stat:hover{
    transform:translateY(-5px);
}

.stat h2{
    color:var(--rojo);
    font-size:28px;
}

.stat p{
    color:var(--gris);
    margin-top:6px;
}

/* =========================
   CATEGORÍAS
========================= */

.categorias-section{
    width:95%;
    max-width:1200px;
    margin:40px auto;
}

.categorias-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
    gap:18px;
}

.categoria{
    background:white;
    padding:18px 10px;
    border-radius:16px;

    text-align:center;
    cursor:pointer;

    transition:.25s;

    box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.categoria:hover{
    transform:translateY(-5px);
    background:var(--rojo);
    color:white;
}

.categoria span{
    font-size:22px;
}

.categoria p{
    font-size:13px;
    margin-top:6px;
}

/* =========================
   HERO PLACEHOLDER (BASE)
========================= */

.hero{
    width:95%;
    max-width:1300px;
    margin:25px auto;
    border-radius:24px;
    overflow:hidden;
}

/* =========================
   BENEFICIOS
========================= */

.beneficios{
    width:95%;
    max-width:1200px;
    margin:60px auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.beneficio{
    background:white;
    padding:25px;
    border-radius:18px;
    text-align:center;

    box-shadow:0 8px 25px rgba(0,0,0,.06);
    transition:.3s;
}

.beneficio:hover{
    transform:translateY(-6px);
}

.beneficio-icono{
    font-size:30px;
    margin-bottom:10px;
    color:var(--rojo);
}

.beneficio h3{
    margin-bottom:8px;
}

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

.banner-vender{
    width:95%;
    max-width:1200px;
    margin:60px auto;

    background:linear-gradient(135deg,#111,#2a0000);
    color:white;

    padding:40px;
    border-radius:22px;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.btn-banner{
    background:var(--rojo);
    color:white;
    border:none;

    padding:14px 28px;
    border-radius:14px;

    cursor:pointer;
    font-weight:bold;
    transition:.3s;
}

.btn-banner:hover{
    transform:scale(1.05);
    background:#ff1a1a;
}

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

.footer{
    background:#0f0f0f;
    color:white;

    margin-top:80px;
    padding:60px 20px 20px;
}

.footer-container{
    width:95%;
    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.footer-col h2 span{
    color:var(--rojo);
}

.footer-col h3{
    margin-bottom:12px;
}

.footer-col a{
    display:block;
    color:#bbb;
    margin:6px 0;
    font-size:14px;
}

.footer-col a:hover{
    color:white;
}

.footer-bottom{
    text-align:center;
    margin-top:40px;
    color:#777;
    font-size:13px;
}

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

@media(max-width:900px){

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

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

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

}

@media(max-width:600px){

.stats{
    grid-template-columns:1fr;
}

.beneficios{
    grid-template-columns:1fr;
}

.banner-vender{
    flex-direction:column;
    gap:20px;
    text-align:center;
}

}


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

.hero{
    width:95%;
    max-width:1300px;

    margin:25px auto;

    border-radius:26px;
    overflow:hidden;

    background:
    linear-gradient(90deg,
    rgba(0,0,0,.92),
    rgba(0,0,0,.5)),
    url("../img/hero.jpg");

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

    color:white;
}

.hero-content{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:60px;
}

/* TEXTO */

.hero-left{
    max-width:55%;
}

.hero-badge{
    background:#d90000;
    padding:6px 12px;
    border-radius:20px;

    font-size:12px;
    font-weight:bold;
}

.hero-left h1{
    font-size:48px;
    margin-top:15px;
    line-height:1.1;
}

.hero-left p{
    margin-top:15px;
    color:#ddd;
}

/* BOTONES */

.hero-buttons{
    display:flex;
    gap:12px;
    margin-top:20px;
}

.btn-hero-primary{
    background:#d90000;
    border:none;

    color:white;
    padding:12px 20px;

    border-radius:12px;
    cursor:pointer;

    font-weight:bold;
    transition:.25s;
}

.btn-hero-primary:hover{
    transform:translateY(-3px);
    background:#ff1a1a;
}

.btn-hero-secondary{
    background:transparent;
    border:2px solid white;

    color:white;
    padding:12px 20px;

    border-radius:12px;

    cursor:pointer;
    transition:.25s;
}

.btn-hero-secondary:hover{
    background:white;
    color:black;
}

/* IMAGEN HERO */

.hero-right img{
    width:320px;
    border-radius:18px;
}

/* RESPONSIVE */

@media(max-width:900px){

.hero-content{
    flex-direction:column;
    text-align:center;
    gap:30px;
}

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

.hero-right img{
    width:240px;
}

}


/* =====================================================
   PASALAVENTA - DISEÑO PARA CELULAR
   ===================================================== */

@media (max-width: 600px) {

    /* =========================
       BASE
       ========================= */

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

    section {
        width: 100%;
    }

    /* =========================
       TITULOS
       ========================= */

    .section-title {
        margin: 25px 15px 15px;
    }

    .section-title h2 {
        font-size: 26px;
    }

    .section-title p {
        font-size: 14px;
    }

    /* =========================
       ESTADISTICAS
       ========================= */

    .stats {
        width: calc(100% - 24px);
        margin: 20px auto;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .stat {
        padding: 18px 10px;
        border-radius: 14px;
    }

    .stat h2 {
        font-size: 23px;
    }

    .stat p {
        font-size: 13px;
    }

    /* =========================
       CATEGORIAS
       ========================= */

    .categorias-section {
        width: calc(100% - 24px);
        margin: 25px auto;
    }

    .categorias-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .categoria {
        padding: 14px 6px;
        border-radius: 13px;
    }

    .categoria span {
        font-size: 20px;
    }

    .categoria p {
        font-size: 11px;
    }

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

    .hero {
        width: calc(100% - 20px);
        margin: 15px auto;
        border-radius: 18px;
    }

    .hero-content {
        padding: 35px 20px;
        gap: 25px;
    }

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

    .hero-left h1 {
        font-size: 32px;
    }

    .hero-left p {
        font-size: 14px;
        line-height: 1.5;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        width: 100%;
        padding: 12px;
    }

    .hero-right img {
        width: 190px;
        max-width: 100%;
    }

    /* =========================
       BENEFICIOS
       ========================= */

    .beneficios {
        width: calc(100% - 24px);
        margin: 35px auto;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .beneficio {
        padding: 20px 15px;
        border-radius: 15px;
    }

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

    .banner-vender {
        width: calc(100% - 24px);
        margin: 35px auto;
        padding: 28px 18px;
        border-radius: 18px;
    }

    .banner-vender h2 {
        font-size: 23px;
    }

    .banner-vender p {
        font-size: 14px;
    }

    .btn-banner {
        width: 100%;
        padding: 13px 20px;
    }

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

    .footer {
        margin-top: 45px;
        padding: 40px 15px 20px;
    }

    .footer-container {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 25px;
        text-align: center;
    }

    .footer-bottom {
        margin-top: 25px;
    }

}


/* =====================================================
   PASALAVENTA - MOBILE COMPACT
   ===================================================== */

@media (max-width: 600px) {

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

    /* =================================================
       TITULOS
       ================================================= */

    .section-title {
        margin: 20px 12px 12px;
    }

    .section-title h2 {
        font-size: 23px;
    }

    .section-title p {
        font-size: 12px;
    }


    /* =================================================
       ESTADISTICAS
       2 POR FILA
       ================================================= */

    .stats {
        width: calc(100% - 20px);
        margin: 18px auto;

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

        gap: 8px;
    }

    .stat {
        padding: 12px 8px;
        border-radius: 12px;

        min-height: 75px;

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

    .stat h2 {
        font-size: 20px;
    }

    .stat p {
        font-size: 11px;
        margin-top: 3px;
    }


    /* =================================================
       CATEGORIAS
       3 POR FILA
       ================================================= */

    .categorias-section {
        width: calc(100% - 20px);
        margin: 22px auto;
    }

    .categorias-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 7px;
    }

    .categoria {
        padding: 11px 4px;
        border-radius: 11px;
    }

    .categoria span {
        font-size: 18px;
    }

    .categoria p {
        font-size: 10px;
        margin-top: 4px;
    }


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

    .hero {
        width: calc(100% - 16px);
        margin: 12px auto;

        border-radius: 15px;
    }

    .hero-content {
        padding: 25px 15px;

        display: flex;
        flex-direction: column;

        gap: 18px;
    }

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

    .hero-left h1 {
        font-size: 28px;
    }

    .hero-left p {
        font-size: 13px;
        line-height: 1.4;
    }

    .hero-buttons {
        display: flex;
        flex-direction: row;
        gap: 7px;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        flex: 1;
        width: auto;

        padding: 10px 6px;

        font-size: 12px;
    }

    .hero-right img {
        width: 160px;
    }


    /* =================================================
       PRODUCTOS
       ================================================= */

    .productos-section {
        width: calc(100% - 16px);
        margin: 22px auto;
    }

    .productos-top {
        display: flex;
        flex-direction: row;

        justify-content: space-between;
        align-items: center;

        gap: 8px;

        margin-bottom: 12px;
    }

    .productos-top h2 {
        font-size: 22px;
    }

    .productos-top p {
        font-size: 11px;
    }


    /* =================================================
       GRID PRODUCTOS
       ================================================= */

    .productos {
        width: 100%;

        display: grid !important;

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

        gap: 9px;
    }


    /* =================================================
       CARD PRODUCTO
       ================================================= */

    .producto {
        width: 100%;

        border-radius: 12px;

        box-shadow: 0 3px 10px rgba(0,0,0,.08);
    }

    .producto:hover {
        transform: none;
        box-shadow: 0 3px 10px rgba(0,0,0,.08);
    }


    /* =================================================
       IMAGEN PRODUCTO
       ================================================= */

    .producto-img {
        width: 100%;
        height: 140px;
    }

    .img-producto {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }


    /* =================================================
       BADGE
       ================================================= */

    .producto-badges {
        top: 6px;
        left: 6px;
    }

    .badge {
        padding: 3px 6px;
        font-size: 8px;
    }


    /* =================================================
       CARRITO
       ================================================= */

    .btn-cart-float {
        width: 32px;
        height: 32px;

        top: 6px;
        right: 6px;

        font-size: 14px;
    }


    /* =================================================
       INFO PRODUCTO
       ================================================= */

    .producto-info {
        padding: 9px;
    }

    .categoria-card {
        font-size: 8px;
    }

    .producto-info h3 {
        font-size: 13px;

        line-height: 1.25;

        min-height: 33px;

        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

        overflow: hidden;
    }


    /* =================================================
       PRECIO
       ================================================= */

    .precio {
        font-size: 17px;
        margin-top: 5px;
    }


    /* =================================================
       INFO EXTRA
       ================================================= */

    .extra-info {
        display: flex;

        justify-content: space-between;

        font-size: 9px;

        margin-top: 6px;
    }


    /* =================================================
       COMPRAR
       ================================================= */

    .btn-comprar {
        width: 100%;

        padding: 8px 4px;

        margin-top: 8px;

        border-radius: 8px;

        font-size: 11px;
    }


    /* =================================================
       FILTROS
       ================================================= */

    .filtros-avanzados {
        width: 100%;

        display: grid;

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

        gap: 7px;

        padding: 10px;

        border-radius: 11px;
    }

    .filtros-avanzados select,
    .filtros-avanzados input {
        width: 100%;

        min-width: 0;

        padding: 9px;

        font-size: 11px;

        border-radius: 8px;
    }


    /* =================================================
       ORDENAR
       ================================================= */

    .productos-filtros {
        width: 100%;

        display: flex;

        flex-direction: row;

        align-items: center;

        gap: 8px;

        padding: 9px 10px;

        border-radius: 11px;
    }

    .productos-filtros label {
        font-size: 11px;

        white-space: nowrap;
    }

    .productos-filtros select {
        flex: 1;

        min-width: 0;

        padding: 9px;

        font-size: 11px;
    }


    /* =================================================
       BENEFICIOS
       2 POR FILA
       ================================================= */

    .beneficios {
        width: calc(100% - 20px);

        display: grid;

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

        gap: 8px;

        margin: 28px auto;
    }

    .beneficio {
        padding: 15px 8px;

        border-radius: 12px;
    }

    .beneficio-icono {
        font-size: 23px;

        margin-bottom: 5px;
    }

    .beneficio h3 {
        font-size: 13px;

        margin-bottom: 4px;
    }

    .beneficio p {
        font-size: 10px;

        line-height: 1.3;
    }


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

    .banner-vender {
        width: calc(100% - 20px);

        margin: 28px auto;

        padding: 22px 14px;

        border-radius: 14px;

        display: flex;

        flex-direction: column;

        gap: 12px;

        text-align: center;
    }

    .banner-vender h2 {
        font-size: 20px;
    }

    .banner-vender p {
        font-size: 12px;
    }

    .btn-banner {
        width: 100%;

        padding: 11px;

        font-size: 12px;
    }


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

    .footer {
        margin-top: 40px;

        padding: 35px 12px 15px;
    }

    .footer-container {
        width: 100%;

        display: grid;

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

        gap: 20px;

        text-align: center;
    }

    .footer-col h2 {
        font-size: 18px;
    }

    .footer-col h3 {
        font-size: 13px;
    }

    .footer-col a {
        font-size: 11px;

        margin: 4px 0;
    }

    .footer-bottom {
        margin-top: 20px;

        font-size: 10px;
    }


    /* =================================================
       PRODUCTO INDIVIDUAL
       ================================================= */

    .producto-page {
        width: 100%;

        padding: 6px;

        margin: 10px auto;
    }

    .producto-wrapper {
        width: 100%;

        display: block;
    }

    .producto-galeria,
    .producto-info {
        padding: 14px;
    }

    .imagen-principal {
        height: 280px;
    }

    .producto-info h1 {
        font-size: 24px;
    }

    #productoPrecio {
        font-size: 30px;
    }

    .descripcion-card {
        margin-top: 20px;
        padding-top: 18px;
    }

    .descripcion-card p {
        font-size: 13px;
    }

    .acciones button {
        height: 48px;

        font-size: 14px;
    }


    /* =================================================
       RELACIONADOS
       ================================================= */

    .relacionados-card,
    .opiniones-card {
        padding: 18px;

        margin-top: 18px;
    }

    .seccion-header h2 {
        font-size: 20px;
    }

    .relacionados-grid {
        display: grid;

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

        gap: 9px;
    }

}


/* =====================================================
   PASALAVENTA - CELULAR FINAL
   ===================================================== */

@media screen and (max-width: 600px) {

    /* =========================================
       ESTADISTICAS
       2 POR FILA
       ========================================= */

    .stats {
        width: calc(100% - 20px) !important;

        display: grid !important;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;

        margin: 20px auto !important;
    }

    .stat {
        width: 100% !important;

        min-width: 0 !important;

        padding: 15px 8px !important;

        margin: 0 !important;

        min-height: 75px !important;
    }


    /* =========================================
       CATEGORIAS
       3 POR FILA
       ========================================= */

    .categorias-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

        gap: 8px !important;
    }

    .categoria {
        width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;
    }


    /* =========================================
       BENEFICIOS
       2 POR FILA
       ========================================= */

    .beneficios {
        width: calc(100% - 20px) !important;

        display: grid !important;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;

        margin: 30px auto !important;
    }

    .beneficio {
        width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 16px 8px !important;
    }


    /* =========================================
       FILTROS
       LOS 3 EN UNA FILA
       ========================================= */

    .filtros-avanzados {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 8px !important;

        padding: 12px !important;
    }

    .filtros-avanzados select,
    .filtros-avanzados input {
        width: 100% !important;

        min-width: 0 !important;

        padding: 10px 8px !important;

        font-size: 12px !important;
    }


    /* =========================================
       ORDENAR
       ========================================= */

    .productos-filtros {
        width: 100% !important;

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        gap: 8px !important;

        padding: 10px !important;
    }

    .productos-filtros label {
        white-space: nowrap !important;

        font-size: 12px !important;
    }

    .productos-filtros select {
        flex: 1 !important;

        width: auto !important;

        min-width: 0 !important;
    }


    /* =========================================
       PRODUCTOS
       2 POR FILA
       ========================================= */

    .productos {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;
    }

    .producto {
        width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;
    }


    /* =========================================
       IMAGEN PRODUCTO
       ========================================= */

    .producto-img {
        width: 100% !important;

        height: 145px !important;
    }


    /* =========================================
       INFO PRODUCTO
       ========================================= */

    .producto-info {
        padding: 9px !important;
    }

    .producto-info h3 {
        font-size: 13px !important;

        min-height: 34px !important;
    }

    .precio {
        font-size: 17px !important;
    }

    .extra-info {
        font-size: 9px !important;
    }

    .btn-comprar {
        font-size: 11px !important;

        padding: 8px 4px !important;
    }


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

    .hero-content {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;
    }

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

        max-width: 100% !important;

        text-align: center !important;
    }

    .hero-buttons {
        width: 100% !important;

        display: flex !important;

        flex-direction: row !important;

        gap: 8px !important;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        flex: 1 !important;

        width: auto !important;
    }


    /* =========================================
       FOOTER
       2 COLUMNAS
       ========================================= */

    .footer-container {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 20px !important;

        text-align: center !important;
    }


    /* =========================================
       PRODUCTO INDIVIDUAL
       ========================================= */

    .producto-wrapper {
        display: block !important;

        width: 100% !important;
    }

    .producto-galeria,
    .producto-info {
        width: 100% !important;
    }


    /* =========================================
       RELACIONADOS
       2 POR FILA
       ========================================= */

    .relacionados-grid {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;
    }

}


/* =====================================================
   PASALAVENTA - MOBILE HORIZONTAL
   ===================================================== */

@media (max-width: 600px) {

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

    .stats {
        width: calc(100% - 24px);

        display: flex;
        flex-direction: row;

        gap: 10px;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 5px 2px 10px;

        scroll-snap-type: x mandatory;

        scrollbar-width: thin;
    }

    .stats::-webkit-scrollbar {
        height: 5px;
    }

    .stats::-webkit-scrollbar-thumb {
        background: #aaa;
        border-radius: 10px;
    }

    .stat {
        flex: 0 0 150px;

        min-width: 150px;

        padding: 18px 10px;

        scroll-snap-align: start;
    }


    /* =================================================
       CATEGORÍAS
       ================================================= */

    .categorias-section {
        width: calc(100% - 24px);
    }

    .categorias-grid {
        display: flex;

        flex-wrap: nowrap;

        gap: 10px;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 5px 2px 12px;

        scroll-snap-type: x mandatory;

        scrollbar-width: thin;
    }

    .categorias-grid::-webkit-scrollbar {
        height: 5px;
    }

    .categorias-grid::-webkit-scrollbar-thumb {
        background: #aaa;
        border-radius: 10px;
    }

    .categoria {
        flex: 0 0 105px;

        min-width: 105px;

        scroll-snap-align: start;
    }


    /* =================================================
       PRODUCTOS
       ================================================= */

    .productos-section {
        width: calc(100% - 24px);
    }

    .productos {
        display: flex !important;

        flex-wrap: nowrap;

        gap: 15px;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 5px 2px 15px;

        scroll-snap-type: x mandatory;

        scrollbar-width: thin;
    }

    .productos::-webkit-scrollbar {
        height: 5px;
    }

    .productos::-webkit-scrollbar-thumb {
        background: #aaa;
        border-radius: 10px;
    }

    .producto {
        flex: 0 0 250px;

        min-width: 250px;

        scroll-snap-align: start;
    }


    /* =================================================
       BENEFICIOS
       ================================================= */

    .beneficios {
        width: calc(100% - 24px);

        display: flex;

        flex-wrap: nowrap;

        gap: 12px;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 5px 2px 12px;

        scroll-snap-type: x mandatory;

        scrollbar-width: thin;
    }

    .beneficios::-webkit-scrollbar {
        height: 5px;
    }

    .beneficios::-webkit-scrollbar-thumb {
        background: #aaa;
        border-radius: 10px;
    }

    .beneficio {
        flex: 0 0 260px;

        min-width: 260px;

        scroll-snap-align: start;
    }


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

    .footer {
        padding: 40px 15px 20px;

        overflow: hidden;
    }

    .footer-container {
        width: 100%;

        display: flex;

        flex-wrap: nowrap;

        gap: 35px;

        overflow-x: auto;
        overflow-y: hidden;

        text-align: left;

        padding-bottom: 12px;

        scrollbar-width: thin;
    }

    .footer-container::-webkit-scrollbar {
        height: 5px;
    }

    .footer-container::-webkit-scrollbar-thumb {
        background: #777;
        border-radius: 10px;
    }

    .footer-col {
        flex: 0 0 150px;

        min-width: 150px;
    }

}

.btn-whatsapp {
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 11px 15px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    background: #25D366;
    color: white;
    transition: 0.2s;
}

.btn-whatsapp:hover {
    transform: translateY(-1px);
    filter: brightness(0.95);
}

.btn-whatsapp {
    background: #c62828;
    color: white;
    border: none;
    cursor: pointer;
}

.btn-whatsapp:hover {
    background: #a91f1f;
}