/* Accessible contrast overrides — last stylesheet loaded on the live landing. */ :root { --sr-ink: #242321; --sr-muted: #514d46; --sr-paper: #f2efe9; --sr-dark: #20211f; --sr-light: #fffdf8; --sr-gold-dark: #70552f; --sr-gold-light: #f2d7a5; } /* Light surfaces: avoid muted gold or pale text on beige. */ .brand-section, .biography-section, .philosophy-section, .properties-section { background-color: var(--sr-paper); color: var(--sr-ink); } .brand-section h2, .brand-section h2 span, .biography-section h2, .biography-section h2 span, .philosophy-section h2, .philosophy-section h2 span, .properties-section h1, .properties-section h1 span, .brand-heading, .biography-heading, .philosophy-intro, .philosophy-grid h3, .trajectory-list h3, .properties-top, .properties-top h1, .properties-top h1 span { color: var(--sr-ink) !important; } .brand-section .eyebrow, .biography-section .eyebrow, .philosophy-section .eyebrow, .properties-section .eyebrow { color: var(--sr-gold-dark) !important; } .brand-copy p, .biography-copy p, .philosophy-intro > p:last-child, .philosophy-grid article p, .trajectory-list article p, .bio-lead, .properties-top .intro-copy p, .properties-top .intro-copy .arrow-link, .result-line, .property-meta, .property-details dt, .empty-state, .status-select span, .filter-bar label { color: var(--sr-muted) !important; } .zone-tabs button[aria-pressed="true"], .zone-tabs button:hover { color: #fff !important; background: #51412c !important; border-color: #51412c !important; } .properties-section::after { content: none !important; } /* Hero is photographic, so use bright text only over a strong dark overlay. */ .personal-hero, .personal-hero-copy, .personal-hero h1, .personal-hero .hero-intro, .personal-hero .hero-signature, .personal-hero .hero-bottomline, .personal-hero .portrait-caption { color: var(--sr-light) !important; } .personal-hero .eyebrow, .personal-hero h1 span, .personal-hero .portrait-caption small { color: var(--sr-gold-light) !important; } .personal-hero-backdrop { background: linear-gradient(90deg, rgba(12,13,13,.92) 0%, rgba(12,13,13,.84) 55%, rgba(12,13,13,.70) 100%), linear-gradient(0deg, rgba(12,13,13,.78), rgba(12,13,13,.38)), url("./assets/madrid-hero.jpg") center / cover; } /* Map is a dark section. Keep all body copy comfortably light. */ .map-section { background: #242523; color: #fffdf8; } .map-section h2, .map-section h2 span, .map-panel h3, .map-panel p, .map-panel .panel-kicker, .zone-summary button, .zone-summary a { color: #fffdf8 !important; } .map-section .eyebrow { color: var(--sr-gold-light) !important; } /* Contact is dark: do not use the dark heading color from the light sections. */ .contact-section { background: linear-gradient(rgba(20,20,19,.94), rgba(20,20,19,.96)), url("./assets/madrid-hero.jpg") center / cover; color: #fffdf8; } .contact-section h2, .contact-section h2 span, .contact-section p, .contact-section .contact-links a { color: #fffdf8 !important; } .contact-section .eyebrow { color: var(--sr-gold-light) !important; } .contact-form { background: #242523 !important; border: 1px solid #c5b9a5 !important; } .contact-form label, .contact-form label span, .contact-form span { color: #fff4df !important; } .contact-form input, .contact-form textarea, .contact-form select { background: #171817 !important; color: #fffdf8 !important; border: 1px solid #c5b9a5 !important; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: #e3ddd2 !important; opacity: 1; } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: 3px solid #f2d7a5 !important; outline-offset: 2px; border-color: #f2d7a5 !important; } .contact-form .primary-cta, .contact-form .primary-cta.dark { color: #171817 !important; background: #f2d7a5 !important; border: 1px solid #f2d7a5 !important; } /* Header and hamburger: solid light header means dark controls, including on mobile. */ .site-header.nav--solid { background: rgba(242,239,233,.99) !important; color: #1d3557 !important; } .site-header.nav--solid .desktop-nav a, .site-header.nav--solid .menu-toggle { color: #1d3557 !important; opacity: 1 !important; } .site-header.nav--solid .menu-toggle span { background: #1d3557 !important; } .mobile-menu { background: #20211f !important; color: #fffdf8 !important; } .mobile-menu a { color: #fffdf8 !important; } .mobile-menu a:focus-visible, .menu-toggle:focus-visible, .site-header a:focus-visible { outline: 3px solid #a27a42 !important; outline-offset: 3px; } /* Footer and floating contact action. */ .site-footer { background: #171817 !important; color: #fffdf8 !important; } .site-footer p, .site-footer nav a, .site-footer .footer-contact a { color: #f2eee6 !important; } .wa-float { background: #f2d7a5 !important; color: #171817 !important; } @media (max-width: 760px) { .personal-hero-backdrop { background: linear-gradient(180deg, rgba(12,13,13,.91), rgba(12,13,13,.84) 48%, rgba(12,13,13,.92)), url("./assets/madrid-hero.jpg") center / cover; } .properties-top, .properties-top h1, .properties-top h1 span, .properties-top .eyebrow, .properties-top .intro-copy p, .properties-top .intro-copy .arrow-link { color: var(--sr-ink) !important; } .site-header.nav--solid .menu-toggle, .site-header.nav--solid .menu-toggle span { color: #1d3557 !important; } .site-header.nav--solid .menu-toggle span { background: #1d3557 !important; } .contact-form { width: 100%; min-width: 0; } } @media (max-width: 380px) { .container { width: calc(100% - 36px); } } /* Mobile layout safety: restore clear side gutters and prevent text touching or crossing edges. */ @media (max-width: 760px) { .container, .personal-hero > .container { width: calc(100% - 40px) !important; max-width: 100% !important; margin-inline: auto !important; } main section .container { padding-inline: 0 !important; } .personal-hero-copy, .brand-heading, .brand-copy, .properties-top, .intro-copy, .map-heading, .map-panel, .biography-heading, .biography-copy, .philosophy-intro, .philosophy-grid, .contact-grid, .contact-grid > *, .contact-form, .site-footer .footer-grid, .site-footer .footer-grid > * { min-width: 0 !important; max-width: 100%; overflow-wrap: anywhere; } .personal-hero h1, .brand-section h2, .properties-top h1, .map-heading h2, .biography-heading h2, .philosophy-intro h2, .contact-section h2, .philosophy-grid h3, .trajectory-list h3 { overflow-wrap: anywhere; word-break: normal; hyphens: auto; } .brand-copy p, .biography-copy p, .philosophy-intro p, .philosophy-grid p, .trajectory-list p, .contact-section p { max-width: 100%; overflow-wrap: anywhere; } .contact-grid { grid-template-columns: minmax(0, 1fr) !important; } .contact-form { box-sizing: border-box; padding-inline: 18px !important; } .contact-form input, .contact-form textarea, .contact-form button { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; } } @media (max-width: 380px) { .container, .personal-hero > .container { width: calc(100% - 36px) !important; } } /* Final mobile correction: prevent the hero grid from extending beyond the viewport. */ @media (max-width: 760px) { html, body, .site-shell, main, .personal-hero { max-width: 100%; overflow-x: clip; } .personal-hero { width: 100%; } .personal-hero-grid.container, .personal-hero > .container, .hero-bottomline.container { box-sizing: border-box !important; width: calc(100% - 40px) !important; max-width: calc(100% - 40px) !important; margin-left: 20px !important; margin-right: 20px !important; padding-left: 0 !important; padding-right: 0 !important; } .personal-hero-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; } .personal-hero-copy { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; padding-left: 0 !important; box-sizing: border-box !important; } .personal-hero .eyebrow, .personal-hero h1, .personal-hero .hero-intro, .personal-hero .hero-actions { margin-left: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } .personal-hero h1 { font-size: clamp(2.7rem, 10vw, 4.2rem) !important; line-height: 1.02 !important; } .personal-hero .primary-cta { width: 100%; box-sizing: border-box; } } /* Ensure the floating/sticky header keeps readable controls on every scroll state. */ .site-header, .site-header.nav--transparent, .site-header.nav--solid, .site-header.is-scrolled, .site-header.scrolled { background: rgba(242, 239, 233, .98) !important; color: #142a49 !important; } .site-header .desktop-nav a, .site-header .header-cta, .site-header .menu-toggle, .site-header.nav--transparent .desktop-nav a, .site-header.nav--transparent .header-cta, .site-header.nav--transparent .menu-toggle, .site-header.nav--solid .desktop-nav a, .site-header.nav--solid .header-cta, .site-header.nav--solid .menu-toggle { color: #142a49 !important; opacity: 1 !important; text-shadow: none !important; } .site-header .menu-toggle span, .site-header.nav--transparent .menu-toggle span, .site-header.nav--solid .menu-toggle span { background-color: #142a49 !important; } .site-header .header-cta { border-color: #142a49 !important; } @media (max-width: 760px) { .site-header, .site-header.nav--transparent, .site-header.nav--solid, .site-header.is-scrolled, .site-header.scrolled { background: #f2efe9 !important; } } /* Header contrast fix: the supplied logo is pale and must sit on a dark header. */ .site-header, .site-header.nav--transparent, .site-header.nav--solid, .site-header.is-scrolled, .site-header.scrolled { background: #071522 !important; color: #fffdf8 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .site-header .desktop-nav a, .site-header .header-cta, .site-header .menu-toggle, .site-header.nav--transparent .desktop-nav a, .site-header.nav--transparent .header-cta, .site-header.nav--transparent .menu-toggle, .site-header.nav--solid .desktop-nav a, .site-header.nav--solid .header-cta, .site-header.nav--solid .menu-toggle { color: #fffdf8 !important; opacity: 1 !important; text-shadow: none !important; } .site-header .menu-toggle { background: #071522 !important; border: 1px solid #c8b99a !important; } .site-header .menu-toggle span, .site-header.nav--transparent .menu-toggle span, .site-header.nav--solid .menu-toggle span { background-color: #fffdf8 !important; } .site-header .header-cta { border-color: #c8b99a !important; } @media (max-width: 760px) { .site-header, .site-header.nav--transparent, .site-header.nav--solid, .site-header.is-scrolled, .site-header.scrolled { background: #071522 !important; } } /* Property cards: light card surfaces require dark readable text, including nested labels. */ .property-card, .property-card h2, .property-card h3, .property-card h4, .property-card p, .property-card span, .property-card strong, .property-card small, .property-card a, .property-card .property-meta, .property-card .property-title-link, .property-card .property-location, .property-card .property-price, .property-card .property-details, .property-card .property-details *, .property-card .property-card-content, .property-card .property-info { color: #202a36 !important; text-shadow: none !important; opacity: 1 !important; } .property-card { background: #fffdf8 !important; color: #202a36 !important; } .property-card .eyebrow, .property-card .property-meta, .property-card small { color: #4d5661 !important; } .property-card a:hover, .property-card .property-title-link:hover { color: #70552f !important; } /* Correct the actual generated listing-card structure (property-body, meta and details). */ #propertyGrid .property-card, #propertyGrid .property-card .property-body { background: #fffdf8 !important; color: #17253a !important; } #propertyGrid .property-card .property-body *, #propertyGrid .property-card .property-meta, #propertyGrid .property-card .property-meta span, #propertyGrid .property-card h3, #propertyGrid .property-card h3 a, #propertyGrid .property-card .property-price, #propertyGrid .property-card .property-details, #propertyGrid .property-card .property-details dt, #propertyGrid .property-card .property-details dd, #propertyGrid .property-card .property-details span, #propertyGrid .property-card .property-description, #propertyGrid .property-card p { color: #17253a !important; -webkit-text-fill-color: #17253a !important; opacity: 1 !important; text-shadow: none !important; } #propertyGrid .property-card .property-meta, #propertyGrid .property-card .property-details dt { color: #4b5563 !important; -webkit-text-fill-color: #4b5563 !important; } #propertyGrid .property-card .property-title-link:hover { color: #755a32 !important; -webkit-text-fill-color: #755a32 !important; } /* Contrast accessibility: headings and body copy in the dark philosophy section. */ .philosophy-section, .philosophy-section p, .philosophy-section li, .philosophy-section article, .philosophy-section article p, .philosophy-grid, .philosophy-grid article, .philosophy-grid article p { color: #f7f3ec !important; -webkit-text-fill-color: #f7f3ec !important; opacity: 1 !important; text-shadow: none !important; } .philosophy-section h1, .philosophy-section h2, .philosophy-section h3, .philosophy-section h4, .philosophy-grid h1, .philosophy-grid h2, .philosophy-grid h3, .philosophy-grid h4 { color: #fffdf8 !important; -webkit-text-fill-color: #fffdf8 !important; opacity: 1 !important; text-shadow: none !important; } .philosophy-section h2 span, .philosophy-grid article > span, .philosophy-section .eyebrow { color: #e4c78e !important; -webkit-text-fill-color: #e4c78e !important; opacity: 1 !important; } /* Properties section: blurred classic Madrid image with accessible, dark card typography. */ .properties-section { position: relative; isolation: isolate; background-color: #e9e1d5 !important; background-image: linear-gradient(rgba(247, 243, 235, .76), rgba(247, 243, 235, .76)), url("./assets/madrid-hero.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-attachment: scroll !important; } .properties-section::before { content: ""; position: absolute; z-index: -1; inset: 0; background: inherit; filter: blur(3px); transform: scale(1.025); pointer-events: none; } #propertyGrid .property-card, #propertyGrid .property-card .property-body { background: rgba(250, 247, 241, .92) !important; border-color: #bda780 !important; color: #352719 !important; -webkit-text-fill-color: #352719 !important; box-shadow: 0 8px 26px rgba(27, 25, 21, .08) !important; } #propertyGrid .property-card .property-body *, #propertyGrid .property-card .property-meta, #propertyGrid .property-card .property-meta span, #propertyGrid .property-card h3, #propertyGrid .property-card h3 a, #propertyGrid .property-card .property-price, #propertyGrid .property-card .property-details, #propertyGrid .property-card .property-details dt, #propertyGrid .property-card .property-details dd, #propertyGrid .property-card .property-details span, #propertyGrid .property-card .property-description, #propertyGrid .property-card p { color: #352719 !important; -webkit-text-fill-color: #352719 !important; opacity: 1 !important; text-shadow: none !important; } #propertyGrid .property-card .property-meta, #propertyGrid .property-card .property-details dt { color: #5a4835 !important; -webkit-text-fill-color: #5a4835 !important; } @media (max-width: 760px) { .properties-section { background-image: linear-gradient(rgba(247, 243, 235, .78), rgba(247, 243, 235, .78)), url("./assets/madrid-hero.jpg") !important; background-position: center center !important; } #propertyGrid .property-card { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr) !important; } } /* Definitive property-card contrast override (mobile and desktop). */ #propiedades.properties-section { background-color: #172333 !important; background-image: linear-gradient(rgba(10, 22, 36, .72), rgba(10, 22, 36, .82)), url("./assets/madrid-puerta-alcala.jpg") !important; background-size: cover !important; background-position: center !important; color: #fffdf8 !important; } #propiedades .properties-top, #propiedades .properties-top h1, #propiedades .properties-top h1 span, #propiedades .properties-top .eyebrow, #propiedades .properties-top .intro-copy p, #propiedades .properties-top .intro-copy a, #propiedades .result-line { color: #fffdf8 !important; -webkit-text-fill-color: #fffdf8 !important; } #propiedades #propertyGrid .property-card { display: block !important; overflow: hidden !important; background: #fffdf8 !important; border: 1px solid #d2c4ad !important; color: #172333 !important; } #propiedades #propertyGrid .property-card .property-body { display: block !important; background: #fffdf8 !important; padding: 22px !important; color: #172333 !important; } #propiedades #propertyGrid .property-card .property-body, #propiedades #propertyGrid .property-card .property-body *, #propiedades #propertyGrid .property-card .property-title-link, #propiedades #propertyGrid .property-card h3, #propiedades #propertyGrid .property-card .property-price, #propiedades #propertyGrid .property-card .property-details, #propiedades #propertyGrid .property-card .property-details dt, #propiedades #propertyGrid .property-card .property-details dd { color: #172333 !important; -webkit-text-fill-color: #172333 !important; opacity: 1 !important; text-shadow: none !important; } #propiedades #propertyGrid .property-card .property-meta, #propiedades #propertyGrid .property-card .property-details dt { color: #4b5563 !important; -webkit-text-fill-color: #4b5563 !important; } #propiedades #propertyGrid .property-card .property-price { font-weight: 700 !important; } #propiedades #propertyGrid .property-card .status-badge { color: #fffdf8 !important; -webkit-text-fill-color: #fffdf8 !important; background: #172333 !important; } @media (max-width: 760px) { #propiedades #propertyGrid { grid-template-columns: minmax(0, 1fr) !important; } #propiedades #propertyGrid .property-card { grid-template-columns: minmax(0, 1fr) !important; } #propiedades #propertyGrid .property-card .property-media { min-height: 0 !important; aspect-ratio: 16 / 10 !important; } #propiedades #propertyGrid .property-card .property-body { padding: 18px !important; } } /* Hotfix móvil 2026-10-18: legibilidad y tarjetas de propiedades */ @media (max-width: 760px) { #propiedades.properties-section { background: #f2efe9 !important; background-image: none !important; color: #202321 !important; } #propiedades .properties-top, #propiedades .properties-top h1, #propiedades .properties-top h1 span, #propiedades .properties-top .eyebrow, #propiedades .properties-top .intro-copy p, #propiedades .properties-top .intro-copy a, #propiedades .result-line { color: #202321 !important; -webkit-text-fill-color: #202321 !important; } #propiedades #propertyGrid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; width: 100% !important; } #propiedades #propertyGrid .property-card { display: block !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; background: #fffdf8 !important; border: 1px solid #c8b99f !important; color: #202321 !important; overflow: hidden !important; } #propiedades #propertyGrid .property-card .property-body { display: block !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; padding: 18px !important; background: #fffdf8 !important; color: #202321 !important; } #propiedades #propertyGrid .property-card .property-body *, #propiedades #propertyGrid .property-card h3, #propiedades #propertyGrid .property-card h3 a, #propiedades #propertyGrid .property-card p, #propiedades #propertyGrid .property-card span, #propiedades #propertyGrid .property-card strong, #propiedades #propertyGrid .property-card small, #propiedades #propertyGrid .property-card .property-meta, #propiedades #propertyGrid .property-card .property-details, #propiedades #propertyGrid .property-card .property-details * { color: #202321 !important; -webkit-text-fill-color: #202321 !important; opacity: 1 !important; text-shadow: none !important; overflow-wrap: break-word !important; word-break: normal !important; hyphens: auto !important; } #propiedades #propertyGrid .property-card .property-meta, #propiedades #propertyGrid .property-card .property-details dt { color: #57534d !important; -webkit-text-fill-color: #57534d !important; } #propiedades #propertyGrid .property-card img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: cover; } } /* FINAL MOBILE LISTING CONTRAST FIX — match the approved cream/navy reference. Keep the Madrid image visible behind the cards and prevent pale text on pale surfaces. */ #propiedades.properties-section { position: relative !important; isolation: isolate !important; background-color: #e9e1d5 !important; background-image: linear-gradient(rgba(247, 243, 235, .70), rgba(247, 243, 235, .70)), url("./assets/madrid-hero.jpg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } #propiedades.properties-section::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; background: url("./assets/madrid-hero.jpg") center / cover no-repeat !important; filter: blur(2px) !important; transform: scale(1.02) !important; pointer-events: none !important; } #propiedades .properties-top, #propiedades .properties-top h1, #propiedades .properties-top h1 span, #propiedades .properties-top .eyebrow, #propiedades .properties-top .intro-copy p, #propiedades .properties-top .intro-copy a, #propiedades .result-line { color: #142a49 !important; -webkit-text-fill-color: #142a49 !important; text-shadow: none !important; } #propiedades #propertyGrid .property-card, #propiedades #propertyGrid .property-card .property-body { background: rgba(255, 253, 248, .94) !important; border-color: #c5b08c !important; color: #142a49 !important; } #propiedades #propertyGrid .property-card .property-body *, #propiedades #propertyGrid .property-card h3, #propiedades #propertyGrid .property-card h3 a, #propiedades #propertyGrid .property-card p, #propiedades #propertyGrid .property-card span, #propiedades #propertyGrid .property-card strong, #propiedades #propertyGrid .property-card small, #propiedades #propertyGrid .property-card .property-price, #propiedades #propertyGrid .property-card .property-details, #propiedades #propertyGrid .property-card .property-details dt, #propiedades #propertyGrid .property-card .property-details dd { color: #142a49 !important; -webkit-text-fill-color: #142a49 !important; opacity: 1 !important; text-shadow: none !important; } #propiedades #propertyGrid .property-card .property-meta, #propiedades #propertyGrid .property-card .property-details dt { color: #4b5563 !important; -webkit-text-fill-color: #4b5563 !important; } @media (max-width: 760px) { #propiedades.properties-section { background-image: linear-gradient(rgba(247, 243, 235, .68), rgba(247, 243, 235, .68)), url("./assets/madrid-hero.jpg") !important; background-position: center top !important; background-size: cover !important; } #propiedades #propertyGrid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; } #propiedades #propertyGrid .property-card { width: 100% !important; min-width: 0 !important; border: 1px solid #c5b08c !important; border-radius: 0 !important; } #propiedades #propertyGrid .property-card .property-body { padding: 18px !important; } } /* MOBILE QA HOTFIX 2026-10-18: harden contrast for the actual published properties section. */ #propiedades.properties-section { background: linear-gradient(rgba(247,243,235,.72), rgba(247,243,235,.72)), url("./assets/madrid-hero.jpg") center top / cover no-repeat !important; color: #142a49 !important; } #propiedades.properties-section::before { content: none !important; display: none !important; } #propiedades.properties-section .container, #propiedades.properties-section .properties-top, #propiedades.properties-section .properties-top *, #propiedades.properties-section .filter-bar, #propiedades.properties-section .filter-bar *, #propiedades.properties-section .result-line, #propiedades.properties-section #propertyGrid, #propiedades.properties-section #propertyGrid * { text-shadow: none !important; } #propiedades.properties-section .properties-top h1, #propiedades.properties-section .properties-top h1 span, #propiedades.properties-section .properties-top .eyebrow, #propiedades.properties-section .properties-top .intro-copy, #propiedades.properties-section .properties-top .intro-copy *, #propiedades.properties-section .result-line, #propiedades.properties-section #propertyGrid .property-card, #propiedades.properties-section #propertyGrid .property-card * { color: #142a49 !important; -webkit-text-fill-color: #142a49 !important; opacity: 1 !important; } #propiedades.properties-section #propertyGrid .property-card { background: rgba(255,253,248,.97) !important; border: 1px solid #bda77e !important; box-shadow: 0 12px 32px rgba(20,42,73,.12) !important; } #propiedades.properties-section #propertyGrid .property-card img { -webkit-text-fill-color: initial !important; } #propiedades.properties-section #propertyGrid .property-card .property-meta, #propiedades.properties-section #propertyGrid .property-card .property-details dt { color: #4b5563 !important; -webkit-text-fill-color: #4b5563 !important; } @media (max-width: 760px) { #propiedades.properties-section { background-position: center top !important; background-size: cover !important; padding-top: 76px !important; } #propiedades.properties-section #propertyGrid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; } #propiedades.properties-section #propertyGrid .property-card { min-width: 0 !important; width: 100% !important; overflow: hidden !important; } } /* Gallery controls: transparent, icon-only overlays as approved for mobile. */ #propiedades #propertyGrid .property-media button, #propertyGrid .property-media button, .property-media button { background: transparent !important; background-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; color: #fffdf8 !important; text-shadow: 0 1px 5px rgba(0, 0, 0, .78) !important; } #propiedades #propertyGrid .property-media button:hover, #propertyGrid .property-media button:hover, .property-media button:hover { background: transparent !important; background-color: transparent !important; transform: translateY(-50%) scale(1.06); } #propiedades #propertyGrid .property-media .expand-media:hover, #propertyGrid .property-media .expand-media:hover, .property-media .expand-media:hover { transform: scale(1.06); } #propertyGrid .property-media .gallery-step svg, #propertyGrid .property-media .expand-media svg, .property-media .gallery-step svg, .property-media .expand-media svg { filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .8)); } /* OVERRIDE DEFINITIVO 2026-10-18: controles de galería totalmente transparentes. Alta especificidad para neutralizar los fondos definidos en styles.css. */ #siteShell main #propiedades #propertyGrid .property-card .property-media > button.gallery-step, #siteShell main #propiedades #propertyGrid .property-card .property-media > button.expand-media, #siteShell main #propiedades #propertyGrid .property-card .property-media > button.gallery-step:hover, #siteShell main #propiedades #propertyGrid .property-card .property-media > button.expand-media:hover, #siteShell main #propiedades #propertyGrid .property-card .property-media > button.gallery-step:focus, #siteShell main #propiedades #propertyGrid .property-card .property-media > button.expand-media:focus, #siteShell main #propiedades #propertyGrid .property-card .property-media > button.gallery-step:focus-visible, #siteShell main #propiedades #propertyGrid .property-card .property-media > button.expand-media:focus-visible { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; color: #fff !important; } #siteShell main #propiedades #propertyGrid .property-card .property-media > button.gallery-step::before, #siteShell main #propiedades #propertyGrid .property-card .property-media > button.gallery-step::after, #siteShell main #propiedades #propertyGrid .property-card .property-media > button.expand-media::before, #siteShell main #propiedades #propertyGrid .property-card .property-media > button.expand-media::after { background: transparent !important; background-color: transparent !important; box-shadow: none !important; content: none !important; } /* Property gallery controls: fully transparent, high-contrast navy icons and legible counter. */ #siteShell .property-card .property-media { position: relative; } #siteShell .property-card .property-media > button.gallery-step, #siteShell .property-card .property-media > button.expand-media, #siteShell .property-card .property-media > button.gallery-step:hover, #siteShell .property-card .property-media > button.expand-media:hover, #siteShell .property-card .property-media > button.gallery-step:focus, #siteShell .property-card .property-media > button.expand-media:focus, #siteShell .property-card .property-media > button.gallery-step:focus-visible, #siteShell .property-card .property-media > button.expand-media:focus-visible { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; border-radius: 0 !important; color: #142a49 !important; opacity: 1 !important; } #siteShell .property-card .property-media > button.gallery-step svg, #siteShell .property-card .property-media > button.expand-media svg { stroke: #142a49 !important; stroke-width: 2.5 !important; filter: drop-shadow(0 1px 1px rgba(255,255,255,.9)); } #siteShell .property-card .property-media > .photo-counter { background: rgba(255,253,248,.92) !important; color: #142a49 !important; border: 1px solid rgba(20,42,73,.28) !important; box-shadow: none !important; text-shadow: none !important; font-weight: 700 !important; padding: 10px 14px !important; line-height: 1.2 !important; } #siteShell .property-card .property-media > .status-badge { color: #fffdf8 !important; background: #142a49 !important; text-shadow: none !important; } @media (max-width: 760px) { #siteShell .property-card .property-media > button.gallery-step, #siteShell .property-card .property-media > button.expand-media { min-width: 40px !important; min-height: 40px !important; padding: 6px !important; } #siteShell .property-card .property-media > .photo-counter { padding: 8px 11px !important; font-size: 15px !important; } } /* Galería móvil: controles transparentes y contraste real sobre fotos claras y oscuras. */ #siteShell .property-card .property-media > button.gallery-step, #siteShell .property-card .property-media > button.gallery-step:hover, #siteShell .property-card .property-media > button.gallery-step:active, #siteShell .property-card .property-media > button.gallery-step:focus-visible, #siteShell .property-card .property-media > button.expand-media, #siteShell .property-card .property-media > button.expand-media:hover, #siteShell .property-card .property-media > button.expand-media:active, #siteShell .property-card .property-media > button.expand-media:focus-visible { appearance: none !important; -webkit-appearance: none !important; background: transparent !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline-offset: 3px; color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 7px rgba(0,0,0,.85) !important; } #siteShell .property-card .property-media > button.gallery-step svg, #siteShell .property-card .property-media > button.expand-media svg { stroke: #fff !important; fill: none !important; stroke-width: 2.8 !important; filter: drop-shadow(0 1px 3px rgba(0,0,0,.95)) !important; } #siteShell .property-card .property-media > .photo-counter { background: transparent !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #fff !important; font-weight: 800 !important; font-size: clamp(15px, 2.5vw, 20px) !important; line-height: 1.2 !important; padding: 10px 12px !important; text-shadow: 0 1px 3px rgba(0,0,0,.98), 0 0 8px rgba(0,0,0,.9) !important; -webkit-text-stroke: .25px rgba(0,0,0,.25); } #siteShell .property-card .property-media > button.gallery-step, #siteShell .property-card .property-media > button.expand-media { min-width: 42px !important; min-height: 42px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; touch-action: manipulation; } #siteShell .property-card .property-media > button:focus-visible { outline: 2px solid #fff !important; } /* Corrección definitiva de controles de galería móvil: flechas claras y contador legible. */ #siteShell .property-card .property-media > button.gallery-step, #siteShell .property-card .property-media > button.gallery-step:hover, #siteShell .property-card .property-media > button.gallery-step:active, #siteShell .property-card .property-media > button.gallery-step:focus-visible, #siteShell .property-card .property-media > button.expand-media, #siteShell .property-card .property-media > button.expand-media:hover, #siteShell .property-card .property-media > button.expand-media:active, #siteShell .property-card .property-media > button.expand-media:focus-visible { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #fffdf8 !important; text-shadow: 0 1px 4px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.85) !important; opacity: 1 !important; } #siteShell .property-card .property-media > button.gallery-step svg, #siteShell .property-card .property-media > button.expand-media svg { stroke: #fffdf8 !important; fill: none !important; stroke-width: 2.8 !important; filter: drop-shadow(0 1px 3px rgba(0,0,0,.95)) !important; } #siteShell .property-card .property-media > .photo-counter { background: #142a49 !important; background-color: #142a49 !important; color: #fffdf8 !important; border: 1px solid rgba(255,253,248,.72) !important; border-radius: 0 !important; box-shadow: none !important; font-weight: 700 !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; padding: 10px 14px !important; line-height: 1.2 !important; } /* Restauración del acabado editorial premium de las ventanas/fichas de imagen. */ #siteShell .property-card { overflow: hidden; background: #fbf8f2 !important; border: 1px solid rgba(180,154,114,.78) !important; border-radius: 0 !important; box-shadow: 0 12px 32px rgba(13,23,41,.12) !important; } #siteShell .property-media { position: relative; overflow: hidden; background: #0d1729; } #siteShell .property-media > img { display: block; width: 100%; aspect-ratio: 1.42 / 1; object-fit: cover; } #siteShell .property-body { background: #fbf8f2 !important; color: #14233d !important; border-top: 1px solid rgba(180,154,114,.45); } #siteShell .property-title-link, #siteShell .property-price, #siteShell .property-details dd, #siteShell .property-meta { color: #14233d !important; } #siteShell .property-details { background: #f0ece4 !important; border: 1px solid rgba(180,154,114,.28); } #siteShell .property-details > div + div { border-left: 1px solid rgba(180,154,114,.6) !important; } #siteShell .property-details dt { color: #666b73 !important; } #siteShell .property-card .status-badge { background: #14233d !important; color: #fbf8f2 !important; border: 1px solid rgba(180,154,114,.8) !important; border-radius: 0 !important; letter-spacing: .06em; } /* Mobile production fix: transparent photo counter and legible controls. */ #siteShell .property-card .property-media > .photo-counter { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; min-width: 0 !important; min-height: 0 !important; width: auto !important; height: auto !important; padding: 4px 2px !important; color: #fffdf8 !important; background: transparent !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-shadow: 0 1px 4px rgba(0,0,0,.98), 0 0 8px rgba(0,0,0,.95) !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.2 !important; } #siteShell .property-card .property-media > .status-badge { color: #fffdf8 !important; background: #14233d !important; border: 1px solid #c8b99a !important; text-shadow: none !important; opacity: 1 !important; padding: 8px 14px !important; min-height: 40px !important; font-size: 13px !important; letter-spacing: .06em !important; } #siteShell .property-card .property-media > button.gallery-step, #siteShell .property-card .property-media > button.expand-media, #siteShell .property-card .property-media > button.gallery-step:hover, #siteShell .property-card .property-media > button.expand-media:hover, #siteShell .property-card .property-media > button.gallery-step:focus-visible, #siteShell .property-card .property-media > button.expand-media:focus-visible { background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; color: #fffdf8 !important; opacity: 1 !important; } #siteShell .property-card .property-media > button.gallery-step svg, #siteShell .property-card .property-media > button.expand-media svg { stroke: #fffdf8 !important; stroke-width: 2.8 !important; filter: drop-shadow(0 1px 3px rgba(0,0,0,.98)) !important; } /* Remove the section's noise layer so the map and its surroundings are pixel-identical */ .map-section { background: #3b2b20 !important; } .map-section.noise::before { display: none !important; content: none !important; } .map-section .madrid-map { background: #3b2b20 !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; } .map-section .madrid-map .district-map-svg { background: #3b2b20 !important; } .map-section .madrid-map .map-bg { fill: #3b2b20 !important; } .map-section .madrid-map .map-zone path, .map-section .madrid-map .map-zone.has-listings path { fill: #403023 !important; } .map-section .madrid-map .map-zone:hover path, .map-section .madrid-map .map-zone:focus-visible path, .map-section .madrid-map .map-zone.is-active path { fill: #55402d !important; } /* Municipality names: clean white typography, without the old red ink or white halo */ .map-section .madrid-map .map-zone-label, .map-section .madrid-map .map-zone:hover .map-zone-label, .map-section .madrid-map .map-zone:focus-visible .map-zone-label, .map-section .madrid-map .map-zone.is-active .map-zone-label { fill: #fffdf8 !important; stroke: none !important; stroke-width: 0 !important; paint-order: normal !important; } /* Schematic-map label treatment: compact typography with breathing room inside each district. */ .map-section .madrid-map .map-zone-label { font-family: "DM Sans", Arial, sans-serif !important; font-size: 8.5px !important; font-weight: 650 !important; letter-spacing: .015em !important; fill: #fffdf8 !important; stroke: none !important; stroke-width: 0 !important; paint-order: normal !important; pointer-events: none !important; } .map-section .madrid-map .map-zone-label tspan { dominant-baseline: middle; } /* Schematic Madrid map matching the supplied district illustration */ #siteShell .map-section .madrid-map { aspect-ratio: 980.5 / 1011.5 !important; overflow: hidden !important; } #siteShell .map-section .district-map-svg { width: 100% !important; height: 100% !important; display:block !important; } #siteShell .map-section .map-zone path, #siteShell .map-section .map-zone.has-listings path { fill: #403023 !important; stroke: #edcda6 !important; stroke-width: 2.4 !important; stroke-linejoin: round !important; stroke-linecap: round !important; vector-effect: non-scaling-stroke; } #siteShell .map-section .map-zone:hover path, #siteShell .map-section .map-zone:focus-visible path, #siteShell .map-section .map-zone.is-active path { fill:#55402d !important; } #siteShell .map-section .map-outline-extra { fill:#403023; stroke:#edcda6; stroke-width: 2.4; stroke-linejoin:round; vector-effect:non-scaling-stroke; pointer-events:none; } #siteShell .map-section .map-zone-label { fill:#fffaf2 !important; font-family:Arial,sans-serif !important; font-size:17px !important; font-weight:500 !important; letter-spacing:0 !important; stroke:none !important; text-shadow:none !important; paint-order:normal !important; pointer-events:none !important; } #siteShell .map-section .map-zone-label tspan { dominant-baseline:middle; } @media(max-width:600px) { #siteShell .map-section .map-zone-label { font-size:16px !important; } } /* Mapa de distritos funcional: límites, nombres y contadores de pisos; zoom local al mapa. */ #siteShell .map-section .madrid-map { position: relative !important; overflow: hidden !important; touch-action: pan-y !important; } #siteShell .map-section .district-map-svg { cursor: grab; touch-action: none; user-select: none; } #siteShell .map-section .district-map-svg:active { cursor: grabbing; } #siteShell .map-section .map-zone path { fill: #403023 !important; stroke: #d9c4a4 !important; stroke-width: 1.35 !important; stroke-linejoin: round !important; stroke-linecap: round !important; vector-effect: non-scaling-stroke; } #siteShell .map-section .map-zone:hover path, #siteShell .map-section .map-zone:focus-visible path, #siteShell .map-section .map-zone.is-active path { fill: #55402d !important; } #siteShell .map-section .map-zone-label { fill: #fffdf8 !important; font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; pointer-events: none !important; } #siteShell .map-section .property-point { cursor: pointer; } #siteShell .map-section .property-point rect { fill: #fffdf8; stroke: #b99a6a; stroke-width: 1.2; vector-effect: non-scaling-stroke; } #siteShell .map-section .property-point text { fill: #142a49; font: 700 11px "DM Sans", Arial, sans-serif; text-anchor: middle; pointer-events: none; } #siteShell .map-section .property-point.is-active rect, #siteShell .map-section .property-point:hover rect { fill: #d9c4a4; } .map-zoom-controls { position: absolute; z-index: 5; top: 14px; right: 14px; display: grid; gap: 6px; } .map-zoom-controls button { width: 38px; height: 38px; border: 1px solid rgba(237,205,166,.75); border-radius: 2px; background: #142a49; color: #fffdf8; font: 600 22px/1 "DM Sans", Arial, sans-serif; cursor: pointer; } .map-zoom-controls button:hover, .map-zoom-controls button:focus-visible { background: #28466d; } @media (max-width: 600px) { #siteShell .map-section .map-zone-label { font-size: 15px !important; } .map-zoom-controls { top: 8px; right: 8px; gap: 4px; } .map-zoom-controls button { width: 34px; height: 34px; } } /* FINAL OVERRIDE 2026-11-07: real portrait photo behind "Patrimonio con estrategia". This rule intentionally comes last to supersede older cream/blue background hotfixes. */ #siteShell main #propiedades.properties-section, #propiedades.properties-section { position: relative !important; isolation: isolate !important; color: #fffdf8 !important; background-color: #252321 !important; background-image: linear-gradient(90deg, rgba(24, 25, 25, .78) 0%, rgba(28, 28, 27, .62) 54%, rgba(28, 27, 26, .48) 100%), linear-gradient(0deg, rgba(18, 18, 17, .38), rgba(18, 18, 17, .16)), url("./assets/elias-portrait.jpg") !important; background-size: cover !important; background-position: center 34% !important; background-repeat: no-repeat !important; background-attachment: scroll !important; } #propiedades.properties-section::before, #propiedades.properties-section::after { content: none !important; display: none !important; } #propiedades.properties-section .properties-top, #propiedades.properties-section .properties-top h1, #propiedades.properties-section .properties-top h1 span, #propiedades.properties-section .properties-top .eyebrow, #propiedades.properties-section .properties-top .intro-copy, #propiedades.properties-section .properties-top .intro-copy *, #propiedades.properties-section .result-line { color: #fffdf8 !important; -webkit-text-fill-color: #fffdf8 !important; } #propiedades.properties-section .properties-top .eyebrow, #propiedades.properties-section .properties-top .intro-copy p { color: rgba(255, 253, 248, .84) !important; -webkit-text-fill-color: rgba(255, 253, 248, .84) !important; } #propiedades.properties-section .properties-top .intro-copy a { color: #e3c995 !important; -webkit-text-fill-color: #e3c995 !important; } @media (max-width: 760px) { #siteShell main #propiedades.properties-section, #propiedades.properties-section { background-position: 54% 30% !important; background-size: cover !important; background-attachment: scroll !important; } } /* FINAL VISUAL QA — correct the portrait framing and prevent desktop hero overflow. */ #propiedades.properties-section { background-color: #252321 !important; background-image: linear-gradient(90deg, rgba(24,25,25,.66) 0%, rgba(28,28,27,.46) 48%, rgba(28,27,26,.34) 100%), linear-gradient(0deg, rgba(18,18,17,.30), rgba(18,18,17,.08)), url("./assets/elias-portrait.jpg") !important; background-size: 100% auto !important; background-position: center top !important; background-repeat: no-repeat !important; } @media (max-width: 760px) { #propiedades.properties-section { background-size: auto 62vw !important; background-position: 36% top !important; } } /* Desktop cover: constrain every hero layer and its grid to the viewport. */ html, body, #siteShell { max-width: 100% !important; } html, body { overflow-x: clip !important; } #siteShell .personal-hero { width: 100% !important; max-width: 100% !important; overflow: clip !important; } #siteShell .personal-hero-backdrop { left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; } #siteShell .personal-hero > .container { box-sizing: border-box !important; width: min(calc(100% - 48px), 1320px) !important; max-width: 100% !important; min-width: 0 !important; margin-inline: auto !important; } #siteShell .personal-hero-grid { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; grid-template-columns: minmax(0, 1fr) minmax(0, 330px) !important; column-gap: clamp(20px, 3vw, 42px) !important; } #siteShell .personal-hero-copy, #siteShell .hero-portrait-frame { min-width: 0 !important; max-width: 100% !important; } @media (min-width: 901px) { #siteShell .hero-portrait-frame { width: min(100%, 330px) !important; transform: none !important; margin-inline: 0 !important; } } @media (max-width: 900px) { #siteShell .personal-hero > .container { width: min(calc(100% - 32px), 720px) !important; } } /* Production correction 2026-11-07: Put Elías' actual portrait on the heading panel only (not the full-height listings section). The original image asset is assets/elias-portrait.jpg. */ #siteShell main #propiedades.properties-section { background: #292a29 !important; background-image: none !important; color: #fffdf8 !important; } #siteShell main #propiedades.properties-section > .container { width: min(1200px, calc(100% - 64px)) !important; max-width: 100% !important; } #siteShell main #propiedades .properties-top { position: relative !important; isolation: isolate !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr) !important; align-items: center !important; gap: clamp(24px, 4vw, 64px) !important; box-sizing: border-box !important; width: 100% !important; min-height: 390px !important; padding: clamp(56px, 7vw, 96px) clamp(28px, 5vw, 72px) !important; margin: 0 0 42px !important; overflow: hidden !important; background-color: #242321 !important; background-image: linear-gradient(90deg, rgba(19,20,20,.76) 0%, rgba(22,22,21,.56) 48%, rgba(22,22,21,.24) 100%), linear-gradient(0deg, rgba(18,18,17,.22), rgba(18,18,17,.12)), url("./assets/elias-portrait.jpg") !important; background-size: cover !important; background-position: center 38% !important; background-repeat: no-repeat !important; box-shadow: inset 0 0 0 1px rgba(214,189,142,.22) !important; } #siteShell main #propiedades .properties-top::before, #siteShell main #propiedades .properties-top::after { content: none !important; display: none !important; } #siteShell main #propiedades .properties-top > div { position: relative !important; z-index: 1 !important; min-width: 0 !important; } #siteShell main #propiedades .properties-top h1, #siteShell main #propiedades .properties-top h1 span, #siteShell main #propiedades .properties-top .eyebrow, #siteShell main #propiedades .properties-top .intro-copy, #siteShell main #propiedades .properties-top .intro-copy p { color: #fffdf8 !important; -webkit-text-fill-color: #fffdf8 !important; text-shadow: 0 1px 2px rgba(0,0,0,.28) !important; } #siteShell main #propiedades .properties-top .intro-copy .arrow-link { color: #e3c995 !important; -webkit-text-fill-color: #e3c995 !important; } #siteShell main #propiedades .map-section { margin-top: 0 !important; } #siteShell main #propiedades .result-line { color: #fffdf8 !important; -webkit-text-fill-color: #fffdf8 !important; } /* Desktop hero: keep headline, portrait and caption inside the same centered 1200px grid. */ html, body, #siteShell, #siteShell main { width: 100% !important; max-width: 100% !important; } html, body { overflow-x: clip !important; } #siteShell main #inicio.personal-hero { position: relative !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; } #siteShell main #inicio.personal-hero > .container.personal-hero-grid { box-sizing: border-box !important; display: grid !important; width: min(1200px, calc(100% - 64px)) !important; max-width: 100% !important; min-width: 0 !important; margin-inline: auto !important; grid-template-columns: minmax(0, 1fr) minmax(0, min(34vw, 360px)) !important; gap: clamp(24px, 4vw, 58px) !important; align-items: center !important; } #siteShell main #inicio .personal-hero-copy { min-width: 0 !important; max-width: 100% !important; overflow-wrap: break-word !important; } #siteShell main #inicio .personal-hero-copy h1 { max-width: 100% !important; font-size: clamp(2.5rem, 4.4vw, 4.5rem) !important; overflow-wrap: break-word !important; } #siteShell main #inicio .hero-portrait-frame { box-sizing: border-box !important; width: 100% !important; max-width: 360px !important; min-width: 0 !important; justify-self: end !important; margin: 0 !important; transform: none !important; } #siteShell main #inicio .hero-portrait-placeholder, #siteShell main #inicio img.hero-portrait-photo { max-width: 100% !important; } #siteShell main #inicio .portrait-caption { box-sizing: border-box !important; max-width: 100% !important; overflow-wrap: anywhere !important; white-space: normal !important; text-align: center !important; } @media (max-width: 900px) { #siteShell main #inicio.personal-hero > .container.personal-hero-grid { width: min(720px, calc(100% - 40px)) !important; grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; } #siteShell main #inicio .hero-portrait-frame { width: min(100%, 330px) !important; justify-self: center !important; } #siteShell main #propiedades .properties-top { grid-template-columns: minmax(0, 1fr) !important; min-height: 440px !important; gap: 18px !important; padding: 48px 24px !important; background-position: 58% 32% !important; } } /* Use the exact user-supplied portrait for the Patrimonio con estrategia panel. */ #siteShell main #propiedades .properties-top { background-color: #252321 !important; background-image: linear-gradient(90deg, rgba(20,20,19,.72) 0%, rgba(20,20,19,.48) 47%, rgba(20,20,19,.18) 100%), linear-gradient(0deg, rgba(18,18,17,.18), rgba(18,18,17,.18)), url("./assets/IMG-20261106-WA0034.jpg?v=20261107-original-hd") !important; background-repeat: no-repeat !important; background-size: cover !important; background-position: center 20% !important; } @media (max-width: 760px) { #siteShell main #propiedades .properties-top { background-position: 42% center !important; background-size: cover !important; } } /* 2026-11-07: full-bleed background for the Patrimonio con estrategia hero. The photograph fills the entire visible hero, with no inset frame or card border. */ #siteShell main #propiedades .properties-top { box-sizing: border-box !important; position: relative !important; isolation: isolate !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; min-height: clamp(560px, 72vh, 820px) !important; padding: clamp(72px, 9vw, 132px) max(6vw, calc((100vw - 1200px) / 2)) !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; box-shadow: none !important; background-color: #242321 !important; background-image: linear-gradient(90deg, rgba(16,17,17,.78) 0%, rgba(18,18,17,.58) 43%, rgba(18,18,17,.24) 100%), linear-gradient(0deg, rgba(15,15,15,.24), rgba(15,15,15,.12)), url("./assets/IMG-20261106-WA0034.jpg?v=20261107-original-hd") !important; background-size: cover !important; background-position: center 28% !important; background-repeat: no-repeat !important; } @media (max-width: 900px) { #siteShell main #propiedades .properties-top { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; min-height: min(780px, 82svh) !important; padding: 64px 8vw 72px !important; background-position: 48% center !important; } } @media (max-width: 600px) { #siteShell main #propiedades .properties-top { min-height: 760px !important; padding: 64px 7.5vw 76px !important; background-position: 43% center !important; } } /* Match the complete Patrimonio section surround to the Madrid interactive map brown. */ #siteShell main #propiedades.properties-section { background-color: #3b2b20 !important; background-image: none !important; } #siteShell main #propiedades.properties-section > .container { background: transparent !important; } #siteShell main #propiedades .properties-top { background-color: #3b2b20 !important; } #siteShell main #propiedades .map-section { background: #3b2b20 !important; } /* Original HD portrait: preserve source pixels and natural color. */ #siteShell main #inicio img.hero-portrait-photo { filter: none !important; image-rendering: auto !important; object-fit: cover !important; object-position: center 24% !important; } /* Original HD full-bleed photograph for Patrimonio con estrategia. */ #siteShell main #propiedades .properties-top { background-image: linear-gradient(90deg, rgba(16,17,17,.64) 0%, rgba(18,18,17,.40) 43%, rgba(18,18,17,.14) 100%), linear-gradient(0deg, rgba(15,15,15,.16), rgba(15,15,15,.08)), url("./assets/IMG-20261106-WA0034.jpg?v=20261107-original-hd") !important; background-size: cover !important; background-repeat: no-repeat !important; } /* FIX 2026-11-07: keep the intentional line break in the mobile hero intro. */ @media (max-width: 760px) { #siteShell main #inicio .hero-intro br { display: block !important; } } /* 2026-11-07: extend the Patrimonio photo upward to the section boundary. The text/content box is untouched; only the photographic layer grows. */ #siteShell main #propiedades .properties-top { position: relative !important; isolation: isolate !important; background: transparent !important; } #siteShell main #propiedades .properties-top::before { content: ""; position: absolute; z-index: -1; top: calc(-1 * clamp(72px, 9vw, 132px)); left: 0; right: 0; bottom: 0; background-color: #242321; background-image: linear-gradient(90deg, rgba(16,17,17,.64) 0%, rgba(18,18,17,.40) 43%, rgba(18,18,17,.14) 100%), linear-gradient(0deg, rgba(15,15,15,.16), rgba(15,15,15,.08)), url("./assets/IMG-20261106-WA0034.jpg?v=20261107-original-hd"); background-size: cover; background-position: center 28%; background-repeat: no-repeat; pointer-events: none; } @media (max-width: 900px) { #siteShell main #propiedades .properties-top::before { top: -64px; background-position: 48% center; } } @media (max-width: 600px) { #siteShell main #propiedades .properties-top::before { top: -64px; background-position: 43% center; } } /* FIX 2026-11-07: restore the Patrimonio photograph. An earlier !important rule hid ::before; explicitly override it here. */ #siteShell main #propiedades .properties-top { position: relative !important; isolation: isolate !important; background: transparent !important; } #siteShell main #propiedades .properties-top::before { content: "" !important; display: block !important; position: absolute !important; z-index: 0 !important; top: calc(-1 * clamp(72px, 9vw, 132px)) !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background-color: #242321 !important; background-image: linear-gradient(90deg, rgba(16,17,17,.64) 0%, rgba(18,18,17,.40) 43%, rgba(18,18,17,.14) 100%), linear-gradient(0deg, rgba(15,15,15,.16), rgba(15,15,15,.08)), url("./assets/IMG-20261106-WA0034.jpg?v=20261107-original-hd") !important; background-size: cover !important; background-position: center 28% !important; background-repeat: no-repeat !important; pointer-events: none !important; } #siteShell main #propiedades .properties-top > div { position: relative !important; z-index: 1 !important; } @media (max-width: 900px) { #siteShell main #propiedades .properties-top::before { top: -64px !important; background-position: 48% center !important; } } @media (max-width: 600px) { #siteShell main #propiedades .properties-top::before { top: -64px !important; background-position: 43% center !important; } } /* 2026-11-07: remove the brown lead-in above the Patrimonio photo on mobile. Start the photographic hero at the section boundary and reveal more of its upper crop. */ #siteShell main #propiedades.properties-section { padding-top: 0 !important; } #siteShell main #propiedades .properties-top { margin-top: 0 !important; } #siteShell main #propiedades .properties-top::before { top: 0 !important; } @media (max-width: 900px) { #siteShell main #propiedades.properties-section { padding-top: 0 !important; } #siteShell main #propiedades .properties-top { margin-top: 0 !important; } #siteShell main #propiedades .properties-top::before { top: 0 !important; background-position: 43% 20% !important; } } @media (max-width: 600px) { #siteShell main #propiedades .properties-top::before { background-position: 43% 16% !important; } } /* 2026-11-07: lower the Patrimonio hero copy on mobile so it clears the portrait's face. */ @media (max-width: 600px) { #siteShell main #propiedades .properties-top > div:first-child { transform: translateY(104px) !important; } #siteShell main #propiedades .properties-top > .intro-copy { transform: translateY(58px) !important; } } /* Cabecera adaptable en escritorio estrecho y con zoom del navegador. Cuando no cabe la navegación completa, se sustituye por el menú compacto. */ @media (min-width: 761px) and (max-width: 1160px) { .site-header, .site-header.nav--solid { left: 0; right: 0; height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-inline: clamp(18px, 3vw, 34px); } .site-header .brand { position: relative; inset: auto; flex: 0 1 auto; min-width: 0; margin: 0 auto 0 0; transform: none; } .site-header .brand img { display: block; width: clamp(118px, 13vw, 150px); height: 66px; object-fit: contain; object-position: left center; } .site-header .desktop-nav { display: none; } .site-header .header-cta { display: none; } .site-header .menu-toggle { display: block; position: relative; flex: 0 0 44px; width: 44px; height: 44px; margin: 0 0 0 auto; } .site-header.nav--solid .menu-toggle, .site-header.nav--solid .menu-toggle span { color: #1d3557; background-color: transparent; } .site-header.nav--solid .menu-toggle span { background: currentColor; } } /* El mapa solo captura Ctrl/Cmd + rueda para hacer zoom. La rueda convencional queda libre para desplazar la página. */ .district-map-svg { touch-action: pan-y pinch-zoom; } /* FIX DEFINITIVO CABECERA: el logotipo deja de ocupar el centro absoluto, que invadía el espacio de los enlaces al reducir el viewport con el zoom del navegador. */ @media (min-width: 761px) { #siteHeader.site-header, #siteHeader.site-header.nav--solid { box-sizing: border-box !important; left: 0 !important; right: 0 !important; width: 100% !important; display: flex !important; flex-flow: row nowrap !important; align-items: center !important; justify-content: space-between !important; gap: clamp(12px, 1.5vw, 24px) !important; padding-left: clamp(16px, 3vw, 52px) !important; padding-right: clamp(16px, 3vw, 52px) !important; } #siteHeader .brand { position: relative !important; inset: auto !important; left: auto !important; top: auto !important; transform: none !important; display: flex !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; margin: 0 auto 0 0 !important; } #siteHeader .brand img { display: block !important; width: clamp(112px, 10vw, 148px) !important; height: 66px !important; max-width: 100% !important; object-fit: contain !important; object-position: left center !important; } #siteHeader .desktop-nav { position: relative !important; display: flex !important; flex: 0 1 auto !important; align-items: center !important; justify-content: flex-end !important; gap: clamp(10px, 1.25vw, 22px) !important; min-width: 0 !important; margin-left: auto !important; white-space: nowrap !important; } #siteHeader .desktop-nav a { flex: 0 0 auto !important; font-size: clamp(9px, .68vw, 11px) !important; letter-spacing: .08em !important; } #siteHeader .header-cta { display: none !important; } #siteHeader .menu-toggle { display: none !important; flex: 0 0 44px !important; margin-left: auto !important; } } /* Cuando seis enlaces ya no caben holgadamente, usar el menú compacto. El logo conserva su posición a la izquierda y nunca queda bajo el menú. */ @media (min-width: 761px) and (max-width: 1120px) { #siteHeader .desktop-nav { display: none !important; } #siteHeader .menu-toggle { display: block !important; } }