/* =====================================================================
   Landings de fechas, meses, puentes y ofertas + listado + home (29-oct)
   Plantilla común: portada compacta (solo H1), intro centrada, salidas en
   la primera o segunda pantalla del móvil, una sola FAQ plegada.
   Va aparte de style.css para no pisar el CSS global que tocan otras consolas.
   ===================================================================== */

/* Portada compacta, como las landings de tipo: la foto ya no ocupa la pantalla entera */
.hero-cover.hero-cover--fechas{ height:clamp(190px, 30vh, 260px); }
.hero-cover--fechas .hero-cover__content h1{ font-size:clamp(2rem, 8.5vw, 3.4rem); margin:0; padding-inline:8px; }
@media (min-width:860px){
  .hero-cover.hero-cover--fechas{ height:clamp(260px, 38vh, 360px); }
}

/* Intro: misma caja en todas las páginas */
.fechas-intro{ padding-block:22px 6px; }
.fechas-intro__text{ max-width:70ch; margin:0 auto; text-align:center; }
.fechas-intro__text h2{ margin-bottom:.45em; }
.fechas-intro__text p{ margin-bottom:.7em; }
@media (max-width:720px){
  .fechas-intro__text h2{ font-size:1.35rem; }
  .fechas-intro__text p{ font-size:.95rem; }
}

/* Sello de confianza: debajo de las salidas (antes iba entre la portada y la intro y empujaba los viajes) */
.section.fechas-trust{ padding-block:28px 4px; }

/* FAQ: una sola, plegada; sin hueco de más entre preguntas */
#faq .faq-item + .faq-item{ margin-top:0; }

/* Móvil: menos altura antes de las salidas (sello de confianza en 2 filas finas, títulos más juntos) */
@media (max-width:720px){
  .trust-bar{ gap:6px; }
  .trust-bar__item{ flex-direction:row; justify-content:center; align-items:baseline; gap:6px; padding:8px; border-radius:12px; }
  .trust-bar__item b{ font-size:1.02rem; flex:0 0 auto; }
  .trust-bar__item span{ font-size:.74rem; line-height:1.25; text-align:left; }
  #salidas{ padding-top:14px !important; }
  #salidas .section-head{ margin-bottom:12px; }
  #salidas .section-head h2{ font-size:1.35rem; }
  .earlybee-note{ font-size:.9rem; }
  .earlybee-note:last-of-type{ margin-bottom:12px; }
}

/* Listado: chips de destino sin salidas con los filtros puestos -> fuera (antes "Azores 0") */
.chip[hidden]{ display:none !important; }
.nb-filter[hidden]{ display:none !important; }
.filter-bar[data-nb-pick] > .nb-filter[hidden] + .nb-filter{ border-left:none; }
@media (min-width:721px){ .filter-bar[data-nb-pick]:has(#f-orden){ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:720px) and (min-width:381px){
  .filter-bar[data-nb-pick] > .nb-filter:last-child:has(#f-orden){ grid-column:1 / -1; border-left:none; border-top:1px solid var(--nb-border); }
}
/* Reauditoría 29-oct: el separador iba como borde de cada campo y, con sus esquinas redondeadas, "Mes" y "Ordenar"
   parecían cajas con borde propio y "Tipo" no. Ahora los tres campos iguales (sin borde) y el separador es una línea
   recta entre ellos, como en el buscador de la home. */
/* Línea dibujada con background-image (no con ::before + position:relative: el panel del desplegable se abre a lo
   ancho de la barra y necesita que el campo no sea su contenedor). !important: .nb-pick:hover pone "background". */
.filter-bar[data-nb-pick] > .nb-filter{ border:none !important; }
.filter-bar[data-nb-pick] > .nb-filter + .nb-filter{
  background-image:linear-gradient(var(--nb-border), var(--nb-border)) !important; background-repeat:no-repeat !important;
  background-size:1px calc(100% - 24px) !important; background-position:left center !important;
}
.filter-bar[data-nb-pick] > .nb-filter[hidden] + .nb-filter{ background-image:none !important; }
@media (max-width:720px) and (min-width:381px){
  .filter-bar[data-nb-pick] > .nb-filter:last-child:has(#f-orden){ background-size:calc(100% - 20px) 1px !important; background-position:center top !important; }
}
@media (max-width:380px){
  .filter-bar[data-nb-pick] > .nb-filter + .nb-filter{ background-size:calc(100% - 20px) 1px !important; background-position:center top !important; }
}

/* ---- Opiniones: el 4,9 fuera de la tira (29-oct) ----
   Escritorio: columna a la izquierda y tira a la derecha (como antes).
   Móvil: una línea encima y las reseñas a 80% de ancho, la siguiente asomando con degradado. */
.review-wrap{ display:flex; align-items:center; gap:18px; }
.review-wrap > .review-strip{ flex:1; min-width:0; }
.review-wrap > .review-summary{ flex:0 0 auto; }
@media (max-width:720px){
  .review-wrap{ flex-direction:column; align-items:stretch; gap:10px; }
  .review-wrap > .review-summary{ padding:0; }
  .review-wrap > .review-summary > div{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; }
  .review-wrap > .review-summary b{ font-size:1.35rem; display:inline; }
  .review-wrap > .review-summary .review-card__stars{ margin:0; }
  .review-wrap > .review-summary .review-summary__platform{ margin:0; }
  .review-strip .review-card{ flex:0 0 80%; }
}

/* ---- Carruseles de la home en móvil: primer elemento entero y el siguiente asomando ---- */
@media (max-width:720px){
  #reseñas .review-strip, #categorias .cat-mosaic{
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 44px), transparent);
    mask-image:linear-gradient(to right, #000 calc(100% - 44px), transparent);
  }
  .review-strip.is-end, .cat-mosaic.is-end{ -webkit-mask-image:none; mask-image:none; }
  .cat-mosaic{ margin-inline:calc(var(--nb-gutter) * -1); padding-inline:var(--nb-gutter); scroll-padding-inline:var(--nb-gutter); }
  .cat-tile{ flex:0 0 72%; }
}
/* Puntos bajo el carrusel (los pone main.js): dicen cuántos hay y en cuál estás */
.nb-dots{ display:none; justify-content:center; gap:6px; margin-top:10px; }
.nb-dots span{ width:7px; height:7px; border-radius:50%; background:var(--nb-border-2, #d5d5db); transition:background .2s, width .2s; }
.nb-dots span.is-on{ background:var(--nb-black); width:18px; border-radius:4px; }
@media (max-width:720px){ .nb-dots{ display:flex; } }

/* ---- Portada de la home ---- */
/* Fundido cruzado: la foto nueva entra antes de que se vaya la anterior (antes había un instante en negro). */
@keyframes nb-hero-xfade{ 0%{ opacity:0; } 4%{ opacity:.9; } 25%{ opacity:.9; } 30%{ opacity:0; } 100%{ opacity:0; } }
@media (prefers-reduced-motion: no-preference){ .hero img.hero-bg{ animation-name:nb-hero-xfade; } }
/* Subtítulo legible sobre cualquier foto */
.hero::after{ background:linear-gradient(180deg, rgba(26,26,26,.25) 0%, rgba(26,26,26,.18) 35%, rgba(26,26,26,.82) 100%); }
.hero p.lead{ color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6), 0 2px 14px rgba(0,0,0,.45); }
.hero-all-link{ margin:14px 0 0; }
.hero-all-link a{ color:#fff; font-size:.92rem; font-weight:600; text-decoration:underline; text-underline-offset:3px; text-shadow:0 1px 6px rgba(0,0,0,.5); }
@media (max-width:360px){ .hero-eyebrow{ font-size:.7rem; padding:6px 10px; letter-spacing:.01em; } }