/* =========================================================
   ELÉTRICA CASTRO — design tokens
   ========================================================= */
:root{
  --void: #0a0b0d;
  --panel: #131418;
  --panel-2: #1a1c21;
  --line: #2a2d33;
  --steel: #9a9fa8;
  --steel-dim: #6b6f77;
  --white: #f5f4f1;

  --orange: #ef6b21;
  --orange-hot: #ff8a3d;
  --copper: #b5651d;
  --live: #e34234;

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --wrap: 1180px;
  --radius: 4px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--void);
  color:var(--white);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;}

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

::selection{background:var(--orange);color:#111;}

/* =========================================================
   Utility bits
   ========================================================= */
.eyebrow{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);
  font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange-hot);
  margin:0 0 1.1rem;
}
.eyebrow .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 3px rgba(239,107,33,.18), 0 0 10px rgba(239,107,33,.7);
  flex:none;
}
.eyebrow-dark{color:var(--copper);}
.eyebrow-dark .dot{background:var(--copper);box-shadow:0 0 0 3px rgba(181,101,29,.18), 0 0 10px rgba(181,101,29,.6);}

.h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.9rem, 3.4vw, 2.7rem);
  line-height:1.15;
  margin:0 0 1.4rem;
  text-transform:uppercase;
  letter-spacing:.01em;
}
.section-lead{
  max-width:640px;color:var(--steel);
  font-size:1.05rem;margin:-.6rem 0 2.6rem;
}

.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-body);font-weight:700;font-size:.95rem;
  padding:.95rem 1.6rem;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--orange);color:#151107;
  box-shadow:0 0 0 0 rgba(239,107,33,.5);
}
.btn-primary:hover{background:var(--orange-hot);transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(239,107,33,.55);}
.btn-ghost{
  background:transparent;color:var(--white);border-color:rgba(245,244,241,.28);
}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange-hot);transform:translateY(-2px);}
.btn-large{padding:1.15rem 2.1rem;font-size:1.02rem;}
.ic-whats{width:1.15em;height:1.15em;fill:currentColor;flex:none;}

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(10,11,13,.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:border-color .3s ease, background .3s ease;
}
.site-header.is-scrolled{
  background:rgba(10,11,13,.92);
  border-bottom-color:rgba(239,107,33,.28);
}
.header-inner{
  display:flex;align-items:center;gap:1.4rem;
  height:74px;
}
.brand{display:flex;align-items:center;gap:.6rem;margin-right:auto;}
.brand-logo{height:34px;width:auto;}
.brand-text{
  font-family:var(--font-display);font-size:.92rem;letter-spacing:.08em;
  color:var(--white);text-transform:uppercase;white-space:nowrap;
}
.brand-text strong{color:var(--orange-hot);}

.main-nav{display:flex;align-items:center;gap:1.9rem;}
.nav-link{
  position:relative;
  font-size:.92rem;font-weight:500;color:var(--steel);
  transition:color .18s ease;
}
.nav-link:hover{color:var(--white);}
.nav-cta{
  color:var(--orange-hot);font-weight:700;
  border:1px solid rgba(239,107,33,.4);
  padding:.5rem .9rem;border-radius:var(--radius);
}
.nav-cta:hover{background:rgba(239,107,33,.12);color:var(--orange-hot);}

.header-whats{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.85rem;
  color:var(--steel);border-left:1px solid var(--line);padding-left:1.4rem;
  transition:color .18s ease;
}
.header-whats:hover{color:var(--orange-hot);}

.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;background:none;border:none;cursor:pointer;
}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--white);transition:transform .2s ease, opacity .2s ease;}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  overflow:hidden;
  padding-top:74px;
  background:var(--void);
}
.hero-media{
  position:absolute;inset:0;
  overflow:hidden;
}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 50%;
  opacity:.85;
}
.hero-media::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, var(--void) 8%, rgba(10,11,13,.72) 42%, rgba(10,11,13,.25) 68%),
    linear-gradient(0deg, var(--void) 0%, rgba(10,11,13,.15) 26%, rgba(10,11,13,.1) 70%, var(--void) 100%);
  z-index:1;
}
.hero-scan{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:overlay;
}
.hero-lines{
  position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;
}
.trace{
  fill:none;stroke:var(--orange);stroke-width:1.5;opacity:.35;
  stroke-dasharray:6 10;
  animation:trace-flow 5s linear infinite;
}
.trace-2{stroke:var(--copper);opacity:.25;animation-duration:7s;animation-direction:reverse;}
.trace-3{opacity:.18;animation-duration:9s;}
@keyframes trace-flow{ to{ stroke-dashoffset:-160; } }

.hero-inner{position:relative;z-index:3;padding:6rem 28px 5rem;}
.hero-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  line-height:1.04;
  text-transform:uppercase;
  margin:0 0 1.5rem;
  letter-spacing:.005em;
  max-width:14ch;
}
.hero-accent{color:var(--orange);}
.hero-sub{
  max-width:520px;color:var(--steel);font-size:1.08rem;margin:0 0 2.4rem;
}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:3.6rem;}

.hero-stats{
  display:flex;margin:0;padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.1);
  max-width:600px;
}
.hero-stats>div{
  padding:0 2.2rem;border-left:1px solid rgba(255,255,255,.12);
}
.hero-stats>div:first-child{padding-left:0;border-left:none;}
.hero-stats dt{
  font-family:var(--font-display);color:var(--orange-hot);
  font-size:1.6rem;font-weight:600;margin:0;white-space:nowrap;
}
.hero-stats dd{margin:.3rem 0 0;font-size:.78rem;color:var(--steel);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;}

/* schedule strip (signature element) */
.schedule-strip{
  background:var(--panel);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;white-space:nowrap;
  padding:.85rem 0;
}
.schedule-track{
  display:inline-flex;gap:2.4rem;
  animation:marquee 32s linear infinite;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;
  color:var(--steel-dim);text-transform:uppercase;
}
.schedule-track span::before{content:"◆ ";color:var(--copper);}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* =========================================================
   Sections
   ========================================================= */
.section{padding:6.5rem 0;}
.section-alt{background:var(--panel);}

/* About */
.about-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:start;
  margin-bottom:3.5rem;
}
.about-copy p{color:var(--steel);font-size:1.02rem;}
.about-copy strong{color:var(--white);}
.about-photo img{
  border-radius:var(--radius);
  border:1px solid var(--line);
  filter:saturate(1.05);
}

.mvv-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
}
.mvv-card{
  background:var(--panel);padding:1.9rem 2rem;
  border-left:3px solid var(--orange);
}
.mvv-wide{grid-column:1/-1;border-left-color:var(--copper);}
.mvv-label{
  display:block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--orange-hot);margin-bottom:.65rem;
}
.mvv-card p{margin:0;color:var(--steel);font-size:.98rem;}

/* Services */
.services-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.service-card{
  background:var(--void);padding:2.1rem 1.7rem;
  transition:background .2s ease;
}
.service-card:hover{background:var(--panel-2);}
.service-code{
  display:block;font-family:var(--font-mono);font-size:.85rem;color:var(--copper);
  margin-bottom:1.1rem;
}
.service-card h3{
  font-family:var(--font-display);font-size:1.12rem;text-transform:uppercase;
  font-weight:600;margin:0 0 .8rem;letter-spacing:.01em;line-height:1.25;
}
.service-card p{color:var(--steel);font-size:.92rem;margin:0;}

/* Portfolio */
.gallery-tabs{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:2.2rem;}
.tab-btn{
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.03em;
  background:transparent;border:1px solid var(--line);color:var(--steel);
  padding:.65rem 1.15rem;border-radius:999px;cursor:pointer;
  transition:all .18s ease;
}
.tab-btn:hover{border-color:var(--orange);color:var(--white);}
.tab-btn.is-active{background:var(--orange);border-color:var(--orange);color:#151107;font-weight:600;}

.gallery-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem;
}
.gallery-item{
  position:relative;padding:0;border:none;background:var(--panel);cursor:pointer;
  aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);
}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease, filter .3s ease;}
.gallery-item::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 0 rgba(239,107,33,0);
  transition:box-shadow .2s ease;
}
.gallery-item:hover img{transform:scale(1.08);}
.gallery-item:hover::after{box-shadow:inset 0 0 0 2px var(--orange);}
.gallery-item.is-hidden{display:none;}

/* Team */
.badges{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:2.6rem;}
.badge{
  font-family:var(--font-mono);font-size:.78rem;color:var(--white);
  border:1px solid var(--copper);background:rgba(181,101,29,.1);
  padding:.55rem 1rem;border-radius:var(--radius);letter-spacing:.02em;
}
.team-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;
}
.team-photo{aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);}
.team-photo img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease;}
.team-photo:hover img{transform:scale(1.06);}

/* CTA / contact */
.cta-section{position:relative;padding:8rem 0;overflow:hidden;}
.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 40%;}
.cta-overlay{
  position:absolute;inset:0;
  background:linear-gradient(100deg, var(--void) 20%, rgba(10,11,13,.82) 55%, rgba(10,11,13,.55) 100%);
}
.cta-inner{position:relative;z-index:2;text-align:left;}
.cta-title{max-width:16ch;}
.cta-lead{color:var(--steel);font-size:1.08rem;max-width:520px;margin:0 0 2.2rem;}
.cta-lead strong{color:var(--orange-hot);}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{background:var(--panel);border-top:1px solid var(--line);padding-top:4rem;}
.footer-inner{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;
  padding-bottom:3rem;
}
.footer-brand .footer-logo{height:64px;width:auto;margin-bottom:1rem;}
.footer-brand p{color:var(--steel-dim);font-size:.9rem;max-width:32ch;}
.footer-col{display:flex;flex-direction:column;gap:.75rem;}
.footer-heading{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;
  color:var(--copper);text-transform:uppercase;margin-bottom:.4rem;
}
.footer-col a{color:var(--steel);font-size:.92rem;transition:color .18s ease;}
.footer-col a:hover{color:var(--orange-hot);}
.footer-static{color:var(--steel-dim);font-size:.85rem;font-family:var(--font-mono);}

.footer-bottom{
  border-top:1px solid var(--line);
  padding:1.4rem 28px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  font-family:var(--font-mono);font-size:.75rem;color:var(--steel-dim);
}

/* =========================================================
   Lightbox
   ========================================================= */
.lightbox{
  position:fixed;inset:0;z-index:200;
  background:rgba(6,7,8,.95);
  display:flex;align-items:center;justify-content:center;
  padding:4vh 4vw;
  opacity:0;pointer-events:none;
  transition:opacity .22s ease;
}
.lightbox.is-open{opacity:1;pointer-events:auto;}
.lightbox img{max-width:100%;max-height:92vh;border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lightbox-close{
  position:absolute;top:22px;right:28px;
  background:none;border:none;color:var(--white);font-size:2.2rem;line-height:1;
  cursor:pointer;transition:color .2s ease;
}
.lightbox-close:hover{color:var(--orange-hot);}

/* =========================================================
   Floating WhatsApp button
   ========================================================= */
.whats-float{
  position:fixed;bottom:24px;right:24px;z-index:90;
  width:58px;height:58px;border-radius:50%;
  background:var(--orange);color:#151107;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 0 rgba(239,107,33,.6);
  animation:pulse-ring 2.6s ease-out infinite;
  transition:transform .18s ease;
}
.whats-float:hover{transform:scale(1.08);}
.whats-float .ic-whats{width:1.7em;height:1.7em;}
@keyframes pulse-ring{
  0%{box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 0 rgba(239,107,33,.5);}
  70%{box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 14px rgba(239,107,33,0);}
  100%{box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 0 rgba(239,107,33,0);}
}

/* =========================================================
   Reveal on scroll
   ========================================================= */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px){
  .about-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-grid{grid-template-columns:repeat(3,1fr);}
  .team-grid{grid-template-columns:repeat(3,1fr);}
  .footer-inner{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1/-1;}
}

@media (max-width: 760px){
  .main-nav, .header-whats{display:none;}
  .nav-toggle{display:flex;}
  .main-nav.is-open{
    display:flex;flex-direction:column;align-items:flex-start;gap:0;
    position:absolute;top:74px;left:0;right:0;
    background:rgba(10,11,13,.98);border-bottom:1px solid var(--line);
    padding:.5rem 28px 1.4rem;
  }
  .main-nav.is-open .nav-link{width:100%;padding:.85rem 0;border-bottom:1px solid var(--line);}
  .main-nav.is-open .nav-cta{margin-top:.8rem;border-radius:var(--radius);}

  .hero-title{font-size:clamp(2.2rem, 9vw, 3rem);}
  .hero-stats{gap:1.6rem;flex-wrap:wrap;}
  .mvv-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .footer-inner{grid-template-columns:1fr;}
  .cta-section{padding:5.5rem 0;}
}