/**
 * rp-main.css
 * Román Plazza Portfolio — Estilos principales
 *
 * Secciones:
 *  1.  Reset
 *  2.  Variables — Modo claro
 *  3.  Variables — Modo oscuro
 *  4.  Global
 *  5.  Header
 *  6.  Hero
 *  7.  Work — cabecera y filtros
 *  8.  Cards grid
 *  9.  Contacto
 * 10.  Footer
 * 11.  Reveal animations
 * 12.  Responsive
 * 13.  Menú móvil drawer
 * 14.  Preloader
 * 15.  Titulares — display condensada
 * 16.  Aparición secuencial (reveal escalonado, cortinas, titulares)
 * 17.  Escenario de imágenes en las fichas de proyecto
 * 18.  Cambio de tema — revelado circular
 * 19.  Ficha extendida — bloques HTML (vídeo, cronología, marca)
 * 20.  Índice de trabajos (home)
 */

/* ══════════════════════════════════════
   1. RESET
══════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  font-size: 16px;
}

/* ══════════════════════════════════════
   2. VARIABLES — MODO CLARO
══════════════════════════════════════ */
:root {
  /* Paleta base */
  --white: #f8f7f4;
  --offwhite: #efede8;
  --rule: #e2dfda;
  --muted: #9a9690;
  --mid: #6b6860;
  --dark: #2c2b28;
  --black: #141310;
  --accent: #c8a96e;

  /* Tokens semánticos */
  --bg: var(--white);
  --bg-alt: var(--offwhite);
  --bg-inv: var(--black);
  --text: var(--black);
  --text-muted: var(--mid);
  --border: var(--rule);
  --header-bg: rgba(248, 247, 244, 0.92);
  --card-overlay-from: rgba(0, 0, 0, 0.85);
  --card-overlay-mid: rgba(0, 0, 0, 0.5);

  /* Color con el que se destaca la segunda mitad de los titulares */
  --highlight: #db007c;

  /* Tipografías
       --display  titulares y títulos de ítem (caja alta)
       --sans     todo el contenido de lectura
       --mono     etiquetas, cifras y navegación
     La Cormorant Garamond se retiró al unificar: los titulares pasaron a
     Anton y los cuerpos a Instrument Sans, y no le quedaba ningún uso. */
  /* Etiquetas: Archivo en anchura expandida (112%). Sustituye a DM Mono:
     la monoespaciada en caja alta y espaciada se había vuelto un tópico.
     La variable conserva el nombre para no tocar sus ~60 usos. */
  --mono: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sans: "Instrument Sans", sans-serif;

  /* Layout */
  --gutter: clamp(1.5rem, 5vw, 4rem);
}

/* ══════════════════════════════════════
   3. VARIABLES — MODO OSCURO
══════════════════════════════════════ */
[data-theme="dark"] {
  --bg: #141310;
  --bg-alt: #1c1b18;
  --bg-inv: #f8f7f4;
  --text: #f0ede8;
  --text-muted: #6b6860;
  --border: rgba(255, 255, 255, 0.08);
  --header-bg: rgba(20, 19, 16, 0.94);
  --card-overlay-from: rgba(0, 0, 0, 0.92);
  --card-overlay-mid: rgba(0, 0, 0, 0.6);
  --highlight: #00bc9d;
}

[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}

[data-theme="dark"] .hero-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}
/* El logotipo del hero y del header heredan var(--text) / currentColor,
   así que el modo oscuro no necesita override propio. */

[data-theme="dark"] #work {
  background: var(--bg);
}
[data-theme="dark"] .work-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .work-title {
  color: var(--text);
}

[data-theme="dark"] .cards-grid {
  background: var(--bg);
}
[data-theme="dark"] .proj-card.light .card-inner {
  background: #1e1c18;
}
[data-theme="dark"] .proj-card.dark .card-inner {
  background: #0e0d0b;
}

[data-theme="dark"] #contact {
  background: var(--bg);
  border-top-color: var(--border);
}
[data-theme="dark"] .contact-title {
  color: var(--text);
}
[data-theme="dark"] .contact-email {
  color: rgba(240, 237, 232, 0.45);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .contact-email:hover {
  color: var(--text);
  border-bottom-color: rgba(240, 237, 232, 0.4);
}
[data-theme="dark"] .contact-bg-text {
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] footer {
  background: var(--bg-alt);
  border-top-color: var(--border);
}

[data-theme="dark"] .btn-theme::before {
  transform: rotate(180deg);
}
[data-theme="dark"] .btn-theme::after {
  content: "Claro";
}

/* ══════════════════════════════════════
   4. GLOBAL
══════════════════════════════════════ */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  cursor: crosshair;
  overflow-x: hidden;
  transition:
    background 0.4s,
    color 0.4s;
}

/* Grano de película */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 256px;
  opacity: 0.6;
  mix-blend-mode: multiply;
}

/* ══════════════════════════════════════
   5. HEADER
══════════════════════════════════════ */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem var(--gutter);
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transition:
    background 0.4s,
    border-color 0.4s;
}

.h-logo {
  /* Altura del logotipo en el header. Por debajo de ~20px el acento de la
     Á y los contrapunzones empiezan a perder definición: si se quiere más
     pequeño, conviene una versión del SVG con los trazos engrosados. */
  --logo-h: 31px;

  display: inline-flex;
  align-items: flex-start;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
  line-height: 1;
}

/* El logo se pinta como máscara sobre currentColor: un único SVG sirve
   para modo claro y oscuro, y el archivo es la única fuente de verdad. */
.h-logo-mark {
  display: block;
  height: var(--logo-h);
  /* 1557.64 / 576.766 */
  width: calc(var(--logo-h) * 2.7008);
  background-color: currentColor;
  -webkit-mask: url("/images/RomanPlazzaLogo.svg") no-repeat center / contain;
  mask: url("/images/RomanPlazzaLogo.svg") no-repeat center / contain;
  transition: background-color 0.4s;
}

.h-logo sup {
  font-style: normal;
  font-size: 0.52rem;
  font-family: var(--mono);
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-left: 0.4rem;
  transition: color 0.4s;
}

/* Texto solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

nav {
  display: flex;
  gap: 2rem;
  align-items: center;
}
nav a {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
nav a:hover,
nav a.active {
  color: var(--text);
}

.h-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Botón idioma */
.btn-lang {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  padding: 0.3rem 0.65rem;
  cursor: not-allowed;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  opacity: 0.45;
  position: relative;
  transition: all 0.2s;
}
.btn-lang::after {
  content: "Próximamente";
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--black);
  color: var(--white);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.btn-lang:hover::after {
  opacity: 1;
}
.btn-lang .lang-active {
  color: var(--text);
}

/* Toggle tema: píldora con un disco medio lleno (gira 180° al cambiar)
   y el nombre del modo al que se pasa. El texto va en el CSS porque el
   botón está vacío en el HTML de todas las páginas; su nombre accesible
   es el aria-label. */
.btn-theme {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  height: 30px;
  padding: 0 0.85rem 0 0.6rem;
  border: 1px solid var(--text);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.3s,
    color 0.3s,
    border-color 0.3s;
}
.btn-theme::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  box-shadow: inset 0 0 0 1.5px currentColor;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-theme::after {
  content: "Oscuro";
}
.btn-theme:hover {
  background: var(--text);
  color: var(--bg);
}
.btn-theme:hover::before {
  transform: rotate(-35deg);
}
[data-theme="dark"] .btn-theme:hover::before {
  transform: rotate(145deg);
}
.btn-theme:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Indicador disponible */
.h-avail {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.h-avail-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}

/* Hamburguesa móvil */
.h-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.h-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text);
  transition: background 0.3s;
}

/* ══════════════════════════════════════
   6. HERO
══════════════════════════════════════ */
/* El hero es un carril de scroll largo: el contenido se queda pegado
   mientras --hp (progreso 0-1, lo escribe rp-hero.js) recorre la
   formación del logo. La disolución ocurre ya al soltarse, mientras el
   hero sale de pantalla, para que la intro entre justo detrás sin una
   pantalla vacía de por medio.
   Sin WebGL el carril no existe y el hero vuelve a medir una pantalla. */
.hero {
  --hp: 0;
  position: relative;
  min-height: 100svh;
  background: var(--bg);
  transition: background 0.4s;
}
.hero.is-webgl {
  height: 220svh;
  min-height: 0;
}

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: 4.5rem;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 100px 100px;
  opacity: calc(0.4 - var(--hp) * 0.34);
  transform: scale(calc(1 + var(--hp) * 0.35));
  pointer-events: none;
  transition: background-image 0.4s;
  will-change: transform, opacity;
}

/* Lienzo de partículas: cubre el sticky completo */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: none;
  pointer-events: none;
}
.hero.is-webgl .hero-canvas {
  display: block;
}

.hero-body {
  display: grid;
  place-items: center;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* Logotipo estático: es lo que se ve sin WebGL o con movimiento reducido,
   y lo que sustituye el render de partículas cuando este arranca. */
.hero-title {
  margin: 0;
  width: 100%;
  display: grid;
  place-items: center;
}
.hero-logo-static {
  display: block;
  width: min(86%, 1480px);
  aspect-ratio: 1557.64 / 576.766;
  background-color: var(--text);
  -webkit-mask: url("/images/RomanPlazzaLogo.svg") no-repeat center / contain;
  mask: url("/images/RomanPlazzaLogo.svg") no-repeat center / contain;
  transition: background-color 0.4s;
}
.hero.is-webgl .hero-title {
  display: none;
}

.hero-overline {
  position: absolute;
  /* Por debajo del header fijo */
  top: calc(4.5rem + 1.5rem);
  left: var(--gutter);
  z-index: 3;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  /* Se retira mientras el logo termina de condensarse */
  opacity: clamp(0, calc((0.52 - var(--hp)) / 0.22), 1);
}
.hero-overline::before {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  background: var(--text-muted);
}

.hero-year {
  position: absolute;
  top: 50%;
  right: var(--gutter);
  z-index: 3;
  transform: translateY(-50%) rotate(180deg);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  writing-mode: vertical-rl;
  opacity: clamp(0, calc((0.72 - var(--hp)) / 0.2), 1);
}

.hero-footer {
  position: relative;
  z-index: 3;
  padding: 1.25rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-top: 1px solid var(--border);
  transition: border-color 0.4s;
}

/* La llamada a proyectos entra cuando el logo ya es legible */
.hero-cta {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition:
    gap 0.3s,
    color 0.4s;
}
.hero-cta:hover {
  gap: 1.25rem;
}
.hero.is-webgl .hero-cta {
  opacity: clamp(0, calc((var(--hp) - 0.46) / 0.16), 1);
}

/* El indicador de scroll acompaña todo el recorrido y se apaga al final */
.hero-scroll {
  display: flex;
  align-items: center;
  gap: 1rem;
  opacity: clamp(0, calc((0.88 - var(--hp)) / 0.16), 1);
}
.hero-scroll-hint {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.hero-track {
  display: none;
  width: clamp(60px, 12vw, 160px);
  height: 1px;
  background: var(--border);
  overflow: hidden;
}
.hero.is-webgl .hero-track {
  display: block;
}
.hero-track-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(var(--hp));
}

/* Reloj de Alicante: pareja de .hero-overline en la esquina opuesta */
.hero-clock {
  position: absolute;
  top: calc(4.5rem + 1.5rem);
  right: var(--gutter);
  z-index: 3;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: clamp(0, calc((0.52 - var(--hp)) / 0.22), 1);
}
.hero-clock .hero-in {
  animation-delay: 0.15s;
}

/* Cruz de retícula: sigue al cursor con sus coordenadas en px. Las
   variables las escribe rp-hero.js en cada frame (--cx, --cy, --co). */
.hero-cross {
  --cx: 50%;
  --cy: 50%;
  --co: 0;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--co);
}
.hero-cross[hidden] {
  display: none;
}
.hero-cross-h,
.hero-cross-v {
  position: absolute;
  background: var(--text-muted);
  opacity: 0.28;
}
.hero-cross-h {
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  transform: translateY(var(--cy));
}
.hero-cross-v {
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  transform: translateX(var(--cx));
}
.hero-cross-label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(calc(var(--cx) + 0.9rem), calc(var(--cy) + 0.8rem));
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (hover: none) {
  .hero-cross {
    display: none;
  }
}

/* Entrada al cargar. Va en un hijo porque la opacidad del contenedor la
   gobierna --hp: si animásemos el mismo elemento, se pisarían. */
.hero-in {
  display: block;
  animation: heroIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* En pausa mientras el preloader tapa la página: así la entrada se ve al
   retirarse, en lugar de haber terminado ya por debajo */
html.rp-loading .hero-in {
  animation-play-state: paused;
}
@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateY(0.7rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ══════════════════════════════════════
   7. WORK — CABECERA Y FILTROS
══════════════════════════════════════ */
.home-intro {
  padding: 5rem var(--gutter) 0;
}

#work {
  background: var(--bg);
  transition: background 0.4s;
}

.work-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 5rem var(--gutter) 2.5rem;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.4s;
}
.work-eyebrow {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.work-title {
  font-family: var(--sans);
  font-size: clamp(2.5rem, 5vw, 5.5rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--text);
  transition: color 0.4s;
}
.work-title em {
  font-style: italic;
}

.work-filters {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.wf-btn {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.wf-btn:hover,
.wf-btn.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

/* ══════════════════════════════════════
   8. CARDS GRID
══════════════════════════════════════ */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--border);
  margin-top: 2px;
}
.cards-grid > .proj-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* Contenedor de la card */
.proj-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg);
}
.cards-grid .proj-card {
  height: 520px;
}

/* Inner: recibe el zoom al hover.
   container-type: size lo convierte en contenedor de consulta, para que
   el vídeo pueda dimensionarse contra la card (cqw/cqh) y no contra el
   viewport. Su tamaño viene de inset: 0, así que contenerlo es seguro. */
.card-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.proj-card:hover .card-inner {
  transform: scale(1.04);
}

/* Vídeo de fondo — Home cards

   Los iframes de YouTube y Vimeo no admiten object-fit, así que el
   recorte «cover» hay que calcularlo: se amplía el vídeo lo justo para
   tapar la card y ni un píxel más. --ratio es el ancho ÷ alto real de
   cada pieza; el valor por defecto es 16:9.

   Antes esto usaba 177.78vh / 56.25vw, que miden el viewport y no la
   card: en una pantalla de 1600×900 estiraba el vídeo hasta 1431×891
   dentro de una card de 791×520 (1,81×, con solo el 55 % del encuadre a
   la vista), y hasta 2373×2080 en los verticales (3×, un 8 % visible).
   De ahí que se vieran tan ampliados y recortados. */
.card-video {
  --ratio: 1.7778;
  --overscan: 1;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% * var(--overscan));
  height: calc(100% * var(--overscan));
  border: none;
  pointer-events: none;
  z-index: 1;

  /* Reserva para navegadores sin unidades de contenedor (Safari < 16):
     mantienen el comportamiento anterior, que cubre aunque sea de sobra. */
  min-width: 177.78vh;
  min-height: 56.25vw;

  min-width: calc(var(--ratio) * 100cqh * var(--overscan));
  min-height: calc(100cqw / var(--ratio) * var(--overscan));
}

/* El <video> nativo conoce su propio ratio y sabe recortarse solo:
   no necesita el cálculo ni que le declaremos --ratio. */
video.card-video {
  object-fit: cover;
  min-width: 0;
  min-height: 0;
}

/* Ratio real de cada vídeo (ancho ÷ alto), comprobado en origen.
   Solo hace falta declararlo cuando no es 16:9.
   Pin & Pon, Pet Town y La Despensa sí lo son, y usan el valor base. */
.proj-card.uala .card-video {
  --ratio: 1.3333; /* 4:3 */
}
.proj-card.solen .card-video {
  --ratio: 0.5625; /* 9:16 vertical */
}

/* YouTube pinta el título del vídeo y su logotipo pegados a los bordes
   del iframe. Con el encuadre ya ajustado esos rótulos entrarían en
   cuadro, así que a estas dos se les da un 35 % de aire extra para
   empujarlos fuera de la card: el marco ocupa un 10,6 % de la altura del
   player, y así sobresalen 91 px por lado frente a los 74 px que mide.
   Sube a --overscan: 1 si algún día estos vídeos pasan a Vimeo, que en
   modo background no lleva ningún rótulo. */
.proj-card.pinpon .card-video,
.proj-card.pettown .card-video {
  --overscan: 1.35;
}

/* Imagen estática de fondo (cards sin vídeo: Agency gif, Deep Blue) */
.card-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

/* Watermark ghost */
.card-ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: clamp(60px, 10vw, 130px);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.02em;
  opacity: 0.07;
  overflow: hidden;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
  transition: opacity 0.4s;
}
.proj-card:hover .card-ghost {
  opacity: 0;
}

/* Etiqueta esquina superior */
.card-label {
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  z-index: 4;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

/* Overlay oscuro al hover */
.card-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
  pointer-events: none;
}
.proj-card:hover .card-inner::after {
  background: rgba(0, 0, 0, 0.45);
}

/* Panel de info: sube desde abajo */
.card-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(
    to top,
    var(--card-overlay-from) 0%,
    var(--card-overlay-mid) 55%,
    transparent 100%
  );
  transform: translateY(calc(100% - 60px));
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.proj-card:hover .card-info {
  transform: translateY(0);
}

/* Footer de la card: siempre visible */
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  min-height: 44px;
}
.card-client {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(248, 247, 244, 0.45);
}
.card-link {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(248, 247, 244, 0.9);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition:
    gap 0.3s,
    color 0.2s;
}
.card-link:hover {
  color: var(--accent);
  gap: 0.9rem;
}
.card-link.disabled {
  color: rgba(248, 247, 244, 0.4);
  cursor: not-allowed;
}
.card-link.disabled:hover {
  color: rgba(248, 247, 244, 0.4);
  gap: 0.5rem;
}

/* Bloque superior: aparece con delay */
.card-top {
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.35s ease 0.12s,
    transform 0.35s ease 0.12s;
}
.proj-card:hover .card-top {
  opacity: 1;
  transform: translateY(0);
}

.card-num {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(248, 247, 244, 0.4);
  margin-bottom: 0.35rem;
}
.card-cat {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.card-name {
  font-family: var(--sans);
  font-size: clamp(2rem, 3.5vw, 3.8rem);
  font-weight: 300;
  font-style: italic;
  line-height: 0.92;
  margin-bottom: 0.85rem;
  color: rgba(248, 247, 244, 0.95);
}
.card-desc {
  font-size: 0.82rem;
  line-height: 1.65;
  color: rgba(248, 247, 244, 0.6);
}

/* ── Paletas proyectos de cliente ── */
.proj-card.dark .card-inner {
  background: #1a1510;
}
.proj-card.dark.uala .card-inner {
  background: #200a08;
}
.proj-card.dark.despensa .card-inner {
  background: #0a180a;
}
.proj-card.light .card-inner {
  background: #cfc9bc;
}
.proj-card.light.solen .card-inner {
  background: #dfd0a8;
}
.proj-card.light.pettown .card-inner {
  background: #b8c4cc;
}
.proj-card.light.skillxtreme .card-inner {
  background: #c8d4d8;
}

/* ── Paletas proyectos de exploración ── */
.proj-card.exp-1 .card-inner {
  background: linear-gradient(160deg, #0e1a0e, #1c3320);
}
.proj-card.exp-2 .card-inner {
  background: linear-gradient(160deg, #1a1825, #0e0e1c);
}
.proj-card.exp-3 .card-inner {
  background: linear-gradient(160deg, #261810, #1a0e0e);
}
.proj-card.exp-4 .card-inner {
  background: linear-gradient(160deg, #1a1a18, #0a0a08);
}
.proj-card.exp-5 .card-inner {
  background: linear-gradient(160deg, #0e1a26, #0a0e1a);
}

/* Ocultar por filtro */
.proj-card[data-hidden] {
  display: none;
}

/* ══════════════════════════════════════
   9. CONTACTO
══════════════════════════════════════ */
#contact {
  background: var(--bg);
  padding: 8rem var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
  transition:
    background 0.4s,
    border-color 0.4s;
}
.contact-bg-text {
  position: absolute;
  font-family: var(--sans);
  font-size: 22vw;
  font-weight: 300;
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.04);
  pointer-events: none;
  white-space: nowrap;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
}
.contact-eyebrow {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}
.contact-title {
  font-family: var(--sans);
  font-size: clamp(3rem, 5vw, 4rem);
  font-weight: 300;
  font-style: italic;
  line-height: 0.88;
  letter-spacing: -0.02em;
  margin-bottom: 3rem;
  position: relative;
  z-index: 2;
  color: var(--text);
  transition: color 0.4s;
}
.contact-email {
  font-family: var(--mono);
  font-size: clamp(0.72rem, 1.5vw, 1rem);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
  display: inline-block;
  transition:
    color 0.2s,
    border-color 0.2s;
  position: relative;
  z-index: 2;
}
.contact-email:hover {
  color: var(--text);
  border-color: var(--text);
}

/* ══════════════════════════════════════
   10. FOOTER
══════════════════════════════════════ */
footer {
  background: #141310;
  color: rgb(255, 255, 255);
  padding: 2rem var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
footer a:hover {
  color: var(--accent);
}
.footer-links {
  display: flex;
  gap: 2rem;
}

/* ══════════════════════════════════════
   11. REVEAL ANIMATIONS
══════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-reveal].visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════
   12. RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 960px) {
  /* Ocultar nav desktop, mostrar hamburguesa */
  nav {
    display: none;
  }
  .h-burger {
    display: flex;
  }
  .h-avail .h-avail-text {
    display: none;
  }

  /* Work header apilado */
  .work-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  /* Cards en columna única */
  .cards-grid {
    grid-template-columns: 1fr;
  }
  .cards-grid > .proj-card:last-child:nth-child(odd) {
    grid-column: auto;
  }
  .cards-grid .proj-card {
    height: 420px;
  }

  /* Info siempre visible en móvil */
  .card-info {
    transform: translateY(0);
  }
  .card-top {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Por debajo de 900px el logotipo pasa a dos líneas: en una sola línea
   (2.7:1) quedaría demasiado pequeño. El render de partículas hace el
   mismo cambio de montaje por su cuenta. */
@media (max-width: 900px) {
  .hero-logo-static {
    width: min(76%, 420px);
    aspect-ratio: 733.64 / 1271.53;
    -webkit-mask-image: url("/images/RomanPlazzaLogo-stack.svg");
    mask-image: url("/images/RomanPlazzaLogo-stack.svg");
  }
}

@media (max-width: 600px) {
  .h-logo {
    --logo-h: 19px;
  }
  .h-right .btn-lang {
    display: none;
  }
  .footer-links {
    gap: 1rem;
  }

  .hero-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }
  .hero-year,
  .hero-clock {
    display: none;
  }
  .hero-overline {
    font-size: 0.55rem;
    gap: 0.9rem;
  }
  .hero-overline::before {
    width: 1.5rem;
  }
}

/* Movimiento reducido: sin carril de scroll ni animaciones de entrada.
   rp-hero.js tampoco arranca, así que queda el logotipo estático. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero,
  .hero.is-webgl {
    height: auto;
    min-height: 100svh;
  }
  .hero-in {
    animation: none;
  }
}

/* ══════════════════════════════════════
   13. MENÚ MÓVIL DRAWER
══════════════════════════════════════ */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}
.mobile-nav.open {
  display: flex;
}

.mobile-nav a {
  font-family: var(--sans);
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s;
}
.mobile-nav a:hover {
  color: var(--accent);
}

.mobile-nav-close {
  position: absolute;
  top: 1.5rem;
  right: var(--gutter);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ══════════════════════════════════════
   SOBRE — HERO
══════════════════════════════════════ */
.sobre-hero {
  padding-top: 4.5rem; /* compensa el header fijo */
  background: var(--bg);
  transition: background 0.4s;
}
.sobre-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 90svh;
}

.sobre-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem var(--gutter);
  border-right: 1px solid var(--border);
  transition: border-color 0.4s;
}

.sobre-overline {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.sobre-overline::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--text-muted);
  flex-shrink: 0;
}

.sobre-headline {
  font-family: var(--sans);
  font-size: clamp(3rem, 5.5vw, 7rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 2.5rem;
  transition: color 0.4s;
}
.sobre-headline em {
  font-style: italic;
  color: var(--mid);
}
[data-theme="dark"] .sobre-headline em {
  color: rgba(240, 237, 232, 0.35);
}

.sobre-lead {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 44ch;
  transition: color 0.4s;
}

/* Foto */
.sobre-hero-img {
  position: relative;
  overflow: hidden;
  background: var(--offwhite);
  transition: background 0.4s;
}
[data-theme="dark"] .sobre-hero-img {
  background: #1a1916;
}

.sobre-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  filter: grayscale(1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.sobre-hero-img:hover img {
  transform: scale(1.03);
}

.sobre-img-caption {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}

/* ══════════════════════════════════════
   SOBRE — NÚMEROS
══════════════════════════════════════ */
.sobre-nums {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: border-color 0.4s;
}
.sobre-num-item {
  padding: 3rem var(--gutter);
  border-right: 1px solid var(--border);
  transition: border-color 0.4s;
}
.sobre-num-item:last-child {
  border-right: none;
}

.sobre-num-big {
  font-family: var(--sans);
  font-size: clamp(2.5rem, 4vw, 5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--text);
  margin-bottom: 0.75rem;
  transition: color 0.4s;
}
.sobre-num-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ══════════════════════════════════════
   SOBRE — BIO
══════════════════════════════════════ */
.sobre-bio-section {
  background: var(--bg);
  transition: background 0.4s;
}
.sobre-bio-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-top: 1px solid var(--border);
  transition: border-color 0.4s;
}

.sobre-section-tag {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2rem;
  display: block;
}

.sobre-bio-left {
  padding: 5rem var(--gutter);
  border-right: 1px solid var(--border);
  transition: border-color 0.4s;
}
.sobre-bio-right {
  padding: 5rem var(--gutter);
}

.sobre-bio-text {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text);
  max-width: 62ch;
  margin-bottom: 1.75rem;
  transition: color 0.4s;
}
[data-theme="dark"] .sobre-bio-text {
  color: rgba(240, 237, 232, 0.72);
}

.sobre-quote {
  font-family: var(--sans);
  font-size: clamp(1.3rem, 2.2vw, 2.2rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
  transition:
    color 0.4s,
    border-color 0.4s;
}
.sobre-quote em {
  font-style: italic;
  color: var(--text);
}

/* ══════════════════════════════════════
   SOBRE — SERVICIOS
══════════════════════════════════════ */
.sobre-servicios {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  transition:
    background 0.4s,
    border-color 0.4s;
}
.sobre-servicios-header {
  padding: 5rem var(--gutter) 3rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  transition: border-color 0.4s;
}
.sobre-servicios-title {
  font-family: var(--sans);
  font-size: clamp(2.5rem, 4vw, 5rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--text);
  transition: color 0.4s;
}

.sobre-servicios-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.sobre-servicio-item {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding: 3rem var(--gutter);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  transition:
    border-color 0.4s,
    background 0.3s;
}
.sobre-servicio-item:hover {
  background: var(--bg);
}
[data-theme="dark"] .sobre-servicio-item:hover {
  background: rgba(255, 255, 255, 0.03);
}
.sobre-servicio-item:nth-child(even) {
  border-right: none;
}
.sobre-servicio-item:nth-last-child(-n + 2) {
  border-bottom: none;
}

.sobre-servicio-num {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  flex-shrink: 0;
  padding-top: 0.3rem;
}
.sobre-servicio-name {
  font-family: var(--sans);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--text);
  margin-bottom: 0.75rem;
  transition: color 0.4s;
}
.sobre-servicio-desc {
  font-size: 0.83rem;
  line-height: 1.75;
  color: var(--text-muted);
  transition: color 0.4s;
}

/* ══════════════════════════════════════
   SOBRE — FILOSOFÍA
══════════════════════════════════════ */
.sobre-filosofia {
  background: var(--bg);
  border-top: 1px solid var(--border);
  transition:
    background 0.4s,
    border-color 0.4s;
}
.sobre-filosofia-header {
  padding: 5rem var(--gutter) 3rem;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.4s;
}
.sobre-filosofia-title {
  font-family: var(--sans);
  font-size: clamp(2.5rem, 4vw, 5rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-top: 1rem;
  transition: color 0.4s;
}
.sobre-filosofia-title em {
  font-style: italic;
}

.sobre-filosofia-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.sobre-filosofia-item {
  padding: 3.5rem var(--gutter);
  border-right: 1px solid var(--border);
  transition: border-color 0.4s;
}
.sobre-filosofia-item:last-child {
  border-right: none;
}

.sobre-filosofia-idx {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.sobre-filosofia-name {
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--text);
  margin-bottom: 1rem;
  transition: color 0.4s;
}
.sobre-filosofia-text {
  font-size: 0.83rem;
  line-height: 1.75;
  color: var(--text-muted);
  transition: color 0.4s;
}

/* ══════════════════════════════════════
   SOBRE — CLIENTES
══════════════════════════════════════ */
.sobre-clientes {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 4rem var(--gutter);
  transition:
    background 0.4s,
    border-color 0.4s;
}
.sobre-clientes-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1.5rem;
}
.sobre-clientes-lista span {
  font-family: var(--sans);
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  font-weight: 300;
  color: var(--text);
  transition: color 0.4s;
}
.sobre-clientes-lista .sep {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--border);
  line-height: 1;
}

/* ══════════════════════════════════════
   ALIAS — compatibilidad variable nombres
══════════════════════════════════════ */
:root {
  --body: var(--sans);
}

/* ══════════════════════════════════════
   TRABAJOS — CABECERA DE SECCIÓN
══════════════════════════════════════ */
.trabajos-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  transition:
    background 0.4s,
    border-color 0.4s;
  position: sticky;
  top: 3.5rem;
  z-index: 10;
}
.trabajos-header-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 2.5rem var(--gutter);
  gap: 2rem;
  max-width: 2400px;
  margin-left: auto;
  margin-right: auto;
}
.trabajos-titulo-wrap {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
}
.trabajos-titulo {
  font-family: var(--sans);
  font-size: clamp(2rem, 2.5vw, 4rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  transition: color 0.4s;
}
.trabajos-filter-wrap {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.trabajos-filter {
  display: flex;
  align-items: center;
  gap: 0;
}

/* wf-btn: versión trabajos (sin borde exterior, separador entre items) */
.trabajos-filter .wf-btn {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.6rem 1rem;
  border-right: 1px solid var(--border);
  transition:
    color 0.2s,
    background 0.2s;
  white-space: nowrap;
}
.trabajos-filter .wf-btn:first-child {
  padding-left: 0;
}
.trabajos-filter .wf-btn:last-child {
  border-right: none;
  padding-right: 0;
}
.trabajos-filter .wf-btn:hover {
  color: var(--text) !important;
}
.trabajos-filter .wf-btn.active {
  color: var(--bg) !important;
  font-weight: 400;
  background: var(--text) !important;
}
.trabajos-filter .wf-btn.active:hover {
  color: var(--bg) !important;
}

.rp-work-count {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  transition: color 0.4s;
  min-width: 2ch;
  text-align: right;
}

/* ══════════════════════════════════════
   TRABAJOS — GRID (CSS Grid, sin JS)

   Estructura de cada card:
     .proj-card           → celda del grid (gap real vía `gap`, no padding)
     .rp-card-link        → tarjeta visual (position:relative, overflow:hidden)
       .rp-card-img       → contenedor con aspect-ratio fijo (reserva el hueco antes de cargar la imagen)
         .rp-img-inner    → img object-fit:cover
       .rp-card-caption   → overlay absoluto (inset:0), siempre hijo de .rp-card-link

   Al fijar aspect-ratio en .rp-card-img, todas las filas miden lo mismo
   independientemente de cuándo termine de cargar cada imagen — el grid
   nunca necesita recalcular posiciones ni deja huecos.
   Normal   4:5  → una columna
   Featured 8:5  → dos columnas → misma altura de fila que una normal
══════════════════════════════════════ */

/* ── Grid contenedor ── */
.trabajos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 10px;
  width: 100%;
  max-width: 2400px;
  margin-left: auto;
  margin-right: auto;
}
.trabajos-grid .proj-card[data-hidden] {
  display: none;
}
.trabajos-grid .proj-card--featured {
  grid-column: span 2;
}

/* ── Tarjeta visual ── */
.trabajos-grid .rp-card-link {
  position: relative;

  display: flex;
  flex-direction: column;

  text-decoration: none;
  color: inherit;

  border-radius: 12px;
  overflow: visible;

  border: 1px solid var(--border);

  background: var(--bg-alt);

  isolation: isolate;

  transition:
    border-color 0.35s ease,
    background 0.35s ease;
}
.trabajos-grid .rp-card-link:hover {
  border-color: var(--text-muted);
}

/* ── Imagen ── */
.trabajos-grid .rp-card-img {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 4 / 5;

  background: var(--offwhite);
  transition: background 0.4s;
}
.trabajos-grid .proj-card--featured .rp-card-img {
  aspect-ratio: 8 / 5;
}
[data-theme="dark"] .trabajos-grid .rp-card-img {
  background: #141310;
}


.trabajos-grid .rp-card-img::after {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;

  border: 1px solid rgba(0,0,0,.08);

  pointer-events: none;

  z-index: 10;
}

[data-theme="dark"] .trabajos-grid .rp-card-img::after {
  border-color: rgba(255,255,255,.06);
}


.trabajos-grid .proj-card--featured .rp-card-img {
  overflow: hidden;
}

.trabajos-grid .rp-img-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.trabajos-grid .rp-img-inner img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  display: block;

  transition:
    transform 0.65s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease;
}
@media (hover: hover) {
  .trabajos-grid .proj-card:hover .rp-img-inner img {
    transform: scale(1.04);
  }
}

.trabajos-grid .card-video {
  min-width: 0 !important;
  min-height: 0 !important;

  width: 140% !important;
  height: 140% !important;

  top: 50% !important;
  left: 50% !important;

  transform: translate(-50%, -50%) !important;
}

.trabajos-grid .proj-card--featured .rp-img-inner img {
  object-position: center center;
}

/* ── Caption: overlay centrado verticalmente, texto entra desde la izquierda ──
   Aplica a todas las cards por igual (normal y featured).
   · inset:0 → cubre toda la tarjeta (= área de la imagen)
   · justify-content:center → centrado vertical
   · textos invisibles y desplazados a la izquierda por defecto
   · en hover: overlay oscuro + textos se deslizan hacia su posición           */
.trabajos-grid .rp-card-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  background: rgba(20, 19, 16, 0);
  border-top: none;
  pointer-events: none;
  z-index: 2;
  transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.trabajos-grid .rp-card-link:hover .rp-card-caption {
  background: rgba(20, 19, 16, 0.85);
  pointer-events: auto;
}

/* Línea dorada — crece en anchura antes que aparezca el texto */
.trabajos-grid .rp-card-caption::before {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  background: rgba(200, 169, 110, 0.75);
  margin-bottom: 0.7rem;
  flex-shrink: 0;
  transition: width 0.45s 0.04s cubic-bezier(0.4, 0, 0.2, 1);
}
.trabajos-grid .rp-card-link:hover .rp-card-caption::before {
  width: 2rem;
}

/* Categoría */
.trabajos-grid .rp-card-cat {
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.45rem;
  color: rgba(200, 169, 110, 0);
  transform: translateX(-20px);
  transition:
    color 0.3s 0.1s,
    transform 0.38s 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.trabajos-grid .rp-card-link:hover .rp-card-cat {
  color: rgba(200, 169, 110, 0.9);
  transform: translateX(0);
}

/* Título — tamaño diferente según tipo de card */
.trabajos-grid .proj-card:not(.proj-card--featured) .rp-card-title {
  font-family: var(--sans);
  font-size: clamp(0.95rem, 1.2vw, 1.2rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  display: block;
  color: rgba(248, 247, 244, 0);
  transform: translateX(-24px);
  transition:
    color 0.4s 0.14s,
    transform 0.42s 0.14s cubic-bezier(0.4, 0, 0.2, 1);
}
.trabajos-grid .proj-card--featured .rp-card-title {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.4vw, 1.5rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  display: block;
  color: rgba(248, 247, 244, 0);
  transform: translateX(-24px);
  transition:
    color 0.4s 0.14s,
    transform 0.42s 0.14s cubic-bezier(0.4, 0, 0.2, 1);
}
.trabajos-grid .rp-card-link:hover .rp-card-title {
  color: rgba(248, 247, 244, 0.95);
  transform: translateX(0);
}

/* Año */
.trabajos-grid .rp-card-year {
  font-family: var(--mono);
  font-size: 0.45rem;
  letter-spacing: 0.12em;
  display: block;
  margin-top: 0.45rem;
  color: rgba(248, 247, 244, 0);
  transform: translateX(-18px);
  transition:
    color 0.3s 0.2s,
    transform 0.36s 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.trabajos-grid .rp-card-link:hover .rp-card-year {
  color: rgba(248, 247, 244, 0.45);
  transform: translateX(0);
}

/* ============================================================
   VÍDEOS EN PLACEHOLDERS DE TRABAJOS
============================================================ */

.trabajos-grid .rp-img-inner {
  position: relative;
  overflow: hidden;
}

.trabajos-grid .rp-work-video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

 border: 0;

  pointer-events: none;
}



/* ── Breakpoints de columnas ── */
@media (min-width: 1600px) {
  .trabajos-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 1400px) {
  .trabajos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── ≤900px — CSS grid 2 col ── */
@media (max-width: 900px) {
  .trabajos-header {
    top: 3.5rem;
  }
  .trabajos-header-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem var(--gutter);
    gap: 1rem;
  }
  .trabajos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px;
    max-width: 100%;
    width: 100%;
    margin: 0;
  }
  .trabajos-grid .proj-card--featured {
    grid-column: 1 / -1;
  }
  .trabajos-grid .rp-card-link {
    border-radius: 8px;
  }

  /* Imagen: altura fija relativa al viewport */
  .trabajos-grid .rp-card-img {
    aspect-ratio: unset;
    height: 42vw;
    max-height: 240px;
  }
  .trabajos-grid .proj-card--featured .rp-card-img {
    aspect-ratio: unset;
    height: 52vw;
    max-height: 320px;
  }

  /* Caption: de overlay invisible a banda visible estática bajo la imagen.
     Se aplica a TODAS las cards (normal y featured). */
  .trabajos-grid .rp-card-caption {
    position: static;
    background: none;
    padding: 0.65rem 1rem 0.75rem;
    border-top: 1px solid var(--border);
    justify-content: flex-start;
    pointer-events: auto;
    z-index: auto;
  }
  .trabajos-grid .rp-card-caption::before {
    display: none;
  }
  .trabajos-grid .rp-card-cat {
    color: var(--text-muted);
    transform: none;
    transition: none;
  }
  /* El color transparente del título se fija con tres clases
     (.trabajos-grid .proj-card--featured .rp-card-title), así que aquí
     hace falta la misma especificidad: con un selector más corto la
     regla perdía y el título quedaba invisible en móvil. */
  .trabajos-grid .proj-card:not(.proj-card--featured) .rp-card-title,
  .trabajos-grid .proj-card--featured .rp-card-title {
    color: var(--text);
    transform: none;
    transition: none;
  }
  .trabajos-grid .rp-card-year {
    color: var(--text-muted);
    transform: none;
    transition: none;
  }
}

/* ── ≤520px — 1 columna ── */
@media (max-width: 520px) {
  .trabajos-header {
    top: 3.5rem;
  }
  .trabajos-header-inner {
    padding: 0.9rem var(--gutter);
    gap: 0.5rem;
  }
  .trabajos-titulo {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }
  .trabajos-filter {
    flex-wrap: wrap;
  }
  .trabajos-filter .wf-btn {
    border-right: none;
    padding: 0.4rem 0.6rem;
    font-size: 0.48rem;
  }
  .trabajos-grid {
    grid-template-columns: 1fr;
    padding: 10px;
  }
  .trabajos-grid .proj-card--featured {
    grid-column: auto;
  }
  .trabajos-grid .rp-card-img {
    height: auto;
  }

  .trabajos-grid .proj-card--featured .rp-card-img {
    height: auto;
  }
  .trabajos-grid .rp-img-inner,
  .trabajos-grid .rp-img-inner img {
    height: auto;
  }
}

/* ══════════════════════════════════════
   PROYECTO — HERO
══════════════════════════════════════ */
.proyecto-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 60svh;
  border-bottom: 1px solid var(--border);
  padding-top: 4.5rem;
}
.proyecto-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6rem var(--gutter) 4rem;
  border-right: 1px solid var(--border);
  transition: border-color 0.4s;
}
.proyecto-titulo {
  font-family: var(--sans);
  font-size: clamp(2.8rem, 5vw, 6.5rem);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 2rem;
  transition: color 0.4s;
}
.proyecto-titulo em {
  font-style: italic;
  color: var(--mid);
}
.proyecto-meta {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6rem var(--gutter) 4rem;
}
.proyecto-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
  transition: border-color 0.4s;
}
.proyecto-meta-item {
  padding: 1.5rem 2rem 1.5rem 0;
  border-right: 1px solid var(--border);
  transition: border-color 0.4s;
}
.proyecto-meta-item:nth-child(even) {
  border-right: none;
  padding-left: 2rem;
  padding-right: 0;
}
.proyecto-meta-item:nth-child(n + 3) {
  border-top: 1px solid var(--border);
}
.proyecto-meta-label {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
  display: block;
}
.proyecto-meta-value {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--text);
  line-height: 1.4;
  transition: color 0.4s;
}

/* ══════════════════════════════════════
   PROYECTO — VÍDEO
══════════════════════════════════════ */
.proyecto-video-section {
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  transition:
    background 0.4s,
    border-color 0.4s;
}
.proyecto-video-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem var(--gutter);
  border-bottom: 1px solid var(--border);
}
.proyecto-video-nota {
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-style: italic;
}
.proyecto-video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.proyecto-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.proyecto-video-placeholder {
  aspect-ratio: 16 / 9;
  background: var(--offwhite);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  position: relative;
  overflow: hidden;
}
.proyecto-video-icon {
  width: 5rem;
  height: 5rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.proyecto-video-icon svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: var(--text-muted);
  margin-left: 3px;
}
.proyecto-video-caption {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ══════════════════════════════════════
   PROYECTO — IMAGEN DESTACADA
══════════════════════════════════════ */
.proyecto-imagen-destacada {
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  transition: border-color 0.4s;
}
.proyecto-imagen-destacada img {
  width: 100%;
  height: auto;
  display: block;
}
.proyecto-imagen-destacada.proyecto-imagen-completa {
  display: flex;
  justify-content: center;
  overflow: visible;
  background: var(--offwhite);
}
.proyecto-imagen-destacada.proyecto-imagen-completa img {
  width: auto;
  max-width: min(100%, 960px);
  height: auto;
}
[data-theme="dark"] .proyecto-imagen-destacada.proyecto-imagen-completa {
  background: #141310;
}

/* ══════════════════════════════════════
   PROYECTO — MAINPICS ADICIONALES
   Cuando un proyecto tiene más de una imagen principal,
   la primera va en .proyecto-imagen-destacada (a todo ancho)
   y el resto aquí, sin recortar, para que quepan también
   formatos muy verticales.
══════════════════════════════════════ */
.proyecto-mainpics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
  transition: border-color 0.4s;
}
.proyecto-mainpics-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--offwhite);
  overflow: hidden;
  min-height: 240px;
  transition: background 0.4s;
}
[data-theme="dark"] .proyecto-mainpics-item {
  background: #141310;
}
.proyecto-mainpics-item img {
  width: 100%;
  height: 100%;
  max-height: 80vh;
  object-fit: contain;
  display: block;
}
@media (max-width: 700px) {
  .proyecto-mainpics {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════
   PROYECTO — INTRO
══════════════════════════════════════ */
.proyecto-intro {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.4s;
}
.proyecto-intro-tag {
  padding: 5rem var(--gutter);
  border-right: 1px solid var(--border);
  transition: border-color 0.4s;
}
.proyecto-intro-body {
  padding: 5rem var(--gutter);
}
.proyecto-body-text {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text);
  max-width: 62ch;
  margin-bottom: 1.75rem;
  transition: color 0.4s;
}
.proyecto-body-text:last-child {
  margin-bottom: 0;
}
[data-theme="dark"] .proyecto-body-text {
  color: rgba(240, 237, 232, 0.72);
}

/* ══════════════════════════════════════
   PROYECTO — VOLUMEN
══════════════════════════════════════ */
.volumen-header {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  transition:
    background 0.4s,
    border-color 0.4s;
}
.volumen-num {
  padding: 2.5rem var(--gutter);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  transition: border-color 0.4s;
}
.volumen-info {
  padding: 2.5rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.volumen-titulo {
  font-family: var(--sans);
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color 0.4s;
}

/* ══════════════════════════════════════
   PROYECTO — GALERÍA
══════════════════════════════════════ */
.proyecto-galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--border);
  transition: border-color 0.4s;
}
.galeria-item {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  transition: border-color 0.4s;
}
.galeria-item:nth-child(3n) {
  border-right: none;
}
.galeria-item:nth-last-child(-n + 3) {
  border-bottom: none;
}
.galeria-img-wrap {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--offwhite);
  transition: background 0.4s;
}
[data-theme="dark"] .galeria-img-wrap {
  background: #141310;
}
.galeria-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.galeria-item:hover .galeria-img-wrap img {
  transform: scale(1.04);
}
.galeria-caption {
  padding: 1.25rem var(--gutter);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.4s;
}
.galeria-caption-name {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--text);
  transition: color 0.4s;
}
.galeria-placeholder {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.galeria-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    var(--border) 8px,
    var(--border) 9px
  );
  opacity: 0.3;
}
.galeria-placeholder-num {
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════
   PROYECTO — PROCESO
══════════════════════════════════════ */
.proyecto-proceso {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  transition:
    background 0.4s,
    border-color 0.4s;
}
.proyecto-proceso-tag {
  padding: 5rem var(--gutter);
  border-right: 1px solid var(--border);
  transition: border-color 0.4s;
}
.proyecto-proceso-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 5rem var(--gutter);
}
.proyecto-proceso-item {
  padding-right: 3rem;
  border-right: 1px solid var(--border);
  transition: border-color 0.4s;
}
/* Columna derecha. Con nth-child, y no last-child, admite más de dos
   bloques: se reparten en filas de dos. */
.proyecto-proceso-item:nth-child(even) {
  border-right: none;
  padding-right: 0;
  padding-left: 3rem;
}
.proyecto-proceso-item:nth-child(n + 3) {
  margin-top: 3.5rem;
}

/* ══════════════════════════════════════
   PROYECTO — NAV
══════════════════════════════════════ */
.proyecto-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
  transition: border-color 0.4s;
}
.proyecto-nav-item {
  padding: 3rem var(--gutter);
  border-right: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition:
    background 0.25s,
    border-color 0.4s;
}
.proyecto-nav-item:last-child {
  border-right: none;
}
.proyecto-nav-item:hover {
  background: var(--bg-alt);
}
.proyecto-nav-nombre {
  font-family: var(--sans);
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color 0.4s;
}

/* ══════════════════════════════════════
   VISOR 360° — Pannellum
══════════════════════════════════════ */
.proyecto-visor360 {
  margin-bottom: 0;
}
.visor360-label {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding: var(--gutter);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.visor360-hint {
  font-family: var(--mono);
  font-size: 0.48rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.visor360-canvas {
  width: 100%;
  height: 85vh;
  min-height: 500px;
  max-height: 1100px;
  background: var(--mid);
}
.pnlm-container {
  background: var(--mid) !important;
  font-family: var(--mono) !important;
}
.pnlm-load-button {
  background: var(--text) !important;
  color: var(--bg) !important;
  font-family: var(--mono) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.75rem 1.5rem !important;
}
.pnlm-load-button p {
  display: none;
}
.pnlm-controls-container {
  top: var(--gutter) !important;
  right: var(--gutter) !important;
}
.pnlm-zoom-controls button,
.pnlm-fullscreen-toggle-button {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  opacity: 0.85;
}

/* ══════════════════════════════════════
   SOBRE
══════════════════════════════════════ */
.sobre-hero {
  padding-top: 4.5rem;
  background: var(--bg);
  transition: background 0.4s;
}
.sobre-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 90svh;
}
.sobre-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem var(--gutter);
  border-right: 1px solid var(--border);
  transition: border-color 0.4s;
}
.sobre-headline {
  font-family: var(--sans);
  font-size: clamp(3rem, 5.5vw, 7rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 2.5rem;
  transition: color 0.4s;
}
.sobre-headline em {
  font-style: italic;
  color: var(--mid);
}
.sobre-hero-img {
  position: relative;
  overflow: hidden;
  background: var(--offwhite);
  transition: background 0.4s;
}
[data-theme="dark"] .sobre-hero-img {
  background: #1a1916;
}
.sobre-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  filter: grayscale(1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.sobre-hero-img:hover img {
  transform: scale(1.03);
}
.sobre-img-caption {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}
.sobre-nums {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: border-color 0.4s;
}
.sobre-num-item {
  padding: 3rem var(--gutter);
  border-right: 1px solid var(--border);
  transition: border-color 0.4s;
}
.sobre-num-item:last-child {
  border-right: none;
}
.sobre-num-big {
  font-family: var(--sans);
  font-size: clamp(2.5rem, 4vw, 5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--text);
  margin-bottom: 0.75rem;
  transition: color 0.4s;
}
.sobre-bio-section {
  background: var(--bg);
  transition: background 0.4s;
}
.sobre-bio-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-top: 1px solid var(--border);
  transition: border-color 0.4s;
}
.sobre-bio-left {
  padding: 5rem var(--gutter);
  border-right: 1px solid var(--border);
  transition: border-color 0.4s;
}
.sobre-bio-right {
  padding: 5rem var(--gutter);
}
.sobre-bio-text {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text);
  max-width: 62ch;
  margin-bottom: 1.75rem;
  transition: color 0.4s;
}
[data-theme="dark"] .sobre-bio-text {
  color: rgba(240, 237, 232, 0.72);
}
.sobre-quote {
  font-family: var(--sans);
  font-size: clamp(1.3rem, 2.2vw, 2.2rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
  transition:
    color 0.4s,
    border-color 0.4s;
}
.sobre-quote em {
  font-style: italic;
  color: var(--text);
}
.sobre-servicios {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  transition:
    background 0.4s,
    border-color 0.4s;
}
.sobre-servicios-header {
  padding: 5rem var(--gutter) 3rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  transition: border-color 0.4s;
}
.sobre-servicios-title {
  font-family: var(--sans);
  font-size: clamp(2.5rem, 4vw, 5rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--text);
  transition: color 0.4s;
}
.sobre-servicios-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.sobre-servicio-item {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding: 3rem var(--gutter);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  transition:
    border-color 0.4s,
    background 0.3s;
}
.sobre-servicio-item:hover {
  background: var(--bg);
}
.sobre-servicio-item:nth-child(even) {
  border-right: none;
}
.sobre-servicio-item:nth-last-child(-n + 2) {
  border-bottom: none;
}
.sobre-servicio-num {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  flex-shrink: 0;
  padding-top: 0.3rem;
}
.sobre-servicio-name {
  font-family: var(--sans);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--text);
  margin-bottom: 0.75rem;
  transition: color 0.4s;
}
.sobre-servicio-desc {
  font-size: 0.83rem;
  line-height: 1.75;
  color: var(--text-muted);
  transition: color 0.4s;
}
.sobre-filosofia {
  background: var(--bg);
  border-top: 1px solid var(--border);
  transition:
    background 0.4s,
    border-color 0.4s;
}
.sobre-filosofia-header {
  padding: 5rem var(--gutter) 3rem;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.4s;
}
.sobre-filosofia-title {
  font-family: var(--sans);
  font-size: clamp(2.5rem, 4vw, 5rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-top: 1rem;
  transition: color 0.4s;
}
.sobre-filosofia-title em {
  font-style: italic;
}
.sobre-filosofia-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.sobre-filosofia-item {
  padding: 3.5rem var(--gutter);
  border-right: 1px solid var(--border);
  transition: border-color 0.4s;
}
.sobre-filosofia-item:last-child {
  border-right: none;
}
.sobre-filosofia-idx {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.sobre-filosofia-name {
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--text);
  margin-bottom: 1rem;
  transition: color 0.4s;
}
.sobre-filosofia-text {
  font-size: 0.83rem;
  line-height: 1.75;
  color: var(--text-muted);
  transition: color 0.4s;
}
.sobre-clientes {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 4rem var(--gutter);
  transition:
    background 0.4s,
    border-color 0.4s;
}
.sobre-clientes-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1.5rem;
}
.sobre-clientes-lista span {
  font-family: var(--sans);
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  font-weight: 300;
  color: var(--text);
  transition: color 0.4s;
}
.sobre-clientes-lista .sep {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--border);
  line-height: 1;
}

/* ══════════════════════════════════════
   PÁGINA DE CONTACTO
══════════════════════════════════════ */
.contacto-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.contacto-header {
  padding: 8rem 0 3rem;
  border-bottom: 1px solid var(--border);
}
.contacto-titulo {
  font-family: var(--sans);
  font-size: clamp(3.5rem, 8vw, 8rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0.5rem 0 0;
}
.contacto-titulo em {
  font-style: italic;
}
.contacto-body {
  border-bottom: 1px solid var(--border);
}
.contacto-info {
  max-width: 640px;
  padding: 3rem 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.contacto-info-bloque {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.contacto-enlace {
  font-family: var(--sans);
  font-size: clamp(0.9rem, 1.2vw, 1.15rem);
  font-weight: 300;
  color: var(--text);
  text-decoration: none;
  transition: color 0.25s;
}
.contacto-enlace:hover {
  color: var(--text-muted);
}
.contacto-info-nota {
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.error-body {
  padding: 3rem 0 6rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 640px;
}
.error-links {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════
   RESPONSIVE — fichas y sobre
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .sobre-filosofia-grid {
    grid-template-columns: 1fr 1fr;
  }
  .sobre-filosofia-item:nth-child(2) {
    border-right: none;
  }
  .sobre-filosofia-item:nth-child(1),
  .sobre-filosofia-item:nth-child(2) {
    border-bottom: 1px solid var(--border);
  }
  .proyecto-galeria {
    grid-template-columns: repeat(2, 1fr);
  }
  .galeria-item:nth-child(3n) {
    border-right: 1px solid var(--border);
  }
  .galeria-item:nth-child(2n) {
    border-right: none;
  }
  .galeria-item:nth-last-child(-n + 3) {
    border-bottom: 1px solid var(--border);
  }
  .galeria-item:nth-last-child(-n + 2) {
    border-bottom: none;
  }
}
@media (max-width: 900px) {
  .sobre-hero-inner {
    grid-template-columns: 1fr;
  }
  .sobre-hero-text {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sobre-hero-img {
    min-height: 60vw;
  }
  .sobre-nums {
    grid-template-columns: 1fr 1fr;
  }
  .sobre-num-item:nth-child(2) {
    border-right: none;
  }
  .sobre-num-item:nth-child(1),
  .sobre-num-item:nth-child(2) {
    border-bottom: 1px solid var(--border);
  }
  .sobre-bio-grid {
    grid-template-columns: 1fr;
  }
  .sobre-bio-left {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 3rem var(--gutter);
  }
  .sobre-servicios-grid {
    grid-template-columns: 1fr;
  }
  .sobre-servicio-item {
    border-right: none;
  }
  .proyecto-hero {
    grid-template-columns: 1fr;
  }
  .proyecto-hero-text {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .proyecto-intro,
  .volumen-header,
  .proyecto-proceso {
    grid-template-columns: 1fr;
  }
  .proyecto-intro-tag,
  .volumen-num,
  .proyecto-proceso-tag {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 2.5rem var(--gutter);
  }
  .proyecto-proceso-cols {
    grid-template-columns: 1fr;
    padding: 3rem var(--gutter);
  }
  .proyecto-proceso-item {
    border-right: none;
    padding-right: 0;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--border);
  }
  .proyecto-proceso-item:nth-child(even) {
    padding-left: 0;
  }
  .proyecto-proceso-item + .proyecto-proceso-item {
    margin-top: 2.5rem;
  }
  .proyecto-proceso-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .contacto-info {
    padding: 2rem 0;
  }
}
@media (max-width: 600px) {
  .sobre-filosofia-grid {
    grid-template-columns: 1fr;
  }
  .sobre-filosofia-item {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sobre-filosofia-item:last-child {
    border-bottom: none;
  }
}
@media (max-width: 520px) {
  .proyecto-galeria {
    grid-template-columns: 1fr;
  }
  .galeria-item {
    border-right: none;
  }
  .galeria-item:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }
  .galeria-item:last-child {
    border-bottom: none;
  }
  .visor360-canvas {
    height: 55vw;
    min-height: 220px;
  }
}

/* ══════════════════════════════════════
   NAV ACTIVO — página actual destacada
══════════════════════════════════════ */
body.page-trabajo nav a[href="/trabajo/"],
body.page-sobre nav a[href="/sobre/"],
body.page-contacto nav a[href="/contacto/"] {
  color: var(--text);
}

/* Ocultar sección contacto en la página de contacto */
body.page-contacto #contact {
  display: none;
}

/* ══════════════════════════════════════
   FIXES — TRABAJOS GRID / FEATURED
   Ajustes específicos para placeholders dobles
══════════════════════════════════════ */

/* Mejora encuadre imágenes */
.trabajos-grid .rp-img-inner img {
  object-fit: cover;
  object-position: center center;
}

/* Featured cards:
   Ajuste vertical más equilibrado */
.trabajos-grid .proj-card--featured .rp-img-inner img {
  object-position: center 35%;
}

/* Evita recortes excesivos en imágenes panorámicas */
.trabajos-grid .proj-card--featured .rp-card-img {
  overflow: hidden;
}

/* Corrige overlays y stacking */
.trabajos-grid .rp-card-link {
  isolation: isolate;
}

/* Fuerza contexto correcto para captions */
.trabajos-grid .rp-card-img {
  position: relative;
}

/* Hover más suave */
@media (hover: hover) {
  .trabajos-grid .proj-card:hover .rp-img-inner img {
    transform: scale(1.025);
  }
}

/* ══════════════════════════════════════
   FIXES — TRABAJOS GRID ESTABILIDAD
══════════════════════════════════════ */

/* La card define el recorte real */
.trabajos-grid .rp-card-link {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  isolation: isolate;
}

/* El overlay nunca puede salirse */
.trabajos-grid .rp-card-img {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Overlay SIEMPRE centrado respecto a la card (solo escritorio;
   en ≤900px la caption pasa a ser una banda estática bajo la imagen) */
@media (min-width: 901px) {
  .trabajos-grid .rp-card-caption {
    position: absolute;
    inset: 0;
    z-index: 4;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 2rem;

    pointer-events: none;
  }
}

/* Overlay oscuro contenido dentro del border radius */
.trabajos-grid .rp-card-link::after {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;

  background: rgba(0, 0, 0, 0);

  z-index: 2;

  transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1);

  pointer-events: none;
}

.trabajos-grid .rp-card-link:hover::after {
  background: rgba(0, 0, 0, 0.72);
}

/* Textos siempre por encima */
.trabajos-grid .rp-card-cat,
.trabajos-grid .rp-card-title,
.trabajos-grid .rp-card-year {
  position: relative;
  z-index: 5;
}

/* Featured: evita recortes extremos */
.trabajos-grid .proj-card--featured .rp-img-inner img {
  object-position: center center;
}


/* ══════════════════════════════════════
   14. PRELOADER

   Sin logotipo: el hero ya lo presenta, así que aquí manda el número.
   Un contador en Anton a cuerpo enorme, con dígitos que ruedan como un
   cuentakilómetros (las columnas las construye rp-main.js), y a su lado
   la lista de disciplinas, que se va encendiendo según avanza la carga.
   Debajo, el mismo filete del .hero-footer, que se llena en dorado.

   Va por debajo del grano (z 9999) para que este lo cubra también.
══════════════════════════════════════ */
.rp-preloader {
  --pp: 0;

  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg);
  overflow: hidden;

  /* Red de seguridad puramente CSS: si el JS no llega a ejecutarse, el
     preloader se retira solo y nunca deja el sitio tapado. */
  animation: rpPreFailsafe 0.01s linear 7s forwards;
}
.rp-preloader[hidden] {
  display: none;
}

@keyframes rpPreFailsafe {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* Bloqueo de scroll mientras carga. Lo pone y lo quita el JS, así que un
   fallo de script no puede dejar la página sin scroll. */
html.rp-loading,
html.rp-loading body {
  overflow: hidden;
}

.rp-pre-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 100px 100px;
  opacity: 0.4;
  pointer-events: none;
}
[data-theme="dark"] .rp-pre-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

/* ── Cabecera: firma y lugar, a la altura del header ── */
.rp-pre-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.75rem var(--gutter);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  animation: rpPreIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.rp-pre-top p {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.rp-pre-top p:first-child::before {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  background: var(--text-muted);
}

/* ── Cuerpo: contador a la izquierda, disciplinas a la derecha ── */
.rp-pre-body {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 var(--gutter) 2rem;
}

.rp-pre-count {
  display: flex;
  align-items: flex-start;
  font-family: var(--display);
  font-size: clamp(7rem, 24vw, 22rem);
  line-height: 1;
  color: var(--text);
  animation: rpPreIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}
.rp-pre-count em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin: 1.1em 0 0 0.9rem;
}

/* Las columnas las inserta rp-main.js dentro de #rpPreNum */
#rpPreNum {
  display: flex;
}

/* Columna de dígito: ventana de un dígito de alto sobre una tira 0-9 */
.rp-pre-digit {
  display: block;
  height: 1.1em;
  line-height: 1.1;
  overflow: hidden;
  transition: color 0.4s;
}
.rp-pre-strip {
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.rp-pre-strip span {
  display: block;
  height: 1.1em;
  text-align: center;
}
/* Ceros a la izquierda: presentes pero apagados */
.rp-pre-digit.is-lead {
  color: var(--border);
}
[data-theme="dark"] .rp-pre-digit.is-lead {
  color: rgba(255, 255, 255, 0.1);
}

/* Disciplinas: se encienden de una en una según el progreso */
.rp-pre-words {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
  padding-bottom: 0.4rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: rpPreIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}
.rp-pre-words li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-muted);
  opacity: 0.35;
  transition:
    opacity 0.35s,
    color 0.35s;
}
.rp-pre-words li::before {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.rp-pre-words li.is-on {
  color: var(--text);
  opacity: 1;
}
.rp-pre-words li.is-on::before {
  width: 1.5rem;
}

/* ── Filete inferior que se llena con la carga ── */
.rp-pre-bar {
  position: relative;
  z-index: 2;
  height: 1px;
  margin: 0 var(--gutter) 1.75rem;
  background: var(--border);
  overflow: hidden;
}
.rp-pre-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(var(--pp));
}

@keyframes rpPreIn {
  from {
    opacity: 0;
    transform: translateY(1.2rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Salida: el contenido sube primero y el panel le sigue ── */
.rp-preloader.is-done {
  animation: none;
  pointer-events: none;
  transform: translateY(-100%);
  transition: transform 0.95s cubic-bezier(0.76, 0, 0.24, 1) 0.1s;
}
.rp-preloader.is-done .rp-pre-top,
.rp-preloader.is-done .rp-pre-body,
.rp-preloader.is-done .rp-pre-bar {
  opacity: 0;
  transform: translateY(-2.5rem);
  transition:
    opacity 0.45s ease,
    transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Visita ya iniciada: el preloader solo cubre el parpadeo de navegación,
   así que no hay nada que presentar. */
.rp-fast .rp-pre-top,
.rp-fast .rp-pre-body {
  visibility: hidden;
}
.rp-fast .rp-preloader.is-done {
  transition-duration: 0.5s;
  transition-delay: 0s;
}

@media (max-width: 600px) {
  .rp-pre-top p:last-child {
    display: none;
  }
  .rp-pre-top p:first-child::before {
    width: 1.5rem;
  }
  .rp-pre-body {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .rp-pre-count {
    font-size: 36vw;
  }
  .rp-pre-words {
    align-items: flex-start;
  }
  .rp-pre-words li {
    flex-direction: row-reverse;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rp-pre-top,
  .rp-pre-count,
  .rp-pre-words {
    animation: none;
  }
  .rp-pre-strip {
    transition: none;
  }
  .rp-preloader.is-done {
    transform: none;
    opacity: 0;
    transition: opacity 0.3s linear;
  }
  .rp-preloader.is-done .rp-pre-top,
  .rp-preloader.is-done .rp-pre-body,
  .rp-preloader.is-done .rp-pre-bar {
    transform: none;
  }
}

/* ══════════════════════════════════════
   15. TITULARES — DISPLAY CONDENSADA

   Los TITULARES van en Anton, una condensada de cuerpo grueso. El
   criterio es el propio logotipo: ya es una condensada pesada en caja
   alta, así que los titulares hablan su mismo idioma.

   Sistema resultante:
     titulares  → --display  (Anton)       caja alta, muy condensada
     lectura    → --sans     (Instrument)  leads, bios, textos, citas
     etiquetas  → --mono     (Archivo exp.) eyebrows, cifras, navegación

   Los <em> de los titulares no pueden ir en cursiva (Anton no tiene), así
   que el contraste pasa a ser de color: la segunda mitad del titular va en
   --highlight (magenta en claro, verde en oscuro).
══════════════════════════════════════ */

:root {
  --display: "Anton", "Arial Narrow", Impact, sans-serif;

  /* Anton tiene mucha más altura de x y más peso que la serif anterior,
     pero al ser condensada ocupa menos ancho: este factor reequilibra
     las dos cosas sobre los cuerpos originales. */
  --display-scale: 1.08;
  --display-tracking: 0em;
  --display-line: 0.92;
  --display-word: 0.04em;
}



/* ── Rasgos comunes a todo titular ── */
.work-title,
.card-name,
.card-ghost,
.contact-title,
.contact-bg-text,
.mobile-nav a,
.sobre-headline,
.sobre-num-big,
.sobre-servicios-title,
.sobre-filosofia-title,
.sobre-clientes-lista span,
.trabajos-titulo,
.trabajos-grid .rp-card-title,
.proyecto-titulo,
.volumen-titulo,
.proyecto-nav-nombre,
.sobre-servicio-name,
.sobre-filosofia-name,
.contacto-titulo {
  font-family: var(--display);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: var(--display-tracking);
  word-spacing: var(--display-word);
  line-height: var(--display-line);
}


/* ── Cuerpos, reescalados sobre el valor original ── */
.work-title        { font-size: calc(clamp(2.5rem, 5vw, 5.5rem) * var(--display-scale)); }
.card-name         { font-size: calc(clamp(2rem, 3.5vw, 3.8rem) * var(--display-scale)); }
.card-ghost        { font-size: calc(clamp(60px, 10vw, 130px) * var(--display-scale)); }
.contact-title     { font-size: calc(clamp(3rem, 5vw, 4rem) * var(--display-scale)); }
.contact-bg-text   { font-size: calc(22vw * var(--display-scale)); }
.mobile-nav a      { font-size: calc(clamp(2.5rem, 8vw, 4rem) * var(--display-scale)); }
.sobre-headline    { font-size: calc(clamp(3rem, 5.5vw, 7rem) * var(--display-scale)); }
.sobre-num-big     { font-size: calc(clamp(2.5rem, 4vw, 5rem) * var(--display-scale)); }
.sobre-servicios-title,
.sobre-filosofia-title { font-size: calc(clamp(2.5rem, 4vw, 5rem) * var(--display-scale)); }
.sobre-clientes-lista span { font-size: calc(clamp(1.1rem, 2vw, 1.8rem) * var(--display-scale)); }
.trabajos-titulo   { font-size: calc(clamp(2rem, 2.5vw, 4rem) * var(--display-scale)); }
.proyecto-titulo   { font-size: calc(clamp(2.8rem, 5vw, 6.5rem) * var(--display-scale)); }
.volumen-titulo,
.proyecto-nav-nombre { font-size: calc(clamp(1.4rem, 2.5vw, 2.2rem) * var(--display-scale)); }
.contacto-titulo   { font-size: calc(clamp(3.5rem, 8vw, 8rem) * var(--display-scale)); }

/* ── Los <em> de los titulares ──
   Ninguna de estas condensadas tiene cursiva, así que el contraste que
   daba la itálica pasa a ser de relleno: la segunda mitad del titular se
   queda hueca, con solo el contorno. Es el mismo recurso que ya usaba
   .contact-bg-text, así que no introduce vocabulario nuevo. */
.work-title em,
.sobre-headline em,
.sobre-filosofia-title em,
.proyecto-titulo em,
.contact-title em,
.contacto-titulo em,
.trabajos-titulo em {
  font-style: normal;
  color: var(--highlight);
  -webkit-text-stroke: 0;
}

/* La sección Sobre traía su propio color de <em> para el modo oscuro, con
   más especificidad que la regla de arriba: se anula aquí para que el
   destacado sea también --highlight en oscuro. */
[data-theme="dark"] .sobre-headline em {
  color: var(--highlight);
}

/* El watermark de las cards ya era hueco: mantiene su propio color */
.card-ghost {
  font-style: normal;
}

/* Todo el contenido de lectura va en la sans: a estos cuerpos una
   condensada pesada sería ilegible, y el contraste ya lo da el salto de
   Anton a Instrument Sans. La cursiva de las citas se mantiene, porque
   Instrument Sans sí tiene itálica. */
.sobre-lead,
.sobre-bio-text,
.sobre-quote,
.proyecto-body-text,
.proyecto-meta-value,
.galeria-caption-name,
.contacto-enlace {
  font-family: var(--sans);
  text-transform: none;
}

/* Cuerpos de lectura: la sans pide algo menos de interlínea que la serif
   y un cuerpo ligeramente menor a igualdad de tamaño aparente. */
.sobre-lead,
.sobre-bio-text,
.proyecto-body-text {
  font-size: calc(clamp(1.05rem, 1.5vw, 1.3rem) * 0.94);
  line-height: 1.65;
}

/* La sans ocupa más ancho que la serif que había antes: los valores de la
   ficha de proyecto y los pies de galería se ajustan para no partirse. */
.proyecto-meta-value {
  font-size: 0.88rem;
  line-height: 1.5;
}
.galeria-caption-name {
  font-size: 0.85rem;
}

/* Los nombres de servicio y de filosofía son títulos de ítem: van en
   Anton, pero a un cuerpo contenido para no competir con los titulares. */
.sobre-servicio-name,
.sobre-filosofia-name {
  font-size: calc(1.35rem * var(--display-scale));
}

/* Títulos de las tarjetas de Trabajos, sobre la imagen.
   Van con la especificidad de las reglas originales (tres clases), que si
   no le ganarían a un selector más corto y seguirían en la serif. */
.trabajos-grid .proj-card:not(.proj-card--featured) .rp-card-title,
.trabajos-grid .proj-card--featured .rp-card-title {
  font-family: var(--display);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: var(--display-tracking);
  word-spacing: var(--display-word);
  line-height: 1.05;
}
.trabajos-grid .proj-card:not(.proj-card--featured) .rp-card-title {
  font-size: calc(clamp(0.95rem, 1.2vw, 1.2rem) * var(--display-scale));
}
.trabajos-grid .proj-card--featured .rp-card-title {
  font-size: calc(clamp(1.05rem, 1.4vw, 1.5rem) * var(--display-scale));
}


/* ══════════════════════════════════════
   16. APARICIÓN SECUENCIAL

   Amplía la sección 11. rp-main.js escalona los elementos que entran en
   pantalla a la vez (--rv-delay, por orden de lectura) y, según lo que
   contienen, les pone una de estas variantes:

     por defecto  sube y aparece (sección 11)
     .rv-media    la imagen aparece con un fundido (.rv-mask) mientras
                  se asienta desde un zoom muy leve
     .rv-title    el titular sube desde una ranura, como tras una máscara

   Va al final del archivo a propósito: tiene que ganar a las reglas de
   imagen de Trabajos y de las galerías, que declaran su propia transition.
══════════════════════════════════════ */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-curtain: cubic-bezier(0.77, 0, 0.18, 1);
}

[data-reveal] {
  transform: translateY(32px);
  transition:
    opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
    transform 1.1s var(--ease-out-expo);
  transition-delay: var(--rv-delay, 0s);
}
[data-reveal].visible {
  transform: none;
}

/* ── Imagen: fundido + asentamiento ──
   Antes era una cortina de abajo arriba (clip-path). Ahora la imagen o el
   vídeo aparece en un fundido suave mientras se asienta desde un zoom muy
   leve. El contenedor (con su pie) ya funde por la sección 11; aquí se
   funde además el propio medio, algo más lento, para que la imagen llegue
   un instante después que el marco. */
[data-reveal].rv-media {
  transform: none;
  transition: opacity 0.6s ease var(--rv-delay, 0s);
}
.rv-mask {
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1) calc(var(--rv-delay, 0s) + 0.1s);
}
.visible .rv-mask {
  opacity: 1;
}
.rv-media .rv-mask img,
.rv-media .rv-mask video,
.rv-media .rv-mask iframe {
  scale: 1.06;
  transition:
    scale 1.6s var(--ease-out-expo) var(--rv-delay, 0s),
    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease;
}
.rv-media.visible .rv-mask img,
.rv-media.visible .rv-mask video,
.rv-media.visible .rv-mask iframe {
  scale: 1;
}

/* ── Titular: sube desde una ranura ──
   Se anima el span .rv-inner que envuelve el texto (lo crea rp-main.js),
   no el titular: este tiene que seguir sin recortar para que el
   IntersectionObserver lo vea entrar. Mover y recortar a la vez, con la
   misma curva, equivale a una máscara fija. Los márgenes negativos del
   recorte dejan sitio a la tilde de la Á y a lo que Anton saca de la caja. */
[data-reveal].rv-title {
  opacity: 1;
  transform: none;
}
.rv-title .rv-inner {
  display: block;
  transform: translateY(100%);
  clip-path: inset(-0.3em -0.1em 100% -0.1em);
  transition:
    transform 1.15s var(--ease-out-expo),
    clip-path 1.15s var(--ease-out-expo);
  transition-delay: var(--rv-delay, 0s);
}
.rv-title.visible .rv-inner {
  transform: none;
  clip-path: inset(-0.3em -0.1em -0.3em -0.1em);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .rv-mask,
  .rv-title .rv-inner {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
  .rv-media .rv-mask img,
  .rv-media .rv-mask video,
  .rv-media .rv-mask iframe {
    scale: 1;
  }
}

/* ══════════════════════════════════════
   17. ESCENARIO DE IMÁGENES — FICHAS DE PROYECTO

   Cada contenedor de imagen lleva, escrito en el HTML:
     data-fit   cómo se presenta la imagen
     --stage    color del escenario, sacado de la propia imagen: su borde
                si es liso (la imagen se funde con la caja) o un tono
                ambiental oscuro si no lo es
     --r        proporción ancho/alto de la imagen
   Así ninguna imagen deja asomar el fondo de la web, en claro ni en
   oscuro. Los valores los calcula un script a partir de los archivos;
   si se cambia una imagen hay que recalcularlos.

   Todas las alturas se limitan a la pantalla menos el header, para que
   una imagen principal se vea entera en un portátil.
══════════════════════════════════════ */

:root {
  /* Alto útil bajo el header fijo */
  --view-h: calc(100svh - 4.5rem);
}

/* ── Imagen destacada ── */
.proyecto-imagen-destacada[data-fit] {
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4vw, 3.5rem) var(--gutter);
  background: var(--stage);
  overflow: hidden;
}
.proyecto-imagen-destacada[data-fit] img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(calc(var(--view-h) - 7rem), 920px);
}

/* Foto apaisada sin fondo propio: a todo ancho, recortada en alto */
.proyecto-imagen-destacada[data-fit="bleed"] {
  padding: 0;
}
.proyecto-imagen-destacada[data-fit="bleed"] img {
  width: 100%;
  height: min(var(--view-h), 56.25vw);
  max-height: none;
  object-fit: cover;
}

/* Infografía muy vertical: a ancho de lectura, se recorre con scroll */
.proyecto-imagen-destacada[data-fit="long"] img {
  width: min(100%, 720px);
  max-height: none;
}

/* ── Imágenes principales adicionales: fila justificada ──
   Cada celda crece según su proporción y toma esa misma proporción, así
   todas comparten altura y la imagen llena su celda sin recortes ni
   huecos. La fila se estrecha (y se centra) si con todo el ancho quedaría
   más alta que la pantalla: --sum es la suma de proporciones de la fila. */
.proyecto-mainpics {
  --row-max: calc((var(--view-h) - 4rem) * var(--sum, 3));
  display: flex;
  gap: 1px;
  padding-inline: max(0px, calc((100% - var(--row-max)) / 2));
  /* --band: si todas las imágenes de la fila comparten escenario, la
     franja también, y la fila estrechada no deja bandas de otro color */
  background: var(--band, var(--bg-alt));
}
.proyecto-mainpics-item[data-fit="fill"] {
  flex: var(--r) 1 0;
  min-width: 0;
  min-height: 0;
  aspect-ratio: var(--r);
  background: var(--stage);
}
.proyecto-mainpics-item[data-fit="fill"] img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}
@media (max-width: 700px) {
  .proyecto-mainpics {
    flex-direction: column;
    padding-inline: 0;
  }
  .proyecto-mainpics-item[data-fit="fill"] {
    flex: none;
    width: 100%;
  }
}

/* ── Galería ── */
.galeria-img-wrap[data-fit] {
  background: var(--stage);
}
.galeria-img-wrap[data-fit="contain"] img {
  object-fit: contain;
  padding: 7%;
}

/* Imágenes de fondo liso: el borde se funde con el escenario. Si el
   fondo de la imagen es un degradado suave (viñeta de estudio), el
   fundido evita que se vea la costura con --stage. */
.proyecto-imagen-destacada[data-edge="flat"] img,
.galeria-img-wrap[data-fit="contain"][data-edge="flat"] img {
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent),
    linear-gradient(transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent),
    linear-gradient(transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}

/* ══════════════════════════════════════
   18. CAMBIO DE TEMA — REVELADO CIRCULAR

   rp-main.js envuelve el cambio en una View Transition y hace crecer
   ::view-transition-new(root) como un círculo desde el punto del clic.
   Mientras dura se anulan las transition de color, para que el estado
   nuevo se capture ya asentado.
══════════════════════════════════════ */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
html.rp-theme-switching *,
html.rp-theme-switching *::before,
html.rp-theme-switching *::after {
  transition: none !important;
}

/* El hero entero es un interruptor de tema */
.hero {
  cursor: pointer;
}
.hero a,
.hero button {
  cursor: pointer;
}

/* Pista junto a la cruz de retícula: a qué modo lleva el clic */
.hero-cross-hint {
  display: block;
  margin-top: 0.35rem;
  color: var(--text);
}
.hero-cross-hint::before {
  content: "Clic · modo oscuro";
}
[data-theme="dark"] .hero-cross-hint::before {
  content: "Clic · modo claro";
}

/* ══════════════════════════════════════
   19. FICHA EXTENDIDA — BLOQUES HTML

   Piezas para contar un proyecto en HTML en lugar de con láminas
   rasterizadas. Comparten la retícula de la ficha (columna de etiqueta de
   220px + contenido, como .proyecto-intro y .volumen-header), así que se
   pueden intercalar con las galerías sin romper la plantilla.

     .ficha-video     vídeo de cabecera a todo ancho (sustituye a la destacada)
     .ficha-hitos     cronología horizontal
     .ficha-bloque    sección con etiqueta numerada (01.1, 01.2…)
     .ficha-ad        antes / después
     .ficha-logo      construcción del logotipo (SVG con guías y cotas)
     .ficha-versiones versiones del logotipo sobre sus fondos
     .ficha-paleta    muestras de color con sus valores
     .ficha-tipos     muestras tipográficas (SVG en contornos)
     .ficha-elementos recortes reales de página con su descripción
     .ficha-portada   imagen con zonas numeradas enlazadas a una leyenda

   Los colores de marca del cliente (fondos de versiones, muestras) son
   contenido, no tema: van en línea en el HTML como --fondo / --c.
══════════════════════════════════════ */

.ficha-simbolos {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ── Vídeo de cabecera ──
   El vídeo cubre el marco como object-fit: cover, calculado con unidades
   de contenedor a partir de su proporción (4:3 por defecto, --vr). */
.ficha-video {
  border-bottom: 1px solid var(--border);
}
.ficha-video-marco {
  --vr: 1.3333;
  position: relative;
  height: min(var(--view-h), 56.25vw);
  overflow: hidden;
  container-type: size;
  background: var(--bg-inv);
}
.ficha-video-poster,
.ficha-video-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: max(100cqw, calc(100cqh * var(--vr)));
  height: max(100cqh, calc(100cqw / var(--vr)));
  border: 0;
  object-fit: cover;
  pointer-events: none;
}

/* ── Cronología ── */
.ficha-hitos {
  border-bottom: 1px solid var(--border);
}
.ficha-hitos ol {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.ficha-hito {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 3rem 1.5rem 2.75rem;
  border-right: 1px solid var(--border);
}
.ficha-hito:first-child {
  padding-left: var(--gutter);
}
.ficha-hito:last-child {
  border-right: none;
}
/* Línea de tiempo: un filete continuo con un punto por hito */
.ficha-hito::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}
.ficha-hito::after {
  content: "";
  position: absolute;
  top: calc(1.5rem - 4px);
  left: 1.5rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.ficha-hito:first-child::after {
  left: var(--gutter);
}
.ficha-hito-fecha {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.ficha-hito-titulo {
  font-family: var(--display);
  font-size: calc(1.35rem * var(--display-scale));
  text-transform: uppercase;
  line-height: 1;
  color: var(--text);
}
.ficha-hito-texto {
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.ficha-hito-texto a {
  display: inline-block;
  margin-top: 0.4rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}

/* ── Bloque con etiqueta ── */
.ficha-bloque {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-bottom: 1px solid var(--border);
}
.ficha-bloque-tag {
  padding: 4rem var(--gutter);
  border-right: 1px solid var(--border);
}
.ficha-bloque-num {
  display: block;
  font-family: var(--display);
  font-size: calc(2.4rem * var(--display-scale));
  line-height: 1;
  color: var(--text);
  margin-bottom: 0.75rem;
}
.ficha-bloque-body {
  padding: 4rem var(--gutter) 4.5rem;
  min-width: 0;
}
.ficha-bloque-body > .proyecto-body-text {
  margin-bottom: 2.5rem;
}

/* ── Antes / después ── */
.ficha-ad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  max-width: 980px;
}
.ficha-ad-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Panel blanco a propósito: los dos logotipos se comparan sobre papel */
.ficha-ad-logo {
  display: grid;
  place-items: center;
  aspect-ratio: 2.2;
  padding: 0 14%;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--border);
}
.ficha-ad-logo > svg,
.ficha-ad-logo > img {
  width: 100%;
  height: auto;
  max-height: 80%;
  object-fit: contain;
}
.ficha-ad-portada {
  display: block;
  width: 100%;
  aspect-ratio: 0.75;
  object-fit: cover;
}
.ficha-ad-col figcaption,
.ficha-tipo-nota,
.ficha-reglas p {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ── Construcción del logotipo ── */
.ficha-logo {
  max-width: 1040px;
  margin: 0 0 2.5rem;
}
.ficha-logo svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.ficha-guia {
  stroke: var(--text-muted);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
  opacity: 0.7;
}
.ficha-cota {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.ficha-svg-lbl {
  font-family: var(--mono);
  /* unidades del SVG: el diagrama se dibuja a ~1,9× */
  font-size: 5.6px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  fill: var(--text-muted);
}
.ficha-svg-lbl--acento {
  fill: var(--text);
}

.ficha-notas {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.ficha-notas b,
.ficha-version figcaption b,
.ficha-elemento figcaption b {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

/* ── Versiones ── */
.ficha-versiones {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
  max-width: 1100px;
}
.ficha-version-lienzo {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 16 / 10;
  padding: 0 0 7% 7%;
  background: var(--fondo);
}
.ficha-version--borde .ficha-version-lienzo {
  box-shadow: inset 0 0 0 1px var(--border);
}
.ficha-version-lienzo svg {
  width: 52%;
  height: auto;
}
.ficha-version figcaption,
.ficha-elemento figcaption {
  margin-top: 0.9rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ── Paleta ── */
.ficha-paleta {
  list-style: none;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 1rem;
  max-width: 1100px;
}
.ficha-color {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.ficha-color-muestra {
  height: clamp(9rem, 22vw, 16rem);
  margin-bottom: 0.7rem;
  background: var(--c);
}
.ficha-color--claro .ficha-color-muestra {
  box-shadow: inset 0 0 0 1px var(--border);
}
.ficha-color-nombre {
  font-family: var(--display);
  font-size: calc(1.3rem * var(--display-scale));
  text-transform: uppercase;
  line-height: 1;
  color: var(--text);
}
.ficha-color-valor {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--text);
}
.ficha-color-uso {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.ficha-reglas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  max-width: 1100px;
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}
.ficha-reglas b {
  color: var(--text);
  font-weight: 500;
}

/* ── Tipografía ── */
.ficha-tipos {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.9fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.ficha-tipo {
  min-width: 0;
  color: var(--text);
}
.ficha-espec {
  display: block;
  max-width: 100%;
}
.ficha-tipo-aa .ficha-espec {
  width: auto;
  height: clamp(5rem, 10vw, 8.5rem);
  margin: 1.25rem 0 1rem;
}
.ficha-tipo-nombre {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text);
}
.ficha-tipo-nombre span {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ficha-tipo-muestra {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.ficha-tipo-muestra .ficha-espec {
  width: 100%;
  height: auto;
}
.ficha-tipo-muestra .ficha-espec + .ficha-espec {
  margin-top: 0.3rem;
}
/* El texto se muestra a cuerpo constante, no estirado al ancho */
.ficha-tipo-muestra--texto .ficha-espec {
  width: auto;
  height: 1.35rem;
}
.ficha-tipo-muestra--cg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.ficha-tipo-muestra--cg .ficha-espec {
  width: auto;
  height: 3rem;
  color: var(--text-muted);
}
.ficha-tipo-muestra--cg > svg:last-child {
  width: auto;
  height: 3.6rem;
  max-width: 100%;
}
.ficha-tipo-flecha {
  font-family: var(--mono);
  color: var(--text-muted);
}
.ficha-tipo-nota {
  margin-top: 1.25rem;
}

/* ── Elementos de página ──
   Recortes de páginas impresas: van sobre blanco, como el papel del que
   salen, en cualquier tema. */
.ficha-elementos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2rem 1.5rem;
}
.ficha-elemento-img {
  display: grid;
  place-items: center;
  height: 200px;
  padding: 1.25rem;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--border);
}
.ficha-elemento-img img {
  display: block;
  max-width: 100%;
  max-height: calc(200px - 2.5rem);
  object-fit: contain;
}
.ficha-elemento--titular,
.ficha-elemento--entradilla {
  grid-column: span 2;
}
.ficha-elemento-num {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  color: var(--accent);
}

/* ── Portada con zonas ── */
.ficha-portada {
  display: grid;
  grid-template-columns: minmax(0, 460px) 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.ficha-portada-img {
  position: relative;
}
.ficha-portada-img img {
  display: block;
  width: 100%;
  height: auto;
}
.ficha-zona {
  position: absolute;
  border: 1.5px dashed rgba(255, 255, 255, 0.95);
  outline: 1px solid rgba(0, 0, 0, 0.25);
  transition:
    background 0.25s,
    border-color 0.25s;
}
.ficha-zona b,
.ficha-leyenda li > b {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 400;
}
/* Sobre la foto, el número va siempre oscuro, con independencia del tema */
.ficha-zona b {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  background: rgba(20, 19, 16, 0.9);
  color: #fff;
}
.ficha-leyenda {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.ficha-leyenda li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 1rem;
  align-items: start;
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.ficha-leyenda strong {
  display: block;
  font-weight: 500;
  color: var(--text);
}
/* Pasar por una zona o por su entrada de la leyenda la ilumina */
.ficha-zona:hover,
.ficha-portada:has(.ficha-leyenda--1:hover) .ficha-zona--1,
.ficha-portada:has(.ficha-leyenda--2:hover) .ficha-zona--2,
.ficha-portada:has(.ficha-leyenda--3:hover) .ficha-zona--3,
.ficha-portada:has(.ficha-leyenda--4:hover) .ficha-zona--4,
.ficha-portada:has(.ficha-leyenda--5:hover) .ficha-zona--5,
.ficha-portada:has(.ficha-leyenda--6:hover) .ficha-zona--6,
.ficha-portada:has(.ficha-leyenda--7:hover) .ficha-zona--7,
.ficha-portada:has(.ficha-leyenda--8:hover) .ficha-zona--8 {
  background: rgba(20, 19, 16, 0.28);
  border-style: solid;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .ficha-bloque {
    grid-template-columns: 1fr;
  }
  .ficha-bloque-tag {
    border-right: none;
    padding-bottom: 0;
  }
  .ficha-bloque-body {
    padding-top: 2rem;
  }
  .ficha-tipos,
  .ficha-portada {
    grid-template-columns: 1fr;
  }
  .ficha-paleta {
    grid-template-columns: 1fr 1fr;
  }
  .ficha-color:first-child {
    grid-column: span 2;
  }
}
@media (max-width: 600px) {
  .ficha-ad,
  .ficha-versiones,
  .ficha-reglas {
    grid-template-columns: 1fr;
  }
  .ficha-elemento--titular,
  .ficha-elemento--entradilla {
    grid-column: auto;
  }
  .ficha-hitos ol {
    grid-template-columns: 1fr;
  }
  .ficha-hito {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-left: var(--gutter);
  }
  .ficha-hito::after {
    left: var(--gutter);
  }
}

/* ── Variantes de la ficha extendida ── */

/* Vídeo vertical: a la izquierda, a su proporción; una imagen llena el resto */
.ficha-video--split {
  display: grid;
  grid-template-columns: auto 1fr;
  height: min(var(--view-h), 56.25vw);
  background: var(--bg-inv);
}
.ficha-video-vertical {
  height: 100%;
  aspect-ratio: 1080 / 1348;
  overflow: hidden;
}
.ficha-video-vertical video,
.ficha-video-lado {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-width: 0;
}

/* Figura suelta dentro de un bloque. --papel: lámina del cliente sobre su
   propio fondo blanco, en cualquier tema */
.ficha-figura {
  max-width: 1040px;
  margin: 0;
}
.ficha-figura img {
  display: block;
  width: 100%;
  height: auto;
}
.ficha-figura--media {
  max-width: 760px;
}
.ficha-figura--estrecha {
  max-width: 520px;
}
.ficha-figura--papel img {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--border);
}
.ficha-figura figcaption {
  margin-top: 0.9rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Muestras tipográficas en vivo (web fonts) y recortes de piezas reales */
.ficha-tipo-vivo {
  color: var(--text);
}
.ficha-tipo-aa.ficha-tipo-vivo {
  font-size: clamp(5rem, 10vw, 8.5rem);
  line-height: 1;
  margin: 1.25rem 0 1rem;
}
.ficha-tipo-recorte {
  display: block;
  height: clamp(6.5rem, 12vw, 10rem);
  margin: 1.25rem 0 1rem;
  padding: 0.75rem;
  background: #050505;
}
.ficha-tipo-recorte--claro {
  background: #f4f4f2;
}
.ficha-tipo-recorte img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.ficha-paleta--5 {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 900px) {
  .ficha-video--split {
    grid-template-columns: 1fr;
    height: auto;
  }
  .ficha-video-vertical {
    height: auto;
    width: 100%;
    max-height: 80svh;
  }
  .ficha-video-lado {
    display: none;
  }
  .ficha-paleta--5 {
    grid-template-columns: repeat(3, 1fr);
  }
  .ficha-paleta--5 .ficha-color:first-child {
    grid-column: auto;
  }
}

/* Portadilla: el logotipo como imagen principal, sobre un color de marca */
.ficha-portadilla {
  display: grid;
  place-items: center;
  height: min(var(--view-h), 56.25vw);
  min-height: 320px;
  padding: 0 var(--gutter);
  background: var(--fondo);
  border-bottom: 1px solid var(--border);
}
.ficha-portadilla-logo {
  width: min(64%, 900px);
}
.ficha-portadilla-logo svg,
.ficha-version--centro .ficha-version-lienzo svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Versiones con el logo centrado (logotipos sin bloque propio) */
.ficha-versiones:has(.ficha-version--centro) {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.ficha-version--centro .ficha-version-lienzo {
  justify-content: center;
  align-items: center;
  padding: 0 14%;
}
.ficha-version--centro .ficha-version-lienzo svg {
  max-height: 70%;
  width: auto;
  max-width: 100%;
}

/* Isotipo sobre los colores de la paleta */
.ficha-isos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  max-width: 1040px;
  margin-top: 2rem;
}
.ficha-isos li {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--fondo);
  box-shadow: inset 0 0 0 1px var(--border);
}
.ficha-isos svg {
  width: 52%;
  height: auto;
}

/* Paletas de 2 y 4 muestras, con rótulo de grupo */
.ficha-paleta--2 {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 0.75rem;
}
.ficha-paleta--4 {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 0.75rem;
}
.ficha-paleta--4 .ficha-color-muestra {
  height: clamp(6rem, 12vw, 9rem);
}
.ficha-paleta-lbl {
  display: block;
  margin-top: 2.5rem;
}

/* Patrón del isotipo, a sangre en la columna de contenido */
.ficha-patron {
  height: clamp(12rem, 26vw, 20rem);
  max-width: 1100px;
  background: #484f56 url("/images/euterpe/euterpe_patron.svg") repeat center / 300px;
}

@media (max-width: 600px) {
  .ficha-isos {
    grid-template-columns: repeat(3, 1fr);
  }
  .ficha-paleta--4 {
    grid-template-columns: 1fr 1fr;
  }
  .ficha-portadilla-logo {
    width: 86%;
  }
}

/* ── Fichas web: ventana de navegador con scroll automático ──
   La captura de página completa sube y baja sola (--dur, proporcional a
   su largo); se detiene al pasar el ratón o al enfocarla. Con movimiento
   reducido no se anima: la ventana pasa a tener scroll propio. */
.ficha-navegador {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #1c1c1e;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.12),
    0 24px 60px -24px rgba(0, 0, 0, 0.45);
}
.ficha-navegador-barra {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: #2a2a2d;
}
.ficha-navegador-barra i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #555;
}
.ficha-navegador-barra i:nth-child(1) { background: #ff5f57; }
.ficha-navegador-barra i:nth-child(2) { background: #febc2e; }
.ficha-navegador-barra i:nth-child(3) { background: #28c840; }
.ficha-navegador-barra span {
  flex: 1;
  margin: 0 12% 0 14px;
  padding: 3px 10px;
  border-radius: 5px;
  background: #3a3a3e;
  color: #b9b9be;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ficha-navegador-ventana {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  container-type: size;
  background: #fff;
  outline: none;
}
.ficha-navegador-ventana img {
  display: block;
  width: 100%;
  height: auto;
  animation: rpWebScroll var(--dur, 12s) ease-in-out infinite alternate;
}
.ficha-navegador-ventana:hover img,
.ficha-navegador-ventana:focus-visible img {
  animation-play-state: paused;
}
.ficha-navegador-ventana:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}
@keyframes rpWebScroll {
  0%,
  8% {
    transform: translateY(0);
  }
  92%,
  100% {
    transform: translateY(calc(-100% + 100cqh));
  }
}
@media (prefers-reduced-motion: reduce) {
  .ficha-navegador-ventana {
    overflow-y: auto;
  }
  .ficha-navegador-ventana img {
    animation: none;
  }
}

/* Escaparate: la home en grande como imagen principal de la ficha */
.ficha-escaparate {
  padding: clamp(2rem, 5vw, 4rem) var(--gutter);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.ficha-navegador--grande {
  max-width: 1000px;
  margin: 0 auto;
}
.ficha-navegador--grande .ficha-navegador-ventana {
  aspect-ratio: auto;
  height: min(calc(var(--view-h) - 9rem), 620px);
}

/* Antes/después con dos navegadores */
.ficha-ad--web {
  max-width: 1100px;
}
.ficha-ad-nota {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.ficha-ad--web + .ficha-notas {
  margin-top: 2.5rem;
}

/* Mapa de la web */
.ficha-mapa {
  max-width: 1100px;
}
.ficha-mapa-raiz {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--text);
}
.ficha-mapa-nodo {
  font-family: var(--display);
  font-size: calc(1.3rem * var(--display-scale));
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--text);
}
.ficha-mapa-anclas,
.ficha-mapa-fuera span {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ficha-mapa-ramas {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.ficha-mapa-rama {
  position: relative;
  padding: 2rem 0 0;
}
/* conector desde la línea de la home */
.ficha-mapa-rama::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 1.25rem;
  background: var(--text);
}
.ficha-mapa-rama > .ficha-mapa-nodo {
  display: block;
  padding: 0.85rem 0.9rem;
  background: var(--c);
  color: #fff;
  font-size: calc(1.05rem * var(--display-scale));
}
.ficha-mapa-rama ul {
  list-style: none;
  margin-top: 0.75rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--c);
}
.ficha-mapa-rama ul li {
  padding: 0.35rem 0;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.ficha-mapa-fuera {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: baseline;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--border);
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Paleta con muestras de ancho automático */
.ficha-paleta--auto {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
.ficha-paleta--auto .ficha-color-muestra {
  height: clamp(6rem, 11vw, 8.5rem);
}

/* Componentes de interfaz: recortes del diseño, que ya traen su fondo */
.ficha-elementos--web {
  grid-template-columns: repeat(2, 1fr);
}
.ficha-elemento-img--oscuro {
  height: auto;
  min-height: 0;
  padding: 0;
  background: #131a24;
  box-shadow: none;
}
.ficha-elemento-img--oscuro img {
  width: 100%;
  max-height: none;
}
.ficha-elementos--web .ficha-elemento--header,
.ficha-elementos--web .ficha-elemento--contacto {
  grid-column: 1 / -1;
}

/* Rejilla de pantallas */
.ficha-pantallas {
  padding: clamp(2rem, 5vw, 4rem) var(--gutter);
  border-bottom: 1px solid var(--border);
}
.ficha-pantallas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: 1200px;
  margin: 0 auto;
}
.ficha-pantalla-pie {
  margin-top: 0.9rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--text-muted);
}
.ficha-pantalla-pie b {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}
.proyecto-meta-value a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}

@media (max-width: 900px) {
  .ficha-mapa-ramas {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .ficha-pantallas-grid,
  .ficha-elementos--web,
  .ficha-ad--web {
    grid-template-columns: 1fr;
  }
  .ficha-mapa-ramas {
    grid-template-columns: 1fr;
  }
}

/* Portadilla con imagen (un emblema sobre su propio fondo) */
.ficha-portadilla--imagen img {
  display: block;
  width: 100%;
  height: min(var(--view-h), 56.25vw);
  max-height: 100%;
  padding: 3% 0;
  object-fit: contain;
}

/* Antes/después con piezas cuadradas sobre papel */
.ficha-ad-cuadro {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--border);
}

/* Mapa de cinco ramas y componentes de Minethic */
.ficha-mapa--5 .ficha-mapa-ramas {
  grid-template-columns: repeat(5, 1fr);
}
.ficha-elementos--min .ficha-elemento--objetivos,
.ficha-elementos--min .ficha-elemento--logos,
.ficha-elementos--min .ficha-elemento--pie {
  grid-column: 1 / -1;
}
.ficha-elementos--min .ficha-elemento--diagrama .ficha-elemento-img {
  background: #fff;
}
@media (max-width: 900px) {
  .ficha-mapa--5 .ficha-mapa-ramas {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .ficha-mapa--5 .ficha-mapa-ramas {
    grid-template-columns: 1fr;
  }
}

/* Navegación anterior/siguiente: un nombre de una sola palabra larga
   («Scoutbasketball») no debe desbordar media pantalla en móvil */
.proyecto-nav-item {
  min-width: 0;
}
.proyecto-nav-nombre {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Imagen destacada vertical (ilustraciones, carteles): puede crecer más
   allá del alto de pantalla, para que no quede pequeña en un portátil.
   Se recorre con scroll, como una lámina. */
.proyecto-imagen-destacada[data-shape="vertical"] {
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}
.proyecto-imagen-destacada[data-shape="vertical"] img {
  max-height: min(calc(var(--view-h) * 1.3), 1250px);
}

/* Degradado de marca como muestra de color continua */
.ficha-degradado {
  height: clamp(3.5rem, 7vw, 5.5rem);
  max-width: 1100px;
  margin-bottom: 1.5rem;
  background: var(--grad);
}

/* Logotipos sobre papel, en pareja (antes/después sin texto al pie) */
.ficha-ad--logo .ficha-ad-cuadro {
  aspect-ratio: 4 / 3;
  padding: 6%;
}

/* Submarcas: misma familia, distinto color */
.ficha-submarcas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
}
.ficha-submarca {
  margin: 0;
}
.ficha-submarca-img {
  position: relative;
  aspect-ratio: 1;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--border);
  border-bottom: 4px solid var(--c);
}
.ficha-submarca-img img {
  position: absolute;
  inset: 14%;
  width: 72%;
  height: 72%;
  object-fit: contain;
}
.ficha-submarca figcaption {
  margin-top: 0.9rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.ficha-submarca figcaption b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(1.3rem * var(--display-scale));
  text-transform: uppercase;
  line-height: 1;
  color: var(--text);
}
.ficha-submarca-hex {
  display: block;
  margin: 0.3rem 0 0.4rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--text);
}
@media (max-width: 900px) {
  .ficha-submarcas {
    grid-template-columns: 1fr 1fr;
  }
}

/* Claims de Copacabana: marco blanco sobre negro, último verbo en rojo.
   Colores de marca (contenido), no del tema. */
.ficha-claims {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.ficha-claim {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: min(100%, 300px);
  aspect-ratio: 1;
  padding: 2rem;
  background: #000;
  border: 10px solid #000;
  box-shadow: inset 0 0 0 6px #fff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}
.ficha-claim-fin {
  font-weight: 700;
  color: var(--rojo);
}

/* Etiquetas en Archivo expandida. Google Fonts sirve solo la instancia
   de anchura 112 %, así que el navegador la usa sin declarar font-stretch.
   Cifras tabulares para que relojes y contadores no bailen. */
.hero-clock,
.rp-pre-count,
.ficha-color-valor,
.sobre-num-label {
  font-variant-numeric: tabular-nums;
}

/* Header en móvil: sin hueco superior.
   - padding-top con la zona segura (iPhone con notch, viewport-fit=cover)
   - un faldón del mismo color por encima, para que el rebote del scroll o
     la barra del navegador nunca dejen ver el contenido entre la pantalla
     y la cabecera
   - fondo opaco: el desenfoque translúcido dejaba ver el hero por arriba */
header {
  padding-top: calc(1.1rem + env(safe-area-inset-top, 0px));
}
header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 120px;
  background: var(--bg);
}
@media (max-width: 960px) {
  header {
    background: var(--bg);
    backdrop-filter: none;
  }
}

/* ══════════════════════════════════════
   20. ÍNDICE DE TRABAJOS (home)

   Acceso a /trabajo/ tras los destacados. Índice tipográfico agrupado por
   disciplina: la disciplina en grande a la izquierda, sus proyectos con
   el año a la derecha. Al pasar por una fila, una miniatura sigue al
   cursor (.indice-preview, rp-main.js 3b). Cierra con un enlace a todo
   el ancho hacia Trabajos.
══════════════════════════════════════ */
.indice {
  position: relative;
  padding: clamp(4rem, 9vw, 7.5rem) var(--gutter) 0;
  border-top: 1px solid var(--border);
}
.indice-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 2rem;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.indice-cabecera .work-eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
.indice-titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(clamp(3rem, 7vw, 6.5rem) * var(--display-scale));
  line-height: var(--display-line);
  text-transform: uppercase;
  color: var(--text);
}
.indice-titulo em {
  font-style: normal;
  color: var(--highlight);
}
.indice-intro {
  max-width: 34ch;
  justify-self: end;
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.indice-grupo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2rem;
  padding: 1.6rem 0 2.2rem;
  border-top: 1px solid var(--border);
}
.indice-cat {
  align-self: start;
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(clamp(2.4rem, 5vw, 4.4rem) * var(--display-scale));
  line-height: 0.92;
  text-transform: uppercase;
}
.indice-cat a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.25s;
}
.indice-cat a:hover {
  color: var(--highlight);
}
.indice-cat sup {
  margin-left: 0.4rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  vertical-align: top;
}
.indice-lista {
  list-style: none;
}
.indice-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 5.5rem;
  align-items: baseline;
  gap: 1rem;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  transition:
    padding 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.25s;
}
.indice-lista li:first-child .indice-fila {
  padding-top: 0.2rem;
}
.indice-nombre {
  font-family: var(--sans);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  font-weight: 500;
}
.indice-disc,
.indice-anio {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.indice-anio {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .indice-fila:hover {
    padding-left: 0.9rem;
    color: var(--highlight);
  }
  /* Las demás filas del grupo se apagan: el ojo va a la señalada */
  .indice-lista:hover .indice-fila:not(:hover) {
    color: var(--text-muted);
  }
}

/* Miniatura que sigue al cursor */
.indice-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: clamp(200px, 20vw, 300px);
  aspect-ratio: 4 / 5;
  max-height: 60vh;
  pointer-events: none;
  opacity: 0;
  scale: 0.85;
  transition:
    opacity 0.25s,
    scale 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.indice-preview.is-on {
  opacity: 1;
  scale: 1;
}
.indice-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.45);
}

/* Acceso a Trabajos: una franja a todo el ancho */
.indice-cta {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin: clamp(2rem, 5vw, 3.5rem) calc(var(--gutter) * -1) 0;
  padding: clamp(1.6rem, 3.5vw, 2.6rem) var(--gutter);
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
  transition: background 0.3s;
}
.indice-cta-txt {
  font-family: var(--display);
  font-size: calc(clamp(2rem, 5.5vw, 5rem) * var(--display-scale));
  line-height: 0.95;
  text-transform: uppercase;
}
.indice-cta-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  align-self: flex-start;
  margin-top: 0.4rem;
}
.indice-cta-flecha {
  margin-left: auto;
  font-family: var(--sans);
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.indice-cta:hover {
  background: var(--highlight);
}
.indice-cta:hover .indice-cta-flecha {
  transform: translateX(0.6rem);
}

@media (max-width: 900px) {
  .indice-cabecera,
  .indice-grupo {
    grid-template-columns: 1fr;
  }
  .indice-intro {
    justify-self: start;
  }
  .indice-grupo {
    gap: 1rem;
  }
  .indice-fila {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .indice-disc {
    display: none;
  }
}

/* ══════════════════════════════════════
   SOBRE — CLIENTES EN CINTA
   Dos cintas infinitas en sentidos opuestos. Cada pista lleva seis
   copias de su grupo (solo la primera es legible para lectores de
   pantalla) y se desplaza la mitad de su ancho, así el bucle no tiene
   costura. Para que no aparezca un hueco, la mitad de la pista (tres
   grupos) debe medir más que la pantalla más ancha: si se reduce el
   cuerpo de letra o se quitan nombres, comprobarlo.
   Ojo con clamp(mín, ideal, máx): si mín > máx, gana siempre el mínimo.
   Se detiene al pasar el ratón; con movimiento reducido vuelve a ser una
   lista estática.
══════════════════════════════════════ */
.sobre-clientes {
  padding: 4rem 0 4.5rem;
}
.sobre-clientes-inner {
  padding: 0 var(--gutter);
}
.clientes-cinta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 1.25rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clientes-pista {
  display: flex;
  width: max-content;
  animation: rpCinta var(--dur, 48s) linear infinite;
}
.clientes-pista--inversa {
  animation-direction: reverse;
}
.clientes-cinta:hover .clientes-pista {
  animation-play-state: paused;
}
.clientes-grupo {
  display: flex;
  align-items: center;
  list-style: none;
}
.clientes-grupo li {
  display: flex;
  align-items: center;
  font-family: var(--display);
  font-size: calc(clamp(1.1rem, 2.2vw, 1.5rem) * var(--display-scale));
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  transition: color 0.25s;
}
/* Separador: un punto en el color de acento */
.clientes-grupo li::after {
  content: "";
  width: 0.16em;
  height: 0.16em;
  margin: 0 0.55em;
  border-radius: 50%;
  background: var(--highlight);
}
/* La segunda cinta, hueca: solo el contorno */
.clientes-pista--inversa .clientes-grupo li {
  color: transparent;
  -webkit-text-stroke: 1px var(--text-muted);
}
@media (hover: hover) {
  .clientes-grupo li:hover {
    color: var(--highlight);
    -webkit-text-stroke: 0;
  }
}
@keyframes rpCinta {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .clientes-cinta {
    -webkit-mask-image: none;
    mask-image: none;
    padding: 0 var(--gutter);
  }
  .clientes-pista {
    width: auto;
    animation: none;
  }
  .clientes-pista .clientes-grupo {
    flex-wrap: wrap;
  }
  .clientes-pista .clientes-grupo[aria-hidden="true"] {
    display: none;
  }
  .clientes-grupo li {
    font-size: calc(clamp(1.4rem, 2.6vw, 2.2rem) * var(--display-scale));
  }
}