/* ---------------------------------------------------------------
   CABECERA Y MENU DE IBRAHINGIL.COM
   La misma cabecera en todas las paginas. Este archivo no toca body
   ni el reset, para poder convivir con sistema.css en las paginas
   que todavia llevan el diseno anterior.
   --------------------------------------------------------------- */

:root{
  --mh-fondo:#0A1417;
  --cian:#5BD0DC;
  --blanco:#F3F6F5;
  --lema:#7F9498;
  --bg:#FFFFFF;
  --ink:#14191B;
  --soft:#545C5F;
  --soft-2:#696F72;
  --mh-linea:#ECECEA;
  --mh-linea-2:#E2E2DF;
  --hover:#00000005;
  --logo:"Archivo Variable",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mh:66px;
}

/* La cabecera y el menu no llevan subrayado: sistema.css subraya los enlaces
   del texto, que es lo correcto dentro de un articulo, pero no aqui. */
.mh a,.menu a,.saltar{text-decoration:none}
.mh a:hover,.menu a:hover{color:inherit}
.m-redes a:hover{text-decoration:underline}
/* Selector de idioma dentro del menu (antes estaba en la cabecera). */
.m-idioma{display:inline-flex;gap:2px;margin:8px 22px 6px;border:1px solid var(--mh-linea-2);border-radius:999px;padding:3px;background:var(--bg)}
.m-idioma a{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:30px;border-radius:999px;font-family:var(--logo);font-weight:700;font-size:12px;letter-spacing:.5px;color:var(--soft);text-decoration:none}
.m-idioma a[aria-current]{background:var(--ink);color:var(--bg)}
@media(hover:hover){.m-idioma a:not([aria-current]):hover{color:var(--ink)}}

.saltar{
  position:absolute;left:12px;top:-100vh;z-index:100;
  background:#fff;color:var(--ink);font-family:var(--logo);font-weight:700;
  padding:12px 16px;border:1px solid var(--mh-linea-2);border-radius:10px;text-decoration:none;
}
.saltar:focus{top:12px}

.shell{width:100%}
.center{max-width:604px;margin:0 auto;width:100%}

/* ================= CABECERA ================= */
.mh{
  position:sticky;top:0;z-index:40;height:var(--mh);
  background:var(--mh-fondo);
  background-image:radial-gradient(140% 200% at 78% -60%,#173038 0%,#0C1A1F 42%,var(--mh-fondo) 72%);
  box-shadow:0 1px 0 #ffffff10,0 8px 24px #0000000f;
}
.mh-in{max-width:1200px;margin:0 auto;height:100%;padding:0 18px;display:flex;align-items:center;gap:14px}
.hamb{
  flex:0 0 auto;width:40px;height:40px;border:0;background:none;cursor:pointer;
  color:#CFE0E2;display:flex;align-items:center;justify-content:center;border-radius:50%;
  transition:background .15s;margin-left:-6px;
}
@media(hover:hover){.hamb:hover{background:#ffffff14;color:#fff}}
.hamb:focus-visible{outline:2px solid var(--cian);outline-offset:-3px}
.hamb svg{width:24px;height:24px}
.logo{font-family:var(--logo);font-weight:800;font-size:23px;letter-spacing:-.5px;color:var(--blanco);line-height:1;text-transform:uppercase}
.logo span{color:var(--cian)}
.logo-wrap{min-width:0}
.tag{margin-top:5px;font-family:var(--logo);font-weight:600;font-size:9.5px;letter-spacing:3px;color:var(--lema);text-transform:uppercase;white-space:nowrap}
.mh-idioma{margin-left:auto;display:flex;gap:2px;border:1px solid #33474C;border-radius:999px;padding:3px}
.mh-idioma a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:30px;border-radius:999px;
  font-family:var(--logo);font-weight:700;font-size:12px;letter-spacing:.5px;color:#C9D5D2;
}
/* En pantalla estrecha manda el nombre: el resto se aprieta. */
@media(max-width:430px){
  .mh-in{gap:10px;padding:0 14px}
  .logo{font-size:20px}
  .tag{font-size:8.5px;letter-spacing:2px}
  .mh-idioma{padding:2px}
  .mh-idioma a{min-width:32px;height:26px;font-size:11px}
}
/* En movil el lema no cabe en la misma linea que el nombre y el ES/EN: se
   solapaba. Se oculta; sigue apareciendo en el menu y en el pie. */
@media(max-width:720px){.tag{display:none}}
.mh-idioma a[aria-current]{background:var(--cian);color:var(--mh-fondo)}
.mh-idioma a:focus-visible{outline:2px solid var(--cian);outline-offset:2px}

/* ================= ESTRUCTURA ================= */
.shell{width:100%}
.center{max-width:604px;margin:0 auto;width:100%}

/* ================= MENU (IZQUIERDA) ================= */
.menu{
  position:fixed;top:0;left:0;bottom:0;z-index:60;
  width:min(84vw,340px);background:var(--bg);
  transform:translateX(-100%);transition:transform .28s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;overflow-y:auto;box-shadow:10px 0 44px #00000022;
}
.menu.open{transform:translateX(0)}
.menu-head{display:flex;align-items:center;padding:18px 22px 12px}
.menu-head .mt{font-family:var(--logo);font-weight:800;font-size:16px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink)}
.menu-x{margin-left:auto;border:0;background:none;font-size:26px;line-height:1;color:var(--ink);cursor:pointer;width:38px;height:38px;border-radius:50%}
@media(hover:hover){.menu-x:hover{background:var(--hover)}}
.m-sec{padding:8px 0}
.m-sec+.m-sec{border-top:1px solid var(--mh-linea)}
.m-lbl{padding:12px 22px 4px;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--soft-2)}
.m-item{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:11px 22px;font-size:15.5px;font-weight:600;color:var(--ink);position:relative;
}
@media(hover:hover){.m-item:hover{background:var(--hover)}}
.m-item .ic{width:20px;display:flex;justify-content:center;color:var(--soft);flex:0 0 auto}
.m-item svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.m-item[aria-current]{font-weight:800}
.m-item[aria-current]::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--ink)}
/* Enlaces a las redes. Area tactil de 44px de alto y 16px de separacion:
   por debajo de eso el dedo falla y Lighthouse lo marca. */
.m-redes{display:flex;flex-wrap:wrap;gap:4px 16px;padding:2px 22px 22px}
.m-redes a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--soft);position:relative}
@media(hover:hover){.m-redes a:hover{color:var(--ink);text-decoration:underline}}

.scrim{position:fixed;inset:0;z-index:55;background:#0000004d;opacity:0;pointer-events:none;transition:opacity .24s}
.scrim.on{opacity:1;pointer-events:auto}


/* ================= TABLET ================= */
@media(min-width:720px){
  :root{--mh:74px}
  .logo{font-size:26px}
  .tag{font-size:10px}
  .center{max-width:640px}
}

/* ================= ESCRITORIO: menu fijo a la izquierda ================= */
@media(min-width:1024px){
  :root{--mh:76px}
  .hamb{display:none}
  .scrim{display:none}
  .shell{
    display:grid;grid-template-columns:264px minmax(0,632px);
    justify-content:center;column-gap:0;align-items:start;
    max-width:940px;margin:0 auto;
  }
  .center{max-width:none;margin:0;border-inline:1px solid var(--mh-linea)}
  .menu{
    position:sticky;top:var(--mh);left:auto;transform:none;width:auto;
    /* Mide lo que ocupa; solo hace scroll si la ventana es tan baja que no
       cabe. Antes tenia altura fija de pantalla completa y dibujaba una barra
       de scroll interna en las paginas cortas (Buscar, Empieza aqui). */
    height:auto;max-height:calc(100vh - var(--mh));box-shadow:none;padding-top:14px;
  }
  .menu-x,.menu-head{display:none}
}
@media(min-width:1100px){
  /* UNA sola plantilla: misma barra lateral y mismo borde de contenido en TODAS
     las paginas (seccion, articulo, buscar, sobre, contacto, legales). El
     contenido arranca siempre pegado a la barra; el texto se lee comodo porque
     su ancho de lectura se limita dentro de la columna, no centrando la columna. */
  .shell{grid-template-columns:288px minmax(0,952px);max-width:1280px}
}


/* ================= BUSCADOR EN LA CABECERA =================
   Escritorio: barra a la derecha, con desplegable de resultados.
   Movil: una LUPA; al tocarla se abre un panel a lo ancho con la caja y los
   resultados. En pantallas pequenas una barra fija no cabe; la lupa si. */

/* --- Movil (por defecto) --- */
.mh-lupa{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-left:auto;
  width:40px;height:40px;border:0;background:none;color:#CFE0E2;cursor:pointer;
  border-radius:50%;transition:background .15s;
}
.mh-lupa svg{width:22px;height:22px}
@media(hover:hover){.mh-lupa:hover{background:#ffffff14;color:#fff}}
.mh-lupa:focus-visible{outline:2px solid var(--cian);outline-offset:-3px}

.mh-buscar-wrap{display:none}
.mh.buscando .mh-buscar-wrap{
  display:block;position:absolute;top:100%;left:0;right:0;z-index:55;
  background:var(--mh-fondo);padding:12px 16px 14px;box-shadow:0 14px 26px #00000033;
}
.mh-buscar{
  display:flex;align-items:center;gap:8px;width:100%;
  background:#ffffff1f;border:1px solid #ffffff33;border-radius:999px;
  padding:0 14px;height:42px;
}
.mh-buscar:focus-within{border-color:#ffffff70;background:#ffffff29}
.mh-buscar svg{width:18px;height:18px;color:#ffffffbb;flex:none}
.mh-buscar input{
  width:100%;min-width:0;background:none;border:0;outline:none;color:#fff;
  font-family:var(--sans);font-size:16px;
}
.mh-buscar input::placeholder{color:#ffffff8f}
.mh-buscar input::-webkit-search-cancel-button{filter:invert(1);opacity:.6}

/* Resultados: en movil fluyen bajo la caja, a lo ancho del panel. */
.mh-res{
  margin-top:10px;background:var(--bg);border:1px solid var(--mh-linea-2);
  border-radius:14px;padding:6px;max-height:60vh;overflow-y:auto;
}
.mh-res-item{display:block;padding:11px 12px;border-radius:10px;text-decoration:none}
.mh-res-item:hover,.mh-res-item:focus-visible{background:var(--hover)}
.mh-res-s{display:block;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--acento)}
.mh-res-t{display:block;margin-top:3px;font-family:var(--serif);font-size:16px;line-height:1.25;color:var(--ink)}
.mh-res-vacio{margin:0;padding:12px;font-family:var(--sans);font-size:14px;color:var(--soft)}

/* --- Escritorio: sin lupa, barra inline con desplegable --- */
@media(min-width:720px){
  .mh-lupa{display:none}
  .mh-buscar-wrap,
  .mh.buscando .mh-buscar-wrap{
    display:block;position:relative;top:auto;left:auto;right:auto;z-index:auto;
    flex:1 1 200px;min-width:0;max-width:300px;margin-left:auto;
    background:none;padding:0;box-shadow:none;
  }
  .mh-buscar{height:38px;background:#ffffff14;border-color:#ffffff2e;padding:0 12px}
  .mh-buscar svg{width:17px;height:17px;color:#ffffffa8}
  .mh-buscar input{font-size:15px}
  .mh-res{
    position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;margin-top:0;
    box-shadow:0 12px 34px #0000001f;max-height:min(70vh,460px);
  }
}