/* Mindtone · mindtone.fm
   Los mismos colores, tipografía y botones que la app (MindToneTheme.swift). */

:root {
  --bg: #0D0C11;            /* mindToneBackground */
  --card: #16161F;          /* mindToneCard */
  --card-2: #1C1C1E;        /* mindToneCardBg */
  --sand: #E6E0D5;          /* mindToneSand */
  --muted: #8E8D92;         /* mindToneTextMuted */
  --text: #FFFFFF;
  --soft: rgba(255, 255, 255, .74);
  --line: rgba(255, 255, 255, .14);
  --glass-line: rgba(255, 255, 255, .6);
  --amber: #E9B173;         /* acento del cielo del Sleep Signal */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue",
          "Segoe UI", Roboto, Inter, Arial, sans-serif;
  --wrap: 1120px;
  --gutter: 24px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: rgba(230, 224, 213, .28); }
:focus-visible { outline: 2px solid var(--sand); outline-offset: 4px; border-radius: 12px; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 50; padding: 10px 16px;
  background: var(--sand); color: #000; border-radius: 999px; text-decoration: none; font-weight: 600; }
.skip:focus { left: 12px; }

/* ---------- Cielo: estrellas fijas (las mismas que la app) ---------- */
.stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .nav, footer { position: relative; z-index: 1; }
main { overflow-x: clip; }  /* los halos de la luna no deben ensanchar la página en el móvil */

/* ---------- Tipografía ---------- */
.eyebrow {
  margin: 0 0 14px;
  font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
}
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
h1 { font-size: clamp(38px, 6.2vw, 76px); line-height: 1.06; letter-spacing: -.025em; }
h2 { font-size: clamp(30px, 4.4vw, 54px); line-height: 1.1; letter-spacing: -.02em; }
h3 { font-size: 21px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }
.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--soft); max-width: 34em; margin-inline: auto; }
.muted { color: var(--muted); }
.center { text-align: center; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

/* ---------- Botones (MindToneButtonStyles) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 28px; border-radius: 999px;
  font-size: 17px; font-weight: 700; letter-spacing: -.01em; text-decoration: none;
  cursor: pointer; border: 0;
  transition: transform .35s var(--ease), opacity .2s, box-shadow .35s var(--ease), background .3s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
/* PrimarySolid con halo: arena, texto negro */
.btn-solid {
  background: var(--sand); color: #000;
  box-shadow: 0 0 8px rgba(230, 224, 213, .65), 0 0 18px rgba(230, 224, 213, .35);
}
.btn-solid:hover { box-shadow: 0 0 10px rgba(230, 224, 213, .75), 0 0 30px rgba(230, 224, 213, .45); }
/* PrimaryOutline: cristal con borde blanco */
.btn-glass {
  background: rgba(255, 255, 255, .07); color: #fff;
  box-shadow: inset 0 0 0 1.2px var(--glass-line);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
}
.btn-glass:hover { background: rgba(255, 255, 255, .11); }
.btn svg { width: 18px; height: 18px; }

/* ---------- Cabecera ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  transition: background .4s, box-shadow .4s, -webkit-backdrop-filter .4s, backdrop-filter .4s;
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav.scrolled {
  background: rgba(13, 12, 17, .86);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.brand img { width: 30px; height: 30px; filter: drop-shadow(0 0 10px rgba(230, 224, 213, .35)); }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { text-decoration: none; font-size: 15px; color: var(--soft); transition: color .2s; }
.nav-links a:hover { color: #fff; }
.nav-links .pill { padding: 8px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); color: #fff; }
@media (max-width: 760px) { .nav-links a:not(.pill) { display: none; } }

/* ---------- La luna que respira (BreathingMoon) ---------- */
.moon {
  --size: 124px;
  position: relative; width: var(--size); height: var(--size); margin-inline: auto;
  pointer-events: none;
}
.moon img { position: relative; width: 100%; height: 100%; }
.moon::before, .moon::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; }
/* halo ancho arena (2,2 × tamaño, desenfoque 0,4 × tamaño) */
.moon::before {
  width: calc(var(--size) * 3.2); height: calc(var(--size) * 3.2);
  margin: calc(var(--size) * -1.6) 0 0 calc(var(--size) * -1.6);
  background: radial-gradient(closest-side, rgba(230, 224, 213, .16), rgba(230, 224, 213, .12) 22%, rgba(230, 224, 213, .075) 40%,
    rgba(230, 224, 213, .04) 58%, rgba(230, 224, 213, .016) 76%, rgba(230, 224, 213, .004) 90%, transparent);
}
/* halo cercano blanco (1,42 × tamaño, desenfoque 0,17 × tamaño) */
.moon::after {
  width: calc(var(--size) * 2.1); height: calc(var(--size) * 2.1);
  margin: calc(var(--size) * -1.05) 0 0 calc(var(--size) * -1.05);
  background: radial-gradient(closest-side, rgba(255, 255, 255, .15) 30%, rgba(255, 255, 255, .11) 46%, rgba(255, 255, 255, .065) 60%,
    rgba(255, 255, 255, .03) 74%, rgba(255, 255, 255, .01) 88%, transparent);
}
/* 5,5 s de inspirar y 5,5 de espirar: unas 5 respiraciones por minuto */
.moon.breathe img { animation: breathe-moon 11s ease-in-out infinite; }
.moon.breathe::before { animation: breathe-wide 11s ease-in-out infinite; }
.moon.breathe::after { animation: breathe-near 11s ease-in-out infinite; }
@keyframes breathe-moon { 0%, 100% { transform: scale(.97); } 50% { transform: scale(1.03); } }
@keyframes breathe-wide { 0%, 100% { transform: scale(.9); } 50% { transform: scale(1.08); } }
@keyframes breathe-near { 0%, 100% { transform: scale(.97); } 50% { transform: scale(1.04); } }

/* ---------- Aparición suave al hacer scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .12s; } .reveal.d2 { transition-delay: .24s; } .reveal.d3 { transition-delay: .36s; }

/* Dibujos de una sola línea: se trazan al aparecer */
.draw { color: rgba(255, 255, 255, .8); }
.draw path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--ease); }
.draw.in path { stroke-dashoffset: 0; }

/* ---------- Pie ---------- */
footer { border-top: 1px solid rgba(255, 255, 255, .06); padding: 48px 0 56px; margin-top: 40px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-start; justify-content: space-between; }
footer .brand { font-size: 16px; }
footer .brand img { width: 26px; height: 26px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.foot-links a { color: var(--soft); text-decoration: none; font-size: 15px; }
.foot-links a:hover { color: #fff; }
.foot-note { width: 100%; font-size: 13px; color: var(--muted); line-height: 1.6; }
.foot-note a { color: var(--soft); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .moon.breathe img, .moon.breathe::before, .moon.breathe::after { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .draw path { stroke-dashoffset: 0; transition: none; }
}