/* ============================================================
   Cabecera: mega-menú de 6 columnas y buscador superpuesto.
   Paridad con el sitio React (columnas col-12 / col-md-6 / col-xl-4:
   1 columna en móvil, 2 desde 768 px, 3 desde 1200 px, en orden de origen).
   Se llama page-*.css a propósito: functions.php las encola con filemtime
   como versión, así que el navegador nunca sirve una hoja vieja.
   ============================================================ */

/* 🔴 El mega-menú DEBE quedar por encima del velo, y no lo estaba: `.dl-mega`
   y `.dl-scrim` declaran los DOS `z-index:70` (dicine.css:125 y :30). Con el
   z-index empatado decide el orden del documento, y en header.php el scrim va
   DESPUÉS del <nav>, así que pintaba encima. El velo es `position:fixed;inset:0`
   y lleva `addEventListener('click', cerrarTodo)`: cada clic en un enlace del
   menú lo recogía el velo, el menú se cerraba y NO se navegaba a ninguna parte.
   Sin error en ninguna consola, y el menú se veía perfectamente (el velo es
   semitransparente), que es lo que lo hacía difícil de ver.
   `.dl-srch` ya se libraba porque más abajo se le puso `z-index:71`; al mega se
   le olvidó. Los dos paneles son excluyentes (`abrir()` cierra el otro), así
   que compartir el 71 no los enfrenta entre sí. */
.dl-mega{z-index:71}

/* Las seis columnas cuelgan ahora directamente de la rejilla (antes había
   envoltorios .dl-mcol que agrupaban de dos en dos y rompían el orden). */
.dl-mega-grid{grid-template-columns:repeat(3,1fr);gap:34px 48px;align-items:start}
.dl-mega-grid > .dl-mgroup{min-width:0}

/* Filete teal bajo el título de columna: es el componente <Point> del original. */
.dl-dash-s{display:block;width:34px;height:3px;background:var(--teal,#54AACB);border-radius:2px;margin:0 0 14px}
.dl-mgroup h4{border-bottom:0;padding-bottom:0;margin:0 0 10px;text-transform:none}

.dl-mega-close{background:none;border:0;padding:0}

/* La lupa pasó de <a> a <button> (ahora abre una capa, no navega): un botón
   trae borde y fondo propios del navegador y el SVG hereda el tamaño del <a>
   viejo, así que salía como una cajita vacía. */
.dl-hdr .dl-ico{background:none;border:0;padding:0;width:auto;height:auto;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--slate,#212B38)}
.dl-hdr .dl-ico svg{width:20px;height:20px;display:block}
.dl-hdr .dl-ico:hover{color:var(--teal,#54AACB)}
.dl-hdr .dl-ico:focus-visible,.dl-hdr .dl-menu:focus-visible{outline:2px solid var(--teal,#54AACB);outline-offset:3px}


@media(max-width:1199px){ .dl-mega-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:760px){ .dl-mega-grid{grid-template-columns:1fr;gap:22px;padding:28px 24px} }

/* ------------------------------------------------------------ buscador */

/* 🔴 NO usar solo `transform:translateY(-115%)` para esconderlo, que es lo que
   hace .dl-mega: ese truco sólo funciona si el panel es MÁS ALTO que su propio
   `top`. El buscador cerrado mide poco (una barra y nada de resultados), así que
   -115% de una altura pequeña no llega a sacarlo de la pantalla y asomaba una
   banda oscura sobre la cabecera. Con `visibility` no depende de la altura. */
.dl-srch{position:fixed;top:74px;left:0;right:0;background:var(--slate,#212B38);color:#fff;z-index:71;
  transform:translateY(-115%);visibility:hidden;
  transition:transform .3s ease,visibility 0s linear .3s;
  box-shadow:0 14px 34px rgba(0,0,0,.32);
  max-height:calc(100vh - 74px);overflow-y:auto}
.dl-srch.open{transform:none;visibility:visible;transition:transform .3s ease,visibility 0s}
.dl-srch .dl-wrap{padding:38px 32px 46px;position:relative}

.dl-srch-bar{display:flex;align-items:center;gap:12px;border-bottom:2px solid rgba(255,255,255,.25);padding-bottom:10px}
.dl-srch-bar input[type=search]{flex:1;background:none;border:0;outline:none;color:#fff;
  font-family:inherit;font-size:1.35rem;font-weight:300;padding:6px 2px;min-width:0}
.dl-srch-bar input[type=search]::placeholder{color:#8fa2b2}
.dl-srch-bar input[type=search]:focus-visible{outline:2px solid var(--teal,#54AACB);outline-offset:4px}
.dl-srch-go{background:none;border:0;color:var(--teal,#54AACB);cursor:default}
.dl-srch-go svg{width:22px;height:22px}
.dl-srch-close{background:none;border:0;color:#fff;font-size:1.9rem;line-height:1;cursor:pointer;padding:0 4px}
.dl-srch-close:focus-visible{outline:2px solid var(--teal,#54AACB);outline-offset:3px}

.dl-srch-res{margin-top:32px}
.dl-srch-res h3{color:#fff;font-size:1.15rem;font-weight:500;margin:26px 0 10px}
.dl-srch-res h3:first-child{margin-top:0}
.dl-srch-res .dl-dash{margin:0 0 16px}
.dl-srch-res ul{list-style:none;margin:0;padding:0}
.dl-srch-res li{border-bottom:1px solid rgba(255,255,255,.08)}
.dicine-look .dl-srch-res a{display:block;color:#cdd6e0;font-size:.92rem;font-weight:300;padding:10px 0;
  overflow-wrap:anywhere}
.dicine-look .dl-srch-res a:hover{color:#fff}
.dl-srch-res a strong{font-weight:500;color:#fff}
.dl-srch-res a span{color:#93a4b3}
.dl-srch-vacio{color:#93a4b3;font-weight:300;margin:0}

/* Puntos de carga: equivalente del <MyLoader> del original. */
.dl-srch-load{display:flex;gap:8px;justify-content:center;padding:26px 0}
.dl-srch-load span{width:9px;height:9px;border-radius:50%;background:var(--teal,#54AACB);
  animation:dlpulse 1s infinite ease-in-out}
.dl-srch-load span:nth-child(2){animation-delay:.15s}
.dl-srch-load span:nth-child(3){animation-delay:.3s}
@keyframes dlpulse{0%,80%,100%{opacity:.25;transform:scale(.75)}40%{opacity:1;transform:scale(1)}}

@media(max-width:760px){
  .dl-srch{top:64px;max-height:calc(100vh - 64px)}
  .dl-srch .dl-wrap{padding:24px 22px 34px}
  .dl-srch-bar input[type=search]{font-size:1.05rem}
}
@media(prefers-reduced-motion:reduce){
  .dl-srch{transition:none}
  .dl-srch-load span{animation:none;opacity:.7}
}