/* RosaryReels landing styles.
   Paleta y filosofia consistentes con AppTheme del PWA:
   - Fondo navy oscuro (#0E0F13) + acento dorado (#C9A24A)
   - Serif tradicional para titulares (Georgia, evoca textos liturgicos)
   - Sans-serif del sistema para body (sobrio, legible)
   - Espacio negativo abundante, sin animaciones que distraigan
*/

:root {
  --bg: #0E0F13;
  --bg-2: #161A24;
  --bg-3: #1E2230;
  --gold: #C9A24A;
  --gold-dark: #8E7434;
  --gold-soft: rgba(201, 162, 74, 0.15);
  --text: #F2EEE3;
  --text-muted: #B7B2A6;
  --text-dim: #7A766D;
  --max-w: 880px;
  --serif: Georgia, 'Times New Roman', 'DejaVu Serif', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}

a:hover,
a:focus {
  border-bottom-color: var(--gold);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 1rem;
  background: var(--gold);
  color: var(--bg);
  padding: 0.5rem 1rem;
  z-index: 100;
  font-weight: 600;
}

.skip-link:focus {
  left: 1rem;
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* === Header / nav === */
.site-header {
  padding: 24px 0;
  border-bottom: 1px solid var(--bg-2);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.5px;
  border: none;
}

.brand:hover,
.brand:focus {
  border: none;
  color: var(--gold);
}

.lang-toggle {
  font-size: 14px;
  color: var(--text-muted);
  border: none;
}

.lang-toggle:hover,
.lang-toggle:focus {
  color: var(--gold);
  border: none;
}

/* === Hero === */
.hero {
  padding: 96px 0 80px;
  text-align: center;
}

.hero img {
  width: 120px;
  height: 120px;
  margin-bottom: 32px;
  filter: drop-shadow(0 8px 32px rgba(201, 162, 74, 0.25));
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 24px;
  letter-spacing: -0.5px;
}

.hero .lead {
  font-size: clamp(18px, 2.5vw, 22px);
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto 48px;
  line-height: 1.55;
}

.cta {
  display: inline-block;
  background: var(--gold);
  color: var(--bg);
  padding: 16px 36px;
  border-radius: 6px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: none;
  transition: background 160ms ease, transform 160ms ease;
}

.cta:hover,
.cta:focus {
  background: #d6b05a;
  transform: translateY(-1px);
  border: none;
}

.cta-secondary {
  display: inline-block;
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 14px;
  border: none;
}

.cta-secondary:hover,
.cta-secondary:focus {
  color: var(--gold);
  border: none;
}

/* === Sections genericas === */
section {
  padding: 64px 0;
}

section + section {
  border-top: 1px solid var(--bg-2);
}

section h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 400;
  margin: 0 0 24px;
  letter-spacing: -0.3px;
}

section p {
  color: var(--text);
  margin: 0 0 20px;
}

section p:last-child {
  margin-bottom: 0;
}

/* === Why === */
.why p {
  font-size: 19px;
  line-height: 1.7;
  color: var(--text-muted);
}

.why .latin {
  font-style: italic;
  font-family: var(--serif);
  color: var(--gold);
  margin-top: 32px;
  font-size: 18px;
}

/* === How === */
.how ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  counter-reset: step;
}

@media (min-width: 720px) {
  .how ol {
    grid-template-columns: repeat(3, 1fr);
  }
}

.how li {
  background: var(--bg-2);
  padding: 32px 24px;
  border-radius: 8px;
  counter-increment: step;
  position: relative;
}

.how li::before {
  content: counter(step);
  font-family: var(--serif);
  font-size: 48px;
  color: var(--gold);
  opacity: 0.4;
  position: absolute;
  top: 12px;
  right: 18px;
  line-height: 1;
}

.how h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 12px;
  color: var(--text);
}

.how p {
  font-size: 16px;
  color: var(--text-muted);
  margin: 0;
}

/* === Mysteries (SEO-rich section) === */
.mysteries .group {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px dashed var(--bg-3);
}

.mysteries .group:first-of-type {
  margin-top: 32px;
  padding-top: 0;
  border-top: none;
}

.mysteries h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  margin: 0 0 8px;
  color: var(--gold);
}

.mysteries .day {
  font-size: 14px;
  color: var(--text-dim);
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.mysteries .group p {
  margin-bottom: 16px;
}

.mysteries ul {
  padding-left: 24px;
  color: var(--text-muted);
  font-size: 16px;
}

.mysteries ul li {
  margin-bottom: 6px;
}

/* === Features === */
.features ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .features ul {
    grid-template-columns: 1fr 1fr;
  }
}

.features li {
  padding: 16px 20px;
  background: var(--gold-soft);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  font-size: 16px;
  color: var(--text);
}

/* === CTA final === */
.cta-final {
  text-align: center;
  padding: 96px 0;
}

.cta-final h2 {
  margin-bottom: 16px;
}

.cta-final p {
  color: var(--text-muted);
  font-size: 18px;
  margin-bottom: 40px;
}

/* === Contact (humilde, cierre del landing) ===
   Texto muted, h2 mas chico que el resto, todo centrado. Email en serif
   dorado como punto focal. La linea de bendicion ("Contamos con tu
   oracion") va en italica serif, color textDim, como signo de cierre.
*/
.contact {
  padding: 56px 0;
  text-align: center;
}

.contact h2 {
  font-size: clamp(20px, 2.6vw, 26px);
  color: var(--text-muted);
  font-weight: 400;
  margin-bottom: 20px;
  letter-spacing: -0.2px;
}

.contact p {
  color: var(--text-muted);
  max-width: 580px;
  margin: 0 auto 20px;
  font-size: 16px;
  line-height: 1.6;
}

.contact p.email {
  margin-top: 28px;
  font-family: var(--serif);
  font-size: 19px;
}

.contact p.email a {
  color: var(--gold);
}

.contact p.benediction {
  margin-top: 32px;
  color: var(--text-dim);
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
}

/* === Footer === */
.site-footer {
  padding: 48px 0 64px;
  border-top: 1px solid var(--bg-2);
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

.site-footer p {
  margin: 8px 0;
}

.site-footer .small {
  color: var(--text-dim);
  font-size: 13px;
  margin-top: 24px;
}

/* === Focus visible (a11y) === */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* === Print friendly === */
@media print {
  body {
    background: white;
    color: black;
  }
  .cta,
  .site-header,
  .site-footer {
    display: none;
  }
}