/* Aluminio satinado con reflejos estáticos, sin desenfoque costoso al scrollear. */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; align-items: flex-end; color: white; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0f1c2748, #0f1c2748 30%, #0f1c27e0); }
.hero__content { padding-top: 160px; padding-bottom: 56px; }
.hero__content h1 { max-width: 780px; font-size: clamp(2rem, 3.6vw, 3.5rem); line-height: 1.12; }
.hero__content > p { max-width: 640px; margin-top: 24px; font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.65; color: #e5eaf0; }
.hero__search { position: relative; width: 100%; max-width: 760px; margin-top: 24px; padding: 10px 14px; color: #182c3b; border: 1px solid #edf2f6c9; border-radius: 10px; background: repeating-linear-gradient(0deg, #ffffff06 0, #ffffff06 1px, #46505b03 1px, #46505b03 2px, transparent 2px, transparent 4px), linear-gradient(105deg, #e4e7eac9 0%, #f5f6f7d1 12%, #bfc5ccba 27%, #d4d9dfc2 34%, #f7f8f9d1 48%, #c5cbd2ba 64%, #f0f2f4c9 79%, #cbd1d7c2 100%); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #8999a64d, 0 8px 18px #07162130; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px 12px; align-items: end; }
.hero__search::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, white, transparent); }
/* Reflejo de cristal estático, por encima del metal y detrás de los controles. */
.hero__search { isolation: isolate; }
.hero__search::after { content: ''; position: absolute; inset: 1px; z-index: -1; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, #ffffff9c 0%, #ffffff52 17%, #ffffff08 53%, transparent 67%, #ffffff38 100%), linear-gradient(112deg, transparent 8%, #ffffff94 21%, #ffffff20 33%, transparent 47%, #ffffff52 74%, transparent 87%); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 2px #ffffff85; }
.hero__search-field { min-width: 0; display: grid; gap: 6px; }
.hero__search-title { grid-column: 1 / -1; margin: 0 0 2px; font-size: 1rem; line-height: 1.3; color: #183347; }
.hero__search-field label { font-size: .75rem; font-weight: 600; }
.hero__search select { appearance: none; width: 100%; min-width: 0; height: 38px; padding: 0 32px 0 12px; border: 1px solid #a7b5bf; border-radius: 7px; color: #183347; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23324e61' stroke-width='1.5'/%3E%3C/svg%3E") right 12px center / 11px no-repeat, linear-gradient(#ffffffdb, #edf2f5b8); box-shadow: inset 0 1px 2px #203e5110, 0 1px 0 #ffffffc0; font-size: .8125rem; text-overflow: ellipsis; cursor: pointer; }
.hero__search select:disabled { opacity: .6; cursor: default; }
.hero__search button { min-height: 38px; padding: 0 16px; border: 1px solid #005182; border-radius: 7px; background: linear-gradient(165deg, #147eb3, #00568c); box-shadow: inset 0 1px 0 #8dd1f37a, 0 3px 6px #164b6826; color: white; font-size: .875rem; font-weight: 600; cursor: pointer; }
.hero__search button:hover { background: linear-gradient(165deg, #096c9f, #004470); }
.hero__search-status { grid-column: 1 / -1; margin: 0; font-size: .875rem; }
@media (max-width: 1000px) { .hero__search { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hero__search button { grid-column: 1 / -1; } }
/* El layout en columnas del buscador (cuántas entran por fila) lo decide
   responsive.css con container queries sobre .hero-content — NO tocar acá
   grid-template-columns ni grid-column de .hero__search/-field, porque
   responsive.css carga después y gana esa propiedad puntual, pero deja sin
   pisar cualquier grid-column que se fije acá, rompiendo el grid (texto
   encimado). Lo que compacta la tarjeta en mobile vive junto a esas
   container queries, ver responsive.css. */
@media (max-width: 600px) {
  .hero__content { padding-top: 120px; padding-bottom: 32px; }
  .hero__content h1 { max-width: 22ch; }
  .hero__content > p { margin-top: 18px; }
  .hero__search { gap: 8px; padding: 10px; margin-top: 18px; border-radius: 10px; }
}