/* ============================================================
   BERGERAC — SECCIONES
   Layout estático primero (sin JS la página completa se lee).
   La coreografía se activa con body.js (progressive enhancement).
   ============================================================ */

/* ================= 01 · HERO ================= */
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--blue);
  color: var(--graphite);
  overflow: clip;
  display: flex;
  flex-direction: column;
}
.hero__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-canvas);
}
/* Composición de un solo viewport: contenido arriba, Bergerac abajo,
   con separación garantizada entre ambos sistemas. */
.hero__layout {
  position: relative;
  z-index: var(--z-content);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(44px, 6vh, 96px);
  padding-top: calc(76px + clamp(24px, 4.5vh, 56px));
  padding-bottom: clamp(14px, 2.4vh, 32px);
  width: 100%;
}
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2.6vh, 30px);
}
.hero__title {
  font-size: clamp(44px, min(5.6vw, 8vh), 84px);
  max-width: 950px;
}
.hero__lead {
  max-width: 660px;
  font-size: clamp(16px, min(1.45vw, 2.3vh), 22px);
  line-height: 1.5;
  font-weight: 500;
}
.hero__brandword {
  position: relative;
  align-self: stretch;
  font-family: var(--font-brand);
  font-weight: 400; /* rol wordmark: Balimo Regular (specimen oficial) */
  font-size: clamp(72px, min(16vw, 21vh), 232px);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  display: grid;
  justify-items: center; /* centrado exacto respecto al viewport de contenido */
}
.hero__brandword > span {
  grid-area: 1 / 1;
  padding: 0 .06em; /* aire para trazos de Balimo */
}
.hero__brandword-ink {
  color: var(--graphite);
  transition: opacity 700ms var(--ease-inout);
}
.hero__brandword-fog {
  color: transparent;
  /* niebla morado + fucsia + amarillo: cobertura completa, sin zonas muertas */
  background:
    radial-gradient(46% 62% at 12% 42%, var(--purple) 0%, transparent 64%),
    radial-gradient(50% 66% at 38% 72%, var(--fuchsia) 0%, transparent 66%),
    radial-gradient(38% 55% at 58% 22%, var(--yellow) 0%, transparent 58%),
    radial-gradient(48% 62% at 78% 66%, var(--fuchsia) 0%, transparent 62%),
    radial-gradient(52% 70% at 96% 28%, var(--yellow) 0%, transparent 55%),
    linear-gradient(104deg, var(--purple) 0%, var(--fuchsia) 55%, var(--purple) 100%);
  background-size: 160% 160%;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 1;
}
.hero__brandword.is-fogged .hero__brandword-ink { opacity: 0; }
@keyframes hero-fog-drift {
  0%   { background-position: 0% 30%, 100% 60%, 40% 0%, 80% 100%, 20% 80%, 0% 0%; }
  100% { background-position: 100% 70%, 0% 20%, 70% 100%, 10% 0%, 90% 10%, 100% 100%; }
}
.hero__brandword-fog {
  animation: hero-fog-drift 18s var(--ease-inout) infinite alternate;
  animation-play-state: paused;
}
.hero__brandword.is-fogged .hero__brandword-fog { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .hero__brandword-fog { animation: none; }
}

/* ================= 02 · EL ESTUDIO ================= */
.estudio {
  background: var(--warm-white);
  padding-block: clamp(80px, 9vw, 132px);
  border-bottom: 1px solid var(--line);
}
.estudio__layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(min(100%, 460px), 1.05fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: center;
}
.estudio__piece { position: relative; }
.estudio__canvas-holder {
  position: relative;
  aspect-ratio: 1 / 1.05;
  max-height: min(72vh, 680px);
  min-height: clamp(320px, 48vh, 560px);
}
.estudio__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}
.estudio__content { max-width: 720px; }
.estudio__title {
  /* cuerpo acotado a la columna: el quiebre editorial es de dos líneas */
  font-size: clamp(38px, 3.9vw, 58px);
  margin-top: 28px;
}
.estudio__body {
  display: grid;
  gap: 18px;
  margin-top: 34px;
  max-width: 690px;
  font-size: clamp(17px, 1.25vw, 19px);
  color: var(--ink-70);
}
.estudio__disclosure { margin-top: 36px; border-color: var(--graphite); }
.estudio__mirada { display: grid; gap: 22px; max-width: 690px; color: var(--ink-60); }
.estudio__mirada h3 {
  font: 800 17px/1.3 var(--font-display);
  color: var(--graphite);
  margin-bottom: 6px;
}

@media (max-width: 1023px) {
  .estudio__layout { grid-template-columns: 1fr; }
  /* la demostración se ve en el primer contacto: pieza arriba, texto después */
  .estudio__piece { order: 0; }
  .estudio__canvas-holder { max-height: 52vh; min-height: 280px; aspect-ratio: 1 / .85; }
}

/* ================= 03 · EL PUNTO DE PARTIDA ================= */
.partida {
  background: var(--graphite);
  color: var(--warm-white);
}
/* Base sin JS: lectura vertical completa */
.partida__track {
  display: grid;
  gap: clamp(48px, 7vw, 96px);
  padding: var(--section-pad-y) var(--gutter);
  max-width: var(--content-max);
  margin-inline: auto;
}
.partida__intro { max-width: 940px; }
.partida__eyebrow { color: #8f8d87; }
.partida__title {
  font-size: clamp(48px, 7vw, 104px);
  margin-top: 30px;
  max-width: 12ch;
}
.partida__lead {
  margin-top: 34px;
  max-width: 720px;
  font-size: var(--fs-bajada);
  line-height: 1.62;
  color: var(--line);
}
.partida__station { position: relative; }
.partida__station-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(14px, 2vw, 28px);
  align-items: start;
  /* horizonte fijo del travelling: los titulares comparten línea de arranque */
  min-height: clamp(96px, 15vh, 152px);
}
.partida__num {
  position: relative;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: rgba(253, 252, 250, .55);
  line-height: 2;
  padding-top: 10px;
}
/* la voz morada del diagnóstico: regla de acento por estación */
.partida__num::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 3px;
  background: var(--purple);
  transform-origin: left center;
  transform: scaleX(.45);
  transition: transform .6s var(--ease-out);
}
.js .partida__station[data-active="true"] .partida__num::before { transform: scaleX(1); }
.js .partida__station[data-active="true"] .partida__num { color: var(--warm-white); }
.partida__problem {
  font: 700 clamp(28px, 3.2vw, 54px)/1.1 var(--font-display);
  letter-spacing: -.02em;
  max-width: 20ch;
  padding-top: 4px;
}
.partida__visual {
  position: relative;
  margin-top: clamp(22px, 3vh, 40px);
  min-height: clamp(180px, 30vh, 320px);
  border: 1px solid rgba(253, 252, 250, .22);
  background: rgba(111, 2, 186, .10); /* reserva intencional: superficie morada tenue */
}
/* esquinas marcadas: la reserva es una decisión, no una caja sin estilar */
.partida__visual::before,
.partida__visual::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--purple);
}
.partida__visual::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.partida__visual::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.partida__more {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(18px, 2.5vh, 30px);
  padding: 10px 0;
  font-weight: 800;
  color: inherit;
}
.partida__more .disclosure__sym { font-size: 24px; }
/* el momento de PROFUNDIDAD es el momento morado de la página:
   el panel emerge desde el borde inferior del área reservada, que
   permanece presente; el toggle jamás se mueve. */
.partida__deep-panel {
  position: relative;
  margin: 0 -1px -1px;
  z-index: 2;
  overflow: hidden;
  height: 0;
  background: var(--purple);
  border: 1px solid rgba(253, 252, 250, .28);
  transition: height var(--dur-ui) var(--ease-inout);
}
@media (min-width: 1024px) {
  .js .partida__deep-panel {
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -1px;
    margin: 0;
  }
}
.partida__deep-panel::before,
.partida__deep-panel::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--warm-white);
}
.partida__deep-panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.partida__deep-panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.no-js .partida__deep-panel { height: auto; position: static; }
.partida__deep-inner {
  padding: clamp(20px, 3vh, 30px) clamp(22px, 2.5vw, 34px);
  color: rgba(253, 252, 250, .92);
  font-size: 17px;
}
.partida__deep-inner p { margin: 0 0 20px; }
.partida__deep-label {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(253, 252, 250, .62);
}
.partida__deep-inner strong { color: var(--warm-white); }

/* --- Travelling horizontal (desktop con JS): el escenario se abre en X --- */
@media (min-width: 1024px) {
  .js .partida__pin {
    height: 100svh;
    display: flex;
    align-items: stretch;
    overflow: hidden;
  }
  .js .partida__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: clamp(56px, 7vw, 140px);
    padding: 0;
    padding-left: var(--gutter);
    max-width: none;
    margin: 0;
  }
  .js .partida__panel {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100svh;
    padding-block: clamp(76px, 10vh, 120px);
  }
  .js .partida__panel--intro { width: min(52vw, 760px); }
  /* ESCENARIO CONTINUO: una línea de cota recorre todo el track,
     también los vacíos entre estaciones */
  .js .partida__track { position: relative; }
  .js .partida__track::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--gutter));
    right: calc(-2 * var(--gutter));
    top: 84%;
    height: 1px;
    background: rgba(253, 252, 250, .13);
  }
  .js .partida__station {
    position: relative;
    width: min(58vw, 860px);
  }
  /* cota morada de cada estación sobre la línea del escenario */
  .js .partida__station::before {
    content: '';
    position: absolute;
    top: calc(84% - 6px);
    left: 2px;
    width: 2px;
    height: 13px;
    background: var(--purple);
  }
  /* RITMO: cada estación tiene proporción, altura y distancia propias */
  .js .partida__station[data-station="1"] { width: min(56vw, 840px); }
  .js .partida__station[data-station="2"] {
    width: min(49vw, 730px);
    padding-top: calc(clamp(76px, 10vh, 120px) + 5vh);
    margin-left: -2vw;
  }
  .js .partida__station[data-station="2"] .partida__visual { max-height: 30vh; }
  .js .partida__station[data-station="3"] {
    width: min(62vw, 910px);
    padding-bottom: calc(clamp(76px, 10vh, 120px) + 6vh);
    margin-left: 4vw;
  }
  .js .partida__station[data-station="3"] .partida__problem { max-width: 26ch; }
  /* al abrir la profundidad, los ticks del área ceden a los del panel */
  .js .partida__station:has([aria-expanded="true"]) .partida__visual::before,
  .js .partida__station:has([aria-expanded="true"]) .partida__visual::after { opacity: 0; }
  .js .partida__station[data-station="4"] {
    width: min(53vw, 790px);
    padding-top: calc(clamp(76px, 10vh, 120px) + 2.5vh);
    margin-left: 1vw;
  }
  .js .partida__station[data-station="4"] .partida__visual { max-height: 33vh; }
  .js .partida__station .partida__visual {
    flex: 1;
    min-height: 0;
    max-height: 38vh;
    transition: max-height .42s var(--ease-inout), opacity .42s var(--ease-inout);
  }
  .js .partida__station .partida__deep {
    position: relative;
  }
  /* la insinuación de las vecinas es escenográfica: su CTA descansa */
  .js .partida__station[data-active="false"] .partida__more {
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s var(--ease-inout);
  }
  /* la estación vecina se insinúa, escenográfica, sin competir */
  .js .partida__station { transition: opacity .5s var(--ease-inout); }
  .js .partida__station[data-active="false"] { opacity: .26; }
  /* remate: aire final para soltar la sección */
  .js .partida__track::after {
    content: '';
    flex: 0 0 calc(var(--gutter) * 2);
  }
}

/* ================= 04 · MÉTODO ================= */
.metodo {
  position: relative;
  background: var(--method-background);
  color: var(--method-foreground);
  transition:
    background-color var(--dur-state) var(--ease-inout),
    color var(--dur-state) var(--ease-inout);
}
.metodo__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  z-index: var(--z-canvas);
}
.metodo__canvas { width: 100%; height: 100%; }
.metodo__flow {
  position: relative;
  z-index: var(--z-content);
  margin-top: -100svh;
  pointer-events: none;
}
.metodo__flow a, .metodo__flow button { pointer-events: auto; }
.metodo__milestone {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: clamp(48px, 6vh, 96px) var(--gutter);
  max-width: var(--content-max);
  margin-inline: auto;
  width: 100%;
}
.metodo__milestone--hinge,
.metodo__milestone--close { min-height: 70svh; }
.metodo__copy { max-width: 760px; pointer-events: auto; }
.metodo__eyebrow { opacity: .72; }
.metodo__title {
  font-size: clamp(46px, 6vw, 92px);
  margin-top: 30px;
  max-width: 880px; /* el titular respeta el territorio del objeto cerrado */
}
.metodo__lead {
  margin-top: 34px;
  max-width: 720px;
  font-size: var(--fs-bajada);
  line-height: 1.62;
}
.metodo__milestone--open .metodo__copy { max-width: 1060px; }
/* La escultura vive a la derecha en ESTUDIAR/DEFINIR y cruza a la izquierda
   en CONSTRUIR/AFINAR (composición aprobada v4): el copy ocupa el lado opuesto. */
@media (min-width: 1024px) {
  .metodo__etapa .metodo__copy { max-width: min(44vw, 640px); }
  .metodo__etapa[data-etapa="construir"] .metodo__copy,
  .metodo__etapa[data-etapa="afinar"] .metodo__copy { margin-left: auto; }
}
.metodo__etapa-head {
  display: flex;
  align-items: baseline;
  gap: clamp(18px, 2.5vw, 40px);
}
.metodo__num {
  font: 700 clamp(40px, 5vw, 76px)/.9 var(--font-display);
  letter-spacing: -.06em;
  opacity: .38;
}
.metodo__name {
  /* recalibrado a la slab v9 (más ancha que la fuente original):
     "CONSTRUIR" debe caber entero en la columna de su etapa */
  font: 800 clamp(40px, 4.6vw, 76px)/.85 var(--font-display);
  letter-spacing: -.04em;
  text-transform: uppercase;
  min-width: 0;
}
.metodo__etapa-head { min-width: 0; flex-wrap: wrap; }
.metodo__etapa-lead {
  margin-top: clamp(26px, 3.5vh, 48px);
  max-width: 680px;
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.42;
  font-weight: 600;
}
.metodo__disclosure {
  margin-top: clamp(34px, 4.5vh, 60px);
  max-width: 820px;
  border-color: var(--method-line);
}
.metodo__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 26px 52px;
}
.metodo__fields h4 {
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 800;
}
.metodo__fields p { font-size: 16px; line-height: 1.6; }
.metodo__result {
  grid-column: 1 / -1;
  border-top: 1px solid var(--method-line);
  padding-top: 24px;
}
.metodo__result p { font-weight: 800; }

/* ================= 05 · TRABAJO SELECCIONADO ================= */
.works {
  background: var(--warm-white);
  color: var(--graphite);
}
/* Base sin JS: flujo editorial vertical */
.works__space {
  display: grid;
  gap: clamp(80px, 10vw, 156px);
  padding: var(--section-pad-y) var(--gutter);
  max-width: var(--content-max);
  margin-inline: auto;
}
.works__intro { max-width: 930px; }
.works__eyebrow { color: var(--ink-50); }
.works__title {
  font-size: clamp(48px, 6.5vw, 96px);
  margin-top: 30px;
}
.works__lead {
  margin-top: 34px;
  max-width: 720px;
  font-size: var(--fs-bajada);
  line-height: 1.62;
}
.works__case {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(40px, 6vw, 94px);
  align-items: start;
  border-top: 1px solid var(--graphite);
  padding-top: 28px;
}
.works__media {
  position: relative;
  min-height: clamp(400px, 60svh, 760px);
  display: grid;
  place-items: center;
  border: 1px solid #aaa69d;
  color: #aaa69d;
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), #aaa69d calc(50% - .5px), #aaa69d calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom right, transparent calc(50% - .5px), #aaa69d calc(50% - .5px), #aaa69d calc(50% + .5px), transparent calc(50% + .5px));
}
.works__media-note {
  padding: 5px 10px;
  background: var(--warm-white);
  font-size: 12px;
  line-height: 1.2;
}
.works__name {
  font: 800 13px/1 var(--font-display);
  letter-spacing: .19em;
  margin-bottom: 26px;
}
.works__claim {
  font: 700 clamp(30px, 3.4vw, 52px)/1.04 var(--font-display);
  letter-spacing: -.035em;
}
.works__intro-case {
  margin-top: 28px;
  color: var(--ink-60);
  font-size: 17px;
}
.works__areas { margin-top: 28px; }
.works__areas-label {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.works__actions {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.works__case-toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-weight: 800;
}
.works__case-toggle .disclosure__sym { font-size: 24px; }
.works__visit { font-weight: 600; }
.works__deep {
  overflow: hidden;
  height: 0;
  transition: height var(--dur-ui) var(--ease-inout);
}
.no-js .works__deep { height: auto; }
.works__deep-inner { display: grid; gap: 18px; padding: 22px 0 8px; }
.works__deep-inner h4 {
  margin-bottom: 4px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-50);
  font-weight: 800;
}
.works__deep-inner p { color: var(--ink-60); font-size: 15px; }

/* --- Viaje en Z (desktop con JS): la página descubre su profundidad --- */
@media (min-width: 1024px) {
  /* NITIDEZ (fix QA): sin perspective ni preserve-3d — el "viaje Z" se
     emula con scale 2D (misma fórmula de proyección). Los planos son capas
     normales: en reposo el texto se pinta VECTORIAL, bordes perfectos. */
  .js .works__pin {
    height: 100svh;
    overflow: clip;
  }
  .js .works__space {
    position: relative;
    height: 100%;
    display: block;
    padding: 0;
    max-width: none;
  }
  .js .works__plane {
    position: absolute;
    inset: 0;
    display: grid;
    align-items: center;
    padding: calc(76px + 2vh) var(--gutter) 4vh;
    max-width: var(--content-max);
    margin-inline: auto;
    backface-visibility: hidden;
  }
  .js .works__plane--intro { text-align: left; }
  .js .works__plane--case .works__case { border-top: 0; padding-top: 0; }
  /* el caso es un capítulo: la imagen manda el escenario */
  .js .works__case {
    grid-template-columns: minmax(480px, 1.25fr) minmax(340px, .75fr);
    align-items: center;
    gap: clamp(40px, 5vw, 90px);
  }
  .js .works__media { min-height: clamp(460px, 74svh, 820px); }
  /* profundizar sin destruir el plano: la columna editorial administra
     su propia altura (scroll interno solo si el caso abierto lo exige) */
  .js .works__text {
    max-height: calc(100svh - 76px - 10vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 6px;
  }
}

/* ================= 06 · CONTACTO ================= */
.contacto {
  position: relative;
  background: var(--yellow);
  color: var(--graphite);
  border-top: 1px solid var(--graphite);
  overflow: clip;
}
.contacto__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-canvas);
}
.contacto__layout {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(54px, 8vw, 128px);
  align-items: start;
  padding-block: clamp(88px, 9vw, 136px);
  min-height: 100svh;
}
.contacto__title {
  font-size: clamp(44px, 6vw, 90px);
  margin-top: 28px;
}
.contacto__lead {
  margin-top: 32px;
  max-width: 720px;
  font-size: var(--fs-bajada);
  line-height: 1.62;
}
.contacto__disclosure { margin-top: 38px; border-color: var(--graphite); }
.contacto__despues { display: grid; gap: 22px; max-width: 690px; }
.contacto__despues h3 {
  font: 800 17px/1.3 var(--font-display);
  margin-bottom: 6px;
}
.contacto__direct { margin-top: 34px; }
.contacto__direct-label {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.contacto__mail { font-weight: 800; }

.contacto__panel { position: relative; }
.contacto__form {
  display: grid;
  gap: 26px;
  padding: clamp(30px, 4vw, 56px);
  background: var(--warm-white);
  border: 1px solid var(--graphite);
}
.contacto__group { display: grid; gap: 8px; }
.contacto__label { font-weight: 800; }
.contacto__optional { font-weight: 500; color: var(--ink-50); }
.contacto__hint { font-size: 13px; color: var(--ink-50); line-height: 1.45; }
.contacto__input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--ink-40);
  border-radius: 0;
  background: transparent;
  padding: 10px 0;
  outline-offset: 6px;
  font-size: 16px;
  transition: border-color var(--dur-ui) var(--ease-out);
}
.contacto__input:focus { border-bottom-color: var(--graphite); outline: none; }
.contacto__textarea {
  width: 100%;
  min-height: 120px;
  border: 1px solid var(--ink-40);
  border-radius: 0;
  background: transparent;
  padding: 12px;
  resize: vertical;
  font-size: 16px;
  transition: border-color var(--dur-ui) var(--ease-out);
}
.contacto__textarea:focus { border-color: var(--graphite); outline: none; }
.contacto__group.has-error .contacto__input,
.contacto__group.has-error .contacto__textarea { border-color: var(--feedback-error); }
.contacto__error { font-size: 13px; color: var(--feedback-error); min-height: 0; }
.contacto__submit { justify-self: start; }
.contacto__submit[disabled] { opacity: .6; cursor: default; }
.contacto__privacy { margin-top: -12px; font-size: 12px; color: var(--ink-50); }

.contacto__sent {
  position: relative;
  min-height: 420px; /* la confirmación mantiene presencia, no colapsa */
  display: grid;
  align-content: center;
  padding: clamp(38px, 5vw, 54px);
  padding-bottom: clamp(96px, 12vh, 128px); /* aire para Chiki */
  background: var(--warm-white);
  border: 1px solid var(--graphite);
  scroll-margin-top: 110px; /* siempre bajo el header fijo */
}
.contacto__sent-title { font: 800 32px/1.1 var(--font-display); }
.contacto__sent-body { margin-top: 12px; }
/* El premio: pequeño, cálido, imperfecto. Nunca antes del envío. */
.contacto__chiki {
  position: absolute;
  right: clamp(22px, 4vw, 44px);
  bottom: 16px;
  width: 128px;
  height: auto;
}
.contacto__benito {
  position: absolute;
  top: -45px; /* se asoma por el borde superior de la tarjeta */
  right: clamp(48px, 8vw, 96px);
  width: 96px;
  height: auto;
}

/* ================= Responsive fino ================= */
@media (max-width: 767px) {
  :root { --section-pad-y: clamp(72px, 16vw, 110px); }
  .hero__brandword { font-size: clamp(64px, 19vw, 120px); }
  .works__media { min-height: clamp(280px, 44svh, 420px); }
}

/* Fallback sin 3D: la seccion conserva su lectura editorial, sin huecos */
.estudio--sin3d .estudio__piece { display: none; }
.estudio--sin3d .estudio__layout { grid-template-columns: 1fr; }

/* ============================================================
   01 · HERO v9 (F8 — literal). Roles t-* mínimos del sistema v9
   + estructura del hero. Balimo SOLO en la palabra-marca (F2).
   ============================================================ */
.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}
.t-body-display {
  font-family: var(--font-body);
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 500;
}
.c {
  width: 100%;
  max-width: var(--content-max);
  padding-inline: var(--gutter);
  margin-inline: auto;
}
.ghost {
  position: absolute; right: var(--gutter); top: 24px;
  font-family: var(--font-display);
  font-size: clamp(144px, 17vw, 368px);
  line-height: .8; opacity: .06;
  pointer-events: none; user-select: none; z-index: 0;
}

.s-hero {
  position: relative;
  min-height: min(100svh, 1088px);
  display: flex; flex-direction: column; justify-content: space-between;
  padding-block: clamp(120px, 14vh, 176px) 0;
  overflow: clip;
}
.hero-escena { position: absolute; inset: 0; z-index: 0; }
.hero-escena canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.s-hero > .c, .s-hero > .hero-marquee { position: relative; z-index: 1; pointer-events: none; }
.s-hero .c a, .s-hero .c button, .s-hero .c p, .s-hero .c h1 { pointer-events: auto; }
/* Intercambio de fuentes (pedido): el título toma la display del marquee
   y el marquee toma la fuente de marca que tenía el título. */
.hero-word {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  /* talla base de respaldo; hero-fit.js la ajusta al ancho exacto
     del contenedor (alineado logo ←→ botón menú) */
  font-size: clamp(96px, 13.5vw, 320px);
  line-height: .8;
  letter-spacing: -.01em;
  margin-block: .1em .08em;
}
.hero-word span { display: inline-block; white-space: nowrap; }
.hero-meta { display: flex; gap: clamp(20px, 3vw, 44px); flex-wrap: wrap; margin-top: 16px; }
.hero-mid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
  margin-top: clamp(24px, 3vh, 44px);
  padding-bottom: clamp(24px, 3vh, 44px);
}
.hero-claim { max-width: 608px; }
.hero-bajada { max-width: 528px; margin-top: 16px; font-size: 16px; line-height: 1.5; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 18px; }

/* Botones estilo v9 dentro del hero (pill + flecha dibujada) */
.s-hero .btn {
  gap: .5em;
  min-height: 0;
  padding: .9em 1.6em;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-weight: 600;
  font-size: 16px;
}
.s-hero .btn.is-solid {
  background: var(--theme-ink, var(--graphite));
  color: var(--theme-bg, var(--warm-white));
  border-color: transparent;
}
.s-hero .btn:active { transform: scale(.96); }
.btn-fl { width: 1em; height: .65em; overflow: visible; flex: none; }
.btn-fl path {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 30; stroke-dashoffset: 30;
  transition: stroke-dashoffset .45s var(--ease-out);
}
.btn:hover .btn-fl path, .btn:focus-visible .btn-fl path { stroke-dashoffset: 0; }

/* Marquee (cinta infinita v9) */
.lab-marquee { display: flex; overflow: clip; white-space: nowrap; }
.lab-marquee__mover { display: flex; flex: none; will-change: transform; }
.lab-marquee__track { display: flex; flex: none; align-items: center; gap: 40px; padding-right: 40px; }
.marquee-display {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(48px, 7vw, 117px);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.marquee-display .dot {
  width: .35em; height: .35em; border-radius: 50%;
  background: currentColor; display: inline-block; align-self: center; flex: none;
}
.hero-marquee {
  margin-top: clamp(24px, 3vh, 44px);
  border-block-start: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  padding-block: 10px;
}
/* El marquee del hero calca a "TU PROYECTO YA TIENE VALOR."
   (misma slab, mayúsculas, mismo peso) con la talla un 15% menor */
.hero-marquee.marquee-display {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: -.015em;
  font-size: clamp(23px, 3.06vw, 58px);
  /* equilibrio 50/50 entre el azul del fondo y el grafito */
  color: color-mix(in srgb, var(--blue) 50%, var(--graphite));
}
/* Puntos separadores sin peso (pedido: nada de círculos gordos) */
.hero-marquee .dot { width: .14em; height: .14em; opacity: .55; }

/* Foto del hero al doble (pedido): capa propia — sobre el fondo y la
   bandada, bajo todos los textos. */
.s-hero > .c { z-index: 2; }
.hero-photo {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(24px, 5vh, 64px);
  z-index: 1;
  margin: 0;
  width: min(46vw, 940px);
  /* la pieza "D" del isotipo como marco: proporción de la pieza (4:3),
     nada de rectángulos — la foto vive dentro de la forma de la marca */
  aspect-ratio: 4 / 3;
  max-height: 72svh;
  overflow: hidden;
  clip-path: url(#pieza-foto);
  pointer-events: none;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .hero-photo { position: relative; right: auto; bottom: auto; width: min(80vw, 420px); margin: 20px var(--gutter) 40px; }
}

/* Trazos (anotación manuscrita sobre "valor") */
.anota { position: relative; white-space: nowrap; }
.trazo-svg {
  position: absolute; inset: -12% -6%; width: auto; height: auto;
  pointer-events: none; color: var(--theme-detail, var(--color--accent));
}
.trazo-svg path {
  fill: none; stroke: currentColor; stroke-width: 5;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 900px) {
  .hero-mid { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .hero-word { font-size: 17vw; }
  .t-body-display { font-size: 19px; }
}

/* ============================================================
   02 · EL ESTUDIO v9 (F10) + piezas transversales del sistema v9
   (.s/.cover, t-impact, carta-text, instrumento, plegable).
   ============================================================ */
.s { position: relative; padding: var(--section-pad-y) 0; }
.cover { overflow: clip; }
.t-impact {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(52px, 8.5vw, 117px);
  line-height: 1.05; /* +30% respiración sobre el token (pedido de Pablo, v9) */
  letter-spacing: -.025em;
  margin-top: 14px;
}
.seccion-bajada { max-width: 608px; margin-top: 28px; }
.carta-text {
  font-family: var(--font-body);
  font-size: clamp(21px, 2vw, 29px);
  line-height: 1.25;
  letter-spacing: -.02em;
  max-width: 576px;
  font-weight: 500;
}
.carta-text + .carta-text { margin-top: 18px; }

/* Instrumentos (lienzos Three.js clickeables) */
.instrumento { margin: 0; position: relative; z-index: 2; }
.instrumento-lienzo {
  position: relative; overflow: hidden; cursor: pointer;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 16px;
  min-height: clamp(288px, 44svh, 480px);
  transition: border-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
}
.instrumento-lienzo:hover {
  border-color: var(--theme-detail, var(--color--accent));
  box-shadow: 0 18px 44px -24px rgba(40, 40, 40, .55);
}
.instrumento-lienzo canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.instrumento figcaption { display: flex; justify-content: space-between; gap: 24px; margin-top: 10px; opacity: .75; }
.instrumento--ancho { margin-top: clamp(32px, 4vh, 56px); }
.instrumento--ancho .instrumento-lienzo { min-height: clamp(256px, 40svh, 416px); }

/* Plegables (acordeones del sistema v9) */
.plegable {
  border-block: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  margin-top: 28px; position: relative; z-index: 2; max-width: 640px;
}
.plegable + .plegable { border-top: 0; }
.plegable-cabeza {
  display: flex; align-items: center; width: 100%;
  justify-content: space-between; gap: 24px;
  font-family: var(--font-body); font-weight: 650;
  font-size: 17px; padding: 18px 0; text-align: left;
}
.plegable-signo {
  font-family: var(--font-display); font-size: 26px; line-height: 1;
  transition: transform var(--dur-ui) var(--ease-out);
}
.plegable.is-open .plegable-signo { transform: rotate(45deg); }
.plegable-cuerpo { display: grid; gap: 18px; padding: 5px 0 26px; }
.plegable-cuerpo[hidden] { display: none; }
.plegable-cuerpo h3, .plegable-cuerpo h4 {
  margin: 0 0 4px;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 15px; letter-spacing: .02em; line-height: 1.2;
  color: var(--theme-detail, var(--color--accent));
}
.plegable-cuerpo p { margin: 0; font-size: 15px; line-height: 1.5; }

/* Estudio: grid, firma */
.estudio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  margin-top: clamp(32px, 4vh, 56px);
}
.estudio .instrumento-lienzo { min-height: clamp(320px, 52svh, 544px); }
.firma-block { margin-top: clamp(32px, 4vh, 56px); display: flex; align-items: flex-end; gap: clamp(32px, 4vw, 56px); flex-wrap: wrap; }
.firma-real { width: min(352px, 70vw); }
.firma-img { width: min(288px, 60vw); height: auto; display: block; }
.meta-row { display: flex; gap: clamp(20px, 3vw, 44px); flex-wrap: wrap; margin-top: 14px; }

@media (max-width: 900px) {
  .estudio-grid { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .t-impact { font-size: 15vw; }
}

/* (el campo de diagnóstico fue eliminado a pedido — QA F20) */

/* Works: los marcos ahora montan el antes/después v9 (F17) */
.works__media { overflow: hidden; cursor: pointer; }
.works__media canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.works__media-note { position: absolute; left: 12px; bottom: 12px; z-index: 2; opacity: .8; }

/* ============================================================
   06 · CONTACTO v9 (F18 — literal) + cierre
   ============================================================ */
.contacto-escena { position: absolute; inset: 0; z-index: 0; }
.contacto-escena canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.contacto-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(40px, 6vw, 96px); align-items: start;
  pointer-events: none;
}
.contacto-grid a, .contacto-grid button, .contacto-grid input,
.contacto-grid textarea, .contacto-grid label, .contacto-grid .plegable,
.contacto-grid .formulario, .contacto-grid p, .contacto-grid h2 { pointer-events: auto; }
.lema {
  font-family: var(--font-display); text-transform: uppercase;
  font-weight: 400;
  /* 50% de la talla original (pedido QA) */
  font-size: clamp(27px, 3.6vw, 68px); line-height: 1.06;
  letter-spacing: -.015em; margin: 14px 0 0;
}
.contacto-directo { margin-top: 28px; display: grid; gap: 5px; }
.contacto-directo a { color: inherit; font-weight: 650; text-decoration: none; font-size: 21px; }
.formulario {
  display: grid; gap: 24px;
  padding: clamp(29px, 3vw, 51px);
  background: var(--color--paper); color: var(--color--ink);
  border: 1px solid var(--color--ink); border-radius: 16px;
}
.formulario[hidden] { display: none; }
.formulario .btn {
  gap: .5em; min-height: 0; padding: .9em 1.6em; border-radius: 999px;
  border: 1px solid transparent; background: var(--color--ink);
  color: var(--color--paper); font-weight: 600; font-size: 16px;
  justify-self: start;
}
.campo { display: grid; gap: 7px; }
.campo label { font-weight: 650; font-size: 16px; }
.campo-opcional { font-weight: 500; color: color-mix(in srgb, currentColor 55%, transparent); }
.campo-ayuda { font-size: 13px; line-height: 1.45; color: color-mix(in srgb, currentColor 60%, transparent); }
.campo input {
  width: 100%; border: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 0; background: transparent; color: inherit;
  padding: 10px 0; outline: none; font: inherit; transition: border-color .25s;
}
.campo input:focus { border-bottom: 2px solid var(--color--morado); }
.campo textarea {
  width: 100%; min-height: 112px; border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 0; background: transparent; color: inherit;
  padding: 12px; outline: none; resize: vertical; font: inherit; transition: border-color .25s;
}
.campo textarea:focus { border-color: var(--color--morado); }
.formulario-nota { margin: 0; font-size: 12px; color: color-mix(in srgb, currentColor 60%, transparent); }
.formulario-confirmacion {
  padding: clamp(32px, 4vw, 54px);
  background: var(--color--paper); color: var(--color--ink);
  border: 1px solid var(--color--ink); border-radius: 16px;
}
.formulario-confirmacion[hidden] { display: none; }
.formulario-confirmacion h3 {
  margin: 0; font-family: var(--font-display); text-transform: uppercase;
  font-size: 26px; line-height: 1.1; font-weight: 400;
}
.formulario-confirmacion p { margin: 10px 0 0; }
.contacto-marquee {
  position: relative; z-index: 1; margin-top: clamp(48px, 6vh, 88px);
  border-block: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  padding-block: 10px;
}
.legal {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-block: 20px;
}
.legal a { text-decoration: none; }
/* El cierre amarillo (v9): el brand de la sección pinta el tema */
.fin[data-brand="amarillo"] {
  --theme-bg: var(--color--amarillo);
  --theme-ink: var(--color--ink);
  --theme-detail: var(--color--ink-tint-1);
}

@media (max-width: 900px) {
  .contacto-grid { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .lema { font-size: 6.5vw; }
}

/* ============================================================
   Partida: FOTOS por estación + COLOR por problema (pedido)
   01 morado · 02 fucsia · 03 amarillo · 04 azul
   ============================================================ */
.partida__station[data-station="1"] { --st: var(--purple); --st-ink: var(--warm-white); }
.partida__station[data-station="2"] { --st: var(--fuchsia); --st-ink: var(--graphite); }
.partida__station[data-station="3"] { --st: var(--yellow); --st-ink: var(--graphite); }
.partida__station[data-station="4"] { --st: var(--blue); --st-ink: var(--graphite); }

.partida__num::before { background: var(--st, var(--purple)); }
.js .partida__station[data-active="true"] .partida__num { color: var(--st, var(--warm-white)); }
.partida__visual {
  overflow: hidden;
  background: color-mix(in srgb, var(--st, var(--purple)) 10%, transparent);
  border-color: color-mix(in srgb, var(--st, var(--purple)) 55%, transparent);
}
.partida__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
}
.partida__deep-panel {
  background: var(--st, var(--purple));
  color: var(--st-ink, var(--warm-white));
}
.partida__deep-panel .partida__deep-label,
.partida__deep-panel strong { color: inherit; }
.partida__visual::before,
.partida__visual::after { border-color: var(--st, var(--purple)); }

/* Hero: bajada PEGADA al título; el marquee ancla al fondo */
.s-hero { justify-content: flex-start; }
.s-hero .hero-mid { margin-top: clamp(12px, 2vh, 28px); margin-bottom: clamp(32px, 6vh, 72px); padding-bottom: 0; }
.s-hero .hero-marquee { margin-top: auto; }

/* "Tu proyecto ya tiene valor." — imita al lema del Contacto:
   misma slab display, mismas tallas, mayúsculas */
.hero-claim-top {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(27px, 3.6vw, 68px);
  line-height: 1.06;
  letter-spacing: -.015em;
}
.hero-claim-top + .t-body-display { margin-top: 16px; }
.hero-claim { max-width: 720px; }

/* Isla de Chiloé sin marco y al 150% (pedido QA):
   sin borde ni sombra, y el lienzo crece 1.5× — la isla escala con él */
.instrumento--isla .instrumento-lienzo,
.instrumento--isla .instrumento-lienzo:hover {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.estudio .instrumento--isla .instrumento-lienzo {
  /* +25% (pedido QA): la isla se proyectaba fuera del lienzo y se cortaba */
  min-height: clamp(600px, 92svh, 1025px);
  overflow: visible;
}
.instrumento--isla .estudio__canvas-holder {
  aspect-ratio: auto;
  max-height: none;
}

/* Partida: barrido final de morados fijos → color por estación (pedido QA) */
.js .partida__station::before { background: var(--st, var(--purple)); }
.partida__deep-panel {
  border-color: color-mix(in srgb, var(--st-ink, var(--warm-white)) 28%, transparent);
}
.partida__deep-panel::before,
.partida__deep-panel::after {
  border-color: var(--st-ink, var(--warm-white));
}
.partida__deep-panel .partida__deep-inner {
  color: color-mix(in srgb, var(--st-ink, var(--warm-white)) 92%, transparent);
}
.partida__deep-panel .partida__deep-label {
  color: color-mix(in srgb, var(--st-ink, var(--warm-white)) 62%, transparent);
}
.partida__deep-panel .partida__deep-inner strong { color: var(--st-ink, var(--warm-white)); }

/* Contacto: cierre compacto (pedido QA) — menos aire al final,
   marquee al 50% y en equilibrio 50/50 amarillo↔grafito */
.s.contacto { padding-bottom: 0; }
.contacto-marquee {
  margin-top: clamp(28px, 4vh, 48px);
}
.contacto-marquee.marquee-display {
  font-size: clamp(24px, 3.5vw, 58px);
  color: color-mix(in srgb, var(--yellow) 50%, var(--graphite));
}
.legal { padding-block: 14px 18px; }

/* Plegables animados: la altura se recorta durante el despliegue */
.plegable-cuerpo { overflow: hidden; }

/* Isla como CAPA LIBRE a la derecha (decisión QA final): sin holder,
   sin marco — flota junto al título/bajada. Orden de capas:
   fondo blanco → ISLA → número fantasma 02 → textos. */
.estudio { position: relative; }
.estudio-isla-franja {
  position: absolute;
  inset-block: clamp(24px, 4vh, 64px);
  right: 0;
  width: min(58vw, 1040px);
  z-index: 0;
}
.estudio-isla-franja .instrumento--isla,
.estudio-isla-franja .lab-wipe__inner,
.estudio .estudio-isla-franja .instrumento-lienzo {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
  border: 0;
  margin: 0;
}
/* red de seguridad: aunque la cadena de alturas falle, el lienzo existe */
.estudio .estudio-isla-franja .instrumento-lienzo { min-height: clamp(420px, 60svh, 760px); }
.estudio .ghost { z-index: 1; pointer-events: none; }
/* la capa de texto DEJA PASAR el puntero (para clickear la isla detrás);
   solo sus elementos reales lo capturan — patrón del hero v9 */
.estudio > .c { position: relative; z-index: 2; pointer-events: none; }
.estudio > .c a, .estudio > .c button, .estudio > .c p,
.estudio > .c h2, .estudio > .c h3, .estudio > .c .plegable,
.estudio > .c .firma-block { pointer-events: auto; }
.estudio-grid { grid-template-columns: 1fr; }
/* los textos capturan su propio puntero; el resto queda para la isla */
@media (max-width: 900px) {
  .estudio-isla-franja {
    position: static;
    width: 100%;
    height: min(60svh, 520px);
    margin-top: 24px;
  }
}

/* ============================================================
   05 · CASOS — SPLIT DE MUNDOS v9 (reemplaza al viaje Z)
   ============================================================ */
.proyectos-intro { position: relative; overflow: clip; }
.split { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.mundo {
  display: flex; flex-direction: column; gap: clamp(24px, 3vh, 44px);
  padding: clamp(72px, 9vh, 128px) var(--gutter) clamp(48px, 6vh, 88px);
  overflow: clip;
}
.mundo-word {
  font-family: var(--font-display); text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(42px, 5.4vw, 108px); line-height: 1.06;
  letter-spacing: -.015em; margin: .2em 0 0;
}
.mundo-word span { display: block; }
.mundo-word .l2 { margin-left: .45em; }
.casos-split { min-height: min(92svh, 960px); }
.caso-claim { max-width: 420px; margin-top: 14px; }
.caso-intro {
  max-width: 480px; margin-top: 14px;
  font-size: 15px; line-height: 1.55;
  color: color-mix(in srgb, currentColor 82%, transparent);
}
.casos-split .instrumento { margin-top: 24px; }
.casos-split .instrumento-lienzo { min-height: clamp(256px, 38svh, 384px); }
.caso-areas {
  display: grid; gap: 5px; margin-top: 24px;
  text-transform: none; letter-spacing: .02em; font-size: 13px; line-height: 1.5;
}
.caso-areas span {
  text-transform: uppercase; font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  color: color-mix(in srgb, currentColor 55%, transparent);
}
.caso-ficha { max-width: 544px; }
.caso-visitar { display: inline-block; margin-top: 14px; color: inherit; text-decoration: none; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
}

/* Casos: ambos mundos en blanco cálido; al hover, PREMIO — el mundo
   completo pasa a grafito con una transición rápida pero suave */
.casos-split .mundo {
  transition: background .28s var(--ease-out), color .28s var(--ease-out);
}
.casos-split .mundo:hover,
.casos-split .mundo:focus-within {
  --theme-bg: var(--graphite);
  --theme-ink: var(--warm-white);
  --theme-detail: var(--fuchsia);
}

/* Partida (pedido QA): títulos en MAYÚSCULAS y cada problema en DOS
   COLUMNAS — imagen a la izquierda, título + acción a la derecha.
   Especificidad .js .partida__panel.partida__station: pisa el flex-column
   del travelling pineado sin romper anchos ni alturas por estación. */
.partida__problem { text-transform: uppercase; }
.partida__title { text-transform: uppercase; }
@media (min-width: 1024px) {
  .js .partida__panel.partida__station {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: clamp(28px, 3vw, 56px);
    row-gap: clamp(16px, 2vh, 28px);
  }
  .js .partida__station .partida__station-head {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    align-self: end;
  }
  .js .partida__panel.partida__station .partida__visual {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-top: 0;
    flex: none;
    min-height: clamp(320px, 46vh, 520px);
    max-height: none;
  }
  .js .partida__station[data-station="2"] .partida__visual,
  .js .partida__station[data-station="4"] .partida__visual { max-height: none; }
  .js .partida__panel.partida__station .partida__deep {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
}

/* ============================================================
   NIEBLA BERGERAC (pedido): al pasar sobre BERGERAC, dentro de
   las letras vive una niebla morado+fucsia+amarillo en movimiento
   CONSTANTE — 6 capas de gradiente derivando a ritmos distintos y
   recorrido asimétrico (nunca se lee como un loop fijo).
   ============================================================ */
/* (la niebla del título fue eliminada a pedido — el título lleva ahora
   un parallax leve de scroll, ver main.js) */

/* Títulos de 02 y 03 al 80% de su talla (pedido QA) */
.estudio .t-impact { font-size: clamp(42px, 6.8vw, 94px); }
.partida__title { font-size: clamp(38px, 5.6vw, 83px); }
@media (max-width: 599px) {
  .estudio .t-impact { font-size: 12vw; }
}

/* Título del Método: MAYÚSCULAS, al 80% de la talla 02/03 (pedido QA) */
.metodo__title {
  text-transform: uppercase;
  font-size: clamp(34px, 5.44vw, 75px);
}

/* ============================================================
   MÉTODO — reestructura QA: portada "MÉTODO" con aire y escultura
   completa detrás · intro aparte · ritmo LENTO (es el corazón) ·
   cierre fucsia con "MÉTODO" despidiendo.
   ============================================================ */
.metodo__portada-word {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  /* 150% (pedido QA) */
  font-size: clamp(96px, 14.25vw, 225px);
  line-height: .95;
  letter-spacing: -.02em;
  margin-top: 14px;
}
/* el hito de apertura ahora son DOS pantallas: portada + intro */
.metodo__milestone--open {
  display: block;
  min-height: 0;
  padding-block: 0;
}
.metodo__milestone--open .metodo__portada {
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}
.metodo__milestone--open .metodo__copy:not(.metodo__portada) {
  min-height: 90svh;
  display: grid;
  align-content: center;
}
/* ritmo pausado: cada hito respira más (la escultura escala su
   timeline a la altura total — más alto = más lento) */
.metodo__milestone { min-height: 118svh; }
.metodo__etapa { min-height: 128svh; }
.metodo__milestone--hinge { min-height: 85svh; }
/* cierre: MÁS fucsia aún (pedido QA) — aire para que el anillo final
   viva completo, METODO despide con espacio ceremonial */
.metodo__milestone--close {
  min-height: 195svh;
  display: grid;
  align-items: center;
}
.metodo__cierre {
  text-align: center;
  justify-self: center;
}

/* Portada y cierre del Método: centrado REAL (los bloques de copy tenían
   max-width y quedaban a la izquierda del milestone en display:block) */
.metodo__milestone--open .metodo__copy { margin-inline: auto; }
.metodo__portada,
.metodo__cierre {
  width: 100%;
  max-width: none !important;
  text-align: center;
}
.metodo__milestone--close { justify-items: center; }
.metodo__portada-word { margin-inline: auto; }

/* Videos de los casos (páginas reales) dentro del marco instrumento */
.caso-video { cursor: auto; }
.caso-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ghost 04 del Método: como en las demás secciones, en la esquina de la
   apertura, sobre el escenario pero bajo el contenido */
.metodo > .ghost { z-index: 1; top: 40px; }

/* Portada del Método: holgura morada ARRIBA del título y del 3D —
   la sección respira antes de presentar nada */
.metodo__milestone--open .metodo__portada {
  padding-top: 20svh;
  min-height: 110svh;
}

/* Con partículas activas el título vive en el canvas; el h1 real
   permanece en el DOM (a11y + SEO) pero invisible. Nada de
   visibility:hidden ni display:none: hacen falta su caja y sus
   métricas para alinear el muestreo. */
.s-hero.tiene-particulas .hero-word { opacity: 0; pointer-events: none; }

/* ---- Móvil: los titulares slab deben CABER ----
   La slab es muy ancha: a 15vw una palabra de 9-10 letras se sale del
   margen. Se acotan por ancho de pantalla, no por gusto. */
@media (max-width: 599px) {
  .t-impact,
  .estudio .t-impact { font-size: 10.5vw; }
  .partida__title { font-size: 10.5vw; }
  .metodo__title { font-size: 9.5vw; }
  .metodo__portada-word { font-size: 17vw; }
  .metodo__name { font-size: 11vw; }
  .mundo-word { font-size: 12vw; }
  .lema { font-size: 10.5vw; }
  .partida__problem { font-size: 8.5vw; }
  .hero-claim-top,
  .hero-mid .t-body-display { font-size: 7.4vw; }
}