/* Botas Los Potrillos — sitio
   Base blanca y limpia, una sola familia tipográfica (Archivo, con su eje de
   ancho: condensada en títulos, normal en texto). El rojo del logo es el acento;
   la cuadrícula celeste del letrero aparece solo detrás de imágenes clave. */

:root {
  --rojo: #d8261c;
  --rojo-oscuro: #b51e15;
  --tinta: #1c1c1c;
  --texto-2: #55595d;
  --borde: #e4e6e7;
  --tinte: #f4f7f6;
  --cuadro: #c6e6e2;
  --linea: #86a9c0;
  --noche: #17232d;
  --noche-2: #22323f;
  --blanco: #ffffff;

  --fuente: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --angosta: 72%;

  --radio: 10px;
  --radio-s: 6px;
  --ancho: 76rem;
  --sombra: 0 1px 2px rgba(23,35,45,.06), 0 8px 24px -12px rgba(23,35,45,.18);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; border-radius: 2px; }

.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 20; background: var(--rojo); color: var(--blanco); padding: .5rem 1rem; }
.saltar:focus { top: 1rem; }

/* Títulos: Archivo condensada y pesada */
.hero__titulo, .titulo-seccion, .titulo-pagina, .destacado__artista, .evento__artista,
.cartel__artista, .boleto__nombre, .boleto__importe, .poster__artista, .categoria__nombre,
.sucursal__nombre, .pie__marca, .cartel__dia {
  font-stretch: var(--angosta);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
}

.cuadricula {
  background-color: var(--cuadro);
  background-image:
    linear-gradient(rgba(134,169,192,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(134,169,192,.5) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ---------- Cabecera flotante ---------- */
:root { --alto-cab: 6.5rem; }
.cabecera { position: fixed; top: 0; left: 0; right: 0; z-index: 30; padding: .85rem 1rem 0; pointer-events: none; }
.cabecera__barra {
  pointer-events: auto;
  width: min(100%, var(--ancho)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem .7rem .5rem 1.5rem;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 20px -8px rgba(23,35,45,.18);
  transition: box-shadow .3s ease, background-color .3s ease, transform .3s ease;
  animation: bajar .6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes bajar { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.cabecera--scroll .cabecera__barra {
  background: rgba(255,255,255,.9);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(23,35,45,.06), 0 18px 40px -14px rgba(23,35,45,.3);
}
.marca { display: block; flex-shrink: 0; }
.marca__logo { height: 66px; width: auto; filter: drop-shadow(0 2px 2px rgba(23,35,45,.12)); transition: transform .3s ease; }
.marca:hover .marca__logo { transform: rotate(-2deg) scale(1.03); }

.menu { display: flex; align-items: center; gap: .25rem; font-weight: 600; font-size: .96rem; }
.menu a { position: relative; text-decoration: none; color: var(--texto-2); padding: .55rem .9rem; border-radius: 999px; transition: color .2s ease, background-color .2s ease; }
.menu a:hover { color: var(--tinta); background: rgba(23,35,45,.05); }
.menu a[aria-current="page"] { color: var(--tinta); background: rgba(216,38,28,.08); }
.menu .menu__cta {
  margin-left: .5rem; color: var(--blanco); padding: .6rem 1.2rem;
  background: linear-gradient(180deg, #e8392f, var(--rojo));
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 14px -4px rgba(216,38,28,.55);
}
.menu .menu__cta:hover { color: var(--blanco); background: linear-gradient(180deg, var(--rojo), var(--rojo-oscuro)); transform: translateY(-1px); }

.menu-boton { display: none; width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(23,35,45,.06); cursor: pointer; position: relative; }
.menu-boton__icono, .menu-boton__icono::before, .menu-boton__icono::after {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin-left: -9px; background: var(--tinta); border-radius: 2px; content: "";
  transition: transform .25s ease, opacity .2s ease;
}
.menu-boton__icono::before { transform: translateY(-6px); margin-left: 0; left: 0; }
.menu-boton__icono::after { transform: translateY(6px); margin-left: 0; left: 0; }
.cabecera--abierta .menu-boton__icono { background: transparent; }
.cabecera--abierta .menu-boton__icono::before { transform: rotate(45deg); }
.cabecera--abierta .menu-boton__icono::after { transform: rotate(-45deg); }

/* El contenido empieza debajo de la barra; la primera sección se extiende detrás de ella. */
main { padding-top: var(--alto-cab); }
main > section:first-child { margin-top: calc(-1 * var(--alto-cab)); padding-top: calc(var(--alto-cab) + clamp(2rem, 5vw, 3.5rem)); }

/* ---------- Botones ---------- */
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent;
  font: 600 1rem/1.2 var(--fuente); text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.boton--rojo { background: var(--rojo); color: var(--blanco); }
.boton--rojo:hover { background: var(--rojo-oscuro); }
.boton--contorno { border-color: currentColor; color: var(--tinta); background: transparent; }
.boton--contorno:hover { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.seccion--noche .boton--contorno:hover, .evento .boton--contorno:hover { background: var(--blanco); color: var(--tinta); }
.boton--apagado { background: transparent; color: inherit; border-color: currentColor; opacity: .7; cursor: default; }
.enlace { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: var(--rojo); }
.pastilla { display: inline-block; padding: .4rem .85rem; border: 1px solid var(--borde); border-radius: 999px; font-size: .9rem; font-weight: 600; text-decoration: none; background: var(--blanco); }
.pastilla:hover { border-color: var(--tinta); }

/* ---------- Hero (escena 3D) ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
  background: linear-gradient(180deg, #eef8f6 0%, #f7fbfa 55%, var(--blanco) 100%);
}
main > .hero:first-child { padding-top: calc(var(--alto-cab) + clamp(2.5rem, 7vw, 5rem)); }
/* Cuadrícula del letrero, muy tenue y desvanecida hacia los bordes */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(134,169,192,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(134,169,192,.22) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 45%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 70% 45%, #000 20%, transparent 75%);
}
.hero__luces { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero__luces span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .75; animation: derivar 18s ease-in-out infinite alternate; }
.hero__luces span:nth-child(1) { width: 34rem; height: 34rem; right: -6rem; top: -8rem; background: #bfe6df; }
.hero__luces span:nth-child(2) { width: 26rem; height: 26rem; left: 30%; bottom: -10rem; background: #fde0dc; animation-duration: 22s; animation-delay: -6s; }
.hero__luces span:nth-child(3) { width: 22rem; height: 22rem; left: -8rem; top: 4rem; background: #dceaf7; animation-duration: 26s; animation-delay: -12s; }
@keyframes derivar { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(3rem,2rem,0) scale(1.12); } }

.hero__rejilla { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero__titulo {
  font-size: clamp(3.4rem, 9vw, 7.5rem); line-height: .88; margin: 0; text-wrap: balance;
  text-shadow: 0 1px 0 #fff, 0 20px 40px rgba(23,35,45,.14);
  animation: aparecer .7s cubic-bezier(.2,.7,.2,1) both;
}
.hero__bajada { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); color: var(--texto-2); max-width: 30rem; margin: 1.5rem 0 0; animation: aparecer .7s cubic-bezier(.2,.7,.2,1) .1s both; }
.hero .acciones { animation: aparecer .7s cubic-bezier(.2,.7,.2,1) .2s both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.boton--rojo { box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 10px 22px -8px rgba(216,38,28,.6); }
.boton--rojo:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 16px 28px -10px rgba(216,38,28,.65); }
.boton--claro { background: rgba(255,255,255,.85); color: var(--tinta); border-color: rgba(23,35,45,.08); box-shadow: 0 8px 20px -10px rgba(23,35,45,.35); }
.boton--claro:hover { background: var(--blanco); transform: translateY(-2px); }
.boton { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }

.escena { position: relative; height: clamp(24rem, 42vw, 36rem); perspective: 1400px; perspective-origin: 40% 50%; }
.escena__plano {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateY(var(--ry, -14deg)) rotateX(var(--rx, 7deg));
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
  animation: entrar-escena 1s cubic-bezier(.2,.7,.2,1) both .15s;
}
@keyframes entrar-escena { from { opacity: 0; transform: rotateY(-32deg) rotateX(14deg) translateZ(-120px); } }
.escena__foto {
  position: absolute; object-fit: cover; border-radius: 18px; border: 6px solid var(--blanco);
  background: var(--blanco);
  box-shadow: 0 2px 4px rgba(23,35,45,.06), 0 14px 28px rgba(23,35,45,.12), 0 46px 80px -24px rgba(23,35,45,.42);
  animation: flotar 7s ease-in-out infinite alternate;
}
.escena__foto--a { left: 4%; top: 6%; width: 50%; height: 84%; transform: translateZ(30px); object-position: 40% 50%; }
.escena__foto--b { right: 3%; top: 0; width: 42%; height: 44%; transform: translateZ(-50px); animation-delay: -2.5s; }
.escena__foto--c { right: 8%; bottom: 0; width: 40%; height: 50%; transform: translateZ(90px); animation-delay: -4.5s; object-position: 50% 20%; }
@keyframes flotar { from { translate: 0 0; } to { translate: 0 -14px; } }

.escena__chip {
  position: absolute; left: -2%; bottom: 9%; transform: translateZ(150px);
  display: flex; align-items: center; gap: .85rem; padding: .7rem 1.1rem .7rem .7rem;
  text-decoration: none; color: var(--tinta);
  background: rgba(255,255,255,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.95); border-radius: 16px;
  box-shadow: 0 1px 0 #fff inset, 0 20px 40px -12px rgba(23,35,45,.35);
  animation: flotar 6s ease-in-out infinite alternate -1s;
  max-width: 17rem;
}
.escena__chip:hover { background: var(--blanco); }
.escena__chip-fecha { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 12px; background: linear-gradient(180deg, #e8392f, var(--rojo)); color: var(--blanco); font-size: .7rem; font-weight: 600; line-height: 1; text-transform: capitalize; box-shadow: 0 6px 12px -4px rgba(216,38,28,.55); }
.escena__chip-fecha b { font-size: 1.35rem; font-stretch: var(--angosta); font-weight: 800; }
.escena__chip-texto { display: grid; line-height: 1.2; }
.escena__chip-texto small { font-size: .75rem; color: var(--texto-2); font-weight: 600; }
.escena__chip-texto strong { font-size: 1.05rem; font-stretch: 85%; }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(3.5rem, 8vw, 6rem); }
.seccion--noche { background: var(--noche); color: var(--blanco); }
.seccion--tinte, .seccion--papel { background: var(--tinte); }
.seccion__cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem 2rem; flex-wrap: wrap; margin-bottom: 2.25rem; }
.seccion__nota { margin: 0; color: var(--texto-2); max-width: 26rem; }
.titulo-seccion { font-size: clamp(2.25rem, 5vw, 3.4rem); margin: 0 0 1.5rem; }
.seccion__cabeza .titulo-seccion { margin: 0; }
.titulo-pagina { font-size: clamp(3rem, 8vw, 5.25rem); margin: 0 0 1rem; }
.subtitulo { font-size: 1.2rem; font-weight: 700; margin: 2.5rem 0 .75rem; }
.intro { max-width: 40rem; margin: 0 0 2.75rem; font-size: 1.15rem; color: var(--texto-2); }
.seccion--noche .intro { color: rgba(255,255,255,.75); }
.vacio { color: var(--texto-2); }
.tenue { opacity: .72; font-size: .95em; }

/* ---------- Evento destacado ---------- */
.destacado { background: var(--noche); color: var(--blanco); padding-block: clamp(2.5rem, 6vw, 4rem); }
.destacado__rejilla { display: grid; grid-template-columns: 15rem 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.destacado__poster { display: block; text-decoration: none; transition: transform .2s ease; }
.destacado__poster:hover { transform: translateY(-3px); }
.destacado__fecha { margin: 0 0 .75rem; color: var(--cuadro); font-weight: 600; }
.destacado__artista, .evento__artista { font-size: clamp(2.75rem, 7vw, 5.5rem); line-height: .92; margin: 0; text-wrap: balance; }
.destacado__lugar, .destacado__gira { margin: .9rem 0 0; font-size: 1.15rem; color: rgba(255,255,255,.75); }
.destacado__compra { display: flex; align-items: center; gap: 1rem 1.75rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14); }
.destacado__precio { margin: 0; font-size: 1.6rem; font-weight: 700; }
.destacado__precio span { display: block; font-size: .85rem; font-weight: 500; color: rgba(255,255,255,.65); }
.destacado__compra .boton { margin: 0; }
.presenta { margin: 0 0 .75rem; color: var(--cuadro); font-weight: 600; }

/* ---------- Categorías ---------- */
.categorias { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.categoria { display: block; text-decoration: none; border-radius: var(--radio); overflow: hidden; background: var(--tinte); }
.categoria__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.categoria__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.categoria:hover .categoria__media img { transform: scale(1.04); }
.categoria__pie { display: block; padding: 1.1rem 1.25rem 1.3rem; }
.categoria__nombre { display: block; font-size: 1.9rem; }
.categoria__desc { display: block; margin-top: .35rem; color: var(--texto-2); font-size: .95rem; }

/* ---------- Póster ---------- */
.poster { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radio); overflow: hidden; background: var(--noche-2); box-shadow: 0 20px 40px -20px rgba(0,0,0,.55); }
.poster img { width: 100%; height: 100%; object-fit: cover; }
.poster__tipografico {
  height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: .25rem;
  padding: 1.5rem; color: var(--blanco);
  background: linear-gradient(160deg, #2c3e4d 0%, var(--noche) 70%);
  border-top: 6px solid var(--rojo);
}
.poster__presenta { font-size: .8rem; color: rgba(255,255,255,.6); }
.poster__artista { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: .2rem 0 .6rem; text-wrap: balance; }
.poster__fecha { font-weight: 700; color: var(--cuadro); }
.poster__lugar { font-size: .9rem; color: rgba(255,255,255,.7); }
.sello {
  position: absolute; top: 1rem; right: -2.6rem; transform: rotate(35deg);
  width: 11rem; text-align: center; padding: .3rem 0;
  background: var(--rojo); color: var(--blanco); font-weight: 700; font-size: .8rem;
}
.sello--borrador { background: var(--texto-2); }
.sello--pospuesto { background: var(--tinta); }

/* ---------- Carteles ---------- */
.carteles { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 2.25rem 1.5rem; }
.cartel__enlace, .cartel__enlace * { text-decoration: none; }
.cartel__enlace { display: block; }
.cartel__enlace .poster { transition: transform .2s ease; }
.cartel__enlace:hover .poster { transform: translateY(-3px); }
.cartel__texto { display: grid; grid-template-columns: auto 1fr; gap: .9rem; margin-top: 1rem; align-items: start; }
.cartel__fecha { display: flex; flex-direction: column; align-items: center; min-width: 3.2rem; padding: .4rem .5rem; border-radius: var(--radio-s); background: var(--rojo); color: var(--blanco); line-height: 1.1; font-size: .75rem; font-weight: 600; text-transform: capitalize; }
.cartel__dia { font-size: 1.6rem; }
.cartel__artista { font-size: 1.45rem; margin: 0; }
.cartel__lugar { margin: .3rem 0 0; font-size: .9rem; opacity: .75; }
.cartel__precio { margin: .3rem 0 0; font-size: .9rem; font-weight: 700; color: var(--cuadro); }
.seccion:not(.seccion--noche) .cartel__precio { color: var(--rojo); }

/* ---------- Nosotros ---------- */
.nosotros { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.nosotros__media { border-radius: var(--radio); padding: clamp(1.5rem, 4vw, 3rem); }
.nosotros__media img { width: 100%; max-width: 22rem; margin-inline: auto; mix-blend-mode: multiply; }
.nosotros__texto { max-width: 36rem; }
.nosotros__texto p { margin: 0 0 1.1rem; color: var(--texto-2); font-size: 1.1rem; line-height: 1.7; }
.nosotros__texto .nosotros__anio { color: var(--rojo); font-weight: 700; }

/* ---------- Sucursales ---------- */
.sucursales { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.5rem; }
.sucursal { background: var(--blanco); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.sucursal__foto { aspect-ratio: 16 / 11; object-fit: cover; width: 100%; }
.sucursal__cuerpo { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.sucursal__nombre { font-size: 1.6rem; margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sucursal__direccion, .sucursal__tel { margin: 0 0 .4rem; color: var(--texto-2); font-size: .95rem; }
.sucursal__horario { list-style: none; padding: 0; margin: .25rem 0 .75rem; font-size: .92rem; color: var(--texto-2); }
.sucursal__acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin: auto 0 0; padding-top: .9rem; }
.etiqueta { font-size: .7rem; font-weight: 700; font-stretch: 100%; letter-spacing: .02em; background: var(--rojo); color: var(--blanco); padding: .25rem .55rem; border-radius: 999px; }

/* ---------- Marcas ---------- */
.marcas-seccion { padding-block: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--borde); }
.marcas-seccion__titulo { font-size: 1rem; font-weight: 600; text-align: center; margin: 0 0 2rem; color: var(--texto-2); }
.marcas { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.75rem 3rem; }
.marcas img { height: 46px; width: auto; max-width: 9.5rem; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .2s ease, opacity .2s ease; }
.marcas li:hover img { filter: none; opacity: 1; }

/* ---------- Detalle del evento ---------- */
.evento { background: var(--noche); color: var(--blanco); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.evento__rejilla { display: grid; grid-template-columns: minmax(0, 24rem) 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.evento__invitados { margin: .75rem 0 0; font-size: 1.15rem; color: rgba(255,255,255,.75); }
.evento .boton { margin-top: 2rem; }

.datos { margin: 2rem 0 0; display: grid; gap: 0; max-width: 34rem; }
.datos div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; border-top: 1px solid rgba(255,255,255,.12); padding-block: .85rem; }
.datos dt { color: rgba(255,255,255,.6); font-weight: 500; }
.datos dd { margin: 0; font-weight: 500; }
.datos .enlace { color: var(--blanco); }

.aviso { margin: 0; padding: .9rem 1rem; text-align: center; background: var(--rojo); color: var(--blanco); font-weight: 600; }
.aviso--previa { background: var(--texto-2); }

.zonas { display: grid; gap: 2rem; }
.zonas--con-plano { grid-template-columns: 1.15fr 1fr; align-items: start; }
/* Cada zona es un boleto: talón con el precio separado por la línea de perforación. */
.boletos { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.boleto {
  display: grid; grid-template-columns: 1fr auto; position: relative;
  background: var(--blanco); border-radius: var(--radio);
  box-shadow: var(--sombra); overflow: hidden;
}
.boleto::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--zona, var(--rojo)); }
.boleto__zona { padding: 1.1rem 1.25rem 1.1rem 1.6rem; }
.boleto__nombre { font-size: 1.6rem; margin: 0 0 .3rem; }
.boleto__detalle { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--texto-2); }
.boleto__precio { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: 1rem 1.4rem; min-width: 9.5rem; border-left: 2px dashed var(--borde); }
.boleto__importe { font-size: 2rem; }
.boleto__quedan { font-size: .82rem; margin-top: .35rem; color: var(--rojo); font-weight: 700; }
.boleto--agotado { opacity: .55; }
.boleto--agotado .boleto__importe { color: var(--rojo); font-size: 1.4rem; }
.plano { margin: 0; }
.plano img { border-radius: var(--radio); background: var(--blanco); box-shadow: var(--sombra); }
.plano figcaption { font-size: .9rem; margin-top: .6rem; color: var(--texto-2); }
.lista-simple--puntos { color: var(--texto-2); }

.texto-largo { max-width: 44rem; }
.texto-largo p { color: var(--texto-2); }
.redes-artista { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.redes-artista a { display: inline-block; padding: .4rem .85rem; border: 1px solid var(--borde); border-radius: 999px; font-size: .9rem; font-weight: 600; text-decoration: none; }

.galeria { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .75rem; }
.galeria__boton { padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; border-radius: var(--radio); overflow: hidden; }
.galeria__boton img { aspect-ratio: 1; object-fit: cover; width: 100%; transition: transform .3s ease; }
.galeria__boton:hover img { transform: scale(1.04); }
.visor { border: 0; padding: 1rem; background: var(--noche); color: var(--blanco); border-radius: var(--radio); max-width: min(92vw, 60rem); }
.visor::backdrop { background: rgba(15,22,28,.88); }
.visor img { max-height: 75vh; margin-inline: auto; border-radius: var(--radio-s); }
.visor form { text-align: right; }
.visor .boton { margin-top: .75rem; }

/* ---------- Eventos anteriores ---------- */
.pasados { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--borde); }
.pasados a { display: grid; grid-template-columns: 8rem 1fr 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--borde); text-decoration: none; }
.pasados time, .pasados span { color: var(--texto-2); }
.pasados a:hover strong { color: var(--rojo); }
.paginas { display: flex; gap: 1.5rem; margin-top: 1.5rem; }

/* ---------- Pie ---------- */
.pie { background: var(--noche); color: rgba(255,255,255,.72); padding-top: 3.5rem; }
.pie__rejilla { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.pie__marca { font-size: 2rem; color: var(--blanco); margin: 0 0 .5rem; }
.pie__titulo { font-size: .85rem; font-weight: 600; color: var(--blanco); margin: 0 0 .75rem; }
.pie__legal { padding-block: 1.75rem; margin-top: 3rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; color: rgba(255,255,255,.5); }
.lista-simple { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.lista-simple a { text-decoration: none; }
.lista-simple a:hover { color: var(--blanco); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Responsivo ---------- */
@media (max-width: 60rem) {
  .hero__rejilla { grid-template-columns: 1fr; }
  .escena { height: clamp(20rem, 78vw, 28rem); max-width: 36rem; width: 100%; margin-inline: auto; }
  .categorias { grid-template-columns: repeat(3, minmax(12rem, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
  .categorias > li { scroll-snap-align: start; }
}
@media (max-width: 52rem) {
  .destacado__rejilla { grid-template-columns: 9rem 1fr; align-items: start; }
  .evento__rejilla, .nosotros, .zonas--con-plano { grid-template-columns: 1fr; }
  .poster--detalle { max-width: 20rem; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .pie__rejilla > :first-child { grid-column: 1 / -1; }
  .pasados a { grid-template-columns: 1fr; gap: .1rem; }
}
@media (max-width: 36rem) {
  .contenedor { width: min(100% - 2rem, var(--ancho)); }
  .escena__chip { left: 0; bottom: 4%; max-width: 14rem; }
  .categorias { grid-template-columns: repeat(3, 72%); }
  .destacado__rejilla { grid-template-columns: 1fr; }
  .destacado__poster { max-width: 13rem; }
  .boleto { grid-template-columns: 1fr; }
  .boleto__precio { border-left: 0; border-top: 2px dashed var(--borde); align-items: flex-start; min-width: 0; padding-left: 1.6rem; }
  .datos div { grid-template-columns: 1fr; gap: .1rem; }
  .marcas { gap: 1.25rem 2rem; }
  .carteles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
  .cartel__texto { grid-template-columns: 1fr; gap: .5rem; }
  .cartel__fecha { flex-direction: row; gap: .3rem; justify-self: start; min-width: 0; }
  .cartel__dia { font-size: 1rem; }
  .cartel__artista { font-size: 1.2rem; }
  .marcas img { height: 36px; }
}

/* Menú móvil: botón + panel desplegable */
@media (max-width: 52rem) {
  .cabecera { padding: .6rem .6rem 0; }
  .cabecera__barra { flex-wrap: wrap; border-radius: 26px; padding: .45rem .45rem .45rem 1rem; }
  .marca__logo { height: 50px; }
  .cabecera--abierta .cabecera__barra { background: rgba(255,255,255,.97); box-shadow: 0 24px 50px -16px rgba(23,35,45,.4); }
  .menu-boton { display: block; }
  .menu { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: .15rem; padding: .5rem 0 .4rem; }
  .menu a { padding: .8rem 1rem; border-radius: 14px; }
  .menu .menu__cta { margin: .4rem 0 0; text-align: center; }
  .cabecera--abierta .menu { display: flex; animation: aparecer .25s ease both; }
  :root { --alto-cab: 5.4rem; }
}

/* Atajo para el personal con sesión iniciada */
.editar-flotante { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; padding: .7rem 1.1rem; border-radius: 999px; background: var(--tinta); color: var(--blanco); font-weight: 600; text-decoration: none; box-shadow: 0 14px 30px -10px rgba(0,0,0,.45); }
.editar-flotante:hover { background: var(--rojo); }