/* ============================================================
   DIGITALI — Publicidad Exterior / Pantallas LED
   Sistema: negro + espectro LED RGB + cortes diagonales
   Tipografía grande con tratamientos outline/transparente
   ============================================================ */

:root {
  --bg:    #0b0b0d;
  --bg-2:  #131316;
  --bg-3:  #1b1b1f;
  --fg:    #f5f5f6;
  --fg-dim: rgba(245,245,246,0.60);
  --fg-dim2: rgba(245,245,246,0.40);
  --line:  rgba(255,255,255,0.13);
  --line-2: rgba(255,255,255,0.07);

  /* Espectro LED (colores del logo / pantallas) */
  --c-orange: #f59a3c;
  --c-coral:  #ef5f3c;
  --c-red:    #e83c52;
  --c-magenta:#d6359a;
  --c-violet: #8e3acb;
  --c-blue:   #3a63d6;
  --c-cyan:   #22b6c8;
  --c-green:  #79c14a;

  --spectrum: linear-gradient(95deg,
     #f59a3c 0%, #ef4f3c 16%, #e83c6e 30%,
     #d6359a 44%, #8e3acb 58%, #3a63d6 72%,
     #22b6c8 86%, #79c14a 100%);
  --spectrum-soft: linear-gradient(95deg,
     rgba(245,154,60,.16), rgba(214,53,154,.16),
     rgba(58,99,214,.16), rgba(34,182,200,.16), rgba(121,193,74,.16));

  --display: "Archivo", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --sans:    "Archivo", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --pad: clamp(20px, 5vw, 90px);
  --maxw: 1520px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  cursor: none;
}
@media (max-width: 900px){ body{ cursor:auto; } }
::selection { background: var(--c-magenta); color: #fff; }
a { color: inherit; text-decoration: none; }
img { display:block; max-width:100%; }
button { font: inherit; }

/* ---------------- Custom cursor ---------------- */
.cur-dot, .cur-ring { position: fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; transform: translate(-50%,-50%); }
.cur-dot  { width:6px; height:6px; background:#fff; mix-blend-mode:difference; }
.cur-ring { width:36px; height:36px; border:1.5px solid rgba(255,255,255,.55); transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); }
.cur-ring.hover { width:62px; height:62px; border-color: transparent; background: var(--spectrum-soft), rgba(255,255,255,.05); }
@media (max-width: 900px), (prefers-reduced-motion: reduce){ .cur-dot,.cur-ring{ display:none; } }

/* ---------------- Helpers ---------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.spectrum-text {
  background: var(--spectrum);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.outline-text {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(245,245,246,0.45);
}
@media (max-width: 640px){ .outline-text{ -webkit-text-stroke-width: 1px; } }

.eyebrow {
  display:inline-flex; align-items:center; gap:12px;
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color: var(--fg-dim);
}
.eyebrow::before { content:""; width:30px; height:3px; border-radius:2px; background: var(--spectrum); }

.barra { /* vertical bar accent like the cover */
  display:inline-block; width:6px; align-self:stretch; border-radius:3px;
  background: var(--spectrum); flex: none;
}

.btn {
  display:inline-flex; align-items:center; gap:.65em;
  font-weight:600; font-size:1rem; line-height:1;
  padding:1.05em 1.7em; border-radius:100px;
  background:#fff; color:#0b0b0d; border:1.6px solid #fff;
  cursor:none; will-change:transform;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .25s var(--ease);
}
.btn:hover { background:transparent; color:#fff; }
.btn .ic { transition: transform .35s var(--ease); display:inline-flex; }
.btn:hover .ic { transform: translate(3px,-3px); }
.btn--ghost { background:transparent; color:#fff; border-color: var(--line); }
.btn--ghost:hover { border-color:#fff; }
.btn--spectrum { position:relative; background: transparent; color:#fff; border:none; padding:1.15em 1.8em; }
.btn--spectrum::before { content:""; position:absolute; inset:0; border-radius:100px; padding:1.6px; background: var(--spectrum); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.btn--spectrum:hover { background: var(--spectrum); color:#0b0b0d; }
@media (max-width:900px){ .btn{ cursor:pointer; } }

/* ---------------- NAV ---------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index:300;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding: 20px var(--pad);
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background: rgba(11,11,13,.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding-block:12px; border-bottom-color: var(--line); }
.brand { display:flex; align-items:center; gap:12px; cursor:none; }
.brand img.icon { height: 36px; width:auto; }
.brand img.word { height: 22px; width:auto; }
.nav-mid { display:flex; align-items:center; gap:34px; }
.nav-mid a { font-size:.97rem; font-weight:500; color:var(--fg-dim); position:relative; cursor:none; transition: color .25s var(--ease); }
.nav-mid a::after { content:""; position:absolute; left:0; bottom:-7px; height:2px; width:0; background: var(--spectrum); transition: width .3s var(--ease); }
.nav-mid a:hover { color:#fff; } .nav-mid a:hover::after { width:100%; }
.nav-right { display:flex; align-items:center; gap:14px; }
.nav .btn { padding:.85em 1.35em; font-size:.95rem; white-space:nowrap; }
.menu-toggle { display:none; width:46px; height:46px; border:1px solid var(--line); border-radius:50%; background:transparent; color:#fff; cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.menu-toggle span { width:18px; height:2px; background:#fff; display:block; transition: .3s var(--ease); }
@media (max-width:1080px){ .nav-mid{ display:none; } }
@media (max-width:1080px){ .menu-toggle{ display:flex; } .nav-right .ghost-link{ display:none; } }
@media (max-width:560px){ .brand img.word{ display:none; } .nav-right .btn span.lbl{ display:none; } }
@media (max-width:900px){ .brand, .nav-mid a{ cursor:pointer; } }

/* mobile menu */
.mmenu { position:fixed; inset:0; z-index:290; background: rgba(11,11,13,.98); backdrop-filter: blur(8px); display:flex; flex-direction:column; justify-content:center; gap:8px; padding: var(--pad); transform: translateY(-100%); transition: transform .5s var(--ease); }
.mmenu.open { transform:none; }
.mmenu a { font-family:var(--display); font-weight:700; font-size: clamp(2rem,9vw,3.6rem); letter-spacing:-.02em; padding-block:8px; border-bottom:1px solid var(--line-2); }
.mmenu a:last-of-type { border:none; }

/* ---------------- HERO ---------------- */
.hero { position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; }
.hero-media { position:absolute; inset:0; z-index:0; background:#000; }
.hero-media .vid, .hero-media .ph-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-media .vid { opacity:0; transition: opacity 1s var(--ease); }
.hero-media.playing .vid { opacity:1; }
.hero-media.playing .ph-video { opacity:0; }
.ph-video { display:grid; place-items:center; background:#000 center/cover no-repeat; transition: opacity .8s var(--ease); }
.ph-video .burst { position:absolute; inset:0; background: var(--burst) center/cover no-repeat; opacity:.55; transform: scale(1.05); animation: slowzoom 18s ease-in-out infinite alternate; }
@keyframes slowzoom { to { transform: scale(1.18); } }
.ph-video .tag { position:relative; z-index:2; display:flex; align-items:center; gap:14px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color: rgba(255,255,255,.8); background: rgba(0,0,0,.4); border:1px solid var(--line); padding:.7em 1.1em; border-radius:100px; backdrop-filter: blur(4px); }
.ph-video .play { width:14px; height:14px; border-radius:50%; background: var(--spectrum); box-shadow: 0 0 18px rgba(214,53,154,.7); }
.hero-scrim { position:absolute; inset:0; z-index:1; background:
   linear-gradient(180deg, rgba(11,11,13,.55) 0%, rgba(11,11,13,.15) 32%, rgba(11,11,13,.55) 70%, rgba(11,11,13,.96) 100%),
   radial-gradient(120% 80% at 80% 10%, transparent 40%, rgba(11,11,13,.4)); }
.hero-grid { position:absolute; inset:0; z-index:1; opacity:.25;
   background-image: linear-gradient(var(--line-2) 1px,transparent 1px), linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
   background-size: clamp(60px,7vw,110px) clamp(60px,7vw,110px);
   -webkit-mask-image: radial-gradient(130% 100% at 50% 100%, #000 30%, transparent 75%);
           mask-image: radial-gradient(130% 100% at 50% 100%, #000 30%, transparent 75%); }
/* spectrum diagonal sliver at very top, echoing cover */
.hero-media::after { content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background: var(--spectrum); z-index:2; }
/* LED pixel texture over the video — disguises low-res + reads as an LED screen */
.hero-led { position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(0,0,0,0) 0.6px, rgba(0,0,0,.30) 1.5px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px);
  background-size: 4px 4px, 100% 3px;
  opacity:.7;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 86%);
          mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 86%); }
@media (max-width: 640px){ .hero-led{ background-size: 3px 3px, 100% 2.5px; } }

.hero .wrap { position:relative; z-index:3; width:100%; padding-bottom: clamp(28px,4vw,52px); padding-top: 140px; }
.hero-top { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom: clamp(24px,4vw,46px); }
.hero-tag { max-width: 34ch; color: rgba(245,245,246,.82); font-size: clamp(1rem,1.4vw,1.18rem); line-height:1.5; }
.hero-stats { display:flex; gap: clamp(20px,3vw,46px); }
.hero-stats .s .n { font-family:var(--display); font-weight:800; font-size: clamp(1.5rem,2.4vw,2.4rem); letter-spacing:-.02em; line-height:1; }
.hero-stats .s .l { font-size:.78rem; color:var(--fg-dim); margin-top:6px; letter-spacing:.04em; text-transform:uppercase; }

.hero-head { font-family:var(--display); font-weight:800; line-height:.86; letter-spacing:-.04em; font-size: clamp(3.2rem, 12.5vw, 13.5rem); text-transform:uppercase; }
.hero-head .ln { display:block; overflow:hidden; }
.hero-head .ln > span { display:block; }
.hero-head em { font-style:normal; }

.hero-cta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top: clamp(26px,3.5vw,44px); }
.hero-foot { display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; margin-top: clamp(28px,4vw,46px); padding-top: clamp(18px,2.4vw,26px); border-top:1px solid var(--line); }
.scroll-cue { display:flex; align-items:center; gap:12px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); }
.scroll-cue .a { animation: bob 1.6s var(--ease) infinite; }
@keyframes bob { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }
.hero-foot .loc { font-size:.82rem; color:var(--fg-dim); letter-spacing:.02em; }
@media (prefers-reduced-motion: reduce){ .scroll-cue .a, .ph-video .burst{ animation:none; } }

/* ---------------- MARQUEE ---------------- */
.marquee { background: var(--spectrum); color:#0b0b0d; padding-block: clamp(14px,2vw,22px); overflow:hidden; white-space:nowrap; }
.mtrack { display:inline-flex; will-change:transform; animation: mscroll 30s linear infinite; }
.marquee:hover .mtrack { animation-play-state:paused; }
.mtrack span { font-family:var(--display); font-weight:800; font-size: clamp(1.3rem,3vw,2.4rem); letter-spacing:-.01em; text-transform:uppercase; display:inline-flex; align-items:center; gap: clamp(22px,3vw,44px); padding-inline: clamp(22px,3vw,44px); }
.mtrack span::after { content:"●"; font-size:.5em; }
@keyframes mscroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .mtrack{ animation:none; } }

/* ---------------- SECTION SHELL ---------------- */
.section { padding-block: clamp(80px,11vw,180px); position:relative; }
.sec-head { max-width: 1180px; margin-bottom: clamp(44px,6vw,84px); }
.sec-head .eyebrow { margin-bottom: 22px; }
.sec-head h2 { font-family:var(--display); font-weight:800; font-size: clamp(2.3rem,6.6vw,5.6rem); line-height:.95; letter-spacing:-.035em; text-transform:uppercase; }
.sec-head .lead { color:var(--fg-dim); font-size: clamp(1.02rem,1.5vw,1.28rem); line-height:1.55; max-width:60ch; margin-top:24px; }

/* ---------------- BIG SLOGAN BLOCK ---------------- */
.slogan { padding-block: clamp(90px,13vw,200px); }
.slogan .big { font-family:var(--display); font-weight:800; text-transform:uppercase; line-height:.9; letter-spacing:-.04em; font-size: clamp(2.6rem,9.5vw,9rem); }
.slogan .big span { display:block; }
.slogan .row { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; margin-top: clamp(36px,5vw,72px); }
.slogan .row p { max-width: 46ch; color:var(--fg-dim); font-size: clamp(1.02rem,1.4vw,1.2rem); line-height:1.6; }

/* ---------------- SOPORTES ---------------- */
.soportes-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(18px,2vw,30px); }
.soporte { position:relative; border:1px solid var(--line); border-radius:16px; overflow:hidden; background: var(--bg-2); display:flex; flex-direction:column; transition: border-color .35s var(--ease), transform .4s var(--ease); }
.soporte:hover { border-color: rgba(255,255,255,.28); transform: translateY(-4px); }
.soporte .ph-wrap { position:relative; aspect-ratio: 16/11; overflow:hidden; }
.soporte .ph-wrap img { width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.soporte:hover .ph-wrap img { transform: scale(1.05); }
.soporte .ph-wrap::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg,transparent 40%, rgba(11,11,13,.85)); }
.soporte .badge { position:absolute; top:14px; left:14px; z-index:2; display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background: rgba(11,11,13,.7); border:1px solid var(--line); padding:.5em .9em; border-radius:100px; backdrop-filter: blur(4px); }
.soporte .badge .led { width:8px; height:8px; border-radius:50%; background: var(--c-green); box-shadow:0 0 10px var(--c-green); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.35;} }
@media (prefers-reduced-motion: reduce){ .soporte .badge .led{ animation:none; } }
.soporte .body { padding: clamp(20px,2.4vw,30px); display:flex; flex-direction:column; gap:18px; flex:1; }
.soporte .name { display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.soporte h3 { font-family:var(--display); font-weight:700; font-size: clamp(1.4rem,2.1vw,2rem); letter-spacing:-.02em; line-height:1.02; }
.soporte .type { font-size:.82rem; color:var(--c-cyan); font-weight:600; white-space:nowrap; }
.soporte .specs { display:flex; flex-wrap:wrap; gap:8px; }
.soporte .chip { font-size:.8rem; color:var(--fg-dim); border:1px solid var(--line); padding:.45em .8em; border-radius:8px; display:inline-flex; gap:7px; align-items:center; }
.soporte .chip b { color:#fff; font-weight:600; }
.soporte .traffic { margin-top:auto; display:flex; gap:24px; padding-top:16px; border-top:1px solid var(--line-2); }
.soporte .traffic .t .n { font-family:var(--display); font-weight:800; font-size: clamp(1.25rem,1.6vw,1.55rem); letter-spacing:-.02em; }
.soporte .traffic .t .n .u { font-size:.5em; font-weight:600; color:var(--fg-dim); margin-left:4px; }
.soporte .traffic .t .l { font-size:.74rem; color:var(--fg-dim); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }
@media (max-width: 980px){ .soportes-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .soportes-grid{ grid-template-columns:1fr; } }

/* ---------------- SPECS STRIP ---------------- */
.specs-strip { display:grid; grid-template-columns: repeat(4,1fr); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.specs-strip .cell { padding: clamp(24px,3vw,40px); border-right:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.specs-strip .cell:last-child { border-right:none; }
.specs-strip .k { font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--fg-dim); }
.specs-strip .v { font-family:var(--display); font-weight:800; font-size: clamp(1.3rem,2.2vw,2rem); letter-spacing:-.02em; }
@media (max-width:760px){ .specs-strip{ grid-template-columns: repeat(2,1fr); } .specs-strip .cell:nth-child(2){ border-right:none; } .specs-strip .cell:nth-child(-n+2){ border-bottom:1px solid var(--line); } }

/* ---------------- COBERTURA ---------------- */
.cobertura { display:grid; grid-template-columns: 1fr 1.15fr; gap: clamp(36px,5vw,80px); align-items:center; }
.cob-map { position:relative; aspect-ratio: 4/3.4; border-radius:16px; overflow:hidden; border:1px solid var(--line); }
.cob-map .ph { position:absolute; inset:0; }
.cob-map .pins { position:absolute; inset:0; z-index:2; }
.pin { position:absolute; transform: translate(-50%,-50%); }
.pin .dot { width:14px; height:14px; border-radius:50%; background: var(--spectrum); box-shadow: 0 0 0 4px rgba(11,11,13,.6), 0 0 16px rgba(214,53,154,.7); }
.pin .ripple { position:absolute; inset:-6px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5); animation: ripple 2.6s var(--ease) infinite; }
@keyframes ripple { 0%{ transform:scale(.6); opacity:.9; } 100%{ transform:scale(2.6); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .pin .ripple{ animation:none; opacity:0; } }
.pin .lbl { position:absolute; left:18px; top:-6px; white-space:nowrap; font-size:.74rem; font-weight:600; background:rgba(11,11,13,.8); border:1px solid var(--line); padding:.25em .6em; border-radius:6px; }
.cob-zones h3 { font-family:var(--display); font-weight:800; font-size: clamp(1.8rem,3.4vw,3rem); letter-spacing:-.03em; text-transform:uppercase; line-height:1; margin-bottom:24px; }
.zones-list { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.zone-tag { font-size:.92rem; color:var(--fg); border:1px solid var(--line); padding:.55em 1em; border-radius:100px; transition: border-color .25s, background .25s, color .25s; cursor:none; }
.zone-tag:hover { background:var(--spectrum); color:#0b0b0d; border-color:transparent; }
@media (max-width:900px){ .zone-tag{ cursor:pointer; } }
@media (max-width:880px){ .cobertura{ grid-template-columns:1fr; } }

/* ---------------- STATS BIG ---------------- */
.stats-big { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(24px,3vw,48px); border-top:1px solid var(--line); padding-top: clamp(40px,4vw,64px); }
.stat .n { font-family:var(--display); font-weight:800; font-size: clamp(2.8rem,6.5vw,6rem); line-height:.92; letter-spacing:-.04em; }
.stat .n.grad { background: var(--spectrum); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat .l { color:var(--fg-dim); font-size:1rem; margin-top:14px; line-height:1.4; max-width:24ch; }
@media (max-width:820px){ .stats-big{ grid-template-columns: repeat(2,1fr); } }

/* ---------------- TRABAJO / MARCAS ---------------- */
.work-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,1.8vw,24px); }
.case { position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); }
.case img { width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition: transform .8s var(--ease); }
.case:hover img { transform: scale(1.06); }
.case .meta { position:absolute; inset:auto 0 0 0; z-index:2; padding: clamp(16px,2vw,24px); display:flex; justify-content:space-between; align-items:flex-end; gap:14px; background: linear-gradient(transparent, rgba(11,11,13,.9)); }
.case .meta h4 { font-family:var(--display); font-weight:700; font-size: clamp(1.1rem,1.8vw,1.6rem); letter-spacing:-.02em; }
.case .meta .cat { font-size:.78rem; color:var(--fg-dim); margin-top:4px; }
.case .meta .tag { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; border:1px solid var(--line); padding:.4em .7em; border-radius:100px; white-space:nowrap; }
@media (max-width:760px){ .work-grid{ grid-template-columns:1fr; } }

/* ---------------- CLIENTS ---------------- */
.clients { display:grid; grid-template-columns: repeat(6,1fr); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.client { aspect-ratio: 3/1.5; display:grid; place-items:center; padding: 12px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--fg-dim); font-family:var(--display); font-weight:700; font-size: clamp(.95rem,1.4vw,1.3rem); letter-spacing:-.01em; transition: background .3s, color .3s; }
.client img { max-width:64%; max-height:46%; width:auto; object-fit:contain; opacity:.72; transition: opacity .3s var(--ease), transform .4s var(--ease); }
.client:hover img { opacity:1; transform: scale(1.06); }
.client:hover { background: var(--bg-2); color:#fff; }
.logo-slot { color: var(--fg-dim2); font-size:.78rem; font-weight:500; letter-spacing:.14em; }
@media (max-width:760px){ .clients{ grid-template-columns: repeat(3,1fr); } }

/* ---------------- VENTA DE PANTALLAS ---------------- */
.venta-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2vw,28px); }
.vcard { border:1px solid var(--line); border-radius:16px; overflow:hidden; background: var(--bg-2); display:flex; flex-direction:column; transition: border-color .35s var(--ease), transform .4s var(--ease); }
.vcard:hover { border-color: rgba(255,255,255,.28); transform: translateY(-4px); }
.vcard .ph-wrap { position:relative; aspect-ratio: 4/3; overflow:hidden; }
.vcard .ph-wrap .ph, .vcard .ph-wrap img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vcard .ph-wrap::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg,transparent 55%, rgba(11,11,13,.75)); }
.vcard .ph-wrap img { transition: transform .7s var(--ease); }
.vcard:hover .ph-wrap img { transform: scale(1.06); }
.vcard .ph-wrap .led-tex { position:absolute; inset:0; z-index:1; pointer-events:none; background-image: radial-gradient(circle, rgba(0,0,0,0) .5px, rgba(0,0,0,.28) 1.3px); background-size: 3.5px 3.5px; opacity:.5; mix-blend-mode:multiply; }
.vcard .num-badge { position:absolute; top:14px; left:14px; z-index:2; font-family:var(--display); font-weight:800; font-size:1rem; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background: rgba(11,11,13,.7); border:1px solid var(--line); backdrop-filter: blur(4px); }
.vcard .vbody { padding: clamp(20px,2.3vw,30px); display:flex; flex-direction:column; gap:14px; flex:1; }
.vcard h3 { font-family:var(--display); font-weight:700; font-size: clamp(1.3rem,1.9vw,1.75rem); letter-spacing:-.02em; line-height:1.02; }
.vcard p { color:var(--fg-dim); font-size:.97rem; line-height:1.5; }
.vcard .specs { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
@media (max-width:880px){ .venta-grid{ grid-template-columns:1fr; } }

.venta-features { display:grid; grid-template-columns: repeat(3,1fr); gap:16px 36px; margin-top: clamp(36px,4vw,56px); border-top:1px solid var(--line); padding-top: clamp(32px,3.5vw,48px); }
.vf { display:flex; gap:14px; align-items:flex-start; }
.vf .vf-i { width:20px; height:20px; flex:none; border-radius:6px; background: var(--spectrum); margin-top:2px; }
.vf b { display:block; font-weight:600; margin-bottom:3px; }
.vf span { color:var(--fg-dim); font-size:.95rem; line-height:1.45; }
@media (max-width:760px){ .venta-features{ grid-template-columns:1fr; } }
.venta-cta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top: clamp(34px,4vw,52px); }
.venta-cta .note { color:var(--fg-dim); font-size:.92rem; }

/* ---------------- MEDIA KIT ---------------- */
.mediakit { position:relative; }
.mk-card { position:relative; border-radius: 22px; overflow:hidden; border:1px solid var(--line); background: var(--bg-2); display:grid; grid-template-columns: 1fr 1.25fr; }
.mk-visual { position:relative; min-height: 460px; background:#000; overflow:hidden; display:grid; place-items:center; }
.mk-visual .spectrum-bg { position:absolute; inset:0; background: var(--spectrum-img) center/cover no-repeat; opacity:.9; }
.mk-visual .scrim { position:absolute; inset:0; background: radial-gradient(80% 80% at 50% 50%, transparent, rgba(0,0,0,.45)); }
.mk-cover { position:relative; z-index:2; width: 58%; max-width:320px; aspect-ratio: 1/1.41; border-radius:8px; overflow:hidden; box-shadow: 0 40px 80px rgba(0,0,0,.6); transform: rotate(-4deg); border:1px solid rgba(255,255,255,.2); transition: transform .5s var(--ease); }
.mediakit:hover .mk-cover { transform: rotate(0deg) translateY(-6px); }
.mk-cover img { width:100%; height:100%; object-fit:cover; }
.mk-body { padding: clamp(32px,4vw,64px); display:flex; flex-direction:column; justify-content:center; gap:26px; }
.mk-body h2 { font-family:var(--display); font-weight:800; font-size: clamp(2rem,4.4vw,3.6rem); line-height:.95; letter-spacing:-.035em; text-transform:uppercase; }
.mk-list { display:grid; grid-template-columns: 1fr 1fr; gap:14px 24px; }
.mk-list li { list-style:none; display:flex; gap:12px; align-items:flex-start; color:var(--fg-dim); font-size:1rem; line-height:1.4; }
.mk-list li .mk-i { width:18px; height:18px; flex:none; border-radius:5px; background: var(--spectrum); margin-top:2px; }
.mk-list li b { color:#fff; font-weight:600; }
.mk-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
.mk-actions .meta { display:flex; align-items:center; gap:8px; font-size:.84rem; color:var(--fg-dim); }
@media (max-width:920px){ .mk-card{ grid-template-columns:1fr; } .mk-visual{ min-height: 320px; } .mk-list{ grid-template-columns:1fr; } }

/* ---------------- CTA / CONTACT ---------------- */
.cta { position:relative; padding-block: clamp(96px,13vw,200px); overflow:hidden; }
.cta-bg { position:absolute; inset:0; z-index:0; }
.cta-bg .glow { position:absolute; inset:0; background: radial-gradient(60% 70% at 50% 120%, rgba(214,53,154,.22), transparent 65%), radial-gradient(40% 50% at 20% 0%, rgba(58,99,214,.16), transparent 60%); }
.cta-bg .skyline { position:absolute; left:0; right:0; bottom:0; height: 26%; background: var(--skyline-img) bottom center/contain no-repeat; opacity:.18; filter: invert(1) brightness(1.4); }
.cta .wrap { position:relative; z-index:2; text-align:center; }
.cta h2 { font-family:var(--display); font-weight:800; text-transform:uppercase; line-height:.86; letter-spacing:-.045em; font-size: clamp(3rem,15vw,15rem); margin-block:26px 8px; }
.cta .sub { color:var(--fg-dim); font-size: clamp(1.05rem,1.6vw,1.35rem); max-width:48ch; margin:0 auto; line-height:1.5; }
.cta-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top: clamp(34px,4vw,56px); }
.cta .contacts { display:flex; gap: clamp(24px,4vw,64px); justify-content:center; flex-wrap:wrap; margin-top: clamp(44px,5vw,72px); padding-top: clamp(30px,3vw,44px); border-top:1px solid var(--line); }
.contact-item .k { font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--fg-dim); margin-bottom:8px; }
.contact-item a { font-family:var(--display); font-weight:600; font-size: clamp(1.05rem,1.8vw,1.5rem); letter-spacing:-.01em; position:relative; cursor:none; }
.contact-item a::after { content:""; position:absolute; left:0; bottom:-3px; height:2px; width:100%; background: var(--spectrum); transform: scaleX(0); transform-origin:left; transition: transform .35s var(--ease); }
.contact-item a:hover::after { transform: scaleX(1); }
@media (max-width:900px){ .contact-item a{ cursor:pointer; } }

/* ---------------- FOOTER ---------------- */
.footer { border-top:1px solid var(--line); padding-block: clamp(50px,6vw,80px); }
.footer-top { display:grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap:40px 24px; }
.footer .brand { margin-bottom:18px; }
.footer .blurb { color:var(--fg-dim); max-width:34ch; line-height:1.55; font-size:.96rem; }
.footer .socials { display:flex; gap:12px; margin-top:22px; }
.footer .socials a { width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--fg-dim); cursor:none; transition: background .25s,color .25s,border-color .25s; }
.footer .socials a:hover { background: var(--spectrum); color:#0b0b0d; border-color:transparent; }
.footer .col h4 { font-size:.76rem; text-transform:uppercase; letter-spacing:.12em; color:var(--fg-dim); margin-bottom:16px; font-weight:600; }
.footer .col a { display:block; padding-block:6px; font-size:.98rem; color:var(--fg); cursor:none; transition: color .2s; }
.footer .col a:hover { color: var(--c-cyan); }
.footer-bottom { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top: clamp(40px,5vw,70px); padding-top:26px; border-top:1px solid var(--line); color:var(--fg-dim); font-size:.85rem; }
@media (max-width:820px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:900px){ .footer .socials a, .footer .col a{ cursor:pointer; } }

/* ---------------- Placeholders ---------------- */
.ph { background-color: var(--bg-3); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, transparent 2px 13px); display:grid; place-items:center; color: rgba(255,255,255,.34); }
.ph span { font-family: ui-monospace, Menlo, monospace; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; background: rgba(11,11,13,.6); padding:.45em .8em; border-radius:6px; border:1px solid var(--line); }

/* ---------------- Reveal ---------------- */
.reveal { opacity:0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; } .reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; } .reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* hero entrance */
.hero-head .ln > span { transform: translateY(108%); transition: transform 1s var(--ease); }
.hero.ready .hero-head .ln > span { transform:none; }
.hero-head .ln:nth-child(2) > span { transition-delay:.09s; }
.hero-head .ln:nth-child(3) > span { transition-delay:.18s; }
.hero .up { opacity:0; transform: translateY(22px); transition: opacity .8s var(--ease) .45s, transform .8s var(--ease) .45s; }
.hero.ready .up { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .hero-head .ln > span, .hero .up{ transform:none; opacity:1; } }