/* ============================================================
   THE ORIGINAL COMPANY — estilos
   Fuentes de sistema (sin descargas externas) para carga rápida.
   ============================================================ */

:root{
  --ink:#0a0a0b;
  --ink2:#131315;
  --paper:#f5f4f1;
  --grey:#8d8b90;
  --grey-dim:#5c5a5f;
  --line:rgba(245,244,241,0.12);
  --line-strong:rgba(245,244,241,0.22);
  --accent-1:#3f8cff;
  --accent-2:#22d9c8;
  --accent-3:#ffcc33;
  --r-sm:6px;
  --r-md:14px;
  --maxw:1240px;
  --font-display:"Arial Black","Arial Narrow Bold","Helvetica Neue",Arial,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}

a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%; height:auto;}
button{font:inherit; background:none; border:none; color:inherit; cursor:pointer;}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:-0.02em;
  line-height:0.94;
  text-transform:uppercase;
}

::selection{background:var(--accent-1); color:var(--ink);}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(10,10,11,0.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  height:76px; gap:24px;
}
.brand{display:flex; align-items:center; border-radius:var(--r-sm); overflow:hidden;}
.site-header .brand img{height:62px; width:auto;}
.foot-row .brand img{height:46px; width:auto; margin-top:12px; margin-bottom:12px;}

.navlinks{display:flex; gap:30px; margin-left:auto; margin-right:24px;}
.navlinks a{
  font-size:12.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--grey); padding-bottom:6px; border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.navlinks a:hover{color:var(--paper);}
.navlinks a.active{color:var(--paper); border-color:var(--accent-1);}

.btn-pill{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  padding:12px 20px; border-radius:999px; border:1px solid var(--line-strong);
  transition:background .18s ease, transform .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn-pill:hover{background:var(--paper); color:var(--ink); transform:translateY(-1px);}
.btn-pill.big{padding:16px 28px; font-size:13.5px; margin-top:8px;}
.arrow{display:inline-block; transition:transform .18s ease;}
.btn-pill:hover .arrow, .link-arrow:hover .arrow{transform:translateX(3px);}

.menu-toggle{display:none; flex-direction:column; gap:5px; padding:6px;}
.menu-toggle span{width:22px; height:2px; background:var(--paper); display:block;}

@media (max-width:900px){
  .navlinks{display:none;}
  .btn-pill{display:none;}
  .menu-toggle{display:flex;}

  .navlinks.open{
    display:flex; flex-direction:column; gap:0;
    position:absolute; top:76px; left:0; right:0;
    background:rgba(10,10,11,0.98); border-bottom:1px solid var(--line);
    padding:8px 32px 20px;
  }
  .navlinks.open a{padding:14px 0; border-bottom:1px solid var(--line);}
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex; align-items:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 55% at 78% 32%, rgba(63,140,255,0.14), transparent 60%),
    radial-gradient(50% 50% at 88% 70%, rgba(34,217,200,0.10), transparent 60%),
    linear-gradient(100deg, #0a0a0b 0%, #0a0a0b 38%, #17151b 72%, #1d1a22 100%);
  overflow:hidden;
}
.hero-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.5);
  z-index:1;
  pointer-events:none;
}
.hero-video{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
}
.hero-video iframe{
  position:absolute;
  top:50%; left:50%;
  width:177.78%; height:100%;
  min-width:100%; min-height:100%;
  transform:translate(-50%, -50%);
  pointer-events:none;
  border:none;
}
.hero-grain{
  position:absolute; inset:0; z-index:2; opacity:0.045; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner{position:relative; z-index:3; padding:80px 32px;}
.hero-title{font-size:clamp(48px,9vw,120px); margin-bottom:28px;}
.hero-title .outline{
  color:transparent;
  -webkit-text-stroke:1.5px var(--paper);
}
@supports not (-webkit-text-stroke:1px #fff){
  .hero-title .outline{color:var(--paper); opacity:0.35;}
}
.hero-copy{
  max-width:460px; font-size:16.5px; line-height:1.6; color:var(--grey);
  margin-bottom:30px;
}
.hero-copy b{color:var(--paper); font-weight:700;}
.link-arrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  border-bottom:1px solid var(--line-strong); padding-bottom:6px;
}

.hero-side{
  position:absolute; right:28px; top:50%; transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl; display:flex; align-items:center; gap:14px;
  z-index:2; color:var(--grey);
}
.hero-side span{font-size:11px; letter-spacing:0.15em; text-transform:uppercase;}
.hero-side i{width:1px; height:70px; background:var(--line-strong); display:block; font-style:normal;}

@media (max-width:720px){
  .hero{min-height:76vh;}
  .hero-side{display:none;}
}

/* ---------- SECTIONS ---------- */
.section{padding:96px 0;}
.sec-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  margin-bottom:48px; flex-wrap:wrap;
}
.sec-num{font-size:13px; font-weight:700; color:var(--grey); letter-spacing:0.05em;}
.sec-head h2{font-size:clamp(30px,4.4vw,42px); margin-top:6px;}
.sec-sub{display:block; font-size:13px; color:var(--grey); font-weight:600; margin-top:4px; text-transform:uppercase; letter-spacing:0.08em;}
.sec-head p{max-width:320px; color:var(--grey); font-size:13.5px; line-height:1.6;}

/* ---------- SERVICIOS ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line);}
.svc{padding:30px 24px 30px 0; border-bottom:1px solid var(--line);}
.svc:not(:first-child){padding-left:24px; border-left:1px solid var(--line);}
.svc b.n{font-size:12px; color:var(--accent-1); font-weight:800;}
.svc h3{font-size:18px; text-transform:none; font-weight:800; letter-spacing:-0.01em; margin:14px 0 8px;}
.svc p{font-size:13px; color:var(--grey); line-height:1.55;}

@media (max-width:820px){
  .svc-grid{grid-template-columns:1fr 1fr;}
  .svc:nth-child(odd){padding-left:0; border-left:none;}
  .svc:nth-child(even){padding-left:24px; border-left:1px solid var(--line);}
}
@media (max-width:520px){
  .svc-grid{grid-template-columns:1fr;}
  .svc{padding-left:0 !important; border-left:none !important;}
}

/* ---------- FILTERS ---------- */
.filters{display:flex; gap:28px; flex-wrap:wrap; margin-bottom:36px; border-bottom:1px solid var(--line); padding-bottom:20px;}
.filter-btn{
  font-size:12.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--grey); padding-bottom:8px; border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.filter-btn:hover{color:var(--paper);}
.filter-btn.active{color:var(--paper); border-color:var(--accent-1);}

/* ---------- WORK GRID ---------- */
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.work-card{
  position:relative; border-radius:var(--r-md); overflow:hidden;
  aspect-ratio:4/3.1;
  isolation:isolate;
}
.work-card.hide{display:none;}
.work-media{
  position:absolute; inset:0; z-index:0;
  transition:transform .5s ease;
  background-size:cover; background-position:center;
}
.work-card:hover .work-media{transform:scale(1.06);}
.work-card::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,10,11,0) 45%, rgba(10,10,11,0.82) 100%);
  pointer-events:none;
}
.work-arrow{
  position:absolute; top:16px; right:16px; z-index:2;
  width:32px; height:32px; border-radius:50%;
  background:rgba(10,10,11,0.5); border:1px solid rgba(245,244,241,0.25);
  display:flex; align-items:center; justify-content:center; font-size:14px;
  transition:background .18s ease, transform .18s ease;
}
.work-card:hover .work-arrow{background:var(--paper); color:var(--ink); transform:rotate(45deg);}
.work-info{position:absolute; left:18px; bottom:16px; z-index:2;}
.work-info h4{font-size:16.5px; text-transform:uppercase; letter-spacing:-0.01em; font-weight:800; margin-bottom:3px;}
.work-info span{font-size:11px; color:var(--grey); font-weight:600; letter-spacing:0.04em; text-transform:uppercase;}

/* placeholders de imagen: cambia el background-image por tu foto real
   ej: .w1{ background-image:url('work/night-drive.jpg'); } */
.w1{background:linear-gradient(155deg,#1a1210 0%,#2a1210 35%,#0a0a0b 100%);}
.w2{background:linear-gradient(155deg,#0f1c1e 0%,#123030 40%,#0a0a0b 100%);}
.w3{background:linear-gradient(155deg,#1b1a14 0%,#2c2a1c 40%,#0a0a0b 100%);}
.w4{background:linear-gradient(155deg,#15121c 0%,#1e1830 40%,#0a0a0b 100%);}
.w5{background:linear-gradient(155deg,#211408 0%,#3a2308 40%,#0a0a0b 100%);}
.w6{background:linear-gradient(155deg,#160c14 0%,#2a1224 40%,#0a0a0b 100%);}
.w7{background:linear-gradient(155deg,#0c1418 0%,#122228 40%,#0a0a0b 100%);}
.w8{background:linear-gradient(155deg,#1c1408 0%,#2e2308 40%,#0a0a0b 100%);}
.w9{background:linear-gradient(155deg,#170f08 0%,#2a1c0c 40%,#0a0a0b 100%);}

@media (max-width:860px){ .work-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .work-grid{grid-template-columns:1fr;} }

/* ---------- CLOSING ---------- */
.closing{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px;
  padding:70px 32px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.closing-line{font-size:clamp(18px,2.6vw,26px); color:var(--grey); line-height:1.4;}
.closing-line b{color:var(--paper); font-weight:800;}

/* ---------- CONTACT ---------- */
.contact{text-align:left;}
.contact p{max-width:420px; color:var(--grey); font-size:14.5px; line-height:1.6; margin:18px 0 26px;}

/* ---------- FOOTER ---------- */
footer{padding:44px 32px;}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.foot-links{display:flex; gap:22px; font-size:12.5px; color:var(--grey);}
.foot-links a:hover{color:var(--paper);}
footer .brand img{height:24px;}
.foot-note{font-size:12px; color:var(--grey-dim);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .work-media, .arrow, .work-arrow{transition:none;}
}