/* Salidas (diseño §10): el tablero del aeropuerto. Negro, blanco hueso, verde «a tiempo» y el color de la agencia
   en lugar del amarillo de señal (--h-principal; con los colores de fábrica, el amarillo #FFD23F). Big Shoulders
   Display y JetBrains Mono (Task 4). Todo bajo .hoja[data-estilo="salidas"]. */
.hoja[data-estilo="salidas"] {
  --h-fondo: #0E0F12; --h-hoja: #15171B; --h-letra: #F2F1EA; --h-suave: #A8A69E; --h-linea: rgba(242, 241, 234, .16);
  --h-titulo: 'Big Shoulders Display', 'Arial Narrow', sans-serif; --h-mono: 'JetBrains Mono', ui-monospace, monospace;
}
.hoja[data-estilo="salidas"] .hoja__titulo { font: 900 clamp(40px, 11vw, 66px)/.9 var(--h-titulo); letter-spacing: .02em; text-transform: uppercase; }
.hoja[data-estilo="salidas"] .hoja__rotulo { color: var(--h-acento); letter-spacing: .2em; }
.hoja[data-estilo="salidas"] .hoja__foto { overflow: hidden; border-radius: 10px; background: var(--h-principal); }
.hoja[data-estilo="salidas"] .hoja__foto img { filter: grayscale(1) contrast(1.35) brightness(1.08); mix-blend-mode: multiply; }
.hoja[data-estilo="salidas"] .hoja__foto figcaption { position: absolute; right: 8px; bottom: 6px; margin: 0; color: #F2F1EA; }
/* Cada ciudad es una «puerta» de embarque: el sello de la portada (con foto) y la ciudad de cada día (con o sin foto). */
.hoja[data-estilo="salidas"] .hoja__dia-ciudad {
  display: inline-block; margin-top: 4px; padding: 4px 8px 3px; border-radius: 3px; background: var(--h-principal);
  color: var(--h-sobre-principal); font: 800 13px/1 var(--h-titulo); letter-spacing: .1em; text-transform: uppercase;
}
.hoja[data-estilo="salidas"] .hoja__sello {
  position: absolute; left: 0; bottom: 14px; padding: 8px 12px 6px; background: #0E0F12; color: var(--h-acento);
  font: 900 20px/1 var(--h-titulo); letter-spacing: .06em; text-transform: uppercase;
}
.hoja[data-estilo="salidas"] .hoja__sello:empty { display: none; }
.hoja[data-estilo="salidas"] .hoja__resumen { box-shadow: inset 0 0 0 1px #23262C; }
.hoja[data-estilo="salidas"] .hoja__paletas { perspective: 420px; }
.hoja[data-estilo="salidas"] .hoja__paleta {
  width: 44px; height: 62px; border-radius: 6px; color: var(--h-acento); text-align: center; font: 800 42px/62px var(--h-mono);
  background: linear-gradient(#20232A 0 49%, #0B0C0F 49% 51%, #1A1D22 51%); box-shadow: 0 2px 0 #050607;
  animation: hoja-paleta 380ms cubic-bezier(.2, .8, .2, 1) both;
}
.hoja[data-estilo="salidas"] .hoja__paleta:nth-child(2) { animation-delay: 120ms; }
.hoja[data-estilo="salidas"] .hoja__paleta:nth-child(3) { animation-delay: 240ms; }
@keyframes hoja-paleta { from { transform: rotateX(88deg); filter: brightness(1.7); } to { transform: none; filter: none; } }
.hoja[data-estilo="salidas"] .hoja__cuenta-texto { font: 800 22px/1 var(--h-titulo); letter-spacing: .06em; text-transform: uppercase; }
.hoja[data-estilo="salidas"] .hoja__cuenta[data-fase="en-curso"] .hoja__cuenta-texto { color: #3DDC84; }
.hoja[data-estilo="salidas"] .hoja__seccion { font: 800 22px/1 var(--h-titulo); letter-spacing: .08em; text-transform: uppercase; }
.hoja[data-estilo="salidas"] .hoja__dias { perspective: 700px; }
/* Los días caen en cascada como las filas de un tablero, una sola vez al abrir. */
.hoja[data-estilo="salidas"] .hoja__dia {
  border-radius: 8px; box-shadow: inset 0 0 0 1px #23262C; transform-origin: top;
  animation: hoja-cae 400ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: min(calc(var(--i, 0) * 90ms), 900ms);
}
@keyframes hoja-cae { from { opacity: 0; transform: rotateX(-92deg); } to { opacity: 1; transform: none; } }
.hoja[data-estilo="salidas"] .hoja__dia-numero { font: 900 44px/.9 var(--h-titulo); font-style: normal; color: var(--h-acento); }
.hoja[data-estilo="salidas"] .hoja__dia h3 { font: 800 21px/1.05 var(--h-titulo); letter-spacing: .05em; text-transform: uppercase; }
.hoja[data-estilo="salidas"] .hoja__entrada-titulo::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%;
  background: #3DDC84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .16); vertical-align: middle;
}
.hoja[data-estilo="salidas"] .hoja__por-confirmar { font: 700 11px var(--h-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--h-acento); }
.hoja[data-estilo="salidas"] .hoja__servicio { border-radius: 8px; border-left: 4px solid var(--h-principal); }
.hoja[data-estilo="salidas"] .hoja__servicio-titulo { font: 800 19px/1.1 var(--h-titulo); letter-spacing: .04em; text-transform: uppercase; }
.hoja[data-estilo="salidas"] .hoja__boton { border-color: rgba(242, 241, 234, .5); font-family: var(--h-mono); letter-spacing: .04em; }
.hoja[data-estilo="salidas"] .hoja__filtro { background: #15171B; font-family: var(--h-mono); }
.hoja[data-estilo="salidas"] .membrete { color: var(--h-letra); }
.hoja[data-estilo="salidas"] .membrete__nombre { font: 800 24px/1 var(--h-titulo); letter-spacing: .06em; text-transform: uppercase; }
.hoja[data-estilo="salidas"] .membrete__contacto, .hoja[data-estilo="salidas"] .membrete__pie { color: var(--h-suave); }
.hoja[data-estilo="salidas"] .membrete__licencia { color: var(--h-letra); }
.hoja[data-estilo="salidas"] .membrete__sello { box-shadow: 0 0 0 4px var(--h-fondo), 0 0 0 5.5px var(--m-secundario); }
/* El membrete habla con las letras de Salidas (membrete.css trae Fraunces e IBM Plex Mono): la hoja suelta solo pega
   las del estilo (html-suelto.ts, LETRAS_DE_ESTILO) y así se ve igual que el enlace vivo. */
.hoja[data-estilo="salidas"] .membrete__sello, .hoja[data-estilo="salidas"] .membrete__eslogan { font-family: var(--h-titulo); font-style: normal; }
.hoja[data-estilo="salidas"] .membrete__contacto, .hoja[data-estilo="salidas"] .membrete__licencia { font-family: var(--h-mono); }
.hoja[data-estilo="salidas"] .membrete__pie { border-top-color: var(--h-linea); }