/* ==========================================================
   IRABOR MARKETING — capa de efectos (21-sep-2026)
   Archivo aparte a propósito: para quitarlo basta borrar el
   <link> y el <script> de efectos en cada página.
   Estilo: plano de obra (cuadrícula fina, esquinas rectas,
   naranja de marca). Sin librerías, sin peso extra.
   Todo respeta prefers-reduced-motion y funciona sin JS.
   ========================================================== */

/* ---------- 1 · HERO: cuadrícula de plano + foco de luz ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;--mx:70%;--my:30%}
.hero::before,
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}

/* cuadrícula fina que se desvanece hacia los bordes */
.hero::before{
  background-image:
    linear-gradient(var(--borde) 1px,transparent 1px),
    linear-gradient(90deg,var(--borde) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 35%,#000 25%,transparent 78%);
  mask-image:radial-gradient(ellipse 85% 75% at 50% 35%,#000 25%,transparent 78%);
  animation:ir-grid-drift 40s linear infinite;
}
@keyframes ir-grid-drift{to{background-position:56px 56px,56px 56px}}

/* halo naranja que sigue al cursor (posición la pone efectos.js) */
.hero::after{
  background:radial-gradient(360px circle at var(--mx) var(--my),rgba(255,107,0,.16),transparent 65%);
  transition:opacity .4s ease;
}

/* ---------- 2 · titular: degradado animado SOLO en el destacado del hero ---------- */
.hero h1 .destacado{
  background-image:linear-gradient(110deg,#c95400 0%,#ff6b00 28%,#a84500 52%,#ff6b00 76%,#c95400 100%);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:ir-aurora 9s ease-in-out infinite alternate;
}
@keyframes ir-aurora{from{background-position:0% 50%}to{background-position:100% 50%}}

/* ---------- 3 · entrada de bloques: fade + desenfoque ---------- */
.js-fx .rv{opacity:0;filter:blur(6px);transform:translateY(22px)}
.js-fx .rv.rv-in{
  opacity:1;filter:none;transform:none;
  transition:opacity .8s ease,filter .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0s);
}

/* hero: aparece al cargar, escalonado */
.hero .wrap > *{animation:ir-hero-in .9s cubic-bezier(.2,.7,.2,1) both}
.hero .wrap > *:nth-child(2){animation-delay:.08s}
.hero .wrap > *:nth-child(3){animation-delay:.16s}
.hero .wrap > *:nth-child(4){animation-delay:.24s}
.hero .wrap > *:nth-child(5){animation-delay:.32s}
@keyframes ir-hero-in{from{opacity:0;filter:blur(6px);transform:translateY(18px)}to{opacity:1;filter:none;transform:none}}

/* ---------- 4 · tarjetas: luz de esquina + elevación + regla naranja ---------- */
.card,.caso,.testimonio-card{
  position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease;
}
.card::before,.caso::before,.testimonio-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 100% 0%,rgba(255,107,0,.16),transparent 55%);
  transition:opacity .35s ease;
}
.card::after,.caso::after,.testimonio-card::after{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:var(--naranja);transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.card:hover,.caso:hover,.testimonio-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px -12px rgba(20,20,20,.22);
  border-color:#d8d3ca;
}
.card:hover::before,.caso:hover::before,.testimonio-card:hover::before{opacity:1}
.card:hover::after,.caso:hover::after,.testimonio-card:hover::after{transform:scaleX(1)}
/* en la sección oscura la luz es más viva */
.oscuro .card::before{background:radial-gradient(circle at 100% 0%,rgba(255,107,0,.28),transparent 55%)}
.oscuro .card:hover{box-shadow:0 14px 30px -12px rgba(255,107,0,.25);border-color:#3a3a3d}
/* el caso destacado ya lleva marco naranja: solo elevación */
.caso-destacado::after{display:none}

/* ---------- 5 · botón principal: barrido de luz ---------- */
.btn.principal{position:relative;overflow:hidden}
.btn.principal::after{
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);pointer-events:none;
}
.btn.principal:hover::after{left:130%;transition:left .7s ease}

/* ---------- 6 · pastillas del circuito: latido en cadena ---------- */
.hero-circuito .hc-paso{animation:ir-pulso 4.8s ease-in-out infinite}
.hero-circuito .hc-paso:nth-of-type(2){animation-delay:.6s}
.hero-circuito .hc-paso:nth-of-type(3){animation-delay:1.2s}
.hero-circuito .hc-paso:nth-of-type(4){animation-delay:1.8s}
.hero-circuito .hc-paso:nth-of-type(5){animation-delay:2.4s}
@keyframes ir-pulso{
  0%,70%,100%{border-color:var(--borde);box-shadow:none}
  85%{border-color:var(--naranja);box-shadow:0 0 0 3px rgba(255,107,0,.18)}
}

/* ---------- accesibilidad: sin movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  .hero::before,.hero h1 .destacado,.hero-circuito .hc-paso,.hero .wrap > *{animation:none !important}
  .js-fx .rv{opacity:1;filter:none;transform:none}
  .card,.caso,.testimonio-card,.btn.principal::after{transition:none}
}

/* móvil: sin halo de cursor ni sombra pesada */
@media (hover:none){
  .hero::after{opacity:.6}
  .card:hover,.caso:hover,.testimonio-card:hover{transform:none;box-shadow:none}
}