/**
 * REFS — Showcase de referencias de diseño
 * CSS reescrito con Design System Sergio Forés
 * Tokens canónicos, BEM, @layer, mobile-first
 */



/* ── Tokens ── */
:root {
  --font-primary: 'Futura', 'Avenir Next', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --text-large: clamp(2.618rem, calc(2.4rem + 1.09vw), 3.236rem);
  --text-medium: clamp(1.618rem, calc(1.5rem + 0.59vw), 1.927rem);
  --text-small: clamp(0.875rem, calc(0.85rem + 0.3vw), 1.05rem);

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-wide: 0.02em;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;

  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #d4d4d4;
  --color-gray-400: #a3a3a3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-800: #262626;
  --color-gray-900: #171717;

  --color-white: #FFFFFF;
  --color-black: #000000;
  --brand-cyan: #00FFFF;

  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-muted: var(--color-gray-500);
  --color-surface-primary: var(--color-white);
  --color-surface-secondary: var(--color-gray-50);

  --space-1: 0.309rem;
  --space-2: 0.5rem;
  --space-3: 0.618rem;
  --space-4: 1rem;
  --space-5: 1.309rem;
  --space-6: 1.618rem;
  --space-8: 2rem;
  --space-10: 2.618rem;
  --space-12: 3rem;
  --space-16: 4.236rem;

  --border-width-thin: 1px;
  --border-radius-base: 0.25rem;
  --border-radius-full: 9999px;

  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);

  --duration-fast: 0.15s;
  --duration-base: 0.2s;
  --duration-slow: 0.4s;
  --ease-out: ease-out;
  --ease-custom: cubic-bezier(0.4, 0, 0.2, 1);

  --header-h: 3.5rem;
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }

/* ── Base ── */
body {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-surface-primary);
  -webkit-font-smoothing: antialiased;
  padding-block-start: var(--header-h);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ── Layout ── */
.main { width: 100%; }

.o-grid-wall {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 40em) {
  .o-grid-wall { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
  .o-grid-wall { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 90em) {
  .o-grid-wall { grid-template-columns: repeat(4, 1fr); }
}

/* ── Components ── */

/* ── Header ── */
.c-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding-inline: var(--space-6);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-block-end: var(--border-width-thin) solid var(--color-gray-200);
}

.c-header__title {
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

@media (min-width: 64em) {
  .c-header { padding-inline: var(--space-8); }
}

/* ── Theme toggle ── */
.c-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: var(--border-width-thin) solid var(--color-gray-200);
  border-radius: var(--border-radius-full);
  background: transparent;
  color: var(--color-text-primary);
  transition: all var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}

.c-theme-toggle:hover {
  border-color: var(--color-gray-500);
}

.c-theme-toggle__icon--moon { display: none; }

[data-theme="dark"] .c-theme-toggle__icon--sun { display: none; }
[data-theme="dark"] .c-theme-toggle__icon--moon { display: block; }

[data-theme="dark"] .c-header {
  background: rgba(10, 10, 10, 0.95);
}

/* ── Dark theme ── */
[data-theme="dark"] {
  --color-gray-50: #171717;
  --color-gray-100: #1e1e1e;
  --color-gray-200: #2a2a2a;
  --color-gray-300: #3a3a3a;
  --color-gray-400: #555;
  --color-gray-500: #888;
  --color-gray-600: #aaa;
  --color-gray-800: #e5e5e5;
  --color-gray-900: #fafafa;
  --color-white: #0a0a0a;
  --color-black: #fafafa;
  --color-text-primary: #fafafa;
  --color-text-secondary: #aaa;
  --color-text-muted: #888;
  --color-surface-primary: #0a0a0a;
  --color-surface-secondary: #141414;
}

/* ── Nav filters ── */
.c-filters {
  display: none;
  gap: var(--space-2);
  align-items: center;
}

@media (min-width: 64em) {
  .c-filters { display: flex; }
}

.c-filters__btn {
  padding: var(--space-1) var(--space-3);
  border: var(--border-width-thin) solid var(--color-gray-200);
  border-radius: var(--border-radius-full);
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--letter-spacing-wide);
  transition: all var(--duration-fast) var(--ease-out);
}

.c-filters__btn:hover {
  border-color: var(--color-gray-800);
  color: var(--color-text-primary);
}

.c-filters__btn.active {
  background: var(--color-gray-900);
  border-color: var(--color-gray-900);
  color: var(--color-white);
}

/* ── Mobile menu toggle ── */
.c-menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
  z-index: 101;
}

.c-menu-toggle__line {
  width: 100%;
  height: 1.5px;
  background: var(--color-text-primary);
  transition: all var(--duration-base) var(--ease-custom);
  transform-origin: center;
}

.c-menu-toggle.active .c-menu-toggle__line:nth-child(1) { transform: rotate(45deg) translateY(5.5px); }
.c-menu-toggle.active .c-menu-toggle__line:nth-child(2) { opacity: 0; }
.c-menu-toggle.active .c-menu-toggle__line:nth-child(3) { transform: rotate(-45deg) translateY(-5.5px); }

@media (min-width: 64em) {
  .c-menu-toggle { display: none; }
}

/* ── Mobile menu overlay ── */
.c-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-base) var(--ease-out);
}

.c-mobile-overlay.active { opacity: 1; visibility: visible; }

/* ── Mobile nav panel ── */
.c-filters--mobile {
  position: fixed;
  inset-block-start: var(--header-h);
  inset-inline: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border-block-end: var(--border-width-thin) solid var(--color-gray-200);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-slow) var(--ease-custom);
}

.c-filters--mobile.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

@media (min-width: 64em) {
  .c-filters--mobile { display: none; }
}

/* ── Reference card ── */
.c-ref {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-primary);
  contain: layout style;
}

.c-ref__img-wrap {
  display: block;
  position: relative;
  overflow: hidden;
}

.c-ref__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform var(--duration-slow) var(--ease-custom);
}

.c-ref:hover .c-ref__img {
  transform: scale(1.03);
}

/* ── External link ── */
.c-ref__link {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--border-radius-full);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  color: var(--color-text-primary);
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  opacity: 0;
  transform: scale(0.8);
  transition: all var(--duration-base) var(--ease-custom);
}

.c-ref:hover .c-ref__link {
  opacity: 1;
  transform: scale(1);
}

.c-ref__link:hover {
  background: var(--color-gray-900);
  color: var(--color-white);
}

/* ── Hover overlay ── */
.c-ref__info {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 5;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 60%, transparent 100%);
  opacity: 0;
  transform: translateY(var(--space-3));
  transition: all var(--duration-slow) var(--ease-custom);
}

.c-ref:hover .c-ref__info {
  opacity: 1;
  transform: translateY(0);
}

.c-ref__title {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  margin-block-end: var(--space-1);
}

.c-ref__url {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.6);
  margin-block-end: var(--space-3);
}

.c-ref__desc {
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.8);
  line-height: var(--line-height-normal);
  margin-block-end: var(--space-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.c-ref__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.c-ref__tag {
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  border: var(--border-width-thin) solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius-base);
}

/* ── Favorite button ── */
.c-ref__fav {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--border-radius-full);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border: none;
  font-size: 0.875rem;
  opacity: 0;
  transform: scale(0.8);
  transition: all var(--duration-base) var(--ease-custom);
  cursor: pointer;
}

.c-ref:hover .c-ref__fav { opacity: 1; transform: scale(1); }
.c-ref__fav.active { opacity: 1; transform: scale(1); color: #ef4444; }

/* ── Mobile: show info always ── */
@media (max-width: 39.99em) {
  .c-ref__info {
    position: relative;
    opacity: 1;
    transform: none;
    background: var(--color-surface-primary);
    padding: var(--space-4);
  }

  .c-ref__title { color: var(--color-text-primary); }
  .c-ref__url { color: var(--color-text-muted); }
  .c-ref__desc { color: var(--color-text-secondary); }
  .c-ref__tag { color: var(--color-text-muted); border-color: var(--color-gray-200); }
  .c-ref__link { opacity: 1; transform: scale(1); }

  .c-ref__img { aspect-ratio: auto; }
}

/* ── Scroll to top ── */
.c-scroll-top {
  position: fixed;
  inset-block-end: var(--space-8);
  inset-inline-end: var(--space-8);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--space-4));
  transition: all var(--duration-slow) var(--ease-custom);
  color: var(--color-text-muted);
}

.c-scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.c-scroll-top__text {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.c-scroll-top__line {
  width: 1px;
  height: 2rem;
  background: currentColor;
}

.c-scroll-top__icon {
  font-size: var(--text-small);
  animation: bounce-up 2s var(--ease-custom) infinite;
}

.c-scroll-top:hover { color: var(--color-text-primary); }

/* ── Scroll indicator ── */
.c-scroll-hint {
  position: fixed;
  inset-block-end: var(--space-8);
  inset-inline-end: var(--space-8);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  pointer-events: none;
  color: var(--color-text-muted);
  transition: all var(--duration-slow) var(--ease-custom);
}

.c-scroll-hint.hidden { opacity: 0; visibility: hidden; transform: translateY(var(--space-4)); }

.c-scroll-hint__text {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.c-scroll-hint__line {
  width: 1px;
  height: 2rem;
  background: currentColor;
  position: relative;
  overflow: hidden;
}

.c-scroll-hint__line::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 50%;
  background: var(--color-text-primary);
  animation: line-scroll 2s var(--ease-custom) infinite;
}

.c-scroll-hint__arrow {
  font-size: var(--text-small);
  animation: bounce-down 2s var(--ease-custom) infinite;
}

/* ── Footer ── */
.c-footer {
  padding: var(--space-6);
  text-align: center;
  font-size: var(--text-small);
  color: var(--color-text-muted);
  border-block-start: var(--border-width-thin) solid var(--color-gray-200);
}

.c-footer a {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  text-decoration-line: underline;
  text-underline-offset: 0.15em;
}

/* ── Placeholder (no screenshot) ── */
.c-ref__placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-secondary);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

/* ── Skeleton loader ── */
.c-skeleton {
  background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-200) 50%, var(--color-gray-100) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.5s ease infinite;
}

/* ── Card filter animation ── */
.c-ref[data-hidden] {
  display: none;
}
}

/* ── Animations ── */
@keyframes skeleton {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}

@keyframes bounce-up {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}

@keyframes bounce-down {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}

@keyframes line-scroll {
0% { transform: translateY(-100%); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateY(200%); opacity: 0; }