/* =========================
SCROLL SUAVE
========================= */
html{
  scroll-behavior:smooth;
}

/* =========================
RESET
========================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Inter',Arial,Helvetica,sans-serif;
}
body{
  background:#f5f6f8;
}

/* =========================
NAVBAR
========================= */
header{
  position:fixed;
  top:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 60px;
  background:white;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
  z-index:1000;
  transition:0.3s;
}
header.scrolled{
  padding:12px 60px;
  box-shadow:0 5px 20px rgba(0,0,0,0.15);
}
nav ul{
  display:flex;
  list-style:none;
  gap:30px;
  align-items:center;
}
nav ul li{
  position:relative;
}
nav a{
  text-decoration:none;
  color:#333;
  font-weight:500;
}

/* BOTONES COTIZAR */
.btn, .cotizar-btn{
  background:#2f6df6;
  color:white;
  padding:10px 22px;
  border-radius:30px;
  display:inline-block;
  font-weight:600;
  transition:all 0.3s ease;
  box-shadow:0 4px 12px rgba(47,109,246,0.3);
}
.btn:hover, .cotizar-btn:hover{
  background:#1f4ed8;
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(47,109,246,0.45);
}

/* =========================
SUBMENU
========================= */
.dropdown{
  position:relative;
}
.submenu{
  position:absolute;
  top:100%;
  left:0;
  background:white;
  list-style:none;
  display:none;
  min-width:180px;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
}
.dropdown:hover .submenu{
  display:block;
}
.submenu li{
  padding:10px;
}
.submenu li a{
  color:#333;
  display:block;
}

/* =========================
HERO MEJORADO
========================= */
.hero{
  height:100vh;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:white;
  position:relative;
}
.hero::after{content:"";position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.5);}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.6));
  z-index:1;
}
.hero-content{
  position:relative;
  z-index:2;
  max-width:800px;
}
.hero h1{
  font-size:clamp(2.8rem,8vw,4.8rem);
  margin-bottom:20px;
  font-weight:700;
  text-shadow:0 3px 12px rgba(0,0,0,0.55);
}
.hero p{
  font-size:20px;
  margin-bottom:20px;
}
.btn-hero{
  background:#2f6df6;
  color:white;
  padding:16px 36px;
  border:none;
  border-radius:50px;
  font-size:1.15rem;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(47,109,246,0.45);
  transition:all 0.4s ease;
}
.btn-hero:hover{
  background:#1f4ed8;
  transform:translateY(-5px);
  box-shadow:0 18px 45px rgba(47,109,246,0.6);
}

/* fondo hero animado */
.hero-bg{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  background-size:cover;
  background-position:center;
  transition:opacity 1s ease-in-out;
  z-index:0;
}
.hero-bg1{ opacity:1; }
.hero-bg2{ opacity:0; }

/* =========================
SECCIONES
========================= */
section{
  padding:70px 10%;
  text-align:center;
}
h2{
  font-size:36px;
  margin-bottom:10px;
}
h2 span{
  color:#2f6df6;
}

/* =========================
NOSOTROS
========================= */
.contenedor-nosotros{
  display:flex;align-items:center;
  justify-content:center;
  gap:50px;
  margin-top:40px;
  flex-wrap:wrap;max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}
.imagen-nosotros img{
  width:100%;
  max-width:450px;
  border-radius:12px;
  box-shadow:0 15px 35px rgba(0,0,0,0.15);
  transition:0.4s;
}
.imagen-nosotros img:hover{ transform:scale(1.03); }
.texto-nosotros{
  max-width:500px;
  text-align:left;
}
.texto-nosotros h2{ margin-bottom:15px; font-size:28px; }
.texto-nosotros p{ color:#555; line-height:1.7; margin-bottom:15px; font-size:18px; }
#nosotros .intro-nosotros{ max-width:800px; margin:20px auto; }
#nosotros .intro-nosotros p{ font-size:19px; line-height:1.7; color:#555; }

/* =========================
VALORES
========================= */
.valores-section{ background:#f9fafc; }
.valores{
  display:flex;
  justify-content:center;
  gap:30px;
  flex-wrap:wrap;
  margin-top:40px;
}
.card{
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(10px);
  padding:28px 20px;
  width:320px;
  border-radius:16px;
  box-shadow:0 12px 35px rgba(0,0,0,0.1);
  transition:all 0.4s ease;
  text-align:center;
}
.card:hover{ transform:translateY(-12px); box-shadow:0 25px 55px rgba(0,0,0,0.18); }
.icono{
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px auto;
  background:#2f6df6;
  width:80px;height:80px;
  border-radius:50%;
  font-size:32px;color:white;
  box-shadow:0 10px 25px rgba(47,109,246,0.35);
  transition:0.4s;
}
.card:hover .icono{ transform:scale(1.12); }

/* =========================
PRODUCTOS
========================= */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
  margin-top:40px;
}
.grid .card{ cursor:pointer; border-radius:14px; overflow:hidden; background:white; box-shadow:0 10px 30px rgba(0,0,0,0.08); transition:all 0.4s ease; }
.grid .card:hover{ transform:translateY(-10px); box-shadow:0 20px 50px rgba(0,0,0,0.15); }
.grid .card img{ width:100%; height:210px; object-fit:cover; transition:transform 0.5s; }
.grid .card:hover img{ transform:scale(1.06); }
.grid .card h3{ padding:14px; margin:0; background:#f8f9fc; font-size:1.3rem; }
#productos .intro-productos{ max-width:750px; margin:20px auto 15px auto; }
#productos .intro-productos p{ font-size:18px; color:#555; line-height:1.7; }
.descarga-catalogo{ text-align:center; margin-top:20px; margin-bottom:40px; }

/* =========================
PROVEEDORES
========================= */
.proveedores{ background:white; padding:80px 10%; text-align:center; }
.proveedores-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:40px;
  align-items:center;
  margin-top:40px;
}
.proveedores-grid img{ width:100%; max-width:180px; margin:auto; filter:grayscale(100%); transition:0.3s; }
.proveedores-grid img:hover{ filter:grayscale(0%); transform:scale(1.05); }

/* =========================
CONTACTO
========================= */
form{ max-width:500px; margin:auto; display:flex; flex-direction:column; gap:15px; }
input, textarea{ padding:10px; border:1px solid #ccc; border-radius:6px; }
button{ background:#2f6df6; color:white; border:none; padding:12px; border-radius:6px; cursor:pointer; }
#contacto .intro-contacto{ max-width:700px; margin:20px auto 40px auto; }
#contacto .intro-contacto p{ font-size:18px; line-height:1.7; color:#555; }

/* =========================
WHATSAPP
========================= */
.whatsapp{
  position:fixed;
  bottom:25px;right:25px;
  background:#25d366;
  width:60px;height:60px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;color:white;
  box-shadow:0 10px 25px rgba(0,0,0,0.2);
  cursor:pointer;transition:.3s;
}
.whatsapp:hover{ transform:scale(1.1); }

/* =========================
ANIMACIONES
========================= */
.anim-left{ opacity:0;transform:translateX(-80px);transition:all .9s ease; }
.anim-right{ opacity:0;transform:translateX(80px);transition:all .9s ease; }
.anim-bottom{ opacity:0;transform:translateY(50px);transition:all .9s ease; }
.anim-left.visible,.anim-right.visible,.anim-bottom.visible{
  opacity:1;
  transform:translateX(0) translateY(0);
}

/* =========================
MENU HAMBURGUESA
========================= */
.menu-toggle{ display:none; font-size:28px; cursor:pointer; }

/* =========================
RESPONSIVE
========================= */
@media(max-width:900px){
  header{ padding:20px; }
  nav ul{ position:absolute;top:80px;left:0;width:100%;background:white;flex-direction:column;align-items:center;gap:20px;padding:30px;display:none; }
  nav ul.active{ display:flex; }
  .menu-toggle{ display:block; }
  .grid{ grid-template-columns:1fr; }
  .contenedor-nosotros{ flex-direction:column;text-align:center; }
  .hero h1{ font-size:38px; }
}

/* =========================
FOOTER
========================= */
.footer{ background:#0c1a34; color:white; padding:60px 10%; }
.footer-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:40px;
}
.footer-col h3,.footer-col h4{ margin-bottom:15px; }
.footer-col p,.footer-col a{ color:#ccc; text-decoration:none; font-size:14px; }
.footer-col ul{ list-style:none; }
.footer-col i{ font-size:22px; margin-right:10px; cursor:pointer; }
.footer-bottom{ margin-top:40px; text-align:center; border-top:1px solid rgba(255,255,255,0.1); padding-top:20px; }

/* =========================
CONTACTO CARDS
========================= */
.contenedor-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:25px; }
.cardC{
  display:flex;align-items:center;gap:15px;
  background:#f5f7fa;padding:25px;border-radius:12px;
  box-shadow:0px 4px 10px rgba(0,0,0,0.1);transition:0.3s;justify-content:center;
}
.cardC:hover{ transform:translateY(-8px); box-shadow:0px 12px 25px rgba(0,0,0,0.2); }
.iconoC{
  background:#e8f0ff;color:#2b6cff;
  width:45px;height:45px;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;font-size:18px;
}
.info{ text-align:center; }
.info h3{ margin:0;font-size:18px;color:#2b6cff; }
.info p{ margin:2px 0;font-size:14px;color:#555; }
@media(max-width:768px){ .contenedor-cards{ grid-template-columns:1fr; } }

/* =========================
BANNER BISAGRAS
========================= */
.banner-bisagras{
  height:70vh;
  margin-top:90px;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:white;overflow:hidden;
}
.video-banner{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;z-index:-2;
}
.banner-bisagras::after{
  content:"";position:absolute;inset:0;
  background:rgba(0,0,0,0.5);z-index:-1;
}
.banner-texto h1{ font-size:55px; margin-bottom:10px; }
.banner-texto p{ font-size:18px; }

/* =========================
BANNER MANILLAS (con video)
========================= */
.banner-manillas{
  height:70vh;
  margin-top:90px;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:white;overflow:hidden;
}
.banner-manillas .video-banner{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;z-index:-2;
}
.banner-manillas::after{
  content:"";position:absolute;inset:0;
  background:rgba(0,0,0,0.5);z-index:-1;
}
.banner-manillas .banner-texto h1{ font-size:55px; margin-bottom:10px; }
.banner-manillas .banner-texto p{ font-size:18px; }

/* =========================
CATEGORIAS BISAGRAS / MANILLAS
========================= */
.categoria-bisagras{
  padding:60px 60px;
  text-align:center;
}
.categoria-bisagras h2{
  font-size:36px;
  margin-bottom:60px;
}

/* Subtítulo de sub-sección */
.subtitulo-categoria{
  font-size:22px;font-weight:800;color:#111;
  margin:50px 0 6px;display:inline-block;
}
.subtitulo-categoria::after{
  content:"";display:block;height:3px;width:40px;
  background:#2f6df6;border-radius:4px;margin:6px auto 0;
}
.subtitulo-desc{ font-size:14px;color:#666;margin-bottom:28px; }

/* =========================
BANNER DE MARCA
========================= */
.marca-banner{
  display:flex;align-items:center;gap:40px;
  background:white;border-radius:16px;
  padding:32px 40px;margin-bottom:50px;
  box-shadow:0 8px 30px rgba(0,0,0,0.07);
  text-align:left;border-left:5px solid #2f6df6;
}
.marca-banner-logo{
  flex-shrink:0;width:160px;
  display:flex;align-items:center;justify-content:center;
}
.marca-banner-logo img{
  width:100%;max-height:70px;object-fit:contain;
  filter:grayscale(20%);transition:0.3s;
}
.marca-banner:hover .marca-banner-logo img{ filter:grayscale(0%); }
.marca-banner-info{ flex:1; }
.marca-pais{
  font-size:12px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:#2f6df6;margin-bottom:8px;
}
.marca-pais i{ margin-right:6px; }
.marca-banner-info h3{ font-size:20px;font-weight:800;color:#111;margin-bottom:8px; }
.marca-banner-info p{ font-size:14px;color:#666;line-height:1.7;max-width:700px; }

/* Colores de borde por marca */
.marca-banner-hahn  { border-left-color:#c8102e; }
.marca-banner-medos { border-left-color:#2f6df6; }
.marca-banner-hoppe { border-left-color:#e63329; }

@media(max-width:768px){
  .marca-banner{ flex-direction:column;text-align:center;padding:24px 20px;gap:20px; }
  .marca-banner-logo{ width:120px; }
  .marca-banner-info p{ max-width:100%; }
}

/* =========================
CARDS ESPECIALES
========================= */
.card-contacto,
.card-proximamente{
  background:white;border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.07);
  display:flex;align-items:center;justify-content:center;
  min-height:320px;transition:0.3s;
  border:2px dashed #d0d8f0;
}
.card-contacto:hover,
.card-proximamente:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 45px rgba(0,0,0,0.12);
  border-color:#2f6df6;
}
.card-contacto-inner{
  padding:30px 25px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.card-contacto-icono{
  width:70px;height:70px;background:#e8f0fe;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;color:#2f6df6;
}
.proximamente-icono{ background:#fff3e0;color:#f59e0b; }
.card-contacto-inner h3{ font-size:18px;font-weight:700;color:#111; }
.card-contacto-inner p{ font-size:14px;color:#666;line-height:1.6; }
.badge-pronto{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff3e0;color:#f59e0b;
  font-weight:700;font-size:12px;letter-spacing:1px;
  padding:6px 16px;border-radius:30px;
  border:1px solid #f59e0b;text-decoration:none;transition:0.3s;
}
.badge-pronto:hover{ background:#f59e0b;color:white;transform:translateY(-2px); }

@media(max-width:768px){
  .medos-stats{ flex-wrap:wrap; }
  .medos-stat{ flex:1 1 45%;border-right:none;border-bottom:1px solid #f0f0f0; }
}

/* =========================
GRID DE BISAGRAS / MANILLAS
========================= */
.bisagras-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:40px;
}
.bisagra-card{
  background:white;border-radius:12px;overflow:hidden;
  box-shadow:0 20px 30px rgba(0,0,0,0.1);transition:0.3s;
}
.bisagra-card:hover{ transform:translateY(-10px); box-shadow:0 20px 50px rgba(0,0,0,0.15); }
.bisagra-card img{ width:100%;height:220px;object-fit:cover; }
.bisagra-card h3{ margin:20px 0 10px; }
.bisagra-card p{ padding:0 20px;color:#666; }
.bisagra-card span{
  display:block;margin:15px 0;font-weight:600;color:#2f6df6;
}
.bisagra-card .btn{ margin:0 20px 20px;display:inline-block;border:none;cursor:pointer;font-size:14px; }

/* Card image wrapper + overlay */
.card-img-wrap{ position:relative;overflow:hidden;height:220px; }
.card-img-wrap img{ width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease; }
.bisagra-card:hover .card-img-wrap img{ transform:scale(1.06); }
.card-overlay{
  position:absolute;inset:0;
  background:rgba(47,109,246,0.7);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:0.3s;
}
.card-overlay span{ color:white;font-weight:700;font-size:16px;letter-spacing:1px;text-transform:uppercase; }
.bisagra-card:hover .card-overlay{ opacity:1; }

/* imagen principal de la card — fade al cambiar color */
.card-main-img{ transition:opacity 0.25s ease; }

/* =========================
CHIPS DE COLOR EN CARDS
========================= */
.manilla-colores{
  display:flex;gap:8px;
  justify-content:center;flex-wrap:wrap;
  padding:12px 16px 4px;
}
.color-chip{
  width:22px;height:22px;border-radius:50%;
  display:inline-block;cursor:pointer;
  border:2px solid rgba(0,0,0,0.12);
  box-shadow:0 2px 6px rgba(0,0,0,0.18);
  transition:transform 0.2s, box-shadow 0.2s, outline 0.15s;
  position:relative;
}
.color-chip:hover{
  transform:scale(1.35);
  box-shadow:0 4px 14px rgba(0,0,0,0.28);
  z-index:2;
}
/* Tooltip */
.color-chip::after{
  content:attr(title);
  position:absolute;bottom:130%;left:50%;
  transform:translateX(-50%);
  background:#111;color:#fff;
  font-size:11px;white-space:nowrap;
  padding:4px 8px;border-radius:6px;
  pointer-events:none;opacity:0;
  transition:opacity 0.15s;z-index:100;
}
.color-chip:hover::after{ opacity:1; }

/* Borde visible para chips blancos */
.color-chip-white{ border:2px solid #ccc; }

/* Chip activo — anillo azul */
.color-chip.activo{
  outline:2.5px solid #2f6df6;
  outline-offset:2.5px;
  transform:scale(1.22);
  box-shadow:0 3px 10px rgba(47,109,246,0.4);
}

/* Etiqueta de color bajo los chips */
.card-color-label{
  display:block;
  font-size:12px;font-weight:600;color:#2f6df6;
  text-align:center;margin:6px 0 14px;
  min-height:18px;transition:opacity 0.2s;
}

/* =========================
COLORES EN EL MODAL
========================= */
.modal-colores-wrap{
  display:flex;flex-direction:column;gap:8px;
}
.modal-colores-label{
  font-size:12px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:#888;
}
.modal-colores{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}
.modal-color-chip{
  width:28px;height:28px;border-radius:50%;
  border:2px solid rgba(0,0,0,0.12);
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
  cursor:pointer;
  transition:transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  position:relative;
}
.modal-color-chip:hover,
.modal-color-chip.activo{
  transform:scale(1.25);
  box-shadow:0 4px 16px rgba(0,0,0,0.3);
  border-color:#2f6df6;
  outline:2px solid #2f6df6;
  outline-offset:2px;
}
.modal-color-chip::after{
  content:attr(title);
  position:absolute;bottom:135%;left:50%;
  transform:translateX(-50%);
  background:#111;color:#fff;
  font-size:11px;white-space:nowrap;
  padding:4px 8px;border-radius:6px;
  pointer-events:none;opacity:0;
  transition:opacity 0.15s;z-index:100;
}
.modal-color-chip:hover::after{ opacity:1; }

/* =========================
MODAL BISAGRA / MANILLA
========================= */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.65);
  backdrop-filter:blur(4px);
  z-index:9999;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity 0.35s ease;
}
.modal-overlay.active{ opacity:1;pointer-events:all; }
.modal-box{
  background:#fff;border-radius:20px;
  display:flex;gap:0;
  max-width:950px;width:92%;max-height:90vh;
  overflow:hidden;
  transform:translateY(30px) scale(0.97);
  transition:transform 0.35s cubic-bezier(.22,1,.36,1);
  box-shadow:0 40px 80px rgba(0,0,0,0.3);
}
.modal-overlay.active .modal-box{ transform:translateY(0) scale(1); }
.modal-close{
  position:absolute;top:18px;right:22px;
  background:none;border:none;font-size:22px;color:#555;
  cursor:pointer;z-index:10;transition:color 0.2s, transform 0.2s;
}
.modal-close:hover{ color:#2f6df6;transform:rotate(90deg); }
.modal-left{
  flex:0 0 42%;background:#f5f7fb;
  padding:30px 24px;display:flex;flex-direction:column;gap:16px;
}
.modal-img-principal{
  border-radius:12px;overflow:hidden;background:#fff;
  display:flex;align-items:center;justify-content:center;
  height:300px;box-shadow:0 8px 24px rgba(0,0,0,0.1);
}
.modal-img-principal img{
  width:100%;height:100%;object-fit:contain;
  padding:10px;transition:transform 0.4s;
}
.modal-img-principal img:hover{ transform:scale(1.04); }
#modalVisor video,
#modalManillaVisor video{
  width:100%;height:100%;object-fit:contain;border-radius:8px;
}
.thumb-video{ background:#000;position:relative;overflow:hidden; }
.thumb-video video{ width:100%;height:100%;object-fit:cover;display:block; }
.play-badge{
  position:absolute;bottom:5px;right:6px;
  background:rgba(47,109,246,0.85);color:white;
  font-size:9px;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
}
.modal-thumbnails{ display:flex;gap:10px;flex-wrap:wrap; }
.modal-thumb{
  width:68px;height:68px;border-radius:8px;overflow:hidden;
  border:2px solid transparent;cursor:pointer;
  transition:border-color 0.2s, transform 0.2s;
  background:#fff;box-shadow:0 3px 10px rgba(0,0,0,0.08);
}
.modal-thumb:hover,.modal-thumb.active{ border-color:#2f6df6;transform:translateY(-2px); }
.modal-thumb img{ width:100%;height:100%;object-fit:contain;padding:4px; }
.modal-right{
  flex:1;padding:36px 36px 30px;overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;position:relative;
}
.modal-marca{ font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#2f6df6;margin:0; }
.modal-titulo{ font-size:26px;font-weight:800;color:#111;margin:0;line-height:1.2; }
.modal-subtitulo{ font-size:14px;color:#666;margin:0;line-height:1.5; }
.modal-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:#e8f0fe;color:#2f6df6;
  font-weight:700;font-size:13px;padding:6px 14px;
  border-radius:30px;width:fit-content;
}
.modal-specs{ list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px; }
.modal-specs li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:14px;color:#444;line-height:1.5;
}
.modal-specs li::before{
  content:"\f058";
  font-family:"Font Awesome 6 Free";
  font-weight:900;color:#2f6df6;flex-shrink:0;margin-top:2px;
}
.modal-acciones{
  display:flex;gap:12px;flex-wrap:wrap;
  margin-top:auto;padding-top:10px;border-top:1px solid #eee;
}
.modal-pdf-btn{
  background:#111;color:#fff !important;
  display:flex;align-items:center;gap:7px;
  font-size:13px;padding:11px 20px;
}
.modal-pdf-btn:hover{ background:#333;transform:translateY(-2px); }
.modal-cotizar-btn{
  display:flex;align-items:center;gap:7px;
  font-size:13px;padding:11px 20px;
  text-decoration:none;color:#fff !important;
}

@media(max-width:720px){
  .modal-box{ flex-direction:column;max-height:95vh; }
  .modal-left{ flex:none;padding:20px; }
  .modal-img-principal{ height:200px; }
  .modal-right{ padding:22px; }
  .modal-titulo{ font-size:20px; }
}
/* =========================
Card Tornillos
========================= */
.grid-tornillos-single {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 25px;
}

.grid-tornillos-single .card-tornillo {
  width: 220px;
  max-width: 220px;
}


/* =========================
RESPONSIVE CHIPS MÓVIL
========================= */
@media(max-width:768px){
  .manilla-colores{ padding:10px 12px 4px; }
  .color-chip{ width:18px;height:18px; }
  .modal-color-chip{ width:24px;height:24px; }
}

/* =========================
CARDS PRODUCTOS CLICABLES
========================= */
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.card-link:hover h3 {
  color: #2f6df6;
}

/* ═══════════════════════════════════════════
   HERRAJES — BANNER
═══════════════════════════════════════════ */
.banner-herrajes {
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
  margin-top: 80px;
}
.banner-herrajes .video-banner {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.banner-herrajes::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.52);
  z-index: -1;
}
.banner-herrajes-contenido {
  position: relative;
  z-index: 2;
}
.banner-herrajes-contenido h1 {
  font-size: 80px;
  font-weight: 800;
  margin-bottom: 10px;
}
.banner-herrajes-contenido p {
  font-size: 18px;
  opacity: 0.9;
}

/* ═══════════════════════════════════════════
   HERRAJES — INTRO
═══════════════════════════════════════════ */
.intro-herrajes {
  padding: 60px 10% 30px;
  text-align: center;
}
.intro-herrajes p {
  max-width: 720px;
  margin: 14px auto 0;
  font-size: 17px;
  color: #555;
  line-height: 1.7;
}

/* ═══════════════════════════════════════════
   HERRAJES — BARRA DE APERTURAS (sticky)
═══════════════════════════════════════════ */
.apertura-nav {
  background: white;
  border-bottom: 2px solid #e8edf7;
  position: sticky;
  top: 80px;
  z-index: 900;
  padding: 0 10%;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.apertura-nav::-webkit-scrollbar { display: none; }
.apertura-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color 0.25s, border-color 0.25s;
}
.apertura-nav a:hover,
.apertura-nav a.active {
  color: #2f6df6;
  border-bottom-color: #2f6df6;
}
.apertura-nav a i { font-size: 15px; }

/* ═══════════════════════════════════════════
   HERRAJES — SECCIÓN DE APERTURA
═══════════════════════════════════════════ */
.apertura-seccion {
  padding: 70px 10% 60px;
  background: #f5f6f8;
}
.apertura-seccion:nth-child(even) {
  background: #ffffff;
}

.apertura-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.apertura-icono {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2f6df6, #1a4fd8);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: white;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(47,109,246,0.35);
}
.apertura-titulo { text-align: left; }
.apertura-titulo h2 {
  font-size: 30px;
  margin-bottom: 4px;
  text-align: left;
}
.apertura-titulo p {
  font-size: 15px;
  color: #666;
  margin: 0;
}
.apertura-divider {
  height: 2px;
  background: linear-gradient(to right, #2f6df6, transparent);
  margin: 16px 0 36px;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════
   HERRAJES — BANNER DE MARCA
═══════════════════════════════════════════ */
.marca-banner-winkhaus {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 28px 32px;
  border-radius: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #0a1628 0%, #1a3560 100%);
  color: white;
}
.marca-banner-winkhaus .marca-banner-logo {
  background: white;
  border-radius: 12px;
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: center;
  min-width: 130px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
.marca-banner-winkhaus .marca-banner-logo img {
  height: 44px;
  width: auto;
  object-fit: contain;
}
.marca-banner-winkhaus .marca-banner-info { flex: 1; }
.marca-banner-winkhaus .marca-pais {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 8px;
}
.marca-banner-winkhaus h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: white;
}
.marca-banner-winkhaus p {
  font-size: 14px;
  opacity: 0.85;
  line-height: 1.6;
  max-width: 600px;
}

/* ═══════════════════════════════════════════
   HERRAJES — GRID DE CARDS
═══════════════════════════════════════════ */
.herrajes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 36px;
}
.herraje-card {
  background: white;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.09);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}
.herraje-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 52px rgba(0,0,0,0.15);
}
.herraje-card .card-img-wrap {
  position: relative;
  overflow: hidden;
  height: 220px;
  background: #f9f9f9;
}
.herraje-card .card-img-wrap img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 18px;
  transition: transform 0.4s ease;
}
.herraje-card:hover .card-img-wrap img { transform: scale(1.07); }
.herraje-card .card-overlay {
  position: absolute; inset: 0;
  background: rgba(47,109,246,0.72);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: 0.3s;
}
.herraje-card:hover .card-overlay { opacity: 1; }
.herraje-card .card-overlay span {
  color: white; font-weight: 700;
  font-size: 14px; letter-spacing: 1px; text-transform: uppercase;
}
.herraje-card h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 14px 16px 5px;
  color: #111;
  line-height: 1.4;
}
.herraje-card p {
  font-size: 13px;
  padding: 0 16px;
  color: #666;
  line-height: 1.5;
}
.card-marca-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #2f6df6;
  background: #e8f0fe;
  padding: 3px 10px;
  border-radius: 20px;
  margin: 12px 16px 2px;
}
.herraje-card .btn {
  margin: 10px 16px 18px;
  font-size: 12px;
  padding: 8px 16px;
  display: inline-block;
  border: none;
  cursor: pointer;
}

/* Card "Más modelos" */
.card-mas-modelos {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0f4ff, #e8f0fe);
  border: 2px dashed #2f6df6;
  min-height: 280px;
  cursor: default;
}
.card-mas-inner {
  text-align: center;
  padding: 30px 20px;
}
.card-mas-inner i {
  font-size: 40px;
  color: #2f6df6;
  margin-bottom: 16px;
  display: block;
}
.card-mas-inner h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1a3a8a;
  margin: 0 0 8px;
  padding: 0;
}
.card-mas-inner p {
  font-size: 13px;
  color: #555;
  padding: 0;
  margin-bottom: 16px;
}

/* ═══════════════════════════════════════════
   HERRAJES — CTA FINAL
═══════════════════════════════════════════ */
.cta-herrajes {
  padding: 80px 10%;
  text-align: center;
  background: linear-gradient(135deg, #0d1f4d, #1a3a8a);
  color: white;
}
.cta-herrajes h2 {
  font-size: 32px;
  margin-bottom: 14px;
  color: white;
}
.cta-herrajes p {
  font-size: 16px;
  opacity: 0.85;
  margin-bottom: 28px;
}
.btn-cta-herrajes {
  display: inline-block;
  padding: 14px 36px;
  background: white;
  color: #1a3a8a;
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  font-size: 15px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  transition: transform 0.3s, box-shadow 0.3s;
}
.btn-cta-herrajes:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.3);
  color: #1a3a8a;
}

/* ═══════════════════════════════════════════
   HERRAJES — RESPONSIVE
═══════════════════════════════════════════ */
@media(max-width: 768px) {
  .banner-herrajes-contenido h1 { font-size: 48px; }
  .apertura-nav { padding: 0 4%; }
  .apertura-nav a { padding: 14px 12px; font-size: 12px; }
  .marca-banner-winkhaus { flex-direction: column; text-align: center; }
  .marca-banner-winkhaus .marca-banner-logo { margin: 0 auto; }
  .herrajes-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media(max-width: 480px) {
  .herrajes-grid { grid-template-columns: 1fr; }
}