/* =========================================================
   VossStore · Base, tipografía, utilidades y animaciones
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img,svg{ display:block; max-width:100%; }
/* Las fotos van en <picture> (AVIF + respaldo PNG): que no cuente para el layout */
picture{ display:contents; }
[hidden]{ display:none !important; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; padding:0; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:700; line-height:1.05; letter-spacing:-.03em; margin:0; }
p{ margin:0; }
::selection{ background:var(--accent); color:#05050A; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* Scrollbar */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:#26262F; border-radius:99px; border:3px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover{ background:#33333F; }

/* ---------- Fondo ambiental ---------- */
.bg-fx{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-fx__blob{
  position:absolute; border-radius:50%; filter:blur(120px); opacity:.30;
}
.bg-fx__blob--a{
  width:52vw; height:52vw; max-width:760px; max-height:760px;
  top:-16vw; right:-12vw; background:radial-gradient(circle,#2A6BFF 0%, transparent 68%);
  animation:drift 26s var(--ease) infinite alternate;
}
.bg-fx__blob--b{
  width:46vw; height:46vw; max-width:640px; max-height:640px;
  bottom:-14vw; left:-10vw; background:radial-gradient(circle,#7B5CFF 0%, transparent 68%);
  opacity:.22; animation:drift 32s var(--ease) infinite alternate-reverse;
}
.bg-fx__grain{
  position:absolute; inset:-200%; opacity:.035; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes drift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(-6%,8%,0) scale(1.16); }
}

/* ---------- Layout ---------- */
.app{ position:relative; z-index:1; min-height:60vh; }
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container--narrow{ max-width:960px; }
.section{ padding:clamp(64px,8vw,124px) 0; position:relative; }
.section--tight{ padding:clamp(48px,5vw,76px) 0; }
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; }
.hide-desktop{ display:none; }

/* ---------- Cabeceras de sección ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-body); font-size:11.5px; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--accent);
}
.eyebrow::before{ content:""; width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--accent)); }
.eyebrow--center::after{ content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--accent),transparent); }

.s-title{
  font-size:clamp(30px,4.6vw,60px); font-weight:700; letter-spacing:-.035em;
  margin-top:18px; text-wrap:balance;
}
.s-title em{
  font-style:normal;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.s-sub{ color:var(--text-2); font-size:clamp(15px,1.5vw,17.5px); margin-top:16px; max-width:56ch; text-wrap:pretty; }
.s-head--center{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.s-head--center .s-sub{ margin-inline:auto; }
.s-head--split{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.s-head--split>div{ flex:1 1 380px; min-width:0; }
.s-head--split>.btn, .s-head--split>a{ flex:none; }

/* ---------- Utilidades ---------- */
.text-grad{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.muted{ color:var(--muted); }
.t2{ color:var(--text-2); }
.hairline{ height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent); border:0; margin:0; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:var(--d,0ms);
}

/* ---------- Animaciones compartidas ---------- */
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes pop{ 0%{ transform:scale(.7); opacity:0 } 60%{ transform:scale(1.08) } 100%{ transform:scale(1); opacity:1 } }
@keyframes shimmer{ 0%{ background-position:-140% 0 } 100%{ background-position:240% 0 } }
@keyframes marquee{ 0%{ transform:translateX(0) } 100%{ transform:translateX(-50%) } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@keyframes bump{ 0%{ transform:scale(1) } 40%{ transform:scale(1.28) } 100%{ transform:scale(1) } }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

@media (max-width: 900px){
  .hide-desktop{ display:revert; }
  .hide-mobile{ display:none !important; }
}

/* ---------- Iconos en línea dentro de texto ---------- */
p svg, .bcard__note svg, .muted svg{
  width:15px; height:15px; display:inline-block; vertical-align:-2.5px; flex:none;
}

/* ---------- Dimensionado de las "fotos" SVG de producto ---------- */
svg.dev{ height:100%; width:auto; display:block; }
.pcard__device, .ftile__device, .hero__device{ display:block; }