/* «Qué es el buscador» (Alex, 28-oct-2026): la pastilla junto a la barra (escritorio de 1280 px o más), el botón compacto
   del header (con menos ancho) y la hoja de vidrio que los dos abren. La usan /buscar y las páginas legales de /buscar/. */

/* Los valores de la pieza, con nombre (pruebas/sistema-visual.test.mjs: nada suelto). */
:root{--qe-ambar:#F6A623;--qe-blanco:#fff;--qe-liso:#F8F9FA;--qe-perla:#E9EBEF;--qe-r-circulo:50%;--qe-r-hoja:28px;--qe-r-pastilla:999px;--qe-r-punto:18px;--qe-sobre-ambar:#1A1D24;--qe-t-boton:.25s;--qe-t-hoja:.32s;--qe-tenue:#4A5160;--qe-tinta:#1B1F27}

/* Pastilla junto a la barra: vidrio claro, la H de Hostess y el texto. buscar/_/que-es.js la acomoda a la derecha de la barra. */
.que-es-junto{display:none;position:absolute;z-index:6;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 8px;border-radius:var(--qe-r-pastilla);
  border:1px solid rgba(255,255,255,.95);background:linear-gradient(125deg,rgba(255,255,255,.86),rgba(240,242,246,.66));
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 var(--qe-blanco),0 10px 26px -14px rgba(20,26,38,.35),0 0 0 1px rgba(32,39,56,.06);
  font:700 var(--pl-f2,14px)/1.2 Manrope,system-ui,sans-serif;color:var(--qe-tinta);cursor:pointer;white-space:nowrap;transition:transform var(--qe-t-boton) cubic-bezier(.22,1,.36,1),box-shadow var(--qe-t-boton)}
.que-es-junto:hover,.que-es-junto:focus-visible{transform:translateY(-1px);box-shadow:inset 0 1px 0 var(--qe-blanco),0 14px 30px -14px rgba(20,26,38,.42),0 0 0 1px rgba(32,39,56,.1)}
.que-es-junto:focus-visible,.hdr-que-es:focus-visible{outline:2px solid var(--qe-ambar);outline-offset:2px}
.que-es-junto .que-es-h{width:30px;height:30px}
.que-es-junto small{display:block;font-weight:500;font-size:var(--pl-f1,12px);color:var(--qe-tenue)}
.que-es-junto.que-es-sin-lugar{visibility:hidden}
@media (min-width:1280px){.que-es-junto{display:inline-flex}}

/* Botón compacto del header: con menos de 1280 px el menú del header se guarda y aquí sí hay lugar. */
.hdr-que-es{display:none;align-items:center;gap:6px;min-height:44px;min-width:44px;margin-left:auto;padding:0 12px;border-radius:var(--qe-r-pastilla);
  border:1px solid rgba(32,39,56,.1);background:rgba(255,255,255,.72);font:700 var(--pl-f2,14px)/1 Manrope,system-ui,sans-serif;color:var(--qe-tinta);cursor:pointer;white-space:nowrap}
.hdr-que-es svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (max-width:1279px){.hdr-que-es{display:inline-flex}.hdr-que-es+.cuenta-hdr,.hdr-que-es~.menu-btn{margin-left:0}}

/* La H dentro de un círculo de vidrio (la misma marca de la barra). */
.que-es-h{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--qe-r-circulo);
  background:radial-gradient(circle at 35% 30%,var(--qe-blanco),var(--qe-perla));box-shadow:inset 0 1px 0 var(--qe-blanco),0 0 0 1px rgba(32,39,56,.08)}
.que-es-h img{width:56%;height:auto;display:block}

/* La hoja: vidrio líquido sobre la página. Centrada en escritorio; en celular sube desde abajo, a todo el ancho. */
.que-es-hoja{padding:0;border:0;background:transparent;max-width:min(560px,calc(100% - 32px));width:100%;max-height:calc(100% - 32px);overflow:visible;color:var(--qe-tinta)}
.que-es-hoja::backdrop{background:rgba(20,26,38,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.que-es-hoja[open]{animation:que-es-entra var(--qe-t-hoja) cubic-bezier(.22,1,.36,1)}
.que-es-caja{display:grid;gap:14px;max-height:calc(100dvh - 32px);overflow:auto;padding:22px 22px 24px;border-radius:var(--qe-r-hoja);
  border:1px solid rgba(255,255,255,.95);background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(241,243,247,.78));
  -webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);
  box-shadow:inset 0 1px 0 var(--qe-blanco),inset 0 -1px 2px rgba(120,126,140,.16),0 30px 60px -24px rgba(20,26,38,.45),0 0 0 1px rgba(32,39,56,.06);
  font:400 var(--pl-f3,16px)/1.55 Manrope,system-ui,sans-serif}
.que-es-cab{display:flex;align-items:center;gap:12px}
.que-es-cab h2{margin:0;font:800 var(--pl-f4-5,20px)/1.15 Archivo,Manrope,system-ui,sans-serif;letter-spacing:-.015em}
.que-es-cerrar{margin-left:auto;display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border-radius:var(--qe-r-circulo);border:1px solid rgba(32,39,56,.1);background:rgba(255,255,255,.8);color:var(--qe-tinta);cursor:pointer}
.que-es-cerrar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.que-es-cerrar:focus-visible,.que-es-chip:focus-visible,.que-es-escribir:focus-visible{outline:2px solid var(--qe-ambar);outline-offset:2px}
.que-es-lead{margin:0;font-size:var(--pl-f3,16px);font-weight:600}
.que-es-puntos{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.que-es-puntos li{padding:12px 14px;border-radius:var(--qe-r-punto);background:rgba(255,255,255,.66);box-shadow:0 0 0 1px rgba(32,39,56,.06);color:var(--qe-tenue)}
.que-es-puntos strong{display:block;color:var(--qe-tinta)}
.que-es-eti{margin:4px 0 0;font:700 var(--pl-f1,12px)/1.2 Manrope,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--qe-tenue)}
.que-es-chips{display:flex;flex-wrap:wrap;gap:8px}
.que-es-chip{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;box-sizing:border-box;line-height:1.25;border-radius:var(--qe-r-pastilla);background:var(--qe-blanco);box-shadow:inset 0 1px 0 var(--qe-blanco),0 0 0 1px rgba(32,39,56,.12),0 6px 14px -10px rgba(20,26,38,.4);
  font-weight:700;font-size:var(--pl-f3,16px);color:var(--qe-tinta);text-decoration:none}
.que-es-chip:hover{box-shadow:inset 0 1px 0 var(--qe-blanco),0 0 0 1px rgba(32,39,56,.22),0 8px 18px -10px rgba(20,26,38,.45)}
.que-es-escribir{justify-self:start;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:var(--qe-r-pastilla);background:var(--qe-ambar);color:var(--qe-sobre-ambar);font-weight:800;text-decoration:none}
@media (max-width:640px){
  .que-es-hoja{max-width:100%;width:100%;margin:auto 0 0;max-height:calc(100% - 24px)}
  .que-es-caja{border-radius:var(--qe-r-hoja) var(--qe-r-hoja) 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom));max-height:calc(100dvh - 24px)}
  .que-es-escribir{justify-self:stretch}
  .que-es-hoja[open]{animation-name:que-es-sube}
}
@keyframes que-es-entra{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes que-es-sube{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.que-es-hoja[open]{animation:none}.que-es-junto{transition:none}}
@media (prefers-reduced-transparency:reduce){.que-es-caja,.que-es-junto{background:var(--qe-liso);-webkit-backdrop-filter:none;backdrop-filter:none}}