/* ============================================================================
   nav.css -- cromo de navegacion global: tira de confianza, barra, desplegable,
   menu movil y pie. Se carga en TODA pagina desde layout_head(), justo despues
   de components.css, para poder ganarle en la cascada sin subir especificidad
   a mano. No toca app.css, components.css, motion.css ni el logo.
   ========================================================================== */

/* --strip-h, --header-h y --stack-h viven ahora en app.css, juntas. */

/* --------------------------------------------------------- bloque pegajoso
   La tira y la barra viajan juntas: si la tira se fuera sola, el menu movil
   (que se posiciona por `top`) tendria dos alturas distintas segun el scroll. */
.header-stack { position: sticky; top: 0; z-index: 90; }
.site-header  { position: relative; z-index: 1; }

/* ------------------------------------------------------- tira de confianza
   Las dos objeciones que deciden la compra de un coral vivo (cuando sale y
   que pasa si llega muerto) no gastan hueco de barra: viven aqui, siempre. */
.topstrip {
  height: var(--strip-h);
  /* El negro va DEBAJO del degradado a proposito: la tira es pegajosa y pasa
     por encima de fotos de coral. Sin base opaca, su texto quedaria leyendose
     sobre lo que haya debajo y el contraste dejaria de estar garantizado. */
  background:
    linear-gradient(90deg, rgba(34,232,212,.10), rgba(74,140,255,.10) 55%, rgba(255,46,126,.10)),
    var(--void);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  display: flex; align-items: center;
}
.topstrip .wrap { display: flex; align-items: center; justify-content: center; gap: .55em; min-width: 0; }
.topstrip .ts-ico { color: var(--cyan); flex: none; }
.topstrip .ts-dot { color: var(--ink-3); }
.topstrip a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(126,208,226,.35); }
.topstrip a:hover { color: var(--cyan); text-decoration-color: currentColor; }
.topstrip span, .topstrip a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ barra */
.nav { align-items: stretch; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link, .nav-trigger { display: inline-flex; align-items: center; gap: .3em; }
.nav-trigger .caret { transition: transform .25s var(--ease); opacity: .7; }
.nav-item.is-open .nav-trigger .caret { transform: rotate(180deg); opacity: 1; }

/* Foco visible de verdad: la barra vive sobre fondo negro y el contorno del
   navegador se pierde. */
.nav a:focus-visible,
.mobile-nav a:focus-visible,
.mobile-nav summary:focus-visible,
.topstrip a:focus-visible,
.footer-col a:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 3px; color: var(--ink);
}

/* ------------------------------------------------------------ desplegable
   Sin JS el panel abre con :hover y :focus-within, o sea que funciona con
   teclado aunque el script no cargue. Con JS (html.x0-js) manda la clase
   .is-open, para que Escape pueda cerrarlo de verdad y aria-expanded no mienta. */
.nav-panel {
  position: absolute; top: 100%; left: -1.1rem;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  box-shadow: 0 24px 60px rgba(2,4,8,.72);
  padding: 1rem 0 0;
  display: none;
}
/* Las tres columnas se declaran a mano: con `auto-fit` el panel perdia una
   columna en cuanto se estrechaba y "Por presupuesto" caia debajo de la lista
   de tipos, que es exactamente la jerarquia falsa que este trabajo venia a
   quitar. */
.nav-panel--wide { left: 50%; transform: translateX(-50%); width: min(640px, calc(100vw - 3rem)); }
.nav-panel--wide .nav-panel-in { grid-template-columns: repeat(3, 1fr); }

.nav-item:hover > .nav-panel,
.nav-item:focus-within > .nav-panel { display: block; }
html.x0-js .nav-item:hover > .nav-panel,
html.x0-js .nav-item:focus-within > .nav-panel { display: none; }
html.x0-js .nav-item.is-open > .nav-panel { display: block; }

.nav-panel-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .3rem 1.4rem; padding: 0 1.1rem 1rem; }
.nav-col-t {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 .5rem; padding-bottom: .45rem; border-bottom: 1px solid var(--line-soft);
}

/* Los enlaces del panel NO son enlaces de barra: hay que apagarles el subrayado
   en gradiente que components.css le pone a `.nav a`. */
.nav .nav-panel a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .42em .5em .42em .1em; margin-inline: -.1em;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink-2); white-space: normal; border-radius: 6px;
}
.nav .nav-panel a::after { content: none; }
.nav .nav-panel a:hover { color: var(--ink); background: var(--surface-2); }
.nav .nav-panel a .n {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3);
  flex: none; font-variant-numeric: tabular-nums;
}
.nav .nav-panel a:hover .n { color: var(--cyan); }

.nav .nav-panel-foot {
  border-top: 1px solid var(--line-soft);
  padding: .8em 1.1rem !important; margin: 0 !important;
  border-radius: 0 0 var(--r-md, 12px) var(--r-md, 12px);
  font-weight: 600 !important; color: var(--ink) !important;
}
.nav .nav-panel-foot:hover { background: var(--surface-2); color: var(--cyan) !important; }

/* -------------------------------------------------------------- menu movil
   Arranca justo debajo del bloque pegajoso completo, tira incluida. */
.mobile-nav { inset: var(--stack-h) 0 0; }
.mnav-top, .mnav-group > summary {
  display: block; padding: .95em 0; font-family: var(--font-display);
  font-size: var(--fs-xl); border-bottom: 1px solid var(--line-soft);
}
.mnav-group > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: .5em;
}
.mnav-group > summary::-webkit-details-marker { display: none; }
.mnav-group > summary::after {
  content: ''; width: 9px; height: 9px; margin-left: auto; flex: none;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ease);
}
.mnav-group[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.mnav-group > summary .n {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); font-weight: 400;
}
.mnav-sub { padding: .4rem 0 1rem; }
.mobile-nav .mnav-sub a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .6em 0 .6em 1rem; font-family: var(--font-body); font-size: var(--fs-base);
  color: var(--ink-2); border-bottom: 0;
}
.mobile-nav .mnav-sub a:hover { color: var(--cyan); }
.mnav-sub .n { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }
.mnav-sub-t {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); margin: 1.1rem 0 .3rem;
}
.mnav-trust { margin-top: var(--sp-6); }
.mobile-nav .mnav-trust a {
  display: block; padding: .55em 0; font-family: var(--font-body);
  font-size: var(--fs-base); color: var(--ink-2); border-bottom: 0;
}
.mobile-nav .mnav-trust a:hover { color: var(--cyan); }

/* El selector generico `.mobile-nav a` de components.css convertia el conmutador
   de idioma en dos bloques de 1.5rem dentro de una capsula redonda: aqui vuelve
   a ser lo que es, dos pastillas pequenas. */
.mobile-nav .lang-switch a {
  display: inline-block; padding: .42em 1em; border-bottom: 0;
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700;
}

/* --------------------------------------------------------------------- pie
   El mapa manda: la columna de marca respira y las cuatro de navegacion se
   reparten el resto en partes iguales. */
@media (min-width: 900px) {
  .footer-grid {
    grid-template-columns: minmax(230px, 1.5fr) repeat(4, minmax(120px, 1fr));
    gap: var(--sp-6) var(--sp-5);
  }
}
.footer-col h4 { color: var(--ink-2); }

/* --------------------------------------------------------------- migas
   Un solo vocabulario, un solo separador. */
.crumbs .crumb-sep { color: var(--ink-3); }   /* 5.19:1 sobre --void */
.crumbs [aria-current="page"] { color: var(--ink-2); }