@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap');
body{

    font-family:'Poppins',sans-serif;

    background:#f8fafc;

}
/* ==========================
   Reset
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:#f4f6f9;
    color:#333;
}

/* ==========================
   Hero
========================== */

.hero{

    min-height:90vh;

    background-image:url("../img/hero.jpg");

    background-size:cover;

    background-repeat:no-repeat;

    background-position:right center;

}

.hero h1{

    font-size:58px;

    font-weight:800;

    margin-bottom:20px;

    letter-spacing:1px;

}

.hero p{

    color:rgba(255,255,255,.92);
    font-size:22px;

    margin:20px 0 35px;

}

/* ==========================
   Buscador
========================== */

#busqueda{

    width:100%;

    max-width:720px;

    padding:22px;

    border:none;

    border-radius:18px;

    font-size:20px;

    outline:none;

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

    transition:.30s;

}
#busqueda:focus{

    transform:translateY(-2px);

    box-shadow:0 18px 40px rgba(0,0,0,.25);

}
/* ==========================
   Contenedor
========================== */

.contenedor{

    width:90%;

    max-width:1300px;

    margin:auto;

}

/* ==========================
   Filtros
========================== */

.filtros{

    display:flex;

    justify-content:center;

    gap:20px;

    background:white;

    width:fit-content;

    margin:35px auto -90px;

    padding:20px 25px;

    border-radius:18px;

    box-shadow:0 18px 45px rgba(0,0,0,.18);

    position:relative;

    z-index:20;

}

.filtros select{

    width:260px;

    padding:15px;

    border-radius:12px;

    border:1px solid #d1d5db;

    font-size:16px;

    cursor:pointer;

    transition:.30s;

}
.filtros select:hover{

    border-color:#16a34a;

}
/* ==========================
   Catálogo
========================== */

.catalogo{

    display:grid;

    grid-template-columns: repeat(4, 1fr);
    justify-content:center;

    gap:25px;

    width:95%;

    max-width:1500px;

    margin:auto;

}
#catalogo-seccion{

    position: relative;

    padding: 80px 0;

    background-image: url("../img/fondo-taller.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

}
#catalogo-seccion::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

}
#catalogo-seccion > *{

    position:relative;

    z-index:2;

}
/* ==========================
   Tarjeta
========================== */

.card{
    background:#fff;

    border-radius:18px;

    overflow:hidden;

    transition:.3s;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

    display:flex;

    flex-direction:column;

    height:100%;

}

.card:hover{

    transform:translateY(-8px);

    border-color:#22c55e;

    box-shadow:0 18px 40px rgba(0,0,0,.18);

}

.card img{

    width:100%;

    height:180px;

    object-fit:contain;

    padding:15px;

}

.card-body{

    padding:20px;

    display:flex;

    flex-direction:column;

    flex:1;

}

.card h3{

    font-size:16px;

    line-height:1.35;

    height:45px;

    overflow:hidden;

    display:-webkit-box;

    -webkit-line-clamp:2;

    line-clamp:2;

    -webkit-box-orient:vertical;

}

.card p{

    margin-bottom:8px;

    line-height:1.5;

}

.card {
    display: flex;
    flex-direction: column;
}

.card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Mantiene la zona de descripción con el mismo espacio */
.descripcion-producto {
    min-height: 110px;
    max-height: 110px;
    overflow: hidden;
}

/* Precio siempre en la misma posición */
.precio {
    width: 100%;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    margin: 15px 0 20px;
}

/* Botón abajo */
.acciones {
    margin-top: auto;
}
/* ==========================
   Botón
========================== */

.btn{

    display:block;

    text-align:center;

    background:#25D366;

    color:white;

    text-decoration:none;

    padding:14px;

    border-radius:8px;

    font-weight:bold;

}

.btn:hover{

    background:#1ebc57;
    transform:translateY(-3px);

}

/* ==========================
   PAGINACIÓN ESTILO MECÁNICO
========================== */

.paginacion {

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

    gap: 14px;

    margin: 50px 0;

}


/* ==========================
   BOTONES DE FLECHA
========================== */

.btn-pagina {

    width: 44px;
    height: 44px;

    padding: 0;

    border: 2px solid #111827;

    border-radius: 6px;

    background: #22c55e;

    color: white;

    font-family: 'Racing Sans One', sans-serif;

    font-size: 19px;

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        3px 3px 0 #111827;

    transition: .15s ease;

}

.btn-pagina:hover:not(:disabled) {

    background: #16a34a;

    transform:
        translate(2px, 2px);

    box-shadow:
        1px 1px 0 #111827;

}

.btn-pagina:active:not(:disabled) {

    transform:
        translate(3px, 3px);

    box-shadow:
        0 0 0 #111827;

}
/* Deshabilitado */

.btn-pagina:disabled {

    background: #d1d5db;

    border-color: #9ca3af;

    color: #6b7280;

    cursor: not-allowed;

    box-shadow:
        0 2px 0 #9ca3af;

}


/* ==========================
   PLACA DE PÁGINA - STREET
========================== */

#pagina {
    min-width: 210px;
    padding: 9px 18px;

    text-align: center;

    color: #111827;
    background: #f1f3f4;

    border: 2px solid #111827;
    border-radius: 6px;

    font-family: 'Racing Sans One', sans-serif !important;
    font-size: 19px;
    font-weight: 4;
    letter-spacing: 1px;

    text-transform: uppercase;

    box-shadow:
        3px 3px 0 #22c55e,
        0 5px 10px rgba(0,0,0,.15);
}
/* ==========================
   MÓVIL
========================== */

@media (max-width: 600px) {

    .paginacion {

        gap: 9px;

        margin: 35px 0;

    }

    .btn-pagina {

        width: 40px;
        height: 40px;

        font-size: 17px;

    }

    #pagina {

        min-width: 160px;

        padding: 9px 10px;

        font-size: 13px;

        letter-spacing: .7px;

    }

}


/* =========================================================
   SECCIÓN NOSOTROS / ¿POR QUÉ ELEGIR DEPO?
========================================================= */

.nosotros {
    position: relative;
    background: #f8fafc;
    padding: 90px 20px 0;
    overflow: hidden;
}

.nosotros-contenedor {
    width: 92%;
    max-width: 1250px;
    margin: 0 auto;
}

/* =========================
   ENCABEZADO
========================= */

.nosotros-header {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 55px;
}

.sello-nosotros {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 8px 16px;

    background: #dcfce7;
    color: #15803d;

    border-radius: 30px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;

    box-shadow: 0 5px 15px rgba(22, 163, 74, .10);
}

.nosotros-header h2 {
    margin: 18px 0 12px;

    color: #111827;

    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -1.8px;
}

.nosotros-header h2 span {
    color: #16a34a;
}

.linea-decorativa {
    width: 75px;
    height: 4px;

    margin: 18px auto;

    background: #22c55e;
    border-radius: 10px;
}

.nosotros-header p {
    margin: 0;

    color: #64748b;

    font-size: 18px;
    line-height: 1.6;
}

.nosotros-header p strong {
    color: #16a34a;
    font-weight: 900;
}


/* =========================
   TARJETAS
========================= */

.ventajas {
    display: grid;

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

    gap: 22px;

    margin-bottom: 55px;
}

.ventaja {
    position: relative;

    background: #fff;

    padding: 30px 25px 28px;

    min-height: 245px;

    border-radius: 22px;

    text-align: center;

    border: 1px solid #e5e7eb;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, .07);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.ventaja:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 40px rgba(15, 23, 42, .13);
}

.icono-ventaja {
    width: 68px;
    height: 68px;

    margin: 0 auto 18px;

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

    border-radius: 18px;

    font-size: 30px;

    transition: transform .25s ease;
}

.ventaja:hover .icono-ventaja {
    transform: scale(1.08) rotate(-3deg);
}

.ventaja h3 {
    margin: 0;

    color: #111827;

    font-size: 20px;
    font-weight: 800;
}

.mini-linea {
    width: 38px;
    height: 3px;

    margin: 12px auto;

    border-radius: 10px;
}

.ventaja p {
    margin: 0;

    color: #64748b;

    font-size: 14px;
    line-height: 1.6;
}

.check-ventaja {
    position: absolute;

    right: 18px;
    bottom: 16px;

    width: 25px;
    height: 25px;

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

    border-radius: 50%;

    color: #fff;

    font-size: 13px;
    font-weight: 900;
}


/* =========================
   COLORES DE TARJETAS
========================= */

.ventaja-verde .icono-ventaja {
    background: #dcfce7;
}

.ventaja-verde .mini-linea,
.ventaja-verde .check-ventaja {
    background: #22c55e;
}

.ventaja-naranja .icono-ventaja {
    background: #ffedd5;
}

.ventaja-naranja .mini-linea,
.ventaja-naranja .check-ventaja {
    background: #f97316;
}

.ventaja-azul .icono-ventaja {
    background: #dbeafe;
}

.ventaja-azul .mini-linea,
.ventaja-azul .check-ventaja {
    background: #3b82f6;
}

.ventaja-morada .icono-ventaja {
    background: #f3e8ff;
}

.ventaja-morada .mini-linea,
.ventaja-morada .check-ventaja {
    background: #a855f7;
}


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

.estadisticas {
    position: relative;

    width: 100%;

    margin: 0;

    padding: 48px 45px 30px;

    display: grid;

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

    gap: 0;

    background:
        linear-gradient(
            135deg,
            #166534 0%,
            #15803d 50%,
            #16a34a 100%
        );

    border-radius: 28px 28px 0 0;

    overflow: hidden;

    box-shadow:
        0 -10px 35px rgba(22, 101, 52, .12);
}

.estadisticas::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    top: -180px;
    right: -80px;

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

    border-radius: 50%;
}

.estadisticas::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    bottom: -150px;
    left: -80px;

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

    border-radius: 50%;
}

.stat {
    position: relative;
    z-index: 2;

    padding: 12px 25px 25px;

    text-align: center;

    border-right: 1px solid rgba(255,255,255,.22);
}

.stat:nth-child(4) {
    border-right: none;
}

.stat-icono {
    margin-bottom: 8px;

    color: #fbbf24;

    font-size: 22px;
}

.stat h2 {

    margin: 0;
    color: #FFF8E7 !important;
    font-size: clamp(40px, 4vw, 58px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -1px;

}

.stat p {
    margin: 9px 0 0;

    color: #fbbf24;

    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}


/* =========================
   COMPROMISO
========================= */

.compromiso {
    position: relative;
    z-index: 3;

    grid-column: 1 / -1;

    margin-top: 28px;
    padding-top: 24px;

    border-top: 1px solid rgba(255,255,255,.20);

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

    gap: 12px;

    color: #ffffff;

    text-align: center;

    font-size: 14px;
    line-height: 1.5;
}

.compromiso strong {
    color: #fbbf24;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-style: italic;
    font-size: 1.35em;
}


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

@media (max-width: 950px) {

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

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

        padding: 40px 25px 28px;
    }

    .stat:nth-child(2) {
        border-right: none;
    }

    .stat:nth-child(1),
    .stat:nth-child(2) {
        border-bottom: 1px solid rgba(255,255,255,.20);

        padding-bottom: 25px;
    }

    .stat:nth-child(3),
    .stat:nth-child(4) {
        padding-top: 25px;
    }
}


@media (max-width: 600px) {

    .nosotros {
        padding: 65px 14px 0;
    }

    .nosotros-contenedor {
        width: 100%;
    }

    .nosotros-header {
        margin-bottom: 35px;
    }

    .sello-nosotros {
        font-size: 10px;
        padding: 7px 12px;
    }

    .nosotros-header h2 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .nosotros-header p {
        font-size: 15px;
    }

    .ventajas {
        grid-template-columns: 1fr;

        gap: 15px;

        margin-bottom: 35px;
    }

    .ventaja {
        min-height: auto;

        padding: 25px 24px 30px;
    }

    .icono-ventaja {
        width: 60px;
        height: 60px;

        font-size: 27px;
    }

    .ventaja h3 {
        font-size: 19px;
    }

    .ventaja p {
        font-size: 14px;
        padding: 0 8px;
    }

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

        padding: 30px 10px 24px;

        border-radius: 20px 20px 0 0;
    }

    .stat {
        padding: 14px 8px 20px;
    }

    .stat:nth-child(1),
    .stat:nth-child(2) {
        border-bottom: 1px solid rgba(255,255,255,.20);
    }

    .stat:nth-child(3),
    .stat:nth-child(4) {
        border-bottom: none;

        padding-top: 20px;
    }

    .stat h2 {
        font-size: 31px;
        color: #FFF8E7;
    }

    .stat p {
        font-size: 10px;
        letter-spacing: .8px;
        color: #FBBF24;
    }

    .compromiso {
        margin-top: 20px;

        padding: 18px 10px 0;

        font-size: 12px;
    }
}
.codigo{

      display:inline-block;

    background:#16a34a;

    color:#fff;

    padding:6px 12px;

    border-radius:20px;

    font-size:13px;

    font-weight:700;

    width:max-content;

}

.titulo-producto{

    font-size:20px;

    color:#1f2937;

    margin-bottom:15px;

    min-height:60px;
     line-height:1.3;

}

.info-producto{

    border-top:1px solid #eee;

    border-bottom:1px solid #eee;

    padding:12px 0;

    margin-bottom:18px;

}

.info-producto p{

    margin:8px 0;

    color:#555;

}
.imagen-producto{

    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

}

.imagen-producto img{

    width: 115%;
    height: 115%;
    object-fit: contain;
    display: block;

}
.hero{


    min-height:100vh;

    background-image:url("../img/hero.jpg");

    background-repeat:no-repeat;

    background-size:cover;

    background-position:right center;

    position:relative;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(8,15,30,.45);

}

.hero-overlay{

    position:relative;
    z-index:2;

    width:90%;
    max-width:1300px;

    margin:0 auto;

    min-height:100vh;

    display:flex;

    align-items:flex-start;

    padding-top:120px;

}


.hero-contenido{

    max-width: 600px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    text-align: left;

    transform: translateY(40px);

}



.hero h1{

    color:#fff;

    margin-bottom:18px;

    font-size:56px;

    font-weight:800;

    letter-spacing:-2px;

    line-height:1.05;


}

.hero h1 span{

    color:#22c55e;

    font-family:'Playfair Display', serif;

    font-style:italic;

    font-weight:800;

    letter-spacing:1px;
}

.hero p{

     font-size:16px;

    max-width:500px;

    line-height:1.5;

    margin-bottom:30px;


}

.hero-buscador{

    display:flex;

    align-items:center;

    gap:15px;

    flex-wrap:nowrap;

}
.hero-buscador input{

    width:560px;

    height:58px;

    font-size:20px;

}

.hero-buscador button{

    width:150px;

    border:none;

    border-radius:18px;

    background:#22c55e;

    color:white;

    font-size:20px;

    font-weight:bold;

    cursor:pointer;

}

/* ==========================
   Navbar
========================== */

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 7%;

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:99px;

    background:rgba(15,23,42,.92);

    backdrop-filter:blur(8px);

    border-bottom:2px solid #22c55e;

    z-index:1000;;

}

.logo img{

    width:240px;

    margin-top:14px;

}

.menu{

    display:flex;

    gap:50px;

    list-style:none;

}

.menu a{


    position: relative;

    color: #fff;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;


}
.menu a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-8px;

    width:0;

    height:3px;

    background:#22c55e;

    border-radius:10px;

    transform:translateX(-50%);

    transition:width .35s ease;

}
.menu a:hover{

    color:#22c55e;

}
.menu a:hover::after{

    width:100%;

}
.menu a.activo{

    color:#22c55e;

}

.menu a.activo::after{

    width:100%;

}
.carrito-nav{

    color:#fff;

    text-decoration:none;

    background:#22c55e;

    padding:12px 22px;

    border-radius:12px;

    font-weight:bold;

}
.carrito-page{

    padding-top:100px;

}
/*==========================
NOSOTROS
==========================*/

.nosotros{

    padding:70px 0 40px;

    background:#f8fafc;

}

.nosotros h2{

    text-align:center;

    font-size:42px;

    color:#111827;

    margin-bottom:20px;

}

.subtitulo{

    text-align:center;

    color:#6b7280;

    font-size:20px;

    max-width:700px;

    margin:0 auto 60px;

}

.ventajas{

    display:grid;

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

    gap:30px;

}

.ventaja{

    background:#fff;

    border-radius:20px;

    padding:35px;

    text-align:center;

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

    transition:.3s;

}

.ventaja:hover{

    transform:translateY(-10px);

}

.icono{

    font-size:55px;

    margin-bottom:20px;

}

.ventaja h3{

    margin-bottom:15px;

    color:#16a34a;

}

.ventaja p{

    color:#555;

    line-height:1.6;

}
/*====================================
NOSOTROS
====================================*/

.nosotros{

    padding:100px 0;

    background:#ffffff;

}

.nosotros h2{

    text-align:center;

    font-size:42px;

    color:#111827;

    margin-bottom:20px;

}

.subtitulo{

    text-align:center;

    color:#6b7280;

    font-size:20px;

    max-width:800px;

    margin:0 auto 70px;

}

.ventajas{

    display:grid;

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

    gap:30px;

}

.ventaja{

    background:#fff;

    border-radius:18px;

    padding:35px;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.30s;

}

.ventaja:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 45px rgba(0,0,0,.15);

}

.icono{

    font-size:55px;

    margin-bottom:20px;

}

.ventaja h3{

    color:#16a34a;

    margin-bottom:15px;

    font-size:24px;

}

.ventaja p{

    color:#555;

    line-height:1.7;

}
/*==========================
MARCAS
==========================*/

.marcas{

    padding:50px 0 70px;

    background:#f8fafc;

}

.marcas h2{

    text-align:center;

    font-size:42px;

    margin-bottom:20px;

}

.marcas-grid{

    display:grid;

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

    gap:25px;

    margin-top:50px;

}

.marca{

    background:#fff;

    border-radius:18px;

    height:120px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    font-weight:bold;

    color:#16a34a;

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

    transition:.3s;

}

.marca:hover{

    transform:translateY(-8px);

}
.buscador{

    display:flex;

    align-items:center;

    gap:15px;

}
.buscador button{

    background:#22c55e;

    color:#fff;

    border:none;

    padding:18px 50px;

    border-radius:14px;

    font-size:24px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.buscador button:hover{

    background:#16a34a;

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(34,197,94,.4);

}
.buscador input{

    width:360px;

    padding:20px;

    border:none;

    border-radius:14px;

    font-size:20px;

    outline:none;

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

}
.marca{

    background:#fff;
    border-radius:18px;
    padding:35px;
    text-align:center;
    font-weight:700;

}

/* ===== EFECTOS HOVER ===== */

.ventaja,
.marca{

    transition:.3s ease;

}

.ventaja:hover,
.marca:hover{

    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);

}
.panel-busqueda{

    width:90%;
    max-width:1200px;

    margin:50px auto 20px;

    background:#fff;

    padding:35px;

    border-radius:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.panel-busqueda h2{

    text-align:center;

    margin-bottom:30px;

    font-size:34px;

    color:#111827;

}

.busqueda-superior{

    display:flex;

    gap:20px;

    margin-bottom:30px;

}

.busqueda-superior input{

    flex:1;

    padding:18px;

    font-size:18px;

    border:2px solid #e5e7eb;

    border-radius:12px;

}

.busqueda-superior button{

    width:180px;

    background:#22c55e;

    color:#fff;

    border:none;

    border-radius:12px;

    font-size:20px;

    cursor:pointer;

}

.filtros{

    width:90%;
    max-width:1300px;

    margin:40px auto 25px;

    display:grid;

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

    gap:20px;

    align-items:center;

}



.filtros select{

    width:100%;

    height:55px;

    border-radius:12px;

    padding:0 18px;

    font-size:16px;

}
.titulo-resultados{

    color:#fff;

    text-align:center;

    font-size:38px;

    margin-bottom:40px;

}
.acciones{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:auto;

}

.btn-carrito{

    width:100%;

    padding:14px;

    border:none;

    border-radius:10px;

    background:#111827;

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.btn-carrito:hover{

    background:#374151;
    transform:translateY(-3px);

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

@media (max-width:1100px){

    .catalogo{

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

    }

}

@media (max-width:800px){

    .catalogo{

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

    }

}

@media (max-width:550px){

    .catalogo{

        grid-template-columns:1fr;

    }

}
/* ==========================
   TOAST
========================== */

.toast{

    position:fixed;

    right:30px;

    bottom:30px;

    background:#16a34a;

    color:#fff;

    padding:16px 22px;

    border-radius:12px;

    font-weight:600;

    box-shadow:0 15px 35px rgba(0,0,0,.25);

    opacity:0;

    transform:translateY(30px);

    transition:all .35s ease;

    z-index:9999;

}

.toast.show{

    opacity:1;

    transform:translateY(0);

}
.carrito-contenedor{

    width:90%;
    max-width:1400px;
    margin:40px auto;

    display:grid;
    grid-template-columns:2fr 380px;
    gap:35px;

    align-items:start;

}
/* =========================
   TARJETA DEL CARRITO
========================= */

/* =========================================
   CARRITO - ESTILO AUTO PARTES DEPO
========================================= */

.carrito-card {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 28px;

    background: #ffffff;
    border-radius: 20px;
    padding: 22px;

    max-width: 900px;
    margin: 0 auto 22px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

    border: 1px solid #eeeeee;
}


/* IMAGEN */

.carrito-card > img {
    width: 180px;
    height: 180px;

    object-fit: contain;

    border-radius: 16px;

    background: #f8f8f8;

    padding: 10px;

    align-self: center;
}


/* INFORMACIÓN */

.carrito-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* NOMBRE */

.carrito-info h3 {
    margin: 0 0 16px;

    color: #087a3b;

    font-size: 24px;
    line-height: 1.2;

    font-weight: 700;

    text-transform: lowercase;
}


/* DATOS */

.carrito-info p {
    margin: 5px 0;

    color: #374151;

    font-size: 16px;
}

.carrito-info p strong {
    color: #1f2937;
}


/* DESCRIPCIÓN */

.descripcion-carrito {
    margin-top: 12px;

    padding-top: 12px;

    border-top: 1px solid #e5e7eb;

    color: #374151;

    font-size: 15px;

    line-height: 1.45;
}

.descripcion-carrito strong {
    color: #1f2937;
}

.descripcion-carrito p {
    margin-top: 5px;
}


/* PRECIO */

.precio-carrito,
.precio-unitario {
    margin-top: 16px !important;

    color: #16a34a !important;

    font-size: 30px !important;

    font-weight: 700;
}

.texto-precio {
    color: #6b7280 !important;

    font-size: 14px !important;

    margin-top: -3px !important;
}


/* CANTIDAD */

.cantidad-control {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 16px;
}

.cantidad-control span {
    min-width: 25px;

    text-align: center;

    font-size: 18px;

    font-weight: 600;
}

.cantidad-control button {
    width: 42px;
    height: 42px;

    border: none;

    border-radius: 50%;

    background: #16a34a;

    color: white;

    font-size: 18px;

    cursor: pointer;

    transition: 0.2s;
}

.cantidad-control button:hover {
    transform: scale(1.08);

    background: #12813a;
}


/* ELIMINAR */

.btn-eliminar {
    width: 140px;

    margin-top: 16px;

    padding: 9px 14px;

    border: none;

    border-radius: 9px;

    background: #ef4444;

    color: white;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.2s;
}

.btn-eliminar:hover {
    background: #dc2626;

    transform: translateY(-1px);
}


/* =========================================
   RESUMEN
========================================= */

.resumen-carrito {
    background: #ffffff;

    border-radius: 20px;

    padding: 24px;

    width: 100%;

    max-width: 330px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

    border: 1px solid #eeeeee;
}

.resumen-carrito h2 {
    margin: 0 0 18px;

    color: #1f2937;

    font-size: 25px;

    font-weight: 700;

    padding-bottom: 12px;

    border-bottom: 2px solid #16a34a;
}


.resumen-linea {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin: 12px 0;

    color: #4b5563;

    font-size: 16px;
}

.resumen-linea span:last-child {
    color: #111827;

    font-weight: 600;
}


/* TOTAL */

.resumen-total {
    text-align: center;

    margin-top: 18px;

    padding-top: 18px;

    border-top: 1px solid #e5e7eb;
}

.resumen-total span {
    display: block;

    color: #6b7280;

    font-size: 14px;

    margin-bottom: 4px;
}

.resumen-total strong {
    display: block;

    color: #16a34a;

    font-size: 34px;

    font-weight: 700;
}


/* COTIZACIÓN */

.btn-cotizacion {
    width: 100%;

    margin-top: 18px;

    padding: 13px 16px;

    border: none;

    border-radius: 11px;

    background: #16a34a;

    color: white;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    transition: 0.2s;
}

.btn-cotizacion:hover {
    background: #12813a;

    transform: translateY(-2px);

    box-shadow: 0 7px 16px rgba(22, 163, 74, 0.25);
}

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

.detalle-page {
    width: 92%;
    max-width: 1250px;
    margin: 110px auto 70px;
}

.btn-volver {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    color: #15803d;
    text-decoration: none;
    font-size: 17px;
    font-weight: 800;
    transition: .25s ease;
}

.btn-volver:hover {
    color: #d99a00;
    transform: translateX(-4px);
}

.detalle-producto {
    display: grid;
    grid-template-columns: minmax(400px, 1fr) minmax(420px, 1fr);
    gap: 60px;
    background: #ffffff;
    border-radius: 28px;
    padding: 45px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 20px 55px rgba(15, 23, 42, .12);
    position: relative;
    overflow: hidden;
}

.detalle-producto::before {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: rgba(22, 163, 74, .055);
    top: -180px;
    left: -150px;
    pointer-events: none;
}

.detalle-imagen {
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(145deg, #f8fafc, #ffffff);
    border: 1px solid #eef0f2;
    border-radius: 22px;
    padding: 30px;
    position: relative;
    overflow: hidden;
}

.detalle-imagen::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(251, 191, 36, .055);
    right: -100px;
    bottom: -100px;
}

.detalle-imagen img {
    width: 100%;
    max-width: 520px;
    height: 440px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    transition: transform .35s ease;
}

.detalle-imagen:hover img {
    transform: scale(1.035);
}

.detalle-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    position: relative;
    z-index: 2;
    padding: 8px 5px;
}

.product-brand {
    display: inline-flex;
    width: fit-content;
    background: #ecfdf5;
    color: #15803d;
    padding: 7px 15px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.detalle-info h1,
.detalle-info h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.15;
    font-weight: 800;
}

.product-price,
#detallePrecio {
    margin: 12px 0 5px;
    color: #16a34a;
    font-size: clamp(40px, 5vw, 58px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -2px;
}

.detalle-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 8px;
}

.detalle-badges span {
    background: #f3f4f6;
    color: #374151;
    padding: 9px 15px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    font-size: 14px;
    font-weight: 600;
}

.detalle-info > p {
    margin: 2px 0;
    color: #374151;
    font-size: 16px;
    line-height: 1.5;
}

.detalle-info > p strong {
    color: #111827;
}

.detalle-info h4 {
    margin: 12px 0 0;
    color: #111827;
    font-size: 20px;
    font-weight: 800;
}

/* =========================================================
   ACCIONES DEL PRODUCTO
   ========================================================= */

.detalle-acciones {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.detalle-acciones .btn-carrito-detalle,
.detalle-acciones .btn-whatsapp {
    width: auto;
    flex: 1;
    min-height: 46px;

    margin: 0;
    padding: 10px 16px;

    border-radius: 11px;

    font-size: 14px;
    font-weight: 800;

    box-sizing: border-box;

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

    transition: .25s ease;
}


/* CARRITO */

.detalle-acciones .btn-carrito-detalle {

    border: none;

    background: #111827;

    color: #ffffff;

    cursor: pointer;

    box-shadow:
        0 6px 15px rgba(17, 24, 39, .14);
}

.detalle-acciones .btn-carrito-detalle:hover {

    background: #16a34a;

    transform: translateY(-2px);

    box-shadow:
        0 9px 20px rgba(22, 163, 74, .20);
}


/* WHATSAPP */

.detalle-acciones .btn-whatsapp {

    background: #22c55e;

    color: #ffffff !important;

    text-decoration: none !important;

    box-shadow:
        0 6px 15px rgba(34, 197, 94, .16);
}

.detalle-acciones .btn-whatsapp:hover {

    background: #16a34a;

    transform: translateY(-2px);

    box-shadow:
        0 9px 20px rgba(22, 163, 74, .20);
}
/* =========================================================
   INFORMACIÓN DINÁMICA
   ========================================================= */

.detalle-precio {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.detalle-precio small {
    color: #6b7280;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.detalle-precio strong {
    color: #16a34a;
    font-size: 48px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -2px;
}


.datos-tecnicos {

    display: grid;

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

    gap: 9px;

    margin-top: 2px;
}


.dato-tecnico {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 12px;

    background: #f8fafc;

    border: 1px solid #e5e7eb;

    border-radius: 12px;
}


.dato-tecnico > span {

    width: 32px;
    height: 32px;

    display: flex;

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

    background: #ffffff;

    border-radius: 9px;

    font-size: 15px;
}


.dato-tecnico small {

    display: block;

    color: #6b7280;

    font-size: 9px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .7px;
}


.dato-tecnico strong {

    display: block;

    color: #1f2937;

    font-size: 12px;

    margin-top: 2px;
}


/* DESCRIPCIÓN */

.detalle-descripcion {

    border-top: 1px solid #e5e7eb;

    padding-top: 13px;

    margin-top: 3px;
}


.detalle-descripcion h3 {

    margin: 0 0 6px;

    color: #111827;

    font-size: 17px;

}


.detalle-descripcion p {

    margin: 0;

    color: #4b5563;

    font-size: 14px;

    line-height: 1.55;
}


/* DISPONIBILIDAD */

.detalle-estado {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #15803d;

    font-size: 13px;

    margin-top: 2px;
}


.estado-punto {

    width: 8px;
    height: 8px;

    flex-shrink: 0;

    background: #22c55e;

    border-radius: 50%;

    box-shadow:
        0 0 0 4px #dcfce7;
}
.relacionados {
    margin-top: 75px;
}

.relacionados-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.detalle-body .navbar {
    justify-content: space-between;
}

.detalle-body .menu {
    margin-left: auto;
    margin-right: auto;
}
/* =========================================================
   MEJORAS VISUALES - DETALLE DE PRODUCTO
   ========================================================= */

/* Fondo dinámico y ligero */

.detalle-body {
    position: relative;
    overflow-x: hidden;
}

.detalle-body::before {
    content: "";
    position: fixed;

    width: 420px;
    height: 420px;

    top: 120px;
    right: -180px;

    border-radius: 50%;

    border: 2px solid rgba(22, 163, 74, .08);

    box-shadow:
        0 0 0 35px rgba(22, 163, 74, .025),
        0 0 0 75px rgba(22, 163, 74, .015);

    pointer-events: none;

    z-index: 0;

    animation:
        detalleFlotante
        14s ease-in-out
        infinite alternate;
}


.detalle-body::after {
    content: "";

    position: fixed;

    width: 300px;
    height: 300px;

    left: -160px;
    bottom: -130px;

    border-radius: 50%;

    border: 2px solid rgba(22, 163, 74, .06);

    box-shadow:
        0 0 0 30px rgba(22, 163, 74, .018);

    pointer-events: none;

    z-index: 0;

    animation:
        detalleFlotante2
        17s ease-in-out
        infinite alternate;
}


@keyframes detalleFlotante {

    0% {
        transform:
            translate(0, 0)
            rotate(0deg);
    }

    100% {
        transform:
            translate(-25px, 20px)
            rotate(12deg);
    }

}


@keyframes detalleFlotante2 {

    0% {
        transform:
            translate(0, 0);
    }

    100% {
        transform:
            translate(25px, -20px);
    }

}


/* =========================================================
   IMAGEN MÁS VIVA
   ========================================================= */

.detalle-imagen {
    isolation: isolate;
}


.detalle-imagen::before {

    content: "";

    position: absolute;

    width: 460px;
    height: 460px;

    border-radius: 50%;

    border:
        1px solid
        rgba(22, 163, 74, .10);

    box-shadow:
        0 0 0 25px
        rgba(22, 163, 74, .025);

    pointer-events: none;

    z-index: 0;

    animation:
        anilloProducto
        18s linear
        infinite;
}


@keyframes anilloProducto {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   ZOOM AL PASAR EL MOUSE
   ========================================================= */

.detalle-imagen {
    cursor: zoom-in;
}


.detalle-imagen img {
    cursor: zoom-in;

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


.detalle-imagen:hover img {

    transform:
        scale(1.08);

    filter:
        drop-shadow(
            0 22px 25px
            rgba(15, 23, 42, .16)
        );
}


/* =========================================================
   BOTÓN DE ZOOM
   ========================================================= */

.btn-zoom {

    position: absolute;

    top: 16px;
    right: 16px;

    width: 42px;
    height: 42px;

    display: flex;

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

    border:
        1px solid #e5e7eb;

    border-radius: 50%;

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

    color: #111827;

    cursor: pointer;

    font-size: 15px;

    box-shadow:
        0 7px 18px
        rgba(15, 23, 42, .10);

    z-index: 10;

    transition: .25s ease;
}


.btn-zoom:hover {

    color: #16a34a;

    transform:
        scale(1.08);

}


/* =========================================================
   MODAL DE ZOOM
   ========================================================= */

.zoom-modal {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

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

    padding: 30px;

    background:
        rgba(15, 23, 42, .72);

    backdrop-filter:
        blur(8px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.zoom-modal.mostrar {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


.zoom-contenedor {

    width:
        min(1050px, 92vw);

    height:
        min(800px, 85vh);

    position: relative;

    display: flex;

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

    background: #ffffff;

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, .25);
}


.zoom-contenedor img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: 35px;

    cursor: zoom-in;

    transition:
        transform .3s ease;
}


.zoom-contenedor img.zoom-activo {

    transform:
        scale(1.6);

    cursor: zoom-out;
}


.zoom-cerrar {

    position: absolute;

    top: 15px;
    right: 15px;

    width: 42px;
    height: 42px;

    display: flex;

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

    border: none;

    border-radius: 50%;

    background: #ffffff;

    color: #111827;

    cursor: pointer;

    font-size: 17px;

    z-index: 10;

    box-shadow:
        0 6px 15px
        rgba(0, 0, 0, .12);
}


.zoom-cerrar:hover {

    color: #16a34a;

}


.zoom-ayuda {

    position: absolute;

    bottom: 15px;
    left: 50%;

    transform:
        translateX(-50%);

    padding:
        8px 14px;

    border-radius: 999px;

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

    color: #475569;

    font-size: 11px;

    font-weight: 700;

    z-index: 5;
}
/* =========================================================
   REALCE VISUAL DEL PRODUCTO
   ========================================================= */

.detalle-producto {
    border: 1px solid rgba(22, 163, 74, .16);

    box-shadow:
        0 25px 70px rgba(15, 23, 42, .12),
        0 5px 18px rgba(22, 163, 74, .05);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #ffffff 62%,
            #f7fcf9 100%
        );
}


/* Línea verde superior */

.detalle-producto::after {

    content: "";

    position: absolute;

    top: 0;
    left: 8%;

    width: 84%;
    height: 3px;

    border-radius: 0 0 10px 10px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #22c55e 20%,
            #16a34a 50%,
            #22c55e 80%,
            transparent
        );

    opacity: .85;
}


/* =========================================================
   ÁREA DE IMAGEN — MÁS PROTAGONISTA
   ========================================================= */

.detalle-imagen {

    min-height: 525px;

    background:
        radial-gradient(
            circle at center,
            rgba(34, 197, 94, .11) 0%,
            rgba(34, 197, 94, .045) 30%,
            transparent 63%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f3faf6
        );

    border:
        1px solid
        rgba(22, 163, 74, .14);

    box-shadow:
        inset 0 0 45px
        rgba(34, 197, 94, .035);
}


/* Luz detrás de la refacción */

.detalle-imagen::after {

    width: 360px;
    height: 360px;

    right: 50%;
    bottom: 50%;

    transform:
        translate(50%, 50%);

    background:
        radial-gradient(
            circle,
            rgba(34, 197, 94, .11),
            transparent 68%
        );

    z-index: 1;

    animation:
        pulsoImagen
        4s ease-in-out
        infinite;
}


@keyframes pulsoImagen {

    0%,
    100% {
        opacity: .55;
        transform:
            translate(50%, 50%)
            scale(.92);
    }

    50% {
        opacity: 1;
        transform:
            translate(50%, 50%)
            scale(1.05);
    }

}


/* Imagen */

.detalle-imagen img {

    max-width: 570px;

    height: 450px;

    filter:
        drop-shadow(
            0 25px 25px
            rgba(15, 23, 42, .14)
        );
}


/* =========================================================
   MARCA — MÁS DESTACADA
   ========================================================= */

.product-brand {

    padding:
        9px 17px;

    background:
        linear-gradient(
            135deg,
            #ecfdf5,
            #dcfce7
        );

    border:
        1px solid
        rgba(22, 163, 74, .18);

    color: #15803d;

    font-size: 14px;

    box-shadow:
        0 5px 15px
        rgba(22, 163, 74, .07);
}


/* =========================================================
   TÍTULO
   ========================================================= */

.detalle-info h1 {

    font-size:
        clamp(
            30px,
            3.2vw,
            44px
        );

    line-height: 1.05;

    letter-spacing:
        -1.4px;

    max-width: 600px;
}


/* =========================================================
   CÓDIGO — MÁS DISCRETO
   ========================================================= */

.detalle-codigo {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: -2px;
}


.detalle-codigo span {

    color: #64748b;

    font-size: 12px;

    background: #f8fafc;

    padding:
        7px 11px;

    border-radius: 8px;

    border:
        1px solid #e5e7eb;
}


/* =========================================================
   PRECIO — AHORA SÍ PROTAGONISTA
   ========================================================= */

.detalle-precio {

    margin-top: 4px;

    padding:
        17px 20px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #f0fdf4,
            #ffffff
        );

    border:
        1px solid
        rgba(34, 197, 94, .15);

    position: relative;

    overflow: hidden;
}


.detalle-precio::before {

    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    right: -45px;
    top: -65px;

    border-radius: 50%;

    background:
        rgba(34, 197, 94, .08);
}


.detalle-precio strong {

    position: relative;

    color: #15803d;

    font-size:
        clamp(
            42px,
            4.5vw,
            56px
        );

    text-shadow:
        0 2px 10px
        rgba(22, 163, 74, .08);
}


.detalle-precio small {

    position: relative;

    color: #64748b;
}


/* =========================================================
   DATOS TÉCNICOS
   ========================================================= */

.datos-tecnicos {

    gap: 10px;
}


.dato-tecnico {

    background:
        #ffffff;

    border:
        1px solid #e5e7eb;

    box-shadow:
        0 4px 12px
        rgba(15, 23, 42, .035);

    transition:
        .25s ease;
}


.dato-tecnico:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(34, 197, 94, .25);

    box-shadow:
        0 7px 18px
        rgba(22, 163, 74, .07);
}


.dato-tecnico > span {

    background:
        #ecfdf5;

    color:
        #16a34a;
}


/* =========================================================
   DESCRIPCIÓN
   ========================================================= */

.detalle-descripcion {

    border-top:
        2px solid #f0fdf4;

    padding-top: 15px;
}


.detalle-descripcion h3 {

    display: flex;

    align-items: center;

    gap: 9px;

    font-size: 18px;
}


.detalle-descripcion h3::before {

    content: "";

    width: 4px;
    height: 20px;

    border-radius: 5px;

    background:
        #22c55e;
}


.detalle-descripcion p {

    color: #64748b;

    max-width: 620px;
}


/* =========================================================
   DISPONIBILIDAD
   ========================================================= */

.detalle-estado {

    padding:
        8px 11px;

    width: fit-content;

    border-radius: 999px;

    background:
        #f0fdf4;

    border:
        1px solid
        #dcfce7;
}


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

.detalle-acciones {

    margin-top: 4px;

    gap: 12px;
}


.detalle-acciones
.btn-carrito-detalle,
.detalle-acciones
.btn-whatsapp {

    min-height: 43px;

    border-radius: 10px;

    font-size: 13px;

    box-shadow:
        0 7px 17px
        rgba(15, 23, 42, .09);
}


.detalle-acciones
.btn-carrito-detalle {

    background:
        linear-gradient(
            135deg,
            #111827,
            #1f2937
        );
}


.detalle-acciones
.btn-carrito-detalle:hover {

    background:
        linear-gradient(
            135deg,
            #15803d,
            #16a34a
        );
}


.detalle-acciones
.btn-whatsapp {

    background:
        linear-gradient(
            135deg,
            #22c55e,
            #16a34a
        );

    border:
        none;
}


/* =========================================================
   ANIMACIÓN DE ENTRADA
   ========================================================= */

.detalle-producto {

    animation:
        aparecerDetalle
        .55s ease both;
}


@keyframes aparecerDetalle {

    from {

        opacity: 0;

        transform:
            translateY(14px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}

@media (max-width: 950px) {

    .detalle-producto {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 30px;
    }

    .detalle-imagen {
        min-height: 400px;
    }

    .detalle-imagen img {
        height: 360px;
    }

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

@media (max-width: 600px) {

    .detalle-page {
        width: 94%;
        margin-top: 90px;
    }

    .detalle-producto {
        padding: 18px;
        border-radius: 20px;
        gap: 25px;
    }

    .detalle-imagen {
        min-height: 290px;
        padding: 15px;
        border-radius: 16px;
    }

    .detalle-imagen img {
        height: 270px;
    }

    .detalle-info h1,
    .detalle-info h2 {
        font-size: 24px;
    }

    .product-price,
    #detallePrecio {
        font-size: 42px;
    }

    .detalle-info .btn-whatsapp,
    .btn-carrito-detalle {
        min-height: 54px;
        font-size: 16px;
    }

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

.contacto{

    background:#0f172a;

    color:#fff;

    padding:90px 0;

}

.contacto-contenedor{

    width:90%;

    max-width:1300px;

    margin:auto;

    text-align:center;

}

.contacto h2{

    font-size:42px;

    margin-bottom:20px;

}

.contacto p{

    font-size:18px;

    opacity:.9;

}

.btn-contacto{

    display:inline-block;

    margin:40px 0;

    background:#22c55e;

    color:white;

    padding:18px 40px;

    border-radius:15px;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}

.btn-contacto:hover{

    transform:translateY(-4px);

}

.contacto-grid{

    display:grid;

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

    gap:30px;

    margin-top:40px;

}

.contacto-card{

    background:#1e293b;

    padding:35px;

    border-radius:18px;

    transition:.3s;

}

.contacto-card:hover{

    transform:translateY(-8px);

}

.contacto-card h3{

    color:#22c55e;

    margin-bottom:20px;

}

.contacto-card a{

    color:#22c55e;

    text-decoration:none;

}

footer{

    background:#020617;

    color:#fff;

    text-align:center;

    padding:25px;

}
/* ==========================
   Botones de tarjeta
========================== */

.botones-card{

    display:flex;

    gap:10px;

    margin-top:20px;

}

.botones-card .btn{

    flex:1;

    padding:12px;

    margin:0;

    font-size:15px;

}

.btn-detalle{

    background:#111827 !important;

}

.btn-detalle:hover{

    background:#1f2937 !important;

}
/*==========================
  Botones de tarjeta
==========================*/

.botones-card{

    display:flex;

    gap:10px;

    margin-top:20px;

}

.botones-card .btn,
.botones-card .btn-carrito{

    flex:1;

    padding:12px;

    border:none;

    border-radius:10px;

    font-size:15px;

    font-weight:600;

    text-align:center;

    cursor:pointer;

    text-decoration:none;

}

.btn-carrito{

    background:#111827;

    color:#fff;

}

.btn-carrito:hover{

    background:#1f2937;

}

.btn-whatsapp{

    background:#25D366;

    color:#fff;

}

.btn-whatsapp:hover{

    background:#1ebc57;

}
/* ==========================
   LOGOS DE MARCAS
========================== */

.slider-marcas{

    width:100%;

    margin-top:99px



}

.logos-marcas{

    width:100%;

    display:flex;

    justify-content:space-evenly;

    align-items:center;

    flex-wrap:nowrap;

    gap:50px;
}

.logos-marcas::-webkit-scrollbar{

    display:none;

}

.logo-item{

    flex:1;

    display:flex;

    justify-content:center;


}

.logo-circulo{

    width:88px;
    height:88px;

    border-radius:50%;

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

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

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.23);

    transition:.35s;

    box-shadow:
        inset 0 0 15px rgba(255,255,255,.05),
        0 5px 15px rgba(0,0,0,.25);

}

.logo-circulo img{

    width:56px;
    height:56px;

    object-fit: contain;

    filter:brightness(0) invert(1);

    transition:.35s;

}
.logo-item:hover img{

    transform: scale(1.08);

}
.logo-item:hover .logo-circulo{

    transform:translateY(-8px) scale(1.08);

    border-color:#27ff88;

    box-shadow:
        0 0 10px rgba(39,255,136,.5),
        0 0 25px rgba(39,255,136,.45),
        0 0 45px rgba(39,255,136,.35);

}

.logo-item.activo .logo-circulo{

    border:3px solid #2ecc71;

    box-shadow:0 0 20px rgba(46,204,113,.55);

}

.btn-slider{

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

    background:#2ecc71;

    color:#fff;

    cursor:pointer;

    transition:.25s;

}

.btn-slider:hover{

    transform:scale(1.1);

}
.logo-item.activo .logo-circulo{

    border:2px solid #22c55e;

    box-shadow:
        0 0 15px rgba(34,197,94,.55),
        0 0 35px rgba(34,197,94,.30);

    transform:scale(1.08);

}
/* =========================================================
   NUEVO DISEÑO — DETALLE DE PRODUCTO
   ========================================================= */

body.detalle-page-body {
    margin: 0;
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;

    color: #0f172a;

    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(34,197,94,.08),
            transparent 23%
        ),
        radial-gradient(
            circle at 92% 38%,
            rgba(34,197,94,.07),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #f8fafc 0%,
            #ffffff 45%,
            #f1f7f4 100%
        );

    position: relative;

    overflow-x: hidden;
}


/* =========================
   FONDO DINÁMICO
========================= */

body.detalle-page-body::before {

    content: "";

    position: fixed;

    z-index: -1;

    width: 520px;
    height: 520px;

    top: 100px;
    right: -260px;

    border-radius: 50%;

    border: 2px solid rgba(34,197,94,.12);

    box-shadow:
        0 0 0 35px rgba(34,197,94,.035),
        0 0 0 75px rgba(34,197,94,.018);

    animation:
        detalleFlota
        12s ease-in-out
        infinite alternate;
}


body.detalle-page-body::after {

    content: "";

    position: fixed;

    z-index: -1;

    width: 390px;
    height: 390px;

    bottom: -210px;
    left: -190px;

    border-radius: 50%;

    border: 2px solid rgba(15,23,42,.07);

    box-shadow:
        0 0 0 35px rgba(34,197,94,.025);

    animation:
        detalleFlota
        15s ease-in-out
        infinite alternate-reverse;
}


@keyframes detalleFlota {

    from {
        transform:
            translate3d(0,0,0)
            rotate(0deg);
    }

    to {
        transform:
            translate3d(-25px,18px,0)
            rotate(12deg);
    }

}


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

body.detalle-page-body .detalle-topbar {

    position: sticky;

    top: 0;

    z-index: 1000;

    width: 100%;

    min-height: 88px;

    padding: 10px 3.5%;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 20px;

    background:
        rgba(8,20,37,.97);

    border-bottom:
        2px solid #22c55e;

    box-shadow:
        0 8px 30px rgba(15,23,42,.12);

    backdrop-filter:
        blur(12px);

}


body.detalle-page-body
.detalle-topbar
.topbar-logo {

    justify-self: start;

}


body.detalle-page-body
.detalle-topbar
.topbar-logo img {

    width: 175px;

    height: auto;

    display: block;

}


body.detalle-page-body
.detalle-topbar
.topbar-menu {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 38px;

}


body.detalle-page-body
.detalle-topbar
.topbar-menu a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #f8fafc;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    transition: .25s ease;

}


body.detalle-page-body
.detalle-topbar
.topbar-menu a:hover {

    color: #4ade80;

    transform:
        translateY(-1px);

}


body.detalle-page-body
.detalle-topbar
.topbar-menu i {

    color: #4ade80;

    font-size: 13px;

}


body.detalle-page-body
.detalle-carrito-nav {

    justify-self: end;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 12px 18px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #22c55e,
            #16a34a
        );

    border-radius: 11px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    box-shadow:
        0 8px 20px
        rgba(22,163,74,.18);

    transition: .25s ease;

}


body.detalle-page-body
.detalle-carrito-nav:hover {

    transform:
        translateY(-2px);

}


body.detalle-page-body
.detalle-carrito-nav strong {

    min-width: 20px;

    text-align: center;

}


/* =========================
   CONTENIDO
========================= */

.detalle-main {

    width: min(1400px,94%);

    margin: 0 auto;

    padding:
        26px
        0
        55px;

}


.detalle-navegacion {

    margin-bottom: 18px;

}


body.detalle-page-body
.btn-volver {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 13px;

    color: #15803d;

    text-decoration: none;

    font-size: 15px;

    font-weight: 800;

    transition: .25s ease;

}


body.detalle-page-body
.btn-volver:hover {

    color: #0f172a;

    transform:
        translateX(-3px);

}


.detalle-migas {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #64748b;

    font-size: 12px;

}


.detalle-migas i {

    color: #94a3b8;

    font-size: 9px;

}


/* =========================
   TARJETA PRINCIPAL
========================= */

body.detalle-page-body
.detalle-producto {

    display: grid;

    grid-template-columns:
        minmax(440px,1.04fr)
        minmax(500px,1fr);

    gap: 34px;

    padding: 14px;

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

    border:
        1px solid #e2e8f0;

    border-radius: 25px;

    box-shadow:
        0 18px 50px
        rgba(15,23,42,.09);

    position: relative;

    overflow: hidden;

}


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

body.detalle-page-body
.detalle-imagen {

    min-height: 545px;

    height: 545px;

    padding: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;

    border-radius: 19px;

    border: 1px solid #e2e8f0;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(34,197,94,.08),
            transparent 20%
        ),
        linear-gradient(
            135deg,
            #ffffff,
            #f6faf8
        );

}


body.detalle-page-body
.detalle-imagen::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    border:
        2px solid
        rgba(34,197,94,.13);

    box-shadow:
        0 0 0 26px
        rgba(34,197,94,.035),

        0 0 0 62px
        rgba(34,197,94,.018);

    animation:
        detalleAnillo
        14s linear
        infinite;

}


@keyframes detalleAnillo {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


body.detalle-page-body
.detalle-imagen img {

    width: 100%;

    max-width: 590px;

    height: 455px;

    object-fit: contain;

    position: relative;

    z-index: 3;

    cursor: zoom-in;

    transition:
        transform .32s ease;

    filter:
        drop-shadow(
            0 20px 20px
            rgba(15,23,42,.10)
        );

}


body.detalle-page-body
.detalle-imagen img.imagen-hover-zoom {

    transform:
        scale(1.10);

}


/* ETIQUETA */

.etiqueta-imagen {

    position: absolute;

    top: 16px;
    left: 16px;

    z-index: 5;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 12px;

    color: #15803d;

    background:
        rgba(236,253,245,.94);

    border:
        1px solid
        rgba(34,197,94,.16);

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

}


/* BOTÓN ZOOM */

.btn-zoom {

    position: absolute;

    z-index: 6;

    top: 16px;
    right: 16px;

    width: 43px;
    height: 43px;

    border:
        1px solid #e2e8f0;

    border-radius: 50%;

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

    color: #0f172a;

    cursor: pointer;

    font-size: 15px;

    box-shadow:
        0 7px 18px
        rgba(15,23,42,.10);

    transition: .25s ease;

}


.btn-zoom:hover {

    color: #16a34a;

    transform:
        scale(1.06);

}


/* TEXTO ZOOM */

.texto-zoom {

    position: absolute;

    z-index: 6;

    bottom: 16px;

    left: 50%;

    transform:
        translateX(-50%);

    white-space: nowrap;

    padding: 9px 14px;

    color: #334155;

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

    border:
        1px solid #e2e8f0;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 700;

}


/* =========================
   INFORMACIÓN
========================= */

body.detalle-page-body
.detalle-info {

    padding:
        24px
        24px
        22px
        12px;

    display: flex;

    flex-direction: column;

    gap: 14px;

    position: relative;

    z-index: 2;

}


.detalle-cabecera {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

}


body.detalle-page-body
.product-brand {

    display: inline-flex;

    width: fit-content;

    padding: 7px 13px;

    border-radius: 999px;

    color: #15803d;

    background: #e9f9ef;

    border:
        1px solid #d1fae5;

    font-size: 13px;

    font-weight: 900;

    text-transform: uppercase;

}


.detalle-modelo {

    color: #64748b;

    font-size: 13px;

    font-weight: 600;

}


body.detalle-page-body
.detalle-info h1 {

    margin: 0;

    color: #0f172a;

    font-size:
        clamp(
            30px,
            3.3vw,
            47px
        );

    line-height: 1.03;

    font-weight: 900;

    letter-spacing: -1.8px;

}


/* CÓDIGO */

.detalle-codigo {

    display: flex;

    align-items: center;

    gap: 9px;

    flex-wrap: wrap;

}


.detalle-codigo > span,
.detalle-codigo button {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 8px 12px;

    border:
        1px solid #e2e8f0;

    border-radius: 9px;

    background: #f8fafc;

    color: #475569;

    font-size: 12px;

    font-weight: 600;

}


.detalle-codigo button {

    background: #fff;

    cursor: pointer;

}


/* PRECIO */

.detalle-precio {

    display: flex;

    align-items: flex-end;

    gap: 13px;

}


body.detalle-page-body
.detalle-precio strong {

    color: #16a34a;

    font-size:
        clamp(
            42px,
            4.4vw,
            58px
        );

    line-height: .95;

    font-weight: 900;

    letter-spacing: -2.5px;

}


body.detalle-page-body
.detalle-precio span {

    padding-bottom: 4px;

    color: #64748b;

    font-size: 12px;

}


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

.detalle-beneficios {

    display: grid;

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

    gap: 9px;

}


.beneficio {

    min-height: 67px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px;

    background: #fbfefd;

    border:
        1px solid #e2e8f0;

    border-radius: 11px;

}


.beneficio > i {

    color: #16a34a;

    font-size: 22px;

}


.beneficio strong,
.beneficio span {

    display: block;

}


.beneficio strong {

    color: #1e293b;

    font-size: 11px;

}


.beneficio span {

    margin-top: 3px;

    color: #64748b;

    font-size: 9px;

}


/* =========================
   DATOS TÉCNICOS
========================= */

body.detalle-page-body
.datos-tecnicos {

    display: grid;

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

    gap: 8px;

}


body.detalle-page-body
.dato-tecnico {

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 9px 10px;

    background: #f8fafc;

    border:
        1px solid #e2e8f0;

    border-radius: 10px;

}


.dato-icono {

    width: 31px;

    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    color: #16a34a;

    background: #ecfdf5;

}


body.detalle-page-body
.dato-tecnico small {

    display: block;

    color: #94a3b8;

    font-size: 8px;

    font-weight: 800;

    text-transform: uppercase;

}


body.detalle-page-body
.dato-tecnico strong {

    display: block;

    margin-top: 2px;

    color: #1e293b;

    font-size: 11px;

}


/* =========================
   DESCRIPCIÓN
========================= */

body.detalle-page-body
.detalle-descripcion {

    padding: 12px 14px;

    border:
        1px solid #e2e8f0;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #fff,
            #f8fafc
        );

}


body.detalle-page-body
.detalle-descripcion h3 {

    margin: 0 0 7px;

    color: #0f172a;

    font-size: 16px;

    font-weight: 900;

}


body.detalle-page-body
.detalle-descripcion p {

    margin: 0;

    color: #475569;

    font-size: 12px;

    line-height: 1.55;

}


/* =========================
   ESTADO
========================= */

body.detalle-page-body
.detalle-estado {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #15803d;

    font-size: 11px;

}


body.detalle-page-body
.estado-punto {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 0 4px #dcfce7;

}


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

body.detalle-page-body
.detalle-acciones {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 9px;

}


body.detalle-page-body
.btn-carrito-detalle,
body.detalle-page-body
.btn-whatsapp {

    min-height: 44px;

    padding: 10px 13px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border-radius: 9px;

    font-size: 12px;

    font-weight: 800;

    transition: .25s ease;

}


body.detalle-page-body
.btn-carrito-detalle {

    border: none;

    color: #fff;

    background: #0f1b2d;

    cursor: pointer;

}


body.detalle-page-body
.btn-carrito-detalle:hover {

    background: #16a34a;

    transform:
        translateY(-2px);

}


body.detalle-page-body
.btn-whatsapp {

    color: #15803d !important;

    background: #fff;

    border:
        1px solid #22c55e;

    text-decoration: none;

}


body.detalle-page-body
.btn-whatsapp:hover {

    color: #fff !important;

    background: #22c55e;

}


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

.relacionados {

    margin-top: 34px;

}


.relacionados-cabecera {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 14px;

}


.relacionados-cabecera h2 {

    margin: 0;

    color: #0f172a;

    font-size: 21px;

    font-weight: 900;

}


.relacionados-cabecera a {

    color: #16a34a;

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

}


.relacionados-grid {

    display: grid;

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

    gap: 14px;

}


.producto-relacionado {

    display: grid;

    grid-template-columns:
        115px 1fr;

    gap: 13px;

    padding: 12px;

    background: #fff;

    border:
        1px solid #e2e8f0;

    border-radius: 14px;

    transition: .25s ease;

}


.producto-relacionado:hover {

    transform:
        translateY(-4px);

    border-color:
        #bbf7d0;

}


.relacionado-imagen {

    height: 105px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f8fafc;

    border-radius: 10px;

}


.relacionado-imagen img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 7px;

}


.relacionado-info {

    min-width: 0;

}


.relacionado-info > span {

    color: #16a34a;

    font-size: 9px;

    font-weight: 900;

}


.relacionado-titulo {

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

}


.relacionado-pie {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 8px;

}


.relacionado-pie strong {

    color: #16a34a;

    font-size: 14px;

}


/* =========================
   ZOOM
========================= */

.zoom-modal {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background:
        rgba(7,16,29,.76);

    backdrop-filter:
        blur(8px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: .25s ease;

}


.zoom-modal.mostrar {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


.zoom-contenedor {

    width: min(1100px,94vw);

    height: min(82vh,800px);

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;

    border-radius: 20px;

    background: #fff;

}


.zoom-contenedor img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 35px;

    cursor: zoom-in;

    transition: .3s ease;

}


.zoom-contenedor img.zoom-activo {

    transform:
        scale(1.7);

}


.zoom-cerrar {

    position: absolute;

    top: 22px;

    right: 22px;

    z-index: 3;

    width: 43px;

    height: 43px;

    border: none;

    border-radius: 50%;

    background: #fff;

    color: #0f172a;

    cursor: pointer;

    font-size: 17px;

}


.zoom-ayuda {

    position: absolute;

    bottom: 15px;

    left: 50%;

    transform:
        translateX(-50%);

    padding: 8px 13px;

    border-radius: 999px;

    color: #475569;

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

    font-size: 10px;

    font-weight: 700;

}


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

@media (max-width: 850px) {

    body.detalle-page-body
    .detalle-topbar {

        grid-template-columns:
            1fr auto;

    }

    body.detalle-page-body
    .topbar-menu {

        display: none !important;

    }

    body.detalle-page-body
    .detalle-producto {

        grid-template-columns: 1fr;

    }

    body.detalle-page-body
    .detalle-imagen {

        height: 470px;

        min-height: 470px;

    }

}


@media (max-width: 600px) {

    body.detalle-page-body
    .detalle-topbar {

        min-height: 70px;

        padding:
            8px 14px;

    }

    body.detalle-page-body
    .topbar-logo img {

        width: 135px !important;

    }

    .detalle-main {

        width: 94%;

    }

    body.detalle-page-body
    .detalle-imagen {

        height: 340px;

        min-height: 340px;

    }

    body.detalle-page-body
    .detalle-imagen img {

        height: 285px;

    }

    .detalle-beneficios {

        grid-template-columns: 1fr;

    }

    body.detalle-page-body
    .datos-tecnicos {

        grid-template-columns: 1fr;

    }

    body.detalle-page-body
    .detalle-acciones {

        grid-template-columns: 1fr;

    }

    .relacionados-grid {

        grid-template-columns: 1fr;

    }

}
/* =========================================================
   DISEÑO NUEVO DEL DETALLE
   ========================================================= */

/* CABECERA */

.detalle-cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.detalle-modelo {
    padding: 7px 12px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}


/* TÍTULO */

.detalle-info h1 {
    margin: 2px 0 4px;
}


/* CÓDIGO */

.detalle-codigo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.detalle-codigo > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 11px;

    background: #f8fafc;
    border: 1px solid #e5e7eb;

    border-radius: 9px;

    color: #64748b;
    font-size: 12px;
}

.detalle-codigo strong {
    color: #1f2937;
}

.detalle-codigo button {
    border: 1px solid #e5e7eb;

    background: white;
    color: #475569;

    padding: 7px 11px;

    border-radius: 9px;

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

    cursor: pointer;

    transition: .2s ease;
}

.detalle-codigo button:hover {
    color: #16a34a;
    border-color: #86efac;
    background: #f0fdf4;
}


/* PRECIO */

.detalle-precio {
    padding: 14px 18px;

    background:
        linear-gradient(
            135deg,
            #f0fdf4,
            #ffffff
        );

    border: 1px solid #dcfce7;

    border-radius: 15px;

    width: fit-content;

    position: relative;
    overflow: hidden;
}

.detalle-precio strong {
    display: block;

    color: #16a34a;

    font-size: clamp(42px, 4vw, 56px);

    line-height: 1;

    font-weight: 900;

    letter-spacing: -2px;
}

.detalle-precio > span {
    display: block;

    margin-top: 5px;

    color: #64748b;

    font-size: 11px;

    line-height: 1.3;
}

.detalle-precio b {
    color: #15803d;
}


/* BENEFICIOS */

.detalle-beneficios {
    display: grid;

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

    gap: 8px;

    margin-top: 4px;
}

.beneficio {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    transition: .2s ease;
}

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

    border-color: #bbf7d0;

    box-shadow:
        0 7px 18px
        rgba(22, 163, 74, .08);
}

.beneficio > i {
    width: 30px;
    height: 30px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 9px;

    background: #ecfdf5;

    color: #16a34a;

    font-size: 13px;
}

.beneficio strong {
    display: block;

    color: #1f2937;

    font-size: 11px;
}

.beneficio span {
    display: block;

    margin-top: 2px;

    color: #94a3b8;

    font-size: 9px;
}


/* TEXTO DE ZOOM */

.texto-zoom {
    position: absolute;

    bottom: 12px;
    left: 50%;

    transform:
        translateX(-50%);

    z-index: 5;

    padding: 7px 12px;

    border-radius: 999px;

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

    border: 1px solid #e5e7eb;

    color: #64748b;

    font-size: 10px;

    font-weight: 700;

    white-space: nowrap;
}


/* AYUDA WHATSAPP */

.ayuda-whatsapp {
    display: flex;

    align-items: center;

    gap: 6px;

    color: #94a3b8;

    font-size: 11px;

    margin-top: -3px;
}

.ayuda-whatsapp i {
    color: #22c55e;
}

.ayuda-whatsapp a {
    color: #16a34a;

    font-weight: 800;

    text-decoration: none;
}

.ayuda-whatsapp a:hover {
    text-decoration: underline;
}


/* =========================================================
   ZOOM
   ========================================================= */

.btn-zoom {
    position: absolute;

    top: 15px;
    right: 15px;

    width: 40px;
    height: 40px;

    display: flex;

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

    border: 1px solid #e5e7eb;

    border-radius: 50%;

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

    color: #1f2937;

    cursor: pointer;

    z-index: 20;

    box-shadow:
        0 6px 15px
        rgba(15,23,42,.10);

    transition: .25s ease;
}

.btn-zoom:hover {
    color: #16a34a;

    transform: scale(1.08);
}


/* MODAL */

.zoom-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

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

    padding: 30px;

    background:
        rgba(15,23,42,.72);

    backdrop-filter:
        blur(7px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .25s ease;
}

.zoom-modal.mostrar {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}

.zoom-contenedor {
    position: relative;

    width: min(1000px, 92vw);

    height: min(750px, 88vh);

    display: flex;

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

    background: #ffffff;

    border-radius: 20px;

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.25);

    overflow: hidden;
}

.zoom-contenedor img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: 35px;
}

.zoom-cerrar {
    position: absolute;

    top: 12px;
    right: 12px;

    width: 38px;
    height: 38px;

    border: none;

    border-radius: 50%;

    background: white;

    color: #1f2937;

    cursor: pointer;

    font-size: 17px;

    z-index: 10;

    box-shadow:
        0 5px 15px
        rgba(0,0,0,.12);
}

.zoom-cerrar:hover {
    color: #16a34a;
}

.zoom-ayuda {
    position: absolute;

    bottom: 12px;
    left: 50%;

    transform:
        translateX(-50%);

    padding: 7px 13px;

    border-radius: 999px;

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

    color: #64748b;

    font-size: 10px;

    font-weight: 700;
}


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

@media (max-width: 900px) {

    .detalle-producto {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .detalle-imagen {
        min-height: 420px;
    }

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

}

@media (max-width: 600px) {

    .detalle-producto {
        padding: 20px;
    }

    .detalle-imagen {
        min-height: 340px;
        padding: 15px;
    }

    .detalle-imagen img {
        height: 320px;
    }

    .detalle-precio strong {
        font-size: 42px;
    }

    .detalle-acciones {
        flex-direction: column;
    }

}

/* =========================================================
   FIX FINAL — DETALLE DE PRODUCTO
   Esta sección queda al final para evitar que reglas antiguas
   o duplicadas vuelvan a pisar el diseño.
   ========================================================= */

/* CONTENEDOR PRINCIPAL */
body.detalle-page-body .detalle-main,
.detalle-main {
    width: min(1400px, 94%);
    margin: 0 auto;
    padding: 26px 0 55px;
}

body.detalle-page-body .detalle-producto,
.detalle-producto {
    display: grid !important;
    grid-template-columns: minmax(440px, 1.04fr) minmax(500px, 1fr) !important;
    gap: 34px !important;
    padding: 14px !important;
    background: #fff !important;
    border: 1px solid rgba(22,163,74,.16) !important;
    border-radius: 25px !important;
    box-shadow: 0 25px 70px rgba(15,23,42,.12) !important;
    position: relative;
    overflow: hidden;
}

/* IMAGEN */
body.detalle-page-body .detalle-imagen,
.detalle-imagen {
    min-height: 545px !important;
    height: 545px !important;
    padding: 28px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 19px;
    border: 1px solid rgba(22,163,74,.14);
    background:
        radial-gradient(circle at center, rgba(34,197,94,.10), transparent 62%),
        linear-gradient(135deg,#fff,#f3faf6);
}

body.detalle-page-body .detalle-imagen img,
.detalle-imagen img {
    width: 100%;
    max-width: 590px;
    height: 455px;
    object-fit: contain;
    position: relative;
    z-index: 3;
    cursor: zoom-in;
    filter: drop-shadow(0 20px 20px rgba(15,23,42,.12));
    transition: transform .32s ease;
}

body.detalle-page-body .detalle-imagen:hover img,
.detalle-imagen:hover img {
    transform: scale(1.06);
}

/* INFORMACIÓN */
body.detalle-page-body .detalle-info,
.detalle-info {
    padding: 24px 24px 22px 12px !important;
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    position: relative;
    z-index: 2;
}

/* CABECERA */
body.detalle-page-body .detalle-cabecera,
.detalle-cabecera {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

body.detalle-page-body .product-brand,
.product-brand {
    display: inline-flex;
    width: fit-content;
    padding: 7px 13px;
    border-radius: 999px;
    color: #15803d;
    background: #e9f9ef;
    border: 1px solid #d1fae5;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

body.detalle-page-body .detalle-modelo,
.detalle-modelo {
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}

/* TÍTULO */
body.detalle-page-body .detalle-info h1,
.detalle-info h1 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: clamp(30px, 3.3vw, 47px) !important;
    line-height: 1.03 !important;
    font-weight: 900 !important;
    letter-spacing: -1.8px !important;
}

/* EVITA QUE EL H3 GENÉRICO DEL PRECIO CONVIERTA
   "Descripción" EN UN TÍTULO GIGANTE */
body.detalle-page-body .detalle-descripcion h3,
.detalle-descripcion h3 {
    display: block !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    color: #0f172a !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* CÓDIGO */
body.detalle-page-body .detalle-codigo,
.detalle-codigo {
    display: flex !important;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

body.detalle-page-body .detalle-codigo > span,
body.detalle-page-body .detalle-codigo button,
.detalle-codigo > span,
.detalle-codigo button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
}

body.detalle-page-body .detalle-codigo button,
.detalle-codigo button {
    background: #fff;
    cursor: pointer;
}

/* =========================================
   AJUSTE FINAL DEL PRECIO
========================================= */

body.detalle-page-body .detalle-precio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: fit-content;
    min-width: 300px;
}

body.detalle-page-body .detalle-precio strong {
    font-size: clamp(38px, 3.5vw, 48px) !important;
    line-height: 1;
    text-align: center;
}

body.detalle-page-body .detalle-precio > span {
    width: 100%;
    padding-bottom: 0;
    text-align: center !important;
    font-size: 10px;
    line-height: 1.25;
}

body.detalle-page-body .detalle-precio > span b {
    font-size: 10px;
}

/* BENEFICIOS — FORZADOS VISIBLES */
body.detalle-page-body .detalle-beneficios,
.detalle-beneficios {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 8px !important;
    margin: 4px 0 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.detalle-page-body .beneficio,
.beneficio {
    display: flex !important;
    align-items: center;
    gap: 9px;
    min-height: 67px;
    padding: 10px;
    background: #fff !important;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    opacity: 1 !important;
    visibility: visible !important;
}

body.detalle-page-body .beneficio > i,
.beneficio > i {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #ecfdf5;
    color: #16a34a;
    font-size: 13px;
}

body.detalle-page-body .beneficio strong,
.beneficio strong {
    display: block;
    color: #1f2937;
    font-size: 11px;
}

body.detalle-page-body .beneficio span,
.beneficio span {
    display: block;
    margin-top: 2px;
    color: #94a3b8;
    font-size: 9px;
}

/* DATOS TÉCNICOS */
body.detalle-page-body .datos-tecnicos,
.datos-tecnicos {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.detalle-page-body .dato-tecnico,
.dato-tecnico {
    display: flex !important;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

/* DESCRIPCIÓN */
body.detalle-page-body .detalle-descripcion,
.detalle-descripcion {
    display: block !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px;
    background: linear-gradient(135deg,#fff,#f8fafc);
}

body.detalle-page-body .detalle-descripcion p,
.detalle-descripcion p {
    margin: 0 !important;
    color: #475569 !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
}

/* ESTADO */
body.detalle-page-body .detalle-estado,
.detalle-estado {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 7px 10px;
    border-radius: 999px;
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #dcfce7;
    font-size: 11px;
    opacity: 1 !important;
    visibility: visible !important;
}

body.detalle-page-body .estado-punto,
.estado-punto {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px #dcfce7;
}

/* BOTONES */
body.detalle-page-body .detalle-acciones,
.detalle-acciones {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
    margin: 0 !important;
}

body.detalle-page-body .btn-carrito-detalle,
body.detalle-page-body .btn-whatsapp,
.detalle-acciones .btn-carrito-detalle,
.detalle-acciones .btn-whatsapp {
    min-height: 44px !important;
    padding: 10px 13px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    box-sizing: border-box;
}

body.detalle-page-body .btn-carrito-detalle,
.detalle-acciones .btn-carrito-detalle {
    border: none !important;
    color: #fff !important;
    background: #0f1b2d !important;
    cursor: pointer;
}

body.detalle-page-body .btn-whatsapp,
.detalle-acciones .btn-whatsapp {
    color: #fff !important;
    background: #22c55e !important;
    border: none !important;
    text-decoration: none !important;
    cursor: pointer;
}

/* AYUDA WHATSAPP */
body.detalle-page-body .ayuda-whatsapp,
.ayuda-whatsapp {
    display: flex !important;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 11px;
    opacity: 1 !important;
    visibility: visible !important;
}

body.detalle-page-body .ayuda-whatsapp a,
.ayuda-whatsapp a {
    color: #16a34a !important;
    font-weight: 800;
    text-decoration: none;
}

/* RELACIONADOS */
body.detalle-page-body .relacionados,
.relacionados {
    display: block !important;
    margin-top: 34px;
}

body.detalle-page-body .relacionados-grid,
.relacionados-grid {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 14px;
}

/* ZOOM */
.zoom-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: rgba(7,16,29,.76);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.zoom-modal.mostrar {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.zoom-contenedor {
    width: min(1100px,94vw) !important;
    height: min(82vh,800px) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
}

.zoom-contenedor img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    padding: 35px;
}

.zoom-cerrar {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 3;
    width: 43px;
    height: 43px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    font-size: 17px;
}

/* RESPONSIVE FINAL */
@media (max-width: 950px) {
    body.detalle-page-body .detalle-producto,
    .detalle-producto {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        padding: 20px !important;
    }

    body.detalle-page-body .detalle-imagen,
    .detalle-imagen {
        min-height: 420px !important;
        height: 420px !important;
    }

    body.detalle-page-body .detalle-imagen img,
    .detalle-imagen img {
        height: 360px !important;
    }

    body.detalle-page-body .detalle-beneficios,
    .detalle-beneficios {
        grid-template-columns: 1fr !important;
    }

    body.detalle-page-body .relacionados-grid,
    .relacionados-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
}

@media (max-width: 600px) {
    body.detalle-page-body .detalle-main,
    .detalle-main {
        width: 94%;
    }

    body.detalle-page-body .detalle-producto,
    .detalle-producto {
        padding: 16px !important;
        border-radius: 20px !important;
        gap: 22px !important;
    }

    body.detalle-page-body .detalle-imagen,
    .detalle-imagen {
        min-height: 340px !important;
        height: 340px !important;
        padding: 15px !important;
    }

    body.detalle-page-body .detalle-imagen img,
    .detalle-imagen img {
        height: 285px !important;
    }

    body.detalle-page-body .detalle-info,
    .detalle-info {
        padding: 10px 6px !important;
    }

    body.detalle-page-body .detalle-info h1,
    .detalle-info h1 {
        font-size: 28px !important;
    }

    body.detalle-page-body .detalle-precio strong,
    .detalle-precio strong {
        font-size: 42px !important;
    }

    body.detalle-page-body .detalle-acciones,
    .detalle-acciones {
        grid-template-columns: 1fr !important;
    }

    body.detalle-page-body .datos-tecnicos,
    .datos-tecnicos {
        grid-template-columns: 1fr !important;
    }

    body.detalle-page-body .relacionados-grid,
    .relacionados-grid {
        grid-template-columns: 1fr !important;
    }
}
/* =========================================
   AJUSTE FINAL - DETALLE MÁS COMPACTO
========================================= */

body.detalle-page-body .detalle-producto {
    grid-template-columns: minmax(390px, 1fr) minmax(430px, 1fr);
    gap: 28px;
    padding: 12px;
}
body.detalle-page-body .detalle-imagen {
    min-height: 430px;
    height: 430px;
    padding: 20px;
}

body.detalle-page-body .detalle-imagen img {
    height: 360px;
    max-width: 500px;
}

body.detalle-page-body .detalle-info {
    padding: 18px 20px 18px 8px;
    gap: 11px;
}

body.detalle-page-body .detalle-info h1 {
    font-size: clamp(28px, 3vw, 42px);
}

body.detalle-page-body .detalle-precio strong {
    font-size: clamp(40px, 4vw, 52px);
}

body.detalle-page-body .detalle-beneficios {
    gap: 7px;
}

body.detalle-page-body .beneficio {
    min-height: 58px;
    padding: 8px;
}

body.detalle-page-body .detalle-descripcion {
    padding: 10px 12px;
}

body.detalle-page-body .detalle-acciones {
    gap: 8px;
}

body.detalle-page-body .btn-carrito-detalle,
body.detalle-page-body .btn-whatsapp {
    min-height: 42px;
}
/* =========================================
   SUBIR PANEL DE DETALLE
========================================= */

body.detalle-page-body .detalle-main {
    padding-top: 8px !important;
}

body.detalle-page-body .detalle-navegacion {
    margin-bottom: 12px !important;
}

body.detalle-page-body .detalle-producto {
    margin-top: 0 !important;
}
/* =========================================
   NAVBAR COMPACTO - DETALLE
========================================= */

body.detalle-page-body .detalle-topbar {
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    padding: 6px 3.5% !important;
    box-sizing: border-box !important;
}

body.detalle-page-body .detalle-topbar .topbar-logo img {
    width: 179px !important;
    max-height: 79px !important;
    object-fit: contain;
}

body.detalle-page-body .detalle-main {
    padding-top: 10px !important;
}