/* =========================
   Nav global Cassará · nav.css
   Fija, blanca, seria y 100% responsive
   ========================= */

:root{
  --header-h: 80px;
  --ink:#0b1220;
  --muted:#667085;
  --line:#e7ecf5;
  --blue-700:#2f5dcc;

  /* Nuevo: tipografía y tamaño único */
  --nav-font: "Inter","Segoe UI",Roboto,system-ui,-apple-system,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  --nav-size: 15px;              /* tamaño de TODO el texto del nav */
  --radius: 12px;
}

/* ===== Layout base ===== */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;       /* ← asegura ancho total */
  width: 100%;    /* ← redundante pero seguro */
  height: var(--header-h);
  z-index: 1000;
  background: #fff !important;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(17,24,39,.04);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}



/* Exclusivo container para el nav */
.site-header .container.nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px 20px;
}

.site-header .container.nav{
  height:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding-inline:16px;
  font-family:var(--nav-font);
  font-size:var(--nav-size);
  color:var(--ink);
}

.brand{align-items:center; gap:10px; min-width:120px; }
.brand img{ height:60px; width:auto; display:block; }

/* Toggle móvil */
.nav-toggle{
  display:none; border:0; background:transparent;
  width:44px; height:44px; padding:8px; border-radius:10px; cursor:pointer;
}
.nav-toggle .bar{ display:block; height:2px; margin:6px 0; background:#111; border-radius:2px; }

/* Lista principal */
.nav-list{ height:100%; }
.nav-list > ul{
  display:flex; align-items:center; gap:8px; height:100%;
  list-style:none; margin:0; padding:0;
}

/* Enlaces principales: tamaño y estilo unificado */
.nav-link{
  display:inline-flex; align-items:center; gap:8px;
  height:var(--header-h); padding:0 14px;
  color:var(--ink); text-decoration:none;
  font-weight:600; line-height:1; position:relative;
  font-size:var(--nav-size); letter-spacing:.2px;
  transition: color .15s ease;
  outline: none;
}

/* Hover/Focus: línea azul animada inferior */
.nav-link::after{
  content:""; position:absolute; left:12px; right:12px; bottom:14px;
  height:3px; background:linear-gradient(90deg, var(--blue-700), #4d78ff);
  border-radius:3px;
  transform: scaleX(0); transform-origin:center;
  transition: transform .18s ease;
}
.nav-link:hover,
.nav-link:focus-visible{ color:#0a2b7a; }
.nav-link:hover::after,
.nav-link:focus-visible::after{ transform: scaleX(1); }

/* Indicador activo (siempre visible) */
.nav-link.active{ color:#0a2b7a; }
.nav-link.active::after{
  transform:none;
  background:var(--blue-700);
}

/* Focus accesible sin romper diseño */
.nav-link:focus-visible{
  box-shadow: 0 0 0 2px rgba(47,93,204,.15) inset;
  border-radius:8px;
}








/* Hover/Focus: línea azul animada inferior */
#nav-link::after{
  content:""; position:absolute; left:12px; right:12px; bottom:14px;
  height:3px; background:linear-gradient(90deg, var(--blue-700), #4d78ff);
  border-radius:3px;
  transform: scaleX(0); transform-origin:center;
  transition: transform .18s ease;
}
#nav-link:hover,
#nav-link:focus-visible{ color:#0a2b7a; }
#nav-link:hover::after,
#nav-link:focus-visible::after{ transform: scaleX(1); }

/* Indicador activo (siempre visible) */
#nav-link.active{ color:#0a2b7a; }
#nav-link.active::after{
  transform:none;
  background:var(--blue-700);
}

/* Focus accesible sin romper diseño */
#nav-link:focus-visible{
  box-shadow: 0 0 0 2px rgba(47,93,204,.15) inset;
  border-radius:5px;
}







/* ===== Submenús (desktop) ===== */
.has-submenu{ position:relative; }
.has-submenu > .submenu-toggle{
  height:var(--header-h); padding:0 14px; border:0; background:transparent;
  color:var(--ink); font-weight:600; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--nav-font); font-size:var(--nav-size); letter-spacing:.2px;
  position:relative; outline: none;
  transition: color .15s ease;
}
.has-submenu > .submenu-toggle::after{
  /* línea animada como los links */
  content:"";
  position:absolute;
  left:12px; right:12px;
  bottom:14px;
  height:3px;
  background:linear-gradient(90deg, var(--blue-700), #4d78ff);
  transform: scaleX(0); transform-origin:center;
  transition: transform .18s ease;
}
.has-submenu > .submenu-toggle:hover,
.has-submenu > .submenu-toggle:focus-visible{ color:#0a2b7a; }
.has-submenu > .submenu-toggle:hover::after,
.has-submenu > .submenu-toggle:focus-visible::after{ transform: scaleX(1); }

.has-submenu .chev{ transition:transform .2s ease; }

/* Dropdown box (desktop) */
.submenu{
  position:absolute; top:100%; left:0; min-width:280px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(17,24,39,.1);
  padding:10px; display:none;
}
.submenu a{
  display:block; padding:10px 12px; border-radius:8px;
  color:#111; text-decoration:none; font-weight:600;   /* mismo peso y tamaño */
  font-size:var(--nav-size); line-height:1.35;
}
.submenu a small{
  display:block; color:var(--muted); font-weight:500; font-size:12px; line-height:1.2;
}
.submenu a:hover{ background:#eff3f8; }

/* Mostrar en desktop por hover/focus */
@media (min-width: 981px){
  .has-submenu:hover > .submenu,
  .has-submenu:focus-within > .submenu{ display:block !important; max-height:none !important; }
  .has-submenu:hover > .submenu-toggle .chev{ transform:rotate(180deg); }
  .submenu.open { display:none !important; max-height:none !important; } /* NUNCA mostrar .open en desktop */
}

/* ===== Responsive (móvil/tablet) ===== */
@media (max-width: 980px){
  .nav-toggle{ display:block; }

  /* Panel deslizante */
  .nav-list{
    position:fixed; top:var(--header-h); right:0; bottom:0;
    width:90vw; max-width:400px; background:#fff; border-left:1px solid var(--line);
    transform:translateX(100%); transition:transform .25s ease;
    overflow:auto; -webkit-overflow-scrolling:touch;
    box-shadow: -8px 0 24px rgba(17,24,39,.08);
  }
  .nav-list.open{ transform:translateX(0); }

  .nav-list > ul{ flex-direction:column; align-items:stretch; padding:10px; gap:4px; }
  .nav-link, .has-submenu > .submenu-toggle{
    height:auto; padding:14px 12px; border-radius:10px;
    font-size:var(--nav-size); line-height:1.2;
    width: 100%; /* ocupa todo el ancho del panel */
  }

  /* Quitar línea animada en móvil (no hace falta hover) */
  .nav-link::after,
  .has-submenu > .submenu-toggle::after{ display:none; }

  /* Feedback táctil */
  .nav-link:active,
  .has-submenu > .submenu-toggle:active{ background:#f7f9fc; }

  /* Submenú como acordeón solo en móvil */
  .submenu{
    position:static; display:none; border:0; box-shadow:none;
    padding:0 0 8px; max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .submenu.open { display:block; max-height:800px; margin-bottom: 0px; }
  .has-submenu .submenu-toggle{ justify-content:space-between; width:100%; }
  .has-submenu .submenu-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }
  .submenu a{ padding:10px 12px 10px 16px; }
}

/* ===== Botón especial "Contacto" ===== */
.nav-contact {
  border: 1px solid var(--blue-700);
  border-radius: 50px;
  padding: 8px 18px;
  height: auto;
  line-height: 1.2;
  background: transparent;
  color: var(--blue-700);
  transition: all 0.25s ease;
  margin-left: 14px; /* ← separación del resto del menú */
}

.nav-contact::after {
  display: none !important; /* sin línea animada debajo */
}

.nav-contact:hover,
.nav-contact:focus-visible {
  background: var(--blue-700);
  color: #fff;
  box-shadow: 0 4px 12px rgba(47, 93, 204, 0.3);
  transform: translateY(-1px);
}

.nav-contact:active {
  transform: translateY(0);
}

/* ===== Utilidades ===== */
body{ padding-top:var(--header-h); }
/* ===== Anti-parpadeo: fade-in SOLO en letras/logo ===== */
.site-header {
  background: #fff !important;  /* fondo siempre estable */
}

/* 0) Caja consistente para que el padding NO sume ancho extra */
*, *::before, *::after { box-sizing: border-box; }

/* 1) Fuerza mismo ancho para todos los toggles PERO sin desbordar */
.has-submenu > .submenu-toggle{
  width: 100%;
  padding-right: 40px !important; /* espacio para la flecha */
  position: relative;
}

/* 2) Flecha en la misma columna para todos */
.has-submenu .chev{
  position: absolute;
  top: 50%;
  right: 14px;               /* misma x para todos */
  transform: translateY(-50%);
  width: 14px;
  text-align: center;
  pointer-events: none;
}

/* 3) Panel móvil: nunca exceder el viewport ni sumar ancho fantasma */
@media (max-width: 980px){
  .nav-list{
    width: clamp(280px, 90vw, 400px);  /* seguro y sin overflow */
    overflow-y: auto;
    overflow-x: hidden;                /* bloquea scroll horizontal del panel */
    contain: layout paint;
  }

  /* La lista interna ocupa el ancho del panel sin “sumar” padding externo */
  .nav-list > ul{
    width: 100%;
    margin: 0;
  }

  /* Evita que el botón “Contacto” empuje el ancho en móvil */
  .nav-contact{ margin-left: 0; width: 100%; }

  /* Los enlaces del submenú no rompen línea ni empujan el panel */
  .submenu a{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* 4) Seguridad global: la página no debe tener scroll horizontal */
html, body{ overflow-x: hidden; }

nav, .nav, .navbar, header nav {
  font-family: var(--nav-font) !important;
  font-size: var(--nav-size);
}
:root{
  /* fuente y tamaño SOLO nav */
  --nav-font: "Inter","Segoe UI",Roboto,system-ui,-apple-system,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  --nav-size: 15px;
}

/* Fuerza tipografía en todo el nav (y sus hijos) */
.forced-nav,
.forced-nav * {
  font-family: var(--nav-font) !important;
  font-size: var(--nav-size);
  font-weight: 500; /* tono medio, sobrio */
  text-decoration: none;
}

/* Estados del nav */
.forced-nav a { text-decoration: none; }
.forced-nav a:hover { text-decoration: none; opacity:.92; }
.forced-nav a.active { font-weight: 600; }

/* Submenú mantiene la misma fuente y elimina subrayado */
.forced-nav .submenu a { text-decoration: none; font-weight: 500; }
.forced-nav .submenu a:hover { text-decoration: none; opacity:.95; }

/* Opcional: botones/links especiales en nav */
.forced-nav .nav-contact {
  font-weight: 600;
}