/* Aprendre · identitat pròpia. Paper i tinta, i un degradat difuminat per a cada tema.
   Tipografia: Playfair Display (títols), Newsreader (lectura), Inter (interfície), Geist Mono (etiquetes). Tot en local. */
@font-face{font-family:"Inter";src:url(fonts/Inter-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url(fonts/Inter-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";src:url(fonts/Newsreader-normal-latin.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";src:url(fonts/Newsreader-normal-latin-ext.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";src:url(fonts/Newsreader-italic-latin.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";src:url(fonts/Newsreader-italic-latin-ext.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Playfair Display";src:url(fonts/playfair-display-latin-wght-normal.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";src:url(fonts/playfair-display-latin-ext-wght-normal.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Playfair Display";src:url(fonts/playfair-display-latin-wght-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";src:url(fonts/geist-mono-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}

/* ---------- tokens ---------- */
:root{
  color-scheme:light dark;
  /* paper i tinta; el fosc és blau-negre, no l'invers del clar */
  --bg:light-dark(#fbfaf8,#0a0d12);
  --ink:light-dark(#121211,#eceef1);
  --ink2:light-dark(#4b4a46,#aeb3bd);
  --ink3:light-dark(#74726c,#7f8591);
  --line:light-dark(rgba(18,18,17,.11),rgba(255,255,255,.11));
  --line2:light-dark(rgba(18,18,17,.06),rgba(255,255,255,.06));
  --card:light-dark(#f3f2ef,#10141b);
  --card2:light-dark(#ecebe7,#161b24);
  --glass:light-dark(rgba(251,250,248,.74),rgba(10,13,18,.66));
  --glass-b:light-dark(rgba(18,18,17,.07),rgba(255,255,255,.1));
  --on-ink:light-dark(#fbfaf8,#0a0d12);
  --perill:light-dark(#a8321f,#ff8d7a);
  /* tema per defecte: crepuscle blau-gris */
  --ta:light-dark(#6e86b8,#3b5688);--tb:light-dark(#aebbd8,#25375c);--tc:light-dark(#dfe5f1,#131c33);--td:light-dark(#f0b8a0,#7a4c45);

  --serif:"Playfair Display","Iowan Old Style",Georgia,serif;
  --lectura:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"Inter",-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --px:24px;--r:20px;--r-s:14px;
  --ease:cubic-bezier(.32,.72,0,1);
  --molla:linear(0,.18 6%,.52 14%,.8 23%,.97 33%,1.04 43%,1.05 50%,1.03 60%,1 75%,1);
  --tabh:calc(64px + env(safe-area-inset-bottom));
  --top:env(safe-area-inset-top);
}
html[data-aspecte="clar"]{color-scheme:light}
html[data-aspecte="fosc"]{color-scheme:dark}

/* un degradat per tema: nucli, mitjà, halo i un matís */
[data-tema="Hormozi"]{--ta:light-dark(#ff5a1f,#e8581f);--tb:light-dark(#ff9a72,#9b3a1b);--tc:light-dark(#ffd9c6,#3f1d13);--td:light-dark(#ffc15c,#a86a1c)}
[data-tema="Haynes"]{--ta:light-dark(#3e62ec,#3558d6);--tb:light-dark(#8ea6f6,#1f3a8c);--tc:light-dark(#d3dcfb,#101c40);--td:light-dark(#f4ab8e,#b06a4f)}
[data-tema="Filosofia"]{--ta:light-dark(#c48a38,#b98334);--tb:light-dark(#e6c288,#6f4d20);--tc:light-dark(#f4e6cc,#2e2314);--td:light-dark(#dc8f8f,#8d4b4b)}
[data-tema="IA"]{--ta:light-dark(#7b4cf0,#6d45e0);--tb:light-dark(#b7a0f8,#3f2b94);--tc:light-dark(#e3dafc,#1d1745);--td:light-dark(#72c9f3,#2f7b9d)}
[data-tema="Vendes"]{--ta:light-dark(#0ea3a1,#12a19b);--tb:light-dark(#76d3c9,#0b5f63);--tc:light-dark(#d1f0eb,#0c2b30);--td:light-dark(#f3d36d,#a38a2c)}
[data-tema="Negoci"]{--ta:light-dark(#7c9b3a,#7f9e3a);--tb:light-dark(#b8cd80,#4b6122);--tc:light-dark(#e3ecc9,#1f2a14);--td:light-dark(#ecc66b,#a28434)}
[data-tema="Estratègia"]{--ta:light-dark(#d8446f,#d04068);--tb:light-dark(#f192a8,#822544);--tc:light-dark(#fad5de,#331622);--td:light-dark(#ffb48c,#a5664a)}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:calc(16px*var(--t,1));-webkit-text-size-adjust:100%;background:var(--bg)}
body{background:var(--bg);color:var(--ink);font:400 1rem/1.5 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto;overflow:hidden;height:100vh;height:100dvh;overscroll-behavior:none;text-rendering:optimizeLegibility}
button,input,textarea{font:inherit;color:inherit;background:none;border:0;outline:0;-webkit-appearance:none;appearance:none}
button{cursor:pointer;touch-action:manipulation}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px;border-radius:6px}
a{color:inherit}
.mono{font:500 .6875rem/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.serif{font-family:var(--serif)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
svg.i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- estructura ---------- */
#app{position:fixed;inset:0 0 var(--tabh) 0}
.pantalla{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s ease,transform .6s var(--ease),visibility 0s .3s}
.pantalla.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.pag{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:calc(var(--top) + 40px) max(var(--px),calc((100% - 560px)/2)) 56px}
.pag::-webkit-scrollbar,.feed::-webkit-scrollbar,.cos-l::-webkit-scrollbar,.card::-webkit-scrollbar{display:none}
.pag>.cap-p{margin-bottom:36px}
.pag h1{font:400 clamp(2.25rem,9.5vw,2.75rem)/1.04 var(--serif);letter-spacing:-.018em;margin:10px 0 10px}
.pag .sub{color:var(--ink2);font-size:1rem;line-height:1.5;max-width:30ch}

/* barra de baix: quatre icones fines */
#tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);padding:6px 8px env(safe-area-inset-bottom);background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border-top:1px solid var(--line2)}
#tabs button{position:relative;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--ink3);font:500 .625rem/1 var(--sans);letter-spacing:.02em;transition:color .25s ease}
#tabs button::before{content:"";position:absolute;top:-6px;left:50%;width:18px;height:1.5px;margin-left:-9px;background:var(--ink);transform:scaleX(0);transition:transform .5s var(--ease)}
#tabs button[aria-current]{color:var(--ink)}
#tabs button[aria-current]::before{transform:none}
#tabs button:active svg{transform:scale(.9)}
#tabs svg{width:24px;height:24px;transition:transform .35s var(--ease)}

/* ---------- degradats (l'element estrella) ---------- */
.aurora{position:absolute;left:0;right:0;top:0;height:var(--ah,64%);overflow:hidden;pointer-events:none;contain:strict;
  -webkit-mask-image:linear-gradient(#000 48%,transparent 100%);mask-image:linear-gradient(#000 48%,transparent 100%)}
.bl{position:absolute;filter:blur(var(--bb,38px));animation:flota var(--du,20s) ease-in-out var(--de,0s) infinite alternate;animation-play-state:paused}
.bl.a{background:var(--ta);width:74%;height:62%;left:var(--ax,-12%);top:var(--ay,-14%);border-radius:58% 42% 63% 37%/46% 58% 42% 54%;--dx:14%;--dy:10%;--dr:16deg;opacity:.95}
.bl.b{background:var(--tb);width:96%;height:52%;left:var(--bx,24%);top:var(--by,22%);border-radius:44% 56% 38% 62%/57% 41% 59% 43%;--dx:-16%;--dy:8%;--dr:-12deg;opacity:.9}
.bl.c{background:var(--tc);width:130%;height:64%;left:var(--cx,-20%);top:var(--cy,26%);border-radius:50%;--dx:6%;--dy:-8%;--dr:8deg}
.bl.d{background:var(--td);width:38%;height:30%;left:var(--dx0,56%);top:var(--dy0,-4%);border-radius:61% 39% 52% 48%/42% 61% 39% 58%;--dx:-22%;--dy:18%;--dr:30deg;opacity:.75}
.grano{position:absolute;inset:0;opacity:var(--gr,.2);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes flota{from{transform:translate3d(0,0,0) rotate(0) scale(1)}to{transform:translate3d(var(--dx),var(--dy),0) rotate(var(--dr)) scale(1.1)}}
/* només es mou el que es veu: la targeta a la vista i la lectura oberta. La llista de lectures és quieta (9 degradats animats feien massa feina a l'iPhone) i les pestanyes amagades no animen res */
.vis .bl,.lector .bl{animation-play-state:running;will-change:transform}
.pantalla:not(.on) .aurora{display:none}
.card:not(.near) .aurora{display:none}

/* ---------- targetes ---------- */
.feed{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
.card{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:0 max(var(--px),calc((100% - 520px)/2)) 24px}
.card .esp{flex:1 1 0;min-height:clamp(84px,calc(var(--top) + 64px),160px)}
.card .txt{position:relative;display:flex;flex-direction:column;gap:18px}
.card .ent{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform 1s var(--ease)}
.card.vis .ent,.card.ja .ent{opacity:1;transform:none}
.card.vis .ent:nth-child(2){transition-delay:.06s}.card.vis .ent:nth-child(3){transition-delay:.12s}
.card .ey{display:flex;gap:10px;align-items:center;color:var(--ink2)}
.card .ey i{width:18px;height:1px;background:currentColor;opacity:.5}
.card h2{font:400 clamp(1.9rem,8.6vw,2.2rem)/1.08 var(--serif);letter-spacing:-.016em;text-wrap:balance;color:var(--ink)}
.card .col{display:grid;grid-template-rows:1fr;transition:grid-template-rows .7s var(--ease),opacity .4s ease,margin .7s var(--ease)}
.card .col>div{overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:18px}
.card.rep .col{grid-template-rows:0fr;opacity:0;margin-top:-20px}
.cita{font:italic 400 1.125rem/1.45 var(--lectura);color:var(--ink);padding-left:16px;border-left:1px solid var(--line);text-wrap:pretty}
.cita small{display:block;margin-top:6px;font:400 .75rem/1.4 var(--sans);font-style:normal;color:var(--ink3)}
.idea{font-size:1rem;line-height:1.56;color:var(--ink2);font-weight:400;text-wrap:pretty;max-width:42ch}
.vora{font:italic 400 1.0625rem/1.48 var(--lectura);color:var(--ink);padding-top:14px;border-top:1px solid var(--line);max-width:42ch}
.vora .mono{display:block;font-style:normal;margin-bottom:6px}
.peu{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.font{font-size:.75rem;line-height:1.5;color:var(--ink3);max-width:46ch}
.accio{display:flex;align-items:center;gap:12px}
.enllac{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:.8125rem;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);align-self:flex-start}
.enllac svg{width:14px;height:14px}

/* top flotant del feed */
.cim{position:absolute;z-index:5;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:calc(var(--top) + 12px) max(var(--px),calc((100% - 520px)/2)) 0;pointer-events:none}
.cim>*{pointer-events:auto}
.pill{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 14px;border-radius:22px;background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--glass-b);font:500 .8125rem/1 var(--sans);color:var(--ink);transition:transform .3s var(--ease)}
.pill:active{transform:scale(.96)}
.pill svg{width:14px;height:14px;opacity:.6}
.pill .pt{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--tb),var(--ta))}
.cont{font:500 .6875rem/1 var(--mono);letter-spacing:.07em;color:var(--ink2);padding:0 4px;min-height:44px;display:flex;align-items:center;text-shadow:0 0 12px var(--bg)}

/* gest de lliscar */
.llisca{--p:0;position:relative;height:56px;border-radius:28px;border:1px solid var(--line);background:var(--card);overflow:hidden;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none}
.llisca .omple{position:absolute;inset:0;width:calc(28px + var(--p)*(100% - 28px));background:var(--ink);opacity:.07}
.llisca .et{font:500 .8125rem/1 var(--sans);letter-spacing:.01em;color:var(--ink2);padding-left:44px;opacity:calc(1 - var(--p)*1.6);pointer-events:none}
.llisca .nus{position:absolute;left:4px;top:4px;width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--on-ink);display:flex;align-items:center;justify-content:center;touch-action:none;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.llisca.arr .nus{will-change:transform}
.llisca .nus svg{width:20px;height:20px;stroke-width:1.5}
.card.vis .llisca:not(.arr) .nus{animation:insinua 5s var(--ease) 1.4s 1}
@keyframes insinua{0%,100%{transform:none}8%{transform:translateX(14px)}16%{transform:none}}

/* repte */
.repte{display:none;flex-direction:column;gap:20px;animation:entra .8s var(--ease) both}
.card.rep .repte{display:flex}
@keyframes entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.repte .q{font:400 1.5rem/1.22 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.opcions{display:flex;flex-direction:column;gap:10px}
.op{position:relative;display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 18px;border-radius:16px;border:1px solid var(--line);text-align:left;font-size:.96875rem;line-height:1.35;color:var(--ink);transition:border-color .4s ease,background .4s ease,opacity .4s ease,transform .3s var(--ease)}
.op .l{font:500 .6875rem/1 var(--mono);color:var(--ink3);width:12px;flex:none;transition:color .3s}
.op:active:not(:disabled){transform:scale(.985);background:var(--card)}
.op:disabled{cursor:default}
.op.ok{border-color:var(--ink);background:var(--card)}
.op.ok .l{color:var(--ink)}
.op.no{opacity:.4}
.op.triada{opacity:.62;border-color:var(--ink3);color:var(--ink2);text-decoration:line-through;text-decoration-color:var(--ink3);text-decoration-thickness:1px}
.op .si{margin-left:auto;width:18px;height:18px;opacity:0;transition:opacity .4s}
.op.ok .si{opacity:1}
.why{font:400 1.0625rem/1.55 var(--lectura);color:var(--ink);animation:entra .8s var(--ease) both;padding-top:2px}
.why b{font-weight:500}
.punts{font:500 .6875rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);animation:entra 1s var(--ease) .1s both}
.escriu{width:100%;min-height:132px;resize:none;padding:16px 18px;border-radius:16px;border:1px solid var(--line);font:400 1.0625rem/1.5 var(--lectura);background:transparent;transition:border-color .3s}
.escriu:focus{border-color:var(--ink)}
.escriu::placeholder{color:var(--ink3);font-style:italic}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:24px;background:var(--ink);color:var(--on-ink);font:500 .875rem/1 var(--sans);transition:transform .3s var(--ease),opacity .3s}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.3;cursor:default}
.btn.sec{background:transparent;color:var(--ink);border:1px solid var(--line)}
.text-btn{min-height:44px;font-size:.8125rem;font-weight:500;color:var(--ink2);display:inline-flex;align-items:center;gap:6px;align-self:flex-start}
.text-btn svg{width:16px;height:16px}

/* buit */
.buit{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 40px 40px;gap:14px}
.buit canvas{width:132px;height:132px;margin-bottom:12px}
.buit h2{font:400 2rem/1.1 var(--serif);letter-spacing:-.015em}
.buit p{color:var(--ink2);max-width:28ch}
.buit .btn{margin-top:14px}

/* full de temes */
.vel{position:fixed;inset:0;z-index:60;background:rgba(5,7,10,.4);opacity:0;transition:opacity .4s ease}
.vel.on{opacity:1}
.full{position:fixed;left:0;right:0;bottom:0;z-index:61;max-width:560px;margin:0 auto;background:var(--bg);border-radius:28px 28px 0 0;border:1px solid var(--line2);border-bottom:0;padding:10px var(--px) calc(20px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .7s var(--molla);will-change:transform}
.full.on{transform:none}
.full.arr{transition:none}
.full .grab{display:block;width:100%;height:28px;position:relative;touch-action:none;cursor:grab}
.full .grab::after{content:"";position:absolute;left:50%;top:10px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--line)}
.full h3{font:400 1.75rem/1.1 var(--serif);letter-spacing:-.012em;margin:4px 0 12px}
.tria{display:flex;align-items:center;gap:14px;width:100%;min-height:54px;padding:0 2px;border-top:1px solid var(--line2);text-align:left;font-size:1rem}
.tria .sw{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 28% 28%,var(--td),transparent 55%),radial-gradient(circle at 70% 70%,var(--tb),transparent 70%),var(--ta);flex:none}
.tria .sw.tot{background:conic-gradient(from 200deg,#ff5a1f,#3e62ec,#c48a38,#7b4cf0,#0ea3a1,#7c9b3a,#d8446f,#ff5a1f);opacity:.8}
.tria .n{margin-left:auto;font:500 .6875rem/1 var(--mono);color:var(--ink3);letter-spacing:.05em}
.tria svg{width:18px;height:18px;opacity:0}
.tria[aria-pressed="true"] svg{opacity:1}

/* ---------- llegir (llista) ---------- */
.lect{position:relative;display:block;width:100%;text-align:left;border-radius:24px;background:var(--card);border:1px solid var(--line2);overflow:hidden;margin-bottom:16px;transition:transform .5s var(--ease)}
.lect:active{transform:scale(.985)}
.lect .aurora{--ah:100%;height:128px;-webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
.lect .aurora .bl{filter:blur(26px)}
.lect .in{position:relative;padding:92px 22px 20px;display:flex;flex-direction:column;gap:8px}
.lect .mt{display:flex;justify-content:space-between;color:var(--ink2)}
.lect h3{font:400 1.5rem/1.13 var(--serif);letter-spacing:-.012em;text-wrap:balance}
.lect p{color:var(--ink2);font-size:.9375rem;line-height:1.5}
.lect .fil{margin-top:10px;height:1.5px;background:var(--line);position:relative;overflow:hidden}
.lect .fil i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);width:var(--w,0%);transition:width 1s var(--ease)}

/* ---------- lector ---------- */
.lector{position:fixed;inset:0;z-index:40;background:var(--bg);transform:translateY(100%);transition:transform .8s var(--molla);overscroll-behavior:contain}
.lector.on{transform:none}
.cos-l{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding-bottom:calc(60px + env(safe-area-inset-bottom))}
.lector .aurora{--ah:340px;height:340px}
.lector .aurora .bl{filter:blur(44px)}
.fil-l{position:fixed;z-index:3;top:0;left:0;right:0;height:2px;background:transparent}
.fil-l i{display:block;height:100%;width:0;background:var(--ink);transition:width .25s linear}
.bar-l{position:fixed;z-index:3;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:calc(var(--top) + 12px) 16px 0;pointer-events:none}
.bar-l>*{pointer-events:auto}
.bar-l .rod{width:44px;height:44px;border-radius:14px;background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--glass-b);display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease)}
.bar-l .rod:active{transform:scale(.92)}
.bar-l .rod svg{width:20px;height:20px}
.art{position:relative;max-width:34rem;margin:0 auto;padding:calc(var(--top) + 168px) var(--px) 0}
.art .cap-l{margin-bottom:16px;color:var(--ink2)}
.art h1{font:400 clamp(2.1rem,9.4vw,2.7rem)/1.06 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.art .intro{font:italic 400 1.3125rem/1.45 var(--lectura);color:var(--ink2);margin:20px 0 0}
.art .sep{height:1px;background:var(--line);margin:34px 0 8px}
.art .p{font:400 1.25rem/1.68 var(--lectura);margin:1.15em 0 0;text-wrap:pretty;hyphens:manual}
.art h2{font:400 1.75rem/1.15 var(--serif);letter-spacing:-.014em;margin:2.1em 0 0;text-wrap:balance;font-variant-numeric:lining-nums}
.art blockquote{margin:2.2em 0 .4em;padding:0}
.art blockquote::before{content:"";display:block;width:28px;height:1px;background:var(--ink);margin-bottom:18px}
.art blockquote p{font:italic 400 1.625rem/1.32 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.art blockquote small{display:block;margin-top:12px;font:500 .6875rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.des{margin:1.4em 0 0;border-top:1px solid var(--line)}
.des+.des{margin-top:0}
.des:last-of-type{border-bottom:1px solid var(--line)}
.des>button{width:100%;min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;font:500 1rem/1.35 var(--sans);padding:12px 0}
.des>button svg{width:18px;height:18px;color:var(--ink3);transition:transform .6s var(--ease)}
.des.open>button svg{transform:rotate(45deg)}
.des .pn{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.des.open .pn{grid-template-rows:1fr}
.des .pn>div{overflow:hidden;min-height:0}
.des .pn p{font:400 1.1875rem/1.62 var(--lectura);color:var(--ink2);padding:0 0 22px;opacity:0;transition:opacity .5s ease}
.des.open .pn p{opacity:1;transition-delay:.12s}
.bloc-int{margin:2.4em 0 0;border:1px solid var(--line);border-radius:26px;padding:24px 22px 22px}
.bloc-int>.mono{margin-bottom:12px;display:block}
.bloc-int .q{font:400 1.5rem/1.22 var(--serif);letter-spacing:-.01em;text-wrap:balance;margin-bottom:20px}
.bloc-int .why{margin-top:20px}
.bloc-int .btn{margin-top:14px}
.resum{margin:3em 0 0;border-radius:26px;background:var(--card);padding:26px 22px 8px;border:1px solid var(--line2)}
.resum ol{list-style:none;margin-top:14px}
.resum li{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line2);font:400 1.125rem/1.5 var(--lectura)}
.resum li:first-child{border-top:0}
.resum li span{font:500 .6875rem/1.9 var(--mono);color:var(--ink3);letter-spacing:.05em;flex:none}
.nota-font{margin-top:32px;font-size:.75rem;line-height:1.5;color:var(--ink3)}

/* ---------- progrés ---------- */
.dots{display:block;width:min(100%,280px);aspect-ratio:1;margin:-4px auto 0}
.gran{margin-top:8px;font:200 clamp(4rem,19vw,5rem)/1 var(--sans);letter-spacing:-.04em;font-feature-settings:"tnum";color:var(--ink)}
.gran small{font-size:.38em;letter-spacing:0;font-weight:300;margin-left:3px;color:var(--ink2)}
.sota{margin-top:10px;font-size:.875rem;color:var(--ink2);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sota i{width:3px;height:3px;border-radius:50%;background:var(--ink3)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
.t-gris{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:18px 18px 20px;display:flex;flex-direction:column;gap:22px;min-height:104px}
.t-gris .mono{text-transform:none;letter-spacing:.01em;font:400 .8125rem/1.3 var(--sans);color:var(--ink2)}
.t-gris .v{font:400 1.375rem/1.1 var(--sans);letter-spacing:-.015em;font-feature-settings:"tnum"}
.t-gris.w{grid-column:1/-1}
.t-gris .v .serif{font-size:1.625rem;letter-spacing:-.01em}
.barra{height:2px;background:var(--line);border-radius:1px;overflow:hidden}
.barra i{display:block;height:100%;width:0;background:var(--ink);transition:width 1.4s var(--ease)}
.ajud{font-size:.8125rem;line-height:1.55;color:var(--ink3);max-width:44ch}
.sec-t{margin:44px 0 8px;display:block}
.ratxa-g{display:grid;grid-template-columns:repeat(14,1fr);gap:10px 0;justify-items:center;margin-top:16px}
.ratxa-g i{width:8px;height:8px;border-radius:50%;border:1px solid var(--ink3);opacity:.5}
.ratxa-g i.on{background:var(--ink);border-color:var(--ink);opacity:1}
.ratxa-g i.hoy{box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--ink);opacity:1}
.fila{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:0 14px;padding:15px 0;border-top:1px solid var(--line2);font-size:.9375rem}
.fila:last-child{border-bottom:1px solid var(--line2)}
.fila .sw{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--td),transparent 60%),var(--ta)}
.fila .mono{text-transform:none;font-size:.75rem;letter-spacing:.02em}
.fila .barra{grid-column:2/-1;margin-top:11px;height:2px;background:var(--line)}
.fila .barra i{min-width:0}
.quad{padding:22px 0;border-top:1px solid var(--line2)}
.quad:last-child{border-bottom:1px solid var(--line2)}
.quad .qq{font-variant-numeric:lining-nums;font:italic 400 1.0625rem/1.4 var(--lectura);color:var(--ink2);margin:8px 0 10px}
.quad p:last-child{font:400 1.0625rem/1.55 var(--lectura)}

/* ---------- ajustos ---------- */
.grup{margin-top:34px}
.grup>.mono{display:block;margin:0 4px 10px}
.llistat{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);overflow:hidden}
.rg{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:6px 18px;border-top:1px solid var(--line2);font-size:.96875rem}
.rg:first-child{border-top:0}
.rg>span:first-child{color:var(--ink)}
.camp{text-align:right;min-width:0;flex:1;font-size:.96875rem;color:var(--ink);padding:12px 0}
.camp::placeholder{color:var(--ink3)}
.seg{display:flex;padding:3px;border-radius:12px;background:var(--card2)}
.seg button{min-height:38px;padding:0 13px;border-radius:9px;font-size:.8125rem;font-weight:500;color:var(--ink2);transition:background .35s var(--ease),color .3s,box-shadow .3s}
.seg button[aria-pressed="true"]{background:var(--bg);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1),0 0 0 .5px var(--line)}
.rg.v{flex-direction:column;align-items:stretch;gap:10px;padding:14px 18px 16px}
.rg.v .seg{width:100%}.rg.v .seg button{flex:1;padding:0 4px}
.link{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:0 18px;border-top:1px solid var(--line2);text-align:left;font-size:.96875rem}
.link:first-child{border-top:0}
.link svg{width:18px;height:18px;color:var(--ink3)}
.link.perill{color:var(--perill)}
.link.perill svg{color:var(--perill)}
.nota-final{margin:36px 4px 0;font-size:.75rem;line-height:1.6;color:var(--ink3)}

/* avís */
.toast{position:fixed;left:50%;bottom:calc(var(--tabh) + 16px);z-index:70;transform:translate(-50%,16px);opacity:0;padding:13px 20px;border-radius:24px;background:var(--ink);color:var(--on-ink);font-size:.8125rem;font-weight:500;transition:transform .7s var(--molla),opacity .35s;white-space:nowrap;max-width:calc(100% - 48px);overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- ordinador: barra lateral i columna central ---------- */
@media (min-width:900px){
  :root{--tabh:0px}
  #app{left:96px}
  #tabs{top:0;right:auto;bottom:0;width:96px;grid-template-columns:1fr;grid-auto-rows:72px;align-content:center;padding:0 8px;border-top:0;border-right:1px solid var(--line2)}
  #tabs button::before{top:50%;left:-8px;margin:-9px 0 0;width:1.5px;height:18px;transform:scaleY(0)}
  #tabs button[aria-current]::before{transform:none}
  .lector{left:96px}
  .toast{bottom:28px}
  .card{padding-bottom:40px}
}
@media (min-width:900px) and (min-height:760px){.card h2{font-size:2.5rem}.idea,.vora{font-size:1.1875rem}}

/* ---------- moviment reduït ---------- */
@media (prefers-reduced-motion:reduce){
  html:not([data-moviment="reduit"]) *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}
html[data-moviment="reduit"] *{animation:none!important;transition-duration:.001s!important}
html[data-moviment="reduit"] .bl{animation:none!important}
.card.rep .llisca{display:none}

/* àudio: un fil discret */
.audio{display:flex;align-items:center;gap:12px;min-height:44px}
.audio[hidden]{display:none}
.audio .pl{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none;transition:transform .3s var(--ease),background .3s,border-color .3s}
.audio .pl:active{transform:scale(.93)}
.audio .pl svg{width:20px;height:20px}
.audio.jug .pl{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.audio .tr{flex:1;min-width:0;height:44px;display:flex;align-items:center;cursor:pointer}
.audio .tr b{display:block;width:100%;height:2px;background:var(--line);border-radius:1px;overflow:hidden}
.audio .tr i{display:block;height:100%;width:0;background:var(--ink);transition:width .25s linear}
.audio .tm{white-space:nowrap;text-transform:none;letter-spacing:.03em;min-width:3.6rem;text-align:right}
.audio .vl{min-width:44px;min-height:44px;font:500 .75rem/1 var(--mono);color:var(--ink2);letter-spacing:.03em;border-radius:12px}
.audio .vl:active{background:var(--card)}
.card.rep .audio{display:none}
.audio.gran-a{margin-top:22px}
@media (hover:hover){.audio .pl:hover{border-color:var(--ink3)}}

:root{--gr:.2}
@media (prefers-color-scheme:dark){html:not([data-aspecte="clar"]){--gr:.1}}
html[data-aspecte="fosc"]{--gr:.1}
.bar-l::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--top) + 88px);background:linear-gradient(var(--bg) 62%,transparent);opacity:0;transition:opacity .35s;pointer-events:none}
.lector.sc .bar-l::before{opacity:1}
.buit canvas{width:168px;height:168px}
.font.verif{margin-top:-10px}
.nw{white-space:nowrap}

/* targeta simplificada: etiqueta, títol, idea, una línia, font i àudio */
.card .ey{justify-content:space-between}
.card .ey .veure{margin:-12px 0 -12px auto;min-height:44px;padding:0 2px;font:500 .6875rem/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);border-bottom:1px solid transparent;display:inline-flex;align-items:center}
.card .ey .veure span{border-bottom:1px solid var(--line)}
.cita-g{font:italic 400 1.5rem/1.35 var(--serif);letter-spacing:-.01em;text-wrap:balance;padding:6px 0 18px}
.cita-g small{display:block;margin-top:14px;font:500 .6875rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.vora{border-top:0;padding-top:0}
a.font{text-decoration:none;display:block}
a.font::after{content:" \2197";opacity:.6}
.accions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.accions .llisca{flex:1 1 0;min-width:0}
.accions .audio:not(.on) .tr,.accions .audio:not(.on) .tm,.accions .audio:not(.on) .vl{display:none}
.accions .audio.on{flex:1 1 100%;order:-1}
.accions .audio .pl{width:56px;height:56px}
.accions .audio.on .pl{width:44px;height:44px}

/* estats de càrrega i d'error: mai una pantalla trencada */
.estat-c{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:8px 0 0}
.estat-c .sub{color:var(--ink2);max-width:32ch}
.prob{font:400 .8125rem/1.5 var(--mono);color:var(--ink2);word-break:break-word;user-select:text;-webkit-user-select:text}
.sense-js{padding:2rem}
/* Navegadors sense light-dark() (Safari d'abans de la 17.5): els mateixos colors, escrits a l'antiga. Generat des de les regles de dalt. */
@supports not (color:light-dark(red,blue)){
:root{--bg:#fbfaf8;--ink:#121211;--ink2:#4b4a46;--ink3:#74726c;--line:rgba(18,18,17,.11);--line2:rgba(18,18,17,.06);--card:#f3f2ef;--card2:#ecebe7;--glass:rgba(251,250,248,.74);--glass-b:rgba(18,18,17,.07);--on-ink:#fbfaf8;--perill:#a8321f;--ta:#6e86b8;--tb:#aebbd8;--tc:#dfe5f1;--td:#f0b8a0}
[data-tema="Hormozi"]{--ta:#ff5a1f;--tb:#ff9a72;--tc:#ffd9c6;--td:#ffc15c}
[data-tema="Haynes"]{--ta:#3e62ec;--tb:#8ea6f6;--tc:#d3dcfb;--td:#f4ab8e}
[data-tema="Filosofia"]{--ta:#c48a38;--tb:#e6c288;--tc:#f4e6cc;--td:#dc8f8f}
[data-tema="IA"]{--ta:#7b4cf0;--tb:#b7a0f8;--tc:#e3dafc;--td:#72c9f3}
[data-tema="Vendes"]{--ta:#0ea3a1;--tb:#76d3c9;--tc:#d1f0eb;--td:#f3d36d}
[data-tema="Negoci"]{--ta:#7c9b3a;--tb:#b8cd80;--tc:#e3ecc9;--td:#ecc66b}
[data-tema="Estratègia"]{--ta:#d8446f;--tb:#f192a8;--tc:#fad5de;--td:#ffb48c}
@media (prefers-color-scheme:dark){
html:not([data-aspecte="clar"]){--bg:#0a0d12;--ink:#eceef1;--ink2:#aeb3bd;--ink3:#7f8591;--line:rgba(255,255,255,.11);--line2:rgba(255,255,255,.06);--card:#10141b;--card2:#161b24;--glass:rgba(10,13,18,.66);--glass-b:rgba(255,255,255,.1);--on-ink:#0a0d12;--perill:#ff8d7a;--ta:#3b5688;--tb:#25375c;--tc:#131c33;--td:#7a4c45}
html:not([data-aspecte="clar"]) [data-tema="Hormozi"]{--ta:#e8581f;--tb:#9b3a1b;--tc:#3f1d13;--td:#a86a1c}
html:not([data-aspecte="clar"]) [data-tema="Haynes"]{--ta:#3558d6;--tb:#1f3a8c;--tc:#101c40;--td:#b06a4f}
html:not([data-aspecte="clar"]) [data-tema="Filosofia"]{--ta:#b98334;--tb:#6f4d20;--tc:#2e2314;--td:#8d4b4b}
html:not([data-aspecte="clar"]) [data-tema="IA"]{--ta:#6d45e0;--tb:#3f2b94;--tc:#1d1745;--td:#2f7b9d}
html:not([data-aspecte="clar"]) [data-tema="Vendes"]{--ta:#12a19b;--tb:#0b5f63;--tc:#0c2b30;--td:#a38a2c}
html:not([data-aspecte="clar"]) [data-tema="Negoci"]{--ta:#7f9e3a;--tb:#4b6122;--tc:#1f2a14;--td:#a28434}
html:not([data-aspecte="clar"]) [data-tema="Estratègia"]{--ta:#d04068;--tb:#822544;--tc:#331622;--td:#a5664a}
}
html[data-aspecte="fosc"]{--bg:#0a0d12;--ink:#eceef1;--ink2:#aeb3bd;--ink3:#7f8591;--line:rgba(255,255,255,.11);--line2:rgba(255,255,255,.06);--card:#10141b;--card2:#161b24;--glass:rgba(10,13,18,.66);--glass-b:rgba(255,255,255,.1);--on-ink:#0a0d12;--perill:#ff8d7a;--ta:#3b5688;--tb:#25375c;--tc:#131c33;--td:#7a4c45}
html[data-aspecte="fosc"] [data-tema="Hormozi"]{--ta:#e8581f;--tb:#9b3a1b;--tc:#3f1d13;--td:#a86a1c}
html[data-aspecte="fosc"] [data-tema="Haynes"]{--ta:#3558d6;--tb:#1f3a8c;--tc:#101c40;--td:#b06a4f}
html[data-aspecte="fosc"] [data-tema="Filosofia"]{--ta:#b98334;--tb:#6f4d20;--tc:#2e2314;--td:#8d4b4b}
html[data-aspecte="fosc"] [data-tema="IA"]{--ta:#6d45e0;--tb:#3f2b94;--tc:#1d1745;--td:#2f7b9d}
html[data-aspecte="fosc"] [data-tema="Vendes"]{--ta:#12a19b;--tb:#0b5f63;--tc:#0c2b30;--td:#a38a2c}
html[data-aspecte="fosc"] [data-tema="Negoci"]{--ta:#7f9e3a;--tb:#4b6122;--tc:#1f2a14;--td:#a28434}
html[data-aspecte="fosc"] [data-tema="Estratègia"]{--ta:#d04068;--tb:#822544;--tc:#331622;--td:#a5664a}
}