/* Base + componentes gb-* · La Gata del Born. Sin estilos inline (CSP): todo por clases. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 var(--t-body)/1.65 var(--f-body); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; line-height: 1.05; letter-spacing: -.01em; margin: 0 0 var(--s-2); color: var(--fg-strong); }
h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); }
h1 em, h2 em, h3 em { font-family: var(--f-accent); font-style: italic; font-weight: 600; letter-spacing: 0; }
p { margin: 0 0 var(--s-2); max-width: 62ch; }
a { color: var(--c-vino); text-decoration-color: var(--c-rosa-profundo); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--c-coral); }
:focus-visible { outline: 3px solid var(--c-sol); outline-offset: 3px; box-shadow: 0 0 0 6px var(--c-vino); border-radius: var(--r-s); }
.gb-wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.gb-skip { position: absolute; left: var(--s-2); top: -4rem; z-index: 100; background: var(--c-sol); color: var(--c-vino); padding: .6rem 1rem; border-radius: var(--r-pill); font: 700 .9rem var(--f-display); }
.gb-skip:focus { top: var(--s-1); }
.gb-label { font: 400 var(--t-label)/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; }
.gb-section { padding-block: clamp(4rem, 9vw, 8rem); position: relative; }
.band--luna { background: var(--c-luna); color: var(--c-tinta); }
.band--nube { background: var(--c-nube); color: var(--c-tinta); }
.band--noche { background: var(--c-noche); color: var(--c-luna); }
.band--noche h2, .band--noche h3 { color: var(--c-luna); }
.band--noche a { color: var(--c-sol); text-decoration-color: var(--c-rosa); }
.band--luna h2, .band--luna h3, .band--nube h2, .band--nube h3 { color: var(--c-vino); }
.gb-stripe { height: 10px; background: var(--stripe-3); border-radius: var(--r-pill); width: 120px; margin-bottom: var(--s-3); }

/* Botones */
.gb-btn { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: .85rem 1.6rem; border: var(--bw) solid var(--c-vino); border-radius: var(--r-pill);
  background: var(--c-rosa); background-image: var(--g-cromo); color: var(--c-vino); font: 700 .95rem/1 var(--f-display); text-decoration: none; box-shadow: 4px 4px 0 var(--c-vino);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease); cursor: pointer; }
.gb-btn::after { content: "✦"; display: inline-block; transition: transform .4s var(--ease); }
.gb-btn:hover { transform: translateY(-2px); box-shadow: 7px 7px 0 var(--c-vino); }
.gb-btn:hover::after { transform: rotate(180deg); }
.gb-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--c-vino); }
.gb-btn--ghost { background: var(--c-luna); background-image: none; }
.band--noche .gb-btn { background: var(--c-sol); background-image: none; border-color: var(--c-luna); box-shadow: 4px 4px 0 var(--c-rosa); }

/* Cabecera pastilla */
.gb-header { position: fixed; z-index: 50; top: var(--s-1); left: 0; right: 0; pointer-events: none; }
.gb-header__bar { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: .5rem .6rem .5rem 1.1rem; max-width: var(--maxw); margin-inline: auto;
  background: rgba(251, 241, 228, .92); backdrop-filter: blur(10px); border: var(--bw) solid var(--c-vino); border-radius: var(--r-pill); box-shadow: 4px 4px 0 var(--c-vino); color: var(--c-tinta); width: calc(100% - 2 * var(--gutter)); }
.gb-logo { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--c-vino); font: 800 1rem/1 var(--f-display); }
.gb-logo em { font-family: var(--f-accent); font-weight: 600; font-size: .95rem; }
.gb-logo img { width: 34px; height: 20px; }
.gb-nav { display: none; gap: var(--s-3); align-items: center; }
.gb-nav a { font: 700 .85rem var(--f-display); text-decoration: none; padding: .5rem .2rem; }
.gb-nav a:hover { text-decoration: underline; text-decoration-color: var(--c-rosa-profundo); text-decoration-thickness: 2px; }
.gb-lang { display: flex; gap: .25rem; }
.gb-lang a { font: 700 .75rem var(--f-mono); letter-spacing: .1em; text-decoration: none; padding: .45rem .6rem; border-radius: var(--r-pill); border: 2px solid transparent; min-height: 36px; display: inline-flex; align-items: center; }
.gb-lang a[aria-current="true"] { background: var(--c-rosa); border-color: var(--c-vino); }
.gb-burger { pointer-events: auto; width: 44px; height: 44px; border-radius: 50%; border: var(--bw) solid var(--c-vino); background: var(--c-sol); color: var(--c-vino); font: 800 1rem var(--f-display); cursor: pointer; }
.gb-header__right { display: flex; align-items: center; gap: .5rem; }
.gb-menu-full { display: none; position: fixed; inset: 0; z-index: 45; background: var(--c-noche); padding: 6rem var(--gutter) var(--s-4); flex-direction: column; gap: var(--s-2); }
.gb-menu-full.is-open { display: flex; }
.gb-menu-full a { font: 800 clamp(1.8rem, 8vw, 2.6rem)/1.2 var(--f-display); color: var(--c-luna); text-decoration: none; }
.gb-menu-full a:hover { color: var(--c-sol); }
@media (min-width: 1024px) { .gb-nav { display: flex; } .gb-burger { display: none; } }

/* Hero */
.gb-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--g-atardecer); color: var(--c-luna); padding: 8.5rem 0 0; min-height: 100svh; display: flex; flex-direction: column; }
.gb-hero__rays { position: absolute; z-index: -3; inset: -40% -20% auto; aspect-ratio: 1; margin-inline: auto;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(242, 154, 177, .22) 0deg 7.5deg, transparent 7.5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); animation: gb-spin 120s linear infinite; }
.gb-orbit { position: absolute; z-index: -2; border: 1.5px solid rgba(251, 241, 228, .28); border-radius: 50%; animation: gb-spin 60s linear infinite; }
.gb-orbit::after { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--c-sol); }
.gb-orbit--1 { width: 60vmax; height: 60vmax; right: -25vmax; top: -10vmax; }
.gb-orbit--2 { width: 34vmax; height: 34vmax; left: -14vmax; bottom: 8vmax; animation-direction: reverse; }
.gb-orbit--2::after { background: var(--c-menta); }
.gb-hero__grid { display: grid; gap: var(--s-4); align-items: center; flex: 1; padding-bottom: var(--s-6); }
.gb-hero h1 { font-size: var(--t-hero); color: var(--c-luna); text-transform: lowercase; }
.gb-hero h1 em { color: var(--c-sol); }
.gb-hero__lead { font-size: 1.2rem; max-width: 44ch; }
.gb-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.gb-hero .gb-btn { background: var(--c-sol); background-image: none; border-color: var(--c-luna); box-shadow: 4px 4px 0 var(--c-rosa); }
.gb-hero .gb-btn--ghost { background: transparent; color: var(--c-luna); }
.gb-hero__gata { position: relative; width: min(78vw, 380px); margin-inline: auto; aspect-ratio: 4 / 5; border-radius: var(--r-arco); border: var(--bw) solid var(--c-luna); overflow: hidden; background: var(--c-noche); box-shadow: var(--shadow-hard-lg) var(--c-rosa); }
.gb-hero__gata::before { content: ""; position: absolute; inset: -30%; background: var(--g-halo); animation: gb-breathe 6s ease-in-out infinite; }
.gb-hero__gata img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.gb-spark { position: absolute; color: var(--c-sol); font-size: 1.4rem; animation: gb-twinkle 4s ease-in-out infinite; z-index: -1; }
.gb-spark--a { top: 28%; left: 6%; } .gb-spark--b { top: 18%; right: 12%; font-size: 2rem; animation-delay: 1.2s; } .gb-spark--c { bottom: 24%; right: 6%; font-size: 1rem; animation-delay: 2.4s; color: var(--c-luna); }
@media (min-width: 768px) { .gb-hero__grid { grid-template-columns: 1.2fr .8fr; } .gb-hero__gata { width: 100%; max-width: 420px; } }

/* Marquee */
.gb-marquee { overflow: hidden; background: var(--c-sol); color: var(--c-vino); border-block: var(--bw) solid var(--c-vino); padding: .7rem 0; }
.gb-marquee__track { display: flex; gap: var(--s-4); width: max-content; animation: gb-marquee 40s linear infinite; font: 700 .95rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }

/* Tickets (agenda) */
.gb-agenda { display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .gb-agenda { grid-template-columns: repeat(3, 1fr); } }
.gb-ticket { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--s-2); align-items: center; background: var(--c-luna); color: var(--c-tinta); border: var(--bw) solid var(--c-vino); border-radius: var(--r-m);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-2); box-shadow: var(--shadow-hard); transition: transform .24s var(--ease), box-shadow .24s var(--ease); }
.gb-ticket:hover { transform: translateY(-3px) rotate(-.5deg); box-shadow: var(--shadow-hard-lg); }
.gb-ticket::before, .gb-ticket::after { content: ""; position: absolute; left: -14px; width: 24px; height: 24px; border-radius: 50%; background: var(--c-nube); border: var(--bw) solid var(--c-vino); clip-path: inset(0 0 0 50%); }
.gb-ticket::before { top: -14px; clip-path: inset(50% 0 0 50%); } .gb-ticket::after { bottom: -14px; clip-path: inset(0 0 50% 50%); }
.gb-ticket__date { text-align: center; padding-right: var(--s-2); border-right: 3px dotted var(--c-vino); font-family: var(--f-mono); color: var(--c-vino); }
.gb-ticket__day { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: .05em; }
.gb-ticket__time { display: block; font-size: .9rem; margin-top: .3rem; }
.gb-ticket h3 { font-size: 1.1rem; margin: 0 0 .3rem; }
.gb-ticket p { margin: 0; font-size: .95rem; }
.gb-badge { display: inline-block; padding: .2rem .7rem; border-radius: var(--r-pill); background: var(--c-coral); color: var(--c-vino); border: 2px solid var(--c-vino); font: 700 .7rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: .4rem; }

/* El local */
.gb-local { display: grid; gap: var(--s-5); align-items: center; }
.gb-local__img { width: min(86%, 420px); aspect-ratio: 4 / 5; border-radius: var(--r-arco); border: var(--bw) solid var(--c-vino); overflow: hidden; box-shadow: var(--shadow-hard); margin-inline: auto; transform: rotate(-2deg); }
.gb-local__img img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .gb-local { grid-template-columns: .9fr 1.1fr; } }

/* Carta (CTA) */
.gb-cartacta { display: grid; gap: var(--s-4); align-items: center; }
.gb-cartacta__img { width: min(70%, 320px); aspect-ratio: 1; border-radius: 50%; border: var(--bw) solid var(--c-luna); overflow: hidden; box-shadow: 8px 8px 0 var(--c-rosa); margin-inline: auto; }
.gb-cartacta__img img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .gb-cartacta { grid-template-columns: 1fr auto; } }

/* Visita */
.gb-visit { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .gb-visit { grid-template-columns: 1fr 1fr; } }
.gb-visit__card { background: var(--c-luna); color: var(--c-tinta); border: var(--bw) solid var(--c-vino); border-radius: var(--r-m); padding: var(--s-4); box-shadow: var(--shadow-hard); }
.gb-hours { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: .95rem; }
.gb-hours th { text-align: left; font-weight: 400; text-transform: capitalize; padding: .5rem 0; }
.gb-hours td { text-align: right; padding: .5rem 0; }
.gb-hours tr { border-bottom: 2px dotted var(--c-lavanda); }
.gb-hours tr.is-today { background: var(--c-rosa); font-weight: 700; color: var(--c-vino); }
.gb-hours tr.is-today th, .gb-hours tr.is-today td { padding-inline: .6rem; }
.gb-hours .is-closed { color: var(--c-vino); opacity: .85; }
.gb-address { font-style: normal; font-weight: 500; margin-bottom: var(--s-2); }

/* Footer */
.gb-footer { position: relative; background: var(--c-noche); color: var(--c-luna); padding: var(--s-8) 0 var(--s-5); margin-top: -1px; border-radius: 50% 50% 0 0 / 5rem 5rem 0 0; }
.gb-footer__grid { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .gb-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.gb-footer h3 { font-size: 1rem; color: var(--c-sol); }
.gb-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.gb-footer a { color: var(--c-luna); text-decoration-color: var(--c-rosa); }
.gb-footer small { display: block; margin-top: var(--s-4); font-family: var(--f-mono); letter-spacing: .08em; }

/* Entrada al viewport (solo con JS) */
.js .gb-reveal { opacity: 0; transform: translateY(16px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.js .gb-reveal.is-in { opacity: 1; transform: none; }

@keyframes gb-spin { to { transform: rotate(360deg); } }
@keyframes gb-twinkle { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes gb-breathe { 0%, 100% { transform: scale(.92); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes gb-marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .gb-reveal { opacity: 1; transform: none; }
}

/* Páginas interiores */
.gb-pagehead { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, var(--c-noche) 0%, var(--c-vino) 100%); color: var(--c-luna); padding: 9rem 0 var(--s-6); }
.gb-pagehead--short { padding-bottom: var(--s-5); }
.gb-pagehead h1 { color: var(--c-luna); text-transform: lowercase; }
.gb-pagehead h1 em { color: var(--c-sol); }
.gb-pagehead__lead { font-size: 1.2rem; max-width: 46ch; }
.gb-prose { max-width: 760px; }
.gb-prose h2 { font-size: 1.3rem; margin: var(--s-4) 0 var(--s-1); }
.gb-prose p { max-width: 70ch; }
.gb-note { font-family: var(--f-mono); font-size: .9rem; margin-top: var(--s-2); }
.band--luna h2 + p, .band--nube h2 + p { margin-top: 0; }

/* Carta (gb-menu) */
.gb-menu { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
@media (min-width: 768px) { .gb-menu { grid-template-columns: 1fr 1fr; } }
.gb-menu__cat { background: var(--c-luna); color: var(--c-tinta); border: var(--bw) solid var(--c-vino); border-radius: var(--r-m); padding: var(--s-4); box-shadow: var(--shadow-hard); }
.gb-menu__cat h2 { color: var(--c-vino); font-size: 1.4rem; }
.gb-menu__cat ul { list-style: none; margin: 0; padding: 0; }
.gb-menu__item { display: flex; justify-content: space-between; gap: var(--s-2); padding: .6rem 0; border-bottom: 2px dotted var(--c-lavanda); }
.gb-menu__item p { margin: 0; font-size: .95rem; }
.gb-menu__price { font-family: var(--f-mono); font-weight: 700; color: var(--c-vino); white-space: nowrap; }

/* Galería y lightbox */
.gb-gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: center; }
.gb-shape { display: block; overflow: hidden; border: var(--bw) solid var(--c-vino); box-shadow: var(--shadow-hard); transition: transform .24s var(--ease); }
.gb-shape:hover { transform: translateY(-3px) rotate(-1deg); }
.gb-shape img { width: 100%; height: 100%; object-fit: cover; }
.gb-shape--ovalo { aspect-ratio: 1; border-radius: 50%; }
.gb-shape--arco { aspect-ratio: 4 / 5; border-radius: var(--r-arco); }
.gb-shape--ojo { aspect-ratio: 3 / 2; border-radius: 100% 0; }
.gb-lightbox { border: var(--bw) solid var(--c-luna); background: var(--c-noche); color: var(--c-luna); border-radius: var(--r-m); padding: var(--s-2); max-width: min(92vw, 900px); }
.gb-lightbox::backdrop { background: rgba(42, 23, 69, .88); }
.gb-lightbox img { max-height: 70vh; width: auto; margin-inline: auto; border-radius: var(--r-s); }
.gb-lightbox__bar { display: flex; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-2); }
.gb-lightbox button { min-width: 48px; min-height: 48px; border-radius: var(--r-pill); border: var(--bw) solid var(--c-luna); background: var(--c-sol); color: var(--c-vino); font: 700 1rem var(--f-display); cursor: pointer; }

/* Agenda dinámica: esqueleto de carga y estados de sesión */
.gb-ticket--skeleton { min-height: 96px; background: linear-gradient(90deg, var(--c-luna) 25%, var(--c-nube) 50%, var(--c-luna) 75%); background-size: 200% 100%; animation: gb-shimmer 1.4s linear infinite; }
@keyframes gb-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .gb-ticket--skeleton { animation: none; } }
.gb-ticket__desc { margin-top: .3rem; }
.gb-ticket--cancelled h3 { text-decoration: line-through; }
.gb-ticket--cancelled, .gb-ticket--soldout { background: var(--c-nube); }
.gb-ticket__badge { display: inline-block; margin-top: .4rem; padding: .15rem .7rem; border: 2px solid var(--c-vino); border-radius: var(--r-pill); font-family: var(--f-mono); font-size: .8rem; text-transform: uppercase; color: var(--c-vino); }