/* ============ HERO · #inicio ============ */
.hero { position: relative; }
.hero-stage { position: relative; }
.hero-inner {
  --l: clamp(2rem, min(6.2vw, 8.4svh), 6rem);   /* tamaño de las dos líneas chicas del titular */
  --slot-h: 34svh;                                 /* alto máximo de la palabra "efecto." */
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding-top: clamp(84px, 11.5vh, 118px);
  padding-bottom: clamp(20px, 4vh, 40px);
  gap: clamp(14px, 2.6vh, 28px);
}

/* --- fila superior: eyebrow + dato de instrumento --- */
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.hero-eyebrow { max-width: none; line-height: 1.4; align-items: flex-start; }
.hero-eyebrow::before { margin-top: .32em; flex: none; }
.hero-eyebrow .num { color: var(--muted); }
.hero-meta { margin: 0; display: flex; gap: .9em; font-family: var(--font-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--muted); }
.hero-meta b { font-weight: 500; color: var(--paper); }

/* --- titular: la palabra "efecto." es el protagonista --- */
.hero-title {
  font-size: var(--l);
  line-height: .95; letter-spacing: -.045em; font-weight: 760;
  margin-block: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(16px, 3vw, 48px);
}
.hero-line { display: block; overflow: hidden; padding: .09em 0 .13em; margin: -.09em 0 -.13em; }
.hero-line-in { display: block; will-change: transform; }
.hero-l1 { grid-column: 1; grid-row: 1; color: var(--paper); }
.hero-l2 { grid-column: 1; grid-row: 2; color: var(--paper-2); }
.hero-l3 { grid-column: 1 / -1; grid-row: 3; margin-top: clamp(4px, 1.2vh, 14px); }
.hero-l3 .hero-line-in { display: flex; align-items: flex-end; }
.hero-l4 { grid-column: 2; grid-row: 1 / 3; align-self: end; justify-self: end; text-align: right; max-width: 19ch; font-size: clamp(1.25rem, 1.5vw, 1.7rem); line-height: 1.18; letter-spacing: -.012em; font-weight: 520; color: var(--paper-2); padding-bottom: .2em; }
.hero-in-done .hero-line { overflow: visible; }

/* el slot: acá se dibujan los cubos de "efecto." Mide lo mismo que la palabra y el JS calza la figura encima */
.hero-slot {
  touch-action: pan-y; /* táctil: el scroll vertical sigue andando y el movimiento horizontal llega al motor */
  --ratio: 5;
  position: relative; display: block; flex: 0 1 auto; min-width: 0;
  width: min(100%, calc(var(--slot-h) * var(--ratio))); aspect-ratio: var(--ratio);
  container-type: size;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hero-slot-txt { position: absolute; left: 0; bottom: -.14em; white-space: nowrap; line-height: 1; letter-spacing: -.05em; font-size: calc(100cqh * 1.5); font-weight: 780; color: var(--accent); transition: opacity .6s var(--ease-out); }
.hero-slot-txt > span { display: inline; }
.hero-gl .hero-slot-txt { opacity: 0; }
.hero-slot::after { content: ''; position: absolute; inset: -8px -12px -6px; border: 1px solid var(--cobalt); opacity: 0; transition: opacity .35s var(--ease-out); pointer-events: none; }
.hs-h { position: absolute; width: 9px; height: 9px; background: var(--paper); border: 1px solid var(--cobalt); opacity: 0; transition: opacity .35s var(--ease-out), transform .5s var(--ease-out); pointer-events: none; transform: scale(.4); }
.hs-tl { left: -17px; top: -13px; }
.hs-tr { right: -17px; top: -13px; }
.hs-bl { left: -17px; bottom: -11px; }
.hs-br { right: -17px; bottom: -11px; }
.hero-slot.is-sel::after, .hero-slot.is-hit::after { opacity: 1; }
.hero-slot.is-sel .hs-h, .hero-slot.is-hit .hs-h { opacity: 1; transform: none; }
.hero-slot:hover .hs-tag, .hero-slot.is-sel 
/* --- fila inferior --- */
.hero-bottom { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); align-items: end; }
.hero-sub { grid-column: 1 / span 4; font-size: clamp(.98rem, .9rem + .3vw, 1.18rem); line-height: 1.45; color: var(--paper-2); max-width: 40ch; text-wrap: pretty; }
.hero-actions { grid-column: 6 / span 5; display: grid; gap: 14px; justify-items: start; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-note { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em; color: var(--muted); }
.hero-tools { grid-column: 11 / span 2; display: grid; justify-items: end; }

.hero-scroll { display: inline-flex; align-items: center; gap: .8em; font-family: var(--font-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--paper-2); }
.hero-scroll:hover { color: var(--paper); }
.hero-tools { transition: opacity .3s var(--ease-out); }
.hero-scrolled .hero-tools { visibility: hidden; transition: visibility 0s .3s; }
.hero-scroll-line { position: relative; width: 1px; height: 38px; background: var(--line-strong); overflow: hidden; }
.hero-scroll-line::after { content: ''; position: absolute; left: -1px; top: 0; width: 3px; height: 8px; background: var(--accent); animation: hero-drop 1.8s var(--ease-inout) infinite; }
@keyframes hero-drop { 0% { transform: translateY(-10px); } 70%, 100% { transform: translateY(40px); } }

/* sin WebGL no hay cubos que contar */
.no-webgl .hero-meta { display: none; }

/* --- estados de entrada (los anima JS; sin JS o si falla, se ve todo) --- */
.js:not(.hero-ready) .hero-line-in { transform: translateY(112%); }
.js:not(.hero-ready) [data-hero-in] { opacity: 0; }
.js.is-ready:not(.hero-ready) .hero-line-in { transform: none; }
.js.is-ready:not(.hero-ready) [data-hero-in] { opacity: 1; }

/* ============ HERO · beat 2 (cursor) ============ */
.hero-beat { touch-action: pan-y; min-height: 62vh; min-height: 62svh; display: flex; align-items: center; padding-block: var(--space-l); }
.hero-beat-inner { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1rem, 2.2vw, 1.7rem); }
.hero-beat-text { font-size: clamp(2rem, .9rem + 3.9vw, 4.6rem); line-height: 1; letter-spacing: -.04em; max-width: min(56%, 13em); font-weight: 720; text-wrap: balance; }
.hero-beat-hint { font-size: .84rem; letter-spacing: .08em; color: var(--paper-2); text-transform: uppercase; }
.hint-m { display: none; }

.hero-proof { width: min(100%, 760px); margin-top: clamp(.4rem, 2vw, 1.2rem); display: grid; gap: .8rem; }
.hero-proof-k { font-size: .78rem; letter-spacing: .1em; color: var(--paper-2); text-transform: uppercase; }
.hero-proof-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 22px); }
.hero-proof-list a { display: grid; align-content: start; gap: .3em; transition: border-color .4s var(--ease-out); }
.hp-th { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-2, #15151a); border: 1px solid var(--line-strong); margin-bottom: .55em; transition: border-color .4s var(--ease-out); }
.hp-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; filter: saturate(.85); transition: transform .7s var(--ease-out), filter .4s; }
.hp-th::after { content: ''; position: absolute; inset: 0; background: linear-gradient(var(--accent), var(--accent)); mix-blend-mode: multiply; opacity: 0; transition: opacity .4s; }
.hero-proof-list a:hover .hp-th, .hero-proof-list a:focus-visible .hp-th, .hero-proof-list a.is-on .hp-th { border-color: var(--accent); }
.hero-proof-list a:hover .hp-th img, .hero-proof-list a:focus-visible .hp-th img, .hero-proof-list a.is-on .hp-th img { transform: scale(1.05); filter: saturate(1.1); }
.hp-n { font-family: var(--font-display); font-weight: 680; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); letter-spacing: -.02em; line-height: 1.1; }
.hp-n i { font-style: normal; color: var(--accent); display: inline-block; margin-left: .22em; transition: transform .4s var(--ease-out); }
.hero-proof-list a:hover .hp-n i, .hero-proof-list a:focus-visible .hp-n i { transform: translateX(4px); }
.hp-r { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .02em; color: var(--paper-2); line-height: 1.3; }
.hero-nw { white-space: nowrap; }
.hero-note { text-wrap: balance; }

/* ============ responsive ============ */
@media (max-width: 1100px) {
  .hero-sub { grid-column: 1 / span 6; }
  .hero-actions { grid-column: 7 / span 6; }
  .hero-tools { grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: flex-end; align-items: center; }
  .hero-l4 { max-width: 15ch; }
}
@media (max-width: 760px) {
  .hero-inner { --l: min(9.4vw, 5.4svh); --slot-h: 34svh; padding-top: clamp(76px, 11svh, 96px); gap: 12px; }
  .hero-top { gap: 14px; }
  .hero-eyebrow { max-width: 34ch; font-size: .72rem; letter-spacing: .05em; }
  .hero-meta { font-size: .72rem; white-space: nowrap; }
  .hero-eyebrow-loc { display: none; }
  .hero-title { grid-template-columns: minmax(0, 1fr); }
  .hero-l4 { grid-column: 1; grid-row: 4; grid-row-end: auto; align-self: start; justify-self: start; text-align: left; max-width: 26ch; font-size: 1.12rem; padding: .1em 0 0; margin-top: 6px; }
  .hero-l3 { grid-row: 3; margin-top: 8px; }
  .hero-slot-txt { font-size: calc(100cqh * .66); line-height: .82; bottom: -.04em; white-space: normal; }
  .hero-slot-txt > span { display: block; }
    .hero-bottom { grid-template-columns: 1fr; gap: 14px; }
  .hero-sub { display: none; }
  .hero-actions, .hero-tools { grid-column: 1 / -1; grid-row: auto; max-width: none; }
  .hero-actions { width: 100%; }
  .hero-cta { display: grid; width: 100%; gap: 8px; }
  .hero-cta .btn { justify-content: space-between; padding-block: .95em; }
  .hero-tools { display: none; }
  .hero-beat { min-height: 100svh; align-items: flex-end; padding-block: 3rem; }
  .hero-beat-text { max-width: none; font-size: clamp(1.95rem, 1rem + 5.2vw, 2.8rem); }
  .hint-d { display: none; } .hint-m { display: inline; }
  .hero-proof-list { grid-template-columns: 1fr; gap: 0; }
  .hero-proof-list a { grid-template-columns: 84px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding-block: 10px; border-top: 1px solid var(--line-strong); }
  .hp-th { grid-row: 1 / 3; margin: 0; }
  .hero-l4 { text-wrap: balance; }
}
@media (max-height: 640px) and (min-width: 761px) {
  .hero-inner { --l: clamp(2rem, min(5.4vw, 7.6svh), 4.4rem); --slot-h: 28svh; }
  .hero-note { display: none; }
}
@media (max-height: 800px) and (min-width: 761px) {
  .hero-inner { padding-bottom: 28px; }
  .hero-sub { font-size: .98rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-line::after { animation: none; transform: translateY(14px); }
}