/* CorreCaminos · web pública y portal del cliente. Paleta del Manual de Identidad. */
  /* Paleta del Manual de Identidad (Jota Design): los mismos nombres que la app. */
  :root{
    --asfalto:#1C1C1B; --ambar:#E6276F; --monte:#3FB499; --barro:#F08517;
    --arena:#F7F3EC; --papel:#FFFEFF; --niebla:#8C8C89; --linea:#E4DCCF;
    --violeta:#874292; --limon:#B7CD1F; --contorno:#1C1C1B;
    --vivo-1:#E6276F; --vivo-2:#3FB499; --vivo-3:#874292; --vivo-4:#F08517; --vivo-5:#B7CD1F;
    --trazo:2.5px; --pega:0 4px 0 var(--contorno); --rodondo:16px;
    --ancho:1200px; --margen:clamp(16px, 4vw, 40px);
    --display:'Fredoka', system-ui, sans-serif;
    --cuerpo:'Outfit', system-ui, -apple-system, sans-serif;
  }
  *{box-sizing:border-box; margin:0}
  html{scroll-behavior:smooth}
  body{background:var(--arena); color:var(--asfalto); font-family:var(--cuerpo); font-size:16px; line-height:1.5; min-height:100vh; display:flex; flex-direction:column}
  main{flex:1; width:100%; min-width:0}
  a{color:var(--ambar)}
  img{max-width:100%}
  button{font:inherit; cursor:pointer}
  .cont{width:100%; max-width:var(--ancho); margin:0 auto; padding:0 var(--margen)}
  h1,h2,h3{font-family:var(--display); line-height:1.15}
  h2{font-size:clamp(1.6rem, 3.2vw, 2.2rem); font-weight:700}
  .sub{color:var(--niebla); margin-top:4px}
  .sec{padding:56px 0; scroll-margin-top:84px}   /* la cabecera fija no tapa el título al saltar por ancla */
  .sec--claro{background:var(--papel)}
  .sec-cab{display:flex; align-items:end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:28px}

  /* ── Cabecera ── */
  header{background:var(--asfalto); color:var(--papel); position:sticky; top:0; z-index:50}
  .nav{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:86px; padding:8px var(--margen)}
  .nav a.logo{display:flex; align-items:center; min-height:40px; gap:10px; color:var(--papel); text-decoration:none; font-family:var(--display); font-weight:700; font-size:1.15rem}
  .nav a.logo img{height:62px; width:auto; display:block}
  .nav nav{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
  .nav nav a{color:var(--papel); text-decoration:none; padding:8px 12px; border-radius:999px; font-weight:500; font-size:.95rem}
  .nav nav button.cuenta{
    background:none; border:0; color:var(--papel); font-family:inherit; font-weight:500;
    font-size:.95rem; padding:8px 12px; border-radius:999px; cursor:pointer;
  }
  .nav nav button.cuenta:hover{background:rgba(255,255,255,.12)}
  /* Un poco de aire los separa del resto del menú, sin líneas ni cajas: en una
     barra oscura cualquier borde con radio se dibuja como un arco suelto. */
  #btn-cliente{margin-left:14px}
  /* El modal de acceso pinta sus colores: sin fondo y tinta explícitos, un
     navegador en modo oscuro dibujaba los campos negros sobre la tarjeta
     blanca y no se veía lo que se escribía. */
  #modal-acceso .campo{margin-bottom:12px}
  #modal-acceso label{display:block; font-size:.82rem; font-weight:700; color:var(--asfalto); margin-bottom:4px}
  #modal-acceso input{width:100%; padding:11px 12px; border:var(--trazo) solid var(--contorno);
    border-radius:12px; font:inherit; font-size:1rem; background:var(--papel); color:var(--asfalto)}
  #modal-acceso input:focus{outline:none; border-color:var(--ambar)}

  /* La pista de «¿A dónde quieres ir?»: al cliente le cuesta menos escribir
     libre si sabe qué contar. Se abre al pasar el ratón y al enfocar con el
     teclado, para que no dependa del ratón. */
  .ayuda{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
    border-radius:50%; background:var(--ambar); color:var(--papel); font-size:.72rem; font-weight:700;
    margin-left:6px; cursor:help; position:relative; vertical-align:middle}
  /* 🔴 16-sep-2026 — EL GLOBO SE ABRE HACIA ABAJO, NO HACIA ARRIBA.
     Arriba está la cabecera fija (z-index 50, 94 px de alto) y el globo vivía
     en z-index 20: gana la cabecera. Pasadías es la PRIMERA sección de la
     página, así que el globo casi nunca tenía sitio arriba. Medido en
     producción el 16-sep tras pulsar el botón grande de la portada (que deja
     la página en scrollY 182, que es justo el estado que produce): globo de 28
     a 124, cabecera hasta el 94 → 66 px tapados de 96 a 1440x900 y 70 a
     393x852; de las cuatro líneas se leía una. Hacia abajo no hay nada fijo
     que lo tape. El z-index sube por encima de la cabecera (50) y de la
     píldora del buscador (45 suelta, 51 metida en la cabecera) por si alguna
     se le cruza: un globo a medio leer es lo mismo que no tenerlo. */
  .ayuda__globo{position:absolute; left:50%; top:calc(100% + 8px); bottom:auto; transform:translateX(-50%);
    width:min(280px, 70vw); background:var(--asfalto); color:var(--papel); border-radius:12px;
    padding:10px 12px; font-size:.82rem; font-weight:400; line-height:1.45; text-align:left;
    opacity:0; visibility:hidden; transition:opacity .12s; z-index:60; box-shadow:0 6px 18px rgba(0,0,0,.28)}
  .ayuda:hover .ayuda__globo, .ayuda:focus .ayuda__globo{opacity:1; visibility:visible}
  .medida textarea{width:100%; padding:12px 14px; border-radius:10px; border:2px solid #444;
    background:#2a2a29; color:var(--papel); font:inherit; resize:vertical; min-height:110px}
  .medida textarea:focus{outline:none; border-color:var(--monte)}
  .nav nav a:hover{background:rgba(255,255,255,.12)}
  .nav nav a.cta{background:var(--ambar); font-weight:600}
  .carretera{height:8px; background:repeating-linear-gradient(90deg, var(--ambar) 0 36px, var(--asfalto) 36px 52px, var(--monte) 52px 88px, var(--asfalto) 88px 104px)}

  /* ── Hero: una BANDA, no un cartel (15-sep-2026) ──
     Medido en producción a 1440x900: el cartel medía 634 px y empujaba la
     primera tarjeta al píxel 920, fuera de la pantalla. El texto y el buscador
     comparten ahora una sola fila; en un teléfono se apilan, pero con el título
     y el texto a su tamaño de teléfono, no al de un cartel. */
  .hero{position:relative; color:var(--papel); background:linear-gradient(120deg, var(--monte) 0%, var(--ambar) 100%); overflow:hidden}
  .hero .cont{padding-top:20px; padding-bottom:20px; position:relative; z-index:1}
  .hero__banda{display:flex; align-items:center; gap:clamp(18px, 3vw, 44px); flex-wrap:wrap}
  .hero__txt{flex:1 1 420px; min-width:0}
  .hero h1{font-size:clamp(1.45rem, 2.2vw, 2rem); font-weight:700; max-width:34ch; text-shadow:0 3px 0 rgba(0,0,0,.18)}
  .hero p{font-size:clamp(.97rem, 1.3vw, 1.1rem); max-width:52ch; margin-top:6px; opacity:.96}
  .hero .acciones{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
  .hero .acciones .btn{padding:10px 18px; font-size:.97rem}
  .hero .bola{position:absolute; border-radius:50%; background:rgba(255,255,255,.12); z-index:0}
  /* ── El visor dinámico: fotos y videos reales DETRÁS del texto ───────────
     03-oct-2026, el dueño: «enfoque profesional». La foto y el velo van a
     z-index:0, DEBAJO de `.hero .cont` (z-index:1, ahí vive el texto): así el
     texto siempre se lee encima de cualquier foto. Los puntos, en cambio,
     necesitan z-index:2 —POR ENCIMA de `.cont`—: si compartieran el 0,
     `.cont` los tapa enteros (hallado probando en vivo: `.acciones` es una
     fila flex de ancho completo y su hueco vacío a la derecha de los botones
     sigue intercepta los clics aunque no se vea nada ahí). Y por eso tampoco
     viven DENTRO de `.hero__visor`: ese contenedor tiene su propio z-index y
     crea su propio contexto de apilamiento, así que nada de dentro podría
     pintarse por encima del velo, que es un hermano aparte. */
  .hero__visor, .hero__velo{position:absolute; z-index:0}
  .hero__visor-puntos{position:absolute; z-index:2}
  .hero__visor{inset:0; overflow:hidden}
  .hero__visor-capas{position:absolute; inset:0}
  .hero__visor-capa{position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease}
  .hero__visor-capa.activa{opacity:1}
  .hero__visor-capa img, .hero__visor-capa video{width:100%; height:100%; object-fit:cover; display:block}
  .hero__velo{inset:0;
    background:linear-gradient(100deg, rgba(28,28,27,.86) 0%, rgba(28,28,27,.62) 42%, rgba(28,28,27,.32) 72%, rgba(28,28,27,.14) 100%)}
  .hero__visor[hidden], .hero__velo[hidden], .hero__visor-puntos[hidden]{display:none}
  .hero--conVisor .bola{display:none}
  .hero__visor-puntos{left:50%; bottom:8px; transform:translateX(-50%); display:flex; flex-wrap:wrap; justify-content:center; gap:2px; max-width:calc(100% - 260px)}
  .hero__visor-punto{width:26px; height:26px; padding:0; border:0; background:none;
    display:grid; place-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent}
  .hero__visor-punto::before{content:''; width:7px; height:7px; border-radius:50%;
    background:rgba(255,255,255,.55); transition:width .2s ease, background .2s ease}
  .hero__visor-punto.activo::before{width:20px; background:var(--papel)}
  .hero__visor-punto:focus-visible{outline:2px solid var(--papel); outline-offset:2px; border-radius:50%}
  @media (prefers-reduced-motion: reduce){ .hero__visor-capa{transition:none} }
  /* 04-oct-2026: el efecto y el ajuste los elige el admin en Galería →
     «portal.portada». El fundido es el de siempre; «deslizar» entra desde la
     derecha; «zoom» acerca la foto despacio mientras se ve (Ken Burns). Con
     «contener» la foto se ve entera, con bandas, en vez de recortarse. */
  .efecto--ninguno .hero__visor-capa{transition:none}
  .efecto--deslizar .hero__visor-capa{transform:translateX(8%); transition:opacity .9s ease, transform .9s ease}
  .efecto--deslizar .hero__visor-capa.activa{transform:none}
  .efecto--zoom .hero__visor-capa img, .efecto--zoom .hero__visor-capa video{transform:scale(1); transition:transform 9s ease-out}
  .efecto--zoom .hero__visor-capa.activa img{transform:scale(1.08)}
  .ajuste--contener .hero__visor-capa img, .ajuste--contener .hero__visor-capa video{object-fit:contain; background:var(--asfalto)}
  /* El botón de sonido, hermano de los puntos (encima del velo, como ellos). */
  .hero__visor-sonido{position:absolute; z-index:2; right:16px; bottom:14px; min-height:42px; padding:8px 16px; border-radius:999px;
    border:2px solid rgba(255,255,255,.8); background:rgba(28,28,27,.62); color:var(--papel); font-family:var(--display);
    font-weight:600; font-size:.92rem; cursor:pointer; white-space:nowrap}
  /* 06-oct-2026 · el dueño: «amplía mucho más el canva de la portada». Con fotos
     o videos cargados la portada deja de ser una banda y pasa a ser una ventana
     grande; el texto baja al pie, sobre el velo, para que se vea la imagen.
     Sin nada cargado sigue siendo la banda compacta del 15-sep. */
  .hero--conVisor .hero__banda{min-height:clamp(460px, 72vh, 780px); align-items:flex-end; padding-bottom:64px}
  .hero--conVisor .hero__velo{background:linear-gradient(180deg, rgba(28,28,27,.10) 0%, rgba(28,28,27,.18) 45%, rgba(28,28,27,.78) 100%),
    linear-gradient(100deg, rgba(28,28,27,.55) 0%, rgba(28,28,27,0) 60%)}
  .hero--conVisor h1{font-size:clamp(1.9rem, 4vw, 3.4rem); max-width:22ch}
  .hero__visor-sonido[hidden]{display:none}
  .hero__visor-sonido:focus-visible{outline:2px solid var(--papel); outline-offset:2px}
  @media (prefers-reduced-motion: reduce){
    .efecto--deslizar .hero__visor-capa, .efecto--zoom .hero__visor-capa img, .efecto--zoom .hero__visor-capa video{transform:none; transition:none}
  }
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:12px; border:var(--trazo) solid var(--contorno); box-shadow:var(--pega); font-family:var(--display); font-weight:600; font-size:1rem; text-decoration:none; transition:transform .12s ease, box-shadow .12s ease; background:var(--papel); color:var(--asfalto)}
  .btn:hover{transform:translateY(-2px); box-shadow:0 6px 0 var(--contorno)}
  .btn:active{transform:translateY(2px); box-shadow:0 2px 0 var(--contorno)}
  .btn--ambar{background:var(--ambar); color:var(--papel)}
  .btn--monte{background:var(--monte); color:var(--asfalto)}
  .btn--barro{background:var(--barro); color:var(--asfalto)}
  .btn--lineal{background:transparent; color:var(--papel); border-color:var(--papel); box-shadow:none}
  .btn:disabled{opacity:.5; cursor:default; transform:none}

  /* ── Tarjetas de salida ── */
  .rejilla{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:22px}
  .salida{background:var(--papel); border:var(--trazo) solid var(--contorno); border-radius:var(--rodondo); box-shadow:var(--pega); overflow:hidden; display:flex; flex-direction:column; min-width:0}
  .salida__foto{position:relative; height:190px; background:var(--linea)}
  .salida__foto img{width:100%; height:100%; object-fit:cover; display:block}
  .salida__tipo{position:absolute; top:12px; left:12px; background:var(--asfalto); color:var(--papel); font-family:var(--display); font-weight:600; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px}
  .salida__fecha{position:absolute; bottom:12px; left:12px; background:var(--papel); color:var(--asfalto); border:2px solid var(--contorno); font-family:var(--display); font-weight:600; font-size:.92rem; padding:5px 12px; border-radius:999px; box-shadow:0 3px 0 var(--contorno)}
  .salida__cupo{position:absolute; top:12px; right:12px; padding:4px 10px; border-radius:999px; font-weight:600; font-size:.8rem; border:2px solid var(--contorno)}
  .cupo--ok{background:var(--monte); color:var(--asfalto)}
  .cupo--pocos{background:var(--barro); color:var(--asfalto)}
  .cupo--lleno{background:var(--niebla); color:var(--papel)}
  .salida__cuerpo{padding:16px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1}
  .salida h3{font-size:1.3rem; font-weight:700; color:var(--vivo, var(--asfalto))}
  .salida .region{color:var(--niebla); font-size:.9rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600}
  /* La urgencia real (04-oct-2026): «Sale en N días» solo a 21 días o menos. */
  .salida__pronto{display:flex; width:fit-content; margin-bottom:6px; padding:2px 10px; border-radius:999px;
    background:#fff4e5; border:1px solid var(--barro); color:#8a4200; font-size:.8rem; font-weight:600}
  .salida__pronto--ya{background:var(--barro); color:var(--asfalto)}
  .salida .desc{color:#4a4a48; font-size:.95rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
  .incluye{display:flex; flex-wrap:wrap; gap:6px}
  .incluye span{background:var(--arena); border:1px solid var(--linea); border-radius:999px; padding:3px 10px; font-size:.82rem}
  .salida__pie{margin-top:auto; display:flex; align-items:end; justify-content:space-between; gap:8px; padding-top:8px; border-top:1px solid var(--linea)}
  .precio{line-height:1.1}
  .precio i{display:block; font-style:normal; font-size:.72rem; color:var(--niebla); text-transform:uppercase; letter-spacing:.08em; font-weight:600}
  .precio b{font-family:var(--display); font-size:1.4rem; font-weight:700; color:var(--ambar); font-variant-numeric:tabular-nums}
  .precio small{display:block; color:var(--niebla); font-size:.8rem}
  .btn--chico{padding:9px 16px; font-size:.92rem}
  .vacio{background:var(--papel); border:2px dashed var(--linea); border-radius:var(--rodondo); padding:28px; text-align:center; color:var(--niebla)}

  /* ── Destinos ── */
  .destinos{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px}
  .destino{position:relative; border:var(--trazo) solid var(--contorno); border-radius:14px; overflow:hidden; box-shadow:var(--pega); background:var(--papel); text-decoration:none; color:var(--asfalto); display:flex; flex-direction:column; min-width:0}
  .destino img{width:100%; height:130px; object-fit:cover; display:block}
  .destino .sin{height:130px; background:linear-gradient(135deg, var(--vivo) 0%, var(--arena) 140%)}
  .destino .pie{padding:10px 12px 12px; border-top:3px solid var(--vivo)}
  .destino .pie b{font-family:var(--display); color:var(--vivo); font-size:1.05rem; display:block}
  .destino .pie small{color:var(--niebla)}

  /* ── Cotizador ── */
  .cotizador{background:var(--asfalto); color:var(--papel)}
  .cotizador h2{color:var(--papel)}
  .cotizador .sub{color:#c9c9c6}
  .cot{display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:28px; align-items:start}
  .campo{display:flex; flex-direction:column; gap:6px; margin-bottom:16px}
  .campo label{font-weight:600; font-size:.9rem; color:#e9e9e6}
  .campo select, .campo input{width:100%; padding:12px 14px; border-radius:10px; border:2px solid #444; background:#2a2a29; color:var(--papel); font:inherit; min-width:0}
  .campo select:focus, .campo input:focus{outline:none; border-color:var(--monte)}
  .pax{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px}
  .pax .campo{margin-bottom:0}
  .paso{display:inline-flex; align-items:center; gap:8px; font-family:var(--display); color:var(--monte); font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; margin-bottom:10px}
  .paso b{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--monte); color:var(--asfalto); font-size:.8rem}
  .segm{display:flex; gap:8px; flex-wrap:wrap}
  .segm button{flex:1; min-width:120px; padding:11px 12px; border-radius:10px; border:2px solid #555; background:transparent; color:var(--papel); font-weight:600}
  .segm button.activo{background:var(--monte); color:var(--asfalto); border-color:var(--monte)}
  .resumen{background:#2a2a29; border:2px solid #444; border-radius:var(--rodondo); padding:22px; position:sticky; top:88px}
  .resumen h3{font-size:1.15rem; margin-bottom:14px; color:var(--papel)}
  .linea{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid #3d3d3c; font-variant-numeric:tabular-nums}
  .linea span:first-child{color:#d6d6d3}
  .total{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:14px}
  .total b{font-family:var(--display); font-size:2rem; color:var(--monte); font-variant-numeric:tabular-nums}
  .nota{font-size:.85rem; color:#b9b9b6; margin-top:6px}
  .aviso{margin-top:12px; padding:10px 12px; border-radius:10px; font-size:.9rem; background:#3a2a10; border:1px solid var(--barro); color:#ffd9b0}
  .aviso--bien{background:#12352d; border-color:var(--monte); color:#c9f3e7}
  .aviso--mal{background:#3d1524; border-color:var(--ambar); color:#ffd3e1}
  .reservar{margin-top:18px; display:none; gap:10px; flex-direction:column}
  .reservar.visible{display:flex}
  .reservar input{padding:11px 12px; border-radius:10px; border:2px solid #444; background:#1f1f1e; color:var(--papel); font:inherit; width:100%}
  .honey{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

  /* ── A medida ── */
  .medida{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px}
  .medida .campo{margin-bottom:0}
  .medida .campo input, .medida .campo select, .medida .campo textarea{width:100%; padding:11px 12px; border-radius:10px; border:2px solid var(--linea); background:var(--papel); color:var(--asfalto); font:inherit}
  .medida .campo label{color:var(--asfalto)}
  .medida .ancho{grid-column:1 / -1}
  .medida textarea{min-height:90px; resize:vertical}

  /* ── Ocupación del buscador: habitaciones, adultos, niños y SUS EDADES ──
     Como en el motor de tarifas: sin la edad de cada niño la que vuelve no es la del
     grupo (un menor paga según su edad). */
  .ocup{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px}
  .ocup-nota{margin:0 0 10px; font-size:.78rem; line-height:1.4; color:var(--niebla)}
  .ocup-hab{border:2px solid var(--linea); border-radius:12px; padding:12px 14px; background:var(--papel); min-width:0}
  .ocup-hab h4{display:flex; justify-content:space-between; align-items:center; gap:8px; margin:0 0 10px;
    font-family:var(--display); font-size:.95rem; color:var(--asfalto)}
  /* «Quitar» la habitación: 46×24 y pegado al borde del recuadro. Crece con
     relleno y se compensa con margen negativo para que el título «Habitación 2»
     no se descoloque; el margen de abajo del h4 absorbe lo que sobra. */
  .ocup-hab h4 button{border:0; background:transparent; color:var(--barro); font:inherit; font-size:.82rem;
    font-weight:600; cursor:pointer; min-height:40px; display:inline-flex; align-items:center;
    padding:0 10px; margin:-8px -10px -8px 0; border-radius:10px}
  .ocup-hab h4 button:hover{background:var(--arena)}
  .ocup-fila{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
  .ocup-edades{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:10px}
  .ocup .campo{margin-bottom:0}
  .ocup .campo label{font-size:.82rem}
  .ocup .campo select{width:100%; padding:10px 11px; border-radius:10px; border:2px solid var(--linea); background:var(--papel); color:var(--asfalto); font:inherit}
  .ocup .campo select.falta{border-color:var(--ambar); background:#fff4f8}
  .ocup-mas{border:2px dashed var(--linea); border-radius:12px; background:transparent; color:var(--asfalto);
    font:inherit; font-weight:600; padding:12px; cursor:pointer; min-height:52px}
  .ocup-mas:hover{border-color:var(--ambar); color:var(--ambar)}
  .ocup-resumen{font-size:.85rem; color:var(--niebla); margin-top:8px}

  /* ── Contacto y pie ── */
  .contacto{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px}
  .tarjeta{background:var(--papel); border:var(--trazo) solid var(--contorno); border-radius:var(--rodondo); box-shadow:var(--pega); padding:20px}
  .tarjeta h3{font-size:1.1rem; margin-bottom:8px}
  .tarjeta p{color:#4a4a48}
  footer{background:var(--asfalto); color:var(--papel); padding:32px var(--margen) 24px; font-size:.9rem}
  .pie-contenido{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:28px; max-width:var(--ancho); margin:0 auto}
  footer strong{display:block; font-family:var(--display); margin-bottom:6px}
  footer p{margin:4px 0; opacity:.85}
  /* Los dos enlaces del pie («Entra a tu cuenta», «Ingreso asesores») son la
     puerta de quien ya es cliente y medían 18 px de alto. Van dentro de un
     renglón de texto, así que crecen por relleno vertical: el renglón sigue
     fluyendo y la zona que responde al dedo llega a 40 px. */
  footer p > a{display:inline-block; padding-block:11px; margin-block:-11px}
  .wa{position:fixed; right:18px; bottom:18px; z-index:40; display:inline-flex; align-items:center; gap:10px; background:#25D366; color:#0b2b18; border:var(--trazo) solid var(--contorno); box-shadow:var(--pega); border-radius:999px; padding:12px 18px; font-family:var(--display); font-weight:700; text-decoration:none}
  .wa svg{width:26px; height:26px}
  .wa .wa__glifo{background:var(--papel); border-radius:50%; padding:3px; display:inline-flex}
  .wa .wa__glifo svg{width:22px; height:22px; fill:#25D366}
  /* 🔴 Por encima de TODO (los modales van en 70): en 60 quedaba bajo el velo y,
     con el buscador abierto, «Dinos desde qué ciudad sales» no se veía y Buscar
     parecía no hacer nada. No atrapa clics: es un aviso, no un botón. */
  .toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--asfalto); color:var(--papel); padding:12px 18px; border-radius:12px; border:2px solid var(--monte); z-index:90; display:none; max-width:90vw; pointer-events:none; box-shadow:0 4px 0 rgba(0,0,0,.35)}
  .toast.visible{display:block; animation:toast-entra .2s ease-out}
  @keyframes toast-entra{from{opacity:0; transform:translate(-50%, 6px)}}
  /* Con un modal abierto sube arriba: abajo tapaba justo la barra «Tu viaje»
     que acaba de cambiar. Claro sobre la cabecera oscura, y sin llegar a la ✕. */
  body.con-modal .toast{bottom:auto; top:12px; max-width:min(560px, calc(100vw - 140px)); text-align:center; font-weight:600;
    background:var(--papel); color:var(--asfalto); border:var(--trazo) solid var(--contorno); box-shadow:var(--pega)}
  @media (prefers-reduced-motion:reduce){ .toast.visible{animation:none} }
  .cargando{color:var(--niebla); padding:24px; text-align:center}

  @media (max-width:820px){
    .cot{grid-template-columns:1fr}
    .resumen{position:static}
    .nav nav a:not(.cta):not(.cuenta){display:none}
    #btn-cliente{margin-left:0}
    .salida__foto{height:170px}
  }

  /* ── El menú del teléfono (16-sep-2026) ─────────────────────────────────
     De 820 px para abajo los cinco enlaces de la cabecera se escondían y no
     había ningún botón que los recuperara: en un teléfono el menú no existía
     (medido a 393x852: los cinco con display «none» y ningún control con
     aria-label de menú). Se recuperan ENTEROS y con su orden —los mismos
     enlaces del mismo <nav>, ni copiados ni renombrados—, desplegados debajo
     de la cabecera con un botón a un toque. */
  .nav-enlaces{display:contents}
  .nav-hamb{display:none}
  @media (max-width:820px){
    .nav-hamb{display:inline-flex; align-items:center; justify-content:center; flex:none;
      width:44px; height:44px; border-radius:999px; border:2px solid rgba(255,255,255,.35);
      background:transparent; color:var(--papel); font-size:1.15rem; line-height:1}
    .nav-hamb[aria-expanded="true"]{background:var(--ambar); border-color:var(--ambar)}
    /* Panel colgado de la cabecera (absoluto), no una fila más: `.nav` mide el
       alto de la cabecera para colocar la píldora del buscador, y estirarla al
       abrir el menú la mandaba a perseguirse a sí misma. */
    body.menu-abierto .nav .nav-enlaces{display:flex; flex-direction:column; align-items:stretch;
      position:absolute; left:0; right:0; top:100%; gap:2px; padding:10px var(--margen) 14px;
      background:var(--asfalto); border-top:2px solid rgba(255,255,255,.14);
      box-shadow:0 10px 18px rgba(0,0,0,.28)}
    /* Le gana al `display:none` de arriba y al `visibility:hidden` de
       `cab-sin-enlaces` (cuando la cabecera le hace sitio a la píldora) por
       peso propio: tres clases y tres etiquetas, sin un solo !important.
       Al `hidden` de ajustarAtajos() NO le gana, y es a propósito: un enlace a
       una sección vacía seguiría sin llevar a ninguna parte. */
    body.menu-abierto .nav nav a:not(.cta):not(.cuenta):not([hidden]){
      display:block; visibility:visible; pointer-events:auto; padding:11px 12px; font-size:1rem}
    /* Con el panel abierto la cabecera pasa por encima de la píldora fija del
       buscador (z-index 51), que flota justo debajo y lo tapaba. */
    body.menu-abierto header{z-index:60}
  }

  /* ── Portal del cliente ── */

  .portal{padding:40px 0 64px}
  .entrada{max-width:440px; margin:40px auto; background:var(--papel); border:var(--trazo) solid var(--contorno); border-radius:var(--rodondo); box-shadow:var(--pega); padding:28px}
  .entrada h2{margin-bottom:6px}
  .entrada .campo{margin-bottom:14px}
  .entrada .campo input{width:100%; padding:12px 14px; border-radius:10px; border:2px solid var(--linea); background:var(--papel); color:var(--asfalto); font:inherit}
  .entrada .campo input:focus{outline:none; border-color:var(--monte)}
  .entrada .campo label{color:var(--asfalto)}
  .entrada .error{color:var(--ambar); font-weight:600; margin-top:10px}
  /* «¿Olvidaste tu contraseña?», «Volver a entrar», «Pedir otro código»: cada
     uno es un renglón entero de enlace y medían 20 px de alto. Aquí no van
     metidos en un párrafo de texto corrido, así que se les da la altura
     directamente y quedan alineados con los campos de arriba. */
  .entrada p > a{display:inline-flex; align-items:center; min-height:40px}
  .banner{background:#fff4e5; border:2px solid var(--barro); border-radius:12px; padding:12px 16px; margin-bottom:20px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:space-between}
  .cab-portal{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:24px}
  .cab-portal .acciones{display:flex; gap:8px; flex-wrap:wrap}
  .viajes{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:20px}
  .viaje{background:var(--papel); border:var(--trazo) solid var(--contorno); border-radius:var(--rodondo); box-shadow:var(--pega); overflow:hidden; cursor:pointer; display:flex; flex-direction:column; min-width:0; text-align:left; padding:0; font:inherit; color:inherit}
  .viaje--pasado{opacity:.75}
  .viaje__foto{height:150px; position:relative; background:var(--linea)}
  .viaje__foto img{width:100%; height:100%; object-fit:cover; display:block}
  .viaje__cuerpo{padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px}
  .estado{display:inline-block; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:700; border:2px solid var(--contorno)}
  .estado--reserva{background:var(--barro)} .estado--confirmado{background:var(--monte)} .estado--interesado{background:var(--linea)} .estado--cancelado{background:var(--niebla); color:var(--papel)}
  .detalle{background:var(--papel); border:var(--trazo) solid var(--contorno); border-radius:var(--rodondo); box-shadow:var(--pega); padding:24px; display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px}
  .detalle h3{font-size:1.05rem; margin-bottom:10px; display:flex; align-items:center; gap:8px}
  .detalle .bloque{min-width:0}
  .detalle .ancho{grid-column:1 / -1}
  .fila{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--linea); font-variant-numeric:tabular-nums}
  .fila span:first-child{color:#4a4a48}
  .fila--total{font-family:var(--display); font-size:1.15rem; border-bottom:none; padding-top:10px}
  .saldo{color:var(--barro)} .aldia{color:var(--monte)}
  .docs{display:flex; flex-direction:column; gap:8px}
  .doc{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:2px solid var(--linea); border-radius:10px; text-decoration:none; color:var(--asfalto); background:var(--arena)}
  .doc:hover{border-color:var(--monte)}
  .doc b{font-family:var(--display)}
  .doc small{color:var(--niebla)}
  .silla{display:inline-block; background:var(--asfalto); color:var(--papel); border-radius:8px; padding:2px 8px; font-family:var(--display); font-size:.85rem}
  /* «← Mis viajes»: el único camino de vuelta desde el detalle de un viaje y
     medía 90×24. Crece hacia dentro (relleno) y se compensa el margen para que
     el título de abajo no se mueva de sitio. */
  .volver{background:none; border:none; color:var(--ambar); font-weight:600; min-height:40px;
    display:inline-flex; align-items:center; padding:0 10px; margin:0 -10px 6px; border-radius:10px;
    font-family:var(--display); font-size:1rem}
  .volver:hover{background:var(--arena)}
  .modal-velo{position:fixed; inset:0; background:rgba(28,28,27,.55); display:none; align-items:center; justify-content:center; z-index:70; padding:16px}
  .modal-velo.visible{display:flex}
  .modal{background:var(--papel); border:var(--trazo) solid var(--contorno); border-radius:var(--rodondo); box-shadow:var(--pega); padding:24px; width:100%; max-width:420px}

  /* ── Buscador en vivo ── */
  .buscador{background:var(--papel); border:var(--trazo) solid var(--contorno); border-radius:var(--rodondo); box-shadow:var(--pega); padding:22px}
  .tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
  .tabs button{padding:9px 16px; border-radius:999px; border:2px solid var(--linea); background:var(--arena); font-weight:600; color:var(--asfalto)}
  .tabs button.activo{background:var(--asfalto); color:var(--papel); border-color:var(--asfalto)}
  .estrellas{color:var(--barro); font-size:.9rem; letter-spacing:.05em}
  @media (max-width:820px){ .portal{padding-bottom:96px} }

  /* ── Ficha de la salida ── */
  .salida--abre{cursor:pointer}
  .salida--abre:hover{transform:translateY(-2px); box-shadow:0 6px 0 var(--contorno)}
  .salida--abre:focus-visible{outline:3px solid var(--ambar); outline-offset:3px}
  .modal--ancha{max-width:860px; max-height:92vh; overflow:auto; padding:0; position:relative}
  .modal .cerrar{position:absolute; top:12px; right:12px; z-index:2; width:40px; height:40px; border-radius:50%; border:var(--trazo) solid var(--contorno); background:var(--papel); box-shadow:var(--pega); font-weight:700; font-size:1rem}
  .ficha__galeria{display:flex; gap:6px; overflow-x:auto; scroll-snap-type:x mandatory; background:var(--asfalto)}
  .ficha__galeria img{height:300px; min-width:100%; object-fit:cover; scroll-snap-align:start; display:block}
  .ficha__galeria img + img{min-width:70%}
  .ficha__cab{display:flex; justify-content:space-between; align-items:start; gap:12px; padding:20px 24px 0}
  .ficha__cab h2{font-size:1.7rem}
  .ficha__texto{padding:12px 24px 0; color:#4a4a48}
  .acordeon-titulo{font-family:var(--display); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--niebla); margin:14px 0 6px}
  .modal--ancha > div > h4{padding:0 24px; font-family:var(--display); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--niebla); margin:20px 0 6px}
  .acordeon{padding:0 24px}
  .acordeon details{border:1px solid var(--linea); border-radius:10px; padding:0 12px; margin-bottom:6px; background:var(--arena)}
  .acordeon details[open]{padding-bottom:12px}
  /* 🔴 El título plegable ES el botón que abre el bloque: medía 24 px de alto y
     el relleno que lo rodeaba era del <details>, o sea zona muerta. El relleno
     se muda AQUÍ dentro para que los 40 px respondan al dedo. Sin tocar
     `display`: en cuanto el summary deja de ser list-item, Chrome se lleva el
     triangulito y no queda ninguna señal de que el bloque se abre. */
  .acordeon summary{cursor:pointer; font-weight:600; min-height:40px; padding:8px 0; box-sizing:border-box}
  .acordeon p{margin-top:8px; color:#4a4a48; font-size:.93rem}
  .ficha__pie{display:flex; justify-content:space-between; align-items:end; gap:12px; padding:20px 24px 24px; margin-top:12px; border-top:1px solid var(--linea); position:sticky; bottom:0; background:var(--papel)}
  @media (max-width:820px){ .ficha__galeria img{height:220px} .ficha__cab h2{font-size:1.4rem} }
  .salida__cupo--fija{position:static; flex-shrink:0; margin-top:4px}
  /* Compartir (04-oct-2026): al lado del cupo en la cabecera de la ficha. */
  .ficha__cab-lado{display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0}
  .ficha__compartir{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:6px 14px; border-radius:999px;
    border:2px solid var(--contorno); background:var(--papel); color:var(--asfalto); font:inherit; font-weight:600; font-size:.88rem;
    cursor:pointer; box-shadow:0 3px 0 var(--contorno)}
  .ficha__compartir:hover{transform:translateY(-1px)}
  .ficha__compartir:focus-visible{outline:2px solid var(--ambar); outline-offset:2px}
  /* La calculadora de la ficha (19-sep-2026): quiénes viajan → total del grupo. */
  .calc{margin:16px 24px 0; padding:16px; border:2px solid var(--linea); border-radius:16px; background:var(--arena)}
  .calc h4{margin:0 0 10px; font-family:var(--display); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--niebla)}
  .calc__pax{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px}
  .calc__cont{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 10px;
    border-radius:12px; background:var(--papel)}
  .calc__cont > span:first-child{display:flex; flex-direction:column; font-weight:600}
  .calc__cont small{font-weight:400; font-size:.76rem; color:var(--niebla)}
  .calc__ctrl{display:flex; align-items:center; gap:8px}
  .calc__ctrl b{min-width:1.4em; text-align:center; font-variant-numeric:tabular-nums}
  .calc__ctrl button{width:40px; height:40px; border-radius:50%; border:2px solid var(--contorno); background:var(--papel);
    font:700 1.1rem/1 var(--display); cursor:pointer}
  .calc__campo{display:flex; flex-direction:column; gap:4px; margin-top:12px; font-size:.85rem; font-weight:600}
  .calc__campo select{min-height:44px; padding:0 10px; border:2px solid var(--linea); border-radius:12px; font:inherit; font-weight:400; background:var(--papel)}
  .ficha__pie .precio small{display:block; font-size:.78rem; color:var(--niebla); font-style:normal}
  .calc__mal{color:#b3261e}
  .ficha__pie .calc__mal{font-size:.8rem}
  p.calc__mal{margin:8px 24px 0; font-size:.85rem}
  .calc__lleno{display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:2px; font-size:.88rem}
  .calc__lleno span{color:var(--niebla)}
  @media (max-width:560px){ .calc{margin:14px 16px 0} .calc__lleno{align-items:flex-start; text-align:left} }

/* ══════════════════════════════════════════════════════════════════════════
   PORTAL PÚBLICO · rediseño 12-sep-2026
   Más aire, más color y el recorrido completo dentro de modales. El trazo
   caricaturesco se mantiene: contorno negro, sombra dura y nada de degradados
   tímidos. Lo que cambia es el ritmo, no el carácter.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Accesos del menú: que se distingan de un vistazo ────────────────────── */
/* Eran dos botones grises iguales. El dueño: «que se identifiquen más
   fácilmente». Cada uno con su color, su icono y un brinco al pasar. */
.nav nav button.cuenta{
  display:inline-flex; align-items:center; gap:7px;
  border:2px solid rgba(255,255,255,.35); background:transparent; color:var(--papel);
  padding:8px 14px; border-radius:999px; font-weight:600; font-size:.92rem;
  transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.nav nav button.cuenta .cuenta__ico{font-size:1.05rem; line-height:1; transition:transform .25s ease}
.nav nav button.cuenta--cliente{border-color:var(--monte)}
.nav nav button.cuenta--asesor{border-color:var(--violeta)}
.nav nav button.cuenta--cliente:hover, .nav nav button.cuenta--cliente:focus-visible{
  background:var(--monte); border-color:var(--monte); transform:translateY(-2px);
  box-shadow:0 4px 0 rgba(0,0,0,.45);
}
.nav nav button.cuenta--asesor:hover, .nav nav button.cuenta--asesor:focus-visible{
  background:var(--violeta); border-color:var(--violeta); transform:translateY(-2px);
  box-shadow:0 4px 0 rgba(0,0,0,.45);
}
.nav nav button.cuenta:hover .cuenta__ico{transform:rotate(-12deg) scale(1.15)}
.nav nav button.cuenta:active{transform:translateY(0); box-shadow:none}
.nav nav .cta{border:0; background:var(--ambar); color:var(--papel); padding:9px 16px;
  border-radius:999px; font-weight:700; font-size:.92rem; transition:transform .16s ease, box-shadow .16s ease}
.nav nav .cta:hover{transform:translateY(-2px); box-shadow:0 4px 0 rgba(0,0,0,.45)}

/* ── Ofertas: carrusel que se arrastra ───────────────────────────────────── */
.sec--ofertas{background:
  radial-gradient(1200px 220px at 12% -40px, rgba(63,180,153,.18), transparent 70%),
  radial-gradient(900px 200px at 88% -20px, rgba(230,39,111,.14), transparent 70%), var(--arena)}
.carr-btns{display:flex; gap:8px}
.carr-btn{width:42px; height:42px; border-radius:50%; border:var(--trazo) solid var(--contorno);
  background:var(--papel); font-size:1.4rem; line-height:1; box-shadow:var(--pega);
  transition:transform .14s ease, box-shadow .14s ease}
.carr-btn:hover{transform:translateY(-2px); box-shadow:0 6px 0 var(--contorno)}
.carr-btn:active{transform:translateY(2px); box-shadow:0 1px 0 var(--contorno)}
.carrusel{display:grid; grid-auto-flow:column; grid-auto-columns:100%; gap:20px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:6px 2px 14px; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.carrusel::-webkit-scrollbar{display:none}
.carr-pieza{scroll-snap-align:center; min-width:0}
@media (min-width:900px){ .carrusel{grid-auto-columns:calc(50% - 10px)} }
.carr-puntos{display:flex; gap:0; justify-content:center; margin-top:0}
/* 🔴 El punto se DIBUJA de 10 px, pero lo que se toca mide 40×40. Antes el
   botón entero medía 10×10: para cambiar de oferta había que acertarle a una
   pepita más pequeña que la yema del dedo. El relleno transparente agranda la
   zona sensible sin engordar el dibujo; `.carr-puntos` pierde el hueco entre
   puntos porque ahora lo ponen los propios botones. */
.carr-punto{width:40px; height:40px; padding:0; display:grid; place-items:center;
  border:0; background:none; -webkit-tap-highlight-color:transparent}
.carr-punto::before{content:''; display:block; width:10px; height:10px; border-radius:50%;
  border:2px solid var(--contorno); background:var(--papel); transition:width .2s ease, background .2s ease}
.carr-punto.activo::before{width:28px; background:var(--ambar)}
.carr-punto:focus-visible{outline:3px solid var(--ambar); outline-offset:-6px; border-radius:50%}

/* ── Destinos: ahora son botones, no enlaces ─────────────────────────────── */
.destino{position:relative; text-align:left; padding:0; border:var(--trazo) solid var(--contorno);
  background:var(--papel); font:inherit; color:inherit; cursor:pointer}
.destino__chip{position:absolute; top:10px; left:10px; background:var(--monte); color:var(--papel);
  border:2px solid var(--contorno); border-radius:999px; padding:3px 10px; font-size:.72rem; font-weight:700}

@keyframes puerta-gira{0%,100%{transform:rotate(0)} 45%{transform:rotate(18deg)} 70%{transform:rotate(-10deg)}}
@media (prefers-reduced-motion:reduce){
  .nav nav button.cuenta, .carr-btn{transition:none}
}

/* ══ Buscador global: modal casi a pantalla completa ═══════════════════════
   🔴 Tres cosas lo dejaban en una tira de 420 px con la ✕ fuera:
   · `.modal` trae max-width:420px y `.modal--full` solo fijaba width. Aquí va
     con DOS clases (0,2,0) para ganarle sin !important.
   · la ✕ era `.modal .cerrar` (absoluta) y el modal no era `relative`: se
     posicionaba contra la página. Ahora es `.bs-cerrar`, dentro de la cabecera.
   · viaje.js medía la VENTANA; el cuerpo es un contenedor (`container: bs`) y
     sus columnas responden al ancho real del modal. */
#modal-buscar{padding:clamp(8px, 2vh, 18px) clamp(8px, 2vw, 18px)}
.modal.modal--full{
  position:relative; display:flex; flex-direction:column; padding:0; overflow:hidden;
  width:min(96vw, 1480px); max-width:100%; height:94vh; height:94dvh; max-height:100%;
  background:var(--arena);
}
.bs-cab{flex:none; position:relative; display:flex; align-items:center; gap:14px;
  padding:14px 18px 20px 20px; background:var(--asfalto); color:var(--papel)}
/* La carretera de la cabecera de la página: el modal es de la misma casa. */
.bs-cab::after{content:''; position:absolute; left:0; right:0; bottom:0; height:6px;
  background:repeating-linear-gradient(90deg, var(--ambar) 0 36px, var(--asfalto) 36px 52px, var(--monte) 52px 88px, var(--asfalto) 88px 104px)}
.bs-cab__globo{flex:none; width:46px; height:46px; display:grid; place-items:center; border-radius:50%;
  background:var(--monte); border:var(--trazo) solid var(--papel); font-size:1.45rem; line-height:1}
.bs-cab__txt{flex:1; min-width:0}
.bs-cab h2{font-size:clamp(1.15rem, 2.2vw, 1.55rem); color:var(--papel)}
.bs-cab .sub{color:#cfcfcb; margin-top:2px; font-size:.9rem}
.bs-cerrar{flex:none; width:44px; height:44px; border-radius:50%; border:var(--trazo) solid var(--papel);
  background:transparent; color:var(--papel); font-size:1.1rem; font-weight:700; line-height:1;
  transition:background .15s ease, border-color .15s ease, transform .2s ease}
.bs-cerrar:hover{background:var(--ambar); border-color:var(--ambar); transform:rotate(90deg)}
.bs-cerrar:focus-visible{outline:3px solid var(--monte); outline-offset:2px}
/* `--bs-lado` y `--bs-pie` también los lee la hoja «Tu viaje» (viaje.js): lo
   pegajoso se detiene en el borde del RELLENO, y la hoja tiene que llegar al
   borde real del modal. */
.bs-cuerpo{--bs-lado:clamp(12px, 2.4vw, 32px); --bs-pie:28px; flex:1; min-height:0; overflow:auto; overscroll-behavior:contain;
  padding:18px var(--bs-lado) var(--bs-pie);
  /* `size` y no solo `inline-size`: la hoja «Tu viaje» (viaje.js) mide su alto
     máximo con `cqh`. El alto del cuerpo lo pone el flex del modal, no su
     contenido, así que la contención de tamaño no lo aplasta. */
  container:bs / size}
.bs-cuerpo .buscador{background:transparent; border:0; box-shadow:none; padding:0}
.bs-cuerpo .rejilla{margin-top:22px}
.bs-progreso{font-size:.88rem; color:var(--niebla); margin:10px 2px 0}
.bs-progreso:empty{display:none}

/* ── Antes de la primera búsqueda ──────────────────────────────────────── */
/* El modal mide 94vh y bajo la barra quedaban ~500 px de arena vacía. Se llena
   con lo que sirve para empezar: los destinos de la agencia en fotos (tocar uno
   lo escribe en la búsqueda) y cómo funciona. */
.bs-inicio{grid-column:1 / -1; display:flex; flex-direction:column; gap:28px; margin-top:6px; min-width:0}
.bs-inicio section{min-width:0}
.bs-inicio__cab{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:12px}
.bs-inicio__cab h3{font-size:clamp(1.08rem, 2vw, 1.3rem)}
.bs-inicio__cab p{color:var(--niebla); font-size:.9rem; margin-top:2px}
.bs-ideas__mandos{display:flex; gap:8px; flex:none}
.bs-ideas__mandos[hidden]{display:none}
.bs-ideas__mandos button{width:40px; height:40px; padding:0; border-radius:50%; border:var(--trazo) solid var(--contorno);
  background:var(--papel); color:var(--asfalto); font-size:1.3rem; line-height:1; box-shadow:0 3px 0 var(--contorno)}
.bs-ideas__mandos button:hover{background:var(--ambar); color:var(--papel)}
/* Una sola fila que se desliza dentro de su caja: con muchos destinos no empuja
   «Así funciona» fuera de la vista. El relleno deja ver sombra y foco. */
.bs-ideas__fila{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(150px, 1fr); gap:14px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:6px 6px 12px; margin:-6px -6px 0}
.bs-ideas__fila::-webkit-scrollbar{display:none}
.bs-idea{position:relative; display:block; width:100%; aspect-ratio:3 / 4; max-height:270px; padding:0; overflow:hidden;
  scroll-snap-align:start; border:var(--trazo) solid var(--contorno); border-radius:var(--rodondo);
  background:var(--vivo, var(--monte)); color:var(--papel); text-align:left; box-shadow:var(--pega);
  transition:transform .15s ease, box-shadow .15s ease}
.bs-idea img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease}
.bs-idea__sin{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--display); font-size:3rem;
  font-weight:700; color:rgba(255,255,255,.9); text-shadow:0 3px 0 rgba(0,0,0,.22)}
.bs-idea__pie{position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:1px;
  padding:40px 12px 12px; background:linear-gradient(180deg, transparent, rgba(28,28,27,.9))}
.bs-idea__pie b{font-family:var(--display); font-size:1.08rem; line-height:1.15}
.bs-idea__pie small{font-size:.76rem; opacity:.88; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bs-idea__ir{position:absolute; top:10px; right:10px; width:32px; height:32px; display:grid; place-items:center; border-radius:50%;
  background:var(--ambar); color:var(--papel); border:2px solid var(--contorno); font-weight:700; line-height:1;
  opacity:0; transform:scale(.6); transition:opacity .15s ease, transform .2s ease}
.bs-idea:hover, .bs-idea:focus-visible{transform:translateY(-3px); box-shadow:0 7px 0 var(--contorno)}
.bs-idea:hover img{transform:scale(1.06)}
.bs-idea:hover .bs-idea__ir, .bs-idea:focus-visible .bs-idea__ir{opacity:1; transform:none}
.bs-idea:focus-visible{outline:3px solid var(--ambar); outline-offset:2px}
.bs-guia{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:12px}
.bs-guia__paso{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; background:var(--papel);
  border:2px solid var(--linea); border-radius:var(--rodondo); color:#4a4a48; font-size:.92rem; line-height:1.45}
.bs-guia__paso b{flex:none; width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
  background:var(--arena); border:2px solid var(--contorno); font-size:1.3rem; line-height:1}
.bs-guia__paso strong{display:block; color:var(--asfalto); font-family:var(--display); font-size:1rem; margin-bottom:1px}
/* El destino recién puesto destella: la barra está arriba y la idea, abajo. */
.bs-campo--puesto{animation:bs-puesto 1s ease-out}
@keyframes bs-puesto{0%, 30%{background:#fde3ee; border-color:var(--ambar)}}

/* ── Pestañas: control segmentado ──────────────────────────────────────── */
/* En angosto no se envuelven en dos renglones: se deslizan dentro de su
   propia caja, que es la única que desborda. */
.bs-tabs{display:flex; gap:4px; width:max-content; max-width:100%; overflow-x:auto; scrollbar-width:none;
  padding:4px; margin:0 0 14px; background:var(--papel); border:var(--trazo) solid var(--contorno);
  border-radius:999px; box-shadow:var(--pega)}
.bs-tabs::-webkit-scrollbar{display:none}
/* 🔴 DOS SERVICIOS INVISIBLES EN EL TELÉFONO (17-sep-2026). A 393 px la tira
   mide 695 px dentro de una caja de 365 y escondía 330 sin insinuarlo:
   «🗺️ Tours y actividades» enseñaba 5 px y «🚐 Traslados» ninguno, mientras
   «✈️ Vuelos» terminaba JUSTO en el borde, así que la fila parecía completa. La
   barra de desplazamiento está oculta a propósito (0 px de alto), no había ni
   degradado ni máscara ni flecha: función escondida sin puerta, que es lo que el
   dueño no quiere. No se pliega nada; se dice que hay más y se da con qué
   moverse. La envoltura es la que lleva la flecha, porque la tira se desliza. */
.bs-tabs-caja{position:relative; display:flex; align-items:center; margin:0 0 14px; min-width:0}
.bs-tabs-caja .bs-tabs{margin:0; flex:1 1 auto}
/* El degradado se enciende solo cuando de verdad queda tira por ver: lo dice la
   propia caja con `data-hay` («ini», «fin», «ambos»), que escribe index.html al
   deslizar. Sin datos —pestañas que caben— no se pinta nada. */
.bs-tabs-caja::before, .bs-tabs-caja::after{content:''; position:absolute; top:4px; bottom:4px; width:38px;
  pointer-events:none; opacity:0; transition:opacity .15s ease; border-radius:999px}
.bs-tabs-caja::before{left:2px; background:linear-gradient(90deg, var(--papel) 35%, transparent)}
.bs-tabs-caja::after{right:2px; background:linear-gradient(270deg, var(--papel) 35%, transparent)}
.bs-tabs-caja[data-hay="ini"]::before, .bs-tabs-caja[data-hay="ambos"]::before{opacity:1}
.bs-tabs-caja[data-hay="fin"]::after, .bs-tabs-caja[data-hay="ambos"]::after{opacity:1}
/* El botón de al lado es la PUERTA y el CONTADOR a la vez: dice cuántos
   servicios quedan fuera de la vista («+2 ›») y al tocarlo desliza la tira una
   pantalla. 40 px de alto, fuera de la tira para no tapar ninguna pestaña, y
   solo existe cuando de verdad sobra tira. */
.bs-tabs-mas{flex:none; min-width:40px; height:40px; margin-left:6px; display:none; align-items:center; gap:3px;
  padding:0 10px; border-radius:999px; border:var(--trazo) solid var(--contorno); background:var(--papel);
  color:var(--asfalto); font-family:var(--display); font-weight:700; font-size:.88rem; line-height:1; box-shadow:var(--pega)}
.bs-tabs-caja[data-hay] .bs-tabs-mas{display:inline-flex}
.bs-tabs-mas:hover{background:var(--ambar); color:var(--papel)}
.bs-tabs-mas:focus-visible{outline:3px solid var(--ambar); outline-offset:2px}
.bs-tabs button{flex:none; display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border:0;
  border-radius:999px; background:transparent; color:var(--asfalto); font-family:var(--display);
  font-weight:600; font-size:.95rem; white-space:nowrap; transition:background .15s ease, color .15s ease}
.bs-tabs button:hover{background:var(--arena)}
.bs-tabs button.activo{background:var(--asfalto); color:var(--papel)}
.bs-tabs button:focus-visible{outline:3px solid var(--ambar); outline-offset:-3px}
.bs-tab__ico{font-size:1.1rem; line-height:1}

/* ── La barra de búsqueda ──────────────────────────────────────────────── */
/* Angosto primero (campos apilados, fechas en pareja); en contenedor ancho, una
   sola fila como la de cualquier buscador de viajes. */
.bs-barra{position:relative; display:flex; flex-wrap:wrap; gap:10px; padding:12px; background:var(--papel);
  border:var(--trazo) solid var(--contorno); border-radius:var(--rodondo); box-shadow:var(--pega)}
.bs-campo{position:relative; flex:1 1 100%; min-width:0; display:flex; flex-direction:column; justify-content:center;
  gap:2px; padding:8px 12px; border:2px solid var(--linea); border-radius:12px; transition:background .15s ease, border-color .15s ease}
.bs-campo--fecha{flex:1 1 140px}
.bs-campo:focus-within{border-color:var(--ambar)}
.bs-campo label, .bs-rot{font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--niebla); line-height:1.2}
.bs-campo input{width:100%; min-width:0; border:0; background:transparent; padding:2px 0; font:inherit;
  font-size:1rem; font-weight:500; color:var(--asfalto); outline:none}
.bs-campo input::placeholder{color:#aaa7a0}
.bs-lanzar{flex:1 1 100%; display:flex}
.bs-enviar{flex:1; font-size:1.05rem}
.bs-ocup-btn{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-width:0;
  border:0; background:transparent; padding:2px 0; font:inherit; font-size:1rem; font-weight:500; color:var(--asfalto); text-align:left}
.bs-ocup-btn:focus-visible{outline:none}
.bs-ocup-btn > span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bs-ocup-flecha{flex:none; transition:transform .2s ease}
.bs-campo--ocup.abierto .bs-ocup-flecha{transform:rotate(180deg)}
.bs-campo--ocup.abierto{border-color:var(--asfalto)}
.bs-campo--falta{border-color:var(--ambar)}
.bs-campo--falta .bs-rot{color:var(--ambar)}
.bs-campo--falta .bs-rot::after{content:' · falta una edad'}
/* 🔴 ALTURA DE DEDO EN EL ÚNICO GESTO DE LA PORTADA (16-sep-2026). Medido a
   393 px sin sesión: el campo del héroe («Hoteles, vuelos y paquetes a todo el
   mundo») daba 25,1 px de alto, y dentro del modal «CIUDAD O ZONA» 28 y las dos
   fechas del hotel 30. Es lo primero —y casi lo único— que toca un cliente desde
   el móvil: si falla el toque, no hay viaje. El rótulo de arriba se queda como
   está; lo que crece es la zona que responde al dedo. */
/* 🔴 17-sep-2026: esos 40 px estaban SOLO dentro del @media, así que a 1440 px
   los cuatro campos del buscador volvían a la franja estrecha —#b-destino 28,
   las dos fechas 30 y el botón de viajeros 28— y el icono del calendario, que
   es donde se pincha, vivía dentro de esos 30 px. La caja que los envuelve mide
   58 y el rótulo lleva `for=`, pero el objetivo de verdad es el control. Un
   dedo de 40 px no sobra en un ratón: aquí la regla vale para todos. */
.puerta__campo input{min-height:40px}
.bs-campo input, .bs-ocup-btn{min-height:40px}

/* El editor de viajeros: en angosto se abre dentro del campo; en ancho flota. */
.bs-ocup-panel{margin-top:10px; background:var(--papel); border:2px solid var(--contorno); border-radius:14px; padding:12px; cursor:auto}
.bs-ocup-panel[hidden]{display:none}
.bs-ocup-panel .ocup{grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:10px}
.bs-ocup-panel .ocup-hab{padding:10px 12px}
.bs-ocup-pie{display:flex; align-items:center; gap:10px; margin-top:12px}
.bs-ocup-aviso{font-size:.82rem; color:var(--ambar); font-weight:600; margin:0}
.bs-ocup-pie .btn{margin-left:auto; flex:none}
.ocup-paso{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0}
.ocup-paso + .ocup-paso{border-top:1px dashed var(--linea)}
.ocup-paso__rot{display:flex; flex-direction:column; font-weight:600; line-height:1.2}
.ocup-paso__rot small{font-weight:400; color:var(--niebla); font-size:.76rem}
.ocup-paso__ctrl{display:flex; align-items:center; gap:10px}
.ocup-paso__ctrl b{min-width:20px; text-align:center; font-family:var(--display); font-size:1.1rem; font-variant-numeric:tabular-nums}
.ocup-paso__ctrl button{width:40px; height:40px; padding:0; display:grid; place-items:center; border-radius:50%;
  border:2px solid var(--contorno); background:var(--papel); color:var(--asfalto); font-size:1.15rem; line-height:1;
  transition:background .12s ease, color .12s ease}
.ocup-paso__ctrl button:hover:not(:disabled){background:var(--ambar); color:var(--papel)}
.ocup-paso__ctrl button:disabled{opacity:.3; cursor:default}
.ocup-edad{display:flex; flex-direction:column; gap:4px; font-size:.8rem; font-weight:600; min-width:0}
.ocup-edad select{width:100%; min-width:0; min-height:40px; padding:8px 10px; border-radius:10px; border:2px solid var(--linea);
  background:var(--papel); color:var(--asfalto); font:inherit; font-size:.9rem}
.ocup-edad select.falta{border-color:var(--ambar); background:#fff4f8}
.bs-ocup-panel .ocup-mas{min-height:44px}

@container bs (min-width: 900px){
  .bs-barra{flex-wrap:nowrap; gap:0; padding:6px}
  .bs-campo{flex:1 1 0; border:0; border-radius:12px; padding:6px 16px}
  .bs-campo--lugar{flex-grow:1.6}
  /* Las fechas ceden ancho: son cortas y de tamaño fijo. Viajeros NO puede
     cortarse («2 adultos · …» no dice cuántos niños ni cuántas habitaciones),
     así que tiene un mínimo y, si aun así no cabe, parte en dos líneas en vez
     de esconder la mitad detrás de unos puntos suspensivos. */
  .bs-campo--fecha{flex:0.85 1 0; min-width:132px}
  .bs-campo--ocup{flex:1.1 1 0; min-width:210px}
  #b-ocup-resumen{white-space:normal; overflow:visible; text-overflow:clip; line-height:1.2}
  .bs-campo:focus-within, .bs-campo--ocup.abierto{background:var(--arena)}
  /* El separador va a la DERECHA de cada campo: los que se esconden según el
     servicio (origen, hotel, regreso) no dejan una raya suelta al principio. */
  .bs-campo:not(.bs-campo--ocup)::after{content:''; position:absolute; right:0; top:10px; bottom:10px; width:2px; background:var(--linea)}
  .bs-campo--falta{box-shadow:inset 0 -3px 0 var(--ambar)}
  .bs-lanzar{flex:none; padding-left:6px}
  .bs-enviar{padding-inline:30px}
  .bs-ocup-panel{position:absolute; z-index:6; top:calc(100% + 14px); right:0; width:390px; margin:0;
    border-width:var(--trazo); border-radius:var(--rodondo); box-shadow:0 6px 0 var(--contorno); padding:14px;
    max-height:min(66vh, 560px); overflow:auto}
}

@media (max-width:600px){
  /* Pantalla completa de verdad: en un teléfono un marco de 8 px solo roba sitio. */
  #modal-buscar{padding:0}
  .modal.modal--full{width:100%; height:100%; max-height:none; border:0; border-radius:0; box-shadow:none}
  .bs-cab{padding:10px 12px 16px}
  .bs-cab__globo{width:38px; height:38px; font-size:1.2rem}
  .bs-cab .sub{display:none}
  .bs-cuerpo{--bs-lado:12px; --bs-pie:20px; padding-top:14px}
}
@media (prefers-reduced-motion:reduce){
  .bs-cerrar, .bs-tabs button, .bs-campo, .bs-ocup-flecha, .bs-idea, .bs-idea img, .bs-idea__ir{transition:none}
  .bs-campo--puesto{animation:none}
}

/* ── Reservador ─────────────────────────────────────────────────────────── */
.rs-cab{margin-bottom:14px}
.rs-cab h3{font-size:clamp(1.25rem, 3vw, 1.7rem); margin-top:4px}
.rs-tipo{display:inline-block; background:var(--violeta); color:var(--papel); border:2px solid var(--contorno);
  border-radius:999px; padding:2px 12px; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em}
.rs-pasos{display:flex; gap:8px; list-style:none; padding:0; margin:0 0 20px; flex-wrap:wrap}
.rs-pasos li{display:flex; align-items:center; gap:7px; font-size:.84rem; font-weight:600; color:var(--niebla)}
.rs-pasos li b{width:24px; height:24px; border-radius:50%; border:2px solid currentColor;
  display:grid; place-items:center; font-size:.78rem}
.rs-pasos li.activo{color:var(--ambar)}
.rs-pasos li.hecho{color:var(--monte)}
.rs-pasos li + li::before{content:'›'; color:var(--linea); margin-right:2px}
.rs-rejilla{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:22px; align-items:start}
@media (max-width:820px){ .rs-rejilla{grid-template-columns:minmax(0,1fr)} }
.rs-h{font-family:var(--display); font-size:1.05rem; margin-bottom:12px}
.rs-pax{display:grid; gap:10px; margin-bottom:18px}
.rs-cont{display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:2px solid var(--linea); border-radius:var(--rodondo); padding:10px 14px; background:var(--papel)}
.rs-cont__rot{display:flex; flex-direction:column; font-weight:600}
.rs-cont__rot small{color:var(--niebla); font-weight:400; font-size:.78rem}
.rs-cont__ctrl{display:flex; align-items:center; gap:12px}
.rs-cont__ctrl b{min-width:24px; text-align:center; font-family:var(--display); font-size:1.15rem}
.rs-cont__ctrl button{width:40px; height:40px; border-radius:50%; border:2px solid var(--contorno);
  background:var(--arena); font-size:1.2rem; line-height:1; transition:transform .12s ease, background .12s ease}
.rs-cont__ctrl button:hover{background:var(--ambar); color:var(--papel); transform:scale(1.08)}
.rs-campo{display:flex; flex-direction:column; gap:5px; margin-bottom:14px; font-weight:600; font-size:.88rem}
.rs-campo small{color:var(--niebla); font-weight:400}
.rs-campo input, .rs-campo select{padding:11px 13px; border:2px solid var(--linea); border-radius:12px;
  font:inherit; font-weight:400; background:var(--papel)}
.rs-campo input:focus, .rs-campo select:focus{outline:none; border-color:var(--ambar)}
.rs-honey{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.rs-cuenta{border:var(--trazo) solid var(--contorno); border-radius:var(--rodondo);
  background:var(--arena); padding:16px; box-shadow:var(--pega)}
.rs-cuenta--plana{box-shadow:none; margin:16px 0; text-align:left}
.rs-linea{display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:.88rem}
.rs-linea small{color:var(--niebla)}
.rs-total{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  border-top:2px solid var(--contorno); margin-top:10px; padding-top:10px; font-weight:700}
.rs-total b{font-family:var(--display); font-size:1.3rem}
.rs-nota{color:var(--niebla); font-size:.8rem; margin-top:10px; line-height:1.45}
.rs-ok{color:var(--monte); font-weight:600; font-size:.85rem; margin-top:10px}
.rs-mal{color:var(--barro); font-weight:600; font-size:.85rem; margin-top:10px}
.rs-ancho{width:100%; margin-top:12px}
.rs-opciones{display:grid; gap:10px}
.rs-opcion{display:flex; align-items:center; gap:12px; border:2px solid var(--linea);
  border-radius:var(--rodondo); padding:14px; cursor:pointer; background:var(--papel); transition:border-color .14s ease}
.rs-opcion.activa{border-color:var(--monte); background:#F2FBF8}
/* El redondelito nativo mide 13 px. Lo que se TOCA aquí es la fila entera
   (la <label> envuelve al input, 353×76 a 393 px), así que no hace falta un
   redondel de 40; pero a 13 px no se leía como un control. */
.rs-opcion input[type="radio"]{flex:none; width:22px; height:22px; accent-color:var(--monte)}
.rs-opcion span{display:flex; flex-direction:column}
.rs-opcion small{color:var(--niebla)}
.rs-demo{background:#FFF6E8; border:2px dashed var(--barro); border-radius:var(--rodondo);
  padding:12px 14px; font-size:.85rem; line-height:1.5; color:var(--asfalto)}
.rs-demo--arriba{margin-bottom:16px}
/* `.btn--lineal` nació para el hero oscuro (letra y borde blancos). Dentro del
   modal de reserva el fondo es claro y «Volver» / «Pagar después» / «Cerrar»
   quedaban blancos sobre crema: estaban, pero no se veían (03-oct-2026). */
.rs-acc .btn--lineal, .rs-final__acc .btn--lineal{color:var(--asfalto); border-color:var(--contorno); background:var(--papel)}
/* El pago REAL (Bold): sello sobrio, no el aviso punteado de la demostración. */
.rs-seguro{background:#F2FBF8; border:2px solid var(--monte); border-radius:var(--rodondo);
  padding:12px 14px; margin-bottom:16px; font-size:.95rem}
/* Pagar en línea desde «Mi cuenta»: una caja propia dentro de «Tu cuenta». */
.pagar-linea{margin-top:14px; padding:14px; border:var(--trazo) solid var(--contorno); border-radius:var(--rodondo); background:#F2FBF8}
.pagar-linea label{display:block; font-weight:700; font-size:.9rem; margin-bottom:6px}
.pagar-linea__fila{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.pagar-linea__peso{font-weight:700; font-size:1.1rem}
.pagar-linea input{flex:1 1 140px; min-width:0; padding:11px 12px; border:var(--trazo) solid var(--contorno); border-radius:12px;
  font:inherit; font-size:1.05rem; font-variant-numeric:tabular-nums; background:var(--papel)}
.pagar-linea .nota{margin-top:8px; color:var(--niebla)}
.rs-final{text-align:center; padding:14px 0 6px}
.rs-final h3{font-size:1.5rem; margin:12px 0 6px}
.rs-sello{width:64px; height:64px; margin:0 auto; border-radius:50%; background:var(--monte);
  color:var(--papel); border:var(--trazo) solid var(--contorno); display:grid; place-items:center;
  font-size:2rem; animation:sello .45s cubic-bezier(.2,1.5,.4,1) both}
@keyframes sello{from{transform:scale(.3) rotate(-20deg); opacity:0}}
.rs-final__acc{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px}
/* El aviso pegado al campo que falla (ver `faltaEnPaso2` en reserva.js). Es un
   <em> dentro del <label>, para que quede junto a su input pase lo que pase con
   el orden de la columna; sin cursiva, que aquí no es énfasis sino corrección. */
.rs-campo .rs-mal{font-style:normal; margin-top:2px}
.rs-campo input[aria-invalid="true"]{border-color:var(--barro); background:#FFF7F3}
.rs-h--otra{margin-top:22px}
.rs-nota--arriba{margin-top:0; margin-bottom:10px}
/* Los demás viajeros: cada uno en su bloque, con el número y el tipo a la vista
   («2. Niño»), que es justo lo que el cliente no podía comprobar. */
.rs-acomp{border:2px dashed var(--linea); border-radius:var(--rodondo); padding:12px 14px 2px; margin-bottom:12px; background:var(--arena)}
.rs-acomp__rot{display:block; font-family:var(--display); font-size:.9rem; margin-bottom:8px}
.rs-acomp .rs-campo{margin-bottom:10px}
/* 🔴 EL BOTÓN DEL PASO, SIEMPRE DENTRO DE LA CAJA (17-sep-2026). A 393 px el
   «Continuar» del paso 1 nacía en y=847 cuando el modal termina en 818 y la
   pantalla en 852: lo último que se veía era el total y la nota, sin nada que
   avisara de que debajo seguía habiendo un botón (101 px de arrastre con 2
   adultos, 163 añadiendo niño y bebé). Se queda pegado al borde inferior
   mientras la cuenta esté a la vista, como ya hace `.ficha__pie` de esta misma
   hoja. No se esconde nada: el arrastre sigue existiendo para leer el desglose. */
@media (max-width:820px){
  .rs-acc{position:sticky; bottom:0; z-index:3; margin:12px -14px -14px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background:var(--papel); border-top:2px solid var(--linea);
    box-shadow:0 -10px 16px -14px rgba(28,28,27,.5)}
  .rs-acc .rs-ancho:first-child{margin-top:0}
}

/* ── Destino sin foto: un marcador con carácter, no una caja en blanco ──── */
/* La mayoría de destinos todavía no tiene portada cargada. Una tarjeta vacía
   se lee como «esto está roto»; un color de la paleta con la inicial se lee
   como «esto está por llegar». */
/* Foto y marcador miden lo mismo: si no, las tarjetas de una misma fila
   quedan desalineadas según tengan portada o no. */
.destino img{height:150px}
.destino .sin{
  height:150px; display:grid; place-items:center;
  background:linear-gradient(150deg, var(--vivo) 0%, color-mix(in srgb, var(--vivo) 55%, var(--asfalto)) 100%);
  position:relative; overflow:hidden;
}
.destino .sin::after{
  content:attr(data-inicial); font-family:var(--display); font-size:3.2rem; font-weight:700;
  color:rgba(255,255,255,.9); text-shadow:0 3px 0 rgba(0,0,0,.22);
}
.destino .sin::before{
  content:''; position:absolute; width:120px; height:120px; border-radius:50%;
  background:rgba(255,255,255,.14); right:-30px; top:-34px;
}

/* ══ La puerta al buscador global ═══════════════════════════════════════════
   El dueño: «que sea mucho más visible y mejor ubicado, en la parte central
   superior». Era un botón flotante en el rincón de WhatsApp: dos llamadas en el
   mismo sitio y ninguna se leía. Ahora es una barra de búsqueda de verdad en la
   portada (se escribe el destino ahí mismo) y, al bajar, una píldora fija
   centrada bajo la cabecera. */
.puerta{flex:1 1 380px; min-width:0; max-width:560px; margin-top:0}
.puerta[hidden]{display:none}
.puerta__servicios{display:flex; flex-wrap:wrap; gap:7px; padding:2px 2px 9px}
.puerta__servicios::-webkit-scrollbar{display:none}
.puerta__servicios button{flex:none; display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px;
  border:2px solid rgba(255,255,255,.8); background:rgba(28,28,27,.22); color:var(--papel); font-weight:600; font-size:.85rem;
  transition:background .15s ease, color .15s ease, transform .15s ease}
.puerta__servicios button:hover, .puerta__servicios button:focus-visible{background:var(--papel); color:var(--asfalto); transform:translateY(-2px)}
.puerta__barra{display:flex; align-items:center; gap:14px; padding:8px 8px 8px 12px; background:var(--papel); color:var(--asfalto);
  border:var(--trazo) solid var(--contorno); border-radius:22px; box-shadow:0 6px 0 var(--contorno)}
.puerta__barra:focus-within{box-shadow:0 6px 0 var(--contorno), 0 0 0 5px rgba(255,255,255,.5)}
.puerta__globo{flex:none; width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:var(--monte);
  border:var(--trazo) solid var(--contorno); font-size:1.7rem; line-height:1; animation:puerta-gira 6s ease-in-out infinite}
.puerta__campo{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; cursor:text}
.puerta__campo b{font-family:var(--display); font-size:1.18rem; line-height:1.2; color:var(--asfalto)}
.puerta__campo input{width:100%; min-width:0; border:0; background:transparent; padding:2px 0; font:inherit;
  font-size:1.02rem; color:var(--asfalto); outline:none; text-overflow:ellipsis}
.puerta__campo input::placeholder{color:#8f8c86}
.puerta__ir{flex:none; padding:14px 32px; font-size:1.1rem; border-radius:14px; animation:puerta-late 2.6s ease-in-out 1.5s 3}
/* Tres latidos al llegar y quieto: una llamada que no para de moverse cansa y
   se termina ignorando. */
@keyframes puerta-late{50%{box-shadow:var(--pega), 0 0 0 8px rgba(230,39,111,.3)}}

.puerta-fija{
  position:fixed; z-index:45; left:50%; top:calc(var(--cab-alto, 94px) + 10px);
  display:inline-flex; align-items:center; gap:10px; max-width:calc(100vw - 32px);
  padding:5px 5px 5px 6px; border-radius:999px; border:var(--trazo) solid var(--contorno);
  background:var(--papel); color:var(--asfalto); box-shadow:0 5px 0 var(--contorno); text-align:left;
  transform:translate(-50%, -14px); opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .3s cubic-bezier(.2,1.3,.5,1), opacity .2s ease, visibility 0s linear .3s, box-shadow .15s ease;
}
/* 🔴 `display:inline-flex` le gana al `[hidden]` del navegador. */
.puerta-fija[hidden]{display:none}
.puerta-fija.asoma{transform:translate(-50%, 0); opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s}
.puerta-fija.asoma:hover{transform:translate(-50%, -2px); box-shadow:0 7px 0 var(--contorno)}
.puerta-fija:focus-visible{outline:3px solid var(--ambar); outline-offset:3px}
/* Con cualquier modal abierto no existe: si no, queda encima de sus propios resultados. */
body.con-modal .puerta-fija{opacity:0; visibility:hidden; pointer-events:none; transition:none}
.puerta-fija__globo{flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:50%;
  background:var(--monte); border:2px solid var(--contorno); font-size:1.2rem; line-height:1; animation:puerta-gira 6s ease-in-out infinite}
.puerta-fija__txt{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.puerta-fija__txt b{font-family:var(--display); font-size:.98rem; white-space:nowrap}
.puerta-fija__txt small{font-size:.76rem; color:var(--niebla); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.puerta-fija__ir{flex:none; padding:8px 18px; border-radius:999px; background:var(--ambar); color:var(--papel);
  border:2px solid var(--contorno); font-family:var(--display); font-weight:600; line-height:1.25}
.puerta-fija.asoma .puerta-fija__ir{animation:puerta-late-fija 2.6s ease-in-out .5s 2}
@keyframes puerta-late-fija{50%{box-shadow:0 0 0 7px rgba(230,39,111,.3)}}
/* Siempre centrada; el script (vigilarPuertaFija) decide la altura midiendo el
   logo y cada botón del menú. `--cab`: dentro de la fila de la cabecera, si al
   centro no pisa nada. `--borde`: montada sobre el borde inferior de la
   cabecera, lo más arriba que dejen los botones: tapa la mitad que colgada.
   Las dos van encima de la cabecera (50). */
.puerta-fija.puerta-fija--cab, .puerta-fija.puerta-fija--borde{z-index:51; top:var(--cab-y, 14px)}
/* En lo oscuro la sombra negra no se ve: halo claro. */
.puerta-fija.puerta-fija--cab{box-shadow:0 0 0 4px rgba(255,255,255,.16)}
.puerta-fija.puerta-fija--cab.asoma:hover{box-shadow:0 0 0 6px rgba(255,255,255,.26)}
/* Media píldora sobre la cabecera oscura: el halo marca esa mitad y la sombra
   dura de la marca, la de abajo. */
.puerta-fija.puerta-fija--borde{box-shadow:0 5px 0 var(--contorno), 0 0 0 4px rgba(255,255,255,.14)}
.puerta-fija.puerta-fija--borde.asoma:hover{box-shadow:0 7px 0 var(--contorno), 0 0 0 5px rgba(255,255,255,.22)}
/* Colgada bajo la cabecera, se aparta mientras se escribe en un formulario de
   la página: en un teléfono con el teclado abierto tapaba el campo. */
body:has(main :is(input, textarea, select):focus) .puerta-fija:not(.puerta-fija--cab){opacity:0; visibility:hidden; pointer-events:none}
/* Al saltar por ancla, el título de la sección queda bajo la píldora, no tapado.
   `--puerta-bajo` lo mide el script: cuánto baja la píldora de la cabecera en
   la posición que le tocó (0 dentro de ella). */
body:has(#puerta-fija:not([hidden])) .sec{scroll-margin-top:calc(var(--cab-alto, 94px) + var(--puerta-bajo, 64px) + 12px)}

/* ── La cabecera le hace sitio a la píldora (13-sep-2026) ───────────────────
   El dueño: que no tape contenido y siga MUY visible arriba al centro. El
   script (vigilarPuertaFija) prueba de menos a más y deja en <body> las clases
   del primer plan en el que la píldora cabe DENTRO de la fila de la cabecera.
   Cada clase quita UNA cosa; los planes las combinan.
   🔴 Mientras están puestas, la fila NO cambia de alto: `--nav-reposo` es el
   que tiene sin ninguna (lo mide el script). En un teléfono de 393–430 px el
   menú en reposo va en dos filas (cabecera de 114 px); con los botones en
   icono cabía en una y la cabecera bajaba a 94. Todo lo de abajo subía 20 px,
   la barra de la portada volvía a quedar a la vista, la píldora se iba, la
   cabecera volvía a 114… sin parar: 149 parpadeos en 4 s. */
body:is(.cab-iconos, .cab-logo-chico, .cab-logo-mini, .cab-sin-enlaces, .cab-columna) .nav{min-height:var(--nav-reposo, 86px)}
/* Los enlaces se esconden con visibility y NO con display: conservan su sitio
   y los botones de la derecha no se mueven. */
body.cab-sin-enlaces .nav nav a:not(.cta){visibility:hidden; pointer-events:none}
/* Solo el icono, que conserva su color de borde (verde cliente, violeta
   asesor). El texto sigue ahí con tamaño 0: el lector de pantalla lo lee, y el
   `title` lo dice al pasar el ratón. */
body.cab-iconos .nav nav button.cuenta{font-size:0; gap:0; padding:7px 9px}
body.cab-iconos .nav nav button.cuenta .cuenta__ico{font-size:1.2rem}
body.cab-iconos #btn-cliente{margin-left:0}
body.cab-logo-chico .nav a.logo img{height:44px}
body.cab-logo-mini .nav a.logo img{height:36px}
/* En un teléfono el menú en reposo ya ocupa dos filas: los dos iconos, uno
   sobre otro, caben en ese mismo alto y le dejan a la píldora 52 px de ancho. */
body.cab-columna .nav nav{flex-direction:column; flex-wrap:nowrap; align-items:flex-end}
.puerta-fija--corta .puerta-fija__txt, .puerta-fija--mini .puerta-fija__txt{display:none}
.puerta-fija--corta .puerta-fija__ir::after{content:' destino'}

/* ══ Sin salidas publicadas (13-sep-2026) ══════════════════════════════════
   Producción arrancó en limpio. En vez de dos cajas grises «Por ahora no
   hay…», un solo aviso de la casa: el trazo y la sombra dura de las tarjetas,
   el degradado de la portada y un bus en su carretera. */
.sec--sin-salidas{background:
  radial-gradient(900px 220px at 12% -40px, rgba(63,180,153,.14), transparent 70%),
  radial-gradient(700px 200px at 88% -20px, rgba(230,39,111,.10), transparent 70%), var(--papel)}
.sec--sin-salidas .sec-cab{display:none}
.sin-salidas{grid-column:1 / -1; display:grid; grid-template-columns:minmax(200px, 300px) minmax(0, 1fr); overflow:hidden;
  background:var(--papel); border:var(--trazo) solid var(--contorno); border-radius:var(--rodondo); box-shadow:var(--pega)}
/* 🔴 `.btn` trae display:inline-flex, que le gana al [hidden] del navegador. */
.sin-salidas [hidden]{display:none}
.sin-salidas__arte{position:relative; display:flex; align-items:flex-end; justify-content:center; min-height:230px; overflow:hidden;
  background:linear-gradient(135deg, var(--monte) 0%, var(--ambar) 100%); border-right:var(--trazo) solid var(--contorno)}
.sin-salidas__arte::before{content:''; position:absolute; width:190px; height:190px; border-radius:50%;
  background:rgba(255,255,255,.14); right:-56px; top:-64px}
/* La carretera: asfalto con la raya del medio, como la cinta de la cabecera. */
.sin-salidas__arte::after{content:''; position:absolute; left:0; right:0; bottom:0; height:48px;
  background:repeating-linear-gradient(90deg, var(--papel) 0 22px, transparent 22px 40px) center / 100% 4px no-repeat, var(--asfalto);
  border-top:var(--trazo) solid var(--contorno)}
.sin-salidas__bus{position:relative; z-index:1; margin-bottom:36px; font-size:4.6rem; line-height:1;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.22)); animation:sin-salidas-bus 2.8s ease-in-out infinite}
@keyframes sin-salidas-bus{50%{transform:translateY(-5px)}}
.sin-salidas__txt{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:10px;
  padding:30px clamp(18px, 3.4vw, 40px); min-width:0}
.sin-salidas__cinta{background:var(--violeta); color:var(--papel); border:2px solid var(--contorno); border-radius:999px;
  padding:3px 12px; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em}
.sin-salidas h2{font-size:clamp(1.45rem, 2.8vw, 2.05rem)}
.sin-salidas p{color:#4a4a48; max-width:58ch}
.sin-salidas__acciones{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px}
@media (max-width:640px){
  .sin-salidas{grid-template-columns:minmax(0, 1fr)}
  .sin-salidas__arte{min-height:160px; border-right:0; border-bottom:var(--trazo) solid var(--contorno)}
  .sin-salidas__bus{font-size:3.6rem; margin-bottom:30px}
  .sin-salidas__arte::after{height:40px}
  .sin-salidas__acciones{width:100%}
  .sin-salidas__acciones .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){ .sin-salidas__bus{animation:none} }

@media (max-width:600px){
  /* 🔴 En una fila, no en tres. Envuelta (globo / campo / botón a lo ancho) la
     barra medía 187 px de una pantalla de 852 y la primera tarjeta se iba al
     píxel 964. Los objetivos siguen en 44 px de alto: se toca igual de bien. */
  .puerta{margin-top:2px}
  .puerta__barra{flex-wrap:nowrap; gap:8px; padding:6px 6px 6px 8px; border-radius:16px}
  .puerta__globo{width:38px; height:38px; font-size:1.2rem}
  .puerta__campo b{font-size:.95rem}
  .puerta__campo input{font-size:.88rem}
  .puerta__ir{flex:none; padding:11px 16px; font-size:.95rem; min-height:44px}
  /* En el teléfono no caben en dos filas sin comerse una tarjeta: vuelven a ser
     una tira que se desliza, con los botones a 40 px de alto para el dedo. */
  .puerta__servicios{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:2px 2px 8px}
  .puerta__servicios button{min-height:40px}
  /* Más delgada y más pegada a la cabecera: en un teléfono cada píxel de franja fija se le quita al contenido. */
  .puerta-fija{top:calc(var(--cab-alto, 94px) + 6px); gap:8px; padding:4px 4px 4px 5px}
  .puerta-fija__txt small{display:none}
  .puerta-fija__globo{width:30px; height:30px; font-size:1rem}
  .puerta-fija__ir{padding:5px 14px}
}
@media (prefers-reduced-motion:reduce){
  .puerta__globo, .puerta-fija__globo, .puerta__ir, .puerta-fija.asoma .puerta-fija__ir{animation:none}
  .puerta-fija, .puerta-fija.asoma, .puerta-fija.asoma:hover{transform:translate(-50%, 0)}
  .puerta-fija{transition:opacity .2s ease, visibility 0s linear .2s}
  .puerta__servicios button{transition:none}
}

/* ══ Pasadías y paquetes, protagonistas (15-sep-2026) ══════════════════════
   Encargo del dueño: «las pasadías y paquetes se exponen en el contenedor
   principal de la página». Van justo debajo de la portada, con tarjetas más
   grandes, dos puertas visibles (ficha y reserva) y una ficha que cuenta el
   viaje entero: qué incluye, el programa, dónde y a qué hora nos vemos. */
.sec--salidas{padding:26px 0 32px}
/* Cinta, título y frase en la MISMA fila: tres renglones de encabezado eran
   tres renglones menos de tarjeta en la primera pantalla. Nada se esconde. */
.sec-cab--salidas{align-items:center; margin-bottom:14px}
.sec-tit{position:relative; display:flex; align-items:baseline; gap:4px 12px; flex-wrap:wrap; min-width:0}
/* 🔴 El globo del «?» se cuelga de la FILA del título, no del propio «?»:
   centrado sobre él se salía de la página (medido: 91 px de desborde a 600 px
   de ancho). Va oculto, pero un elemento oculto SIGUE ocupando sitio y estira
   la página a lo ancho igual que uno visible.
   Al colgarse de la fila, el `top:calc(100% + 8px)` de la regla base lo abre
   debajo del ENCABEZADO entero (no tapa ni el título ni la frase) y por tanto
   lejos de la cabecera fija, que es lo que se lo comía. */
.sec-tit .ayuda{position:static}
.sec-tit .ayuda__globo{left:0; right:auto; transform:none; width:min(340px, 100%)}
.sec-tit .sec-cinta{margin-bottom:0; align-self:center}
.sec-tit h2{font-size:clamp(1.45rem, 2.5vw, 2rem)}
.sec-tit .sub{margin-top:0; min-width:0}
.sec-cinta{display:inline-block; background:var(--monte); color:var(--asfalto);
  border:2px solid var(--contorno); border-radius:999px; padding:3px 12px; margin-bottom:8px;
  font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em}
.sec-cinta--paquete{background:var(--barro)}
/* Cuántas hay y cuándo sale la próxima, al otro extremo del título. Vacía no
   ocupa: `:empty` la quita y el título no queda con un hueco a la derecha. */
.sec-nota{display:flex; flex-direction:column; align-items:flex-end; text-align:right;
  gap:2px; color:var(--niebla); font-size:.9rem}
.sec-cab--salidas .sec-nota{flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:2px 8px; flex:0 1 auto; min-width:0}
.sec-cab--salidas .sec-nota b::after{content:' ·'; color:var(--niebla); font-weight:400}
.sec-nota:empty{display:none}
.sec-nota b{font-family:var(--display); font-size:1.1rem; color:var(--asfalto)}

/* 🔴 minmax(min(330px, 100%), 1fr) y no minmax(330px, 1fr): en un teléfono de
   360 px el contenedor mide 328 y una columna fija de 330 desborda la página. */
.rejilla--salidas{grid-template-columns:repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap:22px}
/* 172 px de foto y no 230: con 230 la tarjeta medía 621 px y no cabía entera
   en la primera pantalla de un portátil (900 px). Con 172 la tarjeta mide 392
   (medido a 1440x900 el 16-sep: de 365 a 757). Sigue siendo la pieza más
   grande de la página y no se le quitó ni un dato.
   🔴 El número del comentario ES el número de la regla: decía «186» cuando la
   regla ponía 172, y el siguiente que ajuste esto trabajaría con otra vara. */
.rejilla--salidas .salida__foto{height:172px}
.rejilla--salidas .salida__cuerpo{padding:14px 16px 16px; gap:8px}
.rejilla--salidas .salida h3{font-size:1.3rem}
.rejilla--salidas .salida .desc{font-size:.94rem; -webkit-line-clamp:2}
.salida__pie{flex-wrap:wrap}
.salida__acciones{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-left:auto}
.salida__ver{background:var(--arena)}
/* La tarjeta que tapa el hueco de la fila (una o dos salidas publicadas).
   Trazo discontinuo y sin sombra: se ve que es una invitación, no una salida. */
/* Ocupa los tramos que sobran de la fila: con UNA sola salida el hueco eran dos
   tarjetas. 🔴 Por clase y no por estilo en línea: en línea le ganaba a la media
   query, y pedir dos tramos donde la rejilla tiene una sola columna hace que el
   navegador se invente otra columna (medido: 31 px de desborde a 320 px).
   🔴 16-sep-2026 — CUÁNTOS TRAMOS LO DICE LA REJILLA, NO EL NÚMERO DE SALIDAS.
   La clase la pone pintarSalidas() con las columnas que la rejilla tiene DE
   VERDAD en ese ancho (tramosInvita). Antes el ancho lo decidía una media
   query atada a 1114 px y con DOS salidas a 2 columnas (1000 px, medido: dos
   tarjetas de 449 en el 368 y la invitación sola en el 736) quedaba un hueco
   del tamaño de una tarjeta al lado — la «página a medio cargar» que se quería
   evitar, mudada al portátil pequeño.
   Las media queries de aquí abajo ya no reparten: son el TOPE. Cuántas
   columnas caben: 1 hasta 741 px, 2 hasta 1113 y 3 desde 1114 (contenido
   0,92·vw hasta 1000 px y min(1200,vw) − 80 después; cada columna 330 + 22 de
   hueco). Si el script midiera de más —o si la ventana se estrecha antes de
   repintar—, pedir tres tramos donde hay dos le hace inventarse una columna y
   desbordar la página a lo ancho. El tope lo impide sin un solo !important. */
.salida--invita{grid-column:span 1; border-style:dashed; box-shadow:none; justify-content:center}
.rejilla--salidas .salida--invita--doble{grid-column:span 2}
.rejilla--salidas .salida--invita--triple{grid-column:span 3}
@media (max-width:741px){
  .rejilla--salidas .salida--invita--doble, .rejilla--salidas .salida--invita--triple{grid-column:span 1}
}
@media (min-width:742px) and (max-width:1113px){
  .rejilla--salidas .salida--invita--triple{grid-column:span 2}
}
.salida--invita{background:
  radial-gradient(520px 180px at 50% 0, rgba(63,180,153,.16), transparent 70%),
  radial-gradient(420px 170px at 50% 100%, rgba(230,39,111,.12), transparent 70%), var(--papel)}
.salida--invita .salida__cuerpo{gap:10px; justify-content:center; align-items:center; text-align:center; padding:24px 20px}
.salida--invita h3{font-size:1.15rem; color:var(--asfalto)}
.rejilla--salidas .salida--invita .desc{-webkit-line-clamp:4; font-size:.97rem; max-width:46ch}
.salida__invita-ico{font-size:2rem; line-height:1}
.salida--invita .salida__acciones{margin-left:0; justify-content:center; margin-top:4px}
/* 🔴 `.btn` trae display:inline-flex, que le gana al [hidden] del navegador. */
.salida--invita [hidden]{display:none}
/* ── En el teléfono cada píxel de cabecera es un píxel menos de tarjeta ──
   Medido a 393x852: antes la primera tarjeta empezaba en el píxel 964 (o sea,
   ninguna se veía). Aquí se recorta lo que no es contenido: los aires de la
   banda, no sus palabras ni sus botones. */
@media (max-width:600px){
  .hero .cont{padding-top:16px; padding-bottom:16px}
  .hero__banda{gap:14px}
  .hero--conVisor .hero__banda{min-height:clamp(420px, 74vh, 640px); padding-bottom:58px}
  .hero__visor-sonido{right:10px; bottom:10px; font-size:.85rem; padding:6px 12px}
  .hero p{margin-top:5px}
  .hero .acciones{margin-top:10px}
  .hero .acciones .btn{padding:10px 16px; font-size:.94rem}
  .sec--salidas{padding:22px 0 26px}
  .sec-cab--salidas{margin-bottom:12px}
  .sec-tit{gap:2px 10px}
}

@media (max-width:640px){
  .rejilla--salidas{gap:20px}
  .rejilla--salidas .salida__foto{height:180px}
  .salida__acciones{width:100%; margin-left:0}
  .salida__acciones .btn{flex:1 1 auto; justify-content:center}
  .sec-cab .sec-nota{align-items:flex-start; text-align:left}
}

/* ── Ficha: los datos que se preguntan siempre ───────────────────────────── */
.ficha__datos{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap:10px; padding:16px 24px 0}
.dato{display:flex; align-items:center; gap:10px; min-width:0; padding:10px 12px;
  background:var(--arena); border:2px solid var(--linea); border-radius:12px}
.dato__ico{font-size:1.25rem; line-height:1; flex:none}
.dato i{display:block; font-style:normal; font-size:.7rem; font-weight:700; color:var(--niebla);
  text-transform:uppercase; letter-spacing:.08em}
.dato b{font-family:var(--display); font-weight:600; font-size:.98rem; line-height:1.25; overflow-wrap:anywhere}

/* ── Ficha: qué incluye y qué no ─────────────────────────────────────────── */
.ficha__bloque{padding:18px 24px 0}
.ficha__bloque h4{font-family:var(--display); font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--niebla); margin:0 0 8px}
.ficha__incluye{display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); gap:20px}
.ficha__no{list-style:none; padding:0; display:flex; flex-direction:column; gap:5px}
.ficha__no li{position:relative; padding-left:18px; color:#4a4a48; font-size:.92rem}
.ficha__no li::before{content:'✕'; position:absolute; left:0; top:0; color:var(--niebla); font-size:.78rem}

/* ── Ficha: el programa, parada por parada ───────────────────────────────── */
.plan{display:flex; flex-direction:column; gap:14px}
.plan__dia{border:2px solid var(--linea); border-radius:14px; background:var(--arena); overflow:hidden}
.plan__cab{display:flex; align-items:baseline; gap:10px; padding:9px 14px;
  background:var(--asfalto); color:var(--papel)}
.plan__cab b{font-family:var(--display); font-size:1rem}
.plan__cab span{font-size:.85rem; opacity:.88}
.plan__lista{list-style:none; margin:0; padding:4px 14px 10px}
.plan__parada{display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px dashed var(--linea)}
.plan__parada:last-child{border-bottom:none}
.plan__ico{flex:none; width:26px; text-align:center; font-size:1.05rem; line-height:1.45}
.plan__txt{flex:1; min-width:0}
.plan__txt b{display:block; font-family:var(--display); font-weight:600; font-size:1rem}
.plan__txt b i{font-style:normal; color:var(--ambar); font-variant-numeric:tabular-nums; margin-right:8px}
.plan__txt p{color:#4a4a48; font-size:.92rem}
.plan__extra{flex:none; align-self:center; background:var(--papel); border:2px solid var(--linea);
  border-radius:999px; padding:2px 9px; font-size:.72rem; font-weight:700; color:var(--niebla);
  text-transform:uppercase; letter-spacing:.04em}
@media (max-width:640px){
  /* El resto de la ficha (cabecera, columnas, acordeón) respira a 24 px: estos
     bloques van con ellos, no por su cuenta. */
  .ficha__incluye{grid-template-columns:minmax(0, 1fr)}
  /* La etiqueta «No incluido» baja a su propia línea: en 393 px, al lado del
     título, le dejaba al detalle una columna de cuatro palabras.
     36 px = el icono (26) más el hueco (10). */
  .plan__parada{flex-wrap:wrap}
  .plan__txt{flex:1 1 calc(100% - 36px)}
  .plan__extra{align-self:flex-start; margin-left:36px}
}

/* 06-oct · botón «Pagar» de la cabecera: el rojo de la acción, como «Buscar»,
   con la misma forma que «Soy cliente» / «Soy asesor». */
.nav nav a.cuenta--pagar{display:inline-flex; align-items:center; gap:7px; border:2px solid var(--ambar);
  background:var(--ambar); color:#FFFFFF; padding:8px 14px; border-radius:999px; font-weight:600; font-size:.92rem;
  transition:transform .16s ease, box-shadow .16s ease}
.nav nav a.cuenta--pagar:hover, .nav nav a.cuenta--pagar:focus-visible{transform:translateY(-2px); box-shadow:0 4px 0 rgba(0,0,0,.45)}
.nav nav a.cuenta--pagar[hidden]{display:none}
body.cab-iconos .nav nav a.cuenta--pagar{font-size:0; gap:0; padding:7px 9px}
body.cab-iconos .nav nav a.cuenta--pagar .cuenta__ico{font-size:1.05rem}