/* EF — guitarra 3D flotante para /login (solo esta vista).
   Se carga aparte de main.css para no afectar al resto de páginas,
   igual que los efectos del mapa (mapa-efectos/*.css).

   Layout tipo "resend.com" a pantalla completa: el login ocupa la mitad
   izquierda de la ventana, la guitarra la mitad derecha entera — no un
   panel pequeño metido dentro de .ef-contenedor (que tiene max-width:880px
   para el resto del sitio). El "full-bleed" con margin negativo saca este
   bloque de ese contenedor sin tocar la regla compartida .ef-contenedor. */

.ef-login-split {
  display: flex;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: calc(100vh - 76px);
}

.ef-login-left {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Más padding a la izquierda que a la derecha empuja visualmente el
     bloque hacia el centro de la pantalla, y el translateY lo sube un
     poco — así queda a la misma "altura" visual que la guitarra en vez
     de leerse pequeño y bajo en su mitad. */
  padding: 40px 6% 40px 14%;
  animation: ef-login-left-in 0.9s cubic-bezier(.2,.7,.3,1) both;
}

@keyframes ef-login-left-in {
  from { opacity: 0; transform: translateY(calc(-7% + 14px)); }
  to   { opacity: 1; transform: translateY(-7%); }
}

@media (prefers-reduced-motion: reduce) {
  .ef-login-left { animation: none; transform: translateY(-7%); }
}

/* Logo más grande solo en esta vista (en el resto del sitio sigue
   siendo max-width:340px, regla compartida en main.css). */
.ef-login-split .ef-login-hero-logo {
  max-width: 420px;
}

.ef-login-right {
  flex: 0 0 50%;
  position: relative;
  /* Resplandor cálido de fondo en colores de marca — y ahora también lo
     que une visualmente las dos mitades en vez de una línea divisoria:
     el degradado se funde con el fondo general, sin borde ni corte, tal
     como en la referencia (resend.com: un único lienzo, no dos bloques). */
  background: radial-gradient(circle at 50% 46%, rgba(246, 169, 61, 0.16), rgba(198, 92, 24, 0.06) 45%, transparent 70%);
}

#ef-guitar-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: transparent;
  pointer-events: none;
}

@media (max-width: 900px) {
  .ef-login-split {
    flex-direction: column;
    min-height: auto;
  }
  .ef-login-left {
    flex: none;
    width: 100%;
    padding: 8px 20px 24px;
    order: 2;
  }
  .ef-login-right {
    flex: none;
    width: 100%;
    min-height: 280px;
    order: 1;
  }
}

/* 26-ago: "¿No tienes cuenta?" / "Apúntate gratis 7 días" bajo el
   formulario. v3: dos <p> de verdad (no un span con display:block) para
   que queden en líneas separadas SIEMPRE, sin depender de que esta hoja
   de estilos cargue bien — si el CSS fallara, dos <p> igual se apilan
   por defecto. Enlace más grande y sin poder partirse en móvil. */
.ef-login-cta-pregunta {
  margin: 22px 0 4px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--ef-crema-tenue);
}

.ef-login-cta-cuenta {
  margin: 0;
  text-align: center;
}

/* 28-ago (Seba: "en ordenador no se nota tanto como una tarjeta, en
   movil se ve mejor" -- convertir en una pildora con un borde fino
   dorado que se va iluminando poco a poco, en vez de solo texto suelto,
   sin llegar a copiar los colores solidos del boton "Entrar"). */
.ef-login-cta-link {
  display: inline-block;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 700;
  color: var(--ef-dorado);
  text-decoration: none;
  letter-spacing: 0.01em;
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid var(--ef-dorado);
  transition: background-color 0.2s ease;
  animation: ef-login-cta-pulso 2.6s ease-in-out infinite;
}

.ef-login-cta-link:hover {
  background-color: rgba(246, 169, 61, 0.1);
}

@keyframes ef-login-cta-pulso {
  0%, 100% { box-shadow: 0 0 0 rgba(246, 169, 61, 0); border-color: rgba(246, 169, 61, 0.45); }
  50% { box-shadow: 0 0 14px rgba(246, 169, 61, 0.45); border-color: var(--ef-dorado); }
}

@media (prefers-reduced-motion: reduce) {
  .ef-login-cta-link { animation: none; }
}

@media (max-width: 480px) {
  .ef-login-cta-link { font-size: 16px; padding: 9px 20px; }
}