/* ==========================================================================
   THE BULL BAR · Costa Adeje
   B22G · vanilla CSS, sin frameworks
   Formato: clasico de bar-restaurante (bloques centrados, splits alternos,
   bandas con foto atenuada). Paleta de marca: carbon / oro / oxblood / crema.
   ========================================================================== */

:root{
  --carbon:   #0f0f11;
  --carbon-2: #16161a;
  --carbon-3: #1e1e23;
  --gold:     #c9a24a;
  --gold-lt:  #e3c27e;
  --gold-dk:  #8a6d2c;
  --oxblood:  #6b0f1a;
  --oxblood-l:#a3222f;
  --teal:     #2e5b57;
  --cream:    #f5f1e6;
  --muted:    #a29a8d;

  --deep: var(--oxblood);
  --glow: rgba(107,15,26,.5);

  --hair:   rgba(201,162,74,.3);
  --hair-2: rgba(245,241,230,.11);

  --ff-d: "Playfair Display", Georgia, "Times New Roman", serif;
  --ff-b: "Montserrat", system-ui, sans-serif;

  --wrap: 1240px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --sec: clamp(4.5rem, 9vw, 8rem);
  --ease: cubic-bezier(.16,1,.3,1);
  /* curva de entrada con un punto de rebote: es la que da el aire "moderno" */
  --ease-in: cubic-bezier(.64,-.11,.3,1.09);
}

html[data-mode="day"]{ --deep: var(--teal); --glow: rgba(46,91,87,.45); }

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
/* Los bloques entran desplazados en X, asi que hay que contener ese desborde.
   `clip` y no `hidden`: hidden convierte el elemento en contenedor de scroll y
   rompe el header sticky. */
html, body{ overflow-x:hidden; overflow-x:clip; }
body{
  margin:0; background:var(--carbon); color:var(--cream);
  font-family:var(--ff-b); font-weight:400;
  font-size:clamp(.95rem,.9rem + .2vw,1.05rem); line-height:1.7;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--gold); color:var(--carbon); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:2; }
.skip{ position:absolute; left:-999px; top:0; z-index:99; background:var(--gold); color:var(--carbon); padding:.75rem 1.25rem; font-weight:600; }
.skip:focus{ left:0; }
:focus-visible{ outline:2px solid var(--gold-lt); outline-offset:3px; }

/* ---------- titulares ---------- */
.h1, .h2, .h3{
  font-family:var(--ff-d); font-weight:900; text-transform:uppercase;
  line-height:1.02; letter-spacing:.005em; margin:0;
}
.h1{ font-size:clamp(2.6rem,1.5rem + 4.4vw,5.2rem); }
.h2{ font-size:clamp(2rem,1.35rem + 2.9vw,3.6rem); }
.h3{ font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem); }
.h2 + .lede{ margin-top:1.35rem; }

.lede{ margin:0 auto; max-width:58ch; color:var(--muted); font-weight:300; font-size:clamp(1rem,.95rem + .3vw,1.1rem); }
.eyebrow{
  margin:0 0 1.1rem; font-size:.68rem; font-weight:600;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold);
}

/* ---------- botones outline (el patron de la casa) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 2rem; border-radius:0; border:1px solid var(--gold);
  font-family:var(--ff-b); font-size:.7rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; text-decoration:none;
  white-space:nowrap; color:var(--gold-lt); background:transparent;
  transition:background .3s var(--ease), color .3s, border-color .3s, transform .2s var(--ease);
}
.btn:hover{ background:var(--gold); color:#171208; border-color:var(--gold); }
.btn:active{ transform:translateY(1px); }
.btn--solid{ background:var(--gold); color:#171208; }
.btn--solid:hover{ background:var(--gold-lt); border-color:var(--gold-lt); }
.btn--pale{ border-color:rgba(245,241,230,.4); color:var(--cream); }
.btn--pale:hover{ background:var(--cream); color:var(--carbon); border-color:var(--cream); }
.ctas{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; }
.ctas--left{ justify-content:flex-start; }

.lnk{
  display:inline-block; padding-bottom:3px; font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  text-decoration:none; border-bottom:1px solid var(--hair); transition:color .25s, border-color .25s;
}
.lnk:hover{ color:var(--gold-lt); border-color:var(--gold-lt); }

/* ==========================================================================
   TOPBAR + HEADER
   ========================================================================== */
.topbar{
  position:relative; z-index:52; background:var(--carbon-2);
  border-bottom:1px solid var(--hair-2); text-align:center;
  padding:.55rem var(--pad);
  font-family:var(--ff-d); font-size:.85rem; color:var(--cream);
}
.topbar a{ text-decoration:none; color:var(--gold-lt); }
.topbar a:hover{ color:var(--gold); }
.topbar span{ opacity:.45; margin-inline:.85rem; }

.hdr{
  position:sticky; top:0; z-index:50;
  background:rgba(15,15,17,.55);
  transition:background .4s var(--ease), border-color .4s, backdrop-filter .4s,
             transform .45s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(15,15,17,.94);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom-color:var(--hair-2);
}
/* se retira al bajar y vuelve en cuanto subes: deja la foto limpia */
.hdr.is-hidden{ transform:translateY(-102%); }
.hdr__in{ max-width:var(--wrap); margin-inline:auto; padding:.9rem var(--pad); display:flex; align-items:center; gap:1.5rem; }

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; }
.brand__bull{ width:38px; height:auto; flex:none; }
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__txt em{
  font-family:var(--ff-b); font-style:normal; font-size:.5rem; font-weight:600;
  letter-spacing:.42em; text-transform:uppercase; color:var(--gold); padding-left:.15em;
}
.brand__txt strong{
  font-family:var(--ff-d); font-weight:900; font-size:1.1rem; text-transform:uppercase;
  letter-spacing:.02em; color:var(--cream); margin-top:.2rem;
}

.nav{ display:flex; gap:1.9rem; }
.nav a{
  text-decoration:none; font-family:var(--ff-d); font-size:.86rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--cream);
  padding-bottom:3px; position:relative; opacity:.85; transition:opacity .25s, color .25s;
}
.nav a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold); transition:width .3s var(--ease); }
.nav a:hover, .nav a[aria-current]{ opacity:1; color:var(--gold-lt); }
.nav a:hover::after, .nav a[aria-current]::after{ width:100%; }

.hdr__act{ display:flex; align-items:center; gap:1rem; }
.hdr__cta{ padding:.62rem 1.35rem; font-size:.64rem; }

.switch{ display:flex; border:1px solid var(--hair); }
.switch__b{
  padding:.5rem .8rem; font-size:.6rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  transition:background .35s var(--ease), color .35s;
}
.switch__b.is-on{ background:var(--gold); color:#171208; }

.burger{ display:none; width:38px; height:32px; flex-direction:column; justify-content:center; gap:6px; }
.burger span{ display:block; height:1.5px; background:var(--cream); transition:transform .3s var(--ease); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:min(calc(100dvh - 78px), 44rem);
  display:grid; align-items:end;
  padding:clamp(6rem,12vw,9rem) 0 0;
  overflow:hidden; isolation:isolate;
}
.hero__art{ position:absolute; inset:0; z-index:-2; }
.hero__art::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(105deg, var(--carbon) 12%, rgba(15,15,17,.82) 42%, rgba(15,15,17,.28) 72%),
    linear-gradient(to bottom, rgba(15,15,17,.7), transparent 32%, rgba(15,15,17,.96));
}
.hero__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1s var(--ease);
}
html[data-mode="night"] .hero__img--night,
html[data-mode="day"]   .hero__img--day{ opacity:1; }

.hero__in{
  position:relative; z-index:2; width:100%; max-width:var(--wrap);
  margin-inline:auto; padding:0 var(--pad) clamp(3rem,6vw,5rem);
}
.hero__h{
  font-family:var(--ff-d); font-weight:900; text-transform:uppercase;
  font-size:clamp(3rem,1.1rem + 8.2vw,8.5rem); line-height:.83;
  letter-spacing:-.022em; margin:0; max-width:13ch;
}
.hero__h em{
  display:block; font-style:italic; font-weight:500; text-transform:none;
  color:var(--gold); letter-spacing:-.03em; padding-bottom:.05em;
  font-size:.62em; line-height:1;
}
.hero__sub{
  max-width:34ch; margin:1.9rem 0 0; color:var(--cream);
  font-weight:300; font-size:clamp(1rem,.95rem + .35vw,1.2rem); line-height:1.6; opacity:.88;
}
.hero .ctas{ justify-content:flex-start; margin-top:2.25rem; }

/* ---------- el reloj del bar: que esta pasando ahi ahora mismo ---------- */
.clock{
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:0 1.15rem; margin:0 0 1.75rem; max-width:34rem;
}
.clock__dot{
  grid-row:span 2; width:11px; height:11px; border-radius:50%;
  background:#6fd18c; box-shadow:0 0 0 0 rgba(111,209,140,.6);
  animation:beat 2.6s ease-out infinite;
}
.clock.is-shut .clock__dot{ background:var(--muted); animation:none; box-shadow:none; }
@keyframes beat{
  0%{ box-shadow:0 0 0 0 rgba(111,209,140,.55); }
  70%{ box-shadow:0 0 0 13px rgba(111,209,140,0); }
  100%{ box-shadow:0 0 0 0 rgba(111,209,140,0); }
}
.clock__now{
  font-family:var(--ff-b); font-size:.66rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold);
}
.clock__what{
  font-family:var(--ff-d); font-size:clamp(1.05rem,.95rem + .5vw,1.4rem);
  font-style:italic; color:var(--cream); line-height:1.35;
}

/* ---------- la jornada: 17 horas abiertas, tramo a tramo ---------- */
.day{ padding:var(--sec) 0 0; }
.day__rail{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--hair); }
.slot{
  position:relative; padding:2rem 1.5rem 2.25rem 0; text-align:left;
  border-right:1px solid var(--hair-2); transition:opacity .5s var(--ease);
}
.slot:last-child{ border-right:0; }
.slot:not(:first-child){ padding-left:1.5rem; }
.slot::before{
  content:""; position:absolute; top:-1px; left:0; height:2px; width:0;
  background:var(--gold); transition:width .8s var(--ease);
}
.slot.is-now::before{ width:100%; }
.slot.is-now .slot__h{ color:var(--gold); }
.slot:not(.is-now){ opacity:.55; }
.slot__t{
  font-family:var(--ff-b); font-size:.62rem; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted); font-variant-numeric:tabular-nums;
  display:flex; align-items:center; gap:.7rem;
}
.slot__t b{ color:#6fd18c; font-weight:600; letter-spacing:.16em; }
.slot__h{
  font-family:var(--ff-d); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem); line-height:1.05;
  margin:.85rem 0 .6rem; letter-spacing:-.01em; transition:color .5s;
}
.slot p{ margin:0; font-size:.86rem; color:var(--muted); font-weight:300; line-height:1.6; }

/* ---------- el muro: 28 cocteles, un solo precio ---------- */
/* Ni overflow ni clip-path aqui: cualquiera de los dos convierte la seccion en
   contenedor y el panel sticky de la derecha deja de seguir al usuario. El
   desborde del numero gigante ya lo contiene el overflow-x:clip de html/body. */
.wall{ position:relative; padding:var(--sec) 0; }
.wall__big{
  position:absolute; z-index:0; right:-.06em; top:50%; transform:translateY(-50%);
  font-family:var(--ff-d); font-weight:900; font-size:min(46vw,40rem); line-height:.72;
  color:var(--gold); opacity:.07; letter-spacing:-.05em; pointer-events:none; user-select:none;
  font-variant-numeric:tabular-nums;
}
.wall__in{ position:relative; z-index:1; }
.wall__lead{ display:grid; grid-template-columns:1fr auto; align-items:end; gap:2rem; margin-bottom:2.5rem; }
.wall__lead p{ margin:0; max-width:38ch; color:var(--muted); font-weight:300; }
.wall__price{
  font-family:var(--ff-d); font-weight:900; color:var(--gold); line-height:.9;
  font-size:clamp(3rem,2rem + 4vw,6rem); letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.wall__price small{ display:block; font-family:var(--ff-b); font-size:.13em; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-top:.6rem; }
/* dos columnas de nombres + una tercera que ensena el coctel elegido */
.wall__grid{ display:grid; grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); gap:clamp(2rem,5vw,4rem); align-items:start; }
.wall__list{
  list-style:none; margin:0; padding:0; border-top:1px solid var(--hair);
  columns:2; column-gap:clamp(1.5rem,4vw,3.5rem);
}
.wall__list li{ break-inside:avoid; }
.wall__list button{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:.72rem .6rem .72rem 0; border-bottom:1px solid var(--hair-2);
  font-family:var(--ff-d); font-size:clamp(1rem,.9rem + .4vw,1.22rem);
  color:var(--cream); transition:color .3s, padding-left .3s var(--ease), background .3s;
}
.wall__list button:hover, .wall__list button:focus-visible{ color:var(--gold-lt); padding-left:.7rem; }
.wall__list button.is-on{ color:var(--gold); padding-left:.7rem; background:rgba(201,162,74,.05); }
.wall__list b{
  font-family:var(--ff-b); font-size:.56rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--oxblood-l); display:block; margin-top:.15rem;
}
.wall__list button.is-on b{ color:var(--gold-dk); }

/* el panel: se queda pegado mientras recorres la lista */
.ckview{ position:sticky; top:5.5rem; border:1px solid var(--hair); background:var(--carbon-2); }
/* Cuanto mas bajo es el panel, mas trecho acompaña al usuario antes de soltarse. */
.ckview__pic{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:radial-gradient(ellipse 70% 55% at 50% 62%, rgba(107,15,26,.4), transparent 70%), var(--carbon-3);
}
/* Los recortes vienen sin fondo, asi que van completos y centrados, no cortados. */
.ckview__pic img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center 58%; padding:1.75rem 1.5rem 1.25rem;
  opacity:0; transform:translateY(10px) scale(.97);
  transition:opacity .45s var(--ease), transform .6s var(--ease);
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.6));
}
.ckview__pic img.is-on{ opacity:1; transform:none; }
.ckview__txt{ padding:1.15rem 1.5rem 1.35rem; }
.ckview__n{
  font-family:var(--ff-d); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem); line-height:1.05; margin:0;
  letter-spacing:-.01em; transition:opacity .35s var(--ease);
}
.ckview__i{
  margin:.6rem 0 0; font-size:.75rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); transition:opacity .35s var(--ease);
}
.ckview__p{
  margin:1.1rem 0 0; padding-top:1rem; border-top:1px solid var(--hair-2);
  font-family:var(--ff-d); font-weight:900; font-size:1.6rem; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.ckview.is-swap .ckview__n, .ckview.is-swap .ckview__i{ opacity:0; }
.ckview__hint{ margin:.9rem 0 0; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); opacity:.7; }
.wall__foot{ margin:2.5rem 0 0; display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; align-items:center; }
.wall__foot p{ margin:0; font-size:.85rem; color:var(--muted); font-weight:300; }

/* ---------- el reel: vertical, a su tamaño, sin deformar ---------- */
.reel{ padding:var(--sec) 0; position:relative; }
.reel__grid{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,5.5rem); align-items:center;
}
.reel__box{
  position:relative; aspect-ratio:9/16; max-width:23rem; width:100%;
  background:var(--carbon-2); border:1px solid var(--hair);
  overflow:hidden; justify-self:end;
  box-shadow:0 36px 80px -40px rgba(0,0,0,1);
}
.reel__box video{ width:100%; height:100%; object-fit:cover; display:block; }
.reel__box::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 90px rgba(15,15,17,.55);
}
.reel__sound{
  position:absolute; z-index:3; right:.8rem; bottom:.8rem;
  width:38px; height:38px; display:grid; place-items:center;
  background:rgba(15,15,17,.8); border:1px solid var(--hair); color:var(--gold-lt);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background .25s, color .25s;
}
.reel__sound:hover{ background:var(--gold); color:#171208; }
.reel__sound svg{ width:16px; height:16px; fill:currentColor; }
.reel__txt p{ max-width:44ch; color:var(--muted); font-weight:300; }
.reel__txt .ctas{ margin-top:2rem; }

/* ---------- numeracion de seccion, como una carta impresa ---------- */
.num{
  display:block; font-family:var(--ff-b); font-size:.62rem; font-weight:600;
  letter-spacing:.3em; color:var(--gold); margin:0 0 1.1rem;
  font-variant-numeric:tabular-nums;
}
.num::after{ content:""; display:inline-block; width:2.5rem; height:1px; background:var(--hair); margin-left:.9rem; vertical-align:middle; }

/* ==========================================================================
   ONE COL · bloque de texto centrado
   ========================================================================== */
.oc{ padding:var(--sec) 0; text-align:center; }
.oc--tight{ padding-bottom:clamp(2rem,4vw,3rem); }
.oc__in{ max-width:46rem; margin-inline:auto; }
.oc p{ margin:0 auto; }
.oc .ctas{ margin-top:2.25rem; }

/* ==========================================================================
   SPLIT · texto y foto alternos, la foto sangra al borde
   ========================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; align-items:center; position:relative; z-index:2; }
.split + .split{ border-top:1px solid var(--hair-2); }
.split__pic{ position:relative; min-height:clamp(22rem,44vw,34rem); }
.split__pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.split__pic::after{ content:""; position:absolute; inset:0; background:linear-gradient(to right, rgba(15,15,17,.5), transparent 42%); }
.split--flip .split__pic::after{ background:linear-gradient(to left, rgba(15,15,17,.5), transparent 42%); }
.split__txt{ padding:clamp(3rem,6vw,5.5rem) clamp(1.5rem,5vw,4.5rem); text-align:center; }
.split__txt > *{ margin-inline:auto; }
.split__txt p{ max-width:40ch; color:var(--muted); font-weight:300; margin-bottom:0; }
.split__txt .ctas{ margin-top:2rem; }
.split--flip{ direction:rtl; }
.split--flip > *{ direction:ltr; }

.tick{ list-style:none; margin:1.5rem auto 0; padding:0; max-width:26rem; text-align:left; display:grid; gap:.55rem; }
.tick li{ position:relative; padding:.55rem 0 .55rem 1.5rem; border-bottom:1px solid var(--hair-2); font-size:.9rem; }
.tick li:last-child{ border-bottom:0; }
.tick li::before{ content:""; position:absolute; left:0; top:1.05em; width:7px; height:7px; background:var(--gold); transform:rotate(45deg); }
.tick b{ color:var(--gold-lt); font-weight:600; font-variant-numeric:tabular-nums; }

/* ==========================================================================
   TOUT · banda a ancho completo con foto atenuada
   ========================================================================== */
/* El fondo va anclado a la ventana y el bloque pasa por encima: la foto se
   queda quieta mientras haces scroll. clip-path crea el marco de recorte y
   ademas convierte al padre en contenedor de los hijos fixed, que es lo que
   hace que esto funcione tambien en iOS (background-attachment:fixed no). */
.tout{
  position:relative; z-index:2; padding:clamp(5rem,11vw,9rem) var(--pad);
  text-align:center; isolation:isolate;
  border-block:1px solid var(--hair-2);
  clip-path:inset(0);
}
.tout__bg{ position:fixed; inset:0; z-index:-2; }
.tout__bg img{ width:100%; height:100%; object-fit:cover; }
.tout::before{ position:fixed; }
.tout__price{ display:block; }
.tout::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 52% 60% at 50% 50%, rgba(15,15,17,.9), rgba(15,15,17,.74) 70%),
    rgba(15,15,17,.7);
}
.tout__in{ max-width:44rem; margin-inline:auto; position:relative; }
.tout p{ margin:0 auto; max-width:44ch; color:var(--cream); opacity:.9; font-weight:300; }
.tout .ctas{ margin-top:2.25rem; }
.tout__price{
  display:block; font-family:var(--ff-d); font-weight:900; color:var(--gold);
  font-size:clamp(3.4rem,2rem + 6vw,7rem); line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; margin:.5rem 0 .25rem;
}
.tout__price sup{ font-size:.4em; top:-.85em; }

/* ==========================================================================
   GALERIA
   ========================================================================== */
.gal{ position:relative; z-index:2; }
.gal__strip{ display:flex; gap:1px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; background:var(--hair-2); }
.gal__strip::-webkit-scrollbar{ display:none; }
.gal__strip figure{ margin:0; flex:0 0 clamp(230px,26vw,380px); aspect-ratio:4/3; scroll-snap-align:start; overflow:hidden; background:var(--carbon-2); }
.gal__strip img{ width:100%; height:100%; object-fit:cover; filter:saturate(.95); transition:transform .9s var(--ease), filter .5s; }
.gal__strip figure:hover img{ transform:scale(1.06); filter:saturate(1.1); }

/* ==========================================================================
   HORAS Y SITIO
   ========================================================================== */
.hl{ padding:var(--sec) 0; text-align:center; }
.hl__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3.5rem); margin-top:3rem; }
.hl__b{ padding:0 1rem; border-left:1px solid var(--hair-2); }
.hl__b:first-child{ border-left:0; }
.hl__b h3{ font-family:var(--ff-d); font-weight:700; text-transform:uppercase; font-size:1rem; letter-spacing:.16em; color:var(--gold); margin:0 0 1rem; }
.hl__b p{ margin:0; color:var(--cream); font-weight:300; line-height:1.75; }
.hl__b a{ text-decoration:none; border-bottom:1px solid var(--hair); }
.hl__b a:hover{ color:var(--gold-lt); }
.hl__big{ font-family:var(--ff-d); font-weight:900; font-size:1.85rem; color:var(--cream); font-variant-numeric:tabular-nums; letter-spacing:-.01em; display:block; margin-bottom:.35rem; }
.hl__es{ margin:3rem auto 0; max-width:60ch; font-size:.8rem; color:var(--muted); font-weight:300; }

/* ==========================================================================
   CABECERA DE PAGINA INTERNA
   ========================================================================== */
.phead{
  position:relative; padding:clamp(4.5rem,9vw,7rem) 0 clamp(3.5rem,7vw,5.5rem);
  text-align:center; overflow:hidden; isolation:isolate; border-bottom:1px solid var(--hair-2);
}
.phead__bg{ position:absolute; inset:0; z-index:-2; }
.phead__bg img{ width:100%; height:100%; object-fit:cover; }
.phead::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 55% 70% at 50% 55%, rgba(15,15,17,.92), rgba(15,15,17,.7) 72%),
    linear-gradient(to bottom, rgba(15,15,17,.94), rgba(15,15,17,.7) 45%, rgba(15,15,17,.96));
}
.phead__bg img{ opacity:.85; }
.phead h1{ font-family:var(--ff-d); font-weight:900; text-transform:uppercase; margin:0; font-size:clamp(2.3rem,1.5rem + 3.4vw,4.2rem); line-height:1.02; }
.phead p{ max-width:52ch; margin:0 auto; color:var(--cream); opacity:.86; font-weight:300; }
.crumb{ margin:0 0 1.1rem; font-size:.66rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); }
.crumb a{ text-decoration:none; opacity:.75; }
.crumb a:hover{ opacity:1; }

/* ==========================================================================
   CARTA
   ========================================================================== */
.menu{ padding:var(--sec) 0; }
.tabs{ display:flex; flex-wrap:wrap; justify-content:center; margin-bottom:3rem; border-bottom:1px solid var(--hair-2); }
.tab{
  padding:.9rem 1.4rem; font-family:var(--ff-d); font-size:.9rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .25s, border-color .25s;
}
.tab:hover{ color:var(--cream); }
.tab.is-on{ color:var(--gold); border-bottom-color:var(--gold); }

.pane{ display:none; animation:fadeUp .5s var(--ease) both; }
.pane.is-on{ display:block; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none; } }

.flat{
  margin:0 auto 2.75rem; max-width:44rem; padding:1rem 1.5rem; text-align:center;
  border:1px solid var(--hair); background:rgba(201,162,74,.05); font-size:.88rem;
}
.flat b{ color:var(--gold); font-variant-numeric:tabular-nums; }

.cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); }
.mh{
  font-family:var(--ff-d); font-weight:700; text-transform:uppercase; font-size:1.15rem;
  letter-spacing:.12em; margin:2.75rem 0 1rem; color:var(--gold);
  display:flex; align-items:baseline; gap:.75rem; border-bottom:1px solid var(--hair); padding-bottom:.55rem;
}
.col > .mh:first-child{ margin-top:0; }
.mh small{ font-family:var(--ff-b); font-size:.6rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-left:auto; }

.list{ margin:0; display:grid; gap:.1rem; }
.list > div{ display:flex; align-items:baseline; gap:.5rem; padding:.5rem 0; border-bottom:1px solid rgba(245,241,230,.055); }
.list > div:last-child{ border-bottom:0; }
.list dt{ display:flex; flex-direction:column; font-weight:500; color:var(--cream); font-size:.95rem; line-height:1.4; }
.list dt span{ font-size:.775rem; font-weight:300; color:var(--muted); line-height:1.5; margin-top:.18rem; max-width:46ch; }
.list > div::before{ content:""; order:2; flex:1 1 auto; align-self:flex-end; margin-bottom:.32em; border-bottom:1px dotted rgba(201,162,74,.3); min-width:1.5rem; }
.list dd{ order:3; margin:0; padding-left:.75rem; flex:none; font-weight:600; color:var(--gold); font-variant-numeric:tabular-nums; font-size:.95rem; }
.list dd::after{ content:"€"; margin-left:.1em; opacity:.55; font-weight:400; }
.list--flat > div::before{ display:none; }
.mnote{ margin:2rem 0 0; font-size:.72rem; color:var(--muted); font-weight:300; line-height:1.6; }

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */
.fwrap{ padding:var(--sec) 0; }
.fgrid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.form{ display:grid; gap:1.35rem; }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:1.35rem; }
.field{ display:grid; gap:.45rem; }
.field label{ font-size:.62rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.field input, .field select, .field textarea{
  width:100%; padding:.85rem 1rem; border-radius:0;
  background:var(--carbon-2); border:1px solid var(--hair-2); color:var(--cream);
  font-family:var(--ff-b); font-size:.95rem; line-height:1.4;
  transition:border-color .25s, background .25s;
}
.field textarea{ resize:vertical; min-height:7rem; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:rgba(245,241,230,.22); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); background:var(--carbon-3); }
.field input::placeholder, .field textarea::placeholder{ color:rgba(162,154,141,.6); }
.field select{
  appearance:none; cursor:pointer; padding-right:2.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a24a' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:11px;
}
.field .err{ font-size:.72rem; color:#e2867d; min-height:1rem; }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea{ border-color:#a8443b; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.fnote{ margin:0; font-size:.72rem; color:var(--muted); font-weight:300; line-height:1.7; }
.form .btn{ justify-self:start; }
.form .h2{ margin-bottom:.5rem; }

.aside{ border:1px solid var(--hair-2); background:var(--carbon-2); padding:clamp(1.75rem,3vw,2.5rem); text-align:center; }
.aside h2{ font-family:var(--ff-d); font-weight:700; text-transform:uppercase; font-size:1.15rem; letter-spacing:.14em; color:var(--gold); margin:0 0 1rem; }
.aside p{ margin:0 0 1.5rem; color:var(--muted); font-weight:300; font-size:.9rem; }
.aside .btn{ width:100%; }
.aside__hr{ height:1px; background:var(--hair-2); margin:1.75rem 0; border:0; }
.aside ul{ list-style:none; margin:0; padding:0; text-align:left; display:grid; gap:.5rem; }
.aside li{ font-size:.85rem; color:var(--cream); font-weight:300; padding:.55rem 0 .55rem 1.4rem; border-top:1px solid var(--hair-2); position:relative; }
.aside li::before{ content:""; position:absolute; left:0; top:1.1em; width:6px; height:6px; background:var(--gold); transform:rotate(45deg); }

.nap{ margin:2rem 0; display:grid; text-align:left; }
.nap > div{ display:grid; grid-template-columns:8rem 1fr; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--hair-2); }
.nap dt{ font-size:.62rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); padding-top:.3rem; }
.nap dd{ margin:0; color:var(--cream); font-weight:300; line-height:1.65; }
.nap a{ text-decoration:none; border-bottom:1px solid var(--hair); }
.nap a:hover{ color:var(--gold-lt); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr{ position:relative; z-index:2; background:var(--carbon-2); border-top:1px solid var(--hair-2); padding:clamp(3.5rem,7vw,5.5rem) 0 2.5rem; text-align:center; }
.ftr__follow{ font-family:var(--ff-d); font-weight:900; text-transform:uppercase; font-size:clamp(1.4rem,1rem + 1.9vw,2.4rem); margin:0 0 .5rem; letter-spacing:.02em; }
.ftr__follow a{ color:var(--gold); text-decoration:none; border-bottom:1px solid var(--hair); }
.ftr__follow a:hover{ color:var(--gold-lt); border-color:var(--gold-lt); }
.ftr__soc{ display:flex; justify-content:center; gap:1.5rem; margin:1.75rem 0 2.5rem; }
.ftr__soc a{ width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--hair); color:var(--gold); border-radius:50%; transition:background .3s, color .3s, border-color .3s; }
.ftr__soc a:hover{ background:var(--gold); color:#171208; border-color:var(--gold); }
.ftr__soc svg{ width:17px; height:17px; fill:currentColor; }
.ftr__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.75rem; padding-top:2.25rem; border-top:1px solid var(--hair-2); }
.ftr__nav a{ font-family:var(--ff-d); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .25s; }
.ftr__nav a:hover{ color:var(--gold-lt); }
.ftr__c{ margin:2rem 0 0; font-size:.72rem; color:var(--muted); font-weight:300; }
.ftr__c a{ color:var(--gold); text-decoration:none; }
.ftr__c a:hover{ color:var(--gold-lt); }

/* Barra de accion inferior, con la identidad del bar. No el globo verde de
   WhatsApp que lleva pegado el 90% de las webs de hosteleria. */
.bar{
  position:fixed; left:50%; bottom:1.15rem; transform:translateX(-50%); z-index:60;
  display:flex; align-items:stretch; background:rgba(15,15,17,.93);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--hair); box-shadow:0 18px 44px -16px rgba(0,0,0,.95);
  opacity:0; visibility:hidden; translate:0 18px;
  transition:opacity .4s var(--ease), translate .4s var(--ease), visibility .4s;
}
.bar.is-on{ opacity:1; visibility:visible; translate:0 0; }
.bar a{
  display:flex; align-items:center; gap:.55rem; padding:.85rem 1.35rem;
  font-family:var(--ff-b); font-size:.65rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; text-decoration:none; color:var(--cream);
  border-right:1px solid var(--hair-2); transition:background .25s, color .25s;
}
.bar a:last-child{ border-right:0; background:var(--gold); color:#171208; }
.bar a:last-child:hover{ background:var(--gold-lt); }
.bar a:not(:last-child):hover{ background:rgba(201,162,74,.12); color:var(--gold-lt); }
.bar svg{ width:16px; height:16px; fill:currentColor; flex:none; }

/* ==========================================================================
   MOVIMIENTO
   Sistema de entrada en capas: el bloque llega por un lado y su contenido por
   el otro, a distinta velocidad. Alterna direccion seccion a seccion para que
   el scroll no se sienta repetitivo.
   ========================================================================== */
.rv{ opacity:0; transition:opacity .8s var(--ease-in), transform .8s var(--ease-in); will-change:opacity, transform; }
/* soltar will-change al terminar: si se queda puesto crea contenedor y rompe
   los position:sticky que haya dentro */
.rv.in{ opacity:1; transform:none; will-change:auto; }
.rv-l{ transform:translate3d(-90px,0,0); }
.rv-r{ transform:translate3d(90px,0,0); }
.rv-u{ transform:translate3d(0,44px,0); }
.rv-f{ transform:none; transition:opacity .75s linear; }
.rv-s{ transform:scale(.93); transition-duration:.9s; }
.rv-d1{ transition-delay:.12s; } .rv-d2{ transition-delay:.24s; } .rv-d3{ transition-delay:.36s; }

/* el interior del split viaja en sentido contrario al bloque */
.split__txt > *{ opacity:0; transform:translate3d(70px,0,0); transition:opacity 1s var(--ease-in), transform 1s var(--ease-in); }
.split--flip .split__txt > *{ transform:translate3d(-70px,0,0); }
.split.in .split__txt > *{ opacity:1; transform:none; }
.split.in .split__txt > *:nth-child(1){ transition-delay:.06s; }
.split.in .split__txt > *:nth-child(2){ transition-delay:.12s; }
.split.in .split__txt > *:nth-child(3){ transition-delay:.18s; }
.split.in .split__txt > *:nth-child(4){ transition-delay:.24s; }
.split.in .split__txt > *:nth-child(5){ transition-delay:.30s; }
.split.in .split__txt > *:nth-child(6){ transition-delay:.36s; }
/* la foto del split entra con un empuje suave desde su propio borde */
.split__pic img{ transform:scale(1.12); transition:transform 1.4s var(--ease); }
.split.in .split__pic img{ transform:scale(1); }

/* entrada del hero, escalonada */
.hero__in > *{ opacity:0; animation:heroIn .95s var(--ease-in) both; }
.hero .clock{ animation-delay:.5s; }
.hero__h{ animation-delay:.18s; }
.hero__sub{ animation-delay:.62s; }
.hero .ctas{ animation-delay:.74s; }
@keyframes heroIn{ from{ opacity:0; transform:translate3d(0,26px,0); } to{ opacity:1; transform:none; } }

/* respiracion lenta de la foto del hero: da vida sin vídeo */
.hero__img{ animation:breathe 26s ease-in-out infinite alternate; }
@keyframes breathe{ from{ transform:scale(1); } to{ transform:scale(1.09); } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .nav{
    position:fixed; inset:0 0 auto; top:0; padding:5.5rem var(--pad) 2.5rem;
    flex-direction:column; align-items:center; gap:1.4rem;
    background:rgba(15,15,17,.98); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    border-bottom:1px solid var(--hair-2);
    transform:translateY(-100%); transition:transform .45s var(--ease); z-index:-1;
  }
  .nav.is-open{ transform:none; }
  .nav a{ font-size:1.15rem; }
  .burger{ display:flex; }
  .hdr__cta{ display:none; }
  .day__rail{ grid-template-columns:1fr 1fr; }
  .slot{ border-bottom:1px solid var(--hair-2); }
  .slot:nth-child(2n){ border-right:0; }
  .slot:nth-last-child(-n+2){ border-bottom:0; }
  .wall__grid{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
  .split{ grid-template-columns:1fr; }
  .split--flip{ direction:ltr; }
  .split__pic{ min-height:clamp(15rem,50vw,22rem); order:-1; }
  .split__pic::after, .split--flip .split__pic::after{ background:linear-gradient(to top, rgba(15,15,17,.65), transparent 55%); }
  .fgrid{ grid-template-columns:1fr; }
  .hl__grid{ grid-template-columns:1fr; gap:0; }
  .hl__b{ border-left:0; border-top:1px solid var(--hair-2); padding:1.75rem 0; }
  .hl__b:first-child{ border-top:0; padding-top:0; }
}

@media (max-width:760px){
  .topbar{ font-size:.74rem; }
  .topbar span{ margin-inline:.5rem; }
  .hero{ min-height:78vh; padding-top:clamp(5rem,20vw,8rem); }
  .hero__h{ max-width:none; }
  .day__rail{ grid-template-columns:1fr; }
  .slot{ padding:1.5rem 0 !important; border-right:0; border-bottom:1px solid var(--hair-2); }
  .slot:last-child{ border-bottom:0; }
  .wall__list{ columns:1; }
  .wall__lead{ grid-template-columns:1fr; }
  .wall__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .ckview{ position:static; max-width:22rem; margin-inline:auto; }
  .reel__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .reel__box{ justify-self:center; max-width:20rem; }
  .wall__big{ font-size:70vw; opacity:.05; }
  .bar{ left:var(--pad); right:var(--pad); transform:none; }
  .bar a{ flex:1; justify-content:center; padding-inline:.5rem; font-size:.58rem; letter-spacing:.12em; }
  .cols{ grid-template-columns:1fr; gap:0; }
  .col + .col .mh:first-child{ margin-top:2.75rem; }
  .tabs{ overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; scrollbar-width:none; }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{ flex:none; }
  .frow{ grid-template-columns:1fr; }
  .nap > div{ grid-template-columns:1fr; gap:.25rem; }
  .ftr__nav{ gap:1.1rem; }
}

.gal__strip{ cursor:grab; }
.gal__strip.is-drag{ cursor:grabbing; scroll-snap-type:none; }
.gal__strip.is-drag img{ pointer-events:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .rv, .hero__in > *, .split__txt > *{ opacity:1 !important; transform:none !important; }
  .split__pic img, .hero__img{ transform:none !important; }
  .tout{ clip-path:none; }
  .tout__bg, .tout::before{ position:absolute; }
  .hdr.is-hidden{ transform:none; }
}