/* ============================================ SECTIONS — Section-specific Styles ============================================ */ /* === HERO === */ .hero { position: relative; width: 100%; height: 100dvh; min-height: 600px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #0a1e1e; } /* Scene layer — video background */ .hero__scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; pointer-events: none; } /* Video fills the hero, cover-style, with slow ambient zoom via GSAP */ .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: center center; will-change: transform; } /* Warm color tint — enhances the golden light already in the video */ .hero__video-tint { position: absolute; inset: 0; background: radial-gradient(ellipse at 65% 30%, rgba(212, 175, 85, 0.12) 0%, transparent 60%), linear-gradient(180deg, rgba(8, 20, 14, 0.25) 0%, rgba(6, 14, 10, 0.10) 40%, rgba(4, 12, 8, 0.60) 100%); pointer-events: none; } /* Vignette + text readability layer */ .hero__video-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(8, 20, 14, 0) 0%, rgba(6, 16, 10, 0.30) 60%, rgba(2, 8, 5, 0.80) 100%), radial-gradient(ellipse at 50% 58%, rgba(4, 12, 8, 0.45) 0%, rgba(4, 12, 8, 0) 50%); pointer-events: none; } /* Legacy (kept to avoid broken references) */ .hero__scene .scene-svg { width: 100%; height: 100%; display: block; } .hero__overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 48%, rgba(10,25,20,0.25) 0%, transparent 50%), radial-gradient(ellipse at 70% 40%, rgba(var(--color-primary-rgb), 0.06) 0%, transparent 45%), radial-gradient(ellipse at 20% 60%, rgba(var(--color-accent-rgb), 0.04) 0%, transparent 35%); z-index: 2; } .hero__content { position: relative; z-index: var(--z-above); text-align: center; max-width: var(--container-narrow); padding: 0 var(--space-lg); } /* Hidden until entrance animation fires (prevents FOUC flash). Only hide the elements that JS actually animates to opacity 1. .hero__title and .hero__cta stay visible — their CHILDREN (.hero-char and .btn) are hidden inline and animated by the timeline. The `.js` class is added inline in so this only applies when JS is loaded. */ .js .hero__label, .js .hero__subtitle, .js .hero__scroll-indicator { opacity: 0; } .js .hero__cta .btn { opacity: 0; } .hero__label { display: inline-block; font-family: var(--font-accent); font-size: var(--text-base); font-style: italic; color: var(--color-accent); letter-spacing: var(--tracking-wider); margin-bottom: var(--space-lg); } .hero__title { font-family: var(--font-heading); font-size: var(--text-hero); font-weight: 500; color: var(--color-text-light); line-height: 0.95; letter-spacing: -0.04em; margin-bottom: var(--space-lg); } .hero__subtitle { font-family: var(--font-body); font-size: var(--text-lg); color: rgba(255, 255, 255, 0.55); max-width: 500px; margin: 0 auto var(--space-xl); line-height: var(--leading-relaxed); } .hero__cta { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; } @media (max-width: 480px) { .hero__cta { flex-direction: column; align-items: center; } .hero__cta .btn { width: 100%; max-width: 280px; } } /* === ABOUT === */ .about__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-2xl); align-items: center; margin-bottom: var(--space-2xl); } .about__text { font-size: var(--text-base); color: var(--color-text-muted); line-height: var(--leading-relaxed); margin-bottom: var(--space-lg); } .about__quote { padding-left: var(--space-lg); border-left: 2px solid var(--color-accent); margin-top: var(--space-xl); } .about__quote p { font-family: var(--font-accent); font-size: var(--text-lg); font-style: italic; color: var(--color-primary); line-height: var(--leading-relaxed); } .about__image-wrapper { position: relative; } .about__image-wrapper img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--border-radius-xl); border: 1px solid rgba(var(--color-primary-rgb), 0.12); } .about__image-accent { position: absolute; inset: -16px; border: 1px solid rgba(var(--color-accent-rgb), 0.2); border-radius: var(--border-radius-xl); z-index: -1; transform: translate(16px, 16px); pointer-events: none; } @media (max-width: 768px) { .about__image-accent { inset: -8px; transform: translate(8px, 8px); } } /* Values */ .about__values { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .value-card { text-align: center; padding: var(--space-xl); background: var(--color-surface); border-radius: var(--border-radius-xl); border: 1px solid var(--color-border-light); transition: all 0.4s var(--ease-smooth); } .value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-border); } .value-card__icon { width: 56px; height: 56px; margin: 0 auto var(--space-lg); display: flex; align-items: center; justify-content: center; background: var(--color-primary-pale); border-radius: var(--border-radius); color: var(--color-primary); } .value-card__title { font-family: var(--font-heading); font-size: var(--text-lg); margin-bottom: var(--space-sm); color: var(--color-text); } .value-card__text { font-size: var(--text-sm); color: var(--color-text-muted); } @media (max-width: 768px) { .about__grid { grid-template-columns: 1fr; } .about__visual { order: -1; } } @media (max-width: 600px) { .about__values { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; } } /* About stats counters */ .about__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-2xl); border-top: 1px solid var(--color-border); text-align: center; } .stat__number { display: block; font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 600; color: var(--color-primary); line-height: 1; margin-bottom: var(--space-xs); } .stat__label { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; } @media (max-width: 768px) { .about__stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .about__stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .stat__number { font-size: var(--text-3xl); } } /* === SECTION TRANSITIONS === */ .section--novedades::before, .section--cta::before { /* smooth fade from previous light section into dark */ } /* === NOVEDADES (Lo nuevo) === */ .section--novedades { position: relative; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--color-accent-rgb), 0.12), transparent 70%), radial-gradient(ellipse 100% 80% at 50% 100%, rgba(var(--color-primary-rgb), 0.35), transparent 65%), linear-gradient(180deg, #0f241e 0%, #1a2e28 50%, #0f241e 100%); overflow: hidden; /* Smooth top edge with cream fade */ box-shadow: 0 -60px 80px -20px rgba(var(--color-bg-dark-rgb), 0.3); } .section--novedades::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--color-accent-rgb), 0.5), transparent); z-index: 1; } .section--novedades::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 15% 30%, rgba(var(--color-accent-rgb), 0.05) 0%, transparent 40%), radial-gradient(circle at 85% 70%, rgba(74, 158, 126, 0.06) 0%, transparent 45%); pointer-events: none; z-index: 0; } .section--novedades .container { position: relative; z-index: 2; } .novedades__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); max-width: 1200px; margin: 0 auto; } .novedad-card { position: relative; background: linear-gradient(180deg, rgba(34, 61, 53, 0.9) 0%, rgba(15, 36, 30, 0.95) 100%); border: 1px solid rgba(var(--color-accent-rgb), 0.15); border-radius: var(--border-radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 0.5s var(--ease-smooth), border-color 0.4s, box-shadow 0.4s; } .novedad-card:hover { transform: translateY(-6px); border-color: rgba(var(--color-accent-rgb), 0.45); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--color-accent-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .novedad-card--featured { border-color: rgba(var(--color-accent-rgb), 0.5); background: linear-gradient(180deg, rgba(46, 78, 68, 0.95) 0%, rgba(22, 45, 38, 0.98) 100%); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--color-accent-rgb), 0.3), inset 0 1px 0 rgba(var(--color-accent-rgb), 0.2); transform: translateY(-8px); } .novedad-card--featured:hover { transform: translateY(-14px); } .novedad-card--featured::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.5), transparent 40%, transparent 60%, rgba(var(--color-accent-rgb), 0.5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.6; } .novedad-card__image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .novedad-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out-expo); } .novedad-card:hover .novedad-card__image img { transform: scale(1.08); } .novedad-card__image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(var(--color-bg-dark-rgb), 0.6) 100%); pointer-events: none; } .novedad-card__badge { position: absolute; top: var(--space-md); left: var(--space-md); padding: 6px 14px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; background: linear-gradient(135deg, var(--color-accent), #fff3c4); color: var(--color-bg-dark); border-radius: var(--border-radius-full); box-shadow: 0 4px 20px rgba(var(--color-accent-rgb), 0.5); z-index: 2; } .novedad-card__body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); flex: 1; } .novedad-card .novedad-card__title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 600; color: #ffffff; margin: 0; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } .novedad-card__description { font-size: var(--text-sm); color: rgba(245, 240, 232, 0.85); line-height: var(--leading-relaxed); margin: 0; flex: 1; } .novedad-card__prices { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid rgba(var(--color-accent-rgb), 0.2); } .novedad-card__price { display: flex; flex-direction: column; gap: 2px; flex: 1; } .novedad-card__price--single { flex: 0; text-align: center; margin: 0 auto; } .novedad-card__price-value { font-family: var(--font-accent); font-size: 2rem; line-height: 1; color: #ffffff; font-weight: 600; } .novedad-card__price-value small { font-size: 0.7em; opacity: 0.9; } .novedad-card__price-value span { font-size: 0.6em; opacity: 0.8; margin-left: 2px; } .novedad-card__price-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(245, 240, 232, 0.65); font-weight: 500; } .novedad-card__price--combo .novedad-card__price-value { color: var(--color-accent-light); text-shadow: 0 2px 12px rgba(var(--color-accent-rgb), 0.35); } .novedad-card__divider { width: 1px; height: 40px; background: linear-gradient(180deg, transparent, rgba(var(--color-accent-rgb), 0.35), transparent); } .novedades__note { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-top: var(--space-xl); color: rgba(245, 240, 232, 0.75); font-size: var(--text-sm); font-style: italic; } .novedades__note-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(var(--color-accent-rgb), 0.2); color: var(--color-accent); font-size: 0.9rem; font-style: normal; } @media (max-width: 1024px) { .novedades__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } .novedad-card:last-child { grid-column: span 2; max-width: 500px; margin: 0 auto; } } @media (max-width: 680px) { .novedades__grid { grid-template-columns: 1fr; max-width: 420px; gap: var(--space-lg); } .novedad-card:last-child { grid-column: span 1; } .novedad-card__price-value { font-size: 1.5rem; } } /* === GALLERY === */ .gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); max-width: 1200px; margin: 0 auto; } .gallery__item { position: relative; border-radius: var(--border-radius-lg); overflow: hidden; cursor: pointer; aspect-ratio: 3 / 4; background: rgba(0, 0, 0, 0.2); } /* Items landscape: ocupan 2 columnas con aspect landscape */ .gallery__item--wide { grid-column: span 2; aspect-ratio: 3 / 2; } /* Item portrait tall (span vertical doble altura) */ .gallery__item--tall { grid-row: span 2; aspect-ratio: 3 / 8; } .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out-expo), filter 0.4s; filter: brightness(0.92); } .gallery__item:hover img { transform: scale(1.05); filter: brightness(1); } .gallery__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--color-bg-dark-rgb), 0.85) 0%, rgba(var(--color-bg-dark-rgb), 0.2) 40%, transparent 70%); display: flex; align-items: flex-end; padding: var(--space-lg); opacity: 0; transition: opacity 0.4s var(--ease-smooth); } .gallery__item:hover .gallery__overlay { opacity: 1; } .gallery__caption { font-family: var(--font-accent); font-style: italic; color: var(--color-text-light); font-size: var(--text-base); transform: translateY(8px); transition: transform 0.4s var(--ease-smooth); } .gallery__item:hover .gallery__caption { transform: translateY(0); } /* Icono "ver" en la esquina al pasar el raton */ .gallery__item::after { content: '+'; position: absolute; top: var(--space-md); right: var(--space-md); width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--color-accent-rgb), 0.9); color: var(--color-bg-dark); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 300; opacity: 0; transform: scale(0.8); transition: all 0.35s var(--ease-smooth); pointer-events: none; } .gallery__item:hover::after { opacity: 1; transform: scale(1); } @media (max-width: 1024px) { .gallery__grid { grid-template-columns: repeat(2, 1fr); } .gallery__item--wide { grid-column: span 2; } .gallery__item--tall { grid-row: span 1; aspect-ratio: 3 / 4; } } @media (max-width: 600px) { .gallery__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); } .gallery__item { aspect-ratio: 3 / 4; } .gallery__item--wide { grid-column: span 2; aspect-ratio: 16 / 10; } .gallery__item--tall { grid-row: span 1; aspect-ratio: 3 / 4; } } /* === CTA === */ .section--cta { position: relative; padding: var(--space-3xl) 0; overflow: hidden; } @media (max-width: 768px) { .section--cta { padding: var(--space-2xl) 0; } } .cta__bg { position: absolute; inset: 0; background: var(--color-bg-dark); z-index: 0; } .cta__gradient { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(var(--color-primary-rgb), 0.15) 0%, transparent 60%), radial-gradient(ellipse at 70% 30%, rgba(var(--color-accent-rgb), 0.1) 0%, transparent 50%); } .cta__content { position: relative; z-index: 1; text-align: center; } .cta__icon { font-size: 3rem; display: block; margin-bottom: var(--space-lg); filter: grayscale(0.3); } .cta__title { font-family: var(--font-heading); font-size: var(--text-3xl); color: var(--color-text-light); margin-bottom: var(--space-md); } .cta__text { font-family: var(--font-accent); font-style: italic; font-size: var(--text-lg); color: rgba(255, 255, 255, 0.72); margin-bottom: var(--space-xl); } .cta__buttons { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; } /* === CONTACT === */ .contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; } .contact__details { display: flex; flex-direction: column; gap: var(--space-lg); margin-top: var(--space-xl); } .contact__item { display: flex; gap: var(--space-md); align-items: flex-start; } .contact__item-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary-pale); display: flex; align-items: center; justify-content: center; color: var(--color-primary); flex-shrink: 0; } .contact__item strong { display: block; font-size: var(--text-sm); color: var(--color-text); margin-bottom: var(--space-2xs); } .contact__item p, .contact__item a { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); } .contact__item a:hover { color: var(--color-primary); } .contact__aviso { margin-top: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: rgba(201, 168, 76, 0.12); border-left: 3px solid var(--color-accent, #c9a84c); color: var(--color-text, inherit); font-size: 0.85rem; line-height: 1.4; } .contact__aviso strong { color: var(--color-accent, #c9a84c); } .contact__links { display: flex; gap: var(--space-md); margin-top: var(--space-xl); flex-wrap: wrap; } .contact__link-badge { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); background: var(--color-primary-pale); border: 1px solid var(--color-border); border-radius: var(--border-radius-full); font-size: var(--text-sm); color: var(--color-primary); transition: all 0.3s; } .contact__link-badge:hover { background: var(--color-primary); color: white; border-color: var(--color-primary); } .contact__map-wrapper { border-radius: var(--border-radius-xl); overflow: hidden; } .contact__map-placeholder { width: 100%; aspect-ratio: 4/3; background: linear-gradient(145deg, var(--color-bg-dark), var(--color-surface-dark)); border: 1px solid rgba(var(--color-primary-rgb), 0.12); border-radius: var(--border-radius-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-sm); color: rgba(255, 255, 255, 0.25); font-family: var(--font-accent); font-style: italic; } .contact__map-placeholder p { color: rgba(255, 255, 255, 0.15); font-size: var(--text-sm); } @media (max-width: 768px) { .contact__grid { grid-template-columns: 1fr; gap: var(--space-xl); } }