/*
 * Creative Invasion — Home Sections & Own Media
 * Organización: este archivo concentra ajustes y secciones personalizadas
 * para la home. El style.css conserva la base del tema.
 */

/* ============ ABOUT / ESTUDIO ============ */
.est-fig .frame { box-shadow: 14px 14px 0 var(--red); }
.est-fig figcaption span:first-child { max-width: 70%; }

/* ============ SERVICES / OWN MEDIA HOVERS ============ */
#servicios .sec-head .kick:last-child { color: #a6a39c; }
.srv-head { align-items: start; }
.srv-tags { margin-top: 4px; }

/* ============ REAL WORK / OWN MEDIA CURATION ============ */
.client-work-head p { max-width: 560px; }
.rw-selection-head p { max-width: 680px; }
.rw-editorial figcaption, .rw-hero-media figcaption { backdrop-filter: blur(8px); }
.rw-bts-copy p { max-width: 520px; }

/* ============ CASES / BRANDS WALL ============ */
.case-copy .chips li, .brands-wall-grid span { text-transform: uppercase; }
.brands-wall-grid span { font-size: 10px; }

/* ============ PRODUCTION ============ */
#fsText p { max-width: 520px; }

/* ============ RESPONSIVE TWEAKS ============ */
@media (max-width: 900px) {
  .client-work-grid { grid-template-columns: 1fr; }
  .rw-editorial-row, .rw-editorial-row-reverse { grid-template-columns: 1fr; }
}


/* ============ HERO / VIDEO BACKGROUND ============ */
.hero-reel-clean {
  background: #08080a;
}
.hero-reel-clean video {
  opacity: 1;
  visibility: visible;
}
.hero-reel-clean::after {
  background: rgba(0,0,0,.16);
}

/* ============ PRODUCTION / BTS ONLY ============ */
.production-bts { padding: 110px 0 100px; background: var(--ink); }
.production-feature { display:grid; grid-template-columns:.9fr 1.1fr; gap:22px; align-items:stretch; margin:34px 0 32px; }
.production-feature-copy { min-width:0; border:1px solid var(--line); border-radius:22px; background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)); padding:30px 26px; display:flex; flex-direction:column; justify-content:center; }
.production-kicker,.production-overline { display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.production-kicker { color:var(--mut); margin-bottom:10px; }
.production-overline { color:var(--paper); margin-bottom:18px; }
.production-feature-copy h2 { font-family:var(--disp); font-size:clamp(2.5rem,5.8vw,5rem); line-height:.92; text-transform:uppercase; margin:0 0 18px; }
.production-feature-copy h2 i { font-family:var(--serif); font-style:italic; text-transform:none; color:var(--red); }
.production-feature-copy p { color:#c4c0b8; max-width:560px; line-height:1.75; }
.production-feature-media { position:relative; overflow:hidden; height:560px; min-width:0; border-radius:22px; border:1px solid var(--line); background:var(--ink2); }
.production-feature-media video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.production-feature-media::after { content:""; position:absolute; inset:auto 0 0; height:35%; background:linear-gradient(180deg,transparent,rgba(0,0,0,.8)); pointer-events:none; }
.production-feature-media figcaption { position:absolute; left:18px; right:18px; bottom:18px; z-index:2; display:flex; flex-direction:column; gap:5px; color:#fff; }
.production-feature-media figcaption span { font-size:10px; letter-spacing:.18em; color:rgba(255,255,255,.72); }
.production-feature-media figcaption strong { font-size:12px; letter-spacing:.14em; }
.production-intro { display:grid; grid-template-columns:.8fr 1.2fr; gap:30px; align-items:end; margin:0 0 24px; }
.production-intro h3 { font-family:var(--disp); font-size:clamp(1.8rem,4vw,3rem); line-height:.95; text-transform:uppercase; }
.production-intro p { color:#bdbab2; max-width:720px; line-height:1.75; }
.bts-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:stretch; }
.bts-card { position:relative; overflow:hidden; height:480px; min-width:0; border:1px solid var(--line); border-radius:18px; background:var(--ink2); }
.bts-card video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.bts-card::after { content:""; position:absolute; inset:auto 0 0; height:34%; background:linear-gradient(180deg,transparent,rgba(0,0,0,.78)); pointer-events:none; }
.bts-card figcaption { position:absolute; z-index:2; left:16px; right:16px; bottom:16px; display:flex; align-items:center; gap:12px; color:#fff; }
.bts-card figcaption span { color:var(--red); font-size:10px; letter-spacing:.18em; font-weight:700; }
.bts-card figcaption strong { font-size:11px; letter-spacing:.13em; }
@media(max-width:1000px){.production-feature,.production-intro{grid-template-columns:1fr}.production-feature-media{height:70vw;max-height:620px}.bts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bts-card{height:65vw;max-height:560px}}
@media(max-width:700px){.production-feature-copy{padding:22px 18px}.production-feature-media{height:88vw;border-radius:16px}.bts-grid{grid-template-columns:1fr 1fr;gap:10px}.bts-card{height:78vw;border-radius:14px}}

/* ============ HERO: 3 REELS DETRÁS DEL TEXTO ============ */
#inicio.hero-reels-layout { position:relative; isolation:isolate; background:#09090b; overflow:hidden; }
.hero-bg.hero-bg-static { background:linear-gradient(135deg,#08090b 0%,#101116 52%,#09090b 100%); }
.hero-bg.hero-bg-static::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,9,11,.80) 0%,rgba(8,9,11,.48) 42%,rgba(8,9,11,.34) 72%,rgba(8,9,11,.62) 100%); }
.hero-reels-wrap { position:relative; z-index:2; flex:1; min-height:calc(100svh - 70px); display:flex; align-items:center; justify-content:flex-start; padding:110px 4vw 54px; overflow:hidden; }
.hero-reels-wrap::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(180deg,rgba(8,9,11,.12),rgba(8,9,11,.08) 45%,rgba(8,9,11,.65) 100%); }
.hero-reels-clean { position:absolute; z-index:1; top:88px; right:3vw; bottom:70px; left:34vw; display:flex; justify-content:flex-end; align-items:center; gap:14px; pointer-events:none; overflow:hidden; opacity:.92; }
.hero-reel-clean { position:relative; flex:0 0 min(21vw,330px); height:min(70vh,590px); overflow:hidden; border-radius:18px; border:1px solid rgba(255,255,255,.10); background:#111; box-shadow:0 18px 45px rgba(0,0,0,.28); }
.hero-reel-clean::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.08); }
.hero-reel-clean video { width:100%; height:100%; display:block; object-fit:cover; background:#000; opacity:1; visibility:visible; }
.hero-copy-overlay { position:relative; z-index:3; width:min(100%,980px); max-width:980px; text-align:left; padding:24px 0; }
.hero-copy-center .hero-kick { justify-content:flex-start; }
.hero-sub.hero-sub-center { justify-content:space-between; align-items:flex-end; flex-direction:row; gap:24px; }
.hero-sub.hero-sub-center p { max-width:520px; text-align:left; }
.hero-side { z-index:4; }
@media(max-width:1100px){.hero-reels-clean{left:40vw;right:2vw;gap:10px}.hero-reel-clean{flex-basis:min(24vw,280px);height:min(62vh,520px)}}
@media(max-width:760px){.hero-side{display:none}.hero-reels-wrap{min-height:820px;padding:98px 18px 34px;align-items:flex-start}.hero-reels-clean{top:250px;left:14px;right:14px;bottom:110px;justify-content:center;gap:7px;opacity:.72}.hero-reel-clean{flex:1 1 0;height:470px;border-radius:12px}.hero-copy-overlay{padding:0}.hero-sub.hero-sub-center{flex-direction:column;align-items:flex-start}.hero-sub.hero-sub-center p{text-align:left;max-width:100%}}

/* ============ COBERTURA CON MAPAS ============ */
#cobertura { padding: 110px 0 90px; }
.coverage-intro {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 34px;
  align-items: end;
  margin: 34px 0 46px;
}
.coverage-intro h2 {
  font-family: var(--disp);
  font-size: clamp(2rem, 4.8vw, 4.6rem);
  line-height: .95;
  text-transform: uppercase;
}
.coverage-intro h2 i { font-family: var(--serif); font-style: italic; text-transform: none; color: var(--red); }
.coverage-intro p { color: #bdbab2; max-width: 760px; font-size: 16px; line-height: 1.75; }
.coverage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
.coverage-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.coverage-card:hover {
  transform: translateY(-6px);
  border-color: rgba(232,17,45,.36);
  box-shadow: 0 24px 42px rgba(0,0,0,.22);
}
.coverage-map {
  min-height: 280px;
  display: grid;
  place-items: center;
  padding: 24px 24px 10px;
  background:
    radial-gradient(circle at 50% 45%, rgba(31,127,232,.08), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.coverage-map svg {
  width: min(100%, 230px);
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.18));
}
.co-outline {
  fill: none;
  stroke: rgba(255,255,255,.22);
  stroke-width: 2.2;
  stroke-linejoin: round;
}
.co-region { fill: var(--red); }
.region-antioquia { fill: #1f7fe8; }
.region-guajira { fill: var(--red); }
.co-node {
  fill: var(--paper);
  stroke: var(--red);
  stroke-width: 3;
}
.co-base-full + .co-outline { stroke: rgba(255,255,255,.28); }
.node-left, .node-right, .node-mid {
  fill: var(--paper);
  stroke: #0b0b0d;
  stroke-width: 2;
}
.coverage-copy {
  padding: 10px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.coverage-tag {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mut);
}
.coverage-copy h3 {
  font-family: var(--disp);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  line-height: .95;
  text-transform: uppercase;
}
.coverage-copy p { color: #c7c4bc; font-size: 15px; line-height: 1.7; }
.coverage-copy ul {
  margin-top: 4px;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.coverage-copy li {
  position: relative;
  padding-left: 18px;
  color: #a8a59f;
  font-size: 13px;
  line-height: 1.55;
}
.coverage-copy li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}
.coverage-card-full {
  background: linear-gradient(180deg, rgba(232,17,45,.08), rgba(255,255,255,.02));
}
.coverage-card-full .coverage-map {
  background:
    radial-gradient(circle at 50% 40%, rgba(232,17,45,.13), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
@media (max-width: 980px) {
  .coverage-intro { grid-template-columns: 1fr; gap: 16px; }
  .coverage-grid { grid-template-columns: 1fr; }
  .coverage-map { min-height: 240px; }
}


/* ============ CLIENTES RIONEGRO ============ */
.cl-head { max-width: 820px; margin-left: auto; margin-right: auto; line-height: 1.7; }
.cl-row { gap: 12px; }
.cl-row span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.02);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  color: #d7d4cc;
}
.cl-row span:hover { color: var(--paper); border-color: rgba(232,17,45,.4); background: rgba(232,17,45,.08); }

/* ============ MURO DE MARCAS EN CASOS ============ */
.brands-wall {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.brands-wall-title {
  display: block;
  margin-bottom: 16px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mut);
}
.brands-wall-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.brands-wall-grid span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: #d7d4cc;
  background: rgba(255,255,255,.02);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.brands-wall-grid span:hover { border-color: rgba(232,17,45,.4); background: rgba(232,17,45,.08); }


/* ============ V16 / REMOVE EMPTY BLACK GAPS ============ */
/* Casos: solo el slide activo ocupa espacio en el flujo. */
#casos .case-stage {
  min-height: 0;
  height: auto;
}
#casos .case-slide {
  display: none;
  position: relative;
  inset: auto;
  opacity: 1;
  transform: none;
}
#casos .case-slide.is-active {
  display: grid;
}
#casos .case-video {
  min-height: 0;
  aspect-ratio: 4 / 5;
}

/* Trabajo real: reemplaza alturas rígidas por proporciones reales. */
.real-work {
  padding-top: 96px;
  padding-bottom: 96px;
}
.rw-story {
  gap: 18px;
}
.rw-hero-media {
  min-height: 0;
  aspect-ratio: 16 / 9;
}
.rw-editorial-row,
.rw-editorial-row-reverse {
  min-height: 0;
  align-items: stretch;
}
.rw-editorial-large,
.rw-editorial-portrait,
.rw-editorial {
  min-height: 0;
}
.rw-editorial-large {
  aspect-ratio: 4 / 3;
}
.rw-editorial-portrait {
  aspect-ratio: 4 / 5;
}
.rw-editorial-stack .rw-editorial,
.rw-editorial-stack-wide .rw-editorial {
  aspect-ratio: 4 / 3;
}
.rw-editorial-stack {
  grid-template-rows: auto auto;
  align-content: stretch;
}
.rw-editorial-stack-wide {
  align-items: stretch;
}
.rw-bts {
  margin-top: 18px;
  padding-top: 40px;
}

/* Producción: elimina altura residual y mantiene clips contenidos. */
.production-bts {
  padding-top: 96px;
  padding-bottom: 96px;
}
.production-feature {
  margin-bottom: 24px;
}
.production-feature-media {
  height: auto;
  aspect-ratio: 4 / 5;
}
.bts-card {
  height: auto;
  aspect-ratio: 9 / 16;
}

/* Highlights y clientes: separaciones más compactas y consistentes. */
#highlights {
  padding-top: 96px;
  padding-bottom: 96px;
}
#clientes {
  padding-top: 56px;
  padding-bottom: 56px;
}

@media (max-width: 1000px) {
  #casos .case-video { aspect-ratio: 16 / 10; }
  .production-feature-media { height:auto; max-height:none; aspect-ratio:16/10; }
  .bts-card { height:auto; max-height:none; aspect-ratio:9/16; }
}
@media (max-width: 700px) {
  .real-work,
  .production-bts,
  #highlights { padding-top:72px; padding-bottom:72px; }
  .rw-hero-media { aspect-ratio: 4 / 3; }
  .rw-editorial-large,
  .rw-editorial-portrait,
  .rw-editorial-stack .rw-editorial,
  .rw-editorial-stack-wide .rw-editorial { aspect-ratio:4/5; }
  .production-feature-media { height:auto; aspect-ratio:4/5; }
  .bts-card { height:auto; aspect-ratio:9/16; }
}


/* ============ V17 / HERO COMPOSITION ============ */
@media (min-width: 1101px) {
  #inicio.hero-reels-layout { min-height: 100svh; }
  .hero-reels-wrap {
    min-height: calc(100svh - 58px);
    padding: 104px 4vw 48px;
    align-items: center;
  }
  .hero-copy-overlay {
    width: 66vw;
    max-width: 1030px;
    padding: 18px 0 0;
  }
  .hero-copy-overlay .hero-t {
    max-width: 1000px;
  }
  .hero-reels-clean {
    top: 112px;
    right: 3.2vw;
    bottom: 84px;
    left: 48vw;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    opacity: .95;
  }
  .hero-reel-clean {
    flex: 0 0 min(15.2vw, 245px);
    height: min(64vh, 570px);
    border-radius: 18px;
  }
  .hero-sub.hero-sub-center {
    width: min(65vw, 880px);
    justify-content: flex-start;
    align-items: center;
    gap: 28px;
    margin-top: 26px;
  }
  .hero-sub.hero-sub-center p {
    width: min(520px, 42vw);
    max-width: 520px;
  }
  .hero-sub.hero-sub-center .btn {
    flex: none;
  }
}

/* ============ V17 / TRABAJO REAL COMPACTO ============ */
.real-work { padding-top: 92px; }
.real-work .sec-head { margin-bottom: 0; }
.rw-intro {
  grid-template-columns: minmax(0, .95fr) minmax(320px, .55fr);
  gap: clamp(30px, 5vw, 78px);
  align-items: end;
  margin: 34px 0 34px;
}
.rw-intro h2 {
  max-width: 720px;
  font-size: clamp(3rem, 6.4vw, 6.2rem);
}
.rw-intro p {
  align-self: end;
  margin-bottom: 7px;
  max-width: 560px;
}
.client-work {
  margin: 30px 0 58px;
  padding-top: 28px;
}
.client-work-head {
  align-items: center;
  margin-bottom: 18px;
}
.client-work-head p { line-height: 1.55; }
.client-work-card { min-height: 195px; }
.client-work-card strong { margin-top: 26px; }
.client-work-card b { padding-top: 20px; }
.rw-selection-head { margin-top: 12px; margin-bottom: 20px; }

@media (max-width: 1100px) and (min-width: 761px) {
  .hero-reels-clean { left: 43vw; }
  .hero-copy-overlay { width: 68vw; }
  .hero-sub.hero-sub-center { width: 64vw; justify-content:flex-start; }
  .rw-intro { grid-template-columns: 1fr .7fr; gap: 34px; }
}

@media (max-width: 760px) {
  .real-work { padding-top: 72px; }
  .rw-intro { margin: 26px 0 24px; gap: 18px; }
  .client-work { margin-top: 20px; padding-top: 22px; }
}


/* ============ V18 / HERO CENTRADO ============ */
@media (min-width: 1101px) {
  #inicio.hero-reels-layout {
    min-height: 100svh;
  }

  .hero-reels-wrap {
    min-height: calc(100svh - 58px);
    padding: 104px 4vw 50px;
    align-items: center;
    justify-content: center;
  }

  .hero-reels-clean {
    top: 98px;
    right: 8vw;
    bottom: 82px;
    left: 8vw;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(12px, 1.2vw, 20px);
    opacity: .86;
  }

  .hero-reel-clean {
    flex: 0 0 min(19vw, 300px);
    height: min(68vh, 600px);
    border-radius: 20px;
  }

  .hero-reel-clean:nth-child(1) {
    transform: translateX(-2vw);
  }

  .hero-reel-clean:nth-child(2) {
    transform: translateY(-8px);
  }

  .hero-reel-clean:nth-child(3) {
    transform: translateX(2vw);
  }

  .hero-copy-overlay {
    width: min(100%, 1120px);
    max-width: 1120px;
    text-align: center;
    padding: 22px 24px;
  }

  .hero-copy-center .hero-kick {
    justify-content: center;
  }

  .hero-copy-overlay .hero-t {
    max-width: 1080px;
    margin-inline: auto;
  }

  .hero-sub.hero-sub-center {
    width: min(100%, 820px);
    margin: 28px auto 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
  }

  .hero-sub.hero-sub-center p {
    width: auto;
    max-width: 680px;
    text-align: center;
  }

  .hero-sub.hero-sub-center .btn {
    flex: none;
  }
}