/**
 * Tema visual compartido: fondo dinámico (login + panel app).
 * Las animaciones de fondo se desactivan con prefers-reduced-motion
 * sin afectar a spinners u otros keyframes de la página.
 */

.bg-stage{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.bg-shift{
  position:absolute;
  inset:-30% -20%;
  width:140%;
  height:160%;
  background:
    linear-gradient(125deg,
      rgba(224,231,255,.95) 0%,
      rgba(240,253,250,.88) 25%,
      rgba(219,234,254,.92) 50%,
      rgba(237,233,254,.9) 75%,
      rgba(224,242,254,.95) 100%);
  background-size:320% 320%;
  animation:bgShift 18s ease-in-out infinite;
}
@keyframes bgShift{
  0%,100%{ background-position:0% 40%; }
  50%{ background-position:100% 60%; }
}
.bg-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(72px);
  opacity:.55;
  animation:orbFloat 14s ease-in-out infinite;
}
.bg-orb--1{
  width:min(52vw,420px);
  height:min(52vw,420px);
  top:-8%;
  right:-5%;
  background:radial-gradient(circle at 30% 30%, #3b82f6, transparent 70%);
  animation-delay:0s;
}
.bg-orb--2{
  width:min(48vw,380px);
  height:min(48vw,380px);
  bottom:-12%;
  left:-8%;
  background:radial-gradient(circle at 50% 50%, #14b8a6, transparent 68%);
  animation-delay:-4s;
  animation-duration:17s;
}
.bg-orb--3{
  width:min(40vw,320px);
  height:min(40vw,320px);
  top:42%;
  left:35%;
  background:radial-gradient(circle at 40% 40%, #8b5cf6, transparent 65%);
  opacity:.35;
  animation-delay:-7s;
  animation-duration:20s;
}
@keyframes orbFloat{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(3%,-4%) scale(1.06); }
  66%{ transform:translate(-4%,3%) scale(.96); }
}
.bg-grid{
  position:absolute;
  inset:0;
  opacity:.045;
  background-image:
    linear-gradient(rgba(15,23,42,.9) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.9) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 45%, #000 20%, transparent 75%);
  mask-image:radial-gradient(ellipse 85% 70% at 50% 45%, #000 20%, transparent 75%);
}

@media (prefers-reduced-motion: reduce){
  .bg-shift,
  .bg-orb{
    animation:none !important;
  }
}

/* ——— Franja de banners de valor / confianza (login + app) ——— */
.value-banners{
  position:relative;
  z-index:1;
  width:100%;
  margin:0 0 clamp(16px, 3vw, 22px);
  padding:clamp(12px, 2.5vw, 16px) clamp(12px, 3vw, 18px);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.58);
  background:linear-gradient(125deg, rgba(255,255,255,.72) 0%, rgba(248,250,252,.88) 45%, rgba(239,246,255,.78) 100%);
  box-shadow:0 6px 28px rgba(15,23,42,.07), 0 1px 0 rgba(255,255,255,.85) inset;
  backdrop-filter:saturate(1.12) blur(12px);
  -webkit-backdrop-filter:saturate(1.12) blur(12px);
}
.value-banners__eyebrow{
  margin:0 0 10px;
  text-align:center;
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#64748b;
}
.value-banners__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:10px 12px;
}
.value-banner{
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex:1 1 200px;
  max-width:100%;
  min-width:min(100%, 180px);
  margin:0;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(226,232,240,.95);
  background:rgba(255,255,255,.82);
  font-size:clamp(.78rem, 2.4vw, .84rem);
  font-weight:600;
  line-height:1.4;
  color:#334155;
  box-shadow:0 2px 10px rgba(15,23,42,.04);
}
.value-banner strong{
  display:block;
  font-weight:800;
  color:#0f172a;
  letter-spacing:-.02em;
  margin-bottom:2px;
  font-size:clamp(.82rem, 2.5vw, .88rem);
}
.value-banner__content{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.value-banner__title{
  margin:0;
  font-weight:800;
  color:#0f172a;
  letter-spacing:-.02em;
  font-size:clamp(.82rem, 2.5vw, .9rem);
  line-height:1.25;
}
.value-banner__tagline{
  margin:0;
  font-weight:700;
  font-size:clamp(.75rem, 2.2vw, .8125rem);
  color:#475569;
  line-height:1.35;
}
.value-banner__desc{
  margin:0;
  font-weight:500;
  font-size:clamp(.74rem, 2.2vw, .8125rem);
  color:#64748b;
  line-height:1.5;
}
.value-banner__dot{
  flex-shrink:0;
  width:8px;
  height:8px;
  margin-top:5px;
  border-radius:50%;
  background:linear-gradient(145deg, #3b82f6, #6366f1);
  box-shadow:0 0 0 3px rgba(59,130,246,.18);
}
.value-banner__dot--teal{
  background:linear-gradient(145deg, #14b8a6, #0d9488);
  box-shadow:0 0 0 3px rgba(20,184,166,.2);
}
.value-banner__dot--amber{
  background:linear-gradient(145deg, #f59e0b, #d97706);
  box-shadow:0 0 0 3px rgba(245,158,11,.2);
}
.value-banner__dot--violet{
  background:linear-gradient(145deg, #8b5cf6, #6366f1);
  box-shadow:0 0 0 3px rgba(139,92,246,.18);
}
@media (max-width:480px){
  .value-banner{
    flex:1 1 100%;
    min-width:0;
  }
}

/* ——— Barra superior: reloj UTC + contador (una sola franja, tipografía unificada) ——— */
.topbar-pub{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid rgba(226,232,240,.95);
  background:rgba(255,255,255,.82);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset;
  backdrop-filter:saturate(1.1) blur(10px);
  -webkit-backdrop-filter:saturate(1.1) blur(10px);
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  line-height:1.25;
}
.topbar-pub__seg{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
}
.topbar-pub__sep{
  flex-shrink:0;
  width:1px;
  align-self:stretch;
  min-height:1.25rem;
  margin:0 14px;
  background:rgba(148,163,184,.4);
  border-radius:1px;
}
.topbar-pub__lbl{
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#64748b;
}
.topbar-pub__lbl--plain{
  text-transform:none;
  letter-spacing:.04em;
  font-size:.68rem;
  font-weight:800;
  color:#64748b;
  line-height:1.2;
  max-width:11rem;
}
/* Hora y contador: mismo cuerpo tipográfico */
.topbar-pub__num,
.topbar-pub__seg time{
  font-variant-numeric:tabular-nums;
  font-weight:800;
  font-size:clamp(.875rem, 2.6vw, .9375rem);
  color:#0f172a;
  letter-spacing:.02em;
}
.topbar-pub__date{
  font-size:clamp(.72rem, 2.3vw, .8rem);
  font-weight:600;
  color:#475569;
  text-transform:capitalize;
}
@media (max-width:520px){
  .topbar-pub{
    justify-content:center;
    width:100%;
    max-width:100%;
  }
  .topbar-pub__sep{
    margin:0 10px;
  }
}
@media (max-width:400px){
  .topbar-pub{
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:10px 14px;
  }
  .topbar-pub__sep{
    width:100%;
    height:1px;
    min-height:0;
    margin:0;
    align-self:stretch;
  }
  .topbar-pub__seg{
    justify-content:center;
    text-align:center;
  }
}

/* ——— Panel app: profundidad y microinteracciones ——— */
@media (hover:hover){
  .page-app .wrap .grid > .card{
    transition:transform .22s ease, box-shadow .22s ease, border-color .2s ease;
  }
  .page-app .wrap .grid > .card:hover{
    transform:translateY(-3px);
    box-shadow:
      0 20px 50px rgba(15,23,42,.1),
      0 1px 0 rgba(255,255,255,.85) inset;
    border-color:rgba(255,255,255,.85);
  }
}
.page-app .wrap .grid > .card:active{
  transform:translateY(-1px);
}
.page-app #barFill{
  box-shadow:0 0 12px rgba(59,130,246,.35);
}
@media (prefers-reduced-motion: reduce){
  .page-app .wrap .grid > .card,
  .page-app .wrap .grid > .card:hover,
  .page-app .wrap .grid > .card:active{
    transition:none !important;
    transform:none !important;
  }
}

/* Logo de marca (login + panel) — static/images/Logo SGtuners IA.png */
.site-logo{
  display:block;
  height:clamp(44px, 11vw, 56px);
  width:auto;
  max-width:min(320px, 90vw);
  object-fit:contain;
  object-position:left center;
  flex-shrink:0;
}
.site-logo--topbar{
  height:clamp(34px, 7vw, 42px);
  max-width:min(200px, 55vw);
}