/* =========================================================== Brasas y Copas — Landing (Variante 2 · Bordó asimétrico) Mobile-first. Tokens tweakables vía atributos en . =========================================================== */ :root{ --brasa:#8C0E04; --terracota:#C0531F; --carbon:#1D1C1A; --crema:#F0DFCB; --marfil:#F2EBDD; --brasa-deep:#6E0A02; --carbon-2:#262422; --crema-2:#E7D4BC; --ff-title:"Cormorant", Georgia, serif; --ff-serif:"Cormorant Garamond", Georgia, serif; --ff-script:"Great Vibes", cursive; --ff-body:"Montserrat", system-ui, sans-serif; /* tweakables (con fallback sano) */ --tw:600; /* peso titulares */ --pad:1; /* densidad/aire */ --ember:0.6; /* intensidad resplandor */ --anim:1; /* animaciones on/off */ --cta-radius:12px; --cta-bg:var(--terracota); --cta-fg:var(--marfil); --cta-border:transparent; /* esquema de fondo dominante (secciones planas) */ --dom-bg:var(--crema); --dom-fg:var(--carbon); --dom-muted:rgba(29,28,26,.66); --dom-line:rgba(29,28,26,.14); --dom-wm:#1D1C1A; /* color marca de agua */ --dom-wm-op:0.05; } [data-titles="sobrio"] { --tw:500; } [data-titles="editorial"]{ --tw:600; } [data-titles="contraste"]{ --tw:700; } [data-density="compacto"] { --pad:0.74; } [data-density="equilibrado"]{ --pad:1; } [data-density="espacioso"] { --pad:1.32; } [data-cta="solido"] { --cta-bg:var(--terracota); --cta-fg:var(--marfil); --cta-border:transparent; --cta-radius:12px; } [data-cta="contorno"]{ --cta-bg:transparent; --cta-fg:var(--terracota); --cta-border:var(--terracota); --cta-radius:12px; } [data-cta="pildora"]{ --cta-bg:var(--terracota); --cta-fg:var(--marfil); --cta-border:transparent; --cta-radius:999px; } [data-scheme="calido"]{ --dom-bg:var(--crema); --dom-fg:var(--carbon); --dom-muted:rgba(29,28,26,.66); --dom-line:rgba(29,28,26,.14); --dom-wm:#1D1C1A; --dom-wm-op:0.05; } [data-scheme="oscuro"]{ --dom-bg:var(--carbon); --dom-fg:var(--marfil); --dom-muted:rgba(242,235,221,.62); --dom-line:rgba(242,235,221,.14); --dom-wm:#F2EBDD; --dom-wm-op:0.05; } [data-scheme="bordo"] { --dom-bg:var(--brasa); --dom-fg:var(--marfil); --dom-muted:rgba(242,235,221,.7); --dom-line:rgba(242,235,221,.18); --dom-wm:#F2EBDD; --dom-wm-op:0.06; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--crema); color:var(--carbon); font-family:var(--ff-body); font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;display:block} h1,h2,h3,h4{font-family:var(--ff-title); font-weight:var(--tw); line-height:1; margin:0; text-wrap:balance} a{color:inherit} .script{font-family:var(--ff-script); font-weight:400} /* ---- layout helpers ---- */ .wrap{width:100%; max-width:1180px; margin:0 auto; padding:0 22px} .section{padding:calc(72px * var(--pad)) 0; position:relative} @media (min-width:880px){ .section{padding:calc(108px * var(--pad)) 0} .wrap{padding:0 40px} } .eyebrow{font-family:var(--ff-body); font-weight:600; font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--terracota)} .lead{font-size:clamp(15px,2.4vw,18px); line-height:1.7} /* watermark emblem behind flat sections */ .flat{background:var(--dom-bg); color:var(--dom-fg)} .flat .eyebrow{color:var(--terracota)} .watermark{position:absolute; pointer-events:none; z-index:0; color:var(--dom-wm); opacity:var(--dom-wm-op); top:50%; left:50%; transform:translate(-50%,-50%); width:min(120vw,1000px)} .flat .wrap{position:relative; z-index:1} /* paper grain */ .grain::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5; background-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,.03) 0 1px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(0,0,0,.025) 0 1px, transparent 1px); background-size:7px 7px, 11px 11px; mix-blend-mode:multiply} /* ---- CTA / buttons ---- */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:.6em; font-family:var(--ff-body); font-weight:600; letter-spacing:.02em; cursor:pointer; text-decoration:none; line-height:1; border:1.5px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease} .btn-wa{background:var(--cta-bg); color:var(--cta-fg); border-color:var(--cta-border); border-radius:var(--cta-radius); padding:17px 26px; font-size:15px; box-shadow:0 10px 30px -12px rgba(192,83,31,.7)} .btn-wa:hover{transform:translateY(-2px); box-shadow:0 16px 36px -12px rgba(192,83,31,.85)} .btn-ghost{background:transparent; color:currentColor; border-color:currentColor; border-radius:var(--cta-radius); padding:14px 22px; font-size:14px; opacity:.85} .btn-ghost:hover{opacity:1; transform:translateY(-1px)} .btn-block{width:100%} /* social pill */ .pill{display:inline-flex; align-items:center; gap:.55em; white-space:nowrap; border:1px solid rgba(242,235,221,.45); border-radius:999px; padding:8px 16px; font-family:var(--ff-body); font-size:13px} .pill .num{font-weight:700} .stars{color:var(--terracota); letter-spacing:1px} .dot{opacity:.5} /* image placeholders */ .ph{position:relative; overflow:hidden; background:linear-gradient(135deg,#cdb89c,#b89d7d); display:grid; place-items:center; border-radius:12px} .ph--dark{background:linear-gradient(135deg,#3a322c,#241d18)} .ph--brasa{background:linear-gradient(135deg,#5e0c03,#3a0a04)} .ph__label{font-family:var(--ff-serif); font-style:italic; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:rgba(29,28,26,.4)} .ph--dark .ph__label,.ph--brasa .ph__label{color:rgba(242,235,221,.35)} .ph__tag{position:absolute; top:10px; right:10px; font-family:var(--ff-body); font-size:9.5px; letter-spacing:.06em; color:rgba(242,235,221,.7); border:1px dashed rgba(242,235,221,.45); border-radius:6px; padding:3px 8px; text-transform:uppercase} .ph--light .ph__tag{color:rgba(29,28,26,.55); border-color:rgba(29,28,26,.3)} /* ember glow */ @keyframes emberBreath{0%,100%{opacity:calc(.55 * var(--ember)); transform:scale(1)} 50%{opacity:calc(.95 * var(--ember)); transform:scale(1.08)}} .ember{position:absolute; pointer-events:none; z-index:0; background:radial-gradient(60% 55% at 50% 75%, rgba(192,83,31,.6) 0%, rgba(140,14,4,.4) 38%, rgba(29,28,26,0) 72%); filter:blur(10px); animation:emberBreath 6.5s ease-in-out infinite} /* reveals */ .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)} .reveal.in{opacity:1; transform:none} .reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s} .reveal[data-d="3"]{transition-delay:.24s} .reveal[data-d="4"]{transition-delay:.32s} /* ========================================================= HERO ========================================================= */ .hero{position:relative; background:var(--brasa); color:var(--marfil)} .hero-visual{position:absolute; inset:0; z-index:0; overflow:hidden; background:linear-gradient(135deg,#5e0c03,#3a0a04)} .hero-visual img,.hero-visual video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover} .hero-visual .ph__label{position:absolute; top:42%; left:0; right:0; text-align:center} .hero-scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(58,10,4,.62) 0%, rgba(58,10,4,.28) 30%, rgba(58,10,4,.5) 62%, rgba(29,12,8,.92) 100%)} .hero-chrome{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; padding-top:26px} .hero-chrome .play{margin-top:18px} .hero-text{position:relative; z-index:3; min-height:100svh; display:flex; flex-direction:column; padding:128px 26px 36px; pointer-events:none} .hero-text .pill,.hero-text .btn,.hero-text a{pointer-events:auto} .hero-head{margin-top:auto} .hero-text h1{font-size:clamp(50px,15vw,64px); color:var(--marfil); line-height:.95} .hero-text .script{font-size:clamp(28px,8vw,34px); color:var(--crema); margin-top:6px; display:block} .hero-loc{font-family:var(--ff-body); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(242,235,221,.78); margin-top:16px} .hero-cta{margin-top:28px; display:flex; flex-direction:column; gap:14px; align-items:flex-start} .hero-cta .pill{color:var(--marfil)} .hero-watermark{position:absolute; right:-90px; top:90px; z-index:1; opacity:.07; color:var(--marfil); pointer-events:none} /* play button */ .play{display:inline-flex; align-items:center; gap:10px; background:none; border:none; cursor:pointer; color:var(--marfil); font-family:var(--ff-body)} .play__disc{width:50px; height:50px; border-radius:50%; display:grid; place-items:center; background:rgba(242,235,221,.12); border:1px solid rgba(242,235,221,.6); backdrop-filter:blur(3px); transition:background .2s, transform .2s} .play:hover .play__disc{background:rgba(242,235,221,.22); transform:scale(1.05)} .play__label{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(242,235,221,.88)} /* DESKTOP hero: visual full-bleed SIN texto, texto debajo */ @media (min-width:880px){ .hero-visual{position:relative; height:82vh; min-height:560px} .hero-visual .ph__label{top:46%} .hero-text{min-height:auto; align-items:center; text-align:center; padding:clamp(56px,7vw,96px) 40px; background:var(--brasa)} .hero-head{margin-top:0} .hero-text h1{font-size:clamp(64px,7vw,104px)} .hero-text .script{font-size:clamp(34px,4vw,46px)} .hero-loc{display:none} .hero-cta{margin-top:34px; flex-direction:row; align-items:center; justify-content:center; gap:22px} .hero-chrome{padding-top:34px} .hero-chrome .play{margin-top:auto; margin-bottom:auto} } /* play hidden state once video active */ .hero.playing .hero-chrome .play{display:none} .hero.playing .hero-scrim{background:linear-gradient(180deg, rgba(58,10,4,.35) 0%, rgba(29,12,8,.2) 50%, rgba(29,12,8,.7) 100%)} /* === Rótulos SOBRE el video + velos de esquina (solo cuando reproduce) === */ .hero-chrome::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .45s ease; background: linear-gradient(to top right, rgba(0,0,0,.43) 0%, rgba(0,0,0,0) 44%), linear-gradient(to top left, rgba(0,0,0,.43) 0%, rgba(0,0,0,0) 44%), linear-gradient(to top, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 22%)} .hero.playing .hero-chrome::before{opacity:1} /* control abajo-derecha: parar video (solo al reproducir) */ /* Cluster de controles del video: abajo-derecha, íconos con tooltip (solo al reproducir) */ .hero-controls{position:absolute; right:clamp(24px,5vw,72px); bottom:clamp(24px,5vw,56px); z-index:5; display:none; align-items:center; gap:10px; pointer-events:auto} .hero.playing .hero-controls{display:flex} .hero-controls .sound-toggle, .hero-controls .hero-stop{position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; margin:0; cursor:pointer; color:var(--marfil); background:rgba(0,0,0,.22); border:1px solid rgba(242,235,221,.5); border-radius:999px; box-shadow:none; backdrop-filter:blur(3px); transition:background .2s, border-color .2s, transform .2s} .hero-controls .sound-toggle:hover, .hero-controls .hero-stop:hover{background:rgba(0,0,0,.42); border-color:var(--marfil); transform:scale(1.06)} .hero-controls button::after{content:attr(aria-label); position:absolute; left:50%; bottom:calc(100% + 9px); transform:translateX(-50%); background:rgba(0,0,0,.85); color:var(--marfil); padding:5px 10px; border-radius:7px; font-family:var(--ff-body); font-size:11px; letter-spacing:.03em; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .18s ease} .hero-controls button:hover::after{opacity:1} /* rótulo abajo-izquierda (marca + tagline + sonido) — solo al reproducir */ .hero-caption{position:absolute; left:clamp(24px,5vw,72px); bottom:clamp(24px,5vw,56px); z-index:4; display:none; flex-direction:column; align-items:flex-start; gap:5px; text-align:left; pointer-events:none} .hero.playing .hero-caption{display:flex} /* indicador de scroll (pie del hero, centrado) */ .hero-scroll{position:absolute; left:50%; bottom:clamp(16px,2.4vw,26px); transform:translateX(-50%); z-index:4; color:var(--crema); pointer-events:none; animation:heroScrollBounce 1.9s ease-in-out infinite} @keyframes heroScrollBounce{0%,100%{transform:translate(-50%,0); opacity:.5} 50%{transform:translate(-50%,8px); opacity:.95}} @media (prefers-reduced-motion: reduce){ .hero-scroll{animation:none; opacity:.7} } .hero-caption__brand{margin:0; font-family:var(--ff-body); font-weight:700; font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:var(--marfil); text-shadow:0 1px 14px rgba(0,0,0,.6)} .hero-caption__tag{margin:0; font-family:var(--ff-serif); font-style:italic; font-size:clamp(18px,2vw,24px); color:var(--crema); text-shadow:0 1px 14px rgba(0,0,0,.55)} /* ========================================================= PRUEBA SOCIAL — banda ========================================================= */ .proof{background:var(--carbon); color:var(--marfil); text-align:center; padding:calc(58px * var(--pad)) 0; position:relative; overflow:hidden} .proof-bg{position:absolute; left:0; right:0; top:-15%; height:130%; z-index:0; background:url('/images/fondo-fachada.webp') center/cover no-repeat; will-change:transform} .proof-scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(29,28,26,.85) 0%, rgba(29,28,26,.72) 45%, rgba(29,28,26,.9) 100%)} .proof .wrap{position:relative; z-index:2} .proof .big{font-family:var(--ff-title); font-weight:var(--tw); font-size:clamp(64px,16vw,108px); line-height:.82; margin:0; color:var(--marfil)} .proof .big small{font-size:.44em; vertical-align:.46em; color:var(--terracota); font-family:var(--ff-body); font-weight:600; letter-spacing:.04em} .proof .stars-lg{color:var(--terracota); font-size:clamp(20px,5vw,30px); letter-spacing:6px; margin:2px 0 14px} .proof .sub{font-family:var(--ff-body); font-size:14px; letter-spacing:.04em; color:rgba(242,235,221,.95); text-shadow:0 1px 14px rgba(0,0,0,.55)} .proof .logos{display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:22px} .proof .logos-tags{display:inline-flex; align-items:center; gap:14px; font-family:var(--ff-body); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:rgba(242,235,221,.78); text-shadow:0 1px 12px rgba(0,0,0,.5)} .proof .logos-tags > span{white-space:nowrap} .proof .logos-dot{opacity:.55} .proof .logos-addr{white-space:normal; text-align:center; max-width:min(92vw,560px); line-height:1.5; color:var(--marfil); border-color:rgba(242,235,221,.55); letter-spacing:.02em; text-shadow:none} @media (max-width:879px){ .proof .sub{max-width:none} .proof .sub-sep{display:none} .proof .sub-a, .proof .sub-b{display:block} .proof .logos-tags{gap:9px; font-size:10.5px; letter-spacing:.08em} } @media (min-width:880px){ .proof .stars-lg{margin-bottom:40px} .proof .logos{margin-top:26px} } /* ========================================================= LA EXPERIENCIA ========================================================= */ .exp-head{max-width:680px} .exp-head h2{font-size:clamp(34px,7vw,56px); margin-bottom:14px} .exp-head h2 .script{display:block; font-family:var(--ff-script); font-weight:400; font-size:clamp(40px,8vw,66px); line-height:1.04; color:var(--brasa); margin-top:4px} .exp-grid{display:grid; grid-template-columns:1fr; gap:18px; margin-top:38px} @media (min-width:760px){ .exp-grid{grid-template-columns:repeat(3,1fr); gap:24px} } .exp-card{position:relative; padding:30px 26px; border-radius:16px; background:rgba(140,14,4,.04); border:1px solid var(--dom-line); overflow:hidden} [data-scheme="oscuro"] .exp-card,[data-scheme="bordo"] .exp-card{background:rgba(242,235,221,.05)} .exp-card .pct{font-family:var(--ff-title); font-weight:var(--tw); font-size:54px; line-height:1; color:var(--terracota)} .exp-card h3{font-size:26px; margin:10px 0 8px} .exp-card p{font-size:14px; color:var(--dom-muted); margin:0} .exp-card .rule{width:38px; height:2px; background:var(--terracota); margin:14px 0 0} /* ========================================================= ESTACIONES ========================================================= */ .stations{background:var(--carbon); color:var(--marfil)} .stations .head{max-width:640px; margin-bottom:36px} .stations .head h2{font-size:clamp(34px,7vw,56px); color:var(--marfil)} .stations .head p{color:rgba(242,235,221,.7)} .st-grid{display:grid; grid-template-columns:1fr; gap:16px} @media (min-width:680px){ .st-grid{grid-template-columns:repeat(2,1fr); gap:20px} } @media (min-width:1024px){ .st-grid{grid-template-columns:repeat(3,1fr)} } .st-card{position:relative; border-radius:14px; overflow:hidden; background:#211a16} .st-card .ph{border-radius:0; aspect-ratio:4/5} .st-img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:0} .st-card .cap{padding:18px 18px 22px} .st-card .cap h3{font-size:27px; color:var(--marfil); margin-bottom:4px} .st-card .cap p{font-size:13px; color:rgba(242,235,221,.68); margin:0} .st-card .idx{position:absolute; top:12px; left:14px; z-index:2; font-family:var(--ff-title); font-weight:var(--tw); font-size:20px; color:var(--marfil); opacity:.85} .st-card.feature{grid-column:1/-1} @media (min-width:680px){ .st-card.feature{grid-column:span 2} .st-card.feature .ph,.st-card.feature .st-img{aspect-ratio:16/9} } @media (min-width:1024px){ .st-card.feature{grid-column:span 1} .st-card.feature .ph,.st-card.feature .st-img{aspect-ratio:4/5} } /* ========================================================= PRECIOS ========================================================= */ .prices .head{max-width:640px; margin-bottom:14px} .prices .head h2{font-size:clamp(34px,7vw,56px)} .note{font-size:12.5px; letter-spacing:.04em; color:var(--dom-muted); font-style:italic; margin-bottom:30px} .plans{display:grid; grid-template-columns:1fr; gap:20px} @media (min-width:820px){ .plans{grid-template-columns:1fr 1fr; gap:26px} } .plan{position:relative; border-radius:18px; padding:30px 26px; background:#fff; border:1px solid var(--dom-line); box-shadow:0 20px 50px -30px rgba(29,28,26,.4)} [data-scheme="oscuro"] .plan{background:var(--carbon-2)} .plan.featured{background:var(--brasa); color:var(--marfil); border-color:transparent} .plan.featured *{color:var(--marfil)} .plan .tier{font-family:var(--ff-body); font-weight:700; letter-spacing:.04em; font-size:13px; text-transform:uppercase; color:var(--terracota)} .plan.featured .tier{color:var(--crema)} .plan h3{font-size:30px; margin:8px 0 4px} .plan .incl{font-size:13.5px; color:var(--dom-muted); margin:0 0 22px} .plan.featured .incl{color:rgba(242,235,221,.82)} .ptable{width:100%; border-collapse:collapse; font-family:var(--ff-body)} .ptable th{text-align:left; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dom-muted); font-weight:600; padding:0 0 10px} .plan.featured .ptable th{color:rgba(242,235,221,.86)} .ptable td{padding:11px 0; border-top:1px solid var(--dom-line); font-size:14.5px; vertical-align:baseline} .plan.featured .ptable td{border-color:rgba(242,235,221,.2)} .ptable .lbl{color:var(--dom-fg)} .plan.featured .ptable .lbl{color:var(--marfil)} .ptable .sub{display:block; font-size:11.5px; color:var(--dom-muted)} .plan.featured .ptable .sub{color:rgba(242,235,221,.82)} .ptable .val{text-align:right; font-weight:700; white-space:nowrap} .ptable .val .we{display:block; font-size:11.5px; font-weight:500; color:var(--dom-muted)} .plan.featured .ptable .val .we{color:rgba(242,235,221,.82)} .plan .foot{margin-top:24px} .badge-pop{position:absolute; top:-12px; right:22px; background:var(--terracota); color:var(--marfil); font-family:var(--ff-body); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:6px 14px; border-radius:999px} /* ========================================================= GALERÍA ========================================================= */ .gallery{background:var(--carbon); color:var(--marfil)} .gallery .head{margin-bottom:32px; max-width:600px} .gallery .head h2{font-size:clamp(34px,7vw,56px); color:var(--marfil)} .g-grid{display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; gap:12px} @media (min-width:760px){ .g-grid{grid-template-columns:repeat(4,1fr); grid-auto-rows:180px; gap:14px} } .g-grid .ph{border-radius:10px; width:100%; height:100%} .g-grid .tall{grid-row:span 2} .g-grid .wide{grid-column:span 2} .g-item{position:relative; display:block; width:100%; height:100%; padding:0; margin:0; border:0; border-radius:10px; overflow:hidden; cursor:pointer; background:#241d18; -webkit-appearance:none; appearance:none} .g-item img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1)} .g-item:hover img,.g-item:focus-visible img{transform:scale(1.05)} .g-item:focus-visible{outline:2px solid var(--terracota); outline-offset:3px} /* ========================================================= TESTIMONIOS ========================================================= */ .testi .head{max-width:600px; margin-bottom:34px} .testi .head h2{font-size:clamp(34px,7vw,56px)} .t-grid{display:grid; grid-template-columns:1fr; gap:18px} @media (min-width:760px){ .t-grid{grid-template-columns:repeat(3,1fr); gap:22px} } .t-card{position:relative; padding:30px 26px 26px; border-radius:16px; background:#fff; border:1px solid var(--dom-line); box-shadow:0 18px 44px -32px rgba(29,28,26,.45)} [data-scheme="oscuro"] .t-card,[data-scheme="bordo"] .t-card{background:rgba(242,235,221,.05)} .t-card .qmark{font-family:var(--ff-title); font-weight:700; font-size:60px; line-height:.6; color:var(--terracota); opacity:.5} .t-card .stars{font-size:14px; letter-spacing:2px; display:block; margin:8px 0 12px} .t-card blockquote{margin:0; font-family:var(--ff-serif); font-size:19px; line-height:1.45; color:var(--dom-fg)} .t-card .who{margin-top:18px; font-family:var(--ff-body); font-size:12.5px; color:var(--dom-muted)} .t-card .who b{color:var(--dom-fg); font-weight:600} /* ===== Marquesina de reseñas (#opiniones) ===== */ .rm-rating{display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:7px 14px; border-radius:999px; background:rgba(192,83,31,.08); border:1px solid var(--dom-line); font-family:var(--ff-body); font-size:12.5px; color:var(--dom-muted)} .rm-rating b{font-family:var(--ff-title); font-size:16px; color:var(--dom-fg); font-weight:700; line-height:1} .rm-rating-stars{color:var(--terracota); letter-spacing:1.5px; font-size:12px} .rm-rating-sep{opacity:.5} .reviews-marquee{display:flex; flex-direction:column; gap:18px; margin-top:38px} .rm-row{overflow:hidden; touch-action:pan-y; cursor:grab; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)} .rm-row:active{cursor:grabbing} .rm-track{display:flex; gap:18px; width:max-content; will-change:transform} .rm-card{flex:0 0 auto; width:312px; box-sizing:border-box; padding:24px 24px 22px; border-radius:16px; background:#fff; border:1px solid var(--dom-line); box-shadow:0 18px 44px -32px rgba(29,28,26,.45); margin:0; display:flex; flex-direction:column; gap:10px} [data-scheme="oscuro"] .rm-card,[data-scheme="bordo"] .rm-card{background:rgba(242,235,221,.05)} .rm-stars{color:var(--terracota); font-size:14px; letter-spacing:2px; line-height:1} .rm-quote{margin:0; font-family:var(--ff-serif); font-size:18px; line-height:1.45; color:var(--dom-fg)} .rm-author{font-family:var(--ff-body); font-size:12.5px; color:var(--dom-muted); font-weight:600; margin-top:auto} .rm-cta{margin-top:34px; text-align:center} /* (marquesina ahora con scroll JS — sin keyframes) */ @media (min-width:760px){ .rm-card{width:340px; padding:28px 28px 24px} .rm-quote{font-size:19px} } /* ========================================================= EVENTOS ========================================================= */ .events{background:var(--brasa); color:var(--marfil); position:relative; overflow:hidden} .events .watermark{color:var(--marfil); opacity:.06} .events .grid{display:grid; grid-template-columns:1fr; gap:34px; align-items:center} @media (min-width:880px){ .events .grid{grid-template-columns:1.05fr .95fr; gap:54px} } .events h2{font-size:clamp(36px,7vw,60px); color:var(--marfil)} .events .script{font-size:clamp(26px,6vw,36px); color:var(--crema); display:block; margin-top:4px} .events p{color:rgba(242,235,221,.85); max-width:440px} .ev-list{display:flex; flex-direction:column; gap:2px; margin:24px 0 30px} .ev-list li{list-style:none; display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid rgba(242,235,221,.18); font-family:var(--ff-body)} .ev-list li:last-child{border-bottom:1px solid rgba(242,235,221,.18)} .ev-list .k{font-family:var(--ff-title); font-weight:var(--tw); font-size:24px; color:var(--marfil); min-width:30px} .ev-list .t b{display:block; font-size:15px} .ev-list .t span{font-size:13px; color:rgba(242,235,221,.7)} .ev-photo .ph{aspect-ratio:4/5; border-radius:16px} .ev-img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:16px} /* Promo "El festejado come gratis" — home: card translúcido (.ev-promo .promo); /precios: banner rojo (.promo-banner) */ .ev-promo{margin:8px 0 30px} .ev-promo .promo{padding:0; background:none; border:none} .promo-banner{position:relative; overflow:hidden; margin-top:26px; background:var(--brasa); color:var(--marfil); border-radius:18px; padding:32px 28px} .promo-seal{position:absolute; right:-14px; bottom:-20px; width:170px; height:170px; color:var(--crema); opacity:.1; pointer-events:none; z-index:0} .promo-body{position:relative; z-index:1} .promo-tag{display:inline-block; font-family:var(--ff-body); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--marfil); background:rgba(242,235,221,.16); border-radius:999px; padding:4px 12px; margin-bottom:14px} .promo-intro{margin:0; font-size:15px; line-height:1.5; color:rgba(242,235,221,.9); max-width:640px} .promo-intro strong{color:var(--marfil)} .promo-cases{display:flex; flex-direction:column; gap:16px; margin:18px 0 0} .promo-case{padding-left:16px; border-left:2px solid var(--crema)} .promo-day{display:block; font-family:var(--ff-title); font-weight:var(--tw); font-size:18px; color:var(--crema); margin-bottom:3px} .promo-case p{margin:0; font-size:14px; line-height:1.5; color:rgba(242,235,221,.85)} .promo-common-title{margin:22px 0 12px; padding-top:16px; border-top:1px solid rgba(242,235,221,.18); font-family:var(--ff-body); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--crema)} .promo-common{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px} .promo-common li{position:relative; padding-left:22px; font-size:13px; line-height:1.5; color:rgba(242,235,221,.8)} .promo-common li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--crema); font-weight:700} .promo-common strong{color:var(--marfil)} .faq-more{text-align:center; margin-top:30px} /* ========================================================= RESERVAS ========================================================= */ .reserve{background:var(--carbon); color:var(--marfil); position:relative; overflow:hidden} .reserve .ember{inset:auto -20% -30% -20%; height:60%} .reserve .inner{position:relative; z-index:1; max-width:720px; margin:0 auto; text-align:center} .reserve .eyebrow{color:var(--terracota)} .reserve h2{font-size:clamp(38px,8vw,64px); color:var(--marfil); margin:14px 0 6px} .reserve .script{font-size:clamp(26px,6vw,34px); color:var(--crema); display:block} .reserve .why{font-size:14.5px; color:rgba(242,235,221,.78); max-width:480px; margin:18px auto 0} .booking{margin-top:34px; background:rgba(242,235,221,.05); border:1px solid rgba(242,235,221,.16); border-radius:18px; padding:24px; text-align:left} .field{margin-bottom:18px} .field > label{display:block; font-family:var(--ff-body); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(242,235,221,.62); margin-bottom:10px} .seg{display:flex; flex-wrap:wrap; gap:8px} .seg button{font-family:var(--ff-body); font-size:14px; font-weight:600; color:var(--marfil); background:rgba(242,235,221,.06); border:1px solid rgba(242,235,221,.2); border-radius:10px; padding:11px 16px; cursor:pointer; transition:all .15s; min-width:46px} .seg button:hover{border-color:rgba(242,235,221,.45)} .seg button[aria-pressed="true"]{background:var(--terracota); border-color:var(--terracota); color:var(--marfil)} .frow{display:grid; grid-template-columns:1fr; gap:14px} @media (min-width:560px){ .frow{grid-template-columns:1fr 1fr} } .inp{width:100%; font-family:var(--ff-body); font-size:15px; color:var(--marfil); background:rgba(242,235,221,.06); border:1px solid rgba(242,235,221,.2); border-radius:10px; padding:13px 14px} .inp::-webkit-calendar-picker-indicator{filter:invert(.8)} .booking .summary{margin-top:6px; font-size:13px; color:rgba(242,235,221,.7); text-align:center} .booking .btn-wa{margin-top:18px} /* === Widget de reserva (Reserva.astro: home #reservas + /reservaciones) === Radios: contenedores 20 · controles 14 · pastillas/círculos full · acento único: terracota */ .rsv-card{border:1px solid var(--dom-line); border-radius:20px; background:#fff; padding:clamp(24px,4vw,34px); box-shadow:0 30px 70px -42px rgba(140,14,4,.4); text-align:left} .rsv-card h2{font-family:var(--ff-title); font-weight:var(--tw); font-size:clamp(25px,5vw,32px); margin:0 0 22px; color:var(--dom-fg); line-height:1.05} /* Cada campo es un bloque separado por un hairline para dar estructura editorial */ .rsv-field{padding-top:22px; margin-top:22px; border-top:1px solid var(--dom-line)} .rsv-field:first-of-type{padding-top:0; margin-top:0; border-top:none} .rsv-label{display:block; font-family:var(--ff-body); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dom-muted); margin-bottom:12px} /* Fecha (input que abre el modal) */ .rsv-input{width:100%; font-family:var(--ff-body); font-size:16px; color:var(--carbon); padding:14px 16px; border:1px solid var(--dom-line); border-radius:14px; background:var(--crema); transition:border-color .15s ease} .rsv-input:focus-visible{outline:2px solid var(--terracota); outline-offset:1px} .rsv-trigger{display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; cursor:pointer; font-weight:500} .rsv-trigger:hover{border-color:var(--terracota)} .rsv-cal-ico{flex:none; color:var(--terracota)} .rsv-hint{display:block; margin-top:10px; font-size:12.5px; color:var(--dom-muted)} /* Comensales */ .rsv-counts{display:flex; flex-direction:column; gap:16px} .rsv-count{display:flex; align-items:center; justify-content:space-between; gap:14px} .rsv-count__name{font-family:var(--ff-body); font-size:15.5px; font-weight:600; color:var(--carbon); line-height:1.25} .rsv-count__sub{display:block; font-size:12px; font-weight:400; color:var(--dom-muted); letter-spacing:0; text-transform:none} /* Stepper: pastilla con botones circulares */ .rsv-stepper{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--dom-line); border-radius:999px; padding:5px; background:var(--crema)} .rsv-stepper[hidden]{display:none} .rsv-step{width:34px; height:34px; display:grid; place-items:center; border:none; border-radius:50%; background:#fff; color:var(--brasa); font-size:19px; line-height:1; cursor:pointer; box-shadow:0 1px 2px rgba(140,14,4,.14); transition:background .15s ease, transform .08s ease} .rsv-step:hover{background:var(--crema-2)} .rsv-step:active{transform:translateY(1px)} .rsv-val{min-width:34px; text-align:center; font-family:var(--ff-body); font-size:17px; font-weight:700; color:var(--carbon)} /* Franjas */ .rsv-franjas{display:flex; flex-wrap:wrap; gap:8px} .rsv-franjas[hidden]{display:none} .rsv-franja{font-family:var(--ff-body); font-size:13.5px; font-weight:500; padding:9px 15px; border-radius:999px; border:1px solid var(--dom-line); background:#fff; color:var(--carbon); cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease, transform .08s ease} .rsv-franja:hover{border-color:var(--terracota); color:var(--terracota)} .rsv-franja:active{transform:translateY(1px)} .rsv-franja.is-active,.rsv-franja.is-active:hover{background:var(--terracota); border-color:var(--terracota); color:var(--marfil)} /* Aviso de cargo (> 10 personas) */ .rsv-fee{margin:16px 0 0; padding:13px 15px; border-radius:14px; background:rgba(192,83,31,.08); border:1px solid rgba(192,83,31,.22); color:var(--terracota); font-family:var(--ff-body); font-size:13px; line-height:1.5} .rsv-fee[hidden]{display:none} .rsv-fee strong{color:var(--terracota)} /* CTA + nota */ .rsv-card .btn-wa{margin-top:24px} .rsv-note{font-family:var(--ff-body); font-size:12.5px; line-height:1.6; color:var(--dom-muted); text-align:center; margin:12px 0 0} /* Variante DARK: solo en el home (sección #reservas .reserve). /reservaciones queda light. */ .reserve .rsv-card{background:rgba(242,235,221,.05); border-color:rgba(242,235,221,.16); box-shadow:none} .reserve .rsv-card h2{color:var(--marfil)} .reserve .rsv-field{border-top-color:rgba(242,235,221,.16)} .reserve .rsv-label{color:rgba(242,235,221,.62)} .reserve .rsv-input{background:rgba(242,235,221,.07); border-color:rgba(242,235,221,.22); color:var(--marfil)} .reserve .rsv-trigger:hover{border-color:var(--crema)} .reserve .rsv-cal-ico{color:var(--crema)} .reserve .rsv-hint{color:rgba(242,235,221,.6)} .reserve .rsv-count__name{color:var(--marfil)} .reserve .rsv-count__sub{color:rgba(242,235,221,.6)} .reserve .rsv-stepper{background:rgba(242,235,221,.07); border-color:rgba(242,235,221,.22)} .reserve .rsv-step{background:rgba(242,235,221,.12); color:var(--crema); box-shadow:none} .reserve .rsv-step:hover{background:rgba(242,235,221,.2)} .reserve .rsv-val{color:var(--marfil)} .reserve .rsv-franja{background:rgba(242,235,221,.06); border-color:rgba(242,235,221,.22); color:var(--marfil)} .reserve .rsv-franja:hover{border-color:var(--crema); color:var(--crema)} .reserve .rsv-franja.is-active,.reserve .rsv-franja.is-active:hover{background:var(--terracota); border-color:var(--terracota); color:var(--marfil)} .reserve .rsv-fee{background:rgba(192,83,31,.2); border-color:rgba(192,83,31,.42); color:var(--crema)} .reserve .rsv-fee strong{color:var(--marfil)} .reserve .rsv-note{color:rgba(242,235,221,.6)} /* Calendario en modal */ .rsv-modal{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px} .rsv-modal[hidden]{display:none} .rsv-modal__backdrop{position:absolute; inset:0; background:rgba(20,14,10,.55); backdrop-filter:blur(3px)} .rsv-modal__dialog{position:relative; z-index:1; width:min(380px,100%); background:#fff; border-radius:20px; padding:24px; box-shadow:0 40px 90px -25px rgba(0,0,0,.55); animation:rsvPop .18s cubic-bezier(.16,1,.3,1)} @keyframes rsvPop{from{opacity:0; transform:translateY(10px) scale(.97)} to{opacity:1; transform:none}} .rsv-modal__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px} .rsv-modal__title{font-family:var(--ff-title); font-weight:var(--tw); font-size:21px; color:var(--carbon)} .rsv-modal__x{width:36px; height:36px; display:grid; place-items:center; border:none; background:var(--crema); border-radius:50%; font-size:20px; line-height:1; color:var(--carbon); cursor:pointer; transition:background .15s ease} .rsv-modal__x:hover{background:var(--crema-2)} .rsv-cal__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px} .rsv-cal__title{font-family:var(--ff-body); font-weight:700; font-size:15px; color:var(--carbon)} .rsv-cal__nav{width:36px; height:36px; border:1px solid var(--dom-line); background:#fff; border-radius:50%; color:var(--carbon); cursor:pointer; font-size:18px; line-height:1; display:grid; place-items:center; transition:border-color .15s ease, color .15s ease} .rsv-cal__nav:hover:not(:disabled){border-color:var(--terracota); color:var(--terracota)} .rsv-cal__nav:disabled{opacity:.3; cursor:not-allowed} .rsv-cal__dow{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:8px} .rsv-cal__dow span{text-align:center; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--dom-muted)} .rsv-cal__grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px} .rsv-day{aspect-ratio:1; display:grid; place-items:center; border:none; background:transparent; border-radius:50%; font-family:var(--ff-body); font-size:14px; color:var(--carbon); cursor:pointer; padding:0; transition:background .12s ease} .rsv-day:hover:not(:disabled){background:var(--crema-2)} .rsv-day:disabled{color:rgba(29,28,26,.2); cursor:not-allowed} .rsv-day.is-empty{visibility:hidden; pointer-events:none} .rsv-day.is-selected,.rsv-day.is-selected:hover{background:var(--terracota); color:var(--marfil); font-weight:700} @media (prefers-reduced-motion: reduce){ .rsv-modal__dialog{animation:none} .rsv-input,.rsv-step,.rsv-franja,.rsv-cal__nav,.rsv-day,.rsv-modal__x{transition:none} .rsv-step:active,.rsv-franja:active{transform:none} } /* ========================================================= UBICACIÓN ========================================================= */ .locate .grid{display:grid; grid-template-columns:1fr; gap:30px} @media (min-width:880px){ .locate .grid{grid-template-columns:1fr 1fr; gap:48px; align-items:center} } @media (min-width:880px){ .locate .grid > .reveal:first-child{align-self:stretch; display:flex; flex-direction:column} .locate .map-ph{aspect-ratio:auto; flex:1 1 auto; min-height:380px} } .locate h2{font-size:clamp(34px,7vw,54px); margin-bottom:8px} .map-ph{aspect-ratio:4/3; border-radius:16px; background: linear-gradient(135deg,#d8c6aa,#c3ad8c); position:relative; overflow:hidden; border:1px solid var(--dom-line)} .map-ph .map-embed{position:absolute; inset:0; width:100%; height:100%; border:0; display:block} .map-ph .pin{position:absolute; top:46%; left:50%; transform:translate(-50%,-100%)} .map-ph .roads{position:absolute; inset:0; opacity:.5} .info-list{list-style:none; padding:0; margin:22px 0 0} .info-list li{display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--dom-line)} .info-list li:first-child{border-top:none; padding-top:0} .info-list .ic{flex:0 0 22px; color:var(--terracota); margin-top:2px} .info-list .k{font-family:var(--ff-body); font-weight:600; font-size:14px; display:block} .info-list .v{font-size:13.5px; color:var(--dom-muted)} .hours{display:flex; flex-direction:column; gap:6px} .hours .row{display:flex; justify-content:space-between; gap:16px; font-size:13.5px} .hours .row span:first-child{color:var(--dom-fg)} .hours .row span:last-child{color:var(--dom-muted)} /* ========================================================= FAQ ========================================================= */ .faq .head{max-width:600px; margin-bottom:30px} .faq .head h2{font-size:clamp(34px,7vw,54px)} .faq-list{max-width:820px} .faq-item{border-top:1px solid var(--dom-line)} .faq-item:last-child{border-bottom:1px solid var(--dom-line)} .faq-q{width:100%; background:none; border:none; cursor:pointer; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 0; font-family:var(--ff-title); font-weight:var(--tw); font-size:clamp(20px,4vw,26px); color:var(--dom-fg)} .faq-q .sign{flex:0 0 auto; width:24px; height:24px; position:relative; color:var(--terracota)} .faq-q .sign::before,.faq-q .sign::after{content:""; position:absolute; background:currentColor; left:50%; top:50%; transition:transform .25s} .faq-q .sign::before{width:16px; height:2px; transform:translate(-50%,-50%)} .faq-q .sign::after{width:2px; height:16px; transform:translate(-50%,-50%)} .faq-item[open] .faq-q .sign::after{transform:translate(-50%,-50%) scaleY(0)} .faq-a{overflow:hidden; font-size:15px; line-height:1.7; color:var(--dom-muted); max-width:680px; padding-bottom:22px} details.faq-item > summary{list-style:none} details.faq-item > summary::-webkit-details-marker{display:none} /* ========================================================= FOOTER ========================================================= */ .footer{background:var(--carbon); color:var(--marfil); padding:calc(64px * var(--pad)) 0 40px} .footer .grid{display:grid; grid-template-columns:1fr; gap:34px} @media (min-width:760px){ .footer .grid{grid-template-columns:1.2fr 1fr 1fr} } .footer h4{font-family:var(--ff-body); font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--terracota); margin-bottom:16px} .footer p,.footer a{font-size:14px; color:rgba(242,235,221,.8); text-decoration:none; line-height:1.8} .footer a:hover{color:var(--marfil)} .footer .brand-name{font-family:var(--ff-title); font-weight:var(--tw); font-size:30px; color:var(--marfil); margin:12px 0 0; line-height:1.1} .footer .tag{font-family:var(--ff-serif); font-style:italic; color:rgba(242,235,221,.7); font-size:16px; margin:6px 0 0} .footer .credit{margin:14px 0 0; font-size:12.5px; color:rgba(242,235,221,.5)} .footer .credit a{color:rgba(242,235,221,.7); text-decoration:underline; text-underline-offset:2px} .footer .credit a:hover{color:var(--marfil)} .footer .links{display:flex; flex-direction:column; gap:6px} .footer .bottom{margin-top:42px; padding-top:24px; border-top:1px solid rgba(242,235,221,.16); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:12px; color:rgba(242,235,221,.5)} /* sticky mobile reserve bar */ .sticky-bar{position:fixed; left:0; right:0; bottom:0; z-index:40; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(180deg, rgba(29,28,26,0), rgba(29,28,26,.92) 40%); display:flex; gap:12px; transform:translateY(120%); transition:transform .35s cubic-bezier(.2,.7,.3,1)} .sticky-bar.show{transform:none} .sticky-bar .btn-wa{flex:1; box-shadow:0 8px 30px -8px rgba(0,0,0,.6)} @media (min-width:880px){ .sticky-bar{display:none} } /* skip / a11y */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .ember{animation:none; opacity:calc(.7 * var(--ember))} .reveal{opacity:1 !important; transform:none !important; transition:none} } /* tweak: animaciones off */ [data-anim="off"] .ember{animation:none} [data-anim="off"] .reveal{opacity:1 !important; transform:none !important; transition:none} /* hero poster + sound toggle (integración real) */ .hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .sound-toggle .st-ic{display:block} .sound-toggle .st-ic--on{display:none} .sound-toggle.is-on .st-ic--muted{display:none} .sound-toggle.is-on .st-ic--on{display:block} /* === Corrección layout: secciones a altura de ventana + hero full-screen === */ .section{ min-height:100svh; display:flex; flex-direction:column; justify-content:center } @media (min-width:880px){ .hero-visual{ height:auto; min-height:100svh } } /* === hero-text (bordó) y proof también a 100vh: cada sección llena la ventana === */ .proof{ min-height:100svh; display:flex; flex-direction:column; justify-content:center } @media (min-width:880px){ .hero-text{ min-height:100svh; justify-content:center } } /* === marca de agua del logo: desbordando el borde, INTERCALADA izq/der por sección === */ .watermark{ top:50%; left:auto; right:-9%; transform:translateY(-50%); width:min(56vw,600px) } #precios .watermark, #eventos .watermark{ left:-9%; right:auto } /* === Watermark GRANDE en desktop (presencia de fondo, no sellito) === */ @media (min-width:880px){ .watermark{ width:min(92vw,1320px); opacity:.07 } #experiencia .watermark, #opiniones .watermark, #ubicacion .watermark{ right:-12%; left:auto } #precios .watermark, #eventos .watermark{ left:-12%; right:auto } .events .watermark{ opacity:.09 } .hero-watermark{ width:min(66vw,860px); height:auto; right:-10%; top:50%; transform:translateY(-50%) } } /* fix: el svg del watermark no tiene viewBox -> forzar proporción 1:1 para que escale grande */ .watermark{ aspect-ratio:1; height:auto } /* watermark: a la mitad (presencia sutil, no distrae) */ @media (min-width:880px){ .watermark{ width:min(48vw,680px) } .hero-watermark{ width:min(40vw,470px) } } /* En MÓVIL las secciones fluyen naturales (el alto de ventana es solo para desktop) */ @media (max-width:879px){ .section{ min-height:0; display:block } .proof{ min-height:auto; display:block } .watermark{ width:min(60vw,300px) } } /* === FIX overflow horizontal en móvil === */ html, body{ overflow-x:hidden; max-width:100% } @media (max-width:879px){ .hero-cta{ width:100%; align-items:stretch } .hero-cta .pill{ white-space:normal; justify-content:center; text-align:center; max-width:100% } .hero-cta .btn, .hero-cta .btn-wa{ width:100%; justify-content:center } .pill{ max-width:100%; white-space:normal } .section, .events, .hero{ overflow-x:clip } } /* ========================================================= HEADER — vidrio (frosted glass) ========================================================= */ .site-header{position:fixed; top:0; left:0; right:0; z-index:50; background:rgba(29,28,26,.42); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); border-bottom:1px solid rgba(242,235,221,.12); transition:background .3s ease} .site-header.scrolled{background:rgba(29,28,26,.72)} .site-header__inner{max-width:1180px; margin:0 auto; padding:11px 22px; display:flex; align-items:center; gap:16px} .site-header__logo{display:inline-flex; color:var(--marfil); line-height:0; position:relative; z-index:60; transform-origin:50% 0%; transition:transform .45s cubic-bezier(.2,.7,.3,1); will-change:transform} .site-header__logo:hover{transform:scale(2.4); filter:drop-shadow(0 6px 20px rgba(0,0,0,.45))} @media (prefers-reduced-motion: reduce){ .site-header__logo{transition:none} .site-header__logo:hover{transform:none} } .site-nav{display:none; gap:28px; margin-left:auto} .site-nav a{font-family:var(--ff-body); font-size:14px; letter-spacing:.03em; color:var(--marfil); text-decoration:none; opacity:.88; transition:opacity .2s,color .2s} .site-nav a:hover{opacity:1; color:var(--crema)} .site-header__cta{display:none; padding:10px 20px; font-size:13px; border-radius:999px; box-shadow:none} .nav-toggle{margin-left:auto; width:44px; height:44px; display:inline-flex; flex-direction:column; gap:5px; align-items:center; justify-content:center; background:none; border:0; cursor:pointer} .nav-toggle span{display:block; width:24px; height:2px; background:var(--marfil); border-radius:2px; transition:transform .25s,opacity .25s} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media (min-width:880px){ .site-nav{display:flex} .site-header__cta{display:inline-flex; margin-left:6px} .nav-toggle{display:none} } /* menú móvil overlay (vidrio) */ .mobile-menu{position:fixed; inset:0; z-index:49; opacity:0; visibility:hidden; background:rgba(29,28,26,.86); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); display:flex; align-items:center; justify-content:center; transition:opacity .3s ease, visibility .3s ease} .mobile-menu.open{opacity:1; visibility:visible} .mobile-menu nav{display:flex; flex-direction:column; align-items:center; gap:26px} .mobile-menu a{font-family:var(--ff-title); font-weight:var(--tw); font-size:34px; color:var(--marfil); text-decoration:none} .mobile-menu a.btn-wa{font-family:var(--ff-body); font-size:15px; margin-top:16px; padding:15px 26px} /* anchor offset para que el header fijo no tape el inicio de sección */ section[id], header[id]{scroll-margin-top:76px} /* === Anti-overflow móvil BULLETPROOF (sin depender de overflow-x:clip) === */ @media (max-width:879px){ .section, .events, .hero, .proof, .reserve{ overflow:hidden } .watermark{ left:50%; right:auto; transform:translate(-50%,-50%); width:min(72vw,300px); max-width:88vw } .hero-watermark{ left:50%; right:auto; transform:translate(-50%,-50%); top:42%; width:min(72vw,300px) } } /* hero poster responsive (vertical en móvil) + video que aparece al reproducir */ .hero-poster{position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block} .hero-poster img{width:100%; height:100%; object-fit:cover; display:block} .hero-vid{opacity:0; transition:opacity .6s ease} .hero.playing .hero-vid{opacity:1} /* === Movil: hero con LOGO grande centrado; video en seccion aparte abajo === */ .hero-logo{display:none} .section-video{display:none} @media (max-width:879px){ .hero .hero-vid{display:none} .hero-chrome{display:none} .hero-text{justify-content:space-between; align-items:center; text-align:center; padding:104px 26px 64px} .hero-logo{display:block; width:82px; height:82px; color:var(--marfil); margin:0 auto; filter:drop-shadow(0 2px 16px rgba(0,0,0,.5))} .hero-head{margin-top:0} .hero-cta{display:none} .hero-scrim{background:linear-gradient(180deg, rgba(29,12,8,.5) 0%, rgba(29,12,8,.18) 30%, rgba(29,12,8,.72) 70%, rgba(18,7,4,.97) 100%)} .hero-text h1, .hero-text .script, .hero-loc{text-shadow:0 2px 30px rgba(0,0,0,.6)} .hero-text h1{font-size:clamp(34px,9vw,42px); line-height:1} .hero-text .script{font-size:clamp(21px,5.6vw,26px); margin-top:4px} .hero-watermark{display:none} .section-video{display:block; background:var(--carbon); padding:0} .section-video video{width:100%; height:auto; display:block; background:#000} } /* Movil: velo mas oscuro para que el logo+texto del hero resalten sobre la foto */ @media (max-width:879px){ .hero-scrim{ background:linear-gradient(180deg, rgba(18,8,5,.62) 0%, rgba(18,8,5,.5) 42%, rgba(18,8,5,.58) 70%, rgba(18,8,5,.85) 100%) } } /* === Video (movil): 16:9 con poster propio, en marco === */ @media (max-width:879px){ .section-video{display:block; background:var(--carbon); padding:46px 0} .section-video .eyebrow{padding:0 22px; margin-bottom:14px; color:var(--terracota)} .video-frame{margin:0 22px; border-radius:14px; overflow:hidden; box-shadow:0 16px 40px -20px rgba(0,0,0,.7)} .section-video video{width:100%; aspect-ratio:16/9; height:auto; display:block; background:#000; object-fit:cover} } @media (max-width:879px){ .section-video .video-frame{margin:0} } /* === Control de saltos de linea (wraps) === */ @media (min-width:880px){ .br-sm{display:none} } /* h1 en una sola linea en desktop */ .hero-loc{text-wrap:balance} .lead, .exp-card p, .t-card blockquote, .events p, .reserve .why{text-wrap:pretty} /* consistencia: eyebrow de estaciones en terracota como el resto */ .stations p.eyebrow{color:var(--terracota)} /* === Fix: titulos cortos a UNA linea en desktop (no apretar con max-width) === */ @media (min-width:880px){ .stations .head{ max-width:none } .testi .head{ max-width:none } .stations .head .lead{ max-width:560px } .locate .grid{ grid-template-columns:0.82fr 1.18fr } } /* === Lightbox / carrusel de galería === */ .lightbox{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,48px); background:rgba(15,12,10,.92); opacity:0; transition:opacity .25s ease} .lightbox[hidden]{display:none} .lightbox.is-open{opacity:1} .lb-figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; max-width:100%; max-height:100%} .lb-img{display:block; max-width:min(92vw,1100px); max-height:82vh; width:auto; height:auto; object-fit:contain; border-radius:8px; box-shadow:0 24px 60px rgba(0,0,0,.5)} .lb-caption{font-family:var(--ff-serif); font-style:italic; font-size:14px; line-height:1.4; color:var(--crema); text-align:center; max-width:60ch; opacity:.85; margin:0} .lb-caption:empty{display:none} .lightbox button{cursor:pointer; -webkit-appearance:none; appearance:none; color:var(--marfil); background:rgba(38,36,34,.7); border:1px solid rgba(242,235,221,.18); border-radius:999px; line-height:1} .lightbox button:hover{background:var(--terracota); border-color:transparent} .lightbox button:focus-visible{outline:2px solid var(--crema); outline-offset:3px} .lb-close{position:absolute; top:clamp(12px,3vw,24px); right:clamp(12px,3vw,24px); width:44px; height:44px; font-size:26px} .lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:30px} .lb-prev{left:clamp(8px,2vw,24px)} .lb-next{right:clamp(8px,2vw,24px)} @media (max-width:560px){ .lb-img{max-height:70vh} .lb-nav{width:44px; height:44px; font-size:24px} } @media (prefers-reduced-motion: reduce){ .lightbox{transition:none} .g-item img{transition:none} }