/* ═══════════════════════════════════════════════════════════════════════════
   NAVBAR COLAPSABLE + SCROLL PROGRESS
   Pieza portable. Depende de:
     · un root font-size fluido (bloque 0, abajo)
     · seis tokens de color (bloque 1)
   No depende de ningún framework CSS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0 · SISTEMA DE MEDIDAS ────────────────────────────────────────────────
   TODO en esta pieza está en rem. Si el sitio ya tiene su propio sistema
   fluido, borra este bloque y deja el suyo: lo único que importa es que
   1rem ≈ 10px en el ancho de diseño de cada breakpoint.
   Si el sitio usa 1rem = 16px, multiplica todos los valores por 0.625.      */
html{
  --fs-global: .672043vw;                 /* 10px / 1488px  · desktop */
  font-size: var(--fs-global);
}
@media only screen and (min-width:1488px){ html{ --fs-global: 10px } }
@media only screen and (max-width:991px){  html{ --fs-global: 1.199041vw } }  /* 10px / 834px  */
@media only screen and (max-width:767px){  html{ --fs-global: 2.544529vw } }  /* 10px / 393px  */


/* ── 1 · TOKENS QUE HAY QUE MAPEAR ────────────────────────────────────────
   Estos seis son el contrato. Apúntalos a los del sitio.                    */
/* Los colores salen de /estilo/tokens.css. Los nombres --nav-* se
   quedan porque los usa toda la hoja: esto es un puente al sistema, no
   un rediseño de la barra. */
:root{
  --nav-accent:      var(--tinta);            /* barra, anillo, CTA sólido   */
  --nav-accent-hover:#000000;
  --nav-on-accent:   var(--papel);            /* texto sobre el CTA sólido   */
  --nav-strong:      var(--tinta);            /* link activo, punto activo   */
  --nav-soft:        rgba(20,20,22,.48);      /* link inactivo               */
  --nav-disable:     var(--apagado);          /* punto inactivo en mobile    */
  --nav-border:      rgba(20,20,22,.14);      /* outline del CTA, anillo bg  */
  --nav-pill:        rgba(20,20,22,.055);     /* vidrio de la cápsula        */
  --nav-pill-mobile: rgba(255,255,255,.55);   /* cápsula flotante en mobile  */
  --nav-glass:       rgba(17,17,17,.035);     /* CTA fantasma, botón menú    */
  --nav-tick:        rgba(17,17,17,.22);      /* marcas de la regla          */

  /* Timing. La referencia usa `ease` en toda la cabecera; se respeta. */
  --nav-ease:  ease;
  --nav-dur:   .4s;    /* colapso de links, dots, cápsula, menú mobile */
  --nav-dur-p: .2s;    /* suavizado extra de la barra sobre el scroll  */

  --nav-container-max: 148.8rem;
  --nav-container-pad: 8rem;
  --nav-container-gap: 1.6rem;
}
@media only screen and (max-width:991px){ :root{ --nav-container-pad:3.2rem } }
@media only screen and (max-width:767px){ :root{ --nav-container-pad:1.6rem } }


/* ── 2 · CONTENEDOR FIJO ──────────────────────────────────────────────────
   OJO con el orden en el DOM: <prog-wrap> va ANTES de <header>.            */
.header-group{
  position:fixed; top:0; left:0;
  width:100%; z-index:99;
  pointer-events:none;
}
/* La pieza no asume el reset del sitio: se lo pone ella, acotado. */
.header-group *,
.header-group *::before,
.header-group *::after{ box-sizing:border-box }
.header-group a{ color:inherit; text-decoration:none; outline:0; cursor:pointer }
.header-group button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer }
.nav-container{
  width:100%;
  max-width:var(--nav-container-max);
  margin-inline:auto;
  padding-inline:var(--nav-container-pad);
}


/* ── 3 · BARRA DE PROGRESO (desktop) ──────────────────────────────────────
   El relleno es scaleX, no width: no dispara layout en cada frame.         */
prog-wrap{
  display:block;
  position:relative;
  height:1rem;
  background-image:repeating-linear-gradient(to right,
    var(--nav-tick), var(--nav-tick) 1px, transparent 1px, transparent calc(1px + .8rem));
}
.prog-inner{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  background-color:var(--nav-accent);
  transform-origin:0% 50%;
  transform:scaleX(0);
  transform-style:preserve-3d;
  transition:transform var(--nav-dur-p) linear;
  will-change:transform;
}


/* ── 4 · NAVBAR ───────────────────────────────────────────────────────────*/
.header{
  position:relative;
  width:100%;
  z-index:99;
  pointer-events:none;              /* solo la cápsula recibe clics */
}
header-inner{
  display:block;
  padding-block:2.6rem;
  transition:padding var(--nav-dur) var(--nav-ease);
}
header-inner.on-sticky{ padding-block:2rem }

.header-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(12.4rem,1fr) auto minmax(12.4rem,1fr);
  column-gap:var(--nav-container-gap);
  width:100%; max-width:100%;
  margin-inline:auto;
  padding:0;
  border-radius:99rem;
  background-color:rgba(0,0,0,0);
  -webkit-backdrop-filter:blur(0px);
          backdrop-filter:blur(0px);   /* 0px, no `none`: `none` no anima */
  pointer-events:auto;
  transition:
    max-width               var(--nav-dur) var(--nav-ease),
    padding                 var(--nav-dur) var(--nav-ease),
    background-color        var(--nav-dur) var(--nav-ease),
    -webkit-backdrop-filter var(--nav-dur) var(--nav-ease),
    backdrop-filter         var(--nav-dur) var(--nav-ease);
}
/* ✦ EL ESTADO COMPRIMIDO */
.header-grid.on-sticky{
  max-width:65.6rem;
  padding:.8rem;
  background-color:var(--nav-pill);
  -webkit-backdrop-filter:blur(27px);
          backdrop-filter:blur(27px);
}

.header-logo-wrap{ display:flex; align-items:center; justify-content:flex-start }
.header-logo{
  display:flex; align-items:center; flex:none;
  width:12.2rem;
  color:var(--nav-strong);
  transition:margin var(--nav-dur) var(--nav-ease),
             width  var(--nav-dur) var(--nav-ease),
             color  var(--nav-dur) var(--nav-ease);
}
.header-logo.on-sticky{ margin-left:1.2rem }
.header-logo svg{ width:100%; height:auto; display:block }


/* ── 5 · LINKS: EL COLAPSO A PUNTO ────────────────────────────────────────
   .header-link-inner  → la capa visible, absoluta
   .txt-holder         → clon invisible que RESERVA el ancho
   Al bajarle el max-width al clon hasta .6rem (el diámetro del punto),
   el item se contrae y los vecinos se deslizan. Eso cierra la cápsula.     */
.header-links-wrap{ display:flex; align-items:center; justify-content:center }
.header-links{
  display:flex; align-items:center; justify-content:center;
  column-gap:1.2rem;
  text-align:center;
  transition:column-gap var(--nav-dur) var(--nav-ease);
}
.header-links.on-sticky{ column-gap:0rem }

.header-link{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  flex:none;
  padding-inline:.8rem;
  color:var(--nav-soft);
  transition:color var(--nav-dur) var(--nav-ease);
}
.header-link:hover,
.header-link.active{ color:var(--nav-strong) }

.header-link-inner{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  width:100%;
  transition:opacity var(--nav-dur) var(--nav-ease);
}
.txt-holder{
  opacity:0;
  pointer-events:none;
  flex:none;
  max-width:var(--max-width, none);        /* lo escribe el JS */
  transition-property:max-width;
  transition-duration:var(--nav-dur);
  transition-timing-function:var(--nav-ease);
}
.txt-header-link{
  display:inline-block;
  white-space:nowrap;
  font-size:1.4rem;
  font-weight:400;
  line-height:1em;
  letter-spacing:-.005em;
  transition:transform var(--nav-dur) var(--nav-ease);
}
.header-link-dot{
  position:absolute;
  width:.6rem; height:.6rem;
  border-radius:50%;
  background-color:var(--nav-strong);
  opacity:0;
  transform:scale(.5);
  pointer-events:none;
  transition:transform var(--nav-dur) var(--nav-ease),
             opacity   var(--nav-dur) var(--nav-ease),
             background-color var(--nav-dur) var(--nav-ease);
}

@media only screen and (min-width:992px){
  /* sticky + no-activo → el texto se aplasta (rotateX sin perspectiva),
     la capa se desvanece, el ancho colapsa y el punto entra con scale */
  .header-link.on-sticky:not(.active) .txt-holder{ max-width:.6rem }
  .header-link.on-sticky:not(.active) .header-link-inner{ opacity:0 }
  .header-link.on-sticky:not(.active) .txt-header-link:not(.txt-holder){ transform:rotateX(90deg) }
  .header-link.on-sticky:not(.active) .header-link-dot{ opacity:1; transform:scale(1) }

  /* el CTA gana peso cuando la cápsula se comprime */
  .header-grid.on-sticky .btn{ background-color:var(--nav-accent); color:var(--nav-on-accent) }
  .header-grid.on-sticky .btn .btn-outline{ opacity:0 }
  .header-grid.on-sticky .btn:hover{ background-color:var(--nav-accent-hover) }
}


/* ── 6 · CTA con swap de texto ────────────────────────────────────────────*/
.header-cta-wrap{ display:flex; align-items:center; justify-content:flex-end }
.btn{
  position:relative; display:block; overflow:hidden;
  text-decoration:none;
  border-radius:99rem;
  background-color:var(--nav-glass);
  color:var(--nav-strong);
  -webkit-backdrop-filter:blur(1rem);
          backdrop-filter:blur(1rem);
  transition:background-color .3s var(--nav-ease), color .3s var(--nav-ease);
}
.btn-outline{
  position:absolute; inset:0; z-index:2;
  border:1px solid var(--nav-border);
  border-radius:inherit;
  pointer-events:none;
  transition:border-color .2s var(--nav-ease), opacity .3s var(--nav-ease);
}
.btn:hover .btn-outline{ border-color:var(--nav-soft) }
.btn-size{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding:1.6rem 2.4rem;
}
.btn-txt-wrap{ position:relative; overflow:hidden }
.btn-txt{
  font-size:1.4rem; font-weight:500; line-height:1em; text-align:center;
  transition:opacity var(--nav-dur) var(--nav-ease), transform var(--nav-dur) var(--nav-ease);
}
.btn-txt-clone{ position:absolute; top:100%; left:0; width:100%; opacity:0 }
@media (hover:hover){
  .btn:hover .btn-txt{ transform:translateY(-100%) }
  .btn:hover .btn-txt:not(.btn-txt-clone){ opacity:0 }
  .btn:hover .btn-txt-clone{ opacity:1 }
}

.header-bg{ display:none; pointer-events:none }
.header-menu-toggle{ display:none }
.ic-embed{ display:flex; align-items:center; justify-content:center }
.ic-embed svg{ width:100%; height:auto; display:block }


/* ── 7 · ≤991px · la pieza cambia de naturaleza ───────────────────────────
   La barra horizontal desaparece y el progreso se va al anillo del botón. */
@media only screen and (max-width:991px){

  prog-wrap{ display:none }

  .header-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    padding:.8rem;
    background-color:transparent;
    -webkit-backdrop-filter:none;
            backdrop-filter:none;      /* el vidrio se muda a .header-bg */
  }
  /* cápsula flotante SIEMPRE visible */
  .header-bg{
    display:block;
    position:absolute; inset:0; z-index:1;
    border-radius:99rem;
    background-color:var(--nav-pill-mobile);
    -webkit-backdrop-filter:blur(27px);
            backdrop-filter:blur(27px);
    box-shadow:0 .1rem 3rem rgba(0,0,0,.05);
  }

  .header-logo-wrap{ position:relative; z-index:2 }
  .header-logo,
  .header-logo.on-sticky{ width:9.1rem; margin-left:1.2rem }

  .header-cta-wrap{ position:relative; z-index:2; column-gap:.4rem }

  /* panel del menú */
  .header-links-wrap{
    position:absolute; top:100%; right:0; z-index:4;
    margin-top:.4rem; margin-right:.8rem;
    padding:2rem 3.2rem;
    border-radius:1.2rem;
    background-color:var(--nav-pill-mobile);
    -webkit-backdrop-filter:blur(0px);
            backdrop-filter:blur(0px);
    box-shadow:0 .8rem 4rem rgba(0,0,0,.07);
    opacity:0;
    transform:translateY(20%);
    pointer-events:none;
    transition:opacity   var(--nav-dur) var(--nav-ease),
               transform var(--nav-dur) var(--nav-ease),
               -webkit-backdrop-filter var(--nav-dur) var(--nav-ease),
               backdrop-filter         var(--nav-dur) var(--nav-ease);
  }
  .header-links-wrap.on-open{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
    -webkit-backdrop-filter:blur(10px);
            backdrop-filter:blur(10px);
  }

  .header-links,
  .header-links.on-sticky{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    text-align:left;
    column-gap:0;
  }
  .header-link{ justify-content:flex-start; padding-inline:0 }
  .header-link-inner{
    position:relative;
    justify-content:flex-start;
    width:auto;
    padding:1.2rem 0 1rem 2rem;
    opacity:1;
  }
  .txt-holder{ display:none }

  /* en mobile el punto SIEMPRE está: es viñeta, no indicador oculto */
  .header-link-dot{
    left:0; margin-left:-.3rem;
    opacity:1; transform:scale(1);
    background-color:var(--nav-disable);
    transition:background-color var(--nav-dur) var(--nav-ease);
  }
  .header-link.active .header-link-dot,
  .header-link:hover  .header-link-dot{ background-color:var(--nav-strong) }

  /* botón de menú con anillo de progreso */
  .header-menu-toggle{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    flex:none;
    width:4.2rem; height:4.2rem;
    border-radius:99rem;
    background-color:var(--nav-glass);
    border:0; padding:0; cursor:pointer;
  }
  .el-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
  .el-circle{ transform-origin:50% 50%; transform:rotate(-90deg) }  /* arranca a las 12 */
  .el-circle.el-bg{ color:var(--nav-border) }
  .el-circle.el-prog{ transition:stroke-dashoffset var(--nav-dur-p) linear }

  .ic-16{
    position:absolute;
    width:1.6rem; height:1.6rem;
    color:var(--nav-strong);
    transition:opacity var(--nav-dur) var(--nav-ease), transform var(--nav-dur) var(--nav-ease);
  }
  .ic-menu-close{ opacity:0 }
  .header-menu-toggle.on-open .ic-menu-open { opacity:0; transform:rotate(180deg) }
  .header-menu-toggle.on-open .ic-menu-close{ opacity:1; transform:rotate(180deg) }

  /* en mobile el CTA ya nace sólido */
  .header-btn-wrap .btn{ background-color:var(--nav-accent); color:var(--nav-on-accent) }
  .header-btn-wrap .btn .btn-outline{ opacity:0 }
}

@media only screen and (max-width:767px){
  header-inner,
  header-inner.on-sticky{ padding-block:1.6rem }
}

@media (prefers-reduced-motion:reduce){
  .header-group *,
  .header-group *::before,
  .header-group *::after{ transition-duration:.001ms !important }
}

/* ═══════════════════════════════════════════════════════════════════════
   9 · VARIANTE GENERAL  ·  .header-general
   ═══════════════════════════════════════════════════════════════════════
   La barra del home es una cápsula VIVA: mide sus anchos, sigue qué
   sección está a la vista, colapsa las etiquetas que no lo están y se
   comprime al hacer scroll. Toda esa maquinaria depende de que la página
   tenga las secciones que el nav nombra.

   En una página de contenido no las hay, así que la barra se quedaba a
   medio camino: ancha y transparente arriba, y abajo comprimida a cuatro
   puntos ciegos, porque ninguna etiqueta podía estar activa.

   Esta variante la deja quieta y explícita: la cápsula translúcida
   SIEMPRE puesta, a todo lo ancho menos un margen lateral, sin
   comprimirse y sin colapsar nada. Es la misma pieza, en reposo.        */

.header-general .header-grid,
.header-general .header-grid.on-sticky{
  max-width:none;
  width:calc(100% - 6.4rem);
  padding:.8rem .8rem .8rem 2.4rem;
  background-color:var(--nav-pill);
  -webkit-backdrop-filter:blur(27px);
          backdrop-filter:blur(27px);
}
/* El logo no necesita la sangría del estado comprimido: la cápsula trae
   padding propio y sumarlos lo despegaba del borde. */
.header-general .header-logo,
.header-general .header-logo.on-sticky{ margin-left:0 }

/* Las etiquetas no colapsan: aquí ninguna sección puede estar activa, y
   colapsarlas todas deja la barra en cuatro puntos sin significado. */
.header-general .header-link.on-sticky:not(.active) .txt-holder{ max-width:none }
.header-general .header-link.on-sticky:not(.active) .header-link-inner{ opacity:1 }
.header-general .header-link.on-sticky:not(.active) .txt-header-link:not(.txt-holder){
  transform:none }
.header-general .header-link.on-sticky:not(.active) .header-link-dot{
  opacity:0; transform:scale(0) }

/* Y el aire entre enlaces tampoco se cierra. En el home el gap se va a
   cero al compactarse porque las etiquetas colapsan y quedan puntos, que
   sí van juntos; aquí las etiquetas siguen enteras y con gap 0 se pegan
   unas con otras. */
.header-general .header-links,
.header-general .header-links.on-sticky{ column-gap:2.8rem }
@media only screen and (max-width:991px){
  .header-general .header-links,
  .header-general .header-links.on-sticky{ column-gap:2rem }
}

/* El alto tampoco cambia al hacer scroll: la barra nace en su estado
   final, así que animar el padding sólo produce un salto. */
.header-general header-inner,
.header-general header-inner.on-sticky{ padding-block:2rem }

@media only screen and (max-width:991px){
  .header-general .header-grid,
  .header-general .header-grid.on-sticky{ width:calc(100% - 4.8rem) }
}
@media only screen and (max-width:767px){
  .header-general .header-grid,
  .header-general .header-grid.on-sticky{
    width:calc(100% - 3.2rem); padding:.6rem .6rem .6rem 1.6rem }
  .header-general header-inner,
  .header-general header-inner.on-sticky{ padding-block:1.6rem }
}

/* La página actual. Se marca con aria-current y no con `.active` porque
   navbar.js reasigna esa clase en cada scroll según qué sección está a
   la vista: aquí no hay ninguna, así que la borraría en el primer frame.
   El atributo lo pone el servidor y el JS no lo toca. */
.header-general .header-link-inner[aria-current="page"]{ color:var(--nav-strong) }