/* Kahiki Barcelona — self-contained stylesheet */

:root{
  --ink:#120d09;
  --ink-2:#1b140d;
  --ink-3:#241a10;
  --bamboo:#caa15c;
  --bamboo-dark:#6e4f28;
  --cream:#f4e8ce;
  --cream-dim:#cfc0a1;
  --accent:#8fce3e;
  --accent-2:#5a9924;
  --accent-glow: rgba(143,206,62,.28);
  --coral:#e0563c;
  --radius:18px;
  --shadow: 0 20px 50px rgba(0,0,0,.45);
  --maxw:1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:'Jost', system-ui, sans-serif;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:'Bungee', system-ui, sans-serif; font-weight:400; line-height:1.05; margin:0 0 .6rem; }
p{ margin:0 0 1rem; color:var(--cream-dim); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--accent); color:#111; padding:.6rem 1rem; z-index:999;}
.skip-link:focus{ left:12px; top:12px; }

.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.eyebrow{
  display:inline-block; font-size:.75rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.7rem; font-weight:500;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.7rem; border-radius:100px;
  font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  border:1px solid transparent; transition:all 250ms ease; cursor:pointer;
}
.btn--solid{ background:var(--accent); color:#12210a; font-weight:600; }
.btn--solid:hover{ background:#a4e058; transform:translateY(-2px); box-shadow:0 10px 24px var(--accent-glow); }
.btn--outline{ border-color:rgba(244,232,206,.35); color:var(--cream); }
.btn--outline:hover{ border-color:var(--accent); color:var(--accent); }
.btn--ghost{ border-color:rgba(244,232,206,.25); font-size:.75rem; padding:.6rem 1.2rem; }
.btn--ghost:hover{ background:var(--accent); color:#12210a; border-color:var(--accent); }

/* Header */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:box-shadow 300ms ease;
}
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(18,13,9,.92), rgba(18,13,9,0));
  backdrop-filter:blur(6px);
  transition:background 300ms ease;
}
.site-header.is-scrolled{ box-shadow:0 6px 24px rgba(0,0,0,.4); }
.site-header.is-scrolled::before{ background:rgba(18,13,9,.95); }
.header__row{ display:flex; align-items:center; gap:2rem; padding:14px 24px; }
.logo img{ height:34px; }
.main-nav{ display:flex; align-items:center; gap:1.6rem; margin-left:auto; font-size:.85rem; letter-spacing:.03em; }
.main-nav a{ text-decoration:none; color:var(--cream-dim); position:relative; padding:4px 0; transition:color 200ms ease; white-space:nowrap;}
.main-nav a:hover{ color:var(--accent); }
.main-nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--accent); transition:right 250ms ease; }
.main-nav a:hover::after{ right:0; }
.nav-switch{ color:var(--bamboo) !important; font-style:italic; }
.header__cta{ margin-left:.5rem; }
.burger{ display:none; flex-direction:column; gap:5px; width:34px; height:34px; background:none; border:none; cursor:pointer; margin-left:auto; }
.burger span{ height:2px; background:var(--cream); border-radius:2px; transition:transform 250ms ease, opacity 250ms ease; }

/* Hero */
.hero{ position:relative; min-height:100vh; min-height:100dvh; display:flex; align-items:center; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.1); animation:heroZoom 16s ease-in-out infinite alternate; }
@keyframes heroZoom{ from{transform:scale(1.1);} to{transform:scale(1.02);} }
.hero__overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(9,6,3,.55) 0%, rgba(9,6,3,.55) 40%, rgba(9,6,3,.96) 100%), linear-gradient(90deg, rgba(9,6,3,.75), rgba(9,6,3,.2) 60%); }
.hero__embers{ position:absolute; inset:0; }
.hero__embers::before, .hero__embers::after{ content:""; position:absolute; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px 2px var(--accent-glow); animation:rise 9s linear infinite; opacity:0; }
.hero__embers::before{ left:15%; animation-delay:1s; }
.hero__embers::after{ left:80%; animation-delay:4s; }
@keyframes rise{ 0%{bottom:0; opacity:0;} 10%{opacity:.9;} 100%{bottom:100%; opacity:0; transform:translateX(24px);} }
.hero__content{ position:relative; z-index:2; padding-top:60px; max-width:720px; }
.badge{ display:inline-block; font-family:'Permanent Marker', cursive; font-size:1rem; color:var(--accent); border:2px dashed var(--accent); padding:.4rem 1rem; border-radius:10px; transform:rotate(-3deg); margin-bottom:1.4rem; }
.hero__title{ font-size:clamp(2.4rem, 5.6vw, 4.2rem); color:var(--cream); text-shadow:0 10px 30px rgba(0,0,0,.5); }
.hero__title span{ color:var(--accent); }
.hero__lead{ font-size:1.05rem; max-width:480px; }
.hero__actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.6rem; }
.scroll-cue{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2; }
.scroll-cue span{ display:block; width:26px; height:42px; border:2px solid var(--cream-dim); border-radius:14px; position:relative; }
.scroll-cue span::before{ content:""; position:absolute; top:8px; left:50%; width:4px; height:8px; background:var(--accent); border-radius:2px; transform:translateX(-50%); animation:scrollDot 1.8s ease infinite; }
@keyframes scrollDot{ 0%{ top:8px; opacity:1;} 80%{ top:22px; opacity:0;} 100%{ top:22px; opacity:0;} }

/* Sections */
.section{ padding:clamp(70px,10vw,120px) 0; position:relative; }
.section--dark{ background:var(--ink-2); }
.section--dark + .section--dark{ background:var(--ink-3); }
.grid-2{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
.grid-2--reverse{ grid-template-columns:.9fr 1.1fr; }
.grid-2--reverse .carta-visual{ order:-1; }
.section__intro h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); color:var(--cream); }
.section__intro--center{ text-align:center; max-width:640px; margin:0 auto 3rem; }
.fact-list{ list-style:none; margin:1.4rem 0; padding:0; display:flex; flex-direction:column; gap:1rem; }
.fact-list li{ padding-left:1.6rem; position:relative; color:var(--cream-dim); font-size:.95rem; }
.fact-list li::before{ content:"◆"; position:absolute; left:0; top:2px; color:var(--accent); font-size:.7rem; }
.fact-list a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.cta-row{ margin-top:1.6rem; }
.carta-pages{ display:flex; gap:.7rem; margin-top:1rem; flex-wrap:wrap; }
.carta-pages a{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--bamboo); text-decoration:none; border-bottom:1px dotted var(--bamboo); padding-bottom:2px; }
.carta-pages a:hover{ color:var(--accent); border-color:var(--accent); }

/* Hours card */
.hours-card{
  background:var(--ink-3); border:1px solid rgba(202,161,92,.25); border-radius:var(--radius);
  padding:2.4rem; position:relative; box-shadow:var(--shadow);
}
.hours-card__mask{ position:absolute; top:-24px; right:24px; font-size:2.2rem; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.hours-table{ width:100%; border-collapse:collapse; }
.hours-table td{ padding:.9rem 0; border-bottom:1px solid rgba(202,161,92,.15); font-size:1.05rem; }
.hours-table td:last-child{ text-align:right; color:var(--accent); font-weight:600; }
.hours-table__note td{ text-align:center; color:var(--cream-dim); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; border-bottom:none; padding-top:1rem;}
.hours-card__tip{ margin:1.4rem 0 0; text-align:center; color:var(--bamboo); font-size:.9rem; }

/* Gallery */
/* Slider (galería) */
.slider{ position:relative; }
.slider__track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:6px; scrollbar-width:none; -ms-overflow-style:none;
}
.slider__track::-webkit-scrollbar{ display:none; }
.slider__slide{
  flex:0 0 auto; width:min(70vw,520px); aspect-ratio:4/3; border:none; padding:0;
  overflow:hidden; border-radius:var(--radius); cursor:zoom-in; position:relative; scroll-snap-align:center;
}
.slider__slide img{ width:100%; height:100%; object-fit:cover; transition:transform 500ms ease, filter 500ms ease; filter:saturate(.9) brightness(.85); }
.slider__slide:hover img{ transform:scale(1.05); filter:saturate(1.05) brightness(1); }
.slider__slide::after{ content:"＋"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:var(--cream); background:rgba(18,13,9,0); opacity:0; transition:all 300ms ease; }
.slider__slide:hover::after{ opacity:1; background:rgba(18,13,9,.25); }
.slider__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(244,232,206,.3);
  background:rgba(18,13,9,.7); backdrop-filter:blur(4px); color:var(--cream);
  font-size:1.4rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all 250ms ease;
}
.slider__arrow:hover{ background:var(--accent); color:#12210a; border-color:var(--accent); }
.slider__arrow--prev{ left:-4px; }
.slider__arrow--next{ right:-4px; }
.slider__dots{ display:flex; justify-content:center; gap:.5rem; margin-top:1.4rem; }
.slider__dot{ width:8px; height:8px; border-radius:50%; border:none; background:rgba(244,232,206,.25); cursor:pointer; padding:0; transition:all 250ms ease; }
.slider__dot.is-active{ background:var(--accent); width:22px; border-radius:5px; }

/* Carta */
.carta-visual img{ border-radius:var(--radius); box-shadow:var(--shadow); }

/* Carta — modo revista */
.menu-rules{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1rem; margin:0 0 2.6rem; }
.menu-rules span{ font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color:var(--cream-dim); background:var(--ink-3); border:1px solid rgba(202,161,92,.25); padding:.45rem .9rem; border-radius:100px; }

.menu-cocktails{ column-count:3; column-gap:2.6rem; margin-bottom:3rem; }
.menu-group{ break-inside:avoid; margin-bottom:2rem; }
.menu-group__title{ font-family:'Bungee'; font-size:.98rem; margin:0 0 .8rem; padding-bottom:.35rem; border-bottom:2px solid currentColor; display:inline-block; }
.menu-group__title--dulce{ color:#e8b23d; }
.menu-group__title--semidulce{ color:#e88a3d; }
.menu-group__title--semiseco{ color:#c9683f; }
.menu-group__title--seco{ color:#b5453d; }
.menu-group__title--otros{ color:#8a72b3; }
.menu-list{ list-style:none; margin:0; padding:0; }
.menu-list li{ padding:.5rem 0; border-bottom:1px dashed rgba(202,161,92,.15); }
.menu-list li:last-child{ border-bottom:none; }
.menu-list strong{ font-size:.92rem; color:var(--cream); font-weight:600; }
.menu-list span{ display:block; font-size:.74rem; color:var(--cream-dim); line-height:1.3; margin-top:.15rem; }
.menu-list li.has-icon{ display:flex; align-items:center; gap:.7rem; }
.menu-list__icon{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  background:var(--cream); box-shadow:0 3px 8px rgba(0,0,0,.35);
  filter:sepia(.15);
}
.tag-new, .tag-noalc{ font-size:.58rem; font-style:normal; letter-spacing:.05em; text-transform:uppercase; padding:.1rem .45rem; border-radius:100px; margin-left:.4rem; }
.tag-new{ background:rgba(143,206,62,.15); color:var(--accent); }
.tag-noalc{ background:rgba(244,232,206,.1); color:var(--bamboo); }

.menu-block-title{ font-family:'Bungee'; font-size:1.3rem; color:var(--cream); margin:0 0 .6rem; text-align:center; }
.menu-block-price{ color:var(--accent); font-size:1rem; }
.menu-tapas{ margin-bottom:3rem; }
.menu-shishas__extra{ text-align:center; font-size:.8rem; color:var(--cream-dim); margin-bottom:1.4rem; }

.tapas-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.tapas-card{ background:var(--ink-3); border:1px solid rgba(202,161,92,.2); border-radius:14px; padding:1.3rem 1.2rem 1.2rem; position:relative; }
.tapas-card__price{ position:absolute; top:-12px; right:-10px; background:var(--accent); color:#12210a; font-family:'Bungee'; font-size:.8rem; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 14px rgba(0,0,0,.4); }
.tapas-card strong{ display:block; font-size:.95rem; margin-bottom:.3rem; color:var(--cream); }
.tapas-card p{ font-size:.8rem; margin:0; }

.shisha-grid{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
.shisha-tag{ font-size:.78rem; background:var(--ink-3); border:1px solid rgba(202,161,92,.2); border-radius:100px; padding:.5rem 1rem; color:var(--cream-dim); }
.shisha-tag strong{ color:var(--cream); margin-right:.3rem; }

/* Nosotros */
.nosotros-visual{ position:relative; }
.nosotros-visual img{ border-radius:var(--radius); box-shadow:var(--shadow); }
.year-stamp{
  position:absolute; top:-18px; left:-18px; background:var(--accent); color:#12210a;
  font-family:'Bungee'; font-size:1.1rem; padding:.6rem 1rem; border-radius:50%;
  transform:rotate(-8deg); box-shadow:0 10px 20px rgba(0,0,0,.4); z-index:2;
}

/* Eventos */
.eventos{ background:radial-gradient(circle at 30% 20%, rgba(143,206,62,.10), transparent 55%), var(--ink); text-align:center; }
.eventos__card{ max-width:640px; margin:0 auto; }
.eventos__card h2{ font-size:clamp(1.8rem,3.6vw,2.6rem); color:var(--cream); }
.eventos .eyebrow{ display:block; }
.eventos__card p a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

/* Contact */
.contact-list{ list-style:none; margin:1.4rem 0 0; padding:0; display:flex; flex-direction:column; gap:1.4rem; }
.contact-list li{ display:flex; gap:1rem; align-items:flex-start; }
.contact-list li span{ font-size:1.3rem; }
.contact-list a{ color:var(--accent); text-decoration:none; }
.contact-list a:hover{ text-decoration:underline; }
.map-card{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid rgba(202,161,92,.25); }
.map-card iframe{ width:100%; height:360px; border:0; filter:grayscale(.3) sepia(.15); }
.map-card--lg iframe{ height:520px; }
.map-card__placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  background:var(--ink-3); text-align:center; padding:2rem;
}
.map-card__placeholder p{ margin:0; font-size:.85rem; color:var(--cream-dim); max-width:260px; }

/* Cookie banner */
.cookie-banner{
  position:fixed; top:0; left:0; right:0; z-index:120;
  background:var(--ink-2); border-bottom:1px solid rgba(202,161,92,.3);
  transform:translateY(-110%); transition:transform 450ms cubic-bezier(.16,1,.3,1);
}
.cookie-banner.is-open{ transform:translateY(0); }
.cookie-banner__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding:.9rem 24px; flex-wrap:wrap; }
.cookie-banner p{ margin:0; font-size:.85rem; color:var(--cream-dim); flex:1 1 260px; }
.cookie-banner a{ color:var(--accent); text-decoration:underline; }
.cookie-banner__actions{ display:flex; gap:.7rem; flex:0 0 auto; }

/* Language suggestion toast */
.lang-suggest{
  position:fixed; left:20px; bottom:20px; z-index:100;
  display:none; align-items:center; gap:.8rem; flex-wrap:wrap;
  background:var(--ink-3); border:1px solid rgba(202,161,92,.3);
  padding:.8rem 1rem; border-radius:14px; box-shadow:var(--shadow);
  max-width:300px; font-size:.85rem; color:var(--cream);
  transform:translateY(20px); opacity:0; transition:all 350ms ease;
}
.lang-suggest.is-open{ display:flex; transform:translateY(0); opacity:1; }
.lang-suggest a{ color:var(--accent); font-weight:600; text-decoration:underline; white-space:nowrap; }
.lang-suggest button{ background:none; border:none; color:var(--cream); opacity:.6; cursor:pointer; font-size:.9rem; margin-left:auto; }
@media (max-width:760px){
  .lang-suggest{ left:12px; right:96px; max-width:none; bottom:16px; }
}

/* Footer */
.site-footer{ background:var(--ink); border-top:1px solid rgba(202,161,92,.2); padding:36px 0; }
.footer__row{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; justify-content:space-between; }
.footer__logo{ height:24px; opacity:.8; }
.footer__row p{ margin:0; font-size:.8rem; color:var(--cream-dim); }
.footer__social{ display:flex; gap:1.2rem; font-size:.8rem; }
.footer__social a{ text-decoration:none; color:var(--cream-dim); }
.footer__social a:hover{ color:var(--accent); }
.footer__legal{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top:16px; padding-top:16px; border-top:1px solid rgba(202,161,92,.12); }
.footer__legal a{ font-size:.72rem; color:var(--cream-dim); text-decoration:none; opacity:.8; }
.footer__legal a:hover{ opacity:1; color:var(--accent); }

/* FAQ */
.faq{ max-width:760px; margin:0 auto; }
.faq__item{ border-bottom:1px solid rgba(202,161,92,.18); }
.faq__item summary{
  list-style:none; cursor:pointer; padding:1.1rem 2.2rem 1.1rem 0; position:relative;
  font-family:'Jost',sans-serif; font-weight:600; font-size:1.02rem; color:var(--cream);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"+"; position:absolute; right:.3rem; top:50%; transform:translateY(-50%);
  font-size:1.4rem; color:var(--accent); transition:transform 250ms ease;
}
.faq__item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq__item p{ margin:0 0 1.2rem; color:var(--cream-dim); font-size:.95rem; }

/* Floating action buttons */
.fab-stack{
  position:fixed; right:20px; bottom:24px; z-index:90;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  transition:bottom 350ms cubic-bezier(.16,1,.3,1);
}
.fab{
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; text-decoration:none; box-shadow:0 10px 26px rgba(0,0,0,.4);
  transition:transform 200ms ease;
}
.fab:hover{ transform:translateY(-3px); }
.fab--whatsapp{ width:56px; height:56px; background:#25D366; color:#fff; animation:pulseFab 2.6s ease infinite; }
.fab--menu{ width:46px; height:46px; background:var(--ink-2); color:var(--accent); border:1px solid rgba(202,161,92,.35); }
@keyframes pulseFab{ 0%,100%{ box-shadow:0 10px 26px rgba(0,0,0,.4), 0 0 0 0 rgba(37,211,102,.35);} 50%{ box-shadow:0 10px 26px rgba(0,0,0,.4), 0 0 0 10px rgba(37,211,102,0);} }

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(9,6,3,.95); display:none; align-items:center; justify-content:center; padding:40px; }
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox__close{ position:absolute; top:24px; right:28px; background:none; border:none; color:var(--cream); font-size:1.6rem; cursor:pointer; }

/* Responsive */
@media (max-width: 980px){
  .grid-2, .grid-2--reverse{ grid-template-columns:1fr; }
  .grid-2--reverse .carta-visual{ order:0; }
  .map-card--lg iframe{ height:400px; }
  .menu-cocktails{ column-count:2; }
  .tapas-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 760px){
  .main-nav{ position:fixed; inset:0 0 0 auto; width:min(78vw,320px); background:var(--ink-2); flex-direction:column; align-items:flex-start; padding:100px 28px 28px; gap:1.4rem; transform:translateX(100%); transition:transform 320ms ease; box-shadow:-20px 0 40px rgba(0,0,0,.4); }
  .main-nav.is-open{ transform:translateX(0); }
  .burger{ display:flex; }
  .header__cta{ display:none; }
  .burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .burger.is-open span:nth-child(2){ opacity:0; }
  .burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .slider__slide{ width:82vw; }
  .slider__arrow{ width:38px; height:38px; font-size:1.2rem; }
  .menu-cocktails{ column-count:1; }
  .tapas-grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}