/* Qué Hacemos Córdoba — web de promoción. Estilo nocturno: fondo negro, el
   naranja de la barra de la app como protagonista, fichas claras. */

:root {
  --naranja: #F37017;
  --naranja-osc: #C4560C;
  --fondo: #0E0B09;
  --fondo-2: #1A1411;
  --borde-osc: #2E2520;
  --crema: #F0E2D7;
  --texto: #F5EDE6;
  --texto-suave: #B8A99C;
  --tinta: #2A211B;
  --tinta-suave: #6B5D52;
  --radio: 14px;
  --ancho: 1600px;
  --barra-app: 64px;
}

/* Colores de las 12 categorías (theme "normal" de la app). --c es el de la
   app; --c-tinte, el fondo claro de la ficha; --c-texto, el mismo color
   oscurecido hasta leerse sobre el tinte (4.8:1). */
.cat-teatro{--c:#1F7A80;--c-borde:#1F7A80;--c-tinte:#D8E3E0;--c-texto:#1B696E}
.cat-musica{--c:#DAAA6C;--c-borde:#DAAA6C;--c-tinte:#F6EBDD;--c-texto:#7A5F3C}
.cat-danza{--c:#FB7991;--c-borde:#FB7991;--c-tinte:#FBE3E2;--c-texto:#9C4B5A}
.cat-standup{--c:#FCD45D;--c-borde:#D6B44F;--c-tinte:#FBF1DA;--c-texto:#79662D}
.cat-arte{--c:#2F6DB5;--c-borde:#2F6DB5;--c-tinte:#DAE1E8;--c-texto:#29609F}
.cat-cine{--c:#A63D4A;--c-borde:#A63D4A;--c-tinte:#EDD9D7;--c-texto:#9F3B47}
.cat-cursos{--c:#8B7355;--c-borde:#8B7355;--c-tinte:#E9E2D9;--c-texto:#6F5C44}
.cat-ferias{--c:#AFAB50;--c-borde:#AFAB50;--c-tinte:#EFEBD8;--c-texto:#696730}
.cat-calle{--c:#92B395;--c-borde:#92B395;--c-tinte:#EAECE3;--c-texto:#556856}
.cat-ninos{--c:#F5DD7E;--c-borde:#D0BC6B;--c-tinte:#FAF3DF;--c-texto:#766A3C}
.cat-redes{--c:#6B8E8E;--c-borde:#6B8E8E;--c-tinte:#E4E6E2;--c-texto:#4D6666}
.cat-mic{--c:#C49BC3;--c-borde:#C49BC3;--c-tinte:#F2E8EA;--c-texto:#765D75}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 16px/1.5 "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  padding-bottom: calc(var(--barra-app) + 24px);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-weight: 800; line-height: 1.15; margin: 0; }
.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }
.oculto { display: none !important; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }

/* ---------- Barra naranja (la del AppBar de la app) ---------- */
/* Fija arriba al bajar: el menú siempre a mano. */
.barra {
  background: var(--naranja);
  position: sticky; top: 0;
  z-index: 3;
}
/* El borde de abajo ondula como en la propuesta: más hondo debajo del globo,
   sube y vuelve a bajar apenas hacia la derecha. */
.barra::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 26px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 40' preserveAspectRatio='none'%3E%3Cpath fill='%23F37017' d='M0 0H1000V15C880 6 700 1 500 5C360 8 250 38 150 40C90 41 40 37 0 34Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.barra .contenedor {
  display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding-top: 6px; padding-bottom: 2px;
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; position: relative; z-index: 1; }
.marca img { width: 64px; height: auto; }
.barra .boton-chico { margin-left: 12px; }

/* Menú de la barra. En el celular: íconos con el nombre abajo, como las
   pestañas de una app. Contacto abre WhatsApp. */
.menu { display: flex; gap: 2px; margin-left: auto; }

/* Buscador: "Buscar" en el menú abre un panel en el centro (app.js). Solo
   desde la tableta horizontal; en el celular, la respuesta a "quiero
   buscar" es la app. */
.menu .menu-buscar { display: none; }
@media (min-width: 1024px) {
  .menu .menu-buscar { display: flex; }
}
.buscador {
  margin: 96px auto auto; width: min(640px, 92vw); padding: 14px; border: 1px solid var(--borde-osc);
  border-radius: 18px; background: var(--fondo-2); color: var(--texto);
  box-shadow: 0 0 0 1px rgba(243,112,23,.25), 0 30px 80px rgba(0,0,0,.7);
}
.buscador::backdrop { background: rgba(8,6,5,.7); backdrop-filter: blur(4px); }
.buscador-campo { position: relative; }
.buscador-campo svg {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px;
  fill: none; stroke: var(--naranja); stroke-width: 2.4; stroke-linecap: round; pointer-events: none;
}
.buscador input {
  width: 100%; border: 0; border-radius: 12px; padding: 14px 52px 14px 50px;
  background: #fff; color: var(--tinta); font: 700 18px "Nunito", sans-serif;
}
.buscador input::placeholder { color: var(--tinta-suave); font-weight: 600; }
.buscador input:focus { outline: 3px solid rgba(243,112,23,.5); }
.buscador input::-webkit-search-cancel-button { display: none; }
.buscador-cerrar {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent;
  color: var(--tinta-suave); font-size: 28px; line-height: 1; cursor: pointer;
}
.buscador-cerrar:hover { background: #F0E2D7; color: var(--tinta); }
.buscar-resultados {
  margin: 10px 0 0; padding: 0; list-style: none;
  max-height: calc(100vh - 250px); overflow-y: auto;
}
.buscar-resultados a {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 7px 8px; border-radius: 10px; text-decoration: none; color: var(--texto);
}
.buscar-resultados img { width: 40px; height: 54px; object-fit: cover; border-radius: 5px; background: #3a302a; }
.buscar-resultados b, .buscar-resultados span {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.buscar-resultados b { font-size: 15px; }
.buscar-resultados span { font-size: 13px; color: var(--texto-suave); }
.buscar-resultados a:hover, .buscar-resultados [aria-selected="true"] a { background: rgba(243,112,23,.2); }
.buscar-resultados .vacio { padding: 10px 12px; font-size: 14px; }
.menu a {
  display: flex; align-items: center; gap: 7px; position: relative;
  color: #fff; text-decoration: none; font-weight: 700; font-size: 15.5px;
  padding: 8px 12px; border-radius: 999px; text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.menu svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.menu svg .lleno { fill: currentColor; stroke: none; }
.menu a:hover { background: rgba(255,255,255,.16); }
.menu a[aria-current] { background: rgba(0,0,0,.14); }
.menu a[aria-current]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 1px;
  height: 2.5px; border-radius: 2px; background: #fff;
}
@media (max-width: 719px) {
  .menu { gap: 4px; }
  .menu a {
    flex-direction: column; gap: 1px; padding: 5px 10px 6px; border-radius: 12px;
    font-size: 11.5px; line-height: 1.1;
  }
  .menu svg { width: 22px; height: 22px; }
  .menu a[aria-current]::after { display: none; }
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--naranja); color: #fff; text-decoration: none;
  font-weight: 800; font-size: 18px;
  padding: 14px 26px; border-radius: 999px; border: 0; cursor: pointer;
  box-shadow: 0 6px 24px rgba(243,112,23,.35);
  transition: transform .15s, background .15s;
}
.boton:hover { background: #FF7F26; transform: translateY(-1px); }
.boton svg { width: 22px; height: 22px; flex: none; }
.boton-chico {
  display: none; color: #fff; text-decoration: none; font-weight: 800; font-size: 15px;
  border: 2px solid rgba(255,255,255,.85); border-radius: 999px; padding: 6px 14px;
}
.boton-borde {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-weight: 700; padding: 10px 18px; border-radius: 999px;
  border: 2px solid var(--borde-osc); color: var(--texto);
}
.boton-borde:hover { border-color: var(--naranja); }

/* ---------- Hero con la Catedral ---------- */
.hero {
  position: relative; padding: 56px 0 40px;
  min-height: 360px; display: flex; align-items: center; overflow: hidden;
}
.hero .contenedor { width: 100%; }
.hero-foto {
  position: absolute; inset: 0; z-index: -1;
}
.hero-foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%;
}
.hero-foto::after {
  /* Velo: negro a la izquierda (texto) y abajo (se funde con la página y tapa
     el cartel del frente de la foto), con un toque de naranja. */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--fondo) 0%, rgba(14,11,9,.85) 35%, rgba(14,11,9,.1) 75%),
    linear-gradient(0deg, var(--fondo) 0%, rgba(14,11,9,0) 45%),
    linear-gradient(0deg, rgba(243,112,23,.14), rgba(243,112,23,.14));
}
.hero h1 { font-size: clamp(34px, 7vw, 64px); max-width: 12ch; }
.hero h1 br { display: none; }
.hero h1 em { font-style: normal; color: var(--naranja); }
.hero p { color: var(--texto-suave); font-size: 18px; margin: 14px 0 24px; max-width: 34ch; }
.hero-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.hero .numeros { font-size: 15px; margin: 0; color: var(--crema); }
.hero .numeros b { color: var(--naranja); }

/* ---------- Portada: columnas ---------- */
/* minmax(0, …): sin eso la fila deslizable estira la columna y la página
   se desborda a lo ancho en el celular. */
.portada { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 8px; }
.secciones, .columna-lateral { min-width: 0; }
.columna-lateral { display: flex; flex-direction: column; gap: 32px; }
.columna-lateral .bloque-app { order: 2; }
.columna-lateral .calendario { order: 1; }

/* ---------- Secciones (Hoy, Este finde…) ---------- */
/* El espacio entre secciones va como gap: así las ocultas (Hoy o Mañana
   vacíos) no dejan margen. */
.secciones { display: flex; flex-direction: column; gap: 36px; }
.seccion-cabeza {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 14px;
}
.seccion-cabeza h2 { font-size: clamp(26px, 4vw, 34px); display: flex; align-items: center; gap: 12px; }
.seccion-cabeza h2::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  background: var(--naranja); box-shadow: 0 0 12px var(--naranja);
}
.seccion-cabeza small { color: var(--texto-suave); font-weight: 600; font-size: 15px; }
/* Píldora chica pegada al título de cada sección. */
.ver-todo {
  color: var(--naranja); font-weight: 800; font-size: 14px; text-decoration: none; white-space: nowrap;
  border: 1.5px solid rgba(243,112,23,.55); border-radius: 999px; padding: 4px 12px;
  transition: background .15s, color .15s;
}
.ver-todo:hover { background: var(--naranja); border-color: var(--naranja); color: #fff; }
.vacio { color: var(--texto-suave); }

/* En el celular cada fila se desliza con el dedo y deja ver una ficha y
   media, para que se note que hay más. */
.fila {
  display: grid; grid-auto-flow: column; grid-auto-columns: 64%;
  gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -16px; padding: 12px 16px 14px; scrollbar-width: none;
}
.fila::-webkit-scrollbar { display: none; }
.fila > * { scroll-snap-align: start; }

/* Hoy y Mañana se deslizan de costado también en la computadora, con flechas.
   Hoy va más grande. */
.carrusel { position: relative; }
.carr-flecha {
  display: none; position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; padding: 0;
  border: 1px solid var(--borde-osc); background: rgba(20,15,12,.94); color: #fff;
  cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.6);
}
.carr-flecha svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}
.carr-flecha:hover { background: var(--naranja); border-color: var(--naranja); }
.carr-flecha[hidden] { display: none !important; }
.carr-ant { left: -20px; }
.carr-sig { right: -20px; }
.grande .ficha h3 { font-size: 18px; }
.grande .ficha-cuando { font-size: 16.5px; }
.grande .solapa { font-size: 13px; }

/* Desde pasado mañana: un bloque por día, en grilla. */
.dia-portada .seccion-cabeza h2 { font-size: 24px; }
.dia-portada .seccion-cabeza h2::before { width: 9px; height: 9px; box-shadow: none; }
.dia-portada .grilla { grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: 14px; padding-top: 4px; }
.marca-finde {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--naranja); border: 1.5px solid var(--naranja); border-radius: 999px; padding: 2px 9px;
}
.mas-agenda { margin: 12px 0 0; text-align: center; }
.aviso-vacio { margin: 0; color: var(--texto-suave); font-size: 15px; font-weight: 600; }

/* ---------- Ficha (tarjeta de evento, estilo fichero de la app 1.3.3) ---------- */
.ficha {
  position: relative; display: flex; flex-direction: column;
  text-decoration: none; color: var(--tinta);
  padding-top: 24px; /* lugar para la solapa */
}
.solapa {
  position: absolute; top: 0; left: 0; max-width: 92%;
  background: var(--c-tinte); color: var(--c-texto);
  border: 1.5px solid var(--c-borde); border-bottom: 0;
  border-radius: 10px 10px 0 0; padding: 3px 12px 4px;
  font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.solapa .nuevo { color: #B3261E; }
.ficha-cuerpo {
  flex: 1; display: flex; flex-direction: column;
  background: var(--c-tinte); border: 1.5px solid var(--c-borde);
  border-radius: 0 var(--radio) var(--radio) var(--radio); overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.ficha:hover .ficha-cuerpo { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.5), 0 0 0 1px var(--c); }
/* Los afiches son 600x900 (2:3); en la ficha van en 3:4, que recorta apenas
   arriba y abajo, donde suele haber relleno. */
.ficha-foto { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; background: #3a302a; }
.ficha-texto { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ficha h3 {
  font-size: 17px; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ficha hr { border: 0; border-top: 1.5px solid var(--c-borde); opacity: .55; margin: 6px 0 4px; width: 100%; }
.ficha-cuando { color: var(--c-texto); font-weight: 800; font-size: 15.5px; margin: 0; }
.ficha-donde { margin: 0; font-size: 14px; color: var(--tinta-suave); line-height: 1.3; }
.ficha-donde span { display: block; font-size: 13px; }
/* Todas las fichas del mismo alto: el título reserva dos renglones y la sala
   y el barrio van en uno cada uno (el nombre completo está en el evento). */
a.ficha h3 { min-height: 2.4em; }
/* min-width: 0: sin esto, con la sala en un renglón, la ficha se estira
   al largo del nombre completo y la página se desborda en el celular. */
a.ficha { min-width: 0; }
a.ficha .ficha-donde, a.ficha .ficha-donde span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ficha-precio { margin: auto 0 0; padding-top: 6px; font-weight: 700; font-size: 14.5px; }

/* ---------- Calendario con mapa de calor ---------- */
.calendario {
  background: var(--fondo-2); border: 1px solid var(--borde-osc);
  border-radius: 18px; padding: 18px 16px 16px;
}
.cal-cabeza { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cal-cabeza h2 { font-size: 20px; }
.cal-cabeza p { margin: 0; color: var(--texto-suave); font-size: 15px; text-transform: capitalize; }
.cal-cabeza .flechas { margin-left: auto; display: flex; gap: 6px; }
.cal-cabeza button {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--borde-osc);
  background: transparent; color: var(--texto); font-size: 18px; cursor: pointer;
}
.cal-cabeza button:disabled { opacity: .3; cursor: default; }
.cal-mes table { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.cal-mes th { color: var(--texto-suave); font-size: 12.5px; font-weight: 700; padding-bottom: 4px; }
.cal-mes td { text-align: center; padding: 0; }
.calendario { scroll-margin-top: 16px; }
.cal-mes td > * {
  display: grid; place-items: center; height: 36px; border-radius: 10px;
  font-size: 14.5px; font-weight: 700; text-decoration: none; color: var(--texto-suave);
}
/* Cuatro niveles según cuántos eventos tiene el día: más eventos, más naranja
   y más brillo. */
.cal-mes a.n1 { background: rgba(243,112,23,.16); color: var(--texto); }
.cal-mes a.n2 { background: rgba(243,112,23,.34); color: #fff; }
.cal-mes a.n3 { background: rgba(243,112,23,.6); color: #fff; box-shadow: 0 0 10px rgba(243,112,23,.35); }
.cal-mes a.n4 { background: var(--naranja); color: #fff; box-shadow: 0 0 16px rgba(243,112,23,.6); }
.cal-mes a { transition: transform .12s; }
.cal-mes a:hover { outline: 2px solid var(--crema); transform: scale(1.12); }
.cal-ayuda {
  display: flex; align-items: center; gap: 6px; margin: 10px 0 0;
  color: var(--crema); font-size: 13.5px; font-weight: 700;
}
.cal-ayuda svg {
  width: 17px; height: 17px; flex: none; fill: none; stroke: var(--naranja); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.cal-mes .pasado { opacity: .35; }
.cal-mes .hoy { outline: 2px solid #fff; outline-offset: -2px; }
.cal-leyenda {
  display: flex; align-items: center; gap: 6px; margin-top: 12px;
  color: var(--texto-suave); font-size: 13px;
}
.cal-leyenda i { width: 18px; height: 12px; border-radius: 4px; display: inline-block; }

/* ---------- Bloque de la app ---------- */
.bloque-app {
  background:
    radial-gradient(circle at 85% 20%, rgba(243,112,23,.28), transparent 55%),
    var(--fondo-2);
  border: 1px solid var(--borde-osc); border-radius: 18px;
  padding: 22px 20px; display: grid; grid-template-columns: 1fr 120px; gap: 16px; align-items: center;
}
.bloque-app h2 { font-size: 22px; }
.bloque-app p { color: var(--texto-suave); margin: 8px 0 16px; font-size: 15px; }
.celular {
  border: 5px solid #2b2b2b; border-radius: 22px; overflow: hidden;
  box-shadow: 0 0 0 1px #444, 0 14px 40px rgba(243,112,23,.25); transform: rotate(4deg);
  background: #000;
}
.celular img { width: 100%; height: auto; }
.insignias { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.insignias a { display: block; }
.insignias img { height: 44px; width: auto; }
.bajar { display: flex; align-items: center; gap: 14px; }
.qr {
  display: none; flex-direction: column; align-items: center; gap: 4px;
  color: var(--texto-suave); font-size: 11.5px; line-height: 1.2; text-align: center;
}
.qr img { width: 92px; height: 92px; background: #fff; padding: 5px; border-radius: 8px; }

/* ---------- Barra fija "Bajá la app gratis" ---------- */
.barra-app {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(14,11,9,0), rgba(14,11,9,.92) 30%);
}
.barra-app .boton { width: 100%; max-width: 520px; margin: 0 auto; display: flex; }
.barra-app .marca-pie { display: none; }

/* ---------- Pie ---------- */
.pie {
  margin-top: 56px; padding: 28px 0 8px; border-top: 1px solid var(--borde-osc);
  color: var(--texto-suave); font-size: 14px;
}
.pie .contenedor { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; }
.pie img { width: 56px; }
.pie a { color: var(--texto-suave); }
.pie nav { display: flex; gap: 16px; margin-left: auto; }

/* ---------- Página de evento ---------- */
/* Afiche (siempre 600x900) | ficha | app y mapa. En la computadora entra todo
   en una pantalla: las tres columnas miden lo mismo de alto (--alto) y la
   descripción ocupa lo que sobra en la ficha, con "Leer más" si no entra. */
.evento { display: grid; gap: 24px; padding-top: 28px; --alto: auto; }
.afiche {
  width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: var(--radio); background: #1d1714;
  box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1.5px var(--c-borde);
}
.ficha-evento { padding-top: 28px; }
.ficha-evento .solapa { font-size: 14px; padding: 4px 14px 5px; }
.ficha-evento .ficha-texto { padding: 20px 24px 18px; gap: 6px; min-height: 0; }
.evento h1 { font-size: clamp(26px, 2.6vw, 36px); }
.ficha-evento .ficha-cuando { font-size: 20px; }
.ficha-evento .ficha-donde { font-size: 16px; }
.ficha-evento .ficha-donde span { font-size: 15px; }
.ficha-evento .ficha-precio { font-size: 17px; margin: 4px 0 0; padding: 0; }
.otras-fechas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 6px; font-size: 13.5px; }
.otras-fechas span { color: var(--tinta-suave); font-weight: 700; }
.otras-fechas a {
  color: var(--c-texto); border: 1.5px solid var(--c-texto); border-radius: 999px;
  padding: 2px 10px; font-weight: 800; text-decoration: none;
}
.otras-fechas a:hover, .otras-fechas a[aria-current] { background: var(--c-texto); color: #fff; }
/* La descripción, como un papel pegado con dos tiras de cinta. */
.papel {
  position: relative; display: flex; flex-direction: column;
  margin: 24px 6px 6px; padding: 24px 26px 14px;
  background: linear-gradient(180deg, #FFFDF8, #FAF3E4);
  border-radius: 2px; transform: rotate(-.6deg);
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 12px 26px rgba(60,35,10,.24);
}
.papel::before, .papel::after {
  content: ""; position: absolute; top: -13px; width: 104px; height: 28px;
  background: rgba(238,224,192,.82); box-shadow: 0 1px 3px rgba(0,0,0,.15);
  clip-path: polygon(0 10%, 3% 0, 7% 8%, 93% 4%, 97% 0, 100% 12%, 100% 90%, 97% 100%, 93% 92%, 6% 96%, 3% 100%, 0 88%);
}
.papel::before { left: 22px; transform: rotate(-5deg); }
.papel::after { right: 22px; transform: rotate(4deg); }
.ficha-evento .descripcion { font-size: 18px; line-height: 1.6; color: #3A2E25; }
.leer-mas {
  align-self: flex-start; border: 0; background: none; padding: 6px 0 0; cursor: pointer;
  color: var(--c-texto); font: 800 16px "Nunito", sans-serif;
}
.leer-mas:hover { text-decoration: underline; }
.lado { display: flex; flex-direction: column; gap: 16px; }
.caja-mapa {
  display: flex; flex-direction: column; background: var(--fondo-2);
  border: 1px solid var(--borde-osc); border-radius: 18px; padding: 14px 14px 14px; min-height: 0;
}
.caja-mapa h2 { font-size: 20px; display: flex; align-items: center; gap: 8px; }
.caja-mapa h2::before {
  content: ""; flex: none; width: 18px; height: 18px; background: var(--naranja);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.caja-mapa p { margin: 2px 0 10px 26px; color: var(--texto-suave); font-size: 14.5px; }
.mapa-marco { position: relative; height: 260px; border-radius: 12px; overflow: hidden; }
.mapa-marco .mapa { position: absolute; inset: 0; height: 100%; border-radius: 0; }
.mapa-tapa {
  position: absolute; inset: 0; z-index: 1; border: 0; padding: 12px 0 0; cursor: pointer;
  background: transparent; display: flex; align-items: flex-start; justify-content: center;
}
.mapa-tapa span {
  background: rgba(14,11,9,.82); color: #fff; font: 700 13.5px "Nunito", sans-serif;
  padding: 6px 14px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.mapa-marco.activo .mapa-tapa { display: none; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.acciones a {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-weight: 800; font-size: 15px; padding: 9px 16px; border-radius: 999px;
  background: var(--c-texto); color: #fff;
}
.acciones a.secundaria { background: transparent; color: var(--c-texto); border: 2px solid var(--c-texto); }
.descripcion { font-size: 17px; color: var(--crema); }
.descripcion p { margin: 0 0 14px; }
.mapa {
  width: 100%; height: 260px; border: 0; border-radius: 18px;
  filter: grayscale(.3) brightness(.9);
}
.cta-evento {
  border: 1px solid var(--naranja); border-radius: 18px; padding: 20px;
  background: radial-gradient(circle at 100% 0%, rgba(243,112,23,.25), transparent 60%), var(--fondo-2);
}
.cta-evento h2 { font-size: 21px; margin-bottom: 6px; }
.cta-evento p { color: var(--texto-suave); margin: 0 0 14px; }
.relacionados { margin-top: 56px; display: grid; column-gap: 40px; }
/* Una columna: cada título sobre su grilla. */
.relacionados .rel-a.seccion-cabeza { order: 1; }
.relacionados .grilla.rel-a { order: 2; }
.relacionados .rel-b.seccion-cabeza { order: 3; margin-top: 40px; }
.relacionados .grilla.rel-b { order: 4; }
.relacionados .grilla { grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: 14px; padding-top: 4px; }

/* ---------- Ya pasó ---------- */
.ya-paso { text-align: center; padding: 40px 0 8px; }
.ya-paso .sello {
  display: inline-block; background: var(--fondo-2); border: 1px solid var(--borde-osc);
  color: var(--texto-suave); border-radius: 999px; padding: 6px 16px; font-weight: 800; font-size: 14px;
}
.ya-paso h1 { font-size: clamp(26px, 5vw, 38px); margin: 16px auto 8px; max-width: 22ch; }
.ya-paso p { color: var(--texto-suave); margin: 0 0 6px; }

/* ---------- Listados (un día, el finde, la agenda) ---------- */
.listado-cabeza { padding: 44px 0 8px; }
.listado-cabeza h1 { font-size: clamp(28px, 5vw, 42px); }
.listado-cabeza h1 em { font-style: normal; color: var(--naranja); }
.listado-cabeza p { color: var(--texto-suave); margin: 8px 0 0; }
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 18px; padding-top: 12px; }
.dia + .dia { margin-top: 36px; }
.dia h2 { font-size: 24px; }
.mes-separador {
  margin: 40px 0 10px; color: var(--naranja); font-size: 15px;
  text-transform: uppercase; letter-spacing: .12em;
}

/* ---------- Texto (créditos) ---------- */
/* Arriba, lugar para la onda de la barra, que se superpone al contenido. */
.texto { max-width: 70ch; }
.contenedor.texto { padding-top: 56px; padding-bottom: 28px; }
.texto h1 { font-size: 34px; margin-bottom: 16px; }
.texto p, .texto li { color: var(--crema); }

/* ---------- Computadora ---------- */
@media (min-width: 720px) {
  .fila { grid-auto-columns: 240px; }
  .boton-chico { display: inline-block; }
  .hero { min-height: 460px; padding: 72px 0 56px; }
  .hero-foto img { object-position: 80% 35%; }
}
@media (min-width: 1024px) {
  /* Las filas pasan a grilla: entran todas las fichas sin deslizar. */
  .fila {
    grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    overflow: visible; margin: 0; padding: 4px 0 0;
  }
  .carrusel .fila {
    grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 168px;
    overflow-x: auto; padding: 8px 0 12px;
  }
  .carrusel.grande .fila { grid-auto-columns: 192px; }
  .carr-flecha { display: grid; place-items: center; }
  .barra .boton-chico { margin-left: 12px; }
  .marca { margin-left: 24px; }
  .marca img {
    margin-bottom: -24px; filter: drop-shadow(0 4px 8px rgba(80,30,0,.45));
    transition: width .2s, margin .2s;
  }
  .bajando .marca img { width: 64px; margin-bottom: -6px; }

  /* Hero: la Catedral entera en el medio, iluminada y teñida de naranja, que
     se funde con el negro por los cuatro lados. */
  /* La foto baja más allá del hero (por detrás de "Hoy") y el título se le
     superpone a la izquierda. Detrás, la misma foto borrosa hace un resplandor
     naranja que cruza casi todo el ancho y se funde a los costados. */
  .hero { min-height: 0; padding: 32px 0 22px; overflow: visible; }
  .secciones { gap: 14px; }
  .seccion-cabeza { margin-bottom: 6px; }
  .hero-foto { bottom: -170px; }
  .hero-foto::after { display: none; }
  .hero-foto::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 70%;
    background: url("/static/img/catedral-800.webp") center 35% / cover;
    filter: blur(28px) sepia(.6) saturate(1.8) hue-rotate(-12deg) brightness(.5);
    opacity: .5;
    -webkit-mask-image: radial-gradient(ellipse 52% 60% at 55% 45%, #000 30%, transparent 100%);
            mask-image: radial-gradient(ellipse 52% 60% at 55% 45%, #000 30%, transparent 100%);
  }
  .hero-foto img {
    position: absolute; top: -40px; left: calc(50% - 320px);
    width: auto; height: 530px; max-width: none;
    object-fit: initial;
    filter: sepia(.45) saturate(1.4) hue-rotate(-12deg) brightness(.6);
    -webkit-mask-image: radial-gradient(closest-side, #000 48%, transparent 98%);
            mask-image: radial-gradient(closest-side, #000 48%, transparent 98%);
  }
  .hero h1, .hero .hero-acciones { position: relative; text-shadow: 0 2px 18px rgba(0,0,0,.7); }
  .hero .bajada { margin: 10px 0 22px; max-width: 44ch; color: var(--crema); }

  /* La columna de la app y el calendario sube hasta el costado del hero y
     queda fija al bajar: se ve entera sin desplazar la página. */
  .portada { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .columna-lateral { position: sticky; top: 96px; margin-top: -150px; gap: 16px; z-index: 1; }
  .columna-lateral .bloque-app { order: 1; }
  .columna-lateral .calendario { order: 2; }
  .bloque-app { grid-template-columns: 1fr 96px; padding: 18px 18px; gap: 12px; }
  .bloque-app h2 { font-size: 20px; }
  .bloque-app p { margin: 6px 0 12px; font-size: 14.5px; }
  .bloque-app .insignias { flex-direction: column; align-items: flex-start; gap: 8px; }
  .bloque-app .insignias img { height: 40px; }
  .bloque-app .insignias img[src$=".png"] { height: 53px !important; margin: -6px -5px !important; }
  .qr { display: flex; }
  .calendario { padding: 14px 14px 12px; }
  .cal-cabeza { margin-bottom: 6px; }
  .cal-cabeza svg { width: 24px; height: 24px; }
  .cal-cabeza h2 { font-size: 18px; }
  .cal-mes td > * { height: 31px; font-size: 14px; }
  .cal-leyenda { margin-top: 8px; }
  .evento {
    grid-template-columns: auto minmax(0, 1fr) 360px; align-items: start;
    --alto: min(733px, calc(100vh - 190px));
  }
  .afiche, .lado { margin-top: 28px; height: calc(var(--alto) - 28px); }
  .afiche { width: auto; max-width: none; }
  .ficha-evento { height: var(--alto); display: flex; flex-direction: column; }
  .ficha-evento .ficha-cuerpo { min-height: 0; }
  .papel { flex: 1; min-height: 0; }
  .ficha-evento .descripcion {
    flex: 1; min-height: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 56px), transparent);
            mask-image: linear-gradient(#000 calc(100% - 56px), transparent);
  }
  .evento.abierta .ficha-evento { height: auto; }
  .evento.abierta .papel { flex: none; }
  .evento.abierta .descripcion { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .caja-mapa { flex: 1; }
  .lado .mapa-marco { flex: 1; height: auto; min-height: 140px; }
  /* Dos columnas: los títulos comparten fila (generar.py los pone antes que
     las grillas), así un nombre de sala en dos renglones no desalinea las
     fichas de al lado. */
  .relacionados.dos { grid-template-columns: 1fr 1fr; }
  .relacionados.dos > * { order: 0 !important; margin-top: 0 !important; }
  .relacionados.dos .seccion-cabeza { align-items: flex-end; }
  .relacionados .grilla { align-content: start; }
  .marca img { width: 100px; }
}
/* Tableta horizontal y notebooks chicas: tres columnas no entran. Afiche y
   ficha arriba; la app y el mapa, lado a lado debajo. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .evento { grid-template-columns: auto minmax(0, 1fr); }
  .evento .lado { grid-column: 1 / -1; flex-direction: row; height: auto; margin-top: 0; }
  .evento .lado > * { flex: 1; min-width: 0; }
  .lado .mapa-marco { min-height: 220px; }
}
@media (min-width: 1024px) {
  .barra-app {
    background: rgba(20,15,12,.94); border-top: 1px solid var(--borde-osc);
    backdrop-filter: blur(6px); padding: 6px 0;
  }
  /* Degradé sobre la barra: lo que sigue se oscurece al pasar por debajo, y
     se nota que la página continúa. */
  .barra-app::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 64px;
    background: linear-gradient(180deg, rgba(14,11,9,0), rgba(14,11,9,.88));
    pointer-events: none;
  }
  .barra-app .contenedor { display: flex; align-items: center; gap: 14px; }
  .barra-app .marca-pie { display: flex; align-items: center; gap: 12px; color: var(--texto-suave); font-size: 14.5px; line-height: 1.3; }
  .barra-app .marca-pie img { width: 40px; }
  .barra-app .marca-pie b { color: var(--texto); font-size: 16px; }
  .barra-app .boton { width: auto; margin: 0 0 0 auto; padding: 8px 22px; font-size: 16px; }
}
/* Pantallas anchas (1080p en adelante): más aire a los costados, el título en
   dos renglones y un hero más bajo, para que "Hoy" asome en la primera
   pantalla. */
@media (min-width: 1440px) {
  .contenedor { padding: 0 40px; }
  .hero { padding: 34px 0 24px; }
  .hero h1 { max-width: none; font-size: 64px; }
  .hero .bajada { max-width: none; }
  .portada { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; }
  .fila { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .carrusel .fila { grid-template-columns: none; }
  .evento { grid-template-columns: auto minmax(0, 1fr) 380px; gap: 32px; }
}
/* Pantallas bajas (notebooks, Windows con la escala al 125 %): la columna de
   la app y el calendario está fija y tiene que verse entera sin desplazar,
   así que se compacta por escalones según el alto. */
@media (min-width: 1024px) {
  .hero h1 { max-width: none; font-size: clamp(44px, min(4.4vw, 7vh), 64px); }
}
@media (min-width: 1024px) and (max-height: 860px) {
  .hero { padding: 22px 0 16px; }
  .hero .bajada { margin: 6px 0 16px; }
  .bloque-app { grid-template-columns: 1fr; padding: 14px 16px; }
  .bloque-app .celular, .bloque-app p { display: none; }
  .bloque-app h2 { font-size: 18px; margin-bottom: 10px; }
  .bloque-app .bajar { justify-content: space-between; }
  .qr img { width: 76px; height: 76px; }
  .columna-lateral { gap: 12px; }
  .cal-cabeza svg { display: none; }
  .cal-cabeza h2 { font-size: 16px; }
  .cal-cabeza p { font-size: 14px; }
  .cal-mes td > * { height: 27px; font-size: 13.5px; border-radius: 8px; }
  .cal-ayuda { margin-top: 6px; }
}
@media (min-width: 1024px) and (max-height: 720px) {
  .bloque-app h2 { display: none; }
  .bloque-app .insignias { flex-direction: row; }
  .qr { flex-direction: row; text-align: left; }
  .qr img { width: 64px; height: 64px; }
  .qr span { max-width: 9ch; }
  .cal-mes th { padding-bottom: 0; }
  .cal-mes td > * { height: 23px; font-size: 13px; }
  .cal-leyenda { display: none; }
}
/* Si ni así entra, la columna deja de estar fija y baja con la página. */
@media (min-width: 1024px) and (max-height: 600px) {
  .columna-lateral { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- QR en grande ---------- */
.qr button { flex: none; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; }
.qr button:hover img { box-shadow: 0 0 0 3px var(--naranja); }
.qr-grande {
  border: 0; border-radius: 22px; padding: 28px 28px 20px; background: #fff;
  text-align: center; cursor: zoom-out; max-width: min(92vw, 560px);
  box-shadow: 0 0 0 4px var(--naranja), 0 30px 80px rgba(0,0,0,.6);
}
.qr-grande::backdrop { background: rgba(8,6,5,.82); backdrop-filter: blur(3px); }
.qr-grande img { width: min(80vw, 500px); height: auto; margin: 0 auto; }
.qr-grande p { margin: 12px 0 0; color: var(--tinta); font-weight: 800; font-size: 18px; }
.qr-grande .cerrar {
  position: absolute; top: 6px; right: 14px; font-size: 30px; line-height: 1; color: var(--tinta-suave);
}

/* ---------- Celular (al final: les gana a las reglas generales) ---------- */
/* En el celular la barra es finita: globo chico y la onda baja. */
@media (max-width: 719px) {
  .barra .contenedor { min-height: 46px; padding-top: 4px; padding-bottom: 0; }
  .marca img { width: 50px; margin-bottom: -10px; }
  .barra::after { height: 14px; }

  /* Hero bajo: que la primera ficha aparezca en la primera pantalla. */
  .hero { min-height: 0; padding: 26px 0 14px; }
  .hero h1 { font-size: 36px; }
  .hero .bajada { font-size: 16px; margin: 8px 0 16px; }
  .hero .boton { font-size: 16.5px; padding: 11px 22px; }
  .hero-acciones { gap: 10px 16px; }
  .hero .numeros { font-size: 13.5px; }
  .portada { gap: 28px; }

  /* Una ficha por renglón, como un muro de red social (también Hoy y
     Mañana, que en la computadora se deslizan). El afiche en 4:5 deja asomar
     la siguiente. */
  .grilla .ficha-foto, .carrusel .ficha-foto { aspect-ratio: 4 / 5; }
  .carrusel .fila {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr;
    overflow: visible; scroll-snap-type: none; margin: 0; padding: 4px 0 0; gap: 18px;
  }
  .plegables .grilla { grid-template-columns: 1fr; gap: 18px; }

  /* Días plegables (app.js): el título es una tarjeta que se toca. */
  .plegables { display: flex; flex-direction: column; gap: 10px; }
  .plegables .dia + .dia { margin-top: 0; }
  .plegables .mes-separador { margin: 18px 0 2px; }
  .plegables .seccion-cabeza {
    background: var(--fondo-2); border: 1px solid var(--borde-osc); border-radius: 14px;
    padding: 10px 10px 10px 12px; margin-bottom: 12px; cursor: pointer; gap: 10px;
    -webkit-tap-highlight-color: transparent;
  }
  .plegables .seccion-cabeza h2 { font-size: 18px; gap: 8px; white-space: nowrap; }
  .plegables .seccion-cabeza h2::before { width: 9px; height: 9px; }
  .plegables .ver-todo { display: none; }
  .plegado-info {
    display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none;
    color: var(--texto-suave); font-size: 13px; font-weight: 700; white-space: nowrap;
  }
  .miniaturas { display: flex; }
  .miniaturas img {
    width: 24px; height: 32px; object-fit: cover; border-radius: 4px;
    border: 1.5px solid var(--fondo-2); margin-left: -10px; box-shadow: 0 2px 6px rgba(0,0,0,.5);
  }
  .miniaturas img:first-child { margin-left: 0; }
  .plegado-flecha {
    width: 28px; height: 28px; border-radius: 50%; background: var(--naranja);
    display: grid; place-items: center; transform: rotate(180deg); transition: transform .2s;
  }
  .plegado-flecha::before {
    content: ""; width: 7px; height: 7px; transform: translateY(-2px) rotate(45deg);
    border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  }
  .seccion:not(.plegada) .miniaturas { display: none; }
  .plegada .plegado-flecha { transform: none; }
  .plegada .carrusel, .plegada .grilla { display: none; }
  .plegada .seccion-cabeza { margin-bottom: 0; }
}
.plegado-info { display: none; }
@media (max-width: 719px) {
  .plegado-info { display: flex; }
  .plegables .mes { display: none; }
  .plegables .marca-finde { font-size: 10.5px; padding: 1px 7px; }
}
@media (max-width: 379px) {
  .plegado-info .palabra { display: none; }
}
/* La frase del hero: en la computadora, "también en la compu"; en el celular
   y la tableta, a bajar la app. */
.solo-compu { display: none; }
@media (min-width: 1024px) {
  .solo-compu { display: inline; }
  .solo-celu { display: none; }
}