/* ===================================================================== Mauri Jocou Constructora — capa de marca (tema arena) (propuesta) Se carga DESPUÉS de main.css. No toca estructura ni animaciones: solo paleta, tipografía, fondos y el hero con video. Fuente de verdad: GJ Estudio/00_marca/marca.json ===================================================================== */ /* ---------- Tipografías de marca: General Sans (títulos) + Supreme (texto) ---------- Se cargan desde la API de Fontshare con un en el de cada página (licencia ITF Free Font License: uso web permitido). */ /* ---------- Paleta ---------- */ :root { --gj-fondo: #E3DBC5; /* arena (paleta) */ --gj-fondo-claro: #EFEDE2; /* crema (paleta): paneles y tarjetas */ --gj-panel: #EFEDE2; --gj-verde-medio: #49644D; --gj-sombra: #184429; /* veladuras sobre fotos: verde de la paleta */ --gj-borde: rgba(24, 68, 41, 0.16); --gj-texto: #184429; /* verde (paleta) */ --gj-texto-medio: #184429; --gj-texto-tenue: #49644D; /* verde medio (paleta) */ --gj-oliva: #184429; /* acento / botones: verde */ --gj-oliva-claro: #49644D; /* acento secundario: verde medio */ --gj-crema: #EFEDE2; /* texto sobre fotos y sobre botones verdes */ --gj-whatsapp: #25D366; /* Reasignación de las variables del template para que arrastren todo el sitio */ /* --navy se usa 21 veces como color de TEXTO y 6 como fondo: va a texto, y los fondos se corrigen abajo */ --navy: var(--gj-texto); --navy-light: var(--gj-texto-medio); --white-warm: var(--gj-fondo-claro); --gray-light: var(--gj-panel); --gray-mid: var(--gj-texto-tenue); --gray-dark: var(--gj-texto-medio); --copper: var(--gj-oliva); --copper-dark: #49644D; --text-dark: var(--gj-texto); --text-body: var(--gj-texto-medio); --text-light: var(--gj-texto-tenue); --panel-bg: var(--gj-panel); --card-overlay: linear-gradient(0deg, rgba(11,24,16,0.88) 0%, rgba(11,24,16,0.35) 45%, rgba(11,24,16,0) 100%); --header-bg: rgba(227,219,197, 0.92); --shadow-sm: 0 2px 8px rgba(24,68,41,0.10); --shadow-md: 0 6px 24px rgba(24,68,41,0.12); --shadow-lg: 0 12px 40px rgba(24,68,41,0.16); --radius: 8px; } /* ---------- Fondo: liso, sin hormigón ---------- */ html { background-image: none; background-color: var(--gj-fondo); } /* En celular main.css no pinta la textura en el html: la monta como una capa fija aparte (body::before, z-index -1). Apagar el fondo del html no la toca, así que el hormigón seguía apareciendo solo en el teléfono. */ body::before { display: none !important; } body { font-family: 'Supreme', system-ui, sans-serif; color: var(--gj-texto-medio); } h1, h2, h3, h4, h5, h6 { font-family: 'General Sans', system-ui, sans-serif; color: var(--gj-texto); font-weight: 600; letter-spacing: 0; } h3 { font-family: 'Supreme', system-ui, sans-serif; font-weight: 600; } strong { color: var(--gj-texto); } p { color: var(--gj-texto-medio); } a { color: var(--gj-oliva-claro); } /* ---------- Header ---------- */ #header { border-bottom: 1px solid var(--gj-borde); box-shadow: none; } #header .logo .title { font-family: 'General Sans', system-ui, sans-serif; font-weight: 600; letter-spacing: 0.02em; color: var(--gj-texto); } /* Logo Mauri Jocou Constructora (SVG en crema, sin filtros) */ #header .logo .logo-mj { display: block; height: 42px; width: auto; } @media screen and (max-width: 736px) { #header .logo .logo-mj { height: 34px; } } #header .top-nav ul li a { font-family: 'Supreme', sans-serif; font-weight: 500; letter-spacing: 0.12em; color: var(--gj-texto-medio); } #header .top-nav ul li a:hover, #header .top-nav ul li a[aria-current="page"] { color: var(--gj-texto); } #header .top-nav ul li a::after { background: var(--gj-oliva); } #header.scrolled { background-color: rgba(227,219,197,0.97); } #menu { background: var(--gj-fondo-claro); } #menu h2, #menu ul li a { color: var(--gj-texto); font-family: 'Supreme', sans-serif; } #menu ul li a { border-color: var(--gj-borde); } #header .hamburger-icon span { background: var(--gj-texto); } /* ---------- HERO con video ---------- */ body:has(.hero-video) #wrapper { padding-top: 0; } body:has(.hero-video) #main { padding-top: 0; } .hero-video { position: relative; min-height: 82vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--gj-fondo); border-radius: 0; padding: 0; margin: 0 0 3.5rem calc(50% - 50vw); width: 100vw; box-shadow: none; } .hero-video::before { display: none; } .hero-video video, .hero-video .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; } .hero-video .hero-velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,24,16,0.76) 0%, rgba(11,24,16,0.42) 45%, rgba(11,24,16,0.06) 100%), linear-gradient(180deg, rgba(11,24,16,0.50) 0%, rgba(11,24,16,0.05) 35%, rgba(11,24,16,0.25) 65%, rgba(11,24,16,0.94) 100%); } .hero-video .hero-contenido { position: relative; width: 100%; max-width: 1300px; margin: 0 auto; padding: 9rem 4% 4rem; text-align: left; } .hero-video .hero-kicker { font-family: 'Supreme', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; /* sobre el video el oliva claro no llegaba a 4,5:1 en las zonas mas claras del cuadro; se sube el valor y se agrega una sombra corta */ color: var(--gj-oliva); text-shadow: 0 1px 10px rgba(0,0,0,0.55); margin: 0 0 1rem; } .hero-video h1 { font-family: 'General Sans', system-ui, sans-serif; font-weight: 600; font-size: clamp(2.4rem, 5.2vw, 4.6rem); line-height: 1.05; color: var(--gj-texto); letter-spacing: -0.01em; margin: 0 0 1.2rem; max-width: 14ch; text-shadow: 0 2px 24px rgba(0,0,0,0.35); } .hero-video h1 em { font-style: italic; color: var(--gj-oliva-claro); } .hero-video .hero-divider { margin: 0 0 1.4rem; background: var(--gj-oliva); width: 72px; height: 2px; } .hero-video .hero-subtitle { font-family: 'Supreme', sans-serif; font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--gj-texto-medio); max-width: 52ch; line-height: 1.6; margin: 0 0 2rem; } .hero-video .hero-acciones { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; } .hero-cta { font-family: 'Supreme', sans-serif; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; padding: 0.95rem 1.7rem; border-radius: 6px; margin-top: 0; background: var(--gj-oliva); color: var(--gj-fondo); box-shadow: none; } .hero-cta:hover { background: var(--gj-oliva-claro); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.35); } .hero-cta.secundario { background: transparent !important; color: var(--gj-texto); border: 1px solid rgba(239,237,226,0.45); } .hero-cta.secundario:hover { border-color: var(--gj-texto); background: rgba(239,237,226,0.06) !important; } .hero-video .hero-nota { font-family: 'Supreme', sans-serif; font-size: 0.72rem; color: var(--gj-texto-tenue); text-shadow: 0 1px 8px rgba(0,0,0,0.5); margin: 1.4rem 0 0; letter-spacing: 0.04em; } @media (prefers-reduced-motion: reduce) { .hero-video video { display: none; } } @media screen and (max-width: 736px) { /* En celular el hero deja de ser una sola capa con todo encima del render. El video se muestra entero, en su proporcion 4:3 y a todo el ancho de la pantalla, sin recortar nada: se ve la casa completa. El titular, el subtitulo, los dos botones y la nota van debajo, sobre el fondo solido. */ .hero-video { display: block; min-height: 0; margin-bottom: 2.4rem; } .hero-video video, .hero-video .hero-poster, .hero-video .hero-velo { position: absolute; top: 0; left: 0; right: 0; bottom: auto; /* Se corta el 18% izquierdo, que es la casa vecina y el cerco. Lo que queda es la casa completa, y al repartir el mismo ancho de pantalla entre menos imagen, se ve un 22% mas grande. 91.5vw sale de la proporcion del recorte: (0,82 x 1280) / 960. */ height: 91.5vw; transform: none; } .hero-video video, .hero-video .hero-poster { object-fit: cover; object-position: 100% center; } /* solo un fundido corto abajo para que la imagen se apoye en el fondo */ .hero-video .hero-velo { background: linear-gradient(180deg, rgba(227,219,197,0) 0%, rgba(227,219,197,0) 74%, rgba(227,219,197,0.55) 92%, rgba(227,219,197,1) 100%); } .hero-video .hero-contenido { padding: calc(91.5vw + 1.4rem) 6% 0; background: none; } /* La volanta ocupaba dos lineas de mayusculas justo encima del titular: molestaba mas de lo que aportaba. En celular se saca. La misma informacion queda en la banda de cifras, en el texto de la portada, en el pie y en la descripcion de la pagina. */ .hero-video .hero-kicker { display: none; } .hero-video h1 { font-size: 2.05rem; line-height: 1.12; max-width: 15ch; margin: 0; text-shadow: none; } .hero-video .hero-divider { display: none; } .hero-video .hero-subtitle { font-size: 0.94rem; line-height: 1.5; max-width: none; margin: 1.1rem 0 1.3rem; } .hero-video .hero-acciones { gap: 0.55rem; } .hero-video .hero-acciones .hero-cta { flex: 1 1 100%; text-align: center; padding: 0.8rem 1rem; } .hero-video .hero-nota { font-size: 0.64rem; line-height: 1.4; margin: 1rem 0 0; text-shadow: none; } } /* ---------- Cifras: una fila sobria, sin tarjetas ---------- */ .stats-bar { gap: 0; margin: 0 auto 3.5rem; border-top: 1px solid var(--gj-borde); border-bottom: 1px solid var(--gj-borde); } .stat-item { background: transparent; border: 0; border-right: 1px solid var(--gj-borde); border-radius: 0; box-shadow: none; min-height: 0; padding: 1.6rem 1rem; } .stat-item:last-child { border-right: 0; } .stat-item:hover { box-shadow: none; } .stat-number { font-family: 'General Sans', system-ui, sans-serif; font-weight: 500; font-size: 2.6rem; color: var(--gj-texto); } .stat-number .copper { color: var(--gj-oliva); } .stat-label { font-family: 'Supreme', sans-serif; color: var(--gj-texto-tenue); font-size: 0.74rem; letter-spacing: 0.16em; } @media screen and (max-width: 736px) { .stats-bar { grid-template-columns: repeat(3, 1fr); } .stat-item { padding: 1.1rem 0.4rem; } .stat-number { font-size: 1.7rem; } .stat-label { font-size: 0.6rem; letter-spacing: 0.1em; } } /* ---------- Separadores ---------- */ .section-divider { opacity: 0.35; } /* ---------- Tarjetas y grillas ---------- */ .featured-ventas-container article, .tiles article, .featured-story article { box-shadow: var(--shadow-md); border: 1px solid var(--gj-borde); } .featured-ventas-container article .content h2, .tiles article .content h2 { font-family: 'General Sans', system-ui, sans-serif; font-weight: 600; } .tiles article a::after { background: var(--card-overlay); } /* ---------- Gemelo digital ---------- */ .gemelo-section { background: var(--gj-fondo-claro); border: 1px solid var(--gj-borde); box-shadow: none; } .gemelo-text h2 { color: var(--gj-texto); } .gemelo-text h2 span, .gemelo-text h2 .copper { color: var(--gj-oliva-claro) !important; } .gemelo-pair h3 { color: var(--gj-oliva-claro); font-family: 'Supreme', sans-serif; letter-spacing: 0.16em; } .gemelo-label { background: rgba(11,24,16,0.88) !important; color: var(--gj-texto) !important; font-family: 'Supreme', sans-serif; letter-spacing: 0.12em; } .gemelo-card { border: 1px solid var(--gj-borde); } /* ---------- Texto largo (SEO) con aire ---------- */ .story-block-text h2 { color: var(--gj-texto); } .story-block-text h3 { color: var(--gj-oliva-claro); font-family: 'Supreme', sans-serif; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2.2rem; } .story-block-text p { color: var(--gj-texto-medio); max-width: 68ch; } .story-block-text p strong { color: var(--gj-texto); } .story-block-text a { color: var(--gj-oliva-claro); text-decoration: underline; text-underline-offset: 3px; } /* ---------- Footer ---------- */ #footer { background: transparent; border-top: 1px solid var(--gj-borde); } #footer h2 { color: var(--gj-texto); font-family: 'General Sans', system-ui, sans-serif; } #footer .icons a { background: var(--gj-fondo-claro) !important; border: 1px solid var(--gj-borde); } #footer .icons a:hover { background: var(--gj-oliva) !important; } #footer .copyright, #footer .copyright a, #footer p { color: var(--gj-texto-tenue); } /* ---------- Donde --navy era fondo ---------- */ .gemelo-card, .gallery-nav a, #footer .actions input[type="submit"], .ec-entrega { background: var(--gj-fondo-claro) !important; color: var(--gj-texto) !important; } .ec-entrega { border: 1px solid var(--gj-borde); } .ec-video { background: var(--gj-fondo-claro) !important; } ::-webkit-scrollbar-thumb { background: var(--gj-panel); } .hero-cta { background: var(--gj-oliva); } /* ---------- WhatsApp flotante ---------- */ .whatsapp-float { box-shadow: 0 6px 24px rgba(0,0,0,0.45); } /* ---------- Páginas internas: títulos y paneles ---------- */ #main .inner > h1.centered-title, #main .inner > h2.centered-title { color: var(--gj-texto); } .content-panel, .ventas-content, .valor-card, .project-section, .box, .contact-card, .service-card, .servicio-card { background: var(--gj-fondo-claro); color: var(--gj-texto-medio); border: 1px solid var(--gj-borde); } .content-panel h2, .content-panel h3, .valor-card h3 { color: var(--gj-texto); } input, select, textarea { background: var(--gj-fondo-claro) !important; color: var(--gj-texto) !important; border: 1px solid var(--gj-borde) !important; font-family: 'Supreme', sans-serif; } input::placeholder, textarea::placeholder { color: var(--gj-texto-tenue); } .button, button, input[type="submit"] { background: var(--gj-oliva) !important; color: var(--gj-fondo) !important; font-family: 'Supreme', sans-serif; font-weight: 600; box-shadow: none !important; } table th { color: var(--gj-texto); border-color: var(--gj-borde); } table td { border-color: var(--gj-borde); color: var(--gj-texto-medio); } hr { border-color: var(--gj-borde); } /* ═══════════════════════════════════════════════════════════ CTA del dúplex — es la unidad que está en venta, va primero ═══════════════════════════════════════════════════════════ */ /* Botón del hero: dos líneas, con el dato duro debajo */ .hero-cta.cta-duplex { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.8rem 1.7rem; line-height: 1.25; } .cta-duplex .cta-duplex-txt { font-size: 1rem; font-weight: 700; } .cta-duplex .cta-duplex-dato { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; opacity: 0.72; } /* Banda de destacados: el dúplex ocupa dos tercios */ .featured-ventas-container { grid-template-columns: 1.75fr 1fr; align-items: stretch; } .featured-ventas-container article { height: 420px; min-height: 420px; } .destacado-duplex { border: 1px solid rgba(24,68,41,0.18); } .destacado-duplex::after { background: linear-gradient(0deg, rgba(11,24,16,0.94) 0%, rgba(11,24,16,0.55) 45%, rgba(11,24,16,0.05) 100%) !important; } .destacado-duplex .content { padding: 2.2rem 2rem !important; } .etiqueta-venta { display: inline-block; font-family: 'Supreme', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gj-fondo); background: var(--gj-oliva); padding: 0.3rem 0.7rem; border-radius: 3px; margin-bottom: 0.8rem; } .destacado-duplex .content h2 { font-size: 1.9rem !important; margin-bottom: 0.5rem !important; } .destacado-duplex .content p { font-size: 0.95rem !important; max-width: 46ch; } .pseudo-cta { display: inline-block; margin-top: 0.9rem; font-family: 'Supreme', sans-serif; font-size: 0.87rem; font-weight: 600; color: var(--gj-oliva-claro); transition: gap 0.2s ease; } .destacado-duplex:hover .pseudo-cta { color: var(--gj-texto); } .featured-story article .content p { color: var(--gj-texto-medio) !important; font-size: 0.9rem; margin: 0.3rem 0 0; } @media screen and (max-width: 768px) { .featured-ventas-container { grid-template-columns: 1fr; } .featured-ventas-container article { height: 340px; min-height: 340px; } .featured-story article { height: 240px; min-height: 240px; } .destacado-duplex .content { padding: 1.6rem 1.3rem !important; } .destacado-duplex .content h2 { font-size: 1.45rem !important; } .hero-cta.cta-duplex { align-items: center; } } /* ═══════════════════════════════════════════════════════════ Correcciones puntuales: lugares donde el template usaba --navy como FONDO (ahora es color de texto) o beige fijo ═══════════════════════════════════════════════════════════ */ .gallery .project-section { background: var(--gj-fondo-claro); border: 1px solid var(--gj-borde); } .gallery h2 { color: var(--gj-texto); } .gallery h2::after { background: var(--gj-oliva); } .img-wrapper { background: linear-gradient(90deg, #E3DBC5 25%, #EFEDE2 50%, #E3DBC5 75%) !important; background-size: 200% 100% !important; } .gallery-nav a { background-color: var(--gj-fondo-claro) !important; color: var(--gj-texto) !important; border: 1px solid var(--gj-borde); } .gallery-nav a:hover { background-color: var(--gj-oliva) !important; color: var(--gj-fondo) !important; } .gemelo-card { background: var(--gj-fondo-claro); } #footer .actions input[type="submit"] { background: var(--gj-oliva) !important; color: var(--gj-fondo) !important; } ::-webkit-scrollbar-thumb { background: var(--gj-oliva) !important; } ::-webkit-scrollbar { background: var(--gj-fondo-claro); } /* Área de clic cómoda en la navegación (el texto medía 19 px de alto) */ #header .top-nav ul li a { padding: 0.85rem 0.2rem; display: inline-block; } #menu ul li a { padding: 1rem 0; } .gallery-nav a { padding: 0.85rem 1.4rem; } /* La tarjeta "Nosotros" en móvil: el subtítulo pisaba el título */ @media screen and (max-width: 768px) { .featured-story article { height: 260px; min-height: 260px; } .featured-story article .content { padding: 1.4rem 1.3rem !important; } .featured-story article .content h2 { font-size: 1.35rem !important; margin-bottom: 0.35rem !important; } .featured-story article .content p { font-size: 0.85rem; line-height: 1.4; } } /* ═══════════════════════════════════════════════════════════ Medida de lectura: ninguna línea de texto corrido supera los ~72 caracteres (medido, no estimado). Arriba de eso el ojo pierde el renglón al volver al margen izquierdo. ═══════════════════════════════════════════════════════════ */ #main p, #main li { max-width: 66ch; } #main .content-panel p, #main .ventas-content p, #main .hero-section p { max-width: 66ch; margin-left: auto; margin-right: auto; } /* Excepciones: texto centrado corto, pies y celdas de tabla */ #main .hero-subtitle, #main .hero-nota, #main .stat-label, #main .tiles p, #main .featured-ventas-container p, #main td p, #main th p, #main .ec-datos p { max-width: none; } /* ═══════════════════════════════════════════════════════════ Micro-interacciones (CSS puro, no dependen de GSAP) ═══════════════════════════════════════════════════════════ */ .pseudo-cta::after { content: ''; } .destacado-duplex .pseudo-cta { transition: color 0.2s ease, transform 0.25s ease; display: inline-block; } .destacado-duplex:hover .pseudo-cta { transform: translateX(4px); } .hero-cta, .hero-cta.secundario { transition: background-color 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease; } .tiles article .content h2, .featured-ventas-container article .content h2 { transition: color 0.22s ease; } .tiles article:hover .content h2, .featured-ventas-container article:hover .content h2 { color: var(--gj-oliva-claro); } #footer .icons a { transition: background-color 0.22s ease, border-color 0.22s ease; } .gallery-nav a { transition: background-color 0.22s ease, color 0.22s ease; } /* Foco visible para teclado, en toda la página */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--gj-oliva-claro); outline-offset: 3px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Menu movil: las 5 paginas de servicio quedan como sub-items de Servicios, para que el menu se lea con las mismas 6 entradas que la barra de escritorio sin perder los enlaces internos hacia esas paginas. */ #menu ul li.sub a { padding-left: 1.4rem; font-size: 0.88rem; color: #49644D; } #menu ul li.sub a:hover { padding-left: 1.9rem; } /* El boton del hero quedaba pegado al subtitulo: gj-marca fija margin-top:0 en .hero-cta y pisa el 1.5rem de main.css. Solo hijos directos, para no tocar los botones del hero con video de la home, que van dentro de .hero-acciones. */ #main .hero-section > .hero-cta { margin-top: 1.7rem; } /* ═══════════════════════════════════════════════════════════ Tema arena (25/09/2026): fondo arena, paneles crema, todo lo demás en los verdes de la paleta. Lo que va SOBRE fotos o sobre botones verdes se escribe en crema. ═══════════════════════════════════════════════════════════ */ #header { border-bottom: 1px solid rgba(24,68,41,0.14); } /* botones verdes: texto e ícono crema */ .hero-cta, .button, button, input[type="submit"], .etiqueta-venta, .gallery-nav a:hover, #footer .actions input[type="submit"] { color: var(--gj-crema) !important; } .hero-cta:hover { background: var(--gj-oliva-claro); } .hero-cta.secundario { color: var(--gj-texto) !important; border: 1px solid rgba(24,68,41,0.45); } .hero-cta.secundario:hover { border-color: var(--gj-texto); background: rgba(24,68,41,0.06) !important; } /* hero: en escritorio el texto va sobre la imagen */ @media screen and (min-width: 737px) { .hero-video h1, .hero-video .hero-subtitle, .hero-video .hero-nota { color: var(--gj-crema); } .hero-video .hero-kicker { color: #E3DBC5; } .hero-video .hero-divider { background: var(--gj-crema); } .hero-video .hero-cta.secundario { color: var(--gj-crema) !important; border-color: rgba(239,237,226,0.6); } .hero-video .hero-cta.secundario:hover { background: rgba(239,237,226,0.10) !important; border-color: var(--gj-crema); } .hero-video .hero-cta:not(.secundario) { background: var(--gj-crema); color: var(--gj-texto) !important; } .hero-video .hero-cta:not(.secundario):hover { background: #E3DBC5; } } /* texto sobre fotos: crema */ .gemelo-label { color: var(--gj-crema) !important; } .tiles article .content h2, .tiles article .content p, .tiles article:hover .content h2 { color: var(--gj-crema) !important; } .featured-ventas-container:not(.solo) article .content h2, .featured-ventas-container:not(.solo) article .content p, .featured-ventas-container:not(.solo) article:hover .content h2 { color: var(--gj-crema) !important; } .cocina-3d-contenido h2, .cocina-3d-contenido p { color: var(--gj-crema) !important; } .comparador-etiqueta, .comparador-mango::before { color: var(--gj-crema) !important; } .comparador-mango { border-color: var(--gj-crema) !important; } .comparador-linea { background: var(--gj-crema) !important; } /* íconos: en el pie van sobre círculo verde; en botones claros, en verde */ #footer .icons a { background: var(--gj-texto) !important; border-color: var(--gj-texto); } #footer .icons a:hover { background: var(--gj-oliva-claro) !important; } #contacto .contacto-botones .hero-cta:not(.secundario) img { filter: brightness(0) invert(1) !important; } #contacto .contacto-botones .hero-cta.secundario img { filter: brightness(0) saturate(100%) invert(55%) sepia(19%) saturate(1923%) hue-rotate(90deg) brightness(28%) contrast(81%) !important; } /* destacado único del dúplex (portada): tarjeta clara, sin velo, texto verde */ .featured-ventas-container.solo article > a::after, .featured-ventas-container.solo article::after { display: none !important; } .featured-ventas-container.solo article .content h2, .featured-ventas-container.solo article .content p { color: var(--gj-texto) !important; } .featured-ventas-container.solo article .content h2, .featured-ventas-container.solo article .content p { text-shadow: none !important; }