/* ============================================================
   GREEN FAMILY - envases plasticos para la industria
   Parana, Entre Rios

   Derivado del institucional de Dumar (assets/css/custom/dumarweb):
   mismo esqueleto de diseno -menu flotante con glassmorfismo, hero a
   pantalla completa por debajo del menu, encabezados a dos columnas,
   modelos 3 y 5- con la paleta de Green Family.

   Los nombres de los bloques de la home SON el id del CSS
   (#divBloque<Nombre>): renombrarlos desde el admin pierde el diseno.
   ============================================================ */

:root{
    --greenfamily-navy: #2a7b1c;
    --greenfamily-navy-deep: #123d16;
    --greenfamily-green: #5e9e1e;
    --greenfamily-green-soft: #eef5e4;
    --greenfamily-blue: #7fb42a;
    --greenfamily-bg-soft: #f6f8f3;
    --greenfamily-border: #e2ebd9;
    --greenfamily-text: #263223;
    --greenfamily-muted: #6e7c68;
    --greenfamily-grad: linear-gradient(100deg, #2a7b1c 0%, #5e9e1e 100%);
    --greenfamily-grad-verde: linear-gradient(100deg, #497d17 0%, #5e9e1e 100%);
}

/* ---------- Tipografía ---------- */

body{
	font-family: "Poppins", "Manrope", sans-serif;
	color: var(--greenfamily-text);
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4,
.lead,
.navbar-nav .nav-link,
.btn,
input,
select,
textarea,
button{
    font-family: "Poppins", "Manrope", sans-serif;
}

h1,
h2,
.display-1,
.display-2,
.display-3,
.display-4{
    font-family: "Raleway", "Poppins", sans-serif;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--greenfamily-navy);
}

h3,
h4,
h5{
    color: var(--greenfamily-navy);
}

/* ---------- Barra superior ---------- */
#divBarraSuperior{
    background: var(--greenfamily-navy) !important;
}
#divBarraSuperior a:hover,
#divBarraSuperior a:hover i,
#divBarraSuperior a:hover p,
#divBarraSuperior .follow-link:hover{
    color: var(--greenfamily-green) !important;
}

/* ---------- Navbar ---------- */
#mobileMenu{
    background: #ffffff !important;
}
.navbar-brand img{
    width: 190px;
    margin: 12px 0;
}

.navbar-dark .navbar-nav .nav-link{
	color: var(--greenfamily-navy);
	font-size: 15px;
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-item.dropdown:hover > .nav-link{
    color: var(--greenfamily-green) !important;
}
.navbar.navbar-dark .hamburger{
    color: var(--greenfamily-navy);
}
.navbar.navbar-dark .hamburger:hover{
    color: var(--greenfamily-green);
}
.header-nav{
    box-shadow: -2px 2px 45px -20px rgb(0 0 0 / 30%);
}
.buscador-barra{
    border: 1px solid var(--color-primario);
}
.buscador-barra-fila{
    background-color: #ffffff;
}
.badge-cart,
.badge-login{
    line-height: 0px;
}
.dropdown-item{
    font-size: 15px;
}
.footer-logo{
    width: 210px;
}

@media (max-width: 991.98px) {
    #mobileMenu .mobile-menu-panel{
        background: #ffffff;
    }
    #mobileMenu .mobile-menu-header,
#mobileMenu .mobile-menu-header .mobile-menu-title,
#mobileMenu .mobile-menu-header .mobile-menu-back{
        color: var(--greenfamily-navy);
    }
}

/* Botonera del header (Ingreso Clientes + buscar + hamburguesa) alineada */
.navbar-other div{
    display: flex;
    align-items: center;
    gap: 10px;
}
.boton-extranet{
    margin-bottom: 0px !important;
}

/* ---------- Hero ---------- */
.swiper-hero-con-barra,
.swiper-hero-con-barra .swiper-slide{
    height: calc(100vw / 2.6);
}

@media (max-width: 575.98px) {
    .swiper-hero-vertical-con-barra,
.swiper-hero-vertical-con-barra .swiper-slide{
        height: calc(100svh - 110px) !important;
    }
}

/* Velo para que el texto del hero se lea sobre cualquier foto.
   El slide 1 ya es navy a la izquierda: el degradé no lo altera. */
.swiper-hero-con-barra .swiper-overlay{
    background: linear-gradient(90deg, rgba(18, 61, 22, .88) 0%, rgba(18, 61, 22, .62) 42%, rgba(18, 61, 22, 0) 72%);
}
.swiper-hero-vertical-con-barra .swiper-overlay{
    background: linear-gradient(180deg, rgba(18, 61, 22, .90) 0%, rgba(18, 61, 22, .80) 42%, rgba(18, 61, 22, .30) 68%, rgba(18, 61, 22, .55) 100%);
}

/* El sistema no acota el ancho de los componentes de portada (siempre col-12):
   los contenemos a la mitad izquierda para que no se monten sobre la imagen. */
@media (min-width: 992px) {
    .swiper-hero-con-barra .swiper-content .row > div{
        max-width: 52%;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .swiper-hero-con-barra .swiper-content .row > div{
        max-width: 68%;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}
.swiper-hero-con-barra .portada-texto-grande{
    line-height: 1.12;
    margin-bottom: .75rem !important;
}

/* ---------- Botones ---------- */
.btn-primary,
.btn-buy,
.boton-agregar-carrito,
.btn-comprar{
    background: var(--greenfamily-grad) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 500;
    letter-spacing: .01em;
    border-radius: 8px;
    box-shadow: 0 6px 18px -8px rgba(42, 123, 28, .55);
    transition: transform .15s ease, box-shadow .25s ease, filter .2s ease;
}
.btn-primary:hover,
.btn-buy:hover,
.boton-agregar-carrito:hover,
.btn-comprar:hover{
    filter: brightness(1.12);
    box-shadow: 0 8px 24px -6px rgba(42, 123, 28, .5);
    transform: translateY(-1px);
}
.btn-outline-primary{
    border: 1px solid var(--greenfamily-navy) !important;
    color: var(--greenfamily-navy) !important;
    border-radius: 8px;
}

.btn-outline-primary:hover{
	background: var(--greenfamily-grad) !important;
	border-color: transparent !important;
}

/* Botón del hero: verde de marca. El gradiente de .btn-primary es un `background`
   shorthand (incluye background-image) y taparía el background-color del componente. */
.swiper-hero-con-barra .btn-primary,
.swiper-hero-vertical-con-barra .btn-primary{
    padding: .7rem 1.6rem !important;
    font-size: 1rem;
    background: var(--greenfamily-grad-verde) !important;
    box-shadow: 0 8px 22px -8px rgba(94, 158, 30, .75);
}
.swiper-hero-con-barra .btn-primary:hover,
.swiper-hero-vertical-con-barra .btn-primary:hover{
    filter: brightness(1.12);
}

/* ---------- Links ---------- */
a{ color: var(--greenfamily-navy); }
a:hover{ color: var(--greenfamily-green); }

/* ---------- Tarjetas de producto ---------- */

.card{
	transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}

.producto-card,
.card-producto,
.item-producto{
	border-radius: 12px;
	transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}

/* El acordeon de la ficha tambien lleva la clase .card: sin excluirlo, todo el
   bloque de texto se levanta al pasar el mouse. */
.card:not(.accordion):not(.accordion-wrapper):hover,
.producto-card:hover,
.card-producto:hover,
.item-producto:hover{
    transform: translateY(-4px);
    border-color: rgba(94, 158, 30, .55);
    box-shadow: 0 14px 34px -16px rgba(18, 61, 22, .35);
}
.producto-card img,
.card-producto img{
    background: #fff;
    border-radius: 10px;
}
.badge-oferta,
.badge-nuevo,
.etiqueta-producto,
.producto-etiqueta{
    background: linear-gradient(100deg, #497d17 0%, #5e9e1e 100%) !important;
    color: #fff !important;
    font-weight: 500;
    letter-spacing: .02em;
}
.precio,
.producto-precio,
.precio-producto{
    color: var(--greenfamily-navy);
    font-weight: 600;
}
.precio-anterior,
.precio-tachado{
    color: var(--greenfamily-muted);
}

/* ---------- Bloque de categorías ---------- */
#divBloqueCategorias .card-img-top,
#divBloqueCategorias figure{
    background: #ffffff;
}

/* ---------- Franja de beneficios (banners) ---------- */
#divBloqueBanners .uil,
#divBloqueBeneficios .uil{
    color: var(--greenfamily-green);
}

/* ---------- Footer ---------- */
footer,
.pie-pagina,
.footer{
    background: var(--greenfamily-navy-deep) !important;
    color: #cfdcc2;
}
footer a,
.pie-pagina a{ color: #cfdcc2; }
/* Títulos del pie en el color secundario: el theme los pinta con --color-primario
   (navy), que sobre el pie navy queda ilegible. */
footer .footer-titulo,
footer .widget-title,
.pie-pagina .footer-titulo,
.pie-pagina .widget-title{
    color: var(--greenfamily-green) !important;
}
footer a:hover,
footer a:hover i,
footer a:hover span,
.pie-pagina a:hover,
.pie-pagina a:hover i,
.pie-pagina a:hover span{
    color: var(--greenfamily-green) !important;
}

/* ---------- Botones flotantes ---------- */
.boton-whatsapp,
.boton-scroll-top{
    box-shadow: 0 6px 18px -4px rgba(18, 61, 22, .45) !important;
}

/* ---------- Scrollbar y selección ---------- */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--greenfamily-bg-soft); }
::-webkit-scrollbar-thumb{ background: var(--greenfamily-navy); border-radius: 8px; }
::selection{ background: rgba(94, 158, 30, .22); color: var(--greenfamily-text); }

/* ---------- Newsletter ---------- */
/* El theme aplica `.image-wrapper{background: no-repeat center center}` +
   `background-attachment: fixed !important`: sin imagen el card queda claro y el
   texto blanco no se lee. Forzamos el degradé de marca en scroll. */
#divBloqueNewsletter .card,
#divBloqueNewsletter .card.image-wrapper{
    background: var(--greenfamily-grad) !important;
    background-attachment: scroll !important;
    border: none !important;
}
#divBloqueNewsletter .card-body .btn-primary{
    background: var(--greenfamily-grad-verde) !important;
}

/* ---------- Aire del contenido de las secciones con portada propia ----------
   Al sacar la portada del módulo Secciones, el contenedor queda con
   `mt-sm-12 pt-sm-0 pt-6` y el texto se pega al hero. Equivalente a
   `container mt-12 pt-6 pb-6` (mt-12 = 3.5rem · pt-6/pb-6 = 1.5rem). */
#divContenido.seccion-nosotros > .container,
#divContenido.seccion-servicios > .container{
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

#divContenido.seccion-nosotros > .container{
    margin-top: 3.5rem !important;
}

/* Servicios trae la portada mas alta: menos margen para no separarla del contenido. */
#divContenido.seccion-servicios > .container{
    margin-top: 1.5rem !important;
}

/* Contacto: aire arriba y abajo del teléfono grande, que traía el contenido pegado */
#divContenido.seccion-contacto > .container{
    padding-top: 3rem !important;
    padding-bottom: 2rem !important;
}
#divContenido.seccion-contacto .enlace-telefono-seccion{
    margin-top: .5rem;
    margin-bottom: 3.5rem !important;
}
#divContenido.seccion-contacto .div-texto-seccion{
    row-gap: 0 !important;
}

/* ---------- Quiénes somos ---------- */
/* Línea de tiempo (bloque modelo 17): el título de cada hito ya es el año, así que
   la etiqueta "Paso N" que agrega el bloque sobra. */
#divBloqueNuestrahistoria .bloque-timeline-etiqueta{
    display: none;
}
#divBloqueNuestrahistoria .bloque-timeline-item h3{
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: 1.9rem !important;
    font-weight: 700;
    color: var(--greenfamily-navy);
    line-height: 1;
}
#divBloqueNuestrahistoria .bloque-timeline-item h4{
    color: var(--greenfamily-green) !important;
    font-weight: 600;
    margin-bottom: .5rem !important;
}
#divBloqueNuestrahistoria .bloque-timeline-imagen{
    max-width: 100%;
}

.bloque-timeline{
    position: relative;
    padding-left: 35px;
}

/* Valores: tarjetas parejas con su ícono arriba */
#divBloqueNuestrosvalores .row > div{
    margin-bottom: 2rem;
}
#divBloqueNuestrosvalores .row > div > h3,
#divBloqueNuestrosvalores .row > div > h4{
    color: var(--greenfamily-navy);
    font-size: 1.15rem !important;
    margin-bottom: .5rem;
}
/* Ícono de los ítems de bloque (modelo 5): círculo verde suave, en cualquier bloque */
.bloque-item-icono{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(94, 158, 30, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .85rem;
}
.bloque-item-icono .uil{
    font-size: 1.6rem;
    color: var(--greenfamily-green);
    line-height: 1;
}

/* Visión / Calidad / Hogar Peques: filas alternadas texto+imagen */
#divBloqueCompromisoGreen Family figure img{
    border-radius: 12px;
    box-shadow: 0 18px 44px -24px rgba(18, 61, 22, .55);
}
#divBloqueCompromisoGreen Family h4{
    color: var(--greenfamily-green) !important;
}

/* ---------- Secciones institucionales ---------- */

/* ============================================================
   Contraste en paneles oscuros (carrito + autocomplete del buscador).
   Patrón tomado de 3dproductos: mismos componentes sobre --color-secundario.
   ============================================================ */

#carritoMenu .text-white,
#carritoMenu p{
    color: #ffffff !important;
}

#carritoMenu h1,
#carritoMenu h2,
#carritoMenu .link-light{
	color: #ffffff !important;
}

#carritoMenu i,
#favoritosMenu i{
    color: #ffffff;
}
#carritoMenu .amount,
#carritoMenu ins{
    color: var(--greenfamily-green) !important;
}

#carritoMenu del{
	color: #a9bb9c !important;
}

.number-picker-cart .input-group input{
    color: #ffffff !important;
}
.div-buscar-header .text-muted,
#divSugerenciasBuscar .text-muted{
    color: #a9bb9c !important;
}
#divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]){
    border-color: #ffffff;
    background-color: var(--color-secundario);
    color: #ffffff;
}
#divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]):hover{
    border-color: var(--greenfamily-green) !important;
    color: var(--greenfamily-green) !important;
}
#divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]):has(input:checked){
    border-color: var(--greenfamily-green) !important;
    background-color: var(--greenfamily-green) !important;
    color: #ffffff !important;
}
.div-buscar-header .picker label[for*=radVariante] > span{
    color: #ffffff;
    padding: .3rem;
}
.div-buscar-header .picker label[for*=radVariante] > input:checked ~ span{
    background-color: var(--greenfamily-green);
    color: #ffffff;
}

/* ===== Estilos > Componentes ===== */

/* ---------- Menú ---------- */

/* menu|enlaces_peso|normal|opcion|500 */
html body .navbar .nav-link:not(#\9):not(#\9),
html body .navbar-dark .navbar-nav .nav-link:not(#\9):not(#\9){
	font-weight: 500 !important;
}

@media (min-width: 992px) {
/* menu|alto_enlaces|normal|medida|1rem */
html body .navbar-expand-lg[class*=navbar-bg-]:not(.fancy):not(.extended):not(.fixed) .navbar-collapse .nav-link:not(#\9):not(#\9){
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
}
}

/* ---------- Logos ---------- */

/* logos|menu_mobile|normal|medida|170px */
html body .logo-menu-mobile:not(#\9):not(#\9){
	width: 170px !important;
}

/* logos|nosotros|normal|medida|230px */
html body .img-logo-nosotros:not(#\9):not(#\9){
	width: 230px !important;
}

/* logos|contacto|normal|medida|230px */
html body .img-logo-contacto:not(#\9):not(#\9){
	width: 230px !important;
}

/* ---------- Barra superior ---------- */

/* barra_superior|texto|normal|otro|#ffffff */
html body #divBarraSuperior:not(#\9):not(#\9),
html body #divBarraSuperior p:not(#\9):not(#\9),
html body #divBarraSuperior span:not(#\9):not(#\9),
html body #divBarraSuperior .p-seguinos:not(#\9):not(#\9){
	color: #ffffff !important;
	-webkit-text-fill-color: currentColor !important;
	transition-property: color, background-color, border-color, -webkit-text-fill-color;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

/* barra_superior|redes|normal|otro|#ffffff */
html body #divBarraSuperior .follow-link:not(#\9):not(#\9),
html body #divBarraSuperior .follow-link i:not(#\9):not(#\9){
	color: #ffffff !important;
	-webkit-text-fill-color: currentColor !important;
	transition-property: color, background-color, border-color, -webkit-text-fill-color;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

/* ---------- Carrito ---------- */

/* carrito|titulo_panel|normal|otro|#ffffff */
html body #carritoMenu .offcanvas-header h3:not(#\9):not(#\9),
html body #carritoMenu h3:not(#\9):not(#\9){
	color: #ffffff !important;
	-webkit-text-fill-color: currentColor !important;
	transition-property: color, background-color, border-color, -webkit-text-fill-color;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

/* carrito|texto|normal|otro|#1d2a1c */
html body #carritoMenu:not(#\9):not(#\9),
html body #carritoMenu p:not(#\9):not(#\9),
html body #carritoMenu span:not(#\9):not(#\9),
html body #carritoMenu .text-white:not(#\9):not(#\9),
html body #carritoMenu .link-light:not(#\9):not(#\9){
	color: #1d2a1c !important;
	-webkit-text-fill-color: currentColor !important;
	transition-property: color, background-color, border-color, -webkit-text-fill-color;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

/* carrito|variante|normal|otro|#ffffff */
html body #carritoMenu .variante-light:not(#\9):not(#\9),
html body #carritoMenu .variante-dark:not(#\9):not(#\9),
html body #carritoMenu .shopping-cart small:not(#\9):not(#\9){
	color: #ffffff !important;
	-webkit-text-fill-color: currentColor !important;
	transition-property: color, background-color, border-color, -webkit-text-fill-color;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

/* carrito|precio_tachado|normal|otro|#a9bb9c */
html body #carritoMenu del:not(#\9):not(#\9),
html body #carritoMenu del span:not(#\9):not(#\9){
	color: #a9bb9c !important;
	-webkit-text-fill-color: currentColor !important;
	transition-property: color, background-color, border-color, -webkit-text-fill-color;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

/* ---------- Buscador ---------- */

/* buscador|enlaces|normal|otro|#ffffff */
html body #divSugerenciasBuscar a:not(.btn):not(#\9):not(#\9),
html body .buscador-resultados a:not(.btn):not(#\9):not(#\9),
html body .div-buscar-header .link-dark:not(.btn):not(#\9):not(#\9){
	color: #ffffff !important;
	-webkit-text-fill-color: currentColor !important;
	transition-property: color, background-color, border-color, -webkit-text-fill-color;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

/* ---------- Botones ---------- */

/* botones|contorno_texto|hover|otro|#fff */
html body .btn-outline-primary:hover:not(#\9):not(#\9){
	color: #fff !important;
	-webkit-text-fill-color: currentColor !important;
	transition-property: color, background-color, border-color, -webkit-text-fill-color;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

/* ---------- Tarjetas ---------- */

/* tarjetas|redondeo|normal|medida|12px */
html body .card:not(#\9):not(#\9){
	border-radius: 12px !important;
}

/* ---------- Texto del sitio ---------- */

/* texto|fondo|normal|otro|#f6f7f3 */
html body:not(#\9):not(#\9){
	background-color: #f6f7f3 !important;
	transition-property: color, background-color, border-color, -webkit-text-fill-color;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

/* ===== fin Estilos > Componentes ===== */

/* Subrayado de los enlaces del menu: una linea de fondo anclada a la caja del
   texto (background-origin: content-box), asi queda pegada y del ancho del
   texto aunque el nav-link tenga padding distinto a cada lado y por breakpoint
   (un pseudo-elemento con left/bottom fijos se corria). Al pasar el mouse crece
   de izquierda a derecha, y al salir se recoge de derecha a izquierda.
   Solo los enlaces del menu: los iconos de la derecha no llevan subrayado. */
.navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link{
    --linea-menu: var(--greenfamily-green);
    text-decoration: none;
    background-image: linear-gradient(var(--linea-menu), var(--linea-menu));
    background-repeat: no-repeat;
    background-origin: content-box;
    background-clip: padding-box;
    background-position: 0 calc(100% + 3px);
    background-size: 0 2px;
    transition: background-size .35s cubic-bezier(.22, 1, .36, 1), color 0.2s ease;
}

.navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link:hover,
.navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link.active{
    background-size: 100% 2px;
}

/* Catalogo es el unico con desplegable: su flecha (un glifo de Unicons, 17px y
   1px de margen) queda fuera de la linea, y su alto de linea (28.9px contra los
   25.5px del menu) estiraba la fila y bajaba el texto respecto de los demas. */
.navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link.dropdown-toggle:hover,
.navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link.dropdown-toggle.active{
    background-size: calc(100% - 18px) 2px;
}

.navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link.dropdown-toggle::after{
    line-height: 1;
}

.navbar.navbar-bg-color-secundario .navbar-other .nav-link,
.navbar.navbar-bg-color-secundario .navbar-other .nav-link:hover{
    text-decoration: none !important;
}

/* Buscador e inicio de sesion se apagan por parametro (MENU_MOSTRAR_BUSCAR y
   MENU_MOSTRAR_SESION en 0): son de la tienda, no del institucional. */

/* ====== FOOTER DE LAS INTERNAS CON EL LENGUAJE DE LA LANDING ====== */
footer.text-inverse{
    background: #0b2510 !important;
}

footer.text-inverse .footer-logo{
    height: 5rem;
    width: auto;
}

footer.text-inverse .footer-titulo{
    color: #e6e8e2 !important;
    font-weight: 700;
    font-size: 1rem;
}

footer.text-inverse a,
footer.text-inverse p,
footer.text-inverse li{
    color: rgba(230, 232, 226, 0.75);
}

footer.text-inverse a:hover{
    color: var(--greenfamily-green) !important;
}

footer.text-inverse .footer-hr{
    border-color: rgba(230, 232, 226, 0.15);
    opacity: 1;
}

/* =============================================================
   HOME INSTITUCIONAL
   -------------------------------------------------------------
   La home es 100% autoadministrable: cada seccion es un bloque del
   sistema y todo el contenido se edita desde el admin. El diseno
   vive aca, enganchado al id que `bloques.php` le da a cada seccion
   (`divBloque` + el nombre del bloque sin espacios).

   REGLA: si se renombra un bloque en el admin, cambia su id y estas
   reglas dejan de aplicar. Los nombres son parte del diseno.

   Convencion de los encabezados (vale para los modelos 3 y 5):
     blq_subtitulo  -> volanta  (el CSS la sube arriba del titulo)
     blq_titulo     -> titular
     blq_descripcion -> bajada
   ============================================================= */

body:has(#divBloqueCredenciales){
    --in-navy: #2a7b1c;
    --in-navy-deep: #123d16;
    --in-green: #5e9e1e;
    --in-green-claro: #b7d94a;
    --in-ink: #0e2f12;
    --in-gris: #5d6b55;
    --in-fondo: #f5f7f1;
    --in-linea: #e6ece0;
    --in-linea-oscura: rgba(255, 255, 255, .14);
}

/* ---- Ritmo vertical y ancho comun de todas las secciones de la home ---- */
/* OJO: el theme pega las secciones consecutivas de la home con
   `section.wrapper:not(#divPortadas) + section.wrapper { padding-top: 0 !important }`.
   Ese :not(#id) cuenta como un ID, asi que hace falta el prefijo del body
   (segundo ID) para ganarle. Cada cambio de color de fondo lleva aire arriba. */
body:has(#divBloqueCredenciales) #divBloqueEnfoque,
body:has(#divBloqueCredenciales) #divBloqueCiclo,
body:has(#divBloqueCredenciales) #divBloqueValores,
body:has(#divBloqueCredenciales) #divBloqueCalidad,
body:has(#divBloqueCredenciales) #divBloqueCatalogo,
body:has(#divBloqueCredenciales) #divBloqueCierre{
    padding: 104px 0 !important;
}

body:has(#divBloqueCredenciales) #divBloqueEnfoque,
body:has(#divBloqueCredenciales) #divBloqueValores,
body:has(#divBloqueCredenciales) #divBloqueCatalogo{
    background: #ffffff !important;
}

#divBloqueEnfoque > .container,
#divBloqueCiclo > .container,
#divBloqueValores > .container,
#divBloqueCalidad > .container,
#divBloqueCatalogo > .container,
#divBloqueCierre > .container{
    max-width: 1240px;
    padding-left: 32px;
    padding-right: 32px;
}

/* Alternancia de fondos: gris en las pares, navy en Sectores. */
/* Sin Compromiso en la home, Catalogo pasa a blanco para no repetir el gris
   de Calidad dos veces seguidas. */
body:has(#divBloqueCredenciales) #divBloqueCiclo,
body:has(#divBloqueCredenciales) #divBloqueCalidad{
    background: var(--in-fondo) !important;
}

/* ============================ ENCABEZADOS ============================ */
/* El theme los centra y pone la volanta debajo del titulo. Aca van a la
   izquierda, en dos columnas, y la volanta sube arriba de todo. */
#divBloqueEnfoque .row.text-center > .col-12,
#divBloqueCiclo .row.text-center > .col-12,
#divBloqueValores .row.text-center > .col-12,
#divBloqueCalidad .row.text-center > .col-12,
#divBloqueCatalogo .row.text-center > .col-12,
#divBloqueCierre .row.text-center > .col-12{
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-column-gap: 80px;
    align-items: end;
    text-align: left;
}

/* La volanta (subtitulo del bloque) */
#divBloqueEnfoque .lead,
#divBloqueCiclo .lead,
#divBloqueValores .lead,
#divBloqueCalidad .lead,
#divBloqueCatalogo .lead,
#divBloqueCierre .lead{
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: 15px !important;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--in-green);
    margin: 0 0 16px 0 !important;
    line-height: 1.3;
}

/* La linea corta que antecede a la volanta */
#divBloqueEnfoque .lead::before,
#divBloqueCiclo .lead::before,
#divBloqueCalidad .lead::before,
#divBloqueCatalogo .lead::before,
#divBloqueCierre .lead::before{
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
    flex: 0 0 auto;
    border-radius: 2px;
}

/* El titular */
#divBloqueEnfoque .display-4,
#divBloqueCiclo .display-4,
#divBloqueValores .display-4,
#divBloqueCalidad .display-4,
#divBloqueCatalogo .display-4,
#divBloqueCierre .display-4{
    grid-column: 1;
    grid-row: 2;
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: clamp(30px, 3.4vw, 46px) !important;
    font-weight: 800;
    letter-spacing: -.022em;
    line-height: 1.08;
    color: var(--in-navy);
    margin: 0 !important;
}

/* La bajada (descripcion del bloque), a la derecha del titular */
#divBloqueEnfoque .row.text-center > .col-12 > p:not(.lead),
#divBloqueCiclo .row.text-center > .col-12 > p:not(.lead),
#divBloqueValores .row.text-center > .col-12 > p:not(.lead),
#divBloqueCalidad .row.text-center > .col-12 > p:not(.lead),
#divBloqueCatalogo .row.text-center > .col-12 > p:not(.lead),
#divBloqueCierre .row.text-center > .col-12 > p:not(.lead){
    grid-column: 2;
    grid-row: 2;
    font-size: 16px;
    color: var(--in-gris);
    margin: 0 0 8px 0;
    line-height: 1.65;
}

/* ====================== MODELO 3: TEXTO + FOTO ====================== */
#divBloqueEnfoque .row.gx-lg-0,
#divBloqueCalidad .row.gx-lg-0,
#divBloqueCatalogo .row.gx-lg-0{
    margin-top: 56px !important;
    margin-bottom: 0 !important;
    align-items: center !important;
    --bs-gutter-y: 44px;
}

/* El theme empuja las columnas con mt-lg-8 / mt-lg-15: se anula solo en
   desktop, donde van lado a lado. En mobile (apiladas) el margen es el aire
   entre la foto y el texto. */
@media (min-width: 992px) {
    #divBloqueEnfoque .row.gx-lg-0 > div,
#divBloqueCalidad .row.gx-lg-0 > div,
#divBloqueCatalogo .row.gx-lg-0 > div{
        margin-top: 0 !important;
    }
}

@media (max-width: 991.98px) {
    #divBloqueEnfoque .row.gx-lg-0,
#divBloqueCalidad .row.gx-lg-0,
#divBloqueCatalogo .row.gx-lg-0{
        margin-top: 28px !important;
    }
    #divBloqueEnfoque .row.gx-lg-0 > div:first-child,
#divBloqueCalidad .row.gx-lg-0 > div:first-child,
#divBloqueCatalogo .row.gx-lg-0 > div:first-child{
        margin-top: 0 !important;
    }
    #divBloqueEnfoque .row.gx-lg-0 > div + div,
#divBloqueCalidad .row.gx-lg-0 > div + div,
#divBloqueCatalogo .row.gx-lg-0 > div + div{
        margin-top: 32px !important;
    }
}

#divBloqueEnfoque figure.rounded,
#divBloqueCalidad figure.rounded,
#divBloqueCatalogo figure.rounded{
    margin: 0;
}

#divBloqueEnfoque figure.rounded img,
#divBloqueCalidad figure.rounded img,
#divBloqueCatalogo figure.rounded img{
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
}

/* La columna de texto del modelo 3 */
#divBloqueEnfoque .row.gx-lg-0 .display-5,
#divBloqueCalidad .row.gx-lg-0 .display-5,
#divBloqueCatalogo .row.gx-lg-0 .display-5{
    display: none; /* el titular ya esta en el encabezado del bloque */
}

#divBloqueEnfoque .row.gx-lg-0 p,
#divBloqueCalidad .row.gx-lg-0 p,
#divBloqueCatalogo .row.gx-lg-0 p{
    font-size: 16px;
    color: var(--in-gris);
    line-height: 1.7;
}

/* Lista de puntos dentro de la descripcion */
.bloque-puntos{
    list-style: none;
    padding: 0;
    margin: 0;
}

.bloque-puntos li{
    position: relative;
    display: block !important;
    padding: 15px 0 15px 30px !important;
    margin: 0 !important;
    border-top: 1px solid var(--in-linea);
    font-size: 15px;
    color: var(--in-ink);
    line-height: 1.6;
}

/* El tilde lo agrega estilizarTextoHTML (<span><i class="uil uil-check">).
   El theme lo dibuja como burbuja gris absoluta (.icon-list.bullet-bg i):
   aca va suelto, en verde, anclado a la izquierda del texto. */
.bloque-puntos li > span:first-child{
    position: absolute !important;
    left: 0;
    top: 17px;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bloque-puntos li > span:first-child i{
    position: static !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    top: auto !important;
    background: none !important;
    border-radius: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: var(--in-green) !important;
}

.bloque-puntos li:last-child{
    border-bottom: 0;
}

.bloque-puntos li strong{
    color: var(--in-navy);
    font-weight: 600;
}

/* Botones de los componentes */
#divBloqueEnfoque .btn-primary,
#divBloqueCatalogo .btn-primary,
#divBloqueCierre .btn-primary{
    background: var(--in-green) !important;
    border-color: var(--in-green) !important;
    border-radius: 6px !important;
    height: 52px;
    padding: 0 28px !important;
    display: inline-flex !important;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 10px 24px -12px rgba(94, 158, 30, .8);
    margin-top: 30px !important;
}

#divBloqueEnfoque .btn-primary:hover,
#divBloqueCatalogo .btn-primary:hover,
#divBloqueCierre .btn-primary:hover{
    background: #497d17 !important;
    border-color: #497d17 !important;
    filter: none !important;
    box-shadow: 0 10px 24px -12px rgba(94, 158, 30, .8) !important;
    transform: translateY(-2px);
}

/* ================= MODELO 5: GRILLAS DE COMPONENTES ================= */
#divBloqueCiclo .pricing-wrapper > .row,
#divBloqueCierre .pricing-wrapper > .row{
    margin-top: 54px !important;
}

/* Cada item es una grilla: icono y titulo en la misma fila, descripcion abajo
   a todo el ancho. */
#divBloqueCiclo .pricing-wrapper > .row > div{
    display: grid;
    grid-template-columns: 46px 1fr;
    grid-column-gap: 14px;
    align-items: center;
    align-content: start;
}

#divBloqueCiclo .pricing-wrapper > .row > div > *{
    grid-column: 1 / -1;
}

/* El circulo del icono que emite el modelo 5 */
#divBloqueCiclo .bloque-item-icono,
#divBloqueCierre .bloque-item-icono{
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(94, 158, 30, .1);
    margin: 0;
}

#divBloqueCiclo .pricing-wrapper > .row > div > .bloque-item-icono{
    grid-column: 1;
}

#divBloqueCiclo .pricing-wrapper > .row > div > .bloque-item-icono + h4{
    grid-column: 2;
    margin: 0 !important;
}

#divBloqueCiclo .pricing-wrapper > .row > div > p{
    margin-top: 14px !important;
}

#divBloqueCiclo .bloque-item-icono i,
#divBloqueCierre .bloque-item-icono i{
    font-size: 23px;
    color: var(--in-green);
    line-height: 1;
}

#divBloqueCiclo h4,
#divBloqueCierre h4{
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: 18px !important;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--in-navy);
    margin: 0 0 10px 0 !important;
}

#divBloqueCiclo p,
#divBloqueCierre p{
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--in-gris);
    margin: 0;
}

/* ------- Metodologia: linea de proceso con los pasos numerados ------- */
#divBloqueCiclo .pricing-wrapper > .row{
    border-top: 2px solid var(--in-navy);
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

#divBloqueCiclo .pricing-wrapper > .row > div{
    width: auto !important;
    max-width: none !important;
}

#divBloqueCiclo .pricing-wrapper > .row > div{
    position: relative;
    padding: 30px 26px 34px 26px;
}

#divBloqueCiclo .pricing-wrapper > .row > div:first-child{
    padding-left: 0;
}

/* El punto sobre la linea marca el avance del proceso */
#divBloqueCiclo .pricing-wrapper > .row > div::before{
    content: "";
    position: absolute;
    top: -6px;
    left: 26px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--in-navy);
}

#divBloqueCiclo .pricing-wrapper > .row > div:first-child::before{
    left: 0;
}

/* El numero del paso viaja en el subtitulo del componente (.meta) */
#divBloqueCiclo .meta{
    font-family: "Raleway", sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--in-green);
    margin: 0 0 12px 0 !important;
    order: -1;
}

#divBloqueCiclo .meta{
    grid-column: 1 / -1;
    grid-row: 1;
}

#divBloqueCiclo .pricing-wrapper > .row > div{
    grid-template-columns: 38px 1fr;
}

#divBloqueCiclo .bloque-item-icono{
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

#divBloqueCiclo .bloque-item-icono i{
    font-size: 19px;
}

/* ------------------ Cierre: CTA + datos de contacto ------------------ */
body:has(#divBloqueCredenciales) #divBloqueCierre{
    padding: 96px 0 !important;
}

#divBloqueCierre .display-4,
#divBloqueCierre h4{
    color: #ffffff;
}

#divBloqueCierre .lead{
    color: rgba(255, 255, 255, .75);
}

#divBloqueCierre .row.text-center > .col-12 > p:not(.lead){
    color: rgba(255, 255, 255, .85);
}

#divBloqueCierre p{
    color: rgba(255, 255, 255, .78);
}

#divBloqueCierre .bloque-item-icono{
    background: rgba(255, 255, 255, .14);
}

#divBloqueCierre .bloque-item-icono i{
    color: #ffffff;
}

/* Los datos de contacto como una fila de fichas con filete */
#divBloqueCierre .pricing-wrapper > .row{
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    gap: 1px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .22);
    margin-top: 48px !important;
}

#divBloqueCierre .pricing-wrapper > .row > div{
    width: auto !important;
    max-width: none !important;
    background: rgba(18, 61, 22, .28);
    padding: 26px 24px 30px !important;
}

#divBloqueCierre h4{
    font-size: 12px !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255, 255, 255, .62);
    margin-bottom: 6px !important;
}

#divBloqueCierre .row.text-center > .col-12 > p:not(.lead){
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, .85);
}

/* Los dos botones del CTA viven en la descripcion del bloque */
#divBloqueCierre .row.text-center > .col-12 > p:has(.btn){
    grid-column: 1;
    grid-row: 3;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 30px;
}

#divBloqueCierre .btn-outline-primary{
    border-radius: 6px !important;
    height: 52px;
    padding: 0 28px !important;
    display: inline-flex !important;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    background: transparent !important;
    border-color: rgba(255, 255, 255, .5) !important;
    color: #ffffff !important;
    margin-top: 30px !important;
}

#divBloqueCierre .btn-outline-primary:hover{
    background: rgba(255, 255, 255, .12) !important;
    border-color: #ffffff !important;
}

/* ============= CREDENCIALES: la franja de datos del hero ============= */
/* Cuatro fichas con el icono grande a la izquierda y el dato a la derecha,
   separadas por filete, sobre un navy con un filo verde arriba. */
body:has(#divBloqueCredenciales) #divBloqueCredenciales{
    border-top: 3px solid var(--in-green);
    padding: 0 !important;
    position: relative;
    z-index: 3;
}

#divBloqueCredenciales > .container{
    max-width: 1240px;
    padding: 0 32px !important;
}

/* Cuatro columnas fijas con filete: no es un carrusel, es una franja. */
#divBloqueCredenciales .swiper-wrapper{
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    transform: none !important;
}

#divBloqueCredenciales .swiper-slide,
#divBloqueCredenciales .swiper-slide > div{
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

#divBloqueCredenciales .swiper-slide{
    /* Swiper le clava width y margin-right inline a cada slide. */
    width: 100% !important;
    margin: 0 !important;
    justify-self: stretch;
    display: grid !important;
    grid-template-columns: 56px 1fr;
    grid-column-gap: 18px;
    align-items: start;
    padding: 34px 28px 34px 0;
    border-right: 1px solid var(--in-linea-oscura);
}

#divBloqueCredenciales .swiper-slide:not(:first-child){
    padding-left: 28px;
}

#divBloqueCredenciales .swiper-slide:last-child{
    border-right: 0;
}

#divBloqueCredenciales .banner-icon{
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(183, 217, 74, .12);
    border: 1px solid rgba(183, 217, 74, .28);
    font-size: 26px;
    color: var(--in-green-claro);
    margin: 0;
    line-height: 1;
}

#divBloqueCredenciales h4{
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: 27px !important;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -.02em;
    line-height: 1.05;
    margin: 4px 0 6px 0 !important;
}

#divBloqueCredenciales p{
    font-size: 13.5px !important;
    color: rgba(255, 255, 255, .64);
    line-height: 1.5;
    margin: 0 !important;
}

/* El swiper del theme trae paginacion y flechas: en una franja sobran. */
#divBloqueCredenciales .swiper-pagination,
#divBloqueCredenciales .swiper-navigation,
#divBloqueCredenciales .swiper-button-prev,
#divBloqueCredenciales .swiper-button-next{
    display: none !important;
}

/* ========================= HERO (Portadas) ========================= */
/* Los botones del hero son los mismos que los del cierre: el primero verde
   solido, el segundo en linea blanca. El custom heredado de la tienda les
   ponia degrade y sombra verde (.swiper-hero-con-barra .btn-primary): se pisa. */
body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .btn.rounded-pill{
    border-radius: 6px !important;
    height: 52px;
    padding: 0 28px !important;
    display: inline-flex !important;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    margin-right: 14px;
    background-image: none !important;
    background-color: var(--in-green) !important;
    border: 1px solid var(--in-green) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px -12px rgba(94, 158, 30, .8) !important;
    filter: none !important;
    transform: none;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .btn.rounded-pill:hover{
    background-color: #497d17 !important;
    border-color: #497d17 !important;
    filter: none !important;
    transform: translateY(-2px);
}

/* El segundo boton de cada slide va en linea, sin relleno ni sombra. */
body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .btn.rounded-pill + .btn.rounded-pill{
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, .5) !important;
    box-shadow: none !important;
}

body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .btn.rounded-pill + .btn.rounded-pill:hover{
    background-color: rgba(255, 255, 255, .12) !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
    transform: none;
}

/* Tamanos de los tres textos de la portada. */
body:has(#divBloqueCredenciales) .swiper-hero .portada-texto-pequeno{
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .8;
    margin-bottom: 18px !important;
}

body:has(#divBloqueCredenciales) .swiper-hero .portada-texto-grande{
    font-family: "Raleway", "Poppins", sans-serif !important;
    font-size: clamp(38px, 4.9vw, 66px) !important;
    font-weight: 800 !important;
    letter-spacing: -.022em;
    line-height: 1.04 !important;
    margin-bottom: 22px !important;
}

body:has(#divBloqueCredenciales) .swiper-hero .portada-texto-normal{
    font-size: 18px !important;
    line-height: 1.6 !important;
    margin-bottom: 8px !important;
}

/* El contenido del hero se alinea a la izquierda (el theme lo centra). */
body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .col-12{
    text-align: left !important;
    margin-left: 0 !important;
}
body:has(#divBloqueCredenciales) .swiper-hero,
body:has(#divBloqueCredenciales) .swiper-hero .swiper,
body:has(#divBloqueCredenciales) .swiper-hero .swiper-slide{
    min-height: 100vh;
    min-height: 100svh;
}

body:has(#divBloqueCredenciales) .swiper-hero .swiper-content{
    max-width: 1240px;
    padding-left: 32px;
    padding-right: 32px;
    /* La barra va montada sobre la foto: el contenido arranca debajo. */
    padding-top: 96px;
}

/* El texto del hero ocupa media pantalla: del otro lado se ve la foto. */
body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .row > div{
    max-width: 56%;
    padding-bottom: 84px;
}

/* Los componentes de la portada, en orden: volanta, titular, bajada. */
body:has(#divBloqueCredenciales) .swiper-hero .swiper-content h1,
body:has(#divBloqueCredenciales) .swiper-hero .swiper-content h2{
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: clamp(38px, 5vw, 68px) !important;
    font-weight: 800 !important;
    letter-spacing: -.022em;
    line-height: 1.03 !important;
    margin-bottom: 24px !important;
}

@media (max-width: 991.98px) {
    body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .row > div{
        max-width: 100%;
        padding-bottom: 40px;
    }
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1199.98px) {
    #divBloqueCiclo .pricing-wrapper > .row{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991.98px) {
    body:has(#divBloqueCredenciales) #divBloqueEnfoque,
body:has(#divBloqueCredenciales) #divBloqueCiclo,
body:has(#divBloqueCredenciales) #divBloqueValores,
body:has(#divBloqueCredenciales) #divBloqueCalidad,
body:has(#divBloqueCredenciales) #divBloqueCatalogo,
body:has(#divBloqueCredenciales) #divBloqueCierre{
        padding: 64px 0 !important;
    }

    #divBloqueEnfoque > .container,
#divBloqueCiclo > .container,
#divBloqueValores > .container,
#divBloqueCalidad > .container,
#divBloqueCatalogo > .container,
#divBloqueCierre > .container{
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Encabezados a una columna */
    #divBloqueEnfoque .row.text-center > .col-12,
#divBloqueCiclo .row.text-center > .col-12,
#divBloqueValores .row.text-center > .col-12,
#divBloqueCalidad .row.text-center > .col-12,
#divBloqueCatalogo .row.text-center > .col-12,
#divBloqueCierre .row.text-center > .col-12{
        grid-template-columns: 1fr;
    }

    #divBloqueEnfoque .row.text-center > .col-12 > p:not(.lead),
#divBloqueCiclo .row.text-center > .col-12 > p:not(.lead),
#divBloqueValores .row.text-center > .col-12 > p:not(.lead),
#divBloqueCalidad .row.text-center > .col-12 > p:not(.lead),
#divBloqueCatalogo .row.text-center > .col-12 > p:not(.lead),
#divBloqueCierre .row.text-center > .col-12 > p:not(.lead){
        grid-column: 1;
        grid-row: 3;
        margin-top: 20px;
    }

    #divBloqueCierre .row.text-center > .col-12 > p:has(.btn){
        grid-row: 4;
        margin-top: 10px;
    }

    #divBloqueCredenciales{
        margin-top: 0;
    }

    #divBloqueCredenciales .swiper-wrapper{
        grid-template-columns: repeat(2, 1fr);
    }

    #divBloqueCredenciales .swiper-slide:nth-child(2n){
        border-right: 0;
    }

    #divBloqueCredenciales .swiper-slide{
        border-bottom: 1px solid var(--in-linea-oscura);
    }

    #divBloqueCredenciales .swiper-slide:nth-child(n+3){
        border-bottom: 0;
    }

    /* Fotos apaisadas cuando el bloque se apila a una columna */
    #divBloqueEnfoque figure.rounded img,
#divBloqueCalidad figure.rounded img,
#divBloqueCatalogo figure.rounded img{
        aspect-ratio: 3 / 2;
    }
}

@media (max-width: 767.98px) {
    #divBloqueCiclo .pricing-wrapper > .row{
        grid-template-columns: 1fr;
        border-top: 0;
    }
    #divBloqueCiclo .pricing-wrapper > .row > div,
#divBloqueCiclo .pricing-wrapper > .row > div:first-child{
        border-right: 0;
        border-bottom: 1px solid var(--in-linea);
        padding: 26px 0 26px 26px;
    }

    #divBloqueCiclo .pricing-wrapper > .row > div::before,
#divBloqueCiclo .pricing-wrapper > .row > div:first-child::before{
        left: 0;
        top: 32px;
    }
    #divBloqueCiclo .pricing-wrapper > .row > div:last-child{
        border-bottom: 0;
    }

    #divBloqueCierre .pricing-wrapper > .row,
#divBloqueCredenciales .swiper-wrapper{
        grid-template-columns: 1fr;
    }

    #divBloqueCredenciales .swiper-slide,
#divBloqueCredenciales .swiper-slide:nth-child(n+3){
        border-right: 0 !important;
        border-bottom: 1px solid var(--in-linea-oscura);
        padding-left: 0 !important;
        padding-top: 22px;
        padding-bottom: 22px;
    }
    #divBloqueCredenciales .swiper-slide:last-child{
        border-bottom: 0;
    }
}

/* =============================================================
   HEADER Y FOOTER DEL THEME EN CLAVE INSTITUCIONAL
   ============================================================= */

/* ---- Colores y medidas del menu flotante (MENU_ESTILO = flotante) ----
   El comportamiento (pastilla fija, blur, despliegue en el lugar, variante
   sobre portada) es del sistema: assets/css/menu-flotante.css. Aca solo la
   paleta de Green Family. */
:root{
    --mf-top: 20px;
    --mf-ancho: 1400px;
    --mf-radio: 1rem;
    --mf-blur: 32px;
    --mf-sombra: 0 20px 40px -12px rgba(18, 61, 22, .18);

    --mf-fondo: rgba(255, 255, 255, .78);
    --mf-borde: rgba(18, 61, 22, .08);
    --mf-texto: #2a7b1c;
    --mf-texto-hover: #5e9e1e;

    --mf-fondo-portada: rgba(18, 61, 22, .22);
    --mf-borde-portada: rgba(255, 255, 255, .16);
    --mf-texto-portada: #ffffff;
    --mf-texto-hover-portada: #b7d94a;
}

/* Sobre la foto el logo va en su version blanca. */
.navbar.navbar-flotante.navbar-flotante-sobre-portada .navbar-brand img{
    content: url('../../../img/greenfamily2/logo-white.png');
}

/* El subrayado de los enlaces acompana el color de cada variante. */
.navbar.navbar-flotante.navbar-flotante-sobre-portada .navbar-collapse .navbar-nav > .nav-item > .nav-link{
    --linea-menu: #b7d94a;
}

/* La hamburguesa se pinta con el color de la variante (el custom heredado la
   fijaba en navy). */
.navbar.navbar-flotante .hamburger span,
.navbar.navbar-flotante .hamburger:before,
.navbar.navbar-flotante .hamburger:after{
    background-color: currentColor !important;
}

/* ---- Tipografia y medidas del navbar (vale para todo el sitio) ---- */
.navbar.navbar-bg-color-secundario .navbar-nav .nav-link{
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .002em;
}

.navbar.navbar-bg-color-secundario .navbar-brand img{
    height: 45px !important;
    width: auto !important;
    max-height: none;
    padding: 5px 10px 5px 0px !important;
}

.navbar.navbar-bg-color-secundario li.login .nav-link i,
.navbar.navbar-bg-color-secundario li.logout .nav-link i,
.navbar.navbar-bg-color-secundario .navbar-other i{
    font-size: 21px !important;
    line-height: 1;
}

.navbar.navbar-bg-color-secundario .badge-login{
    font-size: 10px !important;
}

/* ---- FOOTER ----
   El pie del theme trae logo + Legales + Seguinos. Se lo lleva al mismo
   lenguaje de la landing: navy profundo, hairlines y una bajada
   institucional debajo del logo. */
footer.text-inverse{
    background: #123d16 !important;
}

footer.text-inverse .container{
    padding-top: 56px !important;
    padding-bottom: 20px !important;
    max-width: 1240px;
}

footer.text-inverse .footer-logo{
    height: 54px;
    width: auto;
    margin-bottom: 0 !important;
}

/* Bajada institucional bajo el logo, como en la landing. */
footer.text-inverse .footer-desktop .widget a:has(> .footer-logo)::after{
    content: "Green Family. Fabricación y envasado de envases plásticos para químicos, agro, limpieza y automotor. Prof. Antonio Turi 43, Paraná, Entre Ríos.";
    display: block;
    max-width: 320px;
    margin-top: 18px;
    font-family: "Poppins", "Manrope", system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(230, 236, 224, .62);
}

footer.text-inverse .footer-titulo,
footer.text-inverse .widget-title{
    font-family: "Poppins", "Manrope", system-ui, sans-serif;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .95) !important;
    margin-bottom: 18px !important;
}

footer.text-inverse a,
footer.text-inverse p,
footer.text-inverse li{
    font-family: "Poppins", "Manrope", system-ui, sans-serif;
    font-size: 14px;
    color: rgba(230, 236, 224, .68);
}

footer.text-inverse .widget li{
    margin-bottom: 10px;
}

footer.text-inverse a:hover,
footer.text-inverse a:hover i,
footer.text-inverse a:hover span{
    color: #b7d94a !important;
}

footer.text-inverse .footer-hr{
    border-color: rgba(255, 255, 255, .12);
    opacity: 1;
    margin-top: 12px;
    margin-bottom: 24px;
}

/* La columna del logo ocupa la mitad; Legales y Seguinos van a la derecha,
   no apiladas contra el logo. */
/* Cuatro columnas: logo | mapa | datos de la casa central | Legales. El mapa y
   los datos salen del modulo Puntos de venta (parametros del pie). */
@media (min-width: 768px) {
    footer.text-inverse .footer-desktop{
        display: grid !important;
        grid-template-columns: 1fr 1.9fr .8fr;
        grid-column-gap: 44px;
        align-items: start;
    }
}

footer.text-inverse .footer-desktop > div{
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

footer.text-inverse .footer-desktop > .col-lg-3:first-child{
    grid-column: 1;
}

/* la columna del punto de venta: mapa a la izquierda, datos a la derecha */
footer.text-inverse .footer-desktop > .col-auto{
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 28px;
    align-items: start;
}

footer.text-inverse .footer-desktop > .col-md-3{
    grid-column: 3;
}

footer.text-inverse .footer-desktop > .col-12,
footer.text-inverse .footer-desktop > .d-flex,
footer.text-inverse .footer-desktop > .pie-pagina{
    grid-column: 1 / -1;
}

footer.text-inverse .puntos-venta-footer-mapa{
    order: -1;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0;
    height: 190px !important;
    position: relative;
}

footer.text-inverse .puntos-venta-footer-mapa .gmap_canvas{
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .12);
}

footer.text-inverse .puntos-venta-footer-mapa iframe{
    display: block;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    filter: saturate(.85);
}

/* en el bloque mobile del pie, el mapa va abajo de los datos, apaisado */
footer.text-inverse .footer-mobile .puntos-venta-footer-mapa{
    margin: 12px 0 24px !important;
    height: 170px !important;
}

footer.text-inverse ul.puntos-venta-footer{
    list-style: none;
    padding: 0;
    margin: 0;
}

footer.text-inverse ul.puntos-venta-footer li{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 9px 0 !important;
    padding: 0;
    font-size: 14px;
    color: rgba(230, 236, 224, .72);
    line-height: 1.5;
}

/* el theme (.icon-list) hace absolutos los iconos y se pisan con el texto */
footer.text-inverse ul.puntos-venta-footer li i{
    position: static !important;
    color: #b7d94a;
    font-size: 17px !important;
    line-height: 1.4;
    flex: 0 0 auto;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}

footer.text-inverse ul.puntos-venta-footer li > a{
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

footer.text-inverse ul.puntos-venta-footer li > span:only-child{
    padding-left: 27px;
}

footer.text-inverse ul.puntos-venta-footer li span,
footer.text-inverse ul.puntos-venta-footer li a,
footer.text-inverse ul.puntos-venta-footer li strong{
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(230, 236, 224, .82);
}

footer.text-inverse ul.puntos-venta-footer .footer-titulo{
    margin-bottom: 14px !important;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    footer.text-inverse .footer-desktop{
        grid-template-columns: 1fr;
        grid-row-gap: 36px;
    }
    footer.text-inverse .footer-desktop > .col-lg-3:first-child,
footer.text-inverse .footer-desktop > .col-auto,
footer.text-inverse .footer-desktop > .col-md-3{
        grid-column: 1;
    }
}

/* Iconos de redes: circulo de linea en vez de glifos sueltos. */
footer.text-inverse .social a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    color: rgba(255, 255, 255, .8);
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

footer.text-inverse .social a:hover{
    border-color: #b7d94a;
    background: rgba(183, 217, 74, .12);
}

footer.text-inverse .social{
    gap: 10px !important;
}

footer.text-inverse .pie-pagina,
footer.text-inverse .pie-pagina p,
footer.text-inverse .core-devs{
    font-size: 13px;
    color: rgba(230, 236, 224, .55);
}

footer.text-inverse .pie-pagina{
    gap: 8px;
}

/* La portada de seccion mide 554px: con la pastilla encima hace falta un poco
   mas de alto para que la foto respire por debajo. */
body:not(:has(#divBloqueCredenciales)) #swiperPortadasHorizontal,
body:not(:has(#divBloqueCredenciales)) #swiperPortadasHorizontal .swiper,
body:not(:has(#divBloqueCredenciales)) #swiperPortadasHorizontal .swiper-slide{
    min-height: 620px;
}

/* Las portadas de las secciones internas van todas al mismo alto: la de
   pantalla completa se reserva para el hero de la home. (Dumar dejaba
   Quienes somos a 100svh; aca queda parejo con el resto.) */

/* Sin portada: el generico ya deja la pastilla + 40px de aire; el contenedor
   de la seccion suma un poco mas para que el titulo respire igual en todas
   (Contacto traia 60px de padding, Novedades 30). */
body.mf-sin-hero #divContenido > .container{
    padding-top: 36px !important;
}

/* ---------- Contacto: "Tambien podes escribirnos para" ----------
   Marcado limpio en la descripcion de la seccion (sin estilos inline): una
   franja blanca con filetes, el titulo a la izquierda y los tres motivos con
   el icono en un cuadro verde, en el mismo lenguaje de la home. */
.contacto-motivos{
    display: grid;
    grid-template-columns: 1fr 2.2fr;
    grid-column-gap: 40px;
    align-items: center;
    padding: 34px 0;
    border-top: 1px solid #e6ece0;
    border-bottom: 1px solid #e6ece0;
}

.contacto-motivos-titulo{
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--greenfamily-navy);
    margin: 0;
    max-width: 14ch;
}

.contacto-motivos-lista{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.contacto-motivo{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 0 24px;
    border-left: 1px solid #e6ece0;
}

.contacto-motivo:first-child{
    padding-left: 0;
    border-left: 0;
}

.contacto-motivo i{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: rgba(94, 158, 30, .1);
    color: var(--greenfamily-green);
    font-size: 22px;
    line-height: 1;
}

.contacto-motivo span{
    font-size: 15px;
    line-height: 1.5;
    color: #0e2f12;
    padding-top: 10px;
}

@media (max-width: 991.98px) {
    .contacto-motivos{
        grid-template-columns: 1fr;
        grid-row-gap: 22px;
    }
    .contacto-motivos-lista{
        grid-template-columns: 1fr;
        grid-row-gap: 16px;
    }
    .contacto-motivo{
        padding: 0;
        border-left: 0;
    }
}

/* ---------- Servicios: "Metodologia de trabajo" ----------
   Marcado limpio en la descripcion de la seccion. Misma linea de proceso que
   la home: regla superior con un punto por paso, numero en verde, titulo navy,
   texto gris y filete entre columnas. */
.metodologia-titulo{
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--greenfamily-navy);
    margin: 0 0 32px 0;
}

.metodologia-pasos{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 2px solid var(--greenfamily-navy);
}

.metodologia-paso{
    position: relative;
    padding: 28px 24px 30px 0;
    border-right: 1px solid #e6ece0;
}

.metodologia-paso:not(:first-child){
    padding-left: 24px;
}

.metodologia-paso:last-child{
    border-right: 0;
}

.metodologia-paso::before{
    content: "";
    position: absolute;
    top: -6px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--greenfamily-navy);
}

.metodologia-paso:not(:first-child)::before{
    left: 24px;
}

.metodologia-num{
    display: block;
    font-family: "Raleway", sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--greenfamily-green);
    margin-bottom: 12px;
}

.metodologia-paso h4{
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--greenfamily-navy);
    margin: 0 0 10px 0;
}

.metodologia-paso p{
    font-size: 14.5px;
    line-height: 1.6;
    color: #5d6b55;
    margin: 0;
}

@media (max-width: 1199.98px) {
    .metodologia-pasos{
        grid-template-columns: repeat(3, 1fr);
    }
    .metodologia-paso:nth-child(3){
        border-right: 0;
    }
}

@media (max-width: 767.98px) {
    .metodologia-pasos{
        grid-template-columns: 1fr;
        border-top: 0;
    }
    .metodologia-paso,
.metodologia-paso:not(:first-child){
        border-right: 0;
        border-bottom: 1px solid #e6ece0;
        padding: 24px 0 24px 24px;
    }
    .metodologia-paso::before,
.metodologia-paso:not(:first-child)::before{
        left: 0;
        top: 30px;
    }
    .metodologia-paso:last-child{
        border-bottom: 0;
    }
}

/* ===== AJUSTES PROPIOS DE GREEN FAMILY =====
   Lo que no viene del esqueleto de Dumar: el cierre sobre degrade verde,
   la tabla de ficha tecnica del producto y el catalogo sin precios. */

/* ---- Cierre: el boton principal va blanco, que sobre el degrade verde
   un boton verde no se despega. ---- */
#divBloqueCierre .btn-primary{
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--in-navy-deep) !important;
    box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .55) !important;
}
#divBloqueCierre .btn-primary:hover{
    background: #eef5e4 !important;
    border-color: #eef5e4 !important;
    color: var(--in-navy-deep) !important;
}

/* ---- Ficha tecnica del envase (pro_ficha_tecnica) ---- */
.tabla-ficha-envase{
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}
.tabla-ficha-envase th,
.tabla-ficha-envase td{
    padding: 11px 0;
    border-bottom: 1px solid var(--in-linea);
    vertical-align: top;
    font-size: 14.5px;
    line-height: 1.5;
}
.tabla-ficha-envase th{
    width: 40%;
    font-family: "Raleway", "Poppins", sans-serif;
    font-weight: 700;
    color: var(--in-navy);
    letter-spacing: .01em;
}
.tabla-ficha-envase td{
    color: #5d6b55;
    font-weight: 500;
}
.tabla-ficha-envase tr:last-child th,
.tabla-ficha-envase tr:last-child td{
    border-bottom: 0;
}

/* ---- Catalogo sin precios: la tarjeta del producto se ordena alrededor
   del nombre y la bajada tecnica, no del precio que ya no esta. ---- */
.project .post-title,
.project h2.post-title{
    margin-bottom: 2px !important;
}
.project .post-title + .text-muted,
.project .post-title + p{
    font-size: 13px;
    color: #6e7c68;
}

/* ---- Titulo de las categorias sobre la ficha ---- */
#divBloqueCategorias h4,
#divBloqueCategorias .project h4{
    font-family: "Raleway", "Poppins", sans-serif;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* ---- Dos botones juntos dentro de un componente (bloque Catalogo) ---- */
.bloque-botones{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 30px !important;
}
/* Con el id del bloque adelante: "#divBloqueCatalogo .btn-primary" le da 30px de margen arriba
   al boton principal y, sin esto, lo bajaba respecto del de al lado. */
#divBloqueCatalogo .bloque-botones .btn,
.bloque-botones .btn{
    margin-top: 0 !important;
    height: 52px;
    border-radius: 6px !important;
    padding: 0 28px !important;
    display: inline-flex !important;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
}
#divBloqueCatalogo .btn-catalogo-pdf{
    background: transparent !important;
    border: 1px solid rgba(42, 123, 28, .45) !important;
    color: var(--in-navy) !important;
    box-shadow: none !important;
}
#divBloqueCatalogo .btn-catalogo-pdf:hover{
    background: rgba(42, 123, 28, .08) !important;
    border-color: var(--in-navy) !important;
    color: var(--in-navy) !important;
    transform: translateY(-2px);
}

/* ---- Ficha del producto con el lenguaje del catalogo impreso ----
   Bajada, tabla de especificaciones y la fila de aplicaciones, todo dentro de
   la descripcion (el unico bloque del acordeon que abre solo). */
#divTextos .envase-lead{
    font-size: 16.5px;
    line-height: 1.6;
    color: #3f4a3b;
    margin-bottom: 14px !important;
}
#divTextos .tabla-ficha-envase{
    margin: 22px 0 0 0;
}
#divTextos .accordion-item .card-body > p:last-of-type{
    margin-bottom: 0;
}

.envase-aplicaciones{
    margin-top: 26px;
}
/* El rotulo va como los nombres de la tabla (Capacidad, Material...), no en mayusculas chiquitas
   con espaciado: ese estilo de volanta es de manual y Rodri lo descarta. */
.envase-ap-titulo{
    display: block;
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--in-navy);
    margin-bottom: 10px;
}
.envase-ap-lista{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.envase-ap{
    padding: 6px 15px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    color: #a9bb9c;
    background: transparent;
    border: 1px solid var(--in-linea);
}
.envase-ap-on{
    color: #263223;
    border-color: transparent;
}
.envase-ap-quimicos{ background: rgba(163, 173, 24, .34); }
.envase-ap-agro{ background: rgba(201, 180, 120, .42); }
.envase-ap-limpieza{ background: rgba(127, 195, 131, .40); }
.envase-ap-automotor{ background: rgba(152, 146, 122, .38); }

/* El titulo del envase, con el peso del catalogo */
#divTextos ~ * .post-title,
.col-lg-6 > .mb-2 > .d-flex > .post-title{
    letter-spacing: -.01em;
}

/* El nombre del envase con el peso que tiene en el catalogo impreso */
[id^="divProducto_"] h2.post-title.display-6{
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--in-navy-deep);
}
[id^="divProducto_"] h3.post-title.fs-16{
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: 17px !important;
    font-weight: 600;
    color: var(--in-green) !important;
    margin-top: 2px;
}
/* Las etiquetas de la tabla, en el tono del titular */
#divTextos .tabla-ficha-envase th{
    color: var(--in-navy-deep);
}

/* =====================================================================
   PIE DE PAGINA: la contratapa del catalogo
   Fondo gris claro con la franja de tierra abajo (bloques/pie-tierra.jpg,
   recortada de la pagina 18 del catalogo), el logo centrado arriba y, debajo,
   el mapa y los datos de la planta como un solo bloque centrado.
   ===================================================================== */
footer.text-inverse{
    background: #DADBD9 !important;
    color: #2f3a2e;
    position: relative;
    overflow: hidden;
}

/* La tierra: banda fija al pie, independiente del alto del contenido. */
footer.text-inverse::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 300px;
    background: url('../../../img/greenfamily2/bloques/pie-tierra.jpg') no-repeat center bottom;
    background-size: cover;
    pointer-events: none;
    z-index: 0;
}

footer.text-inverse .container{
    position: relative;
    z-index: 1;
    padding-top: 64px !important;
    padding-bottom: 24px !important;
}

/* Una sola columna centrada: logo arriba, mapa + datos abajo. */
@media (min-width: 768px) {
    footer.text-inverse .footer-desktop{
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center;
        grid-row-gap: 34px;
    }
    footer.text-inverse .footer-desktop > .col-lg-3:first-child{
        grid-column: 1;
    }
    footer.text-inverse .footer-desktop > .col-auto{
        grid-column: 1;
        grid-template-columns: 400px auto !important;
        grid-column-gap: 44px !important;
        align-items: center !important;
    }
    /* Las categorias ya estan en el menu: el pie queda con logo, mapa y datos. */
    footer.text-inverse .footer-desktop > .col-md-3{
        display: none !important;
    }
}

/* Logo centrado y mas grande, con la bajada debajo. */
footer.text-inverse .footer-logo{
    height: 86px !important;
}
footer.text-inverse .footer-desktop > .col-lg-3:first-child .widget{
    text-align: center;
}
footer.text-inverse .footer-desktop .widget a:has(> .footer-logo)::after{
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #5d6b55;
}

/* Sobre el gris, el texto va oscuro (el theme lo trae blanco). */
footer.text-inverse a,
footer.text-inverse p,
footer.text-inverse li,
footer.text-inverse span,
footer.text-inverse .widget li{
    color: #3c473a !important;
}
footer.text-inverse .footer-titulo,
footer.text-inverse .widget-title{
    color: #1d2a1c !important;
}
footer.text-inverse .puntos-venta-footer i{
    color: var(--in-navy) !important;
}
footer.text-inverse a:hover,
footer.text-inverse a:hover i,
footer.text-inverse a:hover span{
    color: var(--in-navy) !important;
}
footer.text-inverse .footer-hr{
    border-color: rgba(30, 45, 28, .16) !important;
}

/* El mapa, con el ancho de la columna izquierda. */
footer.text-inverse .puntos-venta-footer-mapa{
    height: 236px !important;
    width: 400px !important;
    max-width: 100%;
}
footer.text-inverse .puntos-venta-footer-mapa .gmap_canvas{
    border: 1px solid rgba(30, 45, 28, .18) !important;
    box-shadow: 0 16px 34px -20px rgba(0, 0, 0, .55);
}

/* El pie del pie queda sobre la tierra: ahi el texto vuelve a ser claro. */
footer.text-inverse .footer-desktop > .col-12,
footer.text-inverse .pie-pagina,
footer.text-inverse .footer-mobile ~ .pie-pagina{
    text-align: center;
    justify-content: center !important;
}
footer.text-inverse .pie-pagina,
footer.text-inverse .pie-pagina *,
footer.text-inverse .core-devs,
footer.text-inverse .core-devs *{
    color: rgba(255, 255, 255, .78) !important;
}
footer.text-inverse .pie-pagina a:hover,
footer.text-inverse .core-devs a:hover{
    color: #ffffff !important;
}
footer.text-inverse .footer-desktop > .col-12 .footer-hr{
    border-color: rgba(255, 255, 255, .18) !important;
}

/* Mobile: todo apilado y centrado. */
@media (max-width: 767.98px) {
    footer.text-inverse .footer-mobile{
        text-align: center;
    }
    footer.text-inverse .footer-mobile .footer-logo{
        height: 72px !important;
        margin-left: auto;
        margin-right: auto;
    }
    footer.text-inverse::after{
        height: 200px;
    }
}

/* El contenido tiene que terminar arriba de la tierra: solo el copyright
   queda montado sobre ella (por eso ahi el texto vuelve a ser claro). */
footer.text-inverse::after{
    height: 260px;
}
@media (min-width: 768px) {
    footer.text-inverse .footer-desktop{
        padding-bottom: 170px !important;
    }
}
@media (max-width: 767.98px) {
    footer.text-inverse .footer-mobile{
        padding-bottom: 120px !important;
    }
}

/* El theme pinta de blanco los enlaces y los <strong> del pie con reglas mas
   especificas (y con -webkit-text-fill-color, que gana sobre color). Sobre el
   gris claro hay que forzar los dos en todo el contenido del pie. */
footer.text-inverse .footer-desktop .widget,
footer.text-inverse .footer-desktop .widget *:not(i),
footer.text-inverse .puntos-venta-footer,
footer.text-inverse .puntos-venta-footer *:not(i),
footer.text-inverse .footer-mobile .widget,
footer.text-inverse .footer-mobile .widget *:not(i),
footer.text-inverse .footer-mobile .accordion-item,
footer.text-inverse .footer-mobile .accordion-item *:not(i){
    color: #3c473a !important;
    -webkit-text-fill-color: #3c473a !important;
}
footer.text-inverse .footer-desktop .footer-titulo,
footer.text-inverse .footer-desktop .widget-title,
footer.text-inverse .footer-mobile .footer-titulo,
footer.text-inverse .footer-mobile .widget-title,
footer.text-inverse .footer-desktop .widget strong,
footer.text-inverse .footer-mobile .widget strong,
footer.text-inverse .puntos-venta-footer strong{
    color: #1d2a1c !important;
    -webkit-text-fill-color: #1d2a1c !important;
}
footer.text-inverse .footer-desktop i,
footer.text-inverse .footer-mobile i{
    color: var(--in-navy) !important;
    -webkit-text-fill-color: var(--in-navy) !important;
}
footer.text-inverse .footer-desktop a:hover,
footer.text-inverse .footer-desktop a:hover *,
footer.text-inverse .footer-mobile a:hover,
footer.text-inverse .footer-mobile a:hover *{
    color: var(--in-navy) !important;
    -webkit-text-fill-color: var(--in-navy) !important;
}

/* La franja del copyright va sobre la tierra: sin recuadro y en claro. */
footer.text-inverse .pie-pagina,
footer.text-inverse .pie-pagina *,
footer.text-inverse .div-footer-coredevs,
footer.text-inverse .core-devs,
footer.text-inverse .core-devs *{
    background: transparent !important;
    color: rgba(255, 255, 255, .82) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .82) !important;
}
footer.text-inverse .pie-pagina{
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 6px 18px;
}
footer.text-inverse .footer-desktop > .col-12{
    width: 100% !important;
    justify-self: stretch;
}
footer.text-inverse .footer-desktop > .col-12 .footer-hr{
    display: none !important;
}

/* El copyright queda montado sobre la tierra: ahi el texto va claro y gana
   con mas especificidad que la regla general de texto oscuro del pie. */
footer.text-inverse .footer-desktop .pie-pagina,
footer.text-inverse .footer-desktop .pie-pagina *,
footer.text-inverse .footer-desktop .core-devs,
footer.text-inverse .footer-desktop .core-devs *,
footer.text-inverse .footer-mobile ~ .pie-pagina,
footer.text-inverse .footer-mobile ~ .pie-pagina *{
    color: rgba(255, 255, 255, .85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .85) !important;
    background: transparent !important;
}
footer.text-inverse .footer-desktop > .col-12{
    margin-top: 26px;
}

/* (la franja del copyright es hermana de .footer-desktop, no hija: se sube la
   especificidad repitiendo la clase para ganarle a la regla de texto oscuro) */
footer.text-inverse .pie-pagina.pie-pagina.pie-pagina,
footer.text-inverse .pie-pagina.pie-pagina.pie-pagina *,
footer.text-inverse .core-devs.core-devs.core-devs,
footer.text-inverse .core-devs.core-devs.core-devs *{
    color: rgba(255, 255, 255, .88) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .88) !important;
    background: transparent !important;
}

/* La tierra se ve ENTERA: la banda toma la proporcion de la foto
   (1920x621) y la dibuja sin recortar, asi se ve el monticulo completo con su
   horizonte desenfocado, como en la contratapa. El contenido deja el aire
   necesario arriba de ella. */
footer.text-inverse::after{
    /* Mientras la pantalla es ancha la banda toma la proporcion de la foto
       (1920x621) y se ve entera. Por debajo de ~990px toca el piso de 320px:
       ahi deja de achicarse y la foto se recorta de los costados, centrada. */
    height: max(320px, calc(100vw / 3.092)) !important;
    aspect-ratio: auto;
    background-size: cover !important;
    background-position: center bottom !important;
}
@media (min-width: 768px) {
    footer.text-inverse .footer-desktop{
        padding-bottom: 0 !important;
    }
}
@media (max-width: 767.98px) {
    footer.text-inverse .footer-mobile{
        padding-bottom: 0 !important;
    }
}

/* Reparto vertical del pie, tomando el alto real de la banda de tierra
   (alto fijo de la banda: 460px en desktop, 300px en mobile):
   - el contenido (logo, mapa, datos) termina ARRIBA de la tierra;
   - el copyright cae DENTRO, sobre la parte oscura. */
@media (min-width: 768px) {
    footer.text-inverse .footer-desktop{
        padding-bottom: 0 !important;
    }
    footer.text-inverse .footer-desktop > .col-12{
        margin-top: max(210px, calc(100vw / 3.092 - 110px)) !important;
    }
}
@media (max-width: 767.98px) {
    footer.text-inverse .footer-mobile{
        padding-bottom: 0 !important;
    }
    footer.text-inverse .footer-mobile ~ .pie-pagina,
    footer.text-inverse .pie-pagina-mobile{
        margin-top: max(200px, calc(100vw / 3.092 - 90px)) !important;
    }
}

/* El iframe del mapa viene mas alto que su recuadro y su linea de creditos
   asomaba por debajo, cortada al medio. Se recorta todo al recuadro. */
footer.text-inverse .puntos-venta-footer-mapa,
footer.text-inverse .puntos-venta-footer-mapa .gmap_canvas{
    overflow: hidden !important;
}
footer.text-inverse .puntos-venta-footer-mapa iframe{
    display: block;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

/* ---- Contacto ----
   El subtitulo del formulario usa la misma clase que el titulo (sin display-5):
   sin esto se lee como un segundo titular. */
.titulo-formulario-contacto:not(.display-5){
    font-family: "Poppins", "Manrope", system-ui, sans-serif !important;
    font-size: 16.5px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    color: #5d6b55 !important;
    max-width: 700px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
}

/* Seccion sin contenido propio: el theme igual dibuja el contenedor (con su
   padding) y adentro mete el modal de Turnos. Si la fila viene en d-non, no
   hay nada que mostrar y el contenedor entero sobra. */
#divContenido > .container:has(> .row.d-non){
    display: none !important;
}

/* "Desarrollado por Core Devs" centrado, como el resto del copyright. */
footer.text-inverse .pie-pagina .d-flex,
footer.text-inverse .pie-pagina span.d-flex{
    justify-content: center !important;
    width: 100%;
}
footer.text-inverse .pie-pagina .footer-coredevs{
    margin-left: .35rem !important;
}

/* ---- Franja final del pie (copyright + Core Devs) ----
   El theme la arma distinta en desktop y en mobile, y con clases que la
   alinean a la izquierda. Se centra en las dos. */
footer.text-inverse .footer-hr{
    display: none !important;
}

/* El enlace de Core Devs trae mx-auto: dentro de una fila centrada eso separa
   el texto del logo. Se lo saca y queda pegado a "Desarrollado por". */
footer.text-inverse .footer-coredevs{
    margin: 0 0 0 .4rem !important;
}
footer.text-inverse .pie-pagina span.d-flex{
    align-items: center !important;
    justify-content: center !important;
}
footer.text-inverse .pie-pagina span.d-flex > p{
    margin-bottom: 0 !important;
}

/* Desktop: las dos lineas, una debajo de la otra y centradas. */
@media (min-width: 768px) {
    footer.text-inverse .footer-desktop > .d-flex,
    footer.text-inverse .footer-desktop .pie-pagina{
        display: flex !important;
        flex-direction: column;
        align-items: center !important;
        justify-content: center !important;
        width: 100%;
        row-gap: 6px;
    }
}

/* Mobile: el contenedor no es flex (d-md-flex arranca en 768) y los textos
   vienen con text-start, asi que quedaban pegados a la izquierda. */
@media (max-width: 767.98px) {
    footer.text-inverse .pie-pagina-mobile{
        display: flex !important;
        flex-direction: column;
        align-items: center !important;
        text-align: center !important;
        row-gap: 2px;
    }
    footer.text-inverse .pie-pagina-mobile > p,
    footer.text-inverse .pie-pagina-mobile .text-start{
        text-align: center !important;
        margin-bottom: 0 !important;
    }
    footer.text-inverse .pie-pagina-mobile > span.d-flex{
        margin-top: .5rem !important;
    }
}

/* Aire abajo del contenido de las secciones internas (Nosotros, Envasado y
   Contacto), que terminaban pegadas al pie. */
#divContenido.seccion-nosotros > .container,
#divContenido.seccion-envasado > .container,
#divContenido.seccion-contacto > .container,
#divContenido.seccion-hero > .container{
    padding-bottom: 72px !important;
}

/* ---- Menu mobile (despliegue dentro de la pastilla) ----
   El subrayado al pasar el mouse es para la barra de escritorio: en mobile las
   opciones son filas tocables y no se subrayan. */
@media (max-width: 991.98px) {
    .navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav .nav-link,
    .navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav .nav-link:hover,
    .navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav .nav-link.active,
    #mobileMenu .mobile-menu-panel .nav-link,
    #mobileMenu .mobile-menu-panel .nav-link:hover{
        text-decoration: none !important;
        text-decoration-color: transparent !important;
        background-image: none !important;
    }

    /* Encabezado del submenu (Catalogo): va dentro del panel de vidrio, sin
       fondo propio (el bloque verde lleno no pegaba con el glassmorfismo). La
       flecha para volver es un circulo translucido, el titulo va en blanco y
       abajo lleva la misma linea fina que separa las filas. */
    #mobileMenu .mobile-menu-header{
        display: flex !important;
        align-items: center;
        gap: 12px;
        background: transparent !important;
        padding: 4px 0px 16px !important;
        border-bottom: 1px solid rgba(255, 255, 255, .2);
        color: #ffffff !important;
    }
    #mobileMenu .mobile-menu-header .mobile-menu-back{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        padding: 0;
        margin: 0;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .3);
        background: rgba(255, 255, 255, .14);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        transition: background .2s ease;
    }
    #mobileMenu .mobile-menu-header .mobile-menu-back:active{
        background: rgba(255, 255, 255, .26);
    }
    #mobileMenu .mobile-menu-header .mobile-menu-back i{
        font-size: 22px;
        line-height: 1;
    }
    #mobileMenu .mobile-menu-header .mobile-menu-title{
        font-size: 18px;
        font-weight: 600;
        letter-spacing: -.01em;
    }
    #mobileMenu .mobile-menu-header .mobile-menu-back,
    #mobileMenu .mobile-menu-header .mobile-menu-back i,
    #mobileMenu .mobile-menu-header .mobile-menu-title{
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
}

/* ---- Ciclo animado (bloque Animado, modelo 19) ----
   Seccion oscura: la animacion del ciclo del envase brilla sobre el verde
   profundo. El fondo sale del bloque (blq_fondo); aca van el aire, el ancho y
   los textos claros. La escena y la lista de pasos las pinta la animacion. */
body:has(#divBloqueCredenciales) #divBloqueCicloAnimado{
    padding: 112px 0 !important;
}

#divBloqueCicloAnimado > .container{
    max-width: 1240px;
    padding-left: 32px;
    padding-right: 32px;
}

#divBloqueCicloAnimado .bloque-animado{
    --bs-gutter-x: 72px;
}

#divBloqueCicloAnimado .bloque-animado-titulo{
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: clamp(30px, 3.4vw, 46px) !important;
    font-weight: 800;
    letter-spacing: -.022em;
    line-height: 1.08;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    margin: 0 0 20px !important;
}

#divBloqueCicloAnimado .bloque-animado-descripcion p{
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .7);
    margin: 0;
}

@media (max-width: 991.98px) {
    /* 64px como el resto; abajo 50 porque el ultimo paso de la lista ya trae su relleno */
    body:has(#divBloqueCredenciales) #divBloqueCicloAnimado{
        padding: 64px 0 50px !important;
    }
    #divBloqueCicloAnimado > .container{
        padding-left: 20px;
        padding-right: 20px;
    }
    #divBloqueCicloAnimado .bloque-animado{
        --bs-gutter-x: 24px;
    }
}

/* ---- Lo que nos diferencia (Valores, modelo 5) ----
   Composicion de ficha tecnica en vez de la grilla de iconos: el titulo a la izquierda (quieto
   mientras se recorren los puntos, en escritorio) y los cuatro puntos como filas separadas por
   lineas finas, con el titulo de cada punto en una columna y su texto en otra. El icono del
   componente no se muestra. Al pasar el mouse, una linea verde recorre la fila. */
#divBloqueValores > .container{
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 88px;
    align-items: start;
}

#divBloqueValores > .container > .row{
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin: 0 !important;
}

#divBloqueValores > .container > .row.text-center{
    position: sticky;
    top: 132px;
}

#divBloqueValores .row.text-center > .col-12{
    display: block;
    padding: 0;
    text-align: left;
}

#divBloqueValores .display-4{
    max-width: 11ch;
    margin: 0 !important;
}

#divBloqueValores .pricing-wrapper > .row{
    display: block;
    margin: 0 !important;
}

#divBloqueValores .pricing-wrapper > .row > div{
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: 40px;
    align-items: baseline;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 30px 0;
    border-top: 1px solid var(--in-linea);
}

/* Separadores solo entre filas: sin linea arriba de la primera ni abajo de la ultima. */
#divBloqueValores .pricing-wrapper > .row > div:first-child{
    border-top: 0;
    padding-top: 4px;
}

#divBloqueValores .pricing-wrapper > .row > div:last-child{
    padding-bottom: 0;
}

#divBloqueValores .bloque-item-icono{
    display: none !important;
}

#divBloqueValores h4{
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: 21px !important;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.25;
    color: var(--in-navy);
    margin: 0 !important;
    transition: color .35s ease;
}

#divBloqueValores .pricing-wrapper p{
    font-size: 16px;
    line-height: 1.65;
    color: var(--in-gris);
    margin: 0 !important;
}

#divBloqueValores .pricing-wrapper > .row > div:not(:first-child)::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background: var(--in-green);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

#divBloqueValores .pricing-wrapper > .row > div:hover::before{
    transform: scaleX(1);
}

#divBloqueValores .pricing-wrapper > .row > div:hover h4{
    color: var(--in-green);
}

@media (max-width: 991.98px) {
    #divBloqueValores > .container{
        grid-template-columns: 1fr;
        row-gap: 28px;
    }
    #divBloqueValores > .container > .row.text-center{
        position: static;
    }
    #divBloqueValores .display-4{
        max-width: none;
    }
    #divBloqueValores .pricing-wrapper > .row > div{
        grid-template-columns: 1fr;
        row-gap: 8px;
        padding: 22px 0;
    }
    #divBloqueValores .pricing-wrapper > .row > div:first-child{
        padding-top: 0;
    }
    #divBloqueValores h4{
        font-size: 19px !important;
    }
    #divBloqueValores .pricing-wrapper p{
        font-size: 15px;
    }
}

/* ---- Categorias (predefinido 5) ----
   A tono con el resto de la home: el mismo aire y el mismo ancho que las otras secciones, el fondo
   gris calido de la paleta y el titulo a la izquierda en el verde de la marca (el bloque lo trae
   centrado y gris, con .text-dark, y sin padding propio). */
body:has(#divBloqueCredenciales) #divBloqueCategorias{
    padding: 104px 0 !important;
    background: var(--in-fondo) !important;
}

#divBloqueCategorias > .container{
    max-width: 1240px;
    padding: 0 32px !important;
}

#divBloqueCategorias .position-relative > .row:first-child > div{
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

#divBloqueCategorias h2.display-4{
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: clamp(30px, 3.4vw, 46px) !important;
    font-weight: 800;
    letter-spacing: -.022em;
    line-height: 1.08;
    color: var(--in-navy) !important;
    -webkit-text-fill-color: var(--in-navy);
    max-width: 18ch;
    padding: 0 !important;
    margin: 0 0 48px !important;
}

/* Las fichas llevan el nombre de la categoria adentro de la imagen, abajo a la izquierda, sobre un
   degrade verde oscuro que lo hace legible (como en Gufra y Avip). El nombre es el h4 que el bloque
   pone debajo de la foto: se lo ancla a la tarjeta y se lo sube encima. Las fotos son cuadradas. */
#divBloqueCategorias .project.item{
    position: relative;
}

#divBloqueCategorias .project figure.card-img-top{
    position: relative;
    overflow: hidden;
    margin: 0;
}

#divBloqueCategorias .project figure.card-img-top img{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

#divBloqueCategorias .project figure.card-img-top::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 36, 14, .78) 0%, rgba(10, 36, 14, .35) 32%, rgba(10, 36, 14, 0) 58%);
    pointer-events: none;
    z-index: 1;
}

#divBloqueCategorias .project h4.titulo-categoria{
    position: absolute;
    /* La tarjeta es una columna: su relleno lateral es la mitad del gutter, y la foto va adentro */
    left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    bottom: 0;
    z-index: 2;
    margin: 0 !important;
    padding: 20px 22px;
    text-align: left !important;
    font-size: 22px !important;
    line-height: 1.15;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    body:has(#divBloqueCredenciales) #divBloqueCategorias{
        padding: 64px 0 !important;
    }
    #divBloqueCategorias > .container{
        padding: 0 24px !important;
    }
    #divBloqueCategorias h2.display-4{
        margin-bottom: 32px !important;
    }
}

@media (max-width: 575.98px) {
    #divBloqueCategorias .categorias-grilla{
        --bs-gutter-x: 16px;
        --bs-gutter-y: 28px;
    }
    #divBloqueCategorias .project h4.titulo-categoria{
        font-size: 17px !important;
        padding: 14px;
    }
}

/* ---- Algunos de nuestros envases (Destacados, predefinido 12) ----
   El bloque muestra la descripcion corta del producto, que en Green Family es la ficha: la tabla y
   las aplicaciones. Va entera, sin el recorte de cinco lineas de la plataforma (cortaria la tabla),
   y tambien debajo de escritorio, donde el bloque oculta el texto (d-none d-lg-block): ahi queda
   debajo de la foto. */
#divBloqueDestacados .texto-producto-destacado{
    display: block !important;
    -webkit-line-clamp: unset;
    line-clamp: none;
    overflow: visible;
}

@media (max-width: 991.98px) {
    #divBloqueDestacados .texto-producto-destacado{
        margin: 18px 0 0 !important;
    }
}

/* ---- Aire de los bloques en celular: 64px arriba y abajo en todos ----
   Medido desde el borde de la seccion hasta el primer y el ultimo contenido, como en Calidad y en
   Lo que nos diferencia. Cada ajuste descuenta lo que el bloque ya trae adentro. */
@media (max-width: 991.98px) {
    /* Credenciales: la banda no tiene aire propio, solo el relleno de cada banner (22px) */
    body:has(#divBloqueCredenciales) #divBloqueCredenciales{
        padding: 35px 0 42px !important;
    }
    /* Categorias: el margen debajo del nombre de cada categoria */
    #divBloqueCategorias .titulo-categoria{
        margin-bottom: 0 !important;
    }
    /* Algunos de nuestros envases: el contenedor trae 40px arriba y 20px abajo, y el carrusel
       40px de margen */
    #divBloqueDestacados .container-sm{
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }
    #divBloqueDestacados .swiper-container{
        margin-bottom: 0 !important;
    }
    /* Catalogo y Cierre: el margen debajo de los botones */
    #divBloqueCatalogo .bloque-botones,
    #divBloqueCierre .row.text-center > .col-12 > p:last-child{
        margin-bottom: 0 !important;
    }
}

/* ---- Listado de productos (productos.php): menos aire arriba ----
   El contenedor de la columna de categorias y el listado trae pt-12 (3.5rem): va con el de pt-2
   (.5rem) en escritorio y con 2.5rem en celular y tablet. Se lo ubica por la ruta de navegacion que
   tiene justo antes, que solo existe en esta pagina (servicios.php usa el mismo contenedor y no se
   toca). */
#seccionRutaCatalogo + section.wrapper > .container{
    padding-top: .5rem !important;
}

@media (max-width: 991.98px) {
    #seccionRutaCatalogo + section.wrapper > .container{
        padding-top: 2.5rem !important;
    }
}

/* ---- Lineas que se llenan: Envasado llave en mano, Calidad y Lo que nos diferencia ----
   La linea que separa cada fila se llena de verde de izquierda a derecha, como en Lo que nos
   diferencia: con el mouse al pasar por la fila, y en el celular sola a medida que la fila entra en
   pantalla (custom.js le pone la clase linea-llena). La linea se dibuja encima del borde de la fila. */
#divBloqueEnfoque .bloque-puntos li::before,
#divBloqueCalidad .bloque-puntos li::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background: var(--in-green);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}

@media (hover: hover) {
    #divBloqueEnfoque .bloque-puntos li:hover::before,
    #divBloqueCalidad .bloque-puntos li:hover::before{
        transform: scaleX(1);
    }
}

#divBloqueEnfoque .bloque-puntos li.linea-llena::before,
#divBloqueCalidad .bloque-puntos li.linea-llena::before,
#divBloqueValores .pricing-wrapper > .row > div.linea-llena::before{
    transform: scaleX(1);
}


/* =====================================================================================
   GREEN FAMILY 2 — segunda version del diseño, en paralelo a greenfamily
   -------------------------------------------------------------------------------------
   Toma el lenguaje de la referencia "Ridgeline": pagina casi blanca con paneles
   redondeados despegados de los bordes, portada enmarcada, menu en piezas sueltas
   (logo, opciones a la izquierda y el boton de accion a la derecha), titulares en dos
   tonos, datos chicos en tipografia mono y cada seccion con su propia forma de entrar
   (custom.js). Todo lo de abajo pisa a la version 1, que queda arriba en este archivo.
   ===================================================================================== */

:root{
    --v2-pagina: #f6f7f3;
    --v2-panel: #eceee7;
    --v2-tarjeta: #fbfcf9;
    --v2-tinta: #0f1c11;
    --v2-tono: #7d8a77;
    --v2-texto: #4d584b;
    --v2-verde: #143f18;
    --v2-verde-medio: #2a7b1c;
    --v2-lima: #b7d94a;
    --v2-linea: rgba(15, 28, 17, .1);
    --v2-radio: 24px;
    --v2-radio-tarjeta: 18px;
    --v2-margen: 14px;
    --v2-sans: "Geist", "Inter", system-ui, sans-serif;
    --v2-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --v2-curva: cubic-bezier(.22, 1, .36, 1);

    /* menu flotante: medidas y colores de las piezas sueltas */
    --mf-top: 26px;
    --mf-ancho: 1352px;
}

/* ---------- Tipografia: Geist para todo, mono para lo chico ---------- */
html body,
html body :is(h1, h2, h3, h4, h5, h6, p, a, li, span, div, button, input, textarea, select, label, small, strong, em, td, th, figcaption):not(.material-symbols-rounded):not([class*="uil"]){
    font-family: var(--v2-sans) !important;
}

html body{
    color: var(--v2-texto);
    -webkit-font-smoothing: antialiased;
}

html body .content-wrapper{
    background: var(--v2-pagina) !important;
}

html body :is(h1, h2, h3, .display-1, .display-2, .display-3, .display-4, .display-5){
    font-weight: 700 !important;
    letter-spacing: -.035em !important;
    color: var(--v2-tinta) !important;
    -webkit-text-fill-color: var(--v2-tinta);
}

/* Los titulares de los bloques: en bloque (algunos venian como flex y partian los dos tonos en
   columnas), en tinta y con el segundo tono. Pisa el verde de la version 1. */
html body:has(#divBloqueCredenciales) section[id^="divBloque"] :is(h2, h3):is(.display-4, .display-5){
    display: block !important;
    color: var(--v2-tinta) !important;
    -webkit-text-fill-color: var(--v2-tinta) !important;
    font-size: clamp(34px, 3.6vw, 54px) !important;
    font-weight: 700 !important;
    letter-spacing: -.042em !important;
    line-height: 1.02 !important;
    max-width: 20ch;
}

/* Segundo tono de los titulares: custom.js envuelve lo que sigue a la primera coma o
   dos puntos del titulo (o el segundo titulo de una portada). */
html body .gf2-tono{
    color: var(--v2-tono) !important;
    -webkit-text-fill-color: var(--v2-tono) !important;
}

/* ---------- Botones: pastilla, en la tipografia del sitio ---------- */
/* Sin el brillo verde ni el salto de la version 1 */
html body:has(#divBloqueCredenciales) :is(.swiper-hero, [id^="divBloque"]) .btn,
html body:has(#divBloqueCredenciales) :is(.swiper-hero, [id^="divBloque"]) .btn:hover,
html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .btn.rounded-pill,
html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .btn.rounded-pill:hover{
    box-shadow: none !important;
}

html body .btn:not(.btn-close):not(.btn-circle):not(.btn-block):not(.dropdown-toggle){
    font-family: var(--v2-sans) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -.005em !important;
    text-transform: none !important;
    border-radius: 999px !important;
    padding: 14px 22px !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease !important;
}

html body .btn.btn-primary:not(.btn-close){
    background: var(--v2-verde) !important;
    border-color: var(--v2-verde) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
}

html body .btn.btn-primary:not(.btn-close):hover{
    background: var(--v2-tinta) !important;
    border-color: var(--v2-tinta) !important;
}

html body .btn.btn-outline-primary{
    background: transparent !important;
    border: 1px solid var(--v2-linea) !important;
    color: var(--v2-tinta) !important;
    -webkit-text-fill-color: var(--v2-tinta);
}

html body .btn.btn-outline-primary:hover{
    background: var(--v2-tinta) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
}

/* Menu de escritorio: al pasar el mouse el texto toma el color del subrayado (verde en la barra
   clara, lima sobre la portada), y en Catalogo el subrayado llega hasta la flecha inclusive (la
   version 1 lo cortaba 18px antes para dejarla afuera). La flecha acompaña el color del texto. */
@media (min-width: 992px) {
    html body .navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link:not(#gf2):is(:hover, .active),
    html body .navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link:not(#gf2):is(:hover, .active)::after{
        color: var(--linea-menu) !important;
        -webkit-text-fill-color: var(--linea-menu) !important;
    }
    html body .navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link.dropdown-toggle:not(#gf2):is(:hover, .active){
        background-size: 100% 2px;
    }
}

/* El boton de accion del menu no lleva el margen derecho (me-3) que le pone la plataforma */
html body .navbar .navbar-other .nav-item:has(> .boton-cta-menu){
    margin-right: 0 !important;
}

/* ---------- Menu: la barra de vidrio de siempre, con el boton de accion a la derecha ----------
   Las opciones quedan como en la version 1 (centradas, con la linea animada). El boton va en
   blanco sobre la portada y en verde sobre el fondo claro. */
@media (min-width: 992px) {
    .navbar.navbar-flotante .boton-cta-menu{
        display: inline-flex !important;
        align-items: center;
        padding: 12px 20px !important;
        background: var(--v2-verde) !important;
        border: 1px solid var(--v2-verde) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff;
    }
    .navbar.navbar-flotante .boton-cta-menu:hover{
        background: var(--v2-tinta) !important;
        border-color: var(--v2-tinta) !important;
    }
    .navbar.navbar-flotante.navbar-flotante-sobre-portada .boton-cta-menu{
        background: #ffffff !important;
        border-color: #ffffff !important;
        color: var(--v2-tinta) !important;
        -webkit-text-fill-color: var(--v2-tinta);
    }
    .navbar.navbar-flotante.navbar-flotante-sobre-portada .boton-cta-menu:hover{
        background: var(--v2-lima) !important;
        border-color: var(--v2-lima) !important;
    }
}

/* ---------- Portada: enmarcada, despegada de los bordes y redondeada ---------- */
html body:has(#divBloqueCredenciales) #divPortadas{
    padding: var(--v2-margen) var(--v2-margen) 0 !important;
    background: var(--v2-pagina) !important;
}

html body:has(#divBloqueCredenciales) #divPortadas .swiper-hero{
    border-radius: var(--v2-radio);
    overflow: hidden;
    isolation: isolate;
}

html body:has(#divBloqueCredenciales) .swiper-hero,
html body:has(#divBloqueCredenciales) .swiper-hero .swiper,
html body:has(#divBloqueCredenciales) .swiper-hero .swiper-slide{
    height: calc(100vh - var(--v2-margen)) !important;
    height: calc(100svh - var(--v2-margen)) !important;
    min-height: 620px !important;
}

/* El titular arriba a la izquierda (como la referencia), debajo de la barra del menu */
html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content{
    position: relative;
    max-width: 1320px;
    padding: 150px 40px 0 !important;
}
html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content > .row{
    align-items: flex-start !important;
}
html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .row > div{
    align-self: flex-start !important;
    max-width: 1000px !important;
    padding-bottom: 0 !important;
}
/* Si en el panel el titular se puso a la derecha, la columna entera se va a ese lado (custom.js
   le pone gf2-derecha) */
html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .row > div.gf2-derecha{
    margin-left: auto !important;
    text-align: right !important;
}
html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .row > div.gf2-derecha .portada-texto-normal{
    margin-left: auto !important;
}
html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .row > div.gf2-derecha .btn.portada-boton-normal{
    margin: 34px 0 0 10px !important;
}

/* El velo de la portada (el que se elige en el panel) queda del lado del titular. Abajo se suma
   una sombra suave para que los chips se lean sobre cualquier foto. */
html body:has(#divBloqueCredenciales) .swiper-hero .swiper-slide{
    position: relative;
}
html body:has(#divBloqueCredenciales) .swiper-hero .swiper-slide::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(6, 16, 8, .65) 0%, rgba(6, 16, 8, 0) 80%),
        linear-gradient(0deg, rgba(6, 16, 8, .45) 0%, rgba(6, 16, 8, 0) 30%);
}
/* del lado del titulo la foto se oscurece un poco mas, para que el segundo tono se lea sobre
   cualquier imagen (en las claras, como el bidon o el bosque con sol, no alcanzaba el velo) */
html body:has(#divBloqueCredenciales) .swiper-hero .swiper-slide:has(.gf2-derecha)::before{
    background:
        linear-gradient(270deg, rgba(6, 16, 8, .65) 0%, rgba(6, 16, 8, 0) 80%),
        linear-gradient(0deg, rgba(6, 16, 8, .45) 0%, rgba(6, 16, 8, 0) 30%);
}
html body:has(#divBloqueCredenciales) .swiper-hero .swiper-slide > .swiper-content{
    z-index: 2;
}
/* Mientras la foto de cada portada carga no se ve el color de relleno de la plataforma (un oliva
   que, con el velo encima, armaba un degrade feo): se ve el mismo fondo de la pagina y la foto
   aparece con un fundido cuando esta lista. custom.js pone gf2-esperando-fotos en la portada y
   gf2-foto-lista en cada slide; sin el script no se tapa nada. */
html body:has(#divBloqueCredenciales) .swiper-hero .swiper-slide:not(#gf2){
    background-color: var(--v2-pagina) !important;
}
html body:has(#divBloqueCredenciales) .swiper-hero.gf2-esperando-fotos .swiper-slide::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--v2-pagina);
    pointer-events: none;
    transition: opacity .7s ease;
}
html body:has(#divBloqueCredenciales) .swiper-hero.gf2-esperando-fotos .swiper-slide.gf2-foto-lista::after{
    opacity: 0;
}
/* el texto blanco tampoco se muestra sobre el fondo claro: entra junto con la foto */
html body:has(#divBloqueCredenciales) .swiper-hero.gf2-esperando-fotos .swiper-slide > .swiper-content{
    transition: opacity .6s ease;
}
html body:has(#divBloqueCredenciales) .swiper-hero.gf2-esperando-fotos .swiper-slide:not(.gf2-foto-lista) > .swiper-content{
    opacity: 0;
}
html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content :is(p, h1, h2, h3, a){
    text-shadow: none !important;
}

/* Las animaciones de animate.css de los componentes se apagan: la entrada la hace custom.js */
html body:has(#divBloqueCredenciales) .swiper-hero .animate__animated{
    animation: none !important;
    visibility: visible !important;
}

/* Titular: dos componentes grandes, el segundo en el tono suave que se elige en la portada */
html body:has(#divBloqueCredenciales) .swiper-hero .portada-texto-grande{
    font-family: var(--v2-sans) !important;
    font-size: clamp(44px, 5.4vw, 82px) !important;
    font-weight: 700 !important;
    letter-spacing: -.048em !important;
    line-height: .98 !important;
    margin: 0 !important;
    padding-bottom: .06em;
    overflow: hidden;
}
html body:has(#divBloqueCredenciales) .swiper-hero .portada-texto-grande > .gf2-linea{
    display: block;
}
/* el segundo renglon se corta antes: asi no se estira hasta la parte mas clara de la foto */
html body:has(#divBloqueCredenciales) .swiper-hero .portada-texto-grande ~ .portada-texto-grande{
    max-width: 8.4em;
}
html body:has(#divBloqueCredenciales) .swiper-hero .gf2-derecha .portada-texto-grande ~ .portada-texto-grande{
    margin-left: auto !important;
}

html body:has(#divBloqueCredenciales) .swiper-hero .portada-texto-normal{
    font-size: 18px !important;
    line-height: 1.55 !important;
    max-width: 38ch;
    margin: 26px 0 0 !important;
    opacity: .82;
}

/* Botones de la portada: el primero blanco y el segundo en linea */
html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .btn.portada-boton-normal{
    margin: 34px 10px 0 0 !important;
    background: #ffffff !important;
    border: 1px solid #ffffff !important;
    color: var(--v2-tinta) !important;
    -webkit-text-fill-color: var(--v2-tinta);
    border-radius: 999px !important;
}
html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .btn.portada-boton-normal:hover{
    background: var(--v2-lima) !important;
    border-color: var(--v2-lima) !important;
}
html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .btn.portada-boton-normal + .btn.portada-boton-normal{
    background: transparent !important;
    border-color: rgba(255, 255, 255, .45) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
}
html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .btn.portada-boton-normal + .btn.portada-boton-normal:hover{
    background: rgba(255, 255, 255, .12) !important;
    border-color: #ffffff !important;
}

/* Entrada del titular "como una junta que se cierra": la primera linea baja y la segunda
   sube hasta encontrarse; despues aparecen la bajada y los botones. Van con
   !important porque la version 1 y los botones generales tambien fijan transform y transition. */
html body:has(#divBloqueCredenciales) .swiper-hero .gf2-anima .portada-texto-grande > .gf2-linea{
    transform: translateY(-105%) !important;
}
html body:has(#divBloqueCredenciales) .swiper-hero .gf2-anima .portada-texto-grande ~ .portada-texto-grande > .gf2-linea{
    transform: translateY(105%) !important;
}
html body:has(#divBloqueCredenciales) .swiper-hero .gf2-anima :is(.portada-texto-normal, .btn.portada-boton-normal){
    opacity: 0 !important;
    transform: translateY(14px) !important;
}
html body:has(#divBloqueCredenciales) .swiper-hero .gf2-anima.gf2-entra .portada-texto-grande > .gf2-linea,
html body:has(#divBloqueCredenciales) .swiper-hero .gf2-anima.gf2-entra .portada-texto-grande ~ .portada-texto-grande > .gf2-linea{
    transform: none !important;
    transition: transform 1.1s var(--v2-curva) .1s !important;
}
html body:has(#divBloqueCredenciales) .swiper-hero .gf2-anima.gf2-entra :is(.portada-texto-normal, .btn.portada-boton-normal){
    opacity: 1 !important;
    transform: none !important;
    transition: opacity .7s ease .6s, transform .9s var(--v2-curva) .6s, background-color .25s ease 0s, color .25s ease 0s, border-color .25s ease 0s !important;
}
html body:has(#divBloqueCredenciales) .swiper-hero .gf2-anima.gf2-entra .btn.portada-boton-normal{
    transition-delay: .72s, .72s, 0s, 0s, 0s !important;
}
html body:has(#divBloqueCredenciales) .swiper-hero .gf2-anima.gf2-entra .btn.portada-boton-normal + .btn.portada-boton-normal{
    transition-delay: .8s, .8s, 0s, 0s, 0s !important;
}

@media (max-width: 991.98px) {
    /* En el celular la portada arranca debajo del menu, 85px mas abajo, y mide eso menos para que
       los puntos sigan entrando en la pantalla. El menu arranca oscuro sobre el fondo
       de la pagina y se aclara recien cuando pasa sobre la foto (menu-flotante.js). */
    html body:has(#divBloqueCredenciales) #divPortadas{
        padding-top: calc(var(--v2-margen) + 85px) !important;
    }
    html body:has(#divBloqueCredenciales) .swiper-hero,
    html body:has(#divBloqueCredenciales) .swiper-hero .swiper,
    html body:has(#divBloqueCredenciales) .swiper-hero .swiper-slide{
        height: calc(100vh - var(--v2-margen) - 85px) !important;
        height: calc(100svh - var(--v2-margen) - 85px) !important;
        min-height: 540px !important;
    }
    html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content{
        padding: 48px 24px 0 !important;
    }
    /* en el celular el titulo ocupa todo el ancho: la sombra va de arriba hacia abajo, sobre
       la zona del titulo, en vez de desde un costado */
    html body:has(#divBloqueCredenciales) .swiper-hero .swiper-slide::before,
    html body:has(#divBloqueCredenciales) .swiper-hero .swiper-slide:has(.gf2-derecha)::before{
        background:
            linear-gradient(180deg, rgba(6, 16, 8, .62) 0%, rgba(6, 16, 8, .45) 45%, rgba(6, 16, 8, 0) 72%),
            linear-gradient(0deg, rgba(6, 16, 8, .45) 0%, rgba(6, 16, 8, 0) 30%);
    }
    html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .btn.portada-boton-normal{
        margin: 28px 6px 0 0 !important;
        padding: 0 18px !important;
        height: 48px;
        font-size: 14.5px !important;
    }
    html body:has(#divBloqueCredenciales) .swiper-hero .portada-texto-normal{
        font-size: 16.5px !important;
        margin-top: 20px !important;
    }
    html body .navbar .navbar-other .btn.boton-cta-menu:not(.btn-close){
        font-size: 14px !important;
        padding: 10px 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body:has(#divBloqueCredenciales) .swiper-hero .swiper-slide.gf2-anima :is(.portada-texto-grande > .gf2-linea, .portada-texto-normal, .btn.portada-boton-normal){
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
}

/* =====================================================================================
   GREEN FAMILY 2 — secciones
   Cada bloque toma una de las piezas de la referencia. Las clases gf2-* las pone custom.js;
   sin el script la pagina queda quieta y completa.
   ===================================================================================== */

/* ---------- Ritmo general ---------- */
/* El :not(#gf2) suma el peso de un id: la version 1 pinta los fondos con dos ids */
html body:has(#divBloqueCredenciales) .content-wrapper > section[id^="divBloque"]:not(#gf2){
    position: relative;
    background-color: transparent !important;
}
html body:has(#divBloqueCredenciales) .content-wrapper > section[id^="divBloque"]:not(#divBloqueCredenciales):not(#divBloqueCierre):not(#divBloqueCicloAnimado){
    background-image: none !important;
    padding-top: 112px !important;
    padding-bottom: 112px !important;
}
html body:has(#divBloqueCredenciales) .content-wrapper > section[id^="divBloque"] > .container,
html body:has(#divBloqueCredenciales) #divBloqueDestacados .container-sm{
    max-width: 1240px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}
html body:has(#divBloqueCredenciales) .content-wrapper > section[id^="divBloque"]:not(#divBloqueCicloAnimado):not(#divBloqueCierre) p{
    color: var(--v2-texto);
}

/* Los titulares de bloque, siempre a la izquierda */
html body:has(#divBloqueCredenciales) section[id^="divBloque"] .row.text-center > .col-12,
html body:has(#divBloqueCredenciales) #divBloqueCategorias .row > .text-center{
    display: block !important;
    text-align: left !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}
html body:has(#divBloqueCredenciales) #divBloqueCategorias h2.display-4{
    padding: 0 !important;
    margin-bottom: 56px !important;
}

/* Titulares que suben por renglones, cada uno desde abajo de su mascara (como el titulo del
   bloque animado). custom.js los parte y, al terminar, les devuelve su HTML original. */
html body:has(#divBloqueCredenciales) :is(.gf2-titulo-espera, .gf2-entra-espera){
    opacity: 0;
}
html body:has(#divBloqueCredenciales) .gf2-renglones .gf2-mascara{
    display: block;
    overflow: hidden;
    padding-bottom: .12em;
    margin-bottom: -.12em;
}
html body:has(#divBloqueCredenciales) .gf2-renglones .gf2-renglon{
    display: block;
    transform: translateY(110%);
    transition: transform 1.1s cubic-bezier(.23, 1, .32, 1);
}
html body:has(#divBloqueCredenciales) .gf2-renglones.gf2-visto .gf2-renglon{
    transform: none;
}

/* Textos y fotos que entran desde su costado, como en Envasado llave en mano */
html body:has(#divBloqueCredenciales) :is(.gf2-entra-izq, .gf2-entra-der, .gf2-entra-arriba){
    opacity: 0;
    transition: opacity .7s ease, transform .8s var(--v2-curva);
    transition-delay: calc(var(--gf2-i, 0) * .08s);
}
html body:has(#divBloqueCredenciales) .gf2-entra-izq{
    transform: translateX(-30px);
}
html body:has(#divBloqueCredenciales) .gf2-entra-der{
    transform: translateX(30px);
}
html body:has(#divBloqueCredenciales) .gf2-entra-arriba{
    transform: translateY(30px);
}
html body:has(#divBloqueCredenciales) :is(.gf2-entra-izq, .gf2-entra-der, .gf2-entra-arriba).gf2-visto{
    opacity: 1;
    transform: none;
}
/* la fila entera ya no se desliza con el theme: ahora entra cada columna por su lado */
html body:has(#divBloqueCredenciales) .gf2-sin-cue[data-cue]{
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Fotos que se abren desde adentro de su marco */
html body:has(#divBloqueCredenciales) .gf2-revela-foto{
    clip-path: inset(10% 10% 10% 10% round var(--v2-radio));
    transition: clip-path 1.4s var(--v2-curva);
}
html body:has(#divBloqueCredenciales) .gf2-revela-foto img{
    transform: scale(1.16);
    transition: transform 1.6s var(--v2-curva);
}
html body:has(#divBloqueCredenciales) .gf2-revela-foto.gf2-visto{
    clip-path: inset(0 0 0 0 round var(--v2-radio));
}
html body:has(#divBloqueCredenciales) .gf2-revela-foto.gf2-visto img{
    transform: none;
}

/* ---------- Franja de confianza (Credenciales): ficha tecnica ----------
   Un panel blanco con las cuatro garantias como columnas de una ficha, separadas por lineas
   finas y sin iconos. Al pasar el mouse la linea de arriba de la columna se llena de verde. */
html body:has(#divBloqueCredenciales) #divBloqueCredenciales:not(#gf2){
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 14px var(--v2-margen) 0 !important;
}
html body:has(#divBloqueCredenciales) #divBloqueCredenciales > .container{
    max-width: none !important;
    padding: 0 !important;
}
html body:has(#divBloqueCredenciales) #divBloqueCredenciales .row:not(#gf2){
    margin: 0 !important;
}
html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-container:not(#gf2){
    flex: 1 1 100% !important;
    min-width: 0;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper{
    overflow: hidden;
    border-radius: var(--v2-radio);
    background: #ffffff;
    border: 1px solid var(--v2-linea);
}
html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-wrapper{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    transform: none !important;
}
html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide:not(#gf2){
    position: relative;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 40px 36px 38px !important;
    background: transparent !important;
    border: 0 !important;
    border-left: 1px solid var(--v2-linea) !important;
    box-shadow: none !important;
    text-align: left !important;
}
html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide:not(#gf2):first-child{
    border-left: 0 !important;
}
/* Al pasar el mouse la celda toma un fondo apenas mas oscuro y su dibujo se vuelve a trazar
   desde cero, linea por linea (las punteadas aparecen al final). */
html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide:not(#gf2){
    transition: background-color .45s ease !important;
}
@media (hover: hover) {
    html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide:not(#gf2):hover{
        background-color: var(--v2-pagina) !important;
    }
    html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide:hover .gf2-trazo{
        animation: gf2-redibujo 1.3s var(--v2-curva) both;
        animation-delay: calc(var(--gf2-n, 0) * .03s);
    }
    html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide:hover .gf2-trazo-punteado{
        animation: gf2-aparece .6s ease .7s both;
    }
}
@keyframes gf2-redibujo{
    from{ stroke-dashoffset: var(--gf2-largo); }
    to{ stroke-dashoffset: 0; }
}
@keyframes gf2-aparece{
    from{ opacity: 0; }
    to{ opacity: 1; }
}
html body:has(#divBloqueCredenciales) #divBloqueCredenciales .banner-icon{
    display: none !important;
}
/* El dibujo de cada garantia: plano tecnico de linea fina, en el lenguaje de la ficha. Se sube
   desde el panel (Banners, tipo SVG) y se dibuja solo cuando la ficha entra en pantalla. */
html body:has(#divBloqueCredenciales) #divBloqueCredenciales .banner-icon-svg-wrapper{
    display: block !important;
    height: 92px;
    margin: 0 0 28px !important;
    color: var(--v2-verde-medio);
}
html body:has(#divBloqueCredenciales) #divBloqueCredenciales .banner-icon-svg{
    display: block;
    width: auto !important;
    height: 100% !important;
    max-width: 100%;
    overflow: visible;
    stroke-width: 1.7;
}
html body:has(#divBloqueCredenciales) #divBloqueCredenciales .gf2-trazo{
    stroke-dasharray: var(--gf2-largo);
    stroke-dashoffset: var(--gf2-largo);
    transition: stroke-dashoffset 1.6s var(--v2-curva);
    transition-delay: calc(var(--gf2-i, 0) * .12s + var(--gf2-n, 0) * .05s + .15s);
}
html body:has(#divBloqueCredenciales) #divBloqueCredenciales .gf2-trazo-punteado{
    opacity: 0;
    transition: opacity .8s ease;
    transition-delay: calc(var(--gf2-i, 0) * .12s + 1.1s);
}
html body:has(#divBloqueCredenciales) #divBloqueCredenciales .gf2-visto .gf2-trazo{
    stroke-dashoffset: 0;
}
html body:has(#divBloqueCredenciales) #divBloqueCredenciales .gf2-visto .gf2-trazo-punteado{
    opacity: 1;
}
html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide > div:not(.banner-icon-svg-wrapper){
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide h4:not(#gf2){
    font-size: clamp(18px, 1.45vw, 21px) !important;
    font-weight: 600 !important;
    letter-spacing: -.02em !important;
    line-height: 1.25 !important;
    color: var(--v2-tinta) !important;
    -webkit-text-fill-color: var(--v2-tinta) !important;
    margin: 0 0 10px !important;
    transition: color .3s ease, -webkit-text-fill-color .3s ease;
}
@media (hover: hover) {
    html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide:hover h4:not(#gf2){
        color: var(--v2-verde) !important;
        -webkit-text-fill-color: var(--v2-verde) !important;
    }
}
html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide p:not(#gf2){
    max-width: 30ch;
    margin: 0 !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: var(--v2-texto) !important;
    -webkit-text-fill-color: var(--v2-texto) !important;
}

/* ---------- Categorias ---------- */
html body:has(#divBloqueCredenciales) #divBloqueCategorias .categorias-grilla figure{
    border-radius: var(--v2-radio-tarjeta) !important;
    overflow: hidden;
}

/* ---------- Secciones apiladas ----------
   Paneles redondeados despegados de los bordes. custom.js calcula --gf2-tope para que cada uno
   se quede quieto cuando su borde de abajo llega al de la pantalla, y --gf2-cubierto (0 a 1)
   mientras el siguiente le pasa por encima. */
html body:has(#divBloqueCredenciales) section.gf2-apilada{
    position: sticky !important;
    top: var(--gf2-tope, 0px);
    margin: 14px var(--v2-margen) 0 !important;
    border-radius: var(--v2-radio);
    transform-origin: 50% 0;
    transform: scale(calc(1 - var(--gf2-cubierto, 0) * .05));
    box-shadow: 0 -24px 48px -32px rgba(15, 28, 17, .28);
}
html body:has(#divBloqueCredenciales) section.gf2-apilada::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #0a140b;
    opacity: calc(var(--gf2-cubierto, 0) * .38);
    pointer-events: none;
    z-index: 5;
}
html body:has(#divBloqueCredenciales) #divBloqueEnfoque.gf2-apilada:not(#gf2){
    background-color: #ffffff !important;
}
html body:has(#divBloqueCredenciales) #divBloqueDestacados.gf2-apilada:not(#gf2){
    background-color: var(--v2-panel) !important;
}
html body:has(#divBloqueCredenciales) #divBloqueCatalogo.gf2-apilada:not(#gf2){
    background-color: #ffffff !important;
}
html body:has(#divBloqueCredenciales) #divBloqueCalidad.gf2-apilada:not(#gf2){
    background-color: var(--v2-panel) !important;
}
/* Lo que nos diferencia: panel blanco propio que le pasa por encima a Calidad. Las dos columnas
   (titulo y filas) caen en las mismas lineas que la foto y el texto de Calidad. Como es mas bajo
   que la pantalla, el hueco que queda entre este panel y el Cierre lo rellena el Cierre con el
   fondo de la pagina (ver abajo): si no, por ahi se asomaria Calidad. */
html body:has(#divBloqueCredenciales) .content-wrapper > #divBloqueValores:not(#gf2){
    z-index: 2 !important;
    margin: 14px var(--v2-margen) 0 !important;
    border-radius: var(--v2-radio) !important;
    background-color: #ffffff !important;
}
@media (min-width: 992px) {
    html body:has(#divBloqueCredenciales) #divBloqueValores:not(#gf2) > .container{
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 0 !important;
        align-items: start !important;
    }
    html body:has(#divBloqueCredenciales) #divBloqueValores:not(#gf2) > .container > .row{
        margin: 0 !important;
        width: auto !important;
    }
    html body:has(#divBloqueCredenciales) #divBloqueValores:not(#gf2) > .container > .row > [class*="col"]{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    html body:has(#divBloqueCredenciales) #divBloqueValores:not(#gf2) > .container > .row:not(.text-center){
        padding-left: 40px !important;
    }
    /* el titulo acompaña mientras pasan las filas: la columna izquierda no queda vacia */
    html body:has(#divBloqueCredenciales) #divBloqueValores:not(#gf2) > .container > .row.text-center{
        position: sticky;
        top: 130px;
    }
}
html body:has(#divBloqueCredenciales) #divBloqueCicloAnimado.gf2-apilada{
    overflow: hidden;
}
/* lo que sigue a la ultima apilada le pasa por encima */
html body:has(#divBloqueCredenciales) .content-wrapper > section.gf2-apilada ~ section:not(.gf2-apilada):not(#gf2){
    position: relative;
    z-index: 1;
    background-color: var(--v2-pagina) !important;
}
/* un panel que ya quedo tapado del todo no se dibuja: asi no se asoma por los huecos de abajo.
   Va con opacidad y no con visibility porque adentro hay partes que se fuerzan visibles (la fila
   de Catalogo, por ejemplo) y esas se asomaban igual. */
html body:has(#divBloqueCredenciales) section.gf2-apilada.gf2-tapada{
    opacity: 0 !important;
    pointer-events: none;
}
html body:has(#divBloqueCredenciales) .content-wrapper > section.gf2-apilada + section:not(.gf2-apilada){
    margin-top: 14px;
    border-radius: var(--v2-radio) var(--v2-radio) 0 0;
    box-shadow: 0 -24px 48px -32px rgba(15, 28, 17, .28);
}

/* ---------- Proceso (Envasado llave en mano) ---------- */
html body:has(#divBloqueCredenciales) section.gf2-proceso > .container > h3.display-5{
    max-width: 24ch;
    margin-bottom: 64px !important;
}
html body:has(#divBloqueCredenciales) section.gf2-proceso .row{
    align-items: stretch !important;
}
html body:has(#divBloqueCredenciales) section.gf2-proceso .row > div > figure{
    height: 100%;
    min-height: 480px;
    margin: 0;
    border-radius: var(--v2-radio);
    overflow: hidden;
}
html body:has(#divBloqueCredenciales) section.gf2-proceso .row > div > figure img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
html body:has(#divBloqueCredenciales) section.gf2-proceso .accordion-wrapper{
    counter-reset: gf2-paso;
    border-bottom: 1px solid var(--v2-linea);
}
html body:has(#divBloqueCredenciales) section.gf2-proceso .accordion-item{
    position: relative;
    counter-increment: gf2-paso;
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--v2-linea) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
/* la linea del paso abierto se llena mientras corre el avance automatico */
html body:has(#divBloqueCredenciales) section.gf2-proceso .gf2-paso-linea{
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--v2-verde-medio);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}
html body:has(#divBloqueCredenciales) section.gf2-proceso .accordion-item.gf2-corriendo .gf2-paso-linea{
    animation: gf2-avance-paso 6s linear forwards;
}
@keyframes gf2-avance-paso{
    from{ transform: scaleX(0); }
    to{ transform: scaleX(1); }
}
html body:has(#divBloqueCredenciales) section.gf2-proceso .accordion-item .card-header{
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
html body:has(#divBloqueCredenciales) section.gf2-proceso .accordion-button{
    position: relative;
    display: flex !important;
    align-items: baseline;
    gap: 22px;
    width: 100%;
    padding: 26px 60px 26px 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: left;
    font-size: clamp(20px, 1.7vw, 25px) !important;
    font-weight: 600 !important;
    letter-spacing: -.02em !important;
    line-height: 1.25 !important;
    color: var(--v2-tinta) !important;
    -webkit-text-fill-color: var(--v2-tinta) !important;
    transition: color .3s ease, -webkit-text-fill-color .3s ease;
}
html body:has(#divBloqueCredenciales) section.gf2-proceso .accordion-button.collapsed{
    color: var(--v2-tono) !important;
    -webkit-text-fill-color: var(--v2-tono) !important;
}
html body:has(#divBloqueCredenciales) section.gf2-proceso .accordion-button.collapsed:hover{
    color: var(--v2-tinta) !important;
    -webkit-text-fill-color: var(--v2-tinta) !important;
}
/* el numero del paso, donde el theme ponia su icono */
html body:has(#divBloqueCredenciales) section.gf2-proceso .accordion-button::before{
    content: counter(gf2-paso, decimal-leading-zero) !important;
    position: static !important;
    transform: none !important;
    flex: 0 0 auto;
    width: 26px;
    font-family: var(--v2-mono) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: var(--v2-tono) !important;
    -webkit-text-fill-color: var(--v2-tono) !important;
    margin: 0 !important;
}
/* el signo de mas, dibujado: se vuelve una cruz al abrir */
html body:has(#divBloqueCredenciales) section.gf2-proceso .accordion-button::after{
    content: "" !important;
    position: absolute !important;
    right: 0;
    top: 50%;
    width: 34px !important;
    height: 34px !important;
    margin: -17px 0 0 !important;
    border-radius: 50%;
    border: 1px solid var(--v2-linea);
    background:
        linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat !important;
    color: var(--v2-tinta);
    transform: rotate(45deg) !important;
    transition: transform .45s var(--v2-curva), background-color .3s ease, border-color .3s ease, color .3s ease;
}
html body:has(#divBloqueCredenciales) section.gf2-proceso .accordion-button:not(.collapsed)::after{
    background-color: var(--v2-tinta) !important;
    border-color: var(--v2-tinta);
    color: #ffffff;
}
html body:has(#divBloqueCredenciales) section.gf2-proceso .accordion-button.collapsed::after{
    transform: rotate(0deg) !important;
}
html body:has(#divBloqueCredenciales) section.gf2-proceso .accordion-item .card-body{
    padding: 0 60px 30px 48px !important;
}
html body:has(#divBloqueCredenciales) section.gf2-proceso .accordion-item .card-body p{
    font-size: 16px !important;
    line-height: 1.65 !important;
    max-width: 46ch;
    margin: 0 !important;
}

/* ---------- Ciclo (bloque animado): panel oscuro ---------- */
html body:has(#divBloqueCredenciales) #divBloqueCicloAnimado :is(h1, h2, h3, .display-4, .display-5){
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body:has(#divBloqueCredenciales) :is(#divBloqueCicloAnimado, #divBloqueCierre) .gf2-tono{
    color: rgba(255, 255, 255, .55) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .55) !important;
}

/* ---------- Envases destacados ---------- */
html body:has(#divBloqueCredenciales) #divBloqueDestacados .container-sm{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
html body:has(#divBloqueCredenciales) #divBloqueDestacados .container-sm > .col-12:first-child{
    align-items: flex-end !important;
    margin-bottom: 48px !important;
}
html body:has(#divBloqueCredenciales) #divBloqueDestacados .container-sm > .col-12:first-child > a{
    align-items: center;
    gap: 4px;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(15, 28, 17, .16);
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--v2-tinta) !important;
    -webkit-text-fill-color: var(--v2-tinta) !important;
    transition: background-color .25s ease, color .25s ease;
}
html body:has(#divBloqueCredenciales) #divBloqueDestacados .container-sm > .col-12:first-child > a:hover{
    background: var(--v2-tinta);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body:has(#divBloqueCredenciales) #divBloqueDestacados .container-sm > .col-12:first-child > a i{
    display: none;
}

/* ---------- Lo que nos diferencia ---------- */
html body:has(#divBloqueCredenciales) #divBloqueValores .pricing-wrapper h4{
    color: var(--v2-tinta) !important;
    -webkit-text-fill-color: var(--v2-tinta) !important;
    font-weight: 600 !important;
    letter-spacing: -.02em !important;
}

/* Las aplicaciones que el envase no tiene: sobre el gris del panel eran casi invisibles. Van en
   blanco con borde, apagadas pero legibles, para que las marcadas sigan resaltando. */
html body:has(#divBloqueCredenciales) #divBloqueDestacados .envase-ap:not(.envase-ap-on):not(#gf2){
    background-color: rgba(255, 255, 255, .75) !important;
    border: 1px solid rgba(15, 28, 17, .14) !important;
    color: var(--v2-tono) !important;
    -webkit-text-fill-color: var(--v2-tono) !important;
}

/* Las lineas de la tabla del envase: sobre el gris del panel las de la version 1 no se veian */
html body:has(#divBloqueCredenciales) #divBloqueDestacados table :is(th, td):not(#gf2){
    border-bottom: 1px solid rgba(15, 28, 17, .14) !important;
}

/* ---------- Listas numeradas (Calidad) ----------
   Cada punto lleva su numero y la linea de arriba se dibuja al entrar la lista. La linea verde
   de la version 1 (al pasar el mouse) queda encima. */
html body:has(#divBloqueCredenciales) .bloque-puntos{
    counter-reset: gf2-punto;
}
html body:has(#divBloqueCredenciales) .bloque-puntos li{
    counter-increment: gf2-punto;
    padding: 18px 0 18px 46px !important;
    border-top: 0 !important;
    background: linear-gradient(rgba(15, 28, 17, .14), rgba(15, 28, 17, .14)) left top / 100% 1px no-repeat;
    font-size: 15.5px !important;
    color: var(--v2-texto) !important;
}
html body:has(#divBloqueCredenciales) .bloque-puntos li strong{
    color: var(--v2-tinta) !important;
    -webkit-text-fill-color: var(--v2-tinta) !important;
}
html body:has(#divBloqueCredenciales) .bloque-puntos li > span:first-child{
    top: 21px !important;
}
html body:has(#divBloqueCredenciales) .bloque-puntos li > span:first-child i{
    display: none !important;
}
html body:has(#divBloqueCredenciales) .bloque-puntos li > span:first-child::before{
    content: counter(gf2-punto, decimal-leading-zero);
    font-family: var(--v2-mono);
    font-size: 13px;
    color: var(--v2-tono);
}
html body:has(#divBloqueCredenciales) .gf2-revela-lista.bloque-puntos li{
    background-size: 0% 1px;
    transition: background-size 1.1s var(--v2-curva);
}
html body:has(#divBloqueCredenciales) .gf2-revela-lista.bloque-puntos li:nth-child(2){ transition-delay: .12s; }
html body:has(#divBloqueCredenciales) .gf2-revela-lista.bloque-puntos li:nth-child(3){ transition-delay: .24s; }
html body:has(#divBloqueCredenciales) .gf2-revela-lista.bloque-puntos li:nth-child(4){ transition-delay: .36s; }
html body:has(#divBloqueCredenciales) .gf2-revela-lista.bloque-puntos li:nth-child(5){ transition-delay: .48s; }
html body:has(#divBloqueCredenciales) .gf2-revela-lista.bloque-puntos.gf2-visto li{
    background-size: 100% 1px;
}
/* en el proceso, las lineas entre pasos tambien se dibujan */
html body:has(#divBloqueCredenciales) section.gf2-proceso .gf2-revela-lista .accordion-item{
    border-top-color: transparent !important;
    background: linear-gradient(var(--v2-linea), var(--v2-linea)) left top / 0% 1px no-repeat !important;
    transition: background-size 1.1s var(--v2-curva);
}
html body:has(#divBloqueCredenciales) section.gf2-proceso .gf2-revela-lista .accordion-item:nth-child(2){ transition-delay: .12s; }
html body:has(#divBloqueCredenciales) section.gf2-proceso .gf2-revela-lista .accordion-item:nth-child(3){ transition-delay: .24s; }
html body:has(#divBloqueCredenciales) section.gf2-proceso .gf2-revela-lista .accordion-item:nth-child(4){ transition-delay: .36s; }
html body:has(#divBloqueCredenciales) section.gf2-proceso .gf2-revela-lista.gf2-visto .accordion-item{
    background-size: 100% 1px !important;
}

/* ---------- Cierre: la foto se mete en su marco y encima va el panel de contacto ----------
   --gf2-marco va de 0 (la foto ocupa todo el ancho, sin redondeo) a 1 (enmarcada). */
html body:has(#divBloqueCredenciales) #divBloqueCierre.gf2-cierre{
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(76vh, 660px);
    margin-top: 14px;
    padding: 0 !important;
    overflow: hidden;
    background-color: var(--v2-pagina) !important;
    /* un marco del color de la pagina alrededor, estirado hacia arriba: tapa el hueco con el panel
       de arriba y los recortes de sus esquinas, por donde se asomaba el bloque apilado de atras.
       Lo que nos diferencia va por encima (z-index 2), asi el marco no lo pisa. */
    box-shadow: 0 -32px 0 var(--v2-margen) var(--v2-pagina);
}
/* El recorte que mete la foto en su marco va en la capa de la foto y no en el bloque (en el
   bloque tambien recortaria ese marco). El zoom va en la imagen de adentro: si fuera en la misma
   capa, agrandaria tambien el recorte y el marco recien se veria al final. */
html body:has(#divBloqueCredenciales) #divBloqueCierre .gf2-cierre-foto{
    position: absolute;
    inset: 0;
    overflow: hidden;
    clip-path: inset(0 calc(var(--gf2-marco, 1) * var(--v2-margen)) round calc(var(--gf2-marco, 1) * var(--v2-radio)));
}
html body:has(#divBloqueCredenciales) #divBloqueCierre .gf2-cierre-imagen{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(calc(1 + (1 - var(--gf2-marco, 1)) * .16));
    will-change: transform;
}
html body:has(#divBloqueCredenciales) #divBloqueCierre .gf2-cierre-foto::after{
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(6, 16, 8, .6) 0%, rgba(6, 16, 8, 0) 60%),
        rgba(14, 44, 18, .42);
}
html body:has(#divBloqueCredenciales) #divBloqueCierre > .container{
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: 120px !important;
    padding-bottom: 40px !important;
}
html body:has(#divBloqueCredenciales) #divBloqueCierre .row.text-center > .col-12{
    display: block !important;
    max-width: 600px !important;
    padding: 44px 44px 40px !important;
    border-radius: 20px;
    background: rgba(246, 247, 243, .9);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    text-align: left !important;
}
html body:has(#divBloqueCredenciales) #divBloqueCierre h3.display-4{
    font-size: clamp(32px, 3.2vw, 46px) !important;
    margin-bottom: 18px !important;
    max-width: 16ch;
    color: var(--v2-tinta) !important;
    -webkit-text-fill-color: var(--v2-tinta) !important;
}
html body:has(#divBloqueCredenciales) #divBloqueCierre .row.text-center > .col-12 > p{
    color: var(--v2-texto) !important;
    -webkit-text-fill-color: var(--v2-texto) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    max-width: none !important;
    margin: 0 0 26px !important;
    text-align: left !important;
}
html body:has(#divBloqueCredenciales) #divBloqueCierre .row.text-center > .col-12 > p:has(.btn){
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start !important;
    margin: 0 !important;
}
html body:has(#divBloqueCredenciales) #divBloqueCierre .btn{
    margin: 0 !important;
    height: auto !important;
}
html body:has(#divBloqueCredenciales) #divBloqueCierre .btn.btn-primary{
    background: var(--v2-verde) !important;
    border-color: var(--v2-verde) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body:has(#divBloqueCredenciales) #divBloqueCierre .btn.btn-primary:hover{
    background: var(--v2-tinta) !important;
    border-color: var(--v2-tinta) !important;
}
html body:has(#divBloqueCredenciales) #divBloqueCierre .btn.btn-outline-primary{
    background: transparent !important;
    border: 1px solid rgba(15, 28, 17, .2) !important;
    color: var(--v2-tinta) !important;
    -webkit-text-fill-color: var(--v2-tinta) !important;
}
html body:has(#divBloqueCredenciales) #divBloqueCierre .btn.btn-outline-primary:hover{
    background: var(--v2-tinta) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ---------- Pie: panel oscuro con la marca gigante ---------- */
html body footer.text-inverse{
    margin: 14px var(--v2-margen) var(--v2-margen) !important;
    border-radius: var(--v2-radio);
    background: var(--v2-tinta) !important;
    overflow: hidden;
    position: relative;
}
html body footer.text-inverse::after{
    content: none !important;
}
html body footer.text-inverse .container{
    max-width: 1240px !important;
    padding: 72px 40px 28px !important;
}
@media (min-width: 768px) {
    html body footer.text-inverse .footer-desktop{
        display: grid !important;
        grid-template-columns: 1fr 1.5fr !important;
        grid-column-gap: 72px !important;
        justify-items: stretch !important;
        align-items: start !important;
        padding-bottom: 0 !important;
    }
    html body footer.text-inverse .footer-desktop > .col-lg-3:first-child{
        grid-column: 1 !important;
    }
    html body footer.text-inverse .footer-desktop > .col-auto{
        grid-column: 2 !important;
        grid-template-columns: 1fr 1fr !important;
        grid-column-gap: 32px !important;
        align-items: start !important;
    }
}
html body footer.text-inverse .footer-logo{
    content: url('../../../img/greenfamily2/logo-white-silueta.png');
    height: 60px !important;
}
html body footer.text-inverse .footer-desktop > .col-lg-3:first-child .widget{
    text-align: left !important;
}
html body footer.text-inverse .footer-desktop .widget a:has(> .footer-logo)::after{
    margin-left: 0 !important;
    text-align: left !important;
    max-width: 340px !important;
    color: rgba(255, 255, 255, .56) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .56) !important;
    font-family: var(--v2-sans) !important;
    font-size: 14.5px !important;
}
html body footer.text-inverse :is(.footer-desktop, .footer-mobile) :is(.widget, .widget *:not(i), .puntos-venta-footer, .puntos-venta-footer *:not(i), .accordion-item, .accordion-item *:not(i)){
    color: rgba(255, 255, 255, .72) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .72) !important;
}
html body footer.text-inverse :is(.footer-desktop, .footer-mobile) :is(.footer-titulo, .widget-title, strong){
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-transform: none !important;
    letter-spacing: -.01em !important;
    font-size: 17px !important;
    font-weight: 600 !important;
}
html body footer.text-inverse :is(.footer-desktop, .footer-mobile) i{
    color: var(--v2-lima) !important;
    -webkit-text-fill-color: var(--v2-lima) !important;
}
html body footer.text-inverse :is(.footer-desktop, .footer-mobile) a:hover,
html body footer.text-inverse :is(.footer-desktop, .footer-mobile) a:hover *{
    color: var(--v2-lima) !important;
    -webkit-text-fill-color: var(--v2-lima) !important;
}
html body footer.text-inverse .puntos-venta-footer-mapa{
    width: 100% !important;
    height: 220px !important;
}
html body footer.text-inverse .puntos-venta-footer-mapa .gmap_canvas{
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow: none !important;
}
html body footer.text-inverse .puntos-venta-footer-mapa iframe{
    filter: grayscale(.4) contrast(.95);
}
html body footer.text-inverse .footer-hr,
html body footer.text-inverse .footer-desktop > .col-12 .footer-hr{
    border-color: rgba(255, 255, 255, .12) !important;
    margin: 48px 0 20px !important;
}
html body footer.text-inverse .footer-desktop > .col-12{
    margin-top: 0 !important;
}
html body footer.text-inverse .footer-desktop > .d-flex{
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center !important;
    align-items: center !important;
}
html body footer.text-inverse .footer-desktop > .d-flex > .pie-pagina{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 6px 24px !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}
html body footer.text-inverse .footer-desktop > .d-flex > .pie-pagina{
    flex: 0 1 auto !important;
    width: auto !important;
}
html body footer.text-inverse .footer-desktop > .d-flex > .pie-pagina > span{
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    align-items: center !important;
}
html body footer.text-inverse .footer-desktop > .d-flex > .pie-pagina p{
    margin-bottom: 0 !important;
}
html body footer.text-inverse .pie-pagina,
html body footer.text-inverse .pie-pagina *,
html body footer.text-inverse .core-devs,
html body footer.text-inverse .core-devs *{
    color: rgba(255, 255, 255, .5) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .5) !important;
    font-size: 13px !important;
}
/* la marca, gigante y cortada por el borde de abajo */
html body footer.text-inverse .gf2-marca{
    display: flex;
    justify-content: center;
    margin: 12px 0 -.2em;
    padding: 0 12px;
    font-family: var(--v2-sans);
    font-size: 15vw;
    font-weight: 700;
    letter-spacing: -.065em;
    line-height: .86;
    white-space: nowrap;
    color: rgba(255, 255, 255, .05);
    pointer-events: none;
    user-select: none;
}
html body footer.text-inverse .gf2-marca > span{
    display: inline-block;
    transition: transform 1.2s var(--v2-curva), opacity 1s ease;
    transition-delay: calc(var(--gf2-i, 0) * .04s);
}
html body footer.text-inverse.gf2-marca-oculta .gf2-marca > span{
    transform: translateY(60%);
    opacity: 0;
}

/* ---------- Botones de los bloques: pastilla, verde profundo o en linea ---------- */
html body:has(#divBloqueCredenciales) section[id^="divBloque"] .btn:not(.btn-close):not(.btn-circle){
    height: auto !important;
    border-radius: 999px !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}
html body:has(#divBloqueCredenciales) section[id^="divBloque"] .btn.btn-primary{
    background: var(--v2-verde) !important;
    border: 1px solid var(--v2-verde) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body:has(#divBloqueCredenciales) section[id^="divBloque"] .btn.btn-primary:hover{
    background: var(--v2-tinta) !important;
    border-color: var(--v2-tinta) !important;
}
html body:has(#divBloqueCredenciales) section[id^="divBloque"] .btn.btn-outline-primary{
    background: transparent !important;
    border: 1px solid rgba(15, 28, 17, .2) !important;
    color: var(--v2-tinta) !important;
    -webkit-text-fill-color: var(--v2-tinta) !important;
}
html body:has(#divBloqueCredenciales) section[id^="divBloque"] .btn.btn-outline-primary:hover{
    background: var(--v2-tinta) !important;
    border-color: var(--v2-tinta) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* La foto de cada envase destacado, redondeada como el resto */
html body:has(#divBloqueCredenciales) #divBloqueDestacados figure,
html body:has(#divBloqueCredenciales) #divBloqueDestacados figure img{
    border-radius: var(--v2-radio-tarjeta) !important;
}

/* ---------- Celular y tablet ---------- */
@media (max-width: 991.98px) {
    /* el menu flotante, mas pegado arriba y un poco mas ancho */
    :root{
        --mf-top: 13px;
    }
    html body .navbar.navbar-flotante{
        width: calc(100% - 1.5rem) !important;
    }
    html body:has(#divBloqueCredenciales) .content-wrapper > section[id^="divBloque"]:not(#divBloqueCredenciales):not(#divBloqueCierre):not(#divBloqueCicloAnimado){
        padding-top: 72px !important;
        padding-bottom: 72px !important;
    }
    html body:has(#divBloqueCredenciales) .content-wrapper > section[id^="divBloque"] > .container,
    html body:has(#divBloqueCredenciales) #divBloqueDestacados .container-sm{
        padding-left: 22px !important;
        padding-right: 22px !important;
    }
    /* en el celular todos los paneles llevan el mismo margen que la portada */
    html body:has(#divBloqueCredenciales) section.gf2-apilada{
        border-radius: 20px;
    }
    /* En el celular los paneles son mas altos que la pantalla: se quedan quietos cuando su borde
       de abajo llega al de la pantalla y el siguiente ya empieza a subir. Con mas aire abajo, el
       siguiente pasa primero por encima del espacio vacio y no del ultimo contenido. (La clase
       extra es para ganarle al relleno general de los bloques, que lleva tres ids en sus :not.) */
    html body:has(#divBloqueCredenciales) .content-wrapper > section.gf2-apilada[id^="divBloque"]:not(#divBloqueCredenciales):not(#divBloqueCierre):not(#gf2),
    html body:has(#divBloqueCredenciales) .content-wrapper > #divBloqueCicloAnimado.gf2-apilada:not(#gf2):not(#gf2b):not(#gf2c){
        padding-bottom: max(170px, 22vh) !important;
    }
    html body:has(#divBloqueCredenciales) #divBloqueCredenciales:not(#gf2){
        padding: var(--v2-margen) var(--v2-margen) 0 !important;
    }
    html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-wrapper{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide:not(#gf2){
        padding: 26px 20px 24px !important;
    }
    html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide:not(#gf2):nth-child(odd){
        border-left: 0 !important;
    }
    html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide:not(#gf2):nth-child(n+3){
        border-top: 1px solid var(--v2-linea) !important;
    }
    html body:has(#divBloqueCredenciales) section.gf2-proceso > .container > h3.display-5{
        margin-bottom: 36px !important;
    }
    html body:has(#divBloqueCredenciales) section.gf2-proceso .row > div > figure{
        min-height: 300px;
        height: 300px;
    }
    html body:has(#divBloqueCredenciales) section.gf2-proceso .accordion-item .card-body{
        padding: 0 0 26px 48px !important;
    }
    /* En el celular el cierre es una tarjeta blanca como los demas paneles: la foto va como franja
       arriba (apaisada, como es) y el texto debajo, sin montarse. Estirada a lo alto la foto
       quedaba recortada y el panel encimado parecia un error. */
    html body:has(#divBloqueCredenciales) #divBloqueCierre.gf2-cierre:not(#gf2){
        display: block;
        min-height: 0;
        margin: var(--v2-margen) var(--v2-margen) 0 !important;
        border-radius: 20px;
        clip-path: none;
        background-color: #ffffff !important;
    }
    html body:has(#divBloqueCredenciales) #divBloqueCierre .gf2-cierre-foto{
        position: relative;
        inset: auto;
        height: 210px;
        clip-path: none;
    }
    html body:has(#divBloqueCredenciales) #divBloqueCierre .gf2-cierre-imagen{
        transform: none;
    }
    html body:has(#divBloqueCredenciales) #divBloqueCierre .gf2-cierre-foto::after{
        background: rgba(14, 44, 18, .25);
    }
    html body:has(#divBloqueCredenciales) #divBloqueCierre > .container{
        margin: 0 !important;
        padding: 0 !important;
    }
    html body:has(#divBloqueCredenciales) #divBloqueCierre > .container > .row{
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    html body:has(#divBloqueCredenciales) #divBloqueCierre .row.text-center > .col-12{
        max-width: none !important;
        padding: 28px 22px 26px !important;
        border-radius: 0;
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    html body:has(#divBloqueCredenciales) #divBloqueCredenciales .banner-icon-svg-wrapper{
        height: 64px;
        margin-bottom: 18px !important;
    }
    html body footer.text-inverse{
        margin: var(--v2-margen) !important;
        border-radius: 20px;
    }
    html body footer.text-inverse .container{
        padding: 52px 22px 22px !important;
    }
    html body footer.text-inverse .footer-mobile{
        padding-bottom: 0 !important;
    }
    /* la version 1 bajaba el copyright 200px para dejarlo sobre la foto de tierra, que aca no esta */
    html body footer.text-inverse .footer-mobile > .pie-pagina:not(#gf2){
        margin-top: 12px !important;
    }
}