/* ============================================================
   MINABERRIA PROPIEDADES 2 — custom.css
   Inmobiliaria de Coronel Brandsen (provincia de Buenos Aires).
   Es el lenguaje de naze2 (que es el de dumar2, que a su vez
   copio el de greenfamily2), copiado y no reescrito: las capas
   de abajo son las de naze2 con los ids de bloque mapeados y la
   paleta de Minaberria.
     --color-primario   = #61753B (el verde oliva del logo)
     --color-secundario = #2F481F (el verde oscuro de la barra)
   Sin tarjetas apilables, como naze2: los bloques son paneles
   redondeados que scrollean normal.
   Mapeo de bloques (naze2 -> minaberriapropiedades2):
   Enfoque -> Nosotros, Libros -> Tasaciones, Servicios ->
   Destacadas y Servicios (fichas con foto, aca de modelo 5).
   Lo propio de Minaberria va al final del archivo.
   ============================================================ */

:root {
    --mina-navy: #2F481F;
    --mina-navy-deep: #1C2816;
    --mina-green: #61753B;
    --mina-green-soft: #EEF3E4;
    --mina-blue: #7F9461;
    --mina-bg-soft: #F6F8F2;
    --mina-border: #E3E8DC;
    --mina-text: #3a4234;
    --mina-muted: #6B7563;
    --mina-grad: linear-gradient(100deg, #2F481F 0%, #61753B 100%);
    --mina-grad-verde: linear-gradient(100deg, #3B5A26 0%, #61753B 100%);
}

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

body {
	font-family: "Poppins", "Manrope", sans-serif;
	color: var(--mina-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(--mina-navy);
}

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

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

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

.navbar-dark .navbar-nav .nav-link {
	color: var(--mina-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(--mina-green) !important;
}
.navbar.navbar-dark .hamburger {
    color: var(--mina-navy);
}
.navbar.navbar-dark .hamburger:hover {
    color: var(--mina-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(--mina-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(28, 40, 22, .88) 0%, rgba(28, 40, 22, .62) 42%, rgba(28, 40, 22, 0) 72%);
}
.swiper-hero-vertical-con-barra .swiper-overlay {
    background: linear-gradient(180deg, rgba(28, 40, 22, .90) 0%, rgba(28, 40, 22, .80) 42%, rgba(28, 40, 22, .30) 68%, rgba(28, 40, 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(--mina-grad) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 500;
    letter-spacing: .01em;
    border-radius: 8px;
    box-shadow: 0 6px 18px -8px rgba(47, 72, 31, .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(47, 72, 31, .5);
    transform: translateY(-1px);
}
.btn-outline-primary {
    border: 1px solid var(--mina-navy) !important;
    color: var(--mina-navy) !important;
    border-radius: 8px;
}

.btn-outline-primary:hover {
	background: var(--mina-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(--mina-grad-verde) !important;
    box-shadow: 0 8px 22px -8px rgba(97, 117, 59, .75);
}
.swiper-hero-con-barra .btn-primary:hover,
.swiper-hero-vertical-con-barra .btn-primary:hover {
    filter: brightness(1.12);
}

/* ---------- Links ---------- */
a { color: var(--mina-navy); }
a:hover { color: var(--mina-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;
}

/* Los items de un acordeon tambien llevan la clase .card: al pasar el mouse la fila subia 4px y el
   texto saltaba. Se excluyen, como el acordeon entero. */
.card:not(.accordion):not(.accordion-wrapper):not(.accordion-item):hover,
.producto-card:hover,
.card-producto:hover,
.item-producto:hover {
    transform: translateY(-4px);
    border-color: rgba(97, 117, 59, .55);
    box-shadow: 0 14px 34px -16px rgba(28, 40, 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, #3B5A26 0%, #61753B 100%) !important;
    color: #fff !important;
    font-weight: 500;
    letter-spacing: .02em;
}
.precio, .producto-precio, .precio-producto {
    color: var(--mina-navy);
    font-weight: 600;
}
.precio-anterior, .precio-tachado {
    color: var(--mina-muted);
}

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

/* ---------- Footer ---------- */
footer,
.pie-pagina,
.footer {
    background: var(--mina-navy-deep) !important;
    color: #CDD5C2;
}
footer a, .pie-pagina a { color: #CDD5C2; }
/* 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(--mina-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(--mina-green) !important;
}

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

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

/* ---------- 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;
}

/* Í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(97, 117, 59, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .85rem;
}
.bloque-item-icono .uil {
    font-size: 1.6rem;
    color: var(--mina-green);
    line-height: 1;
}

/* ---------- 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(--mina-green) !important;
}

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

.number-picker-cart .input-group input {
    color: #ffffff !important;
}
.div-buscar-header .text-muted,
#divSugerenciasBuscar .text-muted {
    color: #AEB8A2 !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(--mina-green) !important;
    color: var(--mina-green) !important;
}
#divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]):has(input:checked) {
    border-color: var(--mina-green) !important;
    background-color: var(--mina-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(--mina-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|alto_fijo|normal|medida|43px */
html body #divBarraSuperior:not(#\9):not(#\9) {
	height: 43px !important;
}

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

/* 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|#1c2816 */
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: #1c2816 !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|#AEB8A2 */
html body #carritoMenu del:not(#\9):not(#\9),
html body #carritoMenu del span:not(#\9):not(#\9) {
	color: #AEB8A2 !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|iconos_botones|normal|otro|#61753b */
html body #carritoMenu .btn i:not(#\9):not(#\9),
html body #carritoMenu .btn-secondary i:not(#\9):not(#\9) {
	color: #61753b !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;
}

/* ---------- Favoritos ---------- */

/* favoritos|iconos_botones|normal|otro|#61753b */
html body #favoritosMenu .btn i:not(#\9):not(#\9) {
	color: #61753b !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;
}

/* buscador|boton_agregar|normal|otro|#61753b */
html body #divSugerenciasBuscar .item-cart:not(#\9):not(#\9),
html body #divSugerenciasBuscar .btn-primary:not(#\9):not(#\9),
html body .buscador-resultados .item-cart:not(#\9):not(#\9) {
	color: #61753b !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;
}

/* botones|cerrar_fondo|normal|otro|#2f481f */
html body .btn-close:not(#\9):not(#\9)::before {
	background-color: #2f481f !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;
}

/* ---------- Enlaces del sitio ---------- */

/* enlaces|redes|hover|otro|#61753b */
html body .follow-link:hover:not(#\9):not(#\9),
html body .follow-link:hover i:not(#\9):not(#\9) {
	color: #61753b !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;
}

/* enlaces|redes|normal|otro|#ffffff */
html body .follow-link:not(#\9):not(#\9),
html body .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;
}

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

/* texto|fondo|normal|otro|#eff2ea */
html body:not(#\9):not(#\9) {
	background-color: #eff2ea !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(--mina-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: #18220F !important;
}

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

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

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

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

footer.text-inverse .footer-hr {
    border-color: rgba(227, 229, 232, 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

   BLOQUES INDEPENDIENTES: todo el lenguaje va detras de
   `body:is(#paginaInicio, :has(#divContenido))`, que reconoce la PAGINA y no un bloque:
   #paginaInicio es el id que index.php le pone al body de la home, y #divContenido es el
   contenedor que seccion.php pinta siempre en las internas (Nosotros, Servicios, Tasaciones,
   Contacto). Antes era `body:has(#divPortadas)`: si se ocultaba la portada desde el panel, la
   pagina entera perdia el diseno. Pesa lo mismo (un id y un elemento), asi que ninguna prioridad
   cambio. Por lo mismo, en las internas se usa `#divContenido.wrapper` y no `.seccion-hero`
   (esa clase la pone seccion.php solo si la seccion tiene portada). Cada bloque trae su propia
   forma: ninguna regla mira que bloque tiene al lado ni en que lugar esta.
   ============================================================= */

body:is(#paginaInicio, :has(#divContenido)) {
    --in-navy: #2F481F;
    --in-navy-deep: #1C2816;
    --in-green: #61753B;
    --in-green-claro: #C8D99A;
    --in-ink: #121A0E;
    --in-gris: #6B7563;
    --in-fondo: #F4F6F1;
    --in-linea: #E3E8DC;
    --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:is(#paginaInicio, :has(#divContenido)) #divBloqueNosotros,
body:is(#paginaInicio, :has(#divContenido)) #divBloqueTasaciones,
body:is(#paginaInicio, :has(#divContenido)) #divBloqueCierre {
    padding: 104px 0 !important;
}

body:is(#paginaInicio, :has(#divContenido)) #divBloqueNosotros {
    background: #ffffff !important;
}

#divBloqueNosotros > .container,
#divBloqueTasaciones > .container,
#divBloqueCierre > .container {
    max-width: 1240px;
    padding-left: 32px;
    padding-right: 32px;
}

/* Tasaciones sobre el gris de la version 1 (la capa v2 lo vuelve panel blanco). */
body:is(#paginaInicio, :has(#divContenido)) #divBloqueTasaciones {
    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. */
#divBloqueTasaciones .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;
}

/* El titular */
#divBloqueTasaciones .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 */
#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 ====================== */
#divBloqueTasaciones .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) {
    #divBloqueTasaciones .row.gx-lg-0 > div {
        margin-top: 0 !important;
    }
}

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

#divBloqueTasaciones figure.rounded {
    margin: 0;
}

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

#divBloqueTasaciones .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 */
#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(97, 117, 59, .8);
    margin-top: 30px !important;
}

#divBloqueNosotros .btn-primary:hover,
#divBloqueCierre .btn-primary:hover {
    background: #3B5A26 !important;
    border-color: #3B5A26 !important;
    filter: none !important;
    box-shadow: 0 10px 24px -12px rgba(97, 117, 59, .8) !important;
    transform: translateY(-2px);
}

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

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

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

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

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

#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:is(#paginaInicio, :has(#divContenido)) #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(200, 217, 154, .12);
    border: 1px solid rgba(200, 217, 154, .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:is(#paginaInicio, :has(#divContenido)) .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(97, 117, 59, .8) !important;
    filter: none !important;
    transform: none;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper-content .btn.rounded-pill:hover {
    background-color: #3B5A26 !important;
    border-color: #3B5A26 !important;
    filter: none !important;
    transform: translateY(-2px);
}

/* El segundo boton de cada slide va en linea, sin relleno ni sombra. */
body:is(#paginaInicio, :has(#divContenido)) .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:is(#paginaInicio, :has(#divContenido)) .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:is(#paginaInicio, :has(#divContenido)) .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:is(#paginaInicio, :has(#divContenido)) .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:is(#paginaInicio, :has(#divContenido)) .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:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper-content .col-12 {
    text-align: left !important;
    margin-left: 0 !important;
}
body:is(#paginaInicio, :has(#divContenido)) .swiper-hero,
body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper,
body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper-slide {
    min-height: 100vh;
    min-height: 100svh;
}

body:is(#paginaInicio, :has(#divContenido)) .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:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper-content .row > div {
    max-width: 56%;
    padding-bottom: 84px;
}

/* Los componentes de la portada, en orden: volanta, titular, bajada. */
body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper-content h1,
body:is(#paginaInicio, :has(#divContenido)) .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:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper-content .row > div {
        max-width: 100%;
        padding-bottom: 40px;
    }
}

/* ============================ RESPONSIVE ============================ */

@media (max-width: 991.98px) {
    body:is(#paginaInicio, :has(#divContenido)) #divBloqueNosotros,
    body:is(#paginaInicio, :has(#divContenido)) #divBloqueTasaciones,
    body:is(#paginaInicio, :has(#divContenido)) #divBloqueCierre {
        padding: 64px 0 !important;
    }

    #divBloqueNosotros > .container,
    #divBloqueTasaciones > .container,
    #divBloqueCierre > .container {
        padding-left: 24px;
        padding-right: 24px;
    }

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

    #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 */
    #divBloqueTasaciones figure.rounded img {
        aspect-ratio: 3 / 2;
    }
}

@media (max-width: 767.98px) {

    #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 Minaberria. */
:root {
    --mf-top: 20px;
    --mf-ancho: 1400px;
    --mf-radio: 1rem;
    --mf-blur: 32px;
    --mf-sombra: 0 20px 40px -12px rgba(28, 40, 22, .18);

    --mf-fondo: rgba(255, 255, 255, .78);
    --mf-borde: rgba(28, 40, 22, .08);
    --mf-texto: #2F481F;
    --mf-texto-hover: #61753B;

    --mf-fondo-portada: rgba(28, 40, 22, .22);
    --mf-borde-portada: rgba(255, 255, 255, .16);
    --mf-texto-portada: #ffffff;
    --mf-texto-hover-portada: #C8D99A;
}

/* Sobre la foto el logo va en su version blanca. */
.navbar.navbar-flotante.navbar-flotante-sobre-portada .navbar-brand img {
    content: url('../../../img/minaberriapropiedades2/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: #C8D99A;
}

/* 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: #1C2816 !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: "Inmobiliaria en Coronel Brandsen. Tasaciones profesionales, venta y alquiler de propiedades, con la m\0000e1xima difusi\0000f3n y visitas acompa\0000f1adas.";
    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(231, 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(231, 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: #C8D99A !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(231, 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: #C8D99A;
    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(231, 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);
    /* el theme lo levanta 3px al pasar el mouse: sin transicion en el transform, saltaba de golpe al
       entrar y al salir */
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), border-color .35s ease, background-color .35s ease, color .35s ease !important;
}

footer.text-inverse .social a:hover {
    border-color: #C8D99A;
    background: rgba(200, 217, 154, .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(231, 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. "De seccion" es cualquier pagina que no sea la
   home (antes se reconocia la home porque tenia el bloque Credenciales: ocultarlo cambiaba la portada). */
body:not(#paginaInicio) #swiperPortadasHorizontal,
body:not(#paginaInicio) #swiperPortadasHorizontal .swiper,
body:not(#paginaInicio) #swiperPortadasHorizontal .swiper-slide {
    min-height: 620px;
}

/* Quienes somos: la portada ocupa toda la pantalla, como el hero de la home. */
body:has(#divContenido.seccion-nosotros) #swiperPortadasHorizontal,
body:has(#divContenido.seccion-nosotros) #swiperPortadasHorizontal .swiper,
body:has(#divContenido.seccion-nosotros) #swiperPortadasHorizontal .swiper-slide {
    min-height: 100vh;
    min-height: 100svh;
}

/* 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;
}

/* =====================================================================================
   BLOQUES REDISEÑADOS POR GREEN FAMILY SOBRE LA BASE COMUN
   Copiado de greenfamily2 (lineas 2747-3125 de su custom.css): lo que Green Family le
   agrego a la version 1 para rediseñar bloques. Minaberria no usa el ciclo animado ni "Lo que nos
   diferencia": de este tramo quedan el aire de los bloques en celular y las lineas que se llenan.
   ===================================================================================== */

/* ---- 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. 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:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales{
        padding: 35px 0 42px !important;
    }
    /* Cierre: el margen debajo de los botones */
    #divBloqueCierre .row.text-center > .col-12 > p:last-child{
        margin-bottom: 0 !important;
    }
}

/* ---- Lineas que se llenan: los pasos de Tasaciones ----
   La linea que separa cada fila se llena de verde de izquierda a derecha: 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. */
#divBloqueTasaciones .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) {
    #divBloqueTasaciones .bloque-puntos li:hover::before{
        transform: scaleX(1);
    }
}

#divBloqueTasaciones .bloque-puntos li.linea-llena::before{
    transform: scaleX(1);
}

/* =====================================================================================
   La capa v2 de Green Family 2, tal como la adapto dumar2 (aca con la paleta de Minaberria)
   -------------------------------------------------------------------------------------
   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 Geist sin mayusculas 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: #eff2ea;
    --v2-panel: #f2f4ee;
    --v2-tarjeta: #fbfcf9;
    --v2-tinta: #1C2816;
    --v2-tono: #8a957c;
    --v2-texto: #3a4234;
    --v2-verde: #3B5A26;
    --v2-verde-medio: #61753B;
    --v2-lima: #C8D99A;
    --v2-linea: rgba(28, 40, 22, .1);
    --v2-radio: 24px;
    --v2-radio-tarjeta: 18px;
    --v2-margen: 14px;
    --v2-sans: "Geist", "Inter", system-ui, sans-serif;
    --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, tambien lo chico (Rodri no quiere la mono) ---------- */
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:is(#paginaInicio, :has(#divContenido)) 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 .mp2-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:is(#paginaInicio, :has(#divContenido)) :is(.swiper-hero, [id^="divBloque"]) .btn,
html body:is(#paginaInicio, :has(#divContenido)) :is(.swiper-hero, [id^="divBloque"]) .btn:hover,
html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper-content .btn.rounded-pill,
html body:is(#paginaInicio, :has(#divContenido)) .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 las opciones con desplegable 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(#mp2):is(:hover, .active),
    html body .navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link:not(#mp2):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(#mp2):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:is(#paginaInicio, :has(#divContenido)) #divPortadas{
    padding: var(--v2-margen) var(--v2-margen) 0 !important;
    background: var(--v2-pagina) !important;
}

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

html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero,
html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper,
html body:is(#paginaInicio, :has(#divContenido)) .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:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper-content{
    position: relative;
    max-width: 1320px;
    padding: 150px 40px 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper-content > .row{
    align-items: flex-start !important;
}
html body:is(#paginaInicio, :has(#divContenido)) .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 mp2-derecha) */
html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper-content .row > div.mp2-derecha{
    margin-left: auto !important;
    text-align: right !important;
}
html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper-content .row > div.mp2-derecha .portada-texto-normal{
    margin-left: auto !important;
}
html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper-content .row > div.mp2-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:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper-slide{
    position: relative;
}
html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper-slide::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(22, 31, 15, .28) 0%, rgba(22, 31, 15, 0) 28%);
}
html body:is(#paginaInicio, :has(#divContenido)) .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 mp2-esperando-fotos en la portada y
   mp2-foto-lista en cada slide; sin el script no se tapa nada. */
html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper-slide:not(#mp2){
    background-color: var(--v2-pagina) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero.mp2-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:is(#paginaInicio, :has(#divContenido)) .swiper-hero.mp2-esperando-fotos .swiper-slide.mp2-foto-lista::after{
    opacity: 0;
}
/* el texto blanco tampoco se muestra sobre el fondo claro: entra junto con la foto */
html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero.mp2-esperando-fotos .swiper-slide > .swiper-content{
    transition: opacity .6s ease;
}
html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero.mp2-esperando-fotos .swiper-slide:not(.mp2-foto-lista) > .swiper-content{
    opacity: 0;
}
/* sin las sombras de la plataforma, salvo la que se elige en el panel (Portadas > sombra del texto),
   que llega como estilo en linea */
html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper-content :is(p, h1, h2, h3, a):not([style*="text-shadow"]){
    text-shadow: none !important;
}

/* Las animaciones de animate.css de los componentes se apagan: la entrada la hace custom.js */
html body:is(#paginaInicio, :has(#divContenido)) .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:is(#paginaInicio, :has(#divContenido)) .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:is(#paginaInicio, :has(#divContenido)) .swiper-hero .portada-texto-grande > .mp2-linea{
    display: block;
}
/* el segundo renglon se corta antes: asi no se estira hasta la parte mas clara de la foto */
html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .portada-texto-grande ~ .portada-texto-grande{
    max-width: 8.4em;
}
html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .mp2-derecha .portada-texto-grande ~ .portada-texto-grande{
    margin-left: auto !important;
}

html body:is(#paginaInicio, :has(#divContenido)) .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:is(#paginaInicio, :has(#divContenido)) .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:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper-content .btn.portada-boton-normal:hover{
    background: var(--v2-lima) !important;
    border-color: var(--v2-lima) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) .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:is(#paginaInicio, :has(#divContenido)) .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:is(#paginaInicio, :has(#divContenido)) .swiper-hero .mp2-anima .portada-texto-grande > .mp2-linea{
    transform: translateY(-105%) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .mp2-anima .portada-texto-grande ~ .portada-texto-grande > .mp2-linea{
    transform: translateY(105%) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .mp2-anima :is(.portada-texto-normal, .btn.portada-boton-normal){
    opacity: 0 !important;
    transform: translateY(14px) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .mp2-anima.mp2-entra .portada-texto-grande > .mp2-linea,
html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .mp2-anima.mp2-entra .portada-texto-grande ~ .portada-texto-grande > .mp2-linea{
    transform: none !important;
    transition: transform 1.1s var(--v2-curva) .1s !important;
}
html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .mp2-anima.mp2-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:is(#paginaInicio, :has(#divContenido)) .swiper-hero .mp2-anima.mp2-entra .btn.portada-boton-normal{
    transition-delay: .72s, .72s, 0s, 0s, 0s !important;
}
html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .mp2-anima.mp2-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).
       Esos 85px son el lugar del menu, no de la portada: van solo cuando la portada es lo primero
       debajo del header. Si desde el panel se la mueve mas abajo, queda con el aire de cualquier
       panel (14px) en vez de un hueco de 99px en el medio de la pagina. */
    html body:is(#paginaInicio, :has(#divContenido)) header + #divPortadas{
        padding-top: calc(var(--v2-margen) + 85px) !important;
    }
    html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero,
    html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper,
    html body:is(#paginaInicio, :has(#divContenido)) .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:is(#paginaInicio, :has(#divContenido)) .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:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper-slide::before{
        background:
            linear-gradient(180deg, rgba(22, 31, 15, .38) 0%, rgba(22, 31, 15, .22) 45%, rgba(22, 31, 15, 0) 70%),
            linear-gradient(0deg, rgba(22, 31, 15, .28) 0%, rgba(22, 31, 15, 0) 28%);
    }
    html body:is(#paginaInicio, :has(#divContenido)) .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:is(#paginaInicio, :has(#divContenido)) .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:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper-slide.mp2-anima :is(.portada-texto-grande > .mp2-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 mp2-* las pone custom.js;
   sin el script la pagina queda quieta y completa.
   ===================================================================================== */

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

/* Los titulares de bloque, siempre a la izquierda */
html body:is(#paginaInicio, :has(#divContenido)) section[id^="divBloque"] .row.text-center > .col-12{
    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;
}

/* 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:is(#paginaInicio, :has(#divContenido)) :is(.mp2-titulo-espera, .mp2-entra-espera){
    opacity: 0;
}
html body:is(#paginaInicio, :has(#divContenido)) .mp2-renglones .mp2-mascara{
    display: block;
    overflow: hidden;
    padding-bottom: .12em;
    margin-bottom: -.12em;
}
html body:is(#paginaInicio, :has(#divContenido)) .mp2-renglones .mp2-renglon{
    display: block;
    transform: translateY(110%);
    transition: transform 1.1s cubic-bezier(.23, 1, .32, 1);
}
html body:is(#paginaInicio, :has(#divContenido)) .mp2-renglones.mp2-visto .mp2-renglon{
    transform: none;
}

/* Textos y fotos que entran desde su costado */
html body:is(#paginaInicio, :has(#divContenido)) :is(.mp2-entra-izq, .mp2-entra-der, .mp2-entra-arriba){
    opacity: 0;
    transition: opacity .7s ease, transform .8s var(--v2-curva);
    transition-delay: calc(var(--mp2-i, 0) * .08s);
}
html body:is(#paginaInicio, :has(#divContenido)) .mp2-entra-izq{
    transform: translateX(-30px);
}
html body:is(#paginaInicio, :has(#divContenido)) .mp2-entra-der{
    transform: translateX(30px);
}
html body:is(#paginaInicio, :has(#divContenido)) .mp2-entra-arriba{
    transform: translateY(30px);
}
html body:is(#paginaInicio, :has(#divContenido)) :is(.mp2-entra-izq, .mp2-entra-der, .mp2-entra-arriba).mp2-visto{
    opacity: 1;
    transform: none;
}
/* la fila entera ya no se desliza con el theme: ahora entra cada columna por su lado */
html body:is(#paginaInicio, :has(#divContenido)) .mp2-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:is(#paginaInicio, :has(#divContenido)) .mp2-revela-foto{
    clip-path: inset(10% 10% 10% 10% round var(--v2-radio));
    transition: clip-path 1.4s var(--v2-curva);
}
html body:is(#paginaInicio, :has(#divContenido)) .mp2-revela-foto img{
    transform: scale(1.16);
    transition: transform 1.6s var(--v2-curva);
}
html body:is(#paginaInicio, :has(#divContenido)) .mp2-revela-foto.mp2-visto{
    clip-path: inset(0 0 0 0 round var(--v2-radio));
}
html body:is(#paginaInicio, :has(#divContenido)) .mp2-revela-foto.mp2-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:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales:not(#mp2){
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 14px var(--v2-margen) 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales > .container{
    max-width: none !important;
    padding: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .row:not(#mp2){
    margin: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .swiper-container:not(#mp2){
    flex: 1 1 100% !important;
    min-width: 0;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .swiper{
    overflow: hidden;
    border-radius: var(--v2-radio);
    background: #ffffff;
    border: 1px solid var(--v2-linea);
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .swiper-wrapper{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    transform: none !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .swiper-slide:not(#mp2){
    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:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .swiper-slide:not(#mp2):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:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .swiper-slide:not(#mp2){
    transition: background-color .45s ease !important;
}
@media (hover: hover) {
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .swiper-slide:not(#mp2):hover{
        background-color: var(--v2-pagina) !important;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .swiper-slide:hover .mp2-trazo{
        animation: mp2-redibujo 1.3s var(--v2-curva) both;
        animation-delay: calc(var(--mp2-n, 0) * .03s);
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .swiper-slide:hover .mp2-trazo-punteado{
        animation: mp2-aparece .6s ease .7s both;
    }
}
@keyframes mp2-redibujo{
    from{ stroke-dashoffset: var(--mp2-largo); }
    to{ stroke-dashoffset: 0; }
}
@keyframes mp2-aparece{
    from{ opacity: 0; }
    to{ opacity: 1; }
}
html body:is(#paginaInicio, :has(#divContenido)) #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:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .banner-icon-svg-wrapper{
    display: block !important;
    height: 92px;
    margin: 0 0 28px !important;
    color: var(--v2-verde-medio);
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .banner-icon-svg{
    display: block;
    width: auto !important;
    height: 100% !important;
    max-width: 100%;
    overflow: visible;
    stroke-width: 1.7;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .mp2-trazo{
    stroke-dasharray: var(--mp2-largo);
    stroke-dashoffset: var(--mp2-largo);
    transition: stroke-dashoffset 1.6s var(--v2-curva);
    transition-delay: calc(var(--mp2-i, 0) * .12s + var(--mp2-n, 0) * .05s + .15s);
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .mp2-trazo-punteado{
    opacity: 0;
    transition: opacity .8s ease;
    transition-delay: calc(var(--mp2-i, 0) * .12s + 1.1s);
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .mp2-visto .mp2-trazo{
    stroke-dashoffset: 0;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .mp2-visto .mp2-trazo-punteado{
    opacity: 1;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .swiper-slide > div:not(.banner-icon-svg-wrapper){
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .swiper-slide h4:not(#mp2){
    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:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .swiper-slide:hover h4:not(#mp2){
        color: var(--v2-verde) !important;
        -webkit-text-fill-color: var(--v2-verde) !important;
    }
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .swiper-slide p:not(#mp2){
    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;
}

/* ---------- Paneles (sin apilar) ----------
   En dumar2 aca estaban las "secciones apiladas": cada panel se quedaba quieto (sticky) y el
   siguiente le pasaba por encima mientras el de abajo se achicaba y se oscurecia. Minaberria va SIN
   tarjetas apilables, como naze2: de ese tramo queda solo la forma (panel redondeado, despegado de
   los bordes, con 14px de aire entre uno y otro) y cada bloque scrollea normal. Por eso no hay
   sticky, ni escala, ni velo, ni el aire extra que el apilado agregaba abajo en el celular.
   La forma va por id y no por una clase que ponga custom.js: asi no depende del script. Los tres
   ids (el del :has, el del :is y el :not) le ganan a la regla de ritmo, que pinta transparente. */
html body:is(#paginaInicio, :has(#divContenido)) .content-wrapper > :is(#divBloqueNosotros, #divBloqueTasaciones, #divBloqueTestimonios):not(#mp2),
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.wrapper > .container > :is(#divBloqueNosotros, #divBloqueTasaciones, #divBloqueTestimonios):not(#mp2){
    margin: 14px var(--v2-margen) 0 !important;
    border-radius: var(--v2-radio) !important;
    background-color: #ffffff !important;
}
/* ---------- Nosotros: el acordeon con foto (la clase mp2-proceso la pone custom.js) ---------- */
html body:is(#paginaInicio, :has(#divContenido)) section.mp2-proceso > .container > h3.display-5{
    max-width: 24ch;
    margin-bottom: 64px !important;
}
html body:is(#paginaInicio, :has(#divContenido)) section.mp2-proceso .row{
    align-items: stretch !important;
}
html body:is(#paginaInicio, :has(#divContenido)) section.mp2-proceso .row > div > figure{
    height: 100%;
    min-height: 480px;
    margin: 0;
    border-radius: var(--v2-radio);
    overflow: hidden;
}
html body:is(#paginaInicio, :has(#divContenido)) section.mp2-proceso .row > div > figure img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
html body:is(#paginaInicio, :has(#divContenido)) section.mp2-proceso .accordion-wrapper{
    counter-reset: mp2-paso;
    border-bottom: 1px solid var(--v2-linea);
}
html body:is(#paginaInicio, :has(#divContenido)) section.mp2-proceso .accordion-item{
    position: relative;
    counter-increment: mp2-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:is(#paginaInicio, :has(#divContenido)) section.mp2-proceso .mp2-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:is(#paginaInicio, :has(#divContenido)) section.mp2-proceso .accordion-item.mp2-corriendo .mp2-paso-linea{
    animation: mp2-avance-paso 6s linear forwards;
}
@keyframes mp2-avance-paso{
    from{ transform: scaleX(0); }
    to{ transform: scaleX(1); }
}
html body:is(#paginaInicio, :has(#divContenido)) section.mp2-proceso .accordion-item .card-header{
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) section.mp2-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:is(#paginaInicio, :has(#divContenido)) section.mp2-proceso .accordion-button.collapsed{
    color: var(--v2-tono) !important;
    -webkit-text-fill-color: var(--v2-tono) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) section.mp2-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:is(#paginaInicio, :has(#divContenido)) section.mp2-proceso .accordion-button::before{
    content: counter(mp2-paso, decimal-leading-zero) !important;
    position: static !important;
    transform: none !important;
    flex: 0 0 auto;
    width: 26px;
    font-family: var(--v2-sans) !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:is(#paginaInicio, :has(#divContenido)) section.mp2-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:is(#paginaInicio, :has(#divContenido)) section.mp2-proceso .accordion-button:not(.collapsed)::after{
    background-color: var(--v2-tinta) !important;
    border-color: var(--v2-tinta);
    color: #ffffff;
}
html body:is(#paginaInicio, :has(#divContenido)) section.mp2-proceso .accordion-button.collapsed::after{
    transform: rotate(0deg) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) section.mp2-proceso .accordion-item .card-body{
    padding: 0 60px 30px 48px !important;
}
html body:is(#paginaInicio, :has(#divContenido)) section.mp2-proceso .accordion-item .card-body p{
    font-size: 16px !important;
    line-height: 1.65 !important;
    max-width: 46ch;
    margin: 0 !important;
}

html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCierre .mp2-tono{
    color: rgba(255, 255, 255, .55) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .55) !important;
}

/* ---------- Listas numeradas (Tasaciones) ----------
   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:is(#paginaInicio, :has(#divContenido)) .bloque-puntos{
    counter-reset: mp2-punto;
}
html body:is(#paginaInicio, :has(#divContenido)) .bloque-puntos li{
    counter-increment: mp2-punto;
    padding: 18px 0 18px 46px !important;
    border-top: 0 !important;
    background: linear-gradient(rgba(28, 40, 22, .14), rgba(28, 40, 22, .14)) left top / 100% 1px no-repeat;
    font-size: 15.5px !important;
    color: var(--v2-texto) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) .bloque-puntos li strong{
    color: var(--v2-tinta) !important;
    -webkit-text-fill-color: var(--v2-tinta) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) .bloque-puntos li > span:first-child{
    top: 21px !important;
}
html body:is(#paginaInicio, :has(#divContenido)) .bloque-puntos li > span:first-child i{
    display: none !important;
}
html body:is(#paginaInicio, :has(#divContenido)) .bloque-puntos li > span:first-child::before{
    content: counter(mp2-punto, decimal-leading-zero);
    font-family: var(--v2-sans);
    font-size: 13px;
    color: var(--v2-tono);
}
html body:is(#paginaInicio, :has(#divContenido)) .mp2-revela-lista.bloque-puntos li{
    background-size: 0% 1px;
    transition: background-size 1.1s var(--v2-curva);
}
html body:is(#paginaInicio, :has(#divContenido)) .mp2-revela-lista.bloque-puntos li:nth-child(2){ transition-delay: .12s; }
html body:is(#paginaInicio, :has(#divContenido)) .mp2-revela-lista.bloque-puntos li:nth-child(3){ transition-delay: .24s; }
html body:is(#paginaInicio, :has(#divContenido)) .mp2-revela-lista.bloque-puntos li:nth-child(4){ transition-delay: .36s; }
html body:is(#paginaInicio, :has(#divContenido)) .mp2-revela-lista.bloque-puntos li:nth-child(5){ transition-delay: .48s; }
html body:is(#paginaInicio, :has(#divContenido)) .mp2-revela-lista.bloque-puntos.mp2-visto li{
    background-size: 100% 1px;
}
/* en el proceso, las lineas entre pasos tambien se dibujan */
html body:is(#paginaInicio, :has(#divContenido)) section.mp2-proceso .mp2-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:is(#paginaInicio, :has(#divContenido)) section.mp2-proceso .mp2-revela-lista .accordion-item:nth-child(2){ transition-delay: .12s; }
html body:is(#paginaInicio, :has(#divContenido)) section.mp2-proceso .mp2-revela-lista .accordion-item:nth-child(3){ transition-delay: .24s; }
html body:is(#paginaInicio, :has(#divContenido)) section.mp2-proceso .mp2-revela-lista .accordion-item:nth-child(4){ transition-delay: .36s; }
html body:is(#paginaInicio, :has(#divContenido)) section.mp2-proceso .mp2-revela-lista.mp2-visto .accordion-item{
    background-size: 100% 1px !important;
}

/* ---------- Cierre: la foto se mete en su marco y encima va el panel de contacto ----------
   --mp2-marco va de 0 (la foto ocupa todo el ancho, sin redondeo) a 1 (enmarcada). */
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCierre.mp2-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;
}
/* 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:is(#paginaInicio, :has(#divContenido)) #divBloqueCierre .mp2-cierre-foto{
    position: absolute;
    inset: 0;
    overflow: hidden;
    clip-path: inset(0 calc(var(--mp2-marco, 1) * var(--v2-margen)) round calc(var(--mp2-marco, 1) * var(--v2-radio)));
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCierre .mp2-cierre-imagen{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(calc(1 + (1 - var(--mp2-marco, 1)) * .16));
    will-change: transform;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCierre .mp2-cierre-foto::after{
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(0deg, rgba(22, 31, 15, .38) 0%, rgba(22, 31, 15, 0) 55%);
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCierre > .container{
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: 120px !important;
    padding-bottom: 40px !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCierre .row.text-center > .col-12{
    display: block !important;
    max-width: 600px !important;
    padding: 44px 44px 40px !important;
    border-radius: 20px;
    background: rgba(239, 242, 234, .9);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    text-align: left !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #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:is(#paginaInicio, :has(#divContenido)) #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:is(#paginaInicio, :has(#divContenido)) #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:is(#paginaInicio, :has(#divContenido)) #divBloqueCierre .btn{
    margin: 0 !important;
    height: auto !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #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:is(#paginaInicio, :has(#divContenido)) #divBloqueCierre .btn.btn-primary:hover{
    background: var(--v2-tinta) !important;
    border-color: var(--v2-tinta) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCierre .btn.btn-outline-primary{
    background: transparent !important;
    border: 1px solid rgba(28, 40, 22, .2) !important;
    color: var(--v2-tinta) !important;
    -webkit-text-fill-color: var(--v2-tinta) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #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{
    /* El pie usa el logo blanco del sitio (logo-footer.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;
}
/* Las redes, contra el borde derecho: la fila pasa a tres columnas, con el texto en la del medio
   (sigue centrado) y las redes en la de la derecha. Con flex centrado quedaban pegadas a
   "Desarrollado por". */
html body footer.text-inverse .footer-desktop > .d-flex:has(> .pie-pagina + div > .social){
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 24px;
    align-items: center !important;
}
html body footer.text-inverse .footer-desktop > .d-flex > .pie-pagina{
    grid-column: 2;
}
html body footer.text-inverse .footer-desktop > .d-flex > .pie-pagina + div:has(> .social){
    grid-column: 3;
    justify-self: end;
}
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 .mp2-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 .mp2-marca > span{
    display: inline-block;
    transition: transform 1.2s var(--v2-curva), opacity 1s ease;
    transition-delay: calc(var(--mp2-i, 0) * .04s);
}
html body footer.text-inverse.mp2-marca-oculta .mp2-marca > span{
    transform: translateY(60%);
    opacity: 0;
}

/* ---------- Botones de los bloques: pastilla, verde profundo o en linea ---------- */
html body:is(#paginaInicio, :has(#divContenido)) 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:is(#paginaInicio, :has(#divContenido)) 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:is(#paginaInicio, :has(#divContenido)) section[id^="divBloque"] .btn.btn-primary:hover{
    background: var(--v2-tinta) !important;
    border-color: var(--v2-tinta) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) section[id^="divBloque"] .btn.btn-outline-primary{
    background: transparent !important;
    border: 1px solid rgba(28, 40, 22, .2) !important;
    color: var(--v2-tinta) !important;
    -webkit-text-fill-color: var(--v2-tinta) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) 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;
}

/* ---------- 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:is(#paginaInicio, :has(#divContenido)) .content-wrapper > section[id^="divBloque"]:not(#divBloqueCredenciales):not(#divBloqueCierre):not(#mp2),
    html body:is(#paginaInicio, :has(#divContenido)) #divContenido.wrapper > .container > section[id^="divBloque"]:not(#divBloqueCredenciales):not(#divBloqueCierre):not(#mp2){
        padding-top: 72px !important;
        padding-bottom: 72px !important;
    }
    html body:is(#paginaInicio, :has(#divContenido)) .content-wrapper > section[id^="divBloque"] > .container,
    html body:is(#paginaInicio, :has(#divContenido)) #divContenido.wrapper > .container > section[id^="divBloque"] > .container{
        padding-left: 22px !important;
        padding-right: 22px !important;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales:not(#mp2){
        padding: var(--v2-margen) var(--v2-margen) 0 !important;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .swiper-wrapper{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .swiper-slide:not(#mp2){
        padding: 26px 20px 24px !important;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .swiper-slide:not(#mp2):nth-child(odd){
        border-left: 0 !important;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .swiper-slide:not(#mp2):nth-child(n+3){
        border-top: 1px solid var(--v2-linea) !important;
    }
    html body:is(#paginaInicio, :has(#divContenido)) section.mp2-proceso > .container > h3.display-5{
        margin-bottom: 36px !important;
    }
    html body:is(#paginaInicio, :has(#divContenido)) section.mp2-proceso .row > div > figure{
        min-height: 300px;
        height: 300px;
    }
    html body:is(#paginaInicio, :has(#divContenido)) section.mp2-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:is(#paginaInicio, :has(#divContenido)) #divBloqueCierre.mp2-cierre:not(#mp2){
        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:is(#paginaInicio, :has(#divContenido)) #divBloqueCierre .mp2-cierre-foto{
        position: relative;
        inset: auto;
        height: 210px;
        clip-path: none;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCierre .mp2-cierre-imagen{
        transform: none;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCierre .mp2-cierre-foto::after{
        background: linear-gradient(0deg, rgba(22, 31, 15, .25) 0%, rgba(22, 31, 15, 0) 50%);
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCierre > .container{
        margin: 0 !important;
        padding: 0 !important;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCierre > .container > .row{
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #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:is(#paginaInicio, :has(#divContenido)) #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(#mp2){
        margin-top: 12px !important;
    }
}

/* =====================================================================================
   LO QUE DUMAR2 LE SUMO A GREEN FAMILY 2 (copiado de dumar2)
   El subrayado del menu (en gf2 vive en su version 1), la medicion de altos y el punto activo de
   la portada. Se sacaron los bloques que Minaberria no tiene, la marquesina de Distribuidores y
   todo lo del apilado. La linea de tiempo de Historia vuelve al final del archivo, como Proceso.
   ===================================================================================== */

/* ---------- El subrayado de las opciones del menú ---------- */
/* Una linea de fondo anclada a la caja del texto que crece de izquierda a derecha al pasar el
   mouse y se recoge al salir. El texto toma el MISMO color que la linea (lo hace la capa v2). */
.navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link {
    --linea-menu: var(--v2-verde-medio);
    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 .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;
}
.navbar.navbar-flotante.navbar-flotante-sobre-portada .navbar-collapse .navbar-nav > .nav-item > .nav-link {
    --linea-menu: var(--v2-lima);
}
.navbar.navbar-bg-color-secundario .navbar-other .nav-link,
.navbar.navbar-bg-color-secundario .navbar-other .nav-link:hover {
    background-image: none !important;
    text-decoration: none !important;
}

/* ---------- Medicion de altos (custom.js) ---------- */
/* Mientras se mide el alto de un bloque con cada item abierto, nada anima: si no, el navegador
   empezaria transiciones entre los estados que se prueban. */
.mp2-midiendo,
.mp2-midiendo *,
.mp2-midiendo *::before,
.mp2-midiendo *::after {
    transition: none !important;
}

@media (max-width: 991.98px) {
    /* El boton de accion del menu no entra en la barra del celular: descuadraba el logo y el menu.
       Contacto sigue a mano en las opciones del menu. */
    html body .navbar .navbar-other .nav-item:has(> .boton-cta-menu) {
        display: none !important;
    }
}

/* ---------- Portada: el punto activo en blanco ---------- */
/* La plataforma, hasta 992px, lo pinta con el color primario del sitio (el verde oliva) y sobre la
   foto no se leia. En la computadora ya era blanco: va sin media query para cubrir tambien los 992px. */
html body:is(#paginaInicio, :has(#divContenido)) .swiper-hero .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #ffffff !important;
}

/* =====================================================================================
   LO QUE NAZE2 LE SUMO A DUMAR2 (copiado de naze2)
   El icono provisorio de Credenciales, el aire de Servicios, el titular de Testimonios, la marca
   del pie, el segundo tono del cierre, los titulos blancos sobre foto y el movimiento reducido.
   ===================================================================================== */

/* ---------- Credenciales: el icono provisorio ---------- */
/* Mientras los banners no tengan su dibujo SVG (Banners, tipo SVG), la ficha muestra el icono del
   banner en el lugar del dibujo, en linea verde y del mismo alto, para que la ficha no quede coja.
   Cuando el banner pasa a SVG el icono ya no se emite y esta regla no aplica. */
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .swiper-slide > i.banner-icon:not(#mp2) {
    display: flex !important;
    align-items: center;
    height: 92px;
    margin: 0 0 28px !important;
    font-size: 54px !important;
    line-height: 1 !important;
    color: var(--v2-verde-medio) !important;
    -webkit-text-fill-color: var(--v2-verde-medio) !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
}

/* ---------- Servicios: el aire del bloque y el titular ---------- */
/* Va sobre el gris de la pagina, sin panel, como las Categorias de Green Family 2. Las fichas con
   foto estan en lo propio de Minaberria, al final del archivo. */
html body:is(#paginaInicio, :has(#divContenido)) .content-wrapper > #divBloqueServicios:not(#mp2),
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.wrapper > .container > #divBloqueServicios:not(#mp2) {
    padding-top: 112px !important;
    padding-bottom: 112px !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueServicios > .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueServicios > .container > .row > div:first-child {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* ---------- Testimonios: el titular ---------- */
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueTestimonios h2.display-4 {
    padding: 0 !important;
    margin: 0 0 48px !important;
}

/* ---------- Pie: la marca gigante ---------- */
/* la marca gigante en mayusculas, como el logo (el tamaño lo ajusta lo propio de Minaberria) */
html body footer.text-inverse .mp2-marca {
    text-transform: uppercase;
    font-size: 22vw;
    letter-spacing: -.04em;
}

/* ---------- Cierre: el segundo tono sobre el panel claro ---------- */
/* dumar2 pinta el segundo tono del cierre en blanco translucido (su titulo no tiene coma y nunca se
   ve). El de Minaberria si lo tiene, y va sobre el panel claro: en el tono suave, como en los demas
   paneles. */
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCierre .mp2-tono {
    color: var(--v2-tono) !important;
    -webkit-text-fill-color: var(--v2-tono) !important;
}

/* ---------- Internas: los titulos blancos sobre una foto ---------- */
/* La capa v2 pinta todos los titulares en tinta. Cuando la plataforma pone un titulo encima de una
   foto lo marca text-white, y en tinta no se leia: los que la plataforma pide blancos, blancos. */
html body :is(h1, h2, h3, h4, h5, h6).text-white {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ---------- Celular y tablet ---------- */
@media (max-width: 991.98px) {
    html body:is(#paginaInicio, :has(#divContenido)) .content-wrapper > :is(#divBloqueNosotros, #divBloqueTasaciones, #divBloqueTestimonios):not(#mp2),
    html body:is(#paginaInicio, :has(#divContenido)) #divContenido.wrapper > .container > :is(#divBloqueNosotros, #divBloqueTasaciones, #divBloqueTestimonios):not(#mp2) {
        border-radius: 20px !important;
    }
    html body:is(#paginaInicio, :has(#divContenido)) .content-wrapper > #divBloqueServicios:not(#mp2),
    html body:is(#paginaInicio, :has(#divContenido)) #divContenido.wrapper > .container > #divBloqueServicios:not(#mp2) {
        padding-top: 72px !important;
        padding-bottom: 72px !important;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueCredenciales .swiper-slide > i.banner-icon:not(#mp2) {
        height: 64px;
        margin-bottom: 18px !important;
        font-size: 40px !important;
    }
}
@media (max-width: 575.98px) {
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueServicios .row {
        --bs-gutter-y: 16px;
    }
}

/* ---------- Movimiento reducido ---------- */
/* Con prefers-reduced-motion custom.js no prepara ninguna entrada: todo queda visible y quieto. Por
   las dudas, nada de lo que entra se queda escondido ni a mitad de camino. */
@media (prefers-reduced-motion: reduce) {
    html body :is(.mp2-titulo-espera, .mp2-entra-espera, .mp2-entra-izq, .mp2-entra-der, .mp2-entra-arriba, .mp2-revela-foto) {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }
    html body .mp2-revela-foto img {
        transform: none !important;
    }
    /* las entradas del theme (scrollCue, data-cue) no miran esta preferencia: arrancan escondidas y
       se deslizan al aparecer. Con movimiento reducido quedan visibles desde el principio. */
    html body :is([data-cue], [data-cues] > *) {
        animation: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}

/* =====================================================================================
   Lo propio de Minaberria Propiedades 2
   -------------------------------------------------------------------------------------
   Todo lo de arriba es naze2 con la paleta de Minaberria. Aca va lo que naze2 no tiene:
   el bloque de Propiedades (buscador y listado) como panel, las fichas con foto de
   Destacadas y Servicios (bloques de modelo 5, no el predefinido de servicios), Visitas
   guiadas, el testimonio real y el pie con el mapa y la marca de diez letras.
   ===================================================================================== */

/* ---------- Paneles: los bloques de Minaberria que van en blanco ---------- */
/* La misma forma que el tramo "Paneles" de arriba (panel redondeado, despegado de los bordes, con
   14px de aire). Destacadas y Visitas guiadas van sobre el gris de la pagina, como Servicios en naze2. */
html body:is(#paginaInicio, :has(#divContenido)) .content-wrapper > :is(#divBloquePropiedades, #divBloqueServicios):not(#mp2),
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.wrapper > .container > :is(#divBloquePropiedades, #divBloqueServicios):not(#mp2){
    margin: 14px var(--v2-margen) 0 !important;
    border-radius: var(--v2-radio) !important;
    background-color: #ffffff !important;
}

/* ---------- Propiedades: el buscador y el listado ---------- */
/* El bloque de propiedades (predefinido 30) trae el buscador montado sobre la portada (margen
   negativo y vidrio) y los titulos centrados. Aca va dentro de su panel: arriba el titular del
   bloque, despues el buscador como una barra en pastilla y el listado con un encabezado chico. */
html body:is(#paginaInicio, :has(#divContenido)) .content-wrapper > #divBloquePropiedades:not(#mp2),
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.wrapper > .container > #divBloquePropiedades:not(#mp2){
    padding-top: 104px !important;
    padding-bottom: 96px !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades > .container{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* el titular del bloque (blq_titulo, desde el panel) va a la izquierda, con el segundo tono */
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades > .container > .col-12.text-center{
    text-align: left !important;
    padding: 0 !important;
    margin-bottom: 40px !important;
}

/* el buscador: una sola barra blanca en pastilla, los tres filtros como tramos separados por
   lineas finas (la etiqueta arriba, el valor abajo) y el boton verde al final, adentro de la barra.
   Su titulo propio ("Buscá tu propiedad", fijo de la plataforma) no va: lo dice el titular. */
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .row.mb-6:has(.buscador-propiedades){
    margin-bottom: 0 !important;
}
/* por encima del listado (el carrusel de la plataforma lleva z-index 10): si no, las fichas tapan
   los desplegables */
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .card.buscador-propiedades{
    margin-top: 0 !important;
    z-index: 20;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid var(--v2-linea) !important;
    box-shadow: 0 18px 44px rgba(28, 40, 22, .08) !important;
    transform: none !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .buscador-propiedades > .card-body{
    padding: 10px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: inherit !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .buscador-propiedades h1{
    display: none !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .buscador-propiedades .card-body > .row{
    flex-wrap: nowrap;
    align-items: stretch !important;
    margin: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .buscador-propiedades .card-body > .row > div{
    position: relative;
    flex: 1 1 0;
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .buscador-propiedades .card-body > .row > div:nth-child(3){
    flex-grow: 1.3;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .buscador-propiedades .card-body > .row > div:last-child{
    flex: 0 0 auto;
    padding-left: 8px !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .buscador-propiedades .card-body > .row > div:is(:nth-child(2), :nth-child(3))::before{
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 1px;
    background: var(--v2-linea);
    z-index: 2;
    transition: opacity .3s ease;
}
/* el tramo activo (con el mouse encima o abierto) se tiñe hasta el borde: las lineas de sus dos
   costados se apagan para no quedar pegadas a la pastilla */
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .buscador-propiedades .card-body > .row > div:is(:hover, :has(.custom-select-wrapper.open))::before,
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .buscador-propiedades .card-body > .row > div:is(:hover, :has(.custom-select-wrapper.open)) + div::before{
    opacity: 0;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .buscador-propiedades .form-label{
    position: absolute;
    z-index: 2;
    top: 13px;
    left: 30px;
    margin: 0 !important;
    pointer-events: none;
    font-family: var(--v2-sans) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    color: var(--v2-tono) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .custom-select-trigger{
    height: 66px !important;
    padding: 22px 24px 0 30px !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--v2-tinta) !important;
    font-size: 15.5px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: background-color .3s ease !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .custom-select-trigger svg{
    width: 18px;
    height: 18px;
    margin-top: -22px;
    color: var(--v2-tono);
    transition: transform .3s var(--v2-curva);
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .custom-select-wrapper.open .custom-select-trigger svg{
    transform: rotate(180deg);
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .custom-select-trigger:hover,
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .custom-select-wrapper.open .custom-select-trigger{
    background: var(--v2-pagina) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .custom-select-dropdown{
    top: calc(100% + 14px) !important;
    border-radius: 18px !important;
    border: 1px solid var(--v2-linea) !important;
    box-shadow: 0 18px 40px rgba(28, 40, 22, .12) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .buscador-propiedades .btn{
    height: 66px !important;
    padding: 0 34px !important;
    border-radius: 999px !important;
    justify-content: center;
    font-size: 15.5px !important;
}

/* el titulo del listado (fijo de la plataforma): un encabezado chico, con la linea fina arriba a
   todo el ancho */
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .row > .col-12.text-center{
    text-align: left !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .row > .col-12.text-center:has(> h3.display-4){
    margin-top: 72px;
    padding-top: 28px;
    background: linear-gradient(var(--v2-linea), var(--v2-linea)) center top / calc(100% - var(--bs-gutter-x)) 1px no-repeat;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades h3.display-4{
    margin: 0 0 8px !important;
    font-size: clamp(22px, 1.8vw, 26px) !important;
    font-weight: 600 !important;
    letter-spacing: -.025em !important;
}

/* las fichas de cada propiedad: borde fino en vez de sombra, la foto en su marco redondeado, el
   precio y los datos en Geist */
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .card-propiedad{
    border-radius: var(--v2-radio-tarjeta) !important;
    border: 1px solid var(--v2-linea) !important;
    box-shadow: none !important;
    background: #ffffff !important;
    transform: none !important;
    transition: border-color .45s ease !important;
}
@media (hover: hover) {
    html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .card-propiedad:hover{
        border-color: rgba(97, 117, 59, .45) !important;
    }
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .card-img-propiedad{
    width: auto !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    margin: 8px 8px 0;
    border-radius: 12px;
    overflow: hidden;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .card-img-propiedad img{
    transition: transform 1.1s var(--v2-curva) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .card-propiedad > .card-body{
    display: flex;
    flex-direction: column;
    padding: 22px 22px 20px !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .precio-propiedad{
    font-family: var(--v2-sans) !important;
    font-size: 13px !important;
    letter-spacing: 0;
    color: var(--v2-tono) !important;
    margin-bottom: 10px !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .precio-propiedad span{
    font-family: var(--v2-sans) !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    letter-spacing: -.03em;
    color: var(--v2-tinta) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .caracteristicas-propiedad{
    gap: 8px 16px !important;
    padding-bottom: 14px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid var(--v2-linea) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .caracteristicas-propiedad span{
    font-family: var(--v2-sans) !important;
    font-size: 13px !important;
    color: var(--v2-texto) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .caracteristicas-propiedad i{
    font-size: 16px !important;
    color: var(--v2-verde-medio) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .titulo-propiedad,
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .titulo-propiedad a{
    font-size: 19px !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;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .subtitulo-propiedad{
    font-family: var(--v2-sans) !important;
    font-size: 13px !important;
    letter-spacing: 0;
    color: var(--v2-tono) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .descripcion-propiedad{
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--v2-texto) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .footer-propiedad{
    border-top: 1px solid var(--v2-linea) !important;
    padding-top: 16px !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .codigo-propiedad{
    font-family: var(--v2-sans) !important;
    font-size: 13px !important;
    color: var(--v2-tono) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .footer-propiedad{
    flex-wrap: wrap;
    gap: 12px;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .botones-propiedad .btn{
    display: inline-flex !important;
    align-items: center;
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    line-height: 1 !important;
}
/* la paginacion del carrusel: el punto activo en el verde de la marca */
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .swiper-pagination-bullet{
    background: var(--v2-tinta) !important;
    opacity: .18;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .swiper-pagination-bullet-active{
    background: var(--v2-verde-medio) !important;
    opacity: 1;
}

/* ---------- Destacadas y Servicios: fichas con foto ---------- */
/* Como los Servicios de naze2 (las Categorias de Green Family 2): el nombre va adentro de la foto,
   abajo a la izquierda, sobre un degrade verde oscuro que lo hace legible, y debajo el dato corto.
   Aca son bloques de modelo 5, que ponen el nombre y el subtitulo debajo de la foto: la columna pasa
   a ser una grilla de una sola celda y el texto se apoya encima de la foto. El boton del componente
   cubre la ficha entera (la ficha es el enlace) y no se ve. */
html body:is(#paginaInicio, :has(#divContenido)) .content-wrapper > #divBloqueDestacadas:not(#mp2),
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.wrapper > .container > #divBloqueDestacadas:not(#mp2){
    padding-top: 112px !important;
    padding-bottom: 112px !important;
}
html body:is(#paginaInicio, :has(#divContenido)) :is(#divBloqueDestacadas, #divBloqueServicios) h3.display-4{
    margin: 0 0 56px !important;
}
html body:is(#paginaInicio, :has(#divContenido)) :is(#divBloqueDestacadas, #divBloqueServicios) .pricing-wrapper > .row{
    margin-top: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) :is(#divBloqueDestacadas, #divBloqueServicios) .pricing-wrapper > .row > div{
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto auto;
    text-align: left !important;
}
html body:is(#paginaInicio, :has(#divContenido)) :is(#divBloqueDestacadas, #divBloqueServicios) .pricing-wrapper > .row > div > figure{
    grid-area: 1 / 1 / 4 / 2;
    position: relative;
    margin: 0 !important;
    border-radius: var(--v2-radio-tarjeta) !important;
    overflow: hidden;
    background: #e2e7da;
}
html body:is(#paginaInicio, :has(#divContenido)) :is(#divBloqueDestacadas, #divBloqueServicios) .pricing-wrapper > .row > div > figure img{
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0 !important;
    transition: transform 1.2s var(--v2-curva);
}
/* las destacadas son fotos de propiedades: un poco mas altas que anchas, cuatro por fila */
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueDestacadas .pricing-wrapper > .row > div > figure img{
    aspect-ratio: 4 / 5;
}
html body:is(#paginaInicio, :has(#divContenido)) :is(#divBloqueDestacadas, #divBloqueServicios) .pricing-wrapper > .row > div > figure::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(22, 31, 15, .88) 0%, rgba(22, 31, 15, .52) 36%, rgba(22, 31, 15, 0) 64%);
    pointer-events: none;
    z-index: 1;
}
html body:is(#paginaInicio, :has(#divContenido)) :is(#divBloqueDestacadas, #divBloqueServicios) .pricing-wrapper > .row > div > h4{
    grid-area: 2 / 1 / 3 / 2;
    position: relative;
    z-index: 2;
    align-self: end;
    margin: 0 !important;
    padding: 0 26px 8px;
    font-size: 23px !important;
    font-weight: 600 !important;
    letter-spacing: -.025em !important;
    line-height: 1.15 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    pointer-events: none;
}
html body:is(#paginaInicio, :has(#divContenido)) :is(#divBloqueDestacadas, #divBloqueServicios) .pricing-wrapper > .row > div > .meta{
    grid-area: 3 / 1 / 4 / 2;
    position: relative;
    z-index: 2;
    margin: 0 !important;
    padding: 0 26px 24px;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.5 !important;
    text-transform: none !important;
    color: rgba(255, 255, 255, .74) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .74) !important;
    pointer-events: none;
}
/* en las destacadas el dato es tecnico (operacion, ambientes, metros): en Geist, chico y sin mayusculas */
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueDestacadas .pricing-wrapper > .row > div > h4{
    font-size: 20px !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueDestacadas .pricing-wrapper > .row > div > .meta{
    padding: 0 22px 22px;
    font-family: var(--v2-sans) !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueDestacadas .pricing-wrapper > .row > div > h4{
    padding: 0 22px 8px;
}
html body:is(#paginaInicio, :has(#divContenido)) :is(#divBloqueDestacadas, #divBloqueServicios) .pricing-wrapper > .row > div > p{
    display: none !important;
}
/* el boton del componente es el enlace de toda la ficha */
html body:is(#paginaInicio, :has(#divContenido)) :is(#divBloqueDestacadas, #divBloqueServicios) .pricing-wrapper > .row > div > a.btn{
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    z-index: 3;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--v2-radio-tarjeta) !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    font-size: 0 !important;
    color: transparent !important;
}
html body:is(#paginaInicio, :has(#divContenido)) :is(#divBloqueDestacadas, #divBloqueServicios) .pricing-wrapper > .row > div > a.btn *{
    opacity: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) :is(#divBloqueDestacadas, #divBloqueServicios) .pricing-wrapper > .row > div > a.btn:focus-visible{
    outline: 2px solid var(--v2-verde-medio) !important;
    outline-offset: 4px;
}
/* al pasar el mouse la foto se acerca y la linea de abajo del nombre se llena de verde claro, como
   las filas de las fichas tecnicas */
html body:is(#paginaInicio, :has(#divContenido)) :is(#divBloqueDestacadas, #divBloqueServicios) .pricing-wrapper > .row > div::after{
    content: "";
    position: absolute;
    left: calc(var(--bs-gutter-x, 1.5rem) * .5 + 26px);
    right: calc(var(--bs-gutter-x, 1.5rem) * .5 + 26px);
    bottom: 0;
    z-index: 2;
    height: 2px;
    background: var(--v2-lima);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .6s var(--v2-curva);
    pointer-events: none;
}
@media (hover: hover) {
    html body:is(#paginaInicio, :has(#divContenido)) :is(#divBloqueDestacadas, #divBloqueServicios) .pricing-wrapper > .row > div:hover::after{
        transform: scaleX(1);
    }
    html body:is(#paginaInicio, :has(#divContenido)) :is(#divBloqueDestacadas, #divBloqueServicios) .pricing-wrapper > .row > div:hover > figure img{
        transform: scale(1.05);
    }
}

/* ---------- Visitas guiadas: los videos sobre el gris ---------- */
/* La galeria de videos (predefinido 25) centra el titular con un ancho a medida: va a la izquierda,
   como todos, y cada video en el marco redondeado de las fichas. */
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueVideos > .container{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueVideos .row.text-center{
    margin-bottom: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueVideos h2.display-4{
    width: auto !important;
    margin: 0 0 56px !important;
    text-align: left !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueVideos .swiper-slide figure{
    margin: 0 !important;
    border-radius: var(--v2-radio-tarjeta) !important;
    overflow: hidden;
    background: #dfe4d6;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueVideos .swiper-slide video{
    display: block;
    border-radius: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueVideos .btn-play{
    width: 56px !important;
    height: 56px !important;
    background: rgba(255, 255, 255, .92) !important;
    color: var(--v2-verde) !important;
    box-shadow: none !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueVideos .swiper-pagination-bullet{
    background: var(--v2-tinta) !important;
    opacity: .18;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueVideos .swiper-pagination-bullet-active{
    background: var(--v2-verde-medio) !important;
    opacity: 1;
}

/* ---------- Testimonios: el testimonio real, como una cita ---------- */
/* El bloque (predefinido 22) arma una tarjeta centrada por testimonio. Con el que hay, el panel lleva
   el titular a la izquierda y la cita grande en tinta, sin tarjeta y la autora debajo, sin estrellas
   (la base no guarda puntaje). Si se cargan mas, quedan en fila. */
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueTestimonios > .container{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueTestimonios > .container > h2.display-4{
    display: block !important;
    margin: 0 0 56px !important;
    text-align: left !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueTestimonios > .container > .row{
    justify-content: flex-start;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueTestimonios > .container > .row > div:only-child{
    flex: 0 0 100%;
    max-width: 860px;
    margin: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueTestimonios .card{
    border: 0 !important;
    border-top: 1px solid var(--v2-linea) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueTestimonios .card-body{
    padding: 32px 0 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueTestimonios .testimonio-calificacion{
    margin-bottom: 18px;
    font-size: 15px !important;
    letter-spacing: .12em;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueTestimonios .testimonio-calificacion i{
    color: var(--v2-verde-medio) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueTestimonios .card-body p{
    font-size: clamp(21px, 2vw, 28px) !important;
    font-weight: 500 !important;
    letter-spacing: -.025em !important;
    line-height: 1.4 !important;
    color: var(--v2-tinta) !important;
    -webkit-text-fill-color: var(--v2-tinta) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueTestimonios .card-body img.rounded-circle{
    width: 48px !important;
    height: 48px !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueTestimonios .card-body h6{
    font-family: var(--v2-sans) !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;
}

/* ---------- Pie: el mapa de la casa central y la marca ---------- */
/* El mapa va en el pie, como en greenfamily2 y dumar2 (el bloque Ubicacion de la home esta oculto).
   El punto de venta de Minaberria tiene foto: en el pie no va, para que la columna quede como la de
   dumar2 (los datos y el mapa). */
html body footer.text-inverse .li-punto-venta-imagen{
    display: none !important;
}
/* la marca gigante es la del logo, "Minaberria": diez letras, mas chica para que entre en el ancho */
html body footer.text-inverse .mp2-marca{
    font-size: 13.6vw;
}

/* ---------- Celular y tablet ---------- */
@media (max-width: 991.98px) {
    html body:is(#paginaInicio, :has(#divContenido)) .content-wrapper > #divBloquePropiedades:not(#mp2),
    html body:is(#paginaInicio, :has(#divContenido)) #divContenido.wrapper > .container > #divBloquePropiedades:not(#mp2){
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades > .container > .col-12.text-center{
        margin-bottom: 28px !important;
    }
    /* la barra se vuelve una ficha: los tres filtros uno debajo del otro, separados por lineas, y
       el boton a lo ancho abajo */
    html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .card.buscador-propiedades{
        border-radius: 24px !important;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .buscador-propiedades > .card-body{
        padding: 6px 6px 8px !important;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .buscador-propiedades .card-body > .row{
        flex-direction: column;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .buscador-propiedades .card-body > .row > div,
    html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .buscador-propiedades .card-body > .row > div:nth-child(3){
        flex: 0 0 auto;
        width: 100%;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .buscador-propiedades .card-body > .row > div:is(:nth-child(2), :nth-child(3))::before{
        top: 0;
        bottom: auto;
        left: 22px;
        right: 22px;
        width: auto;
        height: 1px;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .buscador-propiedades .form-label{
        left: 22px;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .custom-select-trigger{
        padding-left: 22px !important;
        padding-right: 18px !important;
        border-radius: 18px !important;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .buscador-propiedades .card-body > .row > div:last-child{
        padding: 6px 0 0 !important;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .buscador-propiedades .btn{
        width: 100%;
        height: 56px !important;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloquePropiedades .row > .col-12.text-center:has(> h3.display-4){
        margin-top: 48px;
        padding-top: 22px;
    }
    html body:is(#paginaInicio, :has(#divContenido)) .content-wrapper > #divBloqueDestacadas:not(#mp2),
    html body:is(#paginaInicio, :has(#divContenido)) #divContenido.wrapper > .container > #divBloqueDestacadas:not(#mp2){
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }
    html body:is(#paginaInicio, :has(#divContenido)) :is(#divBloqueDestacadas, #divBloqueServicios, #divBloqueVideos, #divBloqueTestimonios) :is(h2, h3).display-4,
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueTestimonios > .container > h2.display-4{
        margin-bottom: 36px !important;
    }
}
@media (max-width: 767.98px) {
    /* en el celular las fichas van de a una (Servicios) o de a dos (Destacadas), apaisadas para que
       no ocupen toda la pantalla */
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueServicios .pricing-wrapper > .row > div > figure img{
        aspect-ratio: 4 / 3;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueDestacadas .pricing-wrapper > .row > div > figure img{
        aspect-ratio: 4 / 3;
    }
    html body:is(#paginaInicio, :has(#divContenido)) :is(#divBloqueDestacadas, #divBloqueServicios) .pricing-wrapper > .row > div > h4{
        padding: 0 20px 6px;
        font-size: 20px !important;
    }
    html body:is(#paginaInicio, :has(#divContenido)) :is(#divBloqueDestacadas, #divBloqueServicios) .pricing-wrapper > .row > div > .meta{
        padding: 0 20px 18px;
    }
    html body footer.text-inverse .mp2-marca{
        font-size: 15vw;
    }
}

/* =====================================================================================
   Proceso: la linea de tiempo de Historia de dumar2
   -------------------------------------------------------------------------------------
   "Como trabajamos" no va con el circulo animado: toma la forma de la Historia de dumar2,
   copiada de su custom.css con el prefijo y el id cambiados (d2 -> mp2, Historia -> Proceso)
   y la paleta de Minaberria. El numero del paso hace de año. La diferencia: las de dumar2 son
   collages con fondo blanco (mix-blend-mode multiply y object-fit contain); aca son fotos
   normales, que llenan su marco redondeado (ver el final de este tramo).
   ===================================================================================== */

/* ---------- Encabezados con bajada: título y bajada contra el borde, en una columna ---------- */
/* En Green Family los titulares van a la izquierda en una sola columna. Proceso trae ademas una
   bajada, y la version 1 la acomodaba en una grilla de dos columnas. Se fija la disposicion en vez de perseguir cada regla heredada: el titulo arriba,
   la bajada debajo con ancho de lectura, los dos contra el mismo borde. */
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .row.text-center > .col-12 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-items: start !important;
    text-align: left !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .row.text-center > .col-12 > :is(h2, h3) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: flex-start !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .row.text-center > .col-12 > p:not(.lead) {
    align-self: flex-start !important;
    max-width: 46ch !important;
    margin: 22px 0 0 !important;
    text-align: left !important;
    font-size: 15.5px !important;
    line-height: 1.65 !important;
}
/* Historia tiene toda la columna: la bajada no puede atravesar el ancho entero. */
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .row.text-center > .col-12 {
    margin-bottom: 56px !important;
}

/* ---------- Historia: línea de tiempo ---------- */
/* La foto del hito abierto en un marco grande, con el año gigante detras, y los hitos en una lista
   con un riel a la izquierda. El tramo del riel del hito abierto se llena mientras corre el avance
   automatico, como la linea de los pasos del Proceso. */
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt{
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: 72px;
    align-items: stretch;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-escena{
    position: relative;
    min-height: 500px;
    margin: 0;
    border-radius: var(--v2-radio);
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 78% 18%, rgba(200, 217, 154, .22) 0%, rgba(200, 217, 154, 0) 55%),
        linear-gradient(160deg, #f2f4ee 0%, #e2e7da 100%);
}
/* el año gigante: el que se va sube, el que llega entra desde abajo */
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-anios{
    position: absolute;
    left: 36px;
    right: 36px;
    bottom: 10px;
    height: clamp(120px, 13vw, 200px);
    overflow: hidden;
    pointer-events: none;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-anios > span{
    position: absolute;
    left: 0;
    bottom: 0;
    font-family: var(--v2-sans);
    font-size: clamp(120px, 13vw, 200px);
    font-weight: 700;
    letter-spacing: -.06em;
    line-height: .86;
    /* relleno y recortado por dentro con el filtro #mp2ContornoAnio (custom.js): queda solo el borde de
       la silueta. Con text-stroke, la tipografia variable mostraba rulitos en el 9, el 6 y el 5. */
    color: #2F481F;
    -webkit-text-fill-color: #2F481F;
    -webkit-text-stroke: 0;
    filter: url(#mp2ContornoAnio);
    opacity: .22;
    /* fuera de escena, bien lejos: la caja del renglon mide menos que el contenedor y con 105% el
       año que se iba dejaba ver su parte de abajo, cortada, arriba del que entraba */
    transform: translateY(150%);
    transition: none;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-anios > span.es-activo{
    transform: none;
    transition: transform .9s var(--v2-curva);
}
/* solo se animan la entrada y la salida: el que ya salio vuelve abajo en el acto, sin cruzar la vista */
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-anios > span.es-saliente{
    transform: translateY(-150%);
    transition: transform .9s var(--v2-curva);
}
/* la foto: la que llega se abre de abajo hacia arriba, la que se va se desvanece subiendo */
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-fotos{
    position: absolute;
    inset: 44px 44px 96px;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-foto{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(24px) scale(.97);
    border-radius: var(--v2-radio-tarjeta);
    overflow: hidden;
    transition: opacity .5s ease, clip-path 1s var(--v2-curva), transform 1.1s var(--v2-curva);
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-foto.es-activa{
    z-index: 2;
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-foto.es-saliente{
    z-index: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(-18px) scale(1.02);
    transition: opacity .7s ease, transform .9s var(--v2-curva);
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-foto img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 0 !important;
}
/* la lista: un riel vertical con un punto por hito */
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-hitos{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 0 0 0 44px;
    list-style: none;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-hito{
    position: relative;
    padding: 0 0 8px;
}
/* el riel: del punto de este hito al del siguiente */
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-hito::before{
    content: "";
    position: absolute;
    left: -37px;
    top: 44px;
    bottom: -30px;
    width: 2px;
    background: var(--v2-linea);
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-hito:last-child::before{
    bottom: 0;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-tramo{
    position: absolute;
    left: -37px;
    top: 44px;
    bottom: -30px;
    width: 2px;
    background: var(--v2-verde-medio);
    transform: scaleY(0);
    transform-origin: center top;
    pointer-events: none;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-hito:last-child .mp2-lt-tramo{
    bottom: 0;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-hito.es-pasado .mp2-lt-tramo{
    transform: none;
    background: var(--v2-tinta);
    opacity: .35;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-hito.mp2-corriendo .mp2-lt-tramo{
    animation: mp2-lt-avance 6s linear forwards;
}
@keyframes mp2-lt-avance{
    from{ transform: scaleY(0); }
    to{ transform: scaleY(1); }
}
/* el punto: hueco si no llego, lleno si ya paso, con halo si es el abierto */
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-hito::after{
    content: "";
    position: absolute;
    left: -44px;
    top: 30px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(28, 40, 22, .25);
    background: #ffffff;
    box-shadow: 0 0 0 0 rgba(97, 117, 59, 0);
    transition: background-color .4s ease, border-color .4s ease, box-shadow .6s var(--v2-curva), transform .5s var(--v2-curva);
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-hito.es-pasado::after{
    border-color: var(--v2-tinta);
    background: var(--v2-tinta);
    transform: scale(.75);
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-hito.es-activo::after{
    border-color: var(--v2-verde-medio);
    background: var(--v2-verde-medio);
    box-shadow: 0 0 0 7px rgba(97, 117, 59, .14);
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-boton{
    display: flex;
    align-items: baseline;
    gap: 22px;
    width: 100%;
    padding: 26px 0 14px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-family: var(--v2-sans);
    color: var(--v2-tono);
    transition: color .3s ease;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-boton:hover,
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-hito.es-activo .mp2-lt-boton{
    color: var(--v2-tinta);
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-anio{
    flex: 0 0 auto;
    width: 44px;
    font-family: var(--v2-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--v2-tono);
    transition: color .3s ease;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-hito.es-activo .mp2-lt-anio{
    color: var(--v2-verde-medio);
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-titulo{
    font-size: clamp(20px, 1.7vw, 25px);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.25;
}
/* el texto del hito abierto se despliega */
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-texto{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .6s var(--v2-curva);
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-texto > div{
    overflow: hidden;
    padding-left: 66px;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-hito.es-activo .mp2-lt-texto{
    grid-template-rows: 1fr;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-texto p{
    max-width: 42ch;
    margin: 0 0 14px !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: var(--v2-texto) !important;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s ease, transform .6s var(--v2-curva);
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-hito.es-activo .mp2-lt-texto p{
    opacity: 1;
    transform: none;
    transition-delay: .15s;
}

@media (max-width: 991px){
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt{
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-escena{
        min-height: 0;
        aspect-ratio: 4 / 3.2;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-fotos{
        inset: 28px 24px 64px;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-anios{
        left: 22px;
        right: 22px;
        height: 96px;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-anios > span{
        font-size: 96px;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-hitos{
        padding-left: 36px;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-hito::before,
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-tramo{
        left: -29px;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-hito::after{
        left: -36px;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-texto > div{
        padding-left: 0;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .mp2-lt-boton{
        gap: 14px;
    }
}

/* ---------- Proceso: lo que cambia respecto de dumar2 ---------- */
/* Es un panel blanco mas, como Nosotros y Tasaciones. Las fotos son fotos y no collages: llenan su
   marco (arriba: sin multiply, object-fit cover y el recorte redondeado en cada capa). */
html body:is(#paginaInicio, :has(#divContenido)) .content-wrapper > #divBloqueProceso:not(#mp2),
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.wrapper > .container > #divBloqueProceso:not(#mp2){
    margin: 14px var(--v2-margen) 0 !important;
    border-radius: var(--v2-radio) !important;
    background-color: #ffffff !important;
}

/* ---------- Proceso: la bajada pegada al titular ---------- */
/* El titular traia 40px de margen y la bajada 22px mas: quedaba despegada. Va a la distancia de la
   bajada del Cierre, y el aire grande queda entre la bajada y la linea de tiempo. */
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .row.text-center > .col-12 > :is(h2, h3){
    margin-bottom: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divBloqueProceso .row.text-center > .col-12 > p:not(.lead){
    margin-top: 20px !important;
}

/* ---------- Testimonios: sin estrellas ---------- */
/* El bloque pinta siempre cinco estrellas vacias: el testimonio no tiene puntaje cargado (la tabla
   no tiene ese dato), asi que no se muestran. */
html body #divBloqueTestimonios .testimonio-calificacion{
    display: none !important;
}

/* ---------- Resultados del buscador ---------- */
/* Buscar sin ningun filtro devuelve el carrusel del listado, pero la plataforma no lo arranca
   (propiedades.php llama a reinitializarSwiper, que no existe) y cada ficha ocupaba todo el ancho
   con la foto gigante. Mientras el carrusel no este armado, las fichas van en grilla, como cuando
   se filtra. Sin resultados, el aviso va contra el borde y en el tono suave. */
html body #divResultadosPropiedades .swiper:not(.swiper-initialized) > .swiper-wrapper{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    transform: none !important;
}
html body #divResultadosPropiedades .swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide{
    width: auto !important;
    height: auto;
    margin: 0 !important;
}
html body #divResultadosPropiedades > h4.text-center{
    margin: 8px 0 0 !important;
    padding: 28px 0;
    border-top: 1px solid var(--v2-linea);
    text-align: left !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    letter-spacing: -.02em !important;
    color: var(--v2-tono) !important;
    -webkit-text-fill-color: var(--v2-tono) !important;
}
@media (max-width: 991.98px) {
    html body #divResultadosPropiedades .swiper:not(.swiper-initialized) > .swiper-wrapper{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 767.98px) {
    html body #divResultadosPropiedades .swiper:not(.swiper-initialized) > .swiper-wrapper{
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =====================================================================================
   Las paginas internas
   -------------------------------------------------------------------------------------
   Nosotros, Servicios, Tasaciones y Contacto llevan una portada propia (un bloque portada en la
   seccion, como naze2: 06_paginas.sql) y toman el lenguaje de la home, que va detras de
   body:is(#paginaInicio, :has(#divContenido)): la pagina, no la portada (ver "BLOQUES
   INDEPENDIENTES" mas arriba). Si se oculta la portada de una seccion, la plataforma pinta el titulo
   de la seccion y el resto queda igual. Los bloques de Servicios, Proceso, Tasaciones y Cierre son
   copias de los de la home, pero viven adentro de #divContenido > .container: las reglas que nombran
   `.content-wrapper >` llevan tambien ese lugar. Aca va lo que solo tienen las internas: el texto
   de Nosotros y los formularios como paneles, y la ficha de propiedad, que no tiene portada.
   ===================================================================================== */

/* ---------- El contenido de la seccion, a todo el ancho y sobre el gris de la pagina ---------- */
/* Los paneles se despegan solos de los bordes, como en la home: el contenedor de la seccion no
   acota el ancho ni suma aire (la version 1 le ponia margenes por seccion). */
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.wrapper:not(#mp2){
    padding: 0 !important;
    background: transparent !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.wrapper > .container:not(#mp2){
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.wrapper > .container > .row.d-non{
    display: none !important;
}

/* ---------- Nosotros: el texto de la seccion como un panel ---------- */
/* La frase de apertura (la descripcion corta) va grande y en tinta. Debajo, Vision y Mision como las
   filas de una ficha: el titulo a la izquierda, el texto a la derecha y una linea fina entre filas.
   La foto de la seccion, en su marco redondeado. Todo se carga desde Secciones. */
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.seccion-nosotros > .container > .row:not(.d-non){
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    column-gap: 88px;
    align-items: center;
    margin: 14px var(--v2-margen) 0 !important;
    padding: 112px max(32px, calc((100% - 1240px) / 2 + 32px)) !important;
    background: #ffffff;
    border-radius: var(--v2-radio);
}
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.seccion-nosotros > .container > .row > [class*="col"]{
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.seccion-nosotros .div-texto-seccion{
    margin: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.seccion-nosotros .div-texto-seccion > .col-12{
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    column-gap: 32px;
    margin: 0 !important;
    padding: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.seccion-nosotros .div-texto-seccion > .col-12 > :is(p:first-child, hr){
    grid-column: 1 / -1;
}
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.seccion-nosotros .div-texto-seccion > .col-12 > p:first-child{
    max-width: 24ch;
    margin: 0 0 56px !important;
    font-size: clamp(26px, 2.4vw, 36px) !important;
    font-weight: 600 !important;
    letter-spacing: -.035em !important;
    line-height: 1.12 !important;
    color: var(--v2-tinta) !important;
    -webkit-text-fill-color: var(--v2-tinta);
}
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.seccion-nosotros .div-texto-seccion > .col-12 > hr{
    display: none;
}
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.seccion-nosotros .div-texto-seccion > .col-12 > h2,
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.seccion-nosotros .div-texto-seccion > .col-12 > h2 + p{
    margin: 0 !important;
    padding: 22px 0 26px !important;
    border-top: 1px solid var(--v2-linea);
}
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.seccion-nosotros .div-texto-seccion > .col-12 > h2{
    grid-column: 1;
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: -.02em !important;
    line-height: 1.3 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.seccion-nosotros .div-texto-seccion > .col-12 > h2 + p{
    grid-column: 2;
    font-size: 15.5px !important;
    line-height: 1.65 !important;
    color: var(--v2-texto) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.seccion-nosotros > .container > .row img{
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--v2-radio-tarjeta) !important;
    margin: 0 !important;
}

/* ---------- Formularios (Contacto y Tasaciones): un panel con el titular a la izquierda ---------- */
/* El titulo y la bajada salen de la configuracion del formulario de la seccion. El titulo lleva su
   segundo tono despues de la coma o los dos puntos (custom.js), como los de los bloques. */
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.wrapper > #divContacto{
    margin: 14px var(--v2-margen) 0;
    padding: 112px 0;
    background: #ffffff;
    border-radius: var(--v2-radio);
}
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.wrapper > #divContacto > .container{
    max-width: 1240px;
    padding: 0 32px;
}
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.wrapper > #divContacto > .container > #divContacto.row{
    margin: 0 !important;
    padding: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divContenido.wrapper > #divContacto .row > .col-12:has(> form){
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-auto-rows: min-content;
    column-gap: 88px;
    margin: 0 !important;
    padding: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divContacto p.titulo-formulario-contacto{
    grid-column: 1;
    margin: 0 !important;
    text-align: left !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divContacto p.titulo-formulario-contacto.display-5{
    max-width: 16ch;
    font-size: clamp(34px, 3.6vw, 54px) !important;
    font-weight: 700 !important;
    letter-spacing: -.042em !important;
    line-height: 1.02 !important;
    color: var(--v2-tinta) !important;
    -webkit-text-fill-color: var(--v2-tinta);
}
html body:is(#paginaInicio, :has(#divContenido)) #divContacto p.titulo-formulario-contacto:not(.display-5){
    max-width: 38ch;
    margin-top: 24px !important;
    font-size: 15.5px !important;
    line-height: 1.65 !important;
    color: var(--v2-texto) !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divContacto .col-12 > form.contact-form{
    grid-column: 2;
    grid-row: 1 / span 3;
}
html body:is(#paginaInicio, :has(#divContenido)) #divContacto form.contact-form > .row{
    margin: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divContacto form.contact-form > .row > div{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divContacto form.contact-form .row.gx-4{
    --bs-gutter-x: 12px;
}
/* el boton, a la izquierda como el resto (la plataforma lo centra y le suma un margen) */
html body:is(#paginaInicio, :has(#divContenido)) #divContacto form.contact-form .text-center > .d-flex{
    justify-content: flex-start !important;
}
html body:is(#paginaInicio, :has(#divContenido)) #divContacto form.contact-form .btn-send{
    margin: 4px 0 0 !important;
}

/* ---------- Campos de formulario: los de la home ---------- */
/* La misma forma que el buscador de propiedades: fondo gris verdoso, borde fino y la etiqueta en el
   tono suave. Al tomar el foco el campo se aclara y el borde pasa al verde. Valen para los
   formularios de las internas y para la consulta de la ficha de propiedad. */
html body :is(#divContacto, .sidebar-card) :is(.form-control, .form-select){
    min-height: 56px;
    padding-left: 20px !important;
    padding-right: 20px !important;
    border: 1px solid var(--v2-linea) !important;
    border-radius: 14px !important;
    background-color: var(--v2-pagina) !important;
    box-shadow: none !important;
    color: var(--v2-tinta) !important;
    font-size: 15px !important;
    transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease !important;
}
html body #divContacto .form-floating > :is(.form-control, .form-select){
    height: 60px;
    padding-top: 26px !important;
    padding-bottom: 8px !important;
}
html body #divContacto .form-floating > textarea.form-control{
    height: 168px;
}
html body :is(#divContacto, .sidebar-card) :is(.form-control, .form-select):focus{
    border-color: var(--v2-verde-medio) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(97, 117, 59, .12) !important;
}
html body .sidebar-card .form-control::placeholder{
    color: var(--v2-tono) !important;
}
html body #divContacto .form-floating > label{
    padding-left: 20px !important;
    color: var(--v2-tono) !important;
    font-size: 15px !important;
}
html body #divContacto .form-floating > label::after{
    background: transparent !important;
}
html body #divContacto .form-label-error{
    margin-top: 6px;
    padding-left: 20px;
    font-family: var(--v2-sans) !important;
    font-size: 13px !important;
}

/* ---------- La ficha de propiedad ---------- */
/* propiedad.php no tiene .content-wrapper, asi que el aire que el menu flotante deja arriba en las
   paginas sin portada (menu-flotante.css, body.mf-sin-hero .content-wrapper) no le llega y la galeria
   quedaba debajo de la pastilla: se lo da la primera seccion. El resto, en el lenguaje: la galeria
   en su marco redondeado, los datos en un panel blanco, las caracteristicas como fichas grises, los
   datos chicos en Geist y la consulta como una ficha al costado. */
html body.mf-sin-hero:has(.sidebar-propiedad){
    background: var(--v2-pagina) !important;
}
html body.mf-sin-hero:has(.sidebar-propiedad) > section.wrapper:first-of-type{
    padding-top: calc(var(--mf-top) + var(--mf-alto, 72px) + 24px) !important;
}
html body:has(.sidebar-propiedad) > section.wrapper{
    background: transparent !important;
}
html body:has(.sidebar-propiedad) > section.wrapper > .container{
    max-width: 1268px;
}
html body:has(.sidebar-propiedad) :is(.galeria-propiedad-grid, .galeria-propiedad-single){
    height: 560px;
    gap: 10px;
    margin-bottom: 0 !important;
    border-radius: var(--v2-radio) !important;
}
html body:has(.sidebar-propiedad) .galeria-propiedad-grid .galeria-item{
    border: 0 !important;
    border-radius: 0 !important;
}
html body:has(.sidebar-propiedad) .galeria-item img{
    padding: 0 !important;
    transition: transform 1.1s var(--v2-curva) !important;
}
html body:has(.sidebar-propiedad) .galeria-propiedad-grid .galeria-item-thumb.active::after{
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 3px var(--v2-lima);
    pointer-events: none;
}
/* los datos: un panel blanco, como los bloques de la home */
html body:has(.sidebar-propiedad) > section.wrapper:has(.sidebar-propiedad){
    margin: 14px var(--v2-margen) 0;
    padding: 72px 0 88px !important;
    background: #ffffff !important;
    border-radius: var(--v2-radio);
}
html body:has(.sidebar-propiedad) .col-lg-8 > p.text-muted{
    font-family: var(--v2-sans) !important;
    font-size: 13px !important;
    letter-spacing: 0;
    color: var(--v2-tono) !important;
}
html body:has(.sidebar-propiedad) .col-lg-8 > p.text-muted i{
    color: var(--v2-verde-medio) !important;
}
html body:has(.sidebar-propiedad) .col-lg-8 > hr{
    border-color: var(--v2-linea) !important;
    background: var(--v2-linea) !important;
    opacity: 1 !important;
}
html body:has(.sidebar-propiedad) .col-lg-8 > h1{
    margin: 4px 0 6px !important;
    font-size: clamp(34px, 3.4vw, 50px) !important;
    letter-spacing: -.042em !important;
    line-height: 1.04 !important;
}
html body:has(.sidebar-propiedad) .col-lg-8 > h1 + p.text-muted{
    margin-bottom: 18px !important;
}
html body:has(.sidebar-propiedad) .col-lg-8 > h2.text-primary{
    font-size: 30px !important;
    font-weight: 600 !important;
    letter-spacing: -.03em !important;
    color: var(--v2-verde) !important;
    -webkit-text-fill-color: var(--v2-verde) !important;
}
html body:has(.sidebar-propiedad) .col-lg-8 > h4{
    margin-bottom: 20px !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: -.025em !important;
    color: var(--v2-tinta) !important;
}
html body:has(.sidebar-propiedad) .caracteristica-item{
    padding: 18px 20px !important;
    gap: 14px !important;
    background: var(--v2-pagina) !important;
    border-radius: 14px !important;
}
html body:has(.sidebar-propiedad) .caracteristica-item i{
    color: var(--v2-verde-medio) !important;
}
html body:has(.sidebar-propiedad) .caracteristica-item .label{
    font-family: var(--v2-sans) !important;
    font-size: 13px !important;
    letter-spacing: 0;
    color: var(--v2-tono) !important;
}
html body:has(.sidebar-propiedad) .caracteristica-item .valor{
    font-size: 18px !important;
    font-weight: 600 !important;
    letter-spacing: -.02em;
    color: var(--v2-tinta) !important;
}
html body:has(.sidebar-propiedad) .descripcion-propiedad-detalle{
    font-size: 15.5px !important;
    line-height: 1.7 !important;
    color: var(--v2-texto) !important;
}
html body:has(.sidebar-propiedad) .col-lg-8 .uil-check{
    color: var(--v2-verde-medio) !important;
}
html body:has(.sidebar-propiedad) .mapa-propiedad-container{
    border-radius: var(--v2-radio-tarjeta) !important;
    background: var(--v2-pagina) !important;
}
html body:has(.sidebar-propiedad) .mapa-propiedad-container iframe{
    height: 400px;
}
/* la consulta: una ficha gris claro al costado, sin sombra */
html body:has(.sidebar-propiedad) .sidebar-propiedad{
    top: calc(var(--mf-top) + var(--mf-alto, 72px) + 20px);
}
html body:has(.sidebar-propiedad) .sidebar-card{
    padding: 30px !important;
    background: var(--v2-panel) !important;
    border: 1px solid var(--v2-linea);
    border-radius: var(--v2-radio-tarjeta) !important;
    box-shadow: none !important;
}
html body:has(.sidebar-propiedad) .sidebar-card .agente-info{
    border-bottom: 0 !important;
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
}
html body:has(.sidebar-propiedad) .sidebar-card h4{
    font-size: 24px !important;
    letter-spacing: -.03em !important;
}
html body:has(.sidebar-propiedad) .sidebar-card .d-flex.align-items-center{
    margin-bottom: 6px;
    font-size: 15px;
}
html body:has(.sidebar-propiedad) .sidebar-card .d-flex.align-items-center i{
    color: var(--v2-verde-medio) !important;
}
html body:has(.sidebar-propiedad) .sidebar-card .d-flex.align-items-center a{
    color: var(--v2-tinta) !important;
}
html body:has(.sidebar-propiedad) .sidebar-card hr{
    border-color: var(--v2-linea) !important;
    opacity: 1 !important;
}
html body:has(.sidebar-propiedad) .sidebar-card h6{
    font-family: var(--v2-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: var(--v2-tono) !important;
}
html body:has(.sidebar-propiedad) .sidebar-card .form-control{
    background-color: #ffffff !important;
}
html body:has(.sidebar-propiedad) .sidebar-card textarea.form-control{
    padding-top: 14px !important;
    line-height: 1.55 !important;
}
html body:has(.sidebar-propiedad) .sidebar-card .btn.btn-secondary{
    background: transparent !important;
    border: 1px solid var(--v2-linea) !important;
    color: var(--v2-tinta) !important;
    -webkit-text-fill-color: var(--v2-tinta);
}
html body:has(.sidebar-propiedad) .sidebar-card .btn.btn-secondary:hover{
    border-color: var(--v2-tinta) !important;
}
/* propiedades similares: el titular a la izquierda y las fichas como las del listado de la home */
html body:has(.sidebar-propiedad) #divPropiedadesSimilares > section.wrapper > .container{
    padding-top: 96px !important;
}
html body:has(.sidebar-propiedad) #divPropiedadesSimilares > section.wrapper h3.display-5{
    margin-bottom: 48px !important;
    text-align: left !important;
    font-size: clamp(34px, 3.6vw, 54px) !important;
    letter-spacing: -.042em !important;
    line-height: 1.02 !important;
}
html body:has(.sidebar-propiedad) #divPropiedadesSimilares > section.wrapper .card{
    border: 1px solid var(--v2-linea) !important;
    border-radius: var(--v2-radio-tarjeta) !important;
    box-shadow: none !important;
    background: #ffffff !important;
    transition: border-color .45s ease !important;
}
@media (hover: hover) {
    html body:has(.sidebar-propiedad) #divPropiedadesSimilares > section.wrapper .card:hover{
        border-color: rgba(97, 117, 59, .45) !important;
    }
}
html body:has(.sidebar-propiedad) #divPropiedadesSimilares > section.wrapper .card figure{
    margin: 8px 8px 0 !important;
    border-radius: 12px !important;
    overflow: hidden;
}
html body:has(.sidebar-propiedad) #divPropiedadesSimilares > section.wrapper .card .text-muted{
    font-family: var(--v2-sans) !important;
    font-size: 13px !important;
    letter-spacing: 0;
    color: var(--v2-tono) !important;
}
html body:has(.sidebar-propiedad) #divPropiedadesSimilares > section.wrapper .card h4 a{
    font-size: 19px !important;
    font-weight: 600 !important;
    letter-spacing: -.02em !important;
    color: var(--v2-tinta) !important;
}
html body:has(.sidebar-propiedad) #divPropiedadesSimilares > section.wrapper .card .text-primary{
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--v2-tinta) !important;
}
/* las fichas similares arrancan contra el borde, como el titular (la plataforma las centra) */
html body:has(.sidebar-propiedad) #divPropiedadesSimilares .row.justify-content-center{
    justify-content: flex-start !important;
}

/* ---------- Internas: celular y tablet ---------- */
@media (max-width: 991.98px) {
    html body:is(#paginaInicio, :has(#divContenido)) #divContenido.seccion-nosotros > .container > .row:not(.d-non){
        grid-template-columns: minmax(0, 1fr);
        row-gap: 48px;
        padding: 64px 24px !important;
        border-radius: 20px;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divContenido.seccion-nosotros > .container > .row img{
        aspect-ratio: 4 / 3;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divContenido.wrapper > #divContacto{
        padding: 64px 0;
        border-radius: 20px;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divContenido.wrapper > #divContacto > .container{
        padding: 0 24px;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divContenido.wrapper > #divContacto .row > .col-12:has(> form){
        grid-template-columns: minmax(0, 1fr);
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divContacto .col-12 > form.contact-form{
        grid-column: 1;
        grid-row: auto;
        margin-top: 36px;
    }
    html body:has(.sidebar-propiedad) :is(.galeria-propiedad-grid, .galeria-propiedad-single){
        height: auto;
        border-radius: 20px !important;
    }
    html body:has(.sidebar-propiedad) > section.wrapper:has(.sidebar-propiedad){
        padding: 48px 0 56px !important;
        border-radius: 20px;
    }
    html body:has(.sidebar-propiedad) #divPropiedadesSimilares > section.wrapper > .container{
        padding-top: 64px !important;
    }
}
@media (max-width: 575.98px) {
    html body:is(#paginaInicio, :has(#divContenido)) #divContenido.seccion-nosotros .div-texto-seccion > .col-12{
        grid-template-columns: minmax(0, 1fr);
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divContenido.seccion-nosotros .div-texto-seccion > .col-12 > h2 + p{
        grid-column: 1;
        padding-top: 0 !important;
        border-top: 0;
    }
    html body:is(#paginaInicio, :has(#divContenido)) #divContenido.seccion-nosotros .div-texto-seccion > .col-12 > h2{
        padding-bottom: 10px !important;
    }
}

/* ---------- Movimiento reducido, en todo el sitio ---------- */
/* Lo de custom.js ya respeta la preferencia (la portada no entra animada, los titulares no suben,
   la linea de tiempo y el acordeon no avanzan solos, el cierre queda enmarcado y la marca del pie
   completa) y frena los carruseles. Lo que queda son animaciones y transiciones de la plataforma
   y del theme que no la miran: el pulso del boton de WhatsApp y de los videos, el cargador de la
   portada, el paso de un slide a otro. Terminan en el acto, en su estado final. */
@media (prefers-reduced-motion: reduce) {
    html body *,
    html body *::before,
    html body *::after{
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}