/* ============================================================
   NAV — réplica del frame 1-0 de Paper (app.paper.design).
   Componente compartido `.pnav` (origen: rama case-post-format,
   sensa-web-monica). El markup lo inyecta assets/js/nav.js: las
   páginas solo incluyen <link> + <script> y, opcionalmente, un
   window.PNAV con overrides de enlaces antes del script.

   Todas las medidas viven en los tokens --pn-*: los breakpoints
   solo reescriben variables, nunca reglas sueltas.
   ============================================================ */
:root{
  --pn-bg:      #000000;
  --pn-fg:      #ffffff;
  --pn-dim:     0.6;              /* opacidad de los ítems en reposo */

  /* caja */
  --pn-pad-t:   40px;
  --pn-pad-r:   200px;            /* inset derecho del bloque de ítems */
  --pn-pad-b:   40px;
  --pn-pad-l:   40px;
  --pn-max:     1440px;

  /* lockup izquierdo */
  --pn-mark:    73px;             /* monograma circular */
  --pn-mark-gap:10px;             /* monograma → wordmark */
  --pn-word:    182px;            /* ancho del wordmark "sensa" */
  --pn-tag:     32px;             /* "strategy ⊕ craft" */
  --pn-tag-ls:  -0.96px;
  --pn-tag-lh:  0.88;
  --pn-tag-mt:  3px;

  /* menú */
  --pn-ico:     24px;
  --pn-label:   20px;
  --pn-gap:     40px;             /* entre ítems */
  --pn-gap-row: 0px;

  /* tarjeta — 96×116 girada 3° y escalada 1.06 da una envolvente de
     108×128: con bottom 32 sobre un nav de 153 sangra justo hasta el
     borde superior, que es como aparece en el frame de Paper. */
  --pn-card-w:  96px;
  --pn-card-h:  116px;
  --pn-card-r:  8px;
  --pn-card-x:  56px;
  --pn-card-y:  32px;
  --pn-card-rot:3deg;

  --pn-ease:    cubic-bezier(.22,.61,.36,1);
}

/* Variante clara (ventures): mismos tokens, tinta invertida. El lottie
   del monograma es de trazo blanco ("trim negative"), invisible sobre
   blanco: brightness(0) lo vuelve negro — mismo truco que usaba el nav
   antiguo en sus variantes claras (nav--tempo). */
.pnav--white{
  --pn-bg: #ffffff;
  --pn-fg: #0a0a0a;
}
.pnav--white .pnav__mark lottie-player{ filter: brightness(0); }

/* El nav anterior se conserva en el DOM (su JS y sus modos siguen ahí)
   pero no se pinta. Quitar esta regla lo devuelve tal cual estaba. */
.nav{ display:none !important; }

/* Igual que el nav anterior: al navegar dentro del sitio no se repite el
   fade de entrada. */
html.nav-instant .pnav{
  opacity: 1 !important;
  animation: none !important;
}

@keyframes pnavFadeIn{ to{ opacity:1; } }

/* Hereda el contrato de posicionamiento del nav anterior: barra fija al pie
   del viewport, por ENCIMA del blur progresivo — si no, el backdrop-filter
   de esa capa desenfoca el propio nav. */
.pnav{
  view-transition-name: site-nav;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  opacity: 0;
  animation: pnavFadeIn 2s ease 5s forwards;
  background: var(--pn-bg);
  color: var(--pn-fg);
  font-family:'Gelion', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.pnav *,
.pnav *::before,
.pnav *::after{ box-sizing: border-box; }

.pnav__inner{
  position: relative;
  max-width: var(--pn-max);
  margin: 0 auto;
  padding: var(--pn-pad-t) var(--pn-pad-r) var(--pn-pad-b) var(--pn-pad-l);
  display: flex;
  align-items: flex-end;          /* lockup y menú comparten línea base inferior */
  justify-content: space-between;
  gap: 24px;
}

/* ---------- lockup: monograma + sensa + strategy ⊕ craft ---------- */
.pnav__brand{
  display: flex;
  flex-direction: row;
  align-items: center;            /* la marca se centra contra el bloque de 2 líneas */
  gap: var(--pn-mark-gap);
  width: fit-content;
  flex: none;
}

.pnav__mark{
  flex: none;
  position: relative;             /* el lottie se superpone al SVG estático */
  line-height: 0;
  width: var(--pn-mark);
  height: var(--pn-mark);
  display: block;
  color: var(--pn-fg);            /* el trazo es currentColor: sin esto hereda el azul de <a> */
}
.pnav__mark svg,
.pnav__mark lottie-player{ width:100% !important; height:100% !important; display:block; }
/* El SVG pinta desde el primer frame; el lottie entra encima solo cuando
   dispara 'ready' (clase .is-lottie puesta por nav.js). Si lottie-player
   no carga, el SVG se queda — el monograma nunca falta. */
.pnav__mark lottie-player{ position:absolute; inset:0; opacity:0; }
.pnav__mark.is-lottie lottie-player{ opacity:1; }
.pnav__mark.is-lottie > svg{ opacity:0; }

.pnav__lockup{ display:flex; flex-direction:column; align-items:flex-start; gap:0; }

.pnav__word{ display:block; line-height:0; }
.pnav__word svg{ width: var(--pn-word); height:auto; display:block; }

.pnav__tagline{
  margin: var(--pn-tag-mt) 0 0;
  font-size: var(--pn-tag);
  font-weight: 300;
  line-height: var(--pn-tag-lh);
  letter-spacing: var(--pn-tag-ls);
  color: var(--pn-fg);
  opacity: .9;
  white-space: nowrap;
}

/* el ⊕ entre "strategy" y "craft" — botón, no glifo. Conserva la clase
   .nav__slogan-plus para que siga enganchado al handler del modal. */
.pnav .nav__slogan-plus{
  display: inline-flex; align-items:center; justify-content:center;
  font-size: inherit;                  /* si no, el <button> cae al 13px del UA */
  width:.62em; height:.62em;
  padding:0; margin:0 .06em 0 .2em; border:0;
  background:none; color:currentColor; cursor:pointer;
  opacity:.95; vertical-align:-.02em; flex:none;
  transition: opacity .2s ease, transform .2s ease;
}
.pnav .nav__slogan-plus svg{ width:100%; height:100%; display:block; transition: transform .35s var(--pn-ease); }
.pnav .nav__slogan-plus:hover{ opacity:1; transform:scale(1.08); }
.pnav .nav__slogan-plus.is-open svg{ transform: rotate(45deg); }

/* ---------- menú ---------- */
.pnav__items{
  list-style:none; margin:0; padding:0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  column-gap: var(--pn-gap);
  row-gap: var(--pn-gap-row);
}

.pnav__link{
  display:flex;
  flex-direction:column;
  align-items:flex-start;         /* icono alineado al borde izquierdo del label */
  gap:0;
  text-decoration:none;
  color: var(--pn-fg);
  opacity: var(--pn-dim);
  transition: opacity .2s ease;
}
.pnav__link svg{ width:var(--pn-ico); height:var(--pn-ico); display:block; }
.pnav__link svg path{ transition: stroke-width .2s ease; }

.pnav__label{
  display:inline-block;
  margin:0;
  font-size: var(--pn-label);
  font-weight:300;
  line-height:1.2;
  color: var(--pn-fg);
}

/* estados — el hover engorda con text-shadow, NO con font-weight, así que
   la caja no cambia de ancho y los ítems vecinos no se mueven. */
.pnav__link:hover,
.pnav__link:focus-visible{ opacity:1; }
.pnav__link:hover svg path,
.pnav__link:focus-visible svg path{ stroke-width:1.5; }
.pnav__link:hover .pnav__label,
.pnav__link:focus-visible .pnav__label{
  /* currentColor y no blanco fijo: la variante --white lo hereda gratis */
  text-shadow: .4px 0 0 currentColor, -.4px 0 0 currentColor;
}
.pnav__link:active{ opacity:.85; }
.pnav__link[aria-current="page"]{ opacity:1; }

.pnav__link:focus-visible,
.pnav__mark:focus-visible,
.pnav__card:focus-visible,
.pnav .nav__slogan-plus:focus-visible{
  outline:1px solid rgba(255,255,255,.9);
  outline-offset:4px;
  border-radius:2px;
}

/* ---------- tarjeta ---------- */
.pnav__card{
  position:absolute;
  right: var(--pn-card-x);
  bottom: var(--pn-card-y);
  width: var(--pn-card-w);
  height: var(--pn-card-h);
  border-radius: var(--pn-card-r);
  overflow:hidden;
  display:block;
  text-decoration:none;
  cursor:pointer;
  /* Difumina el borde exterior: la costura de antialiasing del rectángulo
     girado deja una línea fina sobre fondo oscuro. */
  mask: radial-gradient(farthest-corner at 50% 50%, #000 calc(100% - 7px), transparent 100%);
  -webkit-mask: radial-gradient(farthest-corner at 50% 50%, #000 calc(100% - 7px), transparent 100%);
  transform: rotate(var(--pn-card-rot)) scale(1.06) translateZ(0);
  transform-origin:center center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transition: transform 1s ease;
}
/* Placeholder gris del diseño de Paper: la tarjeta nunca se ve como un
   hueco mientras el vídeo carga (o si no llega a reproducirse). */
.pnav__card{ background:#dedede; }
.pnav__card video,
.pnav__card img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: grayscale(100%);
  transition: filter .3s ease;
}
.pnav__card:hover{ transform: rotate(0deg) scale(1.06) translateZ(0); }
.pnav__card:hover video,
.pnav__card:hover img{ filter: grayscale(0%); }

/* ============================================================
   TABLET LANDSCAPE — 1024px a 1199px
   El lockup no cambia; la tarjeta se acerca al borde.
   ============================================================ */
@media (max-width:1199px) and (min-width:1024px){
  :root{ --pn-card-x: 40px; }
}

/* ============================================================
   TABLET PORTRAIT — 768px a 1023px
   El menú se comprime (gap 40 → 28) y la tarjeta pega al borde.
   ============================================================ */
@media (max-width:1023px) and (min-width:768px){
  :root{
    --pn-pad-r:  125px;
    --pn-gap:    28px;
    --pn-card-w: 82px;
    --pn-card-h: 99px;
    --pn-card-x: 8px;
    --pn-card-y: 20px;
  }
}

/* ============================================================
   MOBILE — 320px a 767px
   La marca se reduce y comparte fila con el wordmark; el slogan
   cae a su propia fila, al ras del borde izquierdo de la marca.
   El menú pierde los iconos y pasa a 2×2 en orden POR COLUMNAS:
   col 1 = work / apps · col 2 = about / contact.
   ============================================================ */
@media (max-width:767px){
  :root{
    --pn-pad-t:  20px;
    --pn-pad-r:  88px;
    --pn-pad-b:  18px;
    --pn-pad-l:  18px;

    --pn-mark:    24px;
    --pn-mark-gap: 8px;
    --pn-word:    96px;
    --pn-tag:     20px;   /* medido: "strategy ⊕ craft" = 131px de ancho */
    --pn-tag-mt:  2px;

    --pn-label:  20px;
    --pn-gap:    22px;
    --pn-gap-row: 3px;

    --pn-card-w: 58px;
    --pn-card-h: 70px;
    --pn-card-x:  6px;
    --pn-card-y:  8px;
  }

  /* Grid explícito, no flex-wrap: con `flex-wrap` + `width: fit-content`
     el ancho se resuelve como max-content de UNA línea (marca + wordmark
     + slogan ≈ 287px), el lockup se hincha y empuja el menú fuera del
     viewport. El grid dimensiona por columnas reales → 132px. */
  .pnav__brand{
    display:grid;
    grid-template-columns:auto auto;
    justify-content:start;
    align-items:center;
    column-gap: var(--pn-mark-gap);
    row-gap:6px;
  }
  .pnav__lockup{ display:contents; }
  .pnav__mark   { grid-row:1; grid-column:1; }
  .pnav__word   { grid-row:1; grid-column:2; align-self:center; }
  .pnav__tagline{ grid-row:2; grid-column:1 / -1; text-align:left; }

  .pnav__items{
    display:grid;
    grid-auto-flow: column;
    grid-template-rows: auto auto;
    justify-content:end;
    justify-items:start;
  }
  .pnav__link svg{ display:none; }     /* móvil = solo texto */
}

@media (prefers-reduced-motion: reduce){
  .pnav__card, .pnav__card video, .pnav__card img,
  .pnav__link, .pnav .nav__slogan-plus, .pnav .nav__slogan-plus svg,
  .pnav__link svg path{ transition:none !important; }
  .pnav__card:hover{ transform: rotate(var(--pn-card-rot)) scale(1.06); }
}