:root{
  --fons: #eaf4f8;
  --blanc: #ffffff;
  --text: #111111;
  --muted: #5b6470;
  --link: #0aa8d8;
  --borda: #e5e7eb;
  --ombra: rgba(0,0,0,.06);

  --amplada: 1120px;
  --radi: 14px;

  --s1: 8px;
  --s2: 12px;
  --s3: 16px;
  --s4: 24px;
  --s5: 32px;
  --s6: 48px;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  font-family: "Assistant", sans-serif;
  background: var(--fons);
  color: var(--text);
  line-height: 1.35;
}

a{ color: var(--link); text-decoration: none; }
a:hover{ text-decoration: underline; }

.pantalla{ min-height: 100vh; }

.contenidor{
  max-width: var(--amplada);
  width: 100%;
  margin: 0 auto;
  padding: var(--s6) var(--s4);
}

/* ===== Mostrar/Ocultar pasos (blindado) ===== */
.pas-pantalla{ display: none !important; }
.pas-pantalla.visible{ display: block !important; }

/* Header (pas 2-4) */
.cap{ margin-bottom: var(--s4); }

.logo{
  font-weight: 700;
  font-size: 56px;
  letter-spacing: -1px;
  margin: 0 0 var(--s2);
}

.titol-principal{
  margin: 0;
  font-size: 26px;
  font-weight: 700;
}

/* Layout general (pas 2-3) */
.distribucio{
  display: grid;
  grid-template-columns: 1.7fr .9fr;
  gap: var(--s4);
  align-items: start;
}

.espai-vertical{
  display: grid;
  gap: var(--s4);
}

@media (max-width: 900px){
  .espai-vertical {
    display: none;
  }
}

/* Targetes */
.targeta{
  background: var(--blanc);
  border-radius: var(--radi);
  box-shadow: 0 10px 30px var(--ombra);
}

.targeta--gran{ padding: var(--s5); }

.targeta--ajuda{
  padding: 15px 13px;
  background: #e6e6e6;
  border-radius: 6px;
  box-shadow: none;
}

.ajuda-titol{
  display:block;
  font-size:15px;
  margin-bottom: 6px;
}

.ajuda-text{
  font-size:14px;
  color:#374151;
}

/* Progress */
.progres{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3);
  background: white;
  border-radius: var(--radi);
  padding: var(--s4);
}

.pas{ display: grid; gap: 6px; }
.pas .fila{ display: inline-flex; gap: 8px; align-items: center; }

.punt{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid var(--link);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.punt::after{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: transparent;
}

.pas--actiu .punt::after{ background: var(--link); }
.pas--completat .punt::after{ background: var(--link); }

.pas small{ font-size: 11px; color: var(--muted); }
.pas b{ font-size: 17px; }

.estat{ font-size: 13px; }
.estat--completat{ color: #16a34a; }
.estat--en-proces{ color: var(--link); }
.estat--pendent{ color: #6b7280; }

/* Formulari */
.formulari{
  display: grid;
  gap: var(--s3);
  margin-top: var(--s2);
}

.camp{ display: grid; gap: 6px; }

label{ font-size: 17px; }

.obligatori{
  color: #e11d48;
  font-weight: 700;
}

input{
  width: 100%;
  height: 40px;
  padding: 0 var(--s2);
  border: 1px solid var(--borda);
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  background: var(--blanc);
}

input:focus{
  border-color: var(--link);
  box-shadow: 0 0 0 3px rgba(10,168,216,.18);
}

/* Contenido autodiagnosi */
.capitol{
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  /* margin-bottom: var(--s3); */
}

.icona{
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--link);
}

.titol-capitol{
  margin: 0;
  font-size: 28px;
  font-weight: 700;
}

.pregunta{ margin-top: var(--s4); }

.pregunta h3{
  margin: 0 0 var(--s2);
  font-size: 21px;
  font-weight: 700;
}

.opcions{
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.opcio{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: 17px;
  color: #111;
}

.opcio input{
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  box-shadow: none;
}

/* ===== Autodiagnosi: mostrar solo temática activa ===== */
.grup-autodiagnosi{ display: none; }
.grup-autodiagnosi.visible{ display: block; }

/* Sidebar temàtiques */
.bloc-lateral{
  background: rgba(255,255,255,.5);
  border-radius: var(--radi);
  padding: var(--s4);
  position: sticky;
  top: var(--s4);
}

.bloc-lateral h4{
  margin: 0 0 var(--s2);
  font-size: 21px;
  color: #111;
  font-weight: 700;
  letter-spacing: .2px;
}

.tematiques{
  display: grid;
  gap: 10px;
  margin: 0 0 var(--s4);
  padding: 0;
  list-style: none;
}

.tematiques a{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: 176x;
  color: #6b7280;
}

.tematiques li.actiu a{
  color: var(--text);
  font-weight: 700;
}

/* Iconas temàtiques */
.icona-mini{
  display:inline-flex;
  width:18px;
  height:18px;
  margin-right:10px;
  color:#676767;
}

.icona-mini svg{
  width:100%;
  height:100%;
  display:block;
}

/* cuando el li está activo */
.tematiques li.actiu .icona-mini{
  color: #00A3E0;
}

/* Resum */
.resum{
  display: grid;
  gap: var(--s3);
  margin-top: var(--s2);
}

.fila-resum{ display: grid; gap: 6px; }

.pregunta-resum{
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}

.resposta-resum{
  font-size: 17px;
  color: #374151;
  margin: 0;
}

.titol-tematica-resum{
  /* margin: 18px 0 8px; */
  margin: 0 !important;
  font-size: 21px;
      border-top: 1px solid #6b7280;
    padding-top: 15px;
}

/* Acciones */
.accions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s5);
}

.enrere{
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--link);
  letter-spacing: .2px;
  cursor: pointer;
  font-family: "Assistant", sans-serif;
}

.boto{

  padding: 10px 20px;
  border: 0;
  border-radius: 6px;
  background: var(--link);
  color: var(--blanc);
 font-family: "Assistant", sans-serif;
font-size: 17px;
font-weight: 700;
  cursor: pointer;
}

.boto:active{ transform: translateY(1px); }

/* Confirmació */
.signe-ok{
  width: 60px;
  height: 60px;
  border-radius: 999px;
  border: 3px solid var(--link);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s3);
}

.signe-ok svg{
  width: 28px;
  height: 28px;
  color: var(--link);
}

.subtitol{
  margin: 0 0 var(--s2);
  font-size: 28px;
  font-weight: 700;
}

.text-petit{
  margin: 0;
  font-size: 17px;
  color: #111;
  max-width: 70ch;
}

.llista-enllacos{
  margin-top: var(--s4);
  display: grid;
  gap: var(--s4);
  max-width: 70ch;
}

.llista-enllacos p{
  margin: 0 0 var(--s1);
  font-size: 13px;
}

/* ===== Pas 1 (intro) ===== */
.intro{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--s6);
  align-items: start;
}

.intro-esquerra{ padding-top: var(--s2); }

.intro-logo{
  margin: 0 0 var(--s3);
  font-weight: 700;
  font-size: 56px;
  letter-spacing: -1px;
  width:185px;
  height:47px;
}

.intro-logo svg{
  width:100%;
  height:100%;
  display:block;
}

.intro-titol{
  margin: 0 0 var(--s3);
  font-size: 35px;
  font-weight: 700;
  line-height: 1.3em;
}

@media (max-width: 900px){
  .intro-titol{
    font-size: 28px;
  }
}

.intro-text{
  margin: 0;
  max-width: 56ch;
  color: #111;
  font-size: 17px;
}

.intro-links{
  margin-top: var(--s5);
  display: grid;
  gap: var(--s4);
  max-width: 56ch;
}

.intro-bloc p{
  margin: 0 0 var(--s1);
  font-size: 17px;
}

.intro-bloc a{
  font-size: 17px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.intro-targeta{
  max-width: 420px;
  margin-left: auto;
}

.intro-titol-targeta{
  margin: 0 0 var(--s3);
  font-size: 25px;
  font-weight: 700;
}

.intro-boto{
  width: 100%;
  margin-top: var(--s3);
}

/* ===== Mostrar temàtiques SOLO en pas 2 ===== */
.pas-pantalla:not([data-pas="2"]) .bloc-lateral{
  display: none;
}

/* Responsive */
@media (max-width: 820px){
  .distribucio{ grid-template-columns: 1fr; }
  .progres{ grid-template-columns: 1fr 1fr; }
  .logo{ font-size: 48px; }

  .intro{
    grid-template-columns: 1fr;
    gap: var(--s5);
  }

  .intro-targeta{
    max-width: 520px;
    margin-left: 0;
  }

  /* en móvil quitamos sticky */
  .bloc-lateral{ position: static; }
}
/* Control real de visibilidad por pasos */
.pas-pantalla { 
  display: none; 
}

.pas-pantalla.visible { 
  display: block; 
}

.pas-pantalla { display: none; }
.pas-pantalla.visible { display: block; }


/* En móvil 1 columna (ya lo tienes, pero lo dejo aquí por claridad) */
@media (max-width: 820px){
  .distribucio{ grid-template-columns: 1fr; }
}


.pas-pantalla[data-pas="2"] .distribucio{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:24px;
  align-items:start;
}

@media (max-width:900px){
  .pas-pantalla[data-pas="2"] .distribucio{
    grid-template-columns:1fr;
  }
}