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

body{
    font-family:Poppins,sans-serif;
    background:#f8fafc;
}


/* ==========================================
   NAVBAR
========================================== */

.navbar{
    position:relative;
    width:100%;
    z-index:1000;

    transition:all .35s ease;

    background:rgba(255,255,255,.95);
}

.navbar.scrolled{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(12px);

    animation:navbarDown .35s ease;
}

@keyframes navbarDown{

    from{
        transform:translateY(-100%);
    }

    to{
        transform:translateY(0);
    }

}


.logo-navbar{

    height:25px;

    width:auto;

    transition:.3s;
}

.nav-link-especial{
    display:flex !important;
    align-items:center;
    gap:7px;
    padding:7px 12px !important;
    border-radius:30px;
    background:#fff0f7;
    color:#CB056C !important;
    font-weight:700 !important;
    border:1px solid rgba(203,5,108,.15);
    transition:all .25s ease;
}

.nav-link-especial:hover{
    background:#CB056C;
    color:#fff !important;
}

.nav-especial-badge{
    font-size:8px;
    font-weight:800;
    letter-spacing:.6px;
    padding:3px 6px;
    border-radius:20px;
    background:#CB056C;
    color:#fff;
}

.nav-link-especial:hover .nav-especial-badge{
    background:#fff;
    color:#CB056C;
}


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

.hero{

    background:
    linear-gradient(
        rgba(0,0,0,.70),
        rgba(0,0,0,.70)
    ),
    url("../img/expressarte-hero-index.webp");

    background-size:cover;

    background-position:center;

    padding:2rem;

    display:flex;

    align-items:center;

    color:white;
}


.hero-content{

    width:90%;

    margin:2rem auto;
}


.hero h1{

    font-size:3.7rem;

    font-weight:800;
}


.hero p{

    font-size:1.2rem;

    opacity:.9;
}


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

.btn-main{

    background:#25d366;

    color:white;

    padding:15px 35px;

    font-weight:600;

    border:none;

    border-radius:12px;
}

.btn-main:hover{

    background:#23BA5E;

    color:white;
}


.btn-light{

    padding:15px 35px;
}


.btn-light:hover{

    background:#0391D1;

    color:#ffffff;
}


.btn-productos{

    background:#CB056C;
}


.btn-productos:hover{

    background:#B50465;
}


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

.section{

    padding:90px 0;
}


.section-title{

    font-weight:700;

    margin-bottom:15px;
}


/* ==========================================
   TARJETAS DE PRODUCTOS
========================================== */

.category-card{

    display:block;

    text-decoration:none;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    transition:.3s;
}


.category-card img{

    width:100%;

    aspect-ratio:1 / 1;

    object-fit:cover;

    transition:.35s;
}


.category-card span{

    display:block;

    padding:15px;

    text-align:center;

    font-weight:600;

    color:#1e293b;

    font-size:15px;
}


.category-card:hover{

    transform:translateY(-8px);
    cursor: pointer;
}


.category-card:hover img{

    transform:scale(1.08);
}


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

.product-item{

    transition:
        opacity .35s ease,
        transform .35s ease;
}


.product-item.active{

    transform:scale(1.05);

    z-index:10;
}


/* ==========================================
   ANIMACIÓN AL ABRIR DETALLE
========================================== */

.product-item.hide{

    opacity:0;

    transform:scale(.85);

    pointer-events:none;
}


.product-item.detail-hidden{

    display:none !important;
}


/* ==========================================
   FILTROS / PAGINACIÓN
========================================== */

.product-item.product-hidden{

    display:none !important;
}


.product-item.product-show{

    animation:productShow .35s ease;
}


@keyframes productShow{

    from{

        opacity:0;

        transform:
            translateY(15px)
            scale(.97);
    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* ==========================================
   FILTROS DE CATEGORÍAS
========================================== */

.product-filters{

    width:100%;

    display:flex;

    align-items:center;

    gap:10px;

    margin:35px 0 40px;

    padding:5px 2px;

    overflow-x:auto;

    overflow-y:hidden;

    white-space:nowrap;

    scrollbar-width:none;

    -ms-overflow-style:none;

    -webkit-overflow-scrolling:touch;
}


.product-filters::-webkit-scrollbar{

    display:none;
}


.filter-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:auto;

    border:none;

    background:#f1f5f9;

    color:#475569;

    padding:10px 22px;

    border-radius:50px;

    font-family:Poppins,sans-serif;

    font-size:14px;

    font-weight:500;

    line-height:1;

    white-space:nowrap;

    cursor:pointer;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.filter-btn:hover{

    background:#e2e8f0;

}


.filter-btn.active{

    background:#CB056C;

    color:#ffffff;
}


/* ==========================================
   DETALLE DEL PRODUCTO
========================================== */

.product-detail{

    display:none;

    width:100%;

    margin-top:0;

    opacity:0;

    transform:
        scale(.95)
        translateY(20px);

    pointer-events:none;
}


.product-detail.show{

    display:block;

    animation:
        detailShow .4s ease forwards;

    pointer-events:auto;
}


.product-detail.detail-hide{

    display:block;

    animation:
        detailHide .35s ease forwards;

    pointer-events:none;
}


@keyframes detailShow{

    from{

        opacity:0;

        transform:
            scale(.95)
            translateY(20px);
    }

    to{

        opacity:1;

        transform:
            scale(1)
            translateY(0);
    }

}


@keyframes detailHide{

    from{

        opacity:1;

        transform:
            scale(1)
            translateY(0);
    }

    to{

        opacity:0;

        transform:
            scale(.97)
            translateY(20px);
    }

}


/* ==========================================
   CONTENIDO DEL DETALLE
========================================== */

.detail-content{

    width:90%;

    margin:auto;

    padding:4%;

    background:#ffffff;

    border-radius:25px;
}


/* ==========================================
   BOTÓN VOLVER
========================================== */

.btn-close-detail{

    display:flex;

    align-items:center;

    gap:8px;

    border:none;

    background:none;

    margin-bottom:35px;

    padding:0;

    font-family:inherit;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    width:max-content;

    color:#475569;

    transition:.25s ease;
}


.btn-close-detail:hover{

    color:#CB056C;

    transform:translateX(-4px);
}


/* ==========================================
   HEADER DEL PRODUCTO
========================================== */

.detail-header{

    text-align:center;

    max-width:850px;

    margin:0 auto 40px;
}


.detail-category{

    display:inline-block;

    color:#CB056C;

    font-size:12px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    margin-bottom:8px;
}


.detail-header h2{

    font-size:2.5rem;

    font-weight:800;

    margin-bottom:10px;

    color:#0f172a;
}


.detail-description{

    color:#64748b;

    line-height:1.7;

    margin:0;
}


/* ==========================================
   CONFIGURADOR
========================================== */

.product-configurator{

    width:100%;

    max-width:1100px;

    margin:auto;
}


.configurator-section{

    margin-bottom:35px;
}


.configurator-title{

    text-align:center;

    font-size:15px;

    font-weight:700;

    color:#0f172a;

    margin-bottom:16px;
}


/* ==========================================
   CATEGORÍAS INTERNAS
   Ej: 11 oz / 15 oz / Otras
========================================== */

.configurator-categories{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    width:100%;

    overflow-x:auto;

    overflow-y:hidden;

    padding:5px;

    scrollbar-width:none;

    -ms-overflow-style:none;

    -webkit-overflow-scrolling:touch;
}


.configurator-categories::-webkit-scrollbar{

    display:none;
}


.configurator-category{

    flex:0 0 auto;

    border:none;

    background:#f1f5f9;

    color:#475569;

    padding:11px 22px;

    border-radius:50px;

    font-family:inherit;

    font-size:14px;

    font-weight:600;

    white-space:nowrap;

    cursor:pointer;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.configurator-category:hover{

    background:#e2e8f0;

}


.configurator-category.active{

    background:#CB056C;

    color:#ffffff;
}


/* ==========================================
   OPCIONES SIMPLES
========================================== */

.configurator-options{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:10px;
}


.config-option{

    border:1px solid #e2e8f0;

    background:#ffffff;

    color:#334155;

    border-radius:12px;

    padding:12px 18px;

    font-family:inherit;

    font-size:14px;

    font-weight:500;

    cursor:pointer;

    transition:
        border-color .25s ease,
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.config-option:hover{

    border-color:#CB056C;

    color:#CB056C;

    transform:translateY(-2px);
}


.config-option.active{

    background:#CB056C;

    border-color:#CB056C;

    color:#ffffff;
}


.config-option.disabled{

    opacity:.35;

    pointer-events:none;
}


/* ==========================================
   TARJETAS CON IMAGEN
   Ej: Blanca / Mágica / Asa corazón
========================================== */

.variant-grid{

    display:grid;

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

    gap:15px;
}


.variant-card{

    background:#ffffff;

    border:1px solid #e2e8f0;

    border-radius:16px;

    overflow:hidden;

    cursor:pointer;

    transition:
        transform .25s ease,
        border-color .25s ease;
}


.variant-card:hover{

    transform:translateY(-5px);

    border-color:#CB056C;
}


.variant-card.active{

    border-color:#CB056C;
}


.variant-card img{

    width:100%;

    aspect-ratio:1 / 1;

    object-fit:cover;

    display:block;
}


.variant-card span{

    display:block;

    padding:12px 8px;

    text-align:center;

    color:#334155;

    font-size:13px;

    font-weight:600;
}

/* =========================================================
   BOTÓN REGRESAR EN VARIANTES
========================================================= */

.variant-back{
    width:100%;
    margin-bottom:20px;
}

.btn-back-variant{

    display:inline-flex;

    align-items:center;
    gap:8px;

    border:none;
    background:#f8fafc;

    color:#475569;

    padding:9px 16px;

    border-radius:12px;

    font-family:inherit;
    font-size:14px;
    font-weight:600;

    cursor:pointer;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;

}


.btn-back-variant i{

    font-size:16px;

    transition:
        transform .25s ease;

}


.btn-back-variant:hover{

    background:#f1f5f9;

    color:#CB056C;

}


.btn-back-variant:hover i{

    transform:translateX(-3px);

}

/* =========================================================
   CONTEXTO DE VARIANTE
========================================================= */

.variant-context{

    display:flex;

    flex-direction:column;

    gap:3px;

    margin-bottom:18px;

}


.variant-context strong{

    font-size:20px;

    font-weight:700;

    color:#0f172a;

}


.variant-context span{

    font-size:13px;

    color:#64748b;

}


/* ==========================================
   RESUMEN DE SELECCIÓN
========================================== */

.selection-summary{

    background:#f8fafc;

    border-radius:15px;

    padding:18px;

    margin-top:25px;

    border:1px solid #e2e8f0;
}


.selection-summary-title{

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:1px;

    font-weight:700;

    color:#64748b;

    margin-bottom:8px;
}


.selection-summary-text{

    font-size:14px;

    color:#0f172a;

    line-height:1.6;
}


/* ==========================================
   PRECIOS
========================================== */

.price-section{

    max-width:700px;

    margin:35px auto 0;
}


.price-title{

    text-align:center;

    font-size:15px;

    font-weight:700;

    margin-bottom:15px;

    color:#0f172a;
}


.price-list{

    display:grid;

    gap:8px;
}


.price-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:14px 18px;

    background:#f8fafc;

    border:1px solid #e2e8f0;

    border-radius:12px;

    font-size:14px;
}


.price-row span{

    color:#475569;
}


.price-row strong{

    color:#0f172a;

    font-size:16px;

    white-space:nowrap;
}


/* ==========================================
   CANTIDAD
========================================== */

.quantity-box{

    display:flex;

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

    gap:8px;

    margin-top:25px;

}


.quantity-button{

    width:46px;
    height:46px;

    border:none;

    border-radius:12px;

    background:#f1f5f9;

    color:#1e293b;

    font-size:22px;
    font-weight:600;

    cursor:pointer;

    transition:
        background .2s ease,
        transform .2s ease;

}

.quantity-button:hover{

    background:#e2e8f0;

}

.quantity-button:active{

    transform:scale(.94);

}


.quantity-value{
    width:80px;
    height:46px;

    border:none;
    outline:none;

    background:#f8fafc;

    text-align:center;

    font-family:inherit;
    font-size:18px;
    font-weight:700;

    color:#1e293b;

    padding:0 8px;

    border-radius:12px;

    appearance:textfield;
    -moz-appearance:textfield;
}


/* Quitar flechas en Chrome, Edge, Safari */

.quantity-value::-webkit-outer-spin-button,
.quantity-value::-webkit-inner-spin-button{

    -webkit-appearance:none;

    margin:0;

}


/* Cuando está seleccionado */

.quantity-value:focus{

    background:#f1f5f9;

}

.btn-back-options{
    width:fit-content;

    margin:0;

    border:1px solid #CB056C;

    background:#fff;
    color:#CB056C;

    padding:10px 20px;

    border-radius:50px;

    font-family:inherit;
    font-size:14px;
    font-weight:600;

    cursor:pointer;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.btn-back-options:hover{
    background:#CB056C;
    color:#fff;

    transform:translateY(-2px);
}

#detailAction{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

#detailAction .btn-main,
#detailAction .btn-back-options{
    width:fit-content;
}

/* =========================================================
   CONFIGURADOR POR MEDIDAS
========================================================= */

.measurement-configurator{
    display:flex;
    flex-direction:column;
    gap:25px;

    width:100%;
}


/* =========================================================
   BLOQUES
========================================================= */

.configurator-block{
    width:100%;

    padding:25px;

    background:#fff;

    border:1px solid #e2e8f0;

    border-radius:20px;
}


.configurator-title{
    margin-bottom:20px;

    font-size:18px;
    font-weight:700;

    color:#1e293b;
}


/* =========================================================
   CAMPOS DE MEDIDAS
========================================================= */

.measurement-fields{
    display:grid;

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

    gap:20px;
}


.measurement-field{
    display:flex;
    flex-direction:column;

    gap:8px;
}


.measurement-field label{
    font-size:14px;

    font-weight:600;

    color:#475569;
}


.measurement-input{
    display:flex;

    align-items:center;

    overflow:hidden;

    background:#f8fafc;

    border:1px solid #cbd5e1;

    border-radius:12px;

    transition:
        border-color .25s ease,
        background .25s ease;
}


.measurement-input:focus-within{
    border-color:#CB056C;

    background:#fff;
}


.measurement-input input{
    width:100%;

    min-width:0;

    border:none;

    outline:none;

    background:transparent;

    padding:13px 14px;

    font-family:inherit;

    font-size:16px;

    color:#1e293b;
}


.measurement-input span{
    padding-right:14px;

    font-size:14px;

    font-weight:600;

    color:#64748b;
}


/* Quitar flechas del input number */

.measurement-input input::-webkit-outer-spin-button,
.measurement-input input::-webkit-inner-spin-button{
    -webkit-appearance:none;

    margin:0;
}


.measurement-input input[type="number"]{
    -moz-appearance:textfield;
}


/* =========================================================
   RESULTADOS
========================================================= */

.measurement-result{
    display:grid;

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

    gap:15px;

    margin-top:25px;
}


.measurement-result-item{
    display:flex;

    flex-direction:column;

    gap:5px;

    padding:18px;

    background:#f8fafc;

    border-radius:15px;

    text-align:center;
}


.measurement-result-item small{
    font-size:12px;

    font-weight:500;

    color:#64748b;
}


.measurement-result-item strong{
    font-size:20px;

    font-weight:700;

    color:#1e293b;
}


.measurement-result-item.total{
    background:#fdf2f8;
}


.measurement-result-item.total strong{
    color:#CB056C;
}


/* =========================================================
   ACABADO
========================================================= */

.finish-option{
    display:grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:center;

    gap:12px;

    padding:16px 18px;

    border:1px solid #e2e8f0;

    border-radius:15px;

    cursor:pointer;

    transition:
        border-color .25s ease,
        background .25s ease;
}


.finish-option:hover{
    border-color:#CB056C;

    background:#fdf2f8;
}


.finish-option input{
    width:18px;
    height:18px;

    accent-color:#CB056C;

    cursor:pointer;
}


.finish-option span{
    font-size:15px;

    font-weight:600;

    color:#1e293b;
}


.finish-option small{
    font-size:12px;

    color:#64748b;

    text-align:right;
}


/* =========================================================
   BOTÓN DE COTIZACIÓN
========================================================= */

#detailAction{
    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;
}


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

@media(max-width:991px){

    .measurement-fields{

        grid-template-columns:1fr;

    }


    .measurement-result{

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

    }

}


@media(max-width:576px){

    .configurator-block{

        padding:18px;

        border-radius:16px;

    }


    .measurement-fields{

        gap:15px;

    }


    .measurement-result{

        grid-template-columns:1fr;

        gap:10px;

    }


    .measurement-result-item{

        padding:15px;

    }


    .measurement-result-item strong{

        font-size:18px;

    }


    .finish-option{

        grid-template-columns:
            auto 1fr;

    }


    .finish-option small{

        grid-column:2;

        text-align:left;

    }

}


/* ==========================================
   TOTAL
========================================== */

.order-total{

    text-align:center;

    margin-top:20px;
}


.order-total small{

    display:block;

    color:#64748b;

    margin-bottom:3px;
}


.order-total strong{

    font-size:28px;

    color:#0f172a;
}


/* ==========================================
   ACCIONES
========================================== */

.detail-action{

    display:flex;

    justify-content:center;

    margin-top:35px;
}


.detail-action .btn{

    min-width:250px;

    border-radius:12px;

    text-align:center;
}

.detail-header{
    position:relative;
}

.btn-share-product{
    position:absolute;
    top:0;
    right:0;

    width:42px;
    height:42px;

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

    padding:0;

    border:1px solid #CB056C;
    border-radius:50%;

    background:#fff;
    color:#CB056C;

    font-size:18px;

    cursor:pointer;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.btn-share-product:hover{
    background:#CB056C;
    color:#fff;
    transform:translateY(-2px);
}

.btn-share-product:active{
    transform:scale(.94);
}


/* ==========================================
   COTIZACIÓN
========================================== */

.quote-box{

    max-width:650px;

    margin:35px auto 0;

    padding:25px;

    text-align:center;

    background:#f8fafc;

    border:1px solid #e2e8f0;

    border-radius:18px;
}


.quote-box p{

    color:#64748b;

    line-height:1.7;

    margin-bottom:20px;
}


/* ==========================================
   EJEMPLOS
========================================== */

.examples-section{

    margin-top:45px;

    padding-top:35px;

    border-top:1px solid #e2e8f0;
}


.examples-title{

    text-align:center;

    font-size:15px;

    font-weight:700;

    color:#0f172a;

    margin-bottom:20px;
}


.examples-grid{

    display:grid;

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

    gap:12px;
}


.example-card{

    border-radius:12px;

    overflow:hidden;

    background:#f8fafc;

    border:1px solid #e2e8f0;

    cursor:pointer;

    transition:
        transform .25s ease,
        border-color .25s ease;
}


.example-card:hover{

    transform:translateY(-4px);

    border-color:#CB056C;
}


.example-card img{

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

    display:block;
}


.example-card span{

    display:block;

    padding:9px 5px;

    text-align:center;

    font-size:11px;

    font-weight:600;

    color:#334155;
}


/* ==========================================
   ICONOS
========================================== */

.icon-box{

    width:75px;

    height:75px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#2563eb;

    color:white;

    font-size:30px;

    margin:auto;

    margin-bottom:20px;
}


/* ==========================================
   PROCESO
========================================== */

.process-number{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#2563eb;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    font-weight:700;

    margin:auto;
}


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

.gallery img{

    width:100%;

    height:260px;

    object-fit:cover;

    border-radius:18px;

    transition:.3s;
}


.gallery img:hover{

    transform:scale(1.03);
}


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

.cta{

    background:#0f172a;

    color:white;
}


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

footer{

    background:#111827;

    color:#bbb;
}


footer a{

    color:white;

    text-decoration:none;
}


/* ==========================================
   TABLET
========================================== */

@media(max-width:991px){

    .hero h1{

        font-size:2.5rem;

        font-weight:800;
    }


    .detail-content{

        width:94%;

        padding:5%;
    }


    .detail-header h2{

        font-size:2.2rem;
    }


    .variant-grid{

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


    .examples-grid{

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

}


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

@media(max-width:576px){

    .hero{

        padding:1rem;
    }


    .hero-content{

        width:100%;

        margin:1rem auto;
    }


    .hero h1{

        font-size:2rem;

        font-weight:800;
    }


    .hero p{

        font-size:1rem;
    }


    .btn-main,
    .btn-light{

        padding:12px 22px;

        font-size:14px;
    }


    .section{

        padding:60px 0;
    }


    .section-title{

        font-size:1.7rem;
    }


    /* ------------------------------
       FILTROS PRINCIPALES
    ------------------------------ */

    .product-filters{

        justify-content:flex-start;

        width:100%;

        margin:30px 0;

        padding:5px 0;

        gap:8px;

        overflow-x:auto;

        overflow-y:hidden;

        flex-wrap:nowrap;

        white-space:nowrap;

        touch-action:pan-x;
    }


    .filter-btn{

        flex:0 0 auto;

        padding:10px 18px;

        font-size:13px;
    }


    /* ------------------------------
       DETALLE
    ------------------------------ */

    .detail-content{

        width:94%;

        padding:7% 5%;

        border-radius:20px;
    }


    .btn-close-detail{

        font-size:14px;

        margin-bottom:25px;
    }


    .detail-header{

        margin-bottom:30px;
    }


    .detail-header h2{

        font-size:1.8rem;
    }


    .detail-description{

        font-size:14px;
    }


    /* ------------------------------
       CATEGORÍAS INTERNAS
    ------------------------------ */

    .configurator-categories{

        justify-content:flex-start;

        overflow-x:auto;

        flex-wrap:nowrap;

        padding:5px 0;

        gap:8px;

        touch-action:pan-x;
    }


    .configurator-category{

        padding:10px 17px;

        font-size:13px;
    }


    /* ------------------------------
       BOTONES DE OPCIONES
    ------------------------------ */

    .configurator-options{

        justify-content:flex-start;

    }


    .config-option{

        padding:10px 14px;

        font-size:13px;
    }


    /* ------------------------------
       TARJETAS CON IMAGEN
    ------------------------------ */

    .variant-grid{

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

        gap:10px;
    }


    .variant-card{

        border-radius:13px;
    }


    .variant-card span{

        font-size:12px;

        padding:10px 6px;
    }


    /* ------------------------------
       PRECIOS
    ------------------------------ */

    .price-section{

        width:100%;

        margin-top:30px;
    }


    .price-row{

        padding:12px 14px;

        font-size:13px;

        gap:10px;
    }


    .price-row strong{

        font-size:14px;
    }


    /* ------------------------------
       CANTIDAD
    ------------------------------ */

    .quantity-box{

        margin-top:20px;
    }


    /* ------------------------------
       TOTAL
    ------------------------------ */

    .order-total strong{

        font-size:25px;
    }


    /* ------------------------------
       ACCIÓN
    ------------------------------ */

    .detail-action{

        margin-top:25px;
    }


    .detail-action .btn{

        width:100%;

        min-width:0;

        padding:13px 20px;
    }


    /* ------------------------------
       EJEMPLOS
    ------------------------------ */

    .examples-grid{

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

        gap:10px;
    }


    .example-card span{

        font-size:11px;

        padding:8px 4px;
    }


    /* ------------------------------
       GALERÍA
    ------------------------------ */

    .gallery img{

        height:220px;
    }

}