:root{
  --header-bg:#032A53;         /* azul barra */
  --header-link:#ffffff;       /* links */
  --submenu-bg:#ffffff;        /* fondo dropdown */
  --submenu-hover:#e9e9e9;
  /*--wrap:1350px;*/
}

html[style*="margin-top"] .site-header{ top:0 !important; }


.site-header{
  position: sticky; top:0; z-index:1000;
  background:var(--header-bg);
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  margin-top: 0;
}

/* Desplazar header cuando hay admin bar */
/*.admin-bar .site-header{ top:32px; }
@media (max-width:782px){ .admin-bar .site-header{ top:46px; } }*/

.header-bar{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 16px;
  height:64px;
  display:flex; align-items:center; gap:16px;
}

/* Marca */
.brand{ display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; }
.brand-logo{ height:32px; width:auto; display:block; }
.brand-text{ font-weight:700; font-size:18px; color:#fff; }

/* ===== utilidades ===== */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;clip:rect(0,0,0,0);overflow:hidden}

/* ===== header base rápido (ajusta colores si quieres) ===== */
.site-header{background:#082a4a;color:#fff;position:sticky;top:0;z-index:1100}
.header-bar{display:flex;align-items:center;gap:12px;min-height:60px}
.brand-logo{height:28px;width:auto;display:block}

/* ===== hamburguesa ===== */
@media (max-width:1024px){
  .nav-toggle{
    margin-left:auto; /* empuja a la derecha */
    display:flex;flex-direction:column;gap:5px;
    align-items:center;justify-content:center;
    width:44px;height:44px;border:0;background:transparent;cursor:pointer
  }
  .nav-toggle .nav-toggle-bar{
    width:24px;height:2px;background:#fff;border-radius:2px;display:block
  }
}

/* ===== menú escritorio (>=1025px) ===== */
@media (min-width:1025px){
  /* Centramos el contenido del header: [logo] [nav centrado] [espacio] */
  .header-bar{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
  }

  /* El nav ya no se empuja a la derecha; lo centramos en la fila */
  .primary-nav{
    margin:0;                /* quita el margin-left:auto */
    justify-self:center;     /* centra el bloque de navegación */
  }

  .primary-menu{
    display:flex;
    gap:15px;
    align-items:center;
    list-style:none;
    margin:0;
    padding:0;
  }

  /* NECESARIO para que el dropdown se ancle al item */
  .primary-menu>li{
    position:relative;
  }

  .primary-menu>li>a{
    color:#fff;
    text-decoration:none;
    padding:14px 6px;
    display:inline-flex;
    align-items:center;
    line-height:1;
  }

  /* chevrón pegado al texto */
  .primary-menu>li.menu-item-has-children>a::after{
    content:"▾";
    font-size:.8rem;
    margin-left:.1rem;
    opacity:.9;
    transform:translateY(-1px);
  }

  /* Dropdown: anclado al borde inferior del <li> */
  .primary-menu .sub-menu{
    position:absolute;
    left:0;
    top:calc(100% + 10px);
    visibility:hidden;
    opacity:0;
    transition:opacity .15s ease, top .15s ease;
    background:#fff;
    color:#111;
    border-radius:8px;
    box-shadow:0 2px 7px rgba(0,0,0,.06), 0 16px 38px rgba(18,43,70,.11);
    padding:6px 0;
    min-width:220px;
    z-index:1200;
    list-style:none;
    margin:0;
  }

  .primary-menu>li:hover>.sub-menu{
    visibility:visible;
    opacity:1;
    top:calc(100% + 2px);
  }

  .primary-menu .sub-menu li a{
    display:block;
    padding:10px 14px;
    color:#0b2a4a;
    text-decoration:none;
    white-space:nowrap;
  }

  .primary-menu .sub-menu li a:hover{
    background:#f0f2f6;
  }

  .primary-menu .sub-menu li+li a{
    border-top:1px solid #eef1f5;
  }

  /* El botón hamburguesa no aplica en desktop */
  .nav-toggle{ display:none !important; }
}


/* ===== menú móvil (off-canvas) ===== */
@media (max-width:1024px){
  .primary-nav{
    position:fixed;inset:0 auto 0 0; /* left:0 */
    width:min(86vw,420px);height:100vh;background:#082a4a;color:#fff;
    transform:translateX(-110%);transition:transform .28s ease;z-index:1200;
    box-shadow:2px 0 24px rgba(0,0,0,.35);padding-top:70px /* despegar de top */
  }
  .primary-nav.is-open{transform:none}
  .primary-menu{display:block;margin:0;padding:12px 0;list-style:none}
  .primary-menu>li{border-bottom:1px solid rgba(255,255,255,.12)}
  .primary-menu>li>a{
    color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:space-between;
    padding:14px 18px;font-weight:500
  }
  /* chevrón a la DERECHA del texto */
  .primary-menu>li.menu-item-has-children>a::after{
    content:"›";font-size:18px;line-height:1;margin-left:.5rem;opacity:.95
  }

  /* submenús en tarjetas blancas */
  .primary-menu .sub-menu{
    display:none;margin:8px 12px 16px;background:#fff;color:#111;border-radius:10px;
    box-shadow:0 12px 26px rgba(0,0,0,.25);overflow:hidden
  }
  .primary-menu .sub-menu a{display:block;padding:12px 14px;color:#111;text-decoration:none}
  .primary-menu .sub-menu li+li a{border-top:1px solid #e9edf3}

  /* overlay */
  .nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1190}
  .nav-overlay[hidden]{display:none}

  /* bloquear scroll de la página cuando el drawer está abierto */
  body.nav-open{overflow:hidden}
}

.brand .custom-logo{ height:28px; width:auto; display:block; }

/* Columna 1 FOOTER (bloque de texto) */
.footer-col-info .widget,
.footer-info-default {
  user-select: none;                 /* hace el bloque "no seleccionable" */
}

.footer-col-info .footer-title {
  font-weight: 700;
  margin: 0 0 12px;
}

.footer-col-info p { margin: 0 0 .5rem; color: var(--footer-text); }
.footer-col-info p.strong { font-weight: 700; }

.footer-col-info a {
  /*user-select: text;*/                 /* PERMITIR seleccionar/click en el email FOOTER */
  color: var(--footer-link);
  text-decoration: none;
}
.footer-col-info a:hover { color: var(--footer-link-hover); text-decoration: underline; }

/* Alineación y ritmo visual para que cuadre con las otras columnas FOOTER */
.footer .footer-col { min-width: 240px; }
.footer .footer-col-info .widget + .widget { margin-top: 10px; }


@media (min-width:1025px){
  /* Asegura anclaje y elimina gaps */
  .primary-menu > li { 
	  position: relative;
	  font-size: smaller;
	  font-weight: 500;
	}

  .primary-menu > li > .sub-menu{
    position: absolute;
    top: 100%;          /* justo debajo del link */
    left: 0;
    margin-top: 0;      /* sin separación extra */
    transform: translateY(0);   /* sin desplazamiento que cree hueco */
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s ease, visibility .15s ease;
  }

  .primary-menu > li:hover > .sub-menu{
    visibility: visible;
    opacity: 1;
  }

  /* “Puente” anti-gap: mantiene el hover mientras bajas al submenú */
  .primary-menu > li::after{
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 10px;       /* puedes subir/bajar según te convenga */
  }
}
/* ===== línea blanca arriba, animación desde el centro (escritorio) ===== */
@media (min-width:1025px){
  .primary-menu > li > a{ position: relative; }

  /* borra/override cualquier regla previa de ::before que tuviera bottom */
  .primary-menu > li > a::before{
    content:"";
    position:absolute;
    left:6px;               /* pequeño margen lateral */
    right:6px;
    top:8px;                /* línea arriba (ajusta a tu gusto) */
    height:2px;
    background:#fff;
    opacity:.95;
    pointer-events:none;

    /* animación: del centro hacia afuera */
    transform: scaleX(0);
    transform-origin: 50% 50%;      /* centro */
    transition: transform .22s ease;
  }

  .primary-menu > li:hover > a::before,
  .primary-menu > li:focus-within > a::before{
    transform: scaleX(1);
  }

  /* (opcional) marca activo/ancestro con la línea fija */
  .primary-menu > li.current-menu-item > a::before,
  .primary-menu > li.current-menu-ancestor > a::before{
    transform: scaleX(1);
  }
}


/* === CTA Header (desktop) === */
@media (min-width:1025px){
  .header-cta{ justify-self:end; }
  .header-cta .menu{ margin:0; padding:0; list-style:none; }
  .header-cta .menu li{ list-style:none; }

  /* El botón (vía menú o fallback) */
  .header-cta .menu > li > a,
  .btn-login{
    display:inline-block;
    padding:10px 16px;
    background:#fff;
    color:#082a4a;
    font-weight:600;
    border-radius:12px;
    text-decoration:none;
    line-height:1;
    box-shadow:0 1px 0 rgba(255,255,255,.2) inset;
  }
  .header-cta .menu > li > a:hover,
  .btn-login:hover{
    background:#eef3ff;
    color:#082a4a;
  }
}

/* Ocúltalo en móvil (si no quieres verlo arriba) */
@media (max-width:1024px){
  .header-cta{ display:none; }
}

/* ===== CTA "Iniciar sesión" SOLO en móvil, dentro del off-canvas ===== */
@media (max-width:1024px){
  /* que exista y se vea como bloque, sin el borde del resto de items */
  .primary-nav .primary-menu > li.mobile-cta{
    display:block;
    border-bottom:0;
    margin-top: 12px;       /* separadito del resto */
  }

  /* botón blanco idéntico al de escritorio */
  .primary-nav .primary-menu > li.mobile-cta > a{
    display:block;
    margin: 0 16px 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background:#fff !important;
    color:#082a4a !important;       /* fuerza el texto azul */
    font-weight:600;
    text-align:center;
    text-decoration:none;
    line-height:1;
    box-shadow: 0 1px 0 rgba(255,255,255,.15) inset;
  }
  .primary-nav .primary-menu > li.mobile-cta > a:hover{
    background:#e9eef6 !important;
  }

  /* si quieres que quede pegado al fondo del drawer: */
  .primary-nav .primary-menu{
    display:flex;
    flex-direction:column;
    min-height: calc(100vh - 70px); /* 70px ≈ alto del header; ajusta si hace falta */
  }
  .primary-nav .primary-menu > li.mobile-cta{
    margin-top: 50%; /* empuja el CTA a la mitad del espacio debajo de las opciones del menu mobile */
  }
}

/* Ocúltalo en escritorio (ya tienes el botón blanco a la derecha) */
@media (min-width:1025px){
  .primary-menu > li.mobile-cta{ display:none; }
}