/* Encabezado (hero) del inicio: la fotografía y el buscador real, nada más.

   2026-10-26: se quitaron del encabezado el antetítulo, el título visible, la
   bajada, los cuatro beneficios y el velo azul que los hacía legibles. Queda la
   foto de Admin > Imágenes del sitio > «Foto del inicio» cubriendo la sección
   (object-fit: cover, sin deformarse, con cualquier medida) y encima el
   buscador. El título sigue como h1 solo para buscadores y lectores de pantalla.

   El alto sale de una medida (min-height), no de una proporción, así que la foto
   se encuadra sola. Sin textos que leer, el único velo es uno muy suave que
   separa la tarjeta blanca del buscador de una foto clara; la foto se ve entera.

   Posición base del buscador: en escritorio, a la izquierda del ancho del sitio
   y a media altura, sobre la parte tranquila de la foto (el motivo va a la
   derecha). En celular y tablet, al pie, con la foto a la vista arriba. Los X/Y
   de Textos de páginas > Inicio lo corren desde ahí.

   Se carga después de portada.css y portada-datos.css; todo va bajo
   .hero--banner, que gana por especificidad a las reglas sueltas del buscador
   que traen esas dos hojas. */

.hero.hero--banner{
 /* Qué parte de la foto se conserva cuando hay que recortar (object-position):
    hacia la derecha, donde está el motivo. */
 --hb-encuadre:70% 50%;
 position:relative;isolation:isolate;overflow:hidden;
 display:grid;align-content:center;
 padding:clamp(28px,3.4vw,48px) 0;
 background:#dfeaf6}

/* ---------- La foto: cubre la sección entera ---------- */
.hero--banner .hb-foto{
 position:absolute;inset:0;z-index:0;
 display:block;width:100%;max-width:none;height:100%;
 object-fit:cover;object-position:var(--hb-encuadre)}

/* ---------- Velo muy suave: solo separa el buscador de una foto clara ---------- */
.hero--banner::after{
 content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(90deg,rgba(6,24,60,.16) 0%,rgba(6,24,60,.06) 45%,rgba(6,24,60,0) 70%)}

/* ---------- El lienzo: el buscador, con el ancho del sitio ---------- */
.hero--banner .hb-lienzo{
 position:relative;z-index:2;
 width:min(100%,var(--fc-ancho-sitio));margin-inline:auto;
 padding-inline:var(--fc-gutter-sitio)}

/* ---------- Alto del encabezado ---------- */
/* La foto con presencia, sin llegar a pantalla completa (2026-10-26: con 475 px
   a 1440 terminaba muy pronto, y con 569 todavía se veía apretada): ~543 px a
   1280, 610 a 1440 y tope de 660 desde ~1560. «Categorías destacadas» baja sola
   porque el encabezado mide más. */
@media (min-width:901px){
 .hero.hero--banner{min-height:clamp(480px,42.4vw,660px)}
}

/* ---------- Lo que va encima: el buscador real y los botones del CMS ----------
   El ancho tiene un piso en píxeles porque el buscador no encoge: sus cuatro
   piezas (región, servicio, «Búsqueda avanzada» y «Buscar») van en una fila y
   necesitan ese espacio para leerse. */
.hero--banner .hb-encima{width:min(100%,620px)}
.hero--banner .hb-buscador{position:relative;color:var(--navy,#0b1b44)}
/* Posición del buscador (Textos de páginas > Inicio > «Buscador del encabezado»):
   se corre entero —región, servicio, búsqueda avanzada, botón y su panel— con
   translate, que no saca nada del flujo: el ancho, los clics, los desplegables y
   el foco siguen iguales, y lo que hay debajo no se mueve. 0 es su lugar de
   siempre. z-index: corrido sobre los beneficios, sigue encima y clicable. */
.hero--banner .hb-buscador{z-index:3;translate:var(--hb-buscador-x,0px) var(--hb-buscador-y,0px)}
.hero--banner .hb-buscador :where(input,select,button,label,option){color:var(--navy,#0b1b44)}
.hero--banner .search-form{position:relative;left:auto;top:auto;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;width:100%;height:50px;margin:0;padding:4px;gap:4px;border:1px solid #d6e6fb;border-radius:14px;background:#fff;box-shadow:0 14px 34px rgba(4,24,66,.3)}
.hero--banner .search-fields{display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:nowrap;align-items:center;width:auto;height:100%;min-width:0;border:0;border-radius:0}
.hero--banner .search-fields>label{display:flex;align-items:center;width:auto;height:24px;min-width:0;border-bottom:0}
.hero--banner .field-source-icon,.hero--banner .advanced-button .field-source-icon{flex:none;width:15px;height:15px}
.hero--banner .search-fields>.region-field{position:relative;flex:none;order:0;width:166px;padding:0 8px 0 11px;gap:6px;border-right:1px solid #d0d9f0}
.hero--banner .region-field>.field-source-icon{width:13px;height:16px}
.hero--banner .region-field>.icon{width:10px;height:10px;margin-left:auto}
.hero--banner .region-field select{position:absolute;inset:-12px 0;width:100%;height:auto;padding:0 18px 0 29px;font-size:13px;font-weight:600;text-overflow:ellipsis;cursor:pointer}
.hero--banner .search-fields>.keyword-field{position:relative;flex:1 1 auto;order:0;padding:0 8px 0 11px;gap:7px;border-right:0}
.hero--banner .keyword-field input{width:100%;height:100%;font-size:13.5px}
.hero--banner .search-fields>.advanced-button{position:relative;display:flex;flex:none;align-items:center;align-self:center;justify-content:center;width:auto;height:24px;padding:0 11px;gap:6px;border-left:1px solid #d0d9f0;font-size:12.5px;font-weight:600;color:var(--navy)}
.hero--banner .advanced-button>.icon{width:10px;height:10px;margin-left:0}
.hero--banner .search-submit{flex:none;width:auto;height:100%;padding:0 14px;gap:6px;border-radius:11px;font-size:13.5px}
.hero--banner .search-submit .icon{width:14px;height:14px}
/* El panel avanzado cuelga del buscador y se sale del encabezado sin recortarse.
   Como la sección sí lleva overflow:hidden (lo necesita el cover de la foto), el
   panel se dibuja dentro: por eso el encabezado reserva aire abajo. */
.hero--banner .advanced-options{position:absolute;left:0;right:auto;top:calc(100% + 6px);z-index:4;display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-end;width:100%;min-width:min(460px,calc(100vw - 44px));margin:0;padding:14px;gap:12px;border-radius:14px}
.hero--banner .advanced-options label{flex:1 1 180px}

/* Botones opcionales del CMS (Textos de páginas > Inicio > Botones). */
.hero--banner .hb-botones{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.hero--banner .hb-boton{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 20px;border-radius:12px;font-size:14px;font-weight:700;line-height:1.2}
.hero--banner .hb-boton--principal{background:var(--blue);color:#fff;box-shadow:0 10px 24px rgba(0,102,255,.32)}
.hero--banner .hb-boton--secundario{background:rgba(255,255,255,.14);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.45) inset}
.hero--banner .hb-boton--principal:hover{background:#0057db}
.hero--banner .hb-boton--secundario:hover{background:rgba(255,255,255,.24)}

/* ---------- Franja de regiones ----------
   Enlaces reales a /buscar/, uno por región; se enciende y se apaga en Textos
   de páginas > Inicio > «Franja de regiones» (viene apagada). Va debajo del
   encabezado, sobre el blanco de la página, no sobre la foto. */
.ht-regiones{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 13px;margin:0;padding:18px var(--fc-gutter-sitio) 26px;list-style:none;background:#fff;color:#1974ff;font-size:12px;line-height:1.5}
.ht-regiones li{display:flex;align-items:center;white-space:nowrap}
.ht-regiones li:not(:last-child)::after{content:"\2022";padding-left:13px}
.ht-regiones a:hover{text-decoration:underline}

/* ---------- Hasta 900 px: la foto arriba, el buscador al pie ----------
   En vertical lo que se recorta son los costados: el encuadre se corre hacia
   las personas (la mitad derecha, arriba, como pide el Admin). El buscador va
   abajo para que se vea la foto; el velo, suave, solo al pie. */
@media (max-width:900px){
 .hero.hero--banner{--hb-encuadre:74% 30%;min-height:clamp(470px,120vw,540px);align-content:end;padding:28px 0 24px}
 .hero--banner::after{background:linear-gradient(180deg,rgba(6,24,60,0) 45%,rgba(6,24,60,.2) 100%)}
 .hero--banner .hb-encima{width:100%;max-width:620px}
 .hero--banner .hb-buscador{translate:var(--hb-buscador-x-movil,0px) var(--hb-buscador-y-movil,0px)}
}

/* ---------- Hasta 600 px: el buscador pasa a tarjeta ---------- */
@media (max-width:600px){
 .hero.hero--banner{padding:24px 0 20px}
 .hero--banner .search-form{flex-direction:column;align-items:stretch;height:auto;padding:6px;gap:5px;border-radius:15px}
 .hero--banner .search-fields{flex-direction:column;align-items:stretch;height:auto}
 .hero--banner .search-fields>label{width:100%;height:40px;padding:0 10px;gap:10px;border-right:0;border-bottom:1px solid #d9e4f4}
 .hero--banner .search-fields>.keyword-field{order:-1;flex:none;padding:0 10px;gap:10px}
 .hero--banner .search-fields>.region-field{width:100%;padding:0 10px;gap:10px;border-right:0}
 .hero--banner .keyword-field input{font-size:14.5px}
 .hero--banner .region-field select{inset:0;height:100%;padding:0 32px 0 35px;font-size:14px}
 .hero--banner .search-fields>.advanced-button{position:static;align-self:stretch;justify-content:flex-start;height:38px;padding:0 10px;gap:10px;border-left:0;font-size:13px}
 .hero--banner .advanced-button>.icon{margin-left:auto}
 .hero--banner .search-submit{width:100%;height:42px;padding:0;font-size:15px}
 .hero--banner .advanced-options{position:static;flex-direction:column;align-items:stretch;min-width:0;margin-top:10px;padding:14px;gap:8px}
 .hero--banner .advanced-options label{flex:none}
 .hero--banner .hb-botones{margin-top:12px}
 .ht-regiones{gap:9px;padding:12px 20px 22px}
 .ht-regiones li:not(:last-child)::after{padding-left:9px}
}