/* FIAC Idiomes · Speaking Sessions
   Colors i tipografia: FIAC-brand manual-short.pdf (Pantone 293C #003da5, Pantone 1575C #ff6633, DM Sans) */
:root{
  --blue:#003da5; --blue-deep:#002b75; --orange:#ff6633;
  --ink:#14213d; --muted:#56607a; --paper:#f4f6fb; --line:#d8dfee; --white:#fff;
  --ok:#1f7a45; --low:#c0322b; --full:#56607a;
  --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 17px/1.55 "DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper)}
img{max-width:100%;height:auto}
a{color:var(--blue);text-underline-offset:.18em}
a:hover{text-decoration-color:var(--orange)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
h1,h2{line-height:1.1;letter-spacing:-.02em;margin:0 0 .6em}
h1{font-size:1.9rem;font-weight:700}
h2{font-size:1.3rem;font-weight:700;margin-top:1.8rem}
.muted,.meta{color:var(--muted)}
.lead{font-size:1.1rem;max-width:38rem}

/* ---------- Portada ---------- */
/* Colors dels nivells: els de la llegenda del calendari mensual (píxels del PDF «Speaking Sessions - October 2026») */
.lv-1{--lv:#92d050}
.lv-2{--lv:#538dd5}
.lv-3{--lv:#963634}
.lv-4{--lv:#e26b0a}

.hero{background:var(--blue);color:var(--white);border-radius:0 0 36px 36px;position:relative;margin-bottom:3.6rem}
.hero::after{ /* cua del globus, apuntant als nivells */
  content:"";position:absolute;left:clamp(1.5rem,8vw,6rem);bottom:-30px;width:46px;height:32px;
  background:var(--blue);clip-path:polygon(0 0,100% 0,0 100%)}
.hero-deco{position:absolute;inset:0;overflow:hidden;border-radius:0 0 36px 36px;pointer-events:none}
.float{position:absolute;fill:currentColor}
.f1{width:clamp(180px,26vw,340px);right:-3%;top:8%;color:rgba(255,255,255,.07);animation:drift 9s ease-in-out infinite}
.f2{width:clamp(90px,12vw,160px);right:24%;top:52%;color:rgba(255,102,51,.22);animation:drift 7s ease-in-out -2s infinite reverse}
.f3{width:clamp(60px,8vw,110px);right:8%;bottom:10%;color:rgba(255,255,255,.1);animation:drift 11s ease-in-out -4s infinite}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-10px,-16px) rotate(-4deg)}}

.hero-inner{position:relative;max-width:68rem;margin:0 auto;padding:1.2rem 1.25rem 3.4rem}
.hero-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:clamp(2rem,6vw,3.6rem)}
.hero-bar img{width:130px}
.hero-link{color:var(--white);font-weight:500;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45)}
.hero-link:hover{text-decoration-color:var(--orange)}
.hero h1{font-size:clamp(2.4rem,6.4vw,4.6rem);line-height:1;letter-spacing:-.04em;max-width:14ch;margin:0 0 1rem}
.hero-sub{font-size:clamp(1.05rem,1.9vw,1.25rem);max-width:40rem;margin:0;color:rgba(255,255,255,.9)}

/* Guia en 3 passos */
.guide-box{margin-top:2.2rem;max-width:60rem;padding:1.3rem 1.4rem 1.4rem;border-radius:22px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18)}
.guide-title{margin:0 0 1rem;font-weight:700;font-size:1.05rem}
.guide{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.guide::before{ /* línia que uneix els passos i es dibuixa en carregar */
  content:"";position:absolute;left:22px;right:calc(33.3% - 22px);top:21px;height:3px;border-radius:3px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;animation:draw .9s cubic-bezier(.6,0,.2,1) forwards;animation-delay:.75s}
.guide li{position:relative;display:flex;gap:.8rem;align-items:flex-start;opacity:0;transform:translateY(10px);
  animation:pop-in .45s ease-out forwards;animation-delay:calc(var(--g) * .3s + .8s)}
.g-num{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--white);color:var(--blue);
  font-weight:700;font-size:1.2rem;box-shadow:0 0 0 5px var(--blue)}
.g-text{display:flex;flex-direction:column;padding-top:.15rem}
.g-text strong{font-size:1.08rem}
.g-text span{color:rgba(255,255,255,.82);font-size:.95rem}

.hero-cta{display:inline-flex;align-items:center;gap:.6rem;min-height:52px;margin-top:1.8rem;padding:.85rem 1.8rem;border-radius:999px;
  background:var(--orange);color:var(--ink);font-weight:700;font-size:1.1rem;text-decoration:none;transition:transform .15s,background-color .15s}
.hero-cta:hover{background:#ff7f57;transform:translateY(-2px)}
.hero-cta svg{animation:nudge 1.8s ease-in-out 2.4s infinite}

.reveal{opacity:0;transform:translateY(14px);animation:pop-in .6s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:calc(var(--r) * .15s + .05s)}

@keyframes pop-in{to{opacity:1;transform:none}}
@keyframes draw{to{transform:scaleX(1)}}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* Pas 1: nivells com a botons grans, tots iguals */
.home .wrap{max-width:68rem}
.step-tag{display:inline-block;margin:0 0 .4rem;padding:.2rem .7rem;border-radius:999px;background:#e3ebfa;color:var(--blue);font-weight:700;font-size:.9rem}
.levels h2{margin-top:0;font-size:1.7rem}
.level-list{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.lv{opacity:0;transform:translateY(16px);animation:pop-in .5s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:calc(var(--i) * 90ms + .25s)}
.lv-btn{display:flex;align-items:center;gap:1rem;height:100%;padding:1.15rem 1.2rem;background:var(--white);border:2px solid var(--line);
  border-radius:22px;color:var(--ink);text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s}
.lv-btn:hover{border-color:var(--lv);box-shadow:0 12px 28px rgba(0,30,80,.12);transform:translateY(-3px)}
.lv-icon{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:color-mix(in srgb,var(--lv) 18%,white)}
.lv-icon svg{width:34px;height:30px;fill:var(--lv);transition:transform .25s}
.lv-btn:hover .lv-icon svg{transform:rotate(-8deg) scale(1.08)}
.lv-main{display:flex;flex-direction:column;flex:1;min-width:0}
.lv-name{font-size:1.25rem;font-weight:700;letter-spacing:-.015em;line-height:1.2}
.lv-next{margin-top:.25rem;font-weight:500}
.lv-count{color:var(--muted);font-size:.95rem}
.lv-arrow{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--paper);color:var(--blue);transition:background-color .2s,color .2s,transform .2s}
.lv-btn:hover .lv-arrow{background:var(--blue);color:var(--white);transform:translateX(3px)}
.help{display:flex;align-items:center;gap:.6rem;margin:1.3rem 0 0;padding:.9rem 1.1rem;border-radius:16px;background:#fff6e0;color:#5c4200;font-weight:500}
.help svg{flex:none}

/* Bon a saber, amb icones */
.how{margin-top:3rem}
.how-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.how-list li{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:1.2rem 1.15rem}
.how-list p{margin:0}
.how-icon{display:inline-grid;place-items:center;width:48px;height:48px;margin-bottom:.75rem;border-radius:14px;background:#e3ebfa;color:var(--blue)}
.how-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Indicador de pas a les pàgines 2 i 3 */
.stepper{margin:0 0 1.4rem}
.stepper-now{margin:0 0 .5rem;font-weight:700;color:var(--blue)}
.stepper ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.stepper li{display:flex;align-items:center;gap:.45rem;color:var(--muted);font-weight:500}
.st-dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:var(--white);font-size:.9rem;font-weight:700}
.stepper li.done .st-dot{background:var(--ok);border-color:var(--ok);color:var(--white)}
.stepper li.now{color:var(--ink)}
.stepper li.now .st-dot{background:var(--blue);border-color:var(--blue);color:var(--white);box-shadow:0 0 0 4px #d6e1f6}
.page-hint{margin:.5rem 0 0;padding:.7rem 1rem;border-left:4px solid var(--orange);background:var(--white);border-radius:0 12px 12px 0;font-weight:500}

@media (max-width:56rem){
  .how-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:44rem){
  .guide{grid-template-columns:1fr;gap:1rem}
  .guide::before{left:21px;right:auto;top:22px;bottom:22px;width:3px;height:auto;transform:scaleY(0);transform-origin:top}
  .level-list,.how-list{grid-template-columns:1fr}
  @keyframes draw{to{transform:scaleY(1)}}
}
@media (prefers-reduced-motion:reduce){
  .reveal,.lv,.guide li{animation:none!important;opacity:1;transform:none}
  .guide::before{animation:none!important;transform:none}
  .float,.hero-cta svg{animation:none!important}
  .lv-btn:hover,.hero-cta:hover{transform:none}
}

/* ---------- Pàgines interiors ---------- */
.top{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between;padding:.7rem 1.25rem;background:var(--white);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.75rem;color:var(--ink);text-decoration:none;font-weight:700}
.brand img{width:96px}
.top nav{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;font-weight:500}
.wrap{max-width:60rem;margin:0 auto;padding:1.5rem 1.25rem 3rem}
.foot{max-width:62rem;margin:0 auto;padding:1.5rem 1.25rem 2.5rem;color:var(--muted);border-top:1px solid var(--line)}

.cards{list-style:none;padding:0;display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.card{display:block;padding:1rem 1.1rem;background:var(--white);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;font-weight:700;color:var(--ink)}
.card:hover{border-color:var(--blue);color:var(--blue)}
.session{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:var(--r);padding:1.1rem 1.25rem;margin:.8rem 0}
.session h2{margin:.2rem 0 .4rem;font-size:1.2rem}
.when{font-weight:700;color:var(--blue)}
.when::first-letter{text-transform:uppercase}

button,.button{display:inline-block;padding:.65rem 1.1rem;border:0;border-radius:999px;background:var(--blue);color:var(--white);font:inherit;font-weight:700;cursor:pointer;text-decoration:none;line-height:1.2}
button:hover,.button:hover{background:var(--blue-deep);color:var(--white)}
button.secondary{background:var(--white);color:var(--ink);border:1px solid var(--line)}
button.secondary:hover{border-color:var(--blue);background:var(--white);color:var(--blue)}
button.danger{background:var(--low)}
button.link{background:none;color:var(--blue);padding:0;font-weight:500;border-radius:0}
button.link:hover{text-decoration:underline}

.form{display:grid;gap:1rem;max-width:32rem}
.form label{display:grid;gap:.3rem;font-weight:500}
.form label.check{display:flex;gap:.55rem;font-weight:400;align-items:flex-start}
input,select,textarea{font:inherit;padding:.6rem .7rem;border:1px solid var(--line);border-radius:10px;width:100%;background:var(--white);color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}
input[type=checkbox]{width:1.1rem;height:1.1rem;margin-top:.2rem;accent-color:var(--blue)}
.privacy{font-size:.9rem;color:var(--muted);border-top:1px solid var(--line);padding-top:.9rem}
.gap{border:1px dashed var(--low);color:var(--low);padding:.5rem .7rem;border-radius:8px}

.flash{padding:.8rem 1rem;border-radius:10px;margin:0 0 1rem}
.flash.ok{background:#e7f4ec;color:var(--ok)}.flash.err{background:#fbeaea;color:var(--low)}
.badge{display:inline-block;font-size:.8rem;font-weight:500;padding:.1rem .55rem;border-radius:999px;background:#e8ecf5}
.badge.full{background:var(--ink);color:var(--white)}.badge.warn{background:#fff1d6}
.table-wrap{overflow-x:auto}
table.list{width:100%;border-collapse:collapse;background:var(--white);border-radius:var(--r)}
table.list td,table.list th{padding:.6rem .7rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.dot{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;margin-right:.4rem;background:var(--ok)}
.light-low .dot{background:var(--low)}.light-full .dot{background:var(--full)}
.light-cancelled{opacity:.55}.light-cancelled .dot{background:#b9c0d0}
.filters,.inline{display:flex;flex-wrap:wrap;gap:.5rem;align-items:end}
.filters>*,.inline>*{width:auto}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Etiquetes de la sessió: centre (o online) i places lliures */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 1rem;padding:0}
.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .8rem;border-radius:999px;font-size:.95rem;font-weight:500;line-height:1.2}
.chip-place{background:#e3ebfa;color:var(--blue);font-weight:700}
.chip-online{background:#ece6fa;color:#4a2d8f}
.chip-spots{background:#e4f3ea;color:var(--ok)}
.chip-spots strong{font-size:1.05rem}
.chip-few{background:#ffe7dd;color:#a3330c}
.chip-full{background:var(--ink);color:var(--white)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Targeta de sessió (portal) ---------- */
.back{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.2rem;min-height:44px;margin-bottom:1.2rem;
  border:1.5px solid var(--blue);border-radius:999px;color:var(--blue);font-weight:700;text-decoration:none;background:var(--white)}
.back:hover{background:var(--blue);color:var(--white)}
.page-head{margin-bottom:1.2rem}
.page-head h1{margin-bottom:.2rem}
.page-head p{margin:0}
.empty{padding:1.2rem;background:var(--white);border:1px dashed var(--line);border-radius:var(--r)}

.centre-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.4rem}
.pill{padding:.45rem .95rem;border-radius:999px;border:1px solid var(--line);background:var(--white);color:var(--ink);text-decoration:none;font-weight:500}
.pill:hover{border-color:var(--blue);color:var(--blue)}
.pill.on{background:var(--blue);border-color:var(--blue);color:var(--white)}

.slot-card{display:grid;grid-template-columns:6.5rem 1fr;background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 1rem}
.date-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem .5rem;background:var(--blue);color:var(--white);text-align:center;line-height:1.1}
.dt-wd{font-size:.85rem;opacity:.9}
.dt-day{font-size:2.4rem;font-weight:700;letter-spacing:-.03em;margin:.1rem 0}
.dt-mon{font-size:.85rem;opacity:.9}
.dt-time{margin-top:.6rem;padding:.2rem .55rem;border-radius:999px;background:var(--white);color:var(--blue);font-weight:700;font-size:.95rem}
.slot-body{padding:1rem 1.25rem 1.1rem;min-width:0}
.slot-num{margin:0;color:var(--muted);font-size:.9rem;font-weight:500}
.slot-title{margin:.15rem 0 .35rem;font-size:1.3rem;letter-spacing:-.015em}
.slot-desc{margin:0;color:var(--muted);max-width:60ch}
.slot-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line)}
.slot-foot .chips{margin:0}
.slot-cta{margin:0}
.slot-cta,a.slot-cta{min-height:44px}
a.button.slot-cta,.slot-cta button{padding:.75rem 1.5rem}
.chip-trial{background:#fff1d6;color:#7a4b00}

@media (max-width:34rem){
  .slot-card{grid-template-columns:1fr}
  .date-tile{flex-direction:row;justify-content:flex-start;gap:.5rem;padding:.7rem 1rem}
  .dt-day{font-size:1.5rem;margin:0}
  .dt-time{margin:0 0 0 auto}
  .slot-foot{flex-direction:column;align-items:stretch}
  a.button.slot-cta,.slot-cta button{width:100%;text-align:center}
}

/* Centre destacat a dalt de la targeta, i botó de tornar amb fletxa llarga */
.slot-card{grid-template-rows:auto 1fr}
.slot-place{grid-column:1 / -1;display:flex;align-items:center;gap:.5rem;margin:0;padding:.65rem 1.25rem;
  background:#e3ebfa;color:var(--blue);font-size:1.15rem;font-weight:700;letter-spacing:-.01em;border-bottom:1px solid #cfdcf4}
.slot-place.is-online{background:#ece6fa;color:#4a2d8f;border-bottom-color:#ddd2f5}
.slot-place svg{flex:none}
.back{gap:.7rem;padding:.65rem 1.6rem .65rem 1.3rem;font-size:1.05rem}
.back-arrow{flex:none;transition:transform .15s}
.back:hover .back-arrow{transform:translateX(-3px)}

/* Color de cada centre (proposta de disseny: cap document de FIAC n assigna colors als centres).
   Text blanc amb contrast AA: TC 5,95 · TN 7,38 · TV 7,02 · SC 6,25 (TN i SC canviats per no confondre-se amb els colors dels nivells) · Online 8,11 */
.centre-tc{--centre:#00706b}
.centre-tn{--centre:#a3195b}
.centre-tv{--centre:#6a3fb5}
.centre-sc{--centre:#7a5c00}
.slot-place[class*="centre-"]{background:var(--centre,#e3ebfa);color:var(--white);border-bottom:0}
.slot-place.is-online{--centre:#4a4f63}
.pill{display:inline-flex;align-items:center;gap:.45rem}
.dot-centre{width:.7rem;height:.7rem;border-radius:50%;background:var(--centre,var(--blue))}
.pill.on[class*="centre-"]{background:var(--centre);border-color:var(--centre)}
.pill.on .dot-centre{background:var(--white)}