/* assets/css/nav.css */
/* =================================================================
   NAV limpio, compacto y profesional (tipo Previanza)
   - Dropdown, CTA, burger + drawer móvil
   - Sin subrayados en enlaces
   - CTA con chevron en píldora (SVG) y animación
   - Subrayado activo (dash) alineado al INICIO del texto
   ================================================================= */

:root{
  --nav-h:64px;
  --accent:#feb000;

  /* look & feel de barra */
  --nav-bg:rgba(0,0,0,.82);
  --nav-bg-scrolled:rgba(0,0,0,.9);
  --stroke:#1f2a33;

  /* padding-left real del link (para alinear el dash al inicio del texto) */
  --menu-link-pl: 6px;

  /* Dash activo */
  --active-underline-left: var(--menu-link-pl); /* inicio exacto del texto */
  --active-underline-w: 3.1em;                  /* largo fijo (2.0–2.6em recomendado) */
  --active-underline-h: 3px;
  --active-underline-off: 10px;                 /* 0–2px: más pegado al texto */
}

/* Quitar subrayados (soporta .lp-nav o .nav) */
.lp-nav a, .lp-nav a:hover, .lp-nav a:focus,
.nav a,    .nav a:hover,    .nav a:focus{
  text-decoration:none !important;
}

/* -------- Barra fija -------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  background:var(--nav-bg);
  backdrop-filter:saturate(140%) blur(6px);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:background .15s ease, box-shadow .15s ease;
}
.nav.is-scrolled{
  background:var(--nav-bg-scrolled);
  box-shadow:0 12px 36px rgba(0,0,0,.35);
}

/* Contenedor interno */
.nav-inner{
  width:min(1440px,96%);
  margin-inline:auto;
  display:grid;
  grid-template-columns:auto 1fr auto; /* logo | menú | CTA/burger */
  align-items:center; column-gap:18px;
  min-height:var(--nav-h);
  padding:4px 0;
}
.brand img{ 
  height:46px; 
  width:auto; 
  display:block;
  margin-left: 10px; 

}

/* -------- Menú desktop -------- */
.menu{
  display:flex; align-items:center; gap:22px;
  margin:0; padding:0; justify-content:flex-end;
}
.menu>li{ list-style:none; position:relative; }
.menu>li>a{
  display:inline-block;
  padding:12px 6px;
  font-family:var(--ff-ui);
  font-weight:500;
  font-size:.9rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:#e7eef5; white-space:nowrap;
  transition:color .15s ease, opacity .15s ease;
}
.menu>li:hover>a{ color:#fff; }

/* -------- Dash activo (INICIO del texto, excluye CTA) -------- */
.menu > li > a:not(.menu-cta){ position:relative; }
.menu > li > a:not(.menu-cta)::before{
  content:"";
  position:absolute;
  left: calc(var(--active-underline-left) + 1px); /* 1px óptico a la derecha */
  bottom: var(--active-underline-off);            /* muy pegado al texto */
  width: var(--active-underline-w);
  height: var(--active-underline-h);
  border-radius:999px;
  background:linear-gradient(180deg,#ffd34a 0%, var(--accent) 100%);
  box-shadow:0 8px 18px rgba(254,176,0,.35);
  transform:scaleX(.78);                /* anima desde la izquierda */
  transform-origin:left center;
  opacity:0;
  transition:transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.menu > li > a[aria-current="page"]:not(.menu-cta)::before,
.menu > li.is-active > a:not(.menu-cta)::before{
  opacity:1;
  transform:scaleX(1);
}
@media (hover:hover){
  .menu > li:hover > a:not(.menu-cta)::before{
    opacity:1;
    transform:scaleX(1.05);
  }
}

.menu > li > a{ line-height: 1.9; } /* línea estable para el cálculo del ::before */

/* Quitar caret del dropdown y recuperar padding normal (desktop) */
.menu > li.has-dd > a{ padding-right:6px !important; }
.menu > li.has-dd > a::after{ content:none !important; }

/* -------- CTA base (rectangular, mantiene tu gradiente) -------- */
.menu-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:40px; padding:0 16px;
  border-radius:9px;
  background:linear-gradient(180deg,#ffc81a 0%, var(--accent) 100%);
  color:#111 !important;
  font-family:var(--ff-ui);
  font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  box-shadow:0 10px 24px rgba(254,176,0,.25), inset 0 -2px 0 rgba(0,0,0,.18);
  transition:filter .15s ease, transform .15s ease, box-shadow .15s ease;
  text-decoration:none !important;
}
.menu-cta:hover{ filter:brightness(1.06); transform:translateY(-1px); }

/* -------- DROP-IN: Chevron en píldora + foco visible -------- */
.menu-cta, .mm-cta{ display:inline-flex; align-items:center; gap:10px; padding-right:14px; }
.menu-cta::after, .mm-cta::after{
  content:"";
  inline-size:26px; block-size:26px; border-radius:999px;
  background:rgba(17,17,17,.12);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.18);
  background-repeat:no-repeat; background-position:center; background-size:14px 14px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23111" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>');
  transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.menu-cta:hover::after, .mm-cta:hover::after{
  transform:translateX(3px);
  background-color:rgba(17,17,17,.18);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.28), 0 4px 14px rgba(0,0,0,.22);
}
.menu-cta:active::after, .mm-cta:active::after{ transform:translateX(4px) scale(.96); }
.menu-cta:focus-visible, .mm-cta:focus-visible{ outline:2px solid #111; outline-offset:2px; }

/* -------- Dropdown centrado bajo el item -------- */
.dropdown{
  position:absolute; top:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(6px);
  background:#2f2f2f; border:1px solid #3a3f44; border-radius:6px;
  padding:14px;
  display:grid; grid-template-columns:repeat(2,minmax(220px,1fr)); gap:10px 14px; min-width:520px;
  box-shadow:0 18px 48px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transition:opacity .15s, transform .15s, visibility .15s;
  z-index:1010;
}
.menu>li:hover .dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dropdown a{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px;
  color:#fff; font-weight:600; background:transparent; transition:background .12s ease, transform .12s ease;
  text-decoration:none !important;
}
.dropdown a:hover{ background:rgba(255,255,255,.08); transform:translateY(-1px); }
.dropdown .ico{ width:32px; height:32px; display:grid; place-items:center; }

/* -------- Burger (desktop oculto) -------- */
.burger{
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:0 14px;
  border:1px solid var(--stroke); border-radius:10px;
  background:#333; color:#eaf2f8;
  font-weight:700; letter-spacing:.02em;
}
.burger .label{ display:inline; }
.burger .bars{ display:none; } /* mostramos la palabra “Menú” */

/* -------- Responsive -------- */
@media (max-width:980px){
  .menu, .menu-cta{ display:none; }
  .burger{
    margin-left:auto; justify-self:end;
    inline-size:110px; block-size:34px; padding:0 8px; border-radius:8px;
    display:inline-flex; align-items:center; justify-content:center; text-align:center;
  }
  .burger .label{ font-size:14px; line-height:1; }
}

/* Respeta usuarios con menos animación */
@media (prefers-reduced-motion:reduce){
  .menu-cta, .mm-cta,
  .menu-cta::after, .mm-cta::after,
  .menu > li > a::before,
  .dropdown,
  .mm-item.has-sub .mm-caret{
    transition:none !important;
  }
}

/* ==== Drawer móvil ================================================== */

/* Estados y visibilidad */
.mm[hidden]{ display:none !important; }
.mm{ position:fixed !important; inset:0 !important; z-index:1100 !important; pointer-events:none; }
.mm.active, .mm.open{ pointer-events:auto; }

/* Backdrop */
.mm-backdrop, #mmBackdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.65);
  opacity:0; transition:opacity .24s ease;
}
.mm.active .mm-backdrop,
.mm.active #mmBackdrop,
.mm.open   .mm-backdrop,
.mm.open   #mmBackdrop{ opacity:1; }

/* Panel deslizante */
.mm-panel{
  position:absolute; top:0; right:0; bottom:0; width:min(92vw,360px);
  background:#000; border-left:1px solid #1b1f24;
  transform:translateX(105%); transition:transform .24s ease;
  display:flex; flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
}
@supports (height:100svh){ .mm-panel{ height:100svh; } }
.mm.active .mm-panel, .mm.open .mm-panel{ transform:none; }

/* Header móvil */
.mm-head{
  position:sticky; top:0; z-index:2;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px;
  padding:16px 14px; background:#000;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.mm-head img{
  grid-column:1 / -1; justify-self:center;
  height:110px; width:auto; margin:6px 0;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
/* “X” */
#mmClose, .mm-close{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px; border-radius:10px;
  display:grid; place-items:center;
  background:#fff; color:#000; border:1px solid #1f2a33;
  font-size:20px; line-height:1; z-index:3;
}
#mmClose:focus-visible, .mm-close:focus-visible{ outline:2px solid #ffc81a; outline-offset:2px; }

/* Lista principal */
.mm-nav{
  background:#000; padding:8px 14px 14px;
  flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.mm-item{
  padding:12px 4px;
  font-size:16px; font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  position:relative; border:0; border-radius:0; background:transparent;
}
.mm-item::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:rgba(255,255,255,.12);
}
.mm-item:first-child::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:rgba(255,255,255,.12);
}

/* Submenú tipo tarjeta */
.mm-sub{
  background:#0d0d0d; border:1px solid #1a1a1a; border-radius:12px;
  padding:8px; margin:10px 0 14px; box-shadow:0 12px 32px rgba(0,0,0,.35);
}
.mm-sub[hidden]{ display:none !important; }
.mm-sub a{
  display:flex; align-items:center; gap:10px;
  color:#fff; padding:12px 12px; border-radius:8px; position:relative;
  text-decoration:none !important;
}
.mm-sub a + a::before{
  content:""; position:absolute; left:12px; right:12px; top:0; height:1px;
  background:rgba(255,255,255,.10);
}
.mm-sub a i{ width:18px; text-align:center; color:#fff; }

/* CTA móvil (hereda drop-in) */
.mm-cta{
  margin:16px 2px 12px;
  min-height:42px;
  border-radius:10px;
  font-weight:900; font-size:16px;
  background:linear-gradient(180deg,#FFC31A 0%, var(--accent) 100%);
  color:#111 !important;
  box-shadow:0 8px 22px rgba(254,176,0,.24), inset 0 -1px 0 rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none !important;
}

/* Footer móvil */
.mm-footer{
  margin-top:auto; background:#000;
  border-top:1px solid rgba(255,255,255,.12);
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
}
.mm-meta{ display:grid; gap:0; }
.mm-line{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:12px 0; color:#e3ebf5;
  border-top:1px solid rgba(255,255,255,.10);
  text-decoration:none;
}
.mm-line:first-child{ border-top:0; }
.mm-line i{ min-width:22px; text-align:center; font-size:16px; color:var(--accent); }

/* Redes */
.mm-social{ display:flex; justify-content:center; gap:14px; margin-top:12px; }
.mm-social a{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:999px; background:#0b0f12;
  border:1px solid rgba(255,255,255,.16); color:#eaf2f8;
  transition:transform .18s ease, border-color .18s ease, filter .18s ease, box-shadow .18s ease;
}
.mm-social a:hover{
  transform:translateY(-2px); border-color:rgba(255,255,255,.28);
  filter:brightness(1.06); box-shadow:0 10px 22px rgba(0,0,0,.45);
}

/* --- Visibilidad por breakpoint --- */
.burger{ display:none; }   /* desktop: oculto */
.menu{ display:flex; }     /* desktop: visible */
.menu-cta{ display:inline-flex; }

@media (max-width:980px){
  .burger{ display:inline-flex; }
  .menu, .menu-cta{ display:none; }
}

/* Nunca muestres el drawer en desktop aunque tenga .active/.open */
@media (min-width:981px){
  #mobileMenu{ display:none !important; }
}

/* Caret para items con dropdown (solo desktop) */
@media (min-width:981px){
  .menu > li.has-dd > a{
    position:relative; padding-right:22px; /* espacio para caret */
  }
  .menu > li.has-dd > a::after{
    content:""; position:absolute; right:4px; top:50%;
    width:0; height:0;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:6px solid currentColor;
    transform:translateY(-40%); opacity:.9;
    transition:transform .18s ease, opacity .18s ease;
  }
  .menu > li.has-dd:hover > a::after,
  .menu > li.has-dd:focus-within > a::after,
  .menu > li.has-dd > a[aria-expanded="true"]::after{
    transform:translateY(-50%) rotate(180deg);
    opacity:1;
  }
}

/* ===== Móvil: caret propio (píldora + chevron blanco) ===== */
@media (max-width:980px){
  .mm-item.has-sub{ gap:10px; }          /* espacio entre texto y caret */

  /* Oculta por completo el icono de FA del toggler */
  .mm-item.has-sub > i{ display:none !important; }

  /* Nuestro caret */
  .mm-item.has-sub .mm-caret{
    flex:0 0 26px;
    width:26px; height:26px; margin-left:12px;
    display:inline-block; border-radius:999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.22);
    background-repeat:no-repeat; background-position:center; background-size:14px 14px;
    /* chevron blanco puro (no depende de currentColor ni de FA) */
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
  }

  /* Efecto tipo CTA "Contáctanos" */
  .mm-item.has-sub:hover .mm-caret{
    transform: translateX(3px);
    background-color: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.22);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.28), 0 4px 14px rgba(0,0,0,.22);
  }

  /* Rotación al abrir */
  .mm-item.has-sub.open .mm-caret{ transform: rotate(180deg); }
  .mm-item.has-sub.open:hover .mm-caret{ transform: rotate(180deg) translateX(3px); }
}

/* === MÓVIL: SOLO EL BOTÓN MENÚ (ocultar CTA del header) === */
@media (max-width:980px){
  /* oculta el CTA completamente */
  #headerCta{ display:none !important; }

  /* layout de 3 columnas: logo | espacio | burger */
  .nav-inner{ grid-template-columns:auto 1fr auto; }

  /* visible solo el burger */
  .menu{ display:none !important; }
  .burger{ display:inline-flex !important; }
}

/* === Drawer móvil: CTA centrado y a todo el ancho === */
.mm-nav{ padding:8px 14px 14px; }  /* ya lo tienes, lo dejamos explícito */

.mm-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;                 /* ocupa todo el ancho del panel (con padding del contenedor) */
  margin:16px 0 14px;         /* sin margen lateral que lo “empuje” a la izquierda */
  min-height:44px;
  border-radius:10px;
  font-weight:900;
  font-size:16px;
  background:linear-gradient(180deg,#FFC31A 0%, var(--accent) 100%);
  color:#111 !important;
  box-shadow:0 8px 22px rgba(254,176,0,.24), inset 0 -1px 0 rgba(0,0,0,.18);
  text-decoration:none !important;
}

/* (opcional) si lo prefieres un poco más angosto pero centrado: */
/*
.mm-cta{
  width:92%;
  margin:16px auto 14px;   // centrado por márgenes
}
*/