/* =============================================================================
   page-en-home.css
   Ajustes de maquetación de la portada en inglés (https://etn.com.mx/english/)
   construida con los textos nuevos del documento 1.

   Se carga DESPUÉS de home-english.min.css y solo añade lo que esa hoja no
   trae: listas dentro de las secciones, rejilla de rutas, acordeón de
   preguntas y botones. No toca colores ni tipografías del sitio.
   ========================================================================== */

/* Solo se toca el espacio vertical: el horizontal lo pone la hoja del sitio
   y si se sobrescribe la sección se va a sangre. */
.home-english-main .__section{padding-block:48px}
.home-english-main .__section--portada{padding-block-start:32px}
.home-english-main .__section--portada .__title{margin-bottom:14px}

/* ------------------------------------------------------ texto de sección */
.home-english-main .section-intro{max-width:900px;margin:0 auto 14px;color:#3c5c73;line-height:1.6}
.home-english-main .__section > h3,
.home-english-main .card-content h3{font-size:17px;font-weight:800;color:#003a5d;margin:20px 0 10px}

/* ---------------------------------------------------------------- listas */
.home-english-main .__section > ul,
.home-english-main .card-content ul{max-width:none;margin:0 0 16px;padding-left:20px;color:#3c5c73}
.home-english-main .__section > ul > li,
.home-english-main .card-content ul li{margin-bottom:8px;line-height:1.55}
.home-english-main .lista-check{list-style:none;padding-left:0}

/* --------------------------------------------------------- rutas populares */
/* El documento describe seis rutas con su texto y su enlace de compra. La
   rejilla de mosaicos del sitio necesita una foto por ruta y todavía no las
   hay, así que aquí van como fichas de texto con el mismo aire. */
.home-english-main .rutas-rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.home-english-main .ruta-ficha{background:#fff;border:1px solid #dbe6ee;border-radius:16px;padding:22px 24px;box-shadow:0 8px 24px rgba(0,58,93,.06)}
.home-english-main .ruta-ficha h3{margin:0 0 10px;font-size:17px;font-weight:800;color:#003a5d}
.home-english-main .ruta-ficha .section-intro{margin:0 0 12px;font-size:14px}

/* -------------------------------------------------------------- botones */
.home-english-main .cta-fila{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:22px 0 4px}
.home-english-main .ruta-ficha .cta-fila{justify-content:flex-start;margin:0}
.home-english-main .cta-fila a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:999px;background:#17c964;color:#fff;font-weight:700;font-size:13px;text-decoration:none}
.home-english-main .cta-fila a:hover{background:#158b60}
.home-english-main .cta-fila .btn-ruta{min-height:36px;padding:0 16px;background:rgba(0,0,0,0);border:1px solid #1e5b83;color:#12385a;font-size:12px}
.home-english-main .cta-fila .btn-ruta:hover{background:#12385a;color:#fff}

/* --------------------------------------------------- preguntas frecuentes */
.home-english-main .faq-list{max-width:900px;width:100%;margin:0 auto;display:grid;gap:12px}
.home-english-main .faq-item{background:#fff;border-radius:14px;box-shadow:0 4px 14px rgba(11,33,56,.06);overflow:hidden}
.home-english-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}
.home-english-main .faq-item summary::-webkit-details-marker{display:none}
.home-english-main .faq-item summary::after{content:"+";font-size:22px;color:#1e5b83;line-height:1}
.home-english-main .faq-item[open] summary::after{content:"–"}
.home-english-main .faq-item__content{padding:0 20px 18px;color:#657787;line-height:1.6}
.home-english-main .faq-item__content p{margin:0}

/* ---------------------------------------------------------- fichas con foto */
.home-english-main .card-left-container{display:grid;gap:20px;margin-top:22px}

/* --------------------------------------------------------------- móvil */
@media(max-width:1000px){
  .home-english-main .rutas-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .home-english-main .rutas-rejilla{grid-template-columns:1fr}
  .home-english-main .__section{padding-block:34px}
}