/* Landing: the postcard that isn't for sale. One reading column,
   postal artifacts (stamp, cancel, ruled address lines) carry the identity. */

.hero, main > section, .pie {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 1.4rem;
}

/* --- Hero --- */
.hero {
  padding-top: 4.5rem;
  padding-bottom: 3.5rem;
  position: relative;
}

.hero-sello {
  color: var(--estampilla);
  opacity: 0.82;
  transform: rotate(-8deg);
  margin-bottom: 1.2rem;
}

.hero-dedicatoria { color: var(--tinta-suave); margin-bottom: 0.4rem; }

.hero-titulo {
  font-family: var(--f-prosa);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.7rem, 10vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0.2rem 0 0.9rem;
}

.hero-sub {
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 1.05rem;
  margin-bottom: 1.3rem;
}

.hero-pitch {
  font-size: 1.2rem;
  line-height: 1.5;
  max-width: 32rem;
  margin-bottom: 2.2rem;
}

.hero-cta, .practico-cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hero-invita { text-decoration: none; }

.hero-cta { margin-bottom: 1rem; }
.hero-meta { margin-top: 0.4rem; }

/* --- Inline invitation player: the minute plays under the buttons --- */
.oir-progreso { width: 100%; max-width: 15rem; margin: 0.9rem 0 0; }
.oir-progreso[hidden] { display: none; }
.oir-estado {
  font-family: var(--f-ui);
  font-size: 0.88rem;
  color: var(--tinta-suave);
  margin-top: 0.5rem;
}
.oir-estado:empty { display: none; }

/* a scattered listen door: a lead-in line in the block's own words,
   next to the one button that keeps its name everywhere */
.oir-invita {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.oir-invita .btn-tenue { text-decoration: none; }
.oir-lead { color: var(--tinta-suave); }

/* the stamp answers the end of the minute with a nod */
@keyframes sellado {
  0% { transform: rotate(-0.6deg) scale(1); }
  45% { transform: rotate(0.6deg) scale(1.06); }
  100% { transform: rotate(-0.6deg) scale(1); }
}
.estampilla-marco.sellado { animation: sellado 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); }

/* --- La postal --- */
.postal-seccion { padding-block: 1.5rem 3.5rem; }

.postal {
  background: var(--papel-claro);
  box-shadow: 0 4px 24px rgba(38, 53, 95, 0.13);
  border-radius: 3px;
  padding: 1.6rem;
  display: grid;
  gap: 1.6rem;
  transform: rotate(0.5deg);
}

@media (min-width: 37rem) {
  .postal {
    grid-template-columns: 1.25fr 1fr;
    padding: 2rem;
  }
  .postal-derecha {
    border-left: 1px solid var(--linea);
    padding-left: 1.6rem;
  }
}

.postal-linea1 { font-size: 1.05rem; margin-bottom: 0.8rem; }
.postal-texto { font-size: 1.02rem; margin-bottom: 1rem; }
.postal-firma { font-size: 1.25rem; text-align: right; }

.postal-franqueo {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  position: relative;
  margin-bottom: 2.2rem;
  min-height: 4.6rem;
}
.postal-estampilla { color: var(--tinta-suave); }
.postal-matasellos {
  color: var(--estampilla);
  opacity: 0.75;
  position: absolute;
  right: 2rem;
  top: -0.6rem;
  transform: rotate(-12deg);
}

.postal-para {
  font-family: var(--f-prosa);
  border-bottom: 1px solid var(--linea);
  padding-bottom: 0.35rem;
  margin-bottom: 0.9rem;
}
.postal-para-sub { color: var(--tinta-suave); }

/* --- Cómo es: Uno / Dos / Tres --- */
.como { padding-block: 1rem 2.5rem; }
.como h2 { margin-bottom: 1.6rem; }

.como-lista { list-style: none; display: grid; gap: 1.7rem; }

.como-num {
  font-style: italic;
  font-size: 1.15rem;
  color: var(--estampilla);
  margin-right: 0.3rem;
}

.como-lista h3 {
  display: inline;
  font-size: 1.15rem;
  font-weight: 700;
}

.como-lista p {
  margin-top: 0.3rem;
  color: var(--tinta-suave);
  max-width: 30rem;
}

/* --- Voice of the story --- */
.voz { padding-block: 1.5rem 3rem; }
.voz h2 { margin-bottom: 1.4rem; }

/* --- The route: map + sights in postcard frames, swiped sideways.
       The strip scrolls inside itself — the page never scrolls horizontally --- */
.camino { padding-block: 1rem 2.5rem; }
.camino h2 { margin-bottom: 1.2rem; }
.camino-lead { max-width: 34rem; margin-bottom: 0.4rem; }
.postales-tira {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0.6rem 0.3rem 1.4rem;   /* air for the tilt and the shadows */
  scrollbar-width: none;
}
.postales-tira::-webkit-scrollbar { display: none; }
.postal-foto {
  flex: 0 0 auto;
  width: min(76vw, 19rem);
  margin: 0;
  scroll-snap-align: center;
  background: var(--papel-claro);
  border-radius: 3px;
  box-shadow: 0 4px 24px rgba(38, 53, 95, 0.13);
  padding: 0.7rem 0.7rem 0.9rem;
}
.postal-foto:nth-child(odd)  { transform: rotate(-1.1deg); }
.postal-foto:nth-child(even) { transform: rotate(0.9deg); }
.postal-foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--papel-hondo);
}
.postales-texto { margin-top: 0.75rem; font-size: 1.05rem; line-height: 1.4; }
.postales-lugar { margin-top: 0.45rem; }
/* license small print: quiet as the footer, links keep the ink color */
.postales-creditos { font-family: var(--f-ui); font-size: 0.72rem; color: var(--tinta-suave); }
.postales-creditos a { color: inherit; }

.voz-cita {
  border-left: 2px solid var(--mansa);
  padding-left: 1.3rem;
  font-size: 1.15rem;
  line-height: 1.6;
}
.voz-cita footer { margin-top: 0.9rem; font-size: 1.1rem; }

/* --- Practical info --- */
.practico { padding-block: 1rem 3rem; }
.practico h2 { margin-bottom: 1.2rem; }

/* --- The route map: ink on the same card stock as the postcard --- */
.mapa-figura {
  background: var(--papel-claro);
  border-radius: 3px;
  box-shadow: 0 4px 24px rgba(38, 53, 95, 0.13);
  padding: 0.9rem;
  margin: 0.4rem 0 1.6rem;
  transform: rotate(0.4deg);
  max-width: 26rem;
}
.mapa { display: block; width: 100%; height: auto; }
.mapa-tierra {
  fill: var(--papel-hondo);
  stroke: var(--tinta-suave);
  stroke-width: 1.1;
  stroke-linejoin: round;
}
/* round dots with wide gaps: the walk is stitched onto the card, not drawn over it */
.mapa-ruta {
  fill: none;
  stroke: var(--estampilla);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 0.1 6.5;
}
.mapa-ola { fill: none; stroke: var(--mansa); stroke-width: 1.2; stroke-linecap: round; opacity: 0.85; }
.mapa-punto { fill: var(--tinta-suave); }
.mapa-anillo { fill: none; stroke: var(--estampilla); stroke-width: 1.8; }
.mapa-centro, .mapa-fin { fill: var(--estampilla); }
.mapa text { font-family: var(--f-ui); font-size: 9.5px; fill: var(--tinta); }
.mapa .mapa-fuerte { font-weight: 700; }
.mapa .mapa-nota { font-size: 8.5px; fill: var(--tinta-suave); }
.mapa .mapa-agua {
  font-family: var(--f-prosa);
  font-style: italic;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  fill: var(--tinta-suave);
}
.mapa-norte path, .mapa-medida path {
  stroke: var(--tinta-suave);
  stroke-width: 1.1;
  fill: none;
  stroke-linecap: round;
}

.practico-lista { list-style: none; display: grid; gap: 0.55rem; }
.practico-lista li::before { content: '— '; color: var(--tinta-suave); }

/* the guided-tour anchor: US$ 50 does the arguing, the price below looks tiny */
.practico-ancla { margin-top: 1.7rem; max-width: 30rem; color: var(--tinta-suave); }
.practico-ancla strong { color: var(--tinta); }

.practico-cta { margin-top: 2.2rem; }
.practico-ancla + .practico-cta { margin-top: 1.1rem; }

/* --- Footer --- */
.pie {
  border-top: 1px solid var(--linea);
  padding-block: 1.8rem 2.6rem;
  font-family: var(--f-ui);
  font-size: 0.85rem;
  color: var(--tinta-suave);
}
.pie-honesto { max-width: 30rem; margin-bottom: 0.7rem; }
.pie-editorial { font-style: italic; margin-bottom: 1.2rem; }
.pie-idiomas { display: flex; gap: 0.5rem; }
.btn-tenue.activo { border-color: var(--tinta-suave); color: var(--tinta); }

/* --- Entrance: the page settles onto the table, the stamp gets pressed in --- */
.entrando .hero > * { opacity: 0; transform: translateY(10px); }
.entrando .hero-sello { transform: scale(1.3) rotate(-2deg); }
.entrado .hero > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.entrado .hero-sello {
  opacity: 0.82;
  transform: rotate(-8deg);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
  transition-delay: 0.5s;
}
.entrado .hero-dedicatoria { transition-delay: 0.15s; }
.entrado .hero-titulo { transition-delay: 0.25s; }
.entrado .hero-sub { transition-delay: 0.35s; }
.entrado .hero-pitch { transition-delay: 0.45s; }
.entrado .hero-cta { transition-delay: 0.6s; }
.entrado .hero-meta { transition-delay: 0.7s; }

/* --- The bar with the goal: fixed at the thumb, never over another CTA --- */
.barra-compra {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 0.55rem 1.4rem calc(0.55rem + env(safe-area-inset-bottom));
  background: var(--papel-claro);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -6px 24px rgba(38, 53, 95, 0.12);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0.3s;
}
/* display:flex would silently beat the hidden attribute (same trap as the action-bar rows) */
.barra-compra[hidden] { display: none; }
.barra-compra.abierta { transform: translateY(0); visibility: visible; }
.barra-precio { color: var(--tinta); font-size: 0.9rem; }
.barra-usd { color: var(--tinta-suave); font-weight: 400; }
.barra-marco { padding: 0.35rem; }
.barra-marco .estampilla-btn { font-size: 0.95rem; padding: 0.65rem 1.15rem; }
/* the fixed bar must not bury the footer's last lines */
.con-barra .pie { padding-bottom: 7rem; }


/* --- Platform showcase: one story, but the place is ready for more --- */
.catalogo {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 3rem 1.4rem 4rem;
}
.catalogo-titulo {
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.1rem, 7vw, 3.3rem);
  line-height: 1.12;
  margin-bottom: 0.9rem;
  max-width: 15em;
}
.catalogo-eyebrow { margin-bottom: 0.7rem; }
.catalogo-lead { font-size: 1.1rem; max-width: 32rem; margin-bottom: 0.9rem; }
/* the promise line: the one italic sentence between mechanics and the shelf */
.catalogo-promesa {
  font-style: italic;
  max-width: 32rem;
  margin-bottom: 2.4rem;
}
/* The par-avion border of an airmail envelope: red/blue hatching over paper.
   The one ornament of the first screen — identity in a single stripe. */
.correo-aereo {
  height: 7px;
  background: repeating-linear-gradient(
    -45deg,
    var(--estampilla) 0 12px,
    var(--papel-claro) 12px 22px,
    var(--tinta) 22px 34px,
    var(--papel-claro) 34px 44px
  );
}

/* The shelf of cities: full-width rows of an album — a live card, then the
   empty row waiting for the next stamp. New city = new row, no rebuilding. */
.ciudades { margin-top: 2.6rem; }
.ciudades-grid {
  display: grid;
  gap: 1.2rem;
  margin-top: 1.1rem;
}
/* The live card reads like a catalogue spread: the stamp on the left page,
   the text on the right. On narrow screens it stacks back into a column. */
@media (min-width: 640px) {
  .obra {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 1.6rem;
    align-items: start;
  }
  .obra-tapa { margin: 0; }
}
.ciudad-nombre {
  font-size: 1.45rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
/* the empty row is low and wide: a held place, not a hole in the page */
.ciudad-proxima {
  border: 2px dashed var(--linea);
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 0.9rem;
  row-gap: 0.15rem;
  text-align: center;
  padding: 1.1rem 1.5rem;
}
.ciudad-proxima-nota {
  color: var(--tinta-suave);
  font-style: italic;
}

/* Catalogue sections share one quiet rhythm: an eyebrow, then the content */
.pasos, .escucha, .manifiesto, .cierre { margin-top: 3rem; }

.pasos-lista {
  list-style: none;
  counter-reset: paso;
  margin-top: 1.1rem;
  display: grid;
  gap: 1.1rem;
}
.pasos-lista li {
  counter-increment: paso;
  position: relative;
  padding-left: 2.5rem;
}
.pasos-lista li::before {
  content: counter(paso) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-style: italic;
  font-size: 1.35rem;
  color: var(--tinta-suave);
}
.pasos-lista h3 {
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: 0.15rem;
}
.pasos-lista p { color: var(--tinta-suave); max-width: 30rem; }

.escucha .oir-invita { margin-top: 1rem; }

/* Doors after the arguments: each block that earns desire hands over a door.
   After the three steps — a lead-in line with a quiet button; after the
   minute — the stamp door catalogo.js unhides at her closing invitation. */
.pasos-puerta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.pasos-puerta .btn-tenue { text-decoration: none; }
.puerta-lead { color: var(--tinta-suave); }
.escucha-puerta { margin-top: 1.1rem; }

.manifiesto { max-width: 32rem; }
.manifiesto p { margin-top: 0.8rem; }

/* The close of the path: the anchor argues, the stamp is the last door */
.cierre-linea { max-width: 32rem; margin-top: 1.1rem; }
.cierre-ancla { max-width: 30rem; margin-top: 0.8rem; color: var(--tinta-suave); }
.cierre-ancla strong { color: var(--tinta); }
.cierre-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.cierre-cta .btn-tenue { text-decoration: none; }
.cierre-meta { margin-top: 1rem; color: var(--tinta-suave); }

.obra {
  background: var(--papel-claro);
  border: 1px solid var(--linea);
  border-radius: 3px;
  box-shadow: 0 4px 20px rgba(38, 53, 95, 0.10);
  padding: 1.8rem;
}
.obra-titulo { font-size: 1.55rem; font-style: italic; margin: 0.4rem 0 0.5rem; }
.obra-titulo a { text-decoration: none; }
.obra-titulo a:hover { color: var(--estampilla); }
.obra-sub { color: var(--tinta-suave); margin-bottom: 0.8rem; }
.obra-pitch { margin-bottom: 1.5rem; }
.obra-acciones {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.obra-meta { color: var(--tinta-suave); }

/* The cover is a big collectible stamp of the series: the same perforated
   frame as the CTA, the route length sitting in the corner like a face value. */
.obra-tapa {
  display: block;
  position: relative;
  margin: 1rem 0 1.4rem;
  transform: rotate(0.4deg);
}
.obra-tapa-foto {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.obra-valor {
  position: absolute;
  top: 1.05rem;
  right: 1.05rem;
  background: var(--papel-claro);
  color: var(--tinta);
  padding: 0.28rem 0.55rem;
  border-radius: 2px;
  box-shadow: 0 1px 6px rgba(38, 53, 95, 0.25);
}

/* The house's own paragraph: quiet prose, set apart from the shelf */
.catalogo-manifiesto {
  margin-top: 2.4rem;
  max-width: 32rem;
}

/* Notas teaser: a ruled card, deliberately quieter than the story above */
.catalogo-notas {
  margin-top: 2.4rem;
  padding: 1.3rem 1.5rem 1.4rem;
  border: 1px solid var(--linea);
  border-radius: 3px;
}
.catalogo-notas-titulo {
  font-size: 1.35rem;
  font-style: italic;
  margin: 0.35rem 0 0.4rem;
}
.catalogo-notas-titulo a { text-decoration: none; }
.catalogo-notas-titulo a:hover { color: var(--estampilla); }
.catalogo-notas-desc {
  color: var(--tinta-suave);
  max-width: 30rem;
  margin-bottom: 0.9rem;
}

/* --- Invitation page: one door, one screen ---
   Not an article but a door: the voice, its own words, and two actions.
   The page never scrolls — the text scrolls inside itself, so the buttons
   never drift off the edge of the screen. A button off the edge can't be pressed. */
.pantalla {
  /* height comes from the viewport, not html: the html{height:100%} rule
     lives in player.css, and this page doesn't have it — the column stayed
     unbounded, the text overflowed, and overflow:hidden just clipped it */
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.invita-pagina {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: var(--ancho);
  width: 100%;
  margin-inline: auto;
  padding: 0.4rem 1.4rem calc(1.2rem + env(safe-area-inset-bottom));
}

.invita-titulo {
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  margin-bottom: 0.4rem;
}
.invita-lead {
  font-size: 1.02rem;
  max-width: 30rem;
  margin-bottom: 0.9rem;
}

.invita-progreso { width: 100%; margin-bottom: 0.8rem; }
.invita-progreso[hidden] { display: none; }

.invita-texto {
  flex: 1 1 auto;
  min-height: 4rem;
  overflow-y: auto;
  background: var(--papel-claro);
  border-left: 2px solid var(--linea);
  padding: 1rem 1.2rem 0.8rem;
  font-size: 1.05rem;
  line-height: 1.6;
  white-space: pre-line;
  margin-bottom: 0.9rem;
  -webkit-user-select: text;
  user-select: text;
}
.invita-texto footer { text-align: right; font-size: 1.2rem; margin-top: 0.5rem; }

/* action panel: it stays at the bottom and never drifts */
.invita-pie { border-top: 1px solid var(--linea); padding-top: 0.9rem; }
.invita-fila {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.invita-fila-menor { margin-top: 0.7rem; }
.invita-fila-menor .invita-estado { flex: 1; }
.invita-estado { font-family: var(--f-ui); font-size: 0.88rem; color: var(--tinta-suave); }

/* Three actions, no staircase: on a phone the voice takes the whole first
   line and the two quiet buttons split the second; a wide screen fits all
   three on one. The red class may move between buttons — the grid holds. */
.invita-acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.invita-acciones > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.invita-acciones > :first-child { grid-column: 1 / -1; }
@media (min-width: 32rem) {
  .invita-acciones { grid-template-columns: minmax(0, 1fr) auto auto; }
  .invita-acciones > :first-child { grid-column: auto; }
}
.invita-pie .invita-estado { margin-top: 0.7rem; }
.invita-estado:empty { display: none; }

/* back link — at the top of the page, a quiet line: the bottom panel is reserved for actions */
.pagina-volver { margin-bottom: 0.5rem; }
.pagina-volver a {
  font-family: var(--f-ui);
  font-size: 0.88rem;
  color: var(--tinta-suave);
  text-decoration: none;
}
.pagina-volver a:hover { color: var(--tinta); }

/* the action panel toggles rows via the hidden attribute; a row has
   display:flex, and without this rule hidden silently loses to it */
.invita-fila[hidden] { display: none; }

/* --- La boletería: the ticket and the honest ending of the price test ---
   Unlike the invitation, this page carries a whole listing — ticket, a date
   and an hour, the waitlist — too much to pin inside one screen. So it scrolls
   as one page (the header stays sticky at the top) and the action bar rides at
   the end of the content. The ticket is a stamp in a perforated frame; asking
   for it swaps the screen for the ending — the price has been accepted, and
   one action is left. */
.entrada-pagina {
  max-width: var(--ancho);
  width: 100%;
  margin-inline: auto;
  padding: 0.4rem 1.4rem calc(1.2rem + env(safe-area-inset-bottom));
}

.entrada-titulo {
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  margin: 0.3rem 0 0.5rem;
}

/* never scrolls horizontally: a stamp that overflows the edge gets
   clipped instead of giving the page sideways slack */
.entrada-cuerpo { overflow-x: hidden; }

.entrada-trae { max-width: 30rem; }
.entrada-ancla { color: var(--tinta-suave); max-width: 30rem; margin-bottom: 0.7rem; }
/* an accent inside a muted paragraph returns to full ink */
.entrada-ancla strong { color: var(--tinta); }

.boleto-zona {
  width: fit-content;
  margin: 0.9rem auto;
}

/* the ticket isn't a button: the stamp's frame is the same, the button's behavior isn't */
.boleto, .boleto:hover, .boleto:active { transform: rotate(-1.6deg); }

.boleto-cara {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  border: 1px solid var(--linea);
  padding: 1rem 1.7rem 0.8rem;
  text-align: center;
}
.boleto-obra {
  font-family: var(--f-prosa);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.15;
}
.boleto-sub { font-family: var(--f-ui); font-size: 0.7rem; color: var(--tinta-suave); }
.boleto-precio {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 2.3rem;
  letter-spacing: 0.02em;
  margin-top: 0.35rem;
}
.boleto-usd { font-family: var(--f-ui); font-size: 0.78rem; color: var(--tinta-suave); }
/* the departure line on the ticket: set by entrada.js from the chips below */
.boleto-salida { font-family: var(--f-ui); font-size: 0.8rem; margin-top: 0.2rem; }

/* --- Departure picker: day of week + hour, chips in the quiet-button voice --- */
.salida-zona { max-width: 30rem; margin-bottom: 1rem; }
.salida-titulo { margin-bottom: 0.6rem; }
/* The eyebrow above says "salida"; these quieter labels say which row is which.
   A gap before the hour label sets the two groups apart. */
.salida-etiqueta { font-family: var(--f-ui); font-size: 0.8rem; color: var(--tinta-suave); margin-bottom: 0.35rem; }
.salida-chips + .salida-etiqueta { margin-top: 0.8rem; }
.salida-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.45rem; }
.salida-chip {
  background: none;
  border: 1px solid var(--linea);
  border-radius: 3px;
  color: var(--tinta-suave);
  font-family: var(--f-ui);
  font-size: 0.85rem;
  padding: 0.45rem 0.9rem;
}
.salida-chip:hover { border-color: var(--tinta-suave); color: var(--tinta); }
.salida-chip.activo { border-color: var(--tinta); color: var(--tinta); font-weight: 700; }
.salida-espera { max-width: 30rem; margin-top: 0.6rem; }
.salida-cambio { color: var(--tinta-suave); font-size: 0.85rem; }

/* Asking for the ticket hands the whole screen to the ending: the price, the
   promise and the anchor argued their case before the decision — afterwards
   they only bury the form, which on a short phone fell off the bottom edge. */
.pedida .entrada-titulo,
.pedida .entrada-trae,
.pedida .boleto-zona,
.pedida .salida-zona,
.pedida .entrada-ancla { display: none; }

/* With everything else gone, the ending is the only block left; centre it in
   the reading column so the form isn't stranded against the left edge. */
.pedida .entrada-abre { margin-inline: auto; }

.entrada-abre { max-width: 30rem; margin-bottom: 1rem; }
.entrada-abre-titulo { font-size: 1.2rem; margin-bottom: 0.4rem; }

/* The postcard above the form is the very letter that arrives once the box
   office opens: stamp cancelled, address still blank. Its postmark is ink, not
   red — the one red thing on the screen is the button. */
.entrada-postal {
  background: var(--papel-claro);
  border-radius: 3px;
  box-shadow: 0 4px 24px rgba(38, 53, 95, 0.13);
  padding: 0.9rem 1.2rem 1.1rem;
  margin-bottom: 1.2rem;
  transform: rotate(-0.6deg);
}
/* Franking as on the landing postcard: stamp in the corner, postmark cancelling
   its left edge — hence the offset by the stamp's width, rather than sitting on
   top of it, where the two rings turned into mush. */
.entrada-postal-franqueo {
  position: relative;
  display: flex;
  justify-content: flex-end;
  min-height: 3.4rem;
  margin-bottom: 1rem;
}
.entrada-postal-estampilla { color: var(--tinta-suave); line-height: 0; }
.entrada-postal-matasellos {
  position: absolute;
  right: 2.2rem;
  top: -0.3rem;
  color: var(--tinta);
  opacity: 0.5;
  transform: rotate(-12deg);
}
/* Blank address lines: room for the address the visitor is about to type in. */
.entrada-postal-lineas { display: grid; gap: 0.9rem; }
.entrada-postal-lineas span { border-bottom: 1px solid var(--linea); }

/* waitlist form: the field has breathing room, the button sits next to it; on a narrow screen — below it */
.espera-forma { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.9rem; }
/* Once the address is left, hidden takes the form away — and without this rule
   it loses silently to display:flex (the same trap as the action-bar rows). */
.espera-forma[hidden] { display: none; }
.espera-forma input {
  flex: 1;
  min-width: 11rem;
  font-family: var(--f-ui);
  font-size: 0.95rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--linea);
  border-radius: 3px;
  background: var(--papel-claro);
  color: var(--tinta);
  /* selection is disabled on body (app gestures) - the input field needs it */
  -webkit-user-select: text;
  user-select: text;
}
.espera-forma input::placeholder { color: var(--tinta-suave); }
.espera-forma input:focus-visible {
  outline: 2px solid var(--estampilla);
  outline-offset: 1px;
}
#espera-estado { display: block; margin-top: 0.6rem; }

/* The two quiet actions after the ask keep a single row: on a narrow screen they
   wrapped into a column and ate the height the form needed. Width is split
   evenly, a long label wraps inside its button, and both share one height. */
#fila-despues { flex-wrap: nowrap; align-items: stretch; }
#fila-despues > * { flex: 1 1 0; text-align: center; }