/* =============================================================================
   page-en-tickets.css
   Ajustes de maquetación de https://etn.com.mx/english/bus-tickets/ construida
   con los textos nuevos del documento 10.

   Se carga DESPUÉS de page-tipos-de-boletos.min.css y solo añade lo que esa
   hoja no trae: la rejilla de fichas cuando son más de tres, los rótulos
   dentro de la ficha, el acordeón de preguntas y los botones.
   ========================================================================== */

/* solo el espacio vertical: el horizontal ya lo pone la hoja del sitio */
.boletos-main .section__boletos-de-autobus{padding-block:44px}
.boletos-main .__title{margin-bottom:16px}

/* ---------------------------------------------------------- texto suelto */
.boletos-main .__boletos-de-autobus__text{max-width:1000px;margin:0 auto 18px}
.boletos-main .__text__paragraph{line-height:1.65;margin:0 0 12px}

/* ------------------------------------------------------------- fichas */
/* En el sitio las tarjetas van en carrusel horizontal. Aquí son cinco y con
   bastante texto, así que se reparten en rejilla y se ven todas de un vistazo;
   en pantallas pequeñas vuelven a una columna. */
.boletos-main .__boletos-de-autobus__scrollbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;overflow:visible;max-width:1200px;margin:0 auto}
/* En el sitio la tarjeta tiene alto fijo y scroll interno porque va en
   carrusel. Aquí van en rejilla y deben crecer con su contenido. */
.boletos-main .__card{border-radius:18px;box-shadow:0 8px 24px rgba(0,58,93,.06);width:auto;min-width:0;height:auto;max-height:none;overflow:visible;flex:none}
.boletos-main .__card{justify-content:flex-start;align-items:stretch}
.boletos-main .__card-body{height:auto;max-height:none;overflow:visible;flex:1}
/* la cabecera del sitio va centrada y con alto fijo; con títulos de dos
   líneas hay que dejarla crecer para que todas queden a la misma altura */
.boletos-main .__card-header{height:auto;min-height:66px;flex:none}
.boletos-main .__card-header{background:#003a5d;padding:16px 22px}
.boletos-main .__card-title{margin:0;color:#fff;font-size:16px;font-weight:800;line-height:1.3}
.boletos-main .__card-body{padding:20px 22px 24px}
.boletos-main .__card-text{margin:0 0 10px;font-size:14px;line-height:1.6;color:#3c5c73}
.boletos-main .__card-text--rotulo{font-weight:800;color:#003a5d;margin-top:16px}
.boletos-main .__card-list{list-style:none;margin:0 0 6px;padding:0}
.boletos-main .__card-item{display:flex;gap:8px;align-items:flex-start;margin-bottom:6px}
.boletos-main .__card-item::before{content:"›";color:#1e5b83;font-weight:800;line-height:1.6}
.boletos-main .__card-item .__card-text{margin:0}

/* ------------------------------------------ rótulos y listas fuera de ficha */
.boletos-main .__boletos-de-autobus__text > .__card-list{max-width:900px;margin:0 0 16px}
.boletos-main .__text__bold{color:#003a5d}

/* -------------------------------------------------------------- botones */
.boletos-main .cta-fila{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 4px}
.boletos-main .__boletos-de-autobus__text .cta-fila{justify-content:center}
.boletos-main .cta-fila a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 20px;border-radius:999px;background:#17c964;color:#fff;font-weight:700;font-size:13px;text-decoration:none}
.boletos-main .cta-fila a:hover{background:#158b60}

/* --------------------------------------------------- preguntas frecuentes */
.boletos-main .faq-list{max-width:900px;width:100%;margin:0 auto;display:grid;gap:12px}
.boletos-main .faq-item{background:#fff;border-radius:14px;box-shadow:0 4px 14px rgba(11,33,56,.06);overflow:hidden}
.boletos-main .faq-item summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:700;color:#12385a;display:flex;justify-content:space-between;align-items:center;gap:16px}
.boletos-main .faq-item summary::-webkit-details-marker{display:none}
.boletos-main .faq-item summary::after{content:"+";font-size:22px;color:#1e5b83;line-height:1}
.boletos-main .faq-item[open] summary::after{content:"–"}
.boletos-main .faq-item__content{padding:0 20px 18px;color:#657787;line-height:1.6}
.boletos-main .faq-item__content p{margin:0}

/* --------------------------------------------------------------- móvil */
@media(max-width:1100px){
  .boletos-main .__boletos-de-autobus__scrollbar{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .boletos-main .__boletos-de-autobus__scrollbar{grid-template-columns:1fr}
  .boletos-main .section__boletos-de-autobus{padding-block:32px}
}