/* ==========================================================================
   Header — tres zonas con el logo ópticamente centrado.
   Transparente sobre el hero, sólido al pasar el fold.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Barra superior de datos
   ------------------------------------------------------------------------- */

:root{ --barra-alto:39px; }

.zr-barra{
  background:var(--azul-3);
  color:rgba(241,245,250,.62);
  font-size:.78rem;
  position:relative;z-index:901;
}

/* Sobre el hero la barra se apoya en la foto, sin fondo propio */
.zr-barra.sobre-hero{
  position:absolute;top:0;left:0;right:0;
  background:transparent;
  border-bottom:1px solid rgba(241,245,250,.14);
}
.zr-barra .zr-wrap{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:10px;padding-bottom:10px;
}
/* Los enlaces llevan clase, así que `.zr a:not([class])` no los alcanza:
   sin esto tomarían el azul de enlace del navegador. */
.zr-barra a{color:inherit;}
.zr-barra-item{display:inline-flex;align-items:center;gap:8px;transition:color .22s;}
.zr-barra-item svg{width:13px;height:13px;color:var(--acento-claro);flex:0 0 auto;}
.zr-barra a.zr-barra-item:hover{color:var(--papel);}
.zr-barra-centro{letter-spacing:.04em;}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */

.zr-header{
  position:sticky;top:0;z-index:900;
  border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.zr-header .zr-wrap{
  position:relative;
  display:flex;align-items:center;gap:44px;
  padding-top:18px;padding-bottom:18px;
  transition:padding .35s ease;
}
/* Las acciones se van al extremo derecho; logo y nav quedan juntos a la izquierda */
.zr-header .zr-header-cta{margin-left:auto;}

/* Sobre el hero va absoluto bajo la barra: así el arte ocupa toda la altura
   y el header no le roba espacio. Al pasar el fold, app.js lo fija arriba. */
.zr-header:not(.solido){position:absolute;top:var(--barra-alto);left:0;right:0;}
.zr-header:not(.solido).pegado{
  position:fixed;top:0;
  animation:zrBajaHeader .4s cubic-bezier(.2,.8,.3,1);
}

@keyframes zrBajaHeader{
  from{transform:translateY(-100%);}
  to{transform:translateY(0);}
}
@media(prefers-reduced-motion:reduce){
  .zr-header:not(.solido).pegado{animation:none;}
}

.zr-header.pegado,
.zr-header.solido{
  background:rgba(241,245,250,.9);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--hair);
}
.zr-header.pegado .zr-wrap{padding-top:12px;padding-bottom:12px;}

/* -------------------------------------------------------------------------
   Logo
   ------------------------------------------------------------------------- */

.zr-logo{display:block;flex:0 0 auto;z-index:3;}
.zr-logo img{height:50px;width:auto;transition:height .35s ease,filter .35s ease;}
.zr-header.pegado .zr-logo img{height:40px;}

/* El logo original es tinta oscura: sobre el hero se invierte a papel */
.zr-header:not(.pegado):not(.solido) .zr-logo img{filter:brightness(0) invert(1);}

/* -------------------------------------------------------------------------
   Navegación
   ------------------------------------------------------------------------- */

.zr-nav{display:flex;align-items:center;gap:6px;z-index:3;}

.zr-nav > a{
  position:relative;
  padding:10px 16px;
  font-size:.88rem;font-weight:500;letter-spacing:.03em;
  color:var(--papel);
  overflow:hidden;
  transition:color .25s ease;
}
.zr-header.pegado .zr-nav > a,
.zr-header.solido .zr-nav > a{color:var(--tinta);}

/* Píldora de fondo que crece desde el centro */
.zr-nav > a::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(124,182,232,.16);
  border-radius:999px;
  transform:scale(.6);opacity:0;
  transition:transform .32s cubic-bezier(.2,.8,.3,1),opacity .32s ease;
}
.zr-header.pegado .zr-nav > a::before,
.zr-header.solido .zr-nav > a::before{background:rgba(44,111,181,.1);}

.zr-nav > a:hover::before,
.zr-nav > a.zr-active::before{transform:scale(1);opacity:1;}

.zr-nav > a.zr-active{color:var(--acento-claro);}
.zr-header.pegado .zr-nav > a.zr-active,
.zr-header.solido .zr-nav > a.zr-active{color:var(--acento-oscuro);}

/* El texto sube un pelo al pasar el cursor */
.zr-nav .txt{display:inline-block;transition:transform .32s cubic-bezier(.2,.8,.3,1);}
.zr-nav > a:hover .txt{transform:translateY(-1px);}

/* -------------------------------------------------------------------------
   Acciones
   ------------------------------------------------------------------------- */

.zr-header-cta{display:flex;align-items:center;gap:14px;z-index:3;}

.zr-btn-compacto{padding:14px 24px;font-size:.86rem;}

/* Sobre el hero el CTA va en contorno claro; al fijarse pasa a sólido */
.zr-header:not(.pegado):not(.solido) .zr-btn-compacto{
  background:transparent;color:var(--papel);border-color:rgba(241,245,250,.4);
}
.zr-header:not(.pegado):not(.solido) .zr-btn-compacto:hover{
  background:var(--papel);color:var(--azul);border-color:var(--papel);
}

/* Hamburguesa de dos líneas que se cruzan */
.zr-burger{
  display:none;position:relative;
  width:42px;height:42px;padding:0;
  background:none;border:0;cursor:pointer;
}
.zr-burger .linea{
  position:absolute;left:11px;right:11px;height:1.5px;
  background:var(--papel);
  transition:transform .34s cubic-bezier(.2,.8,.3,1),opacity .2s ease;
}
.zr-burger .linea:nth-child(1){top:17px;}
.zr-burger .linea:nth-child(2){top:24px;}

.zr-header.pegado .zr-burger .linea,
.zr-header.solido .zr-burger .linea{background:var(--tinta);}

.zr-burger[aria-expanded="true"] .linea{background:var(--papel);}
.zr-burger[aria-expanded="true"] .linea:nth-child(1){transform:translateY(3.5px) rotate(45deg);}
.zr-burger[aria-expanded="true"] .linea:nth-child(2){transform:translateY(-3.5px) rotate(-45deg);}

.zr-nav-close{display:none;}
.zr-nav-pie{display:none;}

@media(prefers-reduced-motion:reduce){
  .zr-header,.zr-header .zr-wrap,.zr-logo img,
  .zr-nav > a::before,.zr-nav .txt,.zr-burger .linea{transition:none;}
}

/* -------------------------------------------------------------------------
   Drawer móvil — panel azul a pantalla completa
   ------------------------------------------------------------------------- */

@media(max-width:1080px){

  .zr-nav{
    position:fixed;inset:0;
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:2px;
    background:var(--azul-2);
    padding:96px var(--gutter) 40px;
    z-index:950;

    /* visibility saca los enlaces del tab order mientras está cerrado;
       el delay deja terminar la animación de salida */
    visibility:hidden;opacity:0;
    transition:opacity .4s ease,visibility 0s linear .4s;
  }
  .zr-nav.open{
    visibility:visible;opacity:1;
    transition:opacity .4s ease,visibility 0s linear 0s;
  }

  .zr-nav > a,
  .zr-header.pegado .zr-nav > a,
  .zr-header.solido .zr-nav > a{
    color:var(--papel);
    font-family:'Instrument Serif',Georgia,serif;
    font-size:clamp(2.1rem,8.5vw,3rem);
    letter-spacing:-.02em;
    padding:14px 0;
    overflow:visible;
    /* Entran escalonados al abrir */
    opacity:0;transform:translateY(16px);
    transition:opacity .5s ease,transform .5s ease,color .25s ease;
  }
  .zr-nav > a::before{display:none;}

  /* Se repiten los tres selectores del estado base: si solo se escribiera
     `.zr-nav.open > a`, la variante con `.zr-header.solido` tendría más
     especificidad y los enlaces se quedarían invisibles al abrir el menú
     en las páginas interiores. */
  .zr-nav.open > a,
  .zr-header.pegado .zr-nav.open > a,
  .zr-header.solido .zr-nav.open > a{opacity:1;transform:none;}

  .zr-nav.open > a:nth-child(2){transition-delay:.08s;}
  .zr-nav.open > a:nth-child(3){transition-delay:.14s;}
  .zr-nav.open > a:nth-child(4){transition-delay:.20s;}
  .zr-nav.open > a:nth-child(5){transition-delay:.26s;}

  .zr-nav > a.zr-active,
  .zr-header.pegado .zr-nav > a.zr-active,
  .zr-header.solido .zr-nav > a.zr-active{color:var(--acento-claro);}

  .zr-nav-close{
    display:block;position:absolute;top:26px;right:var(--gutter);
    background:none;border:0;padding:8px;cursor:pointer;color:var(--papel);
  }
  .zr-nav-close svg{width:26px;height:26px;}

  .zr-nav-pie{
    display:block;width:100%;margin-top:42px;padding-top:32px;
    border-top:1px solid var(--hair-oscuro);
    opacity:0;transform:translateY(16px);
    transition:opacity .5s ease .32s,transform .5s ease .32s;
  }
  .zr-nav.open .zr-nav-pie{opacity:1;transform:none;}
  .zr-nav-pie .zr-btn{width:100%;}
  .zr-nav-datos{
    display:flex;flex-direction:column;gap:10px;margin-top:24px;
    font-size:.95rem;color:rgba(241,245,250,.7);
  }
  .zr-nav-datos a:hover{color:var(--papel);}

  .zr-burger{display:block;}
  .zr-header-cta .zr-btn-compacto{display:none;}

  /* El drawer cubre todo: no hace falta scrim */
  .zr-scrim{display:none;}
}

@media(prefers-reduced-motion:reduce){
  .zr-nav,.zr-nav > a,.zr-nav-pie{transition:none;}
}

@media(max-width:820px){
  .zr-barra-centro{display:none;}
}

@media(max-width:600px){
  .zr-logo img{height:38px;}
  .zr-header.pegado .zr-logo img{height:34px;}
  .zr-header .zr-wrap{padding-top:14px;padding-bottom:14px;}
  .zr-barra-horario{display:none;}
  .zr-barra .zr-wrap{justify-content:center;}
}