/*
  Creditake - portada.
  Solo el logo y el acceso al panel de vendedores.
  Marca: azul y verde azulado del logo. Modo oscuro automático.
*/

:root {
  --marca-azul: #1336a6;
  --marca-verde: #2f7d70;
  --marca-tinta: #0f2453;
  --fondo: #f6f7f9;
  --texto-suave: #4f5869;
  --acento: #1336a6;
  --acento-texto: #ffffff;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --marca-azul: #6f8dff;
    --marca-verde: #4fb3a1;
    --marca-tinta: #e6ebf7;
    --fondo: #0e1220;
    --texto-suave: #a7b0c4;
    --acento: #7f9cff;
    --acento-texto: #0b1020;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  background-image:
    radial-gradient(ellipse at 50% 12%, color-mix(in srgb, var(--marca-azul) 6%, transparent) 0%, transparent 60%),
    radial-gradient(circle at 82% 85%, color-mix(in srgb, var(--marca-verde) 5%, transparent) 0%, transparent 50%);
  font-family: var(--fuente);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-color-scheme: dark) {
  body {
    background-image:
      radial-gradient(ellipse at 50% 12%, color-mix(in srgb, var(--marca-azul) 7%, transparent) 0%, transparent 60%),
      radial-gradient(circle at 82% 85%, color-mix(in srgb, var(--marca-verde) 6%, transparent) 0%, transparent 50%);
  }
}

.portada {
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2.75rem;
  padding: 32px 20px calc(32px + env(safe-area-inset-bottom));
  text-align: center;
  position: relative;
}

.logo-grande {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: .75rem;
  font-weight: normal;
}
.logo-iso { width: clamp(150px, 30vw, 220px); height: clamp(150px, 30vw, 220px); }
.logo-texto {
  margin-top: .5rem;
  font-size: clamp(2.6rem, 9vw, 4.75rem);
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1;
  color: var(--marca-tinta);
}
.logo-bajada {
  font-size: clamp(.95rem, 2.6vw, 1.35rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: 0 1.75rem;
  border-radius: 10px;
  background: var(--acento); color: var(--acento-texto);
  font: inherit; font-weight: 650; font-size: 1.05rem;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 4px 14px rgb(19 54 166 / 0.22);
  transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1),
              filter .15s ease,
              box-shadow .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgb(19 54 166 / 0.28);
}
.btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 8px rgb(19 54 166 / 0.2);
}

.firma-autoria {
  padding: 1.25rem 16px calc(1.25rem + env(safe-area-inset-bottom));
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
  opacity: 0.65;
  text-align: center;
  user-select: none;
}
.firma-autoria .firma-amp {
  color: var(--marca-verde);
  font-weight: 700;
}
.btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.btn i { font-size: 1.3rem; }

@media (prefers-reduced-motion: no-preference) {
  .logo-grande { animation: aparecer .7s cubic-bezier(.16, 1, .3, 1) both; }
  .btn { animation: aparecer .7s cubic-bezier(.16, 1, .3, 1) .15s both; }
}
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }