/* ============================================================
   Visor de fotografías, botones flotantes y banda de certificaciones
   ============================================================ */

.zoomable{ cursor:zoom-in; }

/* Botón de reproducción sobre la tarjeta destacada de industrias */
.play-btn{
  position:absolute; left:clamp(20px,2.6vw,34px); top:clamp(20px,2.6vw,34px); z-index:2;
  display:inline-flex; align-items:center; gap:var(--sp-2); cursor:pointer;
  padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3); border:1px solid rgba(255,255,255,.4); border-radius:999px;
  background:rgba(0,15,28,.55); backdrop-filter:blur(4px); color:var(--white);
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.play-btn svg{ width:22px; height:22px; }
.play-btn:hover{ background:var(--yellow); border-color:var(--yellow); color:var(--navy); }

/* Visor de video */
.videobox{
  position:fixed; inset:0; z-index:160; display:flex; align-items:center; justify-content:center;
  padding:clamp(var(--sp-5),5vw,var(--sp-16)); background:rgba(0,15,28,.9); animation:lb-in .2s ease-out;
}
.videobox-frame{
  width:min(1100px,100%); aspect-ratio:16/9; background:#000;
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-modal);
}
.videobox-frame iframe, .videobox-frame video{ width:100%; height:100%; border:0; display:block; }
.lightbox{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  gap:clamp(var(--sp-2),2vw,var(--sp-8)); padding:clamp(var(--sp-4),4vw,var(--sp-16));
  background:rgba(0,15,28,.95); backdrop-filter:blur(6px);
  animation:lb-in .2s ease-out;
}
@keyframes lb-in{ from{ opacity:0; } to{ opacity:1; } }
.lb-figure{ margin:0; max-width:min(1200px,92vw); max-height:86vh; display:flex; flex-direction:column; gap:var(--sp-4); }
.lb-figure img{ max-width:100%; max-height:78vh; width:auto; height:auto; object-fit:contain; background:var(--navy-ink); }
.lb-figure figcaption{
  font-family:var(--font-mono); font-size:var(--fs-lbl); letter-spacing:.05em;
  color:var(--on-dark-500); text-align:center; line-height:1.5;
}
.lb-close, .lb-nav{
  flex:0 0 auto; width:46px; height:46px; border:1px solid rgba(255,255,255,.24); background:transparent;
  color:var(--white); display:grid; place-items:center; transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.lb-close:hover, .lb-nav:hover{ background:var(--yellow); border-color:var(--yellow); color:var(--navy); }
.lb-close{ position:absolute; top:22px; right:22px; }
.lb-close svg, .lb-nav svg{ width:22px; height:22px; }
.lightbox.is-single .lb-nav{ display:none; }
@media (max-width:700px){
  .lb-nav{ position:absolute; bottom:20px; }
  .lb-prev{ left:22px; } .lb-next{ right:22px; }
}

/* Buscador de productos: panel anclado arriba (no centrado como el
   lightbox) porque lo que contiene es una lista, y una lista larga necesita
   crecer hacia abajo, no expandirse desde el centro de la pantalla. */
.searchbox{
  position:fixed; inset:0; z-index:180; display:flex; justify-content:center;
  padding:calc(var(--header-h) + 24px) clamp(var(--sp-4),4vw,var(--sp-16)) var(--sp-10);
  background:rgba(0,15,28,.72); backdrop-filter:blur(6px);
  animation:lb-in .2s ease-out;
}
.searchbox-panel{
  position:relative; width:min(720px,100%);
  max-height:calc(100vh - var(--header-h) - 64px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--white); border-radius:var(--radius);
  box-shadow:var(--shadow-modal);
}
.searchbox-close{
  position:absolute; top:14px; right:14px; z-index:1;
  width:34px; height:34px; border:0; border-radius:50%; cursor:pointer;
  background:var(--paper); color:var(--steel); display:grid; place-items:center;
  transition:background .2s ease, color .2s ease;
}
.searchbox-close:hover{ background:var(--navy-deep); color:var(--white); }
.searchbox-close svg{ width:17px; height:17px; }
.searchbox-field{
  flex:0 0 auto; display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-6) var(--sp-16) var(--sp-6) var(--sp-6); border-bottom:1px solid var(--line);
  color:var(--steel-light);
}
.searchbox-field svg{ width:21px; height:21px; flex:0 0 auto; }
.searchbox-field input{
  flex:1; min-width:0; border:0; background:transparent; color:var(--graphite);
  font-family:inherit; font-size:var(--fs-lede); line-height:1.4;
}
.searchbox-field input::-webkit-search-cancel-button{ display:none; }
.searchbox-field input:focus{ outline:none; }
.searchbox-field input::placeholder{ color:var(--steel-light); }
.searchbox-results{ overflow-y:auto; padding:var(--sp-2); }
.searchbox-results:empty{ display:none; }
.search-result{
  display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-2) var(--sp-2); border-radius:var(--radius-sm);
  transition:background .15s ease;
}
.search-result:hover, .search-result.is-active{ background:var(--paper); }
.search-result-foto{
  flex:0 0 auto; width:50px; height:50px; border-radius:var(--radius-sm);
  overflow:hidden; background:var(--blue-100);
}
.search-result-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.search-result-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.search-result-nombre{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-xs); color:var(--navy); }
.search-result-tipo{
  font-family:var(--font-mono); font-size:var(--fs-lbl); letter-spacing:.06em;
  text-transform:uppercase; color:var(--steel);
}
.search-empty, .search-hint{
  padding:var(--sp-8) var(--sp-4); font-size:var(--fs-xs); color:var(--steel); text-align:center; line-height:1.6;
}
.search-hint strong{ display:block; margin-bottom:var(--sp-1); font-size:var(--fs-body); color:var(--navy); }
@media (max-width:600px){
  .searchbox{ padding:calc(var(--header-h) + 14px) var(--sp-3) var(--sp-5); }
  .searchbox-field{ padding:var(--sp-4) var(--sp-12) var(--sp-4) var(--sp-4); }
}

/* Ventana de fabricación a medida: mismo lenguaje que el buscador —panel
   claro sobre el fondo oscurecido— pero centrada y no anclada arriba, porque
   lo que muestra es un pliego cerrado y no una lista que crece mientras se
   escribe. El panel no hace scroll completo: la cabecera y el pie se quedan
   quietos y sólo se recorre el pliego, así el botón de cerrar y la acción
   nunca se pierden de vista. */
.medidabox{
  position:fixed; inset:0; z-index:180; display:flex; align-items:center; justify-content:center;
  padding:clamp(var(--sp-4),4vw,var(--sp-16));
  background:rgba(0,15,28,.72); backdrop-filter:blur(6px);
  animation:lb-in .2s ease-out;
}
.medidabox-panel{
  position:relative; width:min(760px,100%); max-height:calc(100vh - 28px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--white); border-radius:var(--radius);
  box-shadow:var(--shadow-modal);
}
/* El acolchado derecho de la cabecera deja libre la esquina del botón de
   cerrar: sin él, el titular se le mete por debajo. */
.medidabox-head{ flex:0 0 auto; padding:clamp(var(--sp-6),3vw,var(--sp-10)) var(--sp-16) var(--sp-4) clamp(var(--sp-6),3.2vw,var(--sp-10)); }
.medidabox-head h2{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.025em;
  font-size:var(--fs-d4); line-height:1.15; color:var(--navy); margin:var(--sp-3) 0 var(--sp-3);
}
.medidabox-head p{ font-size:var(--fs-xs); color:var(--steel); line-height:1.65; max-width:58ch; }
.medidabox-body{ overflow-y:auto; padding:0 clamp(var(--sp-6),3.2vw,var(--sp-10)); }
.medida-specs{ margin:0 0 clamp(var(--sp-5),2.4vw,var(--sp-8)); }
.medida-specs > div{
  display:grid; grid-template-columns:132px 1fr; gap:var(--sp-5);
  padding:var(--sp-4) 0; border-top:1px solid var(--line);
}
.medida-specs dt{
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--yellow-dim); padding-top:2px;
}
.medida-specs dd{ margin:0; font-size:var(--fs-xs); color:var(--steel); line-height:1.6; }
.medidabox-foot{
  flex:0 0 auto; display:flex; align-items:center; flex-wrap:wrap;
  gap:clamp(var(--sp-4),2.2vw,var(--sp-6)); border-top:1px solid var(--line);
  padding:clamp(var(--sp-4),2.2vw,var(--sp-6)) clamp(var(--sp-6),3.2vw,var(--sp-10));
}
.medidabox-foot .text-note{ max-width:36ch; margin:0; }
@media (max-width:600px){
  .medidabox-panel{ max-height:calc(100vh - 28px); }
  .medida-specs > div{ grid-template-columns:1fr; gap:var(--sp-1); }
}

/* Pestaña fija de cotización (espejo del riel de redes, al otro borde) */
.quote-tab{
  /* Abajo y no a media altura: en el centro tapaba el contenido. */
  position:fixed; right:0; bottom:32px; z-index:88;
  background:var(--yellow); color:var(--navy);
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:var(--sp-5) var(--sp-3); border:1px solid var(--yellow);
  transition:background .2s ease, padding .2s ease;
}
.quote-tab .quote-tab-inner{ writing-mode:horizontal-tb; }
.quote-tab:hover{ background:var(--yellow-hi); padding-right:var(--sp-4); }
body.nav-open .quote-tab{ display:none; }
@media (max-width:900px){ .quote-tab{ display:none; } }

.wa-dock{
  position:fixed; right:24px; bottom:24px; z-index:90;
  display:flex; flex-direction:column; align-items:flex-end; gap:var(--sp-3);
  transition:bottom .3s ease;
}
.wa-fab{
  width:60px; height:60px; border:none; border-radius:50%;
  background:#25D366; color:var(--white); display:grid; place-items:center;
  box-shadow:var(--shadow-float); position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}
.wa-fab:hover{ transform:translateY(-2px); box-shadow:var(--shadow-pop); }
.wa-fab svg{ width:32px; height:32px; fill:currentColor; position:absolute; transition:opacity .2s ease, transform .2s ease; }
.wa-fab .ico-close{ opacity:0; transform:rotate(-45deg); width:24px; height:24px; }
.wa-fab[aria-expanded="true"]{ background:var(--navy-deep); color:var(--white); }
.wa-fab[aria-expanded="true"] .ico-wa{ opacity:0; transform:rotate(45deg); }
.wa-fab[aria-expanded="true"] .ico-close{ opacity:1; transform:rotate(0); }
.wa-fab::after{                                 /* pulso de atención, una sola vez por carga */
  content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366;
  animation:wa-pulse 2.4s ease-out 3;
}
.wa-fab[aria-expanded="true"]::after{ display:none; }
@keyframes wa-pulse{ 0%{ transform:scale(1); opacity:.7; } 70%,100%{ transform:scale(1.6); opacity:0; } }

.wa-menu{
  width:268px; background:var(--white); border:1px solid var(--line);
  box-shadow:var(--shadow-pop);
  transform-origin:bottom right; animation:wa-in .18s ease-out;
}
@keyframes wa-in{ from{ opacity:0; transform:translateY(8px) scale(.97);} to{ opacity:1; transform:none; } }
.wa-menu-head{
  padding:var(--sp-4) var(--sp-4); border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--steel);
}
.wa-opt{ display:block; padding:var(--sp-4) var(--sp-4); border-bottom:1px solid var(--line); transition:background .18s ease; }
.wa-opt:last-child{ border-bottom:none; }
.wa-opt:hover{ background:var(--paper); }
.wa-opt b{ display:block; font-size:var(--fs-xs); font-weight:600; color:var(--navy); }
.wa-opt span{ display:block; margin-top:3px; font-size:var(--fs-xs); color:var(--steel); line-height:1.45; }
.wa-opt .num{ display:block; margin-top:var(--sp-2); font-family:var(--font-mono); font-size:var(--fs-lbl); color:var(--yellow-dim); }

@media (max-width:900px){
  .wa-dock{ right:16px; bottom:16px; }
  .wa-menu{ width:min(268px, calc(100vw - 32px)); }
}

.cert-band{ display:block; background:var(--white); border-top:1px solid var(--line); }
/* Sólo el eje vertical: el lateral lo pone .container y no debe pisarse. */
.cert-band-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(var(--sp-6),3.5vw,var(--sp-16)); flex-wrap:wrap;
  padding-top:clamp(var(--sp-6),3vw,var(--sp-10)); padding-bottom:clamp(var(--sp-6),3vw,var(--sp-10));
}
.cert-band-copy{ flex:1 1 300px; }
.cert-band-copy p{ font-size:var(--fs-xs); color:var(--steel); line-height:1.55; max-width:46ch; margin:var(--sp-2) 0 0; }
.cert-band-logos{ display:flex; align-items:center; gap:clamp(var(--sp-6),3vw,var(--sp-12)); flex-wrap:wrap; }
.cert-band-logos a{ display:flex; align-items:center; transition:opacity .2s ease; }
.cert-band-logos a:hover{ opacity:.65; }
.cert-band-logos img{ width:auto; display:block; }
@media (max-width:640px){ .cert-band-logos{ gap:var(--sp-6); } }

/* Aviso cuando no se pudieron cargar los datos (explicarFalla en
   js/data/index.js). Colores de la paleta en vez de valores sueltos. */
.carga-error{ max-width:640px; margin:18vh auto; padding:var(--sp-8); font:16px/1.6 system-ui,sans-serif; color:var(--navy-deep); }
.carga-error h1{ font-size:24px; margin:0 0 var(--sp-4); }
.carga-error p{ margin:0 0 var(--sp-4); }
.carga-error a{ color:var(--blue-700); text-decoration:underline; }