/* Landing de filtros (listado) en MÓVIL (Tamara 22/10, sesión RESPONSIVE MOVIL). Todo dentro de max-width:900px: el escritorio no cambia.
   genera_listado.py lo añade AL FINAL del CSS (detrás de listado.css, home2.css y la cabecera común). Va con listado-movil.js.
   Solo cambia cómo se ve: los textos y enlaces son los mismos (Google lee lo mismo). Nunca font-size:0 para ocultar texto. */
.lm-car,.lm-mas{display:none}

@media (max-width:900px){
  /* "¿Solo necesitas hotel?": tarjeta centrada, igual que en la home 2.0. Antes la fila de ciudades se salía por la derecha,
     ensanchaba toda la página y dejaba el botón "Menú" de la cabecera fuera de la pantalla */
  .ht2{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:16px 14px;margin-top:14px;border:1.5px solid #FBD2E3}
  .ht2>svg{width:30px;height:30px;padding:6px}
  .ht2 p{flex:none;font-size:14px;line-height:1.35}
  .ht2-c{display:block;width:auto;max-width:100%;flex:none;overflow:visible;padding:0;font-size:13px;line-height:1.6}
  .ht2-c a{display:inline;padding:0;border:0;background:none;font-size:13px;font-weight:700;color:#16181D;text-decoration:underline;text-decoration-color:#FBD2E3;text-underline-offset:3px}
  .ht2-c a:not(:last-child)::after{content:" · ";color:#A3A8B2;text-decoration:none;display:inline-block;white-space:pre}
  .ht2-ver{margin:6px 0 0;display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:999px;background:var(--brand);color:#fff;font-size:14px}

  /* Portada más corta: los viajes asoman antes. Mismos textos */
  .lh{min-height:0}
  .lh-in{padding-block:74px 20px;gap:10px}
  .lh h1{font-size:30px;line-height:1.06}
  .lh-lead{font-size:14px;line-height:1.45}
  .migas ol{font-size:13px}
  .lh-datos{gap:6px;margin-top:2px}
  .lh-datos li{padding:5px 11px;font-size:13px}

  /* Franja de Scalapay: una línea corta en vez de un bloque alto */
  .banda .wrap{display:flex;align-items:center;gap:10px;padding-block:10px}
  .banda .scal{flex:none}
  .banda p{margin:0;font-size:13px;line-height:1.35}

  /* Buscador: en móvil no es fijo (listado.css lo pasa a relative), pero se quedaba con el "top:76px" del escritorio:
     bajaba 76 px, dejaba un hueco blanco encima y tapaba el titular de "¿Por dónde empezamos?" */
  .barra{top:auto}

  /* "¿Por dónde empezamos?": tarjetas más bajas (se ven 2 y media) y flechas con "1 de 4 · Desliza" (las pone listado-movil.js) */
  .subd{padding-block:24px 0}
  .subd .ch{margin-bottom:12px}
  #subd .sd-carril{gap:10px;padding-bottom:2px}
  #subd .sd{flex:0 0 42%;aspect-ratio:auto;min-height:118px;padding:10px 12px}
  .sd-n{font-size:16px}
  .sd-d{font-size:12px}

  /* Carruseles: flechas grandes y "1 de 4 · Desliza" debajo (igual que en la home 2.0) */
  .lm-car{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px}
  .lm-car button{width:42px;height:42px;border-radius:50%;border:0;background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 12px rgba(246,12,118,.3)}
  .lm-car button:disabled{background:#FBD2E3;box-shadow:none;cursor:default}
  .lm-car button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
  .lm-car button:focus-visible{outline:2px solid #16181D;outline-offset:2px}
  .lm-car span{min-width:120px;text-align:center;font-size:13px;color:var(--page-muted);font-variant-numeric:tabular-nums}
  .lm-car span b{color:var(--page-fg)}

  /* Tarjetas de viaje más bajas (las mismas reglas que en la home 2.0): foto, país, nombre, cómo se va, salidas, precio y plazos */
  .rejilla{gap:14px}
  .c2-ds{display:none}
  .c2-f{aspect-ratio:16/9;overflow:hidden}
  .c2-f img{position:absolute;inset:0} /* la foto llena la caja sin estirarla (si no, la caja crecía hasta la altura de la foto) */
  .c2-b{gap:6px}
  .c2-n{font-size:15px;line-height:1.25}
  .c2-sal{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;font-size:13px}
  .c2-pz{font-size:12px;line-height:1.35}
  .c2-btn{min-height:44px;padding-block:10px;font-size:15px}
  .res-cab{gap:10px;margin-bottom:12px}

  /* Textos largos para Google: titular y el comienzo, y "Leer más" (los pone listado-movil.js). El texto entero sigue en la página */
  .lm-pleg:not(.lm-abierto) .lm-cuerpo > p:first-of-type,.lm-pleg.lm-cuerpo:not(.lm-abierto) > p:first-of-type{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .lm-pleg:not(.lm-abierto) .lm-cuerpo > p:first-of-type ~ *:not(.lm-mas),.lm-pleg.lm-cuerpo:not(.lm-abierto) > p:first-of-type ~ *:not(.lm-mas){display:none}
  .lm-mas{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:0;border:0;background:none;font:inherit;font-size:14px;font-weight:800;color:var(--brand);cursor:pointer}
  .lm-mas::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
  .lm-abierto .lm-mas::after{transform:rotate(225deg) translate(-2px,-2px)}
  .lm-mas:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
  .seo{gap:12px}
  .seo-b{padding:16px}
  .seo-t{padding:16px}
  .seo-f{min-height:130px}
  .seo-b h2{font-size:21px;line-height:1.2}
  .seo-b p{font-size:15px;line-height:1.5}

  /* "Cómo elegir tu viaje": pasos más compactos */
  .guia{gap:10px}
  .gi{padding:14px 16px}
  .gi b{font-size:16px;line-height:1.25}
  .gi p{font-size:14px;line-height:1.45;margin-top:4px}

  /* "Los destinos con más viajes": 2 por fila en vez de uno debajo de otro (hacía casi 3.000 px de scroll) */
  .rel{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .rel .sd{aspect-ratio:auto;min-height:124px;padding:10px 12px}

  /* Campos a 16 px: con menos, el iPhone amplía la página al tocarlos */
  .orden select,.hm-dd-s input,.bq input,.fil input,.fil select,.alerta input,.alerta select{font-size:16px}
}
@media (prefers-reduced-motion:reduce){ .lm-mas::after{transition:none} }

/* ===== SOLO PROTOTIPO (no existe en WordPress): el selector «Todos los viajes» de la maqueta. En el móvil iba flotando abajo
   y tapaba el buscador y los títulos (Tamara 22/10). Aquí va quieto al final de la página, debajo del pie. ===== */
@media (max-width:900px){
  .maqueta{position:static;transform:none;margin:0 auto;width:100%;justify-content:center;flex-wrap:wrap;border-radius:0;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px))}
  .maqueta label{display:inline}
}