/* TutumSec · Diagnostic d'exposicio i maduresa
   Paleta oficial de marca: Cinder #050915, blau #3886F4, blau clar #5EB9F0.
   Tipografies servides des d'aqui, mai des d'un tercer: a l'auditoria de profinca
   varem marcar com a troballa carregar Google Fonts sense consentiment previ. */

@font-face{font-family:Raleway;src:url(tip/Raleway-Regular.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Raleway;src:url(tip/Raleway-Bold.woff2)format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Poppins;src:url(tip/Poppins-Regular.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(tip/Poppins-SemiBold.woff2)format("woff2");font-weight:600;font-display:swap}

:root{
  --cinder:#050915; --cinder-2:#0b1224; --blau:#3886F4; --blau-clar:#5EB9F0;
  --blanc:#fff; --gris:#8892a4; --gris-clar:#c9d1de; --vora:#1c2740;
  --ok:#3ecf8e; --avis:#f5a524;
  --titol:Raleway,"Helvetica Neue",Arial,sans-serif;
  --cos:Poppins,"Helvetica Neue",Arial,sans-serif;
  --ample:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cinder); color:var(--gris-clar);
  font-family:var(--cos); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--titol); color:var(--blanc); line-height:1.2; margin:0 0 .6em}
h1{font-size:clamp(2rem,5vw,3.1rem); font-weight:700; letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem); font-weight:700}
h3{font-size:1.12rem; font-weight:700}
p{margin:0 0 1.1em}
a{color:var(--blau-clar)}
strong{color:var(--blanc); font-weight:600}
.embolcall{max-width:var(--ample); margin:0 auto; padding:0 24px}

/* ---------- capcalera ---------- */
.dalt{position:sticky; top:0; z-index:50; background:rgba(5,9,21,.9);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--vora)}
.dalt .embolcall{display:flex; align-items:center; justify-content:space-between;
  height:72px; gap:20px}
.dalt img{height:30px; width:auto; display:block}
.dalt .lema{color:var(--gris); font-size:.82rem; letter-spacing:.04em}
@media(max-width:640px){.dalt .lema{display:none}}
/* Selector d'idioma. La llengua activa no es un enllac: no te sentit anar on ja ets,
   i marcar-la ajuda a saber en quina pagina s'esta. */
.dalt .dreta{display:flex; align-items:center; gap:16px; margin-left:auto}
.idiomes{display:flex; gap:2px; align-items:center; font-size:.8rem; letter-spacing:.06em}
.idiomes a,.idiomes span{padding:5px 9px; border-radius:6px; text-decoration:none;
  text-transform:uppercase; font-weight:700; line-height:1}
.idiomes a{color:var(--gris)}
.idiomes a:hover{color:var(--blanc); background:var(--vora)}
.idiomes span[aria-current]{color:var(--cinder); background:var(--blau-clar)}
.idiomes .barra{color:var(--vora); padding:0; font-weight:400}

/* ---------- portada ---------- */
.portada{padding:76px 0 60px; position:relative; overflow:hidden}
.portada::before{content:""; position:absolute; inset:-40% 30% auto -10%; height:560px;
  background:radial-gradient(closest-side,rgba(56,134,244,.20),transparent 70%);
  pointer-events:none}
.portada .embolcall{position:relative}
.etiqueta{display:inline-block; font-family:var(--titol); font-size:.76rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blau-clar);
  border:1px solid rgba(94,185,240,.35); border-radius:999px; padding:6px 15px; margin-bottom:22px}
.entradeta{font-size:1.13rem; max-width:60ch; color:var(--gris-clar)}
.portada .destacat{color:var(--blau-clar)}

.trets{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:14px; margin:38px 0 8px; padding:0; list-style:none}
.trets li{border:1px solid var(--vora); border-radius:12px; padding:18px 20px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.trets b{display:block; font-family:var(--titol); color:var(--blanc); margin-bottom:3px}
.trets span{font-size:.9rem; color:var(--gris)}

/* ---------- seccions ---------- */
section{padding:56px 0; border-top:1px solid var(--vora)}
section:first-of-type{border-top:0}
.passos{counter-reset:p; list-style:none; padding:0; margin:26px 0 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px}
.passos li{counter-increment:p; position:relative; padding-left:46px}
.passos li::before{content:counter(p); position:absolute; left:0; top:-2px;
  width:32px; height:32px; border-radius:50%; background:var(--blau); color:#fff;
  font-family:var(--titol); font-weight:700; display:grid; place-items:center}
.passos b{display:block; color:var(--blanc); font-family:var(--titol); margin-bottom:4px}
.passos p{font-size:.93rem; margin:0; color:var(--gris)}

.avis-abast{border-left:3px solid var(--blau); background:rgba(56,134,244,.07);
  padding:16px 20px; border-radius:0 10px 10px 0; margin-top:30px; font-size:.94rem}
.avis-abast p:last-child{margin-bottom:0}

/* ---------- formulari ---------- */
.form-caixa{background:var(--cinder-2); border:1px solid var(--vora); border-radius:16px;
  padding:34px; margin-top:26px}
@media(max-width:640px){.form-caixa{padding:22px 18px}}
fieldset{border:0; padding:0; margin:0 0 34px}
fieldset:last-of-type{margin-bottom:22px}
legend{font-family:var(--titol); font-weight:700; color:var(--blanc); font-size:1.06rem;
  padding:0 0 4px; margin-bottom:16px; width:100%; border-bottom:1px solid var(--vora)}
.parella{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:640px){.parella{grid-template-columns:1fr}}
.camp{margin-bottom:16px}
.camp label{display:block; font-size:.9rem; font-weight:500; color:var(--blanc); margin-bottom:6px}
.camp .ajuda{display:block; font-size:.81rem; color:var(--gris); font-weight:400; margin-top:2px}
input[type=text],input[type=email],input[type=tel],input[type=url],select{
  width:100%; padding:11px 13px; font-family:var(--cos); font-size:.96rem;
  color:var(--blanc); background:#070d1c; border:1px solid var(--vora); border-radius:9px}
input:focus,select:focus{outline:2px solid var(--blau); outline-offset:1px; border-color:transparent}
select{appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gris) 50%),linear-gradient(135deg,var(--gris) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 13px) 50%;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:38px}
select option{background:#070d1c; color:var(--blanc)}
input::placeholder{color:#4d586e}
input[aria-invalid=true]{border-color:#e5484d}
.error{display:block; font-size:.83rem; color:#ff8085; margin-top:5px; min-height:0}

/* preguntes de maduresa */
.pregunta{padding:17px 0; border-bottom:1px solid var(--vora)}
.pregunta:last-child{border-bottom:0}
.pregunta .marc{font-size:.72rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--blau-clar); font-family:var(--titol); font-weight:700}
.pregunta .text{display:block; color:var(--blanc); margin:4px 0 11px; font-size:.97rem}
.opcions{display:flex; flex-wrap:wrap; gap:8px}
.opcions label{cursor:pointer}
.opcions input{position:absolute; opacity:0; width:0; height:0}
.opcions span{display:inline-block; padding:7px 15px; border:1px solid var(--vora);
  border-radius:999px; font-size:.88rem; color:var(--gris-clar); transition:.12s}
.opcions label:hover span{border-color:var(--blau)}
.opcions input:checked+span{background:var(--blau); border-color:var(--blau); color:#fff; font-weight:500}
.opcions input:focus-visible+span{outline:2px solid var(--blau-clar); outline-offset:2px}

/* consentiment */
.consent{display:flex; gap:12px; align-items:flex-start; font-size:.9rem;
  border:1px solid var(--vora); border-radius:11px; padding:16px; background:#070d1c}
.consent input{margin-top:3px; width:18px; height:18px; flex:0 0 auto; accent-color:var(--blau)}

/* el pot de mel: invisible i fora del recorregut de teclat i de lector de pantalla */
.pot-mel{position:absolute!important; left:-9999px; width:1px; height:1px;
  overflow:hidden; opacity:0}

button{font-family:var(--titol); font-weight:700; font-size:1rem; color:#fff;
  background:var(--blau); border:0; border-radius:10px; padding:14px 30px; cursor:pointer;
  transition:.15s}
button:hover:not(:disabled){background:#2f78e0}
button:disabled{opacity:.5; cursor:not-allowed}
button:focus-visible{outline:2px solid var(--blau-clar); outline-offset:3px}
.enviar{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:22px}
.enviar .nota{font-size:.85rem; color:var(--gris); margin:0}

.resum-errors{border:1px solid #e5484d; background:rgba(229,72,77,.09);
  border-radius:10px; padding:14px 18px; margin-bottom:20px; font-size:.92rem}
.resum-errors ul{margin:8px 0 0; padding-left:20px}
.resum-errors a{color:#ff8085}
[hidden]{display:none!important}

/* ---------- peu ---------- */
footer{border-top:1px solid var(--vora); padding:34px 0 46px; font-size:.86rem; color:var(--gris)}
footer p{margin:0 0 .5em}
footer a{color:var(--gris-clar)}

/* ---------- accessibilitat ---------- */
.salta{position:absolute; left:-9999px; background:var(--blau); color:#fff;
  padding:10px 18px; border-radius:0 0 8px 0; z-index:100}
.salta:focus{left:0; top:0}
@media(prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto}}

/* ---------- peu, reordenat ----------
   Anava tot seguit en tres paragrafs i els enllacos legals quedaven arrenglerats
   un darrere l'altre sense respirar. Ara: marca i enllacos a dalt, i les dues notes
   a sota, separades. */
footer{padding-top:44px}
.peu-dalt{display:flex; flex-wrap:wrap; gap:32px 60px; align-items:flex-start;
  padding-bottom:26px; border-bottom:1px solid var(--vora)}
.peu-marca{margin:0; line-height:1.9}
.peu-marca strong{font-family:var(--titol); font-size:1.05rem}
.peu-marca span{color:var(--gris)}

.peu-enllacos{display:flex; flex-direction:column; gap:9px}
.peu-enllacos a{color:var(--gris-clar); text-decoration:none;
  border-bottom:1px solid transparent; width:fit-content}
.peu-enllacos a:hover{color:var(--blau-clar); border-bottom-color:var(--blau-clar)}
@media(min-width:760px){
  .peu-enllacos{display:grid; grid-template-columns:1fr 1fr; gap:10px 44px}
}

.peu-notes{display:grid; gap:14px 48px; margin-top:24px; font-size:.85rem}
.peu-notes p{margin:0; max-width:52ch}
@media(min-width:760px){.peu-notes{grid-template-columns:1fr 1fr}}