/* ========================================================= TWEAKS — three expressive axes that reshape the design Applied via [data-mood], [data-voice], [data-density] on ========================================================= */ /* ---------- BASE TRANSITIONS ---------- */ html, body, .nav, .marquee, .section, .amen, .resuelto, .avance, .location, .contact, .footer, .hero, .plans, .detalles__media .ph, .amen__card, .hero__photo, .resuelto__media, .avance__item, .location__map, .plans__floor, .plans__specs { transition: background-color 320ms cubic-bezier(.2,.7,.1,1), color 320ms cubic-bezier(.2,.7,.1,1), border-color 320ms cubic-bezier(.2,.7,.1,1); } .hero__title, .resuelto h2, .detalles__copy h2, .plans__head h2, .amen__title, .avance h2, .location h2, .contact h2 { transition: letter-spacing 320ms cubic-bezier(.2,.7,.1,1), font-size 320ms cubic-bezier(.2,.7,.1,1); } /* ========================================================= MOOD — palette overhaul ========================================================= */ /* MOOD: NOIR — entire site inverted, ink dominant, photos pop */ html[data-mood="noir"] body { background: #14110E; color: #F4ECDA; } html[data-mood="noir"] .nav { background: rgba(20,17,14,0.85); color: #F4ECDA; border-bottom: 1px solid rgba(244,236,218,0.08); } html[data-mood="noir"] .nav__links a { color: #F4ECDA; opacity: 0.7; } html[data-mood="noir"] .nav__links a:hover { opacity: 1; } html[data-mood="noir"] .nav__cta { background: #F4ECDA; color: #14110E; } html[data-mood="noir"] .nav__logo img { filter: invert(1) brightness(1.4); } html[data-mood="noir"] .hero, html[data-mood="noir"] .section, html[data-mood="noir"] .resuelto, html[data-mood="noir"] .avance, html[data-mood="noir"] .location, html[data-mood="noir"] .plans, html[data-mood="noir"] .contact { background: #14110E; color: #F4ECDA; } html[data-mood="noir"] .marquee { background: #C8A675; color: #14110E; } html[data-mood="noir"] .hero__title, html[data-mood="noir"] .resuelto h2, html[data-mood="noir"] .detalles__copy h2, html[data-mood="noir"] .plans__head h2, html[data-mood="noir"] .amen__title, html[data-mood="noir"] .avance h2, html[data-mood="noir"] .location h2 { color: #F4ECDA; } html[data-mood="noir"] .hero__title .it, html[data-mood="noir"] .resuelto h2 .it, html[data-mood="noir"] .detalles__copy h2 .it, html[data-mood="noir"] .amen__title .it, html[data-mood="noir"] .location h2 .it { color: #C8A675; } html[data-mood="noir"] .hero__eyebrow, html[data-mood="noir"] .eyebrow { color: #C8A675; opacity: 1; } html[data-mood="noir"] .hero__meta-item .lbl, html[data-mood="noir"] .resuelto__list .lbl, html[data-mood="noir"] .location__addr .lbl, html[data-mood="noir"] .plans__specs-head .lbl { color: rgba(244,236,218,0.5); } html[data-mood="noir"] .hero__meta-item .val, html[data-mood="noir"] .resuelto__list .val, html[data-mood="noir"] .location__addr .val, html[data-mood="noir"] .plans__specs-list li b, html[data-mood="noir"] .plans__specs-head .val { color: #F4ECDA; } html[data-mood="noir"] .hero__meta-item, html[data-mood="noir"] .resuelto__list > div { border-top-color: rgba(244,236,218,0.18); } html[data-mood="noir"] .resuelto__lead, html[data-mood="noir"] .detalles__copy p, html[data-mood="noir"] .amen__lead, html[data-mood="noir"] .location p { color: rgba(244,236,218,0.7); } html[data-mood="noir"] .mini { background: rgba(244,236,218,0.06); color: #F4ECDA; border: 1px solid rgba(244,236,218,0.1); } html[data-mood="noir"] .mini.dark { background: #C8A675; color: #14110E; border-color: transparent; } html[data-mood="noir"] .btn-dark { background: #C8A675; color: #14110E; } html[data-mood="noir"] .btn-ghost { border-color: rgba(244,236,218,0.3); color: #F4ECDA; } html[data-mood="noir"] .plans { background: #1A1612; } html[data-mood="noir"] .plans__tab { color: rgba(244,236,218,0.5); border-color: rgba(244,236,218,0.15); } html[data-mood="noir"] .plans__tab[aria-selected="true"] { color: #14110E; background: #C8A675; border-color: #C8A675; } html[data-mood="noir"] .plans__floor { background: #F4ECDA; } html[data-mood="noir"] .plans__specs { background: rgba(244,236,218,0.04); color: #F4ECDA; } html[data-mood="noir"] .plans__specs-list li { border-bottom-color: rgba(244,236,218,0.1); } html[data-mood="noir"] .amen { background: #1A1612 !important; } html[data-mood="noir"] .avance { background: #1A1612; } html[data-mood="noir"] .avance__bar { background: rgba(244,236,218,0.15); } html[data-mood="noir"] .avance__bar-fill { background: #C8A675; } html[data-mood="noir"] .location__map svg rect:first-child { fill: #2A2520; } html[data-mood="noir"] .location__map svg path[stroke="#CAB39E"] { stroke: #3A3128; } html[data-mood="noir"] .location__map svg text { fill: #C8A675 !important; } html[data-mood="noir"] .contact { background: #0A0907; } html[data-mood="noir"] .contact__form { background: rgba(244,236,218,0.04); color: #F4ECDA; } html[data-mood="noir"] .contact__form input, html[data-mood="noir"] .contact__form textarea, html[data-mood="noir"] .contact__form select { background: transparent; color: #F4ECDA; border-bottom-color: rgba(244,236,218,0.2); } html[data-mood="noir"] .footer { background: #0A0907; } /* MOOD: BONE — warm, light, no dark sections at all (sun-bleached) */ html[data-mood="bone"] body { background: #EFE4D2; color: #2A1F12; } html[data-mood="bone"] .nav { background: rgba(239,228,210,0.85); } html[data-mood="bone"] .marquee { background: #2A1F12; color: #EFE4D2; } html[data-mood="bone"] .hero, html[data-mood="bone"] .section, html[data-mood="bone"] .resuelto, html[data-mood="bone"] .avance, html[data-mood="bone"] .location, html[data-mood="bone"] .plans { background: #EFE4D2; color: #2A1F12; } html[data-mood="bone"] .amen { background: #D6C2A1 !important; color: #2A1F12; } html[data-mood="bone"] .amen__title, html[data-mood="bone"] .amen__title .it { color: #2A1F12 !important; } html[data-mood="bone"] .amen__lead { color: rgba(42,31,18,0.7) !important; } html[data-mood="bone"] .amen .eyebrow { color: #6E5234 !important; opacity: 1; } html[data-mood="bone"] .contact { background: #2A1F12; } html[data-mood="bone"] .footer { background: #2A1F12; } html[data-mood="bone"] .hero__title .it, html[data-mood="bone"] .resuelto h2 .it, html[data-mood="bone"] .detalles__copy h2 .it, html[data-mood="bone"] .location h2 .it { color: #8C6938; } /* ========================================================= VOICE — typographic temperament ========================================================= */ /* VOICE: EDITORIAL — Cormorant Garamond takes over, slimmer weights, tighter spacing */ html[data-voice="editorial"] .hero__title, html[data-voice="editorial"] .resuelto h2, html[data-voice="editorial"] .detalles__copy h2, html[data-voice="editorial"] .plans__head h2, html[data-voice="editorial"] .amen__title, html[data-voice="editorial"] .avance h2, html[data-voice="editorial"] .location h2, html[data-voice="editorial"] .contact h2 { font-family: "Cormorant Garamond", serif !important; font-weight: 300 !important; text-transform: none !important; letter-spacing: -0.02em !important; line-height: 1.0 !important; font-style: italic; } html[data-voice="editorial"] .hero__title .en, html[data-voice="editorial"] .hero__title .em { font-style: italic; } html[data-voice="editorial"] .hero__title .it, html[data-voice="editorial"] .resuelto h2 .it, html[data-voice="editorial"] .detalles__copy h2 .it, html[data-voice="editorial"] .amen__title .it, html[data-voice="editorial"] .location h2 .it { font-style: normal !important; font-weight: 300 !important; text-transform: lowercase !important; } html[data-voice="editorial"] .hero__title { font-size: clamp(80px, 10vw, 160px) !important; } html[data-voice="editorial"] .eyebrow, html[data-voice="editorial"] .hero__eyebrow { font-style: italic; letter-spacing: 0.04em; text-transform: none; } /* VOICE: ENGINEERED — Inter for everything, all caps, tracked, mono-style */ html[data-voice="engineered"] .hero__title, html[data-voice="engineered"] .resuelto h2, html[data-voice="engineered"] .detalles__copy h2, html[data-voice="engineered"] .plans__head h2, html[data-voice="engineered"] .amen__title, html[data-voice="engineered"] .avance h2, html[data-voice="engineered"] .location h2, html[data-voice="engineered"] .contact h2 { font-family: "Inter", sans-serif !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: -0.02em !important; line-height: 0.92 !important; } html[data-voice="engineered"] .hero__title .it, html[data-voice="engineered"] .resuelto h2 .it, html[data-voice="engineered"] .detalles__copy h2 .it, html[data-voice="engineered"] .amen__title .it, html[data-voice="engineered"] .location h2 .it { font-family: "Inter", sans-serif !important; font-style: normal !important; font-weight: 300 !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; opacity: 0.5; } html[data-voice="engineered"] .hero__title { font-size: clamp(56px, 7vw, 100px) !important; } html[data-voice="engineered"] .hero__title .en, html[data-voice="engineered"] .hero__title .em, html[data-voice="engineered"] .hero__title .it { font-size: inherit !important; letter-spacing: inherit !important; } html[data-voice="engineered"] .eyebrow, html[data-voice="engineered"] .hero__eyebrow { font-family: "Inter", sans-serif; letter-spacing: 0.3em; font-size: 10px; } /* ========================================================= DENSITY — vertical rhythm + photo presence ========================================================= */ /* DENSITY: COMPACT — tight, magazine spread feeling */ html[data-density="compact"] .section { padding-top: 60px; padding-bottom: 60px; } html[data-density="compact"] .resuelto { padding: 80px 24px; } html[data-density="compact"] .avance__inner { padding: 60px 0; } html[data-density="compact"] .contact__inner { padding: 80px 0; } html[data-density="compact"] .amen { padding: 60px 24px !important; } html[data-density="compact"] .hero { min-height: 620px; padding: 32px; gap: 32px; } html[data-density="compact"] .hero__photo { height: 440px; } html[data-density="compact"] .resuelto { gap: 40px; } html[data-density="compact"] .resuelto__media { aspect-ratio: 1.1/1; } html[data-density="compact"] .detalles { gap: 32px; } html[data-density="compact"] .detalles__media { min-height: 540px; } html[data-density="compact"] .amen__grid { grid-auto-rows: 220px; gap: 12px; } html[data-density="compact"] .plans__panel { gap: 36px; } /* DENSITY: CINEMATIC — fewer constraints, bigger photos, edge-to-edge */ html[data-density="cinematic"] body { font-size: 16px; } html[data-density="cinematic"] .hero { max-width: none; padding: 80px 64px; min-height: 92vh; grid-template-columns: 1fr 1.4fr; } html[data-density="cinematic"] .hero__photo { height: 720px; border-radius: 0; } html[data-density="cinematic"] .hero__title { font-size: clamp(96px, 12vw, 200px) !important; } html[data-density="cinematic"] .resuelto { padding: 200px 64px; gap: 80px; } html[data-density="cinematic"] .resuelto__media { aspect-ratio: 4/5; border-radius: 0; } html[data-density="cinematic"] .detalles { gap: 80px; } html[data-density="cinematic"] .detalles__media { min-height: 920px; } html[data-density="cinematic"] .detalles__media .ph { border-radius: 0; } html[data-density="cinematic"] .amen { padding: 200px 64px !important; } html[data-density="cinematic"] .amen__grid { grid-auto-rows: 380px; gap: 8px; } html[data-density="cinematic"] .amen__card { border-radius: 0; } html[data-density="cinematic"] .section { padding-top: 160px; padding-bottom: 160px; } html[data-density="cinematic"] .plans { padding: 120px 24px; } html[data-density="cinematic"] .plans__floor { aspect-ratio: 16/10; } html[data-density="cinematic"] .avance__strip { gap: 4px; } html[data-density="cinematic"] .avance__item { aspect-ratio: 3/4; border-radius: 0; } html[data-density="cinematic"] .location__map { aspect-ratio: 16/10; border-radius: 0; } html[data-density="cinematic"] .marquee { font-size: 84px; }