/* ============================================ SOLAZ — Refugio Privado en la Naturaleza ============================================ */ :root { --c-arcilla: #8B5E3C; --c-chocolate: #4B3621; --c-bronce: #B68051; --c-oscuro: #32251c; --c-off-white: #FFFEFE; --c-cream: #F6F1EA; --c-cream-2: #EFE7DC; --c-line: rgba(50, 37, 28, 0.12); --c-line-strong: rgba(50, 37, 28, 0.22); --c-muted: rgba(50, 37, 28, 0.55); --f-display: 'Playfair Display', Georgia, serif; --f-body: 'Montserrat', system-ui, sans-serif; --ease: cubic-bezier(0.65, 0, 0.35, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --container: 1280px; --pad: clamp(20px, 4vw, 56px); --nav-h: 78px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { font-family: var(--f-body); font-weight: 400; color: var(--c-oscuro); background: var(--c-cream); overflow-x: hidden; line-height: 1.5; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: 0; background: none; font: inherit; color: inherit; } input, textarea { font: inherit; color: inherit; } .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); } /* ============================================ LOADER — Editorial brand-led ============================================ */ .loader { position: fixed; inset: 0; background: var(--c-cream); z-index: 9999; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: opacity 0.7s var(--ease), visibility 0.7s var(--ease); } .loader.hidden { opacity: 0; visibility: hidden; } /* Subsequent in-site navigation skips the loader entirely (sessionStorage flag set via an inline script in ). A short page fade-in keeps the transition smooth. */ html.loader-skip .loader { display: none !important; } html.loader-skip body { animation: page-enter 0.4s var(--ease-out); } @keyframes page-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .loader::before, .loader::after { content: ''; position: absolute; background: radial-gradient(circle, rgba(182, 128, 81, 0.16), transparent 70%); width: 460px; height: 460px; border-radius: 50%; pointer-events: none; filter: blur(20px); } .loader::before { top: -180px; left: -180px; } .loader::after { bottom: -180px; right: -180px; } .loader-corner { position: absolute; display: inline-flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; padding: clamp(20px, 3vw, 36px) clamp(20px, 4vw, 48px); opacity: 0; animation: l-fade 0.7s var(--ease-out) 0.2s forwards; } .lc-line { display: inline-block; width: 28px; height: 1px; background: var(--c-bronce); } .loader-corner-tl { top: 0; left: 0; } .loader-corner-tr { top: 0; right: 0; } .loader-corner-bl { bottom: 0; left: 0; } .loader-corner-br { bottom: 0; right: 0; font-family: var(--f-display); font-style: italic; font-size: 18px; letter-spacing: 0.02em; text-transform: none; color: var(--c-bronce); font-weight: 500; } .loader-stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 26px; } .loader-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; opacity: 0; animation: l-fade 0.8s var(--ease-out) 0.15s forwards; } .le-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--c-bronce); animation: l-pulse 1.6s ease-in-out infinite; } .loader-img { width: clamp(90px, 12vw, 130px); height: auto; opacity: 0; transform: translateY(14px) scale(0.96); animation: l-logo 0.7s var(--ease-out) 0.15s forwards; } .loader-line { width: clamp(220px, 28vw, 320px); height: 1px; background: rgba(50, 37, 28, 0.12); position: relative; overflow: hidden; } .loader-line::before, .loader-line::after { content: ''; position: absolute; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--c-bronce); opacity: 0; animation: l-fade 0.5s var(--ease-out) 0.5s forwards; } .loader-line::before { left: -2px; } .loader-line::after { right: -2px; } .loader-line span { position: absolute; inset: 0; background: var(--c-bronce); transform: scaleX(0); transform-origin: left; animation: l-progress 0.85s cubic-bezier(0.6, 0.02, 0.3, 1) 0.3s forwards; } .loader-tag { font-family: var(--f-display); font-style: italic; font-size: clamp(13px, 1.1vw, 15px); color: var(--c-chocolate); letter-spacing: -0.005em; opacity: 0; animation: l-fade 0.9s var(--ease-out) 0.65s forwards; } @keyframes l-fade { to { opacity: 1; } } @keyframes l-logo { to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes l-progress { to { transform: scaleX(1); } } @keyframes l-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.55); opacity: 0.5; } } @media (max-width: 580px) { .loader-corner { font-size: 9px; padding: 18px 16px; gap: 8px; } .lc-line { width: 18px; } .loader-corner-br { font-size: 15px; } } /* ============================================ NAVBAR ============================================ */ .navbar { position: fixed; top: 18px; left: 0; right: 0; margin: 0 auto; width: calc(100% - 32px); max-width: 1180px; z-index: 100; transition: top 0.4s var(--ease); } .nav-container { background: rgba(255, 254, 254, 0.78); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid rgba(255, 254, 254, 0.5); border-radius: 100px; padding: 10px 10px 10px 24px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; box-shadow: 0 4px 30px rgba(50, 37, 28, 0.08); transition: all 0.4s var(--ease); } .navbar.scrolled .nav-container { background: rgba(255, 254, 254, 0.96); border-color: var(--c-line); padding: 8px 10px 8px 24px; box-shadow: 0 6px 30px rgba(50, 37, 28, 0.1); } .nav-logo { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.4s var(--ease); } .nav-logo:hover { transform: scale(1.04); } .logo-img { height: 52px; width: auto; display: block; transition: height 0.35s var(--ease); } .navbar.scrolled .logo-img { height: 46px; } @media (max-width: 580px) { .logo-img { height: 42px; } } .nav-menu { display: flex; align-items: center; gap: 4px; justify-self: start; } .nav-link { position: relative; padding: 9px 12px; font-size: 13px; font-weight: 500; color: var(--c-oscuro); transition: color 0.3s var(--ease); white-space: nowrap; } .nav-link::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); } .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); } .nav-link.active { color: var(--c-bronce); } .nav-sep { color: var(--c-line-strong); font-size: 11px; font-weight: 300; user-select: none; } .nav-actions { display: flex; align-items: center; gap: 10px; justify-self: end; } .nav-cta-primary { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--c-oscuro); background: var(--c-off-white); padding: 8px 8px 8px 18px; border-radius: 100px; border: 1px solid rgba(50, 37, 28, 0.08); transition: all 0.35s var(--ease); } .nav-cta-primary .cta-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--c-oscuro); color: var(--c-off-white); display: inline-flex; align-items: center; justify-content: center; transition: transform 0.4s var(--ease); } .nav-cta-primary:hover { background: var(--c-oscuro); color: var(--c-off-white); transform: translateY(-1px); } .nav-cta-primary:hover .cta-icon { background: var(--c-bronce); transform: rotate(45deg); } /* Language switch (ES / EN) */ .lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 100px; border: 1px solid var(--c-line); background: rgba(50, 37, 28, 0.05); cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .lang-opt { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 5px 8px; font-family: var(--f-body); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; line-height: 1; color: var(--c-muted); border-radius: 100px; transition: color 0.3s var(--ease), background 0.3s var(--ease); } .lang-opt.active { background: var(--c-oscuro); color: var(--c-off-white); } .lang-switch:hover .lang-opt:not(.active) { color: var(--c-oscuro); } .nav-toggle { display: none; width: 36px; height: 36px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .nav-toggle span { width: 18px; height: 1.5px; background: var(--c-oscuro); transition: all 0.3s var(--ease); } .nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } @media (max-width: 968px) { .nav-container { grid-template-columns: auto 1fr auto; /* backdrop-filter creates a containing block for fixed descendants, which would trap the fullscreen menu. Disable it on mobile. */ backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 254, 254, 0.96); } /* Fullscreen overlay menu */ .nav-menu { position: fixed; inset: 0; z-index: 99; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 96px 24px 48px; background: var(--c-cream); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.45s var(--ease), visibility 0.45s var(--ease); } .nav-menu::before { content: '— Menú —'; position: absolute; top: 96px; left: 50%; transform: translateX(-50%); font-family: var(--f-display); font-style: italic; font-size: 13px; letter-spacing: 0.18em; color: var(--c-bronce); opacity: 0; transition: opacity 0.4s var(--ease) 0.15s; } .nav-menu::after { content: ''; position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); width: 80%; max-width: 240px; text-align: center; height: 1px; background: linear-gradient(to right, transparent, var(--c-line-strong), transparent); opacity: 0; transition: opacity 0.5s var(--ease) 0.3s; } .nav-menu.open { opacity: 1; visibility: visible; pointer-events: auto; } .nav-menu.open::before, .nav-menu.open::after { opacity: 1; } .nav-link { font-family: var(--f-display); font-size: clamp(34px, 8.5vw, 56px); font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; padding: 14px 18px; text-align: center; width: auto; color: var(--c-oscuro); opacity: 0; transform: translateY(20px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.3s var(--ease); } .nav-menu.open .nav-link { opacity: 1; transform: translateY(0); } .nav-menu.open .nav-link:nth-child(1) { transition-delay: 0.18s; } .nav-menu.open .nav-link:nth-child(3) { transition-delay: 0.26s; } .nav-menu.open .nav-link:nth-child(5) { transition-delay: 0.34s; } .nav-link.active { color: var(--c-bronce); } .nav-link::after { display: none; } .nav-sep { display: none; } .nav-toggle { display: flex; position: relative; z-index: 101; /* stays clickable above the fullscreen menu */ } /* Make room for the language switch + hamburger on phones */ .nav-cta-primary { display: none; } .lang-switch { position: relative; z-index: 101; } .lang-opt { min-width: 24px; padding: 5px 7px; font-size: 10.5px; } } /* Lock body scroll while the fullscreen menu is open */ body.nav-open { overflow: hidden; } /* ============================================ BUTTONS ============================================ */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; border-radius: 100px; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; transition: all 0.4s var(--ease); position: relative; overflow: hidden; white-space: nowrap; } .btn-primary { background: var(--c-cream); color: var(--c-oscuro); } .btn-primary::before { content: ''; position: absolute; inset: 0; background: var(--c-bronce); transform: translateY(100%); transition: transform 0.5s var(--ease-out); z-index: 0; } .btn-primary:hover::before { transform: translateY(0); } .btn-primary>* { position: relative; z-index: 1; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(50, 37, 28, 0.2); } .btn-arrow { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 254, 254, 0.15); transition: transform 0.4s var(--ease); } .btn:hover .btn-arrow { transform: translateX(4px); } .btn-block { flex: 1; justify-content: center; } .btn-whatsapp { background: #25D366; color: white; } .btn-whatsapp:hover { background: #1DA851; transform: translateY(-2px); } /* ============================================ HERO — Minimalist Contemporary ============================================ */ .hero { position: relative; min-height: 100vh; overflow: hidden; isolation: isolate; background: var(--c-oscuro); } .hero-bg { position: absolute; inset: -8% 0; z-index: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; will-change: transform; animation: heroZoom 14s ease-out forwards; } @keyframes heroZoom { 0% { transform: scale(1.12); } 100% { transform: scale(1); } } .hero-vignette { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(50, 37, 28, 0.35) 0%, transparent 22%, transparent 60%, rgba(50, 37, 28, 0.65) 100%), radial-gradient(ellipse at center, transparent 35%, rgba(50, 37, 28, 0.25) 100%); z-index: 1; } .hero-grain { position: absolute; inset: 0; z-index: 2; opacity: 0.18; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero-inner { position: relative; z-index: 3; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 130px var(--pad) 50px; text-align: center; color: var(--c-off-white); } .hero-top { margin-top: 8px; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; padding: 8px 20px; border: 1px solid rgba(255, 254, 254, 0.32); border-radius: 100px; font-size: 11px; letter-spacing: 0.18em; color: rgba(255, 254, 254, 0.92); font-weight: 500; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(255, 254, 254, 0.04); } .hero-eyebrow .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--c-bronce); box-shadow: 0 0 10px rgba(182, 128, 81, 0.6); } .hero-title { font-family: var(--f-display); font-size: clamp(60px, 11.5vw, 170px); line-height: 0.86; letter-spacing: -0.05em; color: var(--c-off-white); font-weight: 500; margin: 25px 0; text-shadow: 0 4px 40px rgba(0, 0, 0, 0.18); padding: 0 0.06em; } .ht-line { display: block; padding: 0.18em 0.06em 0.22em; margin: -0.18em -0.06em -0.22em; overflow: hidden; } .ht-line:last-child { padding-bottom: 0.32em; margin-bottom: -0.32em; font-size: 0.9em; } .ht-word { display: inline-block; transform: translateY(110%); animation: heroWordUp 1.1s var(--ease-out) forwards; padding-bottom: 0.05em; } .ht-line:nth-child(1) .ht-word { animation-delay: 0.25s; } .ht-line:nth-child(2) .ht-word { animation-delay: 0.45s; } @keyframes heroWordUp { to { transform: translateY(0); } } .ht-italic { font-style: italic; font-weight: 400; } .ht-swash { font-style: italic; font-family: var(--f-display); font-feature-settings: "swsh" 1, "salt" 1; color: var(--c-off-white); display: inline-block; transform: translateY(0.04em); } .hero-bottom { width: 100%; max-width: 640px; margin-top: auto; } .hero-sub { font-size: clamp(13px, 1vw, 15px); color: rgba(255, 254, 254, 0.9); line-height: 1.7; font-weight: 400; letter-spacing: 0.005em; } .hero-scroll { margin-top: 28px; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255, 254, 254, 0.7); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 500; } .hero-scroll-line { width: 1px; height: 36px; background: linear-gradient(to bottom, rgba(255, 254, 254, 0.6), transparent); position: relative; overflow: hidden; } .hero-scroll-line::after { content: ''; position: absolute; inset: 0; background: var(--c-off-white); animation: scrollLine 2s var(--ease) infinite; } @keyframes scrollLine { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } @media (max-width: 580px) { .hero-title { font-size: clamp(56px, 18vw, 110px); } .hero-eyebrow { font-size: 10px; padding: 6px 14px; } .hero-sub br { display: none; } } /* ============================================ STATS STRIP — Editorial Magazine ============================================ */ .stats-strip { background: var(--c-cream); padding: clamp(60px, 10vh, 110px) 0 clamp(60px, 9vh, 100px); border-bottom: 1px solid var(--c-line); position: relative; overflow: hidden; } /* Header row */ .ss-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 50px; padding-bottom: 24px; border-bottom: 1px solid var(--c-line); flex-wrap: wrap; } .ss-head-left { max-width: 540px; } .ss-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; margin-bottom: 16px; } .ss-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-bronce); box-shadow: 0 0 0 4px rgba(182,128,81,0.15); } .ss-title { font-family: var(--f-display); font-size: clamp(26px, 3vw, 40px); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; color: var(--c-oscuro); } .ss-title em { font-style: italic; color: var(--c-bronce); font-weight: 400; } .ss-badge { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 6px; } .ssb-line { width: 28px; height: 1px; background: var(--c-line-strong); } .ssb-text { font-family: var(--f-display); font-style: italic; font-size: 13px; color: var(--c-bronce); letter-spacing: 0.05em; font-weight: 500; } /* Asymmetric grid */ .ss-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 26px; align-items: stretch; } @media (max-width: 968px) { .ss-grid { grid-template-columns: 1fr; gap: 18px; } } /* Featured stat — image card */ .ss-feature { position: relative; border-radius: 28px; overflow: hidden; min-height: 360px; color: var(--c-off-white); isolation: isolate; transition: transform 0.5s var(--ease); } .ss-feature:hover { transform: translateY(-4px); } .ssf-img { position: absolute; inset: 0; z-index: 0; } .ssf-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease-out); } .ss-feature:hover .ssf-img img { transform: scale(1.08); } .ssf-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(50,37,28,0.45) 0%, rgba(50,37,28,0.78) 100%); } .ssf-corner-deco { position: absolute; top: 22px; right: 24px; color: rgba(255,254,254,0.45); z-index: 2; } .ssf-content { position: relative; z-index: 2; height: 100%; min-height: 360px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 18px 20px; padding: 28px clamp(24px, 4vw, 40px); } .ssf-idx { grid-column: 1; grid-row: 1; font-family: var(--f-display); font-style: italic; font-size: 15px; color: var(--c-bronce); align-self: start; } .ssf-meta { grid-column: 2; grid-row: 1; align-self: start; display: flex; flex-direction: column; gap: 8px; text-align: right; } .ssf-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,254,254,0.92); font-weight: 600; line-height: 1.4; } .ssf-since { font-family: var(--f-display); font-style: italic; font-size: 13px; color: rgba(255,254,254,0.6); } .ssf-number { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: flex-end; gap: 4px; line-height: 0.85; } .ssf-num { font-family: var(--f-display); font-size: clamp(96px, 14vw, 200px); font-weight: 500; letter-spacing: -0.05em; color: var(--c-off-white); line-height: 0.85; } .ssf-number em { font-family: var(--f-display); font-style: italic; font-size: clamp(52px, 8vw, 110px); color: var(--c-bronce); font-weight: 400; line-height: 0.85; transform: translateY(-0.1em); } /* Editorial list */ .ss-list { display: flex; flex-direction: column; background: var(--c-cream-2); border-radius: 28px; padding: 8px 24px; } .ssl-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 26px 6px; border-bottom: 1px solid rgba(50,37,28,0.08); transition: padding 0.4s var(--ease); } .ssl-row:last-child { border-bottom: 0; } .ssl-row:hover { padding-left: 14px; } .ssl-idx { font-family: var(--f-display); font-style: italic; font-size: 14px; color: var(--c-bronce); font-weight: 500; line-height: 1; } .ssl-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ssl-label { font-family: var(--f-display); font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; color: var(--c-oscuro); letter-spacing: -0.01em; line-height: 1.15; } .ssl-desc { font-size: 12px; color: var(--c-muted); line-height: 1.45; } .ssl-stat { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--f-display); line-height: 1; transition: transform 0.5s var(--ease); } .ssl-row:hover .ssl-stat { transform: scale(1.06); } .ssl-num { font-size: clamp(36px, 4.4vw, 56px); font-weight: 500; letter-spacing: -0.03em; color: var(--c-oscuro); line-height: 1; } .ssl-stat em { font-style: italic; font-size: clamp(22px, 2.6vw, 34px); color: var(--c-bronce); font-weight: 400; transform: translateY(-0.05em); } @media (max-width: 580px) { .ssf-content { grid-template-columns: 1fr; grid-template-rows: auto auto auto; } .ssf-meta { text-align: left; grid-column: 1; grid-row: 2; } .ssf-number { grid-row: 3; } .ssl-row { grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 8px 14px; padding: 22px 6px; } .ssl-stat { grid-column: 1 / -1; grid-row: 2; justify-self: end; } } /* ============================================ NOSOTROS — Asymmetric editorial ============================================ */ .nosotros { padding: clamp(45px, 6vh, 130px) 0 0; background: var(--c-cream); position: relative; overflow: hidden; } .nos-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 56px; padding-bottom: 22px; border-bottom: 1px solid var(--c-line); } .nos-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; } .nos-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-bronce); box-shadow: 0 0 0 4px rgba(182, 128, 81, 0.15); } .nos-counter { font-family: var(--f-display); display: inline-flex; align-items: baseline; gap: 4px; color: var(--c-muted); } .nc-cur { font-size: 32px; color: var(--c-oscuro); font-style: italic; font-weight: 500; line-height: 1; min-width: 38px; display: inline-block; transition: opacity 0.4s var(--ease); } .nc-sep, .nc-tot { font-size: 18px; font-style: italic; } .nos-grid { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; grid-template-areas: "visual tabs" "visual title" "visual features" "visual actions"; column-gap: clamp(36px, 5vw, 72px); row-gap: 28px; align-items: start; } .nos-tabs { grid-area: tabs; } .nos-title { grid-area: title; } .nos-visual { grid-area: visual; align-self: start; } .nos-features { grid-area: features; } .nos-actions { grid-area: actions; } @media (max-width: 968px) { .nos-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tabs" "title" "visual" "features" "actions"; row-gap: 25px; } .nos-title { min-height: 0; } .nos-visual { width: 100%; justify-self: stretch; margin-top: -6px; } .nos-image-wrap { width: 100%; } } /* Visual side */ .nos-visual { position: relative; } .nos-image-wrap { position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: var(--c-cream-2); } .nos-image { position: absolute; inset: 0; opacity: 0; transform: scale(1.08); transition: opacity 0.9s var(--ease), transform 1.3s var(--ease-out); } .nos-image.active { opacity: 1; transform: scale(1); } .nos-image img { width: 100%; height: 100%; object-fit: cover; } .nos-stamp { position: absolute; bottom: 18px; right: 18px; width: 100px; height: 100px; z-index: 3; } .nos-stamp-bg { position: absolute; inset: 0; border-radius: 50%; background: var(--c-oscuro); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(50, 37, 28, 0.3); } .nos-stamp-svg { position: relative; z-index: 1; animation: spin 18s linear infinite; width: 100%; height: 100%; } .nos-stamp-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; } .ns-mark { color: var(--c-bronce); font-size: 22px; line-height: 1; } .nos-img-tag { position: absolute; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(255, 254, 254, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 100px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-oscuro); font-weight: 600; z-index: 3; } .nit-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-bronce); animation: pulse-dot 2s ease-out infinite; } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(182, 128, 81, 0.6); } 50% { box-shadow: 0 0 0 6px rgba(182, 128, 81, 0); } } .nos-caption { margin-top: 18px; background: var(--c-cream-2); border-radius: 100px; padding: 0 20px; height: 56px; position: relative; overflow: hidden; display: flex; align-items: center; } .cap-line { position: absolute; inset: 0 20px; display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); font-size: 12.5px; line-height: 1.4; color: var(--c-oscuro); } .cap-line.active { opacity: 1; transform: translateY(0); } .cap-line svg { color: var(--c-bronce); flex-shrink: 0; } /* Content side */ .nos-tabs { display: flex; gap: 8px; flex-wrap: wrap; } .ntab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 100px; border: 1px solid var(--c-line-strong); background: transparent; color: var(--c-oscuro); font-size: 13px; font-weight: 500; transition: color 0.35s var(--ease), border-color 0.35s var(--ease); position: relative; overflow: hidden; } .ntab::before { content: ''; position: absolute; inset: 0; background: var(--c-oscuro); transform: translateY(100%); transition: transform 0.4s var(--ease-out); z-index: 0; border-radius: 100px; } .ntab>* { position: relative; z-index: 1; transition: color 0.35s var(--ease); } .ntab-num { font-family: var(--f-display); font-style: italic; font-size: 12px; color: var(--c-bronce); font-weight: 500; line-height: 1; } .ntab:hover::before, .ntab.active::before { transform: translateY(0); } .ntab:hover, .ntab.active { color: var(--c-off-white); border-color: var(--c-oscuro); } .ntab:hover .ntab-num, .ntab.active .ntab-num { color: var(--c-bronce); } .nos-title { font-family: var(--f-display); font-size: clamp(28px, 3.6vw, 48px); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; color: var(--c-oscuro); position: relative; min-height: 120px; } .tab-content { display: block; position: absolute; inset: 0; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); } .tab-content.active { position: relative; opacity: 1; transform: translateY(0); pointer-events: auto; } .nos-title em { font-style: italic; color: var(--c-bronce); font-weight: 400; } .nos-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); } @media (max-width: 580px) { .nos-features { grid-template-columns: 1fr; gap: 16px; } } .nos-feat { display: flex; align-items: flex-start; gap: 12px; } .nf-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: var(--c-cream-2); color: var(--c-chocolate); display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s var(--ease); } .nos-feat:hover .nf-icon { background: var(--c-oscuro); color: var(--c-bronce); transform: rotate(-4deg); } .nf-text { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; } .nf-title { font-family: var(--f-display); font-size: 17px; font-weight: 600; color: var(--c-oscuro); line-height: 1.1; letter-spacing: -0.01em; } .nf-desc { font-size: 12px; color: var(--c-muted); line-height: 1.4; } .nos-actions { display: flex; gap: 36px; flex-wrap: wrap; } .nos-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--c-oscuro); padding: 6px 0; border-bottom: 1px solid var(--c-line-strong); transition: all 0.35s var(--ease); } .nos-link svg { transition: transform 0.35s var(--ease); } .nos-link:hover { color: var(--c-bronce); border-color: var(--c-bronce); gap: 14px; } .nos-link:hover svg { transform: translate(3px, -3px); } /* Marquee */ .nos-marquee { margin-top: clamp(60px, 9vh, 100px); padding: 26px 0; overflow: hidden; background: var(--c-oscuro); color: var(--c-cream); position: relative; } .nos-marquee::before, .nos-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .nos-marquee::before { left: 0; background: linear-gradient(to right, var(--c-oscuro), transparent); } .nos-marquee::after { right: 0; background: linear-gradient(to left, var(--c-oscuro), transparent); } .marquee-track { display: inline-flex; align-items: center; gap: 36px; animation: marquee 50s linear infinite; white-space: nowrap; font-family: var(--f-display); font-size: clamp(28px, 4vw, 48px); font-weight: 500; font-style: italic; will-change: transform; } .mq-item { padding: 0 4px; } .mq-sep { color: var(--c-bronce); font-size: 0.55em; font-style: normal; transform: translateY(-0.1em); } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .nos-marquee:hover .marquee-track { animation-play-state: paused; } /* ============================================ EXPERIENCES GALLERY — Dynamic staggered ============================================ */ .experiences-gallery { padding: 80px 0 100px; background: var(--c-cream); overflow: hidden; } /* Header row (replaces the old feature side card) */ .gallery-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin-bottom: 44px; } .gh-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; margin-bottom: 16px; } .gh-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-bronce); box-shadow: 0 0 0 4px rgba(182, 128, 81, 0.15); } .gh-title { font-family: var(--f-display); font-size: clamp(32px, 4.4vw, 60px); font-weight: 500; line-height: 1; letter-spacing: -0.025em; color: var(--c-oscuro); } .gh-title em { font-style: italic; color: var(--c-bronce); font-weight: 400; } .gh-tools { display: inline-flex; align-items: center; gap: 14px; padding-bottom: 4px; } .gh-all { display: inline-flex; align-items: center; gap: 10px; padding: 9px 9px 9px 18px; border-radius: 100px; border: 1px solid var(--c-line-strong); font-size: 13px; font-weight: 500; color: var(--c-oscuro); transition: all 0.35s var(--ease); } .gh-all-icon { width: 26px; height: 26px; border-radius: 50%; background: var(--c-oscuro); color: var(--c-off-white); display: inline-flex; align-items: center; justify-content: center; transition: transform 0.4s var(--ease); } .gh-all:hover { background: var(--c-oscuro); color: var(--c-off-white); border-color: var(--c-oscuro); } .gh-all:hover .gh-all-icon { background: var(--c-bronce); transform: rotate(45deg); } .gh-controls { display: inline-flex; gap: 6px; } .gf-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-line-strong); background: transparent; color: var(--c-oscuro); display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s var(--ease); } .gf-arrow:hover { background: var(--c-oscuro); color: var(--c-off-white); border-color: var(--c-oscuro); transform: translateY(-2px); } @media (max-width: 580px) { .gallery-head { margin-bottom: 32px; } .gh-all { display: none; } } /* Scrollable cards — full-bleed continuous carousel */ .gallery-scroller { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow: hidden; padding: 6px 0; } .gallery-track { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; touch-action: pan-x; overscroll-behavior-x: contain; overscroll-behavior-y: auto; } .gallery-track::-webkit-scrollbar { display: none; } .gcard { flex: 0 0 clamp(200px, 21vw, 290px); display: flex; flex-direction: column; gap: 12px; transition: transform 0.5s var(--ease); } .gcard-offset { margin-top: 56px; } @media (max-width: 768px) { .gcard { flex: 0 0 clamp(180px, 58vw, 240px); } .gcard-offset { margin-top: 40px; } } @media (max-width: 580px) { .gcard { flex: 0 0 78%; } .gcard-offset { margin-top: 40px; } } .gcard-image { border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 5.1; position: relative; background: var(--c-cream-2); } .gcard-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); } .gcard:hover .gcard-image img { transform: scale(1.08); } .gcard-tag { position: absolute; top: 14px; left: 14px; padding: 6px 12px; border-radius: 100px; background: rgba(255, 254, 254, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-oscuro); font-weight: 500; transition: all 0.4s var(--ease); } .gcard:hover .gcard-tag { background: var(--c-oscuro); color: var(--c-off-white); } .gcard-meta { display: flex; align-items: baseline; gap: 10px; padding: 0 4px; } .gcard-meta-top { order: -1; margin-bottom: 0; } .gcard-num { font-family: var(--f-display); font-size: 18px; color: var(--c-bronce); font-weight: 500; font-style: italic; line-height: 1; } .gcard-name { font-size: 15px; font-weight: 600; color: var(--c-oscuro); letter-spacing: -0.01em; line-height: 1.2; } /* ============================================ BANNER PARALAX ============================================ */ .banner-parallax { position: relative; height: clamp(380px, 60vh, 560px); margin: 60px var(--pad); border-radius: 36px; overflow: hidden; isolation: isolate; } .banner-image { position: absolute; inset: -15% 0; z-index: 0; } .banner-image img { width: 100%; height: 100%; object-fit: cover; will-change: transform; } .banner-parallax::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(50, 37, 28, 0.25) 0%, rgba(50, 37, 28, 0.55) 100%); z-index: 1; } .banner-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 44px clamp(24px, 4vw, 56px); color: var(--c-off-white); } .banner-text h2 { font-family: var(--f-display); font-size: clamp(28px, 3.6vw, 52px); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; } .banner-meta { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; } .banner-location { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; letter-spacing: 0.05em; } .banner-counter { display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: var(--c-bronce); color: var(--c-off-white); width: 56px; height: 56px; border-radius: 50%; font-family: var(--f-display); font-size: 13px; font-weight: 600; flex-direction: row; } .counter-current, .counter-total { font-size: 12px; } .counter-sep { opacity: 0.5; } /* ============================================ EXPERIENCES DETAIL ============================================ */ .experiences { padding: clamp(80px, 12vh, 140px) 0; background: var(--c-cream); } .experiences-header { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: end; margin-bottom: 60px; } @media (max-width: 968px) { .experiences-header { grid-template-columns: 1fr; gap: 24px; } } .experiences-title { font-family: var(--f-display); font-size: clamp(32px, 4vw, 56px); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; color: var(--c-oscuro); } .experiences-desc { font-size: 15px; line-height: 1.7; color: var(--c-muted); max-width: 460px; } .experiences-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 968px) { .experiences-grid { grid-template-columns: 1fr; } } .exp-card { display: flex; flex-direction: column; gap: 18px; } .exp-image { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; border-radius: 20px; } .exp-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); } .exp-card:hover .exp-image img { transform: scale(1.05); } .exp-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(50, 37, 28, 0.7), transparent 50%); display: flex; align-items: flex-end; justify-content: flex-end; padding: 18px; opacity: 0; transition: opacity 0.4s var(--ease); } .exp-card:hover .exp-overlay { opacity: 1; } .exp-link { display: inline-flex; align-items: center; gap: 8px; background: var(--c-off-white); color: var(--c-oscuro); padding: 10px 16px; border-radius: 100px; font-size: 13px; font-weight: 500; transition: gap 0.3s; } .exp-link:hover { gap: 12px; } .exp-name { font-family: var(--f-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--c-oscuro); } .exp-text { font-size: 14px; line-height: 1.6; color: var(--c-muted); } /* ============================================ TRUST SEALS — Sellos de garantía ============================================ */ .trust-seals { padding: clamp(56px, 8vh, 96px) 0; background: var(--c-cream-2); position: relative; } .ts-row { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 4vw, 64px); } .ts-stamp { position: relative; width: 152px; height: 152px; border: 1.5px solid var(--c-arcilla); border-radius: 50%; background: var(--c-off-white); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); box-shadow: 0 2px 16px rgba(50, 37, 28, 0.06); } .ts-stamp-l { transform: rotate(-3.5deg); } .ts-stamp-r { transform: rotate(3.5deg); } .ts-stamp-l:hover, .ts-stamp-r:hover { transform: rotate(0deg) scale(1.04); box-shadow: 0 10px 28px rgba(50, 37, 28, 0.12); } .ts-ring { position: absolute; inset: 7px; border: 1px dashed var(--c-arcilla); border-radius: 50%; opacity: 0.45; pointer-events: none; } .ts-icon { width: 28px; height: 28px; color: var(--c-arcilla); margin-bottom: 8px; } .ts-line1 { font-family: var(--f-body); font-size: 10px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-arcilla); line-height: 1; } .ts-line2 { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 14px; color: var(--c-chocolate); line-height: 1.15; margin-top: 5px; max-width: 110px; text-align: center; letter-spacing: -0.005em; } .ts-divider { display: flex; align-items: center; gap: 10px; color: var(--c-arcilla); flex-shrink: 0; opacity: 0.75; } .ts-dline { width: 26px; height: 1px; background: var(--c-arcilla); } .ts-star { font-size: 12px; line-height: 1; } @media (max-width: 580px) { .trust-seals { padding: 46px 0; } .ts-row { gap: 12px; } .ts-stamp { width: 124px; height: 124px; } .ts-ring { inset: 6px; } .ts-icon { width: 22px; height: 22px; margin-bottom: 6px; } .ts-line1 { font-size: 9px; letter-spacing: 0.2em; } .ts-line2 { font-size: 12px; max-width: 92px; } .ts-dline { width: 14px; } } /* ============================================ INTERLUDIO — Pausa contemplativa ============================================ */ .interlude { position: relative; padding: clamp(100px, 18vh, 200px) 0; background: var(--c-cream); overflow: hidden; text-align: center; } /* Floating marks in corners */ .il-mark { position: absolute; color: var(--c-bronce); opacity: 0.35; font-size: 14px; line-height: 1; animation: floatMark 6s ease-in-out infinite; } .il-mark-tl { top: 12%; left: 12%; } .il-mark-br { bottom: 14%; right: 12%; animation-delay: 3s; } @keyframes floatMark { 0%, 100% { transform: translateY(0) rotate(0); opacity: 0.35; } 50% { transform: translateY(-10px) rotate(45deg); opacity: 0.6; } } /* Header row */ .il-row { display: flex; justify-content: space-between; align-items: center; max-width: 720px; margin: 0 auto 56px; padding-bottom: 18px; border-bottom: 1px solid var(--c-line); } .il-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; } .il-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--c-bronce); animation: pulse-soft 2.4s ease-in-out infinite; } @keyframes pulse-soft { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } .il-chapter { font-family: var(--f-display); font-style: italic; font-size: 16px; color: var(--c-bronce); letter-spacing: 0.1em; } /* The quote */ .il-quote { font-family: var(--f-display); font-size: clamp(34px, 5.4vw, 80px); font-weight: 400; line-height: 1.08; letter-spacing: -0.025em; color: var(--c-oscuro); max-width: 980px; margin: 0 auto; font-style: italic; } .ilq-line { display: block; overflow: hidden; padding-bottom: 0.08em; } .ilq-w { display: inline-block; transform: translateY(110%); opacity: 0; animation: ilqRise 1.4s var(--ease-out) forwards; } .ilq-line:nth-child(1) .ilq-w { animation-delay: 0.4s; } .ilq-line:nth-child(2) .ilq-w { animation-delay: 0.65s; } .ilq-line:nth-child(3) .ilq-w { animation-delay: 0.9s; } @keyframes ilqRise { to { transform: translateY(0); opacity: 1; } } .il-quote em { font-style: italic; color: var(--c-bronce); font-weight: 500; position: relative; display: inline-block; } .il-quote em::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.05em; height: 0.06em; background: var(--c-bronce); opacity: 0.35; transform: scaleX(0); transform-origin: left; animation: ilqUnder 1.4s var(--ease-out) 1.4s forwards; } @keyframes ilqUnder { to { transform: scaleX(1); } } /* Wave element */ .il-wave { display: flex; justify-content: center; margin-top: 64px; color: var(--c-bronce); opacity: 0.55; } .il-wave svg { animation: waveBreathe 4s ease-in-out infinite; } @keyframes waveBreathe { 0%, 100% { transform: translateY(0) scaleX(1); opacity: 0.45; } 50% { transform: translateY(-3px) scaleX(1.04); opacity: 0.8; } } @media (max-width: 580px) { .il-row { padding-bottom: 14px; margin-bottom: 40px; } .il-mark-tl { top: 6%; left: 6%; } .il-mark-br { bottom: 8%; right: 6%; } } /* Shared spin keyframe (used by stamps in other sections) */ @keyframes spin { to { transform: rotate(360deg); } } /* ============================================ CTA CONTACT ============================================ */ .cta-contact { position: relative; padding: clamp(80px, 14vh, 140px) 0; overflow: hidden; isolation: isolate; } .cta-bg { position: absolute; inset: -10% 0; z-index: 0; } .cta-bg img { width: 100%; height: 100%; object-fit: cover; will-change: transform; } .cta-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(50, 37, 28, 0.55), rgba(50, 37, 28, 0.75)); z-index: 1; } .cta-container { position: relative; z-index: 2; } .cta-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; color: var(--c-off-white); } @media (max-width: 968px) { .cta-grid { grid-template-columns: 1fr; gap: 36px; } } .cta-left h2 { font-family: var(--f-display); font-size: clamp(36px, 5vw, 64px); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 20px; } .cta-left p { font-size: 15px; line-height: 1.65; color: rgba(255, 254, 254, 0.85); max-width: 380px; } .cta-form { background: rgba(255, 254, 254, 0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 254, 254, 0.18); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 16px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 580px) { .form-row { grid-template-columns: 1fr; } } .form-field { display: flex; flex-direction: column; gap: 6px; } .form-field label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 254, 254, 0.7); font-weight: 500; } .form-field input, .form-field textarea { background: transparent; border: 0; border-bottom: 1px solid rgba(255, 254, 254, 0.25); padding: 10px 0; color: var(--c-off-white); font-size: 14px; font-family: var(--f-body); outline: 0; transition: border-color 0.3s var(--ease); resize: vertical; } .form-field input:focus, .form-field textarea:focus { border-color: var(--c-bronce); } .form-field input::placeholder, .form-field textarea::placeholder { color: rgba(255, 254, 254, 0.4); } .form-actions { display: flex; align-items: center; gap: 14px; margin-top: 6px; } @media (max-width: 580px) { .form-actions { flex-direction: column; align-items: stretch; } } .form-or { font-size: 12px; color: rgba(255, 254, 254, 0.5); text-align: center; } /* ============================================ FOOTER — Simple & Conventional ============================================ */ .footer { background: var(--c-cream); border-top: 1px solid var(--c-line); padding: 56px 0 28px; color: var(--c-oscuro); } .footer-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 28px; padding-bottom: 36px; border-bottom: 1px solid var(--c-line); } .footer-logo { display: inline-flex; align-items: center; transition: opacity 0.3s var(--ease); } .footer-logo:hover { opacity: 0.7; } .footer-logo-img { height: 56px; width: auto; display: block; } .footer-nav { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .footer-nav a { font-size: 13px; font-weight: 500; color: var(--c-oscuro); transition: color 0.3s var(--ease); } .footer-nav a:hover { color: var(--c-bronce); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding-top: 24px; } .footer-copy { font-size: 12px; color: var(--c-muted); letter-spacing: 0.02em; } .footer-socials { display: inline-flex; gap: 10px; } .footer-socials a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--c-line-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--c-oscuro); transition: all 0.3s var(--ease); } .footer-socials a:hover { background: var(--c-oscuro); color: var(--c-off-white); border-color: var(--c-oscuro); transform: translateY(-2px); } .footer-legal { display: inline-flex; gap: 20px; } .footer-legal a { font-size: 12px; color: var(--c-muted); transition: color 0.3s var(--ease); } .footer-legal a:hover { color: var(--c-oscuro); } @media (max-width: 580px) { .footer-top { gap: 20px; } .footer-nav { gap: 18px; } .footer-bottom { justify-content: center; text-align: center; } .footer-legal { order: -1; } } /* ============================================ FLOATING ELEMENTS ============================================ */ .float-wa { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: white; display: flex; align-items: center; justify-content: center; z-index: 80; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4); transition: transform 0.4s var(--ease); } .float-wa:hover { transform: scale(1.08); } .wa-pulse { position: absolute; inset: 0; border-radius: 50%; background: #25D366; animation: pulse 2s ease-out infinite; z-index: -1; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.8); opacity: 0; } } .to-top { position: fixed; bottom: 92px; right: 28px; width: 44px; height: 44px; border-radius: 50%; background: var(--c-oscuro); color: var(--c-off-white); display: flex; align-items: center; justify-content: center; z-index: 80; opacity: 0; transform: translateY(20px); pointer-events: none; transition: all 0.4s var(--ease); } .to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .to-top:hover { background: var(--c-bronce); } /* ============================================ REVEAL ANIMATION ============================================ */ [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } /* ============================================ RESPONSIVE TWEAKS ============================================ */ @media (max-width: 580px) { .hero { padding-top: 110px; } .nav-cta-secondary { display: none; } .float-wa { width: 50px; height: 50px; bottom: 16px; right: 16px; } .to-top { bottom: 76px; right: 18px; } .banner-parallax { margin: 32px 16px; border-radius: 24px; } } /* ============================================ INNER PAGES — Common ============================================ */ .page-inner main { padding-top: 0; } .page-hero { position: relative; padding: 140px 0 80px; background: var(--c-cream); overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 10% 20%, rgba(182,128,81,0.08) 1px, transparent 1px), radial-gradient(circle at 80% 10%, rgba(75,54,33,0.06) 1px, transparent 1px); background-size: 60px 60px, 80px 80px; opacity: 0.5; pointer-events: none; } /* Generic breadcrumb */ .ah-breadcrumb, .exp-bc, .ct-bc { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); font-weight: 500; margin-bottom: 40px; position: relative; z-index: 1; } .ah-breadcrumb a, .exp-bc a, .ct-bc a { color: var(--c-muted); transition: color 0.3s var(--ease); } .ah-breadcrumb a:hover, .exp-bc a:hover, .ct-bc a:hover { color: var(--c-bronce); } .ah-bc-sep, .exp-bc > span:not(:last-child):not(a), .ct-bc > span:not(:last-child):not(a) { color: var(--c-line-strong); } .ah-breadcrumb > span:last-child, .exp-bc > span:last-child, .ct-bc > span:last-child { color: var(--c-oscuro); } /* Generic CTA section */ .page-cta { padding: clamp(40px, 6vh, 80px) 0 clamp(60px, 9vh, 110px); } .pc-wrap { position: relative; border-radius: 36px; overflow: hidden; isolation: isolate; min-height: clamp(320px, 50vh, 460px); display: flex; align-items: center; } .pc-bg { position: absolute; inset: -10% 0; z-index: 0; } .pc-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); } .pc-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(50,37,28,0.7), rgba(50,37,28,0.4)); z-index: 1; } .pc-content { position: relative; z-index: 2; padding: clamp(40px, 6vw, 70px); color: var(--c-off-white); max-width: 760px; } .pc-eyebrow { display: inline-block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,254,254,0.85); font-weight: 500; margin-bottom: 18px; padding: 6px 14px; border: 1px solid rgba(255,254,254,0.3); border-radius: 100px; } .pc-title { font-family: var(--f-display); font-size: clamp(32px, 4.5vw, 56px); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 28px; } .pc-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .pc-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--c-off-white); border-bottom: 1px solid rgba(255,254,254,0.4); padding: 6px 0; transition: all 0.3s var(--ease); } .pc-link:hover { gap: 14px; border-color: var(--c-bronce); color: var(--c-bronce); } /* ============================================ NOSOTROS PAGE ============================================ */ /* Hero editorial */ .about-hero { padding-bottom: 100px; } .ah-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 80px); align-items: center; position: relative; z-index: 1; } @media (max-width: 968px) { .ah-grid { grid-template-columns: 1fr; gap: 40px; } } .ah-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; margin-bottom: 24px; } .ah-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-bronce); box-shadow: 0 0 0 4px rgba(182,128,81,0.15); } .ah-title { font-family: var(--f-display); font-size: clamp(48px, 7vw, 96px); font-weight: 500; line-height: 0.95; letter-spacing: -0.03em; color: var(--c-oscuro); margin-bottom: 28px; } .ah-title em { font-style: italic; color: var(--c-bronce); font-weight: 400; } .ah-sub { font-size: clamp(14px, 1.1vw, 16px); line-height: 1.7; color: var(--c-muted); max-width: 480px; } .ah-visual { position: relative; aspect-ratio: 4 / 4.4; } .ah-img { position: absolute; border-radius: 24px; overflow: hidden; } .ah-img img { width: 100%; height: 100%; object-fit: cover; } .ah-img-main { inset: 0 20% 25% 0; } .ah-img-small { width: 50%; aspect-ratio: 1 / 1.05; bottom: 0; right: 0; border: 6px solid var(--c-cream); } .ah-stamp { position: absolute; top: 16px; right: 16px; width: 96px; height: 96px; z-index: 3; } .ah-stamp-bg { position: absolute; inset: 0; border-radius: 50%; background: var(--c-oscuro); box-shadow: 0 8px 24px rgba(50,37,28,0.3); } .ah-stamp-svg { position: relative; z-index: 1; width: 100%; height: 100%; animation: spin 20s linear infinite; } .ah-stamp-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--c-bronce); font-size: 18px; z-index: 2; } /* Story */ .about-story { padding: clamp(60px, 10vh, 110px) 0; background: var(--c-cream-2); } .as-row { display: grid; grid-template-columns: 140px 1fr; gap: clamp(20px, 4vw, 60px); align-items: start; max-width: 980px; margin: 0 auto 60px; } @media (max-width: 768px) { .as-row { grid-template-columns: 1fr; gap: 16px; } } .as-meta { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--c-line-strong); } .as-num { font-family: var(--f-display); font-size: 24px; font-style: italic; color: var(--c-bronce); line-height: 1; } .as-label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; } .as-content { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.75; color: var(--c-oscuro); } .as-content p { margin-bottom: 18px; } .as-lede { font-family: var(--f-display); font-size: clamp(20px, 1.6vw, 24px); line-height: 1.45; font-weight: 500; color: var(--c-oscuro); } .as-drop { font-family: var(--f-display); font-size: 4em; line-height: 0.85; float: left; padding: 0.1em 0.18em 0 0; color: var(--c-bronce); font-style: italic; font-weight: 600; } .as-quote { max-width: 760px; margin: 60px auto 0; position: relative; padding: 36px 20px 36px 60px; text-align: left; } .as-quote-mark { position: absolute; top: 12px; left: 8px; font-family: var(--f-display); font-size: 100px; line-height: 0.7; color: var(--c-bronce); opacity: 0.4; font-style: italic; } .as-quote blockquote { font-family: var(--f-display); font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--c-oscuro); font-style: italic; } .as-quote blockquote em { color: var(--c-bronce); } .as-quote figcaption { margin-top: 18px; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-muted); font-weight: 500; } /* Values / Filosofía */ .about-values { padding: clamp(60px, 10vh, 110px) 0; } .av-head { margin-bottom: 56px; max-width: 780px; } .av-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; margin-bottom: 18px; } .av-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-bronce); box-shadow: 0 0 0 4px rgba(182,128,81,0.15); } .av-title { font-family: var(--f-display); font-size: clamp(32px, 4vw, 52px); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; color: var(--c-oscuro); } .av-title em { font-style: italic; color: var(--c-bronce); font-weight: 400; } .av-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 968px) { .av-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 580px) { .av-grid { grid-template-columns: 1fr; } } .av-card { padding: 36px 28px 32px; background: var(--c-cream-2); border-radius: 24px; transition: all 0.4s var(--ease); position: relative; overflow: hidden; cursor: default; } .av-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(50,37,28,0.04)); pointer-events: none; } .av-card:hover { transform: translateY(-6px); background: var(--c-oscuro); color: var(--c-off-white); } .av-num { position: relative; width: 56px; height: 56px; margin-bottom: 38px; display: flex; align-items: center; justify-content: center; } .av-num span { position: relative; z-index: 1; font-family: var(--f-display); font-size: 18px; font-style: italic; color: var(--c-bronce); } .av-num svg { position: absolute; inset: 0; color: var(--c-oscuro); transition: color 0.4s var(--ease), transform 0.6s var(--ease); } .av-card:hover .av-num svg { color: var(--c-bronce); transform: rotate(90deg); } .av-icon { color: var(--c-chocolate); margin-bottom: 20px; transition: color 0.4s var(--ease); } .av-card:hover .av-icon { color: var(--c-bronce); } .av-name { font-family: var(--f-display); font-size: clamp(20px, 1.6vw, 24px); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; color: inherit; margin-bottom: 14px; } .av-desc { font-size: 13px; line-height: 1.55; color: var(--c-muted); transition: color 0.4s var(--ease); } .av-card:hover .av-desc { color: rgba(255,254,254,0.75); } /* Timeline */ .about-timeline { padding: clamp(60px, 10vh, 110px) 0; background: var(--c-cream-2); overflow: hidden; } .at-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 50px; flex-wrap: wrap; gap: 24px; } .at-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; margin-bottom: 18px; } .at-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-bronce); box-shadow: 0 0 0 4px rgba(182,128,81,0.15); } .at-title { font-family: var(--f-display); font-size: clamp(32px, 4vw, 52px); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; color: var(--c-oscuro); } .at-title em { font-style: italic; color: var(--c-bronce); font-weight: 400; } .at-controls { display: flex; gap: 8px; } .at-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--c-line-strong); background: transparent; color: var(--c-oscuro); display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s var(--ease); } .at-btn:hover { background: var(--c-oscuro); color: var(--c-off-white); border-color: var(--c-oscuro); } .at-track-wrap { position: relative; padding: 0 0 30px; } .at-line { position: absolute; top: 100px; left: 0; right: 0; height: 1px; background: var(--c-line-strong); z-index: 0; } .at-track { display: flex; gap: 24px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--pad); scroll-behavior: smooth; touch-action: pan-x; position: relative; z-index: 1; } .at-track::-webkit-scrollbar { display: none; } .at-item { flex: 0 0 320px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; } @media (max-width: 580px) { .at-item { flex: 0 0 80%; } } .at-marker { width: 20px; height: 20px; border-radius: 50%; background: var(--c-cream-2); border: 2px solid var(--c-line-strong); margin-bottom: 16px; margin-top: 90px; position: relative; display: flex; align-items: center; justify-content: center; z-index: 2; } .at-marker span { width: 8px; height: 8px; border-radius: 50%; background: var(--c-line-strong); transition: background 0.4s; } .at-marker.active { border-color: var(--c-bronce); background: var(--c-oscuro); } .at-marker.active span { background: var(--c-bronce); box-shadow: 0 0 0 0 rgba(182,128,81,0.6); animation: pulse-marker 2s ease-out infinite; } @keyframes pulse-marker { 0%, 100% { box-shadow: 0 0 0 0 rgba(182,128,81,0.5); } 50% { box-shadow: 0 0 0 8px rgba(182,128,81,0); } } .at-year { font-family: var(--f-display); font-size: clamp(28px, 3vw, 36px); font-style: italic; color: var(--c-bronce); font-weight: 500; margin-bottom: 20px; } .at-card { background: var(--c-cream); border-radius: 20px; padding: 18px; width: 100%; transition: transform 0.4s var(--ease); } .at-item:hover .at-card { transform: translateY(-4px); } .at-img { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 14px; } .at-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); } .at-item:hover .at-img img { transform: scale(1.05); } .at-h { font-family: var(--f-display); font-size: 18px; font-weight: 600; color: var(--c-oscuro); margin-bottom: 6px; letter-spacing: -0.01em; } .at-p { font-size: 13px; line-height: 1.55; color: var(--c-muted); } /* Place / Hotspots */ .about-place { padding: clamp(60px, 10vh, 110px) 0; } .ap-head { max-width: 680px; margin-bottom: 50px; } .ap-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; margin-bottom: 18px; } .ap-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-bronce); box-shadow: 0 0 0 4px rgba(182,128,81,0.15); } .ap-title { font-family: var(--f-display); font-size: clamp(28px, 3.6vw, 48px); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; color: var(--c-oscuro); } .ap-title em { font-style: italic; color: var(--c-bronce); font-weight: 400; } .ap-frame { position: relative; border-radius: 32px; overflow: hidden; aspect-ratio: 16 / 9; } .ap-frame > img { width: 100%; height: 100%; object-fit: cover; } .ap-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(50,37,28,0.15), transparent 50%); pointer-events: none; } .ap-hotspot { position: absolute; transform: translate(-50%, -50%); background: none; border: 0; z-index: 2; cursor: pointer; } .hs-dot { position: relative; display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--c-off-white); box-shadow: 0 0 0 0 rgba(255,254,254,0.8); animation: pulse-hs 2.2s ease-out infinite; } @keyframes pulse-hs { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,254,254,0.6); } 50% { box-shadow: 0 0 0 12px rgba(255,254,254,0); } } .hs-dot::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--c-bronce); } .hs-num { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); background: var(--c-oscuro); color: var(--c-off-white); padding: 3px 8px; border-radius: 100px; font-family: var(--f-display); font-style: italic; font-size: 11px; opacity: 0; transition: opacity 0.3s; white-space: nowrap; } .ap-hotspot:hover .hs-num { opacity: 1; } .ap-tooltip { position: absolute; left: 20px; bottom: 20px; z-index: 3; background: rgba(50,37,28,0.92); backdrop-filter: blur(10px); color: var(--c-off-white); padding: 14px 20px; border-radius: 100px; font-size: 13px; max-width: 360px; transition: opacity 0.3s, transform 0.4s var(--ease); } /* About stats */ .about-stats { padding: 50px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); } .ast-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 24px; } @media (max-width: 768px) { .ast-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; } .ast-divider { display: none; } } .ast-item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; } .ast-num { font-family: var(--f-display); font-size: clamp(32px, 4vw, 56px); font-weight: 500; letter-spacing: -0.03em; color: var(--c-oscuro); display: inline-block; line-height: 1; } .ast-sym { display: inline-block; font-family: var(--f-display); font-size: clamp(22px, 2.6vw, 36px); color: var(--c-bronce); margin-left: -4px; } .ast-item .ast-num + .ast-sym { display: inline-block; } .ast-item { flex-direction: column; } .ast-lbl { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-muted); font-weight: 500; margin-top: 8px; } .ast-divider { width: 1px; height: 50px; background: var(--c-line); } /* ============================================ EXPERIENCIAS PAGE ============================================ */ .exp-hero { padding-bottom: 70px; } .exp-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; margin-bottom: 22px; } .exp-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-bronce); box-shadow: 0 0 0 4px rgba(182,128,81,0.15); } .exp-hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; position: relative; z-index: 1; } @media (max-width: 968px) { .exp-hero-inner { grid-template-columns: 1fr; } } .exp-hero-title { font-family: var(--f-display); font-size: clamp(48px, 7vw, 96px); font-weight: 500; line-height: 0.95; letter-spacing: -0.03em; color: var(--c-oscuro); margin-bottom: 24px; } .exp-hero-title em { font-style: italic; color: var(--c-bronce); font-weight: 400; } .ehl-line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.08em; } .ehl-word { display: inline-block; transform: translateY(110%); animation: heroWordUp 1s var(--ease-out) forwards; } .ehl-line:nth-child(2) .ehl-word { animation-delay: 0.2s; } .exp-hero-sub { font-size: clamp(14px, 1.1vw, 16px); line-height: 1.7; color: var(--c-muted); max-width: 460px; } .exp-hero-decor { position: relative; aspect-ratio: 1 / 1; min-height: 355px; } .ehd-img { position: absolute; border-radius: 22px; overflow: hidden; box-shadow: 0 12px 30px rgba(50,37,28,0.12); } .ehd-img img { width: 100%; height: 100%; object-fit: cover; } .ehd-1 { inset: 0 30% 35% 0; transform: rotate(-3deg); } .ehd-2 { width: 50%; aspect-ratio: 4/5; bottom: 0; left: 18%; transform: rotate(2deg); z-index: 2; } .ehd-3 { width: 45%; aspect-ratio: 1/1; top: 15%; right: 0; transform: rotate(5deg); } /* Filter bar */ .exp-list { padding: 60px 0 100px; } .ef-bar { display: flex; align-items: center; gap: 18px; padding: 16px 22px; background: var(--c-cream-2); border-radius: 100px; margin-bottom: 40px; overflow-x: auto; scrollbar-width: none; } .ef-bar::-webkit-scrollbar { display: none; } .ef-label { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; flex-shrink: 0; } .ef-chips { display: inline-flex; gap: 6px; } .ef-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 100px; background: transparent; color: var(--c-oscuro); font-size: 13px; font-weight: 500; transition: all 0.3s var(--ease); white-space: nowrap; } .ef-chip:hover { background: rgba(50,37,28,0.06); } .ef-chip.active { background: var(--c-oscuro); color: var(--c-off-white); } .ef-count { font-family: var(--f-display); font-style: italic; font-size: 11px; color: var(--c-bronce); opacity: 0.9; } .ef-chip.active .ef-count { color: var(--c-bronce); } .ef-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } @media (max-width: 768px) { .ef-grid { grid-template-columns: 1fr; } } .ef-card { background: var(--c-cream-2); border-radius: 28px; overflow: hidden; padding: 22px; transition: all 0.5s var(--ease); display: flex; flex-direction: column; } .ef-card.hidden { display: none; } .ef-card:hover { background: var(--c-off-white); box-shadow: 0 18px 40px rgba(50,37,28,0.1); transform: translateY(-4px); } .ef-card-meta { display: flex; align-items: center; gap: 14px; padding: 0 4px 16px; } .efc-num { font-family: var(--f-display); font-size: 14px; font-style: italic; color: var(--c-bronce); font-weight: 500; } .efc-tag { font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-oscuro); font-weight: 600; padding: 3px 10px; border: 1px solid var(--c-line-strong); border-radius: 100px; } .efc-time { font-size: 12px; color: var(--c-muted); margin-left: auto; } .ef-card-img { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 22px; } .ef-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); } .ef-card:hover .ef-card-img img { transform: scale(1.05); } .efc-price { position: absolute; bottom: 14px; left: 14px; background: rgba(255,254,254,0.94); backdrop-filter: blur(10px); padding: 8px 14px; border-radius: 100px; font-size: 12px; color: var(--c-oscuro); } .efc-price strong { font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--c-oscuro); } .ef-card-body { padding: 0 4px; flex: 1; display: flex; flex-direction: column; } .efc-h { font-family: var(--f-display); font-size: clamp(22px, 2vw, 28px); font-weight: 600; color: var(--c-oscuro); letter-spacing: -0.01em; margin-bottom: 10px; } .efc-p { font-size: 13.5px; line-height: 1.6; color: var(--c-muted); margin-bottom: 16px; } .efc-list { list-style: none; margin-bottom: 22px; } .efc-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--c-oscuro); padding: 6px 0; border-top: 1px solid var(--c-line); } .efc-list li:last-child { border-bottom: 1px solid var(--c-line); } .efc-list li span { color: var(--c-bronce); font-weight: 600; flex-shrink: 0; } .efc-actions { display: flex; align-items: center; gap: 10px; margin-top: auto; } .efc-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--c-oscuro); color: var(--c-off-white); border-radius: 100px; font-size: 13px; font-weight: 500; transition: all 0.3s var(--ease); flex: 1; justify-content: center; } .efc-btn:hover { background: var(--c-bronce); transform: translateY(-2px); } .efc-fav { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--c-line-strong); background: transparent; color: var(--c-oscuro); font-size: 18px; transition: all 0.3s var(--ease); } .efc-fav:hover, .efc-fav.active { background: var(--c-bronce); color: var(--c-off-white); border-color: var(--c-bronce); } .ef-empty { text-align: center; padding: 60px 20px; color: var(--c-muted); font-size: 14px; } /* Un día en SOLAZ */ .exp-day { padding: clamp(60px, 10vh, 110px) 0; background: var(--c-cream-2); } .ed-head { text-align: center; max-width: 720px; margin: 0 auto 50px; } .ed-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; margin-bottom: 18px; } .ed-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-bronce); box-shadow: 0 0 0 4px rgba(182,128,81,0.15); } .ed-title { font-family: var(--f-display); font-size: clamp(32px, 4vw, 52px); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; color: var(--c-oscuro); margin-bottom: 12px; } .ed-title em { font-style: italic; color: var(--c-bronce); font-weight: 400; } .ed-sub { font-size: 13.5px; color: var(--c-muted); line-height: 1.6; } .ed-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; background: var(--c-cream); padding: 14px; border-radius: 24px; margin-bottom: 28px; position: relative; } /* Mobile/Tablet: horizontal scrollable row, scrollbar hidden */ @media (max-width: 768px) { .ed-timeline { display: flex; overflow-x: auto; overflow-y: hidden; padding: 8px; gap: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; user-select: none; } .ed-timeline.is-dragging { cursor: grabbing; scroll-snap-type: none; } .ed-timeline::-webkit-scrollbar { display: none; width: 0; height: 0; } .ed-stop { flex: 1 0 88px; scroll-snap-align: start; padding: 14px 8px; gap: 6px; } .eds-icon svg { width: 20px; height: 20px; } .eds-time { font-size: 13px; } .eds-name { font-size: 11px; letter-spacing: 0.08em; } } .ed-stop { background: none; border: 0; padding: 18px 8px; border-radius: 16px; transition: all 0.4s var(--ease); display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--c-muted); cursor: pointer; position: relative; } .ed-stop:hover { color: var(--c-oscuro); background: var(--c-cream-2); } .ed-stop.active { background: var(--c-oscuro); color: var(--c-off-white); } .eds-icon { color: inherit; opacity: 0.9; } .ed-stop.active .eds-icon { color: var(--c-bronce); opacity: 1; } .eds-time { font-family: var(--f-display); font-style: italic; font-size: 13px; line-height: 1; } .eds-name { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; } .ed-content { position: relative; min-height: 360px; } .ed-panel { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; background: var(--c-cream); border-radius: 24px; padding: 24px; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); } .ed-panel.active { opacity: 1; transform: translateY(0); pointer-events: auto; } @media (max-width: 768px) { .ed-content { min-height: auto; } .ed-panel { position: relative; inset: auto; display: none; grid-template-columns: 1fr; gap: 18px; opacity: 1; transform: none; pointer-events: auto; transition: none; } .ed-panel.active { display: grid; } } .edp-img { aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; } .edp-img img { width: 100%; height: 100%; object-fit: cover; } .edp-text { padding: 6px 14px; } .edp-tag { display: inline-block; font-family: var(--f-display); font-style: italic; font-size: 14px; color: var(--c-bronce); margin-bottom: 12px; } .edp-text h3 { font-family: var(--f-display); font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: var(--c-oscuro); margin-bottom: 12px; } .edp-text p { font-size: 14px; line-height: 1.65; color: var(--c-muted); } /* Gallery masonry */ .exp-gallery { padding: clamp(60px, 10vh, 110px) 0; } .eg-head { max-width: 600px; margin-bottom: 40px; } .eg-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; margin-bottom: 18px; } .eg-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-bronce); box-shadow: 0 0 0 4px rgba(182,128,81,0.15); } .eg-title { font-family: var(--f-display); font-size: clamp(28px, 3.6vw, 44px); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; color: var(--c-oscuro); } .eg-title em { font-style: italic; color: var(--c-bronce); font-weight: 400; } .eg-masonry { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; gap: 14px; } @media (max-width: 968px) { .eg-masonry { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 580px) { .eg-masonry { grid-template-columns: repeat(2, 1fr); } } .eg-item { border-radius: 18px; overflow: hidden; position: relative; cursor: zoom-in; } .eg-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); } .eg-item:hover img { transform: scale(1.06); } .eg-tall { grid-row: span 2; } .eg-wide { grid-column: span 2; } /* ============================================ EXPERIENCIAS — TOURS GRID ============================================ */ .exp-tours { padding: clamp(70px, 10vh, 120px) 0; background: var(--c-off-white); position: relative; } .exp-tours::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--c-line); } .et-head { text-align: center; max-width: 720px; margin: 0 auto clamp(40px, 6vh, 64px); } .et-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-arcilla); margin-bottom: 18px; font-weight: 600; } .et-eyebrow::before, .et-eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--c-arcilla); opacity: 0.55; } .et-title { font-family: var(--f-display); font-size: clamp(38px, 5vw, 60px); line-height: 1.04; color: var(--c-oscuro); margin: 0 0 18px; letter-spacing: -0.018em; font-weight: 500; } .et-title em { font-style: italic; font-weight: 400; color: var(--c-arcilla); } .et-intro { font-family: var(--f-body); font-size: 15px; line-height: 1.65; color: var(--c-muted); margin: 0; } .et-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .et-card { background: var(--c-cream); border: 1px solid var(--c-line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.5s var(--ease-out); } .et-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(50, 37, 28, 0.10); border-color: var(--c-line-strong); } .etc-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-cream-2); } .etc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); } .et-card:hover .etc-media img { transform: scale(1.05); } .etc-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(50,37,28,0.18) 0%, rgba(50,37,28,0) 38%, rgba(50,37,28,0) 62%, rgba(50,37,28,0.32) 100%); pointer-events: none; } .etc-num { position: absolute; top: 16px; left: 20px; font-family: var(--f-display); font-style: italic; color: var(--c-off-white); font-size: 26px; line-height: 1; z-index: 2; letter-spacing: 0.02em; opacity: 0.92; text-shadow: 0 2px 14px rgba(0,0,0,0.35); } .etc-badge { position: absolute; bottom: 16px; left: 20px; background: var(--c-off-white); color: var(--c-oscuro); padding: 8px 14px; border-radius: 100px; font-family: var(--f-body); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; z-index: 2; box-shadow: 0 6px 18px rgba(50, 37, 28, 0.18); white-space: nowrap; } .etc-badge-exclusive { background: var(--c-chocolate); color: var(--c-cream); } .etc-badge-soft { background: var(--c-arcilla); color: var(--c-off-white); } .etc-body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; } .etc-title { font-family: var(--f-display); font-size: 27px; line-height: 1.08; color: var(--c-oscuro); margin: 0 0 12px; letter-spacing: -0.01em; font-weight: 500; } .etc-title em { font-style: italic; font-weight: 400; color: var(--c-arcilla); } .etc-desc { font-family: var(--f-body); font-size: 14px; line-height: 1.68; color: var(--c-muted); margin: 0 0 20px; } .etc-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; } .etc-list li { position: relative; padding-left: 22px; font-family: var(--f-body); font-size: 13.5px; line-height: 1.55; color: var(--c-oscuro); } .etc-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--c-arcilla); opacity: 0.7; } .etc-list-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; } .etc-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-body); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-arcilla); text-decoration: none; padding-top: 16px; border-top: 1px solid var(--c-line); transition: color 0.25s var(--ease-out), gap 0.25s var(--ease-out); } .etc-cta:hover { color: var(--c-chocolate); gap: 16px; } .etc-arrow { font-size: 14px; line-height: 1; transition: transform 0.25s var(--ease-out); } .etc-cta:hover .etc-arrow { transform: translateX(2px); } /* Tablet: 2 columns */ @media (max-width: 1024px) { .et-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } } /* Mobile: 1 column */ @media (max-width: 620px) { .et-grid { grid-template-columns: 1fr; gap: 18px; } .etc-body { padding: 22px 22px 24px; } .etc-title { font-size: 24px; } .etc-list-cols { grid-template-columns: 1fr 1fr; } } /* ============================================ CONTACTO PAGE ============================================ */ .ct-hero { padding-bottom: 80px; } .ct-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; margin-bottom: 22px; } .ct-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-bronce); box-shadow: 0 0 0 4px rgba(182,128,81,0.15); } .ct-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items: start; position: relative; z-index: 1; } @media (max-width: 968px) { .ct-hero-grid { grid-template-columns: 1fr; gap: 40px; } } .ct-hero-title { font-family: var(--f-display); font-size: clamp(48px, 7vw, 96px); font-weight: 500; line-height: 0.95; letter-spacing: -0.03em; color: var(--c-oscuro); margin-bottom: 24px; } .ct-hero-title em { font-style: italic; color: var(--c-bronce); font-weight: 400; } .cth-line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.08em; } .cth-word { display: inline-block; transform: translateY(110%); animation: heroWordUp 1s var(--ease-out) forwards; } .cth-line:nth-child(2) .cth-word { animation-delay: 0.2s; } .ct-hero-sub { font-size: clamp(14px, 1.1vw, 16px); line-height: 1.7; color: var(--c-muted); max-width: 460px; } /* Quick contact card */ .ct-quick { background: var(--c-oscuro); color: var(--c-off-white); border-radius: 28px; padding: 28px; position: relative; overflow: hidden; } .ct-quick::before { content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(182,128,81,0.22), transparent 60%); right: -80px; top: -80px; pointer-events: none; } .ct-quick-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(255,254,254,0.1); position: relative; z-index: 1; } .ct-quick-row:first-child { padding-top: 4px; } .cq-num { font-family: var(--f-display); font-style: italic; font-size: 14px; color: var(--c-bronce); width: 24px; } .cq-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cq-lbl { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,254,254,0.55); font-weight: 500; } .cq-val { font-family: var(--f-display); font-size: clamp(16px, 1.4vw, 19px); color: var(--c-off-white); font-weight: 500; letter-spacing: -0.005em; transition: color 0.3s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cq-val:hover { color: var(--c-bronce); } .cq-copy { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,254,254,0.18); background: transparent; color: rgba(255,254,254,0.85); display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s var(--ease); flex-shrink: 0; } .cq-copy:hover { background: var(--c-bronce); color: var(--c-oscuro); border-color: var(--c-bronce); } .cq-copy.copied { background: #4ade80; color: var(--c-oscuro); border-color: #4ade80; } .ct-live { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 14px; background: rgba(255,254,254,0.06); border-radius: 100px; font-size: 11.5px; color: rgba(255,254,254,0.85); position: relative; z-index: 1; } .ct-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,0.6); animation: liveDot 1.8s ease-out infinite; } @keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); } 100% { box-shadow: 0 0 0 8px rgba(74,222,128,0); } } /* Form section */ .ct-form-section { padding: clamp(40px, 8vh, 100px) 0; background: var(--c-cream-2); } .ct-form-grid { display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 32px; align-items: start; } @media (max-width: 968px) { .ct-form-grid { grid-template-columns: 1fr; } } .ct-form-wrap { background: var(--c-cream); border-radius: 32px; padding: clamp(28px, 4vw, 44px); } .cfw-head { margin-bottom: 28px; } .cfw-num { display: inline-block; font-family: var(--f-display); font-style: italic; font-size: 12px; color: var(--c-bronce); letter-spacing: 0.1em; margin-bottom: 12px; } .cfw-title { font-family: var(--f-display); font-size: clamp(26px, 2.8vw, 36px); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--c-oscuro); margin-bottom: 8px; } .cfw-sub { font-size: 13.5px; color: var(--c-muted); line-height: 1.55; } .ct-form { display: flex; flex-direction: column; gap: 22px; } .ct-field { display: flex; flex-direction: column; gap: 8px; } .ct-field label { display: flex; flex-direction: column; gap: 8px; cursor: text; } .cf-lbl { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; } .cf-num { font-family: var(--f-display); font-style: italic; text-transform: none; letter-spacing: 0; color: var(--c-bronce); } .ct-field input, .ct-field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--c-line-strong); padding: 8px 0 12px; color: var(--c-oscuro); font-family: var(--f-body); font-size: 15px; outline: 0; resize: vertical; transition: border-color 0.3s var(--ease); } .ct-field input:focus, .ct-field textarea:focus { border-color: var(--c-bronce); } .ct-field input::placeholder, .ct-field textarea::placeholder { color: var(--c-muted); font-style: italic; } .ct-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 580px) { .ct-field-row { grid-template-columns: 1fr; } } .cf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } .cf-chip { position: relative; cursor: pointer; user-select: none; } .cf-chip input { position: absolute; opacity: 0; pointer-events: none; } .cf-chip span { display: inline-block; padding: 8px 16px; border: 1px solid var(--c-line-strong); border-radius: 100px; font-size: 13px; cursor: pointer; color: var(--c-oscuro); transition: all 0.3s var(--ease); } .cf-chip:hover span { border-color: var(--c-oscuro); } .cf-chip input:checked + span { background: var(--c-oscuro); color: var(--c-off-white); border-color: var(--c-oscuro); } .ct-form-foot { display: flex; align-items: center; gap: 18px; margin-top: 10px; flex-wrap: wrap; } .cf-hint { font-size: 12px; color: var(--c-muted); font-style: italic; } /* WhatsApp card */ .ct-wa-card { background: var(--c-oscuro); color: var(--c-off-white); border-radius: 32px; padding: clamp(28px, 4vw, 36px); text-align: center; position: relative; overflow: hidden; } .ct-wa-card::before { content: ''; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(37,211,102,0.18), transparent 60%); left: -100px; bottom: -100px; pointer-events: none; } .cwc-tag { display: inline-block; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-bronce); font-weight: 600; padding: 5px 12px; border: 1px solid rgba(182,128,81,0.4); border-radius: 100px; margin-bottom: 24px; position: relative; } .cwc-qr { display: flex; justify-content: center; margin-bottom: 22px; position: relative; text-decoration: none; transition: transform 0.35s var(--ease); } .cwc-qr:hover { transform: translateY(-3px) scale(1.02); } .qr-frame { width: 180px; height: 180px; background: var(--c-off-white); border-radius: 18px; padding: 12px; position: relative; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18); } .qr-img { width: 100%; height: 100%; display: block; border-radius: 4px; image-rendering: pixelated; } .qr-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; background: var(--c-off-white); border-radius: 7px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .cwc-h { font-family: var(--f-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 10px; position: relative; } .cwc-p { font-size: 13px; line-height: 1.6; color: rgba(255,254,254,0.7); margin-bottom: 22px; max-width: 280px; margin-left: auto; margin-right: auto; position: relative; } .cwc-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; background: #25D366; color: var(--c-off-white); border-radius: 100px; font-size: 13.5px; font-weight: 500; transition: all 0.3s var(--ease); position: relative; } .cwc-btn:hover { background: #1DA851; transform: translateY(-2px); } /* Hours */ .ct-hours { padding: clamp(60px, 10vh, 110px) 0; } .ch-head { text-align: center; max-width: 540px; margin: 0 auto 50px; } .ch-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; margin-bottom: 18px; } .ch-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-bronce); box-shadow: 0 0 0 4px rgba(182,128,81,0.15); } .ch-title { font-family: var(--f-display); font-size: clamp(28px, 3.6vw, 44px); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; color: var(--c-oscuro); } .ch-title em { font-style: italic; color: var(--c-bronce); font-weight: 400; } .ch-table { max-width: 760px; margin: 0 auto; background: var(--c-cream-2); border-radius: 24px; padding: 8px; overflow: hidden; } .ch-row { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 16px; transition: all 0.4s var(--ease); } @media (max-width: 580px) { .ch-row { grid-template-columns: 1fr 1fr; padding: 14px 16px; gap: 8px; } .chr-state { display: none; } } .ch-row.today { background: var(--c-oscuro); color: var(--c-off-white); transform: scale(1.01); } .ch-row.today .chr-state { color: var(--c-bronce); } .chr-day { font-family: var(--f-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: inherit; position: relative; } .ch-row.today .chr-day::before { content: '→'; position: absolute; left: -24px; color: var(--c-bronce); font-style: italic; } .chr-time { font-size: 13.5px; font-weight: 500; color: inherit; opacity: 0.9; } .chr-state { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); font-weight: 500; } /* Map */ .ct-map { padding: clamp(60px, 10vh, 110px) 0; } .cm-head { max-width: 620px; margin-bottom: 40px; } .cm-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; margin-bottom: 18px; } .cm-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-bronce); box-shadow: 0 0 0 4px rgba(182,128,81,0.15); } .cm-title { font-family: var(--f-display); font-size: clamp(28px, 3.6vw, 44px); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; color: var(--c-oscuro); margin-bottom: 14px; } .cm-title em { font-style: italic; color: var(--c-bronce); font-weight: 400; } .cm-sub { font-size: 14px; line-height: 1.6; color: var(--c-muted); max-width: 480px; } .cm-frame { position: relative; border-radius: 32px; overflow: hidden; aspect-ratio: 16 / 8; background: var(--c-cream-2); } .cm-frame > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) brightness(0.9); } .cm-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(50,37,28,0.2), rgba(50,37,28,0.5)); } .cm-pin { position: absolute; top: 42%; left: 38%; width: 24px; height: 24px; transform: translate(-50%, -50%); } .cmp-ring, .cmp-ring-2 { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c-bronce); animation: pinRing 2.4s ease-out infinite; } .cmp-ring-2 { animation-delay: 1.2s; } @keyframes pinRing { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } } .cmp-dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: var(--c-bronce); box-shadow: 0 4px 12px rgba(50,37,28,0.4); } .cm-card { position: absolute; bottom: 24px; left: 24px; background: var(--c-off-white); border-radius: 18px; padding: 18px 22px; max-width: 320px; box-shadow: 0 10px 30px rgba(50,37,28,0.18); } .cmc-line { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: 16px; font-weight: 600; color: var(--c-oscuro); margin-bottom: 6px; } .cmc-line svg { color: var(--c-bronce); } .cmc-address { display: block; font-size: 12.5px; color: var(--c-muted); margin-bottom: 14px; line-height: 1.5; } .cmc-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--c-oscuro); padding: 4px 0; border-bottom: 1px solid var(--c-line-strong); transition: all 0.3s var(--ease); } .cmc-btn:hover { color: var(--c-bronce); border-color: var(--c-bronce); gap: 12px; } /* FAQ */ .ct-faq { padding: clamp(60px, 10vh, 110px) 0; background: var(--c-cream-2); } .cf-head { max-width: 620px; margin-bottom: 40px; } .cf-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; margin-bottom: 18px; } .cf-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-bronce); box-shadow: 0 0 0 4px rgba(182,128,81,0.15); } .cf-title { font-family: var(--f-display); font-size: clamp(28px, 3.6vw, 44px); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; color: var(--c-oscuro); } .cf-title em { font-style: italic; color: var(--c-bronce); font-weight: 400; } .cf-list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .cf-item { background: var(--c-cream); border-radius: 18px; overflow: hidden; transition: all 0.3s var(--ease); } .cf-item[open] { background: var(--c-off-white); box-shadow: 0 10px 24px rgba(50,37,28,0.06); } .cf-item summary { display: flex; align-items: center; gap: 16px; padding: 22px 26px; cursor: pointer; list-style: none; user-select: none; } .cf-item summary::-webkit-details-marker { display: none; } .cfi-num { font-family: var(--f-display); font-style: italic; font-size: 14px; color: var(--c-bronce); flex-shrink: 0; width: 28px; } .cfi-q { flex: 1; font-family: var(--f-display); font-size: clamp(15px, 1.3vw, 18px); font-weight: 600; color: var(--c-oscuro); letter-spacing: -0.01em; } .cfi-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--c-cream-2); color: var(--c-oscuro); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 300; transition: all 0.35s var(--ease); flex-shrink: 0; } .cf-item[open] .cfi-icon { background: var(--c-oscuro); color: var(--c-off-white); transform: rotate(45deg); } .cfi-a { padding: 0 26px 26px 70px; font-size: 14px; line-height: 1.65; color: var(--c-muted); } /* Copy toast */ .copy-toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--c-oscuro); color: var(--c-off-white); padding: 12px 22px; border-radius: 100px; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 10px; opacity: 0; pointer-events: none; transition: all 0.4s var(--ease); z-index: 200; box-shadow: 0 10px 30px rgba(50,37,28,0.25); } .copy-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); } .copy-toast svg { color: #4ade80; } /* Netlify Forms honeypot — visually hidden, still picked up by bots */ .netlify-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* Success panel that replaces the form after submission */ .form-success { text-align: center; padding: clamp(28px, 5vw, 48px) 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; animation: fs-rise 0.55s var(--ease-out); } @keyframes fs-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .form-success-icon { width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #FFFEFE; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(37, 211, 102, 0.32); animation: fs-pop 0.5s var(--ease-out) 0.1s backwards; } @keyframes fs-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } .form-success-title { font-family: var(--f-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: inherit; margin: 4px 0 0; } .form-success-text { font-size: 13.5px; line-height: 1.6; color: inherit; opacity: 0.72; max-width: 340px; margin: 0; } /* ============================================ LEGAL PAGES (Terms / Privacy) ============================================ */ .legal-hero { padding: 140px 0 60px; background: var(--c-cream); position: relative; border-bottom: 1px solid var(--c-line); } .legal-bc { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); font-weight: 500; margin-bottom: 32px; } .legal-bc a { color: var(--c-muted); transition: color 0.3s var(--ease); } .legal-bc a:hover { color: var(--c-bronce); } .legal-bc > span:last-child { color: var(--c-oscuro); } .legal-bc > span:not(:last-child):not(a) { color: var(--c-line-strong); } .legal-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; margin-bottom: 18px; } .legal-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-bronce); box-shadow: 0 0 0 4px rgba(182, 128, 81, 0.15); } .legal-title { font-family: var(--f-display); font-size: clamp(40px, 6vw, 80px); font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--c-oscuro); margin-bottom: 18px; } .legal-title em { font-style: italic; color: var(--c-bronce); font-weight: 400; } .legal-updated { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-bronce); font-weight: 500; margin-bottom: 24px; } .legal-intro { font-family: var(--f-display); font-style: italic; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: var(--c-chocolate); max-width: 640px; } .legal-body { padding: clamp(60px, 9vh, 110px) 0 clamp(70px, 10vh, 130px); background: var(--c-cream); } .legal-grid { display: grid; grid-template-columns: minmax(220px, 260px) 1fr; gap: clamp(40px, 6vw, 80px); align-items: start; } @media (max-width: 968px) { .legal-grid { grid-template-columns: 1fr; gap: 36px; } } .legal-toc { position: sticky; top: 110px; padding: 28px 26px; background: var(--c-cream-2); border-radius: 20px; } @media (max-width: 968px) { .legal-toc { position: relative; top: 0; } } .toc-label { display: block; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--c-line-strong); } .legal-toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .legal-toc li { counter-increment: toc; position: relative; padding-left: 28px; } .legal-toc li::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 0; top: 3px; font-family: var(--f-display); font-style: italic; font-size: 11px; color: var(--c-bronce); } .legal-toc a { display: inline-block; padding: 4px 0; font-size: 13px; color: var(--c-oscuro); line-height: 1.4; transition: color 0.25s var(--ease), padding-left 0.25s var(--ease); } .legal-toc a:hover { color: var(--c-bronce); padding-left: 4px; } .legal-content { display: flex; flex-direction: column; gap: 56px; } .legal-section { scroll-margin-top: 110px; padding-bottom: 56px; border-bottom: 1px solid var(--c-line); } .legal-section:last-child { border-bottom: 0; padding-bottom: 0; } .ls-num { display: inline-block; font-family: var(--f-display); font-style: italic; font-size: 16px; color: var(--c-bronce); font-weight: 500; margin-bottom: 10px; } .ls-title { font-family: var(--f-display); font-size: clamp(24px, 2.6vw, 34px); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: var(--c-oscuro); margin: 0 0 18px; } .legal-section p { font-size: 15px; line-height: 1.75; color: var(--c-oscuro); margin-bottom: 16px; } .legal-section p:last-child { margin-bottom: 0; } .legal-section p em { font-style: italic; color: var(--c-chocolate); } .legal-section ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .legal-section ul li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.65; color: var(--c-oscuro); } .legal-section ul li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 8px; height: 1px; background: var(--c-bronce); } .legal-section ul li strong { color: var(--c-chocolate); font-weight: 600; } .legal-section a { color: var(--c-bronce); text-decoration: underline; text-decoration-color: rgba(182, 128, 81, 0.4); text-underline-offset: 3px; transition: text-decoration-color 0.3s var(--ease); } .legal-section a:hover { text-decoration-color: var(--c-bronce); } /* ============================================ LAS AUSENCIAS (Nosotros · Capítulo 04) ============================================ */ .about-absences { padding: clamp(70px, 11vh, 130px) 0; background: var(--c-cream-2); overflow: hidden; } .aab-head { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(36px, 5vw, 72px); align-items: end; margin-bottom: 56px; } @media (max-width: 968px) { .aab-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; } } .aab-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; margin-bottom: 20px; } .aab-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-bronce); box-shadow: 0 0 0 4px rgba(182, 128, 81, 0.15); } .aab-title { font-family: var(--f-display); font-size: clamp(32px, 4vw, 56px); font-weight: 500; line-height: 1.04; letter-spacing: -0.02em; color: var(--c-oscuro); } .aab-title em { font-style: italic; color: var(--c-bronce); font-weight: 400; } .aab-sub { font-size: 14px; line-height: 1.75; color: var(--c-muted); max-width: 460px; padding-bottom: 6px; } .aab-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(50, 37, 28, 0.12); } @media (max-width: 768px) { .aab-list { grid-template-columns: 1fr; } } .aab-item { display: grid; grid-template-columns: 42px 1fr; gap: 22px; padding: 32px 28px; border-bottom: 1px solid rgba(50, 37, 28, 0.12); align-items: start; transition: background 0.4s var(--ease); } @media (min-width: 769px) { .aab-item:nth-child(odd) { border-right: 1px solid rgba(50, 37, 28, 0.12); } .aab-item:nth-last-child(-n+2) { border-bottom: 0; } } @media (max-width: 768px) { .aab-list > .aab-item:last-child { border-bottom: 0; } .aab-item { padding: 26px 4px; } } .aab-item:hover { background: rgba(255, 254, 254, 0.4); } .aab-num { font-family: var(--f-display); font-style: italic; font-size: 16px; color: var(--c-bronce); font-weight: 500; padding-top: 7px; line-height: 1; } .aab-body { display: flex; flex-direction: column; gap: 10px; } .aab-what { font-family: var(--f-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: var(--c-oscuro); margin: 0; } /* Strikethrough that draws when the item enters view */ .aab-text { position: relative; display: inline; background-image: linear-gradient(var(--c-bronce), var(--c-bronce)); background-repeat: no-repeat; background-size: 0% 1.8px; background-position: 0 60%; transition: background-size 1s cubic-bezier(0.6, 0.05, 0.3, 1) 0.25s; padding: 0 2px; } .aab-item.is-visible .aab-text { background-size: 100% 1.8px; } .aab-why { font-family: var(--f-display); font-style: italic; font-size: clamp(13px, 1.05vw, 15px); line-height: 1.55; color: var(--c-chocolate); margin: 0; opacity: 0.78; } .aab-foot { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 56px; text-align: center; } .aab-foot svg { color: var(--c-bronce); } .aab-foot span { font-family: var(--f-display); font-style: italic; font-size: 16px; color: var(--c-chocolate); letter-spacing: -0.005em; }