@view-transition { navigation: auto; }

@property --w { syntax: '<number>'; inherits: true; initial-value: 100; }

:root {
  --noche: #10102C;
  --ancho: 1440px; /* ancho máximo de todas las páginas, márgenes incluidos */
  /* Margen para bloques con fondo de borde a borde: el contenido queda en el mismo ancho que .envoltura. */
  --borde: max(var(--gutter), calc((100% - var(--ancho)) / 2 + var(--gutter)));
  --pie: #22265A; /* índigo del pie, para que se despegue de las secciones noche */
  --dorado: #AA8D5E;
  --crema: #F4EBDD;
  --blanco: #FDFDFD;
  --naranja: #F39200;
  --bg: var(--noche);
  --tinta: var(--crema);
  --acento: var(--dorado);
  --display: 'Anybody', 'Arial Narrow', sans-serif;
  --texto: 'Archivo', system-ui, sans-serif;
  --sello: 'Rubik Dirt', 'Anybody', sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --cab-alto: 110px;
  --curva: cubic-bezier(.7, 0, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tinta);
  font: 400 1.0625rem/1.6 var(--texto);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
svg.lucide { width: 1.1em; height: 1.1em; stroke-width: 2.2; vertical-align: -.15em; flex: none; }

.saltar { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--crema); color: var(--noche); padding: .6rem 1rem; }
.saltar:focus { left: 8px; }

.envoltura { width: min(var(--ancho), 100%); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Logo ---------- */
.logo-mono {
  display: block;
  aspect-ratio: 206 / 189;
  background: currentColor;
  -webkit-mask: url(../img/logo-mono.svg) center / contain no-repeat;
  mask: url(../img/logo-mono.svg) center / contain no-repeat;
}

/* ---------- Sellos ---------- */
.sello {
  font-family: var(--sello);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1;
  display: inline-block;
  border: 3px solid currentColor;
  border-radius: 6px;
  padding: .55em .8em .5em;
  rotate: -6deg;
  color: var(--acento);
}
.sello small { display: block; font-family: var(--texto); font-weight: 700; font-size: .42em; letter-spacing: .12em; margin-top: .7em; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 48px; padding: .8rem 1.35rem;
  border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; font-size: 1rem; text-decoration: none;
  transition: transform .25s var(--curva), background-color .25s, color .25s;
}
.boton:hover { transform: translateY(-2px); }
.boton-claro { background: var(--crema); color: var(--noche); }
.boton-tinta, .boton-acento { background: var(--tinta); color: var(--bg); }
.boton-linea { border-color: currentColor; }
.boton-linea:hover { background: var(--tinta); color: var(--bg); }

/* ---------- Verificación de edad ---------- */
.edad {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center; padding: 24px;
  background: var(--noche); color: var(--crema);
}
.edad-ok .edad { display: none; }
.edad.saliendo { animation: destapar .7s var(--curva) forwards; }
@keyframes destapar { to { clip-path: inset(0 0 100% 0); } }
html:not(.edad-ok) body { overflow: hidden; }
.edad-caja { display: grid; justify-items: center; gap: 18px; text-align: center; width: min(420px, 100%); }
.edad-logo { width: 120px; color: var(--dorado); }
.edad-titulo { font: 900 clamp(2.4rem, 9vw, 3.6rem)/.9 var(--display); font-variation-settings: 'wdth' 120; text-transform: uppercase; }
.edad-texto { opacity: .8; }
.anilla { position: relative; width: 100%; max-width: 340px; height: 72px; margin-top: 6px; }
.anilla-riel {
  position: absolute; inset: 0; border-radius: 999px;
  background: rgba(244, 235, 221, .08); border: 2px solid rgba(244, 235, 221, .25);
  display: grid; place-items: center;
  font-family: var(--sello); text-transform: uppercase; font-size: 1.15rem; letter-spacing: .05em;
}
.anilla-ayuda { display: inline-flex; align-items: center; gap: .4rem; padding-left: 60px; opacity: .75; }
.anilla-tirador {
  position: absolute; left: 6px; top: 6px; width: 60px; height: 60px;
  border: 0; border-radius: 50%; padding: 0; touch-action: none; cursor: grab;
  background: radial-gradient(circle at 35% 30%, #fff 0, #d9dce1 30%, #8d939c 75%, #c5c9cf 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  display: grid; place-items: center;
}
.anilla-tirador:active { cursor: grabbing; }
.anilla-ojo { width: 26px; height: 18px; border-radius: 50%; background: var(--noche); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6); }
.edad-si { background: none; border: 0; text-decoration: underline; text-underline-offset: 4px; padding: 10px; min-height: 44px; }
.edad-no { font-size: .9rem; opacity: .6; }

/* ---------- Cabecera: cápsula con los colores invertidos de la sección de abajo y el logo en un medallón al centro ---------- */
.cab {
  position: fixed; inset: 24px var(--borde) auto; /* mismo ancho que el contenido */ z-index: 50;
  transition: translate .45s var(--curva);
  view-transition-name: cab;
}
.cab-barra {
  --c-fondo: var(--cab-tinta, var(--tinta));
  --c-texto: var(--cab-bg, var(--bg));
  --c-sombra: 0 10px 30px -12px rgba(0, 0, 0, .45);
  position: relative; height: 64px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 0 10px; border-radius: 999px;
  background: var(--c-fondo); color: var(--c-texto);
  box-shadow: var(--c-sombra), inset 0 0 0 1px color-mix(in srgb, var(--c-texto) 10%, transparent);
  transition: background-color .5s, color .5s;
}
.cab-redes { display: flex; gap: 2px; }
.cab-redes a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; transition: background-color .25s; }
.cab-redes a:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.cab-redes svg { width: 20px; height: 20px; }
.cab-logo {
  display: grid; place-items: center; width: 108px; height: 108px; margin-block: -22px;
  translate: -20px 0;
  border-radius: 50%; background: var(--c-fondo); color: inherit;
  box-shadow: var(--c-sombra), inset 0 0 0 1px color-mix(in srgb, var(--c-texto) 10%, transparent);
  transition: background-color .5s, scale .4s var(--curva);
}
.cab-logo:hover { scale: 1.05; }
.cab-logo .logo-mono { width: 70px; }
.cab-izq { display: flex; align-items: center; justify-content: flex-start; min-width: 0; }
.cab-der { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.cab-nav { display: flex; align-items: center; gap: 10px; }
.cab-nav > ul { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.cab-nav > ul > li > a {
  display: flex; align-items: center; gap: 4px; text-decoration: none; font-weight: 600; font-size: .92rem; letter-spacing: .01em;
  padding: 9px 13px; border-radius: 999px; transition: background-color .25s;
}
.cab-nav > ul > li > a svg { width: 15px; height: 15px; transition: rotate .3s var(--curva); }
.cab-nav > ul > li > a:hover { background: color-mix(in srgb, currentColor 9%, transparent); }
.cab-nav > ul > li > a[aria-current="page"], .cab-padre[data-actual] { background: color-mix(in srgb, currentColor 14%, transparent); }
.cab-grupo { position: relative; }
.cab-sub {
  position: absolute; top: 100%; left: 0; padding-top: 16px; width: 340px;
  translate: 0 8px; opacity: 0; visibility: hidden;
  transition: opacity .25s, translate .35s var(--curva), visibility .25s;
}
.cab-sub ul {
  display: grid; gap: 2px; padding: 8px; border-radius: 22px;
  background: var(--c-fondo); color: var(--c-texto);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .55), inset 0 0 0 1px color-mix(in srgb, var(--c-texto) 10%, transparent);
}
.cab-sub a { display: grid; gap: 2px; padding: 12px 16px; border-radius: 16px; text-decoration: none; transition: background-color .25s; }
.cab-sub a:hover, .cab-sub a[aria-current="page"] { background: color-mix(in srgb, currentColor 10%, transparent); }
.cab-sub strong { font-weight: 700; font-size: .95rem; }
.cab-sub span { font-size: .82rem; line-height: 1.35; opacity: .7; }
.cab-grupo:hover .cab-sub, .cab-grupo:focus-within .cab-sub { opacity: 1; visibility: visible; translate: 0 0; }
.cab-grupo:hover .cab-padre svg, .cab-grupo:focus-within .cab-padre svg { rotate: 180deg; }
.cab-tienda {
  display: inline-flex; align-items: center; gap: .45rem; height: 44px; padding: 0 1.15rem;
  border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .92rem;
  background: var(--c-texto); color: var(--c-fondo); transition: opacity .25s;
}
.cab-tienda:hover { opacity: .85; }
.cab-tienda svg { width: 18px; height: 18px; }
.cab-tienda-nav, .cab-nav-pie, .cab-nav > ul > li.cab-solo-movil { display: none; }
.cab-menu { display: none; background: none; border: 0; width: 44px; height: 44px; place-items: center; border-radius: 50%; color: inherit; }

@media (max-width: 1440px) {
  .cab-nav > ul > li > a { padding-inline: 10px; }
}
@media (max-width: 1360px) {
  .cab { inset: 18px 12px auto; }
  .cab-barra { height: 56px; padding: 0 6px; }
  .cab-redes a { width: 40px; height: 40px; }
  .cab-redes svg { width: 18px; height: 18px; }
  .cab-logo { width: 80px; height: 80px; margin-block: -12px; }
  .cab-logo .logo-mono { width: 52px; }
  .cab-menu { display: grid; }
  /* Menú mobile: lista editorial alineada a la izquierda, arranca bajo la cápsula y la tienda queda abajo */
  .cab-nav {
    position: fixed; inset: 0; z-index: -1; overflow-y: auto; overscroll-behavior: contain;
    flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 28px;
    padding: 112px var(--gutter) max(28px, env(safe-area-inset-bottom));
    background: var(--noche); color: var(--crema);
    clip-path: circle(0 at 40px 38px);
    transition: clip-path .6s var(--curva);
    visibility: hidden;
  }
  .cab-nav.abierto { clip-path: circle(150% at 40px 38px); visibility: visible; }
  .cab-nav > ul { flex-direction: column; align-items: stretch; gap: 0; white-space: normal; counter-reset: menu; }
  .cab-nav > ul > li {
    display: block; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--crema) 14%, transparent);
    opacity: 0; translate: 0 14px; transition: opacity .4s, translate .5s var(--curva);
  }
  .cab-nav.abierto > ul > li { opacity: 1; translate: 0 0; }
  .cab-nav.abierto > ul > li:nth-child(1) { transition-delay: .12s; }
  .cab-nav.abierto > ul > li:nth-child(2) { transition-delay: .18s; }
  .cab-nav.abierto > ul > li:nth-child(3) { transition-delay: .24s; }
  .cab-nav.abierto > ul > li:nth-child(4) { transition-delay: .30s; }
  .cab-nav > ul > li.cab-solo-movil { display: block; }
  .cab-nav > ul > li > a {
    counter-increment: menu; display: flex; align-items: baseline; gap: 14px; padding: 4px 0; border-radius: 0;
    font: 900 clamp(2rem, 9vw, 2.6rem)/1 var(--display); font-variation-settings: 'wdth' 110; text-transform: uppercase;
  }
  .cab-nav > ul > li > a::before { content: '0' counter(menu); font: 700 .8rem/1 var(--texto); letter-spacing: .1em; color: var(--dorado); translate: 0 -.9em; }
  .cab-nav > ul > li > a:hover, .cab-nav > ul > li > a[aria-current="page"], .cab-padre[data-actual] { background: none; }
  .cab-nav > ul > li > a[aria-current="page"], .cab-padre[data-actual] { color: var(--naranja); }
  .cab-padre svg { display: none; }
  .cab-sub { position: static; width: auto; padding: 10px 0 0 34px; translate: none; opacity: 1; visibility: visible; }
  .cab-sub ul { background: none; box-shadow: none; padding: 0; display: grid; gap: 0; color: inherit; border-radius: 0; }
  .cab-sub a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-radius: 0; }
  .cab-sub a::after { content: '\2192'; opacity: .45; transition: translate .3s var(--curva), opacity .3s; }
  .cab-sub a:hover, .cab-sub a[aria-current="page"] { background: none; }
  .cab-sub a:hover::after { opacity: 1; translate: 4px 0; }
  .cab-sub strong { font-size: 1.05rem; font-weight: 600; opacity: .85; }
  .cab-sub a[aria-current="page"] strong { opacity: 1; color: var(--naranja); }
  .cab-sub a[aria-current="page"]::after { opacity: 1; color: var(--naranja); }
  .cab-sub span { display: none; }
  .cab-der .cab-tienda { display: none; }
  .cab-nav-pie { display: grid; gap: 10px; margin-top: auto; }
  .cab-nav-pie p { font-size: .9rem; opacity: .65; }
  .cab-nav .cab-tienda-nav, .cab-nav-wa { display: inline-flex; justify-content: center; --c-texto: var(--crema); --c-fondo: var(--noche); height: 54px; font-size: 1rem; }
  .cab-nav-wa { --c-texto: var(--naranja); }
  body:has(.cab-nav.abierto) .cab-barra, body:has(.cab-nav.abierto) .cab-logo { --c-fondo: var(--crema); --c-texto: var(--noche); }
}

@media (max-width: 1360px) and (max-height: 760px) {
  .cab-nav { padding-top: 100px; gap: 18px; }
  .cab-nav > ul > li { padding: 9px 0; }
  .cab-sub { padding-top: 6px; }
  .cab-sub a { padding: 7px 0; }
  .cab-nav .cab-tienda-nav, .cab-nav-wa { height: 50px; }
}

/* ---------- Intro ---------- */
.intro {
  min-height: 100svh;
  background: var(--noche); color: var(--crema);
  display: grid; align-items: end;
  padding: 116px var(--gutter) 48px; /* fijo: el hero de la portada no se toca */
  position: relative; overflow: hidden;
}
.intro-grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; width: 100%; position: relative; }
.intro-kicker { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; color: var(--dorado); }
.intro-titulo { font: 900 clamp(1.9rem, min(10vw, 14svh), 10.5rem)/.84 var(--display); text-transform: uppercase; }
.intro-titulo .ola { white-space: nowrap; }
.ola {
  display: block;
  font-variation-settings: 'wdth' var(--w);
  animation: estirar 1.6s var(--curva) both;
}
.ola:nth-child(2) { animation-delay: .08s; }
.ola:nth-child(3) { animation-delay: .16s; }
.ola:nth-child(4) { animation-delay: .24s; }
.ola:nth-child(5) { animation-delay: .32s; }
.ola-acento { color: var(--naranja); }
@keyframes estirar { from { --w: 50; opacity: 0; translate: 0 .3em; } }
.intro-pie { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; }
.intro-texto { max-width: 46ch; font-size: 1.125rem; opacity: .85; }
.intro-sello { position: absolute; right: 0; top: 0; font-size: clamp(1.1rem, 2.2vw, 1.9rem); color: var(--dorado); rotate: 8deg; text-align: center; }
@media (max-width: 760px) {
  .intro-sello { position: static; justify-self: start; rotate: -4deg; }
  .intro-grilla { align-content: end; }
}

/* ---------- La carta ---------- */
.carta { position: relative; height: calc(var(--total) * 100svh); }
.carta-pasos { position: absolute; inset: 0; pointer-events: none; }
.carta-paso { height: 100svh; }
.carta-escena {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  background: var(--bg); color: var(--tinta);
  transition: background-color .8s var(--curva), color .8s var(--curva);
}
.carta-cont { position: absolute; left: var(--borde); top: calc(var(--cab-alto) + 12px); font: 900 1rem/1 var(--display); letter-spacing: .1em; }
.carta-total { opacity: .5; }
.carta-nombre {
  position: absolute; left: 0; right: 0; top: calc(var(--cab-alto) + 7svh); z-index: 0;
  padding-inline: var(--borde);
  font: 900 15vw/.82 var(--display);
  font-variation-settings: 'wdth' var(--w);
  text-transform: uppercase; text-align: center; white-space: nowrap;
  color: var(--acento);
  view-transition-name: nombre;
}
.lata {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  height: min(78svh, 720px); aspect-ratio: .6;
  view-transition-name: lata;
}
.lata canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lata-plana { position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: 76%; width: auto; border-radius: 10% / 4%; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.lata.lista .lata-plana { display: none; }
/* Cerveza de línea sin etiqueta plana: el mockup de la lata en lugar de la 3D */
.lata-mockup { position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: 88%; width: auto; max-width: none; border-radius: 6px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); z-index: 1; }
.lata.con-foto canvas, .lata.con-foto .lata-plana { visibility: hidden; }
.carta-info { position: absolute; left: var(--borde); bottom: 40px; width: min(330px, 34vw); display: grid; gap: 14px; justify-items: start; z-index: 3; }
.carta-estilo { font: 800 1.5rem/1.05 var(--display); font-variation-settings: 'wdth' 80; text-transform: uppercase; }
.carta-datos { display: flex; gap: 26px; }
.carta-datos dt { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.carta-datos dd { font: 900 2.2rem/1 var(--display); font-variation-settings: 'wdth' 70; }
.carta-maridaje span { display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.carta-maridaje em { font-style: normal; font-weight: 500; }
.carta-medalla { position: absolute; right: calc(50% - min(26svh, 240px)); top: calc(63% - 30svh); font-size: 1.05rem; color: var(--tinta); rotate: 10deg; z-index: 2; background: var(--bg); }
.carta-indice { position: absolute; right: var(--borde); bottom: 36px; display: grid; gap: 0; text-align: right; z-index: 3; }
.carta-indice a { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 28px; text-decoration: none; font-size: .9rem; font-weight: 500; opacity: .55; transition: opacity .3s; }
.carta-indice a::after { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; transition: background-color .3s, scale .3s; }
.carta-indice a:hover, .carta-indice a[aria-current] { opacity: 1; }
.carta-indice a[aria-current]::after { background: currentColor; scale: 1.4; }
/* Flechas a los costados de la lata para pasar de una cerveza a otra */
.carta-flecha {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 3;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid currentColor; background: color-mix(in srgb, var(--bg) 70%, transparent); color: inherit;
  cursor: pointer; transition: opacity .3s, scale .3s var(--curva), background-color .8s var(--curva);
}
.carta-flecha svg { width: 24px; height: 24px; }
.carta-flecha:hover:not(:disabled) { scale: 1.08; }
.carta-flecha:disabled { opacity: .2; cursor: default; }
.carta-ant { left: calc(50% - min(10svh, 92px) - 130px); }
.carta-sig { right: calc(50% - min(10svh, 92px) - 130px); }
.carta-escena.cambiando .carta-info { opacity: 0; translate: 0 12px; }
.carta-info { transition: opacity .35s, translate .35s; }

@media (max-width: 760px) {
  .carta-nombre { top: calc(var(--cab-alto) + 9svh); translate: none; }
  .carta-nombre { top: calc(var(--cab-alto) + 9svh); }
  .lata { height: 52svh; top: 48%; }
  .carta-info { left: var(--borde); right: var(--borde); width: auto; bottom: 64px; gap: 8px; }
  .carta-info .boton { justify-self: start; }
  .carta-maridaje { display: none; }
  .carta-datos dd { font-size: 1.7rem; }
  .carta-indice { top: auto; bottom: 18px; right: 0; left: 0; translate: none; display: flex; justify-content: center; gap: 0; }
  .carta-indice a { min-width: 28px; min-height: 36px; justify-content: center; }
  .carta-indice a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .carta-medalla { right: var(--borde); top: 36svh; font-size: .85rem; }
  .carta-cont { top: calc(var(--cab-alto) + 2px); }
  .carta-flecha { top: 48%; width: 44px; height: 44px; }
  .carta-flecha svg { width: 20px; height: 20px; }
  .carta-ant { left: 8px; }
  .carta-sig { right: 8px; }
}

/* ---------- Secciones comunes ---------- */
[data-rasgado] { position: relative; z-index: 1; }
[data-rasgado="arriba"], [data-rasgado="ambos"] { margin-top: -18px; padding-top: 18px; }
[data-rasgado="ambos"] { margin-bottom: -18px; padding-bottom: 18px; }
.sec-cab { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: clamp(32px, 5vw, 56px); }
.sec-kicker { font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; color: var(--sec-acento, var(--dorado)); }
.sec-titulo { font: 900 clamp(2.4rem, 6.4vw, 5.6rem)/.9 var(--display); font-variation-settings: 'wdth' 88; text-transform: uppercase; color: var(--titulo, currentColor); }
.sec-bajada { font-size: 1.125rem; max-width: 56ch; opacity: .85; }

/* ---------- Mapa de sabor ---------- */
.mapa { background: var(--crema); color: var(--noche); padding-block: clamp(80px, 10vw, 140px); --sec-acento: #8a6d3e; --titulo: #2B3486; }
.mapa-filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.filtro { min-height: 44px; padding: .5rem 1.1rem; border-radius: 999px; border: 2px solid var(--noche); background: none; font-weight: 700; }
.filtro.activo { background: var(--noche); color: var(--crema); }
.mapa-plano {
  position: relative; aspect-ratio: 16 / 9; margin: 0 0 56px 40px;
  border-left: 2px solid var(--noche); border-bottom: 2px solid var(--noche);
  background:
    repeating-linear-gradient(to right, transparent -9.0909% calc(9.0909% - 1px), rgba(16, 16, 44, .1) calc(9.0909% - 1px) 9.0909%),
    repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), rgba(16, 16, 44, .1) calc(25% - 1px) 25%);
}
.mapa-lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mapa-lineas line { stroke: var(--noche); stroke-width: 1.5; stroke-dasharray: 3 4; }
.mapa-lineas circle { fill: var(--noche); }
.eje { position: absolute; font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
.eje-y { left: -34px; top: 0; writing-mode: vertical-rl; rotate: 180deg; }
.eje-y svg { rotate: 90deg; }
.eje-x { right: 0; bottom: -60px; }
.eje-marca { position: absolute; bottom: -30px; left: calc(var(--x) * 1%); translate: var(--t, -50%) 0; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.ficha-mapa {
  --s: calc(46px + var(--c) * 22px);
  position: absolute; left: calc(var(--x) * 1%); bottom: calc(var(--y) * 1%);
  width: var(--s); height: var(--s);
  translate: calc(-50% + var(--dx, 0px)) calc(50% + var(--dy, 0px));
  border-radius: 50%;
  background: var(--bg); color: var(--tinta);
  display: grid; place-items: center; text-align: center; text-decoration: none;
  box-shadow: 0 0 0 3px var(--crema), 0 10px 24px rgba(16, 16, 44, .25);
  transition: scale .3s var(--curva), opacity .4s, filter .4s;
  z-index: 1;
}
.ficha-mapa.largo .ficha-mapa-nombre { font-size: calc(var(--s) * .12); letter-spacing: 0; }
.ficha-mapa.sin-ibu { outline: 2px dashed var(--noche); outline-offset: 4px; }
.ficha-mapa-nombre { font: 900 calc(var(--s) * .15)/1 var(--display); font-variation-settings: 'wdth' 85; letter-spacing: .02em; text-transform: uppercase; padding: 6px; text-wrap: balance; }
.ficha-mapa-dato {
  position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0;
  white-space: nowrap; background: var(--noche); color: var(--crema);
  font-size: .8rem; font-weight: 500; padding: 6px 10px; border-radius: 6px;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.ficha-mapa:hover, .ficha-mapa:focus-visible { scale: 1.12; z-index: 5; }
.ficha-mapa:hover .ficha-mapa-dato, .ficha-mapa:focus-visible .ficha-mapa-dato { opacity: 1; }
.ficha-mapa.apagada { opacity: .18; filter: grayscale(1); }
.mapa-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: .9rem; }
.ley { display: inline-block; border-radius: 50%; background: var(--noche); box-shadow: 0 0 0 3px var(--aro); }
/* Cuerpo: aro de color en la ficha y en la leyenda (liviano verde agua, medio naranja, pleno rojo) */
.cuerpo-1, .ley-1 { --aro: #3E9C9A; } .cuerpo-2, .ley-2 { --aro: var(--naranja); } .cuerpo-3, .ley-3 { --aro: #B3261E; }
.ficha-mapa[class*="cuerpo-"] { box-shadow: 0 0 0 2px var(--crema), 0 0 0 6px var(--aro), 0 10px 24px rgba(16, 16, 44, .25); }
.ley-1 { width: 14px; height: 14px; } .ley-2 { width: 20px; height: 20px; } .ley-3 { width: 26px; height: 26px; }
@media (max-width: 760px) {
  .mapa-plano { aspect-ratio: 1 / 2; margin-left: 30px; }
  .ficha-mapa { --s: calc(38px + var(--c) * 10px); }
  .ficha-mapa-nombre { font-size: calc(var(--s) * .17); font-variation-settings: "wdth" 78; letter-spacing: 0; padding: 3px; }
}

/* ---------- Premios ---------- */
.premios { background: var(--noche); color: var(--crema); padding-block: clamp(90px, 12vw, 160px); --titulo: var(--dorado); }
.premios-medallero { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-bottom: 48px; }
.premios-cuenta { font-size: 1.15rem; }
.premios-cuenta strong { font: 900 2rem/1 var(--display); color: var(--dorado); }
.muestras { display: flex; gap: 8px; flex-wrap: wrap; }
.muestras li { width: 30px; height: 30px; border-radius: 50%; border: 2px dashed rgba(244, 235, 221, .4); }
.muestras .m-oro { background: #D9B44A; border: 0; }
.muestras .m-plata { background: #C6CBD3; border: 0; }
.muestras .m-bronce { background: #B97A45; border: 0; }
.medallas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px; margin-bottom: 64px; }
.medalla { border: 2px solid rgba(244, 235, 221, .25); border-radius: 10px; padding: 22px 20px; display: grid; gap: 6px; rotate: var(--r); background: rgba(244, 235, 221, .03); transition: rotate .4s var(--curva), border-color .3s; }
.medalla:hover { rotate: 0deg; border-color: var(--dorado); }
.medalla-oro { --metal: #D9B44A; }
.medalla-plata { --metal: #C6CBD3; }
.medalla-bronce { --metal: #D08B52; }
/* Medallita: el ícono en el color del metal, en lugar de la palabra */
.medallita {
  justify-self: start; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px;
  border-radius: 50%; color: var(--metal);
  background: color-mix(in srgb, var(--metal) 16%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--metal) 55%, transparent);
}
.medallita svg { width: 30px; height: 30px; fill: color-mix(in srgb, var(--metal) 30%, transparent); }
.medalla-nombre { font: 900 1.6rem/1 var(--display); font-variation-settings: 'wdth' 80; text-transform: uppercase; }
a.medalla-nombre { text-decoration-color: var(--dorado); text-underline-offset: 5px; }
.medalla-estilo { opacity: .7; font-size: .95rem; }
.cita { max-width: 900px; border-left: 4px solid var(--dorado); padding-left: clamp(18px, 3vw, 36px); margin-bottom: 36px; }
.cita blockquote { font: 700 clamp(1.5rem, 3.4vw, 2.6rem)/1.15 var(--display); font-variation-settings: 'wdth' 92; }
.cita figcaption { margin-top: 14px; opacity: .7; }
.premios-antes { opacity: .8; }

/* ---------- Historia ---------- */
.historia { background: var(--crema); color: var(--noche); padding-block: clamp(90px, 12vw, 160px); --sec-acento: #8a6d3e; --titulo: #A6451B; }
.litros { display: grid; gap: clamp(28px, 4vw, 44px); margin-bottom: 48px; }
.litros li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 36px; border-bottom: 2px solid rgba(16, 16, 44, .15); padding-bottom: clamp(18px, 2.5vw, 28px); }
.litros-num {
  font: 900 min(calc(1.5rem + var(--t) * var(--t) * .62vw), 9rem)/.85 var(--display);
  flex: none;
  font-variation-settings: 'wdth' var(--w);
  white-space: nowrap;
}
.litros li:last-child .litros-num { color: #c26f00; }
.litros p { flex: 1 1 26ch; max-width: 40ch; }
.historia { padding-bottom: clamp(60px, 8vw, 110px); }
.nos-portada { position: relative; margin: 0 0 clamp(56px, 8vw, 100px); border-radius: 6px; overflow: hidden; aspect-ratio: 21 / 9; background: #d9cdb9; }
.nos-portada img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.nos-portada figcaption, .mosaico figcaption {
  position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px;
  background: rgba(16, 16, 44, .72); color: var(--crema); backdrop-filter: blur(6px);
  font: 700 .72rem/1.2 var(--texto); letter-spacing: .14em; text-transform: uppercase;
}
.nos-cab { display: grid; gap: 14px; margin-bottom: clamp(32px, 5vw, 56px); }
.nos-titulo { font: 900 clamp(2rem, 4.6vw, 4rem)/.92 var(--display); font-variation-settings: 'wdth' 88; text-transform: uppercase; color: var(--titulo, currentColor); }

.nos-planta { background: var(--noche); color: var(--crema); padding-block: clamp(80px, 10vw, 140px); --titulo: var(--naranja); }
.mosaico { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 15vw, 210px); gap: clamp(10px, 1.4vw, 18px); }
.mosaico figure { position: relative; overflow: hidden; border-radius: 6px; background: #1d1d3d; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--curva); }
.mosaico figure:hover img { scale: 1.04; }
.m-a { grid-column: 1 / 6; grid-row: 1 / 4; }
.m-b { grid-column: 6 / 13; grid-row: 1 / 3; }
.m-c { grid-column: 6 / 9; grid-row: 3 / 5; }
.m-d { grid-column: 9 / 13; grid-row: 3 / 5; }
.m-e { grid-column: 1 / 6; grid-row: 4 / 5; }
.m-a img { object-position: 50% 30%; }

.nos-latas { background: var(--crema); color: var(--noche); padding-block: clamp(80px, 10vw, 140px); --sec-acento: #8a6d3e; --titulo: #A6451B; }
.nos-latas-grilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .75fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 32px); align-items: center; }
.nos-latas-texto { display: grid; gap: 16px; justify-items: start; }
.nos-latas-texto .boton { margin-top: 10px; }
.nos-latas figure { overflow: hidden; border-radius: 6px; }
.nos-latas img { width: 100%; height: 100%; object-fit: cover; }
.nos-latas-a { aspect-ratio: 2 / 3; rotate: -2deg; box-shadow: 0 24px 50px -20px rgba(16, 16, 44, .5); }
.nos-latas-b { aspect-ratio: 4 / 5; rotate: 1.5deg; box-shadow: 0 24px 50px -20px rgba(16, 16, 44, .5); }

.nos-ronda { background: var(--noche); color: var(--crema); padding-block: clamp(80px, 10vw, 140px) clamp(56px, 6vw, 90px); --titulo: var(--crema); }
.ladrillos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(110px, 13vw, 190px); gap: clamp(10px, 1.4vw, 18px); }
.ladrillos li { position: relative; overflow: hidden; border-radius: 6px; background: #1d1d3d; }
.ladrillos img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--curva); }
.ladrillos li:hover img { scale: 1.04; }
.l-a { grid-column: 1 / 8; grid-row: span 2; }
.l-b, .l-c { grid-column: 8 / 13; }
.l-d { grid-column: 1 / 7; grid-row: span 2; }
.l-e { grid-column: 7 / 13; grid-row: span 2; }
.nos-ronda-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: clamp(32px, 5vw, 56px); font-size: 1.15rem; }

@media (max-width: 960px) {
  .mosaico { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .mosaico figure { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; }
  .mosaico .m-e { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
  .nos-latas-grilla { grid-template-columns: 1fr 1fr; }
  .nos-latas-texto { grid-column: 1 / -1; margin-bottom: 16px; }
  .nos-portada { aspect-ratio: 4 / 3; }
  .ladrillos { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .ladrillos li { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; }
  .ladrillos .l-a { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
}
@media (max-width: 760px) {
  .litros-num { font-size: calc(1.8rem + var(--t) * var(--t) * .9vw); font-variation-settings: 'wdth' 60; }
}

/* ---------- Dónde tomar ---------- */
.donde { background: var(--noche); color: var(--crema); padding-block: clamp(90px, 12vw, 160px) clamp(56px, 7vw, 96px); --titulo: var(--naranja); }
/* Barra: filtros por zona y buscador */
.bares-barra { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.bares-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.bares-filtro {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: .45rem 1.05rem;
  border-radius: 999px; border: 1.5px solid rgba(244, 235, 221, .28); background: none; color: inherit;
  font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.bares-filtro span { font-size: .8rem; font-weight: 500; opacity: .65; }
.bares-filtro:hover { border-color: var(--crema); }
.bares-filtro[aria-pressed="true"] { background: var(--crema); border-color: var(--crema); color: var(--noche); }
.bares-filtro:focus-visible, .bares-buscar input:focus-visible, .bar-accion:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.bares-buscar { position: relative; flex: 0 1 320px; }
.bares-buscar svg.lucide { position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; opacity: .6; pointer-events: none; }
.bares-buscar input {
  width: 100%; min-height: 46px; padding: .6rem 1rem .6rem 44px; border-radius: 999px;
  border: 1.5px solid rgba(244, 235, 221, .28); background: rgba(244, 235, 221, .06); color: var(--crema); font: inherit; font-size: .95rem;
}
.bares-buscar input::placeholder { color: rgba(244, 235, 221, .5); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Grilla de tarjetas */
.bares-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.bar-card {
  display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 20px;
  background: rgba(244, 235, 221, .05); border: 1px solid rgba(244, 235, 221, .14);
  transition: border-color .3s, background .3s, translate .4s var(--curva);
}
.bar-card:hover { border-color: rgba(170, 141, 94, .7); background: rgba(244, 235, 221, .08); translate: 0 -3px; }
.bar-card[hidden] { display: none; }
.bar-cab { display: flex; gap: 16px; align-items: center; }
.bar-logo { flex: none; width: 64px; height: 64px; border-radius: 16px; object-fit: contain; background: #fff; }
.bar-inicial {
  display: grid; place-items: center; background: var(--pie); color: var(--naranja); border: 1px solid rgba(244, 235, 221, .14);
  font: 900 1.9rem/1 var(--display); font-variation-settings: 'wdth' 80;
}
.bar-nombre { font: 900 1.55rem/1.02 var(--display); font-variation-settings: 'wdth' 70; text-transform: uppercase; overflow-wrap: anywhere; }
.bar-lugar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font-weight: 700; font-size: .95rem; }
.bar-zona { padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(170, 141, 94, .6); color: var(--dorado); font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.bar-desc { font-size: .97rem; line-height: 1.55; opacity: .85; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.bar-dir { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; opacity: .75; }
.bar-dir svg.lucide { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.bar-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.bar-accion {
  display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: .45rem 1rem; border-radius: 999px;
  border: 1.5px solid rgba(244, 235, 221, .3); color: var(--crema); text-decoration: none; font-weight: 700; font-size: .92rem;
  transition: background .2s, border-color .2s, color .2s;
}
.bar-accion svg.lucide { width: 16px; height: 16px; }
.bar-accion:hover { border-color: var(--crema); background: rgba(244, 235, 221, .08); }
.bar-accion-pri { background: var(--naranja); border-color: var(--naranja); color: var(--noche); }
.bar-accion-pri:hover { background: var(--crema); border-color: var(--crema); color: var(--noche); }
/* Invitación a sumarse, al final de la grilla */
.bar-card-sumar { justify-content: center; align-items: flex-start; border: 1.5px dashed rgba(243, 146, 0, .55); background: rgba(243, 146, 0, .06); }
.bar-card-sumar:hover { border-color: var(--naranja); background: rgba(243, 146, 0, .1); }
.bar-card-sumar > svg.lucide { width: 34px; height: 34px; color: var(--naranja); }
.bar-card-sumar .bar-nombre { color: var(--naranja); }
.bar-card-sumar p { opacity: .85; font-size: .97rem; }
.bar-card-sumar .bar-accion { margin-top: 4px; }
.bares-vacio { margin-top: 24px; opacity: .85; }
/* Bares cargados a mano: solo nombre, barrio y zona */
.bares-mas { margin-top: clamp(44px, 6vw, 72px); }
.bares-mas[hidden] { display: none; }
.bares-mas-titulo { margin-bottom: 18px; font: 900 clamp(1.4rem, 2.6vw, 2rem)/1 var(--display); font-variation-settings: 'wdth' 70; text-transform: uppercase; color: var(--dorado); }
.bares-compactos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.bar-mini[hidden] { display: none; }
.bar-mini a {
  display: flex; align-items: center; gap: 14px; height: 100%; padding: 12px 16px 12px 12px; border-radius: 16px; text-decoration: none;
  background: rgba(244, 235, 221, .04); border: 1px solid rgba(244, 235, 221, .12); transition: border-color .3s, background .3s;
}
.bar-mini a:hover { border-color: rgba(170, 141, 94, .7); background: rgba(244, 235, 221, .08); }
.bar-mini a:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.bar-mini .bar-inicial { flex: none; width: 44px; height: 44px; border-radius: 12px; font-size: 1.35rem; }
.bar-mini-txt { display: grid; flex: 1; min-width: 0; }
.bar-mini-txt strong { font: 900 1.15rem/1.1 var(--display); font-variation-settings: 'wdth' 75; text-transform: uppercase; }
.bar-mini-txt span { font-size: .86rem; opacity: .7; }
.bar-mini a > svg.lucide { flex: none; width: 18px; height: 18px; opacity: .45; transition: opacity .2s, color .2s; }
.bar-mini a:hover > svg.lucide { opacity: 1; color: var(--naranja); }
.bares-limpiar { background: none; border: 0; padding: 0; color: var(--naranja); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
@media (max-width: 760px) {
  .bares-buscar { flex-basis: 100%; }
  .bares-filtros { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .bares-filtro { flex: none; }
  .bar-card { padding: 18px; }
}

/* ---------- Sumá tu bar ---------- */
.sumar { scroll-margin-top: calc(var(--cab-alto) + 10px); background: var(--noche); color: var(--crema); padding: 0 0 clamp(80px, 10vw, 140px); }
.sumar-grilla { padding: clamp(28px, 4vw, 56px); border-radius: 28px; background: var(--pie); border: 1px solid rgba(244, 235, 221, .12); }
.sumar-grilla { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.sumar-titulo { font: 900 clamp(2rem, 4.4vw, 3.4rem)/1 var(--display); font-variation-settings: 'wdth' 70; text-transform: uppercase; color: var(--naranja); }
.sumar-bajada { margin-top: 16px; max-width: 42ch; opacity: .85; }
.sumar-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sumar-campo { display: grid; gap: 6px; align-content: start; font-weight: 700; font-size: .92rem; }
.sumar-campo small { font-weight: 400; opacity: .7; }
.sumar-ancho, .sumar-aviso, .sumar-boton { grid-column: 1 / -1; }
.sumar-form input, .sumar-form select, .sumar-form textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border-radius: 10px;
  border: 1.5px solid rgba(244, 235, 221, .3); background: rgba(16, 16, 44, .45); color: var(--crema);
  font: 400 1rem/1.4 var(--texto);
}
.sumar-form textarea { resize: vertical; min-height: 96px; }
.sumar-form select option { background: var(--noche); }
.sumar-form input[type=file] { padding: 10px; }
.sumar-form input::placeholder, .sumar-form textarea::placeholder { color: rgba(244, 235, 221, .45); }
.sumar-form :is(input, select, textarea):focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; border-color: transparent; }
.sumar-form [aria-invalid] { border-color: #FF8A7A; }
.sumar-error { color: #FFB4A8; font-weight: 500; font-size: .88rem; }
.sumar-aviso { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 10px; background: rgba(255, 138, 122, .14); color: #FFD3CC; font-weight: 500; }
.sumar-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sumar-boton { justify-self: start; background: var(--naranja); color: var(--noche); border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.sumar-listo { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border-radius: 14px; background: rgba(244, 235, 221, .08); border: 1.5px solid rgba(244, 235, 221, .2); }
.sumar-listo svg.lucide { width: 32px; height: 32px; flex: none; color: var(--naranja); }
.sumar-listo strong { font-size: 1.2rem; }
@media (max-width: 860px) {
  .sumar-grilla, .sumar-form { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Barril ---------- */
.barril { background: var(--naranja); color: var(--noche); padding-block: clamp(90px, 12vw, 150px); --sec-acento: var(--noche); }
.barril-grilla { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(40px, 6vw, 90px); align-items: start; }
.zonas { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0; }
.zona { min-height: 48px; padding: .6rem 1.2rem; border-radius: 999px; border: 2px solid var(--noche); background: none; font-weight: 700; transition: background-color .2s, color .2s; }
.zona[aria-checked="true"] { background: var(--noche); color: var(--naranja); }
.entrega { background: var(--noche); color: var(--crema); border-radius: 14px; padding: clamp(22px, 3vw, 34px); min-height: 160px; display: grid; gap: 12px; align-content: center; }
.entrega-vacia { opacity: .6; }
.entrega-dia { font: 900 clamp(2.2rem, 5.5vw, 4.2rem)/.9 var(--display); font-variation-settings: 'wdth' 90; text-transform: uppercase; color: var(--naranja); }
.entrega .boton { justify-self: start; background: var(--naranja); color: var(--noche); }
.condiciones { display: grid; gap: 18px; }
.condiciones li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.condiciones svg.lucide { width: 24px; height: 24px; margin-top: 2px; }
@media (max-width: 860px) { .barril-grilla { grid-template-columns: 1fr; } }

/* ---------- Pie ---------- */
.pie { background: var(--pie); color: var(--crema); padding: clamp(70px, 9vw, 110px) var(--gutter) 28px; }
.pie-marca { display: grid; justify-items: center; gap: 18px; text-align: center; margin-bottom: clamp(48px, 6vw, 72px); }
.pie-logo { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; color: var(--dorado); box-shadow: inset 0 0 0 1px rgba(170, 141, 94, .45); transition: scale .4s var(--curva); }
.pie-logo:hover { scale: 1.05; }
.pie-logo .logo-mono { width: 86px; }
.pie-lema { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.pie-grilla { width: min(calc(var(--ancho) - 2 * var(--gutter)), 100%); margin: 0 auto 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.pie-col { padding-top: 24px; border-top: 1px solid rgba(170, 141, 94, .35); }
.pie-tit { font: 900 1.1rem/1 var(--display); font-variation-settings: 'wdth' 110; text-transform: uppercase; color: var(--dorado); margin-bottom: 16px; }
.pie p { margin-bottom: 8px; }
.pie a { text-underline-offset: 4px; }
.pie-indep {
  display: block; width: 84px; aspect-ratio: 480 / 511; margin-top: 18px; background: var(--dorado);
  -webkit-mask: url(../img/independiente.png) center / contain no-repeat;
  mask: url(../img/independiente.png) center / contain no-repeat;
}
.pie-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.pie-links a, .pie-contacto a { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; text-decoration: none; opacity: .85; transition: opacity .25s; }
.pie-links a:hover, .pie-contacto a:hover { opacity: 1; text-decoration: underline; }
.pie-contacto svg { width: 18px; height: 18px; color: var(--dorado); }
.pie-legal { width: min(calc(var(--ancho) - 2 * var(--gutter)), 100%); margin: 0 auto; border-top: 1px solid rgba(244, 235, 221, .2); padding-top: 22px; display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; font-size: .85rem; opacity: .75; }
.pie-legal p { margin: 0; }
@media (max-width: 960px) { .pie-grilla { grid-template-columns: 1fr 1fr; } .pie-col:first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .pie-grilla { grid-template-columns: 1fr; } .pie-legal { justify-content: center; text-align: center; } }

/* ---------- Ficha ---------- */
.pag-ficha .ficha-cabeza { padding: calc(var(--cab-alto) + 24px) var(--borde) clamp(60px, 8vw, 110px); position: relative; overflow: hidden; }
.migas { display: flex; align-items: center; gap: 6px; font-size: .9rem; opacity: .8; }
.ficha-nombre {
  font: 900 15vw/.82 var(--display);
  font-variation-settings: 'wdth' var(--w);
  text-transform: uppercase; white-space: nowrap; color: var(--acento);
  margin: 18px 0 28px;
  view-transition-name: nombre;
}
.ficha-grilla { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; width: min(calc(var(--ancho) - 2 * var(--gutter)), 100%); margin-inline: auto; }
.lata-ficha { position: relative; left: auto; top: auto; translate: none; height: min(76svh, 680px); justify-self: center; cursor: grab; touch-action: pan-y; }
.lata-ficha:active { cursor: grabbing; }
.lata-ayuda { position: absolute; bottom: 0; left: 50%; translate: -50% 0; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; font-size: .85rem; opacity: 0; transition: opacity .4s; }
.lata.lista .lata-ayuda { opacity: .7; }
.ficha-datos { display: grid; gap: 26px; }
.ficha-estilo { font: 800 clamp(1.5rem, 3vw, 2.2rem)/1 var(--display); font-variation-settings: 'wdth' 85; text-transform: uppercase; }
.ficha-tecnica { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 40px; }
.ficha-tecnica dt { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.ficha-tecnica dd { font: 900 clamp(1.6rem, 3vw, 2.4rem)/1 var(--display); font-variation-settings: 'wdth' 70; }
.perfil { display: grid; gap: 10px; max-width: 460px; }
.perfil li { display: grid; grid-template-columns: 6.5em 1fr 6.5em; align-items: center; gap: 14px; font-size: .95rem; }
.perfil-tit { font-weight: 700; }
.perfil-barra { height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--tinta) 18%, transparent); position: relative; overflow: hidden; }
.perfil-barra::after { content: ''; position: absolute; inset: 0; width: calc(var(--v) * 100%); background: var(--tinta); border-radius: inherit; }
.perfil-val { opacity: .8; }
.ficha-desc { max-width: 60ch; }
.ficha-maridaje span { display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 2px; }
.ficha-maridaje { font: 700 1.3rem/1.2 var(--display); font-variation-settings: 'wdth' 95; }
.ficha-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.ficha-medalla { position: absolute; right: var(--borde); top: calc(var(--cab-alto) + 24px); font-size: clamp(.9rem, 1.6vw, 1.2rem); color: var(--tinta); rotate: 8deg; text-align: center; }
.ficha-premios > span { display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 8px; }
.ficha-premios ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ficha-premios li { display: flex; align-items: center; gap: 8px; }
.ficha-premios svg.lucide { width: 18px; height: 18px; flex: none; }
@media (max-width: 860px) {
  .ficha-grilla { grid-template-columns: 1fr; }
  .lata-ficha { height: 60svh; }
  .ficha-tecnica { grid-template-columns: repeat(2, auto); }
  .ficha-medalla { position: static; margin-top: 28px; }
}

.afiche { background: var(--crema); color: var(--noche); padding: clamp(80px, 10vw, 130px) var(--borde); }
.afiche-grilla { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 70px); align-items: center; width: min(calc(var(--ancho) - 2 * var(--gutter)), 100%); margin-inline: auto; }
.afiche-img { rotate: -1.5deg; box-shadow: 0 30px 60px rgba(16, 16, 44, .25); }
.afiche-img img { width: 100%; }
.afiche-texto { display: grid; gap: 18px; --sec-acento: #8a6d3e; }
.relato { font: 600 clamp(1.15rem, 1.8vw, 1.45rem)/1.4 var(--texto); }
@media (max-width: 860px) { .afiche-grilla { grid-template-columns: 1fr; } }
.afiche-solo { grid-template-columns: minmax(0, 760px); justify-content: center; }

.pareja { background: var(--bg); color: var(--tinta); padding: clamp(70px, 9vw, 110px) var(--borde); text-align: center; display: grid; gap: 14px; justify-items: center; --sec-acento: var(--acento); }
.pareja-texto { font: 800 clamp(1.6rem, 4vw, 3rem)/1.1 var(--display); font-variation-settings: 'wdth' 85; max-width: 26ch; }
.pareja-texto a { color: var(--acento); text-underline-offset: 6px; }
.pareja-texto em { display: block; font-style: normal; font-weight: 500; font-size: .55em; margin-top: 14px; opacity: .8; }

.vecinas { display: grid; grid-template-columns: 1fr 1fr; container-type: inline-size; }
/* Cada mitad lleva el margen de la página del lado de afuera; 100cqw es el ancho de .vecinas. */
.vecina { --borde: max(var(--gutter), calc((100cqw - var(--ancho)) / 2 + var(--gutter))); }
.vecina { background: var(--bg); color: var(--tinta); padding: clamp(40px, 6vw, 80px) var(--gutter); padding-left: var(--borde); text-decoration: none; display: grid; gap: 10px; transition: padding .4s var(--curva); }
.vecina-sig { text-align: right; justify-items: end; padding-left: var(--gutter); padding-right: var(--borde); }
.vecina-dir { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; }
.vecina-nombre { font: 900 clamp(1.8rem, 5vw, 4.4rem)/.9 var(--display); font-variation-settings: 'wdth' 60; text-transform: uppercase; color: var(--acento); transition: font-variation-settings .5s var(--curva); }
.vecina:hover .vecina-nombre { font-variation-settings: 'wdth' 120; }
@media (max-width: 600px) { .vecinas { grid-template-columns: 1fr; } .vecina-sig { text-align: left; justify-items: start; } }

/* ---------- View Transitions ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; }
::view-transition-group(nombre), ::view-transition-group(lata) { animation-duration: .7s; animation-timing-function: var(--curva); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}

@media (min-width: 761px) {
  .carta-escena .lata { top: 64%; height: min(63svh, 600px); }
}
.ficha-mapa.dato-izq .ficha-mapa-dato { left: auto; right: 0; translate: 0 0; }
.ficha-mapa.dato-der .ficha-mapa-dato { left: 0; translate: 0 0; }
@media (max-width: 760px) {
  .intro-titulo { font-size: 13vw; }
  .intro-titulo .ola { font-variation-settings: 'wdth' min(var(--w), 92); }
}

/* ---------- Páginas separadas ---------- */
.solo-lector { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pagina { min-height: 100svh; padding-top: calc(var(--cab-alto) + clamp(56px, 7vw, 110px)); }
.intro { min-height: 88svh; }

/* ---------- Puertas de la portada ---------- */
.puertas ol { list-style: none; margin: 0; padding: 0; }
.puertas li { background: var(--p-bg); color: var(--p-tinta); border-top: 1px solid color-mix(in srgb, var(--p-tinta) 18%, transparent); }
.puerta {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  column-gap: clamp(16px, 3vw, 48px); row-gap: 6px;
  padding: clamp(22px, 3.4vw, 44px) var(--borde);
  color: inherit; text-decoration: none; position: relative; overflow: hidden;
}
.puerta-num { font: 900 clamp(.9rem, 1.3vw, 1.1rem)/1 var(--display); letter-spacing: .12em; opacity: .7; align-self: start; padding-top: .6em; }
.puerta-nombre {
  font: 900 clamp(2.5rem, 7vw, 6.5rem)/.88 var(--display); text-transform: uppercase;
  font-variation-settings: 'wdth' 80; transition: font-variation-settings .6s var(--curva);
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}
.puerta-bajada { grid-column: 2; font-size: clamp(.95rem, 1.2vw, 1.15rem); opacity: .8; max-width: 52ch; }
svg.lucide.puerta-flecha, .puerta-flecha { grid-column: 3; stroke-width: 1.6; grid-row: 1 / span 2; width: clamp(32px, 4vw, 56px); height: clamp(32px, 4vw, 56px); transition: rotate .5s var(--curva), translate .5s var(--curva); }
.puerta:hover .puerta-nombre, .puerta:focus-visible .puerta-nombre { font-variation-settings: 'wdth' 130; }
.puerta:hover .puerta-flecha, .puerta:focus-visible .puerta-flecha { rotate: 45deg; translate: 4px 0; }
.puerta:focus-visible { outline: 3px solid currentColor; outline-offset: -8px; }
@media (max-width: 760px) {
  .puerta { grid-template-columns: minmax(0, 1fr) auto; }
  .puerta-num { grid-column: 1 / -1; padding-top: 0; }
  .puerta-nombre { font-size: clamp(2rem, 10.5vw, 3rem); }
  .puerta-bajada { grid-column: 1; }
  svg.lucide.puerta-flecha, .puerta-flecha { grid-column: 2; grid-row: 2 / span 2; }
}
@media (prefers-reduced-motion: reduce) {
  .puerta-nombre, .puerta-flecha { transition: none; }
}

/* ---------- Se Enturbia: ediciones especiales ---------- */
.enturbia {
  background:
    radial-gradient(60% 40% at 15% 8%, rgba(240, 60, 230, .18), transparent 70%),
    radial-gradient(50% 35% at 90% 30%, rgba(95, 224, 204, .12), transparent 70%),
    var(--noche);
  color: var(--crema); padding-bottom: clamp(80px, 10vw, 140px); --titulo: #F27AE6;
}
/* Título con el filtro de disponibilidad a la derecha */
.enturbia-titulo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; }
.enturbia-filtros { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: .4rem; }
.enturbia-filtro:disabled { opacity: .35; cursor: default; }
.enturbia-filtro:disabled:hover { border-color: rgba(244, 235, 221, .28); }
.enturbia-filtro.filtro-disponible::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; }
.enturbia-filtro.filtro-ultimos[aria-pressed="true"] { background: var(--naranja); border-color: var(--naranja); }
.especial[hidden] { display: none; }
@media (max-width: 760px) {
  .enturbia-filtros { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .enturbia-filtro { flex: none; }
}
.enturbia-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(20px, 3vw, 36px); }
.especial a { display: grid; grid-template-rows: auto 1fr; height: 100%; text-decoration: none; background: var(--bg); color: var(--tinta); border-radius: 6px; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); transition: translate .5s var(--curva), rotate .5s var(--curva), box-shadow .5s var(--curva); }
.especial:nth-child(odd) a { rotate: -.8deg; }
.especial:nth-child(even) a { rotate: .8deg; }
.especial a:hover, .especial a:focus-visible { rotate: 0deg; translate: 0 -8px; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.especial-img { display: block; overflow: hidden; aspect-ratio: 384 / 506; }
.especial-img img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--curva), filter .8s var(--curva); filter: saturate(.85) contrast(.95); }
.especial a:hover .especial-img img { scale: 1.05; filter: none; }
.especial-pie { display: grid; gap: 6px; padding: 18px 18px 20px; align-content: start; }
.especial-num { font-weight: 700; font-size: .8rem; letter-spacing: .16em; opacity: .7; }
.especial-nombre { font: 900 clamp(1.5rem, 2.4vw, 1.9rem)/.92 var(--display); font-variation-settings: 'wdth' 75; text-transform: uppercase; color: var(--acento); transition: font-variation-settings .5s var(--curva); }
.especial a:hover .especial-nombre { font-variation-settings: 'wdth' 100; }
.especial-dato { font-size: .95rem; }
.especial-marca { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 4px; padding: .2rem .6rem; border: 1.5px solid currentColor; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.enturbia-cierre { margin-top: clamp(56px, 7vw, 90px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(244, 235, 221, .2); padding-top: 32px; }
.enturbia-cierre p { font: 800 clamp(1.3rem, 2.4vw, 1.8rem)/1.15 var(--display); font-variation-settings: 'wdth' 90; max-width: 34ch; }

.lata-foto { justify-self: center; width: min(100%, 440px); rotate: -2deg; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .4); }
.ficha-etiquetas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: -10px; }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: .3rem .8rem; border: 1.5px solid currentColor; border-radius: 999px; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 860px) { .lata-foto { width: min(100%, 360px); } }
@media (prefers-reduced-motion: reduce) {
  .especial a, .especial-img img, .especial-nombre { transition: none; }
  .especial a { rotate: none !important; }
}

/* ---------- Birra del mes y sellos ---------- */
.del-mes { background: var(--bg); color: var(--tinta); padding: clamp(56px, 7vw, 110px) var(--borde); overflow: hidden; }
.del-mes-grilla { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(28px, 4vw, 64px); }
.del-mes-grilla.con-especial { grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, .6fr); }
.del-mes-texto { display: grid; gap: 18px; justify-items: start; }
.del-mes .sec-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--acento); }
.del-mes .sec-kicker svg { width: 18px; height: 18px; }
.del-mes-nombre { font: 900 clamp(3rem, 8vw, 7.5rem)/.84 var(--display); font-variation-settings: 'wdth' 80; text-transform: uppercase; color: var(--acento); }
.del-mes-estilo { font: 800 clamp(1.1rem, 1.8vw, 1.5rem)/1.1 var(--display); font-variation-settings: 'wdth' 85; text-transform: uppercase; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.del-mes-bajada { max-width: 46ch; font-size: 1.1rem; opacity: .9; }
.del-mes-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.del-mes-lata { position: relative; left: auto; top: auto; translate: none; height: min(70svh, 600px); justify-self: center; cursor: grab; touch-action: pan-y; view-transition-name: none; }
.del-mes-foto { width: min(100%, 360px); }
.del-mes-especial { display: grid; gap: 14px; background: var(--bg); color: var(--tinta); border-radius: 8px; overflow: hidden; text-decoration: none; box-shadow: 0 24px 50px rgba(0, 0, 0, .3); rotate: 2deg; transition: rotate .5s var(--curva); }
.del-mes-especial:hover { rotate: 0deg; }
.del-mes-especial img { width: 100%; height: auto; aspect-ratio: 384 / 506; object-fit: cover; }
.del-mes-especial-txt { display: grid; gap: 6px; padding: 0 18px 20px; }
.del-mes-especial-txt strong { font: 900 1.6rem/.92 var(--display); font-variation-settings: 'wdth' 75; text-transform: uppercase; color: var(--acento); }
.del-mes-especial-bajada { font-size: .92rem; opacity: .85; }
@media (max-width: 960px) {
  .del-mes-grilla, .del-mes-grilla.con-especial { grid-template-columns: minmax(0, 1fr); }
  .del-mes-lata { height: 56svh; }
  .del-mes-especial { max-width: 340px; justify-self: center; }
}

.etiqueta-mes, .marca-mes { background: var(--acento); border-color: var(--acento); color: var(--bg); }
.etiqueta-agotada, .marca-agotada { border-style: dashed; opacity: .85; }
.etiqueta svg, .especial-marca svg { width: 14px; height: 14px; }
.carta-sellos { display: flex; flex-wrap: wrap; gap: 8px; }
.carta-sellos:empty { display: none; }
.carta-sellos .etiqueta { font-size: .72rem; padding: .2rem .6rem; }
.especial.agotada .especial-img img { filter: grayscale(.7); }

/* Disponibilidad de las especiales: Disponible (punto verde), Últimos tubos (naranja sobre la lata), Próximamente (lata apagada) */
.especial-img { position: relative; }
.especial-estado { position: absolute; z-index: 1; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: .35rem .75rem; border-radius: 999px; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.especial-estado svg { width: 14px; height: 14px; }
.estado-ultimos { background: var(--naranja); color: var(--noche); }
.estado-proximamente { background: rgba(16, 16, 44, .82); color: var(--crema); border: 1.5px dashed rgba(244, 235, 221, .7); backdrop-filter: blur(4px); }
.especial.especial-proximamente .especial-img img { filter: grayscale(.9) brightness(.7); }
.especial.especial-proximamente a:hover .especial-img img { filter: grayscale(.4) brightness(.9); }
.marca-disponible svg, .etiqueta-disponible svg { display: none; }
.marca-disponible::before, .etiqueta-disponible::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: latido 2.2s infinite; }
.etiqueta-ultimos, .marca-ultimos { background: var(--naranja); border-color: var(--naranja); color: var(--noche); }
.etiqueta-proximamente, .marca-proximamente { border-style: dashed; }
@keyframes latido { 70% { box-shadow: 0 0 0 7px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
@media (prefers-reduced-motion: reduce) { .marca-disponible::before, .etiqueta-disponible::before { animation: none; } }
.ficha-mapa.destacada { outline: 3px solid var(--acento); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .del-mes-especial { transition: none; rotate: none; } }