/* ═══════════════════════════════════════════════════════════════════
   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"] {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    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-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;
    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;
    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;
}

/* ─── 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);
}

/* 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 */

/* 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%);
}

/* Video de fondo del hero */
.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: 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%);
}

/* Overlay oscuro para legibilidad sobre el video */
.hero-bg-overlay {
    background: linear-gradient(
        135deg,
        rgba(10, 18, 14, 0.88) 0%,
        rgba(10, 18, 14, 0.72) 50%,
        rgba(10, 18, 14, 0.55) 100%
    );
    z-index: 1;
}
.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: #98C040;                                /* lime-500 */
    letter-spacing: 0.02em;
}
.hero-eyebrow .dot-pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: #98C040;
    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: #fff;
}
.hero-h1 .accent {
    color: #98C040;                            /* lime-500 */
    position: relative;
}

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

/* 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: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    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(255,255,255,0.06);
    border-color: rgba(255,255,255,0.40);
}

/* 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: #98C040;                            /* lime-500 */
    line-height: 1;
}
.hero-stats dd {
    margin-top: 0.375rem;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.60);
}

/* ─── 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.75rem;
    padding: 1.25rem;
    min-height: 160px;
    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: 175px; }
}

/* 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 {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.bento-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    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: 15px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}
.bento-desc {
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255,255,255,0.55);
}

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

/* CCTV: scan line en un mini grid 2x2 */
.bento-visual--cctv {
    position: absolute;
    inset: 1.25rem 1.25rem auto 1.25rem;
    height: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    opacity: 0.55;
}
.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: 8px;
    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(-8px); }
    100% { transform: translateY(56px); }
}

/* 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 {
    position: absolute;
    top: 1.25rem; right: 1.25rem;
    width: 40px; height: 32px;
    pointer-events: none;
}
.bento-visual--alarmas svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
/* 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 {
    position: absolute;
    top: 1.25rem; right: 1.25rem;
    width: 64px; height: 32px;
    pointer-events: none;
    opacity: 0.7;
}
.bento-visual--redes svg { width: 100%; height: 100%; overflow: visible; }
.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(52px); opacity: 0; }
}

/* Voz/datos: switch con 6 puertos RJ45 + VU meter de tráfico */
.bento-visual--voz {
    position: absolute;
    top: 1.25rem; right: 1.25rem;
    width: 64px; height: 40px;
    pointer-events: none;
    opacity: 0.85;
}
.bento-visual--voz svg { width: 100%; height: 100%; overflow: visible; }
/* 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 {
    position: absolute;
    top: 1.25rem; right: 1.25rem;
    width: 32px; height: 32px;
    pointer-events: none;
    display: flex;
    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 {
    position: absolute;
    top: 1.25rem; right: 1.25rem;
    width: 32px; height: 32px;
    pointer-events: none;
}
.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 {
    position: absolute;
    top: 1.25rem; right: 1.25rem;
    width: 32px; height: 32px;
    pointer-events: none;
}
.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; }
}

/* 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,
    .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--acceso,
    .bento-card .bento-desc {
        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 {
        margin-top: 0 !important;
        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;
}