/* ════════════════════════════════════════════════════════════════════════
   style-2026.css — Hoja de estilo única del portfolio
   ────────────────────────────────────────────────────────────────────────
   FUSIÓN DE:
     · styles/style-2025.css                 (base: :root, reset, tipografía)
     · styles/home-additions-2026_1524.css   (interacciones 2026)
     · <style> inline de demo-interacciones_1524.html  (layout de demo)

   Orden corregido: BASE primero, ADICIONES después. En el HTML original
   style-2025.css se cargaba la ÚLTIMA, así que la hoja base pisaba a las
   adiciones en cualquier empate de especificidad. Aquí ya no puede pasar.

   ÍNDICE
     0 · Variables (:root)
     1 · Reset y base
     2 · Tipografía y utilidades compartidas
     3 · Layout de sección
     4 · Hero tipográfico
     5 · Marquee de keywords
     6 · Statement reveal
     7 · Experience: timeline horizontal
     8 · Project cards
     9 · CTA pill
    10 · About: fotos con swap
    11 · Footer
    12 · [COMENTADO] Writing: cards de artículos — pendiente de HTML
    13 · [COMENTADO] CEMENTERIO — reglas muertas del portfolio anterior

   DEDUPLICADO EN LA FUSIÓN
     · `.xp { position: relative }` estaba en el <style> inline Y en
       home-additions. Se conserva una sola vez (§7).
     · Las dos `@import url("fonts.googleapis...")` de style-2025.css se
       han ELIMINADO: el HTML ya carga Open Sans y Vollkorn con <link>
       (que además permite preconnect y no bloquea el CSSOM como @import).
       Se descargaban dos veces. Orbitron se pedía y no se usaba en
       ninguna regla: fuera.
     · `@keyframes autoRun` estaba declarado dos veces dentro de
       style-2025.css. Muerto, va al cementerio (§13).

   NOTA: las parejas `html.reduce-motion X` + `@media (prefers-reduced-
   motion) X` NO son duplicados: la primera responde al toggle del footer,
   la segunda a la preferencia del sistema. Se conservan ambas.
   ════════════════════════════════════════════════════════════════════════ */


/* ═══ 0 · VARIABLES ══════════════════════════════════════════════════════
   Origen: style-2025.css. Es el único :root del proyecto — las adiciones
   2026 consumen 7 de estas variables y no definen ninguna propia salvo
   --xp-card-w (local a .xp__track).                                       */

:root {
  --white: #FFFFFF;
  --main-color: #fe6952;              /* DEMO #b8463a */
  --background-section-2: #e8e8e8;    /* DEMO #221f1c */
  --background-body: #E5E5E5;         /* DEMO #fdfcfa */
  --shadow-color: #c5c5c5;            /* DEMO rgba(34, 31, 28, 0.35) */
  --text-color: #25283B;

  --title-font: "Vollkorn", Georgia, serif;
  --text-font: "Open Sans", system-ui, sans-serif;

  --font-size-text: 1em;
  --font-size-title: 7em;
  --border-r: 0.5em;

  /* --footer-h NUNCA estaba definida, pero #about la usaba:
       padding: 2rem 0 calc(var(--footer-h) + 2rem);
     Un var() sin valor ni fallback invalida TODA la declaración → #about
     se quedaba sin padding. Aquí se define; ajusta la altura real de tu
     footer si hace falta. */
  --footer-h: 72px;

  /* --font-size-categories y --second-color solo las usaba el marcado
     antiguo (#view-project). Eliminadas: ver §13. */
}


/* ═══ 1 · RESET Y BASE ═══════════════════════════════════════════════════ */

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

body {
  font-family: var(--text-font), sans-serif;
  font-weight: 300;
  background: var(--background-body);
  color: var(--text-color);
  margin: 0;
}

section {
  /* OJO: 100vw incluye el ancho de la barra de scroll → puede provocar
     overflow horizontal en Windows. Si ves una barra abajo, cambia a
     `width: 100%`. Se conserva 100vw para no alterar el layout actual. */
  width: 100vw;
  position: relative;
  box-sizing: border-box;
}

img {
  border-radius: var(--border-r);
}

a {
  color: var(--main-color);
  font-size: var(--font-size-text);
}

p {
  font-size: var(--font-size-text);
  color: var(--text-color);
  margin: 0 0 0.7rem 0;
  letter-spacing: 0.05rem;
  line-height: 1.5rem;
}

h1, h3, h5, .main-title { font-family: var(--title-font); }
h2, h4, h6            { font-family: var(--text-font); }


/* ═══ 2 · TIPOGRAFÍA Y UTILIDADES COMPARTIDAS ════════════════════════════ */

.tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 0.3rem 0.8rem;
  margin-bottom: 1.6rem;
}

.tag.main-color {
  color: var(--white);
  background: var(--main-color);
}

.main-title {
  /* Responsive: se mantiene el 7em en desktop pero se acota en móvil para que
     títulos como "Experience"/"Selected work" no desborden (scroll horizontal). */
  font-size: clamp(2.6rem, 11vw, var(--font-size-title));
  line-height: 80%;
  margin: 0 0 1.5rem 0;
  overflow-wrap: break-word;
}

.main-title::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  background: var(--main-color);
  margin-top: 0.4rem;
  border-radius: 2px;
}

/* Animación de entrada del bloque de introducción */
@keyframes outer-left {
  from { transform: translateX(30%); }
  to   { transform: none; }
}


/* ═══ 3 · LAYOUT DE SECCIÓN ══════════════════════════════════════════════
   Origen: <style> inline del HTML. Marcado como "SOLO DEMO", pero
   .demo-section se usa en 6 secciones reales del index: si integras esto
   en el index definitivo, renombra a algo como .section-wrap en vez de
   borrarlo.                                                               */

.demo-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.2rem, 4vw, 2.5rem);
}

.demo-note {
  font-size: 0.82rem;
  opacity: 0.65;
  max-width: 46em;
  margin-top: 1.4rem;
}

#introduction-box {
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  align-content: center;
  width: 100%;
  /* El fondo del hero termina en el color del body: así no hay línea de corte
     con la sección siguiente y el color fluye. La malla va sobre esta base. */
  background: linear-gradient(180deg, #eef5f7 0%, #eef5f7 62%, var(--background-body) 100%);
  color: var(--text-color);
}

.title {
  grid-column: 1 / -1;
  grid-row: 1;
  font-family: var(--title-font);
  font-size: var(--font-size-title);
  width: 100%;
  z-index: 2;
  animation: outer-left 1s 1s ease both;
}

#about {
  padding: 2rem 0 calc(var(--footer-h) + 2rem);
}


/* ═══ 4 · HERO TIPOGRÁFICO ═══════════════════════════════════════════════
   Titular a escala display. Cada línea entra con clip + rise escalonado en
   el load (no scroll-driven: el index usa scroll-snap y no conviene
   secuestrar el gesto).                                                    */

.hero-type {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

.hero-type__kicker {
  font-family: var(--text-font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--main-color);
  margin-bottom: 1.4rem;
}

.hero-type__title {
  font-family: var(--title-font);
  font-weight: 900;
  font-size: clamp(2.45rem, 9.5vw, 7.6rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--text-color);
  margin: 0;
}

/* Cada línea vive en su propia "ventana" para el clip-reveal */
.hero-type__line {
  display: block;
  overflow: hidden;
}

.hero-type__line > span {
  display: inline-block;
  transform: translateY(110%);
  animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--line-delay, 0s);
}

/* Línea de contrapunto: itálica, sin caps, en acento */
.hero-type__line--accent > span {
  font-style: italic;
  font-weight: 600;
  text-transform: none;
  color: var(--main-color);
}

@keyframes hero-rise {
  to { transform: translateY(0); }
}

.hero-type__sub {
  font-family: var(--text-font);
  font-weight: 300;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  max-width: 34em;
  margin-top: 1.8rem;
  opacity: 0;
  animation: hero-fade 0.8s ease 0.85s forwards;
}

@keyframes hero-fade {
  to { opacity: 1; }
}

html.reduce-motion .hero-type__line > span,
html.reduce-motion .hero-type__sub {
  animation: none;
  transform: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-type__line > span,
  .hero-type__sub {
    animation: none;
    transform: none;
    opacity: 1;
  }
}


/* ═══ 5 · MARQUEE DE KEYWORDS ════════════════════════════════════════════
   Cinta infinita con el posicionamiento (Growth · Conversion ·
   Behavioral…). La pista se duplica en el HTML (aria-hidden en la copia)
   para el loop. Pausa en hover/focus.                                      */

.kw-marquee {
  overflow: hidden;
  border-top: 1px solid var(--background-section-2);
  border-bottom: 1px solid var(--background-section-2);
  padding: 0.85rem 0;
  margin-top: 3rem;
}

.kw-marquee__track {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  animation: kw-scroll 28s linear infinite;
}

.kw-marquee:hover .kw-marquee__track,
.kw-marquee:focus-within .kw-marquee__track {
  animation-play-state: paused;
}

.kw-marquee__group {
  display: flex;
  gap: 2.5rem;
  align-items: baseline;
  flex-shrink: 0;
}

.kw-marquee__item {
  font-family: var(--title-font);
  font-size: 1.05rem;
  font-style: italic;
  white-space: nowrap;
  color: var(--text-color);
}

.kw-marquee__item::after {
  content: "·";
  color: var(--main-color);
  margin-left: 2.5rem;
  font-style: normal;
}

@keyframes kw-scroll {
  to { transform: translateX(-50%); }
}

html.reduce-motion .kw-marquee__track,
html.reduce-motion .kw-marquee:hover .kw-marquee__track {
  animation: none;
  width: auto;
  flex-wrap: wrap;
}

/* Con la cinta parada, la copia del loop sobra */
html.reduce-motion .kw-marquee__group[aria-hidden="true"] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .kw-marquee__track { animation: none; width: auto; flex-wrap: wrap; }
  .kw-marquee__group[aria-hidden="true"] { display: none; }
}


/* ═══ 6 · STATEMENT REVEAL PALABRA A PALABRA ═════════════════════════════
   Un único párrafo-manifiesto cuyo texto "se enciende" según el progreso
   de scroll del bloque. JS marca .is-lit en cada <span>. Sin JS o con
   reduce-motion: texto pleno (el estado atenuado solo existe si JS añade
   .st-ready).                                                              */

.statement {
  font-family: var(--title-font);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.32;
  max-width: 24em;
  color: var(--text-color);
}

.statement.st-ready .statement__w {
  opacity: 0.16;
  transition: opacity 0.35s ease;
}

.statement.st-ready .statement__w.is-lit {
  opacity: 1;
}

.statement__w--accent {
  color: var(--main-color);
  font-style: italic;
}

html.reduce-motion .statement.st-ready .statement__w,
html.reduce-motion .statement.st-ready .statement__w.is-lit {
  opacity: 1;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .statement.st-ready .statement__w { opacity: 1; transition: none; }
}


/* ═══ 7 · EXPERIENCE: TIMELINE HORIZONTAL ════════════════════════════════
   Scroll horizontal NATIVO (overflow-x + snap-x): swipe en móvil,
   trackpad, shift+rueda, teclado y botones prev/next. No secuestra el
   scroll vertical, así convive con el snap del index. La tarjeta centrada
   recibe .is-active desde el JS (que mantiene el índice como estado, no
   derivado de un IntersectionObserver).                                    */

/* DEDUP: esta regla estaba también en el <style> inline del HTML. */
.xp {
  position: relative;
}

.xp__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.2rem;
}

.xp__nav {
  display: flex;
  gap: 0.5rem;
}

.xp__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--text-color);
  background: transparent;
  color: var(--text-color);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.xp__btn:hover,
.xp__btn:focus-visible {
  background: var(--text-color);
  color: var(--white);
}

.xp__btn:disabled {
  opacity: 0.25;
  cursor: default;
  background: transparent;
  color: var(--text-color);
}

/* Hint direccional: "2013 → today" con flecha en nudge. Comunica que es un
   timeline, la dirección y el rango. Se auto-descarta al primer scroll del
   track (JS añade .is-dismissed).                                          */

.xp__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 0.4rem;
  font-family: var(--text-font);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--main-color);
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.xp__hint.is-dismissed { opacity: 0; }

.xp__hint svg {
  display: block;
  animation: xp-nudge 1.7s ease-in-out infinite;
}

@keyframes xp-nudge {
  0%, 100% { transform: translateX(0);   opacity: 0.55; }
  50%      { transform: translateX(8px); opacity: 1; }
}

html.reduce-motion .xp__hint svg { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .xp__hint svg { animation: none; }
}

.xp__track {
  /* Ancho de tarjeta como variable: lo necesitan el padding lateral
     (abajo) y el flex-basis de .xp-card. Un único punto de verdad. */
  --xp-card-w: clamp(258px, 36vw, 400px);

  position: relative;
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;

  /* FIX 1 — Padding lateral = medio scrollport menos media tarjeta.
     Sin él, `scroll-snap-align: center` pide para la PRIMERA tarjeta un
     scrollLeft negativo y para la ÚLTIMA uno mayor que el máximo: esos dos
     snap points son inalcanzables, así que la última tarjeta nunca se
     centra y queda cortada contra el borde derecho. */
  padding: 3.2rem max(0.2rem, calc(50% - var(--xp-card-w) / 2)) 1.4rem;

  scrollbar-width: none;   /* la navegación la cubren swipe, botones y teclado */

  /* Desvanecido suave en los bordes del scroll: las tarjetas se disuelven al
     entrar/salir en vez de cortarse en seco. Solo afecta al render, no a la
     animación ni al scroll-snap. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);

  /* FIX 2 — La línea de tiempo como background, no como ::before. Un
     pseudo-elemento absolute dentro de un scroll container scrollea con el
     contenido (se iba de pantalla). El background se pinta contra el
     padding box y NO se mueve. top = padding-top (3.2rem) − offset del nodo. */
  background-image: linear-gradient(
    var(--background-section-2),
    var(--background-section-2)
  );
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 2.15rem;
}

.xp__track::-webkit-scrollbar { display: none; }

.xp-card {
  position: relative;
  scroll-snap-align: center;
  flex: 0 0 var(--xp-card-w);
  background: var(--white);
  border: 1px solid var(--background-section-2);
  border-radius: 14px;
  padding: 1.5rem 1.5rem 1.7rem;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.45s ease,
    color 0.45s ease,
    box-shadow 0.45s ease,
    opacity 0.45s ease,
    filter 0.45s ease;
  opacity: 0.45;
  filter: blur(1.5px);
}

/* Nodo sobre la línea de tiempo */
.xp-card::before {
  content: "";
  position: absolute;
  top: -1.05rem;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--background-section-2);
  transition: background 0.45s ease, box-shadow 0.45s ease;
}

.xp-card.is-active {
  opacity: 1;
  filter: blur(0);
  transform: translateY(-0.9rem);
  background: var(--text-color);
  color: var(--white);
  box-shadow: 0 22px 44px -18px var(--shadow-color);
}

.xp-card.is-active::before {
  background: var(--main-color);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--main-color) 18%, transparent);
}

/* Año gigante: Vollkorn itálica desbordando tras el contenido */
.xp-card__year {
  position: absolute;
  top: -0.55em;
  right: 0.18em;
  font-family: var(--title-font);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(3.4rem, 6.5vw, 5.2rem);
  line-height: 1;
  /* Opaco: mismo tono que navy al 28% sobre el fondo, pero SIN transparencia,
     así el número no deja ver el corte del borde de la tarjeta. */
  color: color-mix(in srgb, var(--text-color) 28%, var(--background-body));
  pointer-events: none;
  transition: color 0.45s ease;
  z-index: 0;
}

.xp-card.is-active .xp-card__year {
  color: var(--main-color);
}

/* La regla global `p { color: var(--text-color) }` pisa el color heredado,
   dejando texto navy sobre fondo navy en la tarjeta activa. Lo forzamos. */
.xp-card.is-active .xp-card__org,
.xp-card.is-active .xp-card__desc {
  color: var(--white);
}

.xp-card__label {
  position: relative;
  z-index: 1;
  font-family: var(--text-font);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--main-color);
  margin: 0 0 2.6rem;
}

.xp-card__role {
  position: relative;
  z-index: 1;
  font-family: var(--title-font);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.xp-card__org {
  position: relative;
  z-index: 1;
  font-family: var(--text-font);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.62;
  margin: 0 0 0.9rem;
}

.xp-card__desc {
  position: relative;
  z-index: 1;
  font-family: var(--text-font);
  font-weight: 300;
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}

html.reduce-motion .xp-card,
html.reduce-motion .xp-card.is-active {
  transition: none;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .xp-card, .xp-card.is-active { transition: none; transform: none; filter: none; }
  .xp__track { scroll-behavior: auto; }
}

/* Móvil: tarjetas casi a ancho completo, snap por tarjeta */
@media (max-width: 640px) {
  .xp__track { --xp-card-w: 84vw; }
}


/* ═══ 8 · PROJECT CARDS EDITORIALES ══════════════════════════════════════
   Dos destacados grandes (no mosaico: con 2-3 casos un grid queda vacío).
   Titular display superpuesto, outcome visible en la tarjeta.              */

.proj-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
@media (max-width: 560px) { .proj-grid { grid-template-columns: 1fr; } }

.proj-card {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--white);
  background: var(--text-color);
  aspect-ratio: 4 / 3;
  transition: filter 0.4s ease, opacity 0.4s ease;
}

.proj-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

.proj-card:hover .proj-card__media,
.proj-card:focus-visible .proj-card__media {
  transform: scale(1.045);
  opacity: 0.62;
}

.proj-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.2rem, 3vw, 2rem);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.12) 55%,
    transparent 100%
  );
}

.proj-card__meta {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  font-family: var(--text-font);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}

/* El dato de outcome, visible antes del click */
.proj-card__outcome {
  background: var(--main-color);
  padding: 0.22rem 0.6rem;
  border-radius: 99px;
}

/* Tag de categoría de cada case study. Base recomendada: pill de cristal
   neutro, para que el único acento de color sea el coral del outcome.
   Para color-code por categoría, ver los modificadores opcionales de abajo. */
.proj-card__cat {
  padding: 0.22rem 0.62rem;
  border-radius: 99px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.30);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* OPCIONAL · color-code por categoría (tonos apagados, misma luminosidad,
   texto blanco). Añade una de estas clases al <span class="proj-card__cat">: */
.proj-card__cat--fintech    { background: #3e6b7a; border-color: transparent; }  /* teal pizarra */
.proj-card__cat--behavioral { background: #6b5b8a; border-color: transparent; }  /* violeta apagado */
.proj-card__cat--research   { background: #b07b3c; border-color: transparent; }  /* ámbar tostado */
.proj-card__cat--growth     { background: #4e7c63; border-color: transparent; }  /* verde salvia */

.proj-card__title {
  font-family: var(--title-font);
  font-weight: 900;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  line-height: 1.04;
  margin: 0;
  max-width: 12em;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.proj-card:hover .proj-card__title,
.proj-card:focus-visible .proj-card__title {
  transform: translateY(-0.35rem);
}

.proj-card__cta {
  align-self: flex-start;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 42px;
  padding: 0 1.35rem;
  border-radius: 99px;
  background: var(--text-color);
  color: var(--white);
  overflow: hidden;
  font-family: var(--text-font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 0.9rem;
  opacity: 0;
  transform: translateY(0.4rem);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Sheen igual que .btn-pill, disparado al hacer hover sobre la tarjeta */
.proj-card__cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 34%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100%);
  transform: skewX(-18deg) translateX(-120%);
  pointer-events: none;
}
.proj-card:hover .proj-card__cta::after,
.proj-card:focus-visible .proj-card__cta::after {
  animation: pill-sheen 0.85s ease 0.15s forwards;
}

.proj-card:hover .proj-card__cta,
.proj-card:focus-visible .proj-card__cta {
  opacity: 1;
  transform: translateY(0);
}

.proj-card:focus-visible {
  outline: 3px solid var(--main-color);
  outline-offset: 3px;
}

/* Táctil: sin hover, el CTA debe ser visible de serie */
@media (hover: none) {
  .proj-card__cta {
    opacity: 1;
    transform: none;
  }
}

html.reduce-motion .proj-card__media,
html.reduce-motion .proj-card__title,
html.reduce-motion .proj-card__cta {
  transition: opacity 0.35s ease;
  transform: none !important;
}
html.reduce-motion .proj-card__cta::after { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .proj-card__media,
  .proj-card__title,
  .proj-card__cta {
    transition: opacity 0.35s ease;
    transform: none !important;
  }
}


/* ── Año sobre la tarjeta (Vollkorn itálica, esquina sup. izq.) ── */
.proj-card__year {
  position: absolute;
  top: 1.1rem;
  left: 1.3rem;
  font-family: var(--title-font);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.35s ease;
}

/* ── Tags de clasificación del case study ── */
.proj-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin-top: 0.6rem;
  position: relative;
  z-index: 1;
}

.proj-card__tag {
  font-family: var(--text-font);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--white);
  padding: 0.18rem 0.52rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ── Blur sobre tarjetas no enfocadas (desktop hover) ── */
.proj-grid:has(.proj-card:hover) .proj-card:not(:hover):not(:focus-within) {
  filter: blur(2.5px);
  opacity: 0.62;
}

html.reduce-motion .proj-grid:has(.proj-card:hover) .proj-card:not(:hover) {
  filter: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .proj-grid:has(.proj-card:hover) .proj-card:not(:hover) {
    filter: none;
    opacity: 1;
  }
}


/* ═══ 9 · CTA PILL: SHEEN EN HOVER + ESTADO SUCCESS ══════════════════════
   Estados honestos: idle → success al copiar el email (acción real,
   feedback real). Sin spinner teatral sobre un mailto.                     */

.btn-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0 1.9rem;
  border: none;
  border-radius: 99px;
  background: var(--text-color);
  color: var(--white);
  font-family: var(--text-font);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.35s ease, transform 0.2s ease;
  text-decoration: none;
}

.btn-pill:hover  { transform: translateY(-2px); }
.btn-pill:active { transform: translateY(0); }

.btn-pill:focus-visible {
  outline: 3px solid var(--main-color);
  outline-offset: 3px;
}

/* El sheen: franja de luz que cruza el botón */
.btn-pill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 34%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 100%
  );
  transform: skewX(-18deg) translateX(-120%);
  pointer-events: none;
}

.btn-pill:hover::after,
.btn-pill:focus-visible::after {
  animation: pill-sheen 0.85s ease forwards;
}

@keyframes pill-sheen {
  to { transform: skewX(-18deg) translateX(460%); }
}

.btn-pill.is-success {
  background: var(--main-color);
}

/* Swap de etiquetas idle/success */
.btn-pill__label--success { display: none; }
.btn-pill.is-success .btn-pill__label--idle { display: none; }
.btn-pill.is-success .btn-pill__label--success {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

html.reduce-motion .btn-pill,
html.reduce-motion .btn-pill:hover {
  transform: none;
}

html.reduce-motion .btn-pill::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .btn-pill, .btn-pill:hover { transform: none; }
  .btn-pill::after { display: none; }
}

/* ── Hero CV actions: row con gap, alineados al inicio ── */
.hero-cv-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 2.2rem;
  flex-wrap: wrap;
}

/* ── Botón primario: mismo .btn-pill pero ligeramente más compacto en el hero ── */
.hero-cv-actions__primary {
  min-height: 48px;
  padding: 0 1.6rem;
}

/* ── Variante ghost: borde navy, transparent bg → rellena a navy en hover ──
   Mismo sheen que .btn-pill (heredado del ::after global).
   box-shadow inset en vez de border para no alterar la altura del layout.    */
.btn-pill--ghost {
  background: transparent;
  color: var(--text-color);
  box-shadow: inset 0 0 0 2px var(--text-color);
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.btn-pill--ghost:hover,
.btn-pill--ghost:focus-visible {
  background: var(--text-color);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-pill--ghost:active { transform: translateY(0); }

/* El sheen del ghost dispara cuando el fondo es ya oscuro (en hover),
   así la franja blanca se ve correctamente sobre navy. */
.btn-pill--ghost::after {
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 100%
  );
}

html.reduce-motion .btn-pill--ghost,
html.reduce-motion .btn-pill--ghost:hover {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn-pill--ghost, .btn-pill--ghost:hover { transform: none; }
}


/* ═══ 10 · ABOUT: LAYOUT + PAREJA DE FOTOS CON SWAP ══════════════════════
   Rejilla de 2 columnas (texto | fotos), centradas entre sí, que colapsa a
   1 columna en móvil. Sin dependencias: 6 líneas de CSS Grid, nada de
   framework. Luego, las dos fotos apiladas tipo polaroid con swap.         */

.about-content {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;   /* texto algo más ancho que las fotos */
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  row-gap: clamp(1.2rem, 3vw, 2rem);
  align-items: center;                  /* texto e imágenes centrados entre sí */
}

/* Título + línea: ocupan toda la fila superior, por encima de ambos bloques */
.about-head {
  grid-column: 1 / -1;
}

@media (max-width: 820px) {
  .about-content {
    grid-template-columns: 1fr;         /* apila: título, texto, fotos */
    row-gap: clamp(1.2rem, 6vw, 2rem);
  }
}

.about-photos {
  position: relative;
  width: min(340px, 78vw);
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.about-photos:focus-visible {
  outline: 3px solid var(--main-color);
  outline-offset: 6px;
  border-radius: 6px;
}

.about-photo {
  position: absolute;
  inset: 0;
  margin: 0;
  background: var(--white);
  padding: 0.7rem 0.7rem 2.6rem;  /* marco polaroid: aire para el pie */
  border: 1px solid var(--background-section-2);
  border-radius: 8px;
  /*box-shadow: none;*/
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s ease;
}

.about-photo img {
  width: 100%;
  height: calc(100% - 1.9rem);
  object-fit: cover;
  display: block;
}

.about-photo figcaption {
  font-family: var(--title-font);
  font-style: italic;
  font-size: 0.84rem;
  text-align: center;
  padding-top: 0.55rem;
  color: var(--text-color);
}

/* Estado A: la primera delante, la segunda asoma detrás */
.about-photo:nth-child(1) {
  z-index: 2;
  transform: rotate(-2.5deg);
}

.about-photo:nth-child(2) {
  z-index: 1;
  transform: rotate(3.5deg) translate(7%, -4%) scale(0.96);
}

/* Hover: la trasera se asoma un poco más — affordance */
.about-photos:hover .about-photo:nth-child(2),
.about-photos:focus-visible .about-photo:nth-child(2) {
  transform: rotate(5deg) translate(10%, -6%) scale(0.96);
}

/* Estado B (.is-swapped): se intercambian los papeles */
.about-photos.is-swapped .about-photo:nth-child(1) {
  z-index: 1;
  transform: rotate(-4.5deg) translate(-7%, -4%) scale(0.96);
}

.about-photos.is-swapped .about-photo:nth-child(2) {
  z-index: 2;
  transform: rotate(2deg) translate(0, 0) scale(1);
}

.about-photos.is-swapped:hover .about-photo:nth-child(1),
.about-photos.is-swapped:focus-visible .about-photo:nth-child(1) {
  transform: rotate(-6.5deg) translate(-10%, -6%) scale(0.96);
}

/* Pista de interacción, discreta */
.about-photos__hint {
  position: absolute;
  bottom: -2.1rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--text-font);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--main-color);
  white-space: nowrap;
  pointer-events: none;
}

html.reduce-motion .about-photo {
  transition: none;  /* el swap sigue funcionando, instantáneo */
}

@media (prefers-reduced-motion: reduce) {
  .about-photo { transition: none; }
}


/* ═══ 11 · FOOTER — barra vidrio fija ═════════════════════════════════════
   Footer fijo con efecto "glass" (semitransparente + blur), dentro del
   patrón de marca. Contiene: toggle de animaciones, nombre y RRSS/mailto.
   El body reserva --footer-h abajo para que nada quede oculto tras la barra.
   Respeta html.reduce-motion y prefers-reduced-motion (§ al final).        */

body {
  padding-bottom: var(--footer-h);
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;

  /* Cristal: blanco de marca más translúcido + desenfoque marcado del fondo,
     para que se vea el contenido pasar por detrás y no quede blanquecino. */
  background: rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border-top: 1px solid rgba(37, 40, 59, 0.08);
  box-shadow: 0 -8px 30px -18px var(--shadow-color);
  color: var(--text-color);
  font-family: var(--text-font);
  font-size: var(--font-size-text);
}

/* Fallback: si el navegador no soporta backdrop-filter, opacamos el vidrio
   para conservar la legibilidad (nada de texto sobre casi-transparente). */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  footer { background: rgba(255, 255, 255, 0.94); }
}

.footer-inner {
  max-width: 1100px;
  min-height: var(--footer-h);
  margin: 0 auto;
  padding: 0.6rem clamp(1.2rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ── Bloque nombre + RRSS ─────────────────────────────────────────────── */
.social-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.03rem;
  color: var(--text-color);
}

.social-wrap .rrss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--text-color);
  background: transparent;
  border: 1px solid rgba(37, 40, 59, 0.12);
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.social-wrap .rrss .icon { display: block; }

.social-wrap .rrss:hover,
.social-wrap .rrss:focus-visible {
  color: var(--white);
  background: var(--main-color);
  border-color: var(--main-color);
  transform: translateY(-2px);
}

.social-wrap .rrss:focus-visible {
  outline: 3px solid var(--main-color);
  outline-offset: 2px;
}

/* ── Toggle de animaciones (role="switch") ────────────────────────────── */
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.motion-toggle__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-color);
  opacity: 0.75;
}

.motion-toggle__track {
  position: relative;
  display: block;
  width: 68px;
  height: 28px;
  border-radius: 999px;
  background: var(--main-color);
  transition: background 0.3s ease;
}

/* Etiquetas ON / OFF: absolutas y SIEMPRE en el lado opuesto a la pastilla,
   así nunca quedan tapadas ni descolocadas al cambiar de estado. */
.motion-toggle__on,
.motion-toggle__off {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  transition: opacity 0.2s ease;
  z-index: 1;
}
/* ON: pastilla a la izquierda → etiqueta a la derecha */
.motion-toggle__on  { right: 10px; color: var(--white); opacity: 1; }
/* OFF: pastilla a la derecha → etiqueta a la izquierda */
.motion-toggle__off { left: 10px; color: var(--text-color); opacity: 0; }

/* Pastilla deslizante */
.motion-toggle__thumb {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 6px rgba(37, 40, 59, 0.35);
  transform: translate(0, -50%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}

/* Estado OFF → aria-checked="false": animaciones desactivadas */
.motion-toggle[aria-checked="false"] .motion-toggle__track {
  background: var(--background-section-2);
}
.motion-toggle[aria-checked="false"] .motion-toggle__on  { opacity: 0; }
.motion-toggle[aria-checked="false"] .motion-toggle__off { opacity: 1; }
.motion-toggle[aria-checked="false"] .motion-toggle__thumb {
  transform: translate(40px, -50%);
}

.motion-toggle:focus-visible {
  outline: 3px solid var(--main-color);
  outline-offset: 3px;
  border-radius: 999px;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  :root { --footer-h: 108px; }

  .footer-inner {
    flex-direction: column;
    gap: 0.6rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }
  .social-wrap { font-size: 0.8rem; flex-wrap: wrap; justify-content: center; }
}

/* El thumb no debe animar su transición si el usuario pidió menos motion,
   pero el cambio de estado del toggle SÍ debe verse (es feedback funcional),
   así que solo suavizamos, no eliminamos. Ver bloque reduce-motion global. */
html.reduce-motion .social-wrap .rrss {
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}


/* ═══ 13 · FONDOS AMBIENTE — malla de color + banda con foto (Opción A) ════
   Impacto por capas, no fondo inmersivo global:
     · Hero → malla de gradientes de marca (0 KB, sin imágenes). Deriva lenta,
       gated por html.reduce-motion / prefers-reduced-motion.
     · Banda opcional .photo-band → foto difuminada + scrim que protege el
       contraste (WCAG AA). El blur es estático: no es "motion", así que no
       se desactiva con el toggle; sí se atenúa la deriva de la malla.
   Las áreas de lectura y las miniaturas de proyecto se dejan limpias a
   propósito, para que el fondo no compita con el trabajo.                   */

/* — Malla de color en el hero — */
#introduction-box {
  position: relative;
  overflow: hidden;
  isolation: isolate;                    /* la malla no se cuela tras otras capas */
}

#introduction-box::before {
  content: "";
  position: absolute;
  inset: -18%;                           /* overhang: al derivar nunca asoma el borde */
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 46% at 16% 22%, rgba(254, 105, 82, 0.28), transparent 68%),
    radial-gradient(40% 44% at 84% 16%, rgba(37,  40,  59, 0.16), transparent 70%),
    radial-gradient(52% 56% at 78% 86%, rgba(254, 105, 82, 0.14), transparent 72%),
    radial-gradient(46% 50% at 26% 90%, rgba(120, 158, 178, 0.22), transparent 72%);
  animation: mesh-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}

/* Desvanecido inferior: la malla se disuelve en el color del body antes del
   borde, así no queda un corte seco y el color fluye hacia la sección siguiente.
   Va sobre la malla (z-index 0) y bajo el contenido (.title, z-index 2). */
#introduction-box::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(120px, 18vh, 200px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--background-body));
}

/* El contenido del hero SIEMPRE por encima de la malla */
#introduction-box > .title {
  position: relative;
  z-index: 2;
}

/* Continuidad de color: la primera sección tras el hero prolonga la malla con
   un tinte tenue. Va a SANGRE COMPLETA (100vw) en un pseudo, no sobre la caja
   de .demo-section (que está limitada a 1100px y dejaba bordes "recortados").
   Más padding vertical para que el statement respire. */
.introduction + .demo-section {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4.5rem, 12vh, 8rem);
}
.introduction + .demo-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: clamp(220px, 34vh, 380px);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 100% at 26% 0%, rgba(254, 105, 82, 0.06), transparent 74%),
    radial-gradient(55% 100% at 80% 0%, rgba(120, 158, 178, 0.09), transparent 76%);
}

@keyframes mesh-drift {
  0%   { transform: translate3d(-2%, -1%,  0) scale(1.02); }
  50%  { transform: translate3d( 2%,  1.5%, 0) scale(1.06); }
  100% { transform: translate3d(-1%,  2%,  0) scale(1.03); }
}

/* Toggle / preferencia del sistema: se detiene la deriva, el color se queda */
html.reduce-motion #introduction-box::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
  #introduction-box::before { animation: none; }
}

/* — Banda opcional con foto difuminada + scrim — */
/* ── Línea divisora 1px blanca entre el hero y el statement ── */
.introduction {
  border-bottom: 1px solid #FFFFFF;
}

.photo-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* EDITA: tu foto de fondo. Si no carga, queda el degradado de marca de abajo. */
  --band-image: url("https://images.unsplash.com/photo-1470240731273-7821a6eeb6bd?q=80&w=1600&auto=format&fit=crop");
  background: linear-gradient(135deg, #eef5f7, var(--background-body));
}

/* Foto difuminada (estática): pseudo escalado para que el blur no deje bordes */
.photo-band::before {
  content: "";
  position: absolute;
  inset: -40px;
  z-index: -2;
  background-image: var(--band-image);
  background-size: cover;
  background-position: center;
  filter: blur(18px) saturate(115%);
  transform: scale(1.05);
}

/* Scrim de marca: vela clara que mantiene legible el texto oscuro (AA) +
   un leve bloom coral para no perder identidad. */
.photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(229, 229, 229, 0.74), rgba(229, 229, 229, 0.60)),
    radial-gradient(60% 80% at 82% 18%, rgba(254, 105, 82, 0.12), transparent 70%);
}


/* ════════════════════════════════════════════════════════════════════════
   12 · [COMENTADO] WRITING: CARDS DE ARTÍCULOS
   ────────────────────────────────────────────────────────────────────────
   MUERTAS AHORA MISMO: no existe ningún [data-articles] en el HTML.
   PERO el JS ya trae la sección 4 (fetch de articles.json) lista. Esto NO
   es basura: es CSS por delante del marcado.

   → DESCOMENTA este bloque en cuanto añadas al HTML:
       <div class="art-list" data-articles></div>
     y publiques un articles.json junto al index.
   ════════════════════════════════════════════════════════════════════════ */

/*
.art-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}

.art-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.4rem 1.4rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--background-section-2);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text-color);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
}

.art-card:hover,
.art-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -20px var(--shadow-color);
}

.art-card:focus-visible {
  outline: 3px solid var(--main-color);
  outline-offset: 3px;
}

.art-card__meta {
  font-family: var(--text-font);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--main-color);
  margin: 0;
}

.art-card__title {
  font-family: var(--title-font);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  flex: 1;
}

.art-card__cta {
  font-family: var(--text-font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  opacity: 0.55;
}

html.reduce-motion .art-card,
html.reduce-motion .art-card:hover {
  transition: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .art-card, .art-card:hover { transition: none; transform: none; }
}
*/


/* ════════════════════════════════════════════════════════════════════════
   13 · [COMENTADO] CEMENTERIO — REGLAS MUERTAS DEL PORTFOLIO ANTERIOR
   ────────────────────────────────────────────────────────────────────────
   Origen: styles/style-2025.css. Ninguno de estos selectores encuentra un
   solo elemento en el HTML actual (verificado en Chromium contra el DOM
   real). Corresponden al marcado viejo, el mismo que usaban los 8 scripts
   que ya se eliminaron:

     .slider / .card / .logo        → scroll-navigation.js
     #view-project                  → view-project.js
     .infinite-scroll / .wrap-scroll→ marquee antiguo (hoy: .kw-marquee)
     .intro-text / .introduction-img→ hero antiguo (hoy: .hero-type)
     .button                        → botón antiguo (hoy: .btn-pill)
     .custom-shape-divider-bottom   → divisor SVG que ya no está

   Se dejan comentadas por si rescatas alguna. Si al cabo de un par de
   commits no las has tocado, borra el bloque entero de un tajo.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Botón antiguo (sustituido por .btn-pill, §9) ──
.button {
  padding: 0.7em 1.7em;
  border-radius: var(--border-r);
  background: var(--background-section-2);
  cursor: pointer;
  border: 1px solid var(--background-section-2);
  transition: all 0.3s;
  box-shadow: 6px 6px 12px var(--shadow-color), -6px -6px 12px var(--white);
}

.button > a {
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--main-color);
  filter: brightness(95%);
  text-align: center;
}

.button:active > a,
.button:hover > a {
  color: var(--main-color);
  filter: brightness(75%);
}

.button:active,
.button:hover {
  box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
}

.button:hover {
  cursor: pointer;
  box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
}
── */

/* ── Utilidad de fondo sin usar ──
.bck-soft {
  background-color: var(--background-section-2);
}
── */

/* ── Hero antiguo con foto de stock (sustituido por .hero-type, §4) ──
.intro-text {
  animation: outer-left 1s 1s cubic-bezier(0.5, 0, 0.1, 1) both;
}

.introduction-img {
  grid-row: 1;
  grid-column: 2;
  opacity: 0.7;
  animation: image-in 1s cubic-bezier(0.5, 0, 0.1, 1) 2s backwards;
}

.introduction-img img {
  height: 100vh;
}

@keyframes image-in {
  from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
── */

/* ── Vista de proyecto (view-project.js, ya eliminado) ──
   Nota: usaba --font-size-categories, variable retirada del :root.

#view-project .text-content-project .main-title { opacity: 0; }

#view-project .text-content-project .categories-projects {
  font-size: 2em;
  font-family: var(--text-font);
  padding-bottom: 0.5em;
  border-bottom: 4px solid var(--main-color);
  box-sizing: border-box;
  opacity: 0;
}

#view-project .text-content-project p      { opacity: 0; }
#view-project .text-content-project .button{ opacity: 0; }

#view-project img {
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  animation: appeareContentLeft 1s ease-in-out 1.5s 1 forwards;
}

.intro-animation-from-bottom {
  animation: appeareContentBottom 1s ease-in-out var(--time) 1 forwards;
}

@keyframes appeareContentBottom {
  from { opacity: 0; transform: translate(0, 100px); filter: blur(33px); }
  to   { opacity: 1; transform: translate(0);        filter: blur(0); }
}

@keyframes appeareContentLeft {
  from { opacity: 0; transform: translate(100px, 0); filter: blur(33px); }
  to   { opacity: 1;                                 filter: blur(0); }
}
── */

/* ── Carrusel de proyectos antiguo (sustituido por .proj-grid, §8) ──
.card {
  width: 100%;
  height: 100%;
  border-radius: var(--border-r);
  box-shadow: 8px 8px 13px var(--shadow-color), -8px -8px 13px var(--white);
  text-align: center;
}

.slider {
  width: 100%;
  height: 31vh;
  overflow: hidden;
}

.slider .list {
  display: inline-flex;
  width: 100%;
  min-width: calc(var(--width) * var(--quantity));
  position: relative;
}

.slider .list .item {
  width: var(--width);
  height: var(--height);
  position: absolute;
  left: 100%;
  animation: autoRun 70s linear infinite;
  transition: filter 0.5s;
  animation-delay: calc((70s / var(--quantity)) * (var(--position) - 1) - 70s) !important;
}

.slider .list .item .card img {
  width: 100%;
  border-radius: var(--border-r);
  height: var(--height);
}

.slider:hover .item {
  animation-play-state: paused !important;
  filter: blur(10px);
  transform: scale(0.9, 0.9);
}

.slider .item:hover {
  filter: blur(0);
  transform: scale(1.1, 1.1);
}
── */

/* ── Divisor SVG de sección ──
.custom-shape-divider-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom svg {
  position: relative;
  display: block;
  width: calc(115% + 1.3px);
  height: 17vh;
  padding-bottom: 1vh;
}

.custom-shape-divider-bottom .shape-fill {
  fill: var(--white);
}
── */

/* ── Marquee de skills antiguo (sustituido por .kw-marquee, §5) ──
.wrap-scroll {
  width: 100%;
  display: flex;
  gap: 20px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, var(--white), var(--white), transparent);
}

#about .infinite-scroll {
  list-style: none;
  display: flex;
  align-items: center;
  width: 80%;
  margin-bottom: 0;
  min-height: 11vh;
}

.infinite-scroll.content-phanton li {
  padding: 8px 16px;
  min-width: fit-content;
  margin: 0 8px;
  border-radius: var(--border-r);
  position: relative;
  font-family: var(--text-font);
  font-size: var(--font-size-text);
  background: var(--white);
  box-shadow: 8px 8px 13px var(--shadow-color), -8px -8px 13px var(--white);
}

.logo {
  width: 100%;
  min-height: 30px;
}

.content-phanton {
  flex: 0 0 auto;
  min-width: 100%;
  height: 35px;
  display: flex;
  gap: 20px;
  animation: autoRun 70s linear infinite;
  animation-delay: calc((70s / var(--numbSkill)) * (var(--positionList) - 1) - 70s) !important;
}

@keyframes autoRun {
  from { left: 100%; }
  to   { left: calc(var(--width) * -1); }
}

@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
── */


/* ═══ 14 · CASE STUDY — plantilla de caso en detalle ═════════════════════
   Página independiente (caso-1.html): duplicar y editar para cada caso.
   Reutiliza tokens y componentes del index (.tag, .main-title, .btn-pill,
   .demo-section, malla del hero). Namespacing: todo con prefijo .case-.
   Toda animación va emparejada con html.reduce-motion + prefers-reduced.  */

/* — Envoltura de página: hueco para el footer fijo + sin scroll horizontal.
   overflow-x:hidden neutraliza el pelín de desbordamiento que el 100vw de las
   tomas a sangre puede provocar cuando hay barra de scroll (Windows). El footer
   es position:fixed, no lo recorta. — */
.case-page {
  padding-bottom: calc(var(--footer-h) + 2.5rem);
  overflow-x: hidden;
}

/* — 14.1 · Hero del caso (atmósfera de malla, eco del hero del index) — */
.case-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #eef5f7 0%, #eef5f7 58%, var(--background-body) 100%);
  padding-block: clamp(3.5rem, 10vh, 7rem);
}
.case-hero::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 46% at 16% 22%, rgba(254, 105, 82, 0.26), transparent 68%),
    radial-gradient(40% 44% at 84% 16%, rgba(37,  40,  59, 0.14), transparent 70%),
    radial-gradient(52% 56% at 78% 86%, rgba(254, 105, 82, 0.12), transparent 72%),
    radial-gradient(46% 50% at 26% 90%, rgba(120, 158, 178, 0.20), transparent 72%);
  animation: mesh-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
.case-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(100px, 15vh, 180px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--background-body));
}
.case-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: clamp(1.2rem, 4vw, 2.5rem);
}

/* Enlace de vuelta */
.case-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--text-font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-color);
  text-decoration: none;
  opacity: 0.75;
  margin-bottom: 1.8rem;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.case-back:hover,
.case-back:focus-visible { opacity: 1; transform: translateX(-3px); }
.case-back:focus-visible { outline: 3px solid var(--main-color); outline-offset: 3px; border-radius: 4px; }

.case-hero__title {
  font-family: var(--title-font);
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.5px;
  max-width: 15ch;
  margin: 0.4rem 0 1.4rem;
}
.case-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  font-family: var(--text-font);
  font-size: 0.86rem;
  letter-spacing: 0.3px;
  opacity: 0.85;
  margin: 0;
}
.case-hero__meta span { position: relative; }
.case-hero__meta span + span::before {
  content: "·";
  position: absolute;
  left: -0.72rem;
  opacity: 0.5;
}

/* Métrica destacada del hero */
.case-hero__metric {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 1.8rem;
  padding: 0.7rem 1.2rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--white) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.case-hero__metric b {
  font-family: var(--title-font);
  font-weight: 800;
  font-size: 1.9rem;
  color: var(--main-color);
  line-height: 1;
}
.case-hero__metric span {
  font-family: var(--text-font);
  font-size: 0.8rem;
  letter-spacing: 0.4px;
  opacity: 0.8;
}

/* — 14.2 · Snapshot: ficha de datos (rol / equipo / plazos…) — */
.case-snapshot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 1px;
  background: var(--background-section-2);
  border: 1px solid var(--background-section-2);
  border-radius: 16px;
  overflow: hidden;
}
.case-snapshot__cell {
  background: var(--white);
  padding: 1.1rem 1.2rem;
}
.case-snapshot__k {
  display: block;
  font-family: var(--text-font);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--main-color);
  margin-bottom: 0.35rem;
}
.case-snapshot__v {
  font-family: var(--text-font);
  font-size: 0.92rem;
  line-height: 1.35;
  margin: 0;
}

/* — 14.3 · Secciones de contenido: eyebrow + título + prosa — */
.case-eyebrow {
  display: inline-block;
  font-family: var(--text-font);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--main-color);
  margin-bottom: 0.7rem;
}
.case-eyebrow b { color: var(--text-color); opacity: 0.45; margin-right: 0.5rem; }

.case-h2 {
  font-family: var(--title-font);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  line-height: 1.08;
  margin: 0 0 1.2rem;
}
.case-prose { max-width: 65ch; }
.case-prose p { margin: 0 0 1rem; line-height: 1.7; font-weight: 300; }
.case-prose p:last-child { margin-bottom: 0; }
.case-prose em { color: var(--main-color); font-style: italic; }
.case-prose strong { font-weight: 700; }

/* — 14.4 · Pull-quote — */
.case-quote {
  max-width: 22ch;
  margin: clamp(1.5rem, 5vw, 3rem) 0;
  padding-left: 1.4rem;
  border-left: 4px solid var(--main-color);
  font-family: var(--title-font);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  line-height: 1.25;
}

/* — 14.5 · Proceso: pasos numerados — */
.case-steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
}
.case-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1rem;
  align-items: start;
}
.case-steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--title-font);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--main-color);
  line-height: 1;
  padding-top: 0.1rem;
}
.case-steps h3 {
  grid-column: 2;
  font-family: var(--text-font);
  font-weight: 700;
  font-size: 1.02rem;
  margin: 0 0 0.2rem;
}
.case-steps p { grid-column: 2; margin: 0; line-height: 1.6; font-weight: 300; }

/* — 14.6 · Figuras / mockups (con placeholder mientras no hay imagen) — */
.case-figure { margin: 0; }
.case-figure__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #eef5f7, var(--background-body));
  border: 1px solid var(--background-section-2);
  box-shadow: 0 24px 48px -30px var(--shadow-color);
}
.case-figure__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
/* Placeholder visible: sustitúyelo por un <img> real */
.case-figure__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-family: var(--text-font);
  text-align: center;
  color: color-mix(in srgb, var(--text-color) 45%, var(--background-body));
}
.case-figure__ph b {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.case-figure__ph span { font-size: 0.78rem; opacity: 0.8; }
.case-figure figcaption {
  margin-top: 0.7rem;
  font-family: var(--text-font);
  font-size: 0.8rem;
  opacity: 0.65;
}

/* — 14.7 · Antes / después — */
.case-ba {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
.case-ba__label {
  display: inline-block;
  font-family: var(--text-font);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 0.24rem 0.7rem;
  border-radius: 99px;
  margin-bottom: 0.7rem;
}
.case-ba__label--before { background: var(--background-section-2); color: var(--text-color); }
.case-ba__label--after  { background: var(--main-color); color: var(--white); }

/* — 14.8 · Resultados: rejilla de métricas (evidencia de growth) — */
.case-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
}
.case-stat {
  padding: 1.6rem 1.4rem;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--background-section-2);
}
.case-stat__num {
  font-family: var(--title-font);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1;
  color: var(--text-color);
}
.case-stat__num--accent { color: var(--main-color); }
.case-stat__label {
  font-family: var(--text-font);
  font-size: 0.86rem;
  line-height: 1.4;
  margin: 0.6rem 0 0;
  opacity: 0.8;
}

/* — 14.9 · Navegación entre casos (pie del caso) — */
.case-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-top: clamp(2rem, 5vh, 3.5rem);
  border-top: 1px solid var(--background-section-2);
}
.case-nav__next {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  text-decoration: none;
  color: var(--text-color);
  transition: transform 0.25s ease;
}
.case-nav__next:hover,
.case-nav__next:focus-visible { transform: translateX(4px); }
.case-nav__next:focus-visible { outline: 3px solid var(--main-color); outline-offset: 4px; border-radius: 6px; }
.case-nav__next small {
  font-family: var(--text-font);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--main-color);
  margin-bottom: 0.25rem;
}
.case-nav__next b {
  font-family: var(--title-font);
  font-weight: 700;
  font-size: 1.2rem;
}

/* — 14.10 · Reveal on scroll (genérico, progressive enhancement) —
   Sin JS o con reduce-motion NO se oculta nada: el contenido queda visible.
   El JS añade html.reveal-ready sólo si hay movimiento permitido. */
html.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
html.reveal-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* — reduce-motion: se detiene la malla y se desactivan los reveals — */
html.reduce-motion .case-hero::before { animation: none; }
html.reduce-motion [data-reveal],
html.reduce-motion [data-reveal].is-in {
  opacity: 1 !important;
  transform: none !important;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .case-hero::before { animation: none; }
  html.reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
}


/* ═══ 15 · CASE — variante EDITORIAL + galería + CTA Medium ══════════════
   Fusión con la estética de estudio (Lesse): escala tipográfica grande,
   aire generoso y NARRACIÓN POR IMÁGENES apiladas (algunas a sangre). El
   relato profundo (research, proceso, métricas) vive en Medium: esta página
   es la entrada visual + el enlace. Reutiliza §14 (.case-figure, snapshot)
   y §9 (.btn-pill). Todo con pareja reduce-motion + prefers-reduced.        */

/* — Hero editorial: más aire y título a mayor escala — */
.case-hero--editorial { padding-block: clamp(4.5rem, 15vh, 10rem); }
.case-hero--editorial .case-hero__title {
  font-size: clamp(3rem, 9vw, 6.5rem);
  letter-spacing: -1px;
  max-width: 16ch;
}

/* Kicker: índice/categoría en label pequeño de tracking ancho (tono estudio) */
.case-kicker {
  display: block;
  font-family: var(--text-font);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--main-color);
  margin-bottom: 1.1rem;
}
.case-kicker b { color: var(--text-color); opacity: 0.4; }

/* Tags de disciplina en fila (Brand Identity · UX · …) */
.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin: 1.3rem 0 0;
  font-family: var(--text-font);
  font-size: 0.86rem;
  letter-spacing: 0.3px;
}
.case-tags span { position: relative; opacity: 0.85; }
.case-tags span + span::before {
  content: "·";
  position: absolute;
  left: -0.55rem;
  opacity: 0.5;
}

/* Lede: intro a mayor tamaño, medida cómoda, mucho aire */
.case-lede {
  max-width: 34em;
  margin: clamp(1.8rem, 5vh, 3rem) 0 0;
}
.case-lede p {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.65;
  font-weight: 300;
  margin: 0 0 1rem;
}
.case-lede p:last-child { margin-bottom: 0; }
.case-lede em { color: var(--main-color); font-style: italic; }

/* — CTA a Medium (pill, reutiliza el sistema de .btn-pill vía .btn-pill) — */
.case-medium-cta {
  text-decoration: none;
  margin-top: clamp(2rem, 5vh, 3rem);
}
.case-medium-cta .glyph { width: 18px; height: 18px; flex: none; }

/* — Galería: pila vertical de tomas grandes, ritmo amplio — */
.case-gallery {
  display: grid;
  gap: clamp(1.6rem, 5vh, 4.5rem);
}
.case-shot { margin: 0; }

/* Toma a sangre completa (rompe la caja de .demo-section hacia el viewport).
   Padding-agnóstico: la sección está centrada (margin:0 auto). 100vw incluye
   la barra de scroll en Windows — mismo compromiso ya asumido en el proyecto. */
.case-shot--wide {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
}
.case-shot--wide .case-figure__frame { border-radius: 0; }

/* Par de tomas lado a lado */
.case-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
@media (max-width: 640px) { .case-pair { grid-template-columns: 1fr; } }

/* — Fila de marcos de móvil (pantallas finales, caso-2) —
   Bezel dibujado en CSS. La pantalla no fija alto: la imagen entra a ancho
   completo con height:auto → se ve ENTERA, sin recorte. Alineadas por la base
   ("de pie"), como dispositivos sobre una superficie. */
.case-phones-figure { margin: 0; }
.case-phones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.9rem, 2vw, 1.8rem);
  align-items: end;
}
@media (max-width: 860px) { .case-phones { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) {
  .case-phones { grid-template-columns: 1fr; max-width: 300px; margin-inline: auto; }
}

.case-phone { margin: 0; }
.case-phone__frame {
  position: relative;
  padding: clamp(5px, 0.9vw, 9px);
  border-radius: clamp(22px, 3.4vw, 36px);
  background: linear-gradient(160deg, #23252f, #0c0d13);
  box-shadow:
    0 26px 46px -26px var(--shadow-color),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.case-phone__screen {
  position: relative;
  overflow: hidden;
  border-radius: clamp(16px, 2.7vw, 28px);
  background: #0c0d13;
}
.case-phone__screen img {
  display: block;
  width: 100%;
  height: auto;               /* pantalla completa, sin recorte */
}
.case-phone__label {
  margin: 0.7rem 0 0;
  text-align: center;
  font-family: var(--text-font);
  font-size: 0.8rem;
  opacity: 0.65;
}

/* — Carrusel de pantallas finales (caso-3), en marco de monitor —
   El "device" (bisel navy + peana) se dibuja 100% en CSS: vectorial, sin
   peso de imagen. La pantalla recorta con overflow:hidden, así en reposo
   SOLO se ve la slide activa (ninguna asoma). Al pulsar prev/next, el track
   se traslada con transform → la nueva imagen entra rápido desde el lado
   correspondiente y queda "detrás" del bisel (glass overlay por encima).
   Progressive enhancement: sin JS se ve la primera pantalla; el JS añade
   .is-ready y aparecen flechas + dots. */
.case-monitor {
  position: relative;
  max-width: min(1040px, 92vw);
  margin-inline: auto;
}

/* Cuerpo del monitor: bisel */
.case-monitor__device {
  position: relative;
  padding: clamp(10px, 1.5vw, 18px);
  padding-bottom: clamp(20px, 2.6vw, 34px);       /* barbilla inferior */
  border-radius: clamp(12px, 1.6vw, 20px);
  background: linear-gradient(180deg, #33364c 0%, var(--text-color) 60%, #1b1d2c 100%);
  box-shadow:
    0 34px 60px -32px var(--shadow-color),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

/* Pantalla: recorta el track. AQUÍ vive el efecto "no asoma nada". */
.case-monitor__screen {
  position: relative;
  /* Ventana del monitor. Se fija al ratio de tu imagen MÁS ANCHA (aquí la 4:
     2000×988 ≈ 2.02) para que TODAS se vean a ancho completo sin recorte
     lateral; las más altas se recortan por abajo (object-position: top left).
     Si añades una imagen más ancha que ésta, sube este ratio a la suya. */
  aspect-ratio: 2000 / 988;
  border-radius: 5px;
  overflow: hidden;
  background: #0c0d13;
}

/* Track por transform (no scroll): el JS pone translateX(-index*100%). */
.case-carousel__track {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  transition: transform .42s cubic-bezier(.22, .61, .36, 1);
}
.case-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  position: relative;
}

/* Contenido de cada slide: placeholder limpio hasta que exista el PNG. */
.case-monitor__shot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef5f7, var(--background-body));
}
.case-monitor__shot img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* llena la pantalla; con el ratio correcto NO recorta */
  object-position: top left; /* si sobra algo, recorta por abajo/derecha, nunca por arriba */
}

/* "Cristal": sombra interior del bisel + leve reflejo → sensación de que la
   imagen está DETRÁS del marco. pointer-events:none para no bloquear clics. */
.case-monitor__glass {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 3px 14px rgba(0, 0, 0, 0.4);
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 34%);
}

/* LED de encendido en coral, sobre la barbilla del bisel. */
.case-monitor__led {
  position: absolute;
  right: clamp(14px, 1.8vw, 24px);
  bottom: clamp(6px, 0.9vw, 11px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--main-color);
  box-shadow: 0 0 7px 1px color-mix(in srgb, var(--main-color) 65%, transparent);
}

/* Peana: cuello + base. */
.case-monitor__stand {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.case-monitor__neck {
  width: clamp(74px, 10vw, 120px);
  height: clamp(14px, 2.2vw, 26px);
  background: linear-gradient(180deg, #2a2d40, #1c1e2b);
}
.case-monitor__base {
  width: clamp(150px, 22vw, 250px);
  height: clamp(9px, 1.1vw, 13px);
  border-radius: 40px / 14px;
  background: linear-gradient(180deg, #242634, #15161f);
  box-shadow: 0 16px 22px -16px var(--shadow-color);
}

/* Flechas glassmorphism, superpuestas sobre la pantalla (z sobre el cristal).
   Ocultas hasta que el JS marca .is-ready. */
.case-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 3.4vw, 48px);
  height: clamp(38px, 3.4vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text-color);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
.case-monitor.is-ready .case-carousel__arrow { display: inline-flex; }
.case-carousel__arrow:hover { background: rgba(255, 255, 255, 0.85); }
.case-carousel__arrow:active { transform: translateY(-50%) scale(0.94); }
.case-carousel__arrow:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
}
.case-carousel__arrow:disabled { opacity: 0; pointer-events: none; }
.case-carousel__arrow--prev { left: clamp(0.5rem, 1.4vw, 1rem); }
.case-carousel__arrow--next { right: clamp(0.5rem, 1.4vw, 1rem); }
.case-carousel__arrow svg { width: 46%; height: 46%; }

/* Dots — pill activa en coral. */
.case-carousel__dots {
  display: none;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.case-monitor.is-ready .case-carousel__dots { display: flex; }
.case-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-color) 26%, var(--background-body));
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.case-carousel__dot.is-active { width: 26px; background: var(--main-color); }
.case-carousel__dot:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 3px;
}

/* Sin animación permitida: el deslizamiento es salto instantáneo. */
.reduce-motion .case-carousel__track,
.reduce-motion .case-carousel__arrow,
.reduce-motion .case-carousel__dot { transition: none; }

/* — Banda-CTA Medium destacada (a sangre, navy con bloom coral) — */
.case-medium-band {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  isolation: isolate;
  overflow: hidden;
  background: var(--text-color);
  color: var(--white);
  text-align: center;
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1.2rem, 5vw, 3rem);
}
.case-medium-band::before {
  content: "";
  position: absolute;
  inset: -30% 0 auto auto;
  width: 60%;
  height: 160%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(50% 50% at 70% 30%, rgba(254, 105, 82, 0.28), transparent 70%);
}
.case-medium-band__eyebrow {
  font-family: var(--text-font);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--main-color);
  margin: 0 0 0.9rem;
}
.case-medium-band h2 {
  font-family: var(--title-font);
  font-weight: 800;
  font-size: clamp(1.7rem, 4.5vw, 2.8rem);
  line-height: 1.15;
  max-width: 20ch;
  margin: 0 auto 1.8rem;
  color: var(--white);
}
/* Pill coral (destaca sobre el navy de la banda) */
.case-medium-band .case-medium-cta {
  margin-top: 0;
  background: var(--main-color);
}

/* — Next project (homenaje al bloque de estudio) — */
.case-next {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  border-top: 1px solid var(--background-section-2);
}
.case-next__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vh, 4.5rem) clamp(1.2rem, 4vw, 2.5rem);
}
.case-next__label {
  font-family: var(--text-font);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--main-color);
  margin: 0 0 0.6rem;
}
.case-next__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--text-color);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.case-next__link:hover,
.case-next__link:focus-visible { transform: translateX(6px); }
.case-next__link:focus-visible { outline: 3px solid var(--main-color); outline-offset: 4px; border-radius: 6px; }
.case-next__title {
  font-family: var(--title-font);
  font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1.05;
}
.case-next__arrow { font-size: clamp(1.4rem, 4vw, 2.2rem); color: var(--main-color); }

/* — reduce-motion: se desactivan los desplazamientos — */
html.reduce-motion .case-medium-cta,
html.reduce-motion .case-next__link,
html.reduce-motion .case-next__link:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .case-next__link, .case-next__link:hover { transform: none; }
}