/* CTRL MEDIA — PANELS
   Contrato: layout y capas de láminas/overlays consumidos por estados JS globales. */

:root {
  --cm-portfolio-veil-opacity: 0.10; /* usar 0.05 si se quiere más claro */
}

/* A1: Bodoni Moda para L5 (cargada desde CSS para no tocar index.html) */

/* Scroll shell */
.cm-scroll-shell {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  overscroll-behavior: none;
}

/* Base panel */
.cm-panel {
  position: relative;
  height: 100vh;
  width: 100vw;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cm-slate);
}

/* Background layer */
.cm-bg {
  position: absolute;
  inset: 0;
  z-index: var(--cm-z-panel);
  overflow: hidden;
}

.cm-video {
  width: 100%;
  height: 100%;
}

/* L2 background (foto) */
.cm-bg--l2 {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  /* leve control para que no “grite” */
  filter: contrast(1.00) saturate(0.95);
  transform: translateZ(0);
  will-change: transform;

  position: absolute; /* refuerzo por si hereda distinto */
  inset: 0;
}

/* L2: capa “pizarra” para bajar brillos (tu 28%) */
.cm-panel.is-l2 .cm-bg--l2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 14, 18, 0.35); /* pizarra 45% */
  pointer-events: none;
}

/* L3 background (foto canónica — Criterio) */
.cm-bg--l3 {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  /* L3: editorial (neutraliza frío, leve calidez) */
  filter:
    grayscale(0.90)
    contrast(1.00)
    saturate(0.81)
    sepia(0.04);

  transform: translateZ(0);
  will-change: transform;

  position: absolute;
  inset: 0;
}

/* L3: pizarra sutil (no “diagnóstico”, solo orden) */
.cm-panel.is-l3 .cm-bg--l3::after {
  content: "";
  position: absolute;
  inset: 0;

  /* más suave que L2 */
  background: rgba(12, 14, 18, 0.20);

  pointer-events: none;
}

/* L4 background (foto canónica — Decisión) */
.cm-bg--l4 {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  /* L4: humanidad contenida (editorial + leve calidez) */
  filter:
    grayscale(0.68)
    contrast(1.04)
    saturate(0.72)
    sepia(0.10);

  transform: translateZ(0);
  will-change: transform;

  position: absolute;
  inset: 0;
}

/* L4: pizarra para domar blancos + sostener texto (más suave que L2) */
.cm-panel.is-l4 .cm-bg--l4::after {
  content: "";
  position: absolute;
  inset: 0;

  /* domar highlights sin matar la foto */
  background: rgba(12, 14, 18, 0.20);
  mix-blend-mode: multiply;

  pointer-events: none;
}


/* Overlay (grain / vignette) */
.cm-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--cm-z-overlay);
  background:
    radial-gradient(circle at center, transparent 40%, var(--cm-vignette) 100%);
  background-size: cover;
  opacity: var(--cm-grain-opacity);
  pointer-events: none;
}

/* L2 overlay: “ondas difusas” (eco de L1, más silencioso) */
.cm-panel.is-l2 .cm-overlay--l2 {
  opacity: 0.60;
  background:
    radial-gradient(
      130% 110% at 50% 46%,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.00) 36%,
      rgba(0,0,0,0.38) 74%,
      rgba(0,0,0,0.80) 100%
    ),
    radial-gradient(60% 44% at 42% 48%,
      rgba(255,255,255,0.028) 0%,
      rgba(255,255,255,0.00) 68%
    ),
    radial-gradient(58% 42% at 58% 56%,
      rgba(255,255,255,0.022) 0%,
      rgba(255,255,255,0.00) 70%
    ),
    radial-gradient(52% 38% at 54% 36%,
      rgba(255,255,255,0.016) 0%,
      rgba(255,255,255,0.00) 72%
    ),
    repeating-linear-gradient(
      24deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 22px,
      rgba(255,255,255,0.010) 23px,
      rgba(255,255,255,0.00) 46px
    );

  background-size: cover, cover, cover, cover, 180px 180px;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* L3 overlay: halo heredado (más silencioso que L2) */
.cm-panel.is-l3 .cm-overlay--l3 {
  /* menos presencia que L2 */
  opacity: 0.48;

  background:
    radial-gradient(
      130% 115% at 52% 48%,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.00) 42%,
      rgba(0,0,0,0.38) 78%,
      rgba(0,0,0,0.77) 100%
    ),
    radial-gradient(62% 46% at 46% 44%,
      rgba(255,255,255,0.020) 0%,
      rgba(255,255,255,0.00) 66%
    ),
    radial-gradient(58% 44% at 58% 56%,
      rgba(255,255,255,0.016) 0%,
      rgba(255,255,255,0.00) 68%
    ),
    repeating-linear-gradient(
      22deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 26px,
      rgba(255,255,255,0.010) 27px,
      rgba(255,255,255,0.00) 52px
    );

  background-size: cover, cover, cover, cover;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* L4 overlay: halo editorial + grano (coherencia L1–L3) */
.cm-panel.is-l4 .cm-overlay--l4 {
  opacity: 0.55;

  background:
    radial-gradient(
      140% 120% at 50% 48%,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.00) 44%,
      rgba(0,0,0,0.40) 78%,
      rgba(0,0,0,0.79) 100%
    ),
    radial-gradient(66% 48% at 46% 44%,
      rgba(255,255,255,0.020) 0%,
      rgba(255,255,255,0.00) 66%
    ),
    radial-gradient(60% 46% at 58% 58%,
      rgba(255,255,255,0.016) 0%,
      rgba(255,255,255,0.00) 70%
    ),
    repeating-linear-gradient(
      24deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 26px,
      rgba(255,255,255,0.010) 27px,
      rgba(255,255,255,0.00) 52px
    );

  background-size: cover, cover, cover, cover;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* L4: color pass verde (spot localizado en semáforo) */
.cm-panel.is-l4 .cm-bg--l4::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image: inherit;
  background-position: inherit;
  background-repeat: inherit;
  background-size: inherit;

  -webkit-mask-image: radial-gradient(
    circle at 86% 26%,
    rgba(0,0,0,0.95) 0%,
    rgba(0,0,0,0.70) 10%,
    rgba(0,0,0,0.35) 18%,
    rgba(0,0,0,0.00) 28%
  );
  mask-image: radial-gradient(
    circle at 86% 26%,
    rgba(0,0,0,0.95) 0%,
    rgba(0,0,0,0.70) 10%,
    rgba(0,0,0,0.35) 18%,
    rgba(0,0,0,0.00) 28%
  );

  filter:
    grayscale(0.05)
    saturate(1.25)
    contrast(1.02);

  mix-blend-mode: screen;
  opacity: 0.45;

  pointer-events: none;
}

/* Content */
.cm-content {
  position: relative;
  z-index: var(--cm-z-content);
  max-width: var(--cm-max);
  padding: 0 var(--cm-space-5);
  text-align: center;
}

/* Credits — base typography (from .cm-portfolio-lead) */
:where(
  .cm-panel.is-l1::before,
  .cm-panel.is-l2::before,
  .cm-panel.is-l3::before,
  .cm-panel.is-l4::before,
  .cm-panel.is-l2::after,
  .cm-panel.is-l3::after,
  .cm-panel.is-l4::after,
  .cm-team-inner::after,
  .cm-portfolio-inner::after
) {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--cm-max), calc(100% - (2 * var(--cm-safe-left, 0px))));
  bottom: calc(var(--cm-space-3) + var(--cm-safe-bottom));
  pointer-events: none;
  z-index: var(--cm-z-content);
  white-space: nowrap;

  font-family: var(--cm-font-sans);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  opacity: 0.60;
}

/* Credits — right (L2–L4 only) */
.cm-panel.is-l2::after,
.cm-panel.is-l3::after,
.cm-panel.is-l4::after {
  content: "Foto: Unsplash";
  text-align: right;
  padding-right: var(--cm-space-5);
  font-family: var(--cm-font-sans);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  opacity: 0.60;
}

/* Credits — left (L1–L5) override: Design by Raul Adasme A. */
.cm-panel.is-l1::before,
.cm-panel.is-l2::before,
.cm-panel.is-l3::before,
.cm-panel.is-l4::before,
.cm-team-inner::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--cm-max), calc(100% - (2 * var(--cm-safe-left, 0px))));
  bottom: calc(var(--cm-space-3) + var(--cm-safe-bottom));
  text-align: left;
  padding-left: var(--cm-space-5);
  content: "Design by Raul Adasme A.";
  font-family: var(--cm-font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  opacity: 0.60;
  z-index: 2147483647;
}

/* CRITICAL: `.is-active`, `.is-exiting` y `.has-been-active` son contrato del observer para créditos y capas. */
.cm-panel.is-l1:not(.is-active)::before,
.cm-panel.is-l2:not(.is-active)::before,
.cm-panel.is-l3:not(.is-active)::before,
.cm-panel.is-l4:not(.is-active)::before {
  opacity: 0;
}

.cm-panel.is-l1.is-active::before,
.cm-panel.is-l2.is-active::before,
.cm-panel.is-l3.is-active::before,
.cm-panel.is-l4.is-active::before {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--cm-max), calc(100% - (2 * var(--cm-safe-left, 0px))));
  bottom: calc(var(--cm-space-3) + var(--cm-safe-bottom));
  z-index: 2147483647;
  pointer-events: none;
  white-space: nowrap;
}

/* Credits — left (L1–L4) single visibility (anti-overlap) */
.cm-panel.is-l1::before,
.cm-panel.is-l2::before,
.cm-panel.is-l3::before,
.cm-panel.is-l4::before {
  opacity: 0;
}

.cm-panel.is-l1.is-active:not(.is-exiting)::before,
.cm-panel.is-l2.is-active:not(.is-exiting)::before,
.cm-panel.is-l3.is-active:not(.is-exiting)::before,
.cm-panel.is-l4.is-active:not(.is-exiting)::before {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--cm-max), calc(100% - (2 * var(--cm-safe-left, 0px))));
  bottom: calc(var(--cm-space-3) + var(--cm-safe-bottom));
  z-index: 2147483647;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0.60;
}

.cm-panel.is-l1.is-exiting::before,
.cm-panel.is-l2.is-exiting::before,
.cm-panel.is-l3.is-exiting::before,
.cm-panel.is-l4.is-exiting::before {
  opacity: 0 !important;
}

/* CRITICAL: `body.is-team-open` suprime créditos de fondo mientras Team está abierto. */
body.is-team-open .cm-panel.is-l1::before,
body.is-team-open .cm-panel.is-l2::before,
body.is-team-open .cm-panel.is-l3::before,
body.is-team-open .cm-panel.is-l4::before {
  opacity: 0 !important;
}

/* Credits — right (L2–L4) single visibility (anti-overlap) */
.cm-panel.is-l2::after,
.cm-panel.is-l3::after,
.cm-panel.is-l4::after {
  opacity: 0;
}

.cm-panel.is-l2.is-active:not(.is-exiting)::after,
.cm-panel.is-l3.is-active:not(.is-exiting)::after,
.cm-panel.is-l4.is-active:not(.is-exiting)::after {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--cm-max), calc(100% - (2 * var(--cm-safe-left, 0px))));
  bottom: calc(var(--cm-space-3) + var(--cm-safe-bottom));
  z-index: 2147483647;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0.60;
}

.cm-panel.is-l2.is-exiting::after,
.cm-panel.is-l3.is-exiting::after,
.cm-panel.is-l4.is-exiting::after {
  opacity: 0 !important;
}

/* CRITICAL: `body.is-team-open` y `body.is-portfolio-open` suprimen créditos derechos para evitar solape con overlays. */
body.is-team-open .cm-panel.is-l2::after,
body.is-team-open .cm-panel.is-l3::after,
body.is-team-open .cm-panel.is-l4::after,
body.is-portfolio-open .cm-panel.is-l2::after,
body.is-portfolio-open .cm-panel.is-l3::after,
body.is-portfolio-open .cm-panel.is-l4::after {
  opacity: 0 !important;
}

/* CRITICAL: `body.is-portfolio-open` y `body.is-portfolio-scroll-unlocked` controlan el velo interno de Portafolio. */
.cm-portfolio-inner::after { opacity: 0; }
body.is-portfolio-open:not(.is-portfolio-scroll-unlocked) .cm-portfolio-inner::after {
  opacity: 0.60;
}
body.is-portfolio-scroll-unlocked .cm-portfolio-inner::after {
  opacity: 0;
}

/* Individual panel tones */
.cm-panel.is-l1 { background-color: #3A3A3A; }
.cm-panel.is-l2 { background-color: #3A3A3A; }
.cm-panel.is-l3 { background-color: #3A3A3A; }
.cm-panel.is-l4 { background-color: #3A3A3A; }

/* L2 — DOLOR (Marco + esquinas). */

.cm-panel.is-l2 .cm-l2-frame {
  position: absolute;
  z-index: var(--cm-z-overlay);
  pointer-events: none;
  inset: calc(120px + 6vw);
  border: 1.5px solid rgba(255,255,255,0.28);
  opacity: 0.92;
  filter: drop-shadow(0 0 12px rgba(0,0,0,0.40));
}

.cm-panel.is-l2 .cm-l2-corner {
  position: absolute;
  font-family: var(--cm-font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  user-select: none;
  pointer-events: none;
  padding: 10px 12px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.30);
}

.cm-panel.is-l2 .cm-l2-corner--tl { top: 0; left: 0; }
.cm-panel.is-l2 .cm-l2-corner--tr { top: 0; right: 0; }
.cm-panel.is-l2 .cm-l2-corner--bl { bottom: 0; left: 0; }
.cm-panel.is-l2 .cm-l2-corner--br { bottom: 0; right: 0; }

@media (max-width: 520px) {
  .cm-panel.is-l2 .cm-l2-frame {
    top: clamp(64px, 10vh, 120px);
    right: clamp(18px, 6vw, 64px);
    bottom: clamp(64px, 10vh, 120px);
    left: clamp(18px, 6vw, 64px);
  }

  .cm-panel.is-l2 .cm-l2-corner {
    font-size: 11px;
    letter-spacing: 0.12em;
    padding: 8px 10px;
  }
}

/* L1 — Campo de Decisión (v1.2).
   CRITICAL: no alterar contratos con `body.is-l1-video-revealing`, `body.is-l1-video-hiding` y `body.is-l1-field-prep`. */

.cm-panel.is-l1 .cm-overlay {
  opacity: 0 !important;
  background:
    radial-gradient(
      120% 95% at 50% 45%,
      rgba(0,0,0,0.00) 14%,
      rgba(0,0,0,0.65) 62%,
      rgba(0,0,0,0.98) 100%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.06) 0px,
      rgba(255,255,255,0.06) 1px,
      rgba(0,0,0,0.06) 2px,
      rgba(0,0,0,0.06) 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.05) 0px,
      rgba(255,255,255,0.05) 1px,
      rgba(0,0,0,0.05) 2px,
      rgba(0,0,0,0.05) 3px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.035) 0px,
      rgba(255,255,255,0.035) 2px,
      rgba(0,0,0,0.035) 4px,
      rgba(0,0,0,0.035) 6px
    );
  background-size: cover, 140px 140px, 140px 140px, 220px 220px;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.cm-panel.is-l1 .cm-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #2a2a2a 0%, #1c1c1c 100%);
  filter: contrast(1.05) saturate(0.92);
  opacity: 0.82;
  transition: opacity 1.5s var(--cm-ease);
}

/* CRITICAL: reveal del dark field, sincronizado con la secuencia temporal de video. */
body.is-l1-video-revealing #l1 .cm-bg::after { opacity: 0; }

/* CRITICAL: hide del dark field, contrato directo con fade-out de L1. */
body.is-l1-video-hiding #l1 .cm-bg::after {
  opacity: 1;
  transition-duration: 2.0s;
}

.cm-panel.is-l1 .cm-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(140% 120% at 48% 46%,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.00) 26%,
      rgba(0,0,0,0.46) 72%,
      rgba(0,0,0,0.86) 100%
    ),
    radial-gradient(62% 46% at 44% 42%,
      rgba(255,255,255,0.050) 0%,
      rgba(255,255,255,0.00) 62%
    ),
    radial-gradient(58% 44% at 58% 54%,
      rgba(255,255,255,0.040) 0%,
      rgba(255,255,255,0.00) 66%
    ),
    radial-gradient(54% 40% at 52% 34%,
      rgba(255,255,255,0.036) 0%,
      rgba(255,255,255,0.00) 64%
    ),
    repeating-linear-gradient(
      25deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 18px,
      rgba(255,255,255,0.018) 19px,
      rgba(255,255,255,0.00) 36px
    ),
    repeating-linear-gradient(
      -18deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 22px,
      rgba(255,255,255,0.014) 23px,
      rgba(255,255,255,0.00) 44px
    ),
    radial-gradient(1px 1px at 18% 28%, rgba(255,255,255,0.13), rgba(255,255,255,0.00) 70%),
    radial-gradient(1px 1px at 32% 62%, rgba(255,255,255,0.11), rgba(255,255,255,0.00) 70%),
    radial-gradient(1px 1px at 55% 44%, rgba(255,255,255,0.10), rgba(255,255,255,0.00) 70%),
    radial-gradient(1px 1px at 68% 30%, rgba(255,255,255,0.11), rgba(255,255,255,0.00) 70%),
    radial-gradient(1px 1px at 77% 66%, rgba(255,255,255,0.09), rgba(255,255,255,0.00) 70%),
    radial-gradient(1px 1px at 42% 22%, rgba(255,255,255,0.08), rgba(255,255,255,0.00) 70%),
    radial-gradient(1px 1px at 24% 78%, rgba(255,255,255,0.08), rgba(255,255,255,0.00) 70%),
    radial-gradient(1px 1px at 88% 42%, rgba(255,255,255,0.08), rgba(255,255,255,0.00) 70%),
    linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.00));
  background-size: cover;
  background-repeat: no-repeat;
  mix-blend-mode: soft-light;
  filter: contrast(1.06) saturate(0.95);
  opacity: 0 !important;
  transform: translate3d(0, 0, 0) scale(1.02);
  transition:
    opacity 720ms var(--cm-ease),
    transform 1200ms var(--cm-ease);
}

/* CRITICAL: estado de preparación de campo para entradas controladas de L1. */
body.is-l1-field-prep #l1 .cm-bg::before {
  opacity: 0.70;
  transform: translate3d(0, 0, 0) scale(1.03);
}

/* CRITICAL: estado de ocultamiento previo/posterior del hero L1. */
body.is-l1-video-hiding #l1 .cm-bg::before {
  opacity: 0.70;
  transform: translate3d(0, 0, 0) scale(1.03);
  transition-delay: 520ms;
}

/* CRITICAL: apertura visual del hero L1. */
body.is-l1-video-revealing #l1 .cm-bg::before {
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1.02);
  transition-delay: 0ms;
}

/* L5 — ABOUT US (solo menú). */

.cm-team {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: block;
  --cm-team-portrait-bump: 24px;
}

.cm-team[hidden] { display: none; }

/* Backdrop (blur + dim) */
.cm-team-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(55, 55, 55, 0.40);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Panel full viewport */
.cm-team-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  background: rgba(55, 55, 55, 0.60);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  transform: translateX(8%);
  opacity: 0;
}

/* Ocultar X nativa (control oficial = pill nav) */
.cm-team-header { display: none; }

/* Wrapper */
.cm-team-inner {
  position: relative;
  max-width: var(--cm-max);
  margin: 0 auto;
  padding:
    calc(var(--cm-space-5) + var(--cm-safe-top))
    var(--cm-space-5)
    calc(var(--cm-space-5) + var(--cm-safe-bottom));
}

/* Quote */
.cm-team-quote {
  position: relative;
  padding: 28px 0 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: right;
}

.cm-team-quote-title {
  margin: 0;
  max-width: 860px;
  font-family: "Playfair Display", serif;
  font-weight: 800;
  letter-spacing: -0.015em;
  font-size: clamp(28px, 4.0vw, 52px);
  line-height: 1.02;
  color: rgba(255,255,255,0.92);
}

/* Quote marks (separadas del texto) */
.cm-quote-mark {
  position: absolute;
  font-family: "Bodoni Moda", Georgia, "Times New Roman", serif;
  font-weight: 800;
  color: rgba(255,255,255,0.88);
  line-height: 1.02;
  user-select: none;
  pointer-events: none;
}

.cm-quote-open {
  left: -14px;
  top: -50px;
  font-size: clamp(84px, 10vw, 140px);
}

.cm-quote-close {
  right: -14px;
  bottom: -82px;
  font-size: clamp(84px, 10vw, 140px);
}

/* Profiles */
.cm-team-profiles {
  display: grid;
  gap: 18px;
  padding: 18px 0 0 0;
}

.cm-profile {
  display: grid;
  grid-template-columns: minmax(240px, calc(360px + var(--cm-team-portrait-bump))) 1fr;
  gap: 18px;
  align-items: center;
  padding: 0 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cm-profile--right {
  grid-template-columns: 1fr minmax(240px, calc(360px + var(--cm-team-portrait-bump)));
}

.cm-profile--right .cm-profile-media { order: 2; }
.cm-profile--right .cm-profile-body { order: 1; }

.cm-profile:not(.cm-profile--right) .cm-profile-body {
  justify-self: end;
  text-align: right;
}

.cm-profile:not(.cm-profile--right) .cm-profile-social {
  justify-content: flex-end;
}

/* Photo */
.cm-profile-photo {
  margin-top: 0px;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  border: 0.5px solid rgba(110, 110, 110, 0.228);
  background: rgba(255,255,255,0.02);
  max-height: min(calc(30vh + var(--cm-team-portrait-bump)), 32vh);
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 1200ms cubic-bezier(.22,.61,.36,1);

}
body.is-team-open .cm-profile-photo {
  transform: scale(1);
}

.cm-team [data-anim="profile"]:nth-of-type(2) .cm-profile-media {
  overflow: hidden;
  border-radius: 20px;
}


/* Text (Inter / sistema) */
.cm-profile-role {
  margin: 0 0 6px 0;
  font-family: var(--cm-font-sans);
  font-size: clamp(28px, 3.0vw, 36px);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: rgba(255,255,255,0.92);
}

.cm-profile-name {
  margin: 0 0 10px 0;
  font-family: var(--cm-font-sans);
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 500;
  color: rgba(255,255,255,0.82);
}

.cm-profile-bio {
  margin: 0;
  max-width: 54ch;
  font-family: var(--cm-font-sans);
  font-size: var(--cm-text-sm);
  line-height: var(--cm-lh-relaxed);
  color: rgba(255,255,255,0.68);
}

/* Social pills */
.cm-profile-social {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.cm-social-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;

  /* New Liquid Glass: misma materialidad que CTA + NAV */
  background:
    linear-gradient(180deg, var(--cm-tint-1), var(--cm-tint-2)),
    rgba(18, 22, 28, var(--cm-glass-a-liquid));

  border: 1px solid rgba(255,255,255,0.12);

  backdrop-filter: blur(var(--cm-blur-liquid));
  -webkit-backdrop-filter: blur(var(--cm-blur-liquid));

  color: rgba(255,255,255,0.78);
  font-size: 12px;
  letter-spacing: 0.02em;

  /* sombras silenciosas */
  box-shadow:
    0 16px 44px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.20);

  opacity: 0.96;
  transform: translateY(0);

  transition:
    transform var(--cm-dur-2) var(--cm-ease),
    opacity var(--cm-dur-2) var(--cm-ease),
    background var(--cm-dur-2) var(--cm-ease);
}

.cm-social-pill--instagram { gap: 8px; }

.cm-social-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.cm-social-pill:hover { transform: translateY(-1px); }
.cm-social-pill:active { transform: translateY(0) scale(0.99); opacity: 0.92; }


/* Footer CTA */
.cm-team-footer {
  display: flex;
  justify-content: flex-start;
  padding-top: 10px;
}

.cm-team-cta {
  height: 46px;
  padding: 0 16px;
  border-radius: 999px;

  /* New Liquid Glass — mismo ADN global */
  background:
    linear-gradient(180deg, var(--cm-tint-1), var(--cm-tint-2)),
    rgba(18, 22, 28, var(--cm-glass-a-liquid));

  border: 1px solid rgba(255,255,255,0.12);

  backdrop-filter: blur(var(--cm-blur-liquid));
  -webkit-backdrop-filter: blur(var(--cm-blur-liquid));

  box-shadow:
    0 18px 54px rgba(0,0,0,0.46),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.22);

  color: rgba(255,255,255,0.88);
  font-size: var(--cm-text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;

  cursor: pointer;

  transition:
    transform var(--cm-dur-2) var(--cm-ease),
    opacity var(--cm-dur-2) var(--cm-ease);
}

.cm-team-cta:hover { transform: translateY(-1px); }
.cm-team-cta:active {
  transform: translateY(0) scale(0.99);
  opacity: 0.95;
}


/* Mobile */
@media (max-width: 860px) {
  .cm-profile,
  .cm-profile--right {
    grid-template-columns: 1fr;
  }

  .cm-profile--right .cm-profile-media,
  .cm-profile--right .cm-profile-body {
    order: initial;
  }

  .cm-profile-photo { max-height: min(calc(30vh + var(--cm-team-portrait-bump)), 32vh); }
  .cm-quote-open { left: -6px; }
  .cm-quote-close { right: -6px; }
}

@media (max-height: 780px) {
  .cm-team { --cm-team-portrait-bump: 12px; }
}

@media (max-height: 720px) {
  .cm-team { --cm-team-portrait-bump: 0px; }
}

/* Desktop: 1 viewport sin scroll */
@media (min-width: 861px) and (min-height: 720px) {
  .cm-team-panel { overflow: hidden; }

  .cm-team-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding:
      calc(var(--cm-space-5) + var(--cm-safe-top))
      var(--cm-space-5)
      calc(var(--cm-space-4) + var(--cm-safe-bottom));
  }

  .cm-team-profiles { gap: 16px; }

  .cm-profile-bio {
    display: -webkit-box;
    display: box;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  .cm-team-footer {
    margin-top: 12px;
    padding-top: 8px;
  }

  .cm-profile-photo { max-height: min(calc(30vh + var(--cm-team-portrait-bump)), 32vh); }
}

/* PORTAFOLIO — CSS.
   CRITICAL: depende de `body.is-portfolio-open`, `body.is-portfolio-atmosphere` y `body.is-portfolio-scroll-unlocked`. */

/* Overlay wrapper */
.cm-portfolio {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: block;
}
.cm-portfolio[hidden] { display: none; }

/* Backdrop */
.cm-portfolio-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 420ms var(--cm-ease);
  opacity: 0;
}
/* CRITICAL: apertura de backdrop controlada por clase global del overlay. */
body.is-portfolio-open .cm-portfolio-backdrop { opacity: 1; }

/* Panel */
.cm-portfolio-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  background:
    radial-gradient(120% 90% at 50% 0%,
      rgba(255,255,255,0.92) 0%,
      rgba(244,245,246,0.92) 44%,
      rgba(238,239,241,0.92) 100%
    );
  color: rgba(17, 21, 27, 0.92);

  transform: translateX(8%);
  opacity: 0;

  /* Slide + rampa */
  max-height: 100vh;
  padding-bottom: 0;

  transition:
    transform 520ms var(--cm-ease),
    opacity 420ms var(--cm-ease);
}

/* CRITICAL: estado abierto del panel principal de Portafolio. */
body.is-portfolio-open .cm-portfolio-panel {
  transform: translateX(0);
  opacity: 1;
  will-change: transform, opacity;
}

/* CRITICAL: `is-portfolio-atmosphere` ajusta solo atmósfera sin alterar layout. */
body.is-portfolio-atmosphere .cm-portfolio-panel {
  background:
    radial-gradient(120% 90% at 50% 0%,
      rgba(255,255,255,0.88) 0%,
      rgba(244,245,246,0.86) 44%,
      rgba(238,239,241,0.84) 100%
    );
}

/* CRITICAL: `is-portfolio-scroll-unlocked` habilita tramo desplazable de Parte 2. */
body.is-portfolio-open.is-portfolio-scroll-unlocked .cm-portfolio-panel {
  max-height: calc(100vh + 900px); /* + rango para reencuadre editorial */
  padding-bottom: 220px;           /* crea “cola” suave para scroll */
  overflow: auto;
}

/* Inner */
.cm-portfolio-inner {
  position: relative;
  max-width: var(--cm-max);
  margin: 0 auto;
  min-height: 100%;
  height: auto;
  padding:
    calc(var(--cm-space-6) + var(--cm-safe-top))
    var(--cm-space-5)
    calc(var(--cm-space-6) + var(--cm-safe-bottom));
  display: flex;
  flex-direction: column;
  color: rgba(17, 21, 27, 0.92); /* FIX: no blanco */
}
/* CRITICAL: cola scrolleable requerida para reencuadre editorial sin saltos. */
body.is-portfolio-scroll-unlocked .cm-portfolio-inner{
  padding-bottom: calc(var(--cm-space-6) + 720px + var(--cm-safe-bottom));
}


/* Nota histórica: bloque previo de hero conservado como referencia de versión. */
/*
.cm-portfolio-hero {
  padding-bottom: var(--cm-space-4);
  border-bottom: 1px solid rgba(17, 21, 27, 0.10);
}
*/
/* C3.2 — Portfolio Travel / Hero. */

/* Estado base (locked) */
.cm-portfolio-hero {
  padding-top: var(--cm-space-6);
  padding-bottom: var(--cm-space-4);
  border-bottom: 1px solid rgba(17, 21, 27, 0.10);
  transform: translateY(0);
  transition:
    padding-top 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.is-portfolio-scroll-unlocked .cm-portfolio-hero {
  padding-top: clamp(9rem, 20vh, 12.5rem); /* +15% aprox */
  padding-bottom: calc(var(--cm-space-4) + 1.2rem); /* respira abajo */
  transform: translateY(-6px);
}

/* C3.3 — Secondary title (unlock). */

.cm-portfolio-title2{
  margin-top: var(--cm-space-3);
  display: none;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(18px);
  filter: blur(10px);
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1) 120ms,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 120ms,
    filter 520ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
}

/* aparece al desbloquear (después del travel) */
body.is-portfolio-scroll-unlocked .cm-portfolio-title2{
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

.cm-portfolio-title {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-weight: 800;
  letter-spacing: -0.015em;
  font-size: clamp(34px, 4.8vw, 66px);
  line-height: 1.02;
  color: rgba(17, 21, 27, 0.92);
}

.cm-portfolio-lead {
  margin-top: 1rem;
  margin-left: 2rem;
  font-family: var(--cm-font-sans);
  font-size: 0.85rem;
  font-weight: 400; /* FIX */
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.60;
  color: rgba(17, 21, 27, 0.92);
}

/* REVEAL (respuesta) */
.cm-portfolio-reveal {
  margin: 0;
  margin-left: 2rem;
  font-family: var(--cm-font-sans);
  font-size: clamp(18px, 2.0vw, 22px);
  font-weight: 300;
  color: rgba(17, 21, 27, 0.92);
  display: block;
  min-height: calc(3 * 1.4em); /* 3 líneas reservadas */
}

/* CASO */
.cm-portfolio-anchor {
  margin-top: var(--cm-space-5);
  padding-top: var(--cm-space-4);
  border-top: 1px solid rgba(17, 21, 27, 0.10);
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--cm-space-4);
  align-items: center;
}

.cm-portfolio-anchor-media {
  height: clamp(190px, 22vh, 280px);
  border-radius: 20px;
  border: 1px solid rgba(17, 21, 27, 0.14);
  background: linear-gradient(180deg, rgba(17,21,27,0.08), rgba(17,21,27,0.02));
  overflow: hidden;
}

.cm-portfolio-anchor-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cm-portfolio-kicker {
  margin: 0 0 6px 0;
  font-family: var(--cm-font-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(17, 21, 27, 0.56);
}

.cm-portfolio-anchor-title {
  margin: 0;
  font-family: var(--cm-font-sans);
  font-size: clamp(18px, 2.0vw, 22px);
  font-weight: 600;
  color: rgba(17, 21, 27, 0.92);
}

.cm-portfolio-anchor-desc {
  margin: 10px 0 0 0;
  font-family: var(--cm-font-sans);
  font-size: var(--cm-text-md);
  line-height: var(--cm-lh-relaxed);
  color: rgba(17, 21, 27, 0.72);
  max-width: 58ch;
}

#cmPortfolioBack {
  margin-top: var(--cm-space-4);
}

#cmPortfolioHome {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: var(--cm-space-5);
}

/* CTA */
.cm-portfolio-cta {
  margin-top: var(--cm-space-5);
  display: flex;
  gap: var(--cm-space-3);
  align-items: center;
}

.cm-portfolio-btn,
#cmPortfolioStart,
#cmPortfolioBack {
  height: 46px;
  padding: 0 16px;
  border-radius: 999px;

  background:
    linear-gradient(180deg, var(--cm-tint-1), var(--cm-tint-2)),
    rgba(18, 22, 28, var(--cm-glass-a-liquid));
  border: 1px solid rgba(255,255,255,0.12);

  backdrop-filter: blur(var(--cm-blur-liquid));
  -webkit-backdrop-filter: blur(var(--cm-blur-liquid));

  box-shadow:
    0 18px 54px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.22);

  color: rgba(255,255,255,0.92);
  font-family: var(--cm-font-sans);
  font-size: var(--cm-text-sm);
  font-weight: 600;
  text-transform: uppercase;

  cursor: pointer;
  transition: transform var(--cm-dur-2) var(--cm-ease), opacity var(--cm-dur-2) var(--cm-ease);
}
.cm-portfolio-btn:hover,
#cmPortfolioStart:hover,
#cmPortfolioBack:hover { transform: translateY(-1px); }
.cm-portfolio-btn:active,
#cmPortfolioStart:active,
#cmPortfolioBack:active { transform: translateY(0); opacity: 0.96; }

/* Chevron */
.cm-portfolio-down {
  margin-top: auto;
  padding-top: var(--cm-space-4);
  display: flex;
  justify-content: flex-start;
}

.cm-portfolio-chevron {
  width: 52px;
  height: 52px;
  border-radius: 999px;

  background:
    linear-gradient(180deg, var(--cm-tint-1), var(--cm-tint-2)),
    rgba(18, 22, 28, var(--cm-glass-a-liquid));
  border: 1px solid rgba(255,255,255,0.12);

  backdrop-filter: blur(var(--cm-blur-liquid));
  -webkit-backdrop-filter: blur(var(--cm-blur-liquid));

  color: rgba(255,255,255,0.92);
  display: grid;
  place-items: center;

  box-shadow:
    0 18px 54px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.30);

  cursor: pointer;
  transition: transform var(--cm-dur-2) var(--cm-ease), opacity var(--cm-dur-2) var(--cm-ease), box-shadow var(--cm-dur-2) var(--cm-ease);
}
.cm-portfolio-chevron:hover {
  transform: translateY(-1px);
  box-shadow:
    0 22px 64px rgba(0,0,0,0.16),
    inset 0 1px 0 rgba(255,255,255,0.34);
}
.cm-portfolio-chevron:active { transform: translateY(0); opacity: 0.96; }

.cm-chevron-icon {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-right: 2px solid rgba(255,255,255,0.90);
  border-bottom: 2px solid rgba(255,255,255,0.90);
  transform: rotate(45deg) translateY(-1px);
}

/* Clients (Estado B) */
.cm-portfolio-clients {
  margin-top: var(--cm-space-6);
  padding-top: var(--cm-space-4);
  border-top: 1px solid rgba(17, 21, 27, 0.10);

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cm-space-3);

  /* Locked: no ocupa escena */
  opacity: 0;
  transform: translateY(10px);
  filter: blur(10px);
  pointer-events: none;

  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.is-portfolio-scroll-unlocked .cm-portfolio-clients {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
}

/* Heading grande (PORTAFOLIO) */
.cm-portfolio-heading{
  grid-column: 1 / -1;
  margin: 0 0 var(--cm-space-3) 0;
  font-family: "Playfair Display", serif;
  font-weight: 800;
  letter-spacing: -0.015em;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.02;
  color: rgba(17, 21, 27, 0.92);

  /* Entrada premium */
  opacity: 0;
  transform: translateX(18px);
  filter: blur(10px);
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1) 120ms,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 120ms,
    filter 520ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
}

body.is-portfolio-scroll-unlocked .cm-portfolio-heading{
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

/* Cards — entrada premium + stagger */
/* Fuente de verdad: css/motion.css (confirmado). */
/*
.cm-portfolio-card{
  opacity: 0;
  transform: translateY(10px);
  filter: blur(10px);

  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 520ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms var(--cm-ease),
    background 320ms var(--cm-ease);
}

body.is-portfolio-scroll-unlocked .cm-portfolio-card{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

body.is-portfolio-scroll-unlocked .cm-portfolio-card:nth-child(2){ transition-delay: 140ms; }
body.is-portfolio-scroll-unlocked .cm-portfolio-card:nth-child(3){ transition-delay: 220ms; }
body.is-portfolio-scroll-unlocked .cm-portfolio-card:nth-child(4){ transition-delay: 300ms; }
*/

/* Responsive */
@media (max-width: 860px) {
  .cm-portfolio-anchor { grid-template-columns: 1fr; }
  .cm-portfolio-clients { grid-template-columns: 1fr; }
}


.cm-portfolio-card {
  border-radius: 18px;
  border: 1px solid rgba(17, 21, 27, 0.14);
  background: rgba(255, 255, 255, 0.74);
  padding: var(--cm-space-3);
  box-shadow: 0 18px 54px rgba(0,0,0,0.08);

  cursor: pointer;
  transition:
    transform 320ms var(--cm-ease),
    box-shadow 320ms var(--cm-ease),
    background 320ms var(--cm-ease);
}
.cm-portfolio-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 74px rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.82);
}
.cm-portfolio-card:active { transform: translateY(-1px); }

.cm-portfolio-card-kicker {
  margin: 0 0 8px 0;
  font-family: var(--cm-font-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(17, 21, 27, 0.56);
}

.cm-portfolio-card-img {
  position: relative;
  height: 110px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(17,21,27,0.08), rgba(17,21,27,0.02));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(17,21,27,0.10);
  margin-bottom: var(--cm-space-2);
}

.cm-portfolio-card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, var(--cm-portfolio-veil-opacity));
  pointer-events: none;
}

.cm-portfolio-card-title {
  margin: 0;
  font-family: var(--cm-font-sans);
  font-size: 14px;
  font-weight: 600;
  color: rgba(17, 21, 27, 0.92);
}

.cm-portfolio-card-desc {
  margin: 6px 0 0 0;
  font-family: var(--cm-font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(17, 21, 27, 0.72);
}
/* C3.6 — Elliptical blur (subtle, editorial) */
.cm-portfolio-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1);
  /* 2 óvalos suaves (máscara) */
  -webkit-mask-image:
    radial-gradient(220px 160px at 68% 28%, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.0) 70%),
    radial-gradient(320px 220px at 42% 54%, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.0) 72%);
  mask-image:
    radial-gradient(220px 160px at 68% 28%, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.0) 70%),
    radial-gradient(320px 220px at 42% 54%, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.0) 72%);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.is-portfolio-open .cm-portfolio-panel::before{
  opacity: 0.18; /* sutil */
  will-change: opacity;
}