/* =========================================================
DETALLE DE PRODUCTO
GALERÍA - PRIMERA COLUMNA
========================================================= */

/* =========================================================
GALERÍA
========================================================= */
.ch-pro-det-galeria {
width: 100%;

box-sizing: border-box;

}

/* =========================================================
SLIDER
========================================================= */

.ch-pro-det-slider {
width: 100%;

display: flex;

align-items: stretch;

gap: 10px;

box-sizing: border-box;

}

/* =========================================================
MINIATURAS
========================================================= */

.ch-pro-det-miniaturas {
width: 64px;

flex: 0 0 64px;

display: flex;

flex-direction: column;

gap: 8px;

box-sizing: border-box;

}

/* =========================================================
MINIATURA
========================================================= */

.ch-pro-det-miniatura {
width: 64px;

height: 64px;

flex: 0 0 64px;

padding: 0;

display: block;

overflow: hidden;

border: 1px solid #e1e8e3;

border-radius: 7px;

background: #ffffff;

cursor: pointer;

box-sizing: border-box;

transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;

}

.ch-pro-det-miniatura {
border-color: #8fb5a0;

transform: translateY(-1px);

}

.ch-pro-det-miniatura-activa {
border-color: #16834a;

box-shadow:
    0 0 0 1px #16834a;

}

/* =========================================================
IMAGEN DE MINIATURA
========================================================= */

.ch-pro-det-miniatura img {
width: 100%;

height: 100%;

display: block;

object-fit: cover;

object-position: center;

}

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

.ch-pro-det-imagen-principal {
position: relative;

flex: 1;

min-width: 0;

aspect-ratio: 1 / 1;

overflow: hidden;

background: #f4f6f5;

border-radius: 9px;

box-sizing: border-box;

}

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

.ch-pro-det-img {
width: 100%;

height: 100%;

display: block;

object-fit: cover;

object-position: center;

transition:
    transform 0.35s ease;

}

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

.ch-pro-det-zoom {
position: absolute;

right: 10px;

bottom: 10px;

width: 36px;

height: 36px;

min-width: 36px;

min-height: 36px;

padding: 0;

display: flex;

align-items: center;

justify-content: center;

border: 0;

border-radius: 50%;

background: rgba(255, 255, 255, 0.95);

color: #52635a;

font-size: 15px;

line-height: 1;

cursor: pointer;

box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.14);

box-sizing: border-box;

transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;

}

.ch-pro-det-zoom {
background: #ffffff;

color: #075d2b;

transform: scale(1.06);

}

.ch-pro-det-zoom {
outline: none;

box-shadow:
    0 0 0 3px rgba(7, 93, 43, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.14);

}

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

.ch-pro-det-info {
width: 100%;

margin-top: 10px;

padding: 14px;

display: grid;

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

gap: 10px;

background: #eff8f3;

border-radius: 8px;

box-sizing: border-box;

}

/* =========================================================
ITEM DE INFORMACIÓN
========================================================= */

.ch-pro-det-info-item {
min-width: 0;

display: flex;

align-items: center;

gap: 10px;

padding: 7px 8px;

box-sizing: border-box;

}

/* =========================================================
ICONO DE INFORMACIÓN
========================================================= */

.ch-pro-det-info-icono {
width: 30px;

height: 30px;

flex: 0 0 30px;

display: flex;

align-items: center;

justify-content: center;

color: #08713a;

font-size: 19px;

line-height: 1;

}

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

.ch-pro-det-info-contenido {
min-width: 0;

display: flex;

flex-direction: column;

gap: 2px;

}

/* =========================================================
LABEL
========================================================= */

.ch-pro-det-info-label {
display: block;

margin: 0;

color: #75857d;

font-size: 10px;

line-height: 1.2;

font-weight: 400;

}

/* =========================================================
VALOR
========================================================= */

.ch-pro-det-info-valor {
display: block;

margin: 0;

color: #284c39;

font-size: 11px;

line-height: 1.3;

font-weight: 700;

}

/* =========================================================

LIGHTBOX / ZOOM

========================================================= */

/* =========================================================
CONTENEDOR PRINCIPAL DEL LIGHTBOX
========================================================= */

.ch-pro-det-lightbox {
position: fixed !important;

top: 0 !important;

right: 0 !important;

bottom: 0 !important;

left: 0 !important;

width: 100vw !important;

height: 100vh !important;

margin: 0 !important;

padding: 30px !important;

display: flex !important;

align-items: center !important;

justify-content: center !important;

box-sizing: border-box !important;

z-index: 999999 !important;

visibility: hidden;

opacity: 0;

pointer-events: none;

overflow: hidden;

transition:
    opacity 0.25s ease,
    visibility 0.25s ease;

}

/* =========================================================
LIGHTBOX ACTIVO
========================================================= */

.ch-pro-det-lightbox-activo {
visibility: visible !important;

opacity: 1 !important;

pointer-events: auto !important;

}

/* =========================================================
FONDO OSCURO
========================================================= */

.ch-pro-det-lightbox-fondo {
position: absolute !important;

top: 0 !important;

right: 0 !important;

bottom: 0 !important;

left: 0 !important;

width: 100% !important;

height: 100% !important;

margin: 0 !important;

padding: 0 !important;

background: rgba(0, 0, 0, 0.82);

cursor: pointer;

}

/* =========================================================
CONTENIDO DEL LIGHTBOX
========================================================= */

.ch-pro-det-lightbox-contenido {
position: relative !important;

z-index: 2 !important;

width: auto !important;

height: auto !important;

max-width: 90vw !important;

max-height: 90vh !important;

margin: 0 !important;

padding: 0 !important;

display: flex !important;

align-items: center !important;

justify-content: center !important;

box-sizing: border-box !important;

}

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

.ch-pro-det-lightbox-img {
position: relative !important;

display: block !important;

width: auto !important;

height: auto !important;

max-width: 90vw !important;

max-height: 90vh !important;

margin: 0 !important;

padding: 0 !important;

object-fit: contain !important;

border: 0 !important;

border-radius: 8px;

background: #ffffff;

box-shadow:
    0 12px 45px rgba(0, 0, 0, 0.40);

box-sizing: border-box !important;

}

/* =========================================================
BOTÓN CERRAR LIGHTBOX
========================================================= */

.ch-pro-det-lightbox-cerrar {
position: absolute !important;

top: -16px !important;

right: -16px !important;

z-index: 10 !important;

width: 38px !important;

height: 38px !important;

min-width: 38px !important;

max-width: 38px !important;

min-height: 38px !important;

max-height: 38px !important;

margin: 0 !important;

padding: 0 !important;

display: flex !important;

align-items: center !important;

justify-content: center !important;

border: 0 !important;

border-radius: 50% !important;

background: #ffffff !important;

color: #34483d !important;

font-family: inherit;

font-size: 14px !important;

line-height: 1 !important;

cursor: pointer;

box-sizing: border-box !important;

box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.25);

transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;

}

.ch-pro-det-lightbox-cerrar {
background: #075d2b !important;

color: #ffffff !important;

transform: scale(1.05);

}

.ch-pro-det-lightbox-cerrar {
outline: none !important;

box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.25),
    0 3px 12px rgba(0, 0, 0, 0.25);

}

/* =========================================================
BLOQUEAR SCROLL DE LA PÁGINA
========================================================= */

.ch-pro-det-no-scroll {
overflow: hidden !important;

height: 100% !important;

}

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

@media (max-width: 1100px) {

.ch-pro-det-miniaturas {
    width: 60px;

    flex-basis: 60px;
}


.ch-pro-det-miniatura {
    width: 60px;

    height: 60px;

    flex-basis: 60px;
}


.ch-pro-det-info {
    padding: 12px;

    gap: 7px;
}


.ch-pro-det-info-item {
    gap: 8px;

    padding: 6px 5px;
}

}

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

@media (max-width: 991px) {

.ch-pro-det-slider {
    gap: 8px;
}


.ch-pro-det-miniaturas {
    width: 56px;

    flex-basis: 56px;

    gap: 7px;
}


.ch-pro-det-miniatura {
    width: 56px;

    height: 56px;

    flex-basis: 56px;
}


.ch-pro-det-info {
    padding: 11px;

    gap: 6px;
}


.ch-pro-det-info-item {
    gap: 7px;

    padding: 5px 4px;
}


.ch-pro-det-info-icono {
    width: 28px;

    height: 28px;

    flex-basis: 28px;

    font-size: 17px;
}

}

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

@media (max-width: 767px) {

.ch-pro-det-slider {
    gap: 10px;
}


.ch-pro-det-miniaturas {
    width: 58px;

    flex-basis: 58px;

    gap: 7px;
}


.ch-pro-det-miniatura {
    width: 58px;

    height: 58px;

    flex-basis: 58px;
}


.ch-pro-det-info {
    margin-top: 10px;

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

    gap: 8px;

    padding: 12px;
}


.ch-pro-det-info-item {
    padding: 6px 4px;
}


.ch-pro-det-lightbox {
    padding: 20px !important;
}


.ch-pro-det-lightbox-contenido {
    max-width: 94vw !important;

    max-height: 85vh !important;
}


.ch-pro-det-lightbox-img {
    max-width: 94vw !important;

    max-height: 85vh !important;
}


.ch-pro-det-lightbox-cerrar {
    top: -10px !important;

    right: -10px !important;

    width: 36px !important;

    height: 36px !important;

    min-width: 36px !important;

    max-width: 36px !important;

    min-height: 36px !important;

    max-height: 36px !important;
}

}

/* =========================================================
MÓVIL PEQUEÑO
========================================================= */

@media (max-width: 575px) {

.ch-pro-det-slider {
    gap: 8px;
}


.ch-pro-det-miniaturas {
    width: 52px;

    flex-basis: 52px;

    gap: 6px;
}


.ch-pro-det-miniatura {
    width: 52px;

    height: 52px;

    flex-basis: 52px;

    border-radius: 6px;
}


.ch-pro-det-info {
    grid-template-columns: 1fr;

    padding: 12px;
}


.ch-pro-det-info-item {
    padding: 5px 4px;
}


.ch-pro-det-lightbox {
    padding: 15px !important;
}


.ch-pro-det-lightbox-img {
    max-width: 96vw !important;

    max-height: 88vh !important;
}

}

/* =========================================================
MÓVIL MUY PEQUEÑO
========================================================= */

@media (max-width: 400px) {

.ch-pro-det-miniaturas {
    width: 48px;

    flex-basis: 48px;
}


.ch-pro-det-miniatura {
    width: 48px;

    height: 48px;

    flex-basis: 48px;
}


.ch-pro-det-info {
    padding: 10px;
}


.ch-pro-det-info-icono {
    width: 26px;

    height: 26px;

    flex-basis: 26px;

    font-size: 16px;
}


.ch-pro-det-info-label {
    font-size: 9px;
}


.ch-pro-det-info-valor {
    font-size: 10px;
}

}

/* =========================================================
DETALLE DE PRODUCTO
SEGUNDA COLUMNA
========================================================= */

/* =========================================================
CONTENEDOR
========================================================= */

.ch-pro-det-detalles {
width: 100%;

height: 100%;

padding: 4px 0 10px 24px;

box-sizing: border-box;

display: flex;

flex-direction: column;

}

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

.ch-pro-det-estado {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 6px;
margin-bottom: 7px;
padding: 8px 15px;
border-radius: 20px;
background: #e9f7ef;
color: #247c49;
font-size: 0.8rem;
line-height: 1;
font-weight: 500;
}

.ch-pro-det-estado-punto {
width: 8px;

height: 8px;

flex: 0 0 8px;

border-radius: 50%;
flex-shrink: 0;
background: #279454;

}

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

.ch-pro-det-titulo {
margin: 0 0 5px;

color: #064d2c;

font-size: 29px;

line-height: 1.12;

font-weight: 800;

letter-spacing: -0.5px;

}

/* =========================================================
META
COMITÉ + UBICACIÓN
========================================================= */

.ch-pro-det-meta {
width: 100%;

display: flex;

align-items: center;

gap: 30px;

margin-bottom: 13px;

}

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

.ch-pro-det-meta-item {
display: flex;
align-items: center;
gap: 7px;
color: #4f5d55;

font-size: 12px;

line-height: 1.3;

font-weight: 500;

}

.ch-pro-det-meta-item i {
color: #006b35;

font-size: 17px;

line-height: 1;

}

/* =========================================================
SEPARADOR
========================================================= */

.ch-pro-det-separador {
width: 100%;

height: 1px;

margin-bottom: 10px;

background: #e1e7e3;

}

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

.ch-pro-det-descripcion {
width: 100%;

color: #66726b;

font-size: 11px;

line-height: 1.55;

font-weight: 400;

}

.ch-pro-det-descripcion p {
margin: 0 0 3px;
}

.ch-pro-det-descripcion p {
margin-bottom: 0;
}

/* =========================================================
CARACTERÍSTICAS
========================================================= */

.ch-pro-det-caracteristicas {
width: 100%;

margin-top: 13px;

display: grid;

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

gap: 8px;

}

/* =========================================================
CARACTERÍSTICA
========================================================= */

.ch-pro-det-caracteristica {
min-width: 0;

display: flex;

align-items: center;

gap: 7px;

}

/* =========================================================
ICONO CARACTERÍSTICA
========================================================= */

.ch-pro-det-caracteristica-icono {
width: 33px;

height: 33px;

flex: 0 0 33px;

display: flex;

align-items: center;

justify-content: center;

color: #08713a;

font-size: 22px;

line-height: 1;

}

/* =========================================================
TEXTO CARACTERÍSTICA
========================================================= */

.ch-pro-det-caracteristica-texto {
min-width: 0;

display: flex;

flex-direction: column;

gap: 1px;

}

.ch-pro-det-caracteristica-texto strong {
display: block;

color: #43564b;

font-size: 13px;

line-height: 1.15;

font-weight: 700;

}

.ch-pro-det-caracteristica-texto span {
display: block;

color: #718078;

font-size: 12px;

line-height: 1.15;

font-weight: 400;

}

/* =========================================================
CONTACTO
========================================================= */

.ch-pro-det-contacto {
width: 100%;

margin-top: 14px;

margin-bottom: 13px;

}

/* =========================================================
WHATSAPP PRINCIPAL
========================================================= */

.ch-pro-det-whatsapp {
margin-top:20px;
    width: 250px;

height: 38px;

padding: 0 13px;

display: inline-flex;

align-items: center;

justify-content: center;

gap: 8px;

border-radius: 20px;

background: #08b84d;

color: #ffffff;

text-decoration: none;

font-size: 13px;

font-weight: 600;

box-sizing: border-box;

transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;

}

.ch-pro-det-whatsapp {
background: #079f43;

color: #ffffff;

transform: translateY(-1px);

box-shadow:
    0 5px 14px rgba(8, 184, 77, 0.20);

}

.ch-pro-det-whatsapp i {
font-size: 25px;
}

.ch-pro-det-whatsapp i {
margin-left: auto;

font-size: 20px;

}

/* =========================================================
COMPARTIR
========================================================= */

.ch-pro-det-compartir {
width: 100%;

display: flex;

flex-direction: column;

gap: 7px;

}

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

.ch-pro-det-compartir-titulo {
color: #263a30;

font-size: 14px;

line-height: 1.2;

font-weight: 600;
margin-top:10px;
}

/* =========================================================
CONTENEDOR REDES
========================================================= */

.ch-pro-det-redes {
width: 100%;

display: flex;

align-items: center;

gap: 4px;

flex-wrap: wrap;

}

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

.ch-pro-det-red {
height: 29px;

padding: 4px 15px;

display: inline-flex;

align-items: center;

justify-content: center;

gap: 5px;

border: 0;

border-radius: 5px;

color: #ffffff;

text-decoration: none;

font-family: inherit;

font-size: 12px;

line-height: 1;

font-weight: 400;

cursor: pointer;

box-sizing: border-box;

transition:
    opacity 0.2s ease,
    transform 0.2s ease;

}

.ch-pro-det-red {
color: #ffffff;

opacity: 0.88;

transform: translateY(-1px);

}

.ch-pro-det-red i {
font-size: 15px;
}

/* =========================================================
FACEBOOK
========================================================= */

.ch-pro-det-facebook {
background: #1877f2;
}

/* =========================================================
X
========================================================= */

.ch-pro-det-x {
background: #111111;
}

/* =========================================================
WHATSAPP RED
========================================================= */

.ch-pro-det-whatsapp-red {
background: #10bd55;
}

/* =========================================================
LINKEDIN
========================================================= */

.ch-pro-det-linkedin {
background: #0a72b9;
}

/* =========================================================
COPIAR ENLACE
========================================================= */

.ch-pro-det-copiar {
background: #718196;
}

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

@media (max-width: 1100px) {

.ch-pro-det-detalles {
    padding-left: 18px;
}


.ch-pro-det-titulo {
    font-size: 27px;
}


.ch-pro-det-meta {
    gap: 18px;
}


.ch-pro-det-caracteristicas {
    gap: 5px;
}


.ch-pro-det-caracteristica {
    gap: 4px;
}


.ch-pro-det-caracteristica-icono {
    width: 25px;

    height: 25px;

    flex-basis: 25px;

    font-size: 17px;
}

}

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

@media (max-width: 991px) {

.ch-pro-det-detalles {
    padding-left: 12px;
}


.ch-pro-det-titulo {
    font-size: 24px;
}


.ch-pro-det-meta {
    gap: 12px;
}


.ch-pro-det-meta-item {
    font-size: 9px;
}


.ch-pro-det-descripcion {
    font-size: 10px;
}


.ch-pro-det-caracteristicas {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    row-gap: 8px;
}


.ch-pro-det-whatsapp {
    width: 190px;
}

}

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

@media (max-width: 767px) {

.ch-pro-det-detalles {
    height: auto;

    padding: 25px 0 10px;
}


.ch-pro-det-titulo {
    font-size: 28px;
}


.ch-pro-det-meta {
    gap: 25px;
}


.ch-pro-det-meta-item {
    font-size: 10px;
}


.ch-pro-det-descripcion {
    font-size: 11px;

    line-height: 1.6;
}


.ch-pro-det-caracteristicas {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


.ch-pro-det-redes {
    gap: 5px;
}

}

/* =========================================================
MÓVIL PEQUEÑO
========================================================= */

@media (max-width: 575px) {

.ch-pro-det-meta {
    flex-direction: column;

    align-items: flex-start;

    gap: 8px;
}


.ch-pro-det-caracteristicas {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    row-gap: 10px;
}


.ch-pro-det-whatsapp {
    width: 100%;
}


.ch-pro-det-red {
    height: 31px;

    padding: 0 9px;
}

}