:root{--bg:#0b1220;--card:#10192e;--muted:#8aa0b4;--primary:#22d3ee;--accent:#60a5fa}

html,body{background:var(--bg);color:white;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
.container{max-width:1120px}
.glass{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08)}
.shadow-soft{box-shadow:0 20px 40px rgba(0,0,0,.35)}
.chip{border:1px solid rgba(255,255,255,.14)}
/* Logos gris → color con una clase corta (puedes usarla si prefieres) */
.logo-color{filter:grayscale(1) contrast(1.25);opacity:.8;transition:filter .2s,opacity .2s,transform .2s}
.logo-color:hover,.logo-color:focus-visible{filter:none;opacity:1;transform:translateY(-2px)}

/* Aislar el stacking del hero con video (opcional pero recomendado) */
#intro-video { position: relative; isolation: isolate; }
#intro-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* ===== FAB stack ===== */
.fab-stack {
    position: fixed;
    bottom: 28px;
    right: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 50;
}

/* ===== Fondo translúcido opcional detrás ===== */
.fab-stack::before {
    content: "";
    position: absolute;
    inset: -10px;
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    z-index: -1;
}

/* ===== Individual FAB buttons ===== */
.fab {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #22d3ee, #0ea5e9);
    box-shadow:
        0 0 10px rgba(34, 211, 238, 0.6),
        0 0 25px rgba(34, 211, 238, 0.4),
        inset 0 0 8px rgba(255, 255, 255, 0.2);
    transition: all 0.25s ease;
    backdrop-filter: blur(6px);
}

/* ===== Hover ===== */
.fab:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow:
        0 0 20px rgba(34, 211, 238, 0.9),
        0 0 40px rgba(34, 211, 238, 0.6),
        0 0 60px rgba(14, 165, 233, 0.4);
}

/* ===== Iconos ===== */
.fab img {
    filter: brightness(1.2) drop-shadow(0 0 6px rgba(255, 255, 255, 0.25));
    width: 28px;
    height: 28px;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.fab:hover img {
    transform: scale(1.1);
    filter: brightness(1.8) drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}


/* === HERO ROTATOR: colores y tamaños de los titulares === */

/* Título + línea en negrita */
.hr-h1{
  /* bajamos tamaño general del h1 */
  font-weight: 100;
  line-height: 1.08;
  /* antes probablemente era ~56px; lo dejamos un poco más chico */
  font-size: clamp(26px, 4.2vw, 46px);
  color: #fff;                 /* blanco */
  text-shadow: 0 4px 22px rgba(0,0,0,.45);
}

/* La línea “fuerte” (segunda línea) también en blanco */
.hr-h1 .hr-strong{
  color: #fff !important;      /* forzamos blanco si tenía cyan */
}

/* Subtítulos debajo del h1 (si quieres un poco menos intensos) */
.hr-p{
  color: rgba(255,255,255,.92);
  font-size: clamp(14px, 1.5vw, 18px);
}

/* Dots (si quieres que el activo se note un poco más) */
.hr-dots button[aria-current="true"]{
  background: #fff;            /* punto activo blanco */
}


/* leve oscurecimiento del video para legibilidad */
#intro-video::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.38));
  z-index:1; pointer-events:none;
}

/* ===== Strip de clientes (marquee) ===== */
.clients-wrap{
  position: relative;
  overflow: hidden;
  padding: 20px 0;
}

.clients-track{
  display: flex;
  /* Dos grupos seguidos para el loop infinito */
  animation: clients-marquee 28s linear infinite;
  will-change: transform;
}

.clients-track > .group{
  display: flex;
  align-items: center;
  gap: 48px;           /* espacio entre logos */
  flex-shrink: 0;      /* que no se encoja cada grupo */
}

/* Tamaño y estilo de los logos */
.clients-logo{
  height: 80px;        /* controla la altura del logo */
  width: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(.8);
  transition: filter .2s, opacity .2s, transform .2s;
}
.clients-logo:hover{
  filter: none; opacity: 1; transform: translateY(-1px);
}

/* Animación: mueve el track la mitad de su ancho porque hay dos grupos */
@keyframes clients-marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Respeto accesibilidad: sin animación para quien la reduzca */
@media (prefers-reduced-motion: reduce){
  .clients-track{ animation: none; }
}

img,
svg {
    max-width: 100%;
    height: auto;
}

/* Opcional: sutil brillo al pasar el mouse en tarjetas */
.glass:hover { box-shadow: 0 22px 60px rgba(0,0,0,.35); transition: box-shadow .25s ease, transform .25s ease; transform: translateY(-2px); }

/* Cards simples (sin .glass) con borde suave */
.bg-\[color\:var\(\-\-card\)\] { backdrop-filter: blur(2px); }

/* Badges utilitarios */
.badge { border:1px solid rgba(255,255,255,.1); border-radius:999px; padding:.15rem .5rem; font-size:12px; }

header img {
  filter: drop-shadow(0 0 4px rgba(0, 255, 255, 0.2));
  transition: transform 0.2s ease;
}
header img:hover {
  transform: scale(1.05);
}
footer {
  background: linear-gradient(180deg, #0b1220 0%, #0e1528 100%);
}
footer a:hover {
  text-shadow: 0 0 6px rgba(34, 211, 238, 0.5);
}

/* === Fondo global con destellos cyan reutilizable === */
:root{
  --glow-cyan: rgba(34,211,238,.28); /* #22d3ee */
  --glow-blue: rgba(14,165,233,.22); /* #0ea5e9 */
}

/* Crea stacking para poder poner el glow detrás */
body { position: relative; }

/* La capa que dibuja los halos */
.bg-glow{
  position: fixed;   /* se mantiene al hacer scroll */
  inset: 0;
  pointer-events: none; /* no bloquea clics */
  z-index: 0;

  background:
    radial-gradient(900px 900px at 85% 20%, var(--glow-cyan), transparent 60%),
    radial-gradient(600px 600px at 10% 70%, var(--glow-blue), transparent 55%),
    radial-gradient(520px 520px at 60% 95%, rgba(34,211,238,.14), transparent 55%);
  filter: blur(1px);
  opacity: .9;  /* intensidad global */
}

/* El contenido principal por encima */
.has-glow main { position: relative; z-index: 10; }

/* Afinado responsivo: halos más suaves/pequeños en pantallas chicas */
@media (max-width: 1024px){
  .bg-glow{
    background:
      radial-gradient(700px 700px at 80% 15%, var(--glow-cyan), transparent 58%),
      radial-gradient(520px 520px at 15% 75%, var(--glow-blue), transparent 52%);
    opacity: .85;
  }
}
@media (max-width: 640px){
  .bg-glow{
    background:
      radial-gradient(520px 520px at 78% 12%, var(--glow-cyan), transparent 56%),
      radial-gradient(420px 420px at 18% 78%, var(--glow-blue), transparent 50%);
    opacity: .8;
  }
}

/* halo sutil para tarjetas “pro” -3 PILARES DE NOSOTROS */
.pro-ring {
  position: relative;
  isolation: isolate;
}
.pro-ring::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:inherit;
  background: radial-gradient(60% 120% at 10% -10%, rgba(34,211,238,.18), transparent 55%),
              radial-gradient(70% 100% at 110% 50%, rgba(14,165,233,.12), transparent 50%);
  filter: blur(6px);
  z-index:-1;
  opacity:.7;
  transition: opacity .25s ease, transform .25s ease;
}
.pro-ring:hover::before{ opacity:1; transform: scale(1.02); }

/* micro-animación de subrayado */
.ink-underline{
  background:
    linear-gradient(currentColor,currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .25s;
}
.ink-underline:hover{
  background-size: 100% 2px;
}

/* si quieres el glass un poco más visible SOLO aquí */
#contacto .glass{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  backdrop-filter: blur(10px);
}

/* ====== CLIP REVEAL (texto que aparece desde abajo tipo máscara) ====== */
.clip-reveal {
  --cr-delay: 0ms;
  position: relative;
  display: inline-block;
  transform: translateY(8px);
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  animation: clip-reveal 700ms cubic-bezier(.2,.65,.3,1) var(--cr-delay) forwards;
}
.clip-reveal.clip-reveal-play {
  animation: clip-reveal 700ms cubic-bezier(.2,.65,.3,1) 0ms forwards;
}
@keyframes clip-reveal {
  0%   { transform: translateY(8px); opacity: 0; clip-path: inset(0 0 100% 0); }
  60%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; clip-path: inset(0 0 0 0); }
}
.clip-fade {
  --cr-delay: 0ms;
  opacity: 0;
  transform: translateY(6px);
  animation: clip-fade 600ms ease-out var(--cr-delay) forwards;
}
@keyframes clip-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ====== HOVER TILT SUAVE (sin JS) ====== */
.tilt-sm {
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease;
}
.tilt-sm:hover {
  transform: perspective(900px) rotateX(2deg) rotateY(-2deg) translateY(-2px);
  box-shadow: 0 14px 48px rgba(0,0,0,.35);
}

/* ====== CTA Ripple ====== */
.btn-ripple {
  position: relative; overflow: hidden;
}
.btn-ripple::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(255,255,255,.65), transparent 40%);
  opacity: 0; transition: opacity .35s ease, transform .35s ease;
  transform: scale(0.2);
}
.btn-ripple:hover::after {
  opacity: .35; transform: scale(1.4);
}

/* Soporte para calcular origen del ripple con JS opcional */
.btn-ripple { --rx:50%; --ry:50%; }