/* ==========================================================================
   NOW · Capa de mejoras visuales (VFX sutil premium) — ADITIVA
   No modifica estilos existentes. Todo va bajo .now-fx (activado por JS).
   Si el JS no corre, nada se oculta ni cambia: la página queda igual.
   ========================================================================== */

/* --- Apariciones al scroll (fade + rise) --- */
.now-fx .fx-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.68,.36,1), transform .7s cubic-bezier(.22,.68,.36,1);
  transition-delay:calc(var(--fx-i, 0) * 80ms);
  will-change:opacity, transform;
}
.now-fx .fx-reveal.in-view{
  opacity:1;
  transform:none;
}

/* --- Números count-up: evita salto de layout mientras cuenta --- */
.now-fx .fx-count{
  font-variant-numeric:tabular-nums;
}

/* --- Hover premium en tarjetas (sutil) --- */
.now-fx .now-service-card,
.now-fx .portfolio__card,
.now-fx .now-case-card{
  transition:transform .28s cubic-bezier(.22,.68,.36,1), box-shadow .28s cubic-bezier(.22,.68,.36,1);
  will-change:transform;
}
.now-fx .now-service-card:hover,
.now-fx .portfolio__card:hover,
.now-fx .now-case-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 48px rgba(12,16,48,.16);
}

/* --- Brillo sutil que recorre el CTA principal --- */
.now-fx .fx-shine{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.now-fx .fx-shine::after{
  content:"";
  position:absolute;
  top:0; bottom:0; left:-70%;
  width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);
  animation:fx-sheen 6s ease-in-out infinite;
  pointer-events:none;
  z-index:1;
}
@keyframes fx-sheen{
  0%, 60%   { left:-70%; }
  88%, 100% { left:140%; }
}

/* --- Wordmark de reemplazo para logos inventados/rotos en casos de éxito ---
   Las variantes por marca (--case-logo-filter / --case-logo-blend) están
   pensadas para una imagen y dejarían el texto ilegible (screen/multiply
   sobre texto oscuro desaparece) — se neutralizan explícitamente. --- */
.now-fx .fx-wordmark{
  /* Posición y tamaño propios: la regla heredada (.now-case-card__logo)
     está pensada para una imagen pequeña arriba a la izquierda, junto al
     índice "Caso 01" — para texto queda escondida y poco legible. */
  position:absolute !important;
  inset:auto auto 56px 20px !important;
  max-width:70% !important;
  max-height:none !important;
  width:auto !important;
  height:auto !important;
  transform:none !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:flex-start;
  padding:7px 14px;
  border-radius:10px;
  background:rgba(4,8,18,.4);
  backdrop-filter:blur(6px);
  font-family:inherit;
  font-weight:800;
  font-size:clamp(17px,2.6vw,22px);
  letter-spacing:.01em;
  text-transform:uppercase;
  color:#f4eee8;
  opacity:1 !important;
}

/* --- Stats: eyebrow + tarjetas con ícono + micro-CTA persuasivo --- */
.now-fx .fx-stats-eyebrow{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  align-items:center;
  gap:8px;
  margin:22px 0 10px;
  padding:8px 12px;
  font-size:10.5px;
  font-weight:800;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.88);
  background:rgba(4,19,53,.54);
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 24px rgba(4,19,53,.14);
  backdrop-filter:blur(12px);
}
.now-fx .fx-stats-eyebrow::before{
  width:6px;
  height:6px;
  flex:0 0 auto;
  content:"";
  background:#e72c88;
  border-radius:50%;
  box-shadow:0 0 0 3px rgba(231,44,136,.16);
}
.now-fx .fx-stats-row{
  gap:14px;
  flex-wrap:wrap;
}
.now-fx .fx-stat-card{
  position:relative;
  flex:1 1 150px;
  padding:16px 18px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(10px);
  transition:transform .22s ease, border-color .22s ease, background .22s ease;
}
.now-fx .fx-stat-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,176,32,.4);
  background:rgba(255,255,255,.07);
}
.now-fx .fx-stat-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  margin-bottom:10px;
  border-radius:9px;
  background:rgba(255,176,32,.12);
  color:#ffb020;
}
.now-fx .fx-stats-cta{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:16px;
  padding:7px 9px 7px 12px;
  color:#fff;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
  background:rgba(4,19,53,.74);
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;
  box-shadow:0 12px 28px rgba(4,19,53,.2),inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(14px);
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.now-fx .fx-stats-cta:hover{transform:translateY(-2px);background:#0b5cff;border-color:rgba(255,255,255,.72);box-shadow:0 16px 34px rgba(4,19,53,.28);}
.now-fx .fx-stats-cta span{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;color:#07183c;font-size:16px;line-height:1;background:#fff;border-radius:50%;}
.now-fx .fx-stats-cta span{transition:transform .18s ease;}
.now-fx .fx-stats-cta:hover span{transform:translateX(2px);}
.now-fx .fx-stats-cta:focus-visible{
  outline:2px solid #ffb020;
  outline-offset:4px;
  border-radius:4px;
}
.now-fx .fx-why-closing .fx-stats-cta:focus-visible{outline-color:#2540dc;}

/* --- Luz ámbar girando: marco del mockup de "Así es como funciona" ---
   Técnica de anillo animado: conic-gradient rotando detrás de la tarjeta,
   recortado a un aro fino con mask-composite. Si el navegador no soporta
   mask-composite (muy poco frecuente), la regla simplemente no aplica y el
   marco queda exactamente como estaba — no hay degradación visible. --- */
.now-fx .fx-glow-ring-wrap{
  position:relative;
  isolation:isolate;
  border-radius:1rem; /* mismo radio que rounded-2xl de la tarjeta interior */
}
.now-fx .fx-glow-ring::before{
  content:"";
  position:absolute;
  inset:-3px;
  z-index:-1;
  border-radius:inherit;
  padding:3px;
  background:conic-gradient(from 0deg,
    transparent 0deg,
    rgba(255,176,32,0) 0deg,
    #ffb020 40deg,
    #fff3d6 62deg,
    #ffb020 84deg,
    rgba(255,176,32,0) 130deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:fx-ring-spin 5.5s linear infinite;
  pointer-events:none;
}
/* Halo difuminado detrás del marco: refuerza la sensación de "luz" sin
   depender solo del aro fino (que puede perderse contra fondos claros). */
.now-fx .fx-glow-ring::after{
  content:"";
  position:absolute;
  inset:-22px;
  z-index:-2;
  border-radius:inherit;
  background:conic-gradient(from 0deg,
    transparent 0deg,
    rgba(255,176,32,0) 0deg,
    rgba(255,176,32,.55) 40deg,
    rgba(255,243,214,.65) 62deg,
    rgba(255,176,32,.55) 84deg,
    rgba(255,176,32,0) 130deg,
    transparent 360deg);
  filter:blur(18px);
  animation:fx-ring-spin 5.5s linear infinite;
  pointer-events:none;
}
@keyframes fx-ring-spin{ to { transform:rotate(360deg); } }

/* --- Tarjetas "Por qué nosotros": ícono, hover y tag de énfasis --- */
.now-fx .fx-why-card{
  position:relative;
  transition:transform .24s cubic-bezier(.22,.68,.36,1), box-shadow .24s ease, border-color .24s ease;
}
.now-fx .fx-why-card:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 44px rgba(20,30,80,.1);
}
.now-fx .fx-why-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  margin-bottom:14px;
  border-radius:12px;
  background:rgba(37,64,220,.08);
  color:#2540dc;
}
.now-fx .fx-why-tag{
  position:absolute;
  top:-11px;
  right:20px;
  padding:4px 12px;
  border-radius:999px;
  background:#E91E8C;
  color:#fff;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.04em;
  box-shadow:0 6px 16px rgba(233,30,140,.35);
}
.now-fx .fx-why-closing{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid rgba(20,30,80,.08);
}
.now-fx .fx-why-closing p{
  margin:0;
  color:rgba(20,30,80,.55);
  font-size:14px;
}
.now-fx .fx-why-closing .fx-stats-cta{color:#2540dc;}
.now-fx .fx-why-closing .fx-stats-cta:hover{color:#1a30a8;}

/* Final contrast pass: outranks legacy utility styles. */
html.now-light-mode.now-fx body .fx-stats-eyebrow{
  color:rgba(255,255,255,.88) !important;
  background:rgba(4,19,53,.54) !important;
  border:1px solid rgba(255,255,255,.28) !important;
}
html.now-light-mode.now-fx body .fx-stats-cta{
  color:#fff !important;
  background:rgba(4,19,53,.74) !important;
  border:1px solid rgba(255,255,255,.42) !important;
  box-shadow:0 12px 28px rgba(4,19,53,.2),inset 0 1px 0 rgba(255,255,255,.12) !important;
}
html.now-light-mode.now-fx body .fx-stats-cta span{
  width:22px;
  height:22px;
  font-size:14px;
  color:#07183c !important;
  background:#fff !important;
}
html.now-light-mode.now-fx body .fx-stats-cta:hover{
  color:#fff !important;
  background:#0b5cff !important;
  border-color:rgba(255,255,255,.72) !important;
}

/* --- Botones "Ver video": mismo rosa de marca, con anillo de vidrio y
   pulso — más premium sin cambiar de color --- */
.now-fx .portfolio__play-btn,
.now-fx .now-case-card__play{
  position:relative;
}
.now-fx .portfolio__play-btn::before,
.now-fx .now-case-card__play::before{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,.55);
  opacity:.55;
  animation:fx-play-pulse 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes fx-play-pulse{
  0%{ transform:scale(.94); opacity:.55; }
  70%{ transform:scale(1.18); opacity:0; }
  100%{ transform:scale(1.18); opacity:0; }
}
.now-fx .portfolio__play-btn,
.now-fx .now-case-card__play{
  background:linear-gradient(135deg,#ff4fa0,#c9147a) !important;
  transition:transform .2s ease, box-shadow .2s ease;
}
/* El centrado original usa transform:translate(...) — el hover debe
   conservar ese translate y sumarle el scale, o el botón "saltaría" de
   posición al pasar el mouse. Cada selector mantiene su propio translate. */
.now-fx .portfolio__play-btn:hover{
  transform:translate(-50%,-50%) scale(1.08);
}
.now-fx .now-case-card__play:hover{
  transform:translate(-50%,-45%) scale(1.05);
}

/* --- Accesibilidad: si el usuario pidió menos movimiento, todo estático --- */
@media (prefers-reduced-motion:reduce){
  .now-fx .fx-reveal{opacity:1 !important;transform:none !important;transition:none !important;}
  .now-fx .fx-shine::after{display:none;}
  .now-fx .now-service-card,
  .now-fx .portfolio__card,
  .now-fx .now-case-card,
  .now-fx .fx-stat-card,
  .now-fx .fx-why-card{transition:none;}
  .now-fx .fx-glow-ring::before,
  .now-fx .fx-glow-ring::after,
  .now-fx .portfolio__play-btn::before,
  .now-fx .now-case-card__play::before{animation:none;}
  /* El aro y el halo quedan fijos (sin girar) en vez de desaparecer, para
     que la tarjeta conserve su acento visual incluso sin movimiento. */
  .now-fx .fx-glow-ring::before{opacity:.9;}
  .now-fx .fx-glow-ring::after{opacity:.6;}
}