/* ==========================================================================
   HOMMIE VENTURES — sistema de diseño
   Monocromo: tinta, papel y grises. El único color del sitio es el de las
   capturas reales de cada proyecto. Fondo de "terreno" (curvas de nivel en
   canvas), tipografía gigante y secciones dirigidas por el scroll.

   Todo lo animado vive bajo la clase .fx (la pone js/boot.js cuando hay JS y
   el visitante no pidió movimiento reducido). Sin .fx el sitio es estático y
   muestra exactamente la misma información.
   ========================================================================== */

:root{
  --ink: #0A0A0A;
  --ink-2: #161616;
  --paper: #F3F3EF;
  --white: #FFFFFF;
  --gray: #8C8C88;
  --gray-dark: #55554F;
  --line-dark: rgba(255,255,255,0.16);
  --line-light: rgba(10,10,10,0.14);

  --font-display: "Cabinet Grotesk", "Switzer", -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Zodiak", Georgia, "Times New Roman", serif;
  --font: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --pad: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(.16,.84,.24,1);
  --ease-io: cubic-bezier(.76,0,.24,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.fx:not(.is-loaded) body{ overflow: hidden; }

h1, h2, h3, p, ul, ol{ margin: 0; padding: 0; }
ul, ol{ list-style: none; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
em{ font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

::selection{ background: var(--white); color: var(--ink); }
:focus-visible{ outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }

.visually-hidden{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link{
  position: absolute; left: -999px; top: 0; z-index: 700;
  background: var(--white); color: var(--ink);
  padding: 10px 16px; font-size: 0.85rem; font-weight: 600;
}
.skip-link:focus{ left: 16px; top: 16px; }

.tag{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- letras partidas (js/main.js envuelve cada carácter) ---------- */
.word{ display: inline-block; white-space: nowrap; }
.char{ display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.16em; margin-bottom: -0.16em; letter-spacing: 0; margin-right: -0.045em; }
.char__in{ display: inline-block; }
.fx .char__in{
  transform: translateY(115%);
  transition: transform 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * 38ms);
}
.fx .is-in .char__in,
.fx .slide.is-active .char__in{ transform: translateY(0); }

/* ---------- aparición genérica ---------- */
.fx [data-reveal]{
  opacity: 0;
  transform: translateY(46px);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
.fx [data-reveal].is-in{ opacity: 1; transform: none; }

/* ==========================================================================
   LOADER
   ========================================================================== */
.loader{ display: none; }
.fx .loader{
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: var(--pad);
  background: var(--ink);
  color: var(--white);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s var(--ease-io), visibility 0s linear 1s;
}
.loader__label{
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding-bottom: 1.2em;
}
.loader__count{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(5rem, 22vw, 20rem);
  line-height: 0.8; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.fx.is-loaded .loader{ clip-path: inset(0 0 100% 0); visibility: hidden; }

/* ==========================================================================
   PROGRESO + LUPA
   ========================================================================== */
.progress{
  position: fixed; top: 0; left: 0; z-index: 460;
  width: 100%; height: 2px;
  background: var(--white);
  mix-blend-mode: difference;
  transform: scaleX(var(--sp, 0));
  transform-origin: 0 50%;
}

/* la lupa: refracta lo que tiene detrás con backdrop-filter + un filtro SVG.
   --lens-x / --lens-y llegan desde JS en coordenadas de ventana. */
.lens{
  position: fixed; z-index: 320; top: 0; left: 0;
  width: 200px; height: 200px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  transform: translate(calc(var(--lens-x, 50vw) - 100px), calc(var(--lens-y, 50vh) - 100px));
  background: rgba(255,255,255,0.04);
  backdrop-filter: url(#glassDistort) saturate(1.5) brightness(1.1) contrast(1.05);
  -webkit-backdrop-filter: saturate(1.5) brightness(1.1) contrast(1.05);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.5),
    inset 0 16px 26px rgba(255,255,255,0.22),
    inset 0 -18px 30px rgba(0,0,0,0.3),
    0 26px 50px -18px rgba(0,0,0,0.55);
}
.lens.is-active{ opacity: 1; }
.lens::after{
  content: ""; position: absolute; top: 12%; left: 16%;
  width: 34%; height: 22%; border-radius: 50%;
  background: rgba(255,255,255,0.5); filter: blur(6px);
}
.svg-defs{ position: absolute; width: 0; height: 0; overflow: hidden; }

/* ==========================================================================
   HEADER
   mix-blend-mode: difference → se lee igual sobre negro y sobre papel
   ========================================================================== */
.top{
  position: fixed; top: 0; left: 0; right: 0; z-index: 450;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--pad);
  color: var(--white);
  mix-blend-mode: difference;
  pointer-events: none;
}
.top > *{ pointer-events: auto; }
.top__mark{ font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; }
.top__nav{ display: flex; gap: clamp(18px, 2.6vw, 40px); }
.top__nav a{
  position: relative;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 0;
}
.top__nav a::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 0.5s var(--ease);
}
.top__nav a:hover::after, .top__nav a.is-active::after{ transform: scaleX(1); transform-origin: 0 50%; }

/* reproductor de música (vive en el header, hereda el blend) */
.player{
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
}
html:not(.js) .player{ display: none; }
.player__play{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px currentColor;
  letter-spacing: inherit; text-transform: inherit;
}
.player__bars{ display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.player__bars i{
  display: block; width: 2px; height: 100%;
  background: currentColor;
  transform-origin: 50% 100%;
  transform: scaleY(var(--b, 0.18));
}
.player__state{ min-width: 5ch; text-align: left; }
.player__info{ display: flex; flex-direction: column; gap: 5px; width: clamp(150px, 19vw, 280px); }
.player__title{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__line{ display: block; height: 1px; background: rgba(255,255,255,0.3); position: relative; }
.player__line span{ position: absolute; inset: 0; background: currentColor; transform: scaleX(var(--tp, 0)); transform-origin: 0 50%; }
.player__next{ letter-spacing: inherit; text-transform: inherit; padding: 8px 0; opacity: 0.7; transition: opacity 0.3s ease; }
.player__next:hover{ opacity: 1; }

.top__toggle{ display: none; width: 44px; height: 44px; position: relative; }
.top__toggle span{
  position: absolute; left: 10px; right: 10px; height: 2px; background: currentColor;
  transition: transform 0.4s var(--ease), top 0.4s var(--ease);
}
.top__toggle span:nth-child(1){ top: 17px; }
.top__toggle span:nth-child(2){ top: 26px; }
.top__toggle[aria-expanded="true"] span:nth-child(1){ top: 21px; transform: rotate(45deg); }
.top__toggle[aria-expanded="true"] span:nth-child(2){ top: 21px; transform: rotate(-45deg); }

.menu{
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: flex-end;
  padding: var(--pad);
  background: var(--ink);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.7s var(--ease-io), visibility 0s linear 0.7s;
}
.menu.is-open{ clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
.menu nav{ display: flex; flex-direction: column; gap: 4px; padding-bottom: 6vh; }
.menu a{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.8rem, 13vw, 5rem); line-height: 1; letter-spacing: -0.03em;
}

/* ==========================================================================
   TERRENO (canvas)
   ========================================================================== */
.topo{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.topo--dim{ opacity: 0.55; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position: relative; background: var(--ink); }
.hero__pin{
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 96px var(--pad) var(--pad);
  overflow: hidden;
  --p: 0; --iris: 0;
}
.fx .hero{ height: 210vh; }
.fx .hero__pin{ position: sticky; top: 0; height: 100vh; height: 100svh; }
.fx .hero .topo{ transform: scale(calc(1 + var(--p) * 0.3)); }

.hero__row{ position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.hero__row--top{ align-items: flex-start; }
.fx .hero__row{ opacity: calc(1 - var(--p) * 4); }

.hero__title{
  position: relative; z-index: 2;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3.6rem, 17.6vw, 21rem);
  line-height: 0.8; letter-spacing: -0.045em;
  text-transform: uppercase;
}
.hero__line{ display: block; }
.hero__line--b{ text-align: right; }
.fx .hero__title{ opacity: calc(1 - var(--p) * 2.4); }
.fx .hero__line{ transform: translate3d(calc(var(--p) * -26vw), 0, 0); }
.fx .hero__line--b{ transform: translate3d(calc(var(--p) * 26vw), 0, 0); }
.fx .hero__line--b .char__in{ transition-delay: calc(var(--i, 0) * 38ms + 180ms); }

.hero__sub{ max-width: 34ch; font-size: clamp(1rem, 1.5vw, 1.35rem); line-height: 1.35; color: rgba(255,255,255,0.86); }
.hero__sub em{ font-size: 1.06em; color: var(--white); }
.hero__cue{ display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero__cue-line{ display: block; width: 1px; height: 64px; background: rgba(255,255,255,0.3); position: relative; overflow: hidden; }
.hero__cue-line::after{
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 40%;
  background: var(--white);
  animation: cue 1.9s var(--ease-io) infinite;
}

/* intro del hero: todo espera a que el loader se levante */
.fx:not(.is-loaded) .hero__row{ opacity: 0; }
.fx.is-loaded .hero__row{ animation: introFade 1.2s var(--ease) 0.6s backwards; }

/* el iris: un círculo de papel que crece con el scroll y entrega la sección siguiente */
.hero__iris{ display: none; }
.fx .hero__iris{
  display: block;
  position: absolute; inset: 0; z-index: 5;
  background: var(--paper);
  clip-path: circle(calc(var(--iris) * 130vmax) at 50% 62%);
  pointer-events: none;
  display: grid; place-items: center;
  color: var(--ink);
}
.hero__iris em{
  font-size: clamp(2.6rem, 9vw, 10rem); line-height: 1; letter-spacing: -0.03em;
  transform: scale(calc(0.7 + var(--iris) * 0.3));
}

/* ==========================================================================
   ENFOQUE
   ========================================================================== */
.approach{
  position: relative;
  background: var(--paper); color: var(--ink);
  padding: clamp(80px, 16vh, 200px) var(--pad) clamp(70px, 12vh, 150px);
}
.approach__head{ display: flex; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line-light); margin-bottom: clamp(40px, 8vh, 100px); }

.statement{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 5.1vw, 5.4rem);
  line-height: 1.02; letter-spacing: -0.03em;
  max-width: 1500px;
  text-wrap: balance;
}
.statement em{ font-weight: 400; letter-spacing: -0.02em; }
.fx .w{ opacity: 0.13; transition: opacity 0.5s ease; }
.fx .w.is-lit{ opacity: 1; }

.steps{ margin-top: clamp(70px, 14vh, 180px); }
.step{
  position: relative;
  display: grid; grid-template-columns: minmax(60px, 12vw) 1fr; align-items: baseline; gap: 16px;
  padding: clamp(18px, 3vh, 34px) 0;
}
.step::before{
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--ink);
  transform-origin: 0 50%;
}
.fx .step::before{ transform: scaleX(0); transition: transform 1.4s var(--ease-io); }
.fx .step.is-in::before{ transform: scaleX(1); }
.step__num{ font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--gray-dark); }
.step__text{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.7rem, 5.6vw, 5.6rem);
  line-height: 1; letter-spacing: -0.035em;
}
.step__text em{ font-weight: 400; }

/* ==========================================================================
   MARQUESINA
   ========================================================================== */
.marquee{ overflow: hidden; padding: 0.12em 0; color: var(--white); }
.marquee--paper{ background: var(--paper); color: var(--ink); padding-bottom: clamp(50px, 9vh, 110px); }
.marquee__track{
  display: flex; align-items: center; width: max-content;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(4rem, 14vw, 15rem);
  line-height: 0.95; letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  will-change: transform;
}
.marquee__track span{ display: block; padding: 0 0.18em; }
.marquee__track .is-outline{ color: transparent; -webkit-text-stroke: 1.5px var(--white); }
.marquee--paper .is-outline{ -webkit-text-stroke-color: var(--ink); }
.marquee__track i{ display: block; width: 0.16em; height: 0.16em; border-radius: 50%; background: currentColor; flex: none; }

/* ==========================================================================
   PROYECTOS — escenario fijado, cada proyecto entra como una cortina
   ========================================================================== */
.work{ position: relative; background: var(--ink); color: var(--white); }
.work__pin{ position: relative; }
.fx .work{ height: 480vh; }
.fx .work__pin{ position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

.slide{ position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; --r: 1; --o: 0; }
.fx .slide{
  position: absolute; inset: 0; min-height: 0;
  clip-path: inset(calc((1 - var(--r)) * 100%) 0 0 0);
}

.slide__media{ position: absolute; inset: 0; overflow: hidden; background: var(--ink-2); }
.slide__img{
  position: absolute; inset: 0;
  background-size: cover; background-position: top center; background-repeat: no-repeat;
  transform-origin: 50% 0;
}
.fx .slide__img{
  transform: translate3d(0, calc(var(--o) * -7%), 0) scale(calc(1.2 - var(--r) * 0.2 + var(--o) * 0.05));
  filter: brightness(calc(1 - var(--o) * 0.45));
  will-change: transform;
}
.slide__img--kayto{ background-image: url("../img/kayto-home.png"); }
.slide__img--smokeshop{ background-image: url("../img/smokeshop-home.jpg"); }
.slide__img--cheapland{ background-image: url("../img/cheapland-home.jpg"); }
.slide__img--puravida{ background-image: url("../img/puravida-home.jpg"); }

.slide__scrim{
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.84) 32%, rgba(0,0,0,0.3) 58%, transparent 76%),
    linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.72) 16%, rgba(0,0,0,0.3) 30%, transparent 42%),
    linear-gradient(180deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.9) 7%, transparent 19%);
}

.slide__content{
  position: absolute; left: var(--pad); bottom: clamp(96px, 13vh, 150px);
  width: min(100% - 2 * var(--pad), 58rem);
}
.slide__index{ color: rgba(255,255,255,0.72); margin-bottom: 18px; }
.slide__title{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3rem, 10.5vw, 11.5rem);
  line-height: 0.86; letter-spacing: -0.045em;
  margin-bottom: clamp(18px, 3vh, 32px);
}
.slide__meta{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.slide__meta li{
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 12px; border: 1px solid rgba(255,255,255,0.4); border-radius: 999px;
}
.slide__desc{ max-width: 46ch; font-size: clamp(0.95rem, 1.15vw, 1.1rem); color: rgba(255,255,255,0.86); margin-bottom: 26px; }

.fx .slide__index, .fx .slide__meta, .fx .slide__desc, .fx .slide .btn{
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease);
}
.fx .slide.is-active .slide__index,
.fx .slide.is-active .slide__meta,
.fx .slide.is-active .slide__desc,
.fx .slide.is-active .btn{ opacity: 1; transform: translate(var(--mx, 0px), var(--my, 0px)); transition-duration: 0.9s, 1.1s; }
.fx .slide.is-active .slide__meta{ transition-delay: 0.25s; }
.fx .slide.is-active .slide__desc{ transition-delay: 0.33s; }
.fx .slide.is-active .btn{ transition-delay: 0.41s; }
.fx .slide:not(.is-active) .slide__content{ pointer-events: none; }

/* botón píldora con relleno que sube */
.btn{
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--white); color: var(--ink);
  font-weight: 600; font-size: 0.95rem;
  transform: translate(var(--mx, 0px), var(--my, 0px));
}
.btn::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink); border-radius: inherit;
  transform: translateY(101%);
  transition: transform 0.55s var(--ease-io);
}
.btn{ box-shadow: inset 0 0 0 1px var(--white); transition: color 0.4s ease; }
.btn:hover{ color: var(--white); }
.btn:hover::before{ transform: translateY(0); }
.btn__arrow{ transition: transform 0.5s var(--ease); }
.btn:hover .btn__arrow{ transform: translateX(5px); }

/* riel inferior: saltar entre proyectos + avance */
.rail{ display: none; }
.fx .rail{
  position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(18px, 3.4vh, 34px); z-index: 10;
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 36px);
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(10,10,10,0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.rail__item{
  display: inline-flex; gap: 8px; align-items: baseline;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  padding: 6px 0;
  transition: color 0.3s ease;
}
.rail__item span{ font-size: 0.62rem; }
.rail__item:hover, .rail__item.is-current{ color: var(--white); }
.rail__bar{ flex: 1; height: 1px; background: rgba(255,255,255,0.22); position: relative; }
.rail__bar span{ position: absolute; inset: 0; background: var(--white); transform: scaleX(var(--wp, 0)); transform-origin: 0 50%; }

/* ==========================================================================
   ALIANZAS — tarjetas que se apilan
   ========================================================================== */
.allies{
  background: var(--paper); color: var(--ink);
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(30px, 6vw, 110px);
  padding: clamp(90px, 18vh, 220px) var(--pad) clamp(90px, 16vh, 200px);
}
.allies__intro{ position: sticky; top: 16vh; align-self: start; }
.allies__title{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 6.4vw, 6.8rem);
  line-height: 0.9; letter-spacing: -0.045em;
  margin: 22px 0 26px;
  text-wrap: balance;
}
.allies__title em{ font-weight: 400; letter-spacing: -0.03em; }
.allies__sub{ max-width: 36ch; color: var(--gray-dark); font-size: 1.05rem; }

.stack{ display: flex; flex-direction: column; gap: 9vh; }
.card{
  position: sticky; top: 14vh;
  min-height: min(62vh, 560px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(26px, 3.4vw, 52px);
  border-radius: clamp(20px, 2.4vw, 36px);
  background: var(--ink); color: var(--white);
  transform-origin: 50% 0;
  transform: scale(var(--cs, 1));
  filter: brightness(var(--cb, 1));
}
.card:nth-child(2){ top: calc(14vh + 26px); background: var(--ink-2); }
.card:nth-child(3){ top: calc(14vh + 52px); background: #222220; }
.card__icon{ position: absolute; top: clamp(26px, 3.4vw, 52px); right: clamp(26px, 3.4vw, 52px); width: clamp(54px, 7vw, 110px); height: auto; opacity: 0.9; }
.card h3{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 6.6vw, 7rem);
  line-height: 0.9; letter-spacing: -0.045em;
  margin-bottom: 18px;
}
.card p{ max-width: 34ch; color: rgba(255,255,255,0.78); font-size: 1.05rem; }

/* ==========================================================================
   CONTACTO + FOOTER
   ========================================================================== */
.contact{ position: relative; background: var(--ink); color: var(--white); overflow: hidden; padding-top: clamp(60px, 12vh, 140px); }
.contact > *:not(.topo){ position: relative; z-index: 1; }

.contact__body{ padding: clamp(50px, 10vh, 120px) var(--pad) clamp(70px, 14vh, 170px); }
.contact__lead{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.4rem, 2.9vw, 3rem);
  line-height: 1.1; letter-spacing: -0.02em;
  max-width: 24ch;
  margin: 22px 0 clamp(40px, 8vh, 90px);
}
.contact__email{ display: flex; align-items: center; gap: clamp(16px, 2.6vw, 40px); flex-wrap: wrap; margin-bottom: clamp(36px, 6vh, 70px); }
.contact__email a{
  position: relative;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.35rem, 5.7vw, 6.2rem);
  line-height: 1.05; letter-spacing: -0.04em;
  padding-bottom: 0.08em;
}
.contact__email a::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: max(2px, 0.045em);
  background: currentColor;
  transform-origin: 0 50%;
  transition: transform 0.7s var(--ease-io);
}
.contact__email a:hover::after{ transform: scaleX(0); transform-origin: 100% 50%; }

.copy{
  flex: none;
  width: clamp(84px, 8vw, 124px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: background 0.4s ease, color 0.4s ease;
}
.copy:hover, .copy.is-copied{ background: var(--white); color: var(--ink); }

.social{ display: flex; gap: clamp(18px, 3vw, 44px); flex-wrap: wrap; }
.social a{
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.3);
  transition: border-color 0.3s ease;
}
.social a:hover{ border-color: var(--white); }

.foot{ border-top: 1px solid var(--line-dark); padding: 22px var(--pad) 0; overflow: hidden; }
.foot__row{ display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: rgba(255,255,255,0.7); }
.foot__mark{
  font-family: var(--font-display); font-weight: 800;
  font-size: 11.3vw;
  line-height: 0.78; letter-spacing: -0.05em;
  text-transform: uppercase; white-space: nowrap;
  text-align: center;
  margin: clamp(30px, 6vh, 70px) calc(var(--pad) * -1) -0.06em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.75);
}

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */
@keyframes introFade{ from{ opacity: 0; } }
@keyframes cue{
  0%{ transform: translateY(-100%); }
  100%{ transform: translateY(250%); }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px){
  .allies{ grid-template-columns: 1fr; }
  .allies__intro{ position: static; }
  .hero__geo{ display: none; }
  .player__info{ width: 130px; }
}

@media (max-width: 720px){
  body{ font-size: 16px; }
  .top__nav{ display: none; }
  .player{ margin-left: auto; margin-right: 6px; }
  .player__info, .player__next{ display: none; }
  .top__toggle{ display: block; }
  .lens{ display: none; }

  .hero__title{ font-size: 18.4vw; }
  .hero__line--b{ text-align: left; }
  .hero__row--bottom{ align-items: flex-end; }
  .hero__cue{ display: none; }

  .slide__scrim{
    background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.82) 42%, rgba(0,0,0,0.25) 72%, rgba(0,0,0,0.1) 100%);
  }
  .slide__content{ bottom: 92px; }
  .slide__title{ font-size: clamp(2.6rem, 14vw, 4.4rem); }
  .rail__item{ font-size: 0; gap: 0; }
  .rail__item span{ font-size: 0.72rem; }

  .card{ min-height: 52vh; }
  .foot__mark{ font-size: 11.3vw; -webkit-text-stroke-width: 1px; }
}