/* ── Splash ── */
[data-screen="splash"] {
  background: #ffffff;
}
[data-screen="splash"] .logo-box {
  width: 96px; height: 96px; border-radius: 26px;
  background: linear-gradient(135deg, #FD5068, #FF8FA3);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
  box-shadow: 0 8px 24px rgba(253,80,104,0.35);
}
[data-screen="splash"] .logo-box svg { width: 56px; height: 56px; overflow: visible; }
[data-screen="splash"] .c-shape { fill: none; stroke: #ffffff; stroke-width: 9; stroke-linecap: round; }
[data-screen="splash"] .c-left {
  transform: translateX(-26px) rotate(-15deg);
  animation: joinLeft 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
}
[data-screen="splash"] .c-right {
  transform: translateX(26px) rotate(15deg);
  animation: joinRight 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
}
@keyframes joinLeft {
  0% { transform: translateX(-26px) rotate(-15deg); opacity: 0.4; }
  100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}
@keyframes joinRight {
  0% { transform: translateX(26px) rotate(15deg); opacity: 0.4; }
  100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}
[data-screen="splash"] .wordmark {
  font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: #1a1a1a;
  margin-bottom: 56px; opacity: 0;
  animation: fadeUp 0.8s ease 1.5s forwards;
}

/* Botón sólido estilo Tinder/Badoo, reutilizable */
.btn-solid {
  width: 100%; max-width: 280px; padding: 17px; border-radius: 30px;
  background: #FD5068; color: #fff; border: none;
  font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
  text-align: center; font-family: inherit; cursor: pointer;
  transition: background 0.3s, transform 0.15s;
}
.btn-solid:hover { background: #e8455c; }
.btn-solid:active { transform: scale(0.98); }
[data-screen="splash"] .btn-solid {
  opacity: 0; animation: fadeUp 0.8s ease 1.9s forwards;
}
.btn-solid-inline {
  position: absolute; bottom: 60px; opacity: 0;
  animation: fadeIn 1s 5.3s forwards;
}

/* ── Hook emocional (tema blanco tipo Tinder) ── */
[data-screen="hook"] {
  background: #ffffff !important;
}
[data-screen="hook"] .hook-text {
  font-size: 26px; font-weight: 700; color: #1a1a1a;
  line-height: 1.45; text-align: center; letter-spacing: 0;
}
[data-screen="hook"] .hook-text span {
  display: block; opacity: 0; transform: translateY(8px);
  animation: fadeUp 0.7s ease forwards;
}
[data-screen="hook"] .hook-text span:nth-child(1) { animation-delay: 0.3s; }
[data-screen="hook"] .hook-text span:nth-child(2) { animation-delay: 1.3s; }
[data-screen="hook"] .hook-text span:nth-child(3) { animation-delay: 2.3s; }
[data-screen="hook"] .hook-text span:nth-child(4) { animation-delay: 3.3s; }
[data-screen="hook"] .hook-text span.accent { animation-delay: 4.3s; color: #FD5068; }


/* ── Pantallas de formulario (tema blanco tipo Tinder) ── */
[data-screen="profileGender"], [data-screen="profilePhoto"], [data-screen="chooseLookingFor"] {
  background: #ffffff !important;
  justify-content: flex-start; padding-top: 80px;
}
[data-screen="setEncounter"] {
  justify-content: flex-start; padding-top: 80px;
}
[data-screen="profileGender"] .step-label,
[data-screen="profilePhoto"] .step-label,
[data-screen="chooseLookingFor"] .step-label {
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: #b0b0b0; margin-bottom: 32px; align-self: flex-start; font-weight: 600;
}
[data-screen="profileGender"] .question,
[data-screen="profilePhoto"] .question,
[data-screen="chooseLookingFor"] .question {
  font-size: 28px; font-weight: 800; color: #1a1a1a;
  line-height: 1.3; align-self: flex-start; margin-bottom: 40px;
}
[data-screen="profileGender"] .back-btn,
[data-screen="profilePhoto"] .back-btn,
[data-screen="chooseLookingFor"] .back-btn { color: #b0b0b0; }
[data-screen="profileGender"] .gender-btn,
[data-screen="profilePhoto"] .gender-btn,
[data-screen="chooseLookingFor"] .gender-btn {
  border: 1px solid #e0e0e0; color: #666; border-radius: 16px;
  background: #fff;
}
[data-screen="profileGender"] .gender-btn.selected,
[data-screen="chooseLookingFor"] .gender-btn.selected {
  border-color: #FD5068; color: #FD5068; background: #fff5f6;
}
[data-screen="profileGender"] .gender-btn.selected::after,
[data-screen="chooseLookingFor"] .gender-btn.selected::after { color: #FD5068; }
[data-screen="profileGender"] .bottom-btn,
[data-screen="profilePhoto"] .bottom-btn,
[data-screen="chooseLookingFor"] .bottom-btn {
  background: #FD5068; color: #fff; border-radius: 30px; font-weight: 700;
}
[data-screen="chooseLookingFor"] .photo-note { color: #999; }
[data-screen="profilePhoto"] .photo-note { color: #999; }
[data-screen="profilePhoto"] .photo-area {
  border: 2px dashed #e0e0e0; border-radius: 20px;
}
[data-screen="profilePhoto"] .photo-area .plus { color: #ccc; }

/* ── Despedida ── */
[data-screen="goodbye"] .bye-text {
  font-size: 24px; font-weight: 600; color: var(--white);
  text-align: center; line-height: 1.4; margin-bottom: 48px;
}
[data-screen="goodbye"] .bye-sub {
  font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--text-dim); text-align: center; margin-bottom: 64px;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}