/* ==========================================================================
   Cafetería Alcalá — estilo "escenografía de papel y tela"
   Azulejo azul grisáceo · dorado · tela naranja de los asientos · burdeos · papel crema
   ========================================================================== */

:root {
  --tile:        #6d8795;
  --tile-dark:   #3f5461;
  --tile-deep:   #1f2c34;
  --gold:        #d4ad55;
  --gold-light:  #f3dc93;
  --gold-deep:   #7a5a12;
  --orange:      #d9773f;
  --orange-dark: #a9552a;
  --bordeaux:    #a5182b;
  --cream:       #efe6d6;
  --cream-deep:  #e2d5bf;
  --ink:         #2a2320;
  --ink-soft:    #5b514a;

  --font: 'Archivo', system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.4, .64, 1);
  --shadow-paper: 0 18px 40px -18px rgba(20, 15, 10, .55), 0 2px 0 rgba(255,255,255,.35) inset;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
html.is-intro, html.menu-open { overflow: hidden; }
body {
  margin: 0; font-family: var(--font); font-stretch: 100%; color: var(--ink);
  background: var(--tile-deep); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
iframe { border: 0; display: block; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ==========================================================================
   Tipografía: kicker, titulares 3D y letras que entran una a una
   ========================================================================== */
.kicker { font-weight: 600; font-size: .78rem; letter-spacing: .32em; text-transform: uppercase; color: var(--orange-dark); }
.kicker--light { color: var(--gold-light); }

.t3d { font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: .01em; line-height: .95; }
.t3d--cream { color: #f4ecdc; text-shadow: 1px 1px 0 #3a2a1c, 2px 2px 0 #3a2a1c, 3px 3px 0 #3a2a1c, 4px 4px 0 #3a2a1c, 5px 5px 0 #3a2a1c, 6px 6px 0 #3a2a1c, 10px 14px 22px rgba(0,0,0,.4); }
.t3d--gold  { color: var(--gold-light); text-shadow: 1px 1px 0 var(--gold-deep), 2px 2px 0 var(--gold-deep), 3px 3px 0 var(--gold-deep), 4px 4px 0 var(--gold-deep), 5px 5px 0 var(--gold-deep), 6px 6px 0 var(--gold-deep), 7px 7px 0 #5a4210, 12px 16px 24px rgba(0,0,0,.45); }
.t3d--tile  { color: var(--tile-dark); text-shadow: 1px 1px 0 #c8b99f, 2px 2px 0 #c8b99f, 3px 3px 0 #c8b99f, 4px 4px 0 #b9a98e, 8px 10px 16px rgba(60,40,20,.25); }

/* letras: cada .w es una palabra, cada .c una letra que sube desde abajo */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: bottom; white-space: nowrap; padding: .06em .05em .02em; margin: -.06em -.05em -.02em; }
[data-split] .c { display: inline-block; transform: translateY(115%) rotate(6deg); opacity: 0; transition: transform .9s var(--ease-out), opacity .4s linear; transition-delay: calc(var(--i) * 45ms); will-change: transform; }
[data-split].in .c { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { [data-split] .c { transform: none; opacity: 1; } }

/* Entradas genéricas */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
.tilt-in { opacity: 0; transform: rotate(calc(var(--rot, -1.5deg) - 5deg)) translateY(40px) scale(.96); transform-origin: 50% 0; transition: opacity .7s var(--ease-out), transform 1.1s var(--ease-back); transition-delay: var(--d, 0ms); }
.tilt-in.in { opacity: 1; transform: rotate(var(--rot, -1.5deg)); }

/* ==========================================================================
   Elementos de "papel" y "tela"
   ========================================================================== */
/* Banner de tela naranja con franja de patrón (logo + rombos) */
.banner {
  position: relative; color: #fff;
  background: var(--bordeaux) url('../assets/fabric-orange.jpg') center / 420px repeat; background-blend-mode: luminosity;
  box-shadow: 0 30px 60px -22px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.12);
  border-radius: 6px;
}
.banner--bordeaux {
  background-color: var(--bordeaux);
  background-blend-mode: luminosity;
  box-shadow: 0 30px 60px -22px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.1), inset 0 0 120px rgba(60,0,10,.35);
}
.banner::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 12%, transparent 88%, rgba(0,0,0,.18)); }
.banner__strip {
  height: 48px; border-radius: 6px 6px 0 0;
  background:
    url('../assets/logo-blanco.webp') 24px 50% / 34px auto repeat-x,
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.55) 0 3px, transparent 3.5px) 8px 50% / 68px 100% repeat-x,
    var(--tile-deep);
  background-blend-mode: normal;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.18), inset 0 2px 0 rgba(0,0,0,.35);
  position: relative; z-index: 1;
}
.banner__strip::after { content: ''; position: absolute; inset: auto 0 -6px 0; height: 6px; background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 20px); opacity: .7; }
.banner__body { position: relative; z-index: 1; padding: 2.2rem 2.4rem 2.4rem; text-align: center; }
.banner__pin { position: absolute; top: -10px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2c6, var(--gold) 45%, var(--gold-deep)); box-shadow: 0 4px 8px rgba(0,0,0,.45); z-index: 2; }
.banner__pin--l { left: 18px; } .banner__pin--r { right: 18px; }

/* Tarjeta de papel crema con bandas decoradas */
.paper {
  position: relative; color: var(--ink);
  background: var(--cream) url('../assets/paper-texture.jpg') center / 480px repeat;
  box-shadow: var(--shadow-paper), 0 40px 80px -30px rgba(0,0,0,.6);
  border-radius: 4px;
}
.paper::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 60px rgba(120, 90, 50, .12); }
.paper__inner { position: relative; padding: 2.2rem clamp(1.1rem, 4vw, 3rem) 2.6rem; }
.paper__band {
  height: 40px; position: relative;
  background:
    url('../assets/logo-blanco.webp') 30px 50% / 30px auto repeat-x,
    radial-gradient(circle, rgba(244,236,220,.6) 0 2.5px, transparent 3px) 0 50% / 60px 100% repeat-x,
    var(--tile-dark);
}
.paper__band::before, .paper__band::after { content: ''; position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(90deg, var(--tile-dark) 0 6px, transparent 6px 12px) 0 0 / 12px 100%, linear-gradient(var(--cream), var(--cream)); }
.paper__band::before { top: -10px; clip-path: polygon(0 100%, 3% 0, 6% 100%, 9% 0, 12% 100%, 15% 0, 18% 100%, 21% 0, 24% 100%, 27% 0, 30% 100%, 33% 0, 36% 100%, 39% 0, 42% 100%, 45% 0, 48% 100%, 51% 0, 54% 100%, 57% 0, 60% 100%, 63% 0, 66% 100%, 69% 0, 72% 100%, 75% 0, 78% 100%, 81% 0, 84% 100%, 87% 0, 90% 100%, 93% 0, 96% 100%, 99% 0, 100% 100%); background: var(--tile-dark); }
.paper__band::after { bottom: -10px; clip-path: polygon(0 0, 3% 100%, 6% 0, 9% 100%, 12% 0, 15% 100%, 18% 0, 21% 100%, 24% 0, 27% 100%, 30% 0, 33% 100%, 36% 0, 39% 100%, 42% 0, 45% 100%, 48% 0, 51% 100%, 54% 0, 57% 100%, 60% 0, 63% 100%, 66% 0, 69% 100%, 72% 0, 75% 100%, 78% 0, 81% 100%, 84% 0, 87% 100%, 90% 0, 93% 100%, 96% 0, 99% 100%, 100% 0); background: var(--tile-dark); }
.paper__band--top { border-radius: 4px 4px 0 0; margin-bottom: 10px; }
.paper__band--top::before { display: none; }
.paper__band--bottom { border-radius: 0 0 4px 4px; margin-top: 10px; }
.paper__band--bottom::after { display: none; }

/* Botones de papel con bordes recortados */
.paper-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 0; background: none; color: var(--ink); font-weight: 700; font-stretch: 125%; text-transform: uppercase;
  letter-spacing: .08em; font-size: .95rem; padding: .95rem 2rem; isolation: isolate;
  transition: transform .5s var(--ease-back);
}
.paper-btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 999px;
  background: var(--cream) url('../assets/paper-texture.jpg') center / 300px;
  filter: url(#rough); box-shadow: 0 10px 22px -10px rgba(0,0,0,.6);
  transition: transform .5s var(--ease-back);
}
.paper-btn:hover { transform: translateY(-3px) rotate(-1deg); }
.paper-btn:hover::before { transform: scale(1.04); }
.paper-btn--orange { color: #fff; }
.paper-btn--orange::before { background: var(--bordeaux) url('../assets/fabric-orange.jpg') center / 320px; background-blend-mode: luminosity; }
.paper-btn--round { width: 62px; height: 62px; padding: 0; }
.paper-btn--oval { width: 74px; height: 50px; padding: 0; }
.paper-btn--tag { padding: .5rem 1.1rem; font-size: .8rem; letter-spacing: .2em; }
.paper-btn--tag::before { border-radius: 14px; }

.chev-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: .06em; font-size: .95rem; color: var(--ink); }
.chev-link--light { color: #f4ecdc; text-shadow: 1px 1px 0 #3a2a1c, 2px 2px 0 #3a2a1c, 4px 6px 10px rgba(0,0,0,.4); }
.chev { display: inline-block; font-size: 1.5em; line-height: 1; transform: translateY(-.08em); transition: transform .4s var(--ease-back); }
.chev--up { transform: rotate(-90deg); }
.chev-link:hover .chev { transform: translateX(6px) translateY(-.08em); }
.chev-link:hover .chev--up { transform: rotate(-90deg) translateX(6px); }

/* ==========================================================================
   Marco rasgado y UI fija
   ========================================================================== */

.brand { position: fixed; top: 18px; left: 22px; z-index: 70; display: flex; align-items: center; gap: .7rem; }
.brand__badge { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 12px 12px 12px 22px; background: var(--bordeaux); box-shadow: 0 8px 16px -8px rgba(0,0,0,.7), inset 0 0 0 2px rgba(255,255,255,.18); transition: transform .5s var(--ease-back); }
.brand__badge img { width: 44px; }
.brand:hover .brand__badge { transform: rotate(-4deg) scale(1.05); }
.brand__text { font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: .72rem; letter-spacing: .12em; line-height: 1.15; color: #f4ecdc; text-shadow: 1px 1px 0 #3a2a1c, 2px 2px 0 #3a2a1c; }

.menu-btn { position: fixed; top: 22px; right: 26px; z-index: 90; }
.menu-btn__lines { display: flex; flex-direction: column; gap: 5px; }
.menu-btn__lines i { display: block; width: 26px; height: 3px; background: var(--ink); border-radius: 2px; transition: transform .35s, opacity .3s; }
.menu-btn.is-open .menu-btn__lines i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-btn.is-open .menu-btn__lines i:nth-child(2) { opacity: 0; }
.menu-btn.is-open .menu-btn__lines i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.call-btn { position: fixed; left: 26px; bottom: 26px; z-index: 70; color: var(--bordeaux); }
.call-btn svg { transform: rotate(-8deg); }

@media (max-width: 640px) {
  .brand { top: 12px; left: 14px; } .brand__badge { width: 48px; height: 48px; } .brand__badge img { width: 36px; } .brand__text { display: none; }
  .menu-btn { top: 12px; right: 14px; } .call-btn { left: 14px; bottom: 14px; width: 54px; height: 54px; }
  .stage { padding-left: .75rem; padding-right: .75rem; }
}

/* ==========================================================================
   Intro, menú y cortina
   ========================================================================== */
.intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; overflow: hidden; }
.intro__bg { position: absolute; inset: 0; background: var(--tile-deep) url('../assets/tile-texture.jpg') center / 380px repeat; opacity: 1; }
.intro__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 30%, rgba(255,205,120,.18), transparent 70%), rgba(20,28,34,.6); }
.intro__banner { width: min(860px, 96vw); transform: rotate(-3deg) scaleY(0); transform-origin: 50% 0; transition: transform 1.1s var(--ease-back); }
.intro.is-on .intro__banner { transform: rotate(-2.5deg) scaleY(1); }
.intro__line { font-size: clamp(1.4rem, 4vw, 2.6rem); margin: .8rem 0 .2rem; }
.intro__title { font-size: clamp(3.4rem, 12vw, 9.5rem); }
.intro__sub { margin-top: .6rem; font-weight: 600; letter-spacing: .5em; text-transform: uppercase; font-size: .85rem; color: #ffe9cf; }
.intro__skip { position: absolute; bottom: 8vh; left: 50%; transform: translateX(-50%); background: none; border: 0; color: #f4ecdc; font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; text-shadow: 1px 1px 0 #3a2a1c, 2px 2px 0 #3a2a1c; display: inline-flex; align-items: center; gap: .4rem; opacity: 0; transition: opacity .6s; }
.intro.is-on .intro__skip { opacity: 1; transition-delay: 1.4s; }
.intro.is-leaving { pointer-events: none; }
.intro.is-leaving .intro__banner { transform: rotate(3deg) translateY(-130vh); transition: transform 1s cubic-bezier(.6, 0, .3, 1); }
.intro.is-leaving .intro__bg { opacity: 0; transition: opacity .8s .3s; }
.intro.is-leaving .intro__skip { opacity: 0; transition-delay: 0s; }

.curtain { position: fixed; inset: 0; z-index: 95; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
.curtain__banner { width: 140vmax; height: 140vmax; transform: rotate(-8deg) translateY(150%); transition: none; border-radius: 40px; }
.curtain__banner .banner__strip { height: 64px; }
.curtain.is-in { pointer-events: auto; }
.curtain.is-in .curtain__banner { transform: rotate(-4deg) translateY(0); transition: transform .65s cubic-bezier(.7, 0, .3, 1); }
.curtain.is-out .curtain__banner { transform: rotate(4deg) translateY(-150%); transition: transform .8s cubic-bezier(.7, 0, .3, 1); }

.menu { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1rem; pointer-events: none; overflow: hidden; background: rgba(20,28,34,0); transition: background .5s; }
.menu.is-open { pointer-events: auto; background: rgba(20,28,34,.55); backdrop-filter: blur(6px); }
.menu__banner { width: min(720px, 94vw); transform: rotate(-3deg) scaleY(0); transform-origin: 50% 0; transition: transform .9s var(--ease-back); }
.menu.is-open .menu__banner { transform: rotate(-2deg) scaleY(1); }
.menu__body { padding: 2rem 2rem 2.4rem; }
.menu__list { display: grid; gap: 1.2rem; margin: 1.4rem 0 1.6rem; }
.menu__link { display: inline-flex; align-items: baseline; gap: .8rem; font-size: clamp(2.2rem, 7vw, 4.2rem); transition: transform .4s var(--ease-back); }
.menu__link small { font-size: .9rem; font-weight: 600; letter-spacing: .3em; color: var(--gold-light); }
.menu__link:hover { transform: translateX(10px) rotate(-1deg); }
.menu__foot { display: flex; justify-content: center; gap: .8rem; font-weight: 600; letter-spacing: .1em; font-size: .85rem; color: #ffe9cf; }

/* ==========================================================================
   Escenarios (capítulos)
   ========================================================================== */
.stage { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding: 8rem clamp(1rem, 4vw, 3rem) 6rem; isolation: isolate; overflow: clip; }
.stage__bg { position: absolute; inset: 0; z-index: -1; overflow: clip; }
.stage__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.stage__paint { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--py, 0)) scale(1.12); transition: transform .12s linear; }
.stage__vignette { position: absolute; inset: 0; z-index: 1; background: none; }
.stage__vignette--soft, .stage__vignette--warm { background: none; }
.stage__head { text-align: center; margin-bottom: 2.4rem; display: grid; gap: .6rem; justify-items: center; }
.stage__title { font-size: clamp(3rem, 9vw, 7rem); }
.stage__next { margin-top: 3rem; }

/* --- Capítulo 00 · hero --- */
.stage--hero { justify-content: center; padding-top: 6rem; }
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; animation: heroZoom 30s ease-in-out infinite alternate; }
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.07); } }
.hero__content { display: grid; justify-items: center; gap: 1.6rem; width: min(900px, 100%); perspective: 1200px; }
.hero__banner { width: min(760px, 100%); transform: rotate(-2.5deg); }
.tilt { transform: rotate(-2.5deg) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate(var(--tx, 0), var(--ty, 0)); transition: transform .25s ease-out; transform-style: preserve-3d; }
.hero__title { font-size: clamp(3.6rem, 9.2vw, 8.2rem); margin: .4rem 0 .2rem; }
.hero__sub { font-weight: 600; letter-spacing: .5em; text-transform: uppercase; font-size: clamp(.8rem, 2vw, 1rem); color: #ffe9cf; }
.hero__lead { max-width: 560px; text-align: center; color: #f4ecdc; font-size: 1.05rem; font-weight: 500; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.4rem; }
.hero__cta .chev-link { color: #f4ecdc; text-shadow: 1px 1px 0 #3a2a1c, 2px 2px 0 #3a2a1c, 4px 6px 10px rgba(0,0,0,.4); }

.note { position: absolute; padding: 1rem 1.2rem; width: 230px; font-size: .8rem; line-height: 1.4; color: var(--ink-soft); background: var(--cream) url('../assets/paper-texture.jpg') center / 300px; box-shadow: 0 14px 30px -12px rgba(0,0,0,.6); transform: rotate(3deg); }
.note::before { content: ''; position: absolute; top: -8px; left: 50%; width: 60px; height: 16px; margin-left: -30px; background: rgba(255,255,255,.55); transform: rotate(-2deg); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.note--hero { right: clamp(1rem, 6vw, 5rem); bottom: 7rem; }
@media (max-width: 900px) { .note--hero { display: none; } }

/* --- Capítulo 01 · carta --- */
.stage--carta { padding-top: 7rem; }
.promos { width: min(1100px, 100%); --rot: -1.2deg; margin-bottom: 3.2rem; }
.promos__head { max-width: 640px; margin: 0 auto 1.6rem; display: grid; gap: .5rem; }
.promos__title { font-size: clamp(2.2rem, 6vw, 4rem); }
.promos__text { color: #ffe9cf; }
.promos__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.3rem; }
.promo { --rot: -1.4deg; padding: 1.6rem 1.2rem 1.4rem; text-align: center; color: var(--ink); background: var(--cream) url('../assets/paper-texture.jpg') center / 300px; box-shadow: 0 16px 30px -14px rgba(0,0,0,.6); position: relative; transition: transform .5s var(--ease-back), opacity .7s; }
.promo::before { content: ''; position: absolute; top: -9px; left: 50%; width: 70px; height: 18px; margin-left: -35px; background: rgba(255,255,255,.55); transform: rotate(-2deg); }
.promo:hover { transform: rotate(0deg) translateY(-6px) scale(1.02); }
.promo__weight { font-weight: 600; letter-spacing: .25em; font-size: .72rem; text-transform: uppercase; color: var(--orange-dark); }
.promo__name { margin-top: .3rem; font-weight: 900; font-stretch: 125%; font-size: 1.25rem; text-transform: uppercase; color: var(--tile-dark); line-height: 1.05; }
.promo__desc { margin-top: .6rem; font-size: .86rem; color: var(--ink-soft); min-height: 3.6em; }
.promo__price { display: inline-block; margin-top: .9rem; font-weight: 900; font-stretch: 125%; font-size: 1.8rem; color: var(--bordeaux); }

.carta-card { width: min(1180px, 100%); --rot: -.6deg; }
.menu-tabs { display: grid; gap: .9rem; margin-bottom: 1.8rem; }
.menu-tabs__groups { display: flex; justify-content: center; gap: .6rem; }
.tab { border: 2px solid var(--tile-dark); background: transparent; color: var(--tile-dark); font-weight: 900; font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; font-size: .85rem; padding: .55rem 1.5rem; border-radius: 999px; transition: background .3s, color .3s, transform .4s var(--ease-back); }
.tab:hover { transform: translateY(-2px) rotate(-1deg); }
.tab.is-active { background: var(--tile-dark); color: #f4ecdc; }
.menu-tabs__pills { display: flex; gap: .6rem; overflow-x: auto; padding: .5rem .3rem .8rem; scrollbar-width: none; }
.menu-tabs__pills::-webkit-scrollbar { display: none; }
@media (min-width: 1000px) { .menu-tabs__pills { flex-wrap: wrap; justify-content: center; } }
.pill { flex: 0 0 auto; position: relative; isolation: isolate; border: 0; background: none; font-weight: 700; font-stretch: 125%; letter-spacing: .04em; font-size: .82rem; text-transform: uppercase; padding: .55rem 1rem; color: var(--ink-soft); transform: rotate(var(--rot, 0deg)); transition: transform .4s var(--ease-back), color .3s; }
.pill::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 8px; background: #fff url('../assets/paper-texture.jpg') center / 260px; filter: url(#rough-soft); box-shadow: 0 6px 14px -8px rgba(0,0,0,.5); transition: background .3s; }
.pill:hover { transform: rotate(0deg) translateY(-3px); color: var(--orange-dark); }
.pill.is-active { color: #fff; transform: rotate(0deg) scale(1.04); }
.pill.is-active::before { background: var(--bordeaux) url('../assets/fabric-orange.jpg') center / 260px; background-blend-mode: luminosity; }

.category { display: grid; gap: 1.6rem; opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); }
.category.in { opacity: 1; transform: none; }
@media (min-width: 900px) { .category { grid-template-columns: 300px 1fr; gap: 2.4rem; align-items: start; } .category__side { position: sticky; top: 6rem; } }
.category__title { font-size: clamp(2rem, 5vw, 3.2rem); margin: .3rem 0 .8rem; }
.category__note { background: rgba(217,119,63,.14); border-left: 4px solid var(--orange); padding: .7rem .9rem; font-size: .88rem; color: var(--ink-soft); margin-bottom: 1.2rem; }
.dishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .8rem 2.2rem; }
.dish { padding: .8rem 0; border-bottom: 1px dashed rgba(63,84,97,.35); animation: dishIn .6s var(--ease-out) both; animation-delay: var(--d, 0ms); }
@keyframes dishIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dish__head { display: flex; align-items: baseline; gap: .5rem; }
.dish__name { font-weight: 900; font-stretch: 125%; font-size: 1rem; text-transform: uppercase; color: var(--tile-dark); line-height: 1.15; }
.dish__tag { display: inline-block; margin-left: .5rem; vertical-align: middle; font-size: .62rem; letter-spacing: .16em; padding: .18rem .5rem; border-radius: 4px; background: var(--gold-light); color: #3a2c0c; font-weight: 700; }
.dish__dots { flex: 1; border-bottom: 2px dotted rgba(63,84,97,.5); transform: translateY(-4px); min-width: 16px; }
.dish__price { font-weight: 900; font-stretch: 125%; font-size: 1.15rem; color: var(--bordeaux); white-space: nowrap; }
.dish__desc { margin-top: .25rem; font-size: .88rem; color: var(--ink-soft); }

.allergens { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 2px solid rgba(63,84,97,.25); text-align: center; }
.allergens__title { font-weight: 900; font-stretch: 125%; text-transform: uppercase; color: var(--tile-dark); font-size: 1.3rem; }
.allergens p { max-width: 700px; margin: .5rem auto 1rem; font-size: .88rem; color: var(--ink-soft); }
.allergens__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.allergens__list li { font-weight: 700; letter-spacing: .08em; font-size: .7rem; text-transform: uppercase; padding: .35rem .7rem; border-radius: 4px; background: rgba(63,84,97,.1); color: var(--tile-dark); }

/* Polaroid / foto recortada */
.polaroid { --rot: -2deg; background: var(--cream) url('../assets/paper-texture.jpg') center / 300px; padding: 10px 10px 12px; box-shadow: 0 18px 36px -16px rgba(0,0,0,.65); transform: rotate(var(--rot)); }
.polaroid img, .polaroid iframe { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.polaroid__cap { margin-top: .6rem; text-align: center; font-weight: 700; font-stretch: 125%; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--ink-soft); }
.category__polaroid { --rot: -2.2deg; }

/* --- Capítulo 02 · reservas --- */
.stage__lead { max-width: 560px; color: #f4ecdc; font-weight: 500; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.booking { width: min(920px, 100%); --rot: -.8deg; }
.booking__intro { text-align: center; max-width: 620px; margin: 0 auto 1.6rem; }
.booking__intro p { margin-top: .6rem; color: var(--ink-soft); font-size: .95rem; }
.booking__title { font-size: clamp(1.8rem, 4.5vw, 2.8rem); }
.booking__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.2rem; }
.field { display: grid; gap: .35rem; }
.field--wide { grid-column: 1 / -1; }
.field__label { font-weight: 600; letter-spacing: .25em; text-transform: uppercase; font-size: .68rem; color: var(--orange-dark); }
.field input, .field select, .field textarea {
  font-family: 'Caveat', 'Segoe Print', cursive; font-size: 1.45rem; font-weight: 600; line-height: 1.3; color: #3a3430;
  background: transparent; border: 0; border-radius: 0; outline: none; width: 100%; padding: .2rem .3rem .25rem;
  border-bottom: 2px solid rgba(58, 52, 48, .55);
  transition: border-color .3s, background .3s;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(58, 52, 48, .38); font-weight: 500; }
.field textarea { resize: vertical; min-height: 96px; border-bottom: 0; padding-top: .1rem;
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(1.3em - 2px), rgba(58, 52, 48, .45) calc(1.3em - 2px) 1.3em);
  background-attachment: local; }
.field select { appearance: none; cursor: pointer; padding-right: 1.6rem;
  background-image: linear-gradient(45deg, transparent 50%, rgba(58,52,48,.7) 50%), linear-gradient(135deg, rgba(58,52,48,.7) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 8px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.field select option { font-family: var(--font); font-size: 1rem; }
.field input[type="date"], .field input[type="time"] { font-family: 'Caveat', cursive; }
.field input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--orange); background-color: rgba(217,119,63,.06); }
.field.is-invalid input, .field.is-invalid select { border-color: var(--bordeaux); background-color: rgba(165,24,43,.06); }
.booking__error { margin-top: 1rem; padding: .7rem 1rem; border-left: 4px solid var(--bordeaux); background: rgba(165,24,43,.08); font-size: .88rem; color: var(--bordeaux); }
.booking__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.4rem; margin-top: 1.8rem; }
.booking__done[hidden] { display: none; }
.booking__done { text-align: center; display: grid; gap: .8rem; justify-items: center; padding: 1rem 0; }
.booking__done p { max-width: 560px; color: var(--ink-soft); }
.booking__small { font-size: .88rem; }
.booking__small a { font-weight: 700; color: var(--bordeaux); }
.note--booking { right: clamp(1rem, 5vw, 4rem); bottom: 4rem; transform: rotate(-3deg); }
@media (max-width: 900px) { .note--booking { display: none; } }
@media (max-width: 640px) { .booking__grid { grid-template-columns: 1fr; } }

/* --- Capítulo 03 · contacto --- */
.contact__grid { width: min(1100px, 100%); display: grid; gap: 2rem; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.contact__card { --rot: -1deg; }
.contact__name { font-size: clamp(1.9rem, 4.5vw, 2.8rem); margin: .4rem 0 1rem; }
.contact__list li { display: grid; gap: .15rem; padding: .9rem 0; border-bottom: 1px dashed rgba(63,84,97,.35); }
.contact__label { font-weight: 600; letter-spacing: .3em; text-transform: uppercase; font-size: .7rem; color: var(--orange-dark); }
.contact__big { font-weight: 900; font-stretch: 125%; font-size: 2rem; color: var(--bordeaux); }
.contact__social { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.contact__social a { text-decoration: underline; text-decoration-color: rgba(63,84,97,.4); text-underline-offset: 3px; }
.contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 1.4rem; }
.contact__side { display: grid; gap: 2.2rem; padding-top: 1rem; }
.contact__side .polaroid iframe { aspect-ratio: 4 / 3; min-height: 260px; filter: saturate(.8) sepia(.15); }

.footer { margin-top: 4rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem; color: #f4ecdc; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-shadow: 0 2px 6px rgba(0,0,0,.6); }

@media (max-width: 640px) {
  .stage { padding: 6rem .9rem 5rem; }
  .banner__body { padding: 1.6rem 1.1rem 1.8rem; }
  .banner__strip { height: 38px; background-size: 26px auto, 52px 100%, auto; }
  .paper__inner { padding: 1.6rem .9rem 2rem; }
  .hero__banner { --rot: -1.5deg; }
  .promos, .carta-card, .booking, .contact__card, .polaroid { --rot: -.4deg; }
  .stage__title { font-size: clamp(2.6rem, 13vw, 4rem); }
  .tilt { transform: rotate(-1.5deg); }
  .dishes { grid-template-columns: 1fr; }
}