/* Tema "Viaje": pase de abordar. Azul petróleo, arena y coral, con datos de vuelo en letra mono.
   Línea de visa. Se carga después de base.css y landing.css. */

:root {
  --papel: oklch(97.6% 0.012 80);
  --papel-2: oklch(93.8% 0.022 78);
  --hoja: oklch(99.5% 0.004 80);
  --tinta: oklch(27% 0.05 222);
  --tinta-2: oklch(45% 0.04 222);
  --linea: oklch(86% 0.02 80);
  --sello: oklch(56% 0.16 33);
  --sello-oscuro: oklch(48% 0.15 31);
  --sello-claro: oklch(93.5% 0.035 40);
  --resaltador: oklch(82% 0.09 40);
  --ok: oklch(52% 0.11 170);

  --contraste: oklch(30% 0.06 222);
  --contraste-texto: oklch(96.5% 0.014 80);
  --contraste-acento: oklch(80% 0.1 45);
  --texto-boton: oklch(99.5% 0.004 80);
  --borde-campo: oklch(74% 0.03 222);

  --fuente-titulo: 'Red Hat Display', system-ui, sans-serif;
  --fuente-texto: 'Red Hat Display', system-ui, sans-serif;
  --fuente-mono: 'Red Hat Mono', ui-monospace, monospace;

  --radio: 10px;
  --radio-foto: 18px;
  --sombra-hoja: 0 1px 2px oklch(27% 0.05 222 / 0.08), 0 20px 40px -24px oklch(27% 0.05 222 / 0.4);
  --sombra-foto: 0 26px 50px -30px oklch(27% 0.05 222 / 0.45);
}

h1, h2, h3 {
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.hero__titulo {
  font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5rem);
  line-height: 1.05;
}

/* Cielo de madrugada detrás de la portada. */
.hero { background: linear-gradient(to bottom, oklch(92.5% 0.035 215), var(--papel) 75%); }

/* La franja empieza 0.2em abajo: así no tapa la cola de la "q" del renglón de arriba
   (Red Hat Display tiene un ascenso de 1.02em) y aún cubre mayúsculas y acentos. */
.resaltado {
  padding: 0 0.15em;
  border-radius: 0.2em;
  background: linear-gradient(transparent 0.2em, var(--sello-claro) 0.2em);
  color: var(--sello-oscuro);
}

/* Números de sección como letrero de sala de abordar. */
.seccion__numero,
.seccion--tinta .seccion__numero {
  display: grid;
  justify-items: center;
  align-self: center;
  padding: 0.3em 0.4em 0.2em;
  border-radius: 6px;
  background: var(--tinta);
  color: var(--contraste-acento);
  font-family: var(--fuente-mono);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  font-weight: 500;
  line-height: 1;
}

.seccion__numero::before {
  content: 'Sala';
  margin-bottom: 0.3em;
  font-size: 0.3em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.seccion--tinta .seccion__numero {
  background: var(--contraste-acento);
  color: var(--contraste);
}

.pasos li::before {
  font-family: var(--fuente-mono);
  font-size: 2.6rem;
  font-weight: 500;
}

/* --- Pase de abordar en la portada --- */

.pase-sombra {
  padding: 0;
  filter: drop-shadow(0 18px 22px oklch(27% 0.05 222 / 0.28));
}

@media (min-width: 60rem) {
  .pase-sombra { width: 18.5rem; }
}

.pase {
  --talon: 3rem;
  display: grid;
  gap: 0.75rem;
  overflow: hidden;
  padding: 1.1rem 1.25rem 0;
  border-radius: 14px;
  background: var(--hoja);
  /* Muescas del perforado: medio círculo recortado a cada lado, a la altura del talón. */
  -webkit-mask:
    radial-gradient(circle at 0 calc(100% - var(--talon)), transparent 0.6rem, #000 0.62rem) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle at 100% calc(100% - var(--talon)), transparent 0.6rem, #000 0.62rem) 100% 0 / 51% 100% no-repeat;
  mask:
    radial-gradient(circle at 0 calc(100% - var(--talon)), transparent 0.6rem, #000 0.62rem) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle at 100% calc(100% - var(--talon)), transparent 0.6rem, #000 0.62rem) 100% 0 / 51% 100% no-repeat;
}

.pase__ruta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font: 700 1.7rem / 1 var(--fuente-mono);
  letter-spacing: 0.02em;
}

.pase__vuelo {
  position: relative;
  flex: 1;
  border-top: 2px dashed var(--tinta-2);
}

.pase__vuelo::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(-1px - 0.3rem);
  width: 0.6rem;
  height: 0.6rem;
  margin-left: -0.3rem;
  border-radius: 50%;
  background: var(--sello);
}

.pase__datos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 1rem;
  margin: 0;
}

.pase__datos dt {
  font: 500 0.66rem / 1.2 var(--fuente-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.pase__datos dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
}

.pase__talon {
  display: flex;
  align-items: center;
  height: var(--talon);
  margin: 0.2rem -1.25rem 0;
  padding-inline: 1.25rem;
  border-top: 2px dashed var(--linea);
  background: var(--sello);
  color: var(--texto-boton);
  font: 600 0.75rem / 1.2 var(--fuente-mono);
  letter-spacing: 0.02em;
}