/* =====================================================================
   Centro Educativo Marie Curie — Footer + utilidades de animación
   Diseño original. NO editar colores aquí: usa las variables en 01-tokens.css
   ===================================================================== */

/* ==================== FOOTER ==================== */
  footer{background:var(--navy-deep); color:var(--cream); padding:72px 0 28px}
  .foot-grid{display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.1)}
  .foot-brand{display:flex; flex-direction:column; gap:18px}
  .foot-brand .brand-text .top{color:var(--cream-2)}
  .foot-brand .brand-text .bot{color:rgba(244,239,227,.5)}
  .foot-tag{font-size:14px; color:rgba(244,239,227,.65); line-height:1.55; max-width:34ch}
  .foot-col h5{font-family:var(--f-display); font-size:13px; font-weight:600; color:var(--lime-2); letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px}
  .foot-col ul{list-style:none; display:flex; flex-direction:column; gap:10px}
  .foot-col a{font-size:14px; color:rgba(244,239,227,.7); transition:color .15s ease}
  .foot-col a:hover{color:var(--lime-2)}
  .foot-bot{display:flex; justify-content:space-between; align-items:center; padding-top:28px; flex-wrap:wrap; gap:14px}
  .foot-bot p{font-size:12px; color:rgba(244,239,227,.5); font-family:var(--f-mono); letter-spacing:.04em}
  .foot-bot .social{display:flex; gap:10px}
  .foot-bot .social a{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:var(--cream); transition:all .2s ease}
  .foot-bot .social a:hover{background:var(--lime); color:var(--navy-deep)}

  @media (max-width:880px){ .foot-grid{grid-template-columns:1fr 1fr} }
  @media (max-width:540px){ .foot-grid{grid-template-columns:1fr} }

  /* ==================== UTILITIES ==================== */
  .reveal{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease}
  .reveal.in{opacity:1; transform:none}