/* ============================================================
   SHOP IMPO — V98 REDESIGN (Etapa 1)
   Sistema de diseño + Header + Hero
   Este archivo se carga AL FINAL de todos los estilos para
   poder limpiar y unificar visualmente sin tocar la lógica
   (IDs, clases con JS enganchado) de versiones anteriores.
   ============================================================ */

:root{
  /* Un solo violeta de acción (antes había 4 tonos compitiendo) */
  --si-accent: #7c3aed;
  --si-accent-2: #9b5de5;
  --si-ink: #ffffff;
  --si-paper: #0b0a0f;
  --si-line-soft: rgba(255,255,255,.10);
  --si-gap-section: clamp(64px, 8vw, 120px);
}

/* ---------- Base tipográfica más disciplinada ---------- */
.si-exp-hero-copy-v60 *,
header, nav, .btn{
  font-family:'Barlow','Inter',sans-serif;
}

/* ============================================================
   HEADER
   ============================================================ */
header{
  background:rgba(9,8,13,.92)!important;
  border-bottom:1px solid var(--si-line-soft)!important;
}
.nav-inner{
  padding:16px 32px!important;
}
.logo-img{
  height:34px!important;
}
nav ul{
  gap:32px!important;
}
nav a{
  font-size:.78rem!important;
  font-weight:700!important;
  letter-spacing:.04em!important;
  color:rgba(255,255,255,.62)!important;
}
nav a:hover{color:#fff!important;}
nav a.nav-cta{
  background:var(--si-ink)!important;
  color:var(--si-paper)!important;
  font-weight:800!important;
  padding:11px 22px!important;
  border-radius:2px!important;
}
.header-tools{
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
}
.header-tool-btn, .account-entry{
  border-radius:2px!important;
}
.header-tool-btn:hover{
  background:rgba(255,255,255,.06)!important;
}

/* ============================================================
   HERO — menos elementos, más jerarquía
   ============================================================ */

/* Ocultar bloques que repiten el mismo mensaje de confianza
   (ya queda dicho una sola vez, más abajo, en .hero-trust) */
.premium-hero-features,
.si-exp-hero-facts-v60,
.si-exp-replay-v60,
.si-v63-kinetic{
  display:none!important;
}

/* Mostrar el contenido del hero sin la coreografía de entrada:
   más confiable y menos "en construcción" a la primera carga */
body.si-experience-v61 .si-exp-hero-copy-v60,
body.si-experience-v61 .si-exp-hero-copy-v60 *,
body.si-experience-v61 .si-exp-hero-facts-v60,
body.si-experience-v61 .si-exp-title-line-v60,
body.si-experience-v61 .si-exp-title-small-v60{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  clip-path:none!important;
  animation:none!important;
  transition:none!important;
}

.si-exp-hero-v60{
  padding-top:150px!important;
  padding-bottom:90px!important;
  min-height:auto!important;
}

.si-exp-hero-copy-v60{
  max-width:640px!important;
}
.si-exp-hero-copy-v60 .eyebrow{
  color:rgba(255,255,255,.55)!important;
  font-size:.72rem!important;
  letter-spacing:.16em!important;
}
.si-exp-hero-copy-v60 h1{
  font-size:clamp(3.2rem, 6.2vw, 6.2rem)!important;
  line-height:.92!important;
  letter-spacing:-.02em!important;
  margin:18px 0 24px!important;
}
.si-exp-title-line-v60{color:#fff!important;}
.si-exp-title-violet-v60{
  color:var(--si-accent-2)!important;
  text-shadow:none!important;
}
.si-exp-title-small-v60{
  display:block!important;
  margin-top:18px!important;
  font-size:clamp(1rem,1.6vw,1.3rem)!important;
  font-weight:500!important;
  color:rgba(255,255,255,.68)!important;
}
.si-exp-hero-copy-v60>p{
  max-width:520px!important;
  font-size:1.02rem!important;
  line-height:1.65!important;
  color:rgba(255,255,255,.62)!important;
}

/* Botones: máximo dos acciones al mismo nivel, la IA queda
   como acción secundaria de menor peso visual */
.si-exp-hero-copy-v60 .btn-row{
  display:flex!important;
  flex-wrap:wrap;
  gap:14px!important;
  margin-top:32px!important;
}
.si-exp-hero-copy-v60 .btn{
  border-radius:2px!important;
}
.si-exp-hero-copy-v60 .btn-ai{
  background:transparent!important;
  border:1px solid var(--si-line-soft)!important;
  color:rgba(255,255,255,.7)!important;
}

/* Una sola línea de confianza, prolija */
.hero-trust{
  margin-top:36px!important;
  gap:0!important;
  display:flex!important;
  flex-wrap:wrap;
}
.hero-trust .trust-pill{
  background:none!important;
  border:0!important;
  border-right:1px solid var(--si-line-soft);
  padding:0 18px!important;
  font-size:.72rem!important;
  font-weight:600!important;
  letter-spacing:.02em!important;
  text-transform:none!important;
  color:rgba(255,255,255,.55)!important;
  backdrop-filter:none!important;
}
.hero-trust .trust-pill:first-child{padding-left:0!important;}
.hero-trust .trust-pill:last-child{border-right:0;}

/* Escenario de producto: más limpio, menos flotante-caótico */
.si-exp-hero-stage-v60{
  filter:none!important;
}
.si-exp-stage-orbit-v60,
.si-v63-stage-axis,
.si-v63-stage-status{
  display:none!important;
}
.si-exp-stage-caption-v60{
  background:rgba(9,8,13,.85)!important;
  border:1px solid var(--si-line-soft)!important;
}

/* Marquee de anuncios: una sola cinta, tipografía sobria */
.si-exp-marquee-v60{
  border-top:1px solid var(--si-line-soft)!important;
  border-bottom:1px solid var(--si-line-soft)!important;
  background:var(--si-paper)!important;
}
.si-exp-marquee-track-v60 span{
  font-weight:700!important;
  letter-spacing:.08em!important;
  color:rgba(255,255,255,.5)!important;
}
.si-exp-marquee-track-v60 i{
  color:var(--si-accent-2)!important;
  opacity:.7;
}

@media(max-width:760px){
  .si-exp-hero-v60{padding-top:120px!important;padding-bottom:50px!important;}
  .si-exp-hero-copy-v60 h1{font-size:clamp(2.6rem,12vw,3.6rem)!important;}
  .hero-trust{gap:0 14px!important;}
  .hero-trust .trust-pill{border-right:0!important;padding:0!important;}
}