:root{
  --brand: #8b5cf6;             
  --brand-rgb: 139, 92, 246;     
  --hero-dark-rgb: 10, 11, 28; 
  --hero-bg: #1d022bff;  
  --page-bg: #0b0f22;
  --ticker-speed: 28s;          
  --ticker-gap: 2.25rem;        
}
body{ background: var(--page-bg); }

/* Si tu hero es .hero-video o .hero-split: aplica a ambos o al que uses */
.hero-video, .hero-split{ position: relative; }

/* Degradado al final del hero para que se funda con el body */
.hero-video::after, .hero-split::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height: 120px;                           /* ajusta el alto del fade */
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(11,15,34,0) 0%,                   /* transparente */
    rgba(11,15,34,1) 100%                  /* = var(--page-bg) (#0b0f22) */
  );
}

.hero-video{
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  color: #fff;
  background: rgb(var(--hero-dark-rgb));
  overflow: hidden;
}

.hero-video__bg,
.hero-video__overlay{
  position: absolute; inset: 0;
}

.hero-video__media{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.05);
}

/* Overlay con tu color + capa oscura para legibilidad */
.hero-video__overlay{
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(var(--brand-rgb), .55) 0%, rgba(var(--hero-dark-rgb), .70) 55%),
    linear-gradient(0deg, rgba(0,0,0,.25), rgba(0,0,0,.25));
  mix-blend-mode: normal;
}

.hero-video__content{
  z-index: 2;
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.btn-cta{
  background:#fff;
  color: var(--brand);
  border: 2px solid rgba(var(--brand-rgb), .9);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease, transform .05s;
}
.btn-cta:hover{
  background: rgba(var(--brand-rgb), .06);   /* sutil tinte al pasar el mouse */
  color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.6);
}
.btn-cta:active{ transform: translateY(1px); }
.btn-cta:focus-visible{
  outline: 3px solid rgba(var(--brand-rgb), .35);
  outline-offset: 2px;
}

/* Responsive tweaks */
@media (max-width: 991.98px){
  .hero-video{ min-height: 75vh; }
  .hero-video__content{ padding-top: 4rem; padding-bottom: 4rem; }
  .hero-video h1{ font-size: clamp(2rem, 6vw, 3rem); }
}

:root { --nav-h: 53px; }

body{
  padding-top: var(--nav-h);       /* evita que el contenido quede oculto */
  scroll-padding-top: var(--nav-h);/* útil para anclas/scroll suave */
}


.navbar.is-scrolled{
  box-shadow: 0 6px 20px rgba(16,24,40,.08);
}
/* Cursor y comportamiento del “typewriter” */
.tw {
  white-space: nowrap;
  display: inline-block;
  position: relative;
}
.tw::after {
  content: '';
  display: inline-block;
  width: .08em;
  height: 1em;
  background: currentColor;
  margin-left: .15em;
  animation: tw-blink .9s steps(1, end) infinite;
  transform: translateY(.12em); /* ajusta si cambia la línea base */
}
@keyframes tw-blink { 0%, 100% {opacity: 1} 50% {opacity: 0} }

.hero-title [class*="bg-"],
.hero-title mark,
.hero-title span {
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
#heroTitle.caret::after{
  content: '|';
  display: inline-block;
  margin-left: .15em;
  line-height: 1;
  animation: caret-blink .9s steps(1,end) infinite;
  color: currentColor;
}
@keyframes caret-blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Entrada suave del H1 (opcional) */
#heroTitle{ opacity: 0; transform: translateY(8px); filter: blur(1px); }
#heroTitle.ready{ opacity:1; transform:none; filter:none; transition: .35s ease-out; }

.hero-split{
  position: relative;
  overflow: hidden;
  background: var(--hero-bg);
  padding-block: clamp(4rem, 8vw, 7rem);
}

/* Gradientes suaves (izq morado, der luz) */
.hero-split::before,
.hero-split::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
}
.hero-split::before{
  background: radial-gradient(60rem 60rem at -10% 20%,
    rgba(var(--brand-rgb), .28) 0%, rgba(0,0,0,0) 60%);
}
.hero-split::after{
  background: radial-gradient(55rem 55rem at 120% 20%,
    rgba(255,255,255,.10) 0%, rgba(0,0,0,0) 60%);
}

/* Tipografía */
.hero-split h1{ letter-spacing:-.02em; }
.hero-split p{ max-width: 56ch; }

/* Imagen */
.hero-illustration{
  max-width: 640px; width: 100%;
  filter: drop-shadow(0 10px 40px rgba(0,0,0,.35));
  transform: translateZ(0);
}

/* Botón corporativo: fondo blanco + texto/borde marca */
.btn-cta{
  background:#fff;
  color: var(--brand);
  border:2px solid rgba(var(--brand-rgb), .9);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  transition: background .2s, color .2s, box-shadow .2s, border-color .2s, transform .05s;
}
.btn-cta:hover{
  background: rgba(var(--brand-rgb), .06);
  color: var(--brand);
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
}
.btn-cta:active{ transform: translateY(1px); }
.btn-cta:focus-visible{
  outline: 3px solid rgba(var(--brand-rgb), .35);
  outline-offset: 2px;
}

/* Responsive detalles */
@media (max-width: 991.98px){
  .hero-split .row{ text-align:center; }
  .hero-split p{ margin-inline:auto; }
}

.ticker{
  position: relative;
  background: var(--page-bg);
  padding-block: .9rem;
  border-block: 1px solid rgba(255,255,255,.06);
  overflow: clip; /* recorta edge-fades */
}

.ticker__mask{
  overflow: hidden;
  position: relative;
}

/* Fades laterales para que no se note el corte */
.ticker__mask::before,
.ticker__mask::after{
  content:"";
  position:absolute; top:0; bottom:0; width:80px; pointer-events:none;
  z-index: 2;
}
.ticker__mask::before{
  left:0;
  background: linear-gradient(to right, var(--page-bg), rgba(11,15,34,0));
}
.ticker__mask::after{
  right:0;
  background: linear-gradient(to left, var(--page-bg), rgba(11,15,34,0));
}

.ticker__track{
  display: flex;
  width: max-content;
  animation: tickerScroll var(--ticker-speed) linear infinite;
}

.ticker__list{
  display: inline-flex;
  align-items: center;
  gap: var(--ticker-gap);
  padding: 0; margin: 0;
  list-style: none;
  white-space: nowrap;           /* una sola línea */
}

.ticker__list li{
  color: rgba(255,255,255,.85);
  font-weight: 500;
  letter-spacing: .01em;
  font-size: clamp(.9rem, 2vw, 1.125rem);
}

/* separador | entre ítems */
.ticker__list li + li::before{
  content: "|";
  color: rgba(255,255,255,.35);
  margin-right: .9rem;
}

/* pausa al hover */
.ticker:hover .ticker__track{ animation-play-state: paused; }

/* movimiento continuo: desplaza exactamente la mitad (porque hay 2 grupos) */
@keyframes tickerScroll{
  to{ transform: translateX(-50%); }
}

/* accesibilidad: respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  .ticker__track{ animation: none; }
}
.formula-scroll{ position:relative; overflow:hidden; background:var(--page-bg); }

/* Lista izquierda */
.formula-list{
  list-style:none; margin:0; padding:0;
  line-height:1.12;
}
.f-item{
  font-weight:800;
  font-size: clamp(2rem, 6vw, 4.25rem);
  letter-spacing:-.02em;
  margin:0 0 .35em;
  color: rgba(255,255,255,.35);           /* inactivo */
  transition: color .28s ease;
}
.f-item.is-active{ color:#fff; }          /* activo (texto blanco) */
.f-item.is-active .accent{ color: var(--brand); }

/* Texto derecho */
.formula-detail{
  color: rgba(255,255,255,.8);
  font-size: clamp(1rem, 2.1vw, 1.25rem);
  max-width: 42rem;
  opacity:0; transform: translateY(8px); filter: blur(2px);
  transition: opacity .28s ease, transform .28s ease, filter .28s ease;
}
.formula-detail.show{ opacity:1; transform:none; filter:none; }

/* Responsive: centra en móvil */
@media (max-width: 991.98px){
  .formula-scroll .row{ text-align:center; }
  .formula-detail{ margin-inline:auto; }
}