/* ==========================================================================
   El buscador propio de la portada y de Reserva rápida (parciales/buscador_viaje.html): una caja con seis pestañas
   (viaje completo, vuelos, hoteles, paquetes, seguro y traslado) y el formulario de la pestaña marcada. Clases «pv-».

   Las pestañas son radios hermanos de los formularios: «#pv-t-x:checked ~ .pv-f-x» enseña el suyo sin JavaScript
   (y sin :has, para los navegadores que aún no lo tienen). Una hoja pequeña a propósito: la portada tiene techo de
   CSS (112 KB).
   ========================================================================== */
.pv { flex: 1 0 100%; align-self: stretch; width: 100%; min-width: 0; max-width: 1180px; margin-top: var(--e5); padding: var(--e2) var(--e4) var(--e4);
  background: var(--color-superficie); border-radius: var(--radio-g); box-shadow: var(--sombra-3); color: var(--color-texto); text-align: left;
  border: 1px solid color-mix(in srgb, var(--color-acento) 28%, transparent); }

/* ---- la barra: las pestañas (una tira que se desliza de lado si no caben) y, a la derecha, la nota ---- */
.pv-barra { display: flex; align-items: center; gap: var(--e2) var(--e4); margin: 0 0 var(--e3); border-bottom: 1px solid var(--color-borde); min-width: 0; }
.pv-pestanas { display: flex; flex: 1 1 auto; min-width: 0; gap: 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.pv-pestanas::-webkit-scrollbar { display: none; }
.pv-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pv-pestana { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 10px 12px 9px; border-bottom: 2px solid transparent;
  font: 600 var(--t-s)/1.2 var(--f-texto); color: var(--color-texto-suave); cursor: pointer; white-space: nowrap; border-radius: var(--radio-s) var(--radio-s) 0 0;
  transition: color .15s, border-color .15s, background .15s; }
.pv-pestana:hover { color: var(--color-titulo); background: var(--color-superficie-2); }
.pv-pestana .ico { color: var(--color-acento-texto); }
#pv-t-viaje:checked ~ .pv-barra [for="pv-t-viaje"], #pv-t-frase:checked ~ .pv-barra [for="pv-t-frase"], #pv-t-vuelos:checked ~ .pv-barra [for="pv-t-vuelos"],
#pv-t-hoteles:checked ~ .pv-barra [for="pv-t-hoteles"], #pv-t-paquetes:checked ~ .pv-barra [for="pv-t-paquetes"], #pv-t-cruceros:checked ~ .pv-barra [for="pv-t-cruceros"],
#pv-t-seguro:checked ~ .pv-barra [for="pv-t-seguro"], #pv-t-traslado:checked ~ .pv-barra [for="pv-t-traslado"] {
  color: var(--color-titulo); border-bottom-color: var(--color-acento); }
/* El foco del teclado (en el radio, que no se ve) se enseña en su pestaña. */
#pv-t-viaje:focus-visible ~ .pv-barra [for="pv-t-viaje"], #pv-t-frase:focus-visible ~ .pv-barra [for="pv-t-frase"], #pv-t-vuelos:focus-visible ~ .pv-barra [for="pv-t-vuelos"],
#pv-t-hoteles:focus-visible ~ .pv-barra [for="pv-t-hoteles"], #pv-t-paquetes:focus-visible ~ .pv-barra [for="pv-t-paquetes"], #pv-t-cruceros:focus-visible ~ .pv-barra [for="pv-t-cruceros"],
#pv-t-seguro:focus-visible ~ .pv-barra [for="pv-t-seguro"], #pv-t-traslado:focus-visible ~ .pv-barra [for="pv-t-traslado"] {
  box-shadow: inset var(--anillo); outline: 2px solid transparent; }
.pv-nota { flex: 0 1 auto; margin: 0; max-width: 46ch; font-size: var(--t-xs); line-height: 1.4; color: var(--color-texto-suave); text-align: right; }
.pv-nota a { color: var(--color-enlace); font-weight: 600; white-space: nowrap; }
/* Antes que la frase de la nota, que se vean las siete pestañas: queda para los lectores de pantalla. */
.pv-nota-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- los formularios: solo el de la pestaña marcada ---- */
.pv-form { display: none; margin: 0; }
#pv-t-viaje:checked ~ .pv-f-viaje, #pv-t-frase:checked ~ .pv-f-frase, #pv-t-vuelos:checked ~ .pv-f-vuelos, #pv-t-hoteles:checked ~ .pv-f-hoteles,
#pv-t-paquetes:checked ~ .pv-f-paquetes, #pv-t-cruceros:checked ~ .pv-f-cruceros, #pv-t-seguro:checked ~ .pv-f-seguro, #pv-t-traslado:checked ~ .pv-f-traslado { display: block; }

/* Móvil primero: una rejilla de 6. Mitades (3) para los campos, tercios (2) para los números y el botón. */
.pv-campos { display: grid; gap: var(--e2) var(--e2); grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; }
.pv-campo { min-width: 0; display: grid; gap: 2px; grid-column: span 3; }
.pv-corto, .pv-boton { grid-column: span 2; }
.pv-f-hoteles .pv-destino, .pv-f-paquetes .pv-destino, .pv-f-cruceros .pv-destino, .pv-f-seguro .pv-destino, .pv-f-traslado .pv-destino { grid-column: 1 / -1; }
.pv-f-hoteles .pv-boton { grid-column: 1 / -1; }
.pv-f-paquetes .pv-destino-p { grid-column: span 4; }
.pv-f-seguro .pv-edades-seguro, .pv-f-seguro .pv-corto-s { grid-column: span 2; }
.pv-f-seguro .pv-boton { grid-column: 1 / -1; }
.pv-f-traslado .pv-boton { grid-column: span 4; }
.pv-f-frase .pv-frase { grid-column: 1 / -1; }
.pv-f-frase .pv-boton { grid-column: 1 / -1; }
.pv-campo label { font: 600 var(--t-xs)/1.3 var(--f-texto); color: var(--color-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-campo label span { font-weight: 400; color: var(--color-texto-suave); }
.pv .control { width: 100%; min-width: 0; height: 44px; min-height: 44px; padding-inline: 12px; border-color: var(--color-borde-control); }
.pv select.control { padding-inline-end: 28px; }
/* El foco se ve: el borde se oscurece y lleva el anillo de la casa (la regla de arriba fijaba el borde también con foco). */
.pv .control:focus-visible { border-color: var(--color-foco); box-shadow: var(--anillo); }
.pv .pv-boton { min-height: 44px; padding-inline: 10px; justify-content: center; gap: var(--e2); }
.pv-boton .ico, .pv-largo { display: none; }
.pv a:focus-visible, .pv button:focus-visible, .pv input:focus-visible, .pv select:focus-visible { outline: 2px solid transparent; }
@media (forced-colors: active) {
  .pv a:focus-visible, .pv button:focus-visible, .pv input:focus-visible, .pv select:focus-visible { outline: 3px solid Highlight; }
  .pv-radio:focus-visible ~ .pv-barra .pv-pestana { outline: 1px solid CanvasText; }
  #pv-t-viaje:checked ~ .pv-barra [for="pv-t-viaje"], #pv-t-frase:checked ~ .pv-barra [for="pv-t-frase"], #pv-t-vuelos:checked ~ .pv-barra [for="pv-t-vuelos"],
  #pv-t-hoteles:checked ~ .pv-barra [for="pv-t-hoteles"], #pv-t-paquetes:checked ~ .pv-barra [for="pv-t-paquetes"], #pv-t-cruceros:checked ~ .pv-barra [for="pv-t-cruceros"],
  #pv-t-seguro:checked ~ .pv-barra [for="pv-t-seguro"], #pv-t-traslado:checked ~ .pv-barra [for="pv-t-traslado"] { border-bottom-color: Highlight; }
}
@media (max-width: 699px) {
  .pv { padding: 2px var(--e3) var(--e3); }
  .pv-pestana { padding: 10px 9px 8px; gap: 5px; font-size: var(--t-xs); }
}
@media (min-width: 700px) {
  .pv { padding: var(--e1) var(--e5) var(--e5); }
  .pv-f-frase .pv-frase { grid-column: span 4; }
  .pv-f-frase .pv-boton { grid-column: span 2; }
  .pv-campos { gap: var(--e3); }
  .pv .control, .pv .pv-boton { height: 48px; min-height: 48px; }
  .pv .pv-boton { padding-inline: 18px; }
  .pv-boton .ico { display: inline-block; }
  .pv-largo { display: inline; }
}
@media (min-width: 1060px) {
  /* Una sola fila de 12: el campo principal ancho, las fechas medianas, los números estrechos y el botón al final. */
  .pv-campos { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pv-campo, .pv-boton, .pv-f-hoteles .pv-boton { grid-column: span 2; }
  .pv-f-traslado .pv-boton { grid-column: span 3; }
  .pv-corto { grid-column: span 1; }
  .pv-f-hoteles .pv-destino { grid-column: span 2; }
  .pv-f-hoteles .pv-habitaciones { grid-column: span 2; }
  .pv-f-paquetes .pv-destino { grid-column: span 6; }
  .pv-f-paquetes .pv-destino-p, .pv-f-paquetes .pv-boton { grid-column: span 3; }
  .pv-f-cruceros .pv-destino { grid-column: span 6; }
  .pv-f-cruceros .pv-campo:not(.pv-destino), .pv-f-cruceros .pv-boton { grid-column: span 2; }
  /* El seguro pide más (dónde vives y tu pasaporte): dos filas solo en su pestaña. */
  .pv-f-seguro .pv-destino { grid-column: span 4; }
  .pv-f-seguro .pv-edades-seguro { grid-column: span 4; }
  .pv-f-seguro .pv-corto-s { grid-column: span 4; }
  .pv-f-seguro .pv-boton { grid-column: span 4; }
  .pv-f-traslado .pv-destino, .pv-f-traslado .pv-zona { grid-column: span 3; }
  .pv-f-frase .pv-frase { grid-column: span 10; }
  .pv-f-frase .pv-boton { grid-column: span 2; }
}
/* En la portada, con el panel, el héroe sube su contenido: el panel entra entero en la primera pantalla de un portátil
   (1366 × 768) y en el móvil no empuja los pilares una pantalla más abajo. */
.heroe.portada .contenedor { padding-block: clamp(32px, 6vh, 88px); }
/* El héroe de la portada es una rejilla: su columna no crece con lo que mide la tira de pestañas en una sola línea
   (en el móvil ensanchaba la página entera). */
.heroe.portada { grid-template-columns: minmax(0, 1fr); }
/* La sección de Reserva rápida que lo lleva (sin héroe): el panel, sobre el fondo de la página. */
.pv-seccion .pv { margin-top: 0; box-shadow: var(--sombra-2); max-width: none; }