/* ==========================================================================
   ARMAX · estilos complementarios a Tailwind (CDN)
   Cortes diagonales tipo "plancha de acero" + slider antes/después
   ========================================================================== */

/* --- Cortes diagonales entre secciones (motivo: chapa cortada) --- */
.armax-cut-b {
  clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
}
.armax-cut-t {
  clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 767px) {
  .armax-cut-b { clip-path: polygon(0 0, 100% 0, 100% 97%, 0 100%); }
  .armax-cut-t { clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 100%); }
}

/* --- Textura sutil tipo metal cepillado sobre fondos oscuros --- */
.armax-brushed {
  background-image:
    repeating-linear-gradient(100deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 3px);
}

/* ==========================================================================
   Slider Antes / Después — elemento de firma del sitio
   ========================================================================== */
.armax-ba {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
}
.armax-ba img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.armax-ba__after {
  z-index: 1;
}
.armax-ba__before-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  width: 50%; /* se controla via JS con --pos */
  width: var(--pos, 50%);
}
.armax-ba__before-wrap img {
  width: var(--ba-width, 100%);
  max-width: none;
}
.armax-ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  z-index: 3;
  width: 3px;
  background: var(--armax-ember);
  transform: translateX(-50%);
  pointer-events: none;
}
.armax-ba__grip {
  position: absolute;
  top: 50%;
  left: var(--pos, 50%);
  z-index: 4;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 2px;
  background: var(--armax-ember);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  pointer-events: none;
}
.armax-ba__grip svg { width: 20px; height: 20px; }
.armax-ba__tag {
  position: absolute;
  z-index: 5;
  bottom: 12px;
  font-family: var(--armax-font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  color: #fff;
  background: rgba(16,21,28,0.72);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.armax-ba__tag--before { left: 12px; }
.armax-ba__tag--after { right: 12px; }

/* ==========================================================================
   Animaciones de entrada (una sola secuencia orquestada en el hero)
   ========================================================================== */
@keyframes armax-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.armax-hero-anim > * {
  opacity: 0;
}

/* Contador */
.armax-counter { font-variant-numeric: tabular-nums; }

/* Barras comparativas de resultados (normal vs con producto) */
.armax-bar-track {
  background: var(--armax-mist);
  height: 10px;
  overflow: hidden;
}
.armax-bar-fill {
  height: 100%;
  width: 0%;
  transition: width 1.1s cubic-bezier(.22,.9,.35,1);
}

/* Scrollbar discreto */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--armax-cloud); }
::-webkit-scrollbar-thumb { background: var(--armax-steel); }

/* Menú móvil */
.armax-mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.armax-mobile-menu.is-open {
  max-height: 480px;
}

/* Tabs industrias */
.armax-tab-panel { display: none; }
.armax-tab-panel.is-active { display: block; }