/* ----------------------------------------------------------
|  ASX Academy – Estilos específicos de la L A N D I N G
|  (main.css contiene globales; aquí afinamos hero, badges,
|   secciones, CTA, WhatsApp, etc.)
|----------------------------------------------------------- */

/* ---------- Variables ---------- */
:root {
  --asx-primary:   #0d6efd;   /* azul Bootstrap */
  --asx-warning:   #f7c70f;   /* amarillo ASX */
  --asx-dark:      #0b0f19;
  --asx-light:     #f8f9fa;
}

/* ---------- Hero Section ---------- */
.hero {
  background: url('../img/hero_ai.png') center / cover no-repeat fixed;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: #fff;
  position: relative;
}
.hero::after {                     /* capa oscura */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.85));
  pointer-events: none;
}
.hero-content { z-index: 1; }
.hero .btn-warning {
  font-weight: 600;
  color: #000;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,.4);
}
.hero .btn-outline-light:hover { color: var(--asx-dark); }

/* ---------- Navbar ---------- */
.navbar-brand { letter-spacing: .5px; }
.navbar-nav .nav-link {
  font-weight: 500;
  transition: color .25s;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--asx-primary);
}

/* ---------- Secciones generales ---------- */
section[id] { scroll-margin-top: 72px; }  /* compensa navbar sticky */
section { padding-top: 4rem; padding-bottom: 4rem; }
@media (max-width: 575.98px){
  section { padding: 3rem 0; }
}

/* ---------- Social proof logos ---------- */
#socialproof img { filter: grayscale(100%) contrast(0.9) opacity(.8); }
#socialproof img:hover { filter: none; }

/* ---------- Beneficios cards ---------- */
#benefits .border {
  transition: transform .3s, box-shadow .3s;
}
#benefits .border:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* ---------- Planes ---------- */
#plans .card { transition: transform .3s; }
#plans .card:hover { transform: translateY(-6px); }

/* ---------- WhatsApp floating ---------- */
.floating-whatsapp {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1055;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: transform .25s, box-shadow .25s;
}
.floating-whatsapp:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 26px rgba(0,0,0,.35);
}
.floating-whatsapp img {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.2));
}

/* ---------- FAQ accordion ---------- */
.accordion-button:not(.collapsed) {
  background: var(--asx-light);
  color: var(--asx-primary);
  font-weight: 600;
}

/* ---------- CTA final ---------- */
.bg-primary.text-white .btn-warning:hover {
  filter: brightness(.9);
}

/* ---------- Footer ---------- */
footer ul li:not(:last-child)::after {
  content: '·';
  margin-left: .5rem;
  color: #adb5bd;
}

/* ---------- Utilidades ---------- */
.badge.bg-warning { color:#212529; }
.list-inline-item a { transition: opacity .2s; }
.list-inline-item a:hover { opacity:.8; }

/* ---------- Retoques para iOS notch ---------- */
@supports(padding: max(0px)){
  body { padding-bottom: env(safe-area-inset-bottom); }
  .floating-whatsapp { bottom: calc(24px + env(safe-area-inset-bottom)); }
}