/*
 * Cabecera y pie de todo el sitio.
 *
 * Se encola en TODAS las páginas, al contrario que article.css: la cabecera
 * sale en las cuatro portadas, en las legales y en el blog. Por eso es
 * deliberadamente pequeña y solo toca el menú.
 */

/* ---------------------------------------------------------------------------
   Botón de descarga en el menú.
   Es un item de menú y no un componente del constructor de Astra porque el
   constructor gratuito no permite traducir el texto del botón por idioma. Como
   item de menú, cada idioma tiene el suyo y Polylang los sirve solos.

   ⚠️ Astra aplica `line-height: 80px` a cada item del menú principal, que es el
   alto de la cabecera. Si no se anula, el enlace hereda esos 80 px, el relleno
   se suma encima y el botón se convierte en un óvalo enorme que rompe la
   cabecera. Por eso el alto se fija a mano y el `line-height` se pone a 1.
   --------------------------------------------------------------------------- */
.main-header-menu .aim-nav-cta{display:flex;align-items:center;margin-left:10px}
.main-header-menu .aim-nav-cta > a.menu-link{
  height:42px;line-height:1 !important;padding:0 20px !important;
  display:inline-flex;align-items:center;
  background:#046BD2;color:#fff !important;border-radius:99px;
  font-size:14.5px;font-weight:700;white-space:nowrap;
  transition:background .12s ease,transform .12s ease;
}
.main-header-menu .aim-nav-cta > a.menu-link:hover{background:#263886;color:#fff !important}
.main-header-menu .aim-nav-cta > a.menu-link:active{transform:scale(.98)}
/* Astra dibuja un subrayado animado bajo cada item; en un botón sobra. */
.main-header-menu .aim-nav-cta > a::before,
.main-header-menu .aim-nav-cta > a::after{display:none !important}

/* ---------------------------------------------------------------------------
   Selector de idioma.
   Se ataca por `.pll-parent-menu-item`, la clase que pone Polylang: reescribe
   ese item por completo y descarta las clases propias que se le asignen.
   Pastilla discreta: es una herramienta, no una llamada a la acción, y no debe
   competir con el botón que tiene al lado.
   --------------------------------------------------------------------------- */
/* ⚠️ La pastilla va DENTRO de una consulta de escritorio. Astra le pone la
   clase `main-header-menu` a los DOS menús, al de la cabecera y al del cajón
   de móvil, así que sin acotarla se colaba en el móvil: la fila del idioma
   salía como una píldora gris de ancho completo y empujaba la flecha a la
   línea siguiente. */
@media (min-width:922px){
  .main-header-menu .pll-parent-menu-item{display:flex;align-items:center}
  .main-header-menu .pll-parent-menu-item > a.menu-link{
    height:38px;line-height:1 !important;padding:0 14px !important;
    display:inline-flex;align-items:center;gap:6px;
    border:1px solid #E4E8EF;border-radius:99px;
    font-size:13.5px;font-weight:650;color:#5E6B7D !important;
  }
  .main-header-menu .pll-parent-menu-item > a.menu-link:hover{border-color:#046BD2;color:#046BD2 !important}
  .main-header-menu .pll-parent-menu-item .sub-menu{min-width:158px}
}
/* El subrayado animado sobra en las dos versiones. */
.main-header-menu .pll-parent-menu-item > a::before,
.main-header-menu .pll-parent-menu-item > a::after{display:none !important}

/* ---------------------------------------------------------------------------
   Pie: los legales viven aquí ahora.
   --------------------------------------------------------------------------- */
.site-footer .footer-nav-wrap ul{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center}
.site-footer .footer-nav-wrap a{font-size:13.5px}

/* ---------------------------------------------------------------------------
   Barra de descarga fija, solo móvil y solo Android.
   En iOS la genera Safari de forma nativa a partir del apple-app-site-association
   y es mejor que cualquiera propia; dos banderas a la vez son ruido. La regla
   que la esconde en iOS la inyecta el script de detección (functions.php §7),
   porque el optimizador borra el CSS de clases que solo existen en ejecución.
   --------------------------------------------------------------------------- */
.aim-dlbar{display:none}
.aim-dlbar-x{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.aim-dlbar-x:checked ~ .aim-dlbar{display:none !important}

@media (max-width:921px){
  .aim-dlbar{
    display:flex;align-items:center;gap:11px;
    position:fixed;left:0;right:0;bottom:0;z-index:99;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(26,26,46,.97);
    -webkit-backdrop-filter:saturate(140%) blur(8px);backdrop-filter:saturate(140%) blur(8px);
    border-top:1px solid rgba(255,255,255,.1);
  }
  .aim-dlbar__ico{width:38px;height:38px;border-radius:10px;flex:none;display:block}
  .aim-dlbar__t{flex:1;min-width:0;line-height:1.25}
  .aim-dlbar__t b{display:block;color:#fff;font-size:14px;font-weight:700}
  .aim-dlbar__t small{display:block;color:#9AA3B8;font-size:11.5px}
  .aim-dlbar__btn{
    flex:none;background:#046BD2;color:#fff !important;text-decoration:none;
    font-weight:700;font-size:14.5px;padding:11px 18px;border-radius:99px;
    min-height:44px;display:inline-flex;align-items:center;
  }
  .aim-dlbar__close{
    flex:none;width:30px;height:30px;display:grid;place-items:center;cursor:pointer;
    color:#7C8499;font-size:20px;line-height:1;border-radius:50%;
  }
  /* Hueco para que la barra no tape el final de ninguna página. */
  body{padding-bottom:72px}
  /* En el menú desplegable el botón ocupa el ancho: ahí ya hay sitio. */
  /* Dentro del menú desplegable el botón ocupa el ancho: ahí sí hay sitio. */
  .ast-mobile-popup-drawer .aim-nav-cta > a{
    display:flex;justify-content:center;align-items:center;
    height:48px;line-height:1 !important;margin-top:10px;
    background:#046BD2;color:#fff !important;border-radius:99px;font-weight:700;
  }
}
@media (max-width:400px){
  .aim-dlbar__t small{display:none}
}

/* ---------------------------------------------------------------------------
   Panel desplegable de móvil.
   Se ataca por `#ast-hf-mobile-menu`, que es el id real del <ul> que pinta
   Astra. Con la clase `.ast-mobile-popup-drawer` las reglas no llegaban, y un
   id además le gana en especificidad al CSS dinámico del tema sin recurrir a
   `!important` en todo.
   --------------------------------------------------------------------------- */

/* Mismo margen izquierdo para TODOS los items. Astra le da un relleno distinto
   al item del selector de idioma y las cuatro filas quedaban desalineadas. */
#ast-hf-mobile-menu > .menu-item > .menu-link,
#ast-hf-mobile-menu > .menu-item > .ast-menu-toggle{
  padding-left:20px !important;padding-right:20px !important;
}
#ast-hf-mobile-menu > .menu-item > .menu-link{
  font-size:16.5px;font-weight:600;min-height:52px;display:flex;align-items:center;
}

/* El `<ul>` de Astra lleva `ast-flex`. En el cajón eso lo vuelve una columna
   flexible que reparte el espacio sobrante entre los items, y abría huecos de
   cientos de píxeles entre el último enlace, el idioma y el botón. Una lista
   normal no reparte nada. */
#ast-hf-mobile-menu{display:block !important}
#ast-hf-mobile-menu > .menu-item{margin:0}

/* El selector de idioma: fila normal, con su flecha pegada al texto en vez de
   flotando al otro extremo dentro de una caja. */
#ast-hf-mobile-menu > .pll-parent-menu-item > a.menu-link{
  height:auto;min-height:52px;border:0;border-radius:0;
  padding-left:20px !important;padding-right:0 !important;
  font-size:16.5px;font-weight:600;color:inherit !important;
  flex:0 1 auto;width:auto;
}
#ast-hf-mobile-menu > .pll-parent-menu-item > .ast-menu-toggle{
  position:static !important;width:auto !important;background:transparent !important;
  border:0 !important;box-shadow:none !important;padding-left:6px !important;
}
/* La fila del idioma se monta SIN flex, y es a conciencia.
   Medido en un navegador real: dentro del cajón, Astra centra los items de
   este `<li>` y el `flex-grow` del enlace no llegaba a aplicarse, así que el
   enlace se quedaba encogido a su texto en mitad de la fila y la flecha caía
   a una segunda línea, también centrada. Un contenedor en bloque con la
   flecha posicionada no depende de nada de eso. */
#ast-hf-mobile-menu > .pll-parent-menu-item{
  display:block !important;position:relative;
  /* Separado de la navegación: no es un destino, es una herramienta. */
  border-top:1px solid #E4E8EF;margin-top:10px;padding-top:2px;
}
#ast-hf-mobile-menu > .pll-parent-menu-item > a.menu-link{
  display:flex !important;align-items:center;width:100% !important;
  height:auto;min-height:52px;border:0;border-radius:0;
  padding-left:20px !important;padding-right:56px !important;
  font-size:16px;font-weight:600;color:#5E6B7D !important;
}
/* El globo. Sin él la fila se lee como un enlace más del menú y el selector
   de idioma desaparece a la vista aunque siga ahí. Un icono no hay que
   traducirlo, que en un menú de cuatro idiomas importa. */
#ast-hf-mobile-menu > .pll-parent-menu-item > a.menu-link::before{
  /* `display` va explícito y con !important: más arriba se apagan los
     pseudo-elementos de este enlace para matar el subrayado animado de
     Astra, y ese `display:none !important` se llevaba por delante el
     globo aunque esta regla tenga más especificidad, porque son
     propiedades distintas. */
  content:"";display:block !important;flex:0 0 19px;width:19px;height:19px;margin-right:11px;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6B7D' stroke-width='1.7' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18'/><path d='M12 3c3.2 3.6 3.2 14.4 0 18c-3.2-3.6-3.2-14.4 0-18'/></svg>") no-repeat center/contain;
}
/* La flecha, en la esquina, con área de toque cómoda. */
#ast-hf-mobile-menu > .pll-parent-menu-item > .ast-menu-toggle{
  position:absolute !important;top:0;right:0;
  width:52px !important;height:52px !important;
  display:flex !important;align-items:center;justify-content:center;
  padding:0 !important;margin:0 !important;
  background:transparent !important;border:0 !important;box-shadow:none !important;
}
/* El recuadro punteado que deja el toque es feo, pero el foco de teclado NO
   se quita: se sustituye por un anillo propio y solo se oculta cuando el foco
   vino de un dedo o del ratón. */
#ast-hf-mobile-menu > .pll-parent-menu-item > .ast-menu-toggle:focus:not(:focus-visible){outline:0 !important}
#ast-hf-mobile-menu > .pll-parent-menu-item > .ast-menu-toggle:focus-visible{
  outline:2px solid #046BD2 !important;outline-offset:-4px;border-radius:8px;
}
#ast-hf-mobile-menu > .pll-parent-menu-item > .sub-menu{width:100%}
#ast-hf-mobile-menu .sub-menu .menu-link{padding-left:36px !important;font-size:15.5px}

/* El botón de descarga: fila propia, ancho completo y bien visible. Es la
   acción final y no puede quedarse como un enlace más de la lista. */
#ast-hf-mobile-menu > .aim-nav-cta{padding:14px 20px 6px;display:block}
#ast-hf-mobile-menu > .aim-nav-cta > .menu-link{
  display:flex !important;align-items:center;justify-content:center;
  height:50px;min-height:50px;line-height:1 !important;
  padding:0 22px !important;margin:0;
  background:#046BD2;color:#fff !important;border-radius:99px;
  font-size:16px;font-weight:700;
}
#ast-hf-mobile-menu > .aim-nav-cta > .menu-link:hover{background:#263886;color:#fff !important}


/* ===== tipografia base del sitio  (aim-font-base) =====================
   Inter es la fuente de la marca y la que usa la app, pero NADIE se la estaba
   asignando al cuerpo. Astra tiene sus fuentes por defecto desactivadas desde
   el mu-plugin de fuentes locales, el kit de Elementor sigue en valores de
   fabrica (Roboto), y local-fonts.css solo declara los @font-face sin asignar
   ninguna familia. Resultado: el texto caia a la pila del sistema y solo los
   botones, que la llevan puesta a mano, salian en Inter.

   Esta hoja se encola en TODAS las paginas, asi que es el sitio correcto.
   Los titulares de articulo y de herramienta llevan Manrope por decision de
   diseno en article.css, y esa regla es mas especifica, asi que sigue mandando
   donde toca. */
body,
button,
input,
select,
textarea,
.elementor-widget-text-editor,
.elementor-widget-heading .elementor-heading-title,
.entry-content,
.ast-container {
  font-family: Inter, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Inter, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}