/*
 * ARKHAM Videovigilancia
 * Efectos y microinteracciones aprobadas.
 * Separado del CSS base para mantener responsabilidades claras.
 */
/* =========================================================
   v1.3.45-DINAMICA — Experiencia inmersiva / comparación
   Mantiene la paleta original de ARKHAM.
   ========================================================= */

/* Progreso de lectura discreto */
.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  width:0;
  height:2px;
  z-index:9999;
  pointer-events:none;
  background:linear-gradient(90deg,#31cbd0,#59d4d7);
  box-shadow:0 0 10px rgba(49,203,208,.45);
}

/* Scroll suave sin alterar navegación existente */
html{
  scroll-behavior:smooth;
}

/* Entrada progresiva */
.arkham-reveal{
  opacity:0;
  transform:translate3d(0,22px,0);
  filter:blur(5px);
  transition:
    opacity .72s cubic-bezier(.22,.61,.36,1),
    transform .72s cubic-bezier(.22,.61,.36,1),
    filter .72s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform,filter;
}
.arkham-reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
  filter:blur(0);
}

/* Aparición escalonada en grupos */
.arkham-stagger > .arkham-reveal:nth-child(1){transition-delay:.03s}
.arkham-stagger > .arkham-reveal:nth-child(2){transition-delay:.10s}
.arkham-stagger > .arkham-reveal:nth-child(3){transition-delay:.17s}
.arkham-stagger > .arkham-reveal:nth-child(4){transition-delay:.24s}
.arkham-stagger > .arkham-reveal:nth-child(5){transition-delay:.31s}
.arkham-stagger > .arkham-reveal:nth-child(6){transition-delay:.38s}

/* Tarjetas con profundidad muy ligera */
.audience-card,
.benefit-impact-card,
.response-step,
.service-card,
.event-card{
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    background-color .28s ease;
  transform-style:preserve-3d;
}
@media (hover:hover) and (pointer:fine){
  .audience-card:hover,
  .benefit-impact-card:hover,
  .response-step:hover,
  .service-card:hover,
  .event-card:hover{
    transform:translateY(-5px);
    border-color:rgba(85,209,211,.42);
    box-shadow:0 16px 35px rgba(0,0,0,.22),0 0 24px rgba(49,203,208,.06);
  }
}

/* Secciones con una transición luminosa sutil al entrar */
section{
  position:relative;
}
section.arkham-section-active::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(560px,70vw);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(85,209,211,.26),transparent);
  pointer-events:none;
}

/* Imágenes: micro-parallax y respiración visual */
.audience-card-image img,
.benefit-impact-image img,
.integration-visual img,
.about-pro-visual img{
  transition:transform .7s cubic-bezier(.22,.61,.36,1), filter .5s ease;
}
@media (hover:hover) and (pointer:fine){
  .audience-card:hover .audience-card-image img,
  .benefit-impact-card:hover .benefit-impact-image img{
    transform:scale(1.035);
  }
}

/* Botones: respuesta táctil sutil */
.btn,
button,
a[class*="btn"],
.whatsapp-float{
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease;
}
@media (hover:hover) and (pointer:fine){
  .btn:hover,
  button:hover,
  a[class*="btn"]:hover{
    transform:translateY(-2px);
  }
}

/* Fondo ambiental mínimo para desktop */
@media(min-width:900px){
  body::before{
    content:"";
    position:fixed;
    inset:-15%;
    pointer-events:none;
    z-index:-1;
    background:
      radial-gradient(circle at var(--mx,50%) var(--my,20%),
        rgba(49,203,208,.035),
        transparent 28%);
    transition:background-position .25s ease;
  }
}

/* Accesibilidad y rendimiento */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .arkham-reveal,
  .arkham-reveal.is-visible,
  .audience-card,
  .benefit-impact-card,
  .response-step,
  .service-card,
  .event-card,
  .audience-card-image img,
  .benefit-impact-image img{
    transition:none !important;
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
  }
  .scroll-progress{display:none}
}


/* v1.3.46 — ÚNICO CAMBIO: efecto del logo ARKHAM del encabezado */
.header-logo-interactive{
  transition:transform .22s ease, filter .22s ease !important;
  transform-origin:center center;
}
.header-logo-interactive:hover{
  transform:translateY(-2px) scale(1.045) !important;
  filter:drop-shadow(0 0 8px rgba(85,209,211,.38)) !important;
}
.header-logo-interactive:active{
  transform:scale(.97) !important;
  filter:drop-shadow(0 0 12px rgba(85,209,211,.52)) !important;
}
@media(prefers-reduced-motion:reduce){
  .header-logo-interactive{
    transition:none !important;
  }
}


/* v1.3.47 — ÚNICO CAMBIO: efecto del botón EVALUACIÓN GRATUITA */
.evaluacion-interactive{
  transition:transform .22s ease,filter .22s ease,box-shadow .22s ease !important;
  transform-origin:center;
}
.evaluacion-interactive:hover{
  transform:translateY(-3px) scale(1.025) !important;
  filter:brightness(1.08) !important;
  box-shadow:0 10px 26px rgba(65,145,235,.30) !important;
}
.evaluacion-interactive:active{
  transform:translateY(0) scale(.975) !important;
  filter:brightness(.98) !important;
}
@media(prefers-reduced-motion:reduce){
  .evaluacion-interactive{transition:none !important}
}


/* v1.3.48 — ÚNICO CAMBIO: botón INFORMES POR WHATSAPP verde + efecto */
.informes-whatsapp-green{
  background:#25D366 !important;
  background-image:none !important;
  border-color:#25D366 !important;
  color:#fff !important;
  transition:transform .22s ease,filter .22s ease,box-shadow .22s ease !important;
  transform-origin:center;
}
.informes-whatsapp-green:hover{
  background:#20c75a !important;
  border-color:#20c75a !important;
  transform:translateY(-3px) scale(1.025) !important;
  filter:brightness(1.06) !important;
  box-shadow:0 10px 28px rgba(37,211,102,.32) !important;
}
.informes-whatsapp-green:active{
  transform:translateY(0) scale(.975) !important;
  filter:brightness(.98) !important;
}
@media(prefers-reduced-motion:reduce){
  .informes-whatsapp-green{transition:none !important}
}


/* v1.3.55 — accesibilidad y endurecimiento de producción */
.skip-link{
  position:fixed;
  left:16px;
  top:16px;
  z-index:100000;
  padding:10px 14px;
  border-radius:8px;
  background:#ffffff;
  color:#071523;
  font-weight:700;
  transform:translateY(-160%);
  transition:transform .18s ease;
}
.skip-link:focus{
  transform:translateY(0);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid currentColor;
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto !important;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-animation-duration:.01ms !important;
  }
}