/* ============================================================
   BRUTAL.CLICK — sistema de diseño
   Paleta: asfalto + spray magenta + chrome + ámbar de aviso
   Firma: cortes diagonales tipo chapa/plantilla de spray + grano
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg:        #121214;
  --panel:     #1b1a1f;
  --panel-2:   #221f26;
  --ink:       #ededec;
  --ink-dim:   #9a98a3;
  --line:      #2c2a31;

  --magenta:   #ff2e6e;
  --magenta-d: #b81f4d;
  --chrome:    #c9cdd3;
  --amber:     #ffb020;

  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body:    'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --cut: 16px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  position:relative;
}

/* grano de fondo, sutil, no decorativo gratuito: da textura de pared/calle */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

::selection{ background:var(--magenta); color:var(--bg); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .bgvid{ display:none; }
}

:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
}

/* ---------- firma: corte diagonal tipo chapa ---------- */
.cut{
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.cut-sm{
  --cut: 10px;
}

/* ---------- layout genérico ---------- */
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}
section{ padding:72px 0; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amber);
  display:flex; align-items:center; gap:8px;
}
.eyebrow::before{
  content:"";
  width:8px; height:8px;
  background:var(--amber);
  clip-path:polygon(0 0,100% 20%,100% 100%,0 80%);
}

h1,h2,h3{
  font-family:var(--font-display);
  letter-spacing:.01em;
  line-height:.95;
  margin:.2em 0;
  text-transform:uppercase;
}
h1{ font-size:clamp(48px,9vw,110px); }
h2{ font-size:clamp(32px,5vw,56px); }
h3{ font-size:clamp(20px,3vw,28px); }

p{ color:var(--ink-dim); max-width:60ch; }

/* ---------- header / navegación ---------- */
header.site{
  position:sticky; top:0; z-index:20;
  background:rgba(18,18,20,.86);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
header.site .bar{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.logo{
  font-family:var(--font-display);
  font-size:26px;
  letter-spacing:.03em;
}
.logo span{ color:var(--magenta); }

nav.main ul{
  list-style:none; display:flex; gap:28px; margin:0; padding:0;
}
nav.main a{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-dim);
  position:relative;
  padding:6px 0;
}
nav.main a:hover, nav.main a[aria-current="page"]{ color:var(--ink); }
nav.main a[aria-current="page"]::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--magenta);
}

.menu-toggle{
  display:none;
  background:none; border:1px solid var(--line); color:var(--ink);
  font-family:var(--font-mono); font-size:12px;
  padding:8px 12px; cursor:pointer;
}

/* ---------- ticker ---------- */
.ticker{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  background:var(--panel);
}
.ticker__track{
  display:flex; gap:48px; white-space:nowrap;
  padding:10px 0;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--chrome);
  animation:scroll 26s linear infinite;
  width:max-content;
}
.ticker__track span::before{ content:"//  "; color:var(--magenta); }
@keyframes scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- hero ---------- */
.hero{
  padding-top:88px;
  position:relative;
}
.hero__tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--bg);
  background:var(--amber);
  padding:4px 10px;
  margin-bottom:18px;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 92% 100%, 0 100%);
}
.hero h1{
  max-width:11ch;
}
.hero h1 em{
  font-style:normal;
  color:transparent;
  -webkit-text-stroke:2px var(--magenta);
}
.hero p.lead{
  font-size:18px;
  max-width:52ch;
  margin-top:18px;
}
.hero__actions{
  display:flex; gap:16px; margin-top:32px; flex-wrap:wrap;
}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:14px 22px;
  border:1px solid var(--line);
  background:var(--panel);
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translate(2px,-2px); border-color:var(--chrome); }
.btn--primary{
  background:var(--magenta);
  color:var(--bg);
  border-color:var(--magenta);
  font-weight:700;
}
.btn--primary:hover{ background:#ff4d84; }

/* ---------- tarjetas de categoría ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  padding:26px;
  transition:border-color .15s ease, transform .15s ease;
}
.card:hover{ border-color:var(--magenta); transform:translateY(-3px); }
.card__num{
  font-family:var(--font-mono);
  color:var(--ink-dim);
  font-size:12px;
}
.card h3{ margin-top:6px; }
.card p{ font-size:14px; margin-top:8px; }

/* ---------- panel tipo ficha técnica (spec plate) ---------- */
.spec{
  background:var(--panel-2);
  border:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:13px;
}
.spec__row{
  display:flex; justify-content:space-between;
  padding:10px 18px;
  border-bottom:1px solid var(--line);
}
.spec__row:last-child{ border-bottom:none; }
.spec__row span:first-child{ color:var(--ink-dim); text-transform:uppercase; letter-spacing:.06em; }
.spec__row span:last-child{ color:var(--chrome); }

/* ---------- ad slot (placeholder honesto, no fake content) ---------- */
.ad-slot{
  border:1px dashed var(--line);
  color:var(--ink-dim);
  font-family:var(--font-mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  text-align:center;
  padding:28px;
}

/* ---------- newsletter / cta ---------- */
.cta{
  background:var(--panel);
  border:1px solid var(--line);
  padding:48px;
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
}
.cta form{ display:flex; gap:10px; flex-wrap:wrap; }
.cta input[type=email]{
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:13px;
  padding:14px 16px;
  min-width:240px;
}

/* ---------- footer ---------- */
footer.site{
  border-top:1px solid var(--line);
  padding:40px 0;
  margin-top:40px;
}
footer.site .row{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
footer.site nav ul{
  list-style:none; display:flex; gap:20px; padding:0; margin:0;
  font-family:var(--font-mono); font-size:12px; color:var(--ink-dim); text-transform:uppercase;
}
footer.site small{
  color:var(--ink-dim); font-family:var(--font-mono); font-size:12px;
}

/* ---------- utilidades ---------- */
.split{
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:start;
}
.stack-gap-lg > * + *{ margin-top:24px; }

@media (max-width:860px){
  .split{ grid-template-columns:1fr; }
  nav.main{ position:fixed; inset:64px 0 auto 0; background:var(--bg); border-bottom:1px solid var(--line);
    transform:translateY(-120%); transition:transform .2s ease; }
  nav.main[data-open="true"]{ transform:translateY(0); }
  nav.main ul{ flex-direction:column; padding:20px 24px; gap:18px; }
  .menu-toggle{ display:block; }
}

/* ---------- vídeo ambiental de fondo (avanza muy lento con el scroll) ---------- */
.hero__top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:6px;
}
.bgvid{
  position:fixed;
  right:0; bottom:0;
  width:260px; height:347px;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
  opacity:.16;
  mix-blend-mode:luminosity;
  mask-image:linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
.bgvid video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width:860px){
  .bgvid{ width:150px; height:200px; }
}

/* ---------- compartir en artículos ---------- */
.share-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:24px;
  font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.05em;
}
.share-row span{ color:var(--ink-dim); }
.share-row a{
  color:var(--chrome); border:1px solid var(--line); padding:6px 12px;
  transition:border-color .15s ease, color .15s ease;
}
.share-row a:hover{ border-color:var(--magenta); color:var(--ink); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--magenta); color:var(--bg);
  padding:12px 20px; font-family:var(--font-mono); font-size:13px; text-transform:uppercase;
}
.skip-link:focus{ left:16px; top:16px; }