/* ==========================================================================
   BULLA GASTROBAR — Conil de la Frontera
   Hoja de estilos. Paleta e identidad extraídas de la carta física.
   ========================================================================== */

:root{
  /* Paleta — mostaza / arena / dorado apagado, extraída de la carta física */
  --mustard:        #c69f55;
  --mustard-deep:    #b58c42;
  --mustard-alt:     #cdaa63;
  --ink:             #241a10;   /* marrón muy oscuro / negro — logo, títulos de contraste */
  --ink-deep:        #180f08;   /* footer */
  --cream:           #f7f1de;   /* blanco cálido — texto principal sobre mostaza */
  --cream-dim:       rgba(247,241,222,.74);

  --font-display: 'Anton', Impact, sans-serif;
  --font-head:    'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow', Arial, sans-serif;

  --gap-section: clamp(3.5rem, 9vw, 6rem);
  --pad-side:    clamp(1.25rem, 5vw, 3rem);
  --topbar-h:    66px; /* se recalcula en script.js según la altura real del header */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  overflow-x:clip;
  background:
    radial-gradient(ellipse 140% 60% at 50% -8%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(ellipse 140% 60% at 50% 108%, rgba(0,0,0,.15), transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(36,26,16,.08) 1px, transparent 0) 0 0/16px 16px,
    var(--mustard);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p{ margin:0; }

.container{ max-width:640px; margin:0 auto; padding-left:var(--pad-side); padding-right:var(--pad-side); }
@media (min-width:900px){ .container{ max-width:900px; } }

/* Textura de grano/papel envejecido — sutil, cubre todo el sitio */
.grain{
  position:fixed; inset:0; z-index:2000; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------- topbar ---------------------------------- */
/* Oculto en la portada; aparece al deslizar hacia abajo (ver script.js) */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:500;
  background:var(--ink);
  border-bottom:1px solid rgba(247,241,222,.12);
  transform:translateY(-100%);
  transition:transform .3s ease;
}
.topbar.is-visible{ transform:translateY(0); }
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem var(--pad-side);
}
.topbar .logo-box{
  border-color:var(--mustard); padding:.22rem .55rem .26rem; margin:0;
}
.topbar .logo-box__word{ font-size:.85rem; color:var(--mustard); }
.topbar .logo-box__sub{ margin-top:.18rem; gap:.22rem; }
.topbar .logo-box__sub span{ font-size:.4rem; letter-spacing:.3em; color:var(--mustard); }
.topbar .logo-box__sub::before,.topbar .logo-box__sub::after{
  background:var(--mustard); max-width:.55rem;
}
.topbar__nav{ display:flex; gap:1.1rem; }
.topbar__nav a{
  font-family:var(--font-head); font-size:.68rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--cream-dim);
  padding:.3rem 0; border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.topbar__nav a:hover, .topbar__nav a:focus-visible{ color:var(--mustard); border-color:var(--mustard); }

/* ---------------------------------- hero ---------------------------------- */
.hero{
  position:relative;
  padding:clamp(1rem,4vw,1.6rem);
  background:
    radial-gradient(ellipse 140% 60% at 50% -8%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(ellipse 140% 60% at 50% 108%, rgba(0,0,0,.15), transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(36,26,16,.08) 1px, transparent 0) 0 0/16px 16px,
    var(--mustard);
  min-height:100dvh;
  display:flex;
}
.hero__frame{
  position:relative;
  border:1px solid rgba(36,26,16,.4);
  padding:clamp(1.5rem,6vw,2.4rem) clamp(1.25rem,5vw,2rem) clamp(2rem,7vw,2.8rem);
  display:flex; flex-direction:column; flex:1;
  overflow:hidden;
}

.hero__top{ position:relative; z-index:1; display:flex; justify-content:flex-end; }

.hero__content{ position:relative; z-index:1; margin-top:auto; text-align:left; }

.logo-box{
  display:inline-block; border:3px solid var(--ink); padding:.5rem 1.2rem .6rem;
  text-align:center; text-decoration:none;
}
.logo-box__word{
  font-family:var(--font-display); font-size:clamp(1.5rem,6vw,2rem);
  color:var(--ink); letter-spacing:.02em; line-height:1;
}
.logo-box__sub{
  display:flex; align-items:center; gap:.4rem; justify-content:center;
  margin-top:.3rem;
}
.logo-box__sub span{
  font-family:var(--font-head); font-size:.55rem; font-weight:600;
  letter-spacing:.38em; color:var(--ink);
}
.logo-box__sub::before,.logo-box__sub::after{
  content:''; flex:1; height:1px; background:var(--ink); max-width:1.1rem;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.hero-mark{ display:inline-flex; flex-direction:column; align-items:flex-start; line-height:1; }
.hero-mark__word{
  display:block; font-family:var(--font-display);
  font-size:clamp(3.4rem,17vw,6.2rem);
  padding:.08em 0;
  color:#000;
}
.hero-mark__sub{
  display:block; font-family:var(--font-head); font-weight:600; color:#fff;
  letter-spacing:.22em; font-size:clamp(.75rem,2.8vw,1rem);
  text-transform:uppercase; margin:.05em 0;
}
.hero__place{
  margin-top:.7rem; font-family:var(--font-head); font-weight:600;
  text-transform:uppercase; letter-spacing:.24em; font-size:.85rem; color:var(--ink);
}
.hero__rule{
  border:none; border-top:1px solid rgba(36,26,16,.4);
  margin:1.4rem 0; width:5.5rem;
}
.hero__tagline{
  font-family:var(--font-head); font-weight:400;
  font-size:1.15rem; color:var(--ink); line-height:1.4; letter-spacing:.01em;
}
.hero__actions{
  margin-top:2rem; display:flex; gap:.8rem; flex-wrap:wrap;
}

.btn{
  display:inline-block; font-family:var(--font-head); font-weight:600;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.95rem 1.7rem; border:2px solid var(--ink);
  transition:background .2s, color .2s;
}
.btn--solid{ background:var(--ink); color:var(--cream); }
.btn--solid:hover, .btn--solid:focus-visible{ background:transparent; color:var(--ink); }
.btn--outline{ background:transparent; color:var(--ink); }
.btn--outline:hover, .btn--outline:focus-visible{ background:var(--ink); color:var(--cream); }

/* ------------------------------ sin-reservas ribbon ------------------------------ */
.ribbon{
  background:var(--ink); color:var(--cream); text-align:center;
  padding:.7rem var(--pad-side);
  font-family:var(--font-head); letter-spacing:.14em; font-size:.72rem;
  text-transform:uppercase;
}
.ribbon strong{ color:var(--mustard); }

/* ---------------------------------- carta intro ---------------------------------- */
.carta-intro{ padding:var(--gap-section) var(--pad-side) 0; text-align:center; }
.carta-intro__title{
  font-family:var(--font-display); font-size:clamp(1.9rem,7vw,2.6rem); color:var(--ink);
}

/* ---------------------------------- carta nav ---------------------------------- */
.carta-nav{
  position:sticky; top:calc(var(--topbar-h) + .6rem); z-index:400;
  padding:0 var(--pad-side);
}
.carta-nav__scroll{
  position:relative;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  row-gap:.35rem; column-gap:.7rem;
  max-width:720px; margin:0 auto;
  padding:.7rem 1.2rem;
  background:var(--mustard-deep);
  border:1px solid rgba(36,26,16,.22);
  border-radius:18px;
  box-shadow:0 10px 26px rgba(24,15,8,.3), inset 0 1px 0 rgba(255,255,255,.14);
}
.carta-nav__dot{
  color:rgba(36,26,16,.35); font-size:.7rem;
}
.carta-nav__blob{
  position:absolute; top:0; left:0;
  background:rgba(36,26,16,.82); border-radius:6px;
  transition:transform .8s cubic-bezier(.16,.9,.28,1), width .8s cubic-bezier(.16,.9,.28,1), height .4s ease, opacity .2s ease;
  opacity:0; pointer-events:none; z-index:0;
  will-change:transform,width,height;
}
.carta-nav__scroll a{
  position:relative; z-index:1;
  font-family:var(--font-head); font-weight:500;
  font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(36,26,16,.6);
  padding:.3rem .6rem; border-radius:6px;
  transition:color .3s ease;
}
.carta-nav__scroll a:hover{ color:var(--ink); }
.carta-nav__scroll a.is-active{ color:var(--cream); }

/* ---------------------------------- carta ---------------------------------- */
.carta{ scroll-margin-top:96px; }

.carta-content{ padding:clamp(1.75rem,6vw,2.5rem) var(--pad-side) 0; }

.categoria{ scroll-margin-top:96px; margin-bottom:2.8rem; }

/* Cabecera clásica: centrada, sobre el propio mostaza, sin bandas ni fotos */
.categoria__head{ text-align:center; padding:.5rem 0 1.5rem; }
.categoria__title{
  font-family:var(--font-head); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.3rem,5.5vw,1.6rem);
  color:var(--ink); letter-spacing:.16em; line-height:1.2;
}
.categoria__desc{
  font-family:var(--font-body); font-style:italic; font-weight:400;
  font-size:.9rem; letter-spacing:.01em;
  color:rgba(36,26,16,.7); margin-top:.5rem;
}

.plato{
  padding:.85rem 0; border-bottom:1px solid rgba(36,26,16,.18);
  display:flex; flex-direction:column; gap:.25rem;
}
.plato__row{ display:flex; justify-content:space-between; align-items:baseline; gap:1.2rem; }
.plato__nombre{
  font-family:var(--font-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; font-size:clamp(1rem,4vw,1.1rem); color:var(--cream);
}
.plato__nota{
  font-family:var(--font-body); font-weight:400; font-style:italic; text-transform:none;
  letter-spacing:0; font-size:.8rem; color:var(--cream-dim);
}
.plato__precio{
  font-family:var(--font-head); font-weight:500; font-size:1rem;
  color:var(--cream); white-space:nowrap;
}
.plato__desc{
  font-family:var(--font-body); font-style:italic; font-size:.85rem;
  letter-spacing:0; text-transform:none; color:var(--cream-dim); max-width:34rem;
}

.carta__nota-final{
  text-align:center; margin-top:1rem;
  margin-bottom:var(--gap-section);
  font-family:var(--font-head); font-size:.75rem; letter-spacing:.1em;
  color:var(--ink); opacity:.7; text-transform:uppercase; line-height:1.9;
}

/* ---------------------------------- sobre bulla ---------------------------------- */
.sobre{
  background:var(--ink-deep); color:var(--cream-dim);
  padding:var(--gap-section) var(--pad-side); text-align:center;
}
.sobre__title{
  font-family:var(--font-display); font-size:clamp(1.9rem,8vw,2.9rem);
  color:var(--cream); line-height:1.05;
}
.sobre__text{
  max-width:34rem; margin:1.3rem auto 0; font-size:1.05rem; color:var(--cream-dim);
  line-height:1.7;
}
.sobre__text strong{ color:var(--mustard); font-weight:700; }

/* ---------------------------------- ubicacion ---------------------------------- */
.ubicacion{ padding:var(--gap-section) var(--pad-side); }
.ubicacion__grid{ max-width:640px; margin:0 auto; text-align:center; }
.ubicacion__title{
  font-family:var(--font-display); font-size:clamp(1.9rem,7vw,2.6rem); color:var(--ink);
}
.ubicacion__row{ margin-top:1.6rem; }
.ubicacion__label{
  font-family:var(--font-head); font-size:.65rem; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(36,26,16,.6);
}
.ubicacion__value{
  font-family:var(--font-head); font-size:1.05rem; font-weight:500;
  color:var(--ink); margin-top:.3rem; line-height:1.5;
}
.ubicacion__map{
  margin-top:2rem; aspect-ratio:4/3;
  border:1px solid rgba(36,26,16,.35);
  filter:grayscale(.35) sepia(.12) contrast(1.02);
}
.ubicacion__actions{ margin-top:2rem; }

/* ---------------------------------- horario ---------------------------------- */
.horario{ padding:var(--gap-section) var(--pad-side); }
.horario__grid{ max-width:640px; margin:0 auto; text-align:center; }
.horario__title{
  font-family:var(--font-display); font-size:clamp(1.9rem,7vw,2.6rem); color:var(--ink);
}
.horario__list{
  margin-top:1.6rem; list-style:none; padding:0;
  border-top:1px solid rgba(36,26,16,.15);
}
.horario__list li{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:.75rem 0; border-bottom:1px solid rgba(36,26,16,.15);
  font-family:var(--font-head);
}
.horario__day{
  font-size:.95rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(36,26,16,.6);
}
.horario__hours{ font-size:1.05rem; font-weight:500; color:var(--ink); }
.horario__hours--closed{ color:rgba(36,26,16,.5); }
.horario__note{
  margin-top:1.2rem; font-family:var(--font-head); font-size:.85rem;
  color:rgba(36,26,16,.6);
}

/* ---------------------------------- reseñas ---------------------------------- */
.resenas{ background:var(--ink); padding:var(--gap-section) var(--pad-side); }
.resenas__head{ max-width:640px; margin:0 auto; text-align:center; }
.resenas__title{
  font-family:var(--font-display); font-size:clamp(1.9rem,7vw,2.6rem); color:var(--cream);
}
.resenas__score{
  margin-top:.9rem; display:flex; flex-direction:column; align-items:center; gap:.3rem;
}
.resenas__score-number{
  font-family:var(--font-display); font-size:clamp(4rem,16vw,6.5rem);
  line-height:1; color:var(--mustard);
}
.resenas__score .resenas__stars{ font-size:clamp(1.9rem,7vw,2.5rem); letter-spacing:.15em; }
.resenas__score-text{
  font-family:var(--font-head); font-size:clamp(.95rem,3.2vw,1.15rem); letter-spacing:.06em;
  text-transform:uppercase; color:var(--cream-dim);
}
.resenas__head .btn{ margin-top:1.4rem; border-color:var(--cream); color:var(--cream); }
.resenas__head .btn:hover, .resenas__head .btn:focus-visible{ background:var(--cream); color:var(--ink); }
.resenas__stars{ color:var(--mustard); }

.resenas__carousel{
  position:relative; margin:2.4rem calc(var(--pad-side) * -1) 0;
}
.resenas__scroll{
  overflow-x:auto; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
}
.resenas__scroll::-webkit-scrollbar{ display:none; }
.resenas__list{
  display:flex; gap:1rem; margin:0;
  padding:.2rem calc((100vw - min(80vw,320px)) / 2) 1rem;
}

.resenas__arrow{
  position:absolute; top:45%; transform:translateY(-50%);
  background:none; border:none; padding:.12rem;
  color:#fff; font-family:var(--font-head);
  font-size:1.4rem; line-height:1; cursor:pointer; z-index:2;
  text-shadow:0 0 6px rgba(255,255,255,.9), 0 0 16px rgba(255,255,255,.55);
  opacity:.85;
  transition:opacity .2s ease, transform .15s ease;
}
.resenas__arrow:hover{ opacity:1; transform:translateY(-50%) scale(1.15); }
.resenas__arrow:active{ transform:translateY(-50%) scale(.95); }
.resenas__arrow--prev{ left:.6rem; }
.resenas__arrow--next{ right:.6rem; }
.resena{
  scroll-snap-align:center; flex:0 0 auto; width:min(80vw,320px);
  background:rgba(247,241,222,.06); border:1px solid rgba(247,241,222,.14);
  border-radius:10px; padding:1.2rem;
  display:flex; flex-direction:column; gap:.8rem;
}
.resena__top{ display:flex; align-items:center; gap:.7rem; }
.resena__avatar{
  flex:0 0 auto; width:2.4rem; height:2.4rem; border-radius:50%;
  background:var(--mustard); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:600; font-size:1rem;
}
.resena__name{
  font-family:var(--font-head); font-weight:600; font-size:.9rem; color:var(--cream);
}
.resena__meta{
  font-family:var(--font-head); font-size:.72rem; letter-spacing:.04em;
  color:var(--cream-dim); margin-top:.2rem;
}
.resena__meta .resena__stars{ font-size:.75rem; letter-spacing:.1em; }
.resena__text{
  font-family:var(--font-body); font-size:.88rem; line-height:1.55; color:var(--cream-dim);
}

@media (min-width:900px){
  .resenas__carousel{ max-width:1000px; margin-left:auto; margin-right:auto; }
  .resenas__list{ padding:.2rem 0 1rem; margin:0; }
  .resena{ scroll-snap-align:start; }
  .resenas__arrow{ font-size:1.8rem; padding:.3rem; }
  .resenas__arrow--prev{ left:-2.2rem; }
  .resenas__arrow--next{ right:-2.2rem; }
}

/* ---------------------------------- footer ---------------------------------- */
.site-footer{
  background:var(--ink-deep); color:var(--cream-dim);
  padding:3rem var(--pad-side) 2rem; text-align:center;
}
.site-footer .logo-box{ border-color:var(--mustard); margin-bottom:1.4rem; }
.site-footer .logo-box__word{ color:var(--mustard); }
.site-footer .logo-box__sub span{ color:var(--mustard); }
.site-footer .logo-box__sub::before,.site-footer .logo-box__sub::after{ background:var(--mustard); }
.site-footer h2{
  font-family:var(--font-head); letter-spacing:.14em; font-size:.95rem;
  color:var(--cream); text-transform:uppercase;
}
.site-footer p{ margin-top:.4rem; font-size:.82rem; }
.footer-nav{
  margin-top:1.6rem; display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap;
}
.footer-nav a{
  font-family:var(--font-head); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--cream-dim); border-bottom:1px solid transparent;
}
.footer-nav a:hover{ color:var(--mustard); border-color:var(--mustard); }
.site-footer__legal{
  margin-top:2.2rem; font-size:.68rem; color:rgba(247,241,222,.35);
}
.site-footer__rule{
  margin:2.2rem calc(var(--pad-side) * -1) 0;
  border:none; border-top:1px solid rgba(247,241,222,.18);
}

/* ---------------------------------- reveal-on-scroll ---------------------------------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------------------------------- desktop ---------------------------------- */
@media (min-width:820px){
  .hero{ padding:2rem; }
  .carta-content{ max-width:640px; margin-left:auto; margin-right:auto; }
  .plato__desc{ max-width:44rem; }
  .topbar__nav{ gap:1.6rem; }
  .topbar__nav a{ font-size:.85rem; }
}