/* Tema de Atlas Travel: el mismo del sitio público (vps/sitios/atlastravel).
   Fondo crema, títulos en serif con cursiva, botones negros en píldora y el
   beige del logo como acento. Solo cambia tokens y el aspecto de botones y
   títulos; la estructura sigue siendo la del esqueleto (app.css).

   El beige del logo (#9c7b5c) no alcanza el contraste mínimo para texto sobre
   crema (3.5:1): se usa en bordes, foco y adornos. Los enlaces van en un café
   más oscuro (#7a5c40, 5.5:1). */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --crema: #f6f2ec;
  --papel: #fffdf9;
  --tinta: #1e1c1a;
  --beige: #9c7b5c;
  --cafe: #7a5c40;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;

  --texto: var(--tinta);
  --suave: #6b645c;
  --fondo: var(--crema);
  --panel: var(--papel);
  --borde: #ddd4c8;
  --borde-suave: #e8e0d5;
  --accion: var(--cafe);
  --accion-suave: #efe6db;
  --foco: var(--beige);
  --radio: 18px;
  --shadow-color: 30 12% 20%;
}

body { background: var(--fondo); }

/* ---- Títulos ---- */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.1;
}
h1 { font-size: clamp(2rem, 6vw, 2.75rem); }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }
h1 em, h2 em { font-style: italic; }

/* Las etiquetas de estado van en la letra del texto aunque estén junto a un
   título: en serif y a ese tamaño no se leen. */
.estado { font-family: "Inter", system-ui, sans-serif; letter-spacing: 0; vertical-align: middle; }

/* El rótulo pequeño en mayúsculas espaciadas del sitio. */
.antetitulo {
  color: var(--cafe);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.antetitulo a { color: inherit; }

/* ---- Barra ---- */
.barra { background: var(--papel); border-bottom-color: var(--borde-suave); }
.marca {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--tinta);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.marca img { width: auto; height: 32px; }
.barra nav a { color: var(--tinta); text-decoration: none; }
.barra nav a:hover { color: var(--cafe); text-decoration: underline; }

/* ---- Botones: píldora negra, como «Escríbenos» del sitio ---- */
button {
  min-height: 48px;
  padding: 0 1.6rem;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--papel);
  font-size: .95rem;
  font-weight: 500;
  transition: transform .18s ease, background-color .18s ease;
}
button:hover { filter: none; background: #000; transform: translateY(-1px); }
button.enlace {
  min-height: auto;
  padding: 0;
  background: none;
  color: var(--cafe);
  transform: none;
}
/* El de «Salir» y los secundarios: contorno, sin relleno. */
.barra button.enlace { color: var(--tinta); }

/* ---- Campos ---- */
input, select, textarea {
  border-color: var(--borde);
  border-radius: 12px;
  background: var(--papel);
}
input:focus, select:focus, textarea:focus { border-color: var(--beige); }

/* ---- Tarjetas y piezas ---- */
.tarjeta { border-color: var(--borde-suave); }
summary { color: var(--cafe); }
.vacio { background: var(--crema); border-color: var(--borde); }
.estado-info { background: var(--accion-suave); color: #5e4630; }
.aviso-info { background: var(--accion-suave); border-color: #dccbb8; color: #5e4630; }

@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
  button:hover { transform: none; }
}

/* El QR del código del celular: fondo blanco puro y margen, o algunas
   cámaras no lo leen sobre el crema. */
.qr { width: 200px; margin: .75rem 0; padding: 8px; background: #fff; border-radius: 12px; }
.qr svg { display: block; width: 100%; height: auto; }

/* Enlaces que salen del sistema: píldora de contorno, para que no se
   confundan con los botones que guardan algo. */
.enlaces-externos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.boton-contorno {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem;
  border: 1px solid var(--tinta); border-radius: 999px;
  color: var(--tinta); text-decoration: none; font-size: .95rem;
}
.boton-contorno:hover { background: var(--tinta); color: var(--papel); }

/* ---- Resultados de vuelos: una tarjeta por opción ---- */
.resultados { display: grid; gap: .9rem; margin-top: 1rem; }
.resultados-cabeza h2 { margin: 0 0 .25rem; }
.orden { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .75rem; align-items: baseline; }
.oferta {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--beige);
  border-radius: var(--radio);
  padding: 1rem 1.1rem;
  box-shadow: var(--sombra);
}
.oferta-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.oferta-cabeza h3 { margin: .1rem 0 0; }
.oferta-numero { margin: 0; color: var(--cafe); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.oferta-precio { text-align: right; }
.oferta-precio strong { display: block; font-family: var(--serif); font-size: 1.75rem; font-weight: 500; line-height: 1; }
.oferta-precio small { color: var(--suave); white-space: nowrap; }
.tramo { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--borde-suave); }
.tramo p { margin: 0; }
.tramo-horas { font-size: 1.05rem; }
.tramo-horas strong { font-size: 1.2rem; }
.oferta-detalle { margin: .75rem 0 0; color: var(--suave); font-size: .92rem; }
.oferta form button { margin-top: .75rem; }