/* ============================================================
   CASA PIPARRA — V2
   Experiencia editorial / cinematográfica
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --negro:        #0b0b09;
  --negro-2:      #131310;
  --granate:      #5c141c;
  --granate-2:    #7a1e28;
  --verde:        #12321f;
  --verde-2:      #1b4a2c;
  --dorado:       #c9a227;
  --dorado-claro: #e6c667;
  --crema:        #f4ede0;
  --crema-2:      #ece2cf;
  --tierra:       #a9855f;
  --piedra:       #d8cbb2;

  --tinta:        #1c1a16;
  --tinta-suave:  #55503f;

  --f-display: 'Fraunces', 'Georgia', serif;
  --f-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.16,.84,.44,1);
  --ease-cine: cubic-bezier(.18,.78,.26,1);

  --header-h: 84px;
}
@media (max-width:720px){ :root{ --header-h: 64px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}
body{
  margin:0;
  background:var(--crema);
  color:var(--tinta);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 28px; }
@media (max-width:720px){ .container{ padding:0 20px; } }

a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{
  outline:2px solid var(--dorado); outline-offset:3px;
}
::selection{ background:var(--granate); color:var(--crema); }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--negro); }
::-webkit-scrollbar-thumb{ background:var(--tierra); border-radius:10px; }

.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:1000;
  background:linear-gradient(90deg,var(--dorado),var(--granate-2));
  transition:width .08s linear;
}

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--dorado); color:var(--negro);
  padding:12px 20px; z-index:2000; font-weight:700; font-size:.85rem;
}
.skip-link:focus{ left:16px; top:16px; }

.on-dark{ color:var(--crema); }
.on-dark .section-lede{ color:#cfc6b4; }

/* ============================================================
   TIPOGRAFÍA COMPARTIDA
   ============================================================ */
.eyebrow{
  font-family:var(--f-body); font-weight:700; font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--dorado); display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--dorado); display:inline-block; }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::before{ display:none; }

.section-title{
  font-family:var(--f-display); font-weight:500; font-size:clamp(2.1rem,5vw,3.7rem);
  line-height:1.12; letter-spacing:-.01em; margin-top:16px;
}
.section-title em{ font-style:italic; font-weight:400; color:var(--granate); }
.on-dark .section-title em{ color:var(--dorado-claro); }
.section-lede{ font-family:var(--f-body); font-size:1.05rem; color:var(--tinta-suave); max-width:54ch; margin-top:18px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; font-family:var(--f-body); font-weight:700; font-size:.8rem;
  letter-spacing:.09em; text-transform:uppercase; border-radius:2px; border:1px solid transparent;
  transition:transform .45s var(--ease), background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--granate); color:var(--crema); box-shadow:0 10px 24px -12px rgba(92,20,28,.7); }
.btn-primary:hover{ background:var(--granate-2); transform:translateY(-2px); }
.btn-gold{ background:var(--dorado); color:var(--negro); }
.btn-gold:hover{ background:var(--dorado-claro); transform:translateY(-2px); }
.btn-outline{ background:transparent; border-color:rgba(244,237,224,.4); color:var(--crema); }
.btn-outline:hover{ border-color:var(--dorado); color:var(--dorado-claro); transform:translateY(-2px); }
.btn-outline.on-light{ border-color:rgba(28,26,22,.28); color:var(--tinta); }
.btn-outline.on-light:hover{ border-color:var(--granate); color:var(--granate); }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px; font-size:.75rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--granate);
  border-bottom:1px solid currentColor; padding-bottom:2px;
}
.on-dark .link-arrow{ color:var(--dorado-claro); }
.link-arrow .arrow{ transition:transform .35s var(--ease); }
.link-arrow:hover .arrow{ transform:translateX(5px); }

.badge-pendiente{
  display:inline-flex; align-items:center; gap:6px; font-size:.62rem; letter-spacing:.08em;
  text-transform:uppercase; font-weight:700; color:var(--tierra);
  border:1px solid rgba(169,133,95,.4); padding:3px 9px; border-radius:20px;
}
.pending{ color:var(--tierra) !important; font-style:italic; }

@media (max-width:640px){ .hide-mobile{ display:none; } }

/* ============================================================
   REVEAL SYSTEM
   ============================================================ */
[data-reveal]{
  opacity:0; transform:translateY(38px);
  transition:opacity .9s var(--ease-soft), transform .9s var(--ease-soft);
  transition-delay:var(--delay,0s);
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-46px); }
[data-reveal="left"].is-visible{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(46px); }
[data-reveal="right"].is-visible{ transform:translateX(0); }
[data-reveal="scale"]{ transform:scale(.94); }
[data-reveal="scale"].is-visible{ transform:scale(1); }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* word-by-word tone reveal (El Ritual) */
.tone-word{
  color:#b9ad93; transition:color 1s var(--ease-soft); transition-delay:var(--wd,0s);
}
.on-dark .tone-word{ color:#8f8770; }
.tone-line.is-visible .tone-word{ color:var(--crema); }
.tone-line.is-visible .tone-word.gold{ color:var(--dorado-claro); }
.tone-line:not(.on-dark-quote).is-visible .tone-word{ color:var(--tinta); }
.tone-line:not(.on-dark-quote).is-visible .tone-word.gold{ color:var(--granate); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:900; height:var(--header-h);
  display:flex; align-items:center; background:transparent;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), backdrop-filter .5s ease;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:100%; }
.site-header.is-scrolled{
  background:rgba(11,11,9,.86); backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.7);
}
.brand{ display:flex; align-items:center; gap:12px; z-index:2; }
.brand-mark{ width:38px; height:auto; display:inline-flex; transition:transform .6s var(--ease); }
.brand-mark svg{ width:100%; height:auto; display:block; }
.site-header.is-scrolled .brand-mark{ transform:scale(.92); }
.brand-word{ font-family:var(--f-display); font-size:1.22rem; letter-spacing:.03em; color:var(--crema); line-height:1; }
.brand-word small{
  display:block; font-family:var(--f-body); font-size:.54rem; letter-spacing:.22em;
  color:var(--dorado); text-transform:uppercase; margin-top:5px; font-weight:700;
}
.main-nav{ display:flex; }
.main-nav ul{ display:flex; gap:30px; align-items:center; }
.main-nav a{
  font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--crema); opacity:.82; position:relative; padding:6px 0;
  transition:opacity .3s ease, color .3s ease;
}
.main-nav a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--dorado); transition:width .4s var(--ease); }
.main-nav a:hover, .main-nav a.is-active{ opacity:1; color:var(--dorado-claro); }
.main-nav a:hover::after, .main-nav a.is-active::after{ width:100%; }
.header-cta{ display:flex; align-items:center; gap:16px; }
.header-cta .btn{ padding:11px 22px; }
.nav-toggle{ display:none; width:44px; height:44px; align-items:center; justify-content:center; z-index:2; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; display:block; width:22px; height:2px; background:var(--crema); position:relative;
  transition:transform .35s var(--ease), opacity .3s ease, background .3s ease;
}
.nav-toggle span::before{ position:absolute; top:-8px; }
.nav-toggle span::after{ position:absolute; top:8px; }
.nav-toggle.is-open span{ background:transparent; }
.nav-toggle.is-open span::before{ top:0; transform:rotate(45deg); background:var(--dorado); }
.nav-toggle.is-open span::after{ top:0; transform:rotate(-45deg); background:var(--dorado); }
@media (max-width:960px){
  .main-nav{
    position:fixed; inset:0; background:var(--negro); display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:opacity .5s var(--ease);
  }
  .main-nav.is-open{ opacity:1; visibility:visible; }
  .main-nav ul{ flex-direction:column; gap:24px; text-align:center; }
  .main-nav a{ font-size:1.25rem; }
  .header-cta .btn-outline{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ============================================================
   01 — HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; overflow:hidden; background:var(--negro);
}
/* Atenuación de esquina (marca de agua del render de interiorismo) — SOLO opacidad/color, nunca blur.
   Se aplica como <span class="corner-dim"> justo después de la foto real, nunca como filtro sobre la imagen. */
.corner-dim{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(ellipse 46% 46% at 88% 88%, rgba(6,6,5,.82) 0%, rgba(6,6,5,.5) 42%, rgba(6,6,5,0) 72%);
}

.hero-media{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.hero-media img,
.hero-media video{
  position:absolute; inset:-4%; width:108%; height:108%; object-fit:cover;
  animation:heroKenBurns 22s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroKenBurns{
  from{ transform:scale(1) translate3d(0,0,0); }
  to{ transform:scale(1.09) translate3d(-1%,-1%,0); }
}
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(9,9,7,.55) 0%, rgba(9,9,7,.35) 35%, rgba(9,9,7,.62) 78%, rgba(9,9,7,.88) 100%),
    radial-gradient(ellipse at 50% 30%, rgba(201,162,39,.14), transparent 60%);
}
.hero-inner{
  position:relative; z-index:2; text-align:center; display:flex; flex-direction:column;
  align-items:center; padding:36px 20px 50px; will-change:transform, opacity;
}
.hero-logo{
  width:min(300px,58vw); opacity:0; transform:translateY(16px) scale(.97);
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.6));
  transition:opacity 1.3s var(--ease-cine), transform 1.3s var(--ease-cine);
}
.hero.play-intro .hero-logo{ opacity:1; transform:translateY(0) scale(1); }
.hero-eyebrow{ margin-top:22px; color:var(--dorado-claro); opacity:0; }
.hero-title{
  font-family:var(--f-display); color:var(--crema); font-weight:500;
  font-size:clamp(2.3rem,7vw,4.6rem); line-height:1.16; letter-spacing:-.01em; margin-top:16px;
}
.hero-title .line{ display:block; overflow:hidden; padding-top:.06em; margin-top:-.06em; }
.hero-title .line span{ display:inline-block; transform:translateY(115%); }
.hero-title em{ font-style:italic; font-weight:400; color:var(--dorado); }
.hero-actions{ margin-top:32px; display:flex; gap:16px; flex-wrap:wrap; justify-content:center; opacity:0; }
.scroll-cue{
  position:relative; margin-top:44px; display:flex; flex-direction:column; align-items:center;
  gap:10px; color:#c9bfa9; opacity:0;
}
.scroll-cue span{ font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; }
.scroll-cue .line{ width:1px; height:38px; background:linear-gradient(var(--dorado),transparent); position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:''; position:absolute; top:-100%; left:0; right:0; height:100%; background:var(--crema);
  animation:scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

@keyframes fadeUp{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }
@keyframes lineUp{ from{transform:translateY(115%);} to{transform:translateY(0);} }
.hero.play-intro .hero-eyebrow{ animation:fadeUp .9s var(--ease-soft) .5s forwards; }
.hero.play-intro .hero-title .line:nth-child(1) span{ animation:lineUp 1s var(--ease-soft) .68s forwards; }
.hero.play-intro .hero-title .line:nth-child(2) span{ animation:lineUp 1s var(--ease-soft) .8s forwards; }
.hero.play-intro .hero-actions{ animation:fadeUp .9s var(--ease-soft) 1.1s forwards; }
.hero.play-intro .scroll-cue{ animation:fadeUp .9s var(--ease-soft) 1.35s forwards; }
@media (max-height:760px){ .scroll-cue{ display:none; } }
@media (max-width:640px){ .hero-actions{ gap:12px; } }

.hero-hint{
  position:absolute; left:0; right:0; bottom:10px; text-align:center; z-index:2;
  font-size:.6rem; letter-spacing:.08em; color:rgba(244,237,224,.35); opacity:0;
}
.hero.play-intro .hero-hint{ animation:fadeUp 1s ease 2s forwards; }

/* ============================================================
   02 — EL RITUAL
   ============================================================ */
.ritual{ background:var(--crema); padding:140px 0 50px; position:relative; overflow:hidden; }
.ritual-head{ text-align:center; max-width:820px; margin:0 auto; }
.ritual-quote{
  font-family:var(--f-display); font-weight:400; font-size:clamp(1.9rem,4.6vw,3.1rem);
  line-height:1.28; margin-top:28px;
}
.ritual-quote-lg{ font-size:clamp(2.2rem,5.6vw,4rem); line-height:1.18; }

/* PIDE → COMPARTE → BRINDA — composición editorial conectada */
.ritual-momentos{
  margin-top:110px; display:flex; align-items:center; justify-content:center;
  gap:28px; flex-wrap:wrap;
}
.ritual-momento{ text-align:center; max-width:230px; }
.ritual-momento-word{
  display:block; font-family:var(--f-display); font-style:italic; font-weight:500;
  font-size:clamp(2.4rem,5vw,3.6rem); color:var(--granate); line-height:1;
}
.ritual-momento p{ margin-top:14px; font-size:.9rem; color:var(--tinta-suave); }
.ritual-momento-arrow{
  font-family:var(--f-display); font-size:1.8rem; color:var(--dorado); flex:none;
  transform:translateY(-14px);
}
@media (max-width:860px){
  .ritual-momentos{ flex-direction:column; gap:36px; margin-top:70px; }
  .ritual-momento-arrow{ transform:rotate(90deg); }
}

.ritual-line-wrap{
  margin:100px auto 0; max-width:640px; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.ritual-line-caption{
  margin-top:8px; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tierra);
  opacity:0; transition:opacity 1s ease 1.6s;
}
.ritual.is-drawn .ritual-line-caption{ opacity:1; }
.ritual-line-wrap svg{ width:100%; max-width:420px; height:auto; overflow:visible; }
.ritual-line-path{
  fill:none; stroke:var(--dorado); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:900; stroke-dashoffset:900; transition:stroke-dashoffset 2.4s var(--ease-cine);
}
.ritual-piparra-shape{
  fill:var(--dorado); opacity:0; transition:opacity 1s ease .8s;
}
.ritual.is-drawn .ritual-line-path{ stroke-dashoffset:0; }
.ritual.is-drawn .ritual-piparra-shape{ opacity:1; }

/* ============================================================
   03 — EL ORIGEN
   ============================================================ */
.origen{ background:var(--negro); color:var(--crema); padding:150px 0 130px; position:relative; }
.origen::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 80% 15%, rgba(92,20,28,.2), transparent 55%);
  pointer-events:none;
}
.origen-head{ position:relative; z-index:1; max-width:680px; }

.ruta{ position:relative; z-index:1; margin-top:100px; }
.ruta-mobile{ display:none; }

.ruta-num{ font-family:var(--f-display); font-style:italic; color:var(--dorado); font-size:.85rem; }
.ruta-name{ font-family:var(--f-display); font-size:clamp(1.6rem,2.6vw,2.3rem); margin-top:8px; }
.ruta-items{ margin-top:10px; font-size:.86rem; color:#b7ad98; }
.ruta-final-quote{
  font-family:var(--f-display); font-style:italic; font-size:clamp(1.5rem,2.8vw,2.1rem); color:var(--dorado-claro); margin-top:10px;
}
.ruta-final-brand{ margin-top:16px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tierra); }

/* ---- Storytelling de escritorio: mapa sticky + pasos ---- */
.origen-scroller{
  position:relative; z-index:1; margin-top:90px;
  display:flex; gap:70px;
}
.origen-sticky{
  flex:0 0 calc(50% - 35px);
  align-self:flex-start;
  position:sticky; top:0;
}
.origen-steps{ flex:1; min-width:0; }
.origen-sticky-inner{
  height:100svh; min-height:480px;
  display:flex; align-items:center; justify-content:center;
}
.origen-map{ position:relative; width:100%; max-width:440px; aspect-ratio:1/1; }
.origen-map-svg{ position:relative; z-index:2; width:100%; height:100%; overflow:visible; }
.origen-outline{ fill:none; stroke:rgba(244,237,224,.16); stroke-width:1.3; }
.origen-route{
  fill:none; stroke:var(--dorado); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke-dashoffset 1.1s var(--ease-cine);
}
.origen-node{
  fill:var(--negro-2); stroke:var(--tierra); stroke-width:2.4;
  transition:fill .5s ease, stroke .5s ease, r .5s ease;
}
.origen-node.is-active{ fill:var(--dorado); stroke:var(--dorado-claro); r:7; }
.origen-giant{
  position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center;
  pointer-events:none; text-align:center;
}
.origen-giant span{
  position:absolute; font-family:var(--f-display); font-weight:600;
  font-size:clamp(2.1rem,6.2vw,4.4rem); color:rgba(230,198,103,.1); white-space:nowrap;
  opacity:0; transition:opacity .8s ease;
}
.origen-giant span.is-current{ opacity:1; }
.origen-photo{
  position:absolute; inset:0; z-index:3; opacity:0; transform:scale(1.06);
  transition:opacity 1.3s var(--ease-cine), transform 1.6s var(--ease-cine); border-radius:4px; overflow:hidden;
}
.origen-photo.is-visible{ opacity:1; transform:scale(1); }
.origen-photo img{ width:100%; height:100%; object-fit:cover; }

.origen-steps{ display:flex; flex-direction:column; }
.origen-step{
  min-height:76vh; display:flex; flex-direction:column; justify-content:center;
  opacity:.32; transition:opacity .7s var(--ease-soft);
}
.origen-step.is-active{ opacity:1; }
.origen-step-final{ min-height:60vh; }

/* móvil: ruta vertical */
.ruta-mobile-list{ position:relative; padding-left:34px; }
.ruta-mobile-list::before{
  content:''; position:absolute; left:5px; top:8px; bottom:8px; width:2px; background:rgba(244,237,224,.14);
}
.ruta-mobile-fill{
  position:absolute; left:5px; top:8px; width:2px; height:0%; background:linear-gradient(var(--dorado),var(--dorado-claro));
  transition:height 1s var(--ease-cine);
}
.ruta-mobile-item{ position:relative; padding-bottom:44px; opacity:.4; transition:opacity .7s ease; }
.ruta-mobile-item.is-active{ opacity:1; }
.ruta-mobile-item::before{
  content:''; position:absolute; left:-34px; top:2px; width:12px; height:12px; border-radius:50%;
  background:var(--negro-2); border:2px solid var(--tierra); transition:background .5s ease,border-color .5s ease;
}
.ruta-mobile-item.is-active::before{ background:var(--dorado); border-color:var(--dorado); box-shadow:0 0 0 6px rgba(201,162,39,.18); }
.ruta-mobile-item h3{ font-family:var(--f-display); font-size:1.5rem; }
.ruta-mobile-item p{ margin-top:6px; font-size:.85rem; color:#b7ad98; }
.ruta-mobile-img-wrap{ position:relative; margin-top:14px; border-radius:2px; overflow:hidden; }
.ruta-mobile-item img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }

@media (max-width:860px){
  .origen-scroller{ display:none; }
  .ruta-mobile{ display:block; }
}

/* ============================================================
   04 — NUESTRA DESPENSA / LA CARTA
   ============================================================ */
.despensa{ background:var(--crema); padding:130px 0 60px; }
.despensa-head{ text-align:center; max-width:640px; margin:0 auto; }
.despensa-head-compact{ max-width:600px; }

.carta-block{ margin-top:56px; }
.carta-tabs{
  position:sticky; top:var(--header-h); z-index:50; background:var(--crema);
  margin:0 -20px; padding:14px 20px; display:flex; gap:10px; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none; scroll-snap-type:x proximity;
  border-bottom:1px solid rgba(28,26,22,.08);
}
.carta-tabs::-webkit-scrollbar{ display:none; }
.carta-tab{
  flex:none; scroll-snap-align:start; padding:10px 20px; border:1px solid rgba(28,26,22,.16);
  border-radius:40px; font-size:.74rem; font-weight:700; letter-spacing:.04em; color:var(--tinta-suave);
  transition:background .35s ease, color .35s ease, border-color .35s ease; position:relative;
}
.carta-tab:hover{ border-color:var(--granate); color:var(--granate); }
.carta-tab.is-active{ background:var(--granate); border-color:var(--granate); color:var(--crema); }

.carta-panels{ margin-top:26px; }
.carta-panel{ display:none; }
.carta-panel.is-active{ display:block; animation:panelIn .5s var(--ease-soft); }
@keyframes panelIn{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }
.carta-panel-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:6px; padding-top:20px; }
.carta-panel-head h3{ font-family:var(--f-display); font-size:1.4rem; color:var(--granate); }
.carta-panel-head .count{ font-size:.7rem; color:var(--tierra); letter-spacing:.06em; text-transform:uppercase; }
.carta-list{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 48px; }
@media (max-width:760px){ .carta-list{ grid-template-columns:minmax(0,1fr); } }
.carta-item{ display:flex; align-items:baseline; gap:10px; padding:14px 0; border-bottom:1px solid rgba(28,26,22,.1); }
.carta-item-name{ font-family:var(--f-display); font-size:1rem; color:var(--tinta); flex:none; }
.carta-item-dots{ flex:1; border-bottom:1px dotted rgba(28,26,22,.35); height:0; margin-bottom:6px; }
.carta-item-price{ font-weight:700; font-size:.86rem; color:var(--granate); flex:none; white-space:nowrap; }
.carta-subhead{ grid-column:1/-1; font-family:var(--f-display); font-style:italic; color:var(--tierra); font-size:.92rem; margin:18px 0 2px; }
.carta-fineprint{ text-align:center; margin-top:44px; font-size:.72rem; color:var(--tinta-suave); }

.primera-vez{ margin-top:140px; padding-top:80px; border-top:1px solid rgba(28,26,22,.1); }
.primera-vez-head{ text-align:center; max-width:520px; margin:0 auto; }
.primera-vez-route{ max-width:420px; margin:60px auto 0; position:relative; padding-left:30px; }
.primera-vez-route::before{ content:''; position:absolute; left:4px; top:6px; bottom:6px; width:2px; background:rgba(169,133,95,.3); }
.pv-step{ position:relative; padding-bottom:32px; }
.pv-step:last-child{ padding-bottom:0; }
.pv-step::before{
  content:attr(data-n); position:absolute; left:-30px; top:-2px; width:20px; height:20px; border-radius:50%;
  background:var(--crema); border:1.5px solid var(--dorado); color:var(--granate); font-family:var(--f-display);
  font-style:italic; font-size:.72rem; display:flex; align-items:center; justify-content:center;
}
.pv-step p{ font-size:.98rem; }
.pv-step p em{ font-style:normal; color:var(--granate); font-weight:700; }

/* ============================================================
   05 — EL VERMUT (interludio cinematográfico)
   ============================================================ */
.vermut{ position:relative; background:var(--verde); height:430vh; }
.vermut-sticky{
  position:sticky; top:0; height:100svh; overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.vermut-media{ position:absolute; inset:0; z-index:0; background:var(--verde); }
.vermut-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 38%;
  opacity:.68;
}
.vermut-media::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 68% 52% at 50% 50%, rgba(7,18,12,.5) 0%, rgba(7,18,12,.24) 55%, transparent 78%),
    linear-gradient(180deg, rgba(7,18,12,.46) 0%, rgba(7,18,12,.16) 28%, rgba(7,18,12,.24) 55%, rgba(7,18,12,.6) 100%),
    radial-gradient(ellipse at 50% 40%, rgba(201,162,39,.08), transparent 60%);
}
@media (max-width:720px){
  .vermut-video{ object-position:center 30%; }
}
.vermut-watermark{
  position:absolute; z-index:1; font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:clamp(5rem,22vw,15rem); color:rgba(230,198,103,.045); white-space:nowrap; user-select:none;
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.vermut-content{ position:relative; z-index:2; text-align:center; color:var(--crema); padding:0 20px; }
.vermut-eyebrow{ opacity:.85; text-shadow:0 1px 10px rgba(0,0,0,.45); }
.vermut-title-text{
  margin-top:16px; font-family:var(--f-display); font-weight:600;
  font-size:clamp(2.6rem,7vw,5.2rem); line-height:1.05; color:var(--crema);
  text-shadow:0 4px 24px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4);
}
.vermut-words{ margin-top:38px; display:flex; gap:26px; justify-content:center; flex-wrap:wrap; }
.vermut-words span{
  font-family:var(--f-display); font-size:clamp(1.4rem,3vw,2.1rem); opacity:.15; transition:opacity .9s var(--ease-soft);
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.vermut-words span.is-on{ opacity:1; color:var(--dorado-claro); }
.vermut-quote-stack{ position:relative; margin-top:54px; height:7.5em; max-width:26ch; margin-left:auto; margin-right:auto; }
.vermut-quote{
  position:absolute; inset:0; margin:0; font-family:var(--f-display); font-style:italic;
  font-size:clamp(1.25rem,2.8vw,2rem); line-height:1.32;
  opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease-soft), transform .9s var(--ease-soft);
  text-shadow:0 2px 16px rgba(0,0,0,.5);
}
.vermut-quote.is-on{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .vermut{ height:auto; }
  .vermut-sticky{ position:relative; height:auto; padding:120px 0; }
  .vermut-words span{ opacity:1; color:var(--dorado-claro); }
  .vermut-quote-stack{ height:auto; }
  .vermut-quote{ opacity:0; position:relative; transform:none; margin-top:14px; }
  .vermut-quote.is-on{ opacity:1; }
}
@media (max-width:720px){
  .vermut{ height:360vh; }
  .vermut-words{ gap:16px; }
  .vermut-title-text{ font-size:clamp(2.1rem,9vw,3rem); }
}

/* ============================================================
   06 — PLANIFICA TU VISITA
   ============================================================ */
.visita{ background:var(--crema); padding:140px 0; }
.visita-head{ text-align:center; max-width:560px; margin:0 auto 90px; }
.visita-sub{ margin-top:10px; font-family:var(--f-display); font-style:italic; color:var(--tierra); font-size:1.1rem; }

.visita-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
@media (max-width:900px){ .visita-grid{ grid-template-columns:1fr; gap:56px; } }

.visita-card h3{ font-family:var(--f-display); font-size:1.3rem; color:var(--granate); margin-bottom:20px; }
.horario-groups{ display:flex; flex-direction:column; gap:0; }
.horario-group{ display:flex; justify-content:space-between; align-items:baseline; padding:18px 0; border-bottom:1px solid rgba(28,26,22,.1); }
.horario-group span:first-child{ font-family:var(--f-display); font-size:1.05rem; }
.horario-group span:last-child{ font-size:.86rem; }
.horario-group.is-closed span:last-child{ color:var(--tierra); }

.reserva-card{ margin-top:36px; }
.reserva-card p{ font-family:var(--f-display); font-style:italic; font-size:1.3rem; color:var(--granate); }
.reserva-card .section-lede{ margin-top:10px; font-size:.9rem; }
.reserva-actions{ margin-top:22px; display:flex; flex-wrap:wrap; gap:12px; }
.reserva-status{ margin-top:18px; display:flex; align-items:center; gap:9px; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--tierra); }
.dot-pulse{ width:7px; height:7px; border-radius:50%; background:var(--dorado); animation:pulse 1.8s ease-in-out infinite; flex:none; }
@keyframes pulse{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(.7);} }

.ubicacion-panel{ position:relative; border-radius:2px; overflow:hidden; min-height:520px; display:flex; flex-direction:column; }
.ubicacion-type{
  position:relative; background:var(--crema-2); color:var(--tinta); padding:50px 34px 34px; overflow:hidden; flex:1;
  display:flex; flex-direction:column; justify-content:flex-end; min-height:230px;
}
.ubicacion-type-word{
  position:absolute; top:8%; left:50%; transform:translateX(-50%); font-family:var(--f-display);
  font-style:italic; font-weight:500; font-size:clamp(3.2rem,11vw,6.5rem); color:rgba(92,20,28,.08); white-space:nowrap;
}
.ubicacion-type p{ position:relative; font-family:var(--f-display); font-size:1.2rem; max-width:24ch; color:var(--tinta); }
.ubicacion-type .direccion{ position:relative; margin-top:14px; font-size:.88rem; font-family:var(--f-body); color:var(--tinta-suave); }
.ubicacion-type-actions{ position:relative; margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; }
.ubicacion-map{ height:260px; background:var(--crema-2); border-top:1px solid rgba(28,26,22,.08); }
.ubicacion-map iframe{ width:100%; height:100%; border:0; filter:grayscale(.4) contrast(1.03) brightness(1.02); }

/* ============================================================
   07 — INSTAGRAM
   ============================================================ */
.social{ background:var(--crema); padding:130px 0; text-align:center; }
.social-head{ max-width:600px; margin:0 auto; }
.social-note{ margin-top:8px; font-size:.9rem; color:var(--tinta-suave); }
.social-grid{ margin-top:60px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.social-item{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--negro); border-radius:2px; }
.social-item img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease-soft), filter .5s ease; }
.social-item:hover img{ transform:scale(1.07); }
.social-item::after{ content:''; position:absolute; inset:0; background:rgba(11,11,9,.28); opacity:0; transition:opacity .4s ease; }
.social-item:hover::after{ opacity:1; }
.social-item .ig-icon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--crema); width:34px; height:34px; margin:auto; opacity:0; transform:scale(.8);
  transition:opacity .4s ease, transform .4s ease;
}
.social-item:hover .ig-icon{ opacity:1; transform:scale(1); }
.social-cta{ margin-top:48px; }
@media (max-width:760px){
  .social-grid{
    display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin:60px -20px 0; padding:0 20px 6px;
    scrollbar-width:none;
  }
  .social-grid::-webkit-scrollbar{ display:none; }
  .social-item{ flex:0 0 78%; scroll-snap-align:center; aspect-ratio:4/5; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--negro); color:#c9c0ac; padding:90px 0 30px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:50px; padding-bottom:60px; border-bottom:1px solid rgba(244,237,224,.1); }
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; row-gap:44px; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }
.footer-logo{ width:180px; max-width:60vw; height:auto; }
.footer-brand p{ margin-top:18px; font-size:.85rem; max-width:32ch; color:#9a9280; }
.footer-social{ margin-top:22px; display:flex; gap:14px; }
.footer-social a{
  width:38px; height:38px; border:1px solid rgba(244,237,224,.18); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:border-color .3s ease, background .3s ease, transform .3s ease;
}
.footer-social a svg{ width:16px; height:16px; }
.footer-social a:hover{ background:var(--dorado); border-color:var(--dorado); color:var(--negro); transform:translateY(-3px); }
.footer-col h5{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dorado); margin-bottom:18px; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a, .footer-col p{ font-size:.86rem; color:#b7ad98; transition:color .3s ease; }
.footer-col a:hover{ color:var(--dorado-claro); }
.footer-bottom{ margin-top:36px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:.72rem; color:#726b5b; }
.footer-bottom a{ color:#8f8672; }
.footer-bottom a:hover{ color:var(--dorado); }

/* ============================================================
   MOBILE RESERVE BAR
   ============================================================ */
.mobile-reserve{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:800; display:none; gap:10px;
  transform:translateY(140%); transition:transform .5s var(--ease);
}
.mobile-reserve.is-visible{ transform:translateY(0); }
.mobile-reserve .btn{ flex:1; padding:15px 10px; box-shadow:0 12px 30px -10px rgba(0,0,0,.55); }
.mobile-reserve .mr-secondary{ background:var(--crema); border-color:rgba(11,11,9,.14); color:var(--tinta); }
@media (max-width:720px){ .mobile-reserve{ display:flex; } }