:root{
  --blue:#0056B9;
  --blue-600:#0A4A96;
  --accent:#D62828;
  --ink:#26323F;
  --muted:#6B7280;
  --bg:#F7F8FA;
  --card:rgba(255,255,255,.72);
  --ring: 0 0 0 4px rgba(0,86,185,.15);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter, Helvetica, Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;color:var(--ink);background:var(--bg);scroll-behavior:smooth}
img{max-width:100%;display:block}
.container{max-width:1160px;margin:0 auto;padding:0 20px}
.small{font-size:12px;color:#6b6b6b}
/* Nav */
header.sticky{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.85);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid #E5E7EB}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.wordmark{display:flex;gap:2px;align-items:baseline;text-decoration:none}
.wordmark b{color:var(--blue);font-weight:800;letter-spacing:.22em;font-size:22px}
.wordmark i{color:var(--blue);font-weight:300;letter-spacing:.22em;font-size:22px;font-style:normal}
nav a{color:var(--ink);text-decoration:none;margin:0 10px;font-size:14px;opacity:.9}
nav a:hover{opacity:1}
/* Buttons */
.btn{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--blue);border-radius:16px;padding:10px 16px;color:var(--blue);text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.05);transition:.2s;cursor:pointer;background:#fff}
.btn:hover{box-shadow:0 6px 18px rgba(0,0,0,.10)}
.btn.filled{background:var(--blue);color:#fff}
.btn.ghost{border-color:transparent;color:var(--ink);background:transparent}
/* Hero */
.hero{position:relative;padding:70px 0}
.hero .grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:960px){.hero .grid{grid-template-columns:1.1fr .9fr}}
.hero h1{font-size:46px;line-height:1.07;margin:.5rem 0 1rem}
.hero p{font-size:18px;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--blue);color:var(--blue);padding:6px 12px;border-radius:999px;font-size:13px;background:#fff}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.kpis .v{font-size:34px;font-weight:700;color:var(--blue)}
.kpis .l{font-size:12px;color:var(--muted)}
.hero-visual{background:var(--card);border:1px solid rgba(0,86,185,.18);border-radius:24px;box-shadow:0 8px 30px rgba(0,0,0,.08);padding:26px}
.mock{border:1.4px dashed rgba(0,86,185,.55);border-radius:18px;display:grid;place-items:center;aspect-ratio:4/3}
/* Curves */
.curve{display:block;height:80px;background:linear-gradient(180deg,transparent, rgba(0,86,185,.05))}
/* Sections */
section{padding:72px 0;scroll-margin-top:96px}
.eyebrow{color:var(--blue);text-transform:uppercase;letter-spacing:.2em;font-size:12px;margin-bottom:8px}
h2{font-size:34px;margin:0 0 14px}
.sub{color:var(--muted);margin:-6px 0 22px}
.card{background:var(--card);border:1px solid rgba(0,86,185,.15);border-radius:22px;box-shadow:0 12px 30px rgba(0,0,0,.07);padding:22px}
.grid-3{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:960px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-2{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:960px){.grid-2{grid-template-columns:repeat(2,1fr)}}
.grid-4 {
  display: grid;
  grid-template-columns: 1fr; /* móvil: 1 por fila */
  gap: 18px;
}

@media(min-width:768px){
  .grid-4 {
    grid-template-columns: repeat(2, 1fr); /* tablets: 2 por fila */
  }
}

@media(min-width:1200px){
  .grid-4 {
    grid-template-columns: repeat(4, 1fr); /* desktop: 4 por fila */
  }
}

/* Product gallery */
.product-card h3{margin:0 0 6px}
.thumb{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.swatch{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--blue);cursor:pointer}
.swatch.active{box-shadow:var(--ring);outline:none}
.mock-lace{aspect-ratio:3/2;border:1px solid var(--blue);border-radius:14px;overflow:hidden;display:grid;place-items:center}
/* Photo box */
.mock-photo{aspect-ratio:3/2;border:1px solid var(--blue);border-radius:14px;overflow:hidden;background:#fff}
.mock-photo img{width:100%;height:100%;object-fit:cover}
/* Process steps */
.step{display:flex;gap:14px;align-items:flex-start}
.step .n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-weight:700;flex:0 0 auto}
/* Accordion (FAQ) */
.faq details{background:var(--card);border:1px solid rgba(0,86,185,.15);border-radius:16px;padding:14px 16px}
.faq details+details{margin-top:10px}
.faq summary{cursor:pointer;font-weight:600}
/* Contact */
.kv{display:grid;grid-template-columns:auto 1fr; gap:10px; align-items:center}
.kv a{color:var(--blue);text-decoration:none}
/* Footer */
footer{border-top:1px solid #E5E7EB;padding:26px 0;background:#fff}
/* Floating WhatsApp */
.fab{position:fixed;right:18px;bottom:18px;background:#25D366;color:#fff;border-radius:999px;padding:14px 18px;font-weight:700;box-shadow:0 10px 25px rgba(37,211,102,.4);z-index:70;text-decoration:none}
.fab:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(37,211,102,.5)}
/* Back-to-top */
#toTop{position:fixed;right:18px;bottom:78px;background:#fff;border:1px solid var(--blue);color:var(--blue);border-radius:999px;padding:8px 10px;box-shadow:0 6px 18px rgba(0,0,0,.1);cursor:pointer;display:none}
.clients-banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
  align-items: center;
  justify-items: center;
  margin-top: 20px;
}

.clients-banner img {
  max-height: 70px;       /* controla el alto máximo */
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(100%); /* opcional: los hace en escala de grises */
  opacity: 0.8;
  transition: all 0.3s ease;
}

.clients-banner img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
/* Swatch arcoíris */
.swatch.rainbow {
  background-image: conic-gradient(from 90deg, red, orange, yellow, green, blue, violet);
}

/* Swatch espiga */
.swatch.espiga {
  background-image: linear-gradient(to right, black, red, black, red, black, red, black, red, black, red, black),
  linear-gradient(to bottom, red, black, red, black, red, black, red, black, red, black, red);
  background-blend-mode: multiply;
  border: none;
}

/* Swatch piton */
.swatch.piton {
  background-image: conic-gradient(red, yellow, blue, yellow, red, yellow);
}

/* Swatch punteado ng_hb */
.swatch.punteado_ng_hb {
  background-image: linear-gradient(to right, black, bisque, black, bisque, black, bisque, black, bisque, black, bisque, black),
  linear-gradient(to bottom, bisque, black, bisque, black, bisque, black, bisque, black, bisque, black, bisque);
  background-blend-mode: multiply;
  border: none;
}

/* Swatch punteado ng_gr */
.swatch.punteado_ng_gr {
  background-image: linear-gradient(to right, black, white, black, white, black, white, black, white, black, white, black),
  linear-gradient(to bottom, white, black, white, black, white, black, white, black, white, black, white);
  background-blend-mode: multiply;
  border: none;
}

/* Swatch cat ng_gr */
.swatch.cat_ng_gr {
  background-image: linear-gradient(to right, black, gray, black);
}

/* Swatch cat ng_am */
.swatch.cat_ng_am {
  background-image: linear-gradient(to right, black, black, yellow, yellow, black, black);
}

/* Swatch cat gr-fs */
.swatch.cat_gr_fs {
  background-image: linear-gradient(to right, gray, violet, gray);
}

/* Swatch cat ng_bl */
.swatch.cat_ng_bl {
  background-image: linear-gradient(to right, black, white, black);
}

/* Swatch capucha */
.swatch.capucha {
  background-image: conic-gradient(from 90deg, lightpink, lightblue, violet, bisque);
}

/* Swatch leopardo ng-tq */
.swatch.leopardo_ng_tq {
  background-image: linear-gradient(to left, #00ffff, black, #00ffff, black, #00ffff, black),
  linear-gradient(to bottom, black, #00ffff, black, #00ffff, black, #00ffff);
  background-blend-mode: multiply;
  border: none;
}

/* Swatch leopardo cl-ng */
.swatch.leopardo_cl_ng {
  background-image: linear-gradient(to left, #6495ed, #87cefa, #6495ed, #87cefa, #6495ed, #87cefa),
  linear-gradient(to bottom, #87cefa, #6495ed, #87cefa, #6495ed, #87cefa, #6495ed);
  background-blend-mode: multiply;
  border: none;
}

/* Swatch cebra ng_bl */
.swatch.cebra_ng_bl {
  background-image: linear-gradient(to right, black, white);
}

/* Swatch cebra cf_br */
.swatch.cebra_cf_br {
  background-image: linear-gradient(to right, black, chocolate);
}

/* Swatch raton rs-fs */
.swatch.raton_rs_fs {
  background-image: linear-gradient(to right, purple, violet, purple);
}

/* Swatch raton cl-bl */
.swatch.raton_cl_bl {
  background-image: linear-gradient(to right, #4682b4, snow, #4682b4);
}

/* Swatch raton cf-br */
.swatch.raton_cf_br {
  background-image: linear-gradient(to right, maroon, #ffdead, maroon, #ffdead, maroon, #ffdead, maroon, #ffdead, maroon, #ffdead, maroon),
  linear-gradient(to bottom, #ffdead, maroon, #ffdead, maroon, #ffdead, maroon, #ffdead, maroon, #ffdead, maroon, #ffdead);
  background-blend-mode: multiply;
  border: none;}

/* Swatch muelle ng_am */
.swatch.muelle_ng_am {
  background-image: linear-gradient(to right, black, black, yellow, yellow, black, black);
}

/* Swatch muelle az_am */
.swatch.muelle_az_am {
  background-image: linear-gradient(to right, blue, blue, yellow, yellow, blue, blue);
}

/* Swatch muelle ng_fs */
.swatch.muelle_ng_fs {
  background-image: linear-gradient(to right, black, black, purple, purple, black, black);
}

/* Swatch muelle ng_nj */
.swatch.muelle_ng_nj {
  background-image: linear-gradient(to right, black, black, orange, orange, black, black);
}

/* Swatch joker bl bg */
.swatch.joker_bl_bg {
  background-image: linear-gradient(to right, white, #ffefd5, white, #ffefd5, white, #ffefd5, white, #ffefd5, white, #ffefd5, white),
  linear-gradient(to bottom, #ffefd5, white, #ffefd5, white, #ffefd5, white, #ffefd5, white, #ffefd5, white, #ffefd5);
  background-blend-mode: multiply;
  border: none;
}

/* Swatch joker bl rj */
.swatch.joker_bl_rj {
  background-image: linear-gradient(to right, white, white, maroon, maroon, white, white);
}

.slideshow-container {
  position: relative;
  max-width: 100%;
  margin: auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.mySlides {
  display: none;
}

.mySlides img {
  width: 100%;
  border-radius: 12px;
}

.fade {
  animation: fadeEffect 1.5s;
}

@keyframes fadeEffect {
  from {opacity: 0.4}
  to {opacity: 1}
}
.mock-photo {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}

.mock-photo img {
  transition: transform 0.4s ease;
}

.mock-photo:hover img {
  transform: scale(2); /* aumenta el zoom */
}
/* Modal (imagen ampliada) */
.modal {
  display: none; 
  position: fixed;
  z-index: 200;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
}

.modal-content {
  margin: auto;
  display: block;
  max-width: 85%;
  max-height: 80%;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: white;
  font-size: 38px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
}

.close:hover {
  color: #ccc;
}