/* =============================================================================
   page-en-destination.css
   Ajustes de maquetación de las páginas de ruta /english/destination/
   construidas con el texto de los documentos de SUBE.

   Se carga DESPUÉS de page-destinations-to.min.css y solo reparte anchos:
   no toca colores, tipografías ni componentes del sitio.

   Páginas que la usan (aún no publicadas):
     monterrey-to-mexico-city · guanajuato-to-mexico-city ·
     queretaro-to-mexico-city

   Es hoja propia, separada de page-en-bus-travel.css, porque estas páginas
   cuelgan de otra ruta del sitio aunque compartan el CSS de ruta.
   ========================================================================== */

/* --------------------------------------------- textos de entrada centrados */
/* Sin esto los párrafos se estiran a 1300 px y son ilegibles. */
.section-entradas{max-width:900px;margin:0 auto 20px}
.section-entradas p{text-align:center;font-size:14px;color:#3c5c73;margin:0 0 12px}
.section-entradas--claro p{color:#dbe9f2}

/* ------------------------------------------------------------ subtítulos */
/* Los documentos marcan sublistas con un párrafo acabado en dos puntos. */
.discover-section h3,
.travel-tips h3,
.stations-section h3,
.route-cta h3{font-size:16px;font-weight:800;color:#003a5d;margin:22px 0 10px;text-align:center}
.route-benefits h3{color:#fff}
.alt-routes-card--claro h3{color:#003a5d}

/* ---------------------------------------------------------------- listas */
.discover-section .dash-list,
.travel-tips .dash-list,
.stations-section .dash-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:1000px;margin:0 auto 18px}

/* ------------------------------------------------------------- botones */
.cta-fila{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:24px 0 4px}
.cta-fila .btn-primary{width:auto}

/* --------------------------------------------------- sección con foto */
.con-foto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:38px;align-items:center;max-width:1200px;margin:0 auto}
.con-foto img{width:100%;height:100%;min-height:300px;max-height:420px;object-fit:cover;border-radius:20px;box-shadow:0 18px 45px rgba(0,58,93,.12)}
.con-foto .section-entradas{margin-left:0;margin-right:0}
.con-foto .section-entradas p,
.con-foto h3{text-align:left}
.con-foto .dash-list{grid-template-columns:1fr;margin-left:0}

/* ------------------------------------------------ servicios sobre banda */
.alt-routes-card--claro{max-width:900px;margin:0 auto;background:#fff}
.alt-routes-card--claro .section-entradas p{color:#3c5c73}

/* ------------------------------------------------------------- cierre */
.route-cta__content{max-width:900px;margin:0 auto;text-align:center}
.route-cta__content .dash-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

/* --------------------------------------------------------------- móvil */
@media(max-width:1000px){
  .discover-section .dash-list,
  .travel-tips .dash-list,
  .stations-section .dash-list,
  .route-cta__content .dash-list{grid-template-columns:1fr}
}
@media(max-width:900px){
  .con-foto{grid-template-columns:1fr;gap:22px}
  .con-foto img{min-height:0;height:240px}
  .con-foto .section-entradas p,
  .con-foto h3{text-align:center}
}

/* --------------------------------------------------------- terminales */
/* Los documentos describen cada terminal como «Nombre. Address: … Phone: …».
   Se respeta el texto entero y solo se separa el nombre para poder ponerlo
   como título de la ficha. */
.terminal-rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1100px;margin:0 auto 8px}
.terminal-ficha{background:#fff;border:1px solid #dbe6ee;border-radius:16px;padding:20px 22px;box-shadow:0 8px 24px rgba(0,58,93,.06)}
.terminal-ficha h3{margin:0 0 8px;font-size:15px;font-weight:800;color:#003a5d;text-align:left}
.terminal-ficha p{margin:0;font-size:13px;line-height:1.6;color:#3c5c73}

/* ------------------------------------------ compra de billetes por pasos */
.booking-section h3{font-size:16px;font-weight:800;color:#003a5d;margin:26px 0 10px;text-align:center}
.booking-section .dash-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:1000px;margin:0 auto 18px}

@media(max-width:1000px){
  .terminal-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
  .booking-section .dash-list{grid-template-columns:1fr}
}
@media(max-width:640px){
  .terminal-rejilla{grid-template-columns:1fr}
}

/* --------------------------------------------- títulos de sección iguales */
/* El CSS del sitio centra unos y alinea otros según el componente; en estas
   páginas todas las secciones son del mismo tipo y conviene que se lean igual. */
.route-landing .travel-tips > .container > h2,
.route-landing .booking-section > .container > h2,
.route-landing .stations-section > .container > h2,
.route-landing .discover-section > .container > h2{text-align:center}

/* La foto de la sección de ruta acompaña a un texto corto: sin este tope
   la imagen estira la sección y deja mucho aire alrededor del párrafo. */
.route-landing .con-foto img{min-height:0;height:300px;max-height:300px}
.route-landing .con-foto{align-items:center;gap:44px}