/* ============================================================
   CÍRCULO DE SANACIÓN — hoja de estilos
   Paleta: ciruela / dorado viejo / crema
   ============================================================ */

:root {
  --crema: #f6efe2;
  --crema-suave: #efe4d0;
  --ciruela: #4a1f3d;
  --ciruela-oscuro: #341429;
  --ciruela-suave: #6e3358;
  --dorado: #a9812f;
  --dorado-claro: #c9a24b;
  --texto: #3a2a34;

  --fuente-titulos: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --fuente-cuerpo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--crema);
  background-image:
    radial-gradient(circle at 15% 10%, var(--crema-suave) 0%, transparent 45%),
    radial-gradient(circle at 85% 90%, var(--crema-suave) 0%, transparent 45%);
  color: var(--texto);
  font-family: var(--fuente-cuerpo);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 64px 0;
}

.section--apertura {
  padding-top: 56px;
  text-align: center;
}

.section--cierre {
  text-align: center;
  padding-bottom: 72px;
}

h1 {
  font-family: var(--fuente-titulos);
  font-weight: 400;
  font-size: 2.1rem;
  color: var(--ciruela);
  letter-spacing: 0.02em;
  margin: 20px 0 24px;
}

h2 {
  font-family: var(--fuente-titulos);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--ciruela);
  letter-spacing: 0.01em;
  margin: 0 0 20px;
}

p {
  margin: 0 0 16px;
}

.ornamento {
  color: var(--dorado);
  font-size: 1.1rem;
  letter-spacing: 0.3em;
}

.frase-apertura {
  font-size: 1.15rem;
  color: var(--ciruela-suave);
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

.contador {
  margin: 22px 0 0;
  font-size: 0.95rem;
  color: var(--ciruela-suave);
}

.contador-numero {
  font-family: var(--fuente-titulos);
  font-size: 1.4rem;
  color: var(--dorado);
  margin-right: 6px;
}

.separador {
  height: 1px;
  max-width: 120px;
  margin: 0 auto;
  background: linear-gradient(to right, transparent, var(--dorado-claro), transparent);
}

.texto p {
  font-size: 1.02rem;
}

.practica-datos {
  background: var(--crema-suave);
  border-left: 3px solid var(--dorado-claro);
  border-radius: 4px;
  padding: 20px 22px;
  margin-bottom: 32px;
}

.practica-fecha {
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  color: var(--ciruela);
  margin-bottom: 4px;
}

.practica-hora {
  font-size: 1.05rem;
  color: var(--ciruela-suave);
  margin-bottom: 10px;
}

.practica-nota-horario {
  font-size: 0.9rem;
  color: var(--texto);
  opacity: 0.8;
  margin-bottom: 0;
  font-style: italic;
}

.reproductor {
  margin-bottom: 32px;
}

.audio-titulo {
  font-family: var(--fuente-titulos);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ciruela);
  margin-bottom: 12px;
}

.reproductor audio {
  width: 100%;
  border-radius: 999px;
}

.reproductor a {
  color: var(--dorado);
}

.texto--instrucciones p {
  font-size: 1.02rem;
}

.boton-akasha {
  display: block;
  text-align: center;
  text-decoration: none;
  background-color: var(--ciruela);
  color: var(--crema);
  font-family: var(--fuente-titulos);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  padding: 16px 24px;
  border-radius: 6px;
  margin: 28px 0 20px;
  transition: background-color 0.2s ease;
}

.boton-akasha:hover,
.boton-akasha:focus {
  background-color: var(--ciruela-oscuro);
}

.nota-silencio {
  font-size: 0.92rem;
  color: var(--texto);
  opacity: 0.75;
  max-width: 50ch;
}

.frase-cierre {
  font-family: var(--fuente-titulos);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ciruela-suave);
  max-width: 44ch;
  margin: 20px auto;
}

/* ------------------------------------------------------------
   Pantallas más anchas: un poco más de aire, nada más.
   El diseño es mobile-first; esto es solo un ajuste sutil.
   ------------------------------------------------------------ */
@media (min-width: 640px) {
  main {
    padding: 0 32px;
  }

  .section {
    padding: 80px 0;
  }

  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 1.75rem;
  }
}