/* Cabecera, menú y pie comunes en MÓVIL (Tamara 21/10, sesión RESPONSIVE MOVIL). Escritorio sin cambios.
   genera_home.py lo añade al final de cabecera-pie.css; genera_home2.py lo mete en la home 2.0; pon_cabecera_pie.py lo reparte.
   Necesita cabecera-pie-movil.js (rayas del botón "Menú", corazón sin sesión y pie plegable).
   Corte de la cabecera y el menú: 860 px, el mismo en el que la cabecera común pasa al botón de menú. Pie y ventana de Mi cuenta: 900 px. */

@media (max-width:860px){
  /* Cabecera: logo, favoritos, cuenta y un botón "Menú" con texto (las tres rayas solas no se entendían). En rosa de la marca, no en negro */
  .cab-in{padding-block:8px;gap:8px}
  .cab-logo{font-size:23px}
  .cab-d{gap:2px}
  .cab-in .cab-sp{display:none}
  .cab-fav,.cab-in .cab-cta{width:40px;height:40px;padding:0;display:inline-grid;place-items:center;background:transparent;border:0;border-radius:50%}
  .cab-fav svg{width:22px;height:22px;stroke:var(--brand)}
  .cab-in .cab-cta .cab-av{width:26px;height:26px;background:transparent;border:2px solid var(--brand)}
  .cab-in .cab-cta .cab-av svg{width:16px;height:16px;fill:var(--brand)}
  .cab-in .cab-cta.con-sesion .cab-av{background:var(--brand);border-color:var(--brand)}
  .cab-in .cab-cta.con-sesion .cab-ini{color:#fff;font-size:12px}
  .cab .cab-burger,.cab.solida .cab-burger{display:inline-flex;align-items:center;flex-direction:row;width:auto;height:38px;padding:0 12px 0 10px;gap:6px;border-radius:999px;background:var(--brand-soft);border:1.5px solid #FBD2E3}
  .cab-burger .mv-rayas{display:grid;gap:4px}
  .cab-burger i{display:block;width:16px;height:2px;margin:0;background:var(--brand)}
  .cab-burger::after{content:"Menú";margin-left:2px;font-size:14px;font-weight:800;color:var(--brand)}
  .cab .cab-burger[aria-expanded="true"],.cab.solida .cab-burger[aria-expanded="true"]{background:var(--brand);border-color:var(--brand)}
  .cab .cab-burger[aria-expanded="true"]::after{content:"Cerrar";color:#fff}
  .cab .cab-burger[aria-expanded="true"] i{background:#fff}
  .cab-fav:focus-visible,.cab-in .cab-cta:focus-visible,.cab-burger:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
  /* Sobre la foto de portada (cabecera transparente, sin .solida) los iconos y el botón "Menú" van en blanco, que el rosa no se leía (Tamara 21/10) */
  .cab:not(.solida) .cab-fav svg{stroke:#fff}
  .cab:not(.solida) .cab-in .cab-cta .cab-av{border-color:#fff}
  .cab:not(.solida) .cab-in .cab-cta .cab-av svg{fill:#fff}
  .cab:not(.solida) .cab-burger{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6)}
  .cab:not(.solida) .cab-burger i{background:#fff}
  .cab:not(.solida) .cab-burger::after{color:#fff}
  .cab:not(.solida) .cab-fav:focus-visible,.cab:not(.solida) .cab-cta:focus-visible,.cab:not(.solida) .cab-burger:focus-visible{outline-color:#fff}

  /* Hueco bajo la cabecera fija = su alto en móvil (56 px). Era de 76 (el de escritorio) y dejaba 20 px de más encima de las migas (Tamara 22/10) */
  .cab-hueco{height:56px}

  /* Menú desplegado: a toda la pantalla, "Mi cuenta" arriba como botón, filas grandes */
  .movil{max-height:calc(100dvh - 56px);padding-block:12px 28px}
  .movil nav{display:flex;flex-direction:column}
  /* "Mi cuenta": fila discreta al final del menú (Tamara 21/10); el acceso principal es el icono de la cabecera.
     Con sesión, comun.js le quita data-acceso y le pone .mv-cuenta: misma fila */
  .movil nav > a[data-acceso],.movil nav > a.mv-cuenta{order:99;display:flex;align-items:center;gap:10px;margin:14px 0 0;padding:14px 2px;border:0;border-top:1px solid var(--page-line);border-radius:0;background:none;color:#16181D;text-align:left;font-size:15px;font-weight:700}
  .movil nav > a[data-acceso]::before,.movil nav > a.mv-cuenta::before{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F60C76' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z'/%3E%3C/svg%3E") center/16px no-repeat}
  .movil nav > a[data-acceso]::after,.movil nav > a.mv-cuenta::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg)}
  .movil summary{font-size:17px;padding:15px 2px}
  .movil details[open] summary{color:var(--brand)}
  .movil nav > a:not([data-acceso]):not(.mv-cuenta){font-size:15px;font-weight:700;color:#292A69;background:#F1F2F8;border:0;border-radius:12px;padding:13px 14px;margin-top:12px}
  /* Países como etiquetas redondeadas; tipos de viaje y fechas especiales como tarjetas con foto (las del menú de escritorio) */
  .movil ul:not(.una){display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 16px}
  .movil ul:not(.una) li a{display:inline-block;padding:8px 14px;border-radius:999px;background:var(--page-bg);border:1px solid var(--page-line);font-size:14px;font-weight:600;color:#16181D}
  .movil ul:not(.una) li a b{font-weight:800}
  .movil ul:not(.una) li:last-child a{background:var(--brand-soft);border-color:#FBD2E3;color:var(--brand)}
  .movil ul.una{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:2px 0 16px}
  .movil ul.una li:last-child:nth-child(odd){grid-column:1 / -1}
  .movil .mv-tipo,.movil .mv-fecha{position:relative;isolation:isolate;display:flex;align-items:flex-end;width:100%;min-height:96px;padding:10px 12px;border-radius:14px;overflow:hidden;color:#fff;font-weight:800;font-size:14px;line-height:1.2;text-align:left;background:#292A69 center/cover no-repeat}
  .movil .mv-tipo::before,.movil .mv-fecha::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(22,24,29,.78),rgba(22,24,29,.05) 70%)}
}

@media (max-width:900px){
  /* Pie: mismos colores que en escritorio (blanco); solo cambia la colocación: grupos plegables y redes y pagos siempre a la vista */
  .pie{padding-bottom:0}
  .pie .hm-wrap{padding-block:28px 24px}
  .pie .pie-lema{font-size:18px}
  .pie .pie-marca p:not(.pie-lema){font-size:13px}
  .pie-top{display:grid;grid-template-columns:1fr;gap:0}
  .pie-marca{margin-bottom:16px;grid-column:auto} /* sin esto, el "span 2" de escritorio abría una segunda columna entre 561 y 900 px (lo vio CAMBIOS BACKEND a 760 px) */
  .pie-col{border-top:1px solid var(--page-line)}
  .pie-col .pie-h{display:flex;justify-content:space-between;align-items:center;margin:0;padding:14px 2px;cursor:pointer}
  .pie-col.mv-pl > .pie-h::after{content:"";width:8px;height:8px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(45deg);transition:transform .15s}
  .pie-col.mv-pl.abierto > .pie-h::after{transform:rotate(225deg)}
  .pie-col.mv-pl:not(.abierto) > ul{display:none}
  .pie-col ul{padding-bottom:12px;display:grid;gap:2px}
  .pie-col ul a{font-size:15px;padding:6px 2px;display:block}
  .pie-col:last-child{padding-bottom:6px}
  .pie-col:last-child .pie-h{cursor:default}
  .pie-col .redes2{margin-bottom:6px}
  .pie .pie-h2{border-top:0;padding-top:4px}
  .pie-bajo{border-top:1px solid var(--page-line);margin-top:8px;padding-top:14px;padding-bottom:0}
  .pie-bajo p{font-size:12px;margin:0}
  /* Campos de texto a 16 px: con menos, el iPhone amplía la página al tocarlos y corta las ventanas (Tamara 21/10) */
  .pie-al input,.rc-caja input,.movil input,.pie-al .pa-row .hm-dd-s input{font-size:16px}
  /* Aviso de ofertas del pie, más compacto */
  .pie-al .hm-wrap{padding-block:26px}
  /* Tamara 23/10: el margen de 72 px sobre "Alertas de precio" se veía como un bloque en blanco (en WordPress el fondo es blanco) */
  .pie-al{margin-top:0} /* con 28 px aún asomaba el fondo blanco de WordPress: la sección empieza donde acaba la anterior */
  .pie-al h2{font-size:22px;line-height:1.2}
  .pie-al .pa-t p:not(.pa-k){font-size:14px}
  /* Ventana de Mi cuenta: a pantalla completa, sin que se vea cortada por abajo ni la web detrás */
  .rc-capa{padding:0;align-items:stretch}
  .rc-caja{width:100%;height:100%;max-height:none;border-radius:0;padding:calc(64px + env(safe-area-inset-top,0px)) 22px calc(28px + env(safe-area-inset-bottom,0px));box-shadow:none}
  .rc-caja .rc-x{top:calc(14px + env(safe-area-inset-top,0px));right:16px}
}
@media (prefers-reduced-motion:reduce){ .pie-col .pie-h::after{transition:none} }

/* ===== SOLO PROTOTIPOS: fotos de las tarjetas de tipo de viaje y fechas especiales del menú móvil (carpeta img/ del prototipo).
   En WordPress NO se copia este bloque: las fotos van en línea desde el catálogo, las mismas del megamenú (CAMBIOS BACKEND). ===== */
@media (max-width:860px){
  .movil .mv-tipo[data-tipo="circuitos"]{background-image:url(img/tipo-circuitos.jpg)}
  .movil .mv-tipo[data-tipo="autocar"]{background-image:url(img/tipo-autocar.jpg)}
  .movil .mv-tipo[data-tipo="escapadas"]{background-image:url(img/tipo-escapadas.jpg)}
  .movil .mv-tipo[data-tipo="cruceros"]{background-image:url(img/tipo-cruceros.jpg)}
  .movil .mv-tipo[data-tipo="conciertos"]{background-image:url(img/tipo-conciertos.jpg)}
  .movil .mv-fecha[data-fecha="puente-dic"]{background-image:url(img/fecha-puente-dic.jpg)}
  .movil .mv-fecha[data-fecha="navidad"]{background-image:url(img/fecha-navidad.jpg)}
  .movil .mv-fecha[data-fecha="semana-santa"]{background-image:url(img/fecha-semana-santa.jpg)}
}
/* ===== FIN SOLO PROTOTIPOS ===== */
/* cab-320: inicio */
/* Móviles muy estrechos (320 px): la cabecera medía 353 px y se salía. Se quita la palabra "Menú"/"Cerrar" (queda el botón con las rayas
   y su aria-label) y el logo baja un poco */
@media (max-width:339px){
  .cab-logo{font-size:20px}
  .cab .cab-burger::after,.cab .cab-burger[aria-expanded="true"]::after{content:none}
  .cab .cab-burger,.cab.solida .cab-burger{padding:0 10px}
}
/* cab-320: fin */

/* "Lo que vas a ver" (#sl-track): en móvil sin flechas encima de las fotos; debajo, botones y "1 de 10 · Desliza" como en la home (Tamara 26/10) */
.mv-car{display:none}
@media (max-width:900px){
  .mv-car-on > .arr{display:none !important}
  #sl-cnt{display:none}
  .mv-car{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px}
  .mv-car[hidden]{display:none}
  .mv-car button{width:42px;height:42px;padding:0;border-radius:50%;border:0;background:var(--brand,#F60C76);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 12px rgba(246,12,118,.3)}
  .mv-car button:disabled{background:#FBD2E3;box-shadow:none;cursor:default}
  .mv-car button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
  .mv-car button:focus-visible{outline:2px solid #16181D;outline-offset:2px}
  .mv-car span{min-width:120px;text-align:center;font-size:13px;color:var(--page-muted,#5B5F6B);font-variant-numeric:tabular-nums}
  .mv-car span b{color:var(--page-fg,#16181D)}
}