/* ═══════════════════════════════════════════════════════════════════
   public/assets/css/header.css
   Estilos del header y secciones del prototipo JMSERVICES.
   Tailwind cubre el 90%; aquí van animaciones y refinamientos.

   Paleta activa: lime (acento de marca) + ink (neutros) + warm (base).
   Ver: PLANES/colorimetria.md
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Reset de Alpine [x-cloak] ───────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ─── Tipografía base ─────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body { font-feature-settings: "ss01", "cv11"; }

/* ─── Selección de texto ──────────────────────────────────────────── */
::selection { background: #98C040; color: #1A1A1A; }  /* lime-500 / ink-900 */

/* ─── Scroll suave compensado por header sticky ───────────────────── */
html { scroll-padding-top: 116px; }

/* ═══ HEADER ═══════════════════════════════════════════════════════ */
.site-header {
    background: rgba(255, 255, 255, 0);
    transition: background 200ms ease, box-shadow 200ms ease, transform 250ms cubic-bezier(.16,1,.3,1);
}
.site-header[data-state="scrolled"],
.site-header[data-state="compact"] {
    /* Translucidez reducida para que el blur(16px) saturate(180%) haga
       efecto visible (patrón Vercel / Linear). Fondo 72% blanco en lugar
       de 96% opaco: el contenido debajo se difumina en lugar de taparse. */
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow: 0 4px 24px rgba(26, 26, 26, 0.06);  /* ink-900 / 6% */
}
.site-header.is-hidden { transform: translateY(-100%); }

/* ═══ ESTADO COLAPSADO (scrolled + compact) ═══════════════════════
   Al scrollear fuera del top, el header colapsa a un layout minimo:
     • top utility bar oculta
     • desktop nav oculta (mega-menu tambien — esta dentro del nav)
     • desktop CTA PERMANECE visible (conversion path siempre a un click)
     • logo se traslada al extremo derecho (justify-content: flex-end)
   Aplicado a AMBOS data-state para que el cambio ocurra al primer px
   de scroll, no solo al cruzar el umbral de 400 px del estado compact.
   ═══════════════════════════════════════════════════════════════════ */
.site-header[data-state="scrolled"] .top-utility-bar,
.site-header[data-state="compact"] .top-utility-bar {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 350ms cubic-bezier(.16,1,.3,1),
                opacity 200ms ease;
}

/* En estados colapsados el .desktop-nav NO se oculta: pasa a modo
   icon-only (solo iconos, sin texto ni chevrones). El orden natural
   del flex se preserva: logo a la izquierda, nav centrada, CTA a la
   derecha, dando el layout:
       [LOGO] [icons...] [CTA]
   Patron clasico de sticky header tipo Stripe / Linear. */
/* Span y chevron animados con max-width + opacity (no display:none,
   no es animable). En estado top caben 200 px; al colapsar colapsan
   a 0 con el mismo curve que el resto del header. */
.site-header .nav-item > span,
.site-header .nav-item > svg:not(:first-child) {
    max-width: 200px;
    opacity: 1;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 400ms cubic-bezier(.16,1,.3,1),
                opacity 250ms ease,
                margin-left 400ms cubic-bezier(.16,1,.3,1);
}

.site-header[data-state="scrolled"] .nav-item > span,
.site-header[data-state="compact"] .nav-item > span,
.site-header[data-state="scrolled"] .nav-item > svg:not(:first-child),
.site-header[data-state="compact"] .nav-item > svg:not(:first-child) {
    max-width: 0;
    opacity: 0;
    margin-left: -4px;
}

/* Label reveal en colapsado:
   (1) Item de la pagina actual (.is-active): su label permanece
       visible siempre, asi el usuario sabe en que seccion esta.
   (2) Hover/focus sobre cualquier item: revela su label y chevron
       temporalmente como feedback antes de hacer click. */

/* (1) Active item: label siempre visible */
.site-header[data-state="scrolled"] .nav-item.is-active > span,
.site-header[data-state="compact"] .nav-item.is-active > span {
    max-width: 200px;
    opacity: 1;
    margin-left: 0;
}

/* Active item: ancla visual sutil (lime + bg suave) para distinguirlo */
.site-header[data-state="scrolled"] .nav-item.is-active,
.site-header[data-state="compact"] .nav-item.is-active {
    color: #5F7E26;  /* lime-700 */
    background: rgba(152, 192, 64, 0.10);  /* lime-500 @ 10% */
}

/* (2) Hover/focus: reveal label (span) en cualquier item */
.site-header[data-state="scrolled"] .nav-item:hover > span,
.site-header[data-state="compact"] .nav-item:hover > span,
.site-header[data-state="scrolled"] .nav-item:focus-visible > span,
.site-header[data-state="compact"] .nav-item:focus-visible > span {
    max-width: 200px;
    opacity: 1;
    margin-left: 0;
}

/* (2) Hover: reveal chevron (mega items) como affordance del dropdown */
.site-header[data-state="scrolled"] .nav-item:hover > svg:not(:first-child),
.site-header[data-state="compact"] .nav-item:hover > svg:not(:first-child) {
    max-width: 200px;
    opacity: 1;
    margin-left: 0;
}

.site-header[data-state="scrolled"] .nav-item,
.site-header[data-state="compact"] .nav-item {
    padding: 0.5rem;
}

/* Main bar shrinks a 64px en AMBOS estados (scrolled + compact) al
   primer px de scroll, no solo al cruzar 400 px. Aplicado tambien al
   .main-bar-inner porque su h-20 en lg (80 px) desbordaba al .main-bar
   exterior (64 px) y la barra seguia midiendo 80 px visualmente. */
.site-header[data-state="scrolled"] .main-bar,
.site-header[data-state="compact"] .main-bar,
.site-header[data-state="scrolled"] .main-bar-inner,
.site-header[data-state="compact"] .main-bar-inner {
    height: 64px;
    transition: height 400ms cubic-bezier(.16,1,.3,1);
}

/* Logo se reduce a h-9 (36 px) y el sello de aniversario se oculta en
   estados colapsados para limpiar visualmente la barra reducida.
   En estado top conserva h-14 (56 px) con el sello pulsing. */
/* Logo: transition de height para el shrink 56 a 36 px sin pop. */
.site-header .logo-link img {
    transition: height 400ms cubic-bezier(.16,1,.3,1);
}
.site-header[data-state="scrolled"] .logo-link img,
.site-header[data-state="compact"] .logo-link img {
    height: 36px;
    width: auto;
}

/* Sello "25 aniv": opacity + scale (no display:none) para fade out. */
.site-header .seal-accent {
    transition: opacity 250ms ease,
                transform 300ms cubic-bezier(.16,1,.3,1);
}
.site-header[data-state="scrolled"] .seal-accent,
.site-header[data-state="compact"] .seal-accent {
    opacity: 0;
    transform: scale(0);
    pointer-events: none;
}

/* ─── Items de nav desktop ────────────────────────────────────────── */
.nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.5rem 0.875rem;
    font-size: 14px;
    font-weight: 500;
    color: #1A1A1A;  /* ink-900 */
    border-radius: 6px;
    transition: color 200ms ease, background 200ms ease,
                padding 400ms cubic-bezier(.16,1,.3,1),
                gap 400ms cubic-bezier(.16,1,.3,1);
    cursor: pointer;
    background: transparent;
    border: 0;
    white-space: nowrap;
}
.nav-item:hover {
    color: #5F7E26;                          /* lime-700 — brand on hover */
    background: rgba(95, 126, 38, 0.06);     /* lime-700 / 6% */
}
.nav-item:focus-visible {
    outline: 2px solid #5F7E26;  /* lime-700 — AA sobre blanco */
    outline-offset: 2px;
}
/* Subrayado lime animado */
.nav-item::after {
    content: "";
    position: absolute;
    left: 0.875rem;
    right: 0.875rem;
    bottom: -1px;
    height: 3px;
    background: linear-gradient(90deg, #7BA030, #98C040);  /* lime-600 → lime-500 */
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 250ms cubic-bezier(.16,1,.3,1);
    border-radius: 4px;
}
.nav-item:hover::after,
.nav-item[aria-expanded="true"]::after,
.nav-item.is-active::after,
.nav-item[aria-current="page"]::after { transform: scaleX(1); }

/* Estado activo: página actual */
.nav-item.is-active,
.nav-item[aria-current="page"] {
    color: #5F7E26;  /* lime-700 */
    background: rgba(95, 126, 38, 0.06);
}

/* ─── Mega menu panel ─────────────────────────────────────────────── */
.mega-menu { z-index: 60; }
.mega-panel { box-shadow: 0 24px 48px -12px rgba(26, 26, 26, 0.18); }  /* ink-900 / 18% */
.mega-grid {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mega-col-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.mega-col-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.mega-col-1 { grid-template-columns: minmax(0, 1fr) !important; }
.mega-col-1 .mega-item { padding: 1.25rem 1.5rem; }
.mega-col-1 .mega-icon { width: 48px; height: 48px; }

.mega-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    transition: background 150ms ease, transform 150ms ease;
    border: 1px solid transparent;
}
.mega-item:hover { background: #F4F4F0; }  /* ink-100 / warm-muted */
.mega-item.is-active {
    background: rgba(152, 192, 64, 0.08); /* lime-500 / 8% */
    border-color: rgba(152, 192, 64, 0.2);
}
.mega-item.is-active .mega-title {
    color: #5F7E26; /* lime-700 */
    font-weight: 600;
}
.mega-item.is-active .mega-icon {
    background: #98C040; /* lime-500 */
    color: #1A1A1A;
}
.mega-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #E5F1D0;  /* lime-100 — suave para dropdown */
    color: #5F7E26;       /* lime-700 */
    flex-shrink: 0;
    transition: transform 200ms ease, background 200ms ease, color 200ms ease;
}
.mega-item:hover .mega-icon {
    background: #98C040;  /* lime-500 al hover */
    color: #1A1A1A;
    transform: rotate(-6deg) scale(1.05);
}

.mega-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1A1A1A;  /* ink-900 */
    line-height: 1.2;
}
.mega-desc {
    display: block;
    font-size: 12px;
    color: #4A4A4A;  /* ink-700 */
    margin-top: 2px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.mega-arrow { transition: transform 200ms ease, color 200ms ease; }

.mega-footer { font-size: 13px; }

/* ─── CTA principal ───────────────────────────────────────────────── */
.cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    /* WCAG 2.5.5 (Level AAA): touch target ≥ 44×44 CSS px.
       min-height preserva el área clickeable incluso cuando se aplica
       transform: scale() en los estados collapsed (scrolled/compact).
       La escala es solo visual; el bbox real del botón mantiene 44 px
       → cumple AAA en touch devices (tablets) y futuros breakpoints. */
    min-height: 44px;
    background: linear-gradient(135deg, #98C040 0%, #7BA030 100%);  /* lime-500 → lime-600 */
    color: #1A1A1A;                                                   /* ink-900 sobre lime */
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 150ms ease, box-shadow 200ms ease,
                background 250ms ease, color 200ms ease,
                border-color 200ms ease;
    white-space: nowrap;
}
.cta-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: translateX(-100%);
    transition: transform 500ms ease;
}
.cta-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -6px rgba(123, 160, 48, 0.45);  /* lime-600 / 45% */
}
.cta-primary:hover::before { transform: translateX(100%); }
.cta-primary:focus-visible {
    outline: 2px solid #5F7E26;  /* lime-700 */
    outline-offset: 3px;
}

/* ─── CTA secundario (outline con hover sólido) ─────────────────── */
/* Reservado para futuros CTAs secundarios fuera del header
   (newsletter, descarga, etc.). El botón "Servicios" del header
   usa .cta-primary con el variant .cta-primary--outline (definido
   más abajo), reservando el gradiente lime sólido de .cta-primary
   para el único CTA primaria ("Cotizar").
   Estado base: fondo claro + borde lime-500 + sombra sutil.
   Hover:      se llena con gradiente lime + lift + shine sweep.
   Active:     scale-down sutil como feedback de click.
   Compact:    se oculta junto con .cta-primary cuando el header
               está en estado compact (scroll profundo). */
.cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #FAFAF8 0%, #F0F0E8 100%);  /* warm-50 → warm-200 */
    color: #1A1A1A;                                  /* ink-900 */
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    border: 1.5px solid #98C040;                     /* lime-500 */
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px -2px rgba(152, 192, 64, 0.30);
    transition: transform 200ms ease, box-shadow 250ms ease,
                background 300ms ease, border-color 200ms ease;
    white-space: nowrap;
}
.cta-secondary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: translateX(-100%);
    transition: transform 700ms ease;
    pointer-events: none;
}
.cta-secondary:hover {
    background: linear-gradient(135deg, #98C040 0%, #7BA030 100%);  /* lime-500 → lime-600 */
    border-color: #5F7E26;                          /* lime-700 */
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -8px rgba(95, 126, 38, 0.55);
}
.cta-secondary:hover::before {
    transform: translateX(100%);
}
.cta-secondary:active {
    transform: translateY(-1px) scale(0.98);
    transition-duration: 80ms;
}
.cta-secondary:focus-visible {
    outline: 2px solid #5F7E26;                      /* lime-700 */
    outline-offset: 3px;
}

/* ─── CTA variant: outline (secundario) ────────────────────────── */
/* Override del gradient lime de .cta-primary para convertir el botón
   en estilo secundario outline. Se aplica junto a .cta-primary para
   mantener el mismo padding, sizing y comportamiento de scroll-states;
   solo se sustituye el fill sólido por un borde lime + fill
   transparente, reservando el gradiente lime sólido de .cta-primary
   para el único CTA primaria ("Cotizar") del header.

   Esto crea una jerarquía visual clara:
     · .cta-primary          → CTA primaria   (Cotizar)   lime fill
     · .cta-primary--outline → CTA secundaria (Servicios)  lime border

   Por qué no basta con `!bg-transparent !border-lime-500`:
   .cta-primary usa el shorthand `background: linear-gradient(...)`
   que pone background-color en `transparent` y background-image
   en el gradient. Tailwind `bg-*` solo override `background-color`,
   así que el gradient verde sigue pintándose encima → el fill
   "transparente" sigue siendo verde. Aquí usamos el shorthand
   `background: #color !important` para resetear ambas capas
   (background-color y background-image) de una vez. */
.cta-primary--outline {
    background: #ffffff !important;             /* fill blanco opaco */
    color: #1A1A1A !important;                  /* ink-900 — alto contraste sobre lime border */
    border: 1.5px solid #98C040 !important;     /* lime-500 — marca */
}
.cta-primary--outline:hover {
    background: rgba(152, 192, 64, 0.08) !important;  /* lime-500 @ 8% */
    border-color: #5F7E26 !important;                  /* lime-700 */
    box-shadow: 0 6px 16px -6px rgba(95, 126, 38, 0.30);
}
.cta-primary--outline:focus-visible {
    outline-color: #5F7E26;
}

/* Estado scrolled: los CTAs acompañan el colapso de la barra
   (64 px, logo h-9, nav icon-only) contrayéndose
   progresivamente. Escala 0.94 (no 0.92) para una contracción
   más sutil que evita el "jumping" visual al cruzar el umbral
   40 px de scroll. El min-height: 44px del base preserva el
   área clickeable AAA (WCAG 2.5.5) pese a la escala visual.
   transform-origin anclado al borde derecho para que el grupo
   de botones quede visualmente "flush" con el viewport y no
   derive hacia adentro al shrinkear. */
.site-header[data-state="scrolled"] .cta-primary,
.site-header[data-state="scrolled"] .cta-secondary {
    transform: scale(0.94);
    transform-origin: right center;
}

/* Compact state: ambos CTAs se ocultan con el header.
   Refuerza el comportamiento del translateY del padre y evita
   que los botones queden "flotando" si por algún motivo el padre
   no termina de salir del viewport (ej. resize, zoom alto).
   El scale adicional (0.92 → 0.85) continúa la progresión del
   estado scrolled y la opacidad cierra el ciclo. */
.site-header[data-state="compact"] .cta-primary,
.site-header[data-state="compact"] .cta-secondary {
    transform: scale(0.85);
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease;
}

/* ─── Anniversary seal accent ─────────────────────────────────────── */
.seal-accent {
    box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(152, 192, 64, 0.7);  /* lime-500 / 70% */
    animation: pulse-lime 3s ease-in-out infinite;
}
@keyframes pulse-lime {
    0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(152, 192, 64, 0.5); }
    50%      { box-shadow: 0 0 0 2px #fff, 0 0 18px rgba(152, 192, 64, 0.9); }
}

/* ═══ MOBILE OVERLAY ═══════════════════════════════════════════════ */
.mobile-overlay { z-index: 60; }
.mobile-panel { will-change: transform; }

.mobile-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    font-size: 16px;
    font-weight: 500;
    color: #1A1A1A;  /* ink-900 */
    border-bottom: 1px solid rgba(26, 26, 26, 0.05);
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
    cursor: pointer;
    list-style: none;
}
.mobile-nav-item::-webkit-details-marker { display: none; }
.mobile-nav-item:hover {
    background: #F4F4F0;  /* ink-100 */
    color: #5F7E26;       /* lime-700 */
}
.mobile-nav-item.is-active,
.mobile-nav-item[aria-current="page"] {
    background: rgba(95, 126, 38, 0.08);
    color: #5F7E26;  /* lime-700 */
    font-weight: 600;
    border-left: 3px solid #5F7E26;
    padding-left: calc(1.25rem - 3px);
}

.mobile-subitem {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem 0.75rem 2.5rem;
    font-size: 14px;
    color: #4A4A4A;  /* ink-700 */
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
}
.mobile-subitem:hover {
    background: #fff;
    color: #5F7E26;  /* lime-700 */
}
.mobile-subitem.is-active {
    color: #5F7E26;  /* lime-700 */
    font-weight: 500;
}

/* ═══ SECTIONS ═══════════════════════════════════════════════════ */

/* Service cards */
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid rgba(26, 26, 26, 0.08);  /* ink-900 / 8% */
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
    overflow: hidden;
}
.service-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #7BA030, #98C040);  /* lime-600 → lime-500 */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms cubic-bezier(.16,1,.3,1);
}
.service-card:hover {
    border-color: rgba(152, 192, 64, 0.4);                /* lime-500 / 40% — brand */
    box-shadow: 0 12px 32px -8px rgba(26, 26, 26, 0.1);
    transform: translateY(-2px);
}
.service-card:hover::before { transform: scaleX(1); }

.service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #98C040 0%, #7BA030 100%);  /* lime gradient */
    color: #1A1A1A;                                                  /* ink-900 sobre lime */
    border-radius: 10px;
}
.service-title { font-size: 18px; font-weight: 600; color: #1A1A1A; }  /* ink-900 */
.service-desc  { font-size: 14px; color: #4A4A4A; line-height: 1.5; flex: 1; }  /* ink-700 */
.service-arrow {
    display: inline-flex;
    align-items: center;
    color: #A0A0A0;  /* ink-400 */
    transition: color 150ms ease, transform 200ms ease;
    align-self: flex-start;
}
.service-card:hover .service-arrow {
    color: #98C040;  /* lime-500 */
    transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════════
   TRANSICIÓN ATMOSFÉRICA — Sectores (white→lime) ↔ Certificaciones (lime→white)
   Las dos secciones comparten una franja lime intermedia que se desvanece.
   ═══════════════════════════════════════════════════════════════ */

/* Sectores: desvanecido de blanco a verde */
.js-section-sectors {
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #ffffff 18%,
        #F2F8E5 55%,      /* lime-50 */
        #E5F1D0 100%      /* lime-100 */
    );
}
/* Certificaciones: desvanecido de verde a blanco */
.js-section-certs {
    background: linear-gradient(
        to bottom,
        #E5F1D0 0%,       /* lime-100 */
        #F2F8E5 45%,      /* lime-50 */
        #ffffff 82%,
        #ffffff 100%
    );
    border-top: 1px solid rgba(26, 26, 26, 0.04);
    border-bottom: 1px solid rgba(26, 26, 26, 0.04);
}

/* Sector cards */
.sector-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    padding: 1.5rem 0.75rem;
    background: #fff;
    border: 1px solid rgba(26, 26, 26, 0.08);  /* ink-900 / 8% */
    border-radius: 12px;
    text-align: center;
    transition: all 200ms ease;
}
.sector-card:hover {
    border-color: rgba(152, 192, 64, 0.4);                       /* lime-500 / 40% */
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -8px rgba(26, 26, 26, 0.08);
}
.sector-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #1A1A1A;                          /* ink-900 */
    background: rgba(26, 26, 26, 0.06);      /* ink-900 / 6% */
    border-radius: 10px;
    transition: background 200ms ease, color 200ms ease;
}
.sector-card:hover .sector-icon {
    background: #1A1A1A;  /* ink-900 */
    color: #98C040;       /* lime-500 */
}
.sector-name { font-size: 13px; font-weight: 500; color: #1A1A1A; }  /* ink-900 */

/* Sector cards (linkable variant) */
.sector-card--link {
    text-decoration: none;
    position: relative;
}
.sector-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: rgba(26, 26, 26, 0.30);
    transition: color 200ms ease, transform 200ms ease;
}
.sector-arrow svg { width: 14px; height: 14px; }
.sector-card--link:hover .sector-arrow {
    color: #98C040;     /* lime-500 */
    transform: translateX(2px);
}

/* Iluminación app cards (iluminacion.php — grid 7 aplicaciones) */
.ilum-app-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid rgba(26, 26, 26, 0.08);  /* ink-900 / 8% */
    border-radius: 12px;
    color: inherit;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
    overflow: hidden;
}
.ilum-app-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #C9A24B, #E5C679);  /* dorado/champagne — acento iluminación */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms cubic-bezier(.16,1,.3,1);
}
.ilum-app-card:hover {
    border-color: rgba(201, 162, 75, 0.45);
    box-shadow: 0 12px 32px -8px rgba(26, 26, 26, 0.1);
    transform: translateY(-2px);
}
.ilum-app-card:hover::before { transform: scaleX(1); }
.ilum-app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #F0F0E8 0%, #FDFDFA 100%);  /* warm gradient */
    color: #5F7E26;                                                /* lime-700 */
    border: 1px solid rgba(95, 126, 38, 0.18);                      /* lime-700 / 18% */
    border-radius: 10px;
}
.ilum-app-card:hover .ilum-app-icon {
    background: #5F7E26;                                            /* lime-700 */
    color: #fff;
    border-color: #5F7E26;
}
.ilum-app-title { font-size: 17px; font-weight: 600; color: #1A1A1A; }  /* ink-900 */
.ilum-app-desc  { font-size: 14px; color: #4A4A4A; line-height: 1.5; }  /* ink-700 */

/* Automatización app cards (automatizacion.php — grid 2 + grid 4 marcas) */
.auto-app-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid rgba(26, 26, 26, 0.08);  /* ink-900 / 8% */
    border-radius: 12px;
    color: inherit;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
    overflow: hidden;
}
.auto-app-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #6D28D9, #A78BFA);  /* violeta — acento automatización */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms cubic-bezier(.16,1,.3,1);
}
.auto-app-card:hover {
    border-color: rgba(109, 40, 217, 0.45);
    box-shadow: 0 12px 32px -8px rgba(26, 26, 26, 0.1);
    transform: translateY(-2px);
}
.auto-app-card:hover::before { transform: scaleX(1); }
.auto-app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);  /* violet-50 → violet-100 */
    color: #6D28D9;                                                /* violet-700 */
    border: 1px solid rgba(109, 40, 217, 0.18);
    border-radius: 10px;
}
.auto-app-card:hover .auto-app-icon {
    background: #6D28D9;
    color: #fff;
    border-color: #6D28D9;
}
.auto-app-title { font-size: 17px; font-weight: 600; color: #1A1A1A; }  /* ink-900 */
.auto-app-desc  { font-size: 14px; color: #4A4A4A; line-height: 1.5; }  /* ink-700 */

/* Brand cards (Lutron, Crestron, Control4, otras) */
.auto-brand-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 2rem 1.5rem;
    background: #fff;
    border: 1px solid rgba(26, 26, 26, 0.08);
    border-radius: 12px;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.auto-brand-card:hover {
    border-color: rgba(109, 40, 217, 0.4);
    box-shadow: 0 12px 32px -8px rgba(26, 26, 26, 0.1);
    transform: translateY(-2px);
}
.auto-brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    width: 100%;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #1A1A1A;                          /* ink-900 */
    border-bottom: 1px solid rgba(26, 26, 26, 0.06);
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
}
.auto-brand-name { font-size: 16px; font-weight: 700; color: #1A1A1A; }
.auto-brand-desc { font-size: 13px; color: #4A4A4A; line-height: 1.5; }

/* Mantenimiento app cards (mantenimiento.php — grid 4 servicios) */
.mant-app-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid rgba(26, 26, 26, 0.08);  /* ink-900 / 8% */
    border-radius: 12px;
    color: inherit;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
    overflow: hidden;
}
.mant-app-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #B45309, #F59E0B);  /* ámbar — acento mantenimiento (hardhat/precaución industrial) */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms cubic-bezier(.16,1,.3,1);
}
.mant-app-card:hover {
    border-color: rgba(180, 83, 9, 0.45);
    box-shadow: 0 12px 32px -8px rgba(26, 26, 26, 0.1);
    transform: translateY(-2px);
}
.mant-app-card:hover::before { transform: scaleX(1); }
.mant-app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);  /* amber-50 → amber-100 */
    color: #B45309;                                                /* amber-700 */
    border: 1px solid rgba(180, 83, 9, 0.18);
    border-radius: 10px;
}
.mant-app-card:hover .mant-app-icon {
    background: #B45309;
    color: #fff;
    border-color: #B45309;
}
.mant-app-title { font-size: 17px; font-weight: 600; color: #1A1A1A; }  /* ink-900 */
.mant-app-desc  { font-size: 14px; color: #4A4A4A; line-height: 1.5; }  /* ink-700 */
.mant-app-bullets {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 13px;
    color: #4A4A4A;
}
.mant-app-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.45;
}
.mant-app-bullets li::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #F59E0B;  /* amber-500 */
    margin-top: 0.5rem;
}

/* ─── Mantenimiento acordeón (click-to-expand) ──────────────────── */
.mant-app-toggle {
    margin-top: auto;          /* empuja al fondo de la card (alinea todas) */
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: transparent;
    color: #B45309;            /* amber-700 — coincide con la card */
    border: 1px solid rgba(180, 83, 9, 0.25);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
    align-self: flex-start;
}
.mant-app-toggle:hover {
    background: rgba(180, 83, 9, 0.06);
    border-color: rgba(180, 83, 9, 0.45);
}
.mant-app-toggle:focus-visible {
    outline: 2px solid #B45309;
    outline-offset: 2px;
}
.mant-toggle-chevron {
    transition: transform 250ms cubic-bezier(.16, 1, .3, 1);
}

/* Estado abierto de la card */
.mant-app-card.is-open {
    border-color: rgba(180, 83, 9, 0.45);
    box-shadow: 0 12px 32px -8px rgba(180, 83, 9, 0.15);
    transform: translateY(-2px);
}
.mant-app-card.is-open::before { transform: scaleX(1); }
.mant-app-card.is-open .mant-app-toggle {
    background: #B45309;
    color: #fff;
    border-color: #B45309;
}

/* Panel expandido (entre el toggle y el borde inferior de la card) */
.mant-app-detail {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding-top: 0.875rem;
    margin-top: 0.625rem;
    border-top: 1px dashed rgba(180, 83, 9, 0.25);
}
.mant-app-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: #B45309;        /* amber-700 */
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 150ms ease, transform 150ms ease;
    align-self: stretch;        /* ancho completo dentro de la card */
}
.mant-app-cta:hover {
    background: #92400E;        /* amber-800 */
    color: #fff;
    transform: translateX(2px);
}
.mant-app-cta:focus-visible {
    outline: 2px solid #B45309;
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   WISHLIST — "¿Qué quieres automatizar?" (sección interactiva)
   Tabs + cards seleccionables + sticky bar de cotización.
   Acento: violeta (#6D28D9 / #8B5CF6) para diferenciarlo de marcas.
   ═══════════════════════════════════════════════════════════════════ */

.wish-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 6px 0 12px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 58, 237, 0.3) transparent;
}
.wish-tabs::-webkit-scrollbar { height: 4px; }
.wish-tabs::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.3); border-radius: 4px; }

.wish-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #E8E8E8;
    background: #FFFFFF;
    color: #4A4A4A;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
    flex-shrink: 0;
}
.wish-tab:hover {
    background: #F5F3FF;     /* violet-50 */
    color: #6D28D9;          /* violet-700 */
    border-color: #DDD6FE;   /* violet-200 */
}
.wish-tab.is-active {
    background: #6D28D9;      /* violet-700 */
    color: #FFFFFF;
    border-color: #6D28D9;
}
.wish-tab.is-active .wish-tab-icon { color: #FFFFFF; }
.wish-tab-icon {
    display: inline-flex;
    align-items: center;
    color: #6D28D9;          /* violet-700 en estado normal */
    transition: color 150ms ease;
}
.wish-tab:hover .wish-tab-icon { color: #6D28D9; }
.wish-tab:focus-visible {
    outline: 2px solid #6D28D9;
    outline-offset: 2px;
}

.wish-item-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    background: #FFFFFF;
    border: 1.5px solid #E8E8E8;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
    user-select: none;
    text-align: left;
}
.wish-item-card:hover {
    border-color: #A78BFA;    /* violet-400 */
    background: #FAFAFF;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -16px rgba(109, 40, 217, 0.35);
}
.wish-item-card.is-selected {
    border-color: #6D28D9;    /* violet-700 */
    background: #F5F3FF;       /* violet-50 */
    box-shadow: 0 10px 24px -16px rgba(109, 40, 217, 0.55);
}
.wish-item-card:focus-visible {
    outline: 2px solid #6D28D9;
    outline-offset: 2px;
}
.wish-item-title {
    font-size: 15px;
    font-weight: 700;
    color: #1A1A1A;
    line-height: 1.3;
    padding-right: 28px;     /* espacio para el check */
}
.wish-item-desc {
    font-size: 13px;
    color: #4A4A4A;
    line-height: 1.45;
}
.wish-item-check {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #6D28D9;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 180ms ease, transform 180ms ease;
}
.wish-item-card.is-selected .wish-item-check {
    opacity: 1;
    transform: scale(1);
}

/* Sticky bar inferior */
.wish-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid #E8E8E8;
    box-shadow: 0 -8px 24px -8px rgba(26, 26, 26, 0.10);
    /* Compensar para que no tape el footer: el body agrega padding-bottom dinámico en JS */
    animation: wish-sticky-in 250ms cubic-bezier(.16, 1, .3, 1);
}
@keyframes wish-sticky-in {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
/* Cuando la wishlist está activa, el body gana padding para no tapar el footer */
body:has(.wish-sticky-bar[style*="display: block"]) { padding-bottom: 80px; }
body:has(.wish-sticky-bar:not([style*="display: none"])) { padding-bottom: 80px; }
@media (max-width: 640px) {
    body:has(.wish-sticky-bar) { padding-bottom: 110px; }
}

/* ═══ CLIENT LOGOS · MARQUEE INFINITO ═════════════════════════════════
   Implementación CSS puro: el .logos-track se duplica en HTML y se anima
   con translateX(-50%) sobre el tiempo total del ciclo. Los duplicados
   llevan aria-hidden para no anunciar dos veces cada logo a screen readers.
   ═══════════════════════════════════════════════════════════════════════ */
.logos-marquee {
    --logo-height: 56px;
    --logo-min-width: 140px;
    --logo-gap: 1.25rem;
    --marquee-duration: 42s;

    margin-top: 3rem;
    overflow: hidden;
    position: relative;
    /* Fade en los extremos para que los logos entren/salgan suavemente */
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
}

.logos-track {
    display: flex;
    align-items: center;
    width: max-content;          /* crece con su contenido, no se encoge */
    animation: logos-scroll var(--marquee-duration) linear infinite;
    will-change: transform;
}

.logos-marquee:hover .logos-track,
.logos-marquee:focus-within .logos-track {
    animation-play-state: paused;  /* pausa al hover/focus para inspección */
}

.logo-item {
    flex: 0 0 auto;
    min-width: var(--logo-min-width);
    height: var(--logo-height);
    padding: 0 calc(var(--logo-gap) / 2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-item img {
    height: 100%;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.55);
    transition: filter 300ms ease, transform 300ms ease;
}

.logo-item:hover img,
.logo-item:focus-within img {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.06);
}

@keyframes logos-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Accesibilidad: respeta prefers-reduced-motion desactivando la animación
   y mostrando los logos como grid estático centrado para que sigan siendo
   inspeccionables. Los duplicados (aria-hidden="true") se ocultan. */
@media (prefers-reduced-motion: reduce) {
    .logos-marquee { overflow: visible; }
    .logos-track {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        animation: none;
        transform: none;
    }
    .logo-item[aria-hidden="true"] { display: none; }
}

/* ═══ HERO BENTO ═══════════════════════════════════════════════ */

/* Fondo del hero: grid de puntos sutil + glow lime radial */
.hero-bg-grid {
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0);
    background-size: 24px 24px;
}
.hero-bg-glow {
    background:
        radial-gradient(ellipse 60% 50% at 80% 0%,   rgba(152,192,64,0.18), transparent 60%),
        radial-gradient(ellipse 50% 40% at 20% 100%, rgba(123,160,48,0.12), transparent 60%);
}

/* ═══ FONDOS PROCEDURALES POR HUB DE SERVICIO ════════════════════════════
   Reemplazan la foto industrial.jpg compartida entre los 4 hubs.
   Cada variante define gradiente + patrón + glow único.
   El overlay oscuro (bg-ink-900/70 + gradiente lateral) se aplica
   encima en el HTML para mantener la legibilidad del texto.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Energía · foto real energy.png de fondo, atenuada ─── */
.hero-energy {
    /* Fondo fallback mientras carga la imagen (mismo tono que la imagen) */
    background:
        radial-gradient(circle 600px at 85% 25%, rgba(252, 211, 77, 0.18), transparent 65%),
        radial-gradient(circle 500px at 15% 75%, rgba(252, 211, 77, 0.10), transparent 70%),
        linear-gradient(135deg, #1c1306 0%, #2d1f08 50%, #1c1306 100%);
}

/* Foto real energy.png usada como fondo detrás del texto.
   Se posiciona cubriendo toda la sección. Se aplica un oscurecimiento
   moderado para que el texto blanco se lea, pero la imagen sigue siendo
   claramente visible como fondo (no queda totalmente tapada por el overlay). */
.hero-energy-img {
    z-index: 0;
    object-position: center 40%;
    /* Brillo natural: la foto se ve como fondo claro detrás del texto */
    filter: brightness(1.0) contrast(1.05) saturate(1.05);
}

/* Reduce-motion: respeta usuarios sensibles a movimiento */
@media (prefers-reduced-motion: reduce) {
    .hero-energy-img {
        transition: none;
    }
}

/* Móviles: la imagen completa, sin recortes agresivos */
@media (max-width: 640px) {
    .hero-energy-img {
        object-position: center 30%;
    }
}

/* ─── Automatización · circuito violeta con nodos y líneas PCB ─── */
.hero-auto {
    background:
        radial-gradient(circle 5px at 18% 25%, rgba(167, 139, 250, 0.30), transparent 100%),
        radial-gradient(circle 5px at 35% 55%, rgba(167, 139, 250, 0.25), transparent 100%),
        radial-gradient(circle 5px at 55% 35%, rgba(167, 139, 250, 0.20), transparent 100%),
        radial-gradient(circle 5px at 75% 65%, rgba(167, 139, 250, 0.28), transparent 100%),
        radial-gradient(circle 4px at 92% 18%, rgba(196, 181, 253, 0.22), transparent 100%),
        radial-gradient(circle 4px at 8% 88%,  rgba(196, 181, 253, 0.18), transparent 100%),
        repeating-linear-gradient(0deg,
            transparent 0, transparent 70px,
            rgba(167, 139, 250, 0.04) 70px, rgba(167, 139, 250, 0.04) 71px),
        repeating-linear-gradient(90deg,
            transparent 0, transparent 70px,
            rgba(139, 92, 246, 0.04) 70px, rgba(139, 92, 246, 0.04) 71px),
        radial-gradient(ellipse 60% 50% at 80% 25%, rgba(124, 58, 237, 0.30), transparent 60%),
        radial-gradient(ellipse 40% 40% at 10% 90%, rgba(91, 33, 182, 0.20), transparent 60%),
        linear-gradient(135deg, #0e0a1a 0%, #1a1230 50%, #0a0814 100%);
}

/* ─── Iluminación · conos de luz descendiendo del techo + ambient cálido ─── */
.hero-light {
    background:
        radial-gradient(ellipse 180px 65% at 22% -10%, rgba(255, 245, 200, 0.22), transparent 70%),
        radial-gradient(ellipse 180px 65% at 48% -10%, rgba(255, 220, 130, 0.18), transparent 70%),
        radial-gradient(ellipse 180px 65% at 78% -10%, rgba(255, 245, 200, 0.20), transparent 70%),
        radial-gradient(ellipse 90px 30% at 12% 30%,  rgba(252, 211, 77, 0.10), transparent 80%),
        radial-gradient(ellipse 90px 30% at 88% 70%,  rgba(252, 211, 77, 0.08), transparent 80%),
        radial-gradient(ellipse 50% 50% at 50% 75%,  rgba(252, 211, 77, 0.14), transparent 70%),
        linear-gradient(180deg, #2a2010 0%, #221a08 50%, #1f1a0a 100%);
}

/* ─── Mantenimiento · plano técnico con lime + slate industrial ─── */
.hero-maint {
    background:
        radial-gradient(circle 14px at 30% 60%, rgba(152, 192, 64, 0.10) 48%, transparent 50%),
        radial-gradient(circle 14px at 70% 35%, rgba(152, 192, 64, 0.08) 48%, transparent 50%),
        radial-gradient(circle 14px at 50% 85%, rgba(152, 192, 64, 0.06) 48%, transparent 50%),
        repeating-linear-gradient(45deg,
            transparent 0, transparent 50px,
            rgba(255,255,255,0.025) 50px, rgba(255,255,255,0.025) 51px),
        repeating-linear-gradient(-45deg,
            transparent 0, transparent 50px,
            rgba(255,255,255,0.018) 50px, rgba(255,255,255,0.018) 51px),
        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(152, 192, 64, 0.20), transparent 60%),
        radial-gradient(ellipse 40% 35% at 15% 90%, rgba(123, 160, 48, 0.14), transparent 60%),
        linear-gradient(135deg, #161a0e 0%, #1f2412 50%, #161a0e 100%);
}

/* Fotos del hero: el fundido blanco de origen se integra con la columna de texto. */
.hero-bg-carousel {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.hero-bg-carousel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        #fff 0%,
        rgba(255, 255, 255, 0.82) 18%,
        rgba(255, 255, 255, 0) 58%
    );
}
.hero-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% center;
    opacity: 0;
    transform: scale(1.045);
    transition:
        opacity 1400ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 9000ms ease-out;
}
.hero-bg-image.is-active {
    opacity: 0.75;
    transform: scale(1);
}
@media (max-width: 640px) {
    .hero-bento {
        display: flex;
        flex-direction: column;
    }
    .hero-bg-carousel {
        position: absolute;
        top: 43%;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
    }
    .hero-bg-image {
        object-fit: cover;
        object-position: 68% center;
        transform: scale(1.02);
    }
    .hero-bg-image.is-active {
        opacity: 0.38;
        transform: scale(1);
    }
    .hero-bg-carousel::before {
        background: linear-gradient(
            180deg,
            #fff 0%,
            rgba(255, 255, 255, 0.7) 18%,
            rgba(255, 255, 255, 0) 58%
        );
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-bg-image {
        transition: none;
        transform: none;
    }
}

/* ═══ PLACEHOLDERS PROCEDURALES PARA IMÁGENES DE CONTENIDO ═══════════════
   Reemplazan hotlinks externos (cloudinary/perplexity) por patrones CSS
   puros, escalables, sin dependencias de red. Cada placeholder conserva
   la paleta del hub correspondiente: azul para acceso, rose para alarmas,
   lime para CCTV.
   ═══════════════════════════════════════════════════════════════════ */

.ph-base {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
    overflow: hidden;
    isolation: isolate;
}

/* ─── ACCESO · paleta azul RFID/biometría ─────────────────────────────── */

/* Torniquetes: 3 franjas verticales + barra LED superior */
.ph-access-turnstile {
    background:
        linear-gradient(180deg, rgba(96, 165, 250, 0.18) 0%, transparent 12%),
        linear-gradient(90deg,
            transparent 0%, transparent 14%,
            rgba(96, 165, 250, 0.30) 14%, rgba(96, 165, 250, 0.30) 17%,
            transparent 17%, transparent 33%,
            rgba(96, 165, 250, 0.30) 33%, rgba(96, 165, 250, 0.30) 36%,
            transparent 36%, transparent 52%,
            rgba(96, 165, 250, 0.30) 52%, rgba(96, 165, 250, 0.30) 55%,
            transparent 55%, transparent 71%,
            rgba(96, 165, 250, 0.30) 71%, rgba(96, 165, 250, 0.30) 74%,
            transparent 74%, transparent 90%,
            rgba(96, 165, 250, 0.30) 90%, rgba(96, 165, 250, 0.30) 93%,
            transparent 93%),
        radial-gradient(circle 200px at 50% 30%, rgba(96, 165, 250, 0.18), transparent 70%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(15, 23, 42, 0.5), transparent 70%),
        linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

/* Biométrico: huella dactilar estilizada */
.ph-access-biometric {
    background:
        radial-gradient(circle 90px at 50% 50%, rgba(96, 165, 250, 0.22), transparent 75%),
        repeating-radial-gradient(circle at 50% 50%,
            transparent 0, transparent 8px,
            rgba(96, 165, 250, 0.18) 8px, rgba(96, 165, 250, 0.18) 9px),
        radial-gradient(ellipse 80px 100px at 50% 50%, rgba(30, 41, 59, 0.4), transparent 70%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(15, 23, 42, 0.4), transparent 70%),
        linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

/* Lectores de tarjeta: silueta de tarjeta con chip RFID */
.ph-access-readers {
    background:
        linear-gradient(135deg, transparent 30%, rgba(96, 165, 250, 0.22) 30%, rgba(96, 165, 250, 0.22) 70%, transparent 70%),
        linear-gradient(90deg, transparent 0%, transparent 25%, rgba(96, 165, 250, 0.35) 25%, rgba(96, 165, 250, 0.35) 32%, transparent 32%, transparent 45%, rgba(96, 165, 250, 0.18) 45%, rgba(96, 165, 250, 0.18) 55%, transparent 55%),
        radial-gradient(circle 120px at 70% 60%, rgba(96, 165, 250, 0.20), transparent 70%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(15, 23, 42, 0.5), transparent 70%),
        linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

/* Lobby corporativo: silueta de puerta con persona al fondo */
.ph-access-lobby {
    background:
        linear-gradient(180deg, transparent 0%, transparent 18%, rgba(96, 165, 250, 0.25) 18%, rgba(96, 165, 250, 0.25) 75%, transparent 75%),
        linear-gradient(90deg, transparent 0%, transparent 25%, rgba(96, 165, 250, 0.30) 25%, rgba(96, 165, 250, 0.30) 75%, transparent 75%),
        radial-gradient(circle 60px at 50% 38%, rgba(96, 165, 250, 0.25), transparent 70%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, transparent 30%),
        linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

/* ─── ALARMAS · paleta rosa/rojo detección ───────────────────────────── */

/* Panel de alarma: display LED rojo + carcasa rectangular */
.ph-alarm-panel {
    background:
        linear-gradient(180deg, transparent 0%, transparent 30%, rgba(244, 63, 94, 0.30) 30%, rgba(244, 63, 94, 0.30) 65%, transparent 65%),
        linear-gradient(90deg,
            transparent 0%, transparent 35%,
            rgba(244, 63, 94, 0.45) 35%, rgba(244, 63, 94, 0.45) 65%,
            transparent 65%),
        radial-gradient(circle 180px at 50% 50%, rgba(244, 63, 94, 0.18), transparent 70%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(15, 23, 42, 0.5), transparent 70%),
        linear-gradient(135deg, #1c1318 0%, #2d1f24 100%);
}

/* Instalación de alarma: sensor PIR con haz de detección cónico */
.ph-alarm-install {
    background:
        radial-gradient(ellipse 220px 180px at 50% 20%, rgba(244, 63, 94, 0.25), transparent 70%),
        linear-gradient(180deg, transparent 0%, transparent 8%, rgba(244, 63, 94, 0.30) 8%, rgba(244, 63, 94, 0.30) 14%, transparent 14%),
        repeating-linear-gradient(45deg,
            transparent 0, transparent 14px,
            rgba(244, 63, 94, 0.05) 14px, rgba(244, 63, 94, 0.05) 15px),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(15, 23, 42, 0.5), transparent 70%),
        linear-gradient(135deg, #1c1318 0%, #2d1f24 100%);
}

/* Detección industrial: ondas concéntricas desde un punto */
.ph-alarm-industrial {
    background:
        radial-gradient(circle 40px at 50% 50%, rgba(244, 63, 94, 0.35), transparent 75%),
        radial-gradient(circle 80px at 50% 50%, rgba(244, 63, 94, 0.22), transparent 75%),
        radial-gradient(circle 130px at 50% 50%, rgba(244, 63, 94, 0.15), transparent 75%),
        radial-gradient(circle 200px at 50% 50%, rgba(244, 63, 94, 0.10), transparent 75%),
        radial-gradient(circle 280px at 50% 50%, rgba(244, 63, 94, 0.06), transparent 75%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(15, 23, 42, 0.5), transparent 70%),
        linear-gradient(135deg, #1c1318 0%, #2d1f24 100%);
}

/* Protección STI: caja con patrón hexagonal de ventilación */
.ph-alarm-cover {
    background:
        repeating-linear-gradient(60deg,
            transparent 0, transparent 30px,
            rgba(244, 63, 94, 0.10) 30px, rgba(244, 63, 94, 0.10) 60px),
        repeating-linear-gradient(-60deg,
            transparent 0, transparent 30px,
            rgba(244, 63, 94, 0.08) 30px, rgba(244, 63, 94, 0.08) 60px),
        linear-gradient(135deg, transparent 0%, transparent 30%, rgba(244, 63, 94, 0.20) 30%, rgba(244, 63, 94, 0.20) 70%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(15, 23, 42, 0.5), transparent 70%),
        linear-gradient(135deg, #1c1318 0%, #2d1f24 100%);
}

/* ─── CCTV · paleta lime/24-7 videovigilancia ─────────────────────────── */

/* Cámara principal: lente circular con halo infrarrojo */
.ph-cctv-main {
    background:
        radial-gradient(circle 80px at 50% 50%, rgba(152, 192, 64, 0.10), transparent 70%),
        radial-gradient(circle 50px at 50% 50%, rgba(152, 192, 64, 0.18), transparent 70%),
        radial-gradient(circle 24px at 50% 50%, rgba(20, 20, 20, 0.85), transparent 70%),
        radial-gradient(circle 8px at 50% 50%, rgba(152, 192, 64, 0.55), transparent 70%),
        repeating-linear-gradient(0deg,
            transparent 0, transparent 50px,
            rgba(152, 192, 64, 0.05) 50px, rgba(152, 192, 64, 0.05) 51px),
        repeating-linear-gradient(90deg,
            transparent 0, transparent 50px,
            rgba(152, 192, 64, 0.04) 50px, rgba(152, 192, 64, 0.04) 51px),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(15, 23, 42, 0.5), transparent 70%),
        linear-gradient(135deg, #0e1310 0%, #1a2014 100%);
}

/* Sala profesional: grid 2x2 de pantallas */
.ph-cctv-room {
    background:
        linear-gradient(90deg, transparent 0%, transparent 48%, rgba(152, 192, 64, 0.05) 48%, rgba(152, 192, 64, 0.05) 52%, transparent 52%),
        linear-gradient(180deg, transparent 0%, transparent 48%, rgba(152, 192, 64, 0.05) 48%, rgba(152, 192, 64, 0.05) 52%, transparent 52%),
        linear-gradient(90deg, transparent 0%, transparent 20%, rgba(152, 192, 64, 0.20) 20%, rgba(152, 192, 64, 0.20) 45%, transparent 45%, transparent 55%, rgba(152, 192, 64, 0.20) 55%, rgba(152, 192, 64, 0.20) 80%, transparent 80%),
        linear-gradient(180deg, transparent 0%, transparent 20%, rgba(152, 192, 64, 0.18) 20%, rgba(152, 192, 64, 0.18) 45%, transparent 45%, transparent 55%, rgba(152, 192, 64, 0.18) 55%, rgba(152, 192, 64, 0.18) 80%, transparent 80%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(15, 23, 42, 0.5), transparent 70%),
        linear-gradient(135deg, #0e1310 0%, #1a2014 100%);
}

/* CCTV industrial: cámara bullet con silueta cilíndrica */
.ph-cctv-industrial {
    background:
        linear-gradient(180deg, transparent 0%, transparent 30%, rgba(152, 192, 64, 0.18) 30%, rgba(152, 192, 64, 0.18) 32%, transparent 32%),
        linear-gradient(135deg, transparent 0%, transparent 30%, rgba(152, 192, 64, 0.30) 30%, rgba(152, 192, 64, 0.30) 55%, transparent 55%),
        linear-gradient(180deg, transparent 0%, transparent 30%, rgba(20, 20, 20, 0.85) 30%, rgba(20, 20, 20, 0.85) 60%, transparent 60%),
        radial-gradient(circle 16px at 35% 45%, rgba(152, 192, 64, 0.55), transparent 70%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(15, 23, 42, 0.5), transparent 70%),
        linear-gradient(135deg, #0e1310 0%, #1a2014 100%);
}

/* Instalación CCTV: cámara con cableado PoE descendente */
.ph-cctv-install {
    background:
        linear-gradient(180deg, rgba(152, 192, 64, 0.30) 0%, transparent 8%),
        linear-gradient(90deg, transparent 47%, rgba(152, 192, 64, 0.25) 47%, rgba(152, 192, 64, 0.25) 53%, transparent 53%),
        radial-gradient(circle 60px at 50% 25%, rgba(152, 192, 64, 0.18), transparent 70%),
        repeating-linear-gradient(180deg,
            transparent 0, transparent 18px,
            rgba(152, 192, 64, 0.08) 18px, rgba(152, 192, 64, 0.08) 20px),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(15, 23, 42, 0.5), transparent 70%),
        linear-gradient(135deg, #0e1310 0%, #1a2014 100%);
}

/* Centro de monitoreo: terminal con líneas de waveform */
.ph-cctv-control {
    background:
        repeating-linear-gradient(90deg,
            transparent 0, transparent 28px,
            rgba(152, 192, 64, 0.10) 28px, rgba(152, 192, 64, 0.10) 29px),
        linear-gradient(180deg, transparent 50%, rgba(152, 192, 64, 0.30) 50%, rgba(152, 192, 64, 0.30) 54%, transparent 54%),
        linear-gradient(180deg, transparent 65%, rgba(152, 192, 64, 0.20) 65%, rgba(152, 192, 64, 0.20) 67%, transparent 67%),
        linear-gradient(180deg, transparent 80%, rgba(152, 192, 64, 0.15) 80%, rgba(152, 192, 64, 0.15) 82%, transparent 82%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(15, 23, 42, 0.5), transparent 70%),
        linear-gradient(135deg, #0e1310 0%, #1a2014 100%);
}

/* Las fotos ya tienen un fundido blanco a la izquierda; este lo prolonga suavemente. */
.hero-bg-overlay {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(255, 255, 255, 0.94) 31%,
        rgba(255, 255, 255, 0.76) 47%,
        rgba(255, 255, 255, 0.24) 64%,
        transparent 78%
    );
    z-index: 1;
}
@media (max-width: 640px) {
    .hero-bento > .relative {
        width: 100%;
        padding-top: clamp(3rem, 11vw, 4rem);
        padding-bottom: 1.5rem;
    }
    .hero-bg-overlay {
        display: none;
    }
}
.hero-bg-grid,
.hero-bg-glow {
    z-index: 2;
}
.hero-bento > .relative {
    position: relative;
    z-index: 3;
}

/* Eyebrow del hero */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    background: rgba(152,192,64,0.08);            /* lime-500 / 8% */
    border: 1px solid rgba(152,192,64,0.25);       /* lime-500 / 25% */
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    color: #5F7E26;                                /* lime-700: contraste sobre blanco */
    letter-spacing: 0.02em;
}
.hero-eyebrow .dot-pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: #5F7E26;
    box-shadow: 0 0 0 0 rgba(152,192,64,0.6);
    animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(152,192,64,0.6); }
    50%      { box-shadow: 0 0 0 6px rgba(152,192,64,0); }
}

/* H1 del hero */
.hero-h1 {
    margin-top: 1.5rem;
    font-size: clamp(2rem, 5vw, 3.75rem);     /* 32px → 60px */
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #1A1A1A;
}
.hero-h1 .accent {
    color: #5F7E26;                            /* lime-700: contraste sobre blanco */
    position: relative;
}

/* Override: cuando el hero tiene fondo oscuro (bg-ink-900 / bg-ink-950),
   el h1 debe ser blanco para mantener contraste WCAG-AA.
   Esta regla tiene mayor especificidad (.bg-ink-900 .hero-h1) que
   .hero-h1 simple, por lo que gana sin necesidad de !important. */
.bg-ink-900 .hero-h1,
.bg-ink-950 .hero-h1,
section[class*="bg-ink"] .hero-h1 {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Subtítulo */
.hero-subtitle {
    margin-top: 1.25rem;
    margin-left: 0;
    margin-right: 0;
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.6;
    color: #4B5563;
    max-width: 32rem;
    text-align: left;
}

/* Override: subtítulo blanco sobre fondos oscuros */
.bg-ink-900 .hero-subtitle,
.bg-ink-950 .hero-subtitle,
section[class*="bg-ink"] .hero-subtitle {
    color: rgba(255, 255, 255, 0.85);
}

/* CTAs */
.hero-ctas {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.hero-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: transparent;
    color: #1A1A1A;
    border: 1px solid rgba(26,26,26,0.24);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 150ms ease, border-color 150ms ease;
}
.hero-cta-secondary:hover {
    background: rgba(26,26,26,0.05);
    border-color: rgba(26,26,26,0.42);
}

/* Override: CTA secundario blanco/borde claro sobre fondos oscuros */
.bg-ink-900 .hero-cta-secondary,
.bg-ink-950 .hero-cta-secondary,
section[class*="bg-ink"] .hero-cta-secondary {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.30);
}
.bg-ink-900 .hero-cta-secondary:hover,
.bg-ink-950 .hero-cta-secondary:hover,
section[class*="bg-ink"] .hero-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.50);
}

/* Stats */
.hero-stats {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 28rem;
}
.hero-stats > div { min-width: 0; }
.hero-stats dt {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    color: #5F7E26;                            /* lime-700: contraste sobre blanco */
    line-height: 1;
}
.hero-stats dd {
    margin-top: 0.375rem;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5B6470;
}
@media (max-width: 640px) {
    .hero-eyebrow {
        padding: 0.3rem 0.7rem;
        font-size: 11px;
    }
    .hero-h1 {
        margin-top: 1rem;
        font-size: clamp(1.9rem, 8vw, 2.5rem);
        line-height: 1.08;
    }
    .hero-subtitle {
        margin-top: 0.9rem;
        max-width: 34rem;
        font-size: 1rem;
        line-height: 1.55;
    }
    .hero-ctas {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
        margin-top: 1.4rem;
    }
    .hero-ctas > a {
        justify-content: center;
        min-width: 0;
        padding-right: 0.65rem;
        padding-left: 0.65rem;
        text-align: center;
    }
    .hero-ctas .cta-primary {
        background: rgba(152, 192, 64, 0.9);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .hero-ctas .hero-cta-secondary {
        background: rgba(255, 255, 255, 0.78);
        border-color: rgba(26, 26, 26, 0.2);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .hero-stats {
        gap: 0.75rem;
        margin-top: 2rem;
        max-width: none;
    }
    .hero-stats dt {
        font-size: clamp(1.25rem, 7vw, 1.75rem);
    }
    .hero-stats dd {
        font-size: 9px;
        letter-spacing: 0.04em;
    }
}
@media (max-width: 380px) {
    .hero-ctas {
        grid-template-columns: 1fr;
    }
}

/* ─── Bento grid ─────────────────────────────────────────────────── */
.bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .bento-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

/* Card base */
.bento-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    min-height: 210px;
    background: rgba(255,255,255,0.04);          /* white / 4% */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.08);     /* white / 8% */
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition:
        background 200ms ease,
        border-color 200ms ease,
        transform 250ms cubic-bezier(.16,1,.3,1),
        box-shadow 250ms ease;
    /* Entrada con stagger */
    opacity: 0;
    transform: translateY(12px);
}
.bento-card.is-mounted {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 500ms ease,
        transform 500ms cubic-bezier(.16,1,.3,1),
        background 200ms ease,
        border-color 200ms ease,
        box-shadow 250ms ease;
}
.bento-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(152,192,64,0.45);          /* lime-500 / 45% */
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -10px rgba(152,192,64,0.18);
}
.bento-card:focus-visible {
    outline: 2px solid #98C040;
    outline-offset: 3px;
}
@media (min-width: 1024px) {
    .bento-card { min-height: 220px; }
}

/* Tag tipo "badge" arriba */
.bento-tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0.25rem 0.5rem;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #98C040;                                /* lime-500 */
    background: rgba(152,192,64,0.10);
    border: 1px solid rgba(152,192,64,0.25);
    border-radius: 4px;
}

/* Contenido textual */
.bento-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    order: 1;            /* tag (0) → head → visual (2) */
}
.bento-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    color: #98C040;                                /* lime-500 */
    background: rgba(152,192,64,0.10);
    border-radius: 8px;
    flex-shrink: 0;
    transition: background 200ms ease, transform 200ms ease;
}
.bento-card:hover .bento-icon {
    background: rgba(152,192,64,0.20);
    transform: scale(1.05);
}
.bento-title {
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.005em;
}

/* ─── Micro-visuales por servicio ─────────────────────────────── */

/* Contenedor común: visual al fondo del card, full-width */
[class*="bento-visual--"] {
    order: 2;
    margin-top: auto;
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    position: relative;
}
@media (min-width: 1024px) {
    [class*="bento-visual--"] { height: 80px; }
}
[class*="bento-visual--"] svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* CCTV: scan line en un mini grid 2x2 */
.bento-visual--cctv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    opacity: 0.65;
}
.bento-visual--cctv .feed {
    background: linear-gradient(135deg, rgba(152,192,64,0.20), rgba(152,192,64,0.05));
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}
.bento-visual--cctv .feed::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(152,192,64,0.4) 50%, transparent 100%);
    height: 10px;
    animation: scan-line 3s linear infinite;
}
.bento-visual--cctv .feed:nth-child(2)::after { animation-delay: 0.6s; }
.bento-visual--cctv .feed:nth-child(3)::after { animation-delay: 1.2s; }
.bento-visual--cctv .feed:nth-child(4)::after { animation-delay: 1.8s; }
@keyframes scan-line {
    0%   { transform: translateY(-12px); }
    100% { transform: translateY(48px); }
}

/* CCTV: indicador REC + corner brackets (viewfinder) */
.bento-visual--cctv .rec-indicator {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 4px 1px 3px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 2px;
    z-index: 3;
    pointer-events: none;
    line-height: 1;
}
.bento-visual--cctv .rec-text {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #F87171;
    line-height: 1;
}
.bento-visual--cctv .rec-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #EF4444;
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.75);
    animation: rec-blink 1.2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes rec-blink {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%      { opacity: 0.25; transform: scale(0.8); }
}

/* CCTV: corner brackets (esquina tipo visor de cámara) */
.bento-visual--cctv .corner {
    position: absolute;
    width: 8px;
    height: 8px;
    border-style: solid;
    border-color: rgba(152, 192, 64, 0.85);
    border-width: 0;
    pointer-events: none;
    z-index: 2;
}
.bento-visual--cctv .corner.tl { top: 0;    left: 0;    border-width: 1.5px 0 0 1.5px; }
.bento-visual--cctv .corner.tr { top: 0;    right: 0;   border-width: 1.5px 1.5px 0 0; }
.bento-visual--cctv .corner.bl { bottom: 0; left: 0;    border-width: 0 0 1.5px 1.5px; }
.bento-visual--cctv .corner.br { bottom: 0; right: 0;   border-width: 0 1.5px 1.5px 0; }

/* Alarmas: panel numérico con LED rojo + ondas de transmisión */
.bento-visual--alarmas {
    /* overrides del contenedor común: panel horizontal más ancho */
    width: 100%;
    max-width: 140px;
}
/* LED rojo: parpadeo tipo sirena (ciclo on/off cada 0.6s) */
.bento-visual--alarmas .alarm-led {
    transform-box: fill-box;
    transform-origin: center;
    animation: alarm-led-blink 1.2s steps(2, end) infinite;
}
@keyframes alarm-led-blink {
    0%, 49%   { opacity: 1;   transform: scale(1);   }
    50%, 100% { opacity: 0.15; transform: scale(0.7); }
}
/* Display: alterna entre 3 estados (00 → 42 → 88 en rojo → reset) */
.bento-visual--alarmas .alarm-disp { opacity: 0; }
.bento-visual--alarmas .d1 { animation: alarm-disp-1 4.5s steps(1, end) infinite; }
.bento-visual--alarmas .d2 { animation: alarm-disp-2 4.5s steps(1, end) infinite; }
.bento-visual--alarmas .d3 { animation: alarm-disp-3 4.5s steps(1, end) infinite; }
@keyframes alarm-disp-1 {
    0%, 33%   { opacity: 1; }
    34%, 100% { opacity: 0; }
}
@keyframes alarm-disp-2 {
    0%, 33%   { opacity: 0; }
    34%, 66%  { opacity: 1; }
    67%, 100% { opacity: 0; }
}
@keyframes alarm-disp-3 {
    0%, 66%   { opacity: 0; }
    67%, 99%  { opacity: 1; }
    100%      { opacity: 0; }
}
/* Ondas de transmisión: pulsan hacia afuera en cascada */
.bento-visual--alarmas .tx-wave {
    transform-box: fill-box;
    transform-origin: 28px 16px;
    opacity: 0;
}
.bento-visual--alarmas .w1 { animation: tx-pulse 1.8s ease-out infinite;         }
.bento-visual--alarmas .w2 { animation: tx-pulse 1.8s ease-out infinite; -0.6s   }
.bento-visual--alarmas .w3 { animation: tx-pulse 1.8s ease-out infinite; -1.2s   }
@keyframes tx-pulse {
    0%   { opacity: 0;   transform: scale(0.6); }
    25%  { opacity: 0.9;                          }
    100% { opacity: 0;   transform: scale(1.15); }
}

/* Redes: 3 nodos conectados con un dot que recorre la línea */
.bento-visual--redes {
    width: 100%;
    max-width: 180px;
    opacity: 0.85;
}
.bento-visual--redes .data-line {
    stroke: rgba(152,192,64,0.35);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    animation: data-dash 1.2s linear infinite;
}
.bento-visual--redes .data-packet {
    fill: #fff;
    animation: data-packet 2.4s ease-in-out infinite;
}
@keyframes data-dash {
    to { stroke-dashoffset: -12; }
}
@keyframes data-packet {
    0%   { transform: translateX(0px);   opacity: 0; }
    15%  {                              opacity: 1; }
    85%  {                              opacity: 1; }
    100% { transform: translateX(120px); opacity: 0; }
}

/* Voz/datos: switch con 6 puertos RJ45 + VU meter de tráfico */
.bento-visual--voz {
    width: 100%;
    max-width: 180px;
    opacity: 0.95;
}
/* LEDs de link: brillo verde sutil */
.bento-visual--voz .port-led {
    filter: drop-shadow(0 0 0.8px rgba(152, 192, 64, 0.6));
}
/* LEDs de actividad ámbar: parpadeo tipo tráfico de red (delays en cascada) */
.bento-visual--voz .port-act {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0.25;
}
.bento-visual--voz .port-act:nth-child(7)  { animation: port-traffic 1.8s ease-in-out infinite;          }
.bento-visual--voz .port-act:nth-child(8)  { animation: port-traffic 1.8s ease-in-out infinite; -0.30s  }
.bento-visual--voz .port-act:nth-child(9)  { animation: port-traffic 1.8s ease-in-out infinite; -0.60s  }
.bento-visual--voz .port-act:nth-child(10) { animation: port-traffic 1.8s ease-in-out infinite; -0.90s  }
.bento-visual--voz .port-act:nth-child(11) { animation: port-traffic 1.8s ease-in-out infinite; -1.20s  }
.bento-visual--voz .port-act:nth-child(12) { animation: port-traffic 1.8s ease-in-out infinite; -1.50s  }
@keyframes port-traffic {
    0%, 100% { opacity: 0.15; }
    20%      { opacity: 1;    }
    40%      { opacity: 0.3;  }
    60%      { opacity: 0.9;  }
    80%      { opacity: 0.2;  }
}
/* LED power: pulso suave */
.bento-visual--voz .sw-power {
    transform-box: fill-box;
    transform-origin: center;
    filter: drop-shadow(0 0 1.2px rgba(152, 192, 64, 0.7));
    animation: sw-power-pulse 2s ease-in-out infinite;
}
@keyframes sw-power-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1);   }
    50%      { opacity: 1;   transform: scale(1.15);}
}
/* VU meter: cada barra sube y baja con delays distintos (efecto medidor de tráfico) */
.bento-visual--voz .tm-bar {
    transform-box: fill-box;
    transform-origin: bottom center;
}
.bento-visual--voz .tm-bar:nth-child(1)  { animation: vu-meter 1.4s ease-in-out infinite;          }
.bento-visual--voz .tm-bar:nth-child(2)  { animation: vu-meter 1.4s ease-in-out infinite; -0.15s   }
.bento-visual--voz .tm-bar:nth-child(3)  { animation: vu-meter 1.4s ease-in-out infinite; -0.30s   }
.bento-visual--voz .tm-bar:nth-child(4)  { animation: vu-meter 1.4s ease-in-out infinite; -0.45s   }
.bento-visual--voz .tm-bar:nth-child(5)  { animation: vu-meter 1.4s ease-in-out infinite; -0.60s   }
.bento-visual--voz .tm-bar:nth-child(6)  { animation: vu-meter 1.4s ease-in-out infinite; -0.75s   }
.bento-visual--voz .tm-bar:nth-child(7)  { animation: vu-meter 1.4s ease-in-out infinite; -0.90s   }
.bento-visual--voz .tm-bar:nth-child(8)  { animation: vu-meter 1.4s ease-in-out infinite; -1.05s   }
.bento-visual--voz .tm-bar:nth-child(9)  { animation: vu-meter 1.4s ease-in-out infinite; -1.20s   }
@keyframes vu-meter {
    0%, 100% { transform: scaleY(0.3); opacity: 0.4; }
    25%      { transform: scaleY(1.8); opacity: 1;   }
    50%      { transform: scaleY(0.6); opacity: 0.6; }
    75%      { transform: scaleY(2.2); opacity: 1;   }
}

/* WiFi: 3 arcos con fade secuencial */
.bento-visual--wifi {
    width: 64px;
    height: 64px;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
}
.bento-visual--wifi .wifi-arc {
    width: 4px;
    background: #98C040;
    border-radius: 2px;
    animation: wifi-arc 1.6s ease-in-out infinite;
    opacity: 0.5;
    transform-origin: bottom center;
}
.bento-visual--wifi .wifi-arc:nth-child(1) { height: 25%; animation-delay: 0s; }
.bento-visual--wifi .wifi-arc:nth-child(2) { height: 55%; animation-delay: 0.20s; }
.bento-visual--wifi .wifi-arc:nth-child(3) { height: 85%; animation-delay: 0.40s; }
@keyframes wifi-arc {
    0%, 100% { opacity: 0.3; transform: scaleY(0.7); }
    50%      { opacity: 1;   transform: scaleY(1.1); }
}

/* Energía: generador compacto con humo animado */
.bento-visual--energia {
    width: 72px;
    height: 72px;
}
.bento-visual--energia svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
/* Humo: 3 puffs que suben desde la chimenea y se desvanecen */
.bento-visual--energia .smoke {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
}
.bento-visual--energia .s1 { animation: gen-smoke 2.4s ease-out infinite;          }
.bento-visual--energia .s2 { animation: gen-smoke 2.4s ease-out infinite; -0.8s    }
.bento-visual--energia .s3 { animation: gen-smoke 2.4s ease-out infinite; -1.6s    }
@keyframes gen-smoke {
    0%   { transform: translate(0, 0)   scale(0.6); opacity: 0;   }
    20%  {                                                  opacity: 0.7; }
    100% { transform: translate(2px, -10px) scale(1.6); opacity: 0;   }
}
/* LED ámbar del panel: pulso suave */
.bento-visual--energia .gen-led {
    transform-box: fill-box;
    transform-origin: center;
    animation: gen-led-pulse 1.4s ease-in-out infinite;
}
@keyframes gen-led-pulse {
    0%, 100% { opacity: 0.55; transform: scale(1);   }
    50%      { opacity: 1;    transform: scale(1.3); }
}

/* Control de acceso: candado con LED de estado (rojo → verde) */
.bento-visual--acceso {
    width: 64px;
    height: 64px;
}
.bento-visual--acceso svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
/* LED rojo: brilla cuando "está bloqueado" (~2s) */
.bento-visual--acceso .led-red {
    transform-box: fill-box;
    transform-origin: center;
    animation: lock-red 3s ease-in-out infinite;
}
@keyframes lock-red {
    0%, 70%, 100% { opacity: 1;   transform: scale(1);    }
    80%, 95%      { opacity: 0.2; transform: scale(0.7);  }
}
/* LED verde: brilla cuando "se autoriza" (~1s) */
.bento-visual--acceso .led-green {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: lock-green 3s ease-in-out infinite;
}
@keyframes lock-green {
    0%, 70%   { opacity: 0;   transform: scale(0.7); }
    80%, 95%  { opacity: 1;   transform: scale(1.3); }
    100%      { opacity: 0;   transform: scale(0.7); }
}
/* Keyhole: se ilumina sincronizado con el LED verde */
.bento-visual--acceso .keyhole {
    transform-box: fill-box;
    transform-origin: center;
    animation: lock-keyhole 3s ease-in-out infinite;
}
@keyframes lock-keyhole {
    0%, 70%   { fill: #EF4444; }
    80%, 95%  { fill: #98C040; }
    100%      { fill: #EF4444; }
}

/* Automatización: hub central con dispositivos wireless pulsando */
.bento-visual--automatizacion {
    width: 80px;
    height: 80px;
}
.bento-visual--automatizacion svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
/* Ondas inalámbricas emanando del hub */
.bento-visual--automatizacion .hub-wave {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: hub-wave-out 2.6s ease-out infinite;
}
.bento-visual--automatizacion .hub-wave.w2 { animation-delay: 1.3s; }
@keyframes hub-wave-out {
    0%        { opacity: 0;    transform: scale(0.55); }
    25%       { opacity: 0.7;                          }
    100%      { opacity: 0;    transform: scale(1.35); }
}
/* Display del hub: respira suavemente */
.bento-visual--automatizacion .hub-display {
    animation: hub-display 3s ease-in-out infinite;
}
@keyframes hub-display {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1;    }
}
/* Touch dots en cascada */
.bento-visual--automatizacion .hub-touch {
    transform-box: fill-box;
    transform-origin: center;
    animation: hub-touch 1.8s ease-in-out infinite;
}
.bento-visual--automatizacion .hub-touch:nth-child(odd)  { animation-delay: 0s;    }
.bento-visual--automatizacion .hub-touch:nth-child(even) { animation-delay: 0.9s;  }
@keyframes hub-touch {
    0%, 100% { opacity: 0.45; transform: scale(0.9); }
    50%      { opacity: 1;    transform: scale(1.25); }
}
/* Barras de progreso UI parpadean */
.bento-visual--automatizacion .hub-bar {
    animation: hub-bar 2.4s ease-in-out infinite;
}
.bento-visual--automatizacion .hub-bar:nth-of-type(2) { animation-delay: 0.5s; }
@keyframes hub-bar {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.85; }
}
/* Líneas de señal: pulso de opacidad */
.bento-visual--automatizacion .signal-line {
    animation: signal-line 1.6s ease-in-out infinite;
}
.bento-visual--automatizacion .signal-line:nth-of-type(2) { animation-delay: 0.8s; }
@keyframes signal-line {
    0%, 100% { opacity: 0.30; }
    50%      { opacity: 0.85; }
}
/* Dispositivos: bombilla y cerradura reciben señal */
.bento-visual--automatizacion .device-light,
.bento-visual--automatizacion .device-lock {
    transform-box: fill-box;
    transform-origin: center;
    animation: device-activate 2.6s ease-in-out infinite;
}
.bento-visual--automatizacion .device-lock { animation-delay: 1.3s; }
@keyframes device-activate {
    0%, 30%, 100% { opacity: 0.5; transform: scale(0.9); }
    45%, 75%      { opacity: 1;   transform: scale(1.1); }
}

/* Reduced motion: desactiva animaciones del bento */
@media (prefers-reduced-motion: reduce) {
    .bento-card,
    .bento-card.is-mounted,
    .bento-visual--cctv .feed::after,
    .bento-visual--cctv .rec-dot,
    .bento-visual--alarmas .alarm-led,
    .bento-visual--alarmas .alarm-disp,
    .bento-visual--alarmas .tx-wave,
    .bento-visual--redes .data-dot,
    .bento-visual--voz .port-act,
    .bento-visual--voz .sw-power,
    .bento-visual--voz .tm-bar,
    .bento-visual--wifi .wifi-arc,
    .bento-visual--energia .smoke,
    .bento-visual--energia .gen-led,
    .bento-visual--acceso .led-red,
    .bento-visual--acceso .led-green,
    .bento-visual--acceso .keyhole,
    .bento-visual--automatizacion .hub-wave,
    .bento-visual--automatizacion .hub-display,
    .bento-visual--automatizacion .hub-touch,
    .bento-visual--automatizacion .hub-bar,
    .bento-visual--automatizacion .signal-line,
    .bento-visual--automatizacion .device-light,
    .bento-visual--automatizacion .device-lock,
    .hero-eyebrow .dot-pulse {
        animation: none !important;
    }
    .bento-card { opacity: 1; transform: none; }
}

/* ═══ ACCESSIBILITY ═══════════════════════════════════════════════ */

/* Focus visible global */
:focus-visible {
    outline: 2px solid #5F7E26;  /* lime-700 — AA sobre blanco */
    outline-offset: 2px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   SERVICE DETAIL PAGES
   Estilos para páginas como /cctv.php, /alarmas.php, /acceso.php
   Estructura: hero + N secciones largas + closing CTA
   ═══════════════════════════════════════════════════════════════════ */

/* Hub (página menú como seguridad-electronica.php) */
.svc-hub { /* hero dark con bg-grid + bg-glow reutilizados del hero bento */ }

/* Section wrapper */
.svc-section {
    padding: 4rem 0;
    background: #fff; /* warm-DEFAULT base */
}
.svc-section--alt   { background: #F8F8F0; }   /* warm-100 */
.svc-section--ink   { background: #1A1A1A; color: #fff; }   /* ink-900 */
@media (min-width: 1024px) {
    .svc-section { padding: 6rem 0; }
}

/* Eyebrow + heading + lede */
.svc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background: rgba(152,192,64,0.10);
    color: #5F7E26;                                /* lime-700 */
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}
.svc-section--ink .svc-eyebrow {
    background: rgba(152,192,64,0.15);
    color: #B5D670;                                /* lime-300 */
}
.svc-h2 {
    font-size: 2rem;                               /* 32px */
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #1A1A1A;
    margin-bottom: 1rem;
}
.svc-section--ink .svc-h2 { color: #fff; }
@media (min-width: 1024px) {
    .svc-h2 { font-size: 2.75rem; }                /* 44px */
}
.svc-lede {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #4A4A4A;                                /* ink-700 */
    max-width: 60ch;
}
.svc-section--ink .svc-lede { color: rgba(255,255,255,0.75); }

/* Bullet list (problems, features, etc.) */
.svc-bullets {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
}
@media (min-width: 768px) { .svc-bullets { grid-template-columns: 1fr 1fr; gap: 0.75rem 1.5rem; } }
.svc-bullet {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    color: #2A2A2A;                                /* ink-800 */
    font-size: 0.9375rem;
    line-height: 1.5;
}
.svc-section--ink .svc-bullet { color: rgba(255,255,255,0.85); }
.svc-bullet::before {
    content: '';
    flex-shrink: 0;
    width: 18px; height: 18px;
    margin-top: 2px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398C040' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}

/* Stat cards (cifras destacadas) */
.svc-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
@media (min-width: 640px) { .svc-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .svc-stats { grid-template-columns: repeat(3, 1fr); } }
.svc-stat {
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid rgba(26,26,26,0.08);
    border-radius: 12px;
    border-left: 3px solid #98C040;
}
.svc-section--ink .svc-stat {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}
.svc-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1A1A1A;
    line-height: 1;
    letter-spacing: -0.02em;
}
.svc-section--ink .svc-stat-value { color: #fff; }
.svc-stat-value strong { color: #5F7E26; }
.svc-section--ink .svc-stat-value strong { color: #B5D670; }
.svc-stat-label {
    font-size: 0.8125rem;
    color: #4A4A4A;
    margin-top: 0.375rem;
}
.svc-section--ink .svc-stat-label { color: rgba(255,255,255,0.65); }

/* Sectors grid (cards) */
.svc-sectors {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 2rem;
}
@media (min-width: 640px) { .svc-sectors { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .svc-sectors { grid-template-columns: repeat(3, 1fr); } }
.svc-sector {
    padding: 1.5rem;
    background: #fff;
    border: 1px solid rgba(26,26,26,0.08);
    border-radius: 12px;
    transition: all 200ms ease;
}
.svc-sector:hover {
    border-color: rgba(152,192,64,0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -8px rgba(26,26,26,0.10);
}
.svc-sector-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 10px;
    background: rgba(152,192,64,0.10);
    color: #5F7E26;
    margin-bottom: 1rem;
}
.svc-sector-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #1A1A1A;
    margin-bottom: 0.5rem;
}
.svc-sector-text {
    font-size: 0.875rem;
    color: #4A4A4A;
    line-height: 1.55;
}

/* Methodology: numbered steps */
.svc-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 2.5rem;
    counter-reset: step;
}
@media (min-width: 768px)  { .svc-steps { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1280px) { .svc-steps { grid-template-columns: repeat(3, 1fr); } }
.svc-step {
    position: relative;
    padding: 1.5rem 1.5rem 1.5rem 4rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    counter-increment: step;
}
.svc-step::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    top: 1.5rem; left: 1.5rem;
    width: 2rem; height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #98C040;
    color: #1A1A1A;
    font-weight: 700;
    font-size: 0.8125rem;
    border-radius: 8px;
}
.svc-step-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5rem;
    margin-left: -2.5rem;
    padding-left: 2.5rem;
}
.svc-step-text {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.55;
}

/* Architecture diagram (flow: vertical en mobile, horizontal en lg) */
.svc-arch {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    max-width: 32rem;
    margin: 2rem auto 0;
}
.svc-arch-node {
    position: relative;
    padding: 1rem 1.5rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(152,192,64,0.3);
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    text-align: center;
    font-size: 0.9375rem;
}
.svc-arch-node strong { color: #B5D670; font-weight: 600; }
.svc-arch-node:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -0.875rem; left: 50%;
    transform: translateX(-50%);
    width: 2px; height: 0.75rem;
    background: linear-gradient(to bottom, #98C040, transparent);
}
@media (min-width: 1024px) {
    .svc-arch {
        flex-direction: row;
        align-items: stretch;
        max-width: 80rem;
        gap: 0;
    }
    .svc-arch-node {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 0.875rem;
        padding: 1.25rem 0.75rem;
    }
    .svc-arch-node:not(:last-child)::after {
        content: '→';
        top: 50%; right: -0.875rem; bottom: auto; left: auto;
        transform: translateY(-50%);
        width: 1.75rem; height: 1.75rem;
        background: #98C040;
        color: #1A1A1A;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        font-weight: 700;
        line-height: 1;
    }
}

/* Case studies */
.svc-cases {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 2rem;
}
@media (min-width: 768px) { .svc-cases { grid-template-columns: repeat(3, 1fr); } }
.svc-case {
    padding: 1.5rem;
    background: #fff;
    border: 1px solid rgba(26,26,26,0.08);
    border-radius: 12px;
}
.svc-section--ink .svc-case {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}
.svc-case-tag {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    background: rgba(152,192,64,0.10);
    color: #5F7E26;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
}
.svc-case-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #1A1A1A;
    margin-bottom: 0.625rem;
    line-height: 1.3;
}
.svc-section--ink .svc-case-title { color: #fff; }
.svc-case-text {
    font-size: 0.875rem;
    color: #4A4A4A;
    line-height: 1.55;
}
.svc-section--ink .svc-case-text { color: rgba(255,255,255,0.7); }

/* Diferenciadores (checklist) */
.svc-dif {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
    margin-top: 1.5rem;
}
@media (min-width: 768px) { .svc-dif { grid-template-columns: 1fr 1fr; gap: 0.875rem 2rem; } }
.svc-dif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: #2A2A2A;
    font-size: 0.9375rem;
    line-height: 1.5;
}
.svc-section--ink .svc-dif-item { color: rgba(255,255,255,0.85); }
.svc-dif-icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(152,192,64,0.10);
    color: #5F7E26;
    border-radius: 8px;
}
.svc-section--ink .svc-dif-icon {
    background: rgba(152,192,64,0.15);
    color: #B5D670;
}

/* Closing CTA band */
.svc-cta-band {
    position: relative;
    overflow: hidden;
    background: #1A1A1A;
    color: #fff;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    margin: 2rem 0;
}
.svc-cta-band .hero-bg-glow { opacity: 0.5; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .site-header { transition: none; }
    .seal-accent { animation: none; }
    .svc-sector, .svc-step, .svc-sector:hover { transform: none !important; }
}

/* ═══ RESPONSIVE TWEAKS ═══════════════════════════════════════════ */
@media (max-width: 1023px) {
    .mega-menu { width: min(95vw, 720px) !important; }
}

@media (max-width: 768px) {
    .site-header[data-state="top"] { background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); }
}

/* ═══ MOTION BOOTSTRAP ═══════════════════════════════════ */
/* Estado inicial: elementos con data-anim están ocultos hasta que
   Motion (cargado por motion-bootstrap.js) tome el control.
   La clase `js` se agrega en <head> para que la regla aplique
   antes de que se rendericen los elementos. */
html.js [data-anim] {
    opacity: 0;
}
html.js [data-anim="reveal-block"] > *,
html.js [data-anim="stagger-up"] > *,
html.js [data-anim="stagger-scale"] > * {
    opacity: 0;
}

/* Respetar prefers-reduced-motion: mostrar todo inmediatamente */
@media (prefers-reduced-motion: reduce) {
    html.js [data-anim],
    html.js [data-anim] > * {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Si Motion no cargó (CDN caído, ad-block) o no terminó de init
   en 1.5s, mostrar todo estáticamente para que la página sea usable. */
html.js.motion-fallback [data-anim],
html.js.motion-fallback [data-anim] > * {
    opacity: 1 !important;
    transform: none !important;
}

/* ═══ MOBILE BENTO OVERRIDES ═════════════════════════════════════
   En mobile (<640px), los bento-cards del hero se compactan a
   logo + nombre en una grilla 2×3. Se ocultan: el tag (badge), el
   visual decorativo y la descripción. Solo quedan icono + título.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
    .bento-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }
    .bento-card {
        min-height: 72px !important;
        padding: 0.625rem 0.75rem !important;
        gap: 0 !important;
        justify-content: flex-start;
        align-items: center;
    }
    .bento-card .bento-tag,
    .bento-card .bento-visual--cctv,
    .bento-card .bento-visual--alarmas,
    .bento-card .bento-visual--redes,
    .bento-card .bento-visual--voz,
    .bento-card .bento-visual--wifi,
    .bento-card .bento-visual--energia,
    .bento-card .bento-visual--acceso {
        display: none !important;
    }
    .bento-card .bento-icon {
        width: 32px;
        height: 32px;
        border-radius: 7px;
    }
    .bento-card .bento-title {
        font-size: 13px;
        line-height: 1.15;
        letter-spacing: -0.005em;
    }
    .bento-card .bento-head {
        gap: 0.5rem !important;
    }
}

/* ═══ PRINT ═══════════════════════════════════════════════════════ */
@media print {
    .site-header, .scroll-progress, .mobile-overlay { display: none !important; }
    .header-spacer { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Utilidades jms-ui (compartidas con admin)
   ─────────────────────────────────────────────────────────────────
   Clases pensadas para funcionar tanto en el frontend público (light)
   como en el admin (dark mode). El admin define una variante más en
   admin/assets/css/admin.css con `html.dark .x` para invertir los
   colores cuando <html class="dark"> está activo.
   ═══════════════════════════════════════════════════════════════════ */

/* Encabezado de tabla con contraste alto (light mode base) */
.jms-th {
    background-color: #F3F4F6 !important;
    color: #1F2937 !important;
    border-bottom: 2px solid #D1D5DB !important;
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Marco de logo: caja elevada blanca para que cualquier logo (claro
   u oscuro) destaque sobre cualquier fondo. El admin.css refuerza el
   blanco en dark mode con !important. */
.jms-logo-frame {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem !important;
    background-color: #FFFFFF !important;
    border: 2px solid #E5E7EB !important;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    transition: border-color 150ms ease, box-shadow 150ms ease;
    text-decoration: none !important;
    color: inherit !important;
    min-width: 6rem;
    min-height: 3.5rem;
}
.jms-logo-frame:hover {
    border-color: #98C040 !important;
    box-shadow: 0 6px 14px rgba(0,0,0,0.14);
}
.jms-logo-frame img {
    max-height: 2.5rem;
    max-width: 9rem;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Header de sección con acento lima y buen contraste */
.jms-section-title {
    font-size: 0.875rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1F2937 !important;
    margin-bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}
.jms-section-title::before {
    content: "";
    display: inline-block;
    width: 2.25rem;
    height: 3px;
    background: linear-gradient(90deg, #98C040 0%, rgba(152,192,64,0.25) 100%);
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   SERVICES BOT — círculo estilo bot en header + FAB móvil
   Reemplaza al antiguo botón "Services" (cta-primary--outline).
   El círculo usa gradiente lime corporativo y un anillo que pulsa
   cada ~2.5s para sugerir "bot activo". Un tooltip aparece al
   hacer hover/focus para que la metáfora de bot sea accesible
   (mismo label que tenía el botón de texto original: cta_services).
   ═══════════════════════════════════════════════════════════════ */

.services-bot {
    position: relative;
    isolation: isolate;            /* crea nuevo stacking context para el pulse */
    will-change: transform;        /* hint al browser para suavizar scale */
}

.services-bot-fab {
    isolation: isolate;
    will-change: transform;
}

/* Anillo pulsante: se posiciona absolutamente detrás del ícono,
   hereda el rounded-full del padre y se expande/desvanece en loop.
   Importante: NO usa animate-pulse de Tailwind porque queremos un
   "ripple" que crece hacia afuera, no un fade genérico. */
.services-bot .bot-pulse,
.services-bot-fab .bot-pulse {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.55);  /* blanco semi-transparente: destaca sobre verde lime */
    opacity: 0.7;
    z-index: 0;
    animation: bot-pulse 2.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    pointer-events: none;
}

/* El botón "respira" muy sutilmente (escala 1 → 1.02) para
   reforzar la sensación de actividad del bot. Combinado con el
   ripple se obtiene una metáfora clara sin distraer. */
.services-bot .bot-pulse,
.services-bot-fab .bot-pulse {
    animation:
        bot-pulse 2.5s cubic-bezier(0.22, 1, 0.36, 1) infinite,
        bot-breathe 4s ease-in-out infinite;
}

/* En hover/focus pausamos el pulso y breathing para que el botón
   se sienta "atendido": el usuario le está hablando al bot. */
.services-bot:hover .bot-pulse,
.services-bot:focus-visible .bot-pulse,
.services-bot-fab:hover .bot-pulse,
.services-bot-fab:focus-visible .bot-pulse {
    animation-play-state: paused;
}

/* Ícono: ligero brillo al hover para reforzar feedback. */
.services-bot svg,
.services-bot-fab svg {
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
                filter 300ms ease;
}

.services-bot:hover svg,
.services-bot-fab:hover svg {
    transform: rotate(-8deg) scale(1.05);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55));
}

/* Tooltip: aparece sobre el círculo en hover/focus-visible.
   En el FAB el tooltip se coloca a la IZQUIERDA del círculo porque
   el botón está anclado al borde derecho de la pantalla. */
.bot-tooltip {
    position: absolute;
    top: 50%;
    right: calc(100% + 0.6rem);
    transform: translateY(-50%) translateX(4px);
    padding: 0.375rem 0.625rem;
    background: #0F172A;            /* ink-900 */
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 0.375rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
    z-index: 1;
}

/* Pequeña flecha del tooltip (lado derecho, hacia el círculo). */
.bot-tooltip::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -4px;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: #0F172A;
}

.services-bot:hover .bot-tooltip,
.services-bot:focus-visible .bot-tooltip,
.services-bot-fab:hover .bot-tooltip,
.services-bot-fab:focus-visible .bot-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Imagen interior del FAB (Services.png):
   · object-contain: la imagen trae bastante padding transparente,
     por eso NO usamos object-cover (la recortaría).
   · Al hover, ligera escala para reforzar feedback sin opacar el
     pulso del anillo. */
.bot-image {
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
                filter 300ms ease;
    will-change: transform;
}

.services-bot:hover .bot-image,
.services-bot-fab:hover .bot-image {
    transform: scale(1.08);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55));
}

/* Accesibilidad: usuarios con reduced-motion ven el círculo estático
   y sin pulso, conservando el tooltip en hover. */
@media (prefers-reduced-motion: reduce) {
    .services-bot .bot-pulse,
    .services-bot-fab .bot-pulse {
        animation: none;
        opacity: 0;
    }
    .services-bot:hover svg,
    .services-bot-fab:hover svg {
        transform: none;
        filter: none;
    }
}

/* Cuando el círculo está anclado al borde IZQUIERDO de la pantalla
   (caso del FAB global actual), el tooltip debe salir hacia la
   DERECHA del círculo para no quedar fuera del viewport.
   La flecha del tooltip se reposiciona en el lado izquierdo. */
.bot-tooltip--left {
    top: 50%;
    right: auto;
    left: calc(100% + 0.6rem);
    transform: translateY(-50%) translateX(-4px);
}

.bot-tooltip--left::after {
    right: auto;
    left: -4px;
}

.services-bot:hover .bot-tooltip--left,
.services-bot:focus-visible .bot-tooltip--left,
.services-bot-fab:hover .bot-tooltip--left,
.services-bot-fab:focus-visible .bot-tooltip--left {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ═══════════════════════════════════════════════════════════════
   Keyframes del services-bot
   ═══════════════════════════════════════════════════════════════ */

@keyframes bot-pulse {
    0%   { transform: scale(1);    opacity: 0.55; }
    70%  { transform: scale(1.45); opacity: 0;    }
    100% { transform: scale(1.45); opacity: 0;    }
}

@keyframes bot-breathe {
    0%, 100% { transform: scale(1);    }
    50%      { transform: scale(1.02); }
}

/* ═══════════════════════════════════════════════════════════════
   BENTO CARD V2 — Diseño premium con SVG integrado
   Paleta: ink-950/900 + lime-500/200 (verde neón)
   Animaciones: glow, hover lift, pulso, micro-movement
   ═══════════════════════════════════════════════════════════════ */

/* Grid responsive */
.bcv2-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 44rem;          /* 704px en mobile (2 columnas amplias) */
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 768px) {
    .bcv2-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        max-width: 56rem;      /* 896px — 3 columnas holgadas */
    }
}
@media (min-width: 1024px) {
    .bcv2-grid {
        max-width: 52rem;      /* 832px — balance desktop */
    }
}

/* ─── Tarjeta base ─── */
.bcv2-card {
    --bcv2-border: rgba(255, 255, 255, 0.08);
    --bcv2-glow:   rgba(152, 192, 64, 0.0);

    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.85rem 0.9rem 1rem;
    background: linear-gradient(155deg, #0A0A0A 0%, #151515 100%);
    border: 1px solid var(--bcv2-border);
    border-radius: 0.85rem;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 280ms ease,
        box-shadow 280ms ease;
    opacity: 0;
    transform: translateY(14px) scale(0.97);
    animation: bcv2-mount 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--bcv2-i, 0) * 80ms + 120ms);
}

.bcv2-card::before {
    /* Glow halo detrás del SVG — aparece en hover */
    content: "";
    position: absolute;
    inset: -1px;
    background: radial-gradient(
        120% 80% at 50% 35%,
        rgba(152, 192, 64, 0.16) 0%,
        rgba(152, 192, 64, 0)    60%
    );
    opacity: 0;
    transition: opacity 320ms ease;
    z-index: -1;
    pointer-events: none;
}

.bcv2-card:hover {
    --bcv2-border: rgba(152, 192, 64, 0.55);
    transform: translateY(-4px) scale(1.015);
    box-shadow:
        0 18px 32px -16px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(152, 192, 64, 0.35),
        0 0 28px -6px rgba(152, 192, 64, 0.30);
}
.bcv2-card:hover::before {
    opacity: 1;
}

.bcv2-card:focus-visible {
    outline: 2px solid #CFE5A0;
    outline-offset: 2px;
}

/* ─── Tag (píldora superior izquierda) ─── */
.bcv2-tag {
    align-self: flex-start;
    padding: 0.22rem 0.65rem;
    background: rgba(152, 192, 64, 0.12);
    border: 1px solid rgba(152, 192, 64, 0.30);
    color: #CFE5A0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.7rem;                          /* ~11px → comparable a hero-eyebrow (12px) */
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    border-radius: 999px;
    line-height: 1;
    transition:
        background 280ms ease,
        border-color 280ms ease,
        color 280ms ease;
}
.bcv2-card:hover .bcv2-tag {
    background: rgba(152, 192, 64, 0.20);
    border-color: rgba(152, 192, 64, 0.55);
    color: #E8F4C9;
}

/* ─── Status dot (indicador vivo) ─── */
.bcv2-status {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #98C040;
    box-shadow: 0 0 12px rgba(152, 192, 64, 0.85);
    animation: bcv2-status-pulse 2.4s ease-in-out infinite;
}

/* ─── SVG contenedor ─── */
.bcv2-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 165px;         /* más espacio para apreciar animaciones */
    margin: 0.65rem 0 0;
    border-radius: 0.55rem;
    overflow: hidden;
}

.bcv2-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;                          /* SVG units: a 165/140≈1.18 → ~13px real */
    font-weight: 700;
    fill: #F5F5F5;
    letter-spacing: 0.01em;
    paint-order: stroke fill;
}

/* ─── Descripción ─── */
.bcv2-desc {
    margin: 0.6rem 0 0;
    color: #C8C8C8;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.875rem;                       /* 14px → comparable a hero-cta-secondary */
    line-height: 1.45;
    letter-spacing: 0.005em;
    transition: color 280ms ease;
}
.bcv2-card:hover .bcv2-desc {
    color: #C8C8C8;
}

/* ─── Mount animation ─── */
@keyframes bcv2-mount {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ─── Status dot pulse ─── */
@keyframes bcv2-status-pulse {
    0%, 100% { opacity: 1;    transform: scale(1);    }
    50%      { opacity: 0.55; transform: scale(0.85); }
}

/* ═══════════════════════════════════════════════════════════════
   ANIMACIONES ESPECÍFICAS POR ARTE (v2)
   ═══════════════════════════════════════════════════════════════ */

/* ─── ENERGÍA ─── */
@keyframes bcv2-energy-ring {
    0%   { transform: scale(0.7); opacity: 0.7; }
    100% { transform: scale(1.5); opacity: 0;   }
}
.bcv2-energy-ring {
    transform-origin: 100px 44px;
    transform-box: fill-box;
}
.bcv2-energy-ring.r1 { animation: bcv2-energy-ring 2.8s ease-out infinite; }
.bcv2-energy-ring.r2 { animation: bcv2-energy-ring 2.8s ease-out infinite 1.4s; }

@keyframes bcv2-bolt-pulse {
    0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 4px rgba(207, 229, 160, 0.5)); }
    50%      { transform: scale(1.08); filter: drop-shadow(0 0 12px rgba(207, 229, 160, 0.95)); }
}
.bcv2-bolt {
    transform-origin: 100px 44px;
    transform-box: fill-box;
    animation: bcv2-bolt-pulse 2.2s ease-in-out infinite;
}

@keyframes bcv2-spark-blink {
    0%, 100% { opacity: 0.2; }
    50%      { opacity: 1;   }
}
.bcv2-spark { animation: bcv2-spark-blink 1.6s ease-in-out infinite; }
.bcv2-spark.s2 { animation-delay: 0.4s; }
.bcv2-spark.s3 { animation-delay: 0.8s; }
.bcv2-spark.s4 { animation-delay: 1.2s; }

@keyframes bcv2-bar-fill {
    0%, 100% { transform: scaleY(0.4); }
    50%      { transform: scaleY(1);   }
}
.bcv2-bar {
    transform-origin: center bottom;
    transform-box: fill-box;
    animation: bcv2-bar-fill 1.4s ease-in-out infinite;
}
.bcv2-bar.b2 { animation-delay: 0.10s; }
.bcv2-bar.b3 { animation-delay: 0.20s; }
.bcv2-bar.b4 { animation-delay: 0.30s; }
.bcv2-bar.b5 { animation-delay: 0.40s; }
.bcv2-bar.b6 { animation-delay: 0.50s; }
.bcv2-bar.b7 { animation-delay: 0.60s; }
.bcv2-bar.b8 { animation-delay: 0.70s; }

/* ─── AUTOMATIZACIÓN ─── */
@keyframes bcv2-hub-wave-out {
    0%   { transform: scale(0.5); opacity: 0.7; }
    100% { transform: scale(1.6); opacity: 0;   }
}
.bcv2-hub-wave {
    transform-origin: 100px 44px;
    transform-box: fill-box;
}
.bcv2-hub-wave.w1 { animation: bcv2-hub-wave-out 2.6s ease-out infinite;        }
.bcv2-hub-wave.w2 { animation: bcv2-hub-wave-out 2.6s ease-out infinite 1.3s;    }

@keyframes bcv2-display-flicker {
    0%, 92%, 100% { opacity: 1; }
    94%           { opacity: 0.6; }
    96%           { opacity: 0.9; }
}
.bcv2-display { animation: bcv2-display-flicker 5s ease-in-out infinite; }

@keyframes bcv2-touch-blink {
    0%, 80%, 100% { opacity: 1;   }
    40%           { opacity: 0.3; }
}
.bcv2-touch.t1 { animation: bcv2-touch-blink 2.0s ease-in-out infinite;        }
.bcv2-touch.t2 { animation: bcv2-touch-blink 2.0s ease-in-out infinite 0.5s;    }
.bcv2-touch.t3 { animation: bcv2-touch-blink 2.0s ease-in-out infinite 1.0s;    }
.bcv2-touch.t4 { animation: bcv2-touch-blink 2.0s ease-in-out infinite 1.5s;    }

@keyframes bcv2-ui-bar-shift {
    0%, 100% { transform: translateX(0);    opacity: 0.65; }
    50%      { transform: translateX(2px); opacity: 0.85; }
}
.bcv2-ui-bar { animation: bcv2-ui-bar-shift 3.2s ease-in-out infinite; }

/* ─── CCTV ─── */
@keyframes bcv2-scan-line {
    0%   { transform: translateY(0);  opacity: 0.85; }
    50%  { opacity: 0.55; }
    100% { transform: translateY(56px); opacity: 0.85; }
}
.bcv2-scan {
    animation: bcv2-scan-line 3.4s ease-in-out infinite;
    transform-box: fill-box;
}

@keyframes bcv2-rec-blink {
    0%, 49%, 100% { opacity: 1;   }
    50%, 99%      { opacity: 0.2; }
}
.bcv2-rec-dot { animation: bcv2-rec-blink 1.2s steps(2, end) infinite; }

@keyframes bcv2-feed-breathe {
    0%, 100% { opacity: 0.08; }
    50%      { opacity: 0.14; }
}
.bcv2-feed.f1 { animation: bcv2-feed-breathe 4.0s ease-in-out infinite;        }
.bcv2-feed.f2 { animation: bcv2-feed-breathe 4.0s ease-in-out infinite 1.0s;    }
.bcv2-feed.f3 { animation: bcv2-feed-breathe 4.0s ease-in-out infinite 2.0s;    }
.bcv2-feed.f4 { animation: bcv2-feed-breathe 4.0s ease-in-out infinite 3.0s;    }

/* ─── ALARMAS ─── */
@keyframes bcv2-tx-wave {
    0%   { opacity: 0;   transform: translateX(-4px); }
    50%  { opacity: 0.7; }
    100% { opacity: 0;   transform: translateX(4px);  }
}
.bcv2-tx-wave {
    transform-box: fill-box;
    transform-origin: center;
}
.bcv2-tx-wave.w1 { animation: bcv2-tx-wave 1.8s ease-in-out infinite;        }
.bcv2-tx-wave.w2 { animation: bcv2-tx-wave 1.8s ease-in-out infinite 0.3s;    }
.bcv2-tx-wave.w3 { animation: bcv2-tx-wave 1.8s ease-in-out infinite 0.6s;    }

@keyframes bcv2-alarm-led-pulse {
    0%, 100% { opacity: 1;   filter: drop-shadow(0 0 3px rgba(239, 68, 68, 0.9)); }
    50%      { opacity: 0.4; filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.4)); }
}
.bcv2-alarm-led { animation: bcv2-alarm-led-pulse 1.0s ease-in-out infinite; }

@keyframes bcv2-alarm-disp-cycle {
    0%, 30%   { opacity: 1; }
    31%, 65%  { opacity: 0; }
    66%, 100% { opacity: 0; }
}
@keyframes bcv2-alarm-disp-cycle-2 {
    0%, 30%   { opacity: 0; }
    31%, 65%  { opacity: 1; }
    66%, 100% { opacity: 0; }
}
@keyframes bcv2-alarm-disp-cycle-3 {
    0%, 30%   { opacity: 0; }
    31%, 65%  { opacity: 0; }
    66%, 100% { opacity: 1; }
}
.bcv2-alarm-disp.d1 { animation: bcv2-alarm-disp-cycle   3.6s steps(1, end) infinite; }
.bcv2-alarm-disp.d2 { animation: bcv2-alarm-disp-cycle-2 3.6s steps(1, end) infinite; }
.bcv2-alarm-disp.d3 { animation: bcv2-alarm-disp-cycle-3 3.6s steps(1, end) infinite; }

@keyframes bcv2-alarm-aura {
    0%, 100% { transform: scale(0.95); opacity: 0.10; }
    50%      { transform: scale(1.10); opacity: 0.22; }
}
.bcv2-alarm-aura {
    transform-origin: 100px 44px;
    transform-box: fill-box;
    animation: bcv2-alarm-aura 2.0s ease-in-out infinite;
}

/* ─── CONTROL DE ACCESO ─── */
@keyframes bcv2-rfid-wave {
    0%   { opacity: 0;    transform: translateX(6px); }
    50%  { opacity: 0.85; }
    100% { opacity: 0;    transform: translateX(-6px); }
}
.bcv2-rfid-wave {
    transform-box: fill-box;
}
.bcv2-rfid-wave.w1 { animation: bcv2-rfid-wave 1.8s ease-in-out infinite;        }
.bcv2-rfid-wave.w2 { animation: bcv2-rfid-wave 1.8s ease-in-out infinite 0.3s;    }
.bcv2-rfid-wave.w3 { animation: bcv2-rfid-wave 1.8s ease-in-out infinite 0.6s;    }

@keyframes bcv2-keyhole-unlock {
    0%, 70%   { fill: #EF4444; }
    71%, 100% { fill: #98C040; }
}
.bcv2-keyhole     { animation: bcv2-keyhole-unlock 3.2s steps(1, end) infinite; }
.bcv2-keyhole-slot{ animation: bcv2-keyhole-unlock 3.2s steps(1, end) infinite; }

@keyframes bcv2-status-led-cycle {
    0%, 70%   { opacity: 1; }
    71%, 100% { opacity: 0; }
}
@keyframes bcv2-status-led-cycle-g {
    0%, 70%   { opacity: 0; }
    71%, 100% { opacity: 1; }
}
.bcv2-status-led.led-red  { animation: bcv2-status-led-cycle   3.2s steps(1, end) infinite; }
.bcv2-status-led.led-green{ animation: bcv2-status-led-cycle-g 3.2s steps(1, end) infinite; }

/* ─── VOZ Y DATOS ─── */
@keyframes bcv2-act-led-blink {
    0%, 80%, 100% { opacity: 1;   }
    40%           { opacity: 0.2; }
}
.bcv2-act-led.a1 { animation: bcv2-act-led-blink 0.8s ease-in-out infinite;        }
.bcv2-act-led.a2 { animation: bcv2-act-led-blink 0.8s ease-in-out infinite 0.13s;   }
.bcv2-act-led.a3 { animation: bcv2-act-led-blink 0.8s ease-in-out infinite 0.26s;   }
.bcv2-act-led.a4 { animation: bcv2-act-led-blink 0.8s ease-in-out infinite 0.39s;   }
.bcv2-act-led.a5 { animation: bcv2-act-led-blink 0.8s ease-in-out infinite 0.52s;   }
.bcv2-act-led.a6 { animation: bcv2-act-led-blink 0.8s ease-in-out infinite 0.65s;   }

@keyframes bcv2-power-led {
    0%, 100% { opacity: 1;   filter: drop-shadow(0 0 3px rgba(152, 192, 64, 0.9)); }
    50%      { opacity: 0.6; filter: drop-shadow(0 0 6px rgba(152, 192, 64, 0.5)); }
}
.bcv2-power-led { animation: bcv2-power-led 2.0s ease-in-out infinite; }

@keyframes bcv2-vu-flow {
    0%, 100% { opacity: 0.35; transform: scaleY(0.5); }
    50%      { opacity: 1;    transform: scaleY(1.2); }
}
.bcv2-vu {
    transform-origin: center bottom;
    transform-box: fill-box;
    animation: bcv2-vu-flow 1.4s ease-in-out infinite;
}
.bcv2-vu.v2  { animation-delay: 0.10s; }
.bcv2-vu.v3  { animation-delay: 0.20s; }
.bcv2-vu.v4  { animation-delay: 0.30s; }
.bcv2-vu.v5  { animation-delay: 0.40s; }
.bcv2-vu.v6  { animation-delay: 0.50s; }
.bcv2-vu.v7  { animation-delay: 0.60s; }
.bcv2-vu.v8  { animation-delay: 0.70s; }
.bcv2-vu.v9  { animation-delay: 0.80s; }
.bcv2-vu.v10 { animation-delay: 0.90s; }
.bcv2-vu.v11 { animation-delay: 1.00s; }
.bcv2-vu.v12 { animation-delay: 1.10s; }

/* ═══════════════════════════════════════════════════════════════
   Reduced-motion: pausa todas las animaciones v2
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .bcv2-card,
    .bcv2-card *,
    .bcv2-card *::before,
    .bcv2-card *::after {
        animation: none !important;
        transition: none !important;
    }
    .bcv2-card {
        opacity: 1;
        transform: none;
    }
    .bcv2-energy-ring,
    .bcv2-hub-wave,
    .bcv2-tx-wave,
    .bcv2-rfid-wave,
    .bcv2-bolt,
    .bcv2-bolt-aura,
    .bcv2-alarm-aura,
    .bcv2-alarm-led,
    .bcv2-rec-dot,
    .bcv2-power-led,
    .bcv2-status-led.led-red,
    .bcv2-status-led.led-green,
    .bcv2-keyhole,
    .bcv2-keyhole-slot {
        opacity: 1;
        transform: none;
    }
    .bcv2-alarm-disp.d2,
    .bcv2-alarm-disp.d3 {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SERVICIOS — "Soluciones que entregamos" (v3 premium)
   Sistema: Engineering Surfaces · JM Services
   ═══════════════════════════════════════════════════════════════ */

/* ── Eyebrow tipo placa industrial ──────────────────── */
.svc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lime-700, #5F7E26);
}
.svc-eyebrow__slash {
    color: var(--lime-500, #98C040);
    font-weight: 700;
}
.svc-eyebrow__count {
    color: var(--ink-400, #A0A0A0);
    letter-spacing: 0.1em;
}

/* ── Status inline con pulso ────────────────────────── */
.svc-cta {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.8125rem;
    color: var(--ink-700, #4A4A4A);
}
.svc-cta__more {
    color: var(--lime-700, #5F7E26);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.svc-pulse {
    position: relative;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--lime-500, #98C040);
    border-radius: 9999px;
}
.svc-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--lime-500, #98C040);
    animation: svc-pulse-ring 2s ease-out infinite;
}
@keyframes svc-pulse-ring {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(3.5); opacity: 0;   }
}

/* ── Línea separadora de marca ──────────────────────── */
.svc-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(
        to right,
        var(--lime-500, #98C040) 0%,
        var(--lime-500, #98C040) 96px,
        var(--ink-200, #E8E8E8) 96px,
        var(--ink-200, #E8E8E8) 100%
    );
}
.svc-rule-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-500, #888888);
    padding-right: 0.5rem;
}

/* ── Card base ──────────────────────────────────────── */
.svc-card {
    --c-border: var(--ink-200, #E8E8E8);
    --c-fg: var(--ink-900, #1A1A1A);
    --c-accent: var(--ink-400, #A0A0A0);

    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem 1.5rem 1.25rem;
    background: var(--white, #ffffff);
    border: 1px solid var(--c-border);
    color: var(--c-fg);
    text-decoration: none;
    transition:
        border-color 220ms ease,
        transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 320ms ease;
    will-change: transform;
    isolation: isolate;
    border-radius: 4px;
}
.svc-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    height: 2px;
    width: 0;
    background: var(--lime-500, #98C040);
    transform: translateX(-50%);
    transition: width 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
    z-index: 1;
}

/* ── Esquinas tipo "marca de alineación" ────────────── */
.svc-card__corner {
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: var(--c-accent);
    border-style: solid;
    border-width: 0;
    transition: border-color 220ms ease;
    pointer-events: none;
}
.svc-card__corner--tl { top: 6px;    left: 6px;    border-top-width: 1px;    border-left-width: 1px; }
.svc-card__corner--tr { top: 6px;    right: 6px;   border-top-width: 1px;    border-right-width: 1px; }
.svc-card__corner--bl { bottom: 6px; left: 6px;    border-bottom-width: 1px; border-left-width: 1px; }
.svc-card__corner--br { bottom: 6px; right: 6px;   border-bottom-width: 1px; border-right-width: 1px; }

/* ── Header de card (numeración + tag) ──────────────── */
.svc-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--ink-500, #888888);
}
.svc-card__num {
    font-weight: 600;
    color: var(--ink-700, #4A4A4A);
}
.svc-card__tag {
    text-transform: uppercase;
    color: var(--ink-400, #A0A0A0);
}

/* ── Icono ──────────────────────────────────────────── */
.svc-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--warm-100, #F8F8F0);
    border: 1px solid var(--ink-200, #E8E8E8);
    color: var(--ink-900, #1A1A1A);
    transition:
        background-color 220ms ease,
        border-color 220ms ease,
        color 220ms ease;
    position: relative;
}
.svc-card__icon-svg {
    width: 30px;
    height: 30px;
    stroke-width: 1.5;
    transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ── Cuerpo ─────────────────────────────────────────── */
.svc-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}
.svc-card__title {
    font-size: 1.375rem; /* 22px */
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink-900, #1A1A1A);
}
.svc-card__desc {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.55;
    color: var(--ink-700, #4A4A4A);
}

/* ── Flecha CTA ─────────────────────────────────────── */
.svc-card__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    align-self: flex-start;
    background: transparent;
    border: 1px solid var(--ink-200, #E8E8E8);
    color: var(--ink-900, #1A1A1A);
    transition:
        background-color 220ms ease,
        border-color 220ms ease,
        color 220ms ease,
        transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.svc-card__arrow svg {
    width: 18px;
    height: 18px;
}

/* ── Hover state (Engineering Surfaces) ─────────────── */
.svc-card:hover,
.svc-card:focus-visible {
    --c-border: var(--ink-900, #1A1A1A);
    --c-accent: var(--lime-500, #98C040);
    transform: translateY(-3px);
    box-shadow:
        0 1px 0 var(--ink-900, #1A1A1A),
        0 14px 28px -16px rgba(15, 15, 15, 0.18);
    outline: none;
}
.svc-card:hover::before,
.svc-card:focus-visible::before { width: 56%; }

.svc-card:hover .svc-card__icon,
.svc-card:focus-visible .svc-card__icon {
    background: var(--ink-900, #1A1A1A);
    border-color: var(--ink-900, #1A1A1A);
    color: var(--lime-500, #98C040);
}
.svc-card:hover .svc-card__icon-svg,
.svc-card:focus-visible .svc-card__icon-svg {
    transform: scale(1.08) rotate(-3deg);
}
.svc-card:hover .svc-card__arrow,
.svc-card:focus-visible .svc-card__arrow {
    background: var(--lime-500, #98C040);
    border-color: var(--lime-500, #98C040);
    color: var(--ink-900, #1A1A1A);
    transform: translateX(2px);
}
.svc-card:hover .svc-card__num,
.svc-card:focus-visible .svc-card__num { color: var(--lime-700, #5F7E26); }

/* ── Stagger animation (respeta data-anim) ──────────── */
[data-anim="stagger-up"].is-in .svc-card {
    animation: svc-stagger-in 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
[data-anim="stagger-up"].is-in .svc-card:nth-child(1) { animation-delay:   0ms; }
[data-anim="stagger-up"].is-in .svc-card:nth-child(2) { animation-delay:  80ms; }
[data-anim="stagger-up"].is-in .svc-card:nth-child(3) { animation-delay: 160ms; }
[data-anim="stagger-up"].is-in .svc-card:nth-child(4) { animation-delay: 240ms; }
[data-anim="stagger-up"].is-in .svc-card:nth-child(5) { animation-delay: 320ms; }
[data-anim="stagger-up"].is-in .svc-card:nth-child(6) { animation-delay: 400ms; }

@keyframes svc-stagger-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .svc-card,
    .svc-card::before,
    .svc-card__icon,
    .svc-card__icon-svg,
    .svc-card__arrow,
    .svc-pulse::after,
    .svc-card__corner { transition: none !important; animation: none !important; }
    [data-anim="stagger-up"].is-in .svc-card { opacity: 1; transform: none; }
}

/* ── Cuadrícula técnica con fundido vertical ─────────── */
.svc-grid-fade {
    background-image:
        linear-gradient(to right, #1A1A1A 1px, transparent 1px),
        linear-gradient(to bottom, #1A1A1A 1px, transparent 1px);
    background-size: 64px 64px;
    /* Sólido arriba (donde están título y grid de cards),
       se desvanece hacia abajo para fundirse con el verde
       de la sección "Sectores que atendemos" */
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1)   0%,
        rgba(0,0,0,1)  35%,
        rgba(0,0,0,.55) 70%,
        rgba(0,0,0,0) 100%
    );
            mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1)   0%,
        rgba(0,0,0,1)  35%,
        rgba(0,0,0,.55) 70%,
        rgba(0,0,0,0) 100%
    );
}
@media (prefers-reduced-motion: reduce) {
    .svc-grid-fade { -webkit-mask-image: none; mask-image: none; }
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 640px) {
    .svc-card { padding: 1.25rem 1.25rem 1rem; gap: 1rem; }
    .svc-card__icon { width: 56px; height: 56px; }
    .svc-card__icon-svg { width: 26px; height: 26px; }
    .svc-card__title { font-size: 1.25rem; }
    .svc-rule { background: linear-gradient(to right,
        var(--lime-500) 0%, var(--lime-500) 64px,
        var(--ink-200) 64px, var(--ink-200) 100%); }
}