/* Portada estándar Index — logo que se dibuja + Ingresar. Pareja de portada-index.js.
   Colores: --portada-color (marca, para el botón y la aurora) y --portada-fondo. */
.dibujo-logo { display: inline-block; line-height: 0; }
.dibujo-logo svg { height: 100%; width: auto; overflow: visible; display: block; }
.dibujo .dibujo-forma {
  stroke: var(--trazo, currentColor); stroke-width: var(--dibujo-trazo, 1.6px); vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0;
  animation:
    dibujo-trazo var(--dibujo-dur, 1.4s) cubic-bezier(.65, 0, .35, 1) calc(var(--i, 0) * var(--dibujo-esc, 90ms)) forwards,
    dibujo-relleno .7s ease calc(var(--dibujo-dur, 1.4s) * .75 + var(--i, 0) * var(--dibujo-esc, 90ms)) forwards;
}
@keyframes dibujo-trazo { to { stroke-dashoffset: 0; } }
@keyframes dibujo-relleno { to { fill-opacity: 1; stroke-opacity: 0; } }

html.con-portada, html.con-portada body { overflow: hidden; }
#portada-index {
  --portada-color: #0057ff; --portada-fondo: #fff;
  position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column;
  background: var(--portada-fondo); color: #111; font-family: inherit; overflow: hidden;
  transition: opacity .34s ease, transform .34s ease;
}
#portada-index.saliendo { opacity: 0; transform: scale(1.03); pointer-events: none; }
.portada-aurora { position: absolute; inset: -20%; pointer-events: none; filter: blur(60px); opacity: .55;
  background:
    radial-gradient(38% 32% at 18% 22%, color-mix(in srgb, var(--portada-color) 28%, transparent), transparent 70%),
    radial-gradient(30% 28% at 82% 18%, color-mix(in srgb, var(--portada-color) 14%, transparent), transparent 70%),
    radial-gradient(36% 30% at 70% 85%, color-mix(in srgb, var(--portada-color) 18%, transparent), transparent 70%);
  animation: portada-aurora 18s ease-in-out infinite alternate; }
@keyframes portada-aurora { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(2%, -3%, 0) scale(1.06); } }
.portada-centro { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.portada-logo { height: 112px; max-width: min(80vw, 420px); }
@media (min-width: 768px) { .portada-logo { height: 144px; } }
.portada-texto { margin-top: 40px; display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
#portada-index.lista .portada-texto { opacity: 1; transform: none; pointer-events: auto; }
.portada-marca { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--portada-color); }
.portada-lema { margin: 8px 0 0; max-width: 320px; font-size: 15px; line-height: 1.45; color: #5b6472; }
.portada-boton { margin-top: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 224px; height: 56px; padding: 0 32px;
  border: 0; border-radius: 16px; cursor: pointer; font: inherit; font-size: 16px; font-weight: 600; color: #fff;
  background: linear-gradient(to bottom, var(--portada-color), color-mix(in srgb, var(--portada-color) 80%, black));
  box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--portada-color) 85%, transparent); transition: filter .2s ease, transform .15s ease; }
.portada-boton:hover { filter: brightness(1.1); }
.portada-boton:active { transform: scale(.98); }
.portada-boton svg { transition: transform .2s ease; }
.portada-boton:hover svg { transform: translateX(4px); }
.portada-pie { position: relative; padding: 0 20px max(20px, env(safe-area-inset-bottom)); text-align: center; font-size: 12px; color: #8a93a2; }
@media (prefers-color-scheme: dark) {
  #portada-index:not([data-tema="claro"]) { --portada-fondo: #0e1116; color: #eef1f6; }
  #portada-index:not([data-tema="claro"]) .portada-lema { color: #9aa3b2; }
}
@media (prefers-reduced-motion: reduce) {
  .dibujo .dibujo-forma { animation: none; stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
  .portada-aurora { animation: none; }
}