/* ============================================================
   ESTILOS — Noche Solidaria por la Paz

   Sigue el flyer oficial:
     • Fondo claro, celeste pálido, aire alrededor
     • Panel blanco translúcido sobre la foto de la parroquia
     • Título en tres renglones, serif en itálica, con la palabra
       del medio en celeste
     • Títulos: Cormorant Garamond (la del logotipo "Belén")
     • Texto:   Poppins
       (las dos tipografías salen de comunidadbelen.org)

   Sobre el celeste: el tono del logo es claro, así que NO se usa
   para texto sobre blanco (no llegaría al contraste mínimo de
   lectura). Para texto y enlaces va el celeste profundo; el claro
   queda para la estrella, fondos y bordes.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,600;1,700&family=Poppins:wght@300;400;500;600&display=swap");

:root {
  /* Celestes */
  --celeste: #35aedf;            /* el de la estrella del logo */
  --celeste-medio: #1f93c9;
  --celeste-claro: #eaf4fb;      /* fondo de secciones */
  --celeste-muy-claro: #f4fafd;
  --celeste-borde: #cde6f4;
  --celeste-profundo: #01669b;   /* texto y enlaces: contraste 5.4:1 sobre blanco */
  --celeste-oscuro: #014a6f;

  /* Neutros */
  --tinta: #1b2a33;
  --tinta-suave: #4d5d66;
  --gris-fondo: #f7fafc;
  --borde: #e3eaef;
  --blanco: #ffffff;

  /* Medidas */
  --ancho: 1040px;
  --ancho-texto: 68ch;
  --pad: 20px;
  --radio: 16px;
  /* Alto de la barra de menú. Se usa para descontarla del alto de las
     secciones y para que los títulos no queden tapados al navegar. */
  --alto-menu: 52px;

  /* Tipografías */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

/* El atributo hidden tiene que ganar siempre.
   Sin esto, cualquier regla con display propio (por ejemplo
   .pago__fila { display: flex }) lo pisa y el bloque se ve igual,
   vacío. Es justo lo que pasa con los datos de pago sin cargar. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--celeste-profundo);
  outline-offset: 3px;
  border-radius: 4px;
}

.salto-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--blanco);
  color: var(--celeste-profundo);
  font-weight: 500;
  text-decoration: none;
}
.salto-al-contenido:focus { left: 12px; top: 12px; }

.limite {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ============================================================
   PORTADA
   Fondo celeste claro. Si se carga una foto en datos.js, el JS la
   pone como capa de fondo y el panel blanco translúcido queda
   encima, como en el flyer.
   ============================================================ */
.portada {
  position: relative;
  /* Entra en una pantalla junto con la barra de menú.
     dvh en vez de vh: en el celular la barra del navegador aparece y
     desaparece, y vh no lo tiene en cuenta (queda contenido cortado). */
  min-height: calc(100vh - var(--alto-menu));
  min-height: calc(100dvh - var(--alto-menu));
  display: flex;
  align-items: center;
  padding: 10px var(--pad) 12px;
  background:
    linear-gradient(180deg, #d9ecf7 0%, #eaf4fb 45%, #ffffff 100%);
  background-size: cover;
  background-position: center;
}

/* Velo blanco: con foto de fondo, mantiene legible el texto */
.portada--con-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.88) 100%);
}

.portada__panel {
  position: relative;
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
  padding: 18px 26px 18px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 28px;
  background: rgba(255, 255, 255, .72);
  /* Efecto vidrio del flyer */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(1, 102, 155, .12);
  text-align: center;
}

/* ---------- Marca ---------- */
.marca { margin-bottom: 8px; }

/* Las medidas de la portada se atan al ALTO de la pantalla (vh), no a
   píxeles fijos: así entra completa tanto en un celular chico como en
   un monitor, sin tener que ajustar a mano para cada tamaño. */
.marca__estrella {
  display: block;
  width: clamp(54px, 9.2vh, 92px);
  height: auto;
  margin: 0 auto 6px;
  color: var(--celeste);
}
.marca__nombre {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.85rem, 4.8vh, 2.9rem);
  font-weight: 600;
  line-height: 1;
  color: var(--celeste-medio);
}
.marca__bajada {
  margin: 3px 0 0;
  font-family: var(--sans);
  font-size: clamp(.7rem, 1.6vh, .92rem);
  font-weight: 400;
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  color: var(--celeste-medio);
}

/* ---------- Título en tres renglones ---------- */
.titulo {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  /* min(vw, vh): manda el lado más chico, así nunca desborda ni a lo
     ancho ni a lo alto */
  font-size: clamp(1.6rem, min(7.2vw, 4.9vh), 3.2rem);
  line-height: .98;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.titulo__linea,
.titulo__destacado {
  display: block;
}
.titulo__linea { color: var(--tinta); }
.titulo__destacado {
  color: var(--celeste);
  /* El renglón del medio es el más grande, como en el flyer */
  font-size: 1.16em;
}

/* ---------- Llamado y valor ---------- */
.llamado {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: clamp(1.15rem, min(4.5vw, 2.7vh), 1.7rem);
  font-weight: 600;
  color: var(--celeste-medio);
}
.valor {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(.98rem, 1.9vh, 1.15rem);
  font-weight: 700;
  color: var(--tinta);
}
.valor--mesa {
  margin-top: 2px;
  font-size: clamp(.88rem, 1.6vh, 1rem);
  font-weight: 600;
  color: var(--tinta-suave);
}

/* ---------- Datos de la noche ---------- */
/* Grilla de 12 columnas: permite dar un ancho distinto a cada box.
   Hoy los cuatro miden igual (6 y 6). Se mantiene la grilla de 12 y no
   dos columnas de 1fr porque así el reparto se cambia tocando un solo
   número: 7 y 5 los vuelve asimétricos, con Fecha y Lugar más anchos.
   Medido antes de igualarlos: en escritorio la dirección entra en un
   renglón hasta 299 px de box, y en celular ya venía en dos renglones
   con el reparto anterior, así que igualarlos no la parte más. */
.datos {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(5px, .9vh, 9px);
  margin: clamp(8px, 1.7vh, 14px) 0 0;
  padding: 0;
  text-align: left;
}
.dato--ancho   { grid-column: span 6; }
.dato--angosto { grid-column: span 6; }

/* Una sola columna: el ícono va adentro del rótulo, no al costado */
.dato {
  padding: clamp(7px, 1.15vh, 11px) 13px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--celeste-borde);
}

/* Logo de WhatsApp adelante de un número, dentro de una línea de texto */
.wa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.wa svg {
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  color: #25d366;
}

.comprobante {
  margin: 22px 0 0;
  font-size: 1.15rem;
}

/* El rótulo lleva el ícono adelante, en la misma línea.
   El tamaño escala con el ANCHO de la pantalla, no con el alto: lo que
   decide si un texto se parte en dos renglones es el ancho del box.
   Medido: en escritorio sobraban 116 px y en celular ya faltaban, así
   que crece donde hay lugar y se queda chico donde no. */
.dato dt {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(.78rem, 2.1vw, 1.05rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--celeste-medio);
}
/* El ícono NO crece con el rótulo: queda clavado en 16 px */
.dato dt svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
/* Verde oficial de WhatsApp, solo para ese ícono */
.dt--whatsapp svg { color: #25d366; }

/* El valor también escala con el ancho. El techo lo pone el texto más
   largo, "Lunes, 26 de octubre": es el que define cuánto se puede subir
   sin que parta en dos renglones. */
.dato dd {
  margin: 3px 0 0;
  font-size: clamp(.86rem, 3.3vw, 1.25rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--tinta);
}

/* Los enlaces de los boxes (el salón y el teléfono) van SIN subrayado:
   dentro de un recuadro chico el subrayado ensucia más de lo que ayuda.
   Se subrayan al pasar el mouse y al enfocarlos con el teclado, así no
   se pierde la pista de que son tocables. */
.dato dd a {
  color: inherit;
  text-decoration: none;
}
.dato dd a:hover,
.dato dd a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Aviso debajo de los cuatro boxes */
.datos__aviso {
  margin: 9px 0 0;
  font-size: .8rem;
  line-height: 1.3;
  color: var(--tinta-suave);
  text-align: center;
}
.dato dd a { color: inherit; text-underline-offset: 3px; }

/* Lleva la dirección y el aviso del estacionamiento, así que en pantalla
   angosta ocupa dos renglones: por eso va compacta. */
.dato__nota {
  display: block;
  font-size: .76rem;
  font-weight: 300;
  line-height: 1.25;
  color: var(--tinta-suave);
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin: 12px 0 0;
}
/* En la portada los botones van más chicos que el botón estándar: la
   barra de arriba ya ofrece la misma navegación, así que acá son un
   atajo y no el elemento principal. */
.portada__acciones .boton {
  padding: 10px 20px;
  font-size: .9rem;
}

/* Salto de renglón dentro del flex: ocupa todo el ancho y nada de alto */
.salto-fila {
  flex: 0 0 100%;
  height: 0;
}

/* ============================================================
   MENÚ DE SECCIONES
   Se pega arriba al scrollear. En celular la fila se desliza en
   horizontal en vez de apilarse, para no comerse la pantalla.
   ============================================================ */
.menu {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--celeste-borde);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.menu__lista {
  display: flex;
  justify-content: center;
  gap: 8px;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 7px var(--pad);
  list-style: none;
  /* Si no entran, se desliza en lugar de romper el diseño */
  overflow-x: auto;
  scrollbar-width: none;
}
.menu__lista::-webkit-scrollbar { display: none; }

.menu__boton {
  display: block;
  padding: 8px 17px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--tinta-suave);
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.menu__boton:hover {
  background: var(--celeste-claro);
  color: var(--celeste-profundo);
}

/* Sección en la que está parado el visitante */
.menu__boton[aria-current="true"] {
  background: var(--celeste-profundo);
  border-color: var(--celeste-profundo);
  color: var(--blanco);
}

/* Al navegar con los botones, el título no queda tapado por la barra */
#inicio,
.seccion,
#contacto {
  scroll-margin-top: var(--alto-menu);
}

/* Cada sección ocupa la pantalla completa (descontando la barra), así
   al tocar un botón del menú se ve ESA sección y no retazos de la
   siguiente. Es también lo que evita que "Sponsors" termine mostrando
   Contacto: sin altura suficiente, el navegador no puede llevar la
   sección hasta el borde de arriba. */
.seccion {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--alto-menu));
  min-height: calc(100dvh - var(--alto-menu));
}

/* ============================================================
   BOTONES
   ============================================================ */
.boton {
  display: inline-block;
  padding: 14px 30px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.boton--celeste {
  background: var(--celeste-profundo);
  color: var(--blanco);
}
.boton--celeste:hover { background: var(--celeste-oscuro); transform: translateY(-1px); }

.boton--linea {
  border-color: var(--celeste-profundo);
  color: var(--celeste-profundo);
}
.boton--linea:hover { background: rgba(1, 102, 155, .08); }

.enlace {
  color: var(--celeste-profundo);
  font-weight: 500;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.enlace:hover { color: var(--celeste-oscuro); }

/* ============================================================
   SECCIONES
   ============================================================ */
.seccion { padding: 64px 0; }
.seccion--gris { background: var(--gris-fondo); }
.seccion--celeste { background: var(--celeste-claro); }

.seccion__titulo {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  line-height: 1.12;
  text-align: center;
  color: var(--tinta);
}
.seccion__titulo::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 2px;
  background: var(--celeste);
}

.seccion__intro {
  max-width: var(--ancho-texto);
  margin: 18px auto 34px;
  text-align: center;
  color: var(--tinta-suave);
}

.texto {
  max-width: var(--ancho-texto);
  margin: 28px auto 0;
}
.texto p { margin: 0 0 1.1em; }

.texto__cierre {
  max-width: var(--ancho-texto);
  margin: 28px auto 0;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--celeste-profundo);
}

.nota { font-size: 1rem; color: var(--tinta-suave); }
.nota--centrada {
  max-width: 60ch;
  margin: 28px auto 0;
  text-align: center;
}

/* ============================================================
   CATEGORÍAS DE SPONSOR
   ============================================================ */
.categorias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* Tarjeta blanca con una franja metálica arriba (opción D de la maqueta
   en pruebas/maqueta-sponsors.html).
   Por qué así y no con el metal de fondo: el dorado y el plateado
   brillantes con texto encima dan 2,4:1 y 2,1:1 de contraste, muy por
   debajo del mínimo de 4,5:1, y se vuelven ilegibles al sol o con el
   brillo bajo. Acá el metal identifica la categoría sin sostener
   texto, y la lectura queda en 14,7:1. Además imprime bien. */
.categoria {
  padding: 0 20px 26px;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--tinta);
  text-align: center;
  box-shadow: 0 8px 20px rgba(27, 42, 51, .08);
}

/* La franja. Los márgenes negativos la estiran de borde a borde,
   compensando el padding lateral de la tarjeta. */
.franja {
  display: block;
  height: 10px;
  margin: 0 -20px 22px;
  /* Categoría sin clave definida: franja celeste de la marca */
  background: linear-gradient(90deg, var(--celeste-claro), var(--celeste));
}
.categoria--oro   .franja { background: linear-gradient(90deg, #f2d472, #c9a227); }
.categoria--plata .franja { background: linear-gradient(90deg, #e8edf1, #9aa5ad); }
.categoria--cobre .franja { background: linear-gradient(90deg, #e4a883, #b06a3c); }

.categoria__ante {
  margin: 0;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
/* El nombre toma el tono oscuro del metal: identifica la categoría y
   además llega al contraste que el metal brillante no da. */
.categoria__nombre {
  margin: 2px 0 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--tinta);
}
.categoria--oro   .categoria__nombre { color: #6b5010; }
.categoria--plata .categoria__nombre { color: #48525a; }
.categoria--cobre .categoria__nombre { color: #7a3f22; }

.categoria__monto {
  margin: 0;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--celeste-profundo);
}

/* ============================================================
   PAGO
   ============================================================ */
.pago {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  align-items: start;
  max-width: 860px;
  margin: 34px auto 0;
}

/* ---------- Cuánto hay que pagar ---------- */
.montos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  max-width: 620px;
  margin: 0 auto 40px;
  padding: 0;
  list-style: none;
}
/* Cuando hay nota debajo, la lista cede su margen de abajo: si no, los
   40 px quedan entre las tarjetas y la nota, y la nota termina más
   cerca de los QR que de los importes que aclara. La clase la agrega
   pagina.js solo si la nota se muestra, así que cuando no hay nota la
   separación de siempre no se toca. */
.montos--con-nota {
  margin-bottom: 14px;
}
.montos__nota {
  max-width: 620px;
  margin: 0 auto 40px;
  font-size: .95rem;
  text-align: center;
  color: var(--tinta-suave);
}

.monto {
  padding: 22px 18px;
  border: 1px solid var(--celeste-borde);
  border-radius: var(--radio);
  background: var(--celeste-muy-claro);
  text-align: center;
}
.monto__etiqueta {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--tinta);
}
.monto__detalle {
  margin: 4px 0 0;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.monto__valor {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--celeste-profundo);
}

/* ---------- Tarjetas de QR ---------- */
.qrs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  max-width: 620px;
  margin: 0 auto;
}
.qr {
  padding: 26px 22px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--blanco);
  text-align: center;
}
.qr--destacado {
  border-color: var(--celeste-borde);
  box-shadow: 0 10px 28px rgba(1, 102, 155, .1);
}
.qr__titulo {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--tinta);
}
.qr__img {
  display: block;
  width: 100%;
  max-width: 200px;
  margin: 0 auto 14px;
  /* El QR tiene que quedar nítido: sin suavizado al escalar */
  image-rendering: pixelated;
}
.qr .nota { margin: 0 0 14px; }
.qr p:last-child { margin-bottom: 0; }

/* Frase que invita a tocar el logo */
.qr__invita { margin: 4px 0 10px !important; }

/* Botón de Mercado Pago: el logo ES el botón.
   El logo viene con su propio óvalo azul, así que NO se lo mete dentro
   de un botón de color: se lo apoya sobre blanco con un marco suave, y
   el marco más la sombra son los que comunican que se toca. */
.mp {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--celeste-borde);
  border-radius: 14px;
  background: var(--blanco);
  box-shadow: 0 4px 12px rgba(1, 102, 155, .12);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mp:hover,
.mp:focus-visible {
  transform: translateY(-2px);
  border-color: var(--celeste);
  box-shadow: 0 8px 20px rgba(1, 102, 155, .2);
}
.mp__logo {
  display: block;
  /* El archivo mide 165 px de ancho: no se agranda más allá de eso
     para que no se vea pixelado. */
  width: 100%;
  max-width: 165px;
  height: auto;
}

/* Datos para transferir, dentro de la tarjeta del QR y debajo del link
   de pago: alias, CBU, titular y CUIT.
   La etiqueta va al MISMO tamaño que el valor, no como rotulito chico:
   las dos palabras se leen juntas. */
.qr__datos {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
  text-align: left;
}
/* El alias: es el dato que se usa para pagar, así que va destacado */
.qr__dato {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  justify-content: center;
}
.qr__dato-etiqueta {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--tinta-suave);
}
.qr__dato-valor {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--tinta);
  overflow-wrap: anywhere;
}

/* CBU, titular y CUIT: referencia para verificar la cuenta, no datos
   para tipear. En letra chica y sin botón, para no competir con el
   alias. Las cifras van de ancho fijo para poder cotejarlas de a una. */
.qr__ref {
  margin: 8px 0 0;
  font-size: .82rem;
  /* Interlineado apretado: son tres renglones de un mismo párrafo */
  line-height: 1.3;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.qr__ref:first-child { margin-top: 0; }
.qr__ref-etiqueta {
  font-weight: 500;
  color: #7a8891;
}

.pago__datos { padding: 8px 0; }

.pago__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--borde);
}
.pago__etiqueta {
  flex: 0 0 72px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.pago__valor {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--tinta);
  overflow-wrap: anywhere;
}

.boton-copiar {
  flex: 0 0 auto;
  padding: 7px 16px;
  border: 1px solid var(--celeste-borde);
  border-radius: 999px;
  background: var(--celeste-claro);
  color: var(--celeste-profundo);
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
}
.boton-copiar:hover { background: #d9edf8; }

.aviso {
  margin: 22px 0 0;
  padding: 16px 18px;
  border-left: 4px solid var(--celeste);
  border-radius: 0 8px 8px 0;
  background: var(--celeste-claro);
  font-size: .92rem;
  color: var(--tinta);
}

.aviso-copiado {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 50;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--blanco);
  font-size: .92rem;
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.aviso-copiado.visible { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   FORMULARIO EMBEBIDO
   ============================================================ */
.formulario {
  max-width: 860px;
  margin: 0 auto;
}
.formulario iframe {
  display: block;
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--blanco);
}
/* Botón para abrir el formulario aparte, arriba del recuadro */
.formulario__accion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
}
.formulario__aclaracion {
  font-size: .9rem;
  color: var(--tinta-suave);
  text-align: center;
}

.formulario__respaldo {
  margin: 18px 0 0;
  text-align: center;
}

/* ============================================================
   PLANILLA PARA MESAS
   Bloque aparte, debajo del formulario. Se distingue con fondo y borde
   propios porque es un camino ALTERNATIVO, no un paso más del de arriba.
   ============================================================ */
.planilla {
  max-width: 660px;
  margin: 34px auto 0;
  padding: 26px 24px;
  border: 1px solid var(--celeste-borde);
  border-radius: var(--radio);
  background: var(--celeste-claro);
  text-align: center;
}
.planilla__titulo {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 700;
  color: var(--celeste-profundo);
}
.planilla__texto {
  max-width: 52ch;
  margin: 0 auto;
  font-size: 1rem;
  color: var(--tinta);
}
/* Recordatorio del pago. Mismo ancho de medida que el texto de arriba
   para que los dos párrafos corten en la misma columna, y un poco de
   aire arriba para que se lea como un aviso aparte y no como la
   continuación de la instrucción de la planilla. */
.planilla__aviso {
  max-width: 52ch;
  margin: 12px auto 0;
  font-size: 1rem;
  color: var(--tinta);
}

.planilla__accion {
  display: flex;
  justify-content: center;
  margin: 18px 0 0;
}
/* La flecha hacia abajo es la señal universal de descarga */
.planilla__accion .boton {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.planilla__accion .boton svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
}
.planilla__aclaracion {
  margin: 10px 0 0;
  font-size: .86rem;
  color: var(--tinta-suave);
}

/* ============================================================
   MURO DE SPONSORS
   Los logos de quienes ya se sumaron, agrupados por categoría y
   debajo del teléfono de la sección Sponsors.

   Dos decisiones que vienen de haberlo probado con logos de
   proporciones reales (pruebas/maqueta-sponsors-logos.html):

   1) El tamaño baja de Oro a Cobre. Es la convención de los muros de
      sponsors y es lo que hace que la categoría más cara se note.

   2) El logo se limita por max-height Y max-width, y el alto lo marca
      la caja. Con alto fijo más ancho máximo, un logo muy alargado
      (probado con uno de 5,31 de proporción) se RECORTABA en lugar de
      achicarse. Así cada uno entra completo y el conjunto igual se ve
      parejo, sin importar si el logo es cuadrado o alargado.
   ============================================================ */
.muro {
  max-width: 900px;
  margin: 34px auto 0;
}
.muro__intro {
  margin: 0 0 20px;
  text-align: center;
  font-size: .95rem;
  color: var(--tinta-suave);
}

.nivel { margin: 0 0 26px; }
.nivel:last-child { margin-bottom: 0; }

/* Título de cada franja, con una línea fina a los costados */
.nivel__titulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nivel__titulo::before,
.nivel__titulo::after {
  content: "";
  height: 1px;
  flex: 1 1 40px;
  max-width: 90px;
}
.nivel--oro   .nivel__titulo { color: #6b5010; }
.nivel--plata .nivel__titulo { color: #48525a; }
.nivel--cobre .nivel__titulo { color: #7a3f22; }
.nivel--oro   .nivel__titulo::before, .nivel--oro   .nivel__titulo::after { background: #e0c574; }
.nivel--plata .nivel__titulo::before, .nivel--plata .nivel__titulo::after { background: #c2ccd3; }
.nivel--cobre .nivel__titulo::before, .nivel--cobre .nivel__titulo::after { background: #dcb69c; }

.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.logo {
  display: grid;
  place-items: center;
  padding: 10px 16px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--blanco);
}
.logo a { display: block; }
.logo img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Jerarquía de tamaños: la caja marca el alto, el logo entra adentro */
.nivel--oro   .logo { min-height: 84px; }
.nivel--plata .logo { min-height: 66px; }
.nivel--cobre .logo { min-height: 56px; }
.nivel--oro   .logo img { max-height: 64px; max-width: 230px; }
.nivel--plata .logo img { max-height: 46px; max-width: 180px; }
.nivel--cobre .logo img { max-height: 36px; max-width: 150px; }

/* ============================================================
   PIE — quiénes organizan
   ============================================================ */
.pie {
  /* Una pantalla completa de alto. Hacen falta dos cosas:
     que "Sponsors" pueda subir hasta el borde de arriba, y que
     "Contacto" no quede a mitad de pantalla por no tener nada
     debajo que permita seguir scrolleando. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 0 48px;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, var(--celeste-claro) 100%);
  border-top: 1px solid var(--celeste-borde);
}
/* "Organizan": rótulo del bloque de instituciones.
   Nunca debe verse más grande que los nombres que encabeza, así que
   escala con el ancho igual que ellos. */
.pie__titulo {
  margin: 52px 0 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.6rem);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--celeste-medio);
}

.organizan {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 0;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.organizan li {
  padding: 0 30px;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
}
/* Separadores verticales, como en el pie del flyer */
.organizan li + li { border-left: 1px solid var(--celeste-borde); }
.organizan img { max-height: 58px; width: auto; }

/* El teléfono es la acción principal del pie: va grande */
.pie__contacto {
  margin: 26px 0 0;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
}
.pie__contacto a {
  color: var(--celeste-profundo);
  font-weight: 500;
  text-underline-offset: 5px;
}
/* Quién invita: mismo serif que las instituciones, en celeste y sin
   negrita, para que se lea como una línea de cortesía y no como una
   cuarta organización. */
.pie__invita {
  margin: 26px 0 0;
  font-family: var(--serif);
  font-style: italic;
  /* Un punto por encima de los nombres de las instituciones: es quien
     convoca, así que pesa más que la lista de organizadores. */
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: 600;
  color: var(--celeste-profundo);
}

.pie__legal {
  max-width: 56ch;
  margin: 46px auto 0;
  font-size: 1.05rem;
  color: var(--tinta-suave);
}

/* Estrella de cierre, al pie de todo */
.pie__cierre {
  display: block;
  width: 78px;
  height: auto;
  margin: 44px auto 0;
  color: var(--celeste);
  opacity: .85;
}

/* ============================================================
   CELULAR
   ============================================================ */
@media (max-width: 600px) {
  .seccion { padding: 40px 0; }
  .portada { padding: 14px 12px 20px; }
  .portada__panel {
    padding: 22px 16px 20px;
    border-radius: 20px;
  }
  /* Los datos siguen de dos por renglón, con el texto más chico */
  .datos { gap: 7px; }
  .dato { padding: 9px 10px; }
  /* El tamaño de la letra lo maneja el clamp por ancho, que ya se
     encarga de las pantallas angostas. Acá solo se aprieta el espaciado
     entre letras y la separación del ícono. */
  .dato dt { letter-spacing: .06em; gap: 6px; }
  .datos__aviso { font-size: .74rem; margin-top: 7px; }
  /* Tres botones apilados a todo el ancho se comían 151 px y sacaban
     la portada de la pantalla. Compactos entran en dos renglones
     (unos 78 px) sin tocar las etiquetas. */
  .portada__acciones { gap: 8px; }
  .portada__acciones .boton {
    flex: 0 1 auto;
    padding: 8px 10px;
    font-size: .76rem;
    text-align: center;
  }

  /* El pie también se comprime por ancho, no solo por alto: en un
     celular las tres instituciones se apilan y, con la línea de
     "Invita", el bloque se pasaba de pantalla. */
  .pie { padding: 30px 0 26px; }
  .pie__contacto { margin-top: 14px; }
  .pie__titulo { margin: 22px 0 12px; }
  .pie__invita { margin-top: 14px; }
  .pie__legal { margin-top: 18px; }
  .pie__cierre { width: 44px; margin-top: 18px; }
  .pie__version { margin-top: 12px; }
  .pago__etiqueta { flex-basis: 100%; }

  /* En pantalla angosta los separadores del pie molestan */
  .organizan li { padding: 10px 16px; }
  .organizan li + li { border-left: 0; border-top: 1px solid var(--celeste-borde); }

  /* El muro baja un escalón de tamaño en celular */
  .muro { margin-top: 26px; }
  .logos { gap: 9px; }
  .logo { padding: 8px 11px; }
  .nivel--oro   .logo { min-height: 64px; }
  .nivel--plata .logo { min-height: 52px; }
  .nivel--cobre .logo { min-height: 46px; }
  .nivel--oro   .logo img { max-height: 44px; max-width: 150px; }
  .nivel--plata .logo img { max-height: 32px; max-width: 120px; }
  .nivel--cobre .logo img { max-height: 28px; max-width: 105px; }
}

/* ============================================================
   PANTALLAS BAJAS  (iPhone SE, Android chicos, ventanas recortadas)

   Medido a 375x667: la portada pedía 736 px y solo había 608.
   Los dos culpables eran los botones apilados (125 px) y los cuatro
   bloques de datos (210 px). Acá se comprimen los dos, en vez de
   bajar el tamaño de todo el texto de la página.
   Va al final del archivo para poder pisar la regla de ancho ≤600px,
   que es la que apila los botones.
   ============================================================ */
@media (max-height: 780px) {

  .portada__panel { padding: 16px 18px 16px; }

  .marca { margin-bottom: 6px; }
  /* Escalan con el alto disponible en vez de quedar fijas: así un
     monitor bajo pero ancho (1024x768) no recibe el tamaño pensado
     para un celular. */
  .marca__estrella { width: clamp(44px, 7.6vh, 70px); }
  .marca__nombre { font-size: clamp(1.55rem, 4.1vh, 2.25rem); }
  .marca__bajada { font-size: .66rem; letter-spacing: .3em; text-indent: .3em; }

  .titulo {
    margin-bottom: 8px;
    font-size: clamp(1.45rem, min(6.4vw, 4.4vh), 2.4rem);
  }
  .llamado { font-size: clamp(1rem, 2.4vh, 1.3rem); }

  .datos { margin-top: 10px; gap: 6px; }
  .dato {
    grid-template-columns: 20px 1fr;
    padding: 6px 10px;
  }
  /* Pantalla baja: se recorta un poco el techo del clamp para que la
     portada siga entrando, pero el piso lo sigue poniendo el ancho. */
  .dato dt { font-size: clamp(.72rem, 1.9vw, .92rem); letter-spacing: .04em; }
  .dato dd { font-size: clamp(.84rem, 3vw, 1.05rem); line-height: 1.25; }
  .dato__nota { font-size: .72rem; line-height: 1.2; }
  .dato__icono svg { width: 17px; height: 17px; }

  /* Lo que más espacio recupera: los botones en una sola línea */
  .portada__acciones { margin-top: 12px; gap: 8px; }
  /* Ajustado para que "Reservar en línea" y "Sumate como sponsor"
     entren juntos en un renglón: apilados costaban 47 px de más. */
  .portada__acciones .boton {
    flex: 0 1 auto;
    padding: 8px 11px;
    font-size: .78rem;
  }
}

/* Pantallas todavía más bajas (640–700 px de alto).
   Quedaban 31 px de más a 360x640: se recuperan de los márgenes, sin
   esconder ningún dato. */
@media (max-height: 700px) {
  .portada { padding: 8px 12px 10px; }
  .portada__panel { padding: 10px 14px 11px; }

  .marca { margin-bottom: 4px; }
  .marca__estrella { width: clamp(40px, 6.6vh, 56px); }
  .marca__nombre { font-size: clamp(1.4rem, 3.7vh, 1.85rem); }

  .titulo { margin-bottom: 6px; }

  .datos { margin-top: 6px; gap: 4px; }
  .dato { padding: 4px 8px; }
  .dato dd { font-size: clamp(.82rem, 2.9vw, 1rem); }

  .portada__acciones { margin-top: 10px; gap: 7px; }
  .portada__acciones .boton { padding: 7px 9px; font-size: .74rem; }
}

/* Pantallas muy bajas (≤600 px de alto, tipo iPhone SE de 1ª generación).
   Acá los dos botones de la portada no entran ni en una línea, y son
   redundantes: la barra de arriba ya lleva a Reservar y a Sponsors.
   Se ocultan para que la portada entre completa. */
@media (max-height: 600px) {
  .portada__acciones { display: none; }

}

/* ============================================================
   BARRA DE MENÚ EN CELULAR

   Con cinco botones (Inicio · Reservar · Pagar · Sponsors · Contacto)
   la fila medía 473 px contra 375 de pantalla, así que "Contacto"
   quedaba fuera de vista y había que deslizar. Se compacta para que
   entren los cinco de una. El deslizamiento horizontal sigue activo
   como red de seguridad en pantallas más angostas todavía.
   ============================================================ */
@media (max-width: 600px) {
  .menu__lista {
    gap: 4px;
    padding: 7px 6px;
    justify-content: space-between;
  }
  .menu__boton {
    padding: 7px 8px;
    font-size: .74rem;
  }
}

/* ============================================================
   VERSIÓN Y ENTORNO
   ============================================================ */

/* Acá vivía .cartel-sandbox, una franja ámbar de ancho completo.
   La quitamos: al ir arriba de todo desplazaba el menú pegajoso y en
   celulares dejaba los botones de sección fuera de la vista. Ahora el
   aviso de entorno va en el título de la pestaña y en el pie. */

/* Versión al pie: discreta, pero legible si la vas a buscar */
.pie__version {
  margin: 22px 0 0;
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--tinta-suave);
  opacity: .75;
}

/* ============================================================
   EL PIE EN PANTALLAS BAJAS

   Con los tamaños grandes, a 375x667 el pie pedía 855 px contra 617
   de pantalla útil y se cortaba la estrella. Acá se recuperan esos
   240 px de los márgenes y del tamaño de la estrella, sin sacar
   ningún dato ni bajar el texto por debajo de lo legible.
   ============================================================ */
@media (max-height: 780px) {
  .pie { padding: 26px 0 22px; }

  .pie__contacto { margin: 16px 0 0; font-size: clamp(1.25rem, 3vw, 1.6rem); }

  .pie__titulo { margin: 22px 0 14px; }

  .organizan { margin-bottom: 0; }
  .organizan li { font-size: clamp(1.05rem, 2vw, 1.3rem); }

  .pie__invita { margin-top: 16px; font-size: clamp(1.2rem, 2.1vw, 1.55rem); }

  .pie__legal { margin-top: 20px; font-size: .95rem; }

  .pie__cierre { width: 46px; margin-top: 20px; }

  .pie__version { margin-top: 12px; }
}

@media (max-height: 700px) {
  .pie { padding: 18px 0 16px; }
  .pie__contacto { margin-top: 12px; }
  .pie__titulo { margin: 16px 0 10px; }
  .organizan li { padding: 6px 14px; }
  .pie__invita { margin-top: 12px; }
  .pie__legal { margin-top: 14px; }
  .pie__version { margin-top: 8px; }
  .pie__cierre { width: 38px; margin-top: 14px; }
}

/* Pie en pantallas muy bajas (≤600 px).
   ⚠️ Este bloque va AL FINAL del archivo a propósito: las reglas de
   780 y 700 px también aplican en una pantalla de 568, y con la misma
   especificidad gana la última que aparece. Si se lo mueve más arriba,
   deja de tener efecto. */
@media (max-height: 600px) {
  .pie { padding: 10px 0 10px; }
  .pie__contacto { margin-top: 8px; font-size: 1.2rem; }
  .pie__titulo { margin: 10px 0 8px; }
  .organizan li { padding: 2px 12px; }
  .pie__titulo { margin: 8px 0 6px; }
  .pie__contacto { margin-top: 6px; }
  .pie__invita { margin-top: 5px; font-size: 1.08rem; }
  .pie__legal { margin-top: 5px; font-size: .86rem; }
  .pie__cierre { width: 22px; margin-top: 4px; }
  .pie__version { margin-top: 2px; }
}

/* ============================================================
   ALTO DEL FORMULARIO EN PANTALLAS ANGOSTAS

   El alto base lo pone pagina.js con el atributo height del iframe
   (DATOS.formulario.alto = 1120), medido en escritorio. En pantallas
   angostas las preguntas ocupan más renglones y el formulario crece:
   medido con Chrome, 1176 px a 500 de ancho contra 1068 a 860. Estas
   reglas lo estiran para que no aparezca scroll dentro del recuadro.

   ⚠️ Van AL FINAL del archivo por el mismo motivo que el bloque de
   arriba: hay media queries anteriores con la misma especificidad y
   gana la última.

   Un iframe de otro dominio no puede reportar su alto, así que esto es
   un compromiso: el número cubre la página más alta que medí.
   ============================================================ */
@media (max-width: 700px) {
  .formulario iframe { height: 1260px; }
}
@media (max-width: 420px) {
  .formulario iframe { height: 1360px; }
}

/* ============================================================
   MENÚ DE 6 BOTONES EN PANTALLAS ANGOSTAS

   Al mostrarse la sección "Nosotros" el menú pasó de 5 a 6 botones y
   dejó de entrar: medido, la fila mide 424 px contra 360 de pantalla,
   así que "Contacto" quedaba fuera de vista (y a 320 px también
   "Sponsors"). El deslizamiento horizontal seguía funcionando, pero la
   barra de scroll está oculta a propósito, así que no había ninguna
   señal de que hubiera más botones a la derecha: en la práctica, dos
   secciones inalcanzables.

   No se comprime más porque la fuente ya está en .74rem (11,8 px) y
   bajar de ahí deja el menú ilegible. La alternativa era dejar el
   deslizamiento y agregarle un degradado como pista, pero seguiría
   dependiendo de que el visitante adivine que puede arrastrar.

   Así que en dos renglones. Cuesta unos 35 px de alto en una barra que
   es pegajosa, y ese es el compromiso: se pierde un poco de primera
   pantalla a cambio de que los seis destinos se vean sin descubrir un
   gesto oculto.

   ⚠️ Va AL FINAL del archivo por lo mismo que los otros bloques de
   abajo: el media query de 600 px también aplica acá y tiene la misma
   especificidad, así que gana el último que aparece.
   ============================================================ */
@media (max-width: 430px) {
  .menu__lista {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 5px;
    /* Ya no hace falta deslizar: entran todos */
    overflow-x: visible;
  }
}