/*
 * Portada «Cristal» (27 sep 2026, la 4 de disenos/buscador/): el titular a la
 * izquierda con las estrellas de Google y, a la derecha, un panel de cristal
 * esmerilado sobre el video con el buscador y los pagos dentro.
 *
 * Todo va bajo #heroBand.hero-cristal para ganar a las capas anteriores de
 * catalog.css y brand.css sin tocarlas. El video no cambia: la banda conserva
 * el alto que tenía (704 en escritorio, 682 en tableta, 821 en móvil), así que
 * el `cover` con zoom 1.6 de .hero-video encuadra igual que antes.
 */

#heroBand.hero-cristal{display:flex;flex-direction:column;min-height:704px}
#heroBand.hero-cristal .hero{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,440px);align-items:center;gap:56px;padding-block:24px 44px;text-align:left}

/* ── el titular ── */
#heroBand.hero-cristal .hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
#heroBand.hero-cristal .hero-copy .eyebrow{background:rgba(0,0,0,.34);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#heroBand.hero-cristal .hero-copy h1{margin:0;max-width:13ch;font-size:clamp(40px,5vw,64px);line-height:1.02;letter-spacing:-.035em;text-align:left;text-shadow:0 4px 24px rgba(0,0,0,.35)}
#heroBand.hero-cristal .hero-copy p{margin:0;max-width:46ch;font-size:17px;line-height:1.5;text-align:left;text-shadow:0 2px 12px rgba(0,0,0,.4)}
#heroBand.hero-cristal .hero-rating{display:inline-flex;align-items:center;gap:10px;color:rgba(255,255,255,.92);font-size:14px;font-weight:500;text-decoration:none;text-shadow:0 2px 10px rgba(0,0,0,.4)}
#heroBand.hero-cristal .hero-rating:hover span:last-child{text-decoration:underline;text-underline-offset:3px}
#heroBand.hero-cristal .hero-stars{color:#ff7900;font-size:17px;letter-spacing:2px;text-shadow:none}

/* ── el panel de cristal ── */
#heroBand.hero-cristal .hero-panel{display:flex;flex-direction:column;gap:14px;min-width:0;padding:24px;border-radius:30px;background:rgba(18,26,31,.38);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);border:1px solid rgba(255,255,255,.2);box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}

/* el formulario pierde su tarjeta blanca: la tarjeta es el cristal */
#heroBand.hero-cristal #searchForm{width:100%;max-width:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff;color-scheme:dark}
#heroBand.hero-cristal #searchForm .search-heading{position:static;display:block;width:auto;height:auto;overflow:visible;clip-path:none;margin:0 0 12px;padding:0}
#heroBand.hero-cristal #searchForm .search-heading::before{display:none}
#heroBand.hero-cristal #searchForm .search-heading h2{margin:0;color:#ffb36b;font-size:12px;line-height:1.4;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
#heroBand.hero-cristal #searchForm .search-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0;border:0;border-radius:0;background:none}

#heroBand.hero-cristal #searchForm .seg{grid-column:auto;grid-row:auto;position:relative;display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0;min-height:0;margin:0;padding:14px 16px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(255,255,255,.1);box-shadow:none;outline:0;transition:background .2s,border-color .2s}
#heroBand.hero-cristal #searchForm .seg:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.24)}
#heroBand.hero-cristal #searchForm .seg:focus-within{background:rgba(255,255,255,.18);border-color:rgba(255,179,107,.9);outline:0;border-radius:18px}
#heroBand.hero-cristal #searchForm .seg-location{grid-column:1/-1;min-height:0;padding:14px 16px}
#heroBand.hero-cristal #searchForm .seg-location .search-field-title svg{position:static;width:14px;height:14px;padding:0;background:none;border-radius:0;stroke-width:1.7}
#heroBand.hero-cristal #searchForm .seg[for="sStart"],#heroBand.hero-cristal #searchForm .seg[for="sEnd"]{padding:14px 16px}
#heroBand.hero-cristal #searchForm .seg[for="sStart"]::after{content:none}
#heroBand.hero-cristal #searchForm .search-field-title svg{color:rgba(255,255,255,.7)}
#heroBand.hero-cristal #searchForm .seg-label{color:rgba(255,255,255,.7);font-size:11px;line-height:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
#heroBand.hero-cristal #searchForm .seg input,#heroBand.hero-cristal #searchForm .seg select{height:26px;min-height:26px;line-height:26px;color:#fff;color-scheme:dark;font-size:17px;font-weight:600}
#heroBand.hero-cristal #searchForm .seg select{background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%)}
#heroBand.hero-cristal #searchForm .seg select:invalid{color:rgba(255,255,255,.72);font-weight:500}
#heroBand.hero-cristal #searchForm .seg select option{color:#252525;background:#fff}
#heroBand.hero-cristal #searchForm .search-date-placeholder,
#heroBand.hero-cristal #searchForm .seg:hover .search-date-placeholder,
#heroBand.hero-cristal #searchForm .seg:focus-within .search-date-placeholder{background:transparent;color:rgba(255,255,255,.72);font-size:17px;font-weight:500}

#heroBand.hero-cristal #searchForm .search-go{grid-column:1/-1;grid-row:auto;align-self:auto;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;width:100%;height:60px;min-height:60px;margin:4px 0 0;padding:0 20px;border:0;border-radius:18px;background:#ff7900;color:#151515;box-shadow:0 14px 30px -12px rgba(255,121,0,.8)}
#heroBand.hero-cristal #searchForm .search-go:hover{background:#ff922e}
#heroBand.hero-cristal #searchForm .search-go svg{width:18px;height:18px}
#heroBand.hero-cristal #searchForm .search-go .go-label{position:static;clip:auto;clip-path:none;width:auto;height:auto;overflow:visible;white-space:nowrap;font-size:16px;font-weight:700;line-height:1.2}

/* los pagos, dentro del panel y sobre el propio cristal, como la maqueta que
   eligió Angel: título blanco, nota gris y los logos en su versión clara
   (Klarna en su insignia rosa). Sin tarjeta blanca. */
#heroBand.hero-cristal .paylater{display:grid;grid-template-columns:1fr;gap:6px;width:100%;max-width:none;margin:2px 0 0;padding:16px 0 0;border:0;border-top:1px solid rgba(255,255,255,.14);border-radius:0;background:none;box-shadow:none;text-align:left}
#heroBand.hero-cristal .paylater b{grid-column:1;grid-row:1;margin:0;color:#fff;font-size:15px;font-weight:700;line-height:1.3;letter-spacing:-.01em;text-align:left}
#heroBand.hero-cristal .paylater .pay-promo-note{grid-column:1;grid-row:2;margin:0;max-width:none;color:rgba(255,255,255,.65);font-size:12.5px;line-height:1.45;text-align:left;text-shadow:none}
#heroBand.hero-cristal .paylogos{grid-column:1;grid-row:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:16px;width:auto;max-width:none;margin:6px 0 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
#heroBand.hero-cristal .paylogos .payment-badge{width:auto;max-width:none;height:auto;min-width:0;padding:0;margin:0;flex:none;display:flex;align-items:center;background:none;border:0;border-radius:0;box-shadow:none}
#heroBand.hero-cristal .paylogos .payment-badge img{display:block;width:auto;max-width:none;max-height:none;height:24px;object-fit:contain;filter:none}
#heroBand.hero-cristal .paylogos .payment-badge img[alt="Klarna"]{height:26px;width:auto;max-width:none;max-height:none}
#heroBand.hero-cristal .paylogos .payment-badge img[alt="Affirm"]{height:24px;width:auto;max-height:none}
#heroBand.hero-cristal .paylogos .payment-badge img[alt="Afterpay"]{height:24px;width:auto;max-width:none}
#heroBand.hero-cristal .paylogos .payment-badge img[alt="Zip"]{height:22px;width:auto;max-height:none}

/* ── tableta: las dos columnas siguen, más juntas; así la banda no crece ── */
@media(max-width:999px){
  #heroBand.hero-cristal .hero{grid-template-columns:minmax(0,1fr) minmax(320px,360px);gap:28px}
  #heroBand.hero-cristal .hero-copy h1{font-size:clamp(34px,4.6vw,46px)}
  #heroBand.hero-cristal .hero-copy p{font-size:15.5px}
  #heroBand.hero-cristal .hero-panel{padding:18px;border-radius:26px}
}
/* ── móvil: una sola columna, el panel debajo del titular ── */
@media(max-width:759px){
  #heroBand.hero-cristal{min-height:682px}
  #heroBand.hero-cristal .hero{grid-template-columns:minmax(0,1fr);gap:28px;justify-items:center;text-align:center}
  #heroBand.hero-cristal .hero-copy{align-items:center}
  #heroBand.hero-cristal .hero-copy h1,#heroBand.hero-cristal .hero-copy p{text-align:center}
  #heroBand.hero-cristal .hero-copy h1{max-width:16ch}
  #heroBand.hero-cristal .hero-panel{width:min(520px,100%)}
}
@media(max-width:600px){
  #heroBand.hero-cristal{min-height:821px}
  #heroBand.hero-cristal .hero{padding-block:8px 24px;gap:20px}
  #heroBand.hero-cristal .hero-copy{gap:10px}
  #heroBand.hero-cristal .hero-copy h1{font-size:clamp(32px,9vw,40px)}
  #heroBand.hero-cristal .hero-copy p{font-size:15.5px}
  #heroBand.hero-cristal .hero-panel{padding:16px;border-radius:24px}
  #heroBand.hero-cristal #searchForm .search-fields{gap:10px}
  #heroBand.hero-cristal #searchForm .seg{padding:12px}
  #heroBand.hero-cristal #searchForm .seg input,#heroBand.hero-cristal #searchForm .seg select,#heroBand.hero-cristal #searchForm .search-date-placeholder{font-size:16px}
  #heroBand.hero-cristal #searchForm .search-go{height:54px;min-height:54px}
  #heroBand.hero-cristal .paylogos{gap:12px;flex-wrap:nowrap}
  #heroBand.hero-cristal .paylogos .payment-badge img{height:20px}
  #heroBand.hero-cristal .paylogos .payment-badge img[alt="Klarna"]{height:22px}
  #heroBand.hero-cristal .paylogos .payment-badge img[alt="Affirm"],#heroBand.hero-cristal .paylogos .payment-badge img[alt="Afterpay"]{height:20px}
  #heroBand.hero-cristal .paylogos .payment-badge img[alt="Zip"]{height:18px}
}

/* Renta mínima (27 sep 2026): con aeropuerto y fechas elegidos, si faltan días
   sale este cuadro rojo fijo encima del botón y la devolución se marca en rojo. */
#heroBand.hero-cristal #searchForm .search-alert{grid-column:1/-1;display:flex;align-items:flex-start;gap:10px;margin:2px 0 0;padding:12px 14px;border-radius:14px;background:#b3261e;color:#fff;font-size:14px;font-weight:600;line-height:1.4;box-shadow:0 10px 24px -10px rgba(179,38,30,.8)}
#heroBand.hero-cristal #searchForm .search-alert[hidden]{display:none}
#heroBand.hero-cristal #searchForm .search-alert svg{flex:none;margin-top:1px}
#heroBand.hero-cristal #searchForm .seg.is-bad,#heroBand.hero-cristal #searchForm .seg.is-bad:hover{border-color:#ff8a80;background:rgba(179,38,30,.28)}

/* Reserve the final first-paint width before catalog text and options load. */
#heroBand.hero-cristal .hero{width:100%;box-sizing:border-box}
#heroBand.hero-cristal #searchForm .seg-label{display:block;min-height:16px}