/* ============================================================================
   footer-eureca.css — Footer EURECA COMPARTIDO (vitrina + todos los paneles).
   Un solo diseño, exactamente el que aprobó el cliente (imagen de referencia):
   marca + tagline + redes | Recursos | Contacto, banda verde curva arriba y
   barra inferior. De-scopeado de `.est` para servir en cualquier página.
   ============================================================================ */
.ef { position: relative; background: #0E1A38; color: #C3CEE3; padding-top: 40px; }
/* Curva verde DENTRO del tope del footer: pegada al contenido (sin blanco encima),
   tope plano y borde inferior curvo que se funde con el oscuro (las esquinas
   transparentes muestran el footer oscuro, no el fondo blanco). */
.ef::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 38px;
  background: #7FCB98; border-radius: 0 0 50% 50% / 0 0 26px 26px;
}
/* Marca a la IZQUIERDA · columnas a la DERECHA · gran aire en el medio (como la referencia) */
.ef__in { max-width: 1240px; margin: 0 auto; padding: 2.4rem clamp(1rem, 4vw, 2.2rem) 2rem;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 2.5rem; flex-wrap: wrap; }
.ef__brand { max-width: 400px; }
.ef__cols { display: flex; gap: clamp(2.5rem, 6vw, 6rem); }
.ef__logo { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; color: #fff; }
.ef__logo small { display: block; font-family: var(--font-display); font-weight: 600; font-size: .55rem; letter-spacing: .18em; color: #8FA0BC; padding-left: 3px; }
.ef__tag { font-size: .85rem; line-height: 1.6; margin: .85rem 0 1.1rem; max-width: 36ch; color: #9FB0CB; }

.ef__redes { display: flex; gap: .55rem; list-style: none; margin: 1.1rem 0 2rem; padding: 0; }
.ef__redes a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.82);
  transition: background .15s, color .15s, border-color .15s; }
.ef__redes a:hover { background: #16A34A; color: #fff; border-color: transparent; }
.ef__redes svg { width: 17px; height: 17px; }

/* Títulos y enlaces de columna en texto regular (sin negrita) */
.ef__col b { display: block; font-family: var(--font-display); font-weight: 500; font-size: .86rem; color: #fff; margin-bottom: .7rem; }
.ef__col a { display: block; color: #C3CEE3; font-size: .88rem; font-weight: 400; padding: .3rem 0; text-decoration: none; }
.ef__col a:hover { color: #8FD6A7; }

.ef__bot { border-top: 1px solid rgba(255,255,255,.09); }
.ef__in--bot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-top: 1.05rem; padding-bottom: 1.15rem; font-size: .78rem; font-weight: 600; color: #7C8CAD; }
/* Accesos internos discretos (instructor / admin) — solo en la vitrina */
.ef__internal { display: inline-flex; align-items: center; gap: .5rem; }
.ef__internal a { color: #7C8CAD; text-decoration: none; }
.ef__internal a:hover { color: #C3CEE3; text-decoration: underline; }
.ef__internal .sep { opacity: .5; }

@media (max-width: 760px) { .ef__in { flex-direction: column; gap: 1.8rem; } .ef__cols { gap: 2.5rem; } }

/* --- Personaje EURECA junto al bloque de marca (diseño del cliente).
       Solo la vitrina lo enciende (.ef--mascota) y JAMAS desplaza el contenido:
       vive en el margen exterior izquierdo, pegado al contenedor. --- */
.ef__mascota { position: absolute; z-index: 3; top: 48px; width: 238px; height: auto;
  left: calc(50% - 620px - 262px); pointer-events: none; user-select: none;
  filter: drop-shadow(0 14px 24px rgba(5, 10, 22, .38)); }
@media (max-width: 1800px) { .ef__mascota { width: 188px; left: calc(50% - 620px - 208px); } }
@media (max-width: 1680px) { .ef__mascota { width: 148px; left: 14px; top: 76px; } }
@media (max-width: 1500px) { .ef__mascota { display: none; } }