/* AUTO360-PORTADA-001 — portada de entrada. Aislado de styles.css a propósito
   para no tocar ninguna regla del prototipo certificado; reutiliza las
   variables de color (--accent, etc.) definidas en :root de styles.css. */

.portada {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: #0b0b0c;
}

/* El selector de clase .portada (display:flex) tiene la misma especificidad
   que la regla nativa [hidden]{display:none} del navegador; sin esto, activar
   el atributo hidden por JS no ocultaría visualmente la portada. */
#portada[hidden],
#app-shell[hidden] {
  display: none;
}

.portada-imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 55%;
}

.portada-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 9, 12, 0.15) 0%, rgba(8, 9, 12, 0.45) 55%, rgba(8, 9, 12, 0.92) 100%);
}

.portada-contenido {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 24px clamp(32px, 6vh, 64px);
  text-align: center;
  color: #fff;
}

.portada-titulo {
  margin: 0 0 10px;
  font-size: clamp(32px, 6vw, 48px);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.portada-tagline {
  margin: 0 0 14px;
  font-size: clamp(15px, 2.2vw, 18px);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.4;
}

.portada-badge {
  display: inline-block;
  margin: 0 0 24px;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.portada-btn {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 6px;
}

@media (max-width: 480px) {
  .portada-contenido { padding: 24px 18px clamp(24px, 8vh, 48px); }
  .portada-tagline { padding: 0 6px; }
}