/* =========================================================
   tallermaquetas.com — base CSS (prueba de concepto)
   Reset + navegación entre páginas + design tokens
   Cargado por todas las páginas del sitio.
   ========================================================= */

/* ---------- 1. Reset ---------- */

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

* {
  margin: 0;
}

html {
  color-scheme: light dark;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

::selection {
  background: var(--color-accent);
  color: var(--color-bg);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---------- 1b. Navegación entre páginas (View Transitions) ---------- */

/* Ignorada por navegadores sin soporte: la navegación sigue funcionando
   igual, solo sin el fundido cruzado. */
@view-transition {
  navigation: auto;
}

/* Evita que una imagen se estire si cambia de proporción entre la página
   de origen y la de destino (p. ej. una miniatura de galería frente a la
   imagen de cabecera de la página siguiente). */
::view-transition-old(*),
::view-transition-new(*) {
  object-fit: cover;
}

/* Sustituye el fundido cruzado por defecto por un slide: la página que se
   va se desliza hacia la izquierda mientras se desvanece, la que llega
   entra desde la derecha. "root" es el único grupo de transición mientras
   no se etiquete ningún elemento con view-transition-name (p. ej. si en el
   futuro el header pasa a transicionar como "elemento compartido" entre
   páginas); si eso llega a pasar, este bloque no le afectará.

   mix-blend-mode: normal anula el "plus-lighter" que aplica el navegador
   por defecto (pensado para el fundido cruzado): con animaciones propias
   ese modo de mezcla aclara los colores de forma rara, así que se vuelve
   al mezclado normal. */
::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  animation: slide-out-left var(--duration-slow) var(--ease-in-out) both;
}

::view-transition-new(root) {
  animation: slide-in-right var(--duration-slow) var(--ease-in-out) both;
}

@keyframes slide-out-left {
  to {
    transform: translateX(-3rem);
    opacity: 0;
  }
}

@keyframes slide-in-right {
  from {
    transform: translateX(3rem);
    opacity: 0;
  }
}

/* ---------- 2. Design tokens ---------- */

:root {
  /* Color — paleta clara (por defecto) */
  --color-bg: #fafaf9;
  --color-bg-subtle: #f0efed;
  --color-fg: #1a1a18;
  --color-fg-muted: #6b6862;
  --color-border: #ddd9d3;
  --color-accent: hsl(35.2 49% 48.4%);
  --color-accent-contrast: var(--color-bg);

  /* Tipografía */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --font-size-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --font-size-xl: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --font-size-display: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);

  --tracking-wide: 0.02em;
  --tracking-wider: 0.08em;

  /* Espaciado — escala fluida */
  --space-1: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  --space-2: clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem);
  --space-3: clamp(1.25rem, 1rem + 1vw, 2rem);
  --space-4: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --space-5: clamp(3rem, 2rem + 4vw, 6rem);
  --space-6: clamp(4rem, 2.5rem + 6vw, 9rem);

  /* Movimiento — tokens compartidos con futuras timelines GSAP */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 700ms;

  /* Varios */
  --radius: 0.375rem;
  --z-base: 0;
  --z-overlay: 10;
  --z-glass: 20;
  --z-toggle: 200;
  --size-toggle: 2.75rem;

  --content-width: 40rem;
}

/* Paleta oscura — automática por prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #171614;
    --color-bg-subtle: #201f1c;
    --color-fg: #f3f1ed;
    --color-fg-muted: #a39d92;
    --color-border: #35332e;
    --color-accent: hsl(36.2 59.4% 58.4%);
  }
}

/* Paleta oscura — override manual (data-theme lo pone theme-toggle.js).
   --color-accent-contrast no se repite aquí: se define una sola vez en
   :root como var(--color-bg), y --color-bg ya está sobrescrito arriba. */
:root[data-theme="dark"] {
  --color-bg: #171614;
  --color-bg-subtle: #201f1c;
  --color-fg: #f3f1ed;
  --color-fg-muted: #a39d92;
  --color-border: #35332e;
  --color-accent: hsl(36.2 59.4% 58.4%);
}

/* ---------- Selector de tema (claro/oscuro) ---------- */

/* Botón fijo, mismo sitio en todas las páginas — deliberadamente al margen
   de .links / .site-nav__links: la portada y las galerías tienen
   estructuras de navegación distintas, y un botón flotante evita tener que
   resolver dos comportamientos y, en el nav de las galerías (que ya hace
   flex-wrap con 6 enlaces), el riesgo de que en móvil salte a una segunda
   línea. */
.theme-toggle {
  position: fixed;
  top: var(--space-2);
  right: var(--space-2);
  z-index: var(--z-toggle);
  display: grid;
  place-items: center;
  width: var(--size-toggle);
  height: var(--size-toggle);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  color: var(--color-fg);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-standard),
    background var(--duration-slow) var(--ease-standard),
    transform var(--duration-fast) var(--ease-out);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--color-accent);
}

.theme-toggle:active {
  transform: scale(0.92);
}

.theme-toggle__icon {
  grid-area: 1 / 1;
  width: 1.15rem;
  height: 1.15rem;
  opacity: 0;
  transform: scale(0.5) rotate(-90deg);
  transition: opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

/* Por defecto (claro): sol visible, luna oculta. */
.theme-toggle__icon--sun {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Oscuro por preferencia del sistema, sin override manual a claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__icon--sun {
    opacity: 0;
    transform: scale(0.5) rotate(90deg);
  }

  :root:not([data-theme="light"]) .theme-toggle__icon--moon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Oscuro por override manual (botón pulsado). */
:root[data-theme="dark"] .theme-toggle__icon--sun {
  opacity: 0;
  transform: scale(0.5) rotate(90deg);
}

:root[data-theme="dark"] .theme-toggle__icon--moon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Logotipo: el archivo es blanco sobre transparente (pensado para tema
   oscuro). En claro se invierte a negro; el filtro no toca el canal alfa,
   así que la transparencia del PNG no se ve afectada. */
.logo img,
.site-nav__brand img {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo img,
  :root:not([data-theme="light"]) .site-nav__brand img {
    filter: none;
  }
}

:root[data-theme="dark"] .logo img,
:root[data-theme="dark"] .site-nav__brand img {
  filter: none;
}

/* Base compartida por todas las páginas — colores/tipografía del tema. */
body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  transition: background var(--duration-slow) var(--ease-standard),
    color var(--duration-slow) var(--ease-standard);
}

/* ---------- Páginas interiores (nav clásica + flujo normal) ---------- */

/* Compartido por todas las páginas que NO son la portada (galerías,
   contacto...): nav superior con logo + enlaces, en vez del hero de la
   home. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2)
    calc(var(--space-3) + var(--size-toggle) + var(--space-2)) var(--space-2)
    var(--space-3);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 500;
}

.site-nav__brand img {
  width: 2rem;
  height: auto;
}

.site-nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.site-nav__links a {
  position: relative;
  padding-block: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  transition: color var(--duration-base) var(--ease-standard);
}

.site-nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-base) var(--ease-out);
}

.site-nav__links a:hover,
.site-nav__links a:focus-visible,
.site-nav__links a[aria-current="page"] {
  color: var(--color-fg);
}

.site-nav__links a:hover::after,
.site-nav__links a:focus-visible::after,
.site-nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Páginas interiores: flujo normal de documento, sin centrar (a diferencia
   del hero de la portada). */
body.site-page {
  display: block;
}

.site-page main {
  max-width: 90rem;
  margin-inline: auto;
  padding: var(--space-4) var(--space-3);
}

.site-page h1 {
  font-size: var(--font-size-display);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-4);
}

@media (max-width: 26rem) {
  .site-nav {
    justify-content: center;
    text-align: center;
  }
}