/*
 * Sistema visual transversal — Atajos Académicos
 * Las páginas pueden conservar estilos propios para su contenido, pero los
 * componentes compartidos se definen exclusivamente aquí.
 */
:root {
  --aa-verde: #2e6b2b;
  --aa-verde-oscuro: #255a26;
  --aa-azul: #283b86;
  --aa-borde: #dce5e1;
  --aa-texto-suave: #667085;
}

html { scroll-behavior: smooth; }

/* Encabezado y navegación */
.top {
  background: linear-gradient(120deg, #f1effa, #fff 52%, #edf7f0);
  border-bottom: 1px solid var(--aa-borde);
  position: sticky;
  top: 0;
  z-index: 30;
}

.top .nav {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top .logo { width: 190px; max-height: 58px; object-fit: contain; }

.top .links {
  display: flex;
  gap: 24px;
  align-items: center;
  font-size: .94rem;
  font-weight: 650;
}

.top .links a { transition: color .18s ease, transform .18s ease; }
.top .links a:hover { color: var(--aa-verde); }

.top .links .cta,
.cta,
.button {
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.top .links .cta:hover,
.cta:hover,
.button:hover {
  color: #fff;
  background: var(--aa-verde-oscuro);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(46, 107, 43, .28);
}

.top .links .cta:hover { box-shadow: 0 5px 14px rgba(46, 107, 43, .3); }

/* Variantes claras: conservan su identidad sobre cuadros azules. */
.button.alt {
  background: transparent;
  color: var(--aa-azul);
  border: 1px solid #afb9dc;
}

.button.light-button {
  background: #fff;
  color: var(--aa-azul);
  border: 1px solid rgba(255, 255, 255, .75);
}

.button.alt:hover,
.button.light-button:hover {
  background: #f1effa;
  color: var(--aa-azul);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}

/* Pie de página */
.foot {
  padding: 24px 0;
  border-top: 1px solid var(--aa-borde);
  background: #fff;
  color: var(--aa-texto-suave);
  font-size: .9rem;
}

.footline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  text-align: center;
}

.footer-mark { width: 58px; height: 58px; opacity: .9; object-fit: contain; }

/* Contacto por WhatsApp: fuente, tamaño y efecto únicos */
.whatsapp {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s ease, bottom .16s ease;
}

.whatsapp:hover { transform: translateY(-2px) scale(1.05); }

.whatsapp img {
  width: 58px;
  height: 58px;
  filter: drop-shadow(0 0 1px rgba(91, 91, 91, .7)) drop-shadow(0 5px 9px rgba(20, 92, 51, .18));
}

@media (max-width: 850px) {
  .top .links { display: none; }
}