/* ========== INDEX · Hub Enfoke Group ========== */

/* HERO INDEX -------------------------------------------------- */
.hero-index{
  position:relative;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 40%, #1a1612 0%, #050505 70%);
}
.hero-index .hero-stack .layer{filter:brightness(.42) contrast(1.08) saturate(.92)}
.hero-index .hero-content{max-width:1280px}
.hero-index h1{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(56px, 10vw, 152px);line-height:.92;letter-spacing:-.012em;
  color:var(--cream);
}
.hero-index h1 .accent{color:var(--gold)}
.hero-index .vlist{
  margin-top:54px;
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--cream-dim);
}
.hero-index .vlist span{padding:6px 18px;border-right:1px solid var(--line)}
.hero-index .vlist span:last-child{border-right:none}
@media(max-width:780px){
  .hero-index .vlist{gap:6px 0;font-size:9.5px}
  .hero-index .vlist span{padding:5px 12px}
}

/* SUMARIO (editorial TOC) ------------------------------------- */
.sumario{
  background:var(--bg);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative;
}
.sumario-head{
  max-width:1500px;margin:0 auto;padding:0 40px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:48px;
  margin-bottom:56px;flex-wrap:wrap;
}
.sumario-head h2{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(44px,6.2vw,86px);line-height:.96;color:var(--cream);
  max-width:780px;
}
.sumario-head p{
  color:var(--muted);max-width:420px;font-size:14px;line-height:1.65;
}

/* Split layout */
.sumario-split{
  max-width:1500px;margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns: 1fr 1fr;gap:60px;align-items:start;
}
.toc-list{
  display:flex;flex-direction:column;
  border-top:1px solid var(--line);
}
.toc-row{
  position:relative;display:grid;
  grid-template-columns:64px 1fr auto;align-items:center;gap:28px;
  padding:28px 0 28px;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--cream);
  transition: padding .5s cubic-bezier(.2,.7,.2,1), color .35s;
  cursor:pointer;
}
.toc-row::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.toc-row.active::before{transform:scaleX(1)}
.toc-row .num{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--gold);
  opacity:.7;
}
.toc-row .ttl{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(34px, 4.8vw, 64px);line-height:1;color:var(--cream);
  transition: transform .55s cubic-bezier(.2,.7,.2,1), color .35s;
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
}
.toc-row .ttl small{
  font-family:var(--sans);font-style:normal;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
  font-weight:400;
}
.toc-row .arrow{
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  transition:all .5s cubic-bezier(.2,.7,.2,1);
}
.toc-row .arrow svg{width:14px;height:14px;stroke:var(--cream);fill:none;stroke-width:1.5;transition:transform .5s}
.toc-row:hover{padding-left:18px}
.toc-row:hover .num{opacity:1}
.toc-row:hover .ttl{color:var(--gold)}
.toc-row:hover .arrow{background:var(--gold);border-color:var(--gold);transform:rotate(-45deg)}
.toc-row:hover .arrow svg{stroke:#0a0a0a}
.toc-row.is-soon{cursor:default}
.toc-row.is-soon:hover{padding-left:0}
.toc-row.is-soon:hover .ttl{color:var(--cream-dim)}
.toc-row.is-soon:hover .arrow{background:transparent;border-color:var(--line);transform:none}
.toc-row.is-soon:hover .arrow svg{stroke:var(--cream)}
.toc-row.is-soon .badge{
  font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--gold);
  padding:4px 10px;border:1px solid var(--gold);border-radius:999px;margin-left:4px;
}

/* Preview pane */
.toc-preview{
  position:sticky;top:120px;
  aspect-ratio: 4 / 5;
  width:100%;max-height: 78vh;
  overflow:hidden;background:#0e0d0b;
  border:1px solid var(--line);
}
.toc-preview .pv{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transform:scale(1.06);
  transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1.8s cubic-bezier(.2,.7,.2,1);
  filter:brightness(.85) contrast(1.04);
}
.toc-preview .pv.active{opacity:1;transform:scale(1)}

/* Rotating preview frames (used for Eventos: cycles 5 photos) */
.toc-preview .pv.pv-rotating{background-image:none !important;filter:none}
.toc-preview .pv-frame{
  position:absolute;inset:0;z-index:1;
  background-size:cover;background-position:center;
  opacity:0;
  transition: opacity 1.0s cubic-bezier(.2,.7,.2,1);
  filter:brightness(.85) contrast(1.04);
}
.toc-preview .pv-frame.active{opacity:1}
.toc-preview .pv-rotating .pv-label,
.toc-preview .pv-rotating .pv-num-overlay{z-index:3}

/* Rotation counter dots */
.pv-rotcount{
  position:absolute;top:24px;right:28px;z-index:4;
  display:flex;gap:5px;align-items:center;pointer-events:none;
}
.pv-rotcount span{
  width:4px;height:4px;border-radius:50%;
  background:rgba(241,230,196,.32);transition:all .5s;
}
.pv-rotcount span.active{background:var(--gold);width:14px;border-radius:2px}

.toc-preview .pv::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(5,5,5,0) 35%, rgba(5,5,5,.85) 100%);
}
.toc-preview .pv-label{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:32px 32px 28px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  pointer-events:none;
}
.toc-preview .pv-label .name{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:34px;line-height:1;color:var(--cream);
}
.toc-preview .pv-label .meta{
  font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--gold);
  text-transform:uppercase;text-align:right;
}
.toc-preview .pv-num{
  position:absolute;top:24px;left:28px;z-index:3;
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--cream-dim);
}

/* Placeholder treatment */
.pv-placeholder{
  background:
    repeating-linear-gradient(
      135deg,
      rgba(201,163,92,.05) 0 14px,
      rgba(201,163,92,.0) 14px 28px
    ),
    radial-gradient(ellipse at 50% 30%, #1a1612 0%, #0a0a0a 80%) !important;
}
.pv-placeholder .pv-glyph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--gold);opacity:.18;
}
.pv-placeholder .pv-glyph svg{width:34%;max-width:200px;stroke:currentColor;fill:none;stroke-width:.6}
.pv-placeholder .pv-drop{
  position:absolute;left:0;right:0;top:54%;
  text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted-2);
}

@media(max-width:980px){
  .sumario-split{grid-template-columns:1fr;gap:36px}
  .toc-preview{display:none}
  .toc-row{grid-template-columns:54px 1fr auto;gap:18px;padding:22px 0}
}

/* CARDS GRID (cover under TOC) -------------------------------- */
.cards{
  max-width:1500px;margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:16px;
  margin-top:120px;
}
.card{
  position:relative;overflow:hidden;background:#0f0e0c;
  border:1px solid var(--line);
  text-decoration:none;color:inherit;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.card:hover{transform:translateY(-4px)}
.card .img{
  position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;
  background:#0e0d0b;
}
.card .img > .bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter .6s;
  filter:brightness(.78) contrast(1.05);
}
.card:hover .img > .bg{transform:scale(1.06);filter:brightness(.95) contrast(1.05)}
.card .img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(5,5,5,.9) 100%);
  pointer-events:none;
}
.card .info{
  position:absolute;left:0;right:0;bottom:0;padding:22px 22px 20px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:14px;z-index:2;
}
.card .info .ttl{
  font-family:var(--serif);font-style:italic;font-size:26px;color:var(--cream);
  line-height:1;
}
.card .info .num{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;color:var(--gold);
}
.card .badge{
  position:absolute;top:14px;right:14px;z-index:3;
  font-family:var(--mono);font-size:9px;letter-spacing:.26em;
  padding:5px 10px;border:1px solid var(--line);border-radius:999px;
  background:rgba(5,5,5,.55);backdrop-filter:blur(6px);color:var(--gold);
}
.card.featured{grid-column:span 2;grid-row:span 1}
.card.featured .img{aspect-ratio: 4 / 5}
.card.tall{grid-column:span 2}
.card.wide{grid-column:span 2}

@media(max-width:980px){
  .cards{grid-template-columns:repeat(2,1fr);margin-top:80px;padding:0 22px}
  .card.featured,.card.tall,.card.wide{grid-column:span 2;grid-row:span 1}
}

/* MARQUEE strip ----------------------------------------------- */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-deep);
  overflow:hidden;padding:28px 0;
  display:flex;gap:48px;align-items:center;
  font-family:var(--serif);font-style:italic;font-size:clamp(26px,3.4vw,46px);
  color:var(--cream);white-space:nowrap;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{display:flex;gap:48px;align-items:center;animation:mq 38s linear infinite}
.marquee .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex-shrink:0}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* INTRO COPY -------------------------------------------------- */
.intro-copy{
  max-width:1100px;margin:0 auto;text-align:center;
}
.intro-copy .sec-eyebrow{justify-content:center}
.intro-copy h2{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(40px,6vw,82px);line-height:1.0;color:var(--cream);
  margin-bottom:36px;
}
.intro-copy p{
  font-family:var(--serif);font-size:clamp(17px,1.6vw,21px);line-height:1.55;
  color:var(--cream-dim);max-width:780px;margin:0 auto 18px;
}

/* CLIENTES ---------------------------------------------------- */
.clientes{
  background:var(--bg-deep);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.clientes-head{
  max-width:1500px;margin:0 auto 60px;padding:0 40px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:48px;flex-wrap:wrap;
}
.clientes-head h2{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(44px,6.2vw,86px);line-height:.96;color:var(--cream);
  max-width:780px;
}
.clientes-head p{color:var(--muted);max-width:420px;font-size:14px;line-height:1.65}

.logo-grid{
  max-width:1500px;margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line);
  border:1px solid var(--line);
}
.logo-cell{
  position:relative;background:#000;
  aspect-ratio: 4 / 3;
  display:flex;align-items:center;justify-content:center;
  padding:8px 10px;
  overflow:hidden;
  transition: background .4s;
}
.logo-cell::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.5) 100%);
  pointer-events:none;
}
.logo-cell a{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
}
.logo-cell img{
  max-width:100%;max-height:100%;
  width:100%;height:100%;
  object-fit:contain;
  display:block;margin:auto;
  mix-blend-mode:screen;
  filter:brightness(.86) contrast(1.05);
  opacity:.78;
  transition: opacity .4s, filter .4s, transform .6s cubic-bezier(.2,.7,.2,1);
}
.logo-cell:hover img{
  opacity:1;filter:brightness(1) contrast(1.05);
  transform:scale(1.04);
}
.logo-cell:hover{background:#0a0a0a}

/* All cells use the same scaling now */
.logo-cell.lg img,
.logo-cell.md img,
.logo-cell.sm img,
.logo-cell.xl img{max-width:100%;max-height:100%}

.logo-name{
  position:absolute;left:0;right:0;bottom:14px;text-align:center;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);opacity:0;transition:opacity .4s;
  pointer-events:none;
}
.logo-cell:hover .logo-name{opacity:.85}

.logo-foot{
  max-width:1500px;margin:48px auto 0;padding:0 40px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted-2);
}
.logo-foot strong{color:var(--cream);font-weight:500}

@media(max-width:980px){
  .logo-grid{grid-template-columns:repeat(3,1fr)}
  .logo-cell{padding:24px 18px;aspect-ratio:1 / 1}
}
@media(max-width:560px){
  .logo-grid{grid-template-columns:repeat(2,1fr)}
}

/* Institutional featured logo */
.logo-feature{
  max-width:1500px;margin:60px auto 0;padding:0 40px;
  display:flex;flex-direction:column;align-items:center;gap:28px;
}
.logo-feature-tag{
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);font-weight:500;
}
.logo-feature-tag .line{width:42px;height:1px;background:var(--gold);opacity:.55}
.logo-feature-row{
  display:flex;gap:24px;flex-wrap:wrap;justify-content:center;align-items:stretch;width:100%;
}
.logo-feature-cell{
  flex:1 1 360px;max-width:520px;
  padding:36px 48px;
  background:#000;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.logo-feature-cell::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.45) 100%);
  pointer-events:none;
}
.logo-feature-cell img{
  max-width:100%;max-height:140px;width:auto;height:auto;
  object-fit:contain;
  filter:brightness(.92);
  opacity:.88;
  transition:opacity .4s, filter .4s;
}
.logo-feature-cell:hover img{opacity:1;filter:brightness(1)}

/* TWEAKS panel toggle look ------------------------------------ */
.toc-row .ttl em{font-style:italic}