/* IONIA Electricistas — estilos personalizados */
:root{
  --ink:#0a0a0a;
  --ink-2:#171717;
  --ink-3:#262626;
  --line:#2a2a2a;
  --mute:#737373;
  --soft:#d4d4d4;
  --paper:#f5f5f3;
  --paper-2:#ebebe6;
}

*{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', system-ui, sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-feature-settings:"ss01","cv11";
}

.font-display{ font-family:'Fraunces', 'Times New Roman', serif; font-optical-sizing:auto; letter-spacing:-0.02em; }
.font-mono{ font-family:'JetBrains Mono', ui-monospace, monospace; }

/* Grain texture overlay */
.grain::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.4; mix-blend-mode:overlay; pointer-events:none;
}

/* Number tag */
.num-tag{
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
}

/* Marquee */
.marquee{ display:flex; gap:3rem; animation:marquee 38s linear infinite; }
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Link underline */
.u-link{ position:relative; display:inline-block; }
.u-link::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s cubic-bezier(.7,0,.2,1);
}
.u-link:hover::after{ transform:scaleX(1); transform-origin:left; }

/* Button */
.btn-ink{
  display:inline-flex; align-items:center; gap:.75rem;
  background:var(--ink); color:var(--paper);
  padding:1rem 1.6rem; border-radius:999px;
  font-size:.85rem; letter-spacing:.05em; text-transform:uppercase;
  transition:transform .35s ease, background .35s ease;
}
.btn-ink:hover{ background:#000; transform:translateY(-2px); }
.btn-ink .dot{ width:.5rem; height:.5rem; border-radius:999px; background:var(--paper); }

.btn-ghost{
  display:inline-flex; align-items:center; gap:.75rem;
  border:1px solid var(--ink); color:var(--ink);
  padding:1rem 1.6rem; border-radius:999px;
  font-size:.85rem; letter-spacing:.05em; text-transform:uppercase;
  transition:background .35s ease, color .35s ease;
}
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }

/* Card services */
.service-card{
  background:var(--paper);
  border:1px solid #00000010;
  transition:background .4s ease, color .4s ease, transform .4s ease;
}
.service-card:hover{ background:var(--ink); color:var(--paper); }
.service-card:hover .service-num,
.service-card:hover .service-arrow{ color:var(--paper); }
.service-card .service-arrow{ transition:transform .4s ease; }
.service-card:hover .service-arrow{ transform:translate(4px,-4px); }

/* Section divider */
.hairline{ height:1px; background:#00000018; }

/* Reveal */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s ease; }
.reveal.in{ opacity:1; transform:none; }

/* WhatsApp float */
.wa-float{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:60;
  width:60px; height:60px; border-radius:999px;
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px #0000004d;
  transition:transform .35s ease, background .35s ease;
}
.wa-float:hover{ transform:translateY(-3px) scale(1.04); background:#000; }
.wa-float .ring{
  position:absolute; inset:-6px; border-radius:999px;
  border:1px solid #ffffff40; animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{ transform:scale(.9); opacity:.7 }
  100%{ transform:scale(1.4); opacity:0 }
}

/* Mobile menu */
.mob-menu{
  position:fixed; inset:0; background:var(--ink); color:var(--paper);
  z-index:80; transform:translateY(-100%); transition:transform .6s cubic-bezier(.7,0,.2,1);
}
.mob-menu.open{ transform:translateY(0); }

/* Input */
.field{
  width:100%; background:transparent; border:0; border-bottom:1px solid #00000033;
  padding:1rem 0; font-size:1rem; color:var(--ink);
  transition:border-color .3s ease;
}
.field:focus{ outline:none; border-color:var(--ink); }
.field::placeholder{ color:#0000007a; }

/* Footer big text */
.giant{ font-size:clamp(3.5rem, 12vw, 12rem); line-height:.9; letter-spacing:-0.05em; }

/* Hero massive */
.hero-title{ font-size:clamp(3rem, 11vw, 11rem); line-height:.88; letter-spacing:-0.045em; }