/* =============================================================
   MCR STAGE 07 — consolidated legacy base for HOME
   Moved out of global.css; cascade order intentionally preserved.
   ============================================================= */

/* ====== home.css ====== */
/* =============================================================
   MCR AGENCY — HOME · Estilos específicos de la home.
   Solo lo que no vive en tokens.css o components.css.
   Todo bajo prefijo .home-* para no contaminar el sistema.
   ============================================================= */

/* -------------------------------------------------------------
   1. HERO — Video fullpage
   ------------------------------------------------------------- */
.home-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: var(--mcr-black);
  display: flex;
  align-items: flex-end;  /* contenido alineado abajo */
  isolation: isolate;
}

.home-hero__content {
  position: relative;
  z-index: 3;
  padding-bottom: var(--space-9);
  padding-top: var(--space-9);
  width: 100%;
}

.home-hero__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-5);
  color: var(--mcr-text);
  opacity: 0.85;
}

.home-hero__headline {
  max-width: 14ch;
  margin-bottom: var(--space-5);
}

.home-hero__lead {
  max-width: 560px;
  color: var(--mcr-text);
  margin-bottom: var(--space-6);
  opacity: 0.92;
}

.home-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Indicador de scroll */
.home-hero__scroll {
  position: absolute;
  right: var(--gutter-desktop);
  bottom: var(--space-5);
  z-index: 3;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--mcr-text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
@media (min-width: 1024px) {
  .home-hero__scroll { display: flex; }
}
.home-hero__scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(180deg, transparent 0%, var(--mcr-text-muted) 50%, transparent 100%);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%, 100% { opacity: 0.3; transform: scaleY(0.5); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); }
}

/* Reduced motion — el reel queda como poster estático; JS no inicia playback. */
@media (prefers-reduced-motion: reduce) {
  .home-hero__scroll-line { animation: none; }
}

/* -------------------------------------------------------------
   2. STATEMENT
   ------------------------------------------------------------- */
.home-statement {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}
.home-statement__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-5);
}
.home-statement__headline {
  max-width: 22ch;
  margin-bottom: var(--space-6);
}
.home-statement__body {
  max-width: 65ch;
  margin-bottom: var(--space-6);
  color: var(--mcr-text-muted);
}

/* -------------------------------------------------------------
   3. CIFRAS CLAVE
   ------------------------------------------------------------- */
.home-stats {
  padding-top: var(--space-7);
  padding-bottom: var(--space-10);
  border-top: var(--border-width) solid var(--mcr-border);
  border-bottom: var(--border-width) solid var(--mcr-border);
}

/* -------------------------------------------------------------
   4. CINTILLO AGENCIA EXCLUSIVA
   ------------------------------------------------------------- */
.home-exclusive {
  padding: var(--space-7) 0;
  background: var(--mcr-surface-1);
}
.home-exclusive__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: center;
  text-align: center;
}
@media (min-width: 1024px) {
  .home-exclusive__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.home-exclusive__label {
  color: var(--mcr-text-muted);
  flex-shrink: 0;
}
.home-exclusive__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-6);
}
.home-exclusive__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 110px;
  opacity: 0.75;
  transition: opacity var(--duration-base) var(--ease-out);
}
.home-exclusive__logo:hover {
  opacity: 1;
}
.home-exclusive__logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);  /* logos monocromos en blanco */
}
.home-exclusive__logo-fallback {
  display: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  color: var(--mcr-text);
  letter-spacing: var(--tracking-wide);
}

/* -------------------------------------------------------------
   5. SERVICIOS
   ------------------------------------------------------------- */
.home-services__header {
  max-width: 680px;
  margin-bottom: var(--space-8);
}
.home-services__header .mcr-eyebrow {
  display: block;
  margin-bottom: var(--space-4);
}
.home-services__headline {
  margin-bottom: var(--space-5);
}
.home-services__sub {
  color: var(--mcr-text-muted);
}

.home-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--border-width) solid var(--mcr-border);
}
@media (min-width: 640px) {
  .home-services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .home-services__grid { grid-template-columns: repeat(3, 1fr); }
}

.home-service {
  padding: var(--space-6) var(--space-5);
  border-bottom: var(--border-width) solid var(--mcr-border);
  position: relative;
  transition: background var(--duration-base) var(--ease-out);
  cursor: default;
}
.home-service:hover {
  background: var(--mcr-surface-1);
}
/* Bordes entre columnas — solo en tablet+ */
@media (min-width: 640px) {
  .home-service:nth-child(2n) {
    border-left: var(--border-width) solid var(--mcr-border);
  }
}
@media (min-width: 1024px) {
  .home-service:nth-child(2n) { border-left: none; }
  .home-service:not(:nth-child(3n+1)) {
    border-left: var(--border-width) solid var(--mcr-border);
  }
}

.home-service__num {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--mcr-purple-400);
  margin-bottom: var(--space-4);
}
.home-service__title {
  margin-bottom: var(--space-3);
  color: var(--mcr-text);
}
.home-service__desc {
  color: var(--mcr-text-muted);
}

.home-services__cta {
  margin-top: var(--space-7);
  display: flex;
  justify-content: flex-start;
}

/* -------------------------------------------------------------
   6. DIFERENCIADORES
   ------------------------------------------------------------- */
.home-diff {
  background: var(--mcr-surface-1);
}
.home-diff__header {
  max-width: 760px;
  margin-bottom: var(--space-8);
}
.home-diff__header .mcr-eyebrow {
  display: block;
  margin-bottom: var(--space-4);
}
.home-diff__headline {
  margin-bottom: var(--space-5);
}
.home-diff__sub {
  color: var(--mcr-text-muted);
}

.home-diff__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .home-diff__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .home-diff__grid { grid-template-columns: repeat(3, 1fr); }
}

.home-diff__item {
  padding: var(--space-5);
  background: var(--mcr-surface-2);
  border: var(--border-width) solid var(--mcr-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.home-diff__item:hover {
  border-color: var(--mcr-purple);
  transform: translateY(-2px);
}
.home-diff__title {
  margin-bottom: var(--space-3);
  color: var(--mcr-text);
}

/* -------------------------------------------------------------
   7. TALENTO
   ------------------------------------------------------------- */
.home-talent__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}
@media (min-width: 1024px) {
  .home-talent__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
  .home-talent__header > div { max-width: 720px; }
}
.home-talent__header .mcr-eyebrow {
  display: block;
  margin-bottom: var(--space-4);
}
.home-talent__headline {
  margin-bottom: var(--space-5);
}
.home-talent__sub {
  color: var(--mcr-text-muted);
}
.home-talent__link {
  flex-shrink: 0;
  white-space: nowrap;
}

.home-talent__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .home-talent__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }
}

/* Fallback para cards sin imagen — muestra placeholder visible */
.mcr-creator-card.is-empty {
  background: linear-gradient(135deg, var(--mcr-surface-2) 0%, var(--mcr-surface-3) 100%);
}
.mcr-creator-card.is-empty .mcr-creator-card__image {
  display: none;
}
.mcr-creator-card.is-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('./img/garabato-clean.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  opacity: 0.1;
}

/* -------------------------------------------------------------
   8. CASOS DE ÉXITO
   ------------------------------------------------------------- */
.home-cases__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}
@media (min-width: 1024px) {
  .home-cases__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
  .home-cases__header > div { max-width: 720px; }
}
.home-cases__header .mcr-eyebrow {
  display: block;
  margin-bottom: var(--space-4);
}
.home-cases__headline {
  margin-bottom: var(--space-5);
}
.home-cases__sub {
  color: var(--mcr-text-muted);
}
.home-cases__link {
  flex-shrink: 0;
  white-space: nowrap;
}

.home-cases__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 1024px) {
  /* Layout asimétrico: feature grande + 2 pequeñas + feature grande */
  .home-cases__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(320px, auto);
  }
  .home-cases__feature {
    grid-column: span 2;
    aspect-ratio: auto;
    min-height: 480px;
  }
}

/* Fallback para case cards sin imagen */
.mcr-case-card.is-empty {
  background:
    linear-gradient(135deg, var(--mcr-surface-2) 0%, var(--mcr-surface-3) 100%);
}
.mcr-case-card.is-empty .mcr-case-card__image {
  display: none;
}
.mcr-case-card.is-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('./img/garabato-clean.svg');
  background-repeat: no-repeat;
  background-position: right -40px center;
  background-size: 50%;
  opacity: 0.12;
}

/* -------------------------------------------------------------
   9. BRANDS — marquee dual
   ------------------------------------------------------------- */
.home-brands {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
  overflow: hidden;
}
.home-brands__header {
  margin-bottom: var(--space-8);
}
.home-brands__header .mcr-eyebrow {
  display: block;
  margin-bottom: var(--space-4);
}
.home-brands__headline {
  max-width: 20ch;
}
.home-brands__marquee {
  border-top: none;
  border-bottom: none;
  padding-block: var(--space-4);
}
.home-brands__marquee--reverse .mcr-marquee__track {
  animation-direction: reverse;
  animation-duration: 50s;
}

/* -------------------------------------------------------------
   10. CTA FINAL
   ------------------------------------------------------------- */
.home-cta {
  text-align: center;
  padding-top: var(--space-11);
  padding-bottom: var(--space-11);
  border-top: var(--border-width) solid var(--mcr-border);
}
.home-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}
.home-cta__headline {
  max-width: 14ch;
}
.home-cta__sub {
  max-width: 50ch;
  color: var(--mcr-text-muted);
}
.home-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  justify-content: center;
}
.home-cta__email {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-base);
  color: var(--mcr-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--mcr-border-hover);
  transition: text-decoration-color var(--duration-base) var(--ease-out);
}
.home-cta__email:hover {
  text-decoration-color: var(--mcr-purple);
}
.home-cta__offices {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--mcr-text-dim);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-top: var(--space-4);
}

/* =============================================================
   HOME v2.0.7 — Video en su propia sección + hero de texto debajo
   Key decision: el video SIEMPRE se ve en 16:9 completo,
   también en mobile vertical (no se recorta).
   ============================================================= */

/* Sección del video: fondo negro, fullwidth, arranca desde el top */
.home-video {
  width: 100%;
  background: #0f0f0f;
  position: relative;
  overflow: hidden;
  padding-top: 80px; /* espacio para navbar fijo */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
}

/* El player: en desktop llena toda la sección (cover), en mobile respeta 16:9 (contain) */
.home-video__player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;          /* desktop: llena toda la sección sin bandas */
  object-position: center;
  background: #0f0f0f;
  max-height: calc(100vh - 80px);
}

/* Mobile: navbar con misma altura (no cambia), video en 16:9 COMPLETO */
@media (max-width: 768px) {
  .home-video {
    padding-top: 72px;
  }
  .home-video__player {
    object-fit: contain;       /* mobile: video completo, puede haber bandas negras arriba/abajo */
    max-height: none;
  }
}

/* Hero de texto (variante --text): sin video, fondo dark con garabato
   IMPORTANTE: sobrescribir height/min-height/display del .home-hero base
   que estaban pensados para el hero con video fullscreen */
.home-hero--text {
  position: relative;
  background: #0f0f0f;
  padding: var(--space-8) 0 var(--space-7);
  overflow: hidden;
  isolation: isolate;

  /* Overrides del .home-hero base */
  height: auto;
  min-height: 0;
  display: block;
  align-items: initial;
}

.home-hero--text .home-hero__content {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  /* Override del .home-hero__content base que tenía var(--space-9) arriba y abajo */
}

/* Garabato decorativo de fondo */
.home-hero--text::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -8%;
  transform: translateY(-50%);
  width: min(55%, 700px);
  aspect-ratio: 600 / 415;
  background-image: url("./img/garabato-clean.svg");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
  opacity: 0.08;
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 768px) {
  .home-hero--text {
    padding: var(--space-6) 0 var(--space-6);
  }
  .home-hero--text::before {
    opacity: 0.05;
    width: 80%;
    right: -20%;
  }
}

/* Ocultar overlay heredado (en el layout viejo el overlay iba sobre el video) */
.home-hero--text .home-hero__overlay {
  display: none;
}

/* Scroll indicator: ya no tiene sentido absolute sobre el viewport, lo hacemos estático */
.home-hero--text .home-hero__scroll {
  position: relative;
  margin-top: var(--space-7);
  opacity: 0.5;
}

/* =============================================================
   HOME v2.0.9 — Hero de texto centrado
   ============================================================= */

.home-hero--text .home-hero__content {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.home-hero--text .home-hero__eyebrow {
  display: inline-block; /* necesario para que el text-align:center funcione con el border izquierdo */
}

.home-hero--text .home-hero__headline {
  max-width: none;       /* quitar el 14ch que comprimía el texto a la izquierda */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.home-hero--text .home-hero__headline .mcr-hero-headline__line {
  display: block; /* cada línea ocupa 100%, center aplica */
  text-align: center;
}

.home-hero--text .home-hero__lead {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.home-hero--text .home-hero__ctas {
  justify-content: center;
}

/* Scroll indicator también centrado */
.home-hero--text .home-hero__scroll {
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  max-width: max-content;
}

/* El garabato decorativo queda mejor como acento sutil centrado al fondo */
.home-hero--text::before {
  right: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.05; /* aún más sutil al estar centrado detrás */
  width: min(80%, 1000px);
}

@media (max-width: 768px) {
  .home-hero--text::before {
    width: 90%;
    opacity: 0.04;
  }
}

/* =============================================================
   MCR AGENCY — HOME MOTION / POLISH v2.2 · Stage 4
   Scoped to front-page markup. The signature moment is the
   reel → typography handoff; the rest stays intentionally quiet.
   ============================================================= */

/* -------------------------------------------------------------
   1. REEL → TYPOGRAPHY HANDOFF (signature moment)
   Scroll-linked when supported; static, fully readable fallback.
   ------------------------------------------------------------- */
.home-video {
  isolation: isolate;
}

.home-video__player {
  transform-origin: center bottom;
  backface-visibility: hidden;
}

@keyframes home-reel-handoff {
  from {
    transform: scale(1);
    opacity: 1;
    clip-path: inset(0 0 0 0 round 0);
  }
  to {
    transform: scale(0.955);
    opacity: 0.44;
    clip-path: inset(2.5% 2.2% 4% 2.2% round 22px);
  }
}

@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .home-video__player {
      animation-name: home-reel-handoff;
      animation-duration: 1ms;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view(block);
      animation-range: exit 0% exit 100%;
    }
  }
}

/* Hero: editorial reveal by masked lines. */
.home-hero--text {
  border-top: 1px solid rgba(255, 255, 255, 0.045);
}

.home-hero__headline [data-mcr-reveal="clip"] {
  overflow: hidden;
}

.home-hero__line-inner {
  display: block;
  transform: translate3d(0, 0, 0);
  transition: transform 820ms var(--ease-out);
  transition-delay: var(--mcr-reveal-delay, 0ms);
  will-change: transform;
}

.home-hero__headline [data-mcr-reveal="clip"].mcr-reveal--pending .home-hero__line-inner {
  transform: translate3d(0, 112%, 0);
}

.home-hero__headline [data-mcr-reveal="clip"].mcr-reveal--pending.is-visible .home-hero__line-inner {
  transform: translate3d(0, 0, 0);
}

.home-hero__lead { --mcr-reveal-delay: 165ms; }
.home-hero__ctas { --mcr-reveal-delay: 225ms; }

/* El garabato acompaña la entrada sin competir con el headline. */
@keyframes home-garabato-handoff {
  from { opacity: 0.015; transform: translate(-47%, -50%) scale(0.94); }
  to   { opacity: 0.055; transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .home-hero--text::before {
      animation-name: home-garabato-handoff;
      animation-duration: 1ms;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view(block);
      animation-range: entry 0% cover 52%;
    }
  }
}

/* -------------------------------------------------------------
   2. SECTION REVEALS — stronger hierarchy, no blanket animation
   ------------------------------------------------------------- */
.home-statement__headline,
.home-services__headline,
.home-diff__headline,
.home-talent__headline,
.home-cases__headline,
.home-brands__headline,
.home-cta__headline {
  overflow: visible;
}

.home-statement__body,
.home-services__sub,
.home-diff__sub,
.home-talent__sub,
.home-cases__sub {
  --mcr-reveal-delay: 90ms;
}

.home-statement__cta,
.home-services__cta,
.home-cta__actions {
  --mcr-reveal-delay: 150ms;
}

/* -------------------------------------------------------------
   3. STATS — one-time count + line growth
   ------------------------------------------------------------- */
.home-stats .mcr-stat-item {
  position: relative;
  border-top-color: var(--mcr-border);
}

.home-stats .mcr-stat-item::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--mcr-purple);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 720ms var(--ease-out);
  transition-delay: var(--mcr-reveal-delay, 0ms);
}

.home-stats .mcr-stat-item.mcr-reveal--pending::before {
  transform: scaleX(0);
}

.home-stats .mcr-stat-item.mcr-reveal--pending.is-visible::before {
  transform: scaleX(1);
}

.home-stats .mcr-stat {
  font-variant-numeric: tabular-nums;
  min-width: 2.3ch;
}

/* -------------------------------------------------------------
   4. EXCLUSIVE LOGOS — restrained tactile polish
   ------------------------------------------------------------- */
.home-exclusive__logo {
  transform: translate3d(0, 0, 0);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .home-exclusive__logo:hover {
    transform: translate3d(0, -2px, 0);
  }
}

/* -------------------------------------------------------------
   5. SERVICES — scanning line and text response
   ------------------------------------------------------------- */
.home-service {
  overflow: hidden;
}

.home-service::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--space-5);
  right: var(--space-5);
  height: 2px;
  background: var(--mcr-purple);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease-out);
}

.home-service__num,
.home-service__title {
  transition: color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .home-service:hover::before { transform: scaleX(1); }
  .home-service:hover .home-service__num { color: var(--mcr-text); }
  .home-service:hover .home-service__title { transform: translate3d(4px, 0, 0); }
}

/* -------------------------------------------------------------
   6. DIFFERENTIATORS — quieter than portfolio/talent
   ------------------------------------------------------------- */
.home-diff__item {
  overflow: hidden;
}

.home-diff__item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--mcr-purple);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .home-diff__item:hover::after { transform: scaleX(1); }
}

/* -------------------------------------------------------------
   7. TALENT + CASES — pointer depth on media only
   Keeps card geometry still; media supplies the physical response.
   ------------------------------------------------------------- */
[data-home-depth] {
  --home-media-x: 0px;
  --home-media-y: 0px;
}

.home-talent [data-home-depth] .mcr-creator-card__image,
.home-cases [data-home-depth] .mcr-case-card__image {
  transform: translate3d(var(--home-media-x), var(--home-media-y), 0) scale(1.025);
  will-change: transform;
}

.home-talent .mcr-creator-card__bottom,
.home-cases .mcr-case-card__content,
.home-cases .mcr-case-card__result {
  transition: transform 420ms var(--ease-out), opacity 320ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .home-talent [data-home-depth]:hover .mcr-creator-card__image {
    transform: translate3d(var(--home-media-x), var(--home-media-y), 0) scale(1.075);
  }

  .home-talent [data-home-depth]:hover .mcr-creator-card__bottom {
    transform: translate3d(0, -4px, 0);
  }

  .home-cases [data-home-depth]:hover .mcr-case-card__image {
    transform: translate3d(var(--home-media-x), var(--home-media-y), 0) scale(1.065);
  }

  .home-cases [data-home-depth]:hover .mcr-case-card__content {
    transform: translate3d(0, -5px, 0);
  }

  .home-cases [data-home-depth]:hover .mcr-case-card__result {
    transform: translate3d(5px, 0, 0);
  }
}

/* Reveal clip is on the card itself; don't animate its inner media from zero. */
.home-cases [data-mcr-reveal="clip"].mcr-reveal--pending {
  clip-path: inset(0 0 12% 0 round var(--radius-lg));
  opacity: 0.72;
  transition: clip-path 760ms var(--ease-out), opacity 520ms var(--ease-out);
  transition-delay: var(--mcr-reveal-delay, 0ms);
}

.home-cases [data-mcr-reveal="clip"].mcr-reveal--pending.is-visible {
  clip-path: inset(0 0 0 0 round var(--radius-lg));
  opacity: 1;
}

/* -------------------------------------------------------------
   8. BRAND WALL — motion already exists; improve control, not volume
   ------------------------------------------------------------- */
.home-brands__marquee .mcr-marquee__track {
  transition: opacity var(--duration-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .home-brands__marquee:hover .mcr-marquee__track {
    animation-play-state: paused;
  }

  .home-brands__marquee:not(:hover) .mcr-marquee__track {
    opacity: 0.88;
  }
}

/* -------------------------------------------------------------
   9. FINAL CTA — closing beat
   ------------------------------------------------------------- */
.home-cta {
  position: relative;
}

.home-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1280px, calc(100% - 2 * var(--gutter-mobile)));
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mcr-purple), transparent);
  transform: translateX(-50%) scaleX(0.22);
  transform-origin: center;
  opacity: 0.75;
  transition: transform 900ms var(--ease-out);
}

.home-cta:has(.home-cta__headline.is-visible)::after {
  transform: translateX(-50%) scaleX(1);
}

.home-cta__offices { --mcr-reveal-delay: 200ms; }

/* -------------------------------------------------------------
   10. FALLBACKS
   ------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  .home-hero__line-inner {
    transition-duration: 620ms;
  }

  .home-statement [data-mcr-reveal].mcr-reveal--pending,
  .home-stats [data-mcr-reveal].mcr-reveal--pending,
  .home-services [data-mcr-reveal].mcr-reveal--pending,
  .home-diff [data-mcr-reveal].mcr-reveal--pending,
  .home-talent [data-mcr-reveal].mcr-reveal--pending,
  .home-cases [data-mcr-reveal].mcr-reveal--pending,
  .home-brands [data-mcr-reveal].mcr-reveal--pending,
  .home-cta [data-mcr-reveal].mcr-reveal--pending {
    transition-duration: 520ms;
  }

  [data-home-depth] {
    --home-media-x: 0px !important;
    --home-media-y: 0px !important;
  }

  .home-talent [data-home-depth] .mcr-creator-card__image,
  .home-cases [data-home-depth] .mcr-case-card__image {
    transform: scale(1.025);
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-brands__marquee .mcr-marquee__track {
    animation: none !important;
  }

  .home-video__player,
  .home-hero--text::before {
    animation: none !important;
    transform: none;
    clip-path: none;
  }

  .home-hero__line-inner,
  .home-stats .mcr-stat-item::before,
  .home-exclusive__logo,
  .home-service::before,
  .home-service__num,
  .home-service__title,
  .home-diff__item::after,
  .home-talent .mcr-creator-card__bottom,
  .home-cases .mcr-case-card__content,
  .home-cases .mcr-case-card__result,
  .home-cta::after {
    transition-duration: 160ms !important;
    transform: none !important;
  }

  .home-cases [data-mcr-reveal="clip"].mcr-reveal--pending,
  .home-cases [data-mcr-reveal="clip"].mcr-reveal--pending.is-visible {
    opacity: 1;
    clip-path: none;
  }
}


/* =============================================================
   MCR v2.2.4 — HOME TITLE SAFETY
   ============================================================= */
.home-hero__headline {
  line-height: 1.055;
}
.home-hero__headline .mcr-hero-headline__line {
  padding-block: 0.11em;
}
.home-statement__headline,
.home-services__headline,
.home-diff__headline,
.home-talent__headline,
.home-cases__headline,
.home-brands__headline,
.home-cta__headline {
  line-height: 1.1;
  overflow: visible;
}

/* Fallback defensivo por si HTML cacheado conserva el viejo clip reveal. */
.home-hero__headline [data-mcr-reveal="clip"] {
  overflow: visible;
}
.home-hero__headline [data-mcr-reveal="clip"].mcr-reveal--pending .home-hero__line-inner {
  transform: translate3d(0, 10px, 0);
}
.home-hero__headline [data-mcr-reveal="clip"].mcr-reveal--pending.is-visible .home-hero__line-inner {
  transform: translate3d(0, 0, 0);
}