/* =============================================================================
   ELECSA × ABB — Variables de marca (HEX del proyecto)
   ============================================================================= */
:root {
  --color-primary: #4369a4;
  --color-secondary: #009a9a;
  --color-accent: #ff000e;
  --color-grey: #333333;
  --color-charcoal: #2d2d2d;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-muted: #6b7280;
  --color-border-light: #e5e7eb;
  --color-bg-soft: #f5f5f5;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* Reset mínimo complementario a Tailwind */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
}

/* -----------------------------------------------------------------------------
   Animaciones reveal (Intersection Observer añade .is-visible)
   ----------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.08s;
}
.reveal-delay-2 {
  transition-delay: 0.16s;
}
.reveal-delay-3 {
  transition-delay: 0.24s;
}
.reveal-delay-4 {
  transition-delay: 0.32s;
}

/* Stagger para listas */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.55s var(--ease-out),
    transform 0.55s var(--ease-out);
}
.reveal-stagger.is-visible > *:nth-child(1) {
  transition-delay: 0.05s;
}
.reveal-stagger.is-visible > *:nth-child(2) {
  transition-delay: 0.12s;
}
.reveal-stagger.is-visible > *:nth-child(3) {
  transition-delay: 0.19s;
}
.reveal-stagger.is-visible > *:nth-child(4) {
  transition-delay: 0.26s;
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* -----------------------------------------------------------------------------
   Hero overlay gradiente (lado izquierdo más oscuro)
   ----------------------------------------------------------------------------- 
.hero-overlay {
  background: linear-gradient(
    105deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0.25) 100%
  );
}*/

/* -----------------------------------------------------------------------------
   Hero Slider
   ----------------------------------------------------------------------------- */
.hero-slider {
  --hero-fade-duration: 0.5s;
}

.hero-slider__media {
  z-index: 0;
}

.hero-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--hero-fade-duration) ease;
  pointer-events: none;
}

.hero-slider__slide.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

.hero-slider__image {
  display: block;
  min-height: 100%;
}

/* Paneles de texto superpuestos (misma posición) */
.hero-slider__panels {
  min-height: 1px;
}

.hero-slider__panel {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear var(--hero-fade-duration);
}

.hero-slider__panel.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;
}

/* Animación slide-up + fade al cambiar slide */
.hero-animate {
  opacity: 0;
  transform: translateY(1.5rem);
}

.hero-slider__panel.is-active.is-animating .hero-animate {
  animation: heroTextIn 0.65s var(--ease-out) forwards;
}

.hero-slider__panel.is-active.is-animating .hero-animate--accent {
  animation-delay: 0s;
}
.hero-slider__panel.is-active.is-animating .hero-animate--eyebrow {
  animation-delay: 0.08s;
}
.hero-slider__panel.is-active.is-animating .hero-animate--title {
  animation-delay: 0.16s;
}
.hero-slider__panel.is-active.is-animating .hero-animate--body {
  animation-delay: 0.24s;
}
.hero-slider__panel.is-active.is-animating .hero-animate--actions {
  animation-delay: 0.34s;
}

@keyframes heroTextIn {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Flechas */
.hero-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  transform: translateY(-50%);
  transition:
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    transform 0.22s var(--ease-out);
}

.hero-slider__arrow:hover {
  background: rgba(255, 255, 255, 0.38);
  border-color: rgba(255, 255, 255, 0.65);
  color: #fff;
}

.hero-slider__arrow:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
}

.hero-slider__arrow--prev {
  left: 1rem;
}

.hero-slider__arrow--next {
  right: 1rem;
}

@media (min-width: 1024px) {
  .hero-slider__arrow--prev {
    left: 1.5rem;
  }
  .hero-slider__arrow--next {
    right: 1.5rem;
  }
}

/* Bullets */
.hero-slider__bullets {
  position: absolute;
  bottom: 3.25rem;
  left: 50%;
  z-index: 4;
  display: flex;
  transform: translateX(-50%);
  gap: 0.5rem;
}

.hero-slider__bullet {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition:
    background-color 0.22s ease,
    transform 0.22s var(--ease-out),
    width 0.22s ease;
}

.hero-slider__bullet:hover {
  background: rgba(255, 255, 255, 0.75);
}

.hero-slider__bullet.is-active {
  width: 1.5rem;
  background: rgba(255, 255, 255, 0.95);
}

.hero-slider__bullet:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider__slide {
    transition: none;
  }
  .hero-animate,
  .hero-slider__panel.is-active.is-animating .hero-animate {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* -----------------------------------------------------------------------------
   Tarjetas producto — overlay inferior
   ----------------------------------------------------------------------------- */
.card-product-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, transparent 55%);
}

/* -----------------------------------------------------------------------------
   Casos — overlay barra inferior
   ----------------------------------------------------------------------------- */
.case-overlay {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* -----------------------------------------------------------------------------
   Utilidades de marca (compatibilidad con clases existentes)
   ----------------------------------------------------------------------------- */
.color-primary {
  background: var(--color-primary);
}
.color-second {
  background: var(--color-secondary);
}
.color-third {
  background: var(--color-accent);
}
.color-grey {
  background: var(--color-grey);
}
.color-white {
  color: var(--color-white);
}
.color-black {
  color: var(--color-black);
}

.bg-brand-primary {
  background-color: var(--color-primary);
}
.bg-brand-secondary {
  background-color: var(--color-secondary);
}
.text-brand-accent {
  color: var(--color-accent);
}
.bg-brand-accent {
  background-color: var(--color-accent);
}
.border-brand-secondary {
  border-color: var(--color-secondary);
}

/* -----------------------------------------------------------------------------
   Micro-interacciones botones
   ----------------------------------------------------------------------------- */
.btn-pill {
  transition:
    transform 0.22s var(--ease-out),
    box-shadow 0.22s var(--ease-out),
    background-color 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease;
}
.btn-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.btn-pill:active {
  transform: translateY(0);
}

/* -----------------------------------------------------------------------------
   Menú móvil
   ----------------------------------------------------------------------------- */
.mobile-panel {
  transform: translateX(100%);
  transition: transform 0.35s var(--ease-out);
}
.mobile-panel.is-open {
  transform: translateX(0);
}

.mobile-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.hamburger-line {
  transition:
    transform 0.25s var(--ease-out),
    opacity 0.2s ease;
}
.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* -----------------------------------------------------------------------------
   Carrusel productos — scrollbar oculta
   ----------------------------------------------------------------------------- */
.product-track {
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.product-track::-webkit-scrollbar {
  display: none;
}

/* -----------------------------------------------------------------------------
   Dropdown desktop (Productos)
   ----------------------------------------------------------------------------- */
.nav-dropdown-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s var(--ease-out),
    visibility 0.2s;
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Tarjeta sombra beneficio */
.stat-card {
  box-shadow: var(--shadow-card);
}

/* Imagen zoom suave en hover cards */
.img-zoom-wrap {
  overflow: hidden;
}
.img-zoom-wrap img {
  transition: transform 0.5s var(--ease-out);
}
.group:hover .img-zoom-wrap img {
  transform: scale(1.06);
}

.abb-logo-footer{
  width: 25%;
}

.border-t-5{
  border-top-width: 40px;
}

/* -----------------------------------------------------------------------------
   Cintillo categorías (Hero → Portafolio)
   ----------------------------------------------------------------------------- */
.category-ribbon {
  --category-icon-size: 3.5rem;
  --category-label-color: #888888;
}

.category-ribbon__scroll {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.category-ribbon__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-ribbon__item {
  flex: 0 0 auto;
  min-width: 5.5rem;
}

.category-ribbon__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  transition: opacity 0.22s var(--ease-out);
}

.category-ribbon__link:hover {
  opacity: 0.75;
}

.category-ribbon__link:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 4px;
  border-radius: 4px;
}

.category-ribbon__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--category-icon-size);
  height: var(--category-icon-size);
}

/* Base + clase única por categoría (reemplazar src en HTML o vía data-src) */
.category-image {
  display: block;
  width: var(--category-icon-size);
  height: var(--category-icon-size);
  object-fit: contain;
  object-position: center;
}

.category-image.is-placeholder {
  opacity: 0.35;
}

.category-image-soft-starter {}
.category-image-buttons {}
.category-image-distribution-box {}
.category-image-cabinets {}
.category-image-load-centers {}
.category-image-contactors {}
.category-image-motor-protectors {}
.category-image-breakers {}

.category-ribbon__label {
  max-width: 7.5rem;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--category-label-color);
}

/* Mobile: scroll horizontal; desktop: fila distribuida */
@media (max-width: 1023px) {
  .category-ribbon__scroll {
    padding-left: 0;
    padding-right: 0;
  }

  .category-ribbon__list {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 0 1rem 0.25rem;
    scrollbar-width: none;
  }

  .category-ribbon__list::-webkit-scrollbar {
    display: none;
  }

  .category-ribbon__item {
    scroll-snap-align: start;
    min-width: 6.25rem;
  }
}

@media (min-width: 1024px) {
  .category-ribbon__scroll {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .category-ribbon {
    --category-icon-size: 3.75rem;
  }

  .category-ribbon__label {
    font-size: 0.875rem;
  }
}