/* ============================================================
   BIM Forum Chile v10.4 — Carousel Hero + Responsive Header
   ============================================================ */

/* ── Ken Burns keyframes ───────────────────────────────────── */
@keyframes kb1 { from{transform:scale(1)    translate(0%,0%)}      to{transform:scale(1.12) translate(-2%,-1.5%)} }
@keyframes kb2 { from{transform:scale(1.08) translate(-2%,0%)}     to{transform:scale(1)    translate(2%,0%)} }
@keyframes kb3 { from{transform:scale(1)    translate(2%,1%)}      to{transform:scale(1.1)  translate(-1%,-2%)} }
@keyframes kb4 { from{transform:scale(1.06) translate(0%,-1.5%)}   to{transform:scale(1)    translate(0%,1.5%)} }
@keyframes kb5 { from{transform:scale(1)    translate(-1.5%,0%)}   to{transform:scale(1.09) translate(1.5%,-1%)} }

/* ── Carousel hero shell ───────────────────────────────────── */
.c-hero {
  position: relative;
  height: 100svh; min-height: 600px;
  overflow: hidden;
  background: #070f1a;
  display: flex; flex-direction: column;
}

/* ── Slides (background layer) ─────────────────────────────── */
.c-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  will-change: opacity;
  pointer-events: none;
}
.c-slide.is-active { opacity: 1; z-index: 1; pointer-events: none; }

.c-slide__img {
  position: absolute; inset: -6%;
  background-size: cover; background-position: center;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 20s;
}
.c-slide:nth-child(1) .c-slide__img { animation-name:kb1; animation-delay:-3s; }
.c-slide:nth-child(2) .c-slide__img { animation-name:kb2; animation-delay:-8s; }
.c-slide:nth-child(3) .c-slide__img { animation-name:kb3; animation-delay:-1s; }
.c-slide:nth-child(4) .c-slide__img { animation-name:kb4; animation-delay:-14s; }
.c-slide:nth-child(5) .c-slide__img { animation-name:kb5; animation-delay:-6s; }

.c-slide__ov {
  position: absolute; inset: 0;
  background: linear-gradient(
    to right,
    rgba(7,15,26,.92) 0%,
    rgba(7,15,26,.75) 40%,
    rgba(7,15,26,.38) 75%,
    rgba(7,15,26,.55) 100%
  );
}
.c-slide__ov2 {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,15,26,.88) 0%, transparent 48%);
}

/* ── Decorative hexagons ───────────────────────────────────── */
.c-hex-r {
  position: absolute; right: -4%; top: 8%; z-index: 2; pointer-events: none;
  width: clamp(200px,28vw,420px); aspect-ratio: .866;
  border: 1.5px solid rgba(85,187,235,.09);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  animation: hexFloat 12s ease-in-out infinite;
}
.c-hex-sm {
  position: absolute; right: 22%; top: -8%; z-index: 2; pointer-events: none;
  width: clamp(80px,9vw,140px); aspect-ratio: .866;
  background: rgba(1,117,201,.05);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  animation: hexFloat 8s ease-in-out infinite; animation-delay: -5s;
}

/* ── BIM perspective grid ──────────────────────────────────── */
.c-grid {
  position: absolute; bottom: 0; left: -25%; width: 150%; height: 36%; z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(1,117,201,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1,117,201,.06) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: perspective(480px) rotateX(62deg);
  transform-origin: center bottom;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 100%);
  mask-image: linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 100%);
}

/* ── Scan-line micro-texture ───────────────────────────────── */
.c-scan {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.018) 2px,
    rgba(0,0,0,.018) 4px
  );
}

/* ── Content foreground ────────────────────────────────────── */
.c-hero__content {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
}
.c-hero__body {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(5.5rem, 11vw, 9rem);
}

/* ── Top info bar ──────────────────────────────────────────── */
.c-top-bar {
  padding: 2.5rem 0 0;
  display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  font-family: var(--f-d); font-size: .67rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.38);
}
.c-top-bar .dot {
  width: 5px; height: 6px; background: var(--p1);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  animation: dotPulse 2.4s ease-in-out infinite;
}
.c-top-bar .live {
  background: var(--c1); color: var(--navy-800);
  font-weight: 700; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .2rem .65rem; border-radius: 4px;
  animation: livePulse 2.2s ease-in-out infinite;
}
.c-top-bar .sep { color: rgba(255,255,255,.15); }

/* ── Text block (remounts on slide change → CSS animates in) ─ */
@keyframes cTextIn { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }

.c-text-block { display: flex; flex-direction: column; gap: .65rem; max-width: 640px; }

.c-slide-tag {
  font-family: var(--f-d); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--p1); animation: cTextIn .7s cubic-bezier(.16,1,.3,1) .08s both;
}
.c-slide-h1 {
  color: #fff; font-family: var(--f-d); font-weight: 700;
  font-size: clamp(2.6rem,7vw,6.8rem); letter-spacing: -.04em; line-height: .93;
  animation: cTextIn .95s cubic-bezier(.16,1,.3,1) .18s both;
}
.c-slide-h1 em { font-style: italic; font-weight: 300; color: var(--p1); }
.c-slide-lede {
  color: rgba(255,255,255,.62); font-size: clamp(.875rem,1.4vw,1.05rem); line-height: 1.78;
  animation: cTextIn .85s cubic-bezier(.16,1,.3,1) .36s both;
  margin-top: .25rem;
}
.c-slide-btns {
  display: flex; gap: 1rem; flex-wrap: wrap;
  animation: cTextIn .8s cubic-bezier(.16,1,.3,1) .52s both;
  margin-top: .5rem;
}

/* ── Stats sidebar ─────────────────────────────────────────── */
.c-stats {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 5;
  display: flex; flex-direction: column; gap: 2rem;
  padding-left: 2rem; border-left: 1px solid rgba(255,255,255,.1);
  min-width: 168px;
}
.c-stat .n { font-family: var(--f-d); font-weight: 700; font-size: 2rem; color: #fff; line-height: 1; letter-spacing: -.03em; }
.c-stat .l { font-family: var(--f-d); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.38); margin-top: 4px; }

/* ── Navigation arrows ─────────────────────────────────────── */
.c-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  display: grid; place-items: center; color: #fff;
  cursor: pointer; backdrop-filter: blur(10px);
  transition: background .25s, transform .25s var(--ease-out), border-color .25s, box-shadow .25s;
}
.c-arrow:hover {
  background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.c-arrow.prev { left: clamp(.75rem,2.5vw,2rem); }
.c-arrow.next { right: clamp(.75rem,2.5vw,2rem); }

/* ── Progress bars ─────────────────────────────────────────── */
.c-prog {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 6;
  display: flex; gap: 4px;
  padding: 0 clamp(.75rem,2.5vw,2rem) 1.5rem;
}
.c-prog-bar {
  flex: 1; height: 2.5px; background: rgba(255,255,255,.15);
  border-radius: 2px; overflow: hidden; cursor: pointer;
  transition: height .2s;
}
.c-prog-bar:hover { height: 4px; }
.c-prog-fill {
  height: 100%; background: var(--c1); border-radius: 2px;
  width: 0%;
}
.c-prog-bar.is-done .c-prog-fill { width: 100%; background: rgba(255,255,255,.45); transition: none; }
.c-prog-bar.is-active .c-prog-fill {
  animation: cProgFill var(--prog-dur, 7000ms) linear forwards;
}
@keyframes cProgFill { from{width:0%} to{width:100%} }

/* ── Slide counter ─────────────────────────────────────────── */
.c-counter {
  position: absolute; bottom: 3.2rem; right: clamp(.75rem,2.5vw,2rem); z-index: 6;
  font-family: var(--f-d); font-size: .7rem; letter-spacing: .1em; color: rgba(255,255,255,.4);
  display: flex; align-items: baseline; gap: .3rem;
}
.c-counter .cur { color: #fff; font-size: 1.1rem; font-weight: 700; }

/* ── Scroll indicator ──────────────────────────────────────── */
.c-scroll {
  position: absolute; bottom: 3.8rem; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  color: rgba(255,255,255,.22); font-family: var(--f-d); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  pointer-events: none; animation: fadeInUp 1.5s ease 1.8s both;
}
.c-scroll::after {
  content: ''; display: block; width: 1px; height: 32px;
  background: linear-gradient(to bottom, rgba(255,255,255,.35), transparent);
  animation: scrollGrow 2.4s ease-in-out infinite;
}

/* ── Missing keyframes (define here as fallback) ───────────── */
@keyframes hexFloat  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes dotPulse  { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.25)} }
@keyframes scrollGrow{ 0%,100%{opacity:.4;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(1.18)} }
@keyframes fadeInUp  { from{opacity:0;transform:translateX(-50%) translateY(12px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* ── Header: integrated lang toggle ───────────────────────── */
.hdr__lang {
  display: flex; align-items: center;
  background: var(--ink-50); border: 1px solid var(--ink-100);
  border-radius: 99px; overflow: hidden; flex-shrink: 0;
}
.hdr__lang-btn {
  padding: .32rem .8rem;
  font-family: var(--f-d); font-weight: 700; font-size: .68rem; letter-spacing: .1em;
  border-radius: 99px; color: var(--ink-400);
  transition: background .2s, color .2s;
}
.hdr__lang-btn.is-active { background: var(--cta); color: #fff; }
.hdr__lang-btn:hover:not(.is-active) { color: var(--cta); }

/* ── Mobile nav: lang toggle ───────────────────────────────── */
.mnav__lang {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 0; border-bottom: 1px solid var(--ink-100);
}
.mnav__lang-label {
  font-family: var(--f-d); font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-400);
}
.mnav__lang-btns {
  display: flex;
  background: var(--ink-50); border: 1px solid var(--ink-100);
  border-radius: 99px; overflow: hidden;
}
.mnav__lang-btn {
  padding: .35rem .9rem;
  font-family: var(--f-d); font-weight: 700; font-size: .72rem; letter-spacing: .1em;
  border-radius: 99px; color: var(--ink-400);
  transition: background .2s, color .2s;
}
.mnav__lang-btn.is-active { background: var(--cta); color: #fff; }

/* ── Scroll progress bar (very top) ───────────────────────── */
.scroll-prog {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 2px; pointer-events: none;
}
.scroll-prog__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cta), var(--p1), var(--c1));
  width: 0%; transition: width .12s linear;
}

/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:1100px) {
  .hdr__lang { display: none; }
}
@media(max-width:900px) {
  .c-stats { display: none !important; }
}
@media(max-width:780px) {
  .c-arrow { width: 40px; height: 40px; }
  .c-arrow.prev { left: .4rem; }
  .c-arrow.next { right: .4rem; }
  .c-slide-h1 { line-height: .96; }
  .about-img-wrap { aspect-ratio: 16/10 !important; }
}
@media(max-width:640px) {
  .util { display: none; }
  .c-counter { display: none; }
  .c-scroll { display: none; }
  /* Force single-column layouts on inner pages */
  .platinum-row { grid-template-columns: 1fr !important; }
  .ev-facts-grid { grid-template-columns: 1fr !important; }
}
@media(max-width:480px) {
  .c-slide-btns .btn:nth-child(2) { display: none; }
  .premium-row { grid-template-columns: 1fr !important; }
}

/* ── Reduced motion ────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce) {
  .c-slide__img { animation: none !important; transform: scale(1.04) !important; }
  .c-prog-fill  { animation: none !important; }
}