/* ─────────────────────────────────────────────────────────────
   NAVBAR + MENÚ MÓVIL — compartido por TODAS las páginas.
   Fuente única: editar aquí cambia la navbar en toda la web.
   Colores en literales (#fff/#0a0a0a) para NO depender de que cada página
   defina las variables de marca; el efecto camaleón (mix-blend difference)
   necesita que el contenido sea blanco. Cargar DESPUÉS del <style> de la página.
   ───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   MODO OSCURO — se activa con html[data-theme="dark"] (lo pone el botón
   sol/luna). Voltea SOLO las superficies neutras (redefine los tokens
   --white/--black/--grey* que usan las páginas); los colores de marca
   (azul, amarillo, rosa, verde, oro) se mantienen. nav.css carga después
   del <style> de cada página, así que esta redefinición gana.
   ───────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  --white:      #101014;   /* fondos claros → superficie oscura */
  --black:      #f1efe9;   /* texto negro   → texto claro */
  --grey-light: #191920;   /* gris muy claro (fondos) → superficie oscura elevada */
  --bone:       #17171d;   /* landings */
  --line:       rgba(255,255,255,.14);
}
/* color-scheme para que los formularios/scrollbars nativos acompañen */
html[data-theme="dark"] { color-scheme: dark; }

/* El texto legal/copyright del footer (capa blanca) va en varias páginas con
   un negro translúcido fijo (incluido un style="" inline en el ©). En oscuro
   ese negro sobre superficie oscura desaparece: lo forzamos a un claro
   translúcido. Un !important en hoja gana al style inline sin !important, así
   que arreglamos TODAS las páginas sin tocar su markup. */
html[data-theme="dark"] .footer-legal-text,
html[data-theme="dark"] .footer-legal-link,
html[data-theme="dark"] .footer-small-text,
html[data-theme="dark"] .footer-small-link,
html[data-theme="dark"] .footer-layer._4 .footer-legal-text {
  color: color-mix(in srgb, var(--black) 48%, transparent) !important;
}
html[data-theme="dark"] .footer-legal-link:hover,
html[data-theme="dark"] .footer-small-link:hover { opacity: .6; }

/* ─── NAVBAR ─── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 99;
  padding: 1.5rem 2rem;
  /* como goma: fija arriba y el contenido (blanco) se invierte sobre
     cualquier fondo, así siempre se ve tanto en oscuro como en claro */
  mix-blend-mode: difference;
  /* fuerza una capa GPU propia: en iOS Safari, un elemento fixed con
     mix-blend-mode a veces "suelta" el fixed y se va con el scroll en
     páginas largas (fichas de proyecto). Esto lo estabiliza. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}
.navbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* en pantallas muy anchas (4K) el logo y los enlaces no se separan sin fin */
  max-width: 2560px;
  margin: 0 auto;
}
.navbar-logo-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem; font-weight: 700;
  color: #fff; letter-spacing: -.01em;
}
.navbar-logo-text em {
  font-family: 'Instrument Serif', serif;
  font-style: italic; font-weight: 400;
}
/* logo que gira en 3D con el scroll (estilo goma) — la perspectiva va en el
   enlace (padre) para que el giro tenga profundidad real */
.navbar-logo { display: inline-block; perspective: 700px; }
.navbar-logo-img {
  height: 2.2rem; width: auto;
  display: block; object-fit: contain;
  filter: brightness(0) invert(1); /* negro → blanco sobre fondo oscuro */
  transform-origin: 50% 50%;
  will-change: transform;
}
.navbar-links { display: flex; align-items: center; gap: 1rem; }
.navbar-logo { text-decoration: none; }
.navbar-link {
  font-family: 'Manrope', sans-serif;
  font-size: 1.35rem; font-weight: 400;
  color: #fff;
  padding: .25rem .5rem;
  text-decoration: none;
}
.navbar-link:hover { text-decoration: underline; }

/* ─── Botón modo claro/oscuro (solecito con carita ↔ luna) ─── */
.navbar-theme {
  background: none; border: 0; margin: 0;
  /* va el último (derecha del todo): sin padding derecho → el icono queda a ras
     del margen derecho del navbar; a la izquierda, hueco para separarlo de contacto */
  padding: .25rem 0 .25rem .5rem;
  cursor: pointer; color: #fff; line-height: 0;
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center;
  transition: transform .25s ease;
}
.navbar-theme:hover { transform: scale(1.08) rotate(-6deg); }
.navbar-theme svg {
  width: 2.3rem; height: 2.3rem; display: block; overflow: visible;
  transform: translateY(3px);   /* nudge óptico pequeño para centrar la carita con las letras */
}
.navbar-theme:hover .tt-rays { transform: rotate(40deg); }
/* grupos animados (sol, luna, rayos): giran/escalan sobre su propio centro */
.tt-sun, .tt-moon, .tt-rays {
  transform-box: fill-box; transform-origin: center;
  transition: opacity .35s ease, transform .5s cubic-bezier(.2, .9, .25, 1);
}
.tt-moon { opacity: 0; transform: rotate(-55deg) scale(.4); }
/* estado oscuro: por aria-pressed (ya funciona) o por html[data-theme=dark] (al cablear) */
[data-theme-toggle][aria-pressed="true"] .tt-sun,
html[data-theme="dark"] [data-theme-toggle] .tt-sun { opacity: 0; transform: rotate(55deg) scale(.4); }
[data-theme-toggle][aria-pressed="true"] .tt-moon,
html[data-theme="dark"] [data-theme-toggle] .tt-moon { opacity: 1; transform: rotate(0) scale(1); }

/* versión del menú móvil: solo el icono (sin texto), más grande */
.mobile-theme {
  margin-top: 1.6rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center;
  color: #0a0a0a; line-height: 0;
}
.mobile-theme svg { width: 3.4rem; height: 3.4rem; display: block; overflow: visible; }

/* ─── HAMBURGER + MENÚ MÓVIL ─── */
.hamburger {
  display: none;
  flex-direction: column; justify-content: center;
  gap: 6px;
  background: none; border: none;
  cursor: pointer; padding: 4px;
  z-index: 201;
  flex-shrink: 0;
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
  transform-origin: center;
}
/* con el menú amarillo abierto, la navbar deja de invertir para que la X salga negra limpia */
.hamburger.open { mix-blend-mode: normal; }
.hamburger.open span { background: #0a0a0a; }
.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu-close {
  position: absolute; top: 1.5rem; right: 2rem;
  background: none; border: none; cursor: pointer;
  padding: 4px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
}
.mobile-menu-close span {
  display: block; position: absolute;
  width: 22px; height: 2px;
  background: #0a0a0a; border-radius: 2px;
}
.mobile-menu-close span:nth-child(1) { transform: rotate(45deg); }
.mobile-menu-close span:nth-child(2) { transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0;
  background: #f5e642;
  z-index: 200;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end;
  padding: 3rem 2rem;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.mobile-menu.open { opacity: 1; pointer-events: all; }
.mobile-menu-links {
  display: flex; flex-direction: column;
  gap: 1rem;
}
.mobile-menu-link {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.8rem, 13vw, 5rem);
  font-weight: 700; line-height: 1;
  color: #0a0a0a;
  text-decoration: none;
}
.mobile-menu-link:hover { text-decoration: underline; }
.mobile-menu-footer {
  margin-top: 3rem;
  font-family: 'Manrope', sans-serif;
  font-size: .9rem; font-weight: 400;
  color: rgba(0,0,0,.45);
}

/* ─── MODO OSCURO: el menú hamburguesa pasa de amarillo a NEGRO con letras
   blancas (la X de cerrar/abrir y el toggle sol-luna también en blanco) ─── */
html[data-theme="dark"] .mobile-menu { background: #0a0a0a; }
html[data-theme="dark"] .mobile-menu-link { color: #ffffff; }
html[data-theme="dark"] .mobile-menu-footer { color: rgba(255,255,255,.5); }
html[data-theme="dark"] .mobile-menu-close span { background: #ffffff; }
html[data-theme="dark"] .hamburger.open span { background: #ffffff; }
html[data-theme="dark"] .mobile-theme { color: #ffffff; }

/* móvil: oculta los enlaces inline y muestra la hamburguesa */
@media (max-width: 768px) {
  .navbar-links { display: none; }
  .hamburger { display: flex; }
}

/* ─────────────────────────────────────────────────────────────
   TRANSICIONES DE VISTA entre páginas (View Transitions API entre
   documentos). Fundido suave al navegar entre secciones. Progresivo:
   los navegadores que no la soportan cargan la página con normalidad.
   Al estar en nav.css (que cargan TODAS las páginas), cubre toda la web.
   ───────────────────────────────────────────────────────────── */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .38s;
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

/* NOTA: el navbar NO lleva view-transition-name a propósito. Al combinar
   mix-blend-mode (el camaleón) con una capa propia de transición, el navbar
   se captura sin fondo contra el que invertir y PARPADEA. Sin nombre viaja
   dentro de la instantánea de la página, con su camaleón bien compuesto, y
   el fundido entre navbars (idénticos) queda limpio. */

/* ── CORTINA de color de marca (solo al ir a Proyectos/Nosotros desde el navbar) ──
   el contenido antiguo sube y se va, aparece la franja de color, y entra el nuevo. */
@keyframes vt-curtain-out { to   { transform: translateY(-100%); } }
@keyframes vt-curtain-in  { from { transform: translateY(100%);  } }

html:active-view-transition-type(curtain)::view-transition-old(root) {
  animation: vt-curtain-out .32s cubic-bezier(.7, 0, .3, 1) both;
}
html:active-view-transition-type(curtain)::view-transition-new(root) {
  animation: vt-curtain-in .32s cubic-bezier(.7, 0, .3, 1) .3s both;
}
/* color de la cortina según el destino */
html:active-view-transition-type(inicio)::view-transition-group(root)    { background-color: #f5e642; } /* amarillo (logo → inicio) */
html:active-view-transition-type(proyectos)::view-transition-group(root) { background-color: #203886; } /* azul */
html:active-view-transition-type(nosotros)::view-transition-group(root)  { background-color: #e84c9a; } /* rosa */
/* MODO OSCURO: la cortina usa los GRISES de la web (nada de color de marca) */
html[data-theme="dark"]:active-view-transition-type(inicio)::view-transition-group(root)    { background-color: #3a3a43; }
html[data-theme="dark"]:active-view-transition-type(proyectos)::view-transition-group(root) { background-color: #48484f; }
html[data-theme="dark"]:active-view-transition-type(nosotros)::view-transition-group(root)  { background-color: #2b2b31; }

/* respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .001s; }
  html:active-view-transition-type(curtain)::view-transition-old(root),
  html:active-view-transition-type(curtain)::view-transition-new(root) { animation-duration: .001s; animation-delay: 0s; }
}

/* ─────────────────────────────────────────────────────────────
   LOGO DEL FOOTER — imagen "peek" al pasar/pulsar cada letra.
   La coloca nav.js (posición fija, cerca de la letra, aleatoria).
   Pool de imágenes editable desde el CMS (admin/footer-images.php).
   ───────────────────────────────────────────────────────────── */
.footer-peek {
  position: fixed;
  z-index: 130;
  pointer-events: none;
  object-fit: cover;
  border-radius: 5px;
  opacity: 0;
  transform: translateZ(0) scale(.85) rotate(var(--r, 0deg));
  transition: opacity .16s ease, transform .3s cubic-bezier(.2, .9, .25, 1);
  will-change: transform, opacity;
  box-shadow: 0 12px 45px rgba(0, 0, 0, .28);
}
.footer-peek.show {
  opacity: 1;
  transform: translateZ(0) scale(1) rotate(var(--r, 0deg));
}
@media (prefers-reduced-motion: reduce) {
  .footer-peek { transition-duration: .001s; }
}