/* ============================================================
   Landing Promo Alumni PUCV – Estilos complementarios
   (Tailwind cubre la mayor parte; aquí van animaciones,
    componentes custom y utilidades que Tailwind no tiene)
   ============================================================ */

/* -- Fuente Inter desde Google Fonts -- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* -- Variables CSS globales -- */
:root {
  --lpa-navy:      #0a1628;
  --lpa-navy-mid:  #0d2044;
  --lpa-gold:      #c8960c;
  --lpa-gold-lt:   #f5c842;
  --lpa-blue:      #2563eb;
  --lpa-transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* -- Spinner de carga -- */
@keyframes lpa-spin {
  to { transform: rotate(360deg); }
}

.lpa-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(37,99,235,0.2);
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: lpa-spin 0.75s linear infinite;
}

/* -- Pop animación success -- */
@keyframes lpa-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.lpa-pop { animation: lpa-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* -- Modal backdrop blur -- */
.lpa-backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* -- Glassmorphism para tarjetas -- */
.lpa-glass {
  background: rgba(13,32,68,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* -- Texto con gradiente -- */
.lpa-gradient-text {
  background: linear-gradient(135deg, #ffffff 40%, #f5c842);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* -- Hero overlay -- */
.lpa-hero-overlay {
  background: linear-gradient(to bottom, transparent 55%, #0a1628 100%);
}

/* -- Card hover ring effect -- */
.lpa-card {
  transition: transform var(--lpa-transition),
              box-shadow var(--lpa-transition),
              border-color var(--lpa-transition);
}

.lpa-card:hover,
.lpa-card:focus-visible {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 24px 64px rgba(37,99,235,0.3), 0 0 0 1px rgba(37,99,235,0.4);
  outline: none;
}

.lpa-card:hover .lpa-card-overlay,
.lpa-card:focus-visible .lpa-card-overlay {
  opacity: 1;
}

.lpa-card:hover .lpa-card-img,
.lpa-card:focus-visible .lpa-card-img {
  transform: scale(1.08);
}

.lpa-card-img {
  transition: transform 0.5s ease;
}

.lpa-card-overlay {
  transition: opacity var(--lpa-transition);
}

/* -- Modal transition -- */
.lpa-modal-wrap {
  transition: opacity 0.3s ease;
}

.lpa-modal-dialog {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
}

.lpa-modal-wrap.is-closed {
  opacity: 0;
  pointer-events: none;
}

.lpa-modal-wrap.is-closed .lpa-modal-dialog {
  transform: translateY(28px) scale(0.96);
  opacity: 0;
}

.lpa-modal-wrap.is-open {
  opacity: 1;
  pointer-events: all;
}

.lpa-modal-wrap.is-open .lpa-modal-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* -- Countdown tabular -- */
.lpa-cd-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* -- Scrollbar en modal -- */
.lpa-modal-dialog {
  scrollbar-width: thin;
  scrollbar-color: rgba(37,99,235,0.4) transparent;
}

.lpa-modal-dialog::-webkit-scrollbar {
  width: 5px;
}

.lpa-modal-dialog::-webkit-scrollbar-track {
  background: transparent;
}

.lpa-modal-dialog::-webkit-scrollbar-thumb {
  background: rgba(37,99,235,0.4);
  border-radius: 10px;
}

/* -- Checkbox custom -- */
.lpa-check-box {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition: var(--lpa-transition);
}

#lpa-acepto:checked ~ .lpa-check-label .lpa-check-box,
.lpa-check-box.is-checked {
  background: #2563eb;
  border-color: #2563eb;
}

.lpa-check-inner {
  display: none;
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

.lpa-check-box.is-checked .lpa-check-inner {
  display: block;
}

/* -- Focus visible accesible -- */
.lpa-focus:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
}

/* -- Input autofill no rompa estilos dark -- */
.lpa-input:-webkit-autofill,
.lpa-input:-webkit-autofill:hover,
.lpa-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0 1000px rgba(13,32,68,0.95) inset;
  caret-color: #fff;
}

/* -- Prose overrides para wysiwyg -- */
.lpa-prose p { margin-bottom: 0.6em; font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.7; }
.lpa-prose ul { list-style: disc; padding-left: 20px; margin-bottom: 0.6em; }
.lpa-prose li { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.7; }
.lpa-prose strong { color: #fff; }

/* -- Divider gradient -- */
.lpa-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37,99,235,0.4), transparent);
}

/* -- Responsive util -- */
@media (max-width: 640px) {
  .lpa-modal-dialog { padding: 24px 16px; }
}