/* ============================================================
   boletos.css
   Solo la pagina de tours: los boletos con su talon.
   Parte de la hoja del sitio. Ver README para el orden de carga.
   ============================================================ */

/* ---------- LOS BOLETOS DE LA PÁGINA DE TOURS ----------
   Cada tour se ve como un boleto de verdad: el cuerpo con la
   descripción a la izquierda y el "talón" azul con el precio a
   la derecha, separados por una línea perforada. Las muescas
   redondas de arriba y abajo (.notch) son las que simulan que
   el boleto está troquelado.
   ---------------------------------------------------- */
.tours{ background:var(--paper); padding:88px 0 96px; }
.tours-head{ max-width:640px; margin-bottom:52px; }
.tours-head .eyebrow{ color:var(--rosa-dark); }
.tours-head h2{ font-size:clamp(2rem,4vw,2.8rem); margin-top:10px; }
.tours-head p{ margin-top:14px; font-size:17.5px; opacity:.85; }

.ticket-grid{ display:grid; gap:30px; grid-template-columns: 1fr; }
@media(min-width:720px){ .ticket-grid{ grid-template-columns: 1fr 1fr; } }

.ticket{
  display:flex;
  background:#fff;
  border-radius:16px;
  box-shadow: 0 1px 0 rgba(17,33,46,0.05), 0 18px 34px -22px rgba(17,33,46,0.35);
  overflow:visible;
  position:relative;
  opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.ticket.in-view{ opacity:1; transform:translateY(0); }
.ticket:hover{ box-shadow:0 1px 0 rgba(17,33,46,0.05), 0 26px 44px -20px rgba(17,33,46,0.42); }

.ticket-main{ flex:1 1 62%; padding:26px 22px 24px 26px; min-width:0; }
/* Foto del tour, como banda arriba del cuerpo del boleto. Los márgenes
   negativos cancelan el relleno de .ticket-main para que la foto llegue al
   borde. Sólo se redondea la esquina superior izquierda: la derecha topa con el
   talón azul. Los tours que todavía no tienen foto conservan su icono. */
.ticket-photo{
  margin:-26px -22px 18px -26px;
  height:150px; overflow:hidden;
  border-radius:16px 0 0 0;
  background:var(--azul-soft);
}
.ticket-photo img{
  width:100%; height:100%;
  object-fit:cover;   /* recorta para llenar sin deformar la foto */
  display:block;
}
.ticket-icon{
  width:46px; height:46px; border-radius:50%;
  background:var(--azul-deep); color:var(--paper-light);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.ticket-icon svg{ width:26px; height:26px; }
.ticket-main h3{ font-size:21px; }
.ticket-tagline{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--rosa-dark); margin-top:2px; display:block; }
.ticket-desc{ margin-top:12px; font-size:15px; opacity:.86; }
.ticket-meta{ margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; }
.ticket-meta span{
  font-family:'IBM Plex Mono',monospace; font-size:11px;
  background:var(--azul-soft); color:var(--ink);
  padding:5px 10px; border-radius:100px;
}

.ticket-stub{
  flex:0 0 34%;
  background:var(--azul);
  color:var(--paper-light);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:20px 12px;
  position:relative;
  border-radius:0 16px 16px 0;
}
.perf{ position:absolute; left:0; top:0; bottom:0; width:0; border-left:2px dashed rgba(247,250,253,0.45); }
.notch{ position:absolute; left:-9px; width:18px; height:18px; border-radius:50%; background:var(--paper); }
.notch.top{ top:-9px; }
.notch.bottom{ bottom:-9px; }
/* El talón pasó de --azul-deep al --azul de marca, que es más claro. Eso obligó
   a subir todos los textos de encima: el rosa del precio caía a 2.74:1 y las
   opacidades bajas dejaban de leerse. */
.stub-label{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-light); }
.stub-price{ font-family:'Fraunces',serif; font-weight:700; font-size:26px; color:var(--paper-light); margin-top:6px; line-height:1; }
.stub-price small{ display:block; font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:10px; color:var(--paper-light); margin-top:4px; letter-spacing:.04em; }
/* Nota de descuento por grupo, debajo del precio. Va en --rosa-pale y no en
   --rosa: sobre el azul del talón (--azul-deep #00447A) el rosa pálido da
   5.19:1 y el de marca no llegaría a 4.5:1. */
.stub-note{
  margin-top:8px;
  font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; line-height:1.35;
  color:var(--rosa-mist);
}
.stub-cta{ margin-top:14px; font-size:12.5px; font-weight:700; text-decoration:none; color:var(--paper-light); border-bottom:1px solid var(--rosa-light); padding-bottom:2px; }
.ticket-num{ position:absolute; top:12px; right:16px; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.05em; color:rgba(247,250,253,0.9); }

.tours-note{ margin-top:34px; font-size:13px; opacity:.55; font-family:'IBM Plex Mono',monospace; }

/* ---------- BANDA DE COTIZACIÓN ----------
   Va después de los boletos. El paquete del cliente pide dos cosas que
   caen en el mismo lugar: que los grupos coticen "con una persona real"
   y que se vea el nombre del dueño. Fondo --azul-soft, el mismo de los
   chips: acompaña a los talones sin competir con ellos. El texto es
   --ink sobre #E7F0F8, o sea contraste de sobra. */
.quote-band{
  margin-top:40px; padding:26px 28px; border-radius:16px;
  background:var(--azul-soft);
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.quote-band h3{ font-size:22px; }
.quote-band p{ margin:6px 0 0; max-width:52ch; font-size:15px; opacity:.86; }