/* ============================================================
   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|#ffffff */
html body:not(#\9):not(#\9){
	background-color: #ffffff !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: text-decoration queda siempre pegado y
   centrado bajo el texto (un pseudo-elemento con left/bottom fijos se corria,
   porque el nav-link tiene padding distinto a cada lado y por breakpoint).
   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{
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
    transition: text-decoration-color 0.25s ease, 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{
    text-decoration-color: var(--greenfamily-green);
}

.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;
}

/* Capacidades: encabezado centrado, sin volanta. */
#divBloqueValores .row.text-center > .col-12{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
}

#divBloqueValores .display-4{
    grid-row: 1;
    max-width: 22ch;
}

#divBloqueValores .row.text-center > .col-12 > p:not(.lead){
    grid-column: 1;
    grid-row: 2;
    max-width: 62ch;
    margin-top: 20px;
    text-align: center;
}

/* ====================== 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,
#divBloqueValores .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,
#divBloqueValores .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 > *,
#divBloqueValores .pricing-wrapper > .row > div > *{
    grid-column: 1 / -1;
}

/* El circulo del icono que emite el modelo 5 */
#divBloqueCiclo .bloque-item-icono,
#divBloqueValores .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,
#divBloqueValores .pricing-wrapper > .row > div > .bloque-item-icono{
    grid-column: 1;
}

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

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

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

#divBloqueCiclo h4,
#divBloqueValores 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,
#divBloqueValores 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)     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/greenfamily/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:hover,
.navbar.navbar-flotante.navbar-flotante-sobre-portada .navbar-collapse .navbar-nav > .nav-item > .nav-link.active{
    text-decoration-color: #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;
    gap: 14px;
    margin-top: 30px !important;
}
.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;
}
.envase-ap-titulo{
    display: block;
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6e7c68;
    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/greenfamily/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;
    }

    /* Encabezado del submenu (Catalogo): el theme lo pinta con el color
       secundario oscurecido, que sale un oliva feo. Va el verde de la marca,
       con la flecha para volver y el titulo en blanco. */
    #mobileMenu .mobile-menu-header{
        background: var(--greenfamily-navy) !important;
        color: #ffffff !important;
    }
    #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;
    }
}