.grinniCntnt { overflow: hidden; background: #fff; }

/* Top marquee */
.cntntTopMarquee { background-color: #eefff0; height: 8rem }
.cntntSectionMarquee { display: flex; padding: .5rem 0 .7rem; align-items: center; height: 100% }
.cntntSectionMarquee img { width: 19rem }

/* Destacados */
.cntntDestacados { background-color: #eefff0 }
.titleSectionGrinni { padding: 2rem 0; font-size: 2.1rem; font-weight: 600; color: #046d5f; text-align: center }

/* Cómo funciona */
.cntntFunciona { position: relative; z-index: 2 }
.titleFunciona { color: #004134; font-size: 3.5rem; text-align: center; font-weight: 700; padding: 3rem 0 }
.cardsFuncion { display: flex; flex-direction: column }
.cardsFuncion .itemFuncion { width: 100%; position: relative; padding: 1rem 1.2rem; text-align: start; border-radius: .3cm; min-height: 14rem; margin: 0 0 2rem }
.cardsFuncion .descripcionFuncion { padding-bottom: 3rem; line-height: 1.3; font-size: 1.25rem }
.itemFuncion .imgFuncion { text-align: start; padding: 0 0 .5rem }
.imgFuncion img { width: 4.5rem; height: 4.5rem; min-width: 4.5rem; min-height: 4.5rem }
.cardsFuncion .itemFuncion:first-child { background-color: #bdf2e3; color: #004134 }
.cardsFuncion .itemFuncion:nth-of-type(2) { background-color: #89e0c5; color: #004134 }
.cardsFuncion .itemFuncion:nth-of-type(3) { background-color: #046d5f; color: #FFFFFF }
.cardsFuncion .itemFuncion:last-child { background-color: #004134; color: #FFFFFF }

/* Transiciones */
.backTransision { padding: 0 0 2.5rem; background: linear-gradient(0deg, #001d01 50%, #FFFFFF 50%) }
.backTransisionReverse { background: linear-gradient(180deg, #001d01 50%, #FFFFFF 50%) }
.messageSuscripcion { border-radius: .2cm; background-color: #2c876f; color: #FFFFFF; text-align: center; font-size: 1.3rem; padding: .8rem .6rem 1.1rem }
.backGreenExpanded { background-color: #001d01 }

/* Cards info */
.cardsInfo > div { width: 100% }
.cardsInfo .itemCardDuracion, .cardsInfo .itemCardCompra { border-radius: 2.2rem; height: 15rem; padding: 2rem 2.3rem; box-shadow: -.12rem .2rem 1rem -.4rem #000000 }
.cardsInfo .itemCardCompra { text-align: center }
.cardsInfo .itemCardDuracion { background-color: #001d01; padding: 0; height: 9rem; color: #FFFFFF; box-shadow: none }
.itemCardDuracion span { font-size: 1.25rem }
.itemCardDuracion span span { font-size: 1.4rem; font-weight: 600 }
.itemCardCompra { background-color: #e1f5e6; color: #3d4942 }
.itemCardCompra span { font-size: 1.35rem }
.itemCardCompra span span { font-size: 1.5rem; font-weight: 600 }
.itemCardCompra img { width: 25rem; margin: 1.5rem auto 0; display: block }

/* Paquetería */
.paqueteriaSection { display: block; gap: 2rem; padding: 3rem 0 0 }
.textPaqueteria { width: 100% }
.logosPaqueteria { max-width: 100%; width: 30rem; margin: 2rem auto 0 }
.textPaqueteria span { color: #666666; font-size: 1.25rem }
.textPaqueteria span span { color: #2c876f; font-size: 1.2rem; font-weight: 700 }
.logosPaqueteria img { object-fit: contain }
.logosPaqueteria .logos1 { display: flex }
.logosPaqueteria .logos1 img:first-child { width: 55% }
.logosPaqueteria .logos1 img:last-child { width: 45% }
.logosPaqueteria .logos2 { display: flex }
.logosPaqueteria .logos2 img { width: 50% }

/* Catálogo */
.cntntHeaderCatalogo { background-color: #FFFFFF; padding: 0 }
.cntntCatalogoOptions { display: flex; justify-content: space-between; align-items: center }
.catalogoTitle { color: #FFFFFF; font-size: 2.1rem; width: fit-content; font-weight: 700; background-color: #7d1384; border-radius: 3rem 0 3rem 0; padding: 0 2.5rem }

/* Cuadrícula productos */
.productosCuadrante { display: flex; flex-wrap: wrap }
.productosCuadrante .productCard { width: 50%; display: flex; justify-content: center; padding: 1.5rem .5rem }
.productCard .itemProducto { width: 18rem; padding: .8rem 0 1.2rem }

/* Producto card */
.itemProducto { border-radius: 1.5rem; overflow: hidden; width: 16rem; padding: .8rem .5rem 1.2rem; background: #FFFFFF; box-shadow: -.11rem .1rem .7rem -.3rem #000000 }
.cntntImgProducto { width: 100%; height: 15rem; display: flex; position: relative }
.cntntImgProducto .imgProd { width: 100%; object-fit: contain }
.detalleSection { padding: 0 .8rem }
.categoriaProducto { height: 1.8rem; font-size: 1.15rem; color: #35a789; display: flex; align-items: center; font-weight: 600 }
.descripcionProducto { font-size: 1.2rem; color: #3e4a42; height: 3.5rem; display: flex; align-items: center }
.descripcionSuscripcion { font-size: .94rem; font-weight: 600; color: #3e4a42; height: 1.8rem; line-height: 1.2; padding: 0 0 .6rem }
.limitaLine { overflow: hidden; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 1 }

/* Botones */
.btnComprar { width: 98%; background-color: #009957; text-align: center; border-radius: 6rem; margin: 1.3rem auto 0; font-size: 1rem; color: #FFFFFF; padding: .3rem .5rem .4rem; border: .1rem solid transparent; cursor: pointer; transition-duration: .4s }
.btnSub { width: 98%; background-color: #7d1384; text-align: center; border-radius: 6rem; margin: 1.3rem auto 0; font-size: 1rem; color: #FFFFFF; padding: .3rem .5rem .4rem; border: .1rem solid transparent; cursor: pointer; transition-duration: .4s }
.btnComprar:hover { background-color: #c5feca; color: #007f48 }
.btnSub:hover { background: #7d138455; color: #7d1384 }

/* Footer contacto */
.cntntBottomMarque { border-top: .1rem solid #6b7b72; position: relative; z-index: 9 }
.cntntBottom { display: block; gap: 2.5rem; padding: 2rem 0 }
.cntntBottom .dudaVision { font-size: 2rem; font-weight: 700; text-align: center; color: #046d5f; margin-bottom: 1rem }
.cntntBottom .itemContacto { display: flex; gap: .6rem; font-size: 1.7rem; align-items: center; margin-bottom: 1rem }
.cntntBottom .itemContacto img { width: 2rem; height: 2rem }

/* Popup suscripción */
.cntntnSubGrinni { justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #00000044; padding: .5rem; z-index: 99 }
.cardGrinniPart { position: relative; width: 20rem; padding: .5rem; background-color: #FFFFFF; border: .25rem solid #815fd5AA; border-radius: .6rem }
.btnSubGrinni { padding: .3rem 1.5rem .2rem; background-color: #7d1384; border-radius: 6rem; margin: 0 auto 1rem; color: #FFFFFF; width: fit-content; font-size: 1.2rem; cursor: pointer }
.mesesSubs { display: block; margin: 1rem auto; height: 2rem; line-height: 0; border: none !important; box-shadow: 0 0 .2rem 0 #00000066 !important; color: #25bed5 }
.conceptoProd { text-align: center; font-weight: 600; font-size: 1.2rem }
.closeGrinniSub { position: absolute; right: .8rem; top: .5rem; font-size: 1.2rem; color: #ff0000; font-weight: 600; z-index: 2; background-color: transparent; height: 1.6rem; line-height: 0; padding: 0 .15rem; border: 0; cursor: pointer }
.masCantidad, .menosCantidad { display: flex; justify-content: center; align-items: center; color: #25bed5; border: 0; box-shadow: 0 0 .3rem 0 #00000066; border-radius: 50%; width: 1.5rem; height: 1.5rem; min-width: 1.5rem; min-height: 1.5rem; background-color: #FFFFFF; cursor: pointer }
.cantidadSubGrinni { width: 2rem; border: 0; text-align: center }

/* Carousel Glide */
.glideBannerGrinni { margin: 0 0 3rem }
.glideBannerGrinni .glide__bullet { background-color: #c5feca; width: 4rem; height: .8rem }
.glideBannerGrinni .glide__bullet.glide__bullet--active { background-color: #009957 }
.cntntBannersBottom { width: 100% }
.cntntBannersBottom .glide__arrows { display: none }
.glideBannerGrinni .glide__arrows, .cntntCarruselGrinni .glide__arrows { position: absolute; top: 100%; left: 0; z-index: 1; width: 100%; height: 100% }
.glideBannerGrinni .glide__arrow--right, .glideBannerGrinni .glide__arrow--left,
.cntntCarruselGrinni .glide__arrow--right, .cntntCarruselGrinni .glide__arrow--left { top: -50%; transform: translateY(-50%); position: absolute; cursor: pointer; width: 3.5rem; display: flex; justify-content: center; overflow: hidden }
.glideBannerGrinni .glide__arrow--right span, .glideBannerGrinni .glide__arrow--left span,
.cntntCarruselGrinni .glide__arrow--right span, .cntntCarruselGrinni .glide__arrow--left span { width: 6rem; display: block; height: 6rem; filter: brightness(0) saturate(100%) invert(42%) sepia(56%) saturate(3610%) hue-rotate(132deg) brightness(87%) contrast(102%) }
.glideBannerGrinni .glide__arrow--right { left: 100% }
.glideBannerGrinni .glide__arrow--left { right: 100% }

/* ===== min-width breakpoints ===== */

@media (min-width: 576px) {
    .itemCardDuracion span { font-size: 1.35rem }
    .itemCardDuracion span span { font-size: 1.55rem }
    .imgFuncion img { width: 5rem; height: 5rem; min-width: 5rem; min-height: 5rem }
    .cardsFuncion .descripcionFuncion { font-size: 1.4rem }
    .itemCardCompra span { font-size: 1.5rem }
    .itemCardCompra span span { font-size: 1.6rem }
    .textPaqueteria span { font-size: 1.45rem }
    .textPaqueteria span span { font-size: 1.4rem }
    .productCard .itemProducto { padding: .8rem .5rem 1.2rem }
}

@media (min-width: 768px) {
    .productosCuadrante .productCard { width: calc(100% / 3) }
    .descripcionProducto { font-size: 1.45rem; height: 2.2rem }
    .cntntBottom .dudaVision { font-size: 1.8rem }
    .cntntBottom .itemContacto { font-size: 1.35rem }
}

@media (min-width: 992px) {
    .productosCuadrante .productCard { width: calc(100% / 4) }
    .paqueteriaSection { display: flex }
    .textPaqueteria { width: 65% }
    .logosPaqueteria { width: 35%; margin: 0 }
    .cardsInfo .itemCardCompra { text-align: start }
    .backTransision { padding: 2.5rem 0; background: linear-gradient(0deg, #001d01 50%, #FFFFFF 50%) }
    .messageSuscripcion { font-size: 1.65rem }
    .cardsInfo .itemCardDuracion { height: 15rem; padding: 2rem 2.3rem; box-shadow: -.12rem .2rem 1rem -.4rem #000000 }
    .cardsInfo > div { width: 50% }
    /* .cardsInfo { display: flex } */
    .backGreenExpanded, .backTransision, .backTransisionReverse { background: none }
    .itemFuncion .imgFuncion { padding: 1.5rem 0; text-align: center }
    .imgFuncion img { width: 5.5rem; height: 5.5rem; min-width: 5.5rem; min-height: 5.5rem }
    .cardsFuncion .descripcionFuncion { font-size: 1.25rem }
    .cardsFuncion { flex-direction: row }
    .cardsFuncion .itemFuncion { width: 25%; min-height: 23rem; text-align: center; box-shadow: 0 .3rem 1.6rem -.5rem #000000; margin: 0 }
    .itemCardCompra span { font-size: 1.4rem }
    .itemCardCompra span span { font-size: 1.55rem }
    .cntntBottom { display: flex }
    .cntntBottom .dudaVision { font-size: 2rem; text-align: start }
    .cntntBottom .itemContacto { font-size: 1.5rem }
    .cntntBottom .itemContacto img { width: 2.3rem; height: 2.3rem }
    .cntntBannersBottom { width: calc(100% - 8rem) }
    .cntntBannersBottom .glide__arrows { display: block }
}

@media (min-width: 1200px) {
    .productosCuadrante .productCard { width: calc(100% / 5) }
    .imgFuncion img { width: 6.5rem; height: 6.5rem; min-width: 6.5rem; min-height: 6.5rem }
    .cardsFuncion .descripcionFuncion { font-size: 1.6rem }
    .itemCardDuracion span { font-size: 1.6rem }
    .itemCardDuracion span span { font-size: 1.8rem }
    .itemCardCompra span { font-size: 1.6rem }
    .itemCardCompra span span { font-size: 1.7rem }
    .textPaqueteria span { font-size: 1.55rem }
    .textPaqueteria span span { font-size: 1.5rem }
    .cntntBottom .dudaVision { font-size: 2.2rem }
    .cntntBottom .itemContacto { font-size: 1.7rem }
}

@media (min-width: 1440px) {
    .itemCardCompra span { font-size: 1.65rem }
    .itemCardCompra span span { font-size: 1.9rem }
}