/* ------------------------------
   INDEX.CSS (aislado para el HOME)
   Namespace: ab-
---------------------------------*/

/* Layout base del home */
html, body{
  overflow-y:auto;
  height:auto;
}

.ab-container{
  width:min(1200px, 92vw);
  margin-inline:auto;
}

/* ---------- Header ---------- */
.ab-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(8,12,20,.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(0,255,255,.08);
}

.ab-header__inner{
  width:min(1200px, 92vw);
  margin-inline:auto;
  padding:14px 0 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.ab-logo{
  display:block;
  height:70px;
  width:auto;
  margin:0 auto;
}

/* Navegación */
.ab-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}

.ab-btn{
  --b: 1px;
  --padY: .6rem;
  --padX: 1.2rem;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: var(--padY) var(--padX);
  border: var(--b) solid rgba(0,224,255,.35);
  color: var(--ab-cyan, #00e0ff);
  border-radius: 12px;
  background: rgba(0,16,21,.55);
  box-shadow: 0 0 0 rgba(0,224,255,0);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.2px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.ab-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(0,224,255,.35);
  border-color: rgba(0,224,255,.6);
  background: rgba(0,28,36,.7);
}

.ab-btn--primary{
  background: #00e0ff;
  color:#001015;
  border-color: #00e0ff;
  box-shadow: 0 0 18px rgba(0,224,255,.45);
}
.ab-btn--primary:hover{
  box-shadow: 0 0 26px rgba(0,224,255,.6);
}

/* ---------- Hero ---------- */
.ab-hero{
  padding: 72px 0 56px;
  border-top:1px solid rgba(0,255,255,.08);
  text-align:center;
}

.ab-hero__title{
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  color: var(--ab-cyan, #00e0ff);
  margin: 10px 0 14px;
  letter-spacing: 2px;
}

.ab-hero__lead{
  max-width: 860px;
  margin: 0 auto 20px;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
}

.ab-hero__actions{
  margin-top: 10px;
}

/* CTA */
.ab-cta{
  display:inline-block;
  padding: .9rem 1.6rem;
  color:#001015;
  background:#00e0ff;
  border-radius: 12px;
  border:1px solid #00e0ff;
  text-decoration:none;
  font-weight:800;
  box-shadow:0 0 18px rgba(0,224,255,.35);
  transition: transform .2s ease, box-shadow .2s ease;
  margin-top: 15px; /* Espacio adicional para separar del texto superior */
}

.ab-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 0 24px rgba(0,224,255,.55);
}

.ab-cta--big{ padding:1rem 2rem; font-size:1.05rem; }

/* ---------- Secciones ---------- */
.ab-section{
  padding: 56px 0;
  text-align:center;
}
.ab-section--alt{
  background: rgba(255,255,255,.02);
}
.ab-section h2, .ab-section h3{
  color: var(--ab-cyan, #00e0ff);
  margin-bottom: .8rem;
}
.ab-section p{
  max-width: 880px;
  margin: 0 auto;
  line-height: 1.6;
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
}

/* Grid placeholder para Universo (futuras cards) */
.ab-section--grid .ab-container{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}

/* Preview de Core */
.ab-core__preview{
  margin: 1.2rem auto 0;
}
.ab-core__preview img{
  width:min(860px, 92%);
  height:auto;
  border-radius:12px;
  border:1px solid rgba(0,255,255,.12);
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
}

/* ---------- CTA final ---------- */
.ab-section--center{ text-align:center; }

/* ---------- Footer ---------- */
.ab-footer{
  margin-top: 40px;
  border-top:1px solid rgba(0,255,255,.08);
  padding: 20px 0 36px;
  text-align:center;
}
.ab-footer a{ color: var(--ab-cyan, #00e0ff); text-decoration:none; }
.ab-footer a:hover{ text-decoration:underline; }

/* ---------- Responsivo ---------- */
@media (max-width: 720px){
  .ab-logo{ height:58px; }
  .ab-btn{ padding:.55rem 1rem; border-radius:10px; }
  .ab-hero{ padding: 56px 0 40px; }
}