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

.contenedor-producto-Info {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr;
    align-items: center;

    padding: 30px 20px;
    gap: 30px;

    overflow: hidden;
}


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

.contenedor-img-producto {
    position: relative;

    width: 100%;
    min-height: 380px;

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

    overflow: hidden;
    border-radius: 25px;
}



/* Fondo difuminado */
.seccionProducto {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.seccionProducto::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image: var(--imagen-fondo);
    background-size: cover;
    background-position: center;

    filter: blur(8px);

    transform: scale(1.08);

    opacity: .35;

    z-index: 0;
}


/* Imagen del producto */

.contenedor-img-producto img {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 450px;
    object-fit: contain;

    transform: rotate(-15deg) scale(1.25);

    transition: transform .5s ease;

    object-fit: contain;

    transform: rotate(-8deg);

    transition:
        transform .5s ease,
        scale .5s ease;
}


.contenedor-img-producto img:hover {
    transform: rotate(-3deg) scale(1.04);
}


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

.producto-datos {
    width: 100%;

    padding: 20px;

    display: flex;
    flex-direction: column;
    gap: 15px;

    z-index: 1;
}


/* Categoría */

.producto-categoria {
    width: fit-content;

    padding: 7px 14px;

    border-radius: 20px;

    background: #1ae70838;

    font-size: .9rem;
    font-weight: 600;

    color: #3f3e3e;
}


/* Nombre */

.producto-nombre {
    margin: 0;

    font-size: 2.5rem;

    font-weight: 800;

    line-height: .95;

    letter-spacing: -2px;
}


/* Descripción */

.producto-descripcion {
    max-width: 600px;

    margin: 5px 0 10px;

    color: #0c0c0c;

    font-size: 1.3rem;

    line-height: 1.6;
}


/* =========================================
   META
========================================= */

.producto-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 25px;

    padding: 15px 0;

    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;

    color: #363434;

    font-size: 1.3rem;
}

.producto-meta span {
    display: flex;
    gap: 5px;
}

.producto-meta strong {
    color: #222;
}


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

.producto-precio {
    display: grid;

    grid-template-columns: auto auto;

    align-items: center;

    column-gap: 20px;
    row-gap: 8px;

    max-width: 400px;

    padding: 10px 0;
}

.producto-precio small {
    color: #0c0c0c;

    font-size: 1.3rem;
}

.producto-precio strong {
    font-size: 1.5rem;

    font-weight: 800;
}


/* =========================================
   DETALLES
========================================= */

.producto-detalles {
    width: 100%;
    max-width: 1100px;

    margin: 30px auto 0;

    padding: 30px 20px;

    display: flex;
    flex-direction: column;

    gap: 40px;

    border-top: 1px solid #ddd;

    z-index: 2;
}


.detalle-seccion {
    display: flex;
    flex-direction: column;

    gap: 12px;

    z-index: 2;
}


.detalle-seccion h2 {
    margin: 0;

    font-size: 1.5rem;

    font-weight: 700;

    color: #080808;
}


.detalle-seccion p {
    margin: 0;

    color: #161616;

    font-size: 1.3rem;

    line-height: 1.7;

    white-space: pre-line;
}


.detalle-seccion ul {
    margin: 0;

    padding-left: 20px;

    display: flex;
    flex-direction: column;

    gap: 10px;
}


.detalle-seccion li {
    color: #0a0a0a;

    font-size: 1.1rem;

    line-height: 1.6;

    padding-left: 5px;
}


.detalle-seccion li::marker {
    color: #888;
}


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

@media (min-width: 768px) {

    .contenedor-producto-Info {
        grid-template-columns: 45% 55%;

        padding: 40px 30px;

        gap: 30px;
    }


    .contenedor-img-producto {
        min-height: 500px;
    }

    .contenedor-img-producto img {
            width: 90%;
    max-width: 450px;
    object-fit: contain;

    transform: rotate(-10deg) scale(1.3);

    transition: transform .5s ease;
    }

    .contenedor-img-producto img:hover {
    transform: rotate(-3deg) scale(1.4);
}


    .producto-datos {
        padding: 20px 30px;
    }


    .producto-descripcion {
        font-size: 1.15rem;
    }


    .producto-detalles {
        padding: 40px 30px;
    }
}


/* =========================================
   ESCRITORIO
========================================= */

@media (min-width: 1024px) {

    .contenedor-producto-Info {
        grid-template-columns: 50% 50%;

        min-height: 600px;

        padding: 60px 40px;

        gap: 50px;
    }


    .contenedor-img-producto {
        min-height: 550px;
    }


    .contenedor-img-producto img {
            width: 90%;
    max-width: 450px;
    object-fit: contain;

    transform: rotate(-10deg) scale(1.5);

    transition: transform .5s ease;
    }

    .contenedor-img-producto img:hover {
    transform: rotate(-3deg) scale(1.5);
}



    .producto-datos {
        padding: 30px;
    }


    .producto-nombre {
        font-size: clamp(3.5rem, 5vw, 5rem);
    }


    .producto-descripcion {
        max-width: 600px;

        font-size: 1.2rem;
    }


    .producto-meta {
        font-size: 1.1rem;
    }


    .producto-detalles {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 60px;

        padding: 50px 30px;
    }


        .producto-detalles {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 50px;
        padding: 40px 20px;
    }

    .detalle-sugerencia {
        grid-column: 1 / -1;
    }
}