/* Layout: monochrome paper page, one temperament accent per section; course cards and offer blocks carry the only large colour fields. Light only. */
:root{
  --paper:#F5F4F2; --ink:#141414; --charcoal:#2B2B2B; --graphite:#5A5A5A;
  --bg:var(--paper); --fg:var(--ink); --fg-2:var(--charcoal); --fg-3:var(--graphite);
  --rule:#DEDCD8; --surface:#FFFFFF;
  --col-t:#F1D3CB; --col-m:#C96A55; --col-d:#8E3F2E;
  --san-t:#F6E4B8; --san-m:#D9B24C; --san-d:#8A6A17;
  --mel-t:#DDD3E6; --mel-m:#8E78A8; --mel-d:#5B466E;
  --fle-t:#CFDDE0; --fle-m:#6E9AA3; --fle-d:#3F6670;
  --on-deep:#F5F4F2;
  --t:var(--col-t); --d:var(--col-d);
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --label:"Josefin Sans","Futura","Avenir Next","Century Gothic",sans-serif;
  --wide:1120px; --gutter:clamp(16px,4vw,40px); --radius:22px;
  --ease:cubic-bezier(.5,.2,.1,1);
  color-scheme:light;
}
.p-mel{--t:var(--mel-t);--d:var(--mel-d)}
.p-fle{--t:var(--fle-t);--d:var(--fle-d)}
.p-col{--t:var(--col-t);--d:var(--col-d)}
.p-san{--t:var(--san-t);--d:var(--san-d)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--paper)}
body{overflow-x:clip;margin:0;background:var(--bg);color:var(--fg-2);font:400 17px/1.6 var(--sans)}
a{color:var(--fg)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--display);color:var(--fg);line-height:1.05;margin:0;text-wrap:balance}
p{margin:0}
img{max-width:100%;display:block}
.wrap{max-width:var(--wide);margin:0 auto;padding-inline:var(--gutter)}
.label{font-family:var(--label);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--fg-3)}

/* header */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.85rem}
.mark{font-family:var(--display);font-style:italic;font-weight:900;font-size:1.5rem;color:var(--fg);text-decoration:none;letter-spacing:-.02em;line-height:1}
.mark i{display:inline-block;width:.22em;height:.22em;border-radius:50%;background:var(--d);margin:0 .14em;transform:translateY(-.85em)}
.top nav{display:flex;gap:1.4rem;align-items:center}
.top nav a{font-family:var(--label);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;text-decoration:none;color:var(--fg-3)}
.top nav a:hover{color:var(--fg)}
@media (max-width:560px){.top nav a:not(.keep){display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--label);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;text-decoration:none;padding:1.05rem 1.5rem .95rem;border-radius:999px;background:var(--fg);color:var(--bg);transition:transform .3s var(--ease),background .3s}
.btn:hover{transform:translateY(-2px)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn.accent{background:var(--d);color:var(--on-deep)}
.btn.sm{padding:.7rem 1.1rem .62rem;font-size:.68rem}
.link{font-family:var(--label);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:.2rem}
.link:hover{border-color:var(--fg)}
.todo{display:inline-block;font-family:var(--label);font-weight:700;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:.25em .6em .15em;border-radius:4px;border:1px dashed currentColor;color:var(--fg-3)}

/* sections */
section{padding-block:clamp(3.5rem,9vw,6.5rem);border-top:1px solid var(--rule)}
.head{display:flex;flex-direction:column;gap:.9rem;margin-bottom:clamp(2rem,5vw,3rem);max-width:40rem}
.head h2{font-size:clamp(2.1rem,5.5vw,3.6rem);font-weight:600;font-variation-settings:"opsz" 96;letter-spacing:-.015em}
.head h2 i{font-weight:900}
.head p{color:var(--fg-3);font-size:1.05rem}
.prose{display:grid;gap:1.1rem;max-width:40rem;font-size:1.08rem}
.prose strong{color:var(--fg);font-weight:500}

/* hero — mobile-first: photo sits above the name; from 860px it moves to the right column */
.hero{padding-block:clamp(2.5rem,8vw,6.5rem) clamp(3rem,8vw,6rem);display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center}
.hero .text{min-width:0}
.hero .label{display:block;margin-bottom:1.4rem}
/* home: eyebrow sits under the name, as a subtitle to it, before the lede */
.hero h1 + .label{margin:1.3rem 0 0}
.hero h1{font-size:clamp(3rem,12vw,7.2rem);font-style:italic;font-weight:900;letter-spacing:-.025em;font-variation-settings:"opsz" 144;line-height:.95}
.hero h1 .w{display:inline-block}
.hero h1 .last{position:relative}
.hero h1 .dot{position:absolute;right:-.26em;top:.02em;width:.14em;height:.17em;border-radius:52% 48% 46% 54%/60% 58% 42% 40%;background:var(--col-d)}
.hero h1 small{display:block;font-size:.42em;font-weight:600;letter-spacing:-.01em;margin-top:.25em;color:var(--d)}
.hero .lede{margin-top:1.8rem;max-width:34rem;font-size:clamp(1.1rem,2.2vw,1.3rem);color:var(--fg-2)}
.hero .lede em{font-family:var(--display);font-style:italic;font-weight:600;color:var(--fg)}
.hero .actions{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:center}
.hero .inline-price{font-size:.95rem;color:var(--fg-3)}
.hero .inline-price b{font-family:var(--display);font-weight:600;color:var(--fg);font-size:1.1rem}

/* portrait: circular photo ringed by the four temperament dots */
.photo{position:relative;width:clamp(132px,38vw,200px);aspect-ratio:1;justify-self:start}
.photo img{width:100%;height:100%;object-fit:cover;border-radius:50%;background:var(--surface)}
.photo .o{position:absolute;width:11%;aspect-ratio:1;border-radius:50%}
.photo .o:nth-of-type(1){background:var(--col-d);left:6%;top:6%}
.photo .o:nth-of-type(2){background:var(--san-d);right:6%;top:6%}
.photo .o:nth-of-type(3){background:var(--fle-d);right:6%;bottom:6%}
.photo .o:nth-of-type(4){background:var(--mel-d);left:6%;bottom:6%}
@media (min-width:860px){
  .hero{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
  .hero .photo{order:2;width:min(100%,400px);justify-self:end}
}

/* home hero figure: cutout portrait in front of two layered organic blobs (no arch, no circles). Blobs and pebbles live on separate
   parallax layers (.pl, moved by site.js) so the scene reads as depth; clip-path cuts everything flat at the floor, where the photo is cut. */
.figure{position:relative;width:min(78vw,340px);aspect-ratio:4/5;justify-self:center;isolation:isolate;clip-path:inset(-60% -60% 0 -60%)}
.pl{position:absolute;inset:0;display:block;pointer-events:none;translate:var(--px,0) var(--py,0)}
.figure img{position:absolute;left:50%;bottom:0;width:92%;height:auto;transform:translateX(-50%)}
.blob,.peb,.seed{position:absolute;display:block}
.figure .b-main{left:3%;right:1%;bottom:-16%;height:94%;background:var(--san-t);border-radius:48% 52% 44% 56%/56% 50% 50% 44%;transform-origin:50% 100%}
.figure .b-back{left:-12%;top:6%;width:50%;aspect-ratio:1/1.18;background:var(--mel-t);border-radius:58% 42% 52% 48%/48% 56% 44% 52%;transform-origin:70% 70%}
/* pebbles: the four temperament colours as small eggs of different sizes, each on its own depth */
.peb{aspect-ratio:1/1.2;border-radius:52% 48% 46% 54%/60% 58% 42% 40%}
.figure .p1{width:7%;background:var(--col-d);left:-3%;top:30%}
.figure .p2{width:5%;background:var(--san-d);right:-1%;top:24%}
.figure .p3{width:4.5%;background:var(--mel-d);left:-6%;top:60%}
.figure .p4{width:8%;background:var(--fle-d);right:-5%;top:54%}
@media (min-width:860px){
  .hero.has-figure{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);padding-bottom:0;align-items:end}
  .hero.has-figure .text{padding-bottom:clamp(3rem,7vw,5.5rem);align-self:center}
  .figure{width:min(100%,440px);justify-self:end}
}

/* sales-page hero: long course names need a smaller display size than the home name */
.hero.sales h1{font-size:clamp(2.6rem,8vw,5rem)}

/* course-hero art: each course gets its own diagram (no portrait), so the hero states the method at a glance.
   Mobile: centred above the title at a size that still leaves the headline in the first screen; desktop: right column. */
.art{position:relative;width:clamp(220px,64vw,300px);aspect-ratio:1;justify-self:center}
@media (min-width:860px){.hero .art{order:2;width:min(100%,440px);justify-self:end}}

/* shared art layers: a soft accent blob behind the diagram, and two loose "seeds" on the deepest parallax layer */
.art .glow{position:absolute;inset:-4% -6% -8% -4%;display:block;background:var(--t);opacity:.55;border-radius:58% 42% 52% 48%/48% 56% 44% 52%}
.art .seed{width:4.5%;aspect-ratio:1/1.25;border-radius:50% 50% 45% 55%/60% 60% 40% 40%;background:var(--d)}
.art .s1{left:-4%;top:46%}
.art .s2{right:12%;bottom:-5%;width:3.2%;background:var(--col-m)}

/* GPTM — temperament stones: four separate egg-shaped stones (one per temperament) instead of a circle cut in quarters; each sits on its own
   parallax layer and slowly changes shape. A light walks round them so each temperament gets its moment, the hub echoing the lit one. */
.wheel .q{position:absolute;display:block;color:var(--dk);background:var(--tt);border-radius:58% 42% 52% 48%/48% 56% 44% 52%}
.wheel .q::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--m);opacity:0}
.wheel .q i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--display);font-style:italic;font-weight:600;font-size:clamp(.74rem,2.8vw,1.05rem);letter-spacing:-.01em;white-space:nowrap}
.wheel .col{--tt:var(--col-t);--dk:var(--col-d);--m:var(--col-m);--n:0;width:50%;aspect-ratio:1.08/1;left:0;top:3%}
.wheel .san{--tt:var(--san-t);--dk:var(--san-d);--m:var(--san-m);--n:1;width:45%;aspect-ratio:1/1.1;right:2%;top:2%}
.wheel .fle{--tt:var(--fle-t);--dk:var(--fle-d);--m:var(--fle-m);--n:2;width:50%;aspect-ratio:1.1/1;right:0;bottom:3%}
.wheel .mel{--tt:var(--mel-t);--dk:var(--mel-d);--m:var(--mel-m);--n:3;width:46%;aspect-ratio:1/1.05;left:4%;bottom:1%}
.wheel .hub{position:absolute;left:50%;top:50%;width:19%;aspect-ratio:1.1/1;translate:-50% -50%;border-radius:52% 48% 46% 54%/60% 58% 42% 40%;background:var(--paper);display:grid;place-items:center}
.wheel .hub::after{content:"";width:38%;aspect-ratio:1/1.15;border-radius:52% 48% 46% 54%/60% 58% 42% 40%;background:var(--ink)}

/* 4 Hábitos — routine clock: a soft, slightly irregular clock face set to 20h (bedtime), the four habits floating around it on their own
   parallax layers; Sono is filled because the hour hand points at it. The second hand keeps sweeping so the routine reads as alive. */
.clock .face{position:absolute;inset:0;border-radius:52% 48% 50% 50%/48% 52% 48% 52%;background:var(--fle-t)}
.clock .face::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -1deg,var(--fle-d) 0 2deg,transparent 2deg 30deg);
  -webkit-mask:radial-gradient(closest-side,transparent 84%,#000 84.5% 91%,transparent 91.5%);mask:radial-gradient(closest-side,transparent 84%,#000 84.5% 91%,transparent 91.5%)}
.clock .hand{position:absolute;left:50%;bottom:50%;border-radius:99px;transform-origin:50% 100%;translate:-50% 0}
.clock .hand.m{width:3px;height:40%;background:var(--fle-m);transform:rotate(360deg)}
.clock .hand.h{width:6px;height:34%;background:var(--fle-d);transform:rotate(240deg)}
.clock .hand.s{width:2px;height:42%;background:var(--col-m);transform:rotate(0deg)}
.clock .hub{position:absolute;inset:46%;border-radius:52% 48% 46% 54%/60% 58% 42% 40%;background:var(--fle-d);box-shadow:0 0 0 3px var(--fle-t)}
.clock .time{position:absolute;left:50%;top:64%;translate:-50% 0;font-family:var(--display);font-style:italic;font-weight:600;font-size:clamp(1.3rem,5vw,2rem);color:var(--fle-d);letter-spacing:-.02em}
.clock .chip{position:absolute;display:inline-flex;align-items:center;gap:.45em;padding:.45em .85em;border-radius:99px;background:var(--surface);color:var(--fg);font-size:clamp(.74rem,2.6vw,.92rem);font-weight:500;white-space:nowrap;box-shadow:0 6px 18px -8px rgb(20 20 20 / .25)}
.clock .chip i{width:.55em;height:.66em;border-radius:52% 48% 46% 54%/60% 58% 42% 40%;background:var(--c)}
.clock .c1{--c:var(--san-d);left:-6%;top:10%}
.clock .c2{--c:var(--col-d);right:-6%;top:10%}
.clock .c3{--c:var(--fle-d);right:-6%;bottom:10%}
.clock .c4{--c:var(--on-deep);left:-6%;bottom:10%;background:var(--mel-d);color:var(--on-deep)}

/* course cards — the two loudest objects on the home page */
.courses{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(1rem,2.5vw,1.6rem)}
.course{position:relative;display:flex;flex-direction:column;gap:1.4rem;background:var(--t);border-radius:var(--radius);padding:clamp(1.6rem,4vw,2.6rem);min-width:0;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.course:hover{transform:translateY(-6px);box-shadow:0 24px 50px -28px color-mix(in srgb,var(--d) 70%,transparent)}
/* card accent: a pale morphing blob bleeding off the top-right corner with a dark pebble on its edge,
   same language as the hero shapes. Content is lifted above it so the blob never covers text. */
.course > *{position:relative}
.course .orb{position:absolute;right:-48px;top:-56px;width:clamp(150px,34vw,190px);aspect-ratio:1/1.08;border-radius:58% 42% 52% 48%/48% 56% 44% 52%;background:color-mix(in srgb,var(--d) 16%,var(--t));transform-origin:70% 30%;transition:transform .9s var(--ease)}
.course .orb::after{content:"";position:absolute;left:14%;bottom:12%;width:18px;aspect-ratio:1/1.15;border-radius:52% 48% 46% 54%/60% 58% 42% 40%;background:var(--d)}
.course:hover .orb{transform:scale(1.12) rotate(-6deg)}
.go .course .orb{animation:morph 11s ease-in-out infinite}
.go .course.c2 .orb{animation-delay:-5s}
.course .kicker{display:flex;flex-wrap:wrap;gap:.5rem 1rem}
.course .kicker .label{color:var(--d)}
.course h3{font-size:clamp(2rem,4.6vw,3rem);font-weight:900;font-style:italic;letter-spacing:-.02em;font-variation-settings:"opsz" 144;max-width:12ch}
.course .desc{color:var(--fg-2);max-width:32rem}
.dots{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.dots li{display:grid;grid-template-columns:.5rem 1fr;gap:.8rem;align-items:baseline}
.dots li::before{content:"";width:.42rem;height:.48rem;border-radius:52% 48% 46% 54%/60% 58% 42% 40%;background:var(--d);transform:translateY(-.1em)}
.course .foot{margin-top:auto;padding-top:1.4rem;border-top:1px solid color-mix(in srgb,var(--d) 30%,transparent);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.price{font-family:var(--display);font-weight:600;font-size:1.5rem;color:var(--fg);font-variant-numeric:tabular-nums;line-height:1.15}
.price small{display:block;font-family:var(--label);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);font-weight:600;margin-bottom:.2rem}
.price span{display:block;font-family:var(--sans);font-size:.88rem;font-weight:400;color:var(--fg-3)}

/* four-up strip (temperaments on home, habits on 4 Hábitos) */
.four{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border-block:1px solid var(--rule)}
@media (min-width:760px){.four{grid-template-columns:repeat(4,1fr)}}
.four > div{background:var(--bg);padding:1.6rem 1.2rem 1.8rem;display:flex;flex-direction:column;gap:.5rem;min-width:0}
.four .d{width:14px;height:16px;border-radius:52% 48% 46% 54%/60% 58% 42% 40%;margin-bottom:.6rem}
/* temperament arts: one element per temperament (fire, wind, earth, water) drawn in the
   temperament's mid/dark tones over a morphing blob in its tint */
.four .el{position:relative;display:grid;place-items:center;width:clamp(84px,22vw,108px);aspect-ratio:1;margin-bottom:.4rem}
.four .el::before{content:"";position:absolute;inset:4%;border-radius:58% 42% 52% 48%/48% 56% 44% 52%;background:var(--t)}
.four .el svg{position:relative;width:100%;height:100%;overflow:visible}
.el.col{--t:var(--col-t);--m:var(--col-m);--dk:var(--col-d)}
.el.san{--t:var(--san-t);--m:var(--san-m);--dk:var(--san-d)}
.el.mel{--t:var(--mel-t);--m:var(--mel-m);--dk:var(--mel-d)}
.el.fle{--t:var(--fle-t);--m:var(--fle-m);--dk:var(--fle-d)}
.el .f-m{fill:var(--m)}.el .f-d{fill:var(--dk)}.el .f-t{fill:var(--t)}
.el .s-d,.el .s-m{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.el .s-d{stroke:var(--dk)}.el .s-m{stroke:var(--m)}
/* abstract forms overlap with multiply so crossings read as a deeper shade of the same tone */
.el .mx{mix-blend-mode:multiply}
.el .lobe,.el .spark,.el .seed,.el .peb,.el .drop{transform-box:fill-box;transform-origin:50% 100%}
.el .ring{transform-box:fill-box;transform-origin:50% 50%}
.el .gust{stroke-dasharray:72 28}
.four h3{font-size:1.5rem;font-style:italic;font-weight:600}
.four p{font-size:.95rem;color:var(--fg-3)}

/* about */
.about{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (min-width:860px){.about{grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr)}}
.about .photo{width:clamp(160px,50vw,300px)}
.about .body{display:grid;gap:1.1rem;max-width:40rem}
.about blockquote{margin:0;font-family:var(--display);font-style:italic;font-weight:600;font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.2;color:var(--fg);text-wrap:balance}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:.6rem;padding-top:1.4rem;border-top:1px solid var(--rule)}
.facts b{display:block;font-family:var(--display);font-weight:900;font-style:italic;font-size:clamp(1.7rem,4vw,2.4rem);color:var(--fg);line-height:1;font-variant-numeric:tabular-nums}
.facts span{font-size:.85rem;color:var(--fg-3)}

/* modules — numbered in display italic so the list reads as a syllabus, not bullets */
.mods{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--rule);border-block:1px solid var(--rule)}
@media (min-width:760px){.mods{grid-template-columns:repeat(2,1fr)}}
.mods li{background:var(--bg);padding:1.5rem 0 1.6rem;display:grid;grid-template-columns:3.2rem 1fr;gap:.2rem 1rem;min-width:0}
@media (min-width:760px){.mods li{padding-inline:0 1.6rem}.mods li:nth-child(even){padding-inline:1.6rem 0}}
.mods .n{grid-row:span 2;font-family:var(--display);font-style:italic;font-weight:900;font-size:2rem;line-height:1;color:var(--d);font-variant-numeric:tabular-nums}
.mods h3{font-size:1.3rem;font-weight:600}
.mods p{font-size:.95rem;color:var(--fg-3)}
.mods .tag{font-family:var(--label);font-weight:700;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--d);margin-left:.4rem;vertical-align:.2em}

/* tiles (bonuses / what's included) */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(.8rem,2vw,1.2rem)}
.tile{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:1.5rem 1.4rem 1.6rem;display:grid;gap:.5rem;align-content:start}
.tile .label{color:var(--d)}
.tile h3{font-size:1.35rem;font-weight:600}
.tile p{font-size:.95rem;color:var(--fg-3)}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(.8rem,2vw,1.2rem);align-items:start}
.quotes figure{margin:0;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:1.6rem 1.5rem;display:grid;gap:1rem}
.quotes blockquote{margin:0;font-size:1rem;color:var(--fg-2)}
.quotes blockquote::before{content:"“";display:block;font-family:var(--display);font-style:italic;font-weight:900;font-size:3rem;line-height:.6;color:var(--d);margin-bottom:.4rem}
.quotes figcaption b{display:block;color:var(--fg);font-weight:500}
.quotes figcaption span{font-size:.85rem;color:var(--fg-3)}

/* offer block — the one loud field on a sales page */
.offer{background:var(--t);border-radius:var(--radius);padding:clamp(2rem,6vw,4rem) clamp(1.4rem,5vw,4rem);display:grid;gap:1.4rem;justify-items:center;text-align:center}
.offer .big{font-family:var(--display);font-weight:900;font-style:italic;font-size:clamp(3.2rem,11vw,6rem);line-height:.95;color:var(--fg);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.offer .big sup{font-size:.35em;font-style:normal;font-weight:600;vertical-align:.95em;margin-right:.1em}
.offer .alt{color:var(--fg-2);font-size:1.05rem}
.offer .alt b{font-weight:500;color:var(--fg)}
.offer .label{color:var(--d)}
.seal{display:inline-flex;align-items:center;gap:.6rem;font-size:.92rem;color:var(--fg-2)}
.seal::before{content:"7";display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--d);color:var(--on-deep);font-family:var(--display);font-style:italic;font-weight:900;font-size:1.1rem}

/* faq */
.faq{border-top:1px solid var(--rule);max-width:48rem}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;padding:1.15rem 0;font-weight:500;color:var(--fg)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.5rem;line-height:1;color:var(--d);transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.3rem;color:var(--fg-3);max-width:40rem}

/* social grid: one temperament tint per card, each with its own organic corner set so the row reads
   like the hero stones; icon in the deep tone, lifts on hover. 2 cols on mobile, 4 on desktop. */
.nets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,2.4vw,1.4rem)}
@media (min-width:860px){.nets{grid-template-columns:repeat(4,minmax(0,1fr))}}
.net{--t:var(--col-t);--d:var(--col-d);display:grid;justify-items:center;align-content:center;gap:.35rem;text-align:center;padding:clamp(1.6rem,5vw,2.4rem) 1rem;min-height:clamp(180px,42vw,230px);background:var(--t);color:var(--fg);text-decoration:none;border-radius:44% 56% 48% 52%/38% 42% 58% 62%;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.net.san{--t:var(--san-t);--d:var(--san-d);border-radius:56% 44% 54% 46%/44% 38% 62% 56%}
.net.mel{--t:var(--mel-t);--d:var(--mel-d);border-radius:48% 52% 40% 60%/40% 48% 52% 60%}
.net.fle{--t:var(--fle-t);--d:var(--fle-d);border-radius:52% 48% 58% 42%/42% 56% 44% 58%}
.net:hover,.net:focus-visible{transform:translateY(-6px);box-shadow:0 24px 50px -28px color-mix(in srgb,var(--d) 70%,transparent)}
.net svg{width:clamp(38px,9vw,48px);height:auto;margin-bottom:.6rem;color:var(--d);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.net svg .dot{fill:currentColor;stroke:none}
.net strong{font-family:var(--display);font-size:clamp(1.3rem,3.6vw,1.7rem);font-weight:600;letter-spacing:-.01em}
.net span{font-size:.82rem;color:var(--fg-2);overflow-wrap:anywhere}

/* contact + footer */
footer{border-top:1px solid var(--rule);padding-block:2rem 3rem;color:var(--fg-3);font-size:.88rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
/* icon-only social links, quiet until hover */
footer .wrap{align-items:center}
.social{display:flex;gap:.9rem}
.social a{display:grid;place-items:center;width:28px;height:28px;color:var(--fg-3);transition:color .2s}
.social a:hover,.social a:focus-visible{color:var(--col-m)}
.social svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.social .dot{fill:currentColor;stroke:none}

/* sticky mobile CTA on sales pages — appears once the hero CTA has scrolled away */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:6;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--rule);padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:space-between;gap:1rem;transform:translateY(110%);transition:transform .45s var(--ease)}
.bar.on{transform:none}
.bar .price{font-size:1.1rem}
@media (min-width:860px){.bar{display:none}}


/* lite YouTube: poster + play button; the iframe only loads on click to keep first paint light */
.yt{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--fg);color:var(--on-deep);text-decoration:none}
.yt img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease),opacity .4s}
.yt:hover img{transform:scale(1.03);opacity:.9}
.yt .play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:var(--d);box-shadow:0 10px 30px -10px rgba(0,0,0,.5);transition:transform .35s var(--ease)}
.yt .play::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--on-deep)}
.yt:hover .play{transform:scale(1.08)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.about .yt{margin-top:.6rem}
/* home variant: no portrait; text left, video right (stacks below on mobile) */
@media (min-width:860px){.about.vid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.about.vid .yt{margin-top:0}}
/* light-red ovoid offset up-right behind the video, same morph as the hero blobs */
.vframe{position:relative;isolation:isolate}
.vframe::before{content:"";position:absolute;inset:-15% -7% 7% 9%;z-index:-1;border-radius:58% 42% 52% 48%/48% 56% 44% 52%;background:var(--col-t)}
.go .vframe::before{animation:morph 11s ease-in-out infinite}

/* video testimonials: three equal posters, name under each */
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(1rem,2.5vw,1.6rem)}
.videos figure{margin:0;display:grid;gap:.8rem}
.videos figcaption b{display:block;color:var(--fg);font-weight:500}
.videos figcaption span{font-size:.88rem;color:var(--fg-3)}
.feature-video{max-width:52rem}

/* testimonial avatar (4 Hábitos) */
.quotes .who{display:flex;align-items:center;gap:.8rem}
.quotes .who>span{font-size:inherit;color:inherit}
.quotes .who img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:none}

/* e-book: cover leans out of a tinted panel, form sits beside the pitch */
.ebook{background:var(--san-t);border-radius:var(--radius);padding:clamp(1.6rem,5vw,3.4rem);display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center}
@media (min-width:860px){.ebook{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}}
.ebook .cover{width:min(70%,280px);justify-self:center;filter:drop-shadow(0 24px 30px rgba(0,0,0,.18))}
.ebook .cover img{width:100%;height:auto;display:block}
.ebook .body{display:grid;gap:1rem;max-width:36rem}
.ebook h2{font-size:clamp(1.9rem,4.6vw,3rem);font-weight:600;letter-spacing:-.015em}
.ebook h2 i{font-weight:900;display:block;font-size:.62em;margin-top:.2em;color:var(--san-d)}
.ebook .label{color:var(--san-d)}
.ebook .btn{background:var(--san-d)}

/* forms */
.form{display:grid;gap:.9rem;margin-top:.4rem}
.form .row{display:grid;gap:.9rem}
@media (min-width:600px){.form .row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.35rem}
.field span{font-family:var(--label);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;color:var(--fg-3)}
.field input,.field textarea{font:inherit;font-size:1rem;color:var(--fg);background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:.8rem .95rem;width:100%;box-sizing:border-box}
.field textarea{min-height:8rem;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--fg);outline-offset:1px}
.form .btn{justify-self:start;border:0;cursor:pointer}
.form .btn[disabled]{opacity:.6;cursor:progress;transform:none}
.form .status{font-size:.92rem;min-height:1.4em;margin:0}
.form .status.ok{color:#2F6B3A}
.form .status.err{color:var(--col-d)}
.hp{position:absolute;left:-5000px}

/* contact: channels on the left, form on the right */
.contact-grid{display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:860px){.contact-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.channels{display:grid;gap:1.4rem;align-content:start}
.channels a{display:grid;gap:.2rem;text-decoration:none}
.channels b{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,3vw,1.7rem);color:var(--fg);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.channels a:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* ---------- motion (jeb-site recipe: .anim → .go via IntersectionObserver) ---------- */
.js .rise{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .go .rise,.js .rise.go{opacity:1;transform:none}
.go .rise.d1{transition-delay:.08s}.go .rise.d2{transition-delay:.16s}.go .rise.d3{transition-delay:.24s}.go .rise.d4{transition-delay:.32s}

.js .hero h1 .w{opacity:0;transform:translateY(.35em);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .hero.go h1 .w{opacity:1;transform:none}
.js .hero.go h1 .w:nth-child(2){transition-delay:.09s}
.js .hero.go h1 .w:nth-child(3){transition-delay:.18s}
.js .hero.go h1 .w:nth-child(4){transition-delay:.27s}
.js .hero h1 .dot{opacity:0}
.js .hero.go h1 .dot{animation:drop .9s cubic-bezier(.3,1.5,.5,1) .75s both,cycle 1.6s steps(1,end) 1.5s both}
@keyframes drop{from{opacity:0;transform:translateY(-2.2em) scale(.4)}to{opacity:1;transform:none}}
@keyframes cycle{0%{background:var(--san-d)}25%{background:var(--mel-d)}50%{background:var(--fle-d)}75%,100%{background:var(--col-d)}}

/* stones pop out one after another, then the names fade in */
.js .wheel .q{transform:scale(0);transition:transform .9s cubic-bezier(.3,1.35,.5,1)}
.js .go .wheel .q{transform:none}
.go .wheel .san{transition-delay:.1s}.go .wheel .fle{transition-delay:.2s}.go .wheel .mel{transition-delay:.3s}
.js .wheel .q i{opacity:0;transition:opacity .6s var(--ease) 1.1s}
.js .go .wheel .q i{opacity:1}
/* clock: face settles, hands sweep from 12h to 20h, habits pop in around it — Sono last, as the hour hand lands on it */
.js .clock .face{transform:scale(.85);opacity:0;transition:transform .9s var(--ease),opacity .6s var(--ease)}
.js .go .clock .face{transform:none;opacity:1}
.js .clock .hand{transform:rotate(0deg);transition:transform 1.6s var(--ease) .5s}
.js .go .clock .hand.m{transform:rotate(360deg)}
.js .go .clock .hand.h{transform:rotate(240deg)}
.js .clock .chip{transform:scale(0);transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.js .go .clock .chip{transform:none}
.go .clock .c1{transition-delay:.9s}.go .clock .c2{transition-delay:1.05s}.go .clock .c3{transition-delay:1.2s}.go .clock .c4{transition-delay:1.9s}
.js .wheel .hub,.js .clock .hub{transform:scale(0);transition:transform .6s cubic-bezier(.3,1.6,.5,1) .7s}
.js .go .wheel .hub,.js .go .clock .hub{transform:none}
.js .art .glow{opacity:0;transform:scale(.6) rotate(-20deg);transition:opacity 1s var(--ease),transform 1.6s var(--ease)}
.js .go .art .glow{opacity:.55;transform:none}
.js .art .seed{transform:scale(0);transition:transform .6s cubic-bezier(.3,1.6,.5,1) 1.4s}
.js .go .art .seed{transform:none}
/* loops start once the entrance has settled (~1.8s) */
.go .wheel .q::before{animation:lit 8s var(--ease) calc(1.8s + var(--n) * 2s) infinite}
.go .wheel .q i{animation:lit-i 8s var(--ease) calc(1.8s + var(--n) * 2s) infinite}
.go .wheel .hub::after{animation:hub 8s steps(1) 1.8s infinite}
@keyframes lit{0%,30%,100%{opacity:0}6%,24%{opacity:1}}
@keyframes lit-i{0%,30%,100%{color:var(--dk)}6%,24%{color:var(--on-deep)}}
@keyframes hub{0%{background:var(--col-m)}25%{background:var(--san-m)}50%{background:var(--fle-m)}75%{background:var(--mel-m)}}
.js .clock .hand.s{opacity:0;transition:opacity .5s var(--ease) 2s}
.js .go .clock .hand.s{opacity:1;animation:sweep 12s linear 2s infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.js .clock .time{opacity:0;transition:opacity .8s var(--ease) 2s}
.js .go .clock .time{opacity:1}
.go .clock .chip{--r:2.5deg;animation:sway 4.4s ease-in-out infinite}
.go .clock .c1{animation-delay:2.2s}.go .clock .c2{animation-delay:3.1s}.go .clock .c3{animation-delay:2.6s}.go .clock .c4{animation-delay:3.5s}

/* organic breathing: every blob, stone and pebble slowly morphs its border-radius; offsets keep them out of step */
.go .blob,.go .art .glow,.go .wheel .q{animation:morph 13s ease-in-out infinite}
.go .wheel .san{animation-delay:-3s}.go .wheel .fle{animation-delay:-6s}.go .wheel .mel{animation-delay:-9s}
.go .art .glow{animation-duration:17s;animation-direction:reverse}
.go .figure .b-back{animation-duration:10s;animation-direction:reverse}
.go .clock .face{animation:morph-soft 9s ease-in-out infinite}
.go .wheel .hub,.go .clock .hub{animation:morph 6s ease-in-out infinite}
.go .peb,.go .art .seed{animation:morph 7s ease-in-out infinite,sway 5s ease-in-out infinite}
.go .p2,.go .art .s2{animation-delay:-2s,-1.5s}.go .p3{animation-delay:-4s,-3s}.go .p4{animation-delay:-5s,-2.5s}
@keyframes morph{
  0%,100%{border-radius:58% 42% 52% 48%/48% 56% 44% 52%}
  25%{border-radius:46% 54% 60% 40%/56% 44% 56% 44%}
  50%{border-radius:52% 48% 42% 58%/42% 52% 48% 58%}
  75%{border-radius:42% 58% 50% 50%/58% 46% 54% 42%}}
/* the clock face stays close to round so the tick ring still fits */
@keyframes morph-soft{
  0%,100%{border-radius:52% 48% 50% 50%/48% 52% 48% 52%}
  33%{border-radius:48% 52% 53% 47%/52% 47% 53% 48%}
  66%{border-radius:51% 49% 47% 53%/47% 53% 50% 50%}}
/* element loops: fire lobes flicker out of phase, wind arcs flow, the earth pebble rocks,
   water drops fall into rings that ripple out */
.go .el::before{animation:morph 9s ease-in-out infinite}
.go .el.san::before{animation-delay:-2s}.go .el.mel::before{animation-delay:-4s}.go .el.fle::before{animation-delay:-6s}
.go .el .lobe{animation:flicker 2.6s ease-in-out infinite}
.go .el .lobe.l2{animation-duration:1.9s;animation-delay:-.7s}
.go .el .spark{animation:spark 2.8s ease-in infinite}
.go .el .gust{animation:blow 3.4s linear infinite}
.go .el .g2{animation-duration:2.6s;animation-direction:reverse}
.go .el .seed{animation:drift 4s ease-in-out infinite}
.go .el .peb{animation:rock 4.5s ease-in-out infinite}
.go .el .drop{animation:bob 3.2s ease-in-out infinite}
.go .el .ring{animation:ripple 3.2s ease-out infinite}
.go .el .ring.r2{animation-delay:-1.6s}
@keyframes flicker{0%,100%{transform:scale(1,1) skewX(0)}25%{transform:scale(.95,1.06) skewX(-3deg)}50%{transform:scale(1.03,.96) skewX(2deg)}75%{transform:scale(.98,1.04) skewX(-1deg)}}
@keyframes spark{0%{transform:translateY(8px) scale(.4);opacity:0}30%{opacity:1}100%{transform:translateY(-10px) scale(1);opacity:0}}
@keyframes blow{to{stroke-dashoffset:-100}}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-6px,-4px)}}
@keyframes rock{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes bob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
@keyframes ripple{0%{transform:scale(.55);opacity:0}25%{opacity:1}100%{transform:scale(1.15);opacity:0}}
@keyframes sway{0%,100%{rotate:calc(var(--r,6deg) * -1)}50%{rotate:var(--r,6deg)}}

/* photo opens as an iris, then the four dots pop in clockwise */
.js .photo img{clip-path:circle(0% at 50% 50%);transition:clip-path 1.1s var(--ease) .2s}
.js .go .photo img,.js .photo.go img{clip-path:circle(50% at 50% 50%)}
.js .photo .o{transform:scale(0);transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.js .go .photo .o,.js .photo.go .o{transform:none}
.go .photo .o:nth-of-type(1){transition-delay:.9s}.go .photo .o:nth-of-type(2){transition-delay:1s}
.go .photo .o:nth-of-type(3){transition-delay:1.1s}.go .photo .o:nth-of-type(4){transition-delay:1.2s}

/* figure: main blob swells up from the floor, the back blob follows, she rises into them, pebbles pop in pairs */
.js .figure .blob{transform:scale(0);transition:transform 1.2s var(--ease)}
.js .go .figure .blob{transform:none}
.go .figure .b-main{transition-delay:.15s}.go .figure .b-back{transition-delay:.4s}
.js .figure img{opacity:0;transform:translate(-50%,6%);transition:opacity 1s var(--ease) .45s,transform 1.2s var(--ease) .45s}
.js .go .figure img{opacity:1;transform:translateX(-50%)}
.js .figure .peb{transform:scale(0);transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.js .go .figure .peb{transform:none}
.go .figure .p1,.go .figure .p2{transition-delay:1.2s}
.go .figure .p3,.go .figure .p4{transition-delay:1.35s}

.js .course{opacity:0;transform:translateY(40px)}
.js .go .course{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease),box-shadow .5s var(--ease)}
.js .go .course.c2{transition-delay:.12s,.12s,0s}
.js .go .course:hover{transform:translateY(-6px);transition-delay:0s}
.js .course .orb{transform:scale(0)}
.js .go .course .orb{transform:none;transition-delay:.5s}
.js .go .course:hover .orb{transform:scale(1.12) rotate(-6deg);transition-delay:0s}

.js .four .d,.js .four .el{transform:scale(0)}
.js .four.go .d,.js .four.go .el{transform:none;transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.four.go > div:nth-child(2) :is(.d,.el){transition-delay:.1s}
.four.go > div:nth-child(3) :is(.d,.el){transition-delay:.2s}
.four.go > div:nth-child(4) :is(.d,.el){transition-delay:.3s}

.js .mods li{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .mods.go li{opacity:1;transform:none}
.mods.go li:nth-child(2){transition-delay:.05s}.mods.go li:nth-child(3){transition-delay:.1s}.mods.go li:nth-child(4){transition-delay:.15s}
.mods.go li:nth-child(5){transition-delay:.2s}.mods.go li:nth-child(6){transition-delay:.25s}.mods.go li:nth-child(7){transition-delay:.3s}
.mods.go li:nth-child(8){transition-delay:.35s}.mods.go li:nth-child(9){transition-delay:.4s}

.js .offer{opacity:0;transform:scale(.97)}
.js .go .offer,.js .offer.go{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rise,.js .hero h1 .w,.js .hero h1 .dot,.js .course,.js .course .orb,.js .four .d,.js .four .el,.js .mods li,.js .offer,.js .photo .o,.js .figure .blob,.js .figure .peb,.js .art .seed{opacity:1;transform:none}
  .js .art .glow{opacity:.55;transform:none}
  .yt:hover img{transform:none}
  .js .figure img{opacity:1;transform:translateX(-50%)}
  .js .photo img{clip-path:none}
  .js .wheel .q,.js .wheel .q i,.js .clock .face,.js .clock .chip,.js .wheel .hub,.js .clock .hub,.js .clock .time{opacity:1;transform:none}
  .js .clock .hand.s{opacity:1}
  .js .clock .hand.m{transform:rotate(360deg)}
  .js .clock .hand.h{transform:rotate(240deg)}
}