/* =========================================================
   GRUPO VIVA LA VIDA — Cartagena de Indias
   Un día entero frente al mar
   ========================================================= */

:root{
  /* NARANJA + BEIGE son los colores principales del grupo */
  --arena:#f6ebd8; --arena-2:#ebd9bc; --espuma:#fff8ee;     /* beiges */
  --naranja:#e2601c; --naranja-2:#ff8a3d; --naranja-3:#ffc08a;
  --marron:#2b1710; --marron-2:#4a2413;                      /* fondos oscuros cálidos */
  --coral:#ff6f4e;
  --noche:#140a06; --negro:#030303; --tinta:#2b1710;

  --f-display:"Bodoni Moda","Didot",Georgia,serif;
  --f-ui:"Inter",system-ui,-apple-system,sans-serif;
  --f-hand:"Caveat",cursive;

  --pad:clamp(16px,4vw,64px);
  --maxw:1440px;
  --r:26px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--arena); color:var(--tinta); font-family:var(--f-ui); font-size:16px; line-height:1.6; overflow-x:hidden; }
body.is-lock{ overflow:hidden; }
img,video,svg{ display:block; max-width:100%; }
/* si un logo con alto fijo no cabe a lo ancho, se achica sin deformarse */
img{ object-fit:contain; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,figure,blockquote,ul,dl,dd{ margin:0; }
ul{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--naranja); color:var(--tinta); }
:focus-visible{ outline:2px solid var(--naranja); outline-offset:3px; border-radius:6px; }
.inv{ filter:invert(1); }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }

.eyebrow{ font:600 11px/1.2 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; }
.sec-head{ display:flex; justify-content:space-between; gap:16px; padding-bottom:18px; margin-bottom:clamp(28px,5vw,60px); border-bottom:1px solid currentColor; border-color:color-mix(in srgb,currentColor 25%,transparent); }

.display{ font-family:var(--f-display); font-weight:400; font-size:clamp(44px,7.4vw,124px); line-height:.92; letter-spacing:-.02em; }
.display em, .ch__title em, .hero__title em{ font-style:italic; }
.display--light{ color:var(--espuma); }

.hand{ font-family:var(--f-hand); font-weight:500; }

/* ---------- botones ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; padding:15px 24px; border-radius:999px;
  font:600 12px/1 var(--f-ui); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  transition:transform .35s var(--out), background-color .3s, color .3s, box-shadow .35s; }
.btn:hover{ transform:translateY(-2px); }
.btn i{ font-style:normal; }
/* .btn--sol = el botón principal del grupo, hoy en naranja */
.btn--sol{ background:var(--naranja); color:var(--espuma); box-shadow:0 10px 30px -10px rgba(226,96,28,.75); }
.btn--sol:hover{ background:var(--naranja-2); }
.btn--glass{ background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.btn--glass:hover{ background:rgba(255,255,255,.22); }
.btn--ink{ background:var(--tinta); color:var(--espuma); }
.btn--line-ink{ border:1px solid var(--tinta); color:var(--tinta); }
.btn--line-ink:hover{ background:var(--tinta); color:var(--espuma); }
.btn--light{ background:var(--espuma); color:var(--negro); }
.btn--main{ background:var(--ink); color:var(--paper); }
.btn--line{ border:1px solid currentColor; color:inherit; }

/* ---------- grano ---------- */
.grain{ position:fixed; inset:-50%; z-index:90; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite; }
@keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* ---------- intro: el atardecer ---------- */
.loader{ --sx:0px; --sy:0px; --dur:4.2s; position:fixed; inset:0; z-index:200; overflow:hidden; background:#2b1710; cursor:pointer;
  clip-path:inset(0 0 0 0); transition:clip-path 1.2s var(--out); -webkit-tap-highlight-color:transparent; touch-action:none; }
.loader__cielo{ position:absolute; inset:0; background:linear-gradient(180deg,#ff9a4d 0%,#ffb86b 38%,#ffe0a3 64%); }
.loader__cielo::before, .loader__cielo::after{ content:""; position:absolute; inset:0; opacity:0; }
.loader__cielo::before{ background:linear-gradient(180deg,#7b3f6e 0%,#e2601c 42%,#ffb45e 64%); animation:ldCapa calc(var(--dur) * .55) ease-in-out forwards; }
.loader__cielo::after{ background:linear-gradient(180deg,#140d26 0%,#4a2446 38%,#b8472a 64%); animation:ldCapa calc(var(--dur) * .5) calc(var(--dur) * .5) ease-in forwards; }
@keyframes ldCapa{ to{ opacity:1; } }
.loader__estrellas{ position:absolute; inset:0 0 40% 0; opacity:0; animation:ldCapa 1.2s calc(var(--dur) * .78) ease-out forwards;
  background-image:radial-gradient(1.5px 1.5px at 12% 20%,#fff 60%,transparent 61%), radial-gradient(1px 1px at 26% 9%,#fff 60%,transparent 61%),
    radial-gradient(1.4px 1.4px at 41% 28%,#fff 60%,transparent 61%), radial-gradient(1px 1px at 63% 12%,#fff 60%,transparent 61%),
    radial-gradient(1.6px 1.6px at 78% 24%,#fff 60%,transparent 61%), radial-gradient(1px 1px at 90% 8%,#fff 60%,transparent 61%),
    radial-gradient(1.2px 1.2px at 6% 44%,#fff 60%,transparent 61%), radial-gradient(1.2px 1.2px at 86% 46%,#fff 60%,transparent 61%); }
/* el sol baja hasta hundirse en el mar; con el cursor o el dedo se mueve un poco */
.loader__sol{ position:absolute; left:50%; top:17%; width:clamp(160px,19vw,240px); aspect-ratio:1; translate:calc(-50% + var(--sx)) var(--sy); transition:translate .6s var(--out); }
.loader__sol i{ position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle,#fffbe6 0%,#ffd166 48%,#ff8a3d 100%);
  box-shadow:0 0 90px 30px rgba(255,190,90,.6), 0 0 240px 90px rgba(255,120,50,.35); animation:ldPuesta var(--dur) cubic-bezier(.5,0,.35,1) forwards; }
@keyframes ldPuesta{
  0%{ transform:translateY(0); filter:saturate(1); }
  70%{ filter:saturate(1.25) hue-rotate(-10deg); }
  100%{ transform:translateY(54vh); filter:saturate(1.4) hue-rotate(-18deg); } }
.loader__mar{ position:absolute; left:0; right:0; bottom:0; top:66%; z-index:2; background:linear-gradient(180deg,#e0702a,#7a3414 70%,#3b1a0d); }
.loader__mar::before{ content:""; position:absolute; inset:0; opacity:0; background:linear-gradient(180deg,#3a2140,#140a14 80%); animation:ldCapa calc(var(--dur) * .55) calc(var(--dur) * .45) ease-in forwards; }
.loader__mar::after{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:rgba(255,236,190,.5); }
.loader__reflejo{ position:absolute; top:0; left:calc(50% + var(--sx)); width:clamp(90px,14vw,170px); height:78%; translate:-50% 0; transition:left .6s var(--out);
  background:repeating-linear-gradient(180deg,rgba(255,236,190,.95) 0 3px,transparent 3px 12px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent); mask-image:linear-gradient(180deg,#000,transparent);
  animation:ldReflejo var(--dur) ease-in forwards, shimmer 1.6s ease-in-out infinite alternate; }
@keyframes ldReflejo{ 0%{ opacity:.9; } 85%{ opacity:.5; } 100%{ opacity:.12; } }
/* el emblema empieza como silueta contra el sol y se enciende al caer la noche */
.loader__marca{ position:absolute; z-index:3; left:0; right:0; top:33%; translate:calc(var(--sx) * -.25) calc(-50% + var(--sy) * -.25); transition:translate .8s var(--out);
  display:flex; flex-direction:column; align-items:center; text-align:center; pointer-events:none; }
.loader__emblema{ max-width:84vw; object-fit:contain; height:clamp(170px,27vh,270px); width:auto; clip-path:inset(100% 0 0 0); filter:brightness(0) opacity(.85);
  animation:ldEmblema 1.3s .25s var(--out) forwards, ldEnciende 1.4s calc(var(--dur) * .55) ease-in-out forwards; }
@keyframes ldEmblema{ to{ clip-path:inset(0 0 0 0); } }
@keyframes ldEnciende{ to{ filter:brightness(0) invert(.96) drop-shadow(0 0 22px rgba(255,200,140,.55)); } }
.loader__word{ height:clamp(16px,2.2vh,22px); width:auto; margin-top:22px; filter:brightness(0) invert(.96); opacity:0; animation:fadeUp 1s 1s var(--out) forwards; }
.loader__txt{ margin-top:14px; white-space:nowrap; font:600 10px/1 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--espuma); opacity:0; animation:fadeUp 1s 1.3s var(--out) forwards; }
.loader__txt b{ font-variant-numeric:tabular-nums; letter-spacing:.1em; color:#ffd8a6; }
.loader__entrar{ position:absolute; z-index:3; left:50%; bottom:clamp(26px,7vh,60px); translate:-50% 0; display:flex; align-items:center; gap:10px; padding:12px 18px;
  border-radius:999px; border:1px solid rgba(255,248,238,.4); background:rgba(20,10,6,.2); color:var(--espuma); white-space:nowrap;
  font:600 10.5px/1 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; animation:fadeUp .9s 1.6s var(--out) forwards; }
.loader__dedo{ position:relative; width:8px; height:8px; border-radius:50%; background:#ffd8a6; }
.loader__dedo::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid #ffd8a6; animation:ldToque 1.6s ease-out infinite; }
@keyframes ldToque{ from{ scale:.4; opacity:1; } to{ scale:1.8; opacity:0; } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
body.is-loading:not(.is-ready){ overflow:hidden; }
body.is-ready .loader{ clip-path:inset(0 0 100% 0); pointer-events:none; }
/* los textos de la portada esperan a que termine la intro */
body:not(.is-ready) :is(.hero__kicker,.hero__nav,.hero__tabs){ animation-play-state:paused; }
/* telón de salida hacia las sub páginas: vuelve a caer la noche con el emblema */
body.is-ready.is-saliendo .loader{ clip-path:inset(0 0 0 0); transition-duration:.7s; pointer-events:auto; }
body.is-saliendo .loader__entrar{ display:none; }

/* ---------- nav ---------- */
.nav{ position:fixed; z-index:100; top:14px; left:var(--pad); right:var(--pad); display:flex; align-items:center; gap:18px;
  padding:10px 10px 10px 16px; border-radius:999px; color:#fff; transition:background-color .4s, transform .5s var(--out), box-shadow .4s; }
.nav.is-solid{ background:rgba(36,18,11,.6); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3); box-shadow:0 10px 40px -20px rgba(0,0,0,.5); }
.nav.is-hidden{ transform:translateY(-130%); }
.nav__brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.nav__logo{ display:block; height:38px; width:auto; }
.nav__brand span{ font:500 10px/1.1 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; }
.nav__brand b{ display:block; font:italic 400 19px/1 var(--f-display); letter-spacing:0; text-transform:none; }
.nav__links{ display:flex; gap:4px; }
.nav__links a{ padding:10px 14px; border-radius:999px; font:500 13px/1 var(--f-ui); transition:background-color .3s; }
.nav__links a:hover{ background:rgba(255,255,255,.14); }
.nav__clock{ display:flex; align-items:center; gap:8px; font:500 11px/1 var(--f-ui); letter-spacing:.08em; text-transform:uppercase; opacity:.9; }
.nav__clock i{ width:7px; height:7px; border-radius:50%; background:var(--naranja-2); box-shadow:0 0 0 0 rgba(226,96,28,.7); animation:pulse 2s infinite; }
.nav__clock b{ font-variant-numeric:tabular-nums; font-weight:600; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(226,96,28,0); } 100%{ box-shadow:0 0 0 0 rgba(226,96,28,0); } }
.nav__burger{ display:none; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.14); position:relative; }
.nav__burger span{ position:absolute; left:13px; right:13px; height:1.5px; background:#fff; transition:transform .4s var(--out); }
.nav__burger span:first-child{ top:18px; } .nav__burger span:last-child{ top:25px; }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.drawer{ position:fixed; inset:0; z-index:99; background:linear-gradient(180deg,var(--marron) 0%,#a8441a 100%); color:var(--espuma);
  display:flex; flex-direction:column; justify-content:center; padding:100px var(--pad) 40px;
  clip-path:circle(0% at calc(100% - 40px) 40px); transition:clip-path .8s var(--out); }
.drawer.is-open{ clip-path:circle(150% at calc(100% - 40px) 40px); }
.drawer nav{ display:flex; flex-direction:column; gap:6px; }
.drawer a{ font:italic 400 clamp(40px,11vw,64px)/1.05 var(--f-display); }
.drawer__foot{ margin-top:auto; font:600 11px/1 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; opacity:.7; }

/* ---------- hero: top 5 experiencias en banners ---------- */
.hero{ --dur-hs:6.5s; position:relative; height:100vh; height:100svh; min-height:640px; overflow:hidden; color:#fff; background:var(--marron); touch-action:pan-y; }
.hero__slides{ position:absolute; inset:0; }
.hs{ position:absolute; inset:0; visibility:hidden; opacity:0; transition:opacity 1.1s var(--ease), visibility 0s 1.1s; }
/* velo de cada banner: entre la foto y el texto */
.hs::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:
  linear-gradient(180deg,rgba(28,14,8,.55) 0%,rgba(28,14,8,.05) 28%,rgba(28,14,8,.18) 48%,rgba(40,20,10,.9) 100%),
  linear-gradient(90deg,rgba(28,14,8,.5) 0%,rgba(28,14,8,0) 62%); }
.hs.is-on{ z-index:1; visibility:visible; opacity:1; transition:opacity 1.1s var(--ease), visibility 0s; }
/* al entrar, la foto se descubre como una cortina y se acerca despacio */
.hs.is-on .hs__img{ animation:hsCortina 1.3s var(--out) both; }
@keyframes hsCortina{ from{ clip-path:inset(0 0 0 100%); } to{ clip-path:inset(0 0 0 0); } }
.hs__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; scale:1.16; translate:0 calc(var(--hs,0) * 90px);
  transition:scale calc(var(--dur-hs) + 1.5s) linear; }
.hs.is-on .hs__img{ scale:1.03; }
.hs__n{ position:absolute; z-index:2; right:calc(var(--pad) - .06em); top:48%; translate:60px -50%; opacity:0; pointer-events:none;
  font:italic 400 clamp(180px,30vw,460px)/.8 var(--f-display); letter-spacing:-.06em; color:transparent; -webkit-text-stroke:1.5px rgba(255,248,238,.55);
  transition:translate 1.4s var(--out), opacity .8s; }
.hs.is-on .hs__n{ translate:0 -50%; opacity:1; transition-delay:.25s; }
.hs__txt{ position:absolute; z-index:3; left:var(--pad); right:var(--pad); bottom:clamp(150px,21vh,210px); max-width:880px; }
.hs__txt > *{ opacity:0; translate:0 26px; transition:opacity .3s, translate .3s; }
.hs.is-on .hs__txt > *{ opacity:1; translate:0 0; transition:opacity .9s var(--ease), translate 1.1s var(--out); }
.hs.is-on .hs__tag{ transition-delay:.35s; } .hs.is-on .hs__p{ transition-delay:.75s; } .hs.is-on .hs__cta{ transition-delay:.9s; }
.hs__tag{ display:flex; align-items:center; gap:14px; font:600 11px/1 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; }
.hs__tag b{ padding:8px 12px; border-radius:999px; background:var(--naranja); letter-spacing:.1em; }
.hs__logo{ height:24px; width:auto; filter:brightness(0) invert(1); }
.hs__logo--lalala{ height:34px; } .hs__logo--viva-word{ height:15px; }
.hs__t{ margin-top:18px; font:400 clamp(46px,min(7.6vw,12.5vh),124px)/.9 var(--f-display); letter-spacing:-.03em; text-shadow:0 10px 60px rgba(0,0,0,.3); }
.hs__t em{ font-style:italic; color:var(--naranja-3); }
.hs .hs__t{ opacity:1; translate:none; }
.hs__t .ln{ display:block; overflow:hidden; padding-bottom:.08em; }
.hs__t .ln > span{ display:block; translate:0 108%; transition:translate .4s var(--ease); }
.hs.is-on .hs__t .ln > span{ translate:0 0; transition:translate 1.1s var(--out) .45s; }
.hs.is-on .hs__t .ln + .ln > span{ transition-delay:.58s; }
.hs__p{ max-width:520px; margin-top:18px; font-size:clamp(15px,1.25vw,18px); line-height:1.55; opacity:.92; }
.hs__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
body:not(.is-ready) .hs.is-on :is(.hs__txt > :not(.hs__t), .hs__n){ opacity:0; translate:0 26px; transition:none; }
body:not(.is-ready) .hs.is-on .hs__t .ln > span{ translate:0 108%; transition:none; }
body:not(.is-ready) .hs.is-on .hs__img{ animation:none; }

.hero__veil{ display:none; background:
  linear-gradient(180deg,rgba(28,14,8,.55) 0%,rgba(28,14,8,.05) 28%,rgba(28,14,8,.15) 50%,rgba(40,20,10,.88) 100%),
  linear-gradient(90deg,rgba(28,14,8,.45) 0%,rgba(28,14,8,0) 60%); }
.hero__caustics{ display:none; position:absolute; inset:0; mix-blend-mode:soft-light; opacity:.45; pointer-events:none;
  background:radial-gradient(40% 30% at 30% 40%,rgba(255,230,170,.7),transparent 70%), radial-gradient(35% 25% at 75% 30%,rgba(120,230,230,.5),transparent 70%);
  animation:caustics 14s ease-in-out infinite alternate; }
@keyframes caustics{ to{ transform:translate3d(4%,-3%,0) scale(1.15); } }

.hero__top{ position:absolute; z-index:4; left:var(--pad); right:var(--pad); top:clamp(96px,14vh,128px); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.hero__kicker{ display:flex; align-items:center; gap:14px; margin:0; font:600 11px/1.2 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; opacity:0; animation:fadeUp 1s .6s var(--out) forwards; }
.hero__kicker span:first-child{ font:italic 400 26px/1 var(--f-display); letter-spacing:0; text-transform:none; color:var(--naranja-3); }
.hero__kicker i{ width:40px; height:1px; background:currentColor; opacity:.6; }
.hero__nav{ display:flex; align-items:center; gap:8px; opacity:0; animation:fadeUp 1s .8s var(--out) forwards; }
.hero__cuenta{ margin-right:8px; font:600 12px/1 var(--f-ui); letter-spacing:.14em; font-variant-numeric:tabular-nums; }
.hero__nav button{ width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.35); color:#fff; font-size:17px; background:rgba(255,255,255,.06);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:background-color .3s, color .3s; }
.hero__nav button:hover{ background:#fff; color:var(--marron); }

/* pestañas con barra de tiempo: marcan cuánto falta para el siguiente banner */
.hero__tabs{ position:absolute; z-index:4; left:var(--pad); right:var(--pad); bottom:clamp(58px,8vh,86px); display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(8px,1.2vw,16px);
  opacity:0; animation:fadeUp 1s 1s var(--out) forwards; }
.hero__tabs button{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:6px 10px; padding:0 0 4px; color:#fff; text-align:left; opacity:.6; transition:opacity .3s; }
.hero__tabs button:hover, .hero__tabs button.is-on{ opacity:1; }
.hero__tabs i{ grid-column:1 / -1; position:relative; height:2px; margin-bottom:8px; border-radius:2px; overflow:hidden; background:rgba(255,255,255,.28); }
.hero__tabs i b{ position:absolute; inset:0; background:var(--naranja-2); transform-origin:0 50%; transform:scaleX(0); }
.hero__tabs button.is-on i b{ animation:hsBarra var(--dur-hs) linear forwards; }
.hero__tabs button.hecho i b{ transform:scaleX(1); }
@keyframes hsBarra{ to{ transform:scaleX(1); } }
.hero.is-pausa .hero__tabs i b, body:not(.is-ready) .hero__tabs i b{ animation-play-state:paused !important; }
.hero__tabs small{ font:600 11px/1 var(--f-ui); letter-spacing:.1em; font-variant-numeric:tabular-nums; color:var(--naranja-3); }
.hero__tabs span{ overflow:hidden; font:italic 400 clamp(15px,1.3vw,19px)/1.1 var(--f-display); white-space:nowrap; text-overflow:ellipsis; }

/* olas */
.waves{ position:absolute; left:0; right:0; bottom:-2px; height:90px; overflow:hidden; pointer-events:none; z-index:2; }
.wave{ position:absolute; bottom:0; left:0; width:max(200%,2880px); max-width:none; height:100%; animation:wave 18s linear infinite; }
.wave path{ fill:currentColor; }
.waves .wave--1{ color:rgba(245,236,220,.35); height:100%; animation-duration:22s; }
.waves .wave--2{ color:rgba(245,236,220,.6); height:75%; animation-duration:15s; animation-direction:reverse; }
.waves .wave--3{ color:var(--arena); height:50%; animation-duration:11s; }
@keyframes wave{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

@media (max-width:1320px) and (min-width:701px){
  .brand__btns{ flex-direction:column; align-items:center; gap:6px; bottom:18px; }
  .brand__btn{ min-width:62%; text-align:center; }
  .brand__cover{ padding-bottom:112px; }
}

/* ---------- el chef ---------- */
.chef{ display:grid; grid-template-columns:1.05fr .95fr; min-height:clamp(480px,64vh,640px); background:#8f3a1a; color:var(--espuma); overflow:hidden; }
.chef__txt{ display:flex; flex-direction:column; justify-content:center; padding:clamp(40px,6vw,96px) clamp(24px,6vw,90px); }
.chef__k{ font:600 11px/1 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--naranja-3); }
.chef__t{ margin-top:14px; font:400 clamp(44px,5.6vw,92px)/.95 var(--f-display); letter-spacing:-.03em; }
.chef__t em{ font-style:italic; color:#ffd8a6; }
.chef__cita{ margin:18px 0 0; max-width:30ch; font:italic 400 clamp(20px,1.9vw,28px)/1.25 var(--f-display); color:#ffe7cf; }
.chef__txt > p:not(.chef__k){ max-width:56ch; margin-top:14px; font-size:15px; line-height:1.65; opacity:.86; }
.chef__logros{ display:flex; flex-wrap:wrap; gap:clamp(14px,2.4vw,34px); margin:24px 0 26px; list-style:none; }
.chef__logros li{ display:flex; align-items:center; gap:10px; }
.chef__logros b{ font:400 clamp(34px,3.4vw,52px)/1 var(--f-display); color:#ffd8a6; }
.chef__logros span{ font:600 10px/1.25 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; opacity:.85; }
.chef .btn{ align-self:flex-start; background:var(--espuma); color:#8f3a1a; box-shadow:none; }
.chef .btn:hover{ background:#fff; }
.chef__foto{ position:relative; margin:0; overflow:hidden; }
.chef__foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:67% 30%; transition:scale 1.4s var(--out); }
.chef:hover .chef__foto img{ scale:1.04; }
.chef__foto figcaption{ position:absolute; left:18px; bottom:18px; padding:8px 12px; border-radius:999px; background:rgba(20,10,6,.55); color:#fff;
  font:600 10px/1 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }

/* estrella Michelin del chef */
.chef__michelin{ display:flex; align-items:center; gap:10px; }
.chef__michelin .michelin{ flex:none; width:clamp(38px,3.4vw,50px); height:auto; color:#fff4e6; }
.chef__michelin em{ display:block; margin-top:3px; font-style:normal; text-transform:none; letter-spacing:.02em; font-size:11px; color:#ffd8a6; opacity:1; }

/* ---------- platos de Cartagena ---------- */
.platos{ background:var(--arena); padding:clamp(60px,7vw,100px) 0 clamp(50px,6vw,80px); overflow:hidden; }
.platos__top{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(20px,2.6vw,32px); }
.platos__k{ font:600 11px/1 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--naranja); }
.platos__t{ margin-top:12px; font:400 clamp(36px,4.4vw,68px)/.98 var(--f-display); letter-spacing:-.025em; color:var(--marron); }
.platos__t em{ font-style:italic; color:var(--naranja); }
.platos__ctrl{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.platos__filtros{ display:flex; flex-wrap:wrap; gap:6px; }
.platos__filtros button{ padding:9px 14px; border-radius:999px; border:1px solid rgba(43,23,16,.2); color:var(--marron); font:500 12.5px/1 var(--f-ui); transition:background-color .3s, color .3s, border-color .3s; }
.platos__filtros button:hover{ border-color:var(--naranja); }
.platos__filtros button.on{ background:var(--marron); border-color:var(--marron); color:var(--espuma); }
.platos__flechas{ display:flex; gap:8px; }
.platos__flechas button{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(43,23,16,.25); color:var(--marron); font-size:16px; transition:background-color .3s, color .3s; }
.platos__flechas button:hover{ background:var(--marron); color:var(--espuma); }
.platos__rail{ --borde:max(var(--pad),calc((100vw - var(--maxw))/2 + var(--pad)));
  display:flex; gap:clamp(12px,1.4vw,20px); overflow-x:auto; padding:6px var(--borde) 14px; scroll-padding-inline:var(--borde); scroll-snap-type:x mandatory; scrollbar-width:none; list-style:none; cursor:grab; }
.platos__rail::-webkit-scrollbar{ display:none; }
.platos__rail.is-drag{ cursor:grabbing; scroll-snap-type:none; }
.platos__rail.is-drag a{ pointer-events:none; }
.pl{ flex:none; width:clamp(230px,21vw,300px); scroll-snap-align:start; transition:opacity .4s, scale .4s var(--out); }
.pl[hidden]{ display:none; }
.pl.entra{ animation:plEntra .6s var(--out) both; animation-delay:calc(var(--i,0) * 60ms); }
@keyframes plEntra{ from{ opacity:0; translate:0 24px; } }
.pl a{ position:relative; display:block; color:var(--marron); }
.pl__foto{ position:relative; margin:0; aspect-ratio:4/5; border-radius:20px; overflow:hidden; background:var(--marron); box-shadow:0 24px 40px -28px rgba(43,23,16,.6); }
.pl__foto img{ width:100%; height:100%; object-fit:cover; transition:scale 1s var(--out); }
.pl a:hover .pl__foto img{ scale:1.07; }
.pl__marca{ position:absolute; left:12px; top:12px; padding:7px 11px; border-radius:999px; font:600 10px/1 var(--f-ui); letter-spacing:.12em; text-transform:uppercase; color:#fff; background:rgba(20,10,6,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.pl[data-marca="viva"] .pl__marca{ background:#e2601c; }
.pl[data-marca="otafuku"] .pl__marca{ background:#8f3a1a; }
.pl[data-marca="lalala"] .pl__marca{ background:#f0be2e; color:#17140d; }
.pl[data-marca="sombras"] .pl__marca{ background:#050505; }
.pl__txt{ padding:14px 4px 0; }
.pl__txt h3{ font:400 clamp(21px,1.8vw,26px)/1.1 var(--f-display); letter-spacing:-.01em; }
.pl__txt p{ margin-top:6px; font-size:13.5px; line-height:1.45; opacity:.72; }
.pl__ver{ display:inline-block; margin-top:10px; font:600 11px/1 var(--f-ui); letter-spacing:.12em; text-transform:uppercase; color:var(--naranja); opacity:0; translate:-6px 0; transition:opacity .3s, translate .4s var(--out); }
.pl a:hover .pl__ver, .pl a:focus-visible .pl__ver{ opacity:1; translate:0 0; }
@media (hover:none){ .pl__ver{ opacity:1; translate:none; } }

@media (max-width:900px){
  .chef{ grid-template-columns:1fr; }
  .chef__foto{ order:-1; aspect-ratio:4/3; }
  .platos__top{ align-items:flex-start; }
  .platos__flechas{ display:none; }
  .platos__filtros{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--pad)); padding:0 var(--pad); }
  .platos__filtros::-webkit-scrollbar{ display:none; }
  .platos__filtros button{ flex:none; }
  .platos__ctrl{ width:100%; }
  .pl{ width:68vw; }
}

/* ---------- bonos & regalos ---------- */
.bono{ background:var(--arena); padding:clamp(60px,7vw,100px) 0 0; }
.bono__card{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,60px); align-items:center; overflow:hidden;
  padding:clamp(28px,4vw,56px); border-radius:34px; color:var(--espuma);
  background:radial-gradient(90% 120% at 100% 0%,rgba(255,138,61,.35) 0%,transparent 55%), radial-gradient(70% 90% at 0% 100%,rgba(226,96,28,.22),transparent 60%), linear-gradient(135deg,#3a1d10 0%,var(--marron) 55%,#1a0d07 100%);
  box-shadow:0 50px 90px -50px rgba(43,23,16,.7); }
.bono__card::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; border:1px solid rgba(255,248,238,.1); }
.bono__k{ display:flex; align-items:center; gap:10px; font:600 11px/1 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--naranja-3); }
.bono__dot{ width:8px; height:8px; border-radius:50%; background:var(--naranja-2); animation:pulse 2s infinite; }
.bono__t{ margin-top:14px; font:400 clamp(32px,3.5vw,54px)/1.02 var(--f-display); letter-spacing:-.02em; }
.bono__t em{ font-style:italic; color:var(--naranja-2); }
.bono__p{ max-width:48ch; margin-top:12px; font-size:15px; line-height:1.6; opacity:.78; }
.bono__arma{ display:grid; gap:11px; margin-top:20px; padding:16px 18px; border-radius:22px; background:rgba(255,248,238,.05); border:1px solid rgba(255,248,238,.1); }
.bono__campo{ display:grid; grid-template-columns:104px 1fr; align-items:center; gap:12px; }
.bono__campo > span{ font:600 10px/1.2 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; opacity:.6; }
.bono__campo input[type=text]{ width:100%; padding:10px 14px; border-radius:12px; border:1px solid rgba(255,248,238,.18); background:rgba(0,0,0,.18); color:var(--espuma);
  font:italic 400 18px/1.2 var(--f-display); outline:none; transition:border-color .3s; }
.bono__campo input[type=text]::placeholder{ color:rgba(255,248,238,.4); }
.bono__campo input[type=text]:focus{ border-color:var(--naranja-2); }
.bono__ops{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.bono__ops button, .bono__subir{ padding:8px 12px; border-radius:999px; border:1px solid rgba(255,248,238,.2); color:var(--espuma); cursor:pointer;
  font:500 12px/1 var(--f-ui); transition:background-color .3s, border-color .3s, color .3s, transform .3s var(--out); }
.bono__ops button:hover, .bono__subir:hover{ border-color:var(--naranja-2); transform:translateY(-2px); }
.bono__ops button.on{ background:var(--espuma); border-color:var(--espuma); color:var(--marron); }
.bono__subir{ position:relative; overflow:hidden; border-style:dashed; }
.bono__subir.on{ border-style:solid; border-color:var(--naranja-2); color:var(--naranja-3); }
.bono__subir input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.bono__subir:focus-within{ outline:2px solid var(--naranja-2); outline-offset:2px; }
.bono__quitar{ opacity:.8; }
.bono__nota{ font:500 10.5px/1.2 var(--f-ui); opacity:.5; }
.bono__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.bono__datos{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:16px; font:500 12px/1.3 var(--f-ui); opacity:.7; list-style:none; }
.bono__datos li{ position:relative; padding-left:14px; }
.bono__datos li::before{ content:"✓"; position:absolute; left:0; color:var(--naranja-2); }

/* las 3 tarjetas: la del frente es el restaurante elegido; tocar una de atrás la trae al frente */
.bono__mesa{ position:relative; height:clamp(340px,36vw,500px); perspective:1200px; }
.bono__pista{ position:absolute; left:0; right:0; bottom:0; text-align:center; font:500 11px/1 var(--f-ui); letter-spacing:.08em; opacity:.5; }
.gc{ --tx:0%; --ty:0%; --r:0deg; --z:1; position:absolute; z-index:var(--z); left:50%; top:46%; width:min(430px,90%); aspect-ratio:1.6; border-radius:20px; overflow:hidden; cursor:pointer;
  translate:calc(-50% + var(--tx)) calc(-50% + var(--ty)); rotate:var(--r); transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:translate .9s var(--out), rotate .9s var(--out), transform .25s linear, filter .6s, box-shadow .6s; box-shadow:0 30px 60px -28px rgba(0,0,0,.75); }
.gc[data-pos="a"]{ --ty:10%; --r:-2deg; --z:3; cursor:default; }
.gc[data-pos="b"]{ --tx:-15%; --ty:-15%; --r:-8deg; --z:2; filter:brightness(.72); }
.gc[data-pos="c"]{ --tx:14%; --ty:-26%; --r:8deg; --z:1; filter:brightness(.6); }
.gc[data-pos="d"]{ --tx:-2%; --ty:-34%; --r:2deg; --z:0; filter:brightness(.5); }
.bono__mesa:hover .gc[data-pos="b"]{ --tx:-25%; --ty:-22%; --r:-13deg; }
.bono__mesa:hover .gc[data-pos="c"]{ --tx:24%; --ty:-34%; --r:13deg; }
.bono__mesa:hover .gc[data-pos="d"]{ --tx:0%; --ty:-44%; --r:3deg; }
.gc[data-pos="d"]:hover{ filter:brightness(1); }
.gc[data-pos="b"]:hover, .gc[data-pos="c"]:hover{ filter:brightness(1); }
.gc--viva{ background:#e2601c; } .gc--otafuku{ background:#f6ebd8; } .gc--sombras{ background:#050505; } .gc--lalala{ background:#f0be2e; }
.gc__marco{ position:absolute; inset:0; overflow:hidden; }
.gc__foto{ width:100%; height:100%; object-fit:cover; transition:opacity .4s; }
.gc--sombras .gc__foto{ filter:brightness(1.25); }
.gc__velo{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,10,6,.35) 0%,rgba(20,10,6,.05) 40%,rgba(20,10,6,.8) 100%); }
.gc__top{ position:absolute; left:18px; right:18px; top:16px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.gc__logo{ flex:none; height:20px; width:auto; max-width:none; object-fit:contain; filter:brightness(0) invert(1); }
.gc--viva .gc__logo{ height:13px; }
.gc__etq{ padding:6px 10px; border-radius:999px; background:rgba(255,248,238,.92); color:var(--marron); font:600 10px/1 var(--f-ui); font-style:normal; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.gc__avatar{ position:absolute; left:18px; bottom:76px; width:54px; height:54px; border-radius:50%; overflow:hidden; border:3px solid #fff8ee; box-shadow:0 8px 20px -8px rgba(0,0,0,.6); display:none; }
.gc__avatar img{ width:100%; height:100%; object-fit:cover; }
.bono__mesa.con-foto:not(.es-postal) .gc__avatar{ display:block; }
.gc__para{ position:absolute; left:18px; bottom:44px; display:flex; flex-direction:column; color:#fff; }
.gc__para small{ font:600 9px/1 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; opacity:.75; }
.gc__nombre{ margin-top:4px; font:italic 400 clamp(22px,2.3vw,32px)/1 var(--f-display); max-width:13ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gc__valor{ position:absolute; left:18px; bottom:18px; color:#ffd8a6; font:600 15px/1 var(--f-ui); letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.gc__frase{ position:absolute; right:18px; bottom:16px; max-width:44%; color:#fff; text-align:right; font:500 19px/1.05 var(--f-hand);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.gc__sello, .gc__matasellos{ display:none; }
.gc__brillo{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light; background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.5),transparent 45%); }
.gc.cambia .gc__nombre, .gc.cambia .gc__valor, .gc.cambia .gc__frase, .gc.cambia .gc__etq{ animation:gcCambio .5s var(--out); }
@keyframes gcCambio{ from{ opacity:0; transform:translateY(8px); } }

/* diseño postal: solo texturas y color (ondas, rayas, vichy o cuadros según la ocasión),
   foto a la izquierda con cinta, estampilla, matasellos y el mensaje de la persona en grande */
.gc__cinta, .gc__sello, .gc__matasellos, .gc__textura{ display:none; }
.gc--viva{ --c1:#f6b9a6; --c2:#e2601c; --pc-tinta:#fffaf2; --pc-sombra:rgba(122,44,14,.45); --pc-sello:#2b1710; }
.gc--otafuku{ --c1:#f6ebd8; --c2:#e2601c; --pc-tinta:#2b1710; --pc-sombra:rgba(246,235,216,.95); --pc-sello:#e2601c; }
.gc--sombras{ --c1:#0e0d0d; --c2:transparent; --pc-tinta:#fdf2e4; --pc-sombra:rgba(0,0,0,.6); --pc-sello:#e2601c; }
.gc--lalala{ --c1:#fdf3d6; --c2:#f0be2e; --pc-tinta:#17140d; --pc-sombra:rgba(253,243,214,.95); --pc-sello:#f0be2e; }
.es-postal .gc{ background:var(--c1); color:var(--pc-tinta); }
.es-postal .gc__textura{ display:block; position:absolute; inset:0; }
/* ondas */
.bono__mesa[data-ocasion="atardecer"] .gc--viva .gc__textura{ background:var(--c2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='80' viewBox='0 0 56 80'%3E%3Cpath d='M8 0c10 10 10 30 0 40s-10 30 0 40h22c-10-10-10-30 0-40s10-30 0-40z' fill='%23000'/%3E%3C/svg%3E") 0 0/48px 70px repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='80' viewBox='0 0 56 80'%3E%3Cpath d='M8 0c10 10 10 30 0 40s-10 30 0 40h22c-10-10-10-30 0-40s10-30 0-40z' fill='%23000'/%3E%3C/svg%3E") 0 0/48px 70px repeat; }
/* rayas verticales */
.bono__mesa[data-ocasion="cumple"] .gc--viva .gc__textura{ background:repeating-linear-gradient(90deg,var(--c2) 0 22px,transparent 22px 44px); }
/* vichy */
.bono__mesa[data-ocasion="amor"] .gc--viva .gc__textura{ background:
  linear-gradient(90deg,color-mix(in srgb,var(--c2) 50%,transparent) 50%,transparent 50%) 0 0/30px 30px,
  linear-gradient(color-mix(in srgb,var(--c2) 50%,transparent) 50%,transparent 50%) 0 0/30px 30px; }
/* cuadros escoceses */
.bono__mesa[data-ocasion="gracias"] .gc--viva .gc__textura{ background:
  repeating-linear-gradient(90deg,transparent 0 16px,color-mix(in srgb,var(--c2) 70%,transparent) 16px 30px,transparent 30px 40px,color-mix(in srgb,var(--c2) 35%,transparent) 40px 44px,transparent 44px 56px),
  repeating-linear-gradient(0deg,transparent 0 16px,color-mix(in srgb,var(--c2) 70%,transparent) 16px 30px,transparent 30px 40px,color-mix(in srgb,var(--c2) 35%,transparent) 40px 44px,transparent 44px 56px); }
.es-postal .gc::before{ content:""; position:absolute; z-index:1; inset:0; pointer-events:none; opacity:.28; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23p)'/%3E%3C/svg%3E"); }
/* Otafuku: beige con cuadritos muy sutiles; la la la!: rayas de toldo; Sombras: negro liso con textura de papel */
.es-postal .gc--otafuku .gc__textura{ background:linear-gradient(rgba(43,23,16,.07) 1px,transparent 1px) 0 0/14px 14px, linear-gradient(90deg,rgba(43,23,16,.07) 1px,transparent 1px) 0 0/14px 14px; }
.es-postal .gc--lalala .gc__textura{ background:repeating-linear-gradient(90deg,var(--c2) 0 20px,transparent 20px 40px); opacity:.85; }
.es-postal .gc--sombras .gc__textura{ background:none; }
.es-postal .gc--sombras::before{ mix-blend-mode:screen; opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .9 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E"); }
.es-postal .gc > *{ z-index:2; }
.es-postal .gc__marco{ inset:14px auto 14px 14px; width:calc(44% - 14px); border-radius:4px; border:5px solid #fffaf2; rotate:-2deg; box-shadow:0 8px 16px -6px rgba(0,0,0,.45); }
.es-postal .gc__cinta{ display:block; position:absolute; z-index:3; left:calc(22% - 30px); top:6px; width:60px; height:18px; rotate:-6deg; background:rgba(255,250,242,.75); box-shadow:0 1px 2px rgba(0,0,0,.1); }
.es-postal .gc__velo, .es-postal .gc__brillo, .es-postal .gc__etq, .es-postal .gc__avatar{ display:none !important; }
.es-postal .gc__textura{ z-index:0; }
.es-postal .gc__frase{ left:50%; right:14px; top:50%; translate:0 -50%; bottom:auto; max-width:none; text-align:center; color:var(--pc-tinta);
  font:700 clamp(24px,2.5vw,34px)/.95 var(--f-hand); -webkit-line-clamp:3; rotate:-3deg;
  text-shadow:0 2px 0 var(--pc-sombra), 0 0 14px var(--pc-sombra); }
.es-postal .gc__para{ left:50%; right:14px; bottom:34px; flex-direction:row; justify-content:center; align-items:baseline; gap:6px; color:var(--pc-tinta); text-shadow:0 0 10px var(--pc-sombra); }
.es-postal .gc__para small{ font:600 9px/1 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; opacity:.8; }
.es-postal .gc__nombre{ margin:0; font:700 clamp(18px,1.7vw,22px)/1 var(--f-hand); max-width:100%; }
.es-postal .gc__valor{ left:50%; top:16px; bottom:auto; padding:5px 9px; border-radius:999px; background:var(--pc-tinta); color:var(--c1); font:700 11px/1 var(--f-ui); }
.es-postal .gc--viva .gc__valor{ color:#c8330f; } .es-postal .gc--otafuku .gc__valor{ color:#fdf1e2; }
.es-postal .gc__sello{ display:grid; place-items:center; position:absolute; right:14px; top:12px; width:46px; height:56px; padding:6px; rotate:5deg;
  background:var(--pc-sello); outline:2px dashed #fffaf2; outline-offset:-5px; box-shadow:0 4px 10px -4px rgba(0,0,0,.45); }
.es-postal .gc__sello img{ width:100%; height:auto; filter:brightness(0) invert(1); }
.es-postal .gc__sello:not(.sin-estampilla){ width:62px; height:auto; right:12px; top:10px; padding:0; background:none; outline:0; box-shadow:none; }
.es-postal .gc__sello:not(.sin-estampilla) img{ filter:drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.es-postal .gc--lalala .gc__sello.sin-estampilla img{ filter:brightness(0); }
.es-postal .gc__matasellos{ display:block; position:absolute; z-index:3; right:72px; top:16px; width:50px; rotate:-8deg; opacity:.9; pointer-events:none; }
.es-postal .gc__matasellos img{ display:block; width:100%; height:auto; }
.es-postal .gc__top{ left:auto; right:14px; top:auto; bottom:12px; }
.es-postal .gc__logo{ height:10px; filter:brightness(0) invert(1) opacity(.85); }
.es-postal .gc--otafuku .gc__logo, .es-postal .gc--lalala .gc__logo{ filter:brightness(0) opacity(.75); }
.es-postal .gc--lalala .gc__logo{ height:14px; }
.es-postal .gc--otafuku .gc__valor, .es-postal .gc--lalala .gc__valor{ color:#fdf1e2; }
.es-postal .gc--viva .gc__logo{ height:7px; }

@media (max-width:900px){
  .bono__card{ grid-template-columns:1fr; border-radius:26px; }
  .bono__mesa{ order:-1; height:270px; }
  .gc{ width:min(330px,82%); }
}
@media (max-width:560px){
  .bono{ padding-top:44px; }
  .bono__card{ padding:22px 16px 26px; margin:0 -4px; }
  .bono__mesa{ height:236px; }
  .gc{ width:78%; border-radius:14px; }
  .gc__logo{ height:14px; } .gc--viva .gc__logo{ height:10px; }
  .gc__etq{ font-size:8px; padding:5px 8px; }
  .gc__para{ bottom:36px; left:12px; }
  .gc__nombre{ font-size:20px; }
  .gc__avatar{ width:40px; height:40px; left:12px; bottom:64px; border-width:2px; }
  .gc__valor{ left:12px; bottom:12px; font-size:12px; }
  .gc__frase{ display:none; }
  .es-postal .gc__frase{ display:-webkit-box; top:50%; left:48%; right:8px; font-size:16px; -webkit-line-clamp:3; }
  .es-postal .gc__para{ bottom:22px; left:48%; right:8px; }
  .es-postal .gc__para small{ font-size:7px; }
  .es-postal .gc__nombre{ font-size:13px; }
  .es-postal .gc__valor{ top:9px; left:48%; font-size:8px; padding:3px 6px; }
  .es-postal .gc__sello{ width:28px; height:34px; right:8px; top:8px; padding:4px; outline-offset:-3px; }
  .es-postal .gc__matasellos{ width:30px; right:46px; top:10px; }
  .es-postal .gc__sello:not(.sin-estampilla){ width:36px; right:8px; top:7px; }
  .es-postal .gc__marco{ inset:9px auto 9px 9px; width:calc(44% - 9px); border-width:3px; }
  .es-postal .gc__cinta{ width:40px; height:12px; top:3px; left:calc(22% - 20px); }
  .es-postal .gc__top{ right:10px; bottom:7px; }
  .es-postal .gc__logo{ height:7px; } .es-postal .gc--viva .gc__logo{ height:5px; }
  .es-postal .gc--lalala .gc__logo{ height:9px; }
  .es-postal .gc__para{ bottom:26px; }
  .bono__campo{ grid-template-columns:1fr; gap:7px; }
  .bono__arma{ padding:14px; }
  .bono__cta .btn{ flex:1; justify-content:center; }
  .bono__pista{ bottom:-4px; }
}

/* ---------- 05 · video ---------- */
.cine{ position:relative; min-height:clamp(340px,58vh,580px); display:flex; align-items:flex-end; overflow:hidden; background:var(--marron); color:var(--espuma); }
.cine__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; scale:1.06; }
.cine__video::-webkit-media-controls, .cine__video::-webkit-media-controls-start-playback-button{ display:none !important; -webkit-appearance:none; }
.cine__veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(43,23,16,.35) 0%,rgba(43,23,16,0) 35%,rgba(24,12,6,.85) 100%), linear-gradient(90deg,rgba(24,12,6,.5),transparent 60%); }
.cine__txt{ position:relative; z-index:2; padding-top:60px; padding-bottom:clamp(36px,5vw,64px); }
/* de lado a lado: franja horizontal en computador; en celular usa la versión vertical */
@media (max-width:700px){
  .cine{ min-height:70svh; }
  .cine__video{ scale:1; }
}
.cine .display{ font-size:clamp(38px,5vw,80px); }
.cine__txt .eyebrow{ display:block; margin-bottom:12px; opacity:.8; }
.cine__txt p{ max-width:440px; margin:12px 0 20px; font-size:15px; line-height:1.55; opacity:.85; }

/* ---------- marquesina ---------- */
.marquee{ background:var(--arena); border-bottom:1px solid rgba(43,23,16,.15); overflow:hidden; padding:22px 0 26px; }
.marquee__track{ display:flex; align-items:center; gap:34px; width:max-content; animation:wave 38s linear infinite; }
.marquee span{ font:italic 400 clamp(26px,3.4vw,48px)/1 var(--f-display); white-space:nowrap; }
.marquee i{ font-style:normal; color:var(--coral); font-size:22px; }


@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- UN DÍA (scroll) ---------- */
.dia{ position:relative; height:460vh; background:var(--negro); }
.dia__sticky{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; color:var(--ink,#10212a);
  --sky-a:#fdf7e7; --sky-b:#f7e2aa; --sea:#e8b030; --ink:#10212a; --paper:#fffaf1; transition:color .7s var(--ease); }
.dia__sky{ position:absolute; inset:0; background:linear-gradient(180deg,var(--sky-a) 0%,var(--sky-b) 76%); }
/* rayas de toldo italiano: sólo encendidas en el capítulo de la la la! */
.dia__rayas{ position:absolute; inset:0; pointer-events:none; opacity:var(--rayas,0);
  background:repeating-linear-gradient(90deg,rgba(240,190,46,.55) 0 56px,rgba(253,247,231,0) 56px 112px); }
.dia__stars{ position:absolute; inset:0 0 25% 0; opacity:var(--stars,0); pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 18%,#fff 60%,transparent 61%), radial-gradient(1px 1px at 22% 8%,#fff 60%,transparent 61%),
    radial-gradient(1.6px 1.6px at 35% 26%,#fff 60%,transparent 61%), radial-gradient(1px 1px at 48% 12%,#fff 60%,transparent 61%),
    radial-gradient(1.2px 1.2px at 58% 30%,#fff 60%,transparent 61%), radial-gradient(1.6px 1.6px at 67% 6%,#fff 60%,transparent 61%),
    radial-gradient(1px 1px at 76% 22%,#fff 60%,transparent 61%), radial-gradient(1.4px 1.4px at 88% 14%,#fff 60%,transparent 61%),
    radial-gradient(1px 1px at 94% 34%,#fff 60%,transparent 61%), radial-gradient(1.2px 1.2px at 14% 40%,#fff 60%,transparent 61%),
    radial-gradient(1px 1px at 42% 44%,#fff 60%,transparent 61%), radial-gradient(1.3px 1.3px at 82% 46%,#fff 60%,transparent 61%);
  animation:twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle{ to{ filter:brightness(.55); } }
.dia__arc{ position:absolute; left:50%; bottom:24%; width:min(1180px,120vw); transform:translateX(-50%); overflow:visible; color:var(--ink); }
.dia__hora{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); font:400 clamp(120px,27vw,460px)/1 var(--f-display); letter-spacing:-.05em;
  color:var(--ink); opacity:.08; font-variant-numeric:tabular-nums; white-space:nowrap; pointer-events:none; }
.dia__sea{ position:absolute; left:0; right:0; bottom:0; height:24%; background:linear-gradient(180deg,var(--sea),color-mix(in srgb,var(--sea) 94%,#000)); }
.dia__sea .wave--sea{ bottom:100%; height:40px; color:var(--sea); animation-duration:14s; }
.dia__glint{ position:absolute; top:0; bottom:0; left:var(--gx,50%); width:clamp(60px,9vw,140px); transform:translateX(-50%); opacity:var(--glint,.6);
  background:repeating-linear-gradient(180deg,rgba(255,236,190,.9) 0 3px,transparent 3px 11px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 90%); mask-image:linear-gradient(180deg,#000,transparent 90%);
  animation:shimmer 2.4s ease-in-out infinite alternate; }
@keyframes shimmer{ to{ transform:translateX(-50%) scaleX(1.35); filter:blur(1px); } }

.dia__head{ position:absolute; z-index:4; left:var(--pad); right:var(--pad); top:clamp(86px,12vh,110px); display:flex; justify-content:space-between; gap:16px; opacity:.85; }
.dia__chs{ position:absolute; inset:0; z-index:3; }
.ch{ position:absolute; inset:0; display:grid; grid-template-columns:1fr .92fr; align-items:center; gap:clamp(24px,5vw,90px);
  padding:clamp(130px,17vh,170px) var(--pad) clamp(110px,15vh,140px); max-width:var(--maxw); margin:0 auto; pointer-events:none; }
.ch.is-on{ pointer-events:auto; }
.ch__text > *{ opacity:0; transform:translateY(28px); transition:opacity .5s var(--ease), transform .8s var(--out); }
.ch.is-on .ch__text > *{ opacity:1; transform:none; }
.ch.is-on .ch__text > :nth-child(2){ transition-delay:.06s; } .ch.is-on .ch__text > :nth-child(3){ transition-delay:.12s; }
.ch.is-on .ch__text > :nth-child(4){ transition-delay:.18s; } .ch.is-on .ch__text > :nth-child(5){ transition-delay:.24s; }
.ch.is-on .ch__text > :nth-child(6){ transition-delay:.3s; }
.ch__hour{ display:flex; align-items:center; gap:12px; font:600 11px/1 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; }
.ch__hour b{ font:500 15px/1 var(--f-ui); letter-spacing:.04em; padding:8px 12px; border-radius:999px; border:1px solid currentColor; }
.ch__new{ padding:7px 11px; border-radius:999px; background:var(--coral); color:#fff; letter-spacing:.14em; animation:bob 2.4s ease-in-out infinite; }
@keyframes bob{ 50%{ transform:translateY(-3px) rotate(-3deg); } }
.ch__logo{ height:clamp(44px,5vw,70px); width:auto; margin:26px 0 18px; }
.ch__logo--lalala{ height:clamp(64px,7vw,104px); }
.ch__logo--viva{ height:clamp(22px,2.4vw,34px); margin:34px 0 26px; }
.ch__logo--otafuku, .ch__logo--sombras{ height:clamp(36px,4vw,56px); }
.ch__title{ font:400 clamp(40px,5.2vw,86px)/.95 var(--f-display); letter-spacing:-.025em; max-width:12ch; }
.ch__p{ max-width:520px; margin-top:20px; font-size:clamp(15px,1.15vw,17px); line-height:1.6; color:color-mix(in srgb,currentColor 86%,transparent); }
.ch__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.ch__tags li{ padding:8px 13px; border-radius:999px; font:500 12px/1 var(--f-ui); background:color-mix(in srgb,currentColor 12%,transparent); }
.ch__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }

.ch__media{ position:relative; height:min(64vh,640px); }
.ch__img{ position:absolute; overflow:hidden; border-radius:var(--r); background:#0003; box-shadow:0 40px 80px -40px rgba(0,0,0,.55); }
.ch__img img, .ch__img video{ width:100%; height:100%; object-fit:cover; transform:scale(1.18); transition:transform 1.6s var(--out); }
.ch__img--a{ top:0; left:0; right:20%; bottom:10%; clip-path:inset(100% 0 0 0 round var(--r)); transition:clip-path 1.1s var(--out); }
.ch__img--b{ right:0; bottom:0; width:44%; aspect-ratio:3/4; border:6px solid var(--paper); opacity:0; transform:translateY(80px) rotate(10deg); transition:opacity .6s .15s, transform 1.1s .15s var(--out); }
.ch.is-on .ch__img--a{ clip-path:inset(0 0 0 0 round var(--r)); }
.ch.is-on .ch__img--b{ opacity:1; transform:rotate(4deg); }
.ch.is-on .ch__img img, .ch.is-on .ch__img video{ transform:scale(1); }
.ch__img--dark{ box-shadow:0 0 80px -10px rgba(255,240,220,.1); outline:1px solid rgba(253,242,228,.14); outline-offset:-1px; }
.ch__img--dark.ch__img--b{ border-color:#1a1a1a; }

.dia__rail{ position:absolute; z-index:5; left:50%; bottom:clamp(20px,4vh,36px); transform:translateX(-50%); display:flex; gap:4px; padding:6px; border-radius:999px;
  background:color-mix(in srgb,var(--paper) 55%,transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.dia__rail button{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 16px; border-radius:999px; color:var(--ink); opacity:.6; transition:opacity .3s, background-color .3s; }
.dia__rail button b{ font:600 13px/1 var(--f-ui); font-variant-numeric:tabular-nums; }
.dia__rail button span{ font:500 10px/1 var(--f-ui); letter-spacing:.06em; white-space:nowrap; }
.dia__rail button.is-on{ opacity:1; background:color-mix(in srgb,var(--ink) 14%,transparent); }
.dia__bar{ position:absolute; left:14px; right:14px; bottom:3px; height:2px; border-radius:2px; background:color-mix(in srgb,var(--ink) 15%,transparent); overflow:hidden; }
.dia__bar i{ display:block; height:100%; width:100%; background:var(--naranja-2); transform-origin:0 50%; transform:scaleX(var(--prog,0)); }

/* ---------- NUESTRAS MARCAS (tarjetas) ---------- */
.brands{ position:relative; overflow-x:clip; scroll-margin-top:60px; background:var(--arena); padding:clamp(60px,6vw,90px) 0 clamp(70px,8vw,110px); }
.brands__sol{ position:absolute; z-index:4; right:clamp(-40px,-2vw,-10px); top:clamp(-60px,-4vw,-30px); width:clamp(110px,13vw,200px); animation:spin 40s linear infinite; pointer-events:none; }
.brands__head{ margin-bottom:clamp(22px,3vw,40px); }
.brands__k{ font:600 11px/1 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--naranja); }
.brands__t{ max-width:22ch; margin-top:12px; font:400 clamp(32px,4vw,60px)/1 var(--f-display); letter-spacing:-.025em; color:var(--marron); }
.brands__t em{ font-style:italic; color:var(--naranja); }
.brands__row{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.3vw,18px); align-items:start; }
.brand-item{ display:flex; flex-direction:column; min-width:0; }
.brand__desc{ margin-top:14px; padding:0 4px; font-size:13.5px; line-height:1.5; color:rgba(43,23,16,.78); }
.brand{ position:relative; height:clamp(360px,34vw,470px); border-radius:22px; overflow:hidden; background:var(--marron);
  box-shadow:0 24px 50px -36px rgba(43,23,16,.55); transition:transform .6s var(--out), box-shadow .6s var(--out), filter .5s; }
.brand__cover{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; align-items:center; padding:18px 18px 92px; color:#fff; text-align:center; }
.brand__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--out); }
.brand__veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,10,6,.25) 0%,rgba(20,10,6,0) 30%,rgba(20,10,6,.35) 58%,rgba(20,10,6,.85) 100%); }
.brand__tag{ position:relative; z-index:2; align-self:flex-start; padding:7px 11px; border-radius:999px; border:1px solid rgba(255,255,255,.45);
  background:rgba(20,10,6,.25); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font:600 9.5px/1 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; }
.brand__foot{ position:absolute; z-index:2; left:0; right:0; top:50%; translate:0 -50%; display:flex; justify-content:center; width:100%; padding:0 12px; }
/* todos los logos en blanco */
.brand__logo{ height:clamp(24px,2.3vw,34px); width:auto; max-width:82%; object-fit:contain; object-position:center; filter:brightness(0) invert(1) drop-shadow(0 4px 14px rgba(0,0,0,.35)); }
.brand__logo--lalala{ height:clamp(38px,3.6vw,54px); }
.brand__logo--viva{ height:clamp(16px,1.6vw,24px); max-width:78%; }
.brand__btns{ position:absolute; z-index:3; left:14px; right:14px; bottom:22px; display:flex; justify-content:center; gap:8px; }
.brand__btn{ padding:11px 20px; white-space:nowrap; border-radius:999px; background:var(--naranja); color:var(--espuma);
  font:600 10px/1 var(--f-ui); letter-spacing:.12em; text-transform:uppercase; box-shadow:0 8px 20px -8px rgba(226,96,28,.8); transition:background-color .3s, transform .35s var(--out); }
.brand__btn:hover{ background:var(--naranja-2); transform:translateY(-2px); }
.brand__btn--ver{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.brand__btn--ver:hover{ background:#fff; color:var(--marron); }
/* la tarjeta destacada crece y las demás se retiran un poco */
.brands__row:not(:hover) .brand.is-feat, .brand:hover{ transform:scale(1.07); z-index:2; box-shadow:0 40px 70px -34px rgba(43,23,16,.7); }
.brands__row:hover .brand:not(:hover){ transform:scale(.97); filter:saturate(.85); }
.brand:hover .brand__bg{ transform:scale(1.06); }

/* ---------- 03 · EVENTOS (agenda + celebraciones, estilo Grupo Seratta) ---------- */
.agenda{ background:radial-gradient(120% 80% at 85% 0%,#3d2215 0%,var(--marron) 45%,#170b06 100%); color:var(--espuma); padding:clamp(80px,10vw,130px) 0; overflow:hidden; }
.agenda .sec-head{ border-color:rgba(255,248,238,.16); }
.agenda__top{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:clamp(24px,3vw,38px); }
.agenda__k{ display:block; margin-bottom:12px; font:600 10px/1 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--naranja-2); }
.agenda__t{ font:400 clamp(34px,4.4vw,64px)/1 var(--f-display); letter-spacing:-.02em; }
.agenda__t em{ font-style:italic; color:var(--naranja-3); }
.agenda__nav{ display:flex; align-items:center; gap:10px; }
.agenda__nav a{ margin-right:10px; font:600 11px/1 var(--f-ui); letter-spacing:.12em; text-transform:uppercase; color:var(--naranja-2); white-space:nowrap; }
.agenda__nav button{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,248,238,.25); color:var(--espuma); font-size:18px; transition:background-color .3s, border-color .3s; }
.agenda__nav button:hover{ background:var(--naranja); border-color:var(--naranja); }
.agenda__rail{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:4px max(var(--pad),calc((100vw - var(--maxw))/2 + var(--pad))) 12px; }
.agenda__rail::-webkit-scrollbar{ display:none; }
.ev{ position:relative; flex:none; width:clamp(240px,22vw,300px); aspect-ratio:3/4.1; display:flex; flex-direction:column; justify-content:flex-end; padding:16px;
  border-radius:18px; overflow:hidden; color:#fff; isolation:isolate; scroll-snap-align:start; transition:transform .5s var(--out); }
.ev:hover{ transform:translateY(-6px); }
.ev img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--out); }
.ev:hover img{ transform:scale(1.06); }
.ev::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(15,8,4,.3) 0%,rgba(15,8,4,0) 28%,rgba(15,8,4,.93) 76%); }
.ev__st{ position:absolute; top:14px; left:14px; padding:6px 10px; border-radius:999px; background:var(--naranja); font:700 9px/1 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; }
.ev__st--dark{ background:rgba(15,8,4,.55); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.ev__k{ font:600 9.5px/1 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--naranja-3); }
.ev h3{ margin-top:8px; font:400 21px/1.1 var(--f-display); }
.ev__when{ margin-top:8px; font-size:12px; line-height:1.45; opacity:.8; }
.ev__go{ margin-top:12px; font:600 11px/1 var(--f-ui); letter-spacing:.08em; color:var(--naranja-2); }

.celebra{ display:grid; grid-template-columns:1.05fr .95fr; margin-top:clamp(50px,6vw,80px); border-radius:26px; overflow:hidden; border:1px solid rgba(255,248,238,.14); background:rgba(255,248,238,.04); }
.celebra__txt{ padding:clamp(28px,4vw,52px); }
.celebra__t{ font:400 clamp(30px,3.4vw,50px)/1.02 var(--f-display); letter-spacing:-.02em; }
.celebra__t em{ font-style:italic; color:var(--naranja-2); }
.celebra__txt p{ max-width:48ch; margin-top:16px; font-size:15px; line-height:1.6; opacity:.8; }
.celebra__chips, .celebra__tipos{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.celebra__chips span{ padding:8px 13px; border-radius:999px; border:1px solid rgba(255,248,238,.22); font:500 12px/1 var(--f-ui); }
.celebra__tipos span{ padding:8px 12px; border-radius:999px; background:rgba(255,248,238,.08); font:500 12px/1 var(--f-ui); }
.celebra__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.celebra__img{ position:relative; min-height:360px; }
.celebra__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.celebra__img span{ position:absolute; top:18px; right:18px; padding:8px 12px; border-radius:999px; background:rgba(15,8,4,.6);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font:600 10px/1 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; }

/* ---------- 04 · EXPERIENCIAS (abanico de tarjetas) ---------- */
.xp{ background:var(--arena); padding:clamp(90px,11vw,140px) 0 clamp(70px,8vw,110px); overflow:hidden; }
.xp .display{ margin-bottom:clamp(10px,2vw,30px); }
.cf{ position:relative; height:clamp(460px,44vw,600px); perspective:1600px; touch-action:pan-y; user-select:none; -webkit-user-select:none; outline:none; }
.cf__card{ position:absolute; left:50%; top:50%; width:clamp(230px,23vw,330px); aspect-ratio:3/4.3; margin:0; border-radius:26px; overflow:hidden; color:#fff; cursor:pointer;
  z-index:var(--z,1); opacity:var(--o,1); box-shadow:0 30px 60px -30px rgba(43,23,16,.55);
  transform:translate(-50%,-50%) translateX(var(--x,0px)) translateY(var(--y,0px)) scale(var(--s,1)) rotateY(var(--ry,0deg));
  transition:transform .8s var(--out), opacity .5s, box-shadow .6s; }
.cf__card.is-on{ cursor:default; box-shadow:0 50px 90px -30px rgba(43,23,16,.75); }
.cf__card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.cf__card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,8,4,.05) 38%,rgba(15,8,4,.85)); }
.cf__card:not(.is-on)::before{ content:""; position:absolute; inset:0; z-index:2; background:rgba(246,235,216,.14); }
.cf__tag{ position:absolute; z-index:3; top:16px; left:16px; padding:7px 11px; border-radius:999px; background:rgba(255,255,255,.22);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font:600 10px/1 var(--f-ui); letter-spacing:.1em; opacity:0; transition:opacity .4s; }
.cf__card.is-on .cf__tag{ opacity:1; }
.cf__body{ position:absolute; z-index:3; left:18px; right:18px; bottom:18px; }
.cf__body h3{ font:400 clamp(20px,1.8vw,28px)/1.08 var(--f-display); }
.cf__meta{ display:block; margin-top:8px; font:500 10.5px/1.3 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; opacity:.82; }
.cf__go{ display:inline-flex; margin-top:14px; padding:10px 16px; border-radius:999px; background:var(--naranja); font:600 10.5px/1 var(--f-ui); letter-spacing:.12em; text-transform:uppercase;
  opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .4s, transform .5s var(--out), background-color .3s; }
.cf__card.is-on .cf__go{ opacity:1; transform:none; pointer-events:auto; }
.cf__go:hover{ background:var(--naranja-2); }
.cf__ui{ display:flex; justify-content:center; align-items:center; gap:14px; margin-top:clamp(6px,1.5vw,20px); }
.cf__ui button{ width:46px; height:46px; border-radius:50%; border:1px solid rgba(43,23,16,.25); font-size:17px; transition:background-color .3s, color .3s, border-color .3s; }
.cf__ui button:hover{ background:var(--naranja); color:var(--espuma); border-color:var(--naranja); }
.cf__n{ min-width:74px; text-align:center; font:600 12px/1 var(--f-ui); letter-spacing:.14em; }

/* ---------- MAREA (galería) ---------- */

/* ---------- RESEÑAS (pequeñas, en una sola línea) ---------- */
.opin{ background:var(--arena); padding:clamp(56px,7vw,90px) 0 clamp(30px,3.5vw,50px); overflow:hidden; }
.opin__row{ overflow:hidden; }
.opin__track{ display:flex; gap:14px; width:max-content; animation:wave 64s linear infinite; }
.opin__row:hover .opin__track{ animation-play-state:paused; }
.tq{ flex:none; width:clamp(270px,23vw,330px); padding:18px 20px; border-radius:18px; background:var(--espuma); box-shadow:0 18px 40px -34px rgba(74,36,16,.6); }
.tq__stars{ color:var(--naranja); letter-spacing:.18em; font-size:11px; }
.tq blockquote{ margin-top:10px; font:400 16px/1.35 var(--f-display); }
.tq figcaption{ margin-top:12px; font-size:11.5px; letter-spacing:.03em; opacity:.62; }

/* ---------- FOOTER ---------- */
.foot{ position:relative; background:var(--marron); color:var(--espuma); padding:clamp(76px,8vw,110px) 0 22px; }
.waves--foot{ top:-1px; bottom:auto; height:70px; transform:scaleY(-1); }
.waves--foot .wave--1{ color:rgba(245,236,220,.45); }
.waves--foot .wave--2{ color:var(--arena); height:65%; }
.foot__top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:26px; padding-bottom:30px; }
.foot__lockup{ width:min(280px,52vw); height:auto; }
.foot__cols{ display:grid; grid-template-columns:1.1fr 1fr 1fr 1.1fr 1.2fr; gap:22px; padding:26px 0;
  border-top:1px solid rgba(255,248,238,.16); border-bottom:1px solid rgba(255,248,238,.16); }
.foot__cols span{ display:block; margin-bottom:10px; font:600 10px/1 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--naranja-2); }
.foot__cols nav a{ display:block; padding:2px 0; font:italic 400 16px/1.4 var(--f-display); }
.foot__cols p{ font-size:13px; line-height:1.55; opacity:.82; }
.foot__cols a:hover{ color:var(--naranja-2); }
.news{ display:flex; align-items:center; gap:12px; min-width:min(380px,100%); border-bottom:1px solid rgba(255,248,238,.4); padding-bottom:6px; }
.news span{ font:600 10px/1 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--naranja-2); white-space:nowrap; }
.news input{ flex:1; min-width:0; padding:8px 0; background:none; border:0; color:inherit; font:400 15px var(--f-ui); outline:none; }
.news input::placeholder{ color:rgba(255,248,238,.55); }
.news button{ font-size:18px; padding:0 4px; color:var(--naranja-2); }
.news.is-ok input{ color:var(--naranja-3); }
.foot__bar{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:18px; font:500 10px/1.4 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; opacity:.65; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity .9s var(--ease), transform 1.1s var(--out); }
.reveal.is-in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .foot__cols{ grid-template-columns:1fr 1fr 1fr; }
}

@media (max-width:900px){
  :root{ --r:20px; }
  .hero__top{ top:84px; }
  .hero__nav{ display:none; }
  .hero__kicker span{ white-space:nowrap; }
  .hero__kicker{ gap:10px; font-size:9.5px; letter-spacing:.14em; }
  .hero__kicker span:first-child{ font-size:22px; }
  .hero__kicker i{ width:16px; }
  .hs__n{ top:34%; font-size:46vw; -webkit-text-stroke-width:1px; }
  .hs__txt{ bottom:112px; }
  .hs__tag{ gap:10px; font-size:9.5px; letter-spacing:.12em; }
  .hs__tag b{ padding:6px 10px; }
  .hs__logo{ height:18px; } .hs__logo--lalala{ height:26px; } .hs__logo--viva-word{ height:11px; }
  .hs__t{ margin-top:14px; font-size:clamp(40px,11.5vw,64px); }
  .hs__p{ margin-top:12px; font-size:14.5px; }
  .hs__cta{ margin-top:18px; }
  .hs__cta .btn{ padding:13px 18px; font-size:10px; }
  .hero__tabs{ bottom:50px; gap:6px; }
  .hero__tabs button{ display:block; padding:0; }
  .hero__tabs i{ margin-bottom:6px; }
  .hero__tabs span{ display:none; }
  .nav{ top:10px; }
  .nav__clock{ display:none; }

  /* el día en móvil: escena fija, los 4 momentos pasan de lado mientras el cielo cambia de luz */
  .grain{ display:none; }
  .dia{ height:430vh; height:430svh; }
  .dia__arc{ bottom:15%; width:170vw; opacity:.9; }
  .dia__hora{ top:auto; bottom:17%; transform:translateX(-50%); font-size:42vw; opacity:.1; }
  .dia__sea{ height:15%; }
  .dia__sea .wave--sea{ height:26px; }
  .dia__head{ top:74px; justify-content:flex-start; }
  .dia__hint{ display:none; }
  .dia__chs{ display:flex; width:400%; height:100%; will-change:transform; transform:translate3d(calc(var(--hx,0) * -25%),0,0); }
  .ch{ position:relative; inset:auto; flex:none; width:25%; height:100%; margin:0; max-width:none;
    display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; gap:0; padding:104px var(--pad) calc(12svh + 66px); }
  .ch__text{ translate:calc(var(--off,0) * 18vw) 0; }
  .ch__hour{ gap:8px; font-size:10px; }
  .ch__hour b{ font-size:13px; padding:6px 10px; }
  .ch__logo{ height:30px; margin:14px 0 8px; }
  .ch__logo--lalala{ height:46px; }
  .ch__logo--viva{ height:15px; margin:18px 0 12px; }
  .ch__logo--otafuku, .ch__logo--sombras{ height:24px; }
  .ch__title{ font-size:clamp(28px,8.6vw,40px); max-width:14ch; }
  .ch__p{ margin-top:8px; font-size:13.5px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .ch__tags{ display:none; }
  .ch__cta{ flex-wrap:nowrap; gap:8px; margin-top:14px; }
  .ch__cta .btn{ padding:11px 14px; font-size:9.5px; letter-spacing:.08em; white-space:nowrap; }
  .ch__media{ flex:1 1 auto; min-height:120px; height:auto; max-height:38svh; margin-top:20px; translate:calc(var(--off,0) * 42vw) 0; }
  .ch__img--a{ right:24%; bottom:0; }
  .ch__img--b{ width:36%; bottom:-8px; border-width:4px; }
  .dia__rail{ left:10px; right:10px; bottom:12px; transform:none; justify-content:space-between; gap:2px; padding:5px; }
  .dia__rail button{ flex:1; padding:7px 2px; gap:3px; }
  .dia__rail button b{ font-size:12px; }
  .dia__rail button span{ font-size:8.5px; letter-spacing:.02em; }

  .brands__row{ grid-template-columns:repeat(2,1fr); }
  .brand{ height:clamp(300px,56vw,380px); }
  .brands__row:not(:hover) .brand.is-feat, .brand:hover, .brands__row:hover .brand:not(:hover){ transform:none; filter:none; }
  .agenda__top{ flex-direction:column; align-items:flex-start; }
  .celebra{ grid-template-columns:1fr; }
  .celebra__img{ min-height:260px; order:-1; }
}

@media (max-width:560px){
  .nav{ gap:8px; padding:8px 8px 8px 14px; }
  .nav__logo{ height:27px; }
  .nav__cta{ padding:13px 16px; }
  .sec-head{ flex-direction:column; gap:8px; }
  .brand__btn{ padding:10px 12px; font-size:9.5px; }
  .brand__cover{ padding:14px 12px 72px; }
  .brand__tag{ font-size:8.5px; letter-spacing:.1em; }
  .agenda__nav a{ display:none; }
  .ev{ width:74vw; }
  .cf{ height:520px; }
  .cf__card{ width:64vw; }
  .foot__cols{ grid-template-columns:1fr 1fr; }
  .foot__bar{ flex-direction:column; }
}

/* movimiento reducido (también lo activan algunos modos de ahorro de batería):
   se quitan los bucles y el parallax, pero se mantienen las transiciones suaves */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto !important; }
  .grain, .hero__caustics{ display:none; }
  .brands__sol, .dia__stars, .ch__new{ animation:none; }
}

/* =========================================================
   MÓVIL COMPACTO — marcas, eventos y pie en horizontal
   ========================================================= */
@media (max-width:700px){
  /* marcas: carrusel horizontal de tarjetas pequeñas */
  .brands{ padding:18px 0 44px; }
  .brands__row{ display:flex; gap:10px; overflow-x:auto; padding:4px var(--pad) 6px; scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad); scrollbar-width:none; }
  .brands__row::-webkit-scrollbar{ display:none; }
  .brand-item{ flex:none; width:46vw; max-width:210px; scroll-snap-align:start; }
  .brand{ height:250px; border-radius:18px; }
  .brand__desc{ margin-top:10px; font-size:12px; line-height:1.45; }
  .brands__t{ font-size:30px; }
  .brand__cover{ padding:10px 8px 92px; }
  .brand__tag{ padding:5px 8px; font-size:8px; letter-spacing:.08em; }
  .brand__logo{ height:18px; }
  .brand__logo--lalala{ height:30px; }
  .brand__logo--viva{ height:12px; }
  .brand__btns{ left:10px; right:10px; bottom:10px; flex-direction:column; gap:6px; }
  .brand__btn{ padding:9px 10px; font-size:9px; text-align:center; }
  .brands__sol{ width:92px; right:-22px; top:-44px; }

  /* eventos a medida: tarjeta horizontal, foto a un lado */
  .celebra{ grid-template-columns:1fr 34%; margin-top:36px; border-radius:20px; }
  .celebra__img{ order:0; min-height:0; }
  .celebra__img span{ display:none; }
  .celebra__txt{ padding:16px 12px 16px 16px; min-width:0; }
  .celebra__txt .agenda__k{ font-size:9px; letter-spacing:.12em; }
  .celebra__t{ margin-top:6px; font-size:21px; line-height:1.05; }
  .celebra__txt p{ margin-top:8px; font-size:12.5px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .celebra__chips, .celebra__tipos{ display:none; }
  .celebra__cta{ flex-direction:column; align-items:stretch; gap:6px; margin-top:12px; }
  .celebra__cta .btn{ justify-content:center; padding:10px 8px; font-size:9px; letter-spacing:.06em; white-space:nowrap; }

  /* pie: compacto y en filas horizontales */
  .foot{ padding:58px 0 16px; }
  .foot__top{ flex-wrap:nowrap; gap:16px; padding-bottom:16px; }
  .foot__lockup{ flex:none; width:128px; }
  .news{ flex:1; min-width:0; gap:8px; }
  .news span{ display:none; }
  .news input{ font-size:14px; }
  /* restaurantes en una fila; debajo, datos en cuadrícula 2 × 2 con líneas finas */
  .foot__cols{ grid-template-columns:1fr 1fr; gap:0; padding:0; }
  .foot__cols > *{ padding:14px 0; }
  .foot__cols > div:nth-child(even){ padding-right:14px; border-right:1px solid rgba(255,248,238,.12); }
  .foot__cols > div:nth-child(odd){ padding-left:14px; }
  .foot__cols > div:nth-child(n+4){ border-top:1px solid rgba(255,248,238,.12); }
  .foot__cols span{ margin-bottom:6px; font-size:9px; }
  .foot__cols p{ font-size:12px; line-height:1.5; }
  .foot__cols nav{ grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:2px 10px; border-bottom:1px solid rgba(255,248,238,.12); }
  .foot__cols nav span{ flex-basis:100%; }
  .foot__cols nav a{ padding:0; font-size:17px; }
  .foot__bar{ flex-direction:row; justify-content:space-between; gap:6px 12px; padding-top:12px; font-size:8.5px; }
  .foot__bar span:last-child{ display:none; }
}

/* Cambio de idioma en la barra de arriba (17-sep). */
.nav__idioma{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:30px;padding:0 9px;margin-left:8px;border-radius:999px;border:1px solid rgba(255,255,255,.35);color:inherit;font-size:12px;font-weight:700;letter-spacing:.04em;text-decoration:none;opacity:.85}
.nav__idioma:hover{opacity:1;border-color:currentColor}