/* HEALING TOOLS · Hoja de estilos
   Los colores de la marca están en :root (modo claro) y en los bloques de modo oscuro.
   Layout: amanecer en columna — portada con el círculo que respira, secciones aireadas que alternan texto y luz, una herramienta de respiración real como momento central */
:root{
  --bg:#FBF5EC;        /* crema */
  --surface:#F5E6D5;   /* arena clara */
  --peach:#EDB596;     /* melocotón */
  --gold:#C99A5B;      /* dorado suave */
  --ink:#3A2A22;       /* texto */
  --muted:#7B6556;     /* texto secundario */
  --accent:#9E5A38;    /* enlaces y botones */
  --line:rgba(122,90,60,.18);
  --glow-core:#FFE6C7;
  --on-accent:#FFF8EF;
  --f-display:"Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --f-body:"Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --step--1:.875rem; --step-0:1.0625rem; --step-1:1.3rem; --step-2:1.75rem; --step-3:2.5rem; --step-4:clamp(2.6rem, 6vw, 4.4rem);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#1D1722; --surface:#29212F; --peach:#E39D7E; --gold:#D8B170; --ink:#F3E6D8; --muted:#C2AC9C; --accent:#F0B794; --line:rgba(240,200,160,.16); --glow-core:#FFD9AE; --on-accent:#2A1C17; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#1D1722; --surface:#29212F; --peach:#E39D7E; --gold:#D8B170; --ink:#F3E6D8; --muted:#C2AC9C; --accent:#F0B794; --line:rgba(240,200,160,.16); --glow-core:#FFD9AE; --on-accent:#2A1C17; color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; color-scheme:light;}
img{max-width:100%}
[id]{scroll-margin-top:80px}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-weight:300; font-size:var(--step-0); line-height:1.7;}
.wrap{max-width:1120px; margin-inline:auto; padding-inline:clamp(16px,5vw,48px);}
h1,h2,h3{font-family:var(--f-display); font-weight:500; line-height:1.1; text-wrap:balance; margin:0;}
h2{font-size:var(--step-3);}
h3{font-size:var(--step-2);}
p{margin:0; max-width:62ch;}
a{color:var(--accent);}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}
.eyebrow{font-size:var(--step--1); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:400;}

/* Cabecera */
header{position:sticky; top:env(safe-area-inset-top,0px); z-index:10; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px;}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:var(--f-display); font-size:1.45rem; font-weight:500; letter-spacing:.02em;}
.logo i{width:22px; height:22px; border-radius:50%; background:radial-gradient(circle, var(--glow-core) 0%, var(--peach) 55%, var(--gold) 100%); box-shadow:0 0 14px var(--peach);}
nav ul{display:flex; gap:26px; list-style:none; margin:0; padding:0;}
nav a{color:var(--ink); text-decoration:none; font-size:.95rem; font-weight:400;}
nav a:hover{color:var(--accent);}
.menu{display:none;}
.menu summary{list-style:none; cursor:pointer; font-size:.95rem; padding:6px 12px; border:1px solid var(--line); border-radius:99px;}
.menu summary::-webkit-details-marker{display:none}
.menu ul{position:absolute; right:clamp(16px,5vw,48px); top:58px; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:14px 22px; flex-direction:column; gap:10px; box-shadow:0 18px 40px rgba(60,30,10,.12);}
@media (max-width:860px){ nav.full{display:none} .menu{display:block} }

.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:99px; background:var(--accent); color:var(--on-accent); text-decoration:none; font-weight:400; letter-spacing:.02em; border:0; font:inherit; font-weight:400; cursor:pointer; transition:transform .3s ease, box-shadow .3s ease;}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px color-mix(in srgb, var(--accent) 30%, transparent);}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line);}
.btn.ghost:hover{border-color:var(--accent); box-shadow:none;}

/* Portada */
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,5vw,64px); align-items:center; padding-block:clamp(40px,8vw,96px) clamp(48px,8vw,104px);}
.hero h1{font-size:var(--step-4); font-weight:400; letter-spacing:-.01em;}
.hero h1 em{font-style:italic; color:var(--accent);}
.hero .punch{font-family:var(--f-display); font-style:italic; font-size:clamp(1.45rem,2.6vw,1.9rem); line-height:1.3; color:var(--ink); margin-top:20px; max-width:30ch; text-wrap:balance;}
.hero .lead{font-size:var(--step-1); color:var(--muted); margin-top:22px; max-width:40ch; line-height:1.55;}
.hero .ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px;}
.since{margin-top:30px;}
.orb{position:relative; aspect-ratio:1; width:100%; max-width:440px; justify-self:center; display:grid; place-items:center;}
.orb .halo,.orb .core{position:absolute; border-radius:50%;}
.orb .halo{inset:0; background:radial-gradient(circle, color-mix(in srgb,var(--peach) 55%, transparent) 0%, transparent 68%); animation:breathe 10s ease-in-out infinite;}
.orb .core{inset:22%; background:radial-gradient(circle at 42% 38%, var(--glow-core) 0%, var(--peach) 58%, var(--gold) 100%); box-shadow:0 0 70px color-mix(in srgb,var(--peach) 70%, transparent); animation:breathe 10s ease-in-out infinite;}
.orb .ring{position:absolute; inset:8%; border-radius:50%; border:1px solid var(--line);}
.orb .words{position:relative; font-family:var(--f-display); font-style:italic; font-size:1.6rem; color:#5A3A28; height:1.6em; width:6em; text-align:center;}
.orb .words span{position:absolute; inset:0;}
.orb .w-in{animation:wIn 10s ease-in-out infinite;}
.orb .w-out{animation:wOut 10s ease-in-out infinite;}
@keyframes breathe{0%{transform:scale(.74)} 40%{transform:scale(1)} 100%{transform:scale(.74)}}
@keyframes wIn{0%,34%{opacity:1} 40%,96%{opacity:0} 100%{opacity:1}}
@keyframes wOut{0%,36%{opacity:0} 42%,94%{opacity:1} 100%{opacity:0}}
@media (max-width:760px){ .hero{grid-template-columns:1fr} .orb{max-width:300px; grid-row:1} }

section{padding-block:clamp(56px,9vw,112px);}
.soft{background:var(--surface);}

/* Qué es */
.intro{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(24px,5vw,72px); align-items:start;}
.intro .text{display:flex; flex-direction:column; gap:18px; min-width:0;}
.intro .text p:first-child{font-family:var(--f-display); font-size:var(--step-2); line-height:1.3; color:var(--ink);}
.intro .pattern{font-size:var(--step-1); font-weight:400; color:var(--ink); line-height:1.5;}
.intro .for{padding:18px 22px; border-left:2px solid var(--gold); background:color-mix(in srgb, var(--bg) 60%, transparent); border-radius:0 14px 14px 0;}
.intro .for strong{font-weight:500; color:var(--accent);}
.intro .free{font-family:var(--f-display); font-style:italic; font-size:var(--step-2); line-height:1.35; color:var(--ink); text-wrap:balance;}
.intro .free strong{font-style:normal; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--accent);}
.tools{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; padding:0; list-style:none;}
.tools li{padding:6px 16px; border:1px solid var(--line); border-radius:99px; font-size:.92rem; color:var(--muted);}
@media (max-width:760px){ .intro{grid-template-columns:1fr} }

/* Caminos */
.head{display:flex; flex-direction:column; gap:14px; margin-bottom:clamp(32px,5vw,56px);}
.paths{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,3vw,32px);}
.path{display:flex; flex-direction:column; gap:14px; padding:32px 28px; background:var(--bg); border-radius:24px; border:1px solid var(--line); min-width:0;}
.path .dot{width:46px; height:46px; border-radius:50%; background:radial-gradient(circle at 40% 38%, var(--glow-core), var(--peach) 60%, var(--gold));}
.path:nth-child(2) .dot{background:radial-gradient(circle at 40% 38%, var(--glow-core), var(--gold) 70%); box-shadow:22px 0 0 -8px var(--peach);}
.path:nth-child(3) .dot{border-radius:14px;}
.path .meta{font-size:var(--step--1); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:400;}
.path p{color:var(--muted);}
.path .more{margin-top:auto; padding-top:8px; font-weight:400; text-decoration:none;}
.path .more:hover{text-decoration:underline;}
@media (max-width:900px){ .paths{grid-template-columns:1fr} }

/* Cómo es una sesión */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,36px); list-style:none; padding:0; margin:0; counter-reset:s;}
.steps li{display:flex; flex-direction:column; gap:10px; padding-top:22px; border-top:1px solid var(--gold); min-width:0;}
.steps li::before{counter-increment:s; content:counter(s); font-family:var(--f-display); font-style:italic; font-size:2.2rem; line-height:1; color:var(--gold);}
.steps h3{font-size:var(--step-1); font-family:var(--f-body); font-weight:400;}
.steps p{color:var(--muted); font-size:.98rem;}
@media (max-width:900px){ .steps{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .steps{grid-template-columns:1fr} }

/* Respira ahora */
.tool{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center;}
.tool .text{display:flex; flex-direction:column; gap:18px; min-width:0;}
.patterns{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px;}
.patterns button{font:inherit; font-size:.95rem; font-weight:400; padding:10px 18px; border-radius:99px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer;}
.patterns button[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.pdesc{color:var(--muted); font-size:.98rem; min-height:3.4em;}
.stage{position:relative; aspect-ratio:1; width:100%; max-width:400px; justify-self:center; display:grid; place-items:center;}
.stage .track{position:absolute; inset:4%; border-radius:50%; border:1px dashed var(--line);}
.stage .ball{position:absolute; inset:14%; border-radius:50%; background:radial-gradient(circle at 42% 38%, var(--glow-core) 0%, var(--peach) 58%, var(--gold) 100%); box-shadow:0 0 60px color-mix(in srgb,var(--peach) 60%, transparent); transform:scale(.6); transition-property:transform; transition-timing-function:ease-in-out;}
.stage .read{position:relative; text-align:center; color:#4A2F20;}
.stage .phase{font-family:var(--f-display); font-style:italic; font-size:2rem; line-height:1.1;}
.stage .count{font-size:1rem; letter-spacing:.1em; font-variant-numeric:tabular-nums; min-height:1.6em;}
.controls{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
.cycles{font-size:var(--step--1); color:var(--muted); font-variant-numeric:tabular-nums;}
@media (max-width:760px){ .tool{grid-template-columns:1fr} .stage{max-width:300px} }

/* Grupos y empresas */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,3vw,32px);}
.duo article{display:flex; flex-direction:column; gap:16px; padding:clamp(28px,4vw,48px); border-radius:28px; min-width:0;}
.duo .groups{background:linear-gradient(160deg, color-mix(in srgb,var(--peach) 38%, var(--bg)), var(--bg));}
.duo .biz{background:var(--surface);}
.duo p{color:var(--muted);}
.duo .btn{align-self:flex-start; margin-top:8px;}
@media (max-width:820px){ .duo{grid-template-columns:1fr} }

/* Cuidado */
.care{display:flex; flex-direction:column; gap:12px; padding-block:28px; border-block:1px solid var(--line);}
.care p{font-size:.95rem; color:var(--muted); max-width:80ch;}

/* Contacto */
.contact{text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px;}
.contact p{color:var(--muted);}
.mail{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; margin-top:6px;}
.mail .addr{font-family:var(--f-display); font-size:clamp(1.6rem,4vw,2.4rem); color:var(--ink); user-select:all; word-break:break-all;}
.copy{font:inherit; font-size:.9rem; padding:8px 16px; border-radius:99px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer;}
.copied{font-size:.9rem; color:var(--accent); min-height:1.4em;}

footer{border-top:1px solid var(--line); padding-block:36px; font-size:.9rem; color:var(--muted);}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px;}
footer ul{display:flex; flex-wrap:wrap; gap:20px; list-style:none; margin:0; padding:0;}
footer a{color:var(--muted); text-decoration:none;}
footer a:hover{color:var(--accent);}

@media (prefers-reduced-motion: reduce){
  .orb .halo,.orb .core,.orb .w-in,.orb .w-out{animation:none}
  .orb .w-out{opacity:0}
  .stage .ball{transition:none!important}
}

/* Páginas legales */
.legal{padding-block:clamp(40px,7vw,88px);}
.legal .wrap{max-width:820px;}
.legal h1{font-size:var(--step-3); margin-bottom:10px;}
.legal .updated{color:var(--muted); font-size:var(--step--1); margin-bottom:36px;}
.legal h2{font-family:var(--f-body); font-size:var(--step-1); font-weight:500; margin:36px 0 12px;}
.legal p,.legal li{color:var(--ink); max-width:70ch;}
.legal p+p{margin-top:12px;}
.legal ul{padding-left:20px; display:flex; flex-direction:column; gap:6px; margin:12px 0;}
.legal dl{display:grid; grid-template-columns:max-content 1fr; gap:8px 24px; margin:0; padding:22px 24px; background:var(--surface); border-radius:16px;}
.legal dt{color:var(--muted);}
.legal dd{margin:0; min-width:0; overflow-wrap:anywhere;}
@media (max-width:560px){ .legal dl{grid-template-columns:1fr; gap:2px} .legal dd{margin-bottom:10px} }
.back{display:inline-block; margin-top:40px;}
