/* el país de quien entra: ver pais.js */
.pa-oculto{display:none!important}
.pais{position:relative;display:inline-flex;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
 font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:inherit;pointer-events:auto}
.pais .pa-a{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px 0 5px;border-radius:99px;
 background:rgba(237,237,235,.06);border:1px solid rgba(237,237,235,.18);color:inherit;font:inherit;letter-spacing:inherit;
 cursor:pointer;transition:background .25s,border-color .25s}
.pais .pa-a:hover,.pais.on .pa-a{background:rgba(237,237,235,.12);border-color:rgba(237,237,235,.34)}
.pais .pa-a:focus-visible{outline:1px solid #4F6FFF;outline-offset:2px}
.pa-b{flex:none;display:block;width:18px;height:18px;border-radius:50%;overflow:hidden;
 box-shadow:0 0 0 1px rgba(237,237,235,.22)}
.pa-b svg{display:block;width:100%;height:100%}
.pais .pa-v{display:flex}
.pais .pa-c{white-space:nowrap}
.pais .pa-f{width:9px;height:6px;opacity:.6;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.pais.on .pa-f{transform:rotate(180deg)}
.barra.claro .pais .pa-a{background:rgba(21,20,26,.05);border-color:rgba(21,20,26,.22)}
.barra.claro .pais .pa-a:hover,.barra.claro .pais.on .pa-a{background:rgba(21,20,26,.1)}
.barra.claro .pa-b{box-shadow:0 0 0 1px rgba(21,20,26,.2)}
.pais .pa-p{position:absolute;top:calc(100% + 10px);right:0;z-index:80;width:280px;padding:10px;border-radius:14px;
 background:rgba(14,14,16,.96);color:#EDEDEB;border:1px solid rgba(237,237,235,.12);
 -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 60px rgba(0,0,0,.55);
 opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s ease,transform .3s cubic-bezier(.16,1,.3,1),visibility 0s .3s}
.pais.on .pa-p{opacity:1;visibility:visible;transform:none;transition:opacity .22s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.pa-p .pa-t{padding:4px 8px 10px;font-size:9px;letter-spacing:.22em;opacity:.45}
.pa-p ul{list-style:none;margin:0;padding:0;max-height:min(420px,62vh);overflow:auto}
.pa-p li button{width:100%;display:flex;align-items:center;gap:11px;padding:8px;border:0;border-radius:9px;
 background:none;color:inherit;font:inherit;letter-spacing:.08em;text-transform:none;font-family:'Archivo',system-ui,sans-serif;
 font-size:13px;cursor:pointer;text-align:left;transition:background .2s}
.pa-p li button:hover,.pa-p li button:focus-visible{background:rgba(237,237,235,.07);outline:none}
.pa-p li[aria-selected="true"] button{background:rgba(79,111,255,.08)}
.pa-p .pa-n{flex:1;letter-spacing:0}
.pa-p li em{font-style:normal;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.16em;opacity:.4}
.pa-p li[aria-selected="true"] em{opacity:1;color:#4F6FFF}
.pa-p .pa-i{display:flex;align-items:center;gap:8px;margin-top:8px;padding:10px 8px 4px;border-top:1px solid rgba(237,237,235,.1)}
.pa-p .pa-ls{display:flex;gap:4px}
.pa-p .pa-i span{flex:1;font-size:9px;letter-spacing:.22em;opacity:.45}
.pa-p .pa-i button{border:1px solid rgba(237,237,235,.16);border-radius:99px;background:none;color:inherit;font:inherit;
 font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 7px;min-width:30px;cursor:pointer;opacity:.55;transition:opacity .2s,background .2s}
.pa-p .pa-i button.on{opacity:1;background:#4F6FFF;color:#0A0A0B;border-color:#4F6FFF}
.pa-p .pa-i button:hover{opacity:1}
/* en la tapa va donde estaba el EN / ES, arriba a la derecha */
.pais.en-tapa{margin-left:auto}
@media (max-width:700px){
  .pais .pa-a{height:26px;gap:6px;padding:0 8px 0 4px}
  .pa-b{width:16px;height:16px}
  /* ⚠️ arriba y no abajo: abajo está el reproductor de música, y le tapaba
     la fila del idioma */
  .pais .pa-p{position:fixed;top:calc(env(safe-area-inset-top,0px) + 52px);left:12px;right:12px;width:auto;
   transform:translateY(-8px)}
  .pa-p ul{max-height:calc(100svh - 190px)}
  .pais.on .pa-p{transform:none}
}
@media (prefers-reduced-motion:reduce){.pais .pa-p,.pais .pa-f{transition:none}}

/* ⚠️ La píldora va siempre pegada al menú. En la portada y casi todas las
   páginas el centro de la barra crece (flex:1) y la empuja a la derecha, pero
   en /brooket/ el centro está vacío y sin crecer: con `space-between` la
   píldora quedaba flotando en el medio (Yuri, 26/09). El margen automático
   absorbe el espacio libre sólo donde lo hay; donde el centro ya crece, no
   cambia nada. */
header.barra .pais{margin-left:auto}
/* [YURINEHUEN] arriba a la izquierda lleva siempre al inicio; la flecha de
   volver queda al lado, más tenue, y en el teléfono se va (está el menú) */
header.barra a.marca{color:inherit;text-decoration:none}
header.barra .volver.casa + .volver{opacity:.42}
@media(max-width:560px){header.barra .volver.casa + .volver{display:none}}

/* los botones llenos del acento van en el azul de la marca con letra blanca
   (7,8:1). Con el azul luminoso de los textos, la letra oscura quedaba en 4,8:1
   y se veía apagada. */
.cir-boton,.eq-capa .eq-boton,.astra-pop .ap-f button[type=submit]{background:#0024FF!important;color:#fff!important}
.cir-boton:hover,.astra-pop .ap-f button[type=submit]:hover{background:#1A3BFF!important}

/* ── el cartel de país (28/09/2026) ──
   Siempre se entra en inglés de EE.UU.; si el país tiene versión propia, se
   ofrece acá. Debajo de la barra, del lado de la píldora de país. */
.pa-aviso{position:fixed;z-index:80;top:calc(env(safe-area-inset-top,0px) + 76px);right:max(16px,env(safe-area-inset-right,0px));width:min(400px,calc(100vw - 32px));
 display:grid;grid-template-columns:auto 1fr auto;gap:12px 12px;align-items:start;padding:16px 16px 16px 16px;border-radius:18px;
 background:rgba(14,17,30,.94);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
 border:1px solid rgba(236,238,245,.16);box-shadow:0 24px 70px -18px rgba(0,0,0,.85);color:#F2F1EE;
 font-family:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
 opacity:0;transform:translateY(-8px);transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.pa-aviso.ver{opacity:1;transform:none}
.pa-aviso .pa-b-av{width:22px;height:22px;margin-top:1px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.pa-aviso .pa-b-av svg,.pa-aviso .pa-b-av>*{width:100%;height:100%;display:block}
.pa-aviso p{margin:0;font-size:14.5px;line-height:1.45;letter-spacing:-.005em;text-wrap:pretty}
.pa-aviso .pa-av-acc{grid-column:2 / 4;display:flex;gap:8px;flex-wrap:wrap}
.pa-aviso .pa-av-acc button{height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(236,238,245,.18);background:rgba(255,255,255,.04);
 color:#F2F1EE;font:500 13.5px/1 'Geist',system-ui,sans-serif;cursor:pointer;transition:background .25s,border-color .25s}
.pa-aviso .pa-av-acc button:hover{background:rgba(255,255,255,.09);border-color:rgba(236,238,245,.34)}
.pa-aviso .pa-av-acc .pa-si{background:#0024FF;border-color:#0024FF;color:#fff}
.pa-aviso .pa-av-acc .pa-si:hover{background:#1A3BFF;border-color:#1A3BFF}
.pa-aviso .pa-x{grid-column:3;grid-row:1;width:28px;height:28px;margin:-4px -4px 0 0;border:0;border-radius:8px;background:none;color:#A3A9BA;font-size:20px;line-height:1;cursor:pointer}
.pa-aviso .pa-x:hover{color:#F2F1EE;background:rgba(255,255,255,.06)}
@media (max-width:700px){
 .pa-aviso{top:calc(env(safe-area-inset-top,0px) + 64px);left:12px;right:12px;width:auto}
}
@media (prefers-reduced-motion:reduce){.pa-aviso{transition:none}}