/* ════════════════════════════════════════════════════════ GALAR — overrides sobre styles.css Carga DESPUÉS de styles.css ════════════════════════════════════════════════════════ */ :root { --galar-gold: #b8924a; --galar-gold-soft: #c8a564; --galar-gold-deep: #8a6b34; } /* ═══════════════════════════════════════════════════════════════ PREROLL — GALAR: fondo dorado, lockup horizontal (icono + texto) Secuencia: 1) icono entra ladeado 45° y gira con bounce a posición original 2) "GALAR" cae letra×letra con overshoot 3) "Grupo Inmobiliario" wipe lateral ═══════════════════════════════════════════════════════════════ */ .preroll.preroll-galar { background: var(--galar-gold); color: #fff; /* centrado vertical y horizontal de un único hijo (el icono) */ display: flex; align-items: center; justify-content: center; gap: 0; /* exit cuando termina la animación del icono + breve pausa para apreciarlo */ animation: preroll-exit 0.9s cubic-bezier(0.7, 0, 0.84, 0) 1.7s forwards; } /* Skip preroll cuando el usuario ya lo vio esta sesión. Aplicado por inline script en antes del primer paint → 0 flash. */ html.skip-intro .preroll.preroll-galar { display: none !important; } /* ── ICONO — centrado, giro ligero (25°→0°), entrada suave con escala ── */ .preroll-icon { width: clamp(120px, 14vw, 200px); height: clamp(120px, 14vw, 200px); margin: 0; opacity: 0; transform: rotate(25deg) scale(0.78); animation: galar-icon-spin 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards; } .preroll-icon img { width: 100%; height: 100%; object-fit: contain; display: block; } @keyframes galar-icon-spin { 0% { opacity: 0; transform: rotate(25deg) scale(0.78); } 35% { opacity: 1; } 100% { opacity: 1; transform: rotate(0deg) scale(1); } } /* bloque de texto */ .preroll-text { display: flex; flex-direction: column; gap: clamp(10px, 1.1vw, 18px); min-width: 0; overflow: hidden; } /* En móvil el icono se ajusta un poco al ancho disponible */ @media (max-width: 720px) { .preroll-icon { width: clamp(100px, 28vw, 160px); height: clamp(100px, 28vw, 160px); } } /* ═══════════════════════════════════════════════════════════════ PAGE CURTAIN — Sistema de transición global GALAR Overlay único en z-max, fixed a viewport. Estados: · base (sin clase): translateY(0) — cubriendo (default, sin FOUC) · .is-falling : keyframe gc-fall → de -100% a 0 (cae) · .is-rising : keyframe gc-rise → de 0 a -100% (regresa) Duración 480ms por fase con cubic-bezier(0.4, 0, 0.2, 1). ═══════════════════════════════════════════════════════════════ */ .page-curtain { background: var(--galar-gold) !important; will-change: transform; /* GPU-accel para 60fps estables */ pointer-events: none; /* nunca bloquea clicks por sí solo */ } /* Primera visita a index: el preroll es la intro, el curtain oculto. Specificity (0,1,1) intencionalmente menor que .is-falling (0,2,0) para que durante un click el curtain pueda bajar a cubrir. */ html[data-galar-intro="active"] .page-curtain { transform: translateY(-100%); } /* Logo del curtain — estático (sin animación propia), centrado por el flex del .page-curtain, al mismo tamaño que el icono del preroll/intro. Sólo el overlay se desliza (fall/rise); el logo permanece visible. */ .page-curtain__logo { width: clamp(120px, 14vw, 200px); height: clamp(120px, 14vw, 200px); display: block; opacity: 1; } .page-curtain__logo img { width: 100%; height: 100%; object-fit: contain; display: block; } /* ─── FASE 1 — FALL ─── el overlay cae desde arriba a cubrir ─── 850ms con cubic-bezier(0.65, 0, 0.25, 1): aceleración suave en la primera mitad, desaceleración suave al asentarse. Curva editorial, no la curva Material standard — match con el tono de la marca. */ .page-curtain.is-falling { animation: gc-fall 850ms cubic-bezier(0.65, 0, 0.25, 1) forwards !important; } /* ─── FASE 3 — RISE ─── el overlay regresa por arriba ─── */ .page-curtain.is-rising { animation: gc-rise 850ms cubic-bezier(0.65, 0, 0.25, 1) forwards !important; } @keyframes gc-fall { from { transform: translateY(-100%); } to { transform: translateY(0); } } @keyframes gc-rise { from { transform: translateY(0); } to { transform: translateY(-100%); } } /* En móvil, el logo iguala el tamaño del icono del preroll en pantallas chicas. */ @media (max-width: 720px) { .page-curtain__logo { width: clamp(100px, 28vw, 160px); height: clamp(100px, 28vw, 160px); } } /* ─── Block pointer-events site-wide durante toda la transición ─── */ html.is-transitioning, html.is-transitioning body { pointer-events: none !important; } /* ─── Sync con intros locales declarativas ─── Cualquier elemento con [data-intro] queda en estado latente hasta que body.view-visible se aplique (al inicio del rise). Activa fade + lift suave. Para animaciones más sofisticadas, usar el event listener 'galar:view-visible' o GalarTransition.onViewVisible(cb) en JS. */ body:not(.view-visible) [data-intro] { opacity: 0; transform: translateY(16px); } body.view-visible [data-intro] { opacity: 1; transform: translateY(0); transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1), transform 720ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--intro-delay, 0ms); } /* ═══════════════════════════════════════════════════════════════ CAMINOS — sección 01: Comprar · Vender · Rentar Lo primero que el visitante necesita saber: ¿pueden ayudarme? ═══════════════════════════════════════════════════════════════ */ .caminos { padding: 8rem 0 9rem; background: var(--c-parchment, #f4efe6); color: var(--c-ink, #1a1814); } .caminos-head { margin: 3rem 0 4.5rem; } .caminos-title { margin: 0 0 1.4rem; } .caminos-lede { max-width: 56ch; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.7; color: var(--c-stone, #5a5346); margin: 0; } /* Grid de 3 caminos */ .caminos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--c-line, rgba(26, 24, 20, 0.12)); border: 1px solid var(--c-line, rgba(26, 24, 20, 0.12)); } .camino { background: var(--c-parchment, #f4efe6); padding: 3rem 2.4rem 2.6rem; display: flex; flex-direction: column; gap: 1.2rem; text-decoration: none; color: inherit; position: relative; transition: background 0.35s ease; min-height: 320px; } .camino:hover { background: #fffaf0; } .camino:hover .camino-title .italic { color: var(--galar-gold-deep, #8a6b34); } .camino:hover .camino-cta { color: var(--galar-gold-deep, #8a6b34); letter-spacing: 0.28em; } .camino-num { font-size: 0.7rem; letter-spacing: 0.24em; color: var(--c-dim, #8a8275); } .camino-title { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(48px, 4.8vw, 76px); line-height: 1; margin: 0; color: var(--c-ink, #1a1814); } .camino-title .italic { color: var(--galar-gold, #b8924a); font-style: italic; transition: color 0.35s ease; } .camino p { color: var(--c-stone, #5a5346); font-size: 15.5px; line-height: 1.65; margin: 0; flex: 1; max-width: 32ch; } .camino p strong { color: var(--c-ink, #1a1814); font-weight: 500; } .camino-cta { margin-top: 0.6rem; font-size: 0.7rem; letter-spacing: 0.22em; color: var(--galar-gold, #b8924a); transition: letter-spacing 0.4s ease, color 0.3s ease; } /* responsive */ @media (max-width: 960px) { .caminos-grid { grid-template-columns: 1fr; } .camino { min-height: 0; padding: 2.4rem 2rem 2rem; } .camino-title { font-size: clamp(42px, 9vw, 60px); } } @media (max-width: 640px) { .caminos { padding: 5rem 0 6rem; } .caminos-head { margin: 2.5rem 0 3rem; } } /* ═══════════════════════════════════════════════════════════════ PROPIEDADES — desktop: sticky scroll-driven gallery móvil: CARRUSEL HORIZONTAL con scroll-snap (swipe nativo) ═══════════════════════════════════════════════════════════════ */ .panel-img-mobile { display: none; } @media (max-width: 960px) { /* Resetear todo el sticky/pin de desktop */ .gallery-pin { height: auto !important; min-height: 0 !important; padding: 0 !important; position: relative !important; } .gallery-track { display: block !important; height: auto !important; min-height: 0 !important; grid-template-columns: 1fr !important; transform: none !important; position: relative !important; } .gallery-media { display: none !important; } /* Carrusel horizontal con scroll-snap */ .gallery-panels { display: flex !important; flex-direction: row !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 1rem !important; padding: 0 1.2rem 1.5rem !important; width: 100% !important; height: auto !important; position: relative !important; } .gallery-panels::-webkit-scrollbar { display: none; } /* Cada panel = una tarjeta full-width con scroll-snap (oscura, igual que la sección) */ .panel { flex: 0 0 calc(100vw - 3rem) !important; width: calc(100vw - 3rem) !important; max-width: 360px !important; scroll-snap-align: center !important; scroll-snap-stop: always !important; background: var(--c-ink, #1a1814) !important; color: var(--c-parchment, #f4efe6) !important; border: 1px solid rgba(244, 239, 230, 0.12) !important; border-top: 0 !important; border-radius: 4px; overflow: hidden !important; box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.5); padding: 0 !important; margin: 0 !important; gap: 0 !important; min-height: 0 !important; height: auto !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; opacity: 1 !important; transform: none !important; position: relative !important; } /* Imagen arriba */ .panel-img-mobile { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #efece5; position: relative; } .panel-img-mobile img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Padding lateral compartido (sin tocar margin) */ .panel > .panel-num, .panel > .panel-title, .panel > .panel-meta, .panel > .panel-body, .panel > .panel-specs { padding-left: 1.7rem !important; padding-right: 1.7rem !important; } /* Número de panel */ .panel > .panel-num { padding-top: 1.7rem !important; padding-bottom: 0.9rem !important; margin: 0 !important; color: var(--galar-gold-soft, #c8a564) !important; font-size: 0.66rem !important; letter-spacing: 0.22em !important; } /* Título — centrado horizontalmente */ .panel > .panel-title { font-size: clamp(28px, 7vw, 38px) !important; line-height: 1.05 !important; margin: 0 0 1.3rem !important; color: var(--c-parchment, #f4efe6) !important; text-align: center !important; } .panel > .panel-title .italic { color: var(--galar-gold-soft, #c8a564) !important; } /* Meta (ubicación + subtipo) */ .panel > .panel-meta { display: flex !important; flex-direction: column !important; gap: 0.35rem !important; margin: 0 0 1.5rem !important; font-size: 0.66rem !important; letter-spacing: 0.16em !important; line-height: 1.5 !important; color: rgba(244, 239, 230, 0.72) !important; } /* Body — centrado horizontalmente */ .panel > .panel-body { color: rgba(244, 239, 230, 0.82) !important; font-size: 14.5px !important; line-height: 1.7 !important; margin: 0 0 1.8rem !important; text-align: center !important; } /* Specs grid */ .panel > .panel-specs { padding-bottom: 1.8rem !important; padding-top: 1.4rem !important; margin: auto 0 0 !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1.2rem 1rem !important; border-top: 1px solid rgba(244, 239, 230, 0.14); } .panel > .panel-specs > div { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; line-height: 1.35 !important; } .panel > .panel-specs .mono.dim { font-size: 0.55rem !important; letter-spacing: 0.22em !important; color: rgba(244, 239, 230, 0.48) !important; } .panel > .panel-specs .mono:not(.dim) { font-size: 0.72rem !important; letter-spacing: 0.08em !important; color: var(--c-parchment, #f4efe6) !important; } /* Indicador de paginación del carrusel */ .residencias-intro { padding-bottom: 1rem !important; } .residencias-intro::after { content: '← Desliza para ver más →'; display: block; margin-top: 1.2rem; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.22em; color: var(--galar-gold, #b8924a); text-align: center; text-transform: uppercase; } } /* ═══════════════════════════════════════════════════════════════ PROPIEDADES — grid estático de tipos de propiedad (placeholder visual mientras el catálogo dinámico se prepara) ═══════════════════════════════════════════════════════════════ */ .prop-types-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 4.5rem; } .prop-type-card { background: #fff; border: 1px solid rgba(26, 24, 20, 0.1); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .prop-type-card:hover { transform: translateY(-3px); border-color: var(--galar-gold, #b8924a); box-shadow: 0 14px 32px -18px rgba(26, 24, 20, 0.25); } .prop-type-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #efece5; } .prop-type-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .prop-type-card:hover .prop-type-img img { transform: scale(1.05); } .prop-type-tag { position: absolute; top: 12px; left: 12px; background: rgba(255, 255, 255, 0.92); color: #1a1814; padding: 0.3rem 0.6rem; font-size: 0.62rem; letter-spacing: 0.22em; border-radius: 2px; } .prop-type-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .prop-type-body h3 { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(20px, 1.6vw, 26px); margin: 0; color: #1a1814; line-height: 1.15; } .prop-type-body h3 .italic { font-style: italic; color: var(--galar-gold, #b8924a); } .prop-type-body p { color: #5a5346; font-size: 0.92rem; line-height: 1.55; margin: 0; flex: 1; } .prop-type-cta { margin-top: 0.6rem; font-size: 0.68rem; letter-spacing: 0.22em; color: var(--galar-gold, #b8924a); text-decoration: none; transition: color 0.25s ease, letter-spacing 0.4s ease; } .prop-type-cta:hover { color: var(--galar-gold-deep, #8a6b34); letter-spacing: 0.28em; } /* CTA block al final */ .prop-cta-block { margin-top: 6rem; padding: 3.5rem 3rem; background: var(--c-ink, #1a1814); color: #f4efe6; border-radius: 4px; display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 2.5rem; } .prop-cta-text .mono.dim { font-size: 0.68rem; letter-spacing: 0.28em; color: var(--galar-gold-soft, #c8a564); display: inline-block; margin-bottom: 1rem; } .prop-cta-text h2 { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(28px, 3vw, 44px); margin: 0 0 0.8rem; line-height: 1.1; } .prop-cta-text p { color: rgba(244, 239, 230, 0.78); font-size: 1rem; line-height: 1.6; margin: 0; max-width: 50ch; } .prop-cta-actions { display: flex; flex-direction: column; gap: 0.8rem; align-items: flex-start; } .prop-cta-actions .btn-primary, .prop-cta-actions .btn-ghost { width: 100%; justify-content: center; padding: 1rem 1.6rem; } .prop-cta-actions .btn-ghost { color: rgba(244, 239, 230, 0.9); border-color: rgba(244, 239, 230, 0.3); } .prop-cta-actions .btn-ghost:hover { background: rgba(255,255,255,0.05); border-color: rgba(244, 239, 230, 0.6); } @media (max-width: 768px) { .prop-cta-block { grid-template-columns: 1fr; padding: 2.5rem 1.8rem; margin-top: 4rem; } } /* ═══════════════════════════════════════════════════════════════ PAGE-BODY — restaurar visibilidad de títulos editorial En páginas internas (sin GSAP) los .line > span quedan ocultos por la animación de reveal del index. Forzamos su visibilidad. ═══════════════════════════════════════════════════════════════ */ body.page-body .display-2 .line > span, body.page-body .page-title .line > span, body.page-body .faq-title .line > span, body.page-body .contacto-title .line > span, body.page-body .contacto-block-title .line > span, body.page-body .caminos-title .line > span, body.page-body .promesa-title .line > span, body.page-body .filosofia-title .line > span, body.page-body .diario-title .line > span { transform: none !important; opacity: 1 !important; } /* ═══════════════════════════════════════════════════════════════ FOOTER — línea divisoria 100% ancho que separa del CTA superior ═══════════════════════════════════════════════════════════════ */ .footer { position: relative; } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 1px; background: rgba(184, 146, 74, 0.4); /* dorado translúcido */ } /* ═══════════════════════════════════════════════════════════════ FOOTER WORDMARK — GALAR grande en blanco/parchment, una sola línea ═══════════════════════════════════════════════════════════════ */ .footer-wordmark { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(140px, 27vw, 400px) !important; letter-spacing: 0.02em; line-height: 0.85 !important; white-space: nowrap !important; display: block; margin-bottom: 3rem !important; color: var(--c-parchment, #f4efe6); } /* ═══════════════════════════════════════════════════════════════ TESTIMONIOS — texto más grande para ganar protagonismo ═══════════════════════════════════════════════════════════════ */ .testimonio-text { font-size: clamp(28px, 3.4vw, 56px) !important; line-height: 1.25 !important; max-width: 18ch; margin-left: auto; margin-right: auto; } .testimonio-quote { padding: 1rem 0; } .testimonio-attribution .italic { font-size: clamp(15px, 1.2vw, 19px); } /* ═══════════════════════════════════════════════════════════════ DOSSIER — GA (dorado) + LAR (blanco) en una sola línea ═══════════════════════════════════════════════════════════════ */ .dossier-cover-title { display: inline-flex !important; align-items: baseline; white-space: nowrap; font-family: 'Fraunces', serif; letter-spacing: 0.05em; line-height: 1; } .dossier-ga { color: var(--galar-gold, #b8924a); font-style: normal; } .dossier-lar { color: #fff; font-style: normal; } /* ═══════════════════════════════════════════════════════════════ FIX — descenders (la "g" de "Preguntas" se recortaba) .display-2 .line tiene overflow:hidden para los reveals; subo line-height + padding-bottom para que la 'g'/'p'/'j' respiren ═══════════════════════════════════════════════════════════════ */ .display-2 .line { padding-bottom: 0.12em; } .display-2 .line > span { line-height: 1.05; } /* Igual para el hero y otras secciones críticas */ .hero-title .line, .faq-title .line, .contacto-block-title .line, .caminos-title .line { padding-bottom: 0.14em; } /* ═══════════════════════════════════════════════════════════════ CONTACTO BLOCK — 3 métodos grandes sobre fondo café Diferencia visual fuerte vs FAQ (que va arriba) ═══════════════════════════════════════════════════════════════ */ .contacto-block { padding: 0; background: var(--c-ink, #1a1814); color: #f4efe6; position: relative; } .contacto-block-inner { padding: 9rem 0 7rem; position: relative; } .contacto-block-inner::before { /* línea decorativa dorada al inicio */ content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: clamp(80px, 12vw, 160px); height: 1px; background: var(--galar-gold, #b8924a); } .contacto-block-head { text-align: center; margin-bottom: 5rem; max-width: 760px; margin-left: auto; margin-right: auto; } .contacto-block-eyebrow { font-size: 0.72rem; letter-spacing: 0.32em; color: var(--galar-gold, #b8924a); display: inline-block; margin-bottom: 1.4rem; } .contacto-block-title { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(40px, 5.4vw, 80px); line-height: 1.02; margin: 0 0 1.4rem; color: #fff; } .contacto-block-title .italic { color: var(--galar-gold, #b8924a); } .contacto-block-lede { color: rgba(244, 239, 230, 0.7); font-size: clamp(16px, 1.2vw, 19px); line-height: 1.65; margin: 0; max-width: 56ch; margin-left: auto; margin-right: auto; } /* Grid de 3 métodos */ .contacto-methods { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1.2rem; margin-bottom: 5rem; } .contact-method { display: flex; align-items: center; gap: 1.6rem; background: rgba(244, 239, 230, 0.045); border: 1px solid rgba(244, 239, 230, 0.1); padding: 2rem 2rem 2rem 1.8rem; text-decoration: none; color: #f4efe6; position: relative; transition: all 0.35s ease; min-height: 130px; } .contact-method:hover { background: rgba(244, 239, 230, 0.08); border-color: var(--galar-gold, #b8924a); transform: translateY(-2px); } .contact-method.primary { background: var(--galar-gold, #b8924a); border-color: var(--galar-gold, #b8924a); color: #fff; } .contact-method.primary:hover { background: var(--galar-gold-deep, #8a6b34); border-color: var(--galar-gold-deep, #8a6b34); } .contact-method-icon { flex-shrink: 0; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); border-radius: 50%; color: inherit; } .contact-method.primary .contact-method-icon { background: rgba(255, 255, 255, 0.18); } .contact-method-body { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .contact-method-eyebrow { font-size: 0.6rem; letter-spacing: 0.28em; color: rgba(244, 239, 230, 0.55); text-transform: uppercase; } .contact-method.primary .contact-method-eyebrow { color: rgba(255, 255, 255, 0.78); } .contact-method-title { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(22px, 2vw, 30px); margin: 0; line-height: 1.1; } .contact-method-detail { font-size: 0.78rem; letter-spacing: 0.06em; color: rgba(244, 239, 230, 0.7); line-height: 1.3; word-break: break-word; } .contact-method.primary .contact-method-detail { color: rgba(255, 255, 255, 0.92); } .contact-method-arrow { font-size: 1.4rem; color: rgba(244, 239, 230, 0.5); transition: transform 0.35s ease, color 0.35s ease; flex-shrink: 0; } .contact-method:hover .contact-method-arrow { transform: translateX(6px); color: var(--galar-gold, #b8924a); } .contact-method.primary .contact-method-arrow { color: rgba(255, 255, 255, 0.85); } .contact-method.primary:hover .contact-method-arrow { color: #fff; } /* Footer: dirección, horario, redes */ .contacto-block-foot { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; padding-top: 3rem; border-top: 1px solid rgba(244, 239, 230, 0.1); align-items: start; } .contacto-block-foot > div { display: flex; flex-direction: column; gap: 0.5rem; } .contacto-block-foot-label { font-size: 0.65rem; letter-spacing: 0.28em; color: rgba(244, 239, 230, 0.45); } .contacto-block-address-text { color: rgba(244, 239, 230, 0.85); font-size: 0.92rem; line-height: 1.55; } .contacto-block-social { gap: 0.5rem; } .contacto-block-social a { font-size: 0.72rem; letter-spacing: 0.18em; text-decoration: none; color: var(--galar-gold-soft, #c8a564); transition: color 0.25s ease; } .contacto-block-social a:hover { color: #fff; } /* responsive */ @media (max-width: 960px) { .contacto-methods { grid-template-columns: 1fr; } .contacto-block-foot { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .contacto-block-inner { padding: 5rem 0 4.5rem; } .contacto-block-head { margin-bottom: 3rem; } .contacto-block-foot { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 2rem; } .contact-method { padding: 1.4rem 1.4rem 1.4rem 1.2rem; gap: 1rem; min-height: 0; } .contact-method-icon { width: 48px; height: 48px; } } /* ═══════════════════════════════════════════════════════════════ NAV — WhatsApp chip discreto en topbar ═══════════════════════════════════════════════════════════════ */ .nav-wa { display: inline-block; padding: 0.45rem 0.9rem; border: 1px solid currentColor; font-size: 0.66rem; letter-spacing: 0.2em; text-decoration: none; color: inherit; transition: background 0.25s var(--ease-soft), color 0.25s var(--ease-soft), border-color 0.25s var(--ease-soft); } /* Hover con contraste: se rellena de dorado de marca con texto blanco. */ .nav-wa:hover, .nav-wa:focus-visible { background: var(--galar-gold); border-color: var(--galar-gold); color: #fff; outline: none; } /* ═══════════════════════════════════════════════════════════════ FOOTER — botón de login discreto ═══════════════════════════════════════════════════════════════ */ .footer-baseline { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 1.5rem; flex-wrap: wrap; } .footer-login { color: var(--galar-gold-soft); text-decoration: none; font-size: 0.66rem; letter-spacing: 0.22em; padding: 0.4rem 0.85rem; border: 1px solid rgba(184, 146, 74, 0.6); display: inline-block; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .footer-login:hover { background: var(--galar-gold); color: #fff; border-color: var(--galar-gold); } /* ─── Footer responsive (mobile) Las reglas desktop usan !important arriba; aquí hay que igualar especificidad. Reducimos wordmark, padding y permitimos wrap. */ @media (max-width: 768px) { .footer { padding: 80px var(--gutter, 24px) 28px !important; } .footer-wordmark { font-size: clamp(64px, 22vw, 140px) !important; margin-bottom: 2rem !important; /* dejamos nowrap por estética: en mobile la palabra "GALAR" cabe en una sola línea con tamaño reducido */ } .footer-grid { grid-template-columns: 1fr !important; gap: 36px !important; padding-top: 40px !important; padding-bottom: 40px !important; } .footer-baseline { flex-direction: column !important; align-items: flex-start !important; gap: 0.8rem !important; padding-top: 24px !important; } } @media (max-width: 480px) { .footer { padding: 64px 20px 24px !important; } .footer-wordmark { font-size: clamp(48px, 20vw, 96px) !important; margin-bottom: 1.6rem !important; letter-spacing: 0.01em !important; } .footer-grid { gap: 28px !important; padding-top: 32px !important; padding-bottom: 32px !important; } .footer-col li { font-size: 17px !important; } } /* ═══════════════════════════════════════════════════════════════ PROPIEDADES DINÁMICAS (residencias.html / residencia-detalle.html) Mantienen el tono editorial pero sin números romanos ═══════════════════════════════════════════════════════════════ */ .properties-filters { display: flex; flex-wrap: wrap; gap: 0.6rem 0.8rem; margin: 2rem 0 3rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(0, 0, 0, 0.08); align-items: center; } .properties-filters .filter-label { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.22em; color: var(--c-dim, #8a8275); text-transform: uppercase; margin-right: 0.3rem; } .filter-chip { background: transparent; border: 1px solid rgba(0,0,0,0.15); padding: 0.5rem 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.18em; cursor: pointer; text-decoration: none; display: inline-block; transition: all 0.2s ease; color: inherit; } .filter-chip:hover { border-color: var(--galar-gold); color: var(--galar-gold-deep); } .filter-chip.active { background: #1a1814; color: #fff; border-color: #1a1814; } .properties-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2.4rem 1.8rem; margin-top: 1.5rem; } .properties-empty { grid-column: 1 / -1; text-align: center; padding: 4rem 1rem; border: 1px dashed rgba(0,0,0,0.15); display: flex; flex-direction: column; align-items: center; gap: 1rem; } .properties-empty h3 { font-family: 'Fraunces', serif; font-weight: 400; font-size: 1.4rem; margin: 0; } .properties-empty p { max-width: 480px; margin: 0; } .property-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 0.7rem; transition: transform 0.3s ease; } .property-card:hover { transform: translateY(-2px); } .property-card-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #efece5; display: flex; align-items: center; justify-content: center; } .property-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .property-card:hover .property-card-img img { transform: scale(1.04); } .property-card-img .mono.dim { font-size: 0.62rem; letter-spacing: 0.22em; color: #8a8275; } .property-card-tag { position: absolute; top: 10px; left: 10px; background: rgba(26, 24, 20, 0.92); color: #fff; font-size: 0.58rem; letter-spacing: 0.2em; padding: 0.3rem 0.65rem; } .property-card-body { display: flex; flex-direction: column; gap: 0.25rem; padding: 0 0.1rem; } .property-card-body .mono.dim { font-size: 0.6rem; letter-spacing: 0.2em; } .property-card-body h3 { font-family: 'Fraunces', serif; font-weight: 400; font-size: 1.2rem; margin: 0.2rem 0 0.1rem; } .property-card-price { font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; color: var(--galar-gold-deep); } .property-card-specs { display: flex; gap: 0.9rem; margin-top: 0.4rem; color: #6e6759; font-size: 0.74rem; } /* property detail */ .detail-wrap { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; margin-top: 2.5rem; } .detail-gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 240px 240px; gap: 6px; margin-bottom: 2rem; } .detail-gallery .main { grid-row: 1 / 3; } .detail-gallery > div { background: #efece5; overflow: hidden; } .detail-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; } .detail-gallery .placeholder { display: flex; align-items: center; justify-content: center; color: #8a8275; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.22em; } .detail-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1.5rem; margin: 2rem 0; padding: 1.5rem 0; border-top: 1px solid rgba(0,0,0,0.1); border-bottom: 1px solid rgba(0,0,0,0.1); } .detail-spec { display: flex; flex-direction: column; gap: 0.2rem; } .detail-spec .mono.dim { font-size: 0.6rem; letter-spacing: 0.22em; } .detail-spec .val { font-family: 'Fraunces', serif; font-size: 1.3rem; } .detail-side { position: sticky; top: 100px; align-self: start; border: 1px solid rgba(0,0,0,0.1); padding: 1.8rem 1.6rem; display: flex; flex-direction: column; gap: 1rem; background: #fff; } .detail-price { font-family: 'Fraunces', serif; font-size: 1.8rem; color: var(--galar-gold-deep); } /* CTAs auxiliares */ .btn-gold { display: inline-flex; align-items: center; justify-content: center; background: var(--galar-gold); color: #fff; padding: 0.9rem 1.5rem; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.18em; text-decoration: none; border: 1px solid var(--galar-gold); transition: background 0.2s ease, border-color 0.2s ease; } .btn-gold:hover { background: var(--galar-gold-deep); border-color: var(--galar-gold-deep); } /* ─── Botones primarios reutilizables (públicos) ─── */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--galar-gold); color: #fff; padding: 0.95rem 1.6rem; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--galar-gold); border-radius: 2px; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .btn-primary:hover { background: var(--galar-gold-deep); border-color: var(--galar-gold-deep); color: #fff; } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: transparent; color: inherit; padding: 0.95rem 1.6rem; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; border: 1px solid currentColor; border-radius: 2px; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .btn-ghost:hover { background: currentColor; } /* compensar el color de fondo para que el texto siga siendo legible al hover */ .btn-ghost:hover { color: var(--c-ink, #1a1814); } /* en fondos oscuros (CTA bloque café) el ghost debe volverse claro al hover */ .prop-cta-block .btn-ghost:hover { color: var(--c-ink, #1a1814); background: rgba(244, 239, 230, 0.92); } .btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: 0.9rem 1.5rem; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.18em; text-decoration: none; color: inherit; border: 1px solid currentColor; background: transparent; transition: background 0.2s ease; } /* responsive */ @media (max-width: 760px) { .detail-wrap { grid-template-columns: 1fr; } .detail-side { position: static; } .detail-gallery { grid-template-columns: 1fr; grid-template-rows: 220px 130px 130px; } .detail-gallery .main { grid-row: auto; } .nav-wa { display: none; } }