/* Web del bar. Manual V5, modo «editorial cotidiano»: pared crema, titular serif negro,
   gesto rosa, dato turquesa sobre negro y el zócalo de azulejo del local. Compacta: todo en un vistazo. */

body { overflow-x: clip; }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  padding: 0.6rem 1rem; border-radius: var(--r-pill);
  background: var(--tungsten); color: var(--on-tungsten); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- portada ---------- */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(28px + env(safe-area-inset-top)) 0 calc(36px + 72px + var(--scene-room));
  background:
    radial-gradient(60% 50% at 92% 0%, rgba(255, 196, 120, 0.3), transparent 70%),
    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='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--velvet-900);
}
/* zócalo de azulejo metro negro */
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; z-index: -1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 30%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48'%3E%3Crect width='56' height='48' fill='%23111'/%3E%3Cg fill='%23161616'%3E%3Crect x='1' y='1' width='54' height='22' rx='2'/%3E%3Crect x='-27' y='25' width='54' height='22' rx='2'/%3E%3Crect x='29' y='25' width='54' height='22' rx='2'/%3E%3C/g%3E%3Cg fill='%23fff' opacity='.08'%3E%3Crect x='4' y='3' width='48' height='5' rx='2.5'/%3E%3Crect x='-24' y='27' width='48' height='5' rx='2.5'/%3E%3Crect x='32' y='27' width='48' height='5' rx='2.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 56px 48px,
    var(--tile);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.08);
}

/* Logo oficial si existe; si no, el nombre en texto plano (no se recrea el lettering). */
.brand-id { display: flex; align-items: center; min-height: 44px; margin-bottom: 30px; }
.brand-id { flex-direction: column; align-items: flex-start; gap: 8px; }
.brand-id__logo {
  display: block; height: 58px; width: auto;
  /* manual V5: logo original en blanco, con sombreado negro detrás para que se lea sobre la pared */
  filter: drop-shadow(0 1.5px 0 rgba(15, 15, 15, 0.9)) drop-shadow(0 3px 8px rgba(15, 15, 15, 0.45));
}
.brand-id__logo[src*="logo-negro"] { filter: drop-shadow(0 2px 5px rgba(15, 15, 15, 0.28)); }
/* el subrayado rosa bajo «BAR», como en los carteles */
.brand-id:has(.brand-id__logo)::after { content: ''; width: 34px; height: 3px; margin-left: 54px; border-radius: 2px; background: var(--rosa); }
.brand-id__text { display: grid; gap: 6px; }
.brand-id__text::before { content: ''; width: 34px; height: 4px; border-radius: 2px; background: var(--rosa); }
.brand-id__name { font: 700 0.9375rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tungsten-2); }

.hero__title {
  margin: 0;
  font: 800 clamp(3rem, 13vw, 5.4rem)/0.93 var(--font-display);
  letter-spacing: -0.012em; text-transform: uppercase; text-wrap: balance;
}
.hero__title em { font-style: normal; color: var(--rosa); }
.hero__title .hero-line { display: block; }
.hero__lead { margin: 16px 0 0; max-width: 34ch; font-size: 1.125rem; color: var(--ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero__actions .btn { min-height: 52px; padding: 0 24px; font-size: 1.0625rem; }

/* La única animación: el titular entra una vez por sesión. */
.hero.is-dark .hero-line { opacity: 0; transform: translateY(16px); }
.hero.is-lit .hero-line { transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); }
.hero.is-lit .hero-line:nth-child(2) { transition-delay: 90ms; }
.hero.is-lit .hero__lead { transition-delay: 180ms; }
.hero.is-lit .hero__actions { transition-delay: 260ms; }

/* ---------- franja negra con el dato ---------- */

.band { background: var(--negro); color: var(--crema); }
.band__inner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; padding-top: 18px; padding-bottom: 20px; }
.band__data { margin: 0; font: 700 1.35rem/1.1 var(--font-data); letter-spacing: 0.04em; text-transform: uppercase; color: var(--turquesa); }
.band__note { margin: 0; font-style: italic; color: var(--crema); }

/* ---------- bloques ---------- */

main { outline: none; }
.title {
  margin: 0 0 12px;
  font: 800 clamp(1.9rem, 7vw, 2.5rem)/1 var(--font-display);
  letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance;
}
.title::before { content: ''; display: block; width: 34px; height: 4px; margin-bottom: 12px; border-radius: 2px; background: var(--rosa); }
.title--sm { font-size: 1.5rem; }
.title--sm::before { background: var(--turquesa); }

/* Todas las secciones dejan el mismo aire: cada una lo pone solo por arriba. */
.promo { padding: var(--section-gap) 20px 0; }

.about { padding-top: var(--section-gap); }
.about p { margin: 0 0 10px; max-width: 58ch; font-size: 1.0625rem; color: var(--ink-2); }
.about p:last-child { margin-bottom: 0; color: var(--ink); font-weight: 600; }

.picks { padding-top: var(--section-gap); }
.picks__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 6px 16px; }
.link-more { margin-bottom: 14px; color: var(--tungsten-2); font-weight: 700; text-underline-offset: 4px; }
.picks__list { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1.5px solid var(--ink); }
.picks__list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pick__text { flex: 1; min-width: 0; display: grid; }
.picks__list strong { font-size: 1.0625rem; }
.picks__list span { min-width: 0; color: var(--ink-3); font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picks__list b { font: 700 1.2rem/1 var(--font-data); color: var(--tungsten-2); }

.info { display: grid; grid-template-columns: 1fr 1fr; gap: var(--section-gap); padding-top: var(--section-gap); padding-bottom: var(--section-gap); scroll-margin-top: 16px; }
.info__card { padding: 20px; border-radius: var(--r-lg); background: var(--velvet-700); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-float); }
.hours { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.hours dt { font-weight: 700; }
.hours dd { margin: 0; text-align: right; font: 600 1.05rem/1.3 var(--font-data); }
.hours dd.is-closed { color: var(--tungsten-2); }
.info__note { margin: 0; color: var(--ink-2); }
.info__addr { margin: 0 0 14px; font-size: 1.0625rem; }
.info__map {
  position: relative; height: 170px; margin-bottom: 16px; overflow: hidden;
  border-radius: var(--r-md, 14px); background: var(--velvet-900);
  box-shadow: inset 0 0 0 1px var(--line);
}
.map-load { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.map-load__art { display: block; width: 100%; height: 100%; }
.map-load__cta {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
  border-radius: var(--r-pill); background: var(--negro); color: var(--crema); font-weight: 700; font-size: 0.9375rem; white-space: nowrap;
}
.map-load:focus-visible { outline: 3px solid var(--rosa); outline-offset: -3px; }
.info__map iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(0.75) sepia(0.12); }
.info__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.foot { padding: var(--section-gap) 0 calc(90px + var(--safe-b)); border-top: 1px solid var(--line); }
.foot__inner { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 600 0.8125rem/1.4 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.foot__inner a { color: var(--ink); text-decoration: none; }

/* ---------- «Ver la carta» fija en el móvil ---------- */

.dock-cta {
  position: fixed; z-index: 30; left: 50%; bottom: calc(14px + var(--safe-b));
  display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px;
  border-radius: var(--r-pill); background: var(--negro); color: var(--crema);
  font-weight: 700; font-size: 1.0625rem; text-decoration: none;
  box-shadow: 0 14px 30px -12px rgba(15, 15, 15, 0.6);
  transform: translateX(-50%);
  transition: opacity 220ms var(--ease-out), translate 220ms var(--ease-out);
}
.dock-cta::after { content: ''; position: absolute; left: 30px; right: 30px; bottom: 9px; height: 2px; border-radius: 1px; background: var(--rosa); }
.dock-cta.is-away { opacity: 0; translate: 0 20px; pointer-events: none; }
.dock-cta:active { transform: translateX(-50%) scale(0.97); }

@media (min-width: 760px) {
  .dock-cta { display: none; }
  .foot { padding-bottom: 28px; }
}
@media (max-width: 560px) {
  .info { grid-template-columns: 1fr; }
}

/* Firma del estudio, como marca de agua discreta */
.credit {
  margin: 18px 0 0; font: 600 0.6875rem/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); opacity: 0.62;
}
.credit sup { font-size: 0.7em; vertical-align: 0.5em; line-height: 0; }

.foot__legal { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 16px 0 0; font-size: 0.8125rem; }
.foot__legal a { color: var(--ink-2); text-underline-offset: 3px; }