/* ==========================================================
   CESIC — Capa de mejoras visuales (aditiva)
   No modifica colores, textos ni información existente.
   Solo añade transiciones, animaciones y micro-interacciones
   reutilizando las variables de color ya definidas en styles.css.
   ========================================================== */

:root {
  --cesic-shadow-soft: 0 18px 45px rgba(0, 0, 0, .28);
  --cesic-shadow-lift: 0 26px 60px rgba(0, 0, 0, .35);
}

html {
  scroll-behavior: smooth;
}

::selection {
  background: var(--cyan);
  color: #041012;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav a:focus-visible,
.nav-dropdown-toggle:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Header: sombra progresiva al hacer scroll ---------- */
.header {
  transition: box-shadow .35s ease, background-color .35s ease;
}

.header.is-scrolled {
  box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
}

/* ---------- Revelado suave al hacer scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1),
              transform .7s cubic-bezier(.2, .7, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Blobs decorativos del hero: flotación sutil ---------- */
@keyframes cesicFloatA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-10px, 12px) scale(1.05); }
}

@keyframes cesicFloatB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(12px, -10px) scale(1.06); }
}

.scene:before { animation: cesicFloatA 9s ease-in-out infinite; }
.scene:after  { animation: cesicFloatB 11s ease-in-out infinite; }

/* ---------- Tarjetas: brillo diagonal + elevación reforzada ---------- */
.card,
.curriculum-card,
.institutional-card,
.campus-card,
.doc-row,
.metric {
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1),
              box-shadow .35s ease,
              border-color .35s ease;
}

.card::before,
.curriculum-card::before,
.institutional-card::before,
.campus-card::before,
.doc-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .16) 50%, transparent 70%);
  transform: translateX(-140%);
  transition: transform .85s ease;
  pointer-events: none;
  z-index: 1;
}

.card:hover::before,
.curriculum-card:hover::before,
.institutional-card:hover::before,
.campus-card:hover::before,
.doc-row:hover::before {
  transform: translateX(140%);
}

.card:hover,
.institutional-card:hover,
.campus-card:hover {
  box-shadow: var(--cesic-shadow-lift);
}

.curriculum-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(17, 54, 46, .14);
  border-color: rgba(12, 90, 73, .35);
}

.metric:hover {
  transform: translateY(-4px);
  border-color: var(--cyan);
  box-shadow: var(--cesic-shadow-soft);
}

/* ---------- Botones: barrido de brillo + respuesta táctil ---------- */
.btn,
.nav .cta {
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .25s ease, background .2s, color .2s;
}

.btn::before,
.nav .cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-140%);
  transition: transform .7s ease;
  pointer-events: none;
}

.btn:hover::before,
.nav .cta:hover::before {
  transform: translateX(140%);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(75, 182, 174, .22);
}

.btn:active,
.nav .cta:active {
  transform: translateY(0) scale(.98);
}

.slide-arrow,
.slide-dots button {
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.slide-arrow:hover {
  transform: translateY(-50%) scale(1.08);
}

/* ---------- Imágenes de programas: zoom sutil al pasar el cursor ---------- */
.program-visual {
  overflow: hidden;
  border-radius: 30px;
}

.program-visual img {
  transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}

.program-visual:hover img {
  transform: scale(1.06);
}

/* ---------- Enlaces con flecha: pequeño desplazamiento al pasar el cursor ---------- */
.card a,
.curriculum-card a {
  display: inline-block;
  transition: transform .25s ease, color .2s ease;
}

.card a:hover,
.curriculum-card a:hover {
  transform: translateX(3px);
}

/* ---------- Acordeón: transición de apertura más suave ---------- */
.accordion-item {
  transition: box-shadow .3s ease;
}

.accordion-item button {
  transition: background .25s ease, color .25s ease;
}

/* ---------- WhatsApp flotante: pulso discreto para llamar la atención ---------- */
@keyframes cesicPulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .45); }
  70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.whatsapp-float {
  animation: cesicPulseRing 2.8s ease-out infinite;
  transition: transform .25s ease;
}

.whatsapp-float:hover {
  transform: translateY(-3px);
}

.wa-widget .whatsapp-float {
  animation: cesicPulseRing 2.8s ease-out infinite;
}

/* ---------- Botón volver arriba ---------- */
.cesic-top-btn {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 999;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: var(--cyan);
  color: #041012;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}

.cesic-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cesic-top-btn:hover {
  transform: translateY(-3px);
}

.cesic-top-btn svg {
  width: 18px;
  height: 18px;
}

/* ---------- Tabla de documentos (SEAES): fila resaltada ---------- */
.doc-row {
  transition: background .25s ease;
}

/* ---------- Accesibilidad de movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .scene:before,
  .scene:after,
  .whatsapp-float,
  .wa-widget .whatsapp-float {
    animation: none !important;
  }

  .card::before,
  .curriculum-card::before,
  .institutional-card::before,
  .campus-card::before,
  .doc-row::before,
  .btn::before,
  .nav .cta::before {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .cesic-top-btn {
    width: 42px;
    height: 42px;
    left: 16px;
    bottom: 16px;
  }
}

/* CESIC - Formulario de contacto funcional */
.contact-alert{padding:16px 18px;border-radius:14px;margin-bottom:6px;line-height:1.5}.contact-alert ul{margin:8px 0 0 20px}.contact-alert-error{background:#fff2f1;border:1px solid #e7b6b2;color:#7a2922}.contact-alert-success{background:#edf9f5;border:1px solid #a8d9ca;color:#124e3e}.contact-note{font-size:.92rem;color:#66867e;max-width:520px}.contact-hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.contact-grid form label small{display:block;margin-top:7px;color:#6a8982;font-size:.82rem;line-height:1.35}