/* ========================================================================= MATIAS ENSINAS PROPIEDADES — capa de marca Basada en el manual de identidad visual (Vansa Studio, julio 2026). Se carga DESPUES de bootstrap/style/color/responsive/site-head y sobrescribe la piel del template Uniland. ========================================================================= */ :root { --me-navy: #11263B; --me-arena: #E6DFCE; --me-verde: #1F3331; --me-carbon: #353535; --me-navy-80: rgba(17, 38, 59, .80); --me-navy-72: rgba(17, 38, 59, .72); --me-arena-70: rgba(230, 223, 206, .70); --me-arena-25: rgba(230, 223, 206, .25); --me-arena-12: rgba(230, 223, 206, .12); /* Fallbacks: si next/font no resolviera, quedan familias equivalentes */ --me-display: var(--font-display), "Oswald", "Arial Narrow", sans-serif; --me-body: var(--font-body), "Helvetica Neue", Arial, sans-serif; } /* ========================================================================= 1. Tipografia El template declara 'Montserrat' y 'Encode Sans Expanded' unas 90 veces. En vez de enumerarlas, forzamos herencia desde y excluimos los elementos de iconos (FontAwesome / flaticon / glyphicon), que dependen de su propia font-family para renderizar. ========================================================================= */ body { font-family: var(--me-body); font-weight: 300; color: var(--me-carbon); /* el template traía #f5f5f5, que se colaba entre bandas */ background: var(--me-arena); -webkit-font-smoothing: antialiased; } body *:not(i):not(.fa):not([class*="flaticon"]):not(.glyphicon) { font-family: inherit; } h1, h2, h3, h4, h5, h6, .section_title_blue, .section_title_white, .section_title_green, .service_title, .page_title, .footer-title h4, .btn, .navbar-brand, .me-tagline, .me-kicker, .me-claim { font-family: var(--me-display) !important; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; } /* La display es muy condensada: necesita mas cuerpo que la Montserrat original */ .section_title_blue, .section_title_white { font-size: 40px; line-height: 1.1; } .service_title { font-size: 24px; letter-spacing: .03em; } .page_title { font-size: 46px; } p, .service_area > p, .who_text h4, .sub-title p { font-weight: 300; line-height: 1.7; } /* ========================================================================= 2. Geometria de marca "Sin vueltas, sin tecnicismos": nada de bordes redondeados ni sombras difusas. El template los mete inline y por CSS. ========================================================================= */ .service_area, .btn, .form-control, .busca, .category-grid, .news_email, .property_search_form, input, select, textarea, #find_area form .buscint input, #find_area form .buscint select { border-radius: 0 !important; box-shadow: none !important; } /* ========================================================================= 3. Botones ========================================================================= */ .btn-default, input[type="submit"].btn-default { background-color: var(--me-navy) !important; color: var(--me-arena) !important; border: 1px solid var(--me-navy) !important; padding: 12px 34px; font-size: 16px; letter-spacing: .12em; transition: background-color .25s ease, color .25s ease; } .btn-default:hover, .btn-default:focus, input[type="submit"].btn-default:hover { background-color: transparent !important; color: var(--me-navy) !important; border-color: var(--me-navy) !important; } /* Sobre fondo oscuro el boton se invierte */ .me-band-navy .btn-default, .me-band-verde .btn-default, #footer .btn-default { background-color: var(--me-arena) !important; color: var(--me-navy) !important; border-color: var(--me-arena) !important; } .me-band-navy .btn-default:hover, .me-band-verde .btn-default:hover, #footer .btn-default:hover { background-color: transparent !important; color: var(--me-arena) !important; } /* ========================================================================= 4. Formularios ========================================================================= */ .form-control, .busca, .news_email { background: #fff; border: 1px solid rgba(53, 53, 53, .25); color: var(--me-carbon); font-weight: 300; padding: 12px 16px; height: auto; } .form-control:focus, .busca:focus, .news_email:focus { border-color: var(--me-navy); outline: none; } ::placeholder { color: #9a9a9a; opacity: 1; } /* ========================================================================= 5. Bandas de seccion ========================================================================= */ .me-band-navy { background-color: var(--me-navy) !important; } .me-band-arena { background-color: var(--me-arena) !important; } .me-band-verde { background-color: var(--me-verde) !important; } .me-band-navy, .me-band-navy p, .me-band-navy li, .me-band-navy span, .me-band-verde, .me-band-verde p, .me-band-verde li, .me-band-verde span, .me-band-navy .section_title_blue, .me-band-navy .section_title_white, .me-band-verde .section_title_blue, .me-band-verde .section_title_white { color: var(--me-arena); } .me-band-arena, .me-band-arena p, .me-band-arena li { color: var(--me-carbon); } .me-band-arena .section_title_blue, .me-band-arena .section_title_white, .me-band-arena .service_title { color: var(--me-navy); } /* El template pinta los de los titulos con el color de acento */ .section_title_blue > span, .section_title_white > span { color: inherit !important; text-shadow: none !important; opacity: .55; } /* El template centra los titulos de #popular-category; acá van alineados con el resto del contenido */ #popular-category .section_title_blue { text-align: left; } /* Filete corto bajo los titulos de seccion */ .me-rule::after { content: ""; display: block; width: 64px; height: 2px; margin-top: 18px; background: currentColor; opacity: .6; } .me-rule.text-center::after { margin-left: auto; margin-right: auto; } /* ========================================================================= 6. El arco — elemento grafico del manual Separa una banda de la siguiente. Se colorea con --arco-color. ========================================================================= */ /* --arco-bg = color de la banda de la que "sale" el arco (el fondo del bloque) --arco-color = color de la banda hacia la que se entra (la curva) */ .me-arco { position: relative; width: 100%; height: 110px; margin: 0; padding: 0; line-height: 0; overflow: hidden; background: var(--arco-bg, var(--me-arena)); } .me-arco::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: var(--arco-color, var(--me-arena)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L0,74 C310,-8 890,-8 1200,74 L1200,120 Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L0,74 C310,-8 890,-8 1200,74 L1200,120 Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / 100% 100%; } /* Variante hero: el arco se monta sobre la foto del slider, así el arena "sale" directamente de la imagen (como en el manual) en vez de dejar una franja plana intermedia. */ .me-arco--hero { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; background: transparent; } /* Arco invertido (la banda de arriba baja sobre la de abajo) */ .me-arco--down::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,46 C310,128 890,128 1200,46 L1200,0 Z' fill='%23fff'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,46 C310,128 890,128 1200,46 L1200,0 Z' fill='%23fff'/%3E%3C/svg%3E"); } /* ========================================================================= 7. Marca de agua (isotipo gigante tono sobre tono) ========================================================================= */ .me-watermark { position: relative; overflow: hidden; } .me-watermark > * { position: relative; z-index: 1; } .me-watermark::before { content: ""; position: absolute; right: -7%; top: 50%; width: 620px; height: 390px; transform: translateY(-50%); background: url(/img/brand/isotipo-navy.png) no-repeat center / contain; opacity: .055; pointer-events: none; z-index: 0; } .me-band-navy.me-watermark::before, .me-band-verde.me-watermark::before { background-image: url(/img/brand/isotipo.png); opacity: .06; } /* ========================================================================= 8. Header ========================================================================= */ #header { background: transparent; } #top_header, #nav_header { background: var(--me-navy) !important; } #top_header { border-bottom: 1px solid var(--me-arena-25) !important; } #top_header .top_contact ul li, #top_header .top_contact ul li i, #top_header .top_contact ul li a, #top_header .top_right ul li a { color: var(--me-arena) !important; font-size: 14px; font-weight: 300; letter-spacing: .02em; } #top_header .top_right ul li a:hover, #top_header .top_contact ul li a:hover { color: #fff !important; } #nav_header { min-height: 0; } .navbar-brand { padding: 18px 15px; height: auto; } .nav-logo { height: 40px; width: auto; display: block; } .navbar { margin-bottom: 0; min-height: 0; } .submit_property { padding: 20px 0 20px 30px; } /* El template dibuja el icono del telefono como circulito absoluto; lo pasamos a inline para que entre dentro del boton de contorno */ .submit_property > a > i { position: static !important; top: auto; left: auto; border: 0 !important; border-radius: 0 !important; padding: 0 !important; font-size: 15px !important; margin-right: 8px; } .navbar-default .navbar-nav > li > a { font-family: var(--me-body) !important; color: var(--me-arena) !important; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 400; padding: 28px 14px; position: relative; background: transparent !important; } .navbar-default .navbar-nav > li > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 22px; height: 1px; background: var(--me-arena); transform: scaleX(0); transform-origin: left; transition: transform .28s ease; } .navbar-default .navbar-nav > li > a:hover::after, .navbar-default .navbar-nav > li.active > a::after { transform: scaleX(1); } .navbar-nav > li > .dropdown-menu { background: var(--me-navy); border: 1px solid var(--me-arena-25); border-radius: 0; padding: 6px 0; box-shadow: none; } .navbar-nav > li > .dropdown-menu li a, .navbar-nav > li > .dropdown-menu li:hover a { color: var(--me-arena) !important; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; padding: 9px 20px; } .navbar-nav > li > .dropdown-menu li a:hover { background: var(--me-arena-12) !important; } /* Telefono/WhatsApp del nav: contorno, sin relleno */ .submit_property > a { display: inline-block; border: 1px solid var(--me-arena) !important; background: transparent !important; color: var(--me-arena) !important; padding: 9px 18px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; transition: background-color .25s ease, color .25s ease; } .submit_property > a:hover { background: var(--me-arena) !important; color: var(--me-navy) !important; } .navbar-default .navbar-toggle, .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { border: 1px solid var(--me-arena); border-radius: 0; background: transparent; margin-top: 20px; } .navbar-default .navbar-toggle .icon-bar { background-color: var(--me-arena); } /* Sobre el hero el header es semitransparente y deja ver la foto. En las paginas sin slider queda navy solido y ocupa lugar en el flujo. */ body:has(#slider) #top_header, body:has(#slider) #nav_header { background: rgba(17, 38, 59, .55) !important; } body:not(:has(#slider)) #header { position: relative; } /* ========================================================================= 9. Hero ========================================================================= */ #slider .item::before, .carousel-inner .item::before { background: var(--me-navy-72) !important; } .me-hero-logo { display: block; margin: 0 auto; width: 100%; max-width: 460px; height: auto; } .me-tagline { color: var(--me-arena); font-size: 26px; letter-spacing: .16em; margin-top: 34px; line-height: 1.3; } .me-tagline::before, .me-tagline::after { content: "—"; opacity: .55; margin: 0 14px; } #slider .carousel-caption { text-shadow: none; padding-bottom: 0; } .slider_text { width: 100%; padding: 0; } .carousel-indicators.my_carousel li { border-radius: 0; border-color: var(--me-arena); width: 24px; height: 3px; margin: 0 4px; } .carousel-indicators.my_carousel li.active { background: var(--me-arena); } /* Buscador del hero: panel arena solido. Reemplaza el layout que el original traía en un