/* ===== COLORES Y TIPOGRAFÍAS: edita aquí ===== */
:root {
  --ink: #1b222a;
  --ink2: #252e38;
  --paper: #f6f5f1;
  --white: #fff;
  --volt: #9b763f;
  --muted: #5b6472;
  --line: #dedbd2;
  --wa: #1fa855;
  --display: "Montserrat", system-ui, sans-serif;
  --body: "Montserrat", system-ui, sans-serif;
  --r: 10px;
  --max: 1160px;
}
* {
  box-sizing: border-box;
  margin: 0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}
body {
  font: 400 1.0625rem/1.65 var(--body);
  color: var(--ink);
  background: var(--paper);
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
.wrap {
  max-width: var(--max);
  margin: auto;
  padding: 0 20px;
}
h1,
h2,
h3 {
  font-family: var(--display);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
h1 {
  font-size: clamp(1.8rem, 6vw, 3.5rem);
  font-weight: 900;
  font-stretch: 112%;
}
h2 {
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  font-weight: 800;
}
h3 {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
section {
  padding: 84px 0;
}
.lead {
  color: var(--muted);
  max-width: 58ch;
  margin-top: 14px;
}
:focus-visible {
  outline: 3px solid var(--volt);
  outline-offset: 3px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r);
  font: 700 1rem var(--display);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    transform 0.15s,
    background 0.15s;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn-volt {
  background: var(--volt);
  color: white;
}
.btn-line {
  border-color: #fff5;
  color: #fff;
}
.btn-dark {
  background: var(--ink);
  color: #fff;
}
.btn-wa {
  background: var(--wa);
  color: #fff;
}
.ico {
  width: 1.5em;
  height: 1.5em;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.ico-wa {
  width: 1.5em;
  height: 1.5em;
}
/* cabecera */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: #fff;
  transition: box-shadow 0.2s;
}
header.sc {
  box-shadow: 0 6px 24px #0007;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 16px;
}
.logo {
  font: 900 1.25rem var(--display);
  text-decoration: none;
  display: flex;
  gap: 8px;
  align-items: center;
}
.logo i {
  width: 12px;
  height: 26px;
  background: var(--volt);
  clip-path: polygon(60% 0, 0 58%, 38% 58%, 18% 100%, 100% 38%, 60% 38%);
}
nav ul {
  display: flex;
  gap: 24px;
  list-style: none;
  padding: 0;
}
nav a {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.93rem;
  opacity: 0.8;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
nav a:hover {
  opacity: 1;
}
nav a.on {
  opacity: 1;
  border-color: var(--volt);
}
.nav .btn {
  padding: 10px 18px;
  font-size: 0.9rem;
}
.burger {
  display: none;
  background: none;
  border: 0;
  color: #fff;
  font-size: 1.7rem;
  cursor: pointer;
}
@media (max-width: 980px) {
  .burger {
    display: block;
  }
  .nav .btn {
    display: none;
  }
  nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 68px;
    background: var(--ink);
    display: none;
    padding: 10px 20px 22px;
    border-top: 1px solid #fff2;
  }
  nav.open {
    display: block;
  }
  nav ul {
    flex-direction: column;
    gap: 6px;
  }
  nav a {
    display: block;
    padding: 10px 0;
  }
}
/* hero */
.hero {
  
  color: #fff;
  padding: 40px 0 0;
  position: relative;
  overflow: hidden;
}
.circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  pointer-events: none;
}
.circuit path {
  fill: none;
  stroke: #fff1;
  stroke-width: 1.5;
}
.circuit .pulse {
  stroke: var(--volt);
  stroke-width: 2.5;
  stroke-dasharray: 60 900;
  animation: run 6s linear infinite;
  filter: drop-shadow(0 0 6px var(--volt));
}
.circuit .p2 {
  animation-delay: -3s;
}
@keyframes run {
  to {
    stroke-dashoffset: -960;
  }
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.8fr 0.2fr;
  gap: 48px;
  align-items: start;
}
.hero h1 em {
  font-style: normal;
  color: var(--volt);
}
.hero p.sub {
  font-size: 1.18rem;
  color: #c5cad3;
  max-width: 46ch;
  margin: 22px 0 28px;
}
.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 28px;
  list-style: none;
  padding: 0;
  color: #c5cad3;
  font-size: 0.95rem;
}
.ticks li::before {
  content: "✓ ";
  color: var(--volt);
  font-weight: 700;
}
.ld > * {
  animation: in 0.7s both;
}
.ld > :nth-child(2) {
  animation-delay: 0.12s;
}
.ld > :nth-child(3) {
  animation-delay: 0.24s;
}
.ld > :nth-child(4) {
  animation-delay: 0.36s;
}
@keyframes in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
.tape {
  height: 18px;
  margin-top: 64px;
  position: relative;
  background: repeating-linear-gradient(
    -45deg,
    var(--volt) 0 22px,
    var(--ink) 22px 44px
  );
}
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
}
/* formulario */
.quote {
  background: #fff;
  color: var(--ink);
  border-radius: 14px;
  padding: 26px 28px 28px;
  box-shadow: 0 24px 60px #0006;
}
.quote h2 {
  font-size: 1.45rem;
}
.quote .qp {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 6px 0 10px;
}
.seg {
  display: flex;
  gap: 6px;
  margin: 10px 0 2px;
}
.seg label {
  flex: 1;
  margin: 0;
  cursor: pointer;
}
.seg input {
  position: absolute;
  opacity: 0;
}
.seg span {
  display: block;
  text-align: center;
  padding: 9px 6px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font: 600 0.85rem var(--display);
}
.seg input:checked + span {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.seg input:focus-visible + span {
  outline: 3px solid var(--volt);
}
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin: 11px 0 4px;
}
input,
select,
textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font: inherit;
  background: #fff;
  color: var(--ink);
}
textarea {
  min-height: 76px;
  resize: vertical;
}
.quote .btn {
  width: 100%;
  margin-top: 14px;
}
.quote small {
  display: block;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}
@media (max-width: 480px) {
  .row {
    grid-template-columns: 1fr;
  }
}
/* cifras */
.trust {
  background: #fff;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
}
.tg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.tg div {
  text-align: center;
}
.tg b {
  display: block;
  font: 900 2.2rem var(--display);
}
.tg span {
  color: var(--muted);
  font-size: 0.9rem;
}
@media (max-width: 700px) {
  .tg {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* servicios */
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.svc {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition:
    border-color 0.2s,
    transform 0.2s;
}
.svc:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
}
.svc .ico {
  width: 38px;
  height: 38px;
  padding: 8px;
  background: var(--volt);
  border-radius: 8px;
  color: var(--white    );
  box-sizing: content-box;
}
.svc p {
  color: var(--muted);
  font-size: 0.97rem;
  flex: 1;
}
.svc a {
  font: 700 1rem var(--display);
  text-decoration: underline;
  text-decoration-color: var(--volt);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
@media (max-width: 900px) {
  .grid3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .grid3 {
    grid-template-columns: 1fr;
  }
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.chips span {
  padding: 9px 18px;
  border: 1.5px solid #fff3;
  border-radius: 40px;
  font-weight: 500;
}
/* oscuro / proceso */
.dark {
  background: var(--ink);
  color: #fff;
}
.dark .lead {
  color: #c5cad3;
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
  counter-reset: s;
  list-style: none;
  padding: 0;
}
.steps li {
  border-top: 3px solid var(--volt);
  padding-top: 16px;
  counter-increment: s;
}
.steps li::before {
  content: counter(s);
  font: 900 2.6rem var(--display);
  color: var(--volt);
  display: block;
}
.steps p {
  color: #c5cad3;
  font-size: 0.95rem;
  margin-top: 6px;
}
@media (max-width: 800px) {
  .steps {
    grid-template-columns: 1fr 1fr;
  }
}
/* proyectos */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.filters button {
  padding: 9px 18px;
  border: 1.5px solid var(--ink);
  border-radius: 40px;
  background: none;
  font: 600 0.9rem var(--display);
  cursor: pointer;
}
.filters button.on {
  background: var(--ink);
  color: var(--volt);
}
.pj {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 30px;
}
.pj figure {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #2a3140, #14181f);
}
.pj img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.pj figure:hover img {
  transform: scale(1.05);
}
.pj figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 44px 18px 16px;
  background: linear-gradient(transparent, #000d);
  color: #fff;
}
.pj figcaption small {
  color: var(--volt);
  font-weight: 600;
}
.pj figcaption p {
  font-size: 0.9rem;
  opacity: 0.85;
  line-height: 1.4;
}
.pj figure[hidden] {
  display: none;
}
@media (max-width: 900px) {
  .pj {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .pj {
    grid-template-columns: 1fr;
  }
}
/* opiniones */
.rv {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.rev {
  background: #fff;
  border-radius: var(--r);
  padding: 26px;
  border: 1px solid var(--line);
}
.st {
  color: #e0a800;
  letter-spacing: 2px;
}
.rev p {
  margin: 10px 0 14px;
}
.rev small {
  color: var(--muted);
}
@media (max-width: 900px) {
  .rv {
    grid-template-columns: 1fr;
  }
}
/* faq */
.faq {
  margin-top: 34px;
}
details {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
summary {
  font: 700 1.1rem var(--display);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
}
details[open] summary::after {
  content: "–";
}
details p {
  color: var(--muted);
  margin-top: 10px;
}
/* interiores */
.ph {
  background: var(--ink);
  color: #fff;
  padding: 64px 0 0;
  position: relative;
  overflow: hidden;
}
.ph .wrap {
  position: relative;
}
.ph .lead {
  color: #c5cad3;
}
.crumb {
  font-size: 0.85rem;
  color: #9aa3b2;
  margin-bottom: 14px;
}
.crumb a {
  text-decoration: none;
}
.ph h1 {
  font-size: clamp(1rem, 5vw, 2rem);
}
.ph .tape {
  margin-top: 50px;
}
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.pic {
  aspect-ratio: 5/5;
  border-radius: var(--r);
  background: linear-gradient(135deg, #2a3140, #14181f);
  overflow: hidden;
}
.pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.vals div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
}
.vals p {
  color: var(--muted);
  font-size: 0.95rem;
}
.tl {
  list-style: none;
  padding: 0;
  margin-top: 30px;
  border-left: 3px solid var(--volt);
}
.tl li {
  padding: 0 0 26px 24px;
  position: relative;
}
.tl li::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 6px;
  width: 17px;
  height: 17px;
  background: var(--ink);
  border: 3px solid var(--volt);
  border-radius: 50%;
}
.tl b {
  font: 800 1.1rem var(--display);
}
.tl p {
  color: var(--muted);
}
.cgrid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: start;
}
.info {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 18px;
  margin-top: 26px;
}
.info li {
  display: flex;
  gap: 14px;
}
.info b {
  display: block;
}
.info a {
  text-decoration: none;
}
.map {
  margin-top: 26px;
  aspect-ratio: 16/10;
  border-radius: var(--r);
  background: #dcdad2;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 16px;
}
@media (max-width: 850px) {
  .two,
  .cgrid {
    grid-template-columns: 1fr;
  }
}
.final {
  background: var(--volt);
  text-align: center;
  padding: 72px 0;
}
.final .lead {
  margin: 14px auto 28px;
  color: #ffffff;
}
.final h2 {
  color: #ffffff;
}
footer {
  background: var(--ink);
  color: #c5cad3;
  padding: 48px 0 96px;
  font-size: 0.95rem;
}
.fgrid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 30px;
}
footer h3 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 10px;
}
footer ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 6px;
}
footer a {
  text-decoration: none;
}
footer a:hover {
  color: var(--volt);
}
.copy {
  border-top: 1px solid #fff2;
  margin-top: 30px;
  padding-top: 18px;
  font-size: 0.85rem;
}
@media (max-width: 700px) {
  .fgrid {
    grid-template-columns: 1fr;
  }
}
.wa-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  background: var(--wa);
  color: #fff;
  border-radius: 50px;
  padding: 13px 22px;
  font: 700 0.95rem var(--display);
  text-decoration: none;
  box-shadow: 0 8px 24px #0005;
  display: flex;
  gap: 8px;
  align-items: center;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ===== v3: instalación eléctrica, fotos reales, agenda ===== */
html {
  scroll-padding-top: 110px;
}
.top {
  background: #0d1015;
  font-size: 0.8rem;
  color: #9aa3b2;
}
.top .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32px;
}
.top a {
  text-decoration: none;
}
@media (max-width: 980px) {
  .top {
    display: none;
  }
}
.wire {
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 3px;
  width: var(--p, 0%);
  background: var(--volt);
  box-shadow: 0 0 10px var(--volt);
  z-index: 2;
}
nav ul {
  gap: 20px;
}
nav a {
  font-size: 0.9rem;
}
.hero {
  background:
    linear-gradient(rgba(20, 24, 31, 0.9), rgba(20, 24, 31, 0.6)),
    url(../img/hero.jpg) center/cover,
    var(--ink);
}
.ph {
  background:
    linear-gradient(rgba(20, 24, 31, 0.9), rgba(20, 24, 31, 0.95)),
    url(../img/cabecera.jpg) center 30%/cover,
    var(--ink);
}
.circuit .node {
  fill: var(--volt);
  opacity: 0.15;
  animation: glow 3s ease-in-out infinite;
}
.circuit .n2 {
  animation-delay: -0.8s;
}
.circuit .n3 {
  animation-delay: -1.6s;
}
.circuit .n4 {
  animation-delay: -2.3s;
}
@keyframes glow {
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 8px var(--volt));
  }
}
/* tablero de breakers */
.panel {
  margin-top: 30px;
  max-width: 520px;
  background: var(--ink2);
  border: 1px solid #3a4150;
  border-radius: 10px;
  padding: 14px 16px 16px;
}
.panel p {
  font-size: 0.78rem;
  color: #9aa3b2;
  margin-bottom: 10px;
}
.brks {
  display: flex;
  gap: 8px;
}
.brk {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  text-align: center;
  color: #c5cad3;
  font-size: 0.72rem;
  transition: transform 0.15s;
}
.brk:hover {
  transform: translateY(-3px);
  color: #fff;
}
.brk b {
  display: block;
  margin-top: 6px;
  font-weight: 600;
}
.lv {
  display: block;
  height: 54px;
  background: #0e1116;
  border: 2px solid #3a4150;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.lv i {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 6px;
  height: 22px;
  border-radius: 4px;
  background: var(--volt);
  box-shadow: 0 0 14px #ffc40099;
  animation: flip 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.brk:nth-child(1) i {
  animation-delay: 0.9s;
}
.brk:nth-child(2) i {
  animation-delay: 1.2s;
}
.brk:nth-child(3) i {
  animation-delay: 1.5s;
}
.brk:nth-child(4) i {
  animation-delay: 1.8s;
}
.brk:nth-child(5) i {
  animation-delay: 2.1s;
}
@keyframes flip {
  from {
    transform: translateY(20px);
    background: #59606e;
    box-shadow: none;
  }
}
/* pasos energizados */
.steps.live li {
  border-top-color: #3a4150;
  transition: border-color 0.5s;
}
.steps.live li::before {
  color: #4a5262;
  transition:
    color 0.5s,
    text-shadow 0.5s;
}
.steps.live li.on {
  border-top-color: var(--volt);
}
.steps.live li.on::before {
  color: var(--volt);
  text-shadow: 0 0 20px #9b763faa;
}
.svc:hover .ico {
  box-shadow: 0 0 18px #9b763faa;
}
/* fotos reales */
.pj figure::before {
  content: attr(data-slot);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px 20px 90px;
  color: #ffffff55;
  font-size: 0.85rem;
  text-align: center;
}
.pj img {
  position: relative;
  z-index: 1;
}
.pj figcaption {
  z-index: 2;
}
.pj figure:has(img) {
  cursor: zoom-in;
}
.pj.g4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .pj.g4 {
    grid-template-columns: 1fr 1fr;
  }
}
.lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000d;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 24px;
  cursor: zoom-out;
}
.lb img {
  max-height: 80vh;
  border-radius: 8px;
}
.lb p {
  color: #fff;
}
/* agenda */
.agenda {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  min-height: 640px;
  overflow: hidden;
}
.agph {
  padding: 32px;
  color: var(--muted);
}
.agph ol {
  margin: 14px 0 0 20px;
  display: grid;
  gap: 8px;
}
/* whatsapp */
.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px;
  border: 2px solid var(--wa);
  animation: ring 2.4s infinite;
}
@keyframes ring {
  to {
    transform: scale(1.3, 1.7);
    opacity: 0;
  }
}
.wa-float .ico {
  width: 26px;
  height: 26px;
}
@media (max-width: 560px) {
  .wa-float span {
    display: none;
  }
  .wa-float {
    padding: 15px;
  }
}
.lb,
.wa-float {
  box-shadow: 0 8px 24px #0005;
}

.flake {
    position: absolute;
    right: 50px;
    top: 50%;
    width: 460px;
    height: 460px;
    transform: translateY(-50%);
    opacity: 0.08;
    stroke: #fff;
    fill: none;
    stroke-width: 0.5;
    animation: spin 60s linear infinite;
}

.superpuesto {
    margin-top: -120px;
    gap: 0;
    position: relative;
    background-color: transparent;
}

.bg-white{
    background-color: white;
}

.svc-custom{
    border-radius: 0;
    border: 0;
}

.svc-custom-left{
    background-color: #00084f;
    border-radius: 10px 0 0 10px;
}

.svc-custom-medium{
    background-color: var(--volt);
    color: white;
}

.svc-custom-right{
    background-color: #f7f7f8;
    border-radius: 0 10px 10px 0;
}

.color-white{
    color: white !important;
}

.color-white-muted{
    color: #ffffffcd !important;
}

.mb-2{
    margin-bottom: 200px;
}

.mt-0{
    margin-top: 0px;
}

.mt-20px{
    margin-top: 20px;
}

.text-center{
    text-align: center;
}

.ico-centered{
    align-items: center;
}

/* FIX SOLO CONTACTO */
.cgrid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.cgrid > * {
  min-width: 0;
}

body {
  overflow-x: hidden;
}

input,
select,
textarea,
.quote {
  max-width: 100%;
}

@media (max-width: 850px) {
  .cgrid {
    grid-template-columns: 1fr;
  }
}

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

.certificaciones{
    display: flex;
}

@media (max-width: 1000px) {
    .certificaciones{
        display: block;
    }
}
/* ===== HEISEMBERG: ajustes de marca (edita colores arriba en :root) ===== */
body{font-size:1rem}
.btn-volt,.svc .ico{color:#fff}
.filters button.on{background:var(--ink);color:var(--white)}
.final h2,.final .lead{color:#fff}
.logo{gap:10px;line-height:1.05}
.logo .mk{width:38px;height:38px;border-radius:8px;background:var(--volt);color:var(--ink);display:grid;place-items:center;font:900 1.3rem var(--display)}
.logo small{display:block;font:600 .62rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--volt)}
.hero{padding:56px 0 150px;background:repeating-linear-gradient(0deg,#ffffff0b 0 1px,transparent 1px 40px),repeating-linear-gradient(90deg,#ffffff0b 0 1px,transparent 1px 40px),linear-gradient(105deg,rgba(27,34,42,.96) 55%,rgba(27,34,42,.75)),url(../img/hero.jpg) center/cover,var(--ink)}
.hero::after{content:"";position:absolute;top:-10%;bottom:-10%;right:14%;width:64px;background:var(--volt);transform:skewX(-28deg);opacity:.92}
.hero-grid{grid-template-columns:1.3fr .7fr;align-items:center;z-index:1}
.hero h1{font-size:clamp(2rem,5.4vw,3.6rem)}
.logo-card{background:#fff;border-radius:14px;padding:14px;box-shadow:0 24px 60px #0007;justify-self:end;position:relative;z-index:1}
.logo-card img{border-radius:8px;width:100%}
.hero .tape{position:absolute;left:0;right:0;bottom:0;margin:0}
.superpuesto{margin-top:-120px;gap:0;position:relative;z-index:2}
.bg-white{background:#fff}
.svc-custom{border-radius:0;border:0}
.svc-custom-left{background:var(--ink2);border-radius:10px 0 0 10px}
.svc-custom-medium{background:var(--volt)}
.svc-custom-medium h3,.svc-custom-medium p{color:#fff!important}
.svc-custom-medium .ico{background:var(--ink);color:var(--white)}
.svc-custom-right{background:#f3f2ee;border-radius:0 10px 10px 0}
.color-white{color:#fff!important}.color-white-muted{color:#ffffffcd!important}
.tg{grid-template-columns:repeat(3,1fr)}
.tag{align-self:flex-start;font:700 .7rem var(--display);letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--white);padding:4px 10px;border-radius:20px}
.tag.ve{background:var(--volt);color:#fff}
.lst{list-style:none;padding:0;display:grid;gap:6px;margin:4px 0 8px}
.lst li{padding-left:22px;position:relative;color:var(--muted);font-size:.93rem;line-height:1.5}
.lst li::before{content:"→";position:absolute;left:0;color:var(--volt);font-weight:800}
.dark .lst li{color:#c5cad3}
.zones{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.zone{border:1.5px solid #fff3;border-radius:var(--r);padding:26px}
.zone h3{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.cita{border-left:5px solid var(--volt);padding:6px 0 6px 24px;font-size:1.15rem;font-weight:500;line-height:1.6;max-width:62ch;margin-top:26px}
.pic.logo-pic{background:#fff;border:1px solid var(--line)}.pic.logo-pic img{object-fit:contain}
.vid{max-width:760px;margin:36px auto 0;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 20px 50px #0004}
.vid video{width:100%;display:block}
.pj figure{animation:in .5s both}
.pj figure.vacio::before{content:"Foto próximamente";position:absolute;inset:0 0 70px;display:grid;place-items:center;color:#ffffff66;font-size:.85rem}
.pj figure.vacio{background:repeating-linear-gradient(0deg,#ffffff0d 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,#ffffff0d 0 1px,transparent 1px 28px),linear-gradient(135deg,#2a3140,#1b222a)}
.pj figcaption h3{font-size:1rem;margin:2px 0 4px}
.pj figcaption small{color:var(--volt)}
.more{height:1px}
.wa-float img{width:26px;height:26px}
@media(max-width:900px){.hero{padding-bottom:120px}.hero::after{display:none}.logo-card{justify-self:start;max-width:240px}.zones{grid-template-columns:1fr}.superpuesto{margin-top:-90px}.svc-custom-left,.svc-custom-right{border-radius:0}}

/* galería: insignia de varias fotos y flechas del visor */
.pj figure .n{position:absolute;top:10px;right:10px;z-index:2;background:var(--volt);color:#fff;font:700 .75rem var(--display);padding:4px 10px;border-radius:20px}
.pj img{object-position:center 40%}
.lb img{max-width:100%}
.lbn{position:absolute;top:50%;transform:translateY(-50%);background:#000a;color:#fff;border:0;font-size:2.4rem;width:52px;height:64px;cursor:pointer;border-radius:8px}
.lbn.l{left:12px}.lbn.r{right:12px}

/* flyers, video con play, trabaja con nosotros */
.flyers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px;text-align:left}
.flyers figure{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:#000;cursor:zoom-in}
.flyers img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.flyers figure:hover img{transform:scale(1.04)}
@media(max-width:700px){.flyers{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.flyers figure{flex:0 0 78%;scroll-snap-align:center}}
.vid{position:relative}
.vid video{aspect-ratio:432/238;object-fit:contain;background:var(--ink)}
.play{position:absolute;left:50%;top:76%;transform:translate(-50%,-50%);width:78px;height:78px;border:0;border-radius:50%;background:var(--volt);cursor:pointer;box-shadow:0 0 0 8px #9b763f66,0 10px 30px #0008;transition:transform .15s}
.play:hover{transform:translate(-50%,-50%) scale(1.08)}
.play::before{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:15px 0 15px 25px;border-color:transparent transparent transparent #fff}
.vid.on .play{display:none}
.btn-out{border-color:#fff;color:#fff}
.final .btn+.btn{margin-left:8px;margin-top:8px}
.chk{display:flex!important;gap:10px;align-items:flex-start;font-weight:500!important}
.chk input{width:auto;margin-top:4px}
.hp{position:absolute;left:-9999px}
.fmsg{margin-top:12px;font-size:.9rem;font-weight:600}.fmsg.ok{color:#1a7f37}.fmsg.err{color:#b42318}
@media(max-width:1100px){nav ul{gap:14px}nav a{font-size:.84rem;white-space:nowrap}}

.w-100{
  width: 100%;
}