/* ===== Zona Jaguar — Experiencias 2026 ===== */ /* ---- Theme directions (set on ) ---- */ :root[data-direction="a"]{ --bg:#0c1310; --bg-alt:#0f1a14; --surface:#13201a; --surface-2:#172a21; --text:#ece4d3; --muted:#9aa79b; --faint:#6f7d72; --accent:#c6a253; --accent-2:#4e8f76; --line:rgba(198,162,83,.22); --line-soft:rgba(236,228,211,.10); --dir-name:"Selva Nocturna"; } :root[data-direction="b"]{ --bg:#100c07; --bg-alt:#17110a; --surface:#1c150c; --surface-2:#241a0e; --text:#f0e6d2; --muted:#b09f86; --faint:#8a7a60; --accent:#d8b25a; --accent-2:#b8763e; --line:rgba(216,178,90,.25); --line-soft:rgba(240,230,210,.10); --dir-name:"Templo de Oro"; } :root[data-direction="c"]{ --bg:#101314; --bg-alt:#161b1c; --surface:#1a2122; --surface-2:#212a2b; --text:#e6e7e2; --muted:#97a09c; --faint:#6c7672; --accent:#b7a878; --accent-2:#6f8f86; --line:rgba(183,168,120,.20); --line-soft:rgba(230,231,226,.10); --dir-name:"Bruma de Piedra"; } :root{ --accent-user:none; /* set by Tweaks; falls back to --accent */ --display:"Cormorant Garamond", Georgia, serif; --body:"EB Garamond", Georgia, serif; --maxw:1180px; } :root[data-grain="off"] body::before{ display:none; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--body); font-size:19px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } body::before{ /* grain */ content:""; position:fixed; inset:0; z-index:9; pointer-events:none; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:overlay; } .eff-accent{ color:var(--accent); } .use-accent{ color:var(--acc); } /* ---- type ---- */ h1,h2,h3{ font-family:var(--display); font-weight:500; line-height:1.06; margin:0; letter-spacing:.005em; } p{ margin:0 0 1em; } a{ color:inherit; text-decoration:none; } .eyebrow{ font-family:var(--body); font-size:.82rem; letter-spacing:.32em; text-transform:uppercase; color:var(--accent); font-weight:600; } .lead{ color:var(--muted); font-size:1.18rem; } /* accent helper resolves user override */ .acc{ color:var(--accent); } /* ---- layout ---- */ .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; } section{ position:relative; } .section-pad{ padding:120px 0; } .divider-rule{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); border:0; margin:0; } /* ---- nav ---- */ header.nav{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:18px 32px; transition:background .4s, padding .4s, border-color .4s; border-bottom:1px solid transparent; } header.nav.scrolled{ background:color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft); padding:12px 32px; } .brand{ display:flex; align-items:center; gap:14px; } .brand img.brand-logo{ width:48px; height:48px; object-fit:contain; flex:none; display:block; } .brand .brand-txt{ display:flex; flex-direction:column; gap:3px; } .brand .brand-txt b{ font-family:var(--display); font-size:1.18rem; font-weight:600; letter-spacing:.01em; line-height:1; white-space:nowrap; } .brand .brand-txt span{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); white-space:nowrap; } .nav-right{ display:flex; align-items:center; gap:26px; } nav.links{ display:flex; align-items:center; gap:26px; } nav.links a{ font-size:.84rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); transition:color .2s; } nav.links a:hover{ color:var(--text); } .btn{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-family:var(--body); font-size:.92rem; letter-spacing:.04em; padding:13px 24px; border-radius:2px; border:1px solid var(--accent); color:var(--bg); background:var(--accent); transition:transform .25s, box-shadow .25s, background .25s; font-weight:600; } .btn:hover{ transform:translateY(-2px); box-shadow:0 12px 32px -12px var(--accent); } .btn.ghost{ background:transparent; color:var(--accent); } .btn.ghost:hover{ background:color-mix(in oklab, var(--accent) 14%, transparent); box-shadow:none; } .btn svg{ width:17px; height:17px; } nav.links .btn{ color:var(--bg); } /* ---- mobile menu components (hidden on desktop) ---- */ .nav-burger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:10px; background:none; border:0; cursor:pointer; } .nav-burger span{ display:block; height:2px; width:100%; background:var(--text); border-radius:2px; transition:transform .3s, opacity .25s; } .nav-burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav-burger.is-open span:nth-child(2){ opacity:0; } .nav-burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .m-menu{ position:fixed; inset:0; z-index:45; background:color-mix(in oklab, var(--bg) 96%, transparent); backdrop-filter:blur(18px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .35s; } body.menu-open .m-menu{ opacity:1; pointer-events:auto; } .m-menu-links{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; } .m-menu-links a{ font-family:var(--display); font-size:2rem; color:var(--text); padding:10px 20px; opacity:0; transform:translateY(14px); transition:opacity .4s, transform .4s, color .2s; } body.menu-open .m-menu-links a{ opacity:1; transform:none; } body.menu-open .m-menu-links a:nth-child(1){ transition-delay:.06s; } body.menu-open .m-menu-links a:nth-child(2){ transition-delay:.10s; } body.menu-open .m-menu-links a:nth-child(3){ transition-delay:.14s; } body.menu-open .m-menu-links a:nth-child(4){ transition-delay:.18s; } body.menu-open .m-menu-links a:nth-child(5){ transition-delay:.22s; } .m-menu-links a:not(.btn):hover{ color:var(--accent); } .m-menu-cta{ margin-top:22px; font-family:var(--body); font-size:1.05rem !important; color:var(--bg) !important; } body.menu-open{ overflow:hidden; } .m-cta-bar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:40; align-items:center; justify-content:center; gap:10px; padding:15px 20px calc(15px + env(safe-area-inset-bottom)); font-weight:600; font-size:1.02rem; background:var(--accent); color:var(--bg); border-top:1px solid color-mix(in oklab, var(--accent) 70%, black); box-shadow:0 -10px 30px -12px rgba(0,0,0,.6); } .m-cta-bar svg{ width:20px; height:20px; } /* ---- hero ---- */ .hero{ min-height:100svh; display:flex; align-items:center; padding-top:90px; overflow:hidden; } .hero-bg{ position:absolute; inset:0; z-index:0; } .hero-bg image-slot{ width:100%; height:100%; } .hero-bg::after{ content:""; position:absolute; inset:0; background: radial-gradient(120% 90% at 75% 20%, transparent 0%, var(--bg) 78%), linear-gradient(180deg, color-mix(in oklab,var(--bg) 35%,transparent) 0%, color-mix(in oklab,var(--bg) 20%,transparent) 40%, var(--bg) 100%); } .hero .wrap{ position:relative; z-index:2; } .hero-inner{ max-width:760px; display:flex; flex-direction:column; align-items:flex-start; } .hero h1{ font-size:clamp(3rem, 7.2vw, 6rem); line-height:1.05; margin:.22em 0 .82em; } .hero h1 .l1, .hero h1 .l2{ display:block; } .hero h1 .l2{ padding-bottom:.22em; } .hero h1 em{ font-style:italic; color:var(--accent); } .hero .lead{ max-width:560px; font-size:1.32rem; margin:0; } .hero-cta{ display:flex; gap:16px; flex-wrap:wrap; margin-top:38px; align-items:center; } .hero-meta{ margin-top:64px; display:flex; gap:42px; flex-wrap:wrap; color:var(--muted); } .hero-meta .m b{ display:block; font-family:var(--display); color:var(--text); font-size:1.5rem; } .hero-meta .m span{ font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; } /* ---- glyph (subtle jaguar-rosette accent) ---- */ .rosette{ display:inline-block; width:42px; height:42px; opacity:.85; } .rosette svg{ width:100%; height:100%; } /* ---- section heading block ---- */ .shead{ max-width:680px; margin-bottom:56px; } .shead .eyebrow{ display:block; margin-bottom:18px; } .shead h2{ font-size:clamp(2.1rem,4.2vw,3.3rem); } .shead p{ color:var(--muted); margin-top:18px; font-size:1.14rem; } .center{ margin-left:auto; margin-right:auto; text-align:center; } /* ---- proposito ---- */ .proposito{ background:var(--bg-alt); } .prop-grid{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; } .prop-grid image-slot{ width:100%; height:480px; } .prop-text h2{ font-size:clamp(2rem,4vw,3rem); margin-bottom:24px; } .prop-text p{ font-size:1.16rem; } .pull{ font-family:var(--display); font-style:italic; font-size:1.5rem; color:var(--accent); line-height:1.4; border-left:2px solid var(--accent); padding-left:22px; margin:34px 0 0; } /* ---- zonas ---- */ .zonas-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); } .zona-tile{ background:var(--bg); padding:42px 34px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; transition:background .3s, transform .3s; position:relative; } .zona-tile:hover{ background:var(--surface); } .zona-tile .zd{ width:14px; height:14px; background:var(--accent); transform:rotate(45deg); transition:transform .4s, background .3s; } .zona-tile:hover .zd{ transform:rotate(135deg); } .zona-tile .ze{ font-family:var(--body); font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); } .zona-tile h3{ font-size:2rem; transition:color .3s; } .zona-tile:hover h3{ color:var(--accent); } /* ---- calendarios ---- */ .cal-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px; } .cal-tab{ font-family:var(--body); font-size:.96rem; letter-spacing:.06em; cursor:pointer; padding:11px 22px; border:1px solid var(--line); border-radius:2px; color:var(--muted); background:transparent; transition:all .25s; } .cal-tab:hover{ color:var(--text); border-color:var(--accent); } .cal-tab.active{ background:var(--accent); color:var(--bg); border-color:var(--accent); font-weight:600; } .cal-panel{ display:none; } .cal-panel.active{ display:block; animation:fade .5s ease; } @keyframes fade{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} } .cal-layout{ display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:start; } .cal-side image-slot{ width:100%; height:300px; margin-bottom:22px; } .cal-side h3{ font-size:1.7rem; margin-bottom:8px; } .cal-side .place{ color:var(--accent); font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:14px; } .cal-side p{ color:var(--muted); font-size:1.04rem; } .event-list{ display:flex; flex-direction:column; } .event{ display:grid; grid-template-columns:84px 1fr auto; gap:24px; align-items:center; padding:22px 4px; border-top:1px solid var(--line-soft); transition:background .25s, padding .25s; } .event:last-child{ border-bottom:1px solid var(--line-soft); } .event:hover{ background:color-mix(in oklab, var(--accent) 6%, transparent); padding-left:14px; padding-right:14px; } .event .date{ text-align:center; } .event .date b{ display:block; font-family:var(--display); font-size:2rem; line-height:1; color:var(--accent); } .event .date span{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); } .event .info h4{ font-family:var(--display); font-weight:500; font-size:1.32rem; margin:0 0 4px; } .event .info p{ margin:0; color:var(--muted); font-size:.96rem; } .event .tag{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-2); border:1px solid var(--line); padding:5px 12px; border-radius:2px; white-space:nowrap; } .cal-note{ margin-top:26px; color:var(--faint); font-size:.9rem; font-style:italic; } /* ---- salas ---- */ .salas{ background:var(--bg-alt); } .salas-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); } .sala{ background:var(--bg-alt); padding:42px 34px; transition:background .3s; position:relative; } .sala:hover{ background:var(--surface); } .sala .num{ font-family:var(--display); font-size:.95rem; color:var(--accent); letter-spacing:.1em; } .sala h3{ font-size:1.7rem; margin:18px 0 12px; } .sala p{ color:var(--muted); font-size:1.02rem; margin:0; } /* ---- aniversario ---- */ .aniv{ position:relative; overflow:hidden; padding:140px 0; text-align:center; } .aniv .bg-slot{ position:absolute; inset:0; z-index:0; } .aniv .bg-slot image-slot{ width:100%; height:100%; } .aniv .bg-slot::after{ content:""; position:absolute; inset:0; background:color-mix(in oklab, var(--bg) 80%, transparent); } .aniv .wrap{ position:relative; z-index:2; } .aniv .big{ font-family:var(--display); font-size:clamp(5rem,16vw,13rem); line-height:.9; color:var(--accent); font-weight:600; } .aniv .big small{ font-size:.18em; vertical-align:super; } .aniv h2{ font-size:clamp(2rem,4.5vw,3.4rem); margin:6px 0 20px; } .aniv p{ color:var(--muted); font-size:1.18rem; max-width:560px; margin:0 auto 32px; } /* ---- galeria ---- */ .gal-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px; } .gal-grid image-slot{ width:100%; height:100%; } .gal-grid .tall{ grid-row:span 2; } .gal-grid .wide{ grid-column:span 2; } /* ---- directorio ---- */ .directorio{ background:var(--bg-alt); } .dir-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 360px)); gap:24px; justify-content:start; } .dir-card{ display:flex; flex-direction:column; gap:0; border:1px solid var(--line); padding:32px; border-radius:4px; background:var(--surface); transition:transform .3s, border-color .3s, box-shadow .3s; } .dir-card:hover{ transform:translateY(-4px); border-color:var(--accent); box-shadow:0 22px 48px -28px rgba(0,0,0,.8); } .dir-card .zona-badge{ align-self:flex-start; display:inline-flex; align-items:center; gap:7px; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); border:1px solid var(--line); border-radius:100px; padding:6px 13px; margin-bottom:20px; } .dir-card .zona-badge i{ width:6px; height:6px; border-radius:50%; background:var(--accent); display:block; } .dir-card h3{ font-size:1.85rem; margin:0 0 3px; } .dir-card .loc{ color:var(--muted); font-size:1rem; } .dir-card .leader{ margin:18px 0 4px; font-family:var(--display); font-style:italic; font-size:1.28rem; color:var(--text); } .dir-card .leader span{ display:block; font-family:var(--body); font-style:normal; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:4px; } .dir-card .rows{ display:flex; flex-direction:column; gap:11px; margin:20px 0; padding-top:20px; border-top:1px solid var(--line-soft); } .dir-card .row{ display:flex; gap:11px; align-items:flex-start; color:var(--muted); font-size:.97rem; line-height:1.45; } .dir-card .row svg{ width:17px; height:17px; flex:none; color:var(--accent-2); margin-top:2px; } .dir-card .actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; } .dir-card .actions a{ display:inline-flex; align-items:center; gap:7px; font-size:.85rem; letter-spacing:.02em; padding:9px 15px; border-radius:2px; border:1px solid var(--line); color:var(--text); transition:all .22s; } .dir-card .actions a svg{ width:15px; height:15px; flex:none; } .dir-card .actions a:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); } .dir-card .actions a.wa{ background:var(--accent); color:var(--bg); border-color:var(--accent); font-weight:600; } .dir-card .actions a.wa:hover{ color:var(--bg); filter:brightness(1.08); } .dir-empty{ grid-column:1/-1; text-align:center; color:var(--faint); font-style:italic; padding:40px 0; } /* ---- contacto / cierre ---- */ .cierre{ text-align:center; padding:150px 0 120px; } .cierre .rosette{ width:56px; height:56px; margin-bottom:30px; } .cierre h2{ font-size:clamp(2.4rem,5.5vw,4.4rem); max-width:780px; margin:0 auto 22px; } .cierre h2 em{ font-style:italic; color:var(--accent); } .cierre p{ color:var(--muted); font-size:1.2rem; max-width:540px; margin:0 auto 40px; } .contact-row{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; align-items:center; } .social{ display:flex; gap:14px; justify-content:center; margin-top:46px; } .social a{ width:48px; height:48px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; color:var(--muted); transition:all .25s; } .social a:hover{ color:var(--accent); border-color:var(--accent); transform:translateY(-3px); } .social a svg{ width:20px; height:20px; } /* ---- footer ---- */ footer.foot{ border-top:1px solid var(--line-soft); padding:42px 0; } footer.foot .wrap{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; color:var(--faint); font-size:.86rem; } footer.foot a:hover{ color:var(--accent); } /* ---- reveal ---- */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); } .reveal.in{ opacity:1; transform:none; } /* ---- responsive ---- */ @media (max-width:1040px){ nav.links{ display:none; } .nav-cta{ display:none; } .nav-burger{ display:flex; } } /* tablets */ @media (max-width:900px){ body{ font-size:18px; } .section-pad{ padding:80px 0; } .prop-grid, .cal-layout{ grid-template-columns:1fr; gap:36px; } .salas-grid, .dir-grid{ grid-template-columns:1fr; } .gal-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; } .prop-grid image-slot{ height:320px; } .wrap{ padding:0 22px; } header.nav{ padding:14px 22px; } } /* phones */ @media (max-width:620px){ body{ font-size:17px; } .wrap{ padding:0 20px; } header.nav{ padding:14px 20px; } header.nav.scrolled{ padding:11px 20px; } .section-pad{ padding:64px 0; } .shead{ margin-bottom:38px; } /* nav */ .brand image-slot{ width:40px; height:40px; } .brand .brand-txt b{ font-size:1.05rem; } .brand .brand-txt span{ font-size:.56rem; letter-spacing:.18em; } /* hero */ .hero{ min-height:auto; padding-top:120px; padding-bottom:64px; } .hero h1{ font-size:clamp(2.4rem, 11vw, 3.4rem); line-height:1.12; margin:.2em 0 .55em; } .hero h1 .l2{ padding-bottom:.12em; } .hero .lead{ font-size:1.12rem; } .hero-cta{ flex-direction:column; align-items:stretch; gap:12px; margin-top:30px; width:100%; } .hero-cta .btn{ justify-content:center; width:100%; padding:15px 24px; } .hero-meta{ margin-top:44px; gap:0; justify-content:space-between; width:100%; } .hero-meta .m{ flex:1; } .hero-meta .m b{ font-size:1.3rem; } .hero-meta .m span{ font-size:.66rem; letter-spacing:.12em; } /* propósito */ .prop-grid{ gap:28px; } .prop-grid image-slot{ height:260px; } .pull{ font-size:1.28rem; } /* calendarios */ .cal-tabs{ gap:8px; margin-bottom:30px; } .cal-tab{ flex:1; text-align:center; padding:12px 10px; font-size:.86rem; } .cal-side image-slot{ height:220px; } .event{ grid-template-columns:60px 1fr; gap:16px; padding:18px 2px; row-gap:4px; } .event .date b{ font-size:1.6rem; } .event .info h4{ font-size:1.18rem; } .event .tag{ grid-column:2; justify-self:start; margin-top:2px; } .event:hover{ padding-left:2px; padding-right:2px; background:none; } /* salas */ .sala{ padding:30px 26px; } .sala h3{ font-size:1.55rem; } /* aniversario */ .aniv{ padding:90px 0; } .aniv .big{ font-size:clamp(5rem, 34vw, 9rem); } .aniv p{ font-size:1.08rem; } .aniv .btn{ width:100%; max-width:340px; justify-content:center; } /* galería */ .gal-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; gap:10px; } .gal-grid .wide{ grid-column:span 2; } .gal-grid .tall{ grid-row:span 2; } /* directorio */ .dir-grid{ grid-template-columns:1fr; } .dir-card{ padding:28px; } .dir-card .actions a{ flex:1; justify-content:center; } /* cierre */ .cierre{ padding:90px 0 80px; } .contact-row .btn{ width:100%; max-width:340px; justify-content:center; } /* footer + sticky bar */ footer.foot{ padding:34px 0 96px; } footer.foot .wrap{ flex-direction:column; align-items:flex-start; gap:10px; text-align:left; } .m-cta-bar{ display:flex; } } @media (max-width:380px){ .hero-meta{ flex-wrap:wrap; gap:18px 0; } .hero-meta .m{ flex:0 0 50%; } .gal-grid{ grid-template-columns:1fr; grid-auto-rows:200px; } .gal-grid .wide, .gal-grid .tall{ grid-column:auto; grid-row:auto; } } @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } .m-menu-links a{ opacity:1; transform:none; } }