body {
  font-family: "Poppins", sans-serif;
}

/* ====== FORM CONTROLS ====== */
.input-dark{
  width:100%;
  border-radius:12px;
  padding:12px 14px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  color:#fff;
}
.input-dark::placeholder{ color: rgba(255,255,255,.40); }

.textarea-dark{
  width:100%;
  border-radius:12px;
  padding:12px 14px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  color:#fff;
  resize:none;
}
.textarea-dark::placeholder{ color: rgba(255,255,255,.40); }

/* Improve focus */
.input-dark:focus,
.textarea-dark:focus{
  outline: none;
  border-color: rgba(139,92,246,.65);
  box-shadow: 0 0 0 3px rgba(139,92,246,.25);
}

/* ====== HEADER ====== */
.header-glass{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,15,15,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 16px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.nav-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 14px;
  color: rgba(255,255,255,.72);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  border: 1px solid transparent;
}
.nav-link:hover{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
.nav-link.is-active{
  color: #fff;
  background: rgba(139,92,246,.16);
  border-color: rgba(139,92,246,.35);
}

:where(a, button, input, textarea, select):focus-visible{
  outline: 2px solid rgba(167,139,250,.95);
  outline-offset: 3px;
}

/* Mobile menu panel */
.mobile-menu{
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 6px;
  padding-top: 10px;
}

/* ====== HERO / MOTION HELPERS (si ya los usas) ====== */
.fade-up{
  /* Content-first: JS may enhance the motion, but cannot hide the content. */
  opacity: 1;
  transform: translateY(10px);
  animation: none;
  transition: transform .7s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.fade-up.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.fade-up.is-visible:nth-child(2){ transition-delay: 80ms; }
.fade-up.is-visible:nth-child(3){ transition-delay: 160ms; }
.fade-up.is-visible:nth-child(4){ transition-delay: 240ms; }
.fade-up.is-visible:nth-child(5){ transition-delay: 320ms; }
@keyframes fadeUp{
  to { opacity: 1; transform: translateY(0); }
}

.hero-grad{
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(139,92,246,.22), transparent 55%),
    radial-gradient(700px 420px at 75% 30%, rgba(167,139,250,.14), transparent 55%),
    radial-gradient(900px 560px at 55% 85%, rgba(74,20,140,.18), transparent 60%);
}

.animate-gradient{
  animation: gradientMove 6s ease infinite;
}
@keyframes gradientMove{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

.bounce-y{
  animation: bounceY 1.6s ease-in-out infinite;
}
@keyframes bounceY{
  0%,100%{ transform: translate(-50%,0); }
  50%{ transform: translate(-50%,8px); }
}

.dot-y{
  animation: dotY 1.6s ease-in-out infinite;
}
@keyframes dotY{
  0%,100%{ transform: translateY(0); opacity:.85; }
  50%{ transform: translateY(10px); opacity:1; }
}

/* ====== REUSABLE UI CARDS (si tus partials los usan) ====== */
.card-hover{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 12px 14px;
  color: rgba(255,255,255,.78);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.card-hover:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.085);
  border-color: rgba(139,92,246,.28);
}

.info-card{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.info-ico{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background: rgba(139,92,246,.18);
  border: 1px solid rgba(139,92,246,.25);
  color:#fff;
}

.list-card{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  border-radius: 14px;
  padding: 12px 14px;
  color: rgba(255,255,255,.78);
}

.mini-card{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  border-radius: 16px;
  padding: 16px 16px;
}
.mini-ico{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom: 10px;
}

/* About chips */
.chip{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.80);
  border-radius: 999px;
  padding: 10px 12px;
  font-size: 14px;
}
.chip2{
  border-color: rgba(139,92,246,.22);
  background: rgba(139,92,246,.10);
}

/* Buttons used in about */
.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(139,92,246,.40);
  background: rgba(139,92,246,.08);
  color: rgba(255,255,255,.92);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn-outline:hover{
  transform: translateY(-1px);
  background: rgba(139,92,246,.12);
  border-color: rgba(139,92,246,.55);
}
.icon-btn{
  width: 40px;
  height: 40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.85);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.icon-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(139,92,246,.25);
}

/* Background helpers you referenced */
.grid-soft{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .12;
}

/* Floating / orbs (si ya los tienes, esto mantiene look) */
.grid-pattern{
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .10;
}

.orb{
  position:absolute;
  width: 420px; height: 420px;
  border-radius: 999px;
  filter: blur(40px);
  opacity: .22;
  mix-blend-mode: screen;
}
.orb-1{ top:-120px; left:-120px; background: rgba(139,92,246,.85); }
.orb-2{ top: 15%; right:-160px; background: rgba(167,139,250,.70); }
.orb-3{ bottom:-160px; left: 30%; background: rgba(74,20,140,.85); }

/* ====== Small polish ====== */
html { scroll-behavior: smooth; }

.skip-link{
  position:fixed;
  left:1rem;
  top:-4rem;
  z-index:1100;
  border-radius:10px;
  background:#8B5CF6;
  color:#fff;
  padding:.65rem 1rem;
  font-weight:600;
  transition:top .2s ease;
}
.skip-link:focus{ top:1rem; }

.blog-page{ padding-top:8.75rem; }
.blog-detail-page{ padding-top:7.5rem; }
@media (max-width: 640px){
  .blog-page{ padding-top:7.5rem; }
  .blog-detail-page{ padding-top:6.75rem; }
}


/* ===== HERO 3 IMAGES (right side) ===== */
.perspective-1000 { perspective: 1000px; }

/* contenedor debe permitir posicionamiento absoluto interno */
.hero-images {
  position: relative;
  width: 100%;
  height: 100%;
}

/* base */
.img-float{
  position: absolute;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  transform-style: preserve-3d;
  will-change: transform;
}

.img-float img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* posiciones (3 cards) */
.img-1{
  width: 64%;
  height: 74%;
  right: 2%;
  top: 12%;
  z-index: 3;
  transform: translateZ(40px) rotateY(-10deg) rotateX(2deg);
  animation: float1 7s ease-in-out infinite;
}

.img-2{
  width: 40%;
  height: 46%;
  left: -4%;
  top: 4%;
  z-index: 2;
  transform: translateZ(20px) rotateY(8deg) rotateX(-2deg);
  animation: float2 8s ease-in-out infinite;
}

.img-3{
  width: 38%;
  height: 44%;
  left: 0%;
  bottom: -4%;
  z-index: 1;
  transform: translateZ(10px) rotateY(10deg) rotateX(2deg);
  animation: float3 9s ease-in-out infinite;
}

/* animaciones */
@keyframes float1{
  0%,100%{ transform: translateZ(40px) translateY(0) rotateY(-10deg) rotateX(2deg); }
  50%{ transform: translateZ(40px) translateY(-10px) rotateY(-12deg) rotateX(3deg); }
}
@keyframes float2{
  0%,100%{ transform: translateZ(20px) translateY(0) rotateY(8deg) rotateX(-2deg); }
  50%{ transform: translateZ(20px) translateY(12px) rotateY(10deg) rotateX(-1deg); }
}
@keyframes float3{
  0%,100%{ transform: translateZ(10px) translateY(0) rotateY(10deg) rotateX(2deg); }
  50%{ transform: translateZ(10px) translateY(-8px) rotateY(12deg) rotateX(1deg); }
}

/* ====== WhatsApp floating button (look similar a tu referencia) ====== */
.wa-float{
  position:fixed; right:22px; bottom:110px; z-index:100;
  width:68px; height:68px;
  display:grid; place-items:center;
  pointer-events:auto;
}

.wa-float__shadow{
  position:absolute; inset:0;
  background:#000; border-radius:999px;
  transform: translate(7px,7px);
  transition:.25s;
  opacity:.7;
}

.wa-float__btn{
  position:relative;
  width:68px;height:68px;border-radius:999px;
  background:#25D366;
  border:2px solid rgba(0,0,0,.85);
  display:grid; place-items:center;
  transition:.25s;
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
  animation: waNudge 2.6s ease-in-out infinite;
}

.wa-float__icon{
  width:34px;
  height:34px;
  display:block;
}

.wa-float__badge{
  position:absolute;
  top:6px; right:6px;
  width:18px; height:18px;
  border-radius:999px;
  background:#fff;
  color:#6D28D9;
  display:grid; place-items:center;
  font-size:11px;
  font-weight:800;
  border:2px solid rgba(0,0,0,.20);
}

.wa-float:hover .wa-float__shadow{transform: translate(0,0)}
.wa-float:hover .wa-float__btn{
  background:#128C7E;
  animation:none;
  transform: translateY(-1px);
}

.wa-float__ping{
  position:absolute; inset:-6px;
  border-radius:999px;
  box-shadow:0 0 0 0 rgba(37,211,102,.35);
  animation: waPing 1.4s infinite;
  pointer-events:none;
}

@keyframes waPing{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.35) }
  70%{ box-shadow:0 0 0 18px rgba(37,211,102,0) }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0) }
}

/* Tip */
.wa-float__tip{
  position:absolute; right:78px; top:50%; transform: translateY(-50%);
  background:#000; color:#fff;
  padding:8px 10px;
  border-right:4px solid #8B5CF6;
  font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.18em;
  white-space:nowrap; opacity:0; transition:.2s;
}
.wa-float:hover .wa-float__tip{opacity:1}

/* micro “nudge” para motivar click */
@keyframes waNudge{
  0%, 78%, 100%{ transform: translateY(0) }
  82%{ transform: translateY(-3px) }
  86%{ transform: translateY(0) }
  90%{ transform: translateY(-2px) }
  94%{ transform: translateY(0) }
}

/* Layout / background */
.services-section{
  position:relative;
  background:#0f0f0f;
  padding: 80px 0;
  overflow:hidden;
}
.services-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 20% 15%, rgba(139,92,246,.18), transparent 55%),
    radial-gradient(760px 480px at 80% 25%, rgba(63,180,225,.12), transparent 55%),
    radial-gradient(900px 560px at 55% 90%, rgba(74,20,140,.14), transparent 60%);
  pointer-events:none;
}
.services-container{
  position:relative;
  z-index:1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}
.services-head{
  text-align:center;
  margin-bottom: 28px;
}
.services-title{
  color:#fff;
  font-size: 44px;
  line-height: 1.05;
  margin: 0 0 10px 0;
  letter-spacing:-.02em;
}
.services-subtitle{
  color: rgba(255,255,255,.70);
  max-width: 760px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.6;
}

/* Grid: 3 arriba, 2 abajo */
.services-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  margin-top: 24px;
}
.service-card{
  grid-column: span 4;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  border-radius: 18px;
  padding: 18px 18px;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
  min-height: 260px;
}

/* Segunda fila (2 cards) */
.service-card:nth-child(4),
.service-card:nth-child(5){
  grid-column: span 6;
}

/* Icono */
.service-ico{
  width:44px; height:44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 12px;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

/* Tipografías internas */
.service-name{
  color:#fff;
  font-size: 16px;
  margin: 0 0 8px 0;
}
.service-desc{
  color: rgba(255,255,255,.70);
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 10px 0;
}
.service-list{
  margin: 0;
  padding-left: 16px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.75;
}
.service-note{
  margin: 12px 0 0 0;
  font-size: 11px;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
}

/* Hover base */
.service-card:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,.07);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 18px 55px rgba(0,0,0,.45);
}

/* ====== HOVERS POR COLOR (uno distinto por card) ====== */
.service-card--purple:hover{
  border-color: rgba(139,92,246,.55);
  box-shadow: 0 0 0 1px rgba(139,92,246,.18), 0 18px 55px rgba(0,0,0,.45);
}
.service-card--purple:hover .service-ico{
  border-color: rgba(139,92,246,.45);
  background: rgba(139,92,246,.16);
  box-shadow: 0 0 0 1px rgba(139,92,246,.16);
}

.service-card--cyan:hover{
  border-color: rgba(63,180,225,.55);
  box-shadow: 0 0 0 1px rgba(63,180,225,.18), 0 18px 55px rgba(0,0,0,.45);
}
.service-card--cyan:hover .service-ico{
  border-color: rgba(63,180,225,.45);
  background: rgba(63,180,225,.14);
  box-shadow: 0 0 0 1px rgba(63,180,225,.16);
}

.service-card--pink:hover{
  border-color: rgba(167,139,250,.60);
  box-shadow: 0 0 0 1px rgba(167,139,250,.18), 0 18px 55px rgba(0,0,0,.45);
}
.service-card--pink:hover .service-ico{
  border-color: rgba(167,139,250,.45);
  background: rgba(167,139,250,.14);
  box-shadow: 0 0 0 1px rgba(167,139,250,.16);
}

.service-card--amber:hover{
  border-color: rgba(245,158,11,.55);
  box-shadow: 0 0 0 1px rgba(245,158,11,.18), 0 18px 55px rgba(0,0,0,.45);
}
.service-card--amber:hover .service-ico{
  border-color: rgba(245,158,11,.45);
  background: rgba(245,158,11,.14);
  box-shadow: 0 0 0 1px rgba(245,158,11,.16);
}

.service-card--green:hover{
  border-color: rgba(34,197,94,.55);
  box-shadow: 0 0 0 1px rgba(34,197,94,.18), 0 18px 55px rgba(0,0,0,.45);
}
.service-card--green:hover .service-ico{
  border-color: rgba(34,197,94,.45);
  background: rgba(34,197,94,.14);
  box-shadow: 0 0 0 1px rgba(34,197,94,.16);
}

/* Responsive */
@media (max-width: 1024px){
  .services-title{ font-size: 36px; }
  .service-card{ grid-column: span 6; }
  .service-card:nth-child(4),
  .service-card:nth-child(5){ grid-column: span 6; }
}
@media (max-width: 640px){
  .services-title{ font-size: 30px; }
  .service-card{ grid-column: span 12; }
  .service-card:nth-child(4),
  .service-card:nth-child(5){ grid-column: span 12; }
}

.services-sep{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  margin: 14px auto 14px auto;
  width: min(620px, 92%);
}

.services-sep__line{
  height: 1px;
  flex: 1;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0),
    rgba(255,255,255,.22),
    rgba(255,255,255,0)
  );
  opacity: .9;
}

/* La clave: el icono NO va dentro de un circulo.
   Va "flotando" y con tamaño real, como tu referencia */
.services-sep__icon{
  display:grid;
  place-items:center;
  width: 28px;           /* contenedor pequeño, no circular */
  height: 34px;          /* permite el alto 31 del SVG */
}

.services-sep__icon svg{
  display:block;
  width: 17px;
  height: 31px;
  transform: translateY(1px); /* micro ajuste visual */
  opacity: .95;
}

/* Color del SVG separador */
.services-sep__icon{
  color: rgba(139,92,246,.95); /* cambia aquí el color */
}

/* (opcional) glow suave */
.services-sep__icon svg{
  filter: drop-shadow(0 0 10px rgba(139,92,246,.35));
}

/* ===== Footer Pill (FINAL: como la imagen) ===== */
.footer-pill{
  display:flex;
  align-items:stretch;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* Cada botón (ícono arriba, texto abajo) */
.footer-pill__item{
  min-width: 180px;
  padding: 18px 22px 16px;

  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 8px;

  text-decoration: none;
  color: rgba(255,255,255,.85);
  font-size: 14px;
  line-height: 1;
  transition: background .2s ease, color .2s ease;
}

.footer-pill__item:hover{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.95);
}

/* Ícono */
.footer-pill__ico{
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
}

.footer-pill__gif{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
}

/* Texto */
.footer-pill__label{
  font-size: 14px;
  font-weight: 400;
}

/* Divisor vertical */
.footer-pill__divider{
  width: 1px;
  background: rgba(255,255,255,.16);
}

/* Compact legal navigation used by _footerMini.html. */
footer#footer > .max-w-3xl > nav:not(.footer-pill){
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem .55rem;
  margin-top: 1.5rem;
  font-size: .75rem;
}
footer#footer > .max-w-3xl > nav:not(.footer-pill) a{
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: .35rem .55rem;
  border: 1px solid transparent;
  border-radius: .55rem;
  color: rgba(255,255,255,.70);
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}
footer#footer > .max-w-3xl > nav:not(.footer-pill) a:hover{
  color: #fff;
  background: rgba(139,92,246,.12);
  border-color: rgba(139,92,246,.28);
  transform: translateY(-1px);
}
footer#footer > .max-w-3xl > nav:not(.footer-pill) a:focus-visible{
  color: #fff;
  background: rgba(139,92,246,.12);
  border-color: rgba(167,139,250,.65);
}

/* Responsive */
@media (max-width: 640px){
  .footer-pill{
    width: 100%;
    border-radius: 18px;
  }
  .footer-pill__item{
    min-width: 0;
    flex: 1;
    padding: 14px 12px;
  }
}

/* ===== Hero Badges (shadcn-style) ===== */
.hero-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height: 28px;
  padding: 0 12px;

  font-size: 13px;
  font-weight: 500;
  line-height: 1;

  border-radius: 999px;
  white-space: nowrap;

  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

/* Primary (default) */
.hero-badge--primary{
  background: #8B5CF6;
  color: #0f0f0f;
}

/* Secondary */
.hero-badge--secondary{
  background: rgba(139,92,246,.18);
  color: #EDE9FE;
}

/* Outline */
.hero-badge--outline{
  background: transparent;
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(139,92,246,.45);
}

/* Hover (sutil, no exagerado) */
.hero-badge--primary:hover{
  background: #7C3AED;
}

.hero-badge--secondary:hover{
  background: rgba(139,92,246,.28);
}

.hero-badge--outline:hover{
  background: rgba(139,92,246,.12);
}

/* ====== Infinite flow FULL BLEED (no edges) ====== */
.stats-flow--bleed{
  width: 100vw;
  position: relative;

  /* esto rompe el contenedor centrado y lo pega a los bordes */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  /* sin márgenes externos */
  margin-top: 0;
  margin-bottom: 0;

  overflow: hidden;
}

/* máscara: fade suave a ambos lados (sensación infinito) */
.stats-flow__mask{
  position: relative;
  width: 100%;
  overflow: hidden;

  /* padding interno para que no choque con el borde visual */
  padding: 10px 0;
}

.stats-flow__mask:before,
.stats-flow__mask:after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 120px;
  z-index: 2;
  pointer-events:none;
}

.stats-flow__mask:before{
  left:0;
  background: linear-gradient(to right, rgba(15,15,15,1), rgba(15,15,15,0));
}
.stats-flow__mask:after{
  right:0;
  background: linear-gradient(to left, rgba(15,15,15,1), rgba(15,15,15,0));
}

/* track infinito */
.stats-flow__track{
  display:flex;
  gap: 28px;
  width: max-content;
  will-change: transform;

  animation: flow-scroll 26s linear infinite;
}

@keyframes flow-scroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* items (SIN caja / SIN borde / SIN “card”) */
.metric{
  flex: 0 0 auto;
  min-width: 260px;
  padding: 10px 6px;
  text-align: left;
}

/* icono al lado del número (no dentro de caja) */
.metric__icon{
  width: 28px;
  height: 28px;
  display:grid;
  place-items:center;
  color: rgba(167,139,250,.95);
  margin-bottom: 10px;
}

/* número grande protagonista */
.metric__n{
  font-size: 44px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: rgba(255,255,255,.95);
  text-shadow: 0 0 22px rgba(139,92,246,.12);
  margin-bottom: 8px;
}

.metric__t{
  font-size: 14px;
  color: rgba(255,255,255,.70);
  letter-spacing: .02em;
  text-transform: none;
}

/* responsive */
@media (max-width: 640px){
  .stats-flow__track{ gap: 20px; }
  .metric{ min-width: 220px; }
  .metric__n{ font-size: 38px; }
  .stats-flow__mask:before,
  .stats-flow__mask:after{ width: 72px; }
}

/* reduce motion */
@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-behavior: auto !important;
  }

  .fade-up,
  .fade-up.is-visible{
    opacity: 1;
    transform: none;
    transition: none;
  }

  .stats-flow__track{ animation: none; }
}

#flashWrap{
  position: fixed;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;

  width: 92%;
  max-width: 36rem;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

/* ====== LEGAL PAGES ====== */
.blog-content{
  min-width: 0;
  color: rgba(255,255,255,.85);
  line-height: var(--leading-relaxed);
  font-size: var(--text-lg);
  overflow-wrap: anywhere;
}
.blog-content h2,
.blog-content h3{ color: var(--color-white); margin-top: 2.5rem; margin-bottom: 1.2rem; font-weight: var(--font-weight-bold); border-left: 3px solid #8B5CF6; padding-left: 1rem; }
.blog-content pre{ background: rgba(255,255,255,.05) !important; padding: 1.5rem; border-radius: var(--radius-xl); border: 1px solid rgba(255,255,255,.1); overflow-x: auto; margin: 2rem 0; }
.blog-content code{ font-family: var(--font-mono); font-size: .9em; }
.blog-content img{ display: block; max-width: 100%; height: auto; }
.blog-content table{ display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.blog-content th,
.blog-content td{ min-width: 8rem; }
.blog-content p{ margin-bottom: 1.5rem; }
.blog-content blockquote{ border-left: 4px solid #8B5CF6; background: rgba(139,92,246,.05); padding: 1rem 2rem; font-style: italic; margin: 2rem 0; border-radius: 0 var(--radius-xl) var(--radius-xl) 0; }

.legal-page{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 9rem 1rem 5rem;
  background: #0f0f0f;
}
.legal-page__backdrop{
  position: absolute;
  inset: 0;
  opacity: .35;
}
.legal-page__content{
  position: relative;
  z-index: 1;
  max-width: 52rem;
  margin: 0 auto;
  color: rgba(255,255,255,.78);
  font-size: 1rem;
  line-height: 1.8;
}
.legal-page__content h1{
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -.04em;
  margin: .5rem 0 .75rem;
}
.legal-page__content h2{
  color: #fff;
  font-size: 1.15rem;
  font-weight: 600;
  margin: 2.25rem 0 .45rem;
}
.legal-page__content section + section{
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: .25rem;
}
.legal-page__content a{
  color: #a78bfa;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.legal-page__content a:hover{ color: #c4b5fd; }
.legal-page__eyebrow{
  color: #a78bfa;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.legal-page__updated{
  color: rgba(255,255,255,.45);
  font-size: .8rem;
}
.legal-page__pending{
  margin-top: 2.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(245,158,11,.24);
  border-radius: 1rem;
  background: rgba(245,158,11,.06);
  color: rgba(255,255,255,.62);
  font-size: .85rem;
}

.flash-item{
  width: 100%;
  text-align: center;

  border-radius: .75rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: .75rem 1rem;
  font-size: .875rem;
  color: #fff;
  transition: opacity .5s ease, transform .5s ease;
}