/* ============================================ Quinta del Valle — style.css ============================================ */ /* ── Tailwind config ── */ /* Loaded via CDN; custom config in script.js */ /* ════════════════════════════════════════════ SISTEMA TIPOGRÁFICO — Quinta del Valle ──────────────────────────────────────────── Kit de Adobe Fonts: https://use.typekit.net/vzf2bas.css (ya en el ) Logotipo: va vectorizado en los SVG de /img, no necesita fuente. ROL FUENTE DÓNDE Títulos ............... span-compressed 300 h1–h6, .font-display, .faq-question, .rev-score-num Texto largo ........... gotham 300 (Light) body, párrafos, FAQ Antetítulos/volantas .. gotham 500 (Medium) .eyebrow, .hero-eyebrow Etiquetas cortas / UI . gotham 400 (Book) .ui-label, botones, nav, footer, marquee, reseñas Palabras destacadas ... adobe-handwriting-ernie 400 .font-hand El kit sirve gotham en sus tres pesos (300/400/500) y span-compressed en 300 y 400, así que la jerarquía se ve completa. Los títulos van en el Regular (400); span-compressed 300 queda disponible por si en algún momento se quiere una variante más liviana. Todo se maneja desde las cuatro variables de abajo. (Alternativa al kit: self-hostear los .woff2 con el @font-face que sigue.) ════════════════════════════════════════════ */ :root { --font-titulos: "span-compressed", "Playfair Display", Georgia, serif; --font-texto: "gotham", "Montserrat", system-ui, -apple-system, sans-serif; --font-mano: "adobe-handwriting-ernie", "Caveat", cursive; --peso-titulo: 600; /* Span Compressed Semibold */ --peso-largo: 300; /* Gotham Light */ --peso-volanta: 500; /* Gotham Medium */ --peso-ui: 400; /* Gotham Book */ } /* Gotham self-hosteada — alternativa al kit de Adobe. Descomentar y subir los .woff2 a /fonts @font-face { font-family:'gotham'; src:url('./fonts/Gotham-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; } @font-face { font-family:'gotham'; src:url('./fonts/Gotham-Book.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'gotham'; src:url('./fonts/Gotham-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } */ /* ── Reset & Base ── */ html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--font-texto); font-weight: var(--peso-largo); /* Gotham Light para el texto largo */ background-color: #fcf6f0; color: #2f1b06; overflow-x: hidden; } /* ── Títulos — Span Compressed ── */ h1, h2, h3, h4, h5, h6, .font-display, .faq-question, .rev-score-num { font-family: var(--font-titulos); font-weight: var(--peso-titulo); /* reparte las palabras entre líneas en vez de dejar huérfanas sueltas */ text-wrap: balance; } /* ── Antetítulos / volantas — Gotham Medium ── "MÁS QUE UNA CASA", "OPINIONES REALES", "CASAS BOUTIQUE"… */ .eyebrow, .hero-eyebrow { font-family: var(--font-texto); font-weight: var(--peso-volanta); } /* ── Etiquetas cortas e interfaz — Gotham Book ── "5 personas", "Ver casa completa", "Consultar disponibilidad", botones, badges, navegación, datos de contacto. Van con doble clase o selector compuesto para ganarle a las utilidades de peso de Tailwind, que el CDN inyecta después de esta hoja. */ .ui-label, body .ui-label, #navLinks a, #mobileMenu a, .cabin-card a, .cabin-card button, .marquee-item, .rev-name, .gallery-count, footer li, footer a, .wa-tooltip { font-family: var(--font-texto); font-weight: var(--peso-ui); } /* Párrafos de intro: evita que quede una palabra sola en la última línea */ .hero-eyebrow, section > div > div > p, .faq-answer p { text-wrap: pretty; } /* ── Palabras destacadas — Adobe Handwriting ── Solo para frases cortas sueltas ("Tafí del Valle", "desconectar"), nunca para bloques de texto. */ .font-hand, .hand { font-family: var(--font-mano); font-style: normal; font-weight: 400; letter-spacing: 0.01em; } /* Controles de formulario heredan el texto corrido */ button, input, select, textarea { font-family: var(--font-texto); } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #fcf6f0; } ::-webkit-scrollbar-thumb { background: #97845b; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #433916; } html { scrollbar-width: thin; scrollbar-color: #97845b #fcf6f0; } /* ── Hero ── */ .hero-bg { background-size: cover; background-position: center; background-attachment: fixed; } @media (max-width: 768px) { .hero-bg { background-attachment: scroll; } } /* ── Hero Slideshow ── */ .hero-slideshow { position: absolute; inset: 0; z-index: 0; } .hero-slideshow .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; animation: hero-fade 16s infinite; } .hero-slideshow .hero-slide:nth-child(1) { animation-delay: 0s; } .hero-slideshow .hero-slide:nth-child(2) { animation-delay: 4s; } .hero-slideshow .hero-slide:nth-child(3) { animation-delay: 8s; } .hero-slideshow .hero-slide:nth-child(4) { animation-delay: 12s; } @keyframes hero-fade { 0% { opacity: 0; } 5% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } } /* Velo del hero — neutro, no terroso. Antes era Tierra (47,27,6) al 82%: teñía las fotos de marrón y el cielo nocturno del valle se veía sepia. Ahora es un gris neutro con degradé: más suave en el centro (la foto se ve con su color real) y más denso arriba y abajo, que es donde apoyan el navbar y el texto. */ .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( to bottom, rgba(18,18,18,0.62) 0%, rgba(18,18,18,0.38) 38%, rgba(18,18,18,0.45) 62%, rgba(18,18,18,0.72) 100% ); } /* Sombra suave detrás del texto para mantener el contraste sin oscurecer la foto */ .hero-bg h1, .hero-bg .hero-eyebrow, .hero-bg p { text-shadow: 0 2px 18px rgba(0,0,0,0.55); } /* Apila el contenido sobre el slideshow y el velo. El :not(.absolute) es necesario: sin él esta regla (0,3,0) le gana a la utilidad .absolute de Tailwind (0,1,0) y la flecha de "bajar" pasaba a position:relative. Como el hero es flex, la flecha se convertía en un ítem más y le robaba 24px al bloque de texto: en celular quedaba con 20px de margen a la izquierda y 44 a la derecha. */ .hero-bg > *:not(.hero-slideshow):not(.hero-overlay):not(.absolute) { position: relative; z-index: 2; } .hero-bg > .absolute { z-index: 2; } /* ── WhatsApp Animations ── */ @keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } } .wa-icon-wiggle { animation: wiggle 1.8s ease-in-out infinite; display: inline-block; } @keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.55); } 70% { box-shadow: 0 0 0 22px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } } .pulse-ring { animation: pulseRing 2s infinite; } @keyframes heroPulse { 0%, 100% { transform: scale(1); box-shadow: 0 15px 40px -10px rgba(37,211,102,0.5); } 50% { transform: scale(1.04); box-shadow: 0 20px 50px -10px rgba(37,211,102,0.7); } } .hero-cta { animation: heroPulse 2.6s ease-in-out infinite; } /* ── WhatsApp Tooltip ── */ #waFloat { opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity .3s ease, visibility .3s ease, transform .3s ease; } #waFloat.wa-visible { opacity: 1; visibility: visible; transform: translateY(0); } .wa-tooltip { position: absolute; right: 78px; bottom: 16px; background: #fff; color: #2f1b06; padding: 10px 14px; border-radius: 14px; font-size: 13px; font-weight: 500; white-space: nowrap; box-shadow: 0 10px 25px -8px rgba(0,0,0,0.25); } .wa-tooltip::after { content: ""; position: absolute; right: -6px; bottom: 18px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid #fff; } @media (max-width: 480px) { .wa-tooltip { display: none; } } /* ── Cabin Cards ── */ .cabin-card { transition: transform .4s ease, box-shadow .4s ease; } .cabin-card:hover { transform: translateY(-8px); box-shadow: 0 25px 40px -15px rgba(47,27,6,0.35); } /* ── Navbar Scrolled ── */ .nav-scrolled { background-color: rgba(252,246,240,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 20px -10px rgba(0,0,0,0.15); } /* ── Navbar Logo ── Dos versiones reales del SVG (arena / verde) en lugar de invertir con filtros: arena sobre el hero, verde cuando la barra se vuelve clara al scrollear. */ .brand-link { position: relative; display: inline-flex; transition: transform 0.3s ease; } .brand-link:hover { transform: scale(1.05); } /* El lockup horizontal tiene ratio ~8.4:1, así que cada rem de alto son ~8.4rem de ancho. A 3.25rem medía ~437px y se comía el menú. */ .brand-logo { height: 2rem; width: auto; transition: opacity 0.3s ease; } .brand-logo-color { position: absolute; inset: 0; opacity: 0; pointer-events: none; } #navbar.nav-scrolled .brand-logo-cream { opacity: 0; } #navbar.nav-scrolled .brand-logo-color { opacity: 1; } @media (min-width: 1280px) { .brand-logo { height: 2.25rem; } } @media (max-width: 640px) { .brand-logo { height: 1.6rem; } } @media (max-width: 380px) { .brand-logo { height: 1.35rem; } } /* ── Footer Logo ── */ .footer-logo { transition: transform 0.3s ease, filter 0.3s ease; } .footer-logo:hover { transform: scale(1.05); filter: drop-shadow(0 0 8px rgba(255,255,255,0.3)); } /* ── Crédito de autoría (Vanta Studio) ── El PNG viene con fondo negro sólido, así que se presenta como placa redondeada para que se lea como badge y no como recorte sucio. */ .logo-vanta { height: 2.25rem; width: auto; border-radius: 0.5rem; display: block; opacity: 0.85; transition: transform 0.3s ease, opacity 0.3s ease; } .logo-vanta:hover { transform: scale(1.08); opacity: 1; } /* ── Footer Emoji Hover ── */ .emoji-hover { display: inline-block; transition: transform 0.3s ease; cursor: default; } .emoji-hover:hover { transform: scale(1.3); } /* ── Swiper — Cabin Cards ── Casi todas las fotos son verticales 3:4 (3024x4032), así que la caja tiene que ser vertical o el `cover` recorta la casa. NO se usa aspect-ratio: Swiper apila .swiper-wrapper > .swiper-slide > img todos con `height: 100%`, y Safari no resuelve alturas en porcentaje cuando el alto del padre se deriva de aspect-ratio (Chrome sí). El resultado en iPhone era la foto aplastada en una franja apaisada. Por eso la altura se calcula en píxeles desde el ancho real de la columna, que Safari resuelve igual que el resto. Ancho de columna = (ancho del contenedor − padding − gaps) / columnas · section px-5 → 40px de padding · grid gap-8 → 32px por gap · contenedor max-w-7xl → tope 1280px */ .swiper-cabin { position: relative; height: 507px; } /* 3 columnas (≥1024px), contenedor aún sin tocar el tope de 1280px */ @media (min-width: 1024px) and (max-width: 1320px) { .swiper-cabin { height: calc((100vw - 104px) / 3 * 1.25); } } /* 2 columnas */ @media (min-width: 768px) and (max-width: 1023px) { .swiper-cabin { height: calc((100vw - 72px) / 2 * 1.25); } } /* 1 columna: ratio 3:4, idéntico al de las fotos → recorte cero */ @media (max-width: 767px) { .swiper-cabin { height: calc((100vw - 40px) * 4 / 3); } } .swiper-cabin .swiper-slide { overflow: hidden; display: flex; align-items: center; justify-content: center; background: #2f1b06; } .swiper-cabin .swiper-slide img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; } .swiper-cabin .swiper-slide video { width: 100%; height: 100%; object-fit: cover; background: #2f1b06; } /* Swiper arrows */ .swiper-cabin .swiper-button-prev, .swiper-cabin .swiper-button-next { color: #fff; background: rgba(47,27,6,0.55); width: 34px; height: 34px; border-radius: 50%; backdrop-filter: blur(4px); transition: background .2s; } .swiper-cabin .swiper-button-prev:hover, .swiper-cabin .swiper-button-next:hover { background: rgba(103,110,78,0.85); } .swiper-cabin .swiper-button-prev::after, .swiper-cabin .swiper-button-next::after { font-size: 11px; font-weight: 800; } /* Swiper dots */ .swiper-cabin .swiper-pagination-bullet { background: rgba(255,255,255,0.65); opacity: 1; width: 6px; height: 6px; } .swiper-cabin .swiper-pagination-bullet-active { background: #fff; width: 18px; border-radius: 3px; } /* Olivo só tem vídeo vertical (9:16) — cover pra não ficar com barras */ #swiper-olivo .swiper-slide video { object-fit: cover; } /* ── Modal ── */ /* Opaco: con 0.97 se transparentaba el título del hero detrás del panel. */ .cabin-modal { background: #fcf6f0; } .cabin-modal.is-open { display: flex !important; flex-direction: column; } .modal-photo-swiper { height: 100%; } .modal-photo-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: contain; background: #2f1b06; } .modal-photo-swiper .swiper-slide video { width: 100%; height: 100%; object-fit: contain; background: #2f1b06; } @media (min-width: 1024px) { .modal-photo-swiper { height: 100vh; position: sticky; top: 0; } } .modal-detail-icon { width: 1.5rem; flex-shrink: 0; color: #97845b; } body.modal-lock, html.modal-lock { overflow: hidden; } /* ── Lightbox ── El fondo era bg-charcoal/95 (5% translúcido): el navbar (con el logo), el botón de WhatsApp y los títulos del hero se transparentaban encima de la foto grande. Fondo 100% opaco + se ocultan los elementos fixed. */ #lightbox { background-color: #2f1b06; } body.modal-lock #navbar, body.modal-lock #waFloat { opacity: 0; visibility: hidden; pointer-events: none; } /* ── Modal Swiper overrides ── El modal es la galería: acá se mira la foto entera, así que `contain`. Con `cover` las verticales 3:4 perdían el techo y el jardín de las casas. */ .swiper-modal-vid .swiper-slide img, .swiper-modal-castana .swiper-slide img, .swiper-modal-olivo .swiper-slide img, .swiper-modal-vid .swiper-slide video, .swiper-modal-castana .swiper-slide video, .swiper-modal-olivo .swiper-slide video { width: 100%; height: 100%; object-fit: contain; background: #2f1b06; } .swiper-modal-vid .swiper-button-prev, .swiper-modal-vid .swiper-button-next, .swiper-modal-castana .swiper-button-prev, .swiper-modal-castana .swiper-button-next, .swiper-modal-olivo .swiper-button-prev, .swiper-modal-olivo .swiper-button-next { color: #fff; background: rgba(47,27,6,0.55); width: 28px; height: 28px; border-radius: 50%; transform: none !important; } .swiper-modal-vid, .swiper-modal-castana, .swiper-modal-olivo { overflow: hidden; } .swiper-modal-vid .swiper-button-prev, .swiper-modal-castana .swiper-button-prev, .swiper-modal-olivo .swiper-button-prev { left: 8px; } .swiper-modal-vid .swiper-button-next, .swiper-modal-castana .swiper-button-next, .swiper-modal-olivo .swiper-button-next { right: 8px; } .swiper-modal-vid .swiper-button-prev::after, .swiper-modal-vid .swiper-button-next::after, .swiper-modal-castana .swiper-button-prev::after, .swiper-modal-castana .swiper-button-next::after, .swiper-modal-olivo .swiper-button-prev::after, .swiper-modal-olivo .swiper-button-next::after { font-size: 11px; font-weight: 800; } .swiper-modal-vid .swiper-pagination-bullet, .swiper-modal-castana .swiper-pagination-bullet, .swiper-modal-olivo .swiper-pagination-bullet { background: rgba(47,27,6,0.5); opacity: 1; } .swiper-modal-vid .swiper-pagination-bullet-active, .swiper-modal-castana .swiper-pagination-bullet-active, .swiper-modal-olivo .swiper-pagination-bullet-active { background: #97845b; } /* ── Marquee de Serviços ── */ @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-outer { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); } .marquee-inner { display: flex; gap: 0; width: max-content; animation: marquee-scroll 38s linear infinite; will-change: transform; } .marquee-inner:hover { animation-play-state: paused; } .marquee-item { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; margin: 0 6px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 50px; white-space: nowrap; font-size: 0.9rem; font-weight: 500; color: #fcf6f0; transition: background .2s; cursor: default; } .marquee-item:hover { background: rgba(255,255,255,0.14); } .marquee-item .mi-icon { color: #eadfcc; font-size: 1.1rem; flex-shrink: 0; } /* ── Experiência / Lifestyle Section ── */ /* ── Galería ── Antes eran 9 fotos a 2 columnas sin alto fijo: en celular quedaba una sola columna gigante y la sección ocupaba media web. Ahora son 6 miniaturas cuadradas y el resto vive en el modal. */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } @media (max-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } } .gallery-thumb { display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: none; border-radius: 0.9rem; overflow: hidden; cursor: pointer; background: #eadfcc; position: relative; } .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .gallery-thumb:hover img { transform: scale(1.06); } .gallery-thumb::after { content: ""; position: absolute; inset: 0; background: rgba(47,27,6,0); transition: background .3s ease; } .gallery-thumb:hover::after { background: rgba(47,27,6,0.12); } .gallery-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.4rem; padding: 0 0.45rem; border-radius: 999px; background: rgba(103,110,78,0.16); font-size: 0.72rem; font-weight: var(--peso-ui); } .group\/btn:hover .gallery-count { background: rgba(252,246,240,0.22); } /* ── Modal de galería ── */ .gallery-modal { position: fixed; inset: 0; z-index: 9998; background: #fcf6f0; display: flex; flex-direction: column; } .gallery-modal.hidden { display: none; } .gallery-modal-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.25rem; background: #433916; color: #fcf6f0; flex-shrink: 0; } .gallery-close { width: 2.5rem; height: 2.5rem; flex-shrink: 0; border: none; border-radius: 50%; background: rgba(252,246,240,0.18); color: #fcf6f0; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease; } .gallery-close:hover { background: rgba(252,246,240,0.32); } .gallery-modal-body { flex: 1; overflow-y: auto; padding: 1.25rem; } .gallery-full { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; max-width: 1200px; margin: 0 auto; } @media (max-width: 1024px) { .gallery-full { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .gallery-full { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } } .gallery-full-item { display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: none; border-radius: 0.75rem; overflow: hidden; cursor: pointer; background: #eadfcc; } .gallery-full-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .gallery-full-item:hover img { transform: scale(1.05); } /* ── CTA Final Background ── */ .cta-bg { background-image: linear-gradient(rgba(67,57,22,0.88), rgba(67,57,22,0.92)), url('./img/P1105644.jpg'); background-size: cover; background-position: center; } /* ── Utility ── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── Responsividade ── */ @media (max-width: 768px) { /* la altura de .swiper-cabin se define arriba, en el bloque de las tarjetas */ .hero-cta { animation: none; } } /* ── Ajustes de celular ── En pantallas angostas el tracking ancho y los anchos sin límite desarmaban los bloques de texto (palabras huérfanas, líneas desparejas). */ @media (max-width: 640px) { /* 0.3em de tracking parte "ARGENTINA" a una línea sola */ .hero-eyebrow { letter-spacing: 0.14em; font-size: 0.65rem; line-height: 1.8; } /* la píldora pasa a 3 líneas: sin ícono queda un bloque de texto parejo */ .hero-badge { text-align: center; border-radius: 1rem; padding: 0.875rem 1.125rem; line-height: 1.55; } .hero-badge i { display: none; } .hero-badge { gap: 0; } /* limita el ancho de medida para que no queden renglones de 2 palabras */ .hero-bg p:not(.hero-eyebrow) { max-width: 34ch; margin-left: auto; margin-right: auto; } /* los bullets del swiper quedaban pisando el borde de la foto */ .swiper-cabin .swiper-pagination { bottom: 10px !important; } } @media (max-width: 480px) { .swiper-cabin .swiper-button-prev, .swiper-cabin .swiper-button-next { width: 28px; height: 28px; } .swiper-cabin .swiper-button-prev::after, .swiper-cabin .swiper-button-next::after { font-size: 9px; } } /* ── FAQ Accordion ── */ .faq-item { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(47,27,6,0.06); overflow: hidden; transition: box-shadow 0.3s ease; } .faq-item[open] { box-shadow: 0 4px 16px rgba(47,27,6,0.1); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; cursor: pointer; list-style: none; user-select: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-question { font-family: var(--font-titulos); font-size: 1.1rem; color: #2f1b06; font-weight: var(--peso-titulo); line-height: 1.4; } .faq-icon { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fcf6f0; color: #97845b; font-size: 12px; transition: transform 0.3s ease, background 0.3s ease; margin-left: 1rem; } .faq-item[open] .faq-icon { transform: rotate(45deg); background: #97845b; color: white; } .faq-answer { padding: 0 1.5rem 1.25rem 1.5rem; } .faq-answer p { color: #5d3c1b; font-size: 0.95rem; line-height: 1.7; } .faq-link { color: #97845b; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.2s ease; } .faq-link:hover { text-decoration-color: currentColor; } /* ── FAQ: listas y notas ── Las respuestas nuevas traen viñetas y aclaraciones; sin esto heredaban el reset de Tailwind y las