/* =====================================================
   Lysarche — Serene Light Theme (Pastel / Mindfulness)
   - Full CSS to replace styles.css (no dark mode)
   - Calming palette: lavender, periwinkle, mint, blush, sand
   - Subtle animations & glass surfaces; accessibility friendly
===================================================== */
:root{
  /* Light bases */
  --bg:#F7F8FB;          /* paper */
  --bg-2:#F1F3FA;        /* alt section */
  --ink:#0E1116;         /* text */
  --muted:#5E6B72;       /* secondary text */

  /* Pastels */
  --lavender:#E7D9FF;
  --periwinkle:#D6E1FF;
  --sky:#EAF3FF;
  --mint:#CFEDE3;
  --seafoam:#BFE6D9;
  --blush:#F8CDE0;
  --sand:#EFE6D7;

  /* UI tokens */
  --glass: color-mix(in oklab, white 60%, transparent);
  --border: rgba(0,0,0,.08);

  --container: 1200px;
  --radius: 18px;
  --header-h: clamp(60px, 7vh, 84px);

  /* Spacing (8pt) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.container{ width:min(100% - 32px, var(--container)); margin-inline:auto; position:relative; z-index:2 }
.flow > * + *{ margin-top:var(--flow, var(--s-5)) }

/* ===== Pastel Aurora Background (very subtle) ===== */
.aurora{
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 520px at 8% 8%, color-mix(in oklab, var(--lavender) 38%, transparent) 0%, transparent 60%),
    radial-gradient(920px 540px at 96% 12%, color-mix(in oklab, var(--mint) 36%, transparent) 0%, transparent 60%),
    radial-gradient(1200px 700px at 40% 96%, color-mix(in oklab, var(--sky) 34%, transparent) 0%, transparent 60%);
  animation: drift 36s ease-in-out infinite alternate;
  opacity:.9;
}
@keyframes drift{
  0%{ transform: translateY(0) scale(1); filter: blur(0px) }
  100%{ transform: translateY(-1.2%) scale(1.02); filter: blur(0.5px) }
}
.orb{
  position:absolute; border-radius:50%; filter: blur(36px) brightness(1.05);
  opacity:.18; mix-blend-mode:screen;
}
.orb-a{ width:380px; height:380px; left:8%; top:18%; background:radial-gradient(circle at 30% 30%, var(--blush), transparent 60%) }
.orb-b{ width:420px; height:420px; right:6%; top:10%; background:radial-gradient(circle at 70% 40%, var(--mint), transparent 60%) }
.orb-c{ width:520px; height:520px; left:24%; bottom:-8%; background:radial-gradient(circle at 50% 60%, var(--periwinkle), transparent 65%) }
@media (prefers-reduced-motion: reduce){
  .aurora, .orb{ animation:none }
}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; height:var(--header-h); z-index:10;
  background: color-mix(in oklab, var(--bg) 88%, white 12%);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(120%) blur(10px);
}
.header-inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s-5) }
.logo-word{ font-family:"Poppins", system-ui, sans-serif; font-weight:800; letter-spacing:.2px; font-size:20px }
.nav{ display:flex; align-items:center; gap:var(--s-3) }
.nav a{
  color:var(--ink); text-decoration:none; font-weight:600; opacity:.95;
  padding:10px 12px; border-radius:10px;
}
.nav a:hover{ background:rgba(0,0,0,.04) }
.btn-outline{
  border:1px solid rgba(0,0,0,.10); padding:10px 14px; border-radius:999px; color:var(--ink);
  background: color-mix(in oklab, var(--bg) 75%, white 25%);
}
.mobile-toggle{ display:none; background:transparent; border:0; color:var(--ink); font-size:20px }

/* ===== Hero ===== */
.hero{
  min-height:calc(100svh - var(--header-h));
  display:grid; place-items:stretch;
  padding-top: calc(var(--header-h) + var(--s-7));
  padding-bottom: var(--s-8);
  background:
    radial-gradient(1000px 600px at 10% 0%, var(--lavender) 0%, transparent 60%),
    radial-gradient(900px 520px at 90% 10%, var(--mint) 0%, transparent 60%),
    radial-gradient(1200px 680px at 40% 100%, var(--sky) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
.hero-inner{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:var(--s-7); align-items:center }
.hero-copy h1{ font-size: clamp(32px, 5vw, 56px); line-height:1.05; margin:0 }
.hero-copy .soft{ color: color-mix(in oklab, var(--mint) 40%, var(--ink)); }
.lead{ color:var(--muted); max-width:60ch }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap }
.btn-primary{
  background: linear-gradient(90deg, var(--blush), var(--periwinkle));
  padding:12px 18px; border-radius:999px; color:#0E1116; text-decoration:none; font-weight:800;
  box-shadow: 0 10px 24px rgba(15,23,42,.15);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover{ transform: translateY(-1px) scale(1.01); box-shadow: 0 14px 36px rgba(15,23,42,.22) }
.btn-ghost{
  padding:10px 16px; border-radius:999px; background:transparent; border:1px solid rgba(0,0,0,.12); color:var(--ink);
}
.benefits{ display:flex; gap:12px; list-style:none; padding:0; margin:6px 0 0; color:var(--ink); font-weight:600; flex-wrap:wrap }

.hero-visual{ display:grid; place-items:center }
.glass{
  background: var(--glass);
  border:1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(15,23,42,.10);
}
.phone{ width:min(100%, 380px); padding:16px; transform:translateZ(0) }
.status{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px }
.pill{ background: linear-gradient(90deg, var(--lavender), var(--mint)); color:#142018; padding:6px 12px; border-radius:999px; font-weight:800 }
.dot{ width:10px; height:10px; background: var(--mint); border-radius:50%; box-shadow:0 0 0 6px color-mix(in oklab, var(--mint) 25%, transparent) }
.meter{ display:flex; align-items:center; gap:12px }
.ring{
  width:80px; height:80px; border-radius:50%; display:grid; place-items:center; color:#142018; font-weight:800;
  background: conic-gradient(from -90deg, var(--mint) 0 76%, rgba(15,23,42,.10) 76% 100%),
              radial-gradient(circle at 50% 50%, rgba(255,255,255,.9), rgba(255,255,255,.3));
}
.tracks{ flex:1 }
.track{ height:12px; background:rgba(15,23,42,.08); border-radius:999px; margin-bottom:8px; position:relative; overflow:hidden }
.track::after{ content:""; position:absolute; left:0; top:0; height:100%; width:var(--w,60%);
  background: linear-gradient(90deg, var(--periwinkle), var(--mint)); border-radius:999px; transition:width .6s ease }
.tip{ margin-top:10px; color:var(--muted); font-style:italic }

.scroll-hint{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; opacity:.9 }
.mouse{ width:18px; height:28px; border:2px solid rgba(15,23,42,.35); border-radius:12px; position:relative }
.mouse::after{ content:""; width:2px; height:4px; background:rgba(15,23,42,.55); position:absolute; left:50%; top:6px; transform:translateX(-50%); border-radius:1px; animation: wheel 2s ease-in-out infinite }
@keyframes wheel{ 0%{ transform:translate(-50%,0) } 60%{ transform:translate(-50%,6px) } 100%{ transform:translate(-50%,0) } }
.arrow{ font-size:12px; color:var(--muted) }

/* ===== Sections ===== */
section{ position:relative; z-index:1 }
.section{ padding-block: var(--s-9); background: linear-gradient(180deg, var(--bg), var(--bg-2)) }
.section.alt{
  background:
    radial-gradient(900px 520px at 6% 0%, color-mix(in oklab, var(--sand) 28%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
.section.emph{
  background:
    radial-gradient(900px 520px at 92% 0%, color-mix(in oklab, var(--mint) 26%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
.section-inner{ --flow: var(--s-6) }
.section h2{ font-family:"Poppins", system-ui, sans-serif; font-size: clamp(24px, 3.6vw, 36px); margin:0; color:var(--ink) }
.section-sub{ color:var(--muted); max-width: 65ch }

.cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:var(--s-4) }
.card{ padding:18px 16px }
.lift{ transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease }
.lift:hover{ transform: translateY(-4px); box-shadow: 0 16px 44px rgba(15,23,42,.16) }

.steps{ display:grid; gap:12px }
.steps li{ list-style:none; background:rgba(15,23,42,.04); padding:14px 16px; border-radius:14px; border:1px solid rgba(0,0,0,.06) }
.steps li strong{ color:var(--ink) }

.grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap:var(--s-4) }
.block{ padding:18px 16px }

.mini{ padding-left:18px; display:grid; gap:6px; color:var(--muted) }
.bullets{ display:grid; gap:10px; padding-left:18px }
.bullets li{ margin-left:10px }

.testimonials{ display:grid; grid-template-columns: repeat(3,1fr); gap:var(--s-4) }
.quote{ padding:18px 16px; font-style:italic; color:var(--ink) }

.faq details{ padding:14px 16px; border-radius:14px; border:1px solid var(--border); background:var(--glass) }
.faq summary{ cursor:pointer; font-weight:700; font-family:"Poppins", system-ui, sans-serif }

.cta{ margin:40px 0; padding:24px; border-radius:20px; text-align:center }

.note{ color:var(--muted); font-size:0.95rem }

/* ===== Socials ===== */
.socials{ display:flex; align-items:center; justify-content:center; gap:var(--s-3); flex-wrap:wrap }
.socials a{
  display:inline-flex; align-items:center; justify-content:center;
  height:56px; width:auto; padding:8px; border-radius:12px;
  background: color-mix(in oklab, var(--bg) 80%, white 20%);
  border:1px solid var(--border); color:var(--ink);
}
.socials a:hover{ background: color-mix(in oklab, var(--bg) 70%, white 30%) }
.socials svg{ height:100%; width:auto; display:block }

/* ===== Footer ===== */
.site-footer{
  background: color-mix(in oklab, var(--bg) 85%, white 15%);
  padding:18px 0; border-top:1px solid var(--border);
}
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap }
.brandline{ display:flex; align-items:center; gap:10px }
.links a{ margin-right:12px; color:var(--muted); text-decoration:none }
.links a:hover{ color: var(--ink) }

/* Anchor offset for sticky header */
:where(section,[id]){ scroll-margin-top: calc(var(--header-h) + 12px) }

/* ===== Effects: tilt + reveals ===== */
.tilt{ transform-style: preserve-3d; perspective: 800px }
.reveal{ opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease }
.reveal.is-in{ opacity:1; transform: translateY(0) }

/* ===== Responsiveness ===== */
@media (max-width: 1040px){
  .hero-inner{ grid-template-columns: 1fr; gap: var(--s-6) }
  .hero-visual{ order: -1 }
  .cards{ grid-template-columns: 1fr 1fr }
  .grid-4{ grid-template-columns: 1fr 1fr }
  .testimonials{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 560px){
  .nav{ display:none }
  .mobile-toggle{ display:block }
  .cards, .grid-4, .testimonials{ grid-template-columns:1fr }
  .socials a{ height:48px }
  .hero{ padding-top: calc(var(--header-h) + var(--s-6)) }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition:none !important; animation:none !important }
}

/* Asegura que el contenido quede sobre el background aurora/orbs */
.aurora, .orb {
  z-index: -1 !important; /* manda atrás las auroras */
}

body, .container, section, header, footer {
  position: relative;
  z-index: 5; /* asegura que el texto quede encima */
}