/* Los tokens son los de creativos, tal cual. Van como canales RGB para poder
   pedir cualquier opacidad con rgb(var(--x) / .5) sin sumar variables. */
:root {
  --paper: 242 239 233;
  --paper-raised: 251 250 247;
  --paper-sunken: 231 227 218;

  --ink: 22 21 15;
  --ink-2: 69 66 58;
  --ink-3: 125 120 105;
  --ink-4: 164 158 143;

  --rule: 220 215 203;
  --rule-strong: 194 187 170;

  --stage: 19 19 22;
  --stage-raised: 28 28 33;
  --stage-rule: 44 44 51;
  --stage-ink: 238 236 231;
  --stage-ink-3: 130 129 139;

  --ember: 232 85 47;
  --ember-deep: 185 60 28;
  --ember-soft: 248 229 221;

  --pass: 31 107 74;
  --fail: 140 29 24;
  --fail-soft: 255 157 148;

  --display: "Bricolage Grotesque", Archivo, system-ui, sans-serif;
  --sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --r-chip: 6px;
  --r-control: 10px;
  --r-panel: 14px;
  --r-sheet: 20px;

  --out: cubic-bezier(0.16, 1, 0.3, 1);

  --sombra-card: 0 1px 2px rgba(20, 19, 15, 0.06), 0 2px 6px -1px rgba(20, 19, 15, 0.05),
    0 12px 26px -18px rgba(20, 19, 15, 0.22);
  --sombra-studio: 0 0 0 1px rgba(28, 24, 16, 0.1), 0 2px 4px rgba(28, 24, 16, 0.14),
    0 10px 20px -6px rgba(28, 24, 16, 0.22), 0 28px 44px -28px rgba(28, 24, 16, 0.5);
  --sombra-pieza: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 22px -4px rgba(0, 0, 0, 0.35),
    0 34px 48px -22px rgba(0, 0, 0, 0.55);

  --ancho: 1240px;
  --lateral: clamp(20px, 5vw, 64px);
  --hueco: clamp(48px, 6vw, 88px);
  --columnas: 12px var(--lateral) minmax(0, 1fr) var(--lateral) 12px;

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: rgb(var(--paper));
  color: rgb(var(--ink));
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.55rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}

/* El grano del papel. Casi imperceptible, evita el plano digital muerto. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

:focus-visible {
  outline: 2px solid rgb(var(--ember));
  outline-offset: 2px;
  border-radius: 5px;
}

/* Un título que recibe el foco por código (para que el lector de pantalla
   anuncie el resultado) no es un control: no lleva anillo. */
[tabindex="-1"]:focus {
  outline: none;
}

::selection {
  background: rgb(var(--ember));
  color: #fff;
}

img {
  display: block;
  max-width: 100%;
}

/* hidden gana siempre: si no, cualquier clase con display (un botón, un paso
   en grilla) lo deja visible. */
[hidden] {
  display: none !important;
}

h1,
h2,
h3,
p,
ol,
ul,
dl,
dd,
figure {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

.tnum {
  font-variant-numeric: tabular-nums;
}

.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Escenario: la mesa oscura apoyada sobre el papel ---- */

.marco {
  position: relative;
  z-index: 1;
  padding: 12px;
}

.escenario {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sheet);
  background-color: rgb(var(--stage));
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.055) 1px, transparent 0);
  background-size: 22px 22px;
  box-shadow: var(--sombra-studio);
  color: rgb(var(--stage-ink));
}

.escenario-interior {
  position: relative;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(22px, 4vw, 48px) var(--lateral) clamp(32px, 6vw, 80px);
}

/* ---- Marcas ---- */

.marcas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 18px;
}

.marcas li {
  display: flex;
  align-items: center;
  padding: 0 clamp(16px, 2.4vw, 28px);
  border-left: 1px solid rgb(var(--stage-rule));
}

.marcas li:first-child {
  padding-left: 0;
  border-left: 0;
}

.marcas img {
  height: calc(var(--h) * 1px);
  width: auto;
  opacity: 0.92;
}

@media (max-width: 640px) {
  .marcas {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 28px;
    row-gap: 20px;
  }
  .marcas li,
  .marcas li:first-child {
    padding: 0;
    border: 0;
  }
  .marcas img {
    height: calc(var(--h) * 0.8px);
  }
}

/* ---- Lienzo del evento ----
   El escenario es un fondo aparte y no un contenedor: así la tarjeta de
   inscripción puede empezar sobre él y seguir sobre el papel, pegada mientras
   se leen las secciones. En pantallas chicas va después del contenido. */

.lienzo {
  --arriba: clamp(44px, 8vw, 96px);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--columnas);
  grid-template-rows: 12px auto auto auto auto;
}

.pie-evento {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--columnas);
}

.pie-evento .pie {
  grid-column: 3 / -3;
  padding-left: 0;
  padding-right: 0;
}

.escenario-fondo {
  grid-column: 2 / 5;
  grid-row: 2 / 4;
  border-radius: var(--r-sheet);
  background-color: rgb(var(--stage));
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.055) 1px, transparent 0);
  background-size: 22px 22px;
  box-shadow: var(--sombra-studio);
}

.cabecera {
  grid-column: 3 / 4;
  grid-row: 2;
  padding-top: clamp(22px, 4vw, 48px);
}

.hero {
  grid-column: 3 / 4;
  grid-row: 3;
  margin-top: var(--arriba);
  padding-bottom: clamp(32px, 6vw, 80px);
  color: rgb(var(--stage-ink));
}

.secciones {
  grid-column: 3 / 4;
  grid-row: 4;
}

.lienzo > .tarjeta {
  grid-column: 2 / 5;
  grid-row: 5;
  margin-top: clamp(48px, 8vw, 72px);
}

@media (min-width: 1024px) {
  :root {
    --columnas: 12px minmax(var(--lateral), 1fr) minmax(0, 720px) var(--hueco) minmax(380px, 430px)
      minmax(var(--lateral), 1fr) 12px;
  }
  .lienzo {
    grid-template-rows: 12px auto auto 1fr;
  }
  .escenario-fondo {
    grid-column: 2 / 7;
  }
  .cabecera {
    grid-column: 3 / 6;
  }
  .lienzo > .tarjeta {
    grid-column: 5 / 6;
    grid-row: 3 / 5;
    align-self: start;
    margin-top: var(--arriba);
  }
}

.antetitulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: rgb(var(--stage-ink-3));
}

.titulo {
  margin-top: 18px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.75rem, 1.35rem + 5vw, 5.75rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.bajada {
  margin-top: clamp(18px, 2.4vw, 28px);
  max-width: 36ch;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  line-height: 1.5;
  color: rgb(var(--stage-ink) / 0.72);
  text-wrap: pretty;
}

.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px 40px;
  margin-top: clamp(32px, 4.5vw, 56px);
  padding-top: 24px;
  border-top: 1px solid rgb(var(--stage-rule));
}

.datos dt {
  font-size: 0.8125rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: rgb(var(--stage-ink-3));
}

.datos dd {
  margin-top: 6px;
}

.dato-principal {
  display: block;
  font-size: 1.0625rem;
  line-height: 1.5rem;
  font-weight: 500;
  color: rgb(var(--stage-ink));
}

.dato-secundario {
  display: block;
  margin-top: 2px;
  color: rgb(var(--stage-ink) / 0.72);
}

.dato-secundario.mono {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.vinculo-escenario {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.875rem;
  color: rgb(var(--stage-ink));
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s ease-out;
}

.vinculo-escenario:hover {
  text-decoration-color: rgb(var(--ember));
}

.vinculo-escenario svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

@media (min-width: 1024px) {
  .acciones {
    display: none;
  }
}

/* ---- Chips ---- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid;
  border-radius: var(--r-chip);
  font-size: 0.8125rem;
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
}

.chip-ember-oscuro {
  border-color: rgb(var(--ember) / 0.45);
  background: rgb(var(--ember) / 0.15);
  color: #ff9a78;
}

.chip-neutro-oscuro {
  border-color: rgb(var(--stage-rule));
  background: rgba(255, 255, 255, 0.05);
  color: rgb(var(--stage-ink));
}

.chip-ember {
  border-color: rgb(var(--ember) / 0.35);
  background: rgb(var(--ember-soft));
  color: rgb(var(--ember-deep));
}

.chip-aviso {
  border-color: #dfc9a0;
  background: #faf3e6;
  color: #8a6410;
}

.chip-apagado {
  border-color: transparent;
  background: rgb(var(--paper-sunken));
  color: rgb(var(--ink-3));
}

.punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulso 1.1s ease-in-out infinite;
}

/* ---- Botones ---- */

.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  font: 500 1rem/1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out,
    transform 0.15s ease-out;
}

.boton:active {
  transform: translateY(1px);
}

.boton:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.boton-grande {
  height: 48px;
  font-size: 1.0625rem;
}

.boton-ancho {
  width: 100%;
}

.boton-primario {
  background: rgb(var(--ink));
  color: rgb(var(--paper-raised));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}

.boton-primario:hover {
  background: #2a2820;
}

.boton-contorno {
  border-color: rgb(var(--rule-strong));
  background: rgb(var(--paper-raised));
  color: rgb(var(--ink));
}

.boton-contorno:hover {
  border-color: rgb(var(--ink-3));
  background: #fff;
}

.boton-primario-oscuro {
  background: rgb(var(--stage-ink));
  color: rgb(var(--stage));
}

.boton-primario-oscuro:hover {
  background: #fff;
}

.boton-contorno-oscuro {
  border-color: rgb(var(--stage-rule));
  background: rgba(255, 255, 255, 0.03);
  color: rgb(var(--stage-ink));
}

.boton-contorno-oscuro:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.07);
}

.boton-vinculo {
  height: auto;
  padding: 0;
  background: none;
  color: rgb(var(--ink));
  font-size: 0.9375rem;
  text-decoration: underline;
  text-decoration-color: rgb(var(--rule-strong));
  text-underline-offset: 4px;
}

.boton-vinculo:hover {
  text-decoration-color: rgb(var(--ember));
}

.boton svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.girando {
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: giro 0.7s linear infinite;
}

/* ---- Tarjeta de inscripción: la pieza sobre el escenario ---- */

.tarjeta {
  position: relative;
  scroll-margin-top: 16px;
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--r-panel);
  background: rgb(var(--paper-raised));
  color: rgb(var(--ink));
  box-shadow: var(--sombra-pieza);
}

/* Fija mientras se lee el contenido de la izquierda. Si es más alta que la
   pantalla, un top fijo dejaría el botón de abajo fuera de vista hasta el final
   de la página: el top se vuelve negativo y la tarjeta se fija por su borde de
   abajo. evento.js mantiene --alto al día. */
@media (min-width: 1024px) {
  .tarjeta {
    position: sticky;
    top: min(24px, calc(100vh - var(--alto, 0px) - 24px));
  }
}

@media (max-width: 1023px) {
  .tarjeta {
    box-shadow: var(--sombra-card);
  }
}

.tarjeta-cabeza {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tarjeta-titulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 2rem;
  letter-spacing: -0.022em;
}

.tarjeta-bajada {
  color: rgb(var(--ink-2));
}

.tarjeta-estado:empty {
  display: none;
}

.formulario {
  display: grid;
  gap: 18px;
  margin-top: 20px;
}

.paso {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  animation: subir 0.32s var(--out) both;
}

.paso > * {
  grid-column: 1 / -1;
}

.paso > .campo-mitad {
  grid-column: span 1;
}

.progreso {
  display: grid;
  gap: 8px;
}

.progreso-texto {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: rgb(var(--ink-3));
}

.progreso-texto b {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--ink));
}

.progreso-texto span:last-child {
  font-weight: 500;
  color: rgb(var(--ink-2));
}

.progreso-riel {
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgb(var(--rule));
}

.progreso-barra {
  display: block;
  height: 100%;
  width: calc(var(--avance) * 100%);
  border-radius: inherit;
  background: rgb(var(--ember));
  transition: width 0.45s var(--out);
}

.botones-form {
  display: flex;
  gap: 10px;
}

.botones-form [data-enviar] {
  flex: 1;
}

.campo {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.campo-etiqueta {
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: rgb(var(--ink-2));
}

.opcional {
  font-weight: 400;
  color: rgb(var(--ink-3));
}

.entrada {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid rgb(var(--rule-strong));
  border-radius: var(--r-control);
  background: #fff;
  color: rgb(var(--ink));
  font: 400 1rem/1.4 var(--sans);
  transition: border-color 0.15s, box-shadow 0.15s;
}

textarea.entrada {
  height: auto;
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
}

.entrada::placeholder {
  color: rgb(var(--ink-4));
}

.entrada:hover {
  border-color: rgb(var(--ink-4));
}

.entrada:focus {
  border-color: rgb(var(--ink));
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--ember) / 0.25);
}

.entrada[aria-invalid="true"] {
  border-color: rgb(var(--fail));
  box-shadow: 0 0 0 3px rgb(var(--fail) / 0.12);
}

.campo-ayuda,
.campo-error {
  font-size: 0.8125rem;
  line-height: 1.25rem;
}

.campo-ayuda {
  color: rgb(var(--ink-3));
}

.campo-error {
  color: rgb(var(--fail));
}

.campo-error:empty {
  display: none;
}

.opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.opcion {
  position: relative;
  display: inline-flex;
}

.opcion input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.opcion > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 13px;
  border: 1px solid rgb(var(--rule-strong));
  border-radius: var(--r-control);
  background: #fff;
  color: rgb(var(--ink-2));
  font-size: 0.9375rem;
  line-height: 1.3;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.opcion:hover > span {
  border-color: rgb(var(--ink-4));
  color: rgb(var(--ink));
}

.opcion input:checked + span {
  border-color: rgb(var(--ember) / 0.55);
  background: rgb(var(--ember-soft));
  color: rgb(var(--ember-deep));
}

.opcion input:focus-visible + span {
  outline: 2px solid rgb(var(--ember));
  outline-offset: 2px;
}

.opcion > span > svg {
  display: none;
  width: 14px;
  height: 14px;
}

.opcion input:checked + span > svg {
  display: block;
}

.opcion-texto b {
  font-weight: 600;
  color: rgb(var(--ink));
}

.opcion input:checked + span .opcion-texto b {
  color: inherit;
}

/* Opciones largas: una debajo de la otra, con su casilla a la vista para que
   se lea como algo que se marca y no como un párrafo. */
.opciones-lista {
  flex-direction: column;
  gap: 6px;
}

.opciones-lista .opcion {
  display: flex;
}

.opciones-lista .opcion > span {
  width: 100%;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
}

.opciones-lista .opcion-texto b {
  display: block;
}

.opciones-lista .opcion > span > svg,
.opciones-lista .opcion input:checked + span > svg {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  padding: 2px;
  border: 1.5px solid rgb(var(--rule-strong));
  border-radius: 5px;
  color: transparent;
  background: #fff;
}

[data-tipo="una"] .opciones-lista .opcion > span > svg {
  border-radius: 50%;
}

.opciones-lista .opcion input:checked + span > svg {
  border-color: rgb(var(--ember));
  background: rgb(var(--ember));
  color: #fff;
}

.entrada-otra {
  margin-top: 2px;
}

.escala {
  display: grid;
  grid-template-columns: repeat(var(--pasos), minmax(0, 1fr));
  gap: 6px;
}

.escala .opcion {
  display: flex;
}

.escala .opcion > span {
  width: 100%;
  justify-content: center;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.escala-extremos {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: rgb(var(--ink-3));
}

.casilla {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  color: rgb(var(--ink-2));
}

.casilla input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: rgb(var(--ink));
}

.trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.aviso-error {
  padding: 10px 12px;
  border: 1px solid #dcb5b1;
  border-radius: var(--r-control);
  background: #fbf0ef;
  color: rgb(var(--fail));
  font-size: 0.875rem;
  line-height: 1.35rem;
}

.aviso-error:empty {
  display: none;
}

.nota {
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: rgb(var(--ink-3));
}

/* Estados que reemplazan al formulario */

.resultado {
  display: grid;
  gap: 14px;
  animation: subir 0.32s var(--out) both;
}

.resultado[hidden] {
  display: none;
}

.resultado-marca {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgb(var(--ember));
  color: #fff;
}

.resultado-marca svg {
  width: 22px;
  height: 22px;
}

.resultado-marca.apagada {
  background: rgb(var(--paper-sunken));
  color: rgb(var(--ink-3));
}

.resultado-texto {
  color: rgb(var(--ink-2));
}

.resultado-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.resultado-pie {
  padding-top: 14px;
  border-top: 1px solid rgb(var(--rule));
}

/* ---- Papel: el contenido ---- */

.papel {
  position: relative;
  z-index: 1;
  max-width: calc(var(--ancho) + 24px);
  margin: 0 auto;
  padding: 0 12px;
}

.seccion {
  padding: clamp(56px, 8vw, 104px) var(--lateral) 0;
}

.secciones .seccion {
  padding: clamp(56px, 8vw, 96px) 0 0;
}

.seccion-cabeza {
  display: grid;
  gap: 6px;
  margin-bottom: clamp(24px, 3.5vw, 40px);
}

.etiqueta {
  font-size: 0.8125rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: rgb(var(--ink-3));
}

.seccion-titulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.seccion-bajada {
  max-width: 60ch;
  margin-top: 6px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgb(var(--ink-2));
}

.items {
  display: grid;
  gap: 12px;
}

.item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  padding: 22px 24px 24px;
  border-radius: var(--r-panel);
  background: rgb(var(--paper-raised));
  box-shadow: var(--sombra-card);
}

.item-numero {
  padding-top: 7px;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--ember-deep));
}

.item-titulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.75rem;
  letter-spacing: -0.02em;
}

.item-texto {
  grid-column: 2;
  margin-top: 6px;
  color: rgb(var(--ink-2));
  text-wrap: pretty;
}

.agenda li {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgb(var(--rule));
}

.agenda li:last-child {
  border-bottom: 1px solid rgb(var(--rule));
}

.agenda-hora {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--ink-3));
}

.agenda-titulo {
  font-size: 1.0625rem;
  font-weight: 500;
}

.agenda-detalle {
  margin-top: 2px;
  color: rgb(var(--ink-2));
}

.oradores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px 14px;
}

.orador-foto {
  aspect-ratio: 1;
  width: 100%;
  object-fit: cover;
  border-radius: var(--r-panel);
  background: rgb(var(--paper-sunken));
  box-shadow: var(--sombra-card);
}

.orador-nombre {
  margin-top: 12px;
  font-size: 1.0625rem;
  font-weight: 500;
}

.orador-cargo {
  color: rgb(var(--ink-2));
}

.texto p + p {
  margin-top: 1em;
}

.texto p {
  max-width: 62ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgb(var(--ink-2));
}

.pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(56px, 8vw, 104px);
  padding: 22px var(--lateral) 32px;
  border-top: 1px solid rgb(var(--rule));
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: rgb(var(--ink-3));
}

.pie a {
  text-decoration-color: rgb(var(--rule-strong));
  text-underline-offset: 3px;
}

.pie a:hover {
  color: rgb(var(--ink));
  text-decoration-color: rgb(var(--ember));
}

/* ---- Portada ---- */

.portada-titulo {
  margin-top: clamp(40px, 7vw, 88px);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.75rem, 1.35rem + 5vw, 5rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
}

.lista-eventos {
  display: grid;
  gap: 12px;
}

.fila-evento {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  border-radius: var(--r-panel);
  background: rgb(var(--paper-raised));
  box-shadow: var(--sombra-card);
  text-decoration: none;
  transition: box-shadow 0.2s var(--out), transform 0.2s var(--out);
}

.fila-evento:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(20, 19, 15, 0.08), 0 6px 12px -2px rgba(20, 19, 15, 0.08),
    0 22px 40px -20px rgba(20, 19, 15, 0.28);
}

.fila-fecha {
  display: grid;
  justify-items: start;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.fila-dia {
  font-size: 1.75rem;
  line-height: 1.1;
  font-weight: 500;
}

.fila-mes {
  font-size: 0.75rem;
  color: rgb(var(--ink-3));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fila-titulo {
  font-family: var(--display);
  font-size: 1.375rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.fila-lugar {
  margin-top: 2px;
  color: rgb(var(--ink-2));
}

.pasado .fila-evento {
  background: transparent;
  box-shadow: 0 0 0 1px rgb(var(--rule));
}

.pasado .fila-titulo,
.pasado .fila-dia {
  color: rgb(var(--ink-3));
}

.vacio {
  padding: 28px;
  border-radius: var(--r-panel);
  box-shadow: 0 0 0 1px rgb(var(--rule));
  color: rgb(var(--ink-3));
}

@media (max-width: 640px) {
  .fila-evento {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .fila-evento .chip {
    grid-column: 2;
    justify-self: start;
  }
}

/* ---- Movimiento ---- */

.sube {
  animation: subir 0.5s var(--out) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pulso {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

@keyframes giro {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 640px) {
  body::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}