/* TutumSec · Landing del diagnòstic de ciberseguretat
   Brandbook: Cinder #050915, Ultramarine #3886F4, Sky Blue #5EB9F0, Ice White #EFF9FF.
   Titulars Raleway, cos Poppins, servides des d'aquí (cap tipografia de tercers).
   El blau dels botons és més fosc que l'Ultramarine: el blanc sobre #3886F4 dona 3,6:1
   i no arriba a l'AA; sobre #1F63E0 dona 5,4:1. */

@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; --cinder-3:#121c36;
  --ultramar:#3886F4; --cel:#5EB9F0; --gel:#EFF9FF; --blanc:#fff;
  --boto:#1F63E0; --boto-fosc:#1A56CC;
  --text:#1b2333; --text-suau:#4a5568; --vora:#d9e6f5; --vora-fosca:#1f2b47;
  --gris-clar:#c9d3e2;
  --titol:Raleway,"Helvetica Neue",Arial,sans-serif;
  --cos:Poppins,"Helvetica Neue",Arial,sans-serif;
  --ample:1140px; --radi:16px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important}}
body{margin:0; background:var(--blanc); color:var(--text); font-family:var(--cos);
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3{font-family:var(--titol); font-weight:700; line-height:1.2; margin:0 0 .6em; color:var(--cinder)}
h1{font-size:clamp(1.95rem,6.4vw,3.2rem); letter-spacing:-.015em}
h2{font-size:clamp(1.5rem,4.2vw,2.2rem); letter-spacing:-.01em}
h3{font-size:1.08rem}
p{margin:0 0 1em}
a{color:var(--boto)}
img{max-width:100%; height:auto}
.embolcall{max-width:var(--ample); margin:0 auto; padding:0 16px}
@media (min-width:600px){.embolcall{padding:0 24px}}
.estret{max-width:820px}
.centrat{text-align:center; margin:32px 0 0}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
:focus-visible{outline:3px solid var(--boto); outline-offset:3px; border-radius:6px}
/* Sobre fons fosc, el blau clar (sobre blanc no arriba al 3:1 que demana un focus). */
:is(.hero,.capcalera,.franja-bcc,.mostra-caixa,.bcc-caixa,.cta-final,.peu,.galetes) :focus-visible{outline-color:var(--cel)}

.salta{position:absolute; left:16px; top:-60px; z-index:200; background:var(--blanc); color:var(--cinder);
  padding:10px 16px; border-radius:8px; font-weight:600}
.salta:focus{top:12px}

/* ---------- botons ---------- */
.boto{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--cos); font-weight:600; font-size:1rem; line-height:1.2; text-decoration:none;
  color:var(--blanc); background:linear-gradient(90deg,var(--boto-fosc),var(--boto));
  border:0; border-radius:12px; padding:14px 22px; cursor:pointer; min-height:48px;
  box-shadow:0 8px 24px -10px rgba(31,99,224,.65); transition:transform .15s, box-shadow .15s, background .15s}
.boto:hover{background:var(--boto-fosc); transform:translateY(-1px); box-shadow:0 12px 28px -10px rgba(31,99,224,.75)}
.boto-gran{font-size:1.06rem; padding:16px 26px; width:100%}
@media (min-width:600px){.boto-gran{width:auto}}
.boto-petit{padding:10px 16px; min-height:44px; font-size:.92rem; box-shadow:none}
.boto-secundari{background:var(--gel); color:var(--cinder); box-shadow:none; border:1px solid var(--vora)}
.boto-secundari:hover{background:#dfeefb; color:var(--cinder)}
.icona-fletxa{width:18px; height:18px; flex:none}
.enllac{background:none; border:0; padding:0; font:inherit; color:inherit; text-decoration:underline; cursor:pointer}

.etiqueta{display:inline-block; font-family:var(--titol); font-size:.76rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--cel);
  border:1px solid rgba(94,185,240,.4); border-radius:999px; padding:6px 14px; margin:0 0 20px;
  background:rgba(5,9,21,.35)}
@media (max-width:599px){.etiqueta{font-size:.68rem; letter-spacing:.08em; padding:5px 12px; margin-bottom:16px}}

/* ---------- franja BCC ---------- */
.franja-bcc{background:var(--cinder-2); color:var(--gris-clar); border-bottom:1px solid var(--vora-fosca); font-size:.88rem}
.franja-bcc .embolcall{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding-top:10px; padding-bottom:10px}
.franja-etiqueta{background:var(--boto); color:var(--blanc); font-weight:600; font-size:.78rem;
  border-radius:999px; padding:4px 12px; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap}
.franja-text{margin:0; flex:1 1 220px}
/* En mòbil, una sola línia (etiqueta + ubicació): res ha d'empènyer l'H1 i la CTA. */
@media (max-width:599px){
  .franja-bcc .embolcall{flex-wrap:nowrap; justify-content:space-between; padding-top:6px; padding-bottom:6px}
  .franja-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
}
.franja-text strong{color:var(--blanc); font-weight:600}
.franja-cos{display:none}
@media (min-width:1100px){.franja-cos{display:inline}}
.franja-boto{background:none; border:0; color:var(--cel); font:inherit; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; padding:8px 0; min-height:40px; white-space:nowrap}
.franja-boto:hover{color:var(--blanc)}

/* ---------- capçalera ---------- */
.capcalera{position:sticky; top:0; z-index:50; background:rgba(5,9,21,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--vora-fosca)}
.capcalera .embolcall{display:flex; align-items:center; gap:12px; height:64px}
.logo{display:block; margin-right:auto; line-height:0}
.logo img{height:30px; width:auto}
.idiomes{display:flex; align-items:center; gap:2px; font-size:.82rem; font-weight:600; letter-spacing:.05em}
.idiomes a,.idiomes span[aria-current]{padding:8px 9px; border-radius:6px; text-decoration:none; line-height:1}
.idiomes a{color:var(--gris-clar)}
.idiomes a:hover{color:var(--blanc); background:var(--vora-fosca)}
.idiomes span[aria-current]{color:var(--cinder); background:var(--cel)}

@media (max-width:420px){.capcalera .boto-petit{padding:10px 12px}}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--cinder); color:var(--gris-clar); overflow:hidden;
  padding:44px 0 52px}
.hero::before{content:""; position:absolute; inset:-30% 35% auto -20%; height:620px;
  background:radial-gradient(closest-side,rgba(56,134,244,.24),transparent 70%); pointer-events:none}
.hero .embolcall{position:relative}
.hero h1{color:var(--blanc); max-width:16ch}
.hero-text{max-width:620px}
.entradeta{font-size:1.06rem; margin-bottom:28px}
.micro{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 0; font-size:.86rem; color:#aab6c9}
.micro li:not(:last-child)::after{content:"·"; margin:0 10px; color:var(--cel)}
/* Imatge decorativa només a partir de 900px: en mòbil res ha d'empènyer l'H1 i la CTA. */
.hero-visual{display:none}
@media (min-width:900px){
  .hero{padding:96px 0 104px}
  .hero-visual{display:block; position:absolute; top:0; right:0; bottom:0; width:46%;
    background-image:url(img/hero.webp);
    background-image:image-set(url(img/hero.avif) type("image/avif"), url(img/hero.webp) type("image/webp"));
    background-size:cover; background-position:center 40%;
    /* Fos amb màscara, no amb un degradat de color: així s'integra amb la llum de
       fons del hero i no queda cap vora visible. */
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 35%,#000 70%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 35%,#000 70%)}
}

/* ---------- seccions ---------- */
.seccio{padding:64px 0}
@media (min-width:900px){.seccio{padding:88px 0}}
.intro{font-size:1.04rem; color:var(--text-suau); max-width:62ch}
.dues-columnes{display:grid; gap:28px}
@media (min-width:900px){.dues-columnes{grid-template-columns:1fr 1fr; gap:64px; align-items:start}}

.llista-check{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.llista-check li{display:flex; gap:14px; align-items:flex-start; background:var(--gel);
  border:1px solid var(--vora); border-radius:var(--radi); padding:16px 18px}
.llista-check .icona{width:22px; height:22px; flex:none; color:var(--boto); margin-top:2px}

/* ---------- BCC interior ---------- */
.bcc-interior{padding:0 0 8px}
.bcc-caixa{position:relative; overflow:hidden; display:grid; gap:24px; align-items:center;
  background:radial-gradient(120% 140% at 0% 0%,#10224a 0%,var(--cinder) 60%);
  border:1px solid #1f3f7a; border-radius:22px; padding:32px 20px; color:var(--gris-clar)}
.bcc-caixa::after{content:""; position:absolute; right:-120px; top:-120px; width:360px; height:360px; border-radius:50%;
  border:2px solid rgba(94,185,240,.25); box-shadow:0 0 0 40px rgba(56,134,244,.05),0 0 0 80px rgba(56,134,244,.04); pointer-events:none}
.bcc-caixa h2{color:var(--blanc)}
.bcc-cos,.bcc-on{position:relative; z-index:1}
.bcc-on{background:var(--gel); color:var(--cinder); border-radius:var(--radi); padding:20px 22px}
.bcc-on-titol{display:flex; align-items:center; gap:8px; font-family:var(--titol); font-weight:700; font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--boto); margin-bottom:10px}
.bcc-on-titol .icona{width:18px; height:18px}
.bcc-on ul{list-style:none; margin:0; padding:0}
.bcc-on li:first-child{font-family:var(--titol); font-weight:700; font-size:1.15rem}
.bcc-on li:last-child{color:var(--boto); font-weight:600}
@media (min-width:900px){.bcc-caixa{grid-template-columns:1.6fr 1fr; padding:44px 48px; gap:48px}}

/* ---------- mostra d'informe ---------- */
.mostra{background:var(--gel)}
.mostra-caixa{display:grid; gap:32px; background:var(--cinder); color:var(--gris-clar);
  border-radius:24px; padding:32px 20px}
.mostra-caixa h2{color:var(--blanc)}
@media (min-width:900px){.mostra-caixa{grid-template-columns:1fr 1fr; gap:56px; padding:56px; align-items:center}}
.apartats{background:var(--cinder-3); border:1px solid var(--vora-fosca); border-radius:var(--radi); padding:18px 20px; margin-top:8px}
.apartats-titol{font-family:var(--titol); font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cel); margin-bottom:8px}
.apartats ul{list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:.94rem}
.apartats li{display:flex; gap:10px; align-items:center}
.apartats .icona{width:16px; height:16px; color:var(--cel); flex:none}
.mostra-figura{margin:0}
.mostra-figura figcaption{font-size:.82rem; color:#9aa7bb; margin-top:12px}
.document{background:#dbe7f6; border-radius:14px; padding:10px; box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.document-cap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; background:#0f1a33; color:var(--blanc);
  border-radius:10px 10px 0 0; padding:14px 18px; font-size:.84rem}
.document-exemple{color:var(--cel); font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase}
.document-cos{background:var(--blanc); color:var(--cinder); border-radius:0 0 10px 10px; padding:18px 18px 22px}
.document-titol{font-family:var(--titol); font-weight:700; font-size:.92rem; color:var(--boto); margin-bottom:10px}
.document-h{font-family:var(--titol); font-weight:700; font-size:.88rem; margin:14px 0 8px}
.linia{display:block; height:7px; border-radius:4px; background:#e5edf7; margin:6px 0}
.linia.curta{width:62%}
.document-arees,.document-sev{list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:.78rem}
.document-arees li{display:grid; grid-template-columns:96px 1fr; align-items:center; gap:10px}
.barra{height:8px; border-radius:4px; background:#e5edf7; overflow:hidden}
.barra i{display:block; height:100%; background:linear-gradient(90deg,var(--ultramar),var(--cel))}
.document-sev li{display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px}
.document-sev .linia{margin:0}
.sev{font-size:.68rem; font-weight:600; border-radius:999px; padding:2px 9px; min-width:62px; text-align:center}
.sev-0{background:#fde2e1; color:#9b1c1c}
.sev-1{background:#fdf0d5; color:#8a5a00}
.sev-2{background:#e2f0fd; color:#1A56CC}

/* ---------- procés ---------- */
.passos{list-style:none; counter-reset:pas; margin:28px 0 0; padding:0; display:grid; gap:16px}
@media (min-width:700px){.passos{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.passos{grid-template-columns:repeat(4,1fr)}}
.passos li{counter-increment:pas; border:1px solid var(--vora); border-radius:var(--radi); padding:22px 20px; background:var(--blanc)}
.passos li::before{content:counter(pas); display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--gel); color:var(--boto); font-family:var(--titol); font-weight:700; margin-bottom:14px; border:1px solid var(--vora)}
.passos p{color:var(--text-suau); font-size:.95rem; margin:0}

/* ---------- abast ---------- */
.abast{background:var(--gel)}
.xips{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.xips li{background:var(--blanc); border:1px solid var(--vora); border-radius:999px; padding:9px 16px; font-size:.93rem; color:var(--cinder)}

/* ---------- per a qui ---------- */
.perfils{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:16px}
@media (min-width:700px){.perfils{grid-template-columns:1fr 1fr}}
.perfils li{border-radius:var(--radi); padding:24px 22px; background:linear-gradient(160deg,var(--gel),var(--blanc)); border:1px solid var(--vora)}
.perfils p{margin:0; color:var(--text-suau)}

/* ---------- FAQ ---------- */
.faq{background:var(--gel)}
.faq details{background:var(--blanc); border:1px solid var(--vora); border-radius:14px; margin:0 0 10px}
.faq summary{list-style:none; cursor:pointer; padding:18px 52px 18px 20px; position:relative;
  font-family:var(--titol); font-weight:700; color:var(--cinder); min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:22px; top:50%; width:10px; height:10px; margin-top:-7px;
  border-right:2px solid var(--boto); border-bottom:2px solid var(--boto); transform:rotate(45deg); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-2px}
.faq details p{padding:0 20px 18px; margin:0; color:var(--text-suau)}

/* ---------- CTA final ---------- */
.cta-final{background:radial-gradient(120% 160% at 100% 0%,#14327a 0%,var(--cinder) 62%); color:var(--gris-clar);
  text-align:center; padding:72px 0}
.cta-final h2{color:var(--blanc); max-width:26ch; margin-left:auto; margin-right:auto}
.cta-final p{font-size:1.06rem; margin-bottom:28px}

/* ---------- qui som ---------- */
.serveis{list-style:none; margin:32px 0 0; padding:0; display:grid; gap:16px}
@media (min-width:640px){.serveis{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.serveis{grid-template-columns:repeat(3,1fr)}}
.serveis li{border:1px solid var(--vora); border-radius:var(--radi); padding:22px 20px; background:var(--blanc)}
.servei-icona{display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--gel); color:var(--boto); margin-bottom:14px}
.servei-icona .icona{width:22px; height:22px}
.serveis p{margin:0; color:var(--text-suau); font-size:.93rem}

/* ---------- peu ---------- */
.peu{background:var(--cinder); color:#aab6c9; padding:40px 0 calc(40px + env(safe-area-inset-bottom)); font-size:.88rem}
.peu .embolcall{display:grid; gap:18px}
.peu img{height:28px; width:auto}
.peu-links{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px}
.peu-links a,.peu-links .enllac{color:#c9d3e2; text-decoration:none; display:inline-block; padding:6px 0}
.peu-links a:hover,.peu-links .enllac:hover{color:var(--blanc); text-decoration:underline}
.peu-drets{margin:0}

/* ---------- galetes ---------- */
.galetes{position:fixed; left:12px; right:12px; bottom:12px; z-index:100; max-width:640px; margin:0 auto;
  background:var(--cinder-2); color:var(--gris-clar); border:1px solid var(--vora-fosca); border-radius:16px;
  padding:16px 18px; box-shadow:0 20px 40px -10px rgba(0,0,0,.5); font-size:.9rem}
.galetes[hidden]{display:none}
.galetes p{margin:0 0 12px}
@media (max-width:599px){.galetes{left:8px; right:8px; bottom:8px; padding:12px 14px; font-size:.82rem; line-height:1.5}
  .galetes p{margin-bottom:10px}}
.galetes a{color:var(--cel)}
.galetes-botons{display:flex; gap:10px; justify-content:flex-end}
.galetes-botons .boto{flex:1 1 0}
@media (min-width:600px){.galetes-botons .boto{flex:0 0 auto; min-width:120px}}

/* ---------- modal ubicació ---------- */
dialog:not([open]){display:none}
.modal{border:0; border-radius:20px; padding:0; max-width:min(520px,calc(100vw - 32px)); width:100%;
  color:var(--text); box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.modal::backdrop{background:rgba(5,9,21,.72)}
.modal-cos{padding:28px 24px 24px}
.modal h2{font-size:1.4rem}
.modal-adreca{display:flex; gap:10px; align-items:flex-start; background:var(--gel); border-radius:12px; padding:14px 16px; font-weight:600; color:var(--cinder)}
.modal-adreca .icona{width:22px; height:22px; color:var(--boto); flex:none; margin-top:1px}
.modal .boto{width:100%}
.modal-tancar{display:block; width:100%; margin-top:8px; background:none; border:1px solid var(--vora); border-radius:12px;
  padding:12px; font:inherit; font-weight:600; color:var(--cinder); cursor:pointer; min-height:48px}
.modal-tancar:hover{background:var(--gel)}