/* =============================================================
   /proyectos/ — página madre de la línea "Proyectos"
   Reutiliza tokens y utilidades globales de styles.css (kicker,
   section-title, btn, container, reveal) y los patrones svc-* de
   service.css (hero, sección, nota, cta-final). Aquí solo lo
   exclusivo de esta página: las tres entradas editoriales grandes.
   ============================================================= */

.proj-entries { padding-block: clamp(1.5rem, 4vw, 2.5rem); }

.proj-entry {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--line);
}
.proj-entry:last-child { border-bottom: 1px solid var(--line); }

@media (min-width: 900px) {
  .proj-entry { grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 6vw, 4.5rem); }
  .proj-entry-reverse { grid-template-columns: .95fr 1.05fr; }
  .proj-entry-reverse .proj-entry-media { order: 2; }
  .proj-entry-reverse .proj-entry-body { order: 1; }
}

.proj-entry-media {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4/5; box-shadow: 0 30px 60px -24px rgba(11,11,12,.35);
}
.proj-entry-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.proj-entry:hover .proj-entry-media img { transform: scale(1.04); }

.proj-entry-sector {
  display: block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--proj-accent, var(--accent-dim)); margin-bottom: .8rem;
}
.proj-entry-title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.02; letter-spacing: -.01em; margin-bottom: .3rem;
}
.proj-entry-sub {
  font-family: var(--font-serif); font-style: italic; font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--mute); margin-bottom: 1.1rem;
}
.proj-entry-text { color: var(--ink-soft); max-width: 46ch; margin-bottom: 1.6rem; }
.proj-entry-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
  color: var(--ink); border-bottom: 1.5px solid var(--proj-accent, var(--ink));
  padding-bottom: .15rem; width: fit-content;
  transition: gap .3s var(--ease-out), color .3s, border-color .3s;
}
.proj-entry-link svg { stroke: currentColor; transition: transform .3s var(--ease-out); }
.proj-entry-link:hover { gap: .8rem; color: var(--proj-accent, var(--accent)); border-color: var(--proj-accent, var(--accent)); }

/* Un matiz muy contenido del acento de cada proyecto, solo en la
   etiqueta de sector y el enlace — el resto de la página sigue
   perteneciendo por completo a la identidad de Prestigio Local. */
.proj-entry-aura { --proj-accent: #7A2E35; }
.proj-entry-nova { --proj-accent: #3F5B52; }
.proj-entry-brasa { --proj-accent: #6B2530; }

@media (prefers-reduced-motion: reduce) {
  .proj-entry-media img, .proj-entry-link, .proj-entry-link svg { transition: none; }
}