/* ============================================================
   DISCO VOLANTE — Ristorante Italiano · Montpellier
   Lenguaje visual editorial (ref. Il Bambini Club)
   Paleta auténtica de la carta física
   ============================================================ */

/* Fuente display de marca — Saira Condensed (Google Fonts, OFL, uso comercial libre)
   Alternativa gratuita a TT Bluescreens. Black para el logotipo, Bold para etiquetas. */
@font-face{
  font-family:"SairaBlack";
  src:url("fonts/saira-condensed-black.woff2") format("woff2");
  font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"SairaBold";
  src:url("fonts/saira-condensed-bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  /* ---- Color (paleta de marca 2026) ---- */
  --rosa:        #ebd0df;   /* fondo claro principal */
  --rosa-claro:  #f3e2ec;   /* banda alterna, algo más clara */
  --rosa-pal:    #faf2f7;   /* casi blanco rosado (tarjetas, modal) */
  --vino:        #540f1a;   /* tinta oscura / fondos oscuros / rayas */
  --vino-2:      #6f1c2c;   /* vino más vivo (hover) */
  --magenta:     #c56393;   /* acento: títulos, precios, filetes */
  --crema:       #fcf4f8;   /* texto sobre vino */

  /* ---- Tipografía ---- */
  --f-mark:   "SairaBlack", "Anton", sans-serif;       /* logotipo + display */
  --f-label:  "SairaBold", "Oswald", sans-serif;       /* eyebrows, etiquetas, botones */
  --f-nav:    "Oswald", sans-serif;                    /* nav y campos (más legible) */
  --f-serif:  "Cormorant Garamond", Georgia, serif;    /* titulares y cuerpo editorial */
  --f-script: "Allura", cursive;                       /* florituras italianas */

  /* ---- Métrica ---- */
  --maxw: 1280px;
  --gut: clamp(1.25rem, 4vw, 4rem);
  --band: clamp(3rem, 5.5vw, 5.75rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-serif);
  background:var(--rosa);
  color:var(--vino);
  line-height:1.5;
  overflow-x:hidden;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ---------- Tipos utilitarios ---------- */
.eyebrow{
  font-family:var(--f-label);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:.72rem;
  color:var(--magenta);
}
.script{ font-family:var(--f-script); color:var(--magenta); line-height:1; }

h1,h2,h3{ font-family:var(--f-serif); font-weight:500; line-height:1.04; letter-spacing:.005em; }

.wordmark{
  font-family:var(--f-mark);
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:.9;
  /* el logotipo del PDF es muy comprimido y pesado */
  transform:scaleX(.92);
  transform-origin:center;
}

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.band{ padding-block:var(--band); }
section{ position:relative; }

/* ============================================================
   FIRMA: rayas verticales vino/magenta sobre rosa
   (motivo del menú físico)
   ============================================================ */
.stripes{
  height:34px;
  width:100%;
  background:
    repeating-linear-gradient(90deg,
      var(--vino)      0px, var(--vino)      6px,
      transparent      6px, transparent      11px,
      var(--magenta)   11px, var(--magenta)  14px,
      transparent      14px, transparent     30px);
  background-color:var(--rosa);
  opacity:.9;
}
.stripes--dark{ background-color:var(--vino); }
.stripes--dark{
  background:
    repeating-linear-gradient(90deg,
      var(--rosa)      0px, var(--rosa)      6px,
      transparent      6px, transparent      11px,
      var(--magenta)   11px, var(--magenta)  14px,
      transparent      14px, transparent     30px);
  background-color:var(--vino);
}

/* ============================================================
   BARRA SUPERIOR + NAV
   ============================================================ */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .4s var(--ease), backdrop-filter .4s;
}
.topbar.solid{ background:rgba(84,15,26,.92); backdrop-filter:blur(8px); }
.topbar__inner{
  position:relative;
  max-width:var(--maxw); margin-inline:auto; padding:1.05rem var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  color:var(--crema);
}
.nav{ display:flex; align-items:center; gap:1.9rem; }
.nav a, .nav button{
  font-family:var(--f-nav); text-transform:uppercase;
  letter-spacing:.18em; font-size:.74rem; font-weight:400;
  color:var(--crema); opacity:.85; position:relative; padding-block:.2rem;
  transition:opacity .25s;
}
.nav a::after, .nav button::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background:var(--magenta); transition:right .3s var(--ease);
}
.nav a:hover, .nav button:hover{ opacity:1; }
.nav a:hover::after, .nav button:hover::after{ right:0; }

.topbar__mark{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  opacity:0; transition:opacity .4s; pointer-events:none;
  display:flex; align-items:center;
}
.topbar__mark img{ height:clamp(22px,2.6vw,32px); width:auto; display:block; }
.topbar.solid .topbar__mark{ opacity:1; pointer-events:auto; }

.topbar__cta{
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.16em;
  font-size:.72rem; border:1px solid var(--crema); border-radius:2px;
  padding:.55rem 1.05rem; color:var(--crema);
  transition:background .3s, color .3s;
}
.topbar__cta:hover{ background:var(--crema); color:var(--vino); }

/* hamburguesa */
.burger{ display:none; width:30px; height:22px; position:relative; }
.burger span{ position:absolute; left:0; right:0; height:2px; background:var(--crema); transition:.3s var(--ease); }
.burger span:nth-child(1){ top:0 } .burger span:nth-child(2){ top:10px } .burger span:nth-child(3){ top:20px }
body.menu-open .burger span:nth-child(1){ top:10px; transform:rotate(45deg) }
body.menu-open .burger span:nth-child(2){ opacity:0 }
body.menu-open .burger span:nth-child(3){ top:10px; transform:rotate(-45deg) }

/* menú móvil */
.mobile-nav{
  position:fixed; inset:0; z-index:55; background:var(--vino);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1.6rem;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
body.menu-open .mobile-nav{ opacity:1; visibility:visible; }
.mobile-nav a, .mobile-nav button{
  font-family:var(--f-nav); text-transform:uppercase; letter-spacing:.22em;
  font-size:1.15rem; color:var(--crema);
}
.mobile-nav .script{ font-size:2.4rem; margin-bottom:.4rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ height:100svh; min-height:560px; position:relative; overflow:hidden; }
.hero__slides{ position:absolute; inset:0; }
.hero__slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 2s ease-in-out;
}
.hero__slide.active{ opacity:1; z-index:1; animation:kenburns 9s ease-out both; }
@keyframes kenburns{ from{transform:scale(1)} to{transform:scale(1.09)} }
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(84,15,26,.46) 0%, rgba(84,15,26,.20) 38%, rgba(84,15,26,.62) 100%);
  z-index:1;
}
.hero__content{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  color:var(--crema); padding-inline:var(--gut);
}
.hero__script{ font-size:clamp(2.2rem,6vw,3.6rem); margin-bottom:.4rem; color:var(--rosa); }
.hero__mark{
  font-family:var(--f-mark); text-transform:uppercase;
  font-size:clamp(3.2rem,13vw,9.5rem); line-height:.82; letter-spacing:.01em;
  transform:scaleX(.9); color:var(--crema);
  text-shadow:0 4px 40px rgba(0,0,0,.35);
}
.hero__sub{
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.42em;
  font-size:clamp(.7rem,1.6vw,.92rem); margin-top:1.4rem; color:var(--rosa-pal);
}
.hero__cta{ margin-top:2.4rem; display:flex; gap:1.6rem; align-items:center; justify-content:center; flex-wrap:wrap; }
.hero__link{
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.2em;
  font-size:.78rem; color:var(--crema); border-bottom:1px solid rgba(252,244,248,.55);
  padding-bottom:4px; transition:border-color .3s;
}
.hero__link:hover{ border-color:var(--crema); }

.btn-line{
  display:inline-block; font-family:var(--f-label); text-transform:uppercase;
  letter-spacing:.2em; font-size:.8rem; color:var(--crema);
  border:1px solid var(--crema); padding:.95rem 2.1rem; border-radius:2px;
  transition:background .35s var(--ease), color .35s, border-color .35s;
}
.btn-line:hover{ background:var(--crema); color:var(--vino); }
.btn-solid{
  display:inline-block; font-family:var(--f-label); text-transform:uppercase;
  letter-spacing:.2em; font-size:.8rem; color:var(--crema); background:var(--magenta);
  padding:.95rem 2.1rem; border-radius:2px; transition:background .35s var(--ease);
}
.btn-solid:hover{ background:var(--vino-2); }

.scroll-cue{
  position:absolute; left:50%; bottom:1.9rem; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.5rem; color:var(--rosa-pal);
}
.scroll-cue span{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.3em; font-size:.62rem; }
.scroll-cue i{ width:1px; height:42px; background:var(--rosa-pal); animation:cue 2s var(--ease) infinite; transform-origin:top; }
@keyframes cue{ 0%,100%{transform:scaleY(.3);opacity:.4} 50%{transform:scaleY(1);opacity:1} }

/* ============================================================
   INTRO EDITORIAL
   ============================================================ */
.intro{ text-align:center; }
.intro .eyebrow{ display:block; margin-bottom:1.6rem; }
.intro__lead{
  font-size:clamp(1.5rem,3.4vw,2.55rem); line-height:1.34; font-weight:400;
  max-width:34ch; margin-inline:auto; color:var(--vino);
}
.intro__lead em{ font-style:italic; color:var(--magenta); }
.intro__sign{ margin-top:1.8rem; font-size:2.4rem; }

/* ============================================================
   BANDAS IMAGEN + TEXTO (alternas)
   ============================================================ */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.feature__media{ position:relative; overflow:hidden; }
.feature__media img{ width:100%; height:clamp(420px,48vw,600px); object-fit:cover; transition:transform 1.2s var(--ease); }
.feature__media:hover img{ transform:scale(1.05); }
.feature__media::before{
  content:""; position:absolute; z-index:2; top:14px; left:14px; right:14px; bottom:14px;
  border:1px solid rgba(252,244,248,.35); pointer-events:none;
}
.feature.reverse .feature__media{ order:2; }
.feature__title{ font-size:clamp(2.1rem,5vw,3.4rem); margin-bottom:1.3rem; }
.feature__title .script{ display:block; font-size:.62em; margin-bottom:-.18em; }
.feature__text p{ font-size:1.18rem; line-height:1.62; margin-bottom:1.1rem; max-width:46ch; }
.feature__more{ margin-top:.7rem; }
.link-fancy{
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.2em; font-size:.76rem;
  color:var(--magenta); border-bottom:1px solid var(--magenta); padding-bottom:.25rem;
  transition:color .25s, border-color .25s;
}
.link-fancy:hover{ color:var(--vino); border-color:var(--vino); }

/* banda clara alterna */
.band--claro{ background:var(--rosa-claro); }

/* banda oscura (aperitivo) */
.band--vino{ background:var(--vino); color:var(--crema); }
.band--vino .feature__title{ color:var(--crema); }
.band--vino .feature__text p{ color:var(--rosa-pal); }
.band--vino .eyebrow{ color:var(--rosa); }
.band--vino .link-fancy{ color:var(--rosa); border-color:var(--rosa); }
.band--vino .link-fancy:hover{ color:var(--crema); border-color:var(--crema); }
.band--vino .feature__media::before{ border-color:rgba(197,99,147,.55); }

/* ============================================================
   PRENSA
   ============================================================ */
.press{ background:var(--rosa-claro); text-align:center; }
.press .eyebrow{ display:block; margin-bottom:2rem; }
.press__quote{
  font-size:clamp(1.6rem,3.6vw,2.6rem); font-style:italic; line-height:1.4;
  max-width:24ch; margin-inline:auto; color:var(--vino);
}
.press__quote::before{ content:"“"; color:var(--magenta); }
.press__quote::after{ content:"”"; color:var(--magenta); }
.press__src{ margin-top:1.6rem; font-family:var(--f-label); text-transform:uppercase; letter-spacing:.26em; font-size:.74rem; color:var(--magenta); }

/* ============================================================
   GALERÍA
   ============================================================ */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; }
.gallery a{ overflow:hidden; }
.gallery img{ width:100%; height:clamp(320px,34vw,560px); object-fit:cover; transition:transform 1s var(--ease); filter:saturate(1.02); }
.gallery a:hover img{ transform:scale(1.06); }

/* ============================================================
   RESERVA
   ============================================================ */
.reserve{ background:var(--rosa); }
.reserve__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.reserve__head .eyebrow{ display:block; margin-bottom:1.2rem; }
.reserve__head h2{ font-size:clamp(2.2rem,5vw,3.6rem); margin-bottom:1.3rem; }
.reserve__head p{ font-size:1.12rem; max-width:42ch; margin-bottom:2rem; }
.info-row{ display:flex; gap:1rem; padding:1rem 0; border-top:1px solid rgba(84,15,26,.18); }
.info-row:last-child{ border-bottom:1px solid rgba(84,15,26,.18); }
.info-row dt{ font-family:var(--f-nav); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:var(--magenta); min-width:120px; padding-top:.18rem; }
.info-row dd{ font-size:1.05rem; }
.info-row dd a:hover{ color:var(--magenta); }

.zc-frame{
  background:var(--rosa-pal); border:1px solid rgba(84,15,26,.18); border-radius:4px;
  padding:1.6rem; min-height:420px;
}
.zc-frame h3{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.2em; font-size:.84rem; color:var(--magenta); margin-bottom:1rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--vino); color:var(--crema); padding-block:clamp(3.5rem,7vw,6rem) 2.5rem; text-align:center; }
.footer__mark{ font-family:var(--f-mark); text-transform:uppercase; font-size:clamp(2.6rem,9vw,6rem); transform:scaleX(.9); line-height:.85; }
.footer__script{ font-size:2rem; margin-top:.3rem; color:var(--rosa); }
.footer__cols{ display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(2rem,6vw,5rem); margin-top:3rem; text-align:left; }
.footer__col h4{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.22em; font-size:.72rem; color:var(--magenta); margin-bottom:1rem; }
.footer__col p, .footer__col a{ font-size:1rem; line-height:1.9; color:var(--rosa-pal); }
.footer__col a:hover{ color:var(--crema); }
.footer__bottom{ margin-top:3.5rem; padding-top:1.8rem; border-top:1px solid rgba(252,244,248,.16); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; align-items:center; }
.footer__legal{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.footer__legal a{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.14em; font-size:.66rem; color:var(--rosa-pal); }
.footer__legal a:hover{ color:var(--crema); }
.footer__copy{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.14em; font-size:.66rem; color:rgba(252,244,248,.55); }

/* ============================================================
   MODAL CARTA
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:80; display:none; }
.modal.open{ display:block; }
.modal__bg{ position:absolute; inset:0; background:rgba(84,15,26,.55); backdrop-filter:blur(6px); }
.modal__box{
  position:absolute; inset:4vh 50% auto auto; transform:translateX(50%);
  width:min(880px,94vw); height:92vh; background:var(--rosa-pal);
  border-radius:6px; overflow:hidden; box-shadow:0 30px 80px rgba(84,15,26,.5);
  display:flex; flex-direction:column;
  animation:pop .4s var(--ease);
}
@keyframes pop{ from{opacity:0; transform:translateX(50%) translateY(18px)} to{opacity:1} }
.modal__head{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.2rem; background:var(--vino); color:var(--crema); }
.modal__switch{ display:flex; gap:.4rem; }
.modal__switch button{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; color:var(--rosa-pal); border:1px solid rgba(252,244,248,.4); padding:.4rem .9rem; border-radius:2px; }
.modal__switch button.active{ background:var(--magenta); border-color:var(--magenta); color:var(--crema); }
.modal__close{ font-size:1.5rem; line-height:1; color:var(--crema); width:38px; height:38px; }
.modal__close:hover{ color:var(--rosa); }
.modal iframe{ flex:1; width:100%; border:none; background:var(--rosa-pal); }

/* ============================================================
   ANIMACIÓN DE ENTRADA (cortina)
   ============================================================ */
.curtain{ position:fixed; inset:0; z-index:200; display:flex; pointer-events:none; }
.curtain__half{ flex:1; background:var(--vino); transition:transform 1.1s var(--ease) .3s; }
.curtain__half--l{ transform-origin:left; }
.curtain__half--r{ transform-origin:right; }
.curtain__logo{
  position:fixed; inset:0; z-index:201; display:flex; align-items:center; justify-content:center;
  color:var(--rosa); transition:opacity .5s; pointer-events:none;
}
.curtain__logo .wordmark{ font-size:clamp(2rem,8vw,4.5rem); }
body.loaded .curtain__half--l{ transform:translateX(-100%); }
body.loaded .curtain__half--r{ transform:translateX(100%); }
body.loaded .curtain__logo{ opacity:0; }

/* ============================================================
   REVEAL al hacer scroll
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.12s } .reveal.d2{ transition-delay:.24s } .reveal.d3{ transition-delay:.36s }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  body{ font-size:17px; }
  .nav{ display:none; }
  .burger{ display:block; }
  .feature{ grid-template-columns:1fr; gap:2rem; }
  .feature.reverse .feature__media{ order:0; }
  .feature__media img{ height:clamp(320px,70vw,440px); }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .reserve__grid{ grid-template-columns:1fr; }
  .footer__cols{ text-align:center; }
  .modal__box{ inset:0; transform:none; width:100vw; height:100dvh; border-radius:0; }
  @keyframes pop{ from{opacity:0} to{opacity:1} }
}
@media (max-width:520px){
  .topbar__cta{ display:none; }
  .gallery{ grid-template-columns:1fr 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .reveal{ opacity:1; transform:none; }
  .hero__slide.active{ animation:none; }
  body.loaded .curtain{ display:none; }
}

/* ============================================================
   BOTÓN FLOTANTE DE RESERVA (FAB)
   ============================================================ */
.fab{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:70;
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.16em; font-size:.78rem;
  color:var(--crema); background:var(--magenta);
  padding:.95rem 1.5rem; border-radius:50px;
  box-shadow:0 10px 30px rgba(84,15,26,.4);
  transition:transform .3s var(--ease), background .3s, opacity .3s;
}
.fab svg{ flex:none; }
.fab:hover{ background:var(--vino-2); transform:translateY(-3px); }
body.modal-on .fab, body.at-footer .fab{ opacity:0; pointer-events:none; transform:translateY(10px); }
@media (max-width:520px){
  .fab{ padding:.85rem 1.25rem; font-size:.72rem; }
}

/* ============================================================
   MODAL RESERVA
   ============================================================ */
.modal--reserve .modal__box--reserve{
  inset:auto; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(560px,94vw); height:auto; max-height:90vh;
  animation:popc .4s var(--ease);
}
@keyframes popc{ from{opacity:0; transform:translate(-50%,-46%)} to{opacity:1; transform:translate(-50%,-50%)} }
.modal__title{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.18em; font-size:.84rem; color:var(--crema); }
.modal__rbody{ padding:1.5rem; background:var(--rosa-pal); overflow-y:auto; min-height:360px; }

/* ============================================================
   TARJETA DE RESERVA (sección info)
   ============================================================ */
.reserve__card{
  background:var(--vino); color:var(--crema); border-radius:6px;
  padding:clamp(2rem,4vw,3rem); text-align:center;
}
.reserve__card-script{ font-size:2.6rem; color:var(--rosa); display:block; line-height:1; margin-bottom:.4rem; }
.reserve__card p{ color:var(--rosa-pal); font-size:1.15rem; margin-bottom:1.6rem; }
.reserve__card .btn-solid{ background:var(--magenta); }
.reserve__card .btn-solid:hover{ background:var(--rosa); color:var(--vino); }
.reserve__or{ margin-top:1.4rem!important; font-size:.98rem!important; }
.reserve__or a{ color:var(--rosa); border-bottom:1px solid var(--rosa); }
.reserve__events{ margin-top:.8rem!important; font-size:.92rem!important; opacity:.85; }
.reserve__events a{ color:var(--magenta); }
.reserve__events a:hover{ color:var(--crema); }

.footer__legal-btn{
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.14em; font-size:.66rem;
  color:var(--rosa-pal); padding:0;
}
.footer__legal-btn:hover{ color:var(--crema); }

/* ============================================================
   PAGE-HERO (páginas internas: evento, contact)
   ============================================================ */
.page-hero{ height:62vh; min-height:420px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; }
.page-hero__slides{ position:absolute; inset:0; }
.page-hero__slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 2s ease-in-out; }
.page-hero__slide.active{ opacity:1; z-index:1; animation:kenburns 9s ease-out both; }
.page-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(84,15,26,.45),rgba(84,15,26,.65)); z-index:2; }
.page-hero__content{ position:relative; z-index:3; color:var(--crema); padding-inline:var(--gut); }
.page-hero .eyebrow{ color:var(--rosa); display:block; margin-bottom:1rem; }
.page-hero h1{ font-family:var(--f-serif); font-weight:500; font-size:clamp(2.6rem,8vw,5rem); line-height:1; }
.page-hero h1 .script{ display:block; font-size:.42em; color:var(--rosa); margin-bottom:-.1em; }
.page-hero__sub{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.32em; font-size:.8rem; margin-top:1.2rem; color:var(--rosa-pal); }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{ background:var(--vino); color:var(--crema); text-align:center; }
.cta-band .eyebrow{ color:var(--rosa); display:block; margin-bottom:1rem; }
.cta-band h2{ font-size:clamp(2rem,5vw,3.2rem); margin-bottom:1.4rem; color:var(--crema); }
.cta-band p{ color:var(--rosa-pal); font-size:1.15rem; max-width:46ch; margin:0 auto 2rem; }

/* ============================================================
   FORMULARIO DE CONTACTO
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.cform{ display:grid; gap:1.1rem; }
.cform .row2{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.cform label{ font-family:var(--f-nav); text-transform:uppercase; letter-spacing:.14em; font-size:.68rem; color:var(--magenta); display:block; margin-bottom:.4rem; }
.cform input, .cform textarea{
  width:100%; font-family:var(--f-serif); font-size:1.05rem; color:var(--vino);
  background:var(--rosa-pal); border:1px solid rgba(84,15,26,.25); border-radius:3px;
  padding:.75rem .9rem; transition:border-color .25s;
}
.cform input:focus, .cform textarea:focus{ outline:none; border-color:var(--magenta); }
.cform textarea{ min-height:130px; resize:vertical; }
.cform button{
  justify-self:start; font-family:var(--f-label); text-transform:uppercase; letter-spacing:.2em; font-size:.8rem;
  color:var(--crema); background:var(--magenta); padding:.95rem 2.2rem; border-radius:2px; transition:background .3s;
}
.cform button:hover{ background:var(--vino-2); }
.contact-aside .eyebrow{ display:block; margin-bottom:1.2rem; }
.contact-aside h3{ font-family:var(--f-serif); font-size:1.8rem; margin-bottom:1rem; }
.contact-aside .info-row dt{ color:var(--magenta); }
.contact-note{ font-size:.95rem; color:var(--vino-2); margin-top:1.6rem; line-height:1.6; }
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
  .cform .row2{ grid-template-columns:1fr; }
}

/* ============================================================
   SECCIÓN AGENDA / MOMENTOS
   ============================================================ */
.section-title{ font-family:var(--f-serif); font-weight:500; line-height:1.04; font-size:clamp(2.1rem,5vw,3.2rem); }
.section-title .script{ font-family:var(--f-script); color:var(--magenta); font-size:.6em; display:block; margin-bottom:-.15em; }
.agenda__head{ text-align:center; margin-bottom:clamp(2.2rem,5vw,3.6rem); }
.agenda__head .eyebrow{ display:block; margin-bottom:1rem; }
.agenda__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3vw,2.6rem); }
.moment h3{ font-family:var(--f-serif); font-weight:500; font-size:1.7rem; margin:1.1rem 0 .35rem; }
.moment__when{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:var(--magenta); margin-bottom:.6rem; }
.moment p{ font-size:1.05rem; line-height:1.5; }

/* Placeholder de foto (sustituí por tus fotos) */
.ph{
  position:relative; aspect-ratio:4/3; border-radius:4px;
  background:repeating-linear-gradient(45deg,var(--rosa) 0 12px,#e4c4d6 12px 24px);
  border:1px dashed var(--magenta); display:grid; place-items:center; overflow:hidden;
}
.ph span{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.18em; font-size:.66rem; color:var(--vino-2); background:var(--rosa-pal); padding:.35rem .7rem; border-radius:2px; }

/* ============================================================
   INSIGNIA GOOGLE (compacta)
   ============================================================ */
.gnote{ display:inline-flex; align-items:center; gap:.55rem; margin-top:1.8rem; padding:.5rem .9rem; border:1px solid rgba(84,15,26,.25); border-radius:50px; transition:border-color .25s; }
.gnote:hover{ border-color:var(--magenta); }
.gnote__stars{ color:var(--magenta); letter-spacing:.08em; font-size:.95rem; }
.gnote__txt{ font-family:var(--f-nav); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:var(--vino); }
.gnote__txt strong{ color:var(--magenta); }

/* ============================================================
   MAPA (acceso)
   ============================================================ */
.reserve__map{ margin-top:clamp(2rem,4vw,3.2rem); border-radius:6px; overflow:hidden; border:1px solid rgba(84,15,26,.18); }
.reserve__map iframe{ display:block; width:100%; height:340px; border:0; filter:saturate(.92); }

/* ============================================================
   NEWSLETTER + CARTES CADEAUX
   ============================================================ */
.extras__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.extras__col--gift{ border-left:1px solid rgba(84,15,26,.18); padding-left:clamp(2rem,5vw,4rem); }
.extras .eyebrow{ display:block; margin-bottom:.9rem; }
.extras__title{ font-family:var(--f-serif); font-weight:500; font-size:clamp(1.8rem,3.5vw,2.4rem); margin-bottom:.7rem; }
.extras__col p{ font-size:1.08rem; line-height:1.55; max-width:42ch; margin-bottom:.4rem; }
.nl-form{ display:flex; gap:.6rem; margin-top:1.3rem; max-width:430px; }
.nl-form input{ flex:1; font-family:var(--f-serif); font-size:1.05rem; color:var(--vino); background:var(--rosa-pal); border:1px solid rgba(84,15,26,.25); border-radius:3px; padding:.7rem .9rem; }
.nl-form input:focus{ outline:none; border-color:var(--magenta); }
.nl-form button{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.16em; font-size:.76rem; color:var(--crema); background:var(--magenta); padding:.7rem 1.4rem; border-radius:2px; transition:background .3s; white-space:nowrap; }
.nl-form button:hover{ background:var(--vino-2); }

@media (max-width:900px){
  .agenda__grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .extras__grid{ grid-template-columns:1fr; }
  .extras__col--gift{ border-left:none; padding-left:0; border-top:1px solid rgba(84,15,26,.18); padding-top:2rem; }
}
@media (max-width:520px){
  .nl-form{ flex-direction:column; }
}

/* ============================================================
   BANNER COOKIES
   ============================================================ */
.cookie{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:90;
  background:var(--vino); color:var(--crema); border-radius:6px;
  padding:1rem 1.3rem; display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  box-shadow:0 14px 40px rgba(84,15,26,.45);
  transform:translateY(160%); opacity:0; transition:transform .5s var(--ease), opacity .5s; max-width:760px; margin-inline:auto;
}
.cookie.show{ transform:none; opacity:1; }
.cookie__txt{ font-size:.95rem; line-height:1.45; color:var(--rosa-pal); margin:0; }
.cookie__txt a{ color:var(--rosa); border-bottom:1px solid var(--rosa); }
.cookie__btns{ display:flex; gap:.6rem; flex:none; }
.cookie button{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; padding:.6rem 1.1rem; border-radius:2px; transition:.25s; }
.cookie__refuse{ color:var(--rosa-pal); border:1px solid rgba(252,244,248,.4); }
.cookie__refuse:hover{ border-color:var(--crema); color:var(--crema); }
.cookie__accept{ color:var(--crema); background:var(--magenta); }
.cookie__accept:hover{ background:var(--rosa); color:var(--vino); }
body.cookie-open .fab{ opacity:0; pointer-events:none; }
@media (max-width:600px){
  .cookie{ flex-direction:column; align-items:stretch; text-align:center; }
  .cookie__btns{ justify-content:center; }
}

/* Imagen real en la sección Agenda */
.moment__img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:4px; display:block; filter:saturate(1.02); }


/* ============================================================
   SECCIÓN INSTAGRAM (galería con propósito)
   ============================================================ */
.insta__head{ text-align:center; margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.insta__head .eyebrow{ display:block; margin-bottom:.55rem; }
.insta__head .section-title .script{ font-size:.85em; }
.insta__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.insta__grid a{ position:relative; overflow:hidden; aspect-ratio:1/1; display:block; }
.insta__grid img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.insta__grid a:hover img{ transform:scale(1.07); }
.insta__grid a::after{ content:""; position:absolute; inset:0; background:rgba(84,15,26,0); transition:background .3s; }
.insta__grid a:hover::after{ background:rgba(84,15,26,.22); }
.insta__cta{ text-align:center; margin-top:clamp(1.6rem,3vw,2.2rem); }
@media (max-width:700px){ .insta__grid{ grid-template-columns:repeat(2,1fr); } }

/* Bloque privatisations en contact */
.contact-priv{ margin-top:2rem; padding-top:1.6rem; border-top:1px solid rgba(84,15,26,.18); }

/* Acciones del CTA de eventos */
.cta-actions{ display:flex; gap:1.2rem; justify-content:center; align-items:center; flex-wrap:wrap; }

/* Fondo de rayas 'fondito' (ajustá la opacidad del velo para más/menos rayas) */
.striped{ background:linear-gradient(rgba(250,242,247,.55),rgba(250,242,247,.55)), url('images/fondito.jpg') center/cover; }


/* Botón "Groupes & privatisations" en la tarjeta de réservation (más visible) */
.reserve__priv{
  display:inline-block; margin-top:1.2rem;
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.14em; font-size:.8rem;
  color:var(--crema); border:1px solid rgba(252,244,248,.5); padding:.65rem 1.3rem; border-radius:2px;
  transition:background .25s, border-color .25s;
}
.reserve__priv:hover{ background:rgba(252,244,248,.12); border-color:var(--crema); }

/* Logo en la pantalla de carga */
.curtain__logo img{ width:clamp(220px,42vw,440px); height:auto; display:block; }