/*
  Estilos de la web de Burger Couple.

  Regla general, tomada del PDF de marca: "el caos vive en el contenido y la
  dirección de arte; la interfaz permanece clara". Por eso los colores y las
  ilustraciones son intensos, pero los textos siempre tienen buen contraste y
  los botones se ven como botones.

  Está escrito "de celular para arriba": primero se diseña para pantallas chicas
  (por donde entra casi toda la gente) y después se agranda para tablet y compu.
*/

/* ---------- Tipografías (Manual de Marca V1.3, página 14) ---------- */
/*
  Noir Pro (Mindburger Studio), la tipografía oficial del manual. Los archivos
  los pasó la agencia el 29/09/2026, con permiso para usarla en la web.
  El manual pide: títulos en Medium Italic (y Medium), párrafos en Regular (e Italic).

  Se usan solo esos cuatro archivos (de los 12 de la familia), recortados a los
  caracteres del español y convertidos a .woff2: pesan unos 20 KB cada uno.
  Cada familia apunta a un solo archivo para todos los grosores: así el navegador
  no "inventa" negritas que el manual no tiene.
  Se sirven desde nuestra propia web (no desde otro servidor): con mala señal,
  cada conexión de más se nota. "swap" muestra el texto enseguida.
*/
@font-face { font-family: "BC Titulo Italica"; src: url("/fuentes/noir-pro-500-italica.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "BC Titulo"; src: url("/fuentes/noir-pro-500-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "BC Texto"; src: url("/fuentes/noir-pro-400-normal.woff2") format("woff2"); font-weight: 100 450; font-style: normal; font-display: swap; }
@font-face { font-family: "BC Texto"; src: url("/fuentes/noir-pro-500-normal.woff2") format("woff2"); font-weight: 451 900; font-style: normal; font-display: swap; }
@font-face { font-family: "BC Texto"; src: url("/fuentes/noir-pro-400-italica.woff2") format("woff2"); font-weight: 100 450; font-style: italic; font-display: swap; }
@font-face { font-family: "BC Texto"; src: url("/fuentes/noir-pro-500-italica.woff2") format("woff2"); font-weight: 451 900; font-style: italic; font-display: swap; }

/* ---------- Colores de marca (Manual de Marca V1.3, página 13) ---------- */
/*
  Los siete colores oficiales del manual, con sus códigos exactos.
  El manual no tiene negro: "tinta" es solo para textos chicos y líneas finas,
  porque texto claro sobre violeta, rosa o turquesa no se lee bien en el celular
  (no llega al contraste mínimo). Regla de la web:
    * títulos grandes: blanco o crema sobre violeta; tinta sobre rosa, turquesa y amarillo;
    * textos chicos: siempre tinta, sobre cualquier color.
*/
:root {
  --violeta: #A372AE;
  --rosa: #ED7598;
  --turquesa: #3CB0AE;
  --naranja: #FF7D40;
  --amarillo: #FFCD59;
  --verde: #2E875D;
  --crema: #F7F1EB;

  --negro: #141116;              /* "tinta": textos chicos y contornos */
  --violeta-profundo: #5E3B6B;   /* tono oscuro del violeta del manual, solo para textos chicos sobre crema */
  --petroleo: #2E875D;           /* antes era un verde petróleo propio; ahora es el verde del manual */
  /* Celeste de la carta de La Tercera: no está en el manual, pero es el color de ese local. */
  --celeste: #62A8DA;

  --letra-display: "BC Titulo Italica", system-ui, sans-serif;
  --letra-titulos: "BC Titulo", system-ui, sans-serif;
  --letra-texto: "BC Texto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --letra-datos: "BC Titulo", system-ui, sans-serif;

  --radio: 22px;
  --ancho-maximo: 1120px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* El fondo de "afuera" de la página es violeta: cuando en el celular se estira la
   página con el dedo al llegar abajo (el rebote), se ve del mismo color que el pie,
   y no una franja de otro color que parece un espacio vacío. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--violeta); }
/* El encabezado queda fijo arriba: sin esto, al tocar "Menú" el título quedaría tapado. */
[id] { scroll-margin-top: 108px; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--negro);
  font-family: var(--letra-texto);
  font-size: 1.0625rem;
  line-height: 1.5;
}
img { max-width: 100%; height: auto; display: block; }
/* Lo que está marcado como oculto se oculta siempre, aunque otra regla le dé
   un "display" (sin esto, formularios y la cámara de la caja se veían igual). */
[hidden] { display: none !important; }
/* Los botones del navegador no heredan la letra de la página: se la damos. */
button, input, select { font-family: inherit; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.05; }
p { margin: 0 0 .75em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Foco bien visible para quien navega con teclado. */
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; border-radius: 6px; }

.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--amarillo); padding: 10px 14px; border-radius: 10px; font-weight: 700;
}
.saltar:focus { top: 12px; }

/* 16 px de margen a los costados en celular, como pide la guía de diseño. */
.contenedor { width: 100%; max-width: var(--ancho-maximo); margin: 0 auto; padding: 0 16px; }
.centrado { text-align: center; margin-top: 32px; }

/* ---------- Piezas reutilizables ---------- */
.rotulo {
  font-family: var(--letra-datos); font-weight: 500; font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--negro); margin-bottom: 10px;
}
.rotulo--oscuro { color: var(--violeta-profundo); }

/* Títulos de sección: Noir Pro Medium Italic en mayúsculas, como pide el manual. */
.titulo-seccion {
  font-family: var(--letra-display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(1.9rem, 6.6vw, 3.2rem); letter-spacing: -.01em; line-height: 1; margin-bottom: 14px;
}
.titulo-seccion--claro { color: #fff; }
.seccion__bajada { max-width: 60ch; margin-bottom: 28px; }
.seccion__bajada--claro { color: inherit; }

.subtitulo {
  font-family: var(--letra-titulos); font-weight: 800; font-size: 1.6rem;
  margin: 40px 0 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
}
.subtitulo small { font-family: var(--letra-datos); font-size: .75rem; font-weight: 500; text-transform: uppercase; color: var(--violeta-profundo); }
.nota { font-size: .95rem; color: #4a3f4d; margin-bottom: 14px; }
.nota--centro { text-align: center; margin-top: 24px; }

/*
  Botones: altura mínima de 48 px para que se puedan tocar con el dedo sin errar.
  Texto negro sobre colores claros y blanco solo sobre fondos bien oscuros, por contraste.
*/
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px;
  font-weight: 700; font-size: 1rem; text-decoration: none; text-align: center;
  border: 2px solid transparent; transition: transform .15s ease;
}
.boton:hover { transform: translateY(-2px); }
.boton--chico { min-height: 44px; padding: 8px 16px; font-size: .95rem; }
.boton--amarillo { background: var(--amarillo); color: var(--negro); }
.boton--rosa { background: var(--rosa); color: var(--negro); }
.boton--negro { background: var(--negro); color: #fff; }
.boton--contorno { border-color: var(--negro); color: var(--negro); }

/*
  "A confirmar": marca bien visible para cada dato que todavía no tenemos.
  Está hecho para que se note a propósito; así nadie lo confunde con un dato real.
*/
.pendiente {
  display: inline-block; font-family: var(--letra-datos); font-size: .78rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
  border: 2px dashed currentColor; border-radius: 8px; padding: 2px 8px; opacity: .85;
}
.pendiente--boton { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 12px; border-radius: 999px; }
.pendiente--claro { color: var(--crema); }

/* Cápsula: el motivo del PDF para estados y etiquetas ("NUEVO", "CERRADO"). */
.capsula {
  display: inline-block; align-self: flex-start; background: var(--naranja); color: var(--negro);
  font-family: var(--letra-datos); font-size: .75rem; font-weight: 500; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; margin-bottom: 10px;
}
.capsula--negra { background: var(--negro); color: var(--amarillo); }

/* Damero: el motivo de cuadros del PDF, hecho con CSS para no cargar una imagen. */
.damero { height: 24px; background-size: 24px 24px; background-position: 0 0, 12px 12px; }
.damero--rosa {
  background-color: var(--violeta-profundo);
  background-image: conic-gradient(var(--rosa) 25%, transparent 0 50%, var(--rosa) 0 75%, transparent 0);
}
.estallido { fill: var(--amarillo); }

/* ---------- Encabezado ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  background: rgba(247, 241, 235, .95); color: var(--negro);
  border-bottom: 3px solid var(--violeta);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cabecera__fila {
  max-width: var(--ancho-maximo); margin: 0 auto; padding: 8px 16px;
  display: flex; align-items: center; gap: 12px;
}
.cabecera__logo img { width: 96px; height: auto; }
.cabecera__nav { display: flex; gap: 4px; margin-left: auto; }
.cabecera__nav a {
  text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: 10px 8px; border-radius: 8px; min-height: 44px; display: inline-flex; align-items: center;
}
.cabecera__nav a:hover { color: var(--violeta-profundo); text-decoration: underline; }
/*
  En celulares angostos no entran el logo, los tres links y el botón en una fila.
  En vez de esconder el menú detrás de un botón "hamburguesa" (que mucha gente no toca),
  los links bajan a una segunda fila y siempre se ven.
*/
@media (max-width: 559px) {
  .cabecera__fila { flex-wrap: wrap; row-gap: 0; padding-bottom: 0; }
  .cabecera__fila > .boton { margin-left: auto; }
  .cabecera__nav { order: 3; width: 100%; margin-left: 0; justify-content: space-between; border-top: 1px solid rgba(20, 17, 22, .12); }
}

/* ---------- Portada ---------- */
/* Portada: violeta con los rayos de sol de la tapa del manual (hechos con CSS, sin imagen). */
.portada {
  color: var(--negro); overflow: hidden;
  background:
    repeating-conic-gradient(from 4deg at 72% 58%, rgba(255, 255, 255, .09) 0 10deg, transparent 10deg 22deg),
    var(--violeta);
}
.portada__grilla { display: grid; gap: 8px; padding-top: 36px; }
.portada__titulo {
  font-family: var(--letra-display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(2.6rem, 12vw, 5.6rem); line-height: .95; color: #fff; margin-bottom: 18px;
}
/* "Fetichistas" va como un sticker amarillo: amarillo sobre violeta no se lee, tinta sobre amarillo sí. */
.portada__titulo span {
  display: inline-block; margin-top: 8px; padding: 2px 14px 6px; background: var(--amarillo); color: var(--negro);
  border-radius: 14px; transform: rotate(-2deg);
}
.portada__bajada { font-size: 1.2rem; font-weight: 500; max-width: 34ch; margin-bottom: 24px; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
/* En el celular el collage va un poco más chico, para que se vea al abrir sin tapar el texto. */
.portada__arte { position: relative; margin: 8px auto 0; width: 100%; max-width: 330px; }
@media (min-width: 700px) { .portada__arte { max-width: 440px; } }

/* ---------- Portada: collage con los recursos gráficos del manual ----------
   El personaje asoma de un óvalo amarillo: la parte de abajo de la foto solo se ve
   dentro del óvalo (máscara), la de arriba "sale" del óvalo, como en la página 15. */
.collage { position: relative; aspect-ratio: 1 / 1.05; margin-bottom: 24px; }
.collage__personaje { position: absolute; left: 14%; right: 14%; bottom: 4%; top: 6%; z-index: 2; }
.collage__ovalo {
  position: absolute; left: -6%; right: -6%; bottom: 0; height: 38%;
  background: var(--amarillo); border-radius: 50%; border: 4px solid var(--rosa);
}
.collage__personaje img {
  position: absolute; left: 50%; bottom: 8%; height: 100%; width: auto; max-width: none; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(#000, #000), radial-gradient(ellipse 50% 50% at 50% 50%, #000 99%, transparent 100%);
  -webkit-mask-size: 100% 76%, 132% 40%; -webkit-mask-position: top, 50% 102%; -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(#000, #000), radial-gradient(ellipse 50% 50% at 50% 50%, #000 99%, transparent 100%);
  mask-size: 100% 76%, 132% 40%; mask-position: top, 50% 102%; mask-repeat: no-repeat;
}
.figura { position: absolute; z-index: 1; display: block; animation: flota 5s ease-in-out infinite; }
.figura--arco { left: 2%; top: 10%; width: 17%; aspect-ratio: 3 / 5; background: var(--naranja); border-radius: 999px 999px 0 0; }
.figura--rombo { right: 4%; top: 4%; width: 19%; aspect-ratio: 1; background: var(--rosa); border-radius: 22%; transform: rotate(45deg); animation-name: flota-girado; animation-delay: -1.5s; }
.figura--ovalo { right: 0; top: 46%; width: 15%; aspect-ratio: 3 / 4; background: var(--turquesa); border-radius: 50%; transform: rotate(-25deg); animation-name: flota-ovalo; animation-delay: -3s; }
.figura--estallido { left: 0; bottom: 30%; width: 22%; fill: var(--rosa); z-index: 3; animation-delay: -2s; }
.figura--asterisco { right: 10%; bottom: 36%; width: 14%; color: var(--amarillo); z-index: 3; animation-delay: -4s; }
@keyframes flota { 50% { transform: translateY(-8px); } }
@keyframes flota-girado { 0%, 100% { transform: rotate(45deg); } 50% { transform: rotate(45deg) translate(-5px, -5px); } }
@keyframes flota-ovalo { 0%, 100% { transform: rotate(-25deg); } 50% { transform: rotate(-25deg) translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .figura { animation: none; } }

/* ---------- Cinta que se desplaza (zócalo de TV) ---------- */
.cinta { background: var(--amarillo); overflow: hidden; border-block: 3px solid var(--negro); }
.cinta__pista {
  display: flex; gap: 28px; width: max-content; padding: 12px 0;
  font-family: var(--letra-display); text-transform: uppercase; font-size: 1.1rem; white-space: nowrap;
  animation: zocalo 40s linear infinite;
}
/* Quién dijo cada frase, más chiquito que la frase. */
.cinta__pista small { font-family: var(--letra-datos); font-weight: 500; font-size: .8rem; letter-spacing: .02em; }
@keyframes zocalo { to { transform: translateX(-50%); } }

/* ---------- Secciones ---------- */
.seccion { padding: 56px 0; }
.seccion--crema { background: var(--crema); }
.seccion--violeta { background: var(--violeta); }

/* ---------- Menú ---------- */
/* Dos columnas ya en celular: el menú es largo y así se recorre con menos scroll. */
.grilla-burgers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.burger {
  background: #fff; border-radius: var(--radio); padding: 14px;
  display: flex; flex-direction: column;
}
.burger__foto { width: 100%; max-width: 180px; aspect-ratio: 4 / 3; object-fit: contain; margin: 0 auto 8px; }
.burger__nombre { font-family: var(--letra-titulos); font-weight: 800; font-size: 1.15rem; margin-bottom: 6px; }
.burger__desc { font-size: .9rem; color: #4a3f4d; margin: 0; }
.burger--sin-foto { border-top: 6px solid var(--rosa); }

.menu-extra { display: grid; gap: 14px; margin-top: 44px; align-items: start; }
.tarjeta { border-radius: var(--radio); padding: 22px; color: var(--negro); }
.tarjeta p:last-child { margin-bottom: 0; }
.tarjeta__titulo { font-family: var(--letra-titulos); font-weight: 800; font-size: 1.5rem; margin-bottom: 10px; }
.tarjeta__imagen { width: 170px; margin-bottom: 8px; }
.tarjeta__letra-chica { font-size: .88rem; }
.tarjeta--rosa { background: var(--rosa); }
.tarjeta--turquesa { background: var(--turquesa); }
.tarjeta--amarillo { background: var(--amarillo); }
.tarjeta--violeta { background: var(--violeta); }

.aviso {
  margin-top: 28px; background: #fff; border-left: 6px solid var(--petroleo);
  border-radius: 12px; padding: 16px 18px; font-size: .95rem;
}

/* ---------- Figuritas decorativas ---------- */
/*
  Cada ilustración va recortada dentro de un círculo de color: es el motivo
  "duotono" del PDF de marca (personaje + círculo). El círculo recorta la
  imagen, así la figura nunca se sale de su lugar ni tapa texto.
*/
.encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.deco {
  flex: none; display: flex; align-items: flex-end; justify-content: center;
  width: 92px; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--negro); margin-bottom: 14px;
}
.deco img { width: 88%; height: 92%; object-fit: contain; object-position: center bottom; }
.subtitulo .deco { width: 64px; margin: 0 0 0 auto; }
.subtitulo { justify-content: space-between; flex-wrap: nowrap; align-items: flex-end; }
.subtitulo > span:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.deco--rosa { background: var(--rosa); }
.deco--turquesa { background: var(--turquesa); }
.deco--amarillo { background: var(--amarillo); }
.deco--naranja { background: var(--naranja); }
.pie .deco { width: 120px; justify-self: end; }

/* ---------- Locales ---------- */
.locales { display: grid; gap: 16px; }
.local {
  border-radius: var(--radio); padding: 22px; display: flex; flex-direction: column;
  color: var(--negro); position: relative;
}
.local__logo { width: auto; height: 110px; max-width: 170px; object-fit: contain; object-position: left bottom; margin-bottom: 10px; }
.local__barrio { font-family: var(--letra-datos); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.local__nombre { font-family: var(--letra-titulos); font-weight: 800; font-size: 2rem; margin-bottom: 6px; }
.local__direccion { font-weight: 700; font-size: 1.15rem; }
.local__dato { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; }
.local__estado { font-weight: 600; }
.local__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; }
.local--violeta { background: var(--violeta); }
.local--celeste { background: var(--celeste); }
.local--naranja { background: var(--naranja); }
.local--turquesa { background: var(--turquesa); }
.local--amarillo { background: var(--amarillo); }

/* ---------- Historia ---------- */
.historia { display: grid; gap: 32px; }
.loco {
  display: flex; gap: 16px; align-items: center; margin-top: 24px;
  background: var(--crema); color: var(--negro); border-radius: var(--radio); padding: 20px; border: 3px solid var(--negro);
}
.loco__foto { position: relative; width: 96px; flex: none; margin: 10px 6px 10px 10px; }
.loco__foto img { position: relative; width: 100%; border-radius: 50%; border: 3px solid var(--amarillo); }
/* La estrella va detrás de la foto, un poco más grande, para que asomen las puntas. */
.loco__estallido { position: absolute; inset: -16px; width: calc(100% + 32px); }
.loco h3 { font-family: var(--letra-display); font-weight: 500; font-size: 1.5rem; color: var(--violeta-profundo); margin-bottom: 6px; text-transform: uppercase; }
.loco p { margin-bottom: 6px; }
.loco__redes { font-size: .95rem; }
.loco__redes a { color: var(--violeta-profundo); font-weight: 500; }
.linea { border-left: 4px solid var(--negro); padding-left: 18px; }
.linea li { position: relative; padding-bottom: 16px; }
.linea li::before {
  content: ""; position: absolute; left: -29px; top: 4px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--rosa); border: 3px solid var(--negro);
}
.linea li:nth-child(even)::before { background: var(--turquesa); }
.linea__fecha { display: block; font-family: var(--letra-datos); font-weight: 500; font-size: .85rem; color: var(--violeta-profundo); }

/* ---------- Pie ---------- */
/* padding-bottom suma el espacio de la rayita de abajo del iPhone, para que el texto no quede debajo. */
.pie { background: var(--violeta); color: var(--negro); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.pie__grilla { display: grid; grid-template-columns: 1fr auto; gap: 20px 16px; padding-top: 32px; padding-bottom: 20px; align-items: center; }
.pie__grilla > img { width: 130px; }
.pie__grilla > div { grid-column: 1 / -1; }
.pie__grilla > .pie__deco { grid-column: 2; grid-row: 1; width: 84px; }
.pie__titulo { font-family: var(--letra-datos); text-transform: uppercase; font-size: .8rem; letter-spacing: .06em; color: var(--negro); margin-bottom: 8px; }
.pie__redes li { margin-bottom: 4px; }
.pie__redes a { display: inline-block; padding: 6px 0; }
.pie__legal { font-size: .85rem; opacity: .75; }

/* ---------- Tablet (desde 700 px) ---------- */
@media (min-width: 700px) {
  .cabecera__logo img { width: 110px; }
  .cabecera__nav { gap: 12px; }
  .grilla-burgers { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .menu-extra { grid-template-columns: repeat(2, 1fr); }
  .deco { width: 140px; }
  .subtitulo .deco { width: 96px; }
  .locales { grid-template-columns: repeat(2, 1fr); }
  .pie__grilla { grid-template-columns: auto 1fr 1fr auto; align-items: start; }
  .pie__grilla > div { grid-column: auto; }
  .pie__grilla > .pie__deco { grid-column: 4; grid-row: 1; width: 120px; }
}

/* ---------- Computadora (desde 1000 px) ---------- */
@media (min-width: 1000px) {
  .portada__grilla { grid-template-columns: 1.2fr .8fr; align-items: end; padding-top: 56px; }
  .portada__texto { padding-bottom: 64px; }
  .portada__titulo { font-size: 4.9rem; }
  .portada__arte { max-width: 460px; margin-bottom: 24px; }
  .grilla-burgers { grid-template-columns: repeat(4, 1fr); }
  .deco { width: 180px; }
  .pie .deco { width: 150px; }
  .locales { grid-template-columns: repeat(3, 1fr); }
  .historia { grid-template-columns: 1fr 1fr; align-items: start; }
  .seccion { padding: 80px 0; }
}

/*
  Si la persona configuró su teléfono o compu para "reducir movimiento"
  (por mareos o comodidad), sacamos las animaciones. Lo pide el PDF de marca
  y es una buena práctica de accesibilidad.
*/
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cinta__pista { animation: none; }
  .boton { transition: none; }
}

/* En las tarjetas de locales, la cápsula de estado va arriba a la derecha,
   para que el logo quede a la misma altura en todos los locales. */
.local .capsula { position: absolute; top: 18px; right: 18px; margin: 0; }

/* ---------- Página 404 ---------- */
.error { min-height: 100vh; background: var(--violeta); color: var(--negro); }
.error__contenido { padding-top: 64px; padding-bottom: 64px; }

/* ---------- Figurita que llena todo el círculo ---------- */
/* Para ilustraciones que ya traen su fondo de color (como la que pasó Mati):
   en vez de achicarlas, se recortan para llenar el círculo. */
.deco--lleno img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

/* =====================================================================
   ESCENAS DE LOS LOCALES
   Cada tarjeta arranca con un dibujo que representa al local.
   Todo está dibujado con código (formas y colores), no con fotos:
   carga instantáneo y no depende de imágenes de terceros.
   ===================================================================== */
.escena {
  position: relative; height: 240px; margin: -6px -6px 16px; border-radius: 16px;
  overflow: hidden; border: 3px solid var(--negro);
}
/* El cartelito que dice qué tocar. Va abajo al centro y no se puede tocar él mismo,
   para que el toque siempre caiga en el botón del juego. */
.escena__pista {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 5;
  background: var(--negro); color: var(--crema); pointer-events: none; white-space: nowrap;
  font-family: var(--letra-datos); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  padding: 4px 10px; border-radius: 999px;
}
.escena button { cursor: pointer; font: inherit; }
.escena button:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }

/* El botón que cubre toda la escena (La Mansión y La Tercera): así el toque
   siempre acierta, aunque el dedo caiga un poco al costado de la puerta o la pelota. */
.escena__boton { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; display: block; }
.escena__boton svg { width: 100%; height: 100%; display: block; }
/* En los dibujos SVG, cada pieza gira o se mueve sobre su propio centro (y no sobre la esquina del dibujo). */
.escena svg g, .escena svg path, .escena svg image { transform-box: fill-box; }
/* Pero las piezas que ya traen su propia posición escrita en el dibujo (atributo
   "transform", como la cabeza del arquero o los guantes girados) se miden sobre el
   dibujo entero; si no, el navegador las corre de lugar. */
.escena svg [transform] { transform-box: view-box; }
/* Texto oculto que solo leen los lectores de pantalla (personas ciegas). */
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- La Mansión: la casona de noche ---------- */
.escena--mansion { background: #2e1236; }
/* Las ventanas arrancan apagadas y se prenden de a una cuando se abre la puerta. */
.mansion__ventana { fill: #3f1d48; transition: fill .35s ease; }
.escena--mansion.abierta .mansion__ventana { fill: #FFC654; }
.escena--mansion.abierta .mansion__ventana:nth-child(1) { transition-delay: .9s; }
.escena--mansion.abierta .mansion__ventana:nth-child(2) { transition-delay: 1s; }
.escena--mansion.abierta .mansion__ventana:nth-child(3) { transition-delay: .5s; }
.escena--mansion.abierta .mansion__ventana:nth-child(4) { transition-delay: .7s; }
.escena--mansion.abierta .mansion__ventana:nth-child(5) { transition-delay: .6s; }
.escena--mansion.abierta .mansion__ventana:nth-child(6) { transition-delay: .8s; }
.mansion__abanico { transition: fill .3s ease .3s; }
.escena--mansion.abierta .mansion__abanico { fill: #FFC654; }
/* Las hojas de la puerta giran sobre sus bisagras: se "achican" hacia el costado, como vistas de frente. */
.mansion__hoja { transition: transform .8s cubic-bezier(.3, .7, .2, 1); }
.mansion__hoja--izq { transform-origin: left center; }
.mansion__hoja--der { transform-origin: right center; }
.escena--mansion.abierta .mansion__hoja--izq { transform: scaleX(.12) skewY(8deg); }
.escena--mansion.abierta .mansion__hoja--der { transform: scaleX(.12) skewY(-8deg); }
/* La burger asoma un poquito después de que se abre. */
.mansion__burger { transform-origin: center bottom; transform: scale(.6); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1) .45s; }
.escena--mansion.abierta .mansion__burger { transform: scale(1); }
/* La alfombra roja se desenrolla desde la puerta hacia afuera. */
.mansion__alfombra { transform-origin: center top; transform: scaleY(0); transition: transform .6s ease-out .35s; }
.escena--mansion.abierta .mansion__alfombra { transform: scaleY(1); }
/* Estrellas y faroles titilan solos, para que la escena tenga vida aun sin tocarla. */
.mansion__estrellas circle { animation: titila 3s ease-in-out infinite; }
.mansion__estrellas circle:nth-child(2n) { animation-delay: 1.2s; }
.mansion__estrellas circle:nth-child(3n) { animation-delay: 2s; }
.mansion__resplandor { animation: titila 2.2s ease-in-out infinite; }
@keyframes titila { 50% { opacity: .35; } }
.mansion__globo {
  position: absolute; left: 8px; top: 10px; z-index: 4; max-width: 94px; pointer-events: none;
  background: #fff; color: var(--negro); border: 3px solid var(--negro); border-radius: 16px 16px 2px 16px;
  font-family: var(--letra-display); font-size: .68rem; line-height: 1.05; text-transform: uppercase; padding: 6px 8px;
  opacity: 0; transform: scale(.4); transform-origin: right bottom;
  transition: opacity .2s ease .9s, transform .35s cubic-bezier(.3, 1.6, .5, 1) .9s;
}
.escena--mansion.abierta .mansion__globo { opacity: 1; transform: scale(1); }
/* Ricardo Fort: arranca chiquito y escondido en la puerta, y "sale" hacia adelante.
   Al cerrar la puerta se mete enseguida (sin demora); al abrirla, sale medio segundo
   después, cuando las hojas ya están abiertas. */
.mansion__fort {
  transform-origin: center bottom; transform: translateY(40px) scale(.35); opacity: 0;
  transition: transform .3s ease-in, opacity .2s ease-in;
}
.escena--mansion.abierta .mansion__fort {
  transform: translateY(0) scale(1); opacity: 1;
  transition: transform .6s cubic-bezier(.3, 1.4, .5, 1) .55s, opacity .25s ease .55s;
}

/* ---------- La Tercera: la tanda de penales ---------- */
.escena--tercera {
  background: repeating-conic-gradient(from 0deg at 50% 100%, #7cbde6 0 10deg, var(--celeste) 10deg 20deg);
}
.tercera__logo { position: absolute; top: 6px; left: 8px; width: 60px; height: auto; z-index: 2; pointer-events: none; }
/* El cartel de ayuda va abajo a la derecha y con textos cortos, para no tapar la pelota. */
.escena--tercera .escena__pista { left: auto; right: 10px; bottom: 10px; transform: none; }
.tercera__estrella { fill: #FFF2DF; fill-opacity: .35; transition: fill .3s ease, fill-opacity .3s ease; }
.tercera__estrella.prendida { fill: #FFC654; fill-opacity: 1; animation: estrella-salta .5s ease; transform-origin: center; }
@keyframes estrella-salta { 50% { transform: scale(1.5); } }
/* El arquero gira sobre su cadera (punto 180,140 del dibujo) y la pelota viaja
   hasta su guante. Hacia dónde y cuánto lo calcula juegos.js según dónde tocaste. */
.escena--tercera svg .tercera__arquero { transform-box: view-box; transform-origin: 180px 140px; transition: transform .42s cubic-bezier(.2, .8, .3, 1); }
.tercera__pelota { transform-origin: center; transition: transform .45s cubic-bezier(.3, .6, .4, 1); }
/* La mira para apuntar con el mouse (solo en la compu). */
.tercera__mira { opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.tercera__mira.visible { opacity: 1; }
.escena--tercera .escena__boton { cursor: crosshair; }
.tercera__globo {
  position: absolute; left: calc(50% - 12px); top: 10px; z-index: 4; width: max-content; max-width: 124px; pointer-events: none; text-align: center;
  background: #fff; color: var(--negro); border: 3px solid var(--negro); border-radius: 16px;
  font-family: var(--letra-display); font-size: .76rem; line-height: 1.05; text-transform: uppercase; padding: 6px 9px;
  opacity: 0; transform: translateX(-50%) scale(.4);
  transition: opacity .15s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.escena--tercera.atajo .tercera__globo { opacity: 1; transform: translateX(-50%) scale(1); }
.escena--tercera.campeon .tercera__globo { background: var(--amarillo); }

/* ---------- Los 90's: la tele de tubo que se prende ---------- */
.escena--90s { background: repeating-linear-gradient(0deg, #f29a60 0 14px, var(--naranja) 14px 28px); }
.tele {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  width: min(88%, 300px); height: 172px; display: flex; gap: 10px; padding: 12px;
  background: linear-gradient(#6b3f22, #4d2c17); border: 3px solid var(--negro); border-radius: 18px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .15);
}
.tele__pantalla {
  position: relative; flex: 1; border-radius: 22px / 30px; overflow: hidden; border: 4px solid #2a2a2a;
  background: radial-gradient(ellipse at 40% 35%, #4d5a57, #1f2624 70%);
}
.tele__mapa, .tele__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tele__mapa { opacity: 0; transition: opacity .3s ease; }
/* La línea blanca del encendido: primero se estira de costado, después se abre. */
.tele__encendido { position: absolute; left: 0; right: 0; top: 50%; height: 100%; margin-top: -50%; background: #fff; opacity: 0; transform: scale(0, .01); }
.tele__brillo { /* reflejo del vidrio, siempre arriba de todo */
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .22), transparent 40%);
}
.escena--90s.prendida .tele__encendido { animation: tele-prende .75s ease-out forwards; }
/* El video pasa primero; cuando termina, juegos.js pone "con-mapa" y aparece el mapa. */
.tele__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 0; transition: opacity .25s ease; }
.escena--90s.reproduciendo .tele__video { opacity: 1; }
.escena--90s.con-mapa .tele__mapa { opacity: 1; }
@keyframes tele-prende {
  0%   { opacity: 1; transform: scale(0, .01); }
  35%  { opacity: 1; transform: scale(1, .01); }
  70%  { opacity: 1; transform: scale(1, 1); }
  100% { opacity: 0; transform: scale(1, 1); }
}
.tele__panel { width: 46px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 6px; }
.tele__perilla { width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(#ddd 0 10deg, #999 10deg 180deg, #bbb 180deg); border: 2px solid var(--negro); }
.tele__on {
  margin-top: auto; width: 44px; height: 44px; border-radius: 10px; border: 3px solid var(--negro);
  background: var(--rosa); color: var(--negro); font-family: var(--letra-datos) !important; font-weight: 500; font-size: .8rem;
  box-shadow: 0 4px 0 var(--negro); transition: transform .1s ease, box-shadow .1s ease;
}
.tele__on:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--negro); }
.escena--90s.prendida .tele__on { background: var(--amarillo); }
.tele__patas {
  position: absolute; left: 50%; top: 186px; transform: translateX(-50%); width: 120px; height: 16px;
  border-left: 5px solid var(--negro); border-right: 5px solid var(--negro); transform-origin: top;
}
.escena--90s .escena__pista { bottom: 8px; }

/* ---------- Boedo: la polaroid de los comienzos ---------- */
.escena--boedo {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #36a19e 0 12px, var(--turquesa) 12px 24px);
}
.polaroid {
  margin: 0; width: 200px; background: #fff; padding: 10px 10px 8px; transform: rotate(-4deg);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .3); position: relative;
}
.polaroid::before { /* cinta que la sostiene */
  content: ""; position: absolute; top: -10px; left: 50%; width: 70px; height: 20px; margin-left: -35px;
  background: rgba(255, 242, 223, .85); transform: rotate(3deg);
}
.polaroid__foto {
  height: 150px; background: var(--negro);
}
.polaroid__foto img { width: 100%; height: 100%; object-fit: cover; }
.polaroid figcaption { font-family: var(--letra-titulos); font-weight: 800; text-align: center; padding-top: 6px; font-size: 1rem; }

/* ---------- Recoleta: cinta de obra ---------- */
.escena--recoleta { display: flex; align-items: center; justify-content: center; background: #ffd57e; }
.escena--recoleta img { width: 170px; height: auto; opacity: .55; }
.cinta-obra {
  position: absolute; left: -20%; right: -20%; top: 50%; transform: translateY(-50%) rotate(-12deg);
  background: repeating-linear-gradient(45deg, var(--negro) 0 18px, var(--amarillo) 18px 36px);
  padding: 8px 0; text-align: center;
}
.cinta-obra { color: transparent; }
.cinta-obra::after {
  content: "CERRADO POR REFACCIONES"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--letra-display); color: var(--negro); font-size: 1rem;
  background: var(--amarillo); margin: 6px 20%; border: 2px solid var(--negro);
}

/* Sin animaciones si el teléfono lo pide: los juegos cambian de estado al instante. */
@media (prefers-reduced-motion: reduce) {
  .escena--mansion *, .escena--tercera *, .tele__mapa { transition: none !important; animation: none !important; }
  .escena--90s.prendida .tele__encendido { animation: none; }
}

/* ---------- Invitación al club (en la página principal) ---------- */
.club-invitacion { background: var(--rosa); }
.club-invitacion__grilla { display: grid; gap: 20px; align-items: center; }
.club-invitacion__deco { width: 140px; justify-self: end; }
/* El brindis en su marco turquesa (antes estaba en la portada). */
.club-invitacion__arte {
  width: min(78%, 300px); justify-self: center; background: var(--turquesa);
  border: 4px solid var(--crema); border-radius: 28px; overflow: hidden;
}
.club-invitacion__arte img { width: 100%; }

/* ---------- Botón claro (Cómo llegar, WhatsApp) ---------- */
.boton--claro { background: var(--crema); color: var(--negro); border-color: var(--negro); }

/* ---------- Consultas y reservas por WhatsApp ---------- */
.consultas {
  display: grid; grid-template-columns: auto 1fr; gap: 12px 18px; align-items: center;
  background: #fff; border: 3px solid var(--negro); border-radius: var(--radio); padding: 18px; margin: 28px 0 18px;
}
.consultas .deco { width: 84px; }
.consultas__titulo { font-family: var(--letra-titulos); font-weight: 800; font-size: 1.4rem; margin-bottom: 4px; }
.consultas p { margin: 0; }
.consultas a:not(.boton) { font-weight: 700; color: var(--violeta-profundo); white-space: nowrap; }
.consultas .boton { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 700px) {
  .club-invitacion__grilla { grid-template-columns: 1fr auto; }
  .club-invitacion__deco { width: 220px; }
  .club-invitacion__arte { width: 280px; }
  .consultas { grid-template-columns: auto 1fr auto; }
  .consultas .boton { grid-column: auto; }
}

/* ---------- Aviso "Instalar la app" ---------- */
.instalar {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between;
  max-width: var(--ancho-maximo); margin: 0 auto; padding: 16px;
  background: var(--violeta); color: var(--negro); border-bottom: 1px solid rgba(20, 17, 22, .12);
}
.instalar__texto { margin: 0; font-weight: 600; }

/* ---------- Botones de arriba: "Descargar app" y "Pedir" ---------- */
.cabecera__botones { display: flex; gap: 8px; align-items: center; }
@media (max-width: 999px) { .cabecera__botones { margin-left: auto; } }
/* En celulares muy angostos, los dos botones un poco más compactos para que entren al lado del logo. */
@media (max-width: 380px) { .cabecera__botones .boton--chico { padding: 8px 12px; font-size: .88rem; } }

/* ---------- Franja "Descargar app" ---------- */
.descargar-app { background: var(--amarillo); border-top: 3px solid var(--negro); padding: 40px 0 44px; }
.descargar-app__grilla { display: grid; grid-template-columns: auto 1fr; gap: 18px 16px; align-items: center; }
/* El ícono ya trae su fondo negro: sin borde extra, y con sombra rosa para que resalte sobre el amarillo. */
.descargar-app__icono { width: 84px; border-radius: 20px; box-shadow: 5px 5px 0 var(--rosa); }
.descargar-app__titulos .titulo-seccion { font-size: clamp(1.5rem, 6.4vw, 2.6rem); margin: 0; }
.descargar-app__titulos .rotulo { margin-bottom: 4px; }
.descargar-app__lista { grid-column: 1 / -1; list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-weight: 600; }
.descargar-app__lista li { padding-left: 24px; position: relative; }
.descargar-app__lista li::before { content: "★"; position: absolute; left: 0; }
.descargar-app__boton { grid-column: 1 / -1; width: 100%; }
@media (min-width: 700px) {
  .descargar-app { padding: 64px 0; }
  .descargar-app__grilla { gap: 16px 40px; }
  .descargar-app__icono { width: 180px; border-radius: 40px; box-shadow: 8px 8px 0 var(--rosa); grid-row: 1 / span 3; }
  .descargar-app__lista, .descargar-app__boton { grid-column: 2; }
  .descargar-app__boton { width: auto; justify-self: start; }
}

/* ---------- Guía de pasos para instalar (ventana que se abre encima) ---------- */
.guia-app { border: 0; padding: 0; background: transparent; max-width: min(92vw, 420px); width: 100%; }
.guia-app::backdrop { background: rgba(20, 17, 22, .72); }
.guia-app__tarjeta {
  background: var(--crema); color: var(--negro); border: 3px solid var(--negro); border-radius: 24px;
  padding: 24px 22px 20px; box-shadow: 8px 8px 0 var(--rosa);
}
.guia-app__icono { width: 64px; height: 64px; border-radius: 16px; border: 2px solid var(--negro); margin-bottom: 12px; }
.guia-app__titulo { font-family: var(--letra-titulos); font-weight: 800; font-size: 1.5rem; margin-bottom: 8px; }
.guia-app__pasos { margin: 0 0 12px; padding-left: 26px; display: grid; gap: 10px; line-height: 1.4; list-style: decimal; }
.guia-app__pasos li::marker { font-weight: 800; color: var(--violeta-profundo); }
.guia-app__nota { font-size: .9rem; color: #5b4f5e; }
.guia-app__cerrar { width: 100%; margin-top: 6px; }