/* Oración Divina — Pergaminho Sereno Theme */
:root {
  --color-bg: #F5F0E6;
  --color-surface-1: #FAF7F1;
  --color-surface-2: #EDE5D6;
  --color-surface-3: #E2D8C6;
  --color-border-subtle: rgba(59,50,38,0.08);
  --color-border-medium: rgba(59,50,38,0.14);
  --color-accent: #8B6F4E;
  --color-accent-dim: rgba(139,111,78,0.10);
  --color-accent-glow: rgba(139,111,78,0.15);
  --color-warm: #C4956A;
  --color-sage: #7A8B6F;
  --color-ink: #3B3226;
  --shadow-warm: 0 4px 24px rgba(59,50,38,0.07), 0 1px 4px rgba(59,50,38,0.04);
  --shadow-elevated: 0 8px 32px rgba(59,50,38,0.10), 0 2px 8px rgba(59,50,38,0.05);
  --shadow-accent: 0 4px 20px rgba(139,111,78,0.15);
  --font-display: 'Sora', system-ui, sans-serif;
}
* { -webkit-tap-highlight-color: transparent; }
body {
  background-color: var(--color-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#app { position: relative; z-index: 1; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

.card-warm {
  background: var(--color-surface-1);
  border: 1px solid rgba(59,50,38,0.08);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-warm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-elevated {
  background: var(--color-surface-1);
  border: 1px solid rgba(59,50,38,0.10);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-elevated);
}
.card-feature {
  background: linear-gradient(135deg, #FAF7F1 0%, #F5F0E6 50%, #EDE5D6 100%);
  border: 1px solid rgba(139,111,78,0.14);
  border-radius: 1.25rem;
  box-shadow: 0 4px 20px rgba(139,111,78,0.06);
}
.card-glass {
  background: rgba(250,247,241,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(59,50,38,0.08);
  border-radius: 1.25rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-minimal {
  background: transparent;
  border-radius: 1rem;
  padding: 0.75rem 1rem;
  transition: background 0.15s ease;
}
.card-minimal:active { background: rgba(139,111,78,0.08); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.02); opacity: 1; } }
@keyframes gentlePulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: 0.85; } }
@keyframes ringPulse { 0% { box-shadow: 0 0 0 0 rgba(139,111,78,0.3); } 70% { box-shadow: 0 0 0 10px rgba(139,111,78,0); } 100% { box-shadow: 0 0 0 0 rgba(139,111,78,0); } }
@keyframes checkBounce { 0% { transform: scale(0); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes waveBar { 0%, 100% { height: 4px; } 50% { height: 16px; } }
@keyframes progressExpand { from { width: 8px; } to { width: 100%; } }
@keyframes floatSlow { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }

.animate-fadeIn { animation: fadeIn 0.4s ease-out forwards; }
.animate-slideUp { animation: slideUp 0.5s ease-out forwards; }
.animate-slideInRight { animation: slideInRight 0.4s ease-out forwards; }
.animate-breathe { animation: breathe 6s ease-in-out infinite; }
.animate-gentlePulse { animation: gentlePulse 2s ease-in-out infinite; }
.animate-ringPulse { animation: ringPulse 1.5s infinite; }
.animate-checkBounce { animation: checkBounce 0.3s ease-out; }
.animate-float { animation: floatSlow 4s ease-in-out infinite; }

.stagger-1 { animation: fadeIn 0.4s ease-out 0.05s both; }
.stagger-2 { animation: fadeIn 0.4s ease-out 0.1s both; }
.stagger-3 { animation: fadeIn 0.4s ease-out 0.15s both; }
.stagger-4 { animation: fadeIn 0.4s ease-out 0.2s both; }
.stagger-5 { animation: fadeIn 0.4s ease-out 0.25s both; }
.stagger-6 { animation: fadeIn 0.4s ease-out 0.3s both; }
.stagger-7 { animation: fadeIn 0.4s ease-out 0.35s both; }
.stagger-8 { animation: fadeIn 0.4s ease-out 0.4s both; }

.text-scripture {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.8;
  color: #5C5347;
}
.text-body-refined {
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.01em;
  line-height: 1.75;
}
.drop-cap p::first-letter {
  font-family: var(--font-display);
  font-size: 3.5em;
  float: left;
  line-height: 0.85;
  padding-right: 0.1em;
  color: var(--color-accent);
  font-weight: 700;
}

.gradient-line {
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-warm), transparent);
  border-radius: 2px;
  opacity: 0.35;
}
.ornament-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0.25;
}
.ornament-divider::before, .ornament-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.ornament-icon {
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  transform: rotate(45deg);
  border-radius: 1px;
  opacity: 0.4;
}

.press-effect { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.press-effect:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(59,50,38,0.06); }

.waveform-container { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.waveform-bar { width: 3px; background: var(--color-accent); border-radius: 3px; animation: waveBar 0.8s ease-in-out infinite; opacity: 0.6; }
.waveform-bar:nth-child(1) { animation-delay: 0s; }
.waveform-bar:nth-child(2) { animation-delay: 0.15s; }
.waveform-bar:nth-child(3) { animation-delay: 0.3s; }
.waveform-bar:nth-child(4) { animation-delay: 0.45s; }
.waveform-bar:nth-child(5) { animation-delay: 0.6s; }

.sound-progress { animation: progressExpand 3s ease-out infinite; }
.safe-area-bottom { padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); }

.carousel-container { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.carousel-container > * { scroll-snap-align: start; }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.menu-overlay { animation: fadeIn 0.2s ease-out forwards; }
.menu-panel { animation: slideInRight 0.3s ease-out forwards; }

::selection { background: rgba(139,111,78,0.2); color: #3B3226; }

.shadow-warm { box-shadow: var(--shadow-warm); }
.shadow-accent { box-shadow: var(--shadow-accent); }

@media (min-width: 768px) {
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(139,111,78,0.15); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(139,111,78,0.3); }
}