/*
Theme Name: StrategiCa
Theme URI: https://strategicasrl.com
Author: Strategica S.r.l.
Description: Tema su misura per StrategiCa - consulenza di direzione, controllo di gestione, organizzazione. Layout a mattonelle, palette pastello derivata dal logo.
Version: 1.1
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: strategica
*/

:root{
  --navy:#1F3864; --blu:#2E75B6; --azzurro:#7FA9D4;
  --p1:#EDF3FA; --p2:#DCE6F1; --p3:#F7FAFD;
  --verde:#5FB35F; --verde-p:#E6F2E0;
  --pesca:#FDEDE2; --lilla:#EDE9F6;
  --txt:#33415C; --grigio:#6B7A90; --linea:#E3EAF3;
  --ombra:0 2px 4px rgba(31,56,100,.04), 0 12px 32px rgba(31,56,100,.07);
  --ombra-hi:0 4px 8px rgba(31,56,100,.06), 0 20px 44px rgba(31,56,100,.12);
  --r:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:#fff; color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--blu); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1160px; margin:0 auto; padding:0 28px}

/* ---------- barra di accento ---------- */
.accent{height:6px; background:linear-gradient(90deg,var(--navy) 0%,var(--blu) 55%,var(--verde) 100%)}

/* ---------- header ---------- */
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--linea)}
.bar{display:flex; align-items:center; gap:28px; padding-top:14px; padding-bottom:14px; flex-wrap:wrap}
.logo{display:block; line-height:0}
.logo img{width:252px; height:auto; display:block}
nav{margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
nav button{
  font:inherit; font-size:14.5px; font-weight:600; letter-spacing:.02em;
  background:none; border:0; cursor:pointer; color:var(--navy);
  padding:9px 14px; border-radius:10px; transition:.18s;
}
nav button:hover{background:var(--p1)}
nav button.on{background:var(--p2); color:var(--navy)}
nav .riservata{
  background:var(--navy); color:#fff; padding:9px 18px; border-radius:999px;
}
nav .riservata:hover,nav .riservata.on{background:var(--blu); color:#fff}

/* ---------- tipografia ---------- */
h1{font-size:clamp(30px,4.4vw,50px); line-height:1.12; margin:0 0 18px; color:var(--navy); font-weight:800; letter-spacing:-.02em}
h1 .due{display:block; color:var(--blu)}
h2{font-size:clamp(24px,3vw,34px); line-height:1.2; margin:0 0 14px; color:var(--navy); font-weight:800; letter-spacing:-.015em}
h3{font-size:19px; margin:0 0 8px; color:var(--navy); font-weight:700}
.occhiello{
  font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blu); margin:0 0 14px;
}
.lead{font-size:19.5px; line-height:1.6; color:var(--txt); max-width:64ch}
.sub{color:var(--grigio); max-width:66ch}

/* ---------- sezioni ---------- */
.sez{display:none; animation:fade .35s ease}
.sez.on{display:block}
@keyframes fade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.blocco{padding:76px 0}
.blocco.tenue{background:var(--p3); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea)}
.hero{padding:90px 0 70px}
.hero .p{max-width:70ch}

/* ---------- bottoni ---------- */
.cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px}
.btn{
  display:inline-block; font-size:15.5px; font-weight:700; padding:13px 26px; border-radius:999px;
  border:1.5px solid transparent; cursor:pointer; font-family:inherit; transition:.18s; text-decoration:none;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn.pieno{background:var(--navy); color:#fff}
.btn.pieno:hover{background:var(--blu)}
.btn.vuoto{background:#fff; color:var(--navy); border-color:var(--p2)}
.btn.vuoto:hover{border-color:var(--azzurro); background:var(--p3)}
.btn.verde{background:var(--verde); color:#fff}

/* ---------- mattonelle ---------- */
.griglia{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.griglia.due{grid-template-columns:repeat(auto-fit,minmax(380px,1fr))}
.griglia.quattro{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.griglia.quattro{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.griglia.quattro{grid-template-columns:1fr}}
.tile{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  padding:30px 28px; box-shadow:var(--ombra); transition:.22s; position:relative; overflow:hidden;
}
.tile:hover{box-shadow:var(--ombra-hi); transform:translateY(-3px); border-color:var(--p2)}
.kicker{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--azzurro); margin-bottom:10px}
.tile p{margin:0; font-size:15.5px; color:var(--grigio); line-height:1.6}
.tile .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;font-size:21px}
.i1{background:var(--p2)} .i2{background:var(--verde-p)} .i3{background:var(--pesca)} .i4{background:var(--lilla)}
.tile.clic{cursor:pointer}
.tile .piu{margin-top:16px; font-size:14.5px; font-weight:700; color:var(--blu)}
.tile.pastel1{background:var(--p1); border-color:#D9E5F3}
.tile.pastel2{background:var(--verde-p); border-color:#D6E7CC}
.tile.pastel3{background:var(--pesca); border-color:#F6DECE}

/* ---------- fascia kpi ---------- */
.kpi{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); padding:30px 0; margin:14px 0 0}
.kpi div{text-align:center}
.kpi b{display:block; font-size:32px; color:var(--navy); font-weight:800; line-height:1.1; letter-spacing:-.02em}
.kpi span{font-size:13px; color:var(--grigio); letter-spacing:.03em}

/* ---------- liste ---------- */
ul.pulita{list-style:none; padding:0; margin:18px 0 0}
ul.pulita li{position:relative; padding-left:26px; margin-bottom:11px; font-size:16px}
ul.pulita li:before{content:""; position:absolute; left:0; top:9px; width:9px; height:9px; border-radius:3px; background:var(--azzurro)}

/* ---------- confronto ---------- */
.conf{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:22px; margin-top:26px}
.conf .box{border-radius:var(--r); padding:30px 28px; border:1px solid var(--linea); background:#fff; box-shadow:var(--ombra)}
.conf .box.a{background:var(--p1); border-color:#D9E5F3}
.conf .box.b{background:var(--verde-p); border-color:#D6E7CC}
.conf dl{margin:18px 0 0; font-size:15.5px}
.conf dt{font-weight:700; color:var(--navy); margin-top:12px; font-size:13px; letter-spacing:.06em; text-transform:uppercase}
.conf dd{margin:2px 0 0; color:var(--txt)}

/* ---------- ritratto ---------- */
.ritratto{display:grid; grid-template-columns:1fr 320px; gap:56px; align-items:center}
.foto{margin:0; position:relative; width:320px; justify-self:end}
.foto img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 22%;
  border-radius:var(--r); box-shadow:var(--ombra-hi); display:block}
.foto:before{content:""; position:absolute; inset:18px -16px -16px 18px; border-radius:22px;
  background:linear-gradient(150deg,var(--p2),var(--verde-p)); z-index:-1}
.foto figcaption{margin-top:16px; font-size:14px; font-weight:700; color:var(--navy); line-height:1.4}
.foto figcaption span{display:block; font-weight:500; font-size:12.5px; color:var(--grigio); letter-spacing:.02em; margin-top:2px}
@media(max-width:880px){.ritratto{grid-template-columns:1fr; gap:34px} .foto{width:260px; justify-self:start}}

/* ---------- teikos ---------- */
.teikos{display:flex; gap:28px; align-items:center; flex-wrap:wrap; background:linear-gradient(120deg,var(--p1),#fff); border:1px solid var(--linea); border-radius:var(--r); padding:34px 32px}
.teikos .t{flex:1 1 320px}

/* ---------- form ---------- */
.form{display:grid; gap:14px; max-width:520px}
.form label{font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--navy); margin-bottom:-6px}
.form input,.form textarea,.form select{
  font:inherit; font-size:16px; padding:13px 15px; border:1.5px solid var(--linea); border-radius:12px;
  background:#fff; color:var(--txt); width:100%;
}
.form input:focus,.form textarea:focus{outline:none; border-color:var(--azzurro); box-shadow:0 0 0 4px var(--p1)}
.form textarea{min-height:130px; resize:vertical}

/* ---------- contatti ---------- */
.contatti{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px}
.card-c{background:#fff; border:1px solid var(--linea); border-radius:var(--r); padding:28px; box-shadow:var(--ombra)}
.card-c .et{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--azzurro); margin-bottom:8px}
.card-c .val{font-size:17px; color:var(--navy); font-weight:600; word-break:break-word}

/* ---------- footer ---------- */
footer{background:var(--navy); color:#C9D6E8; padding:52px 0 30px; font-size:14.5px; margin-top:0}
footer a{color:#fff}
.fgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:34px; margin-bottom:34px}
footer h4{color:#fff; font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 12px}
footer ul{list-style:none; padding:0; margin:0}
footer li{margin-bottom:7px}
footer .btm{border-top:1px solid rgba(255,255,255,.15); padding-top:20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:#9FB3CE}
.payoff{font-style:italic; color:#9FB3CE}
.legale{border-top:1px solid rgba(255,255,255,.15); padding-top:18px; margin-bottom:18px; font-size:12.5px; color:#8FA6C4; letter-spacing:.01em}
footer .btm{border-top:0; padding-top:0}

/* ---------- area riservata ---------- */
.login{max-width:430px; margin:0 auto; background:#fff; border:1px solid var(--linea); border-radius:var(--r); padding:38px 34px; box-shadow:var(--ombra-hi)}
.nota{background:var(--p1); border-left:4px solid var(--blu); border-radius:0 12px 12px 0; padding:16px 20px; font-size:15px; color:var(--txt); margin-top:22px}
.badge{display:inline-block; background:var(--p2); color:var(--navy); font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px; letter-spacing:.05em; text-transform:uppercase}
.badge.g{background:var(--verde-p); color:#2F6B2F}
.badge.o{background:var(--pesca); color:#9A5B34}
@media(max-width:720px){
  .bar{gap:12px} .logo img{width:200px} nav{margin-left:0; width:100%}
  nav button{padding:8px 11px; font-size:13.5px}
  .blocco{padding:52px 0} .hero{padding:56px 0 44px}
}

/* ---------- adattamenti WordPress ---------- */
.sez{display:block}
.admin-bar header{top:32px}
@media(max-width:782px){.admin-bar header{top:46px}}
nav a{font:inherit; font-size:14.5px; font-weight:600; letter-spacing:.02em; color:var(--navy);
  padding:9px 14px; border-radius:10px; transition:.18s; text-decoration:none}
nav a:hover{background:var(--p1); text-decoration:none}
nav a.on{background:var(--p2)}
nav a.riservata{background:var(--navy); color:#fff; padding:9px 18px; border-radius:999px}
nav a.riservata:hover,nav a.riservata.on{background:var(--blu); color:#fff}
.avviso{border-radius:12px; padding:14px 18px; margin:0 0 18px; font-size:15.5px}
.avviso.ok{background:var(--verde-p); color:#2F6B2F; border:1px solid #D6E7CC}
.avviso.ko{background:var(--pesca); color:#9A5B34; border:1px solid #F6DECE}
.hp{position:absolute; left:-9999px}
.login form{display:grid; gap:14px}
.login label{font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--navy)}
.login input[type=text],.login input[type=password]{font:inherit; font-size:16px; padding:13px 15px;
  border:1.5px solid var(--linea); border-radius:12px; width:100%}
.login input[type=submit]{font-family:inherit; font-size:15.5px; font-weight:700; padding:13px 26px;
  border-radius:999px; border:0; background:var(--navy); color:#fff; cursor:pointer; justify-self:start}
.login .login-remember{font-size:14px; color:var(--grigio)}

/* ---------- icone, pulsanti contatto, mappa ---------- */
.ico-svg{vertical-align:middle; flex:none}
.ico-tondo{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; margin-bottom:16px}
.ico-tondo.blu{background:var(--p2); color:var(--navy)}
.ico-tondo.verde{background:#D7EBD0; color:#2F6B2F}
.cta-titolo{font-size:19px; line-height:1.3; margin:0 0 8px; color:var(--navy); font-weight:700}
.card-c .sub{font-size:15px; margin:0}
.card-c.verde{background:var(--verde-p); border-color:#D6E7CC}
.card-c{display:flex; flex-direction:column}
.card-c .btn{margin-top:auto}
.btn.largo{display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%; margin-top:20px}
.btn.wa{background:#25925B; color:#fff}
.btn.wa:hover{background:#1F7C4C}
.card-c .btn.largo{margin-top:auto}
.card-c .sub{margin-bottom:20px}

.et{display:flex; align-items:center; gap:6px}

.mappa{margin-top:14px; border-radius:14px; overflow:hidden; border:1px solid var(--linea); line-height:0; background:var(--p1)}
.mappa iframe{width:100%; height:190px; border:0; display:block; filter:saturate(.85)}

/* ---------- pulsanti nel footer ---------- */
.fbtn{display:grid; gap:10px}
.fb{display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:12px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff;
  text-decoration:none; transition:.18s; font-size:14.5px}
.fb:hover{background:rgba(255,255,255,.16); text-decoration:none}
.fb span{display:flex; flex-direction:column; line-height:1.3; font-weight:700}
.fb em{font-style:normal; font-weight:400; font-size:12.5px; color:#9FB3CE}

.foto figcaption .lkin{display:inline-flex; align-items:center; gap:7px; margin-top:10px; padding:6px 12px;
  border-radius:999px; background:var(--p1); border:1px solid #D9E5F3; color:#0A66C2;
  font-size:12.5px; font-weight:700; text-decoration:none; transition:.18s}
.foto figcaption .lkin span{display:inline; margin:0; font-size:12.5px; font-weight:700; color:#0A66C2; letter-spacing:0}
.foto figcaption .lkin:hover{background:#E3EEFA; border-color:#B9D4EE; text-decoration:none}

/* ---------- badge profili sotto la foto ---------- */
.foto figcaption .profili{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.foto figcaption .lkin{margin-top:0}
.lkin.teikos-badge{background:var(--verde-p); border-color:#D6E7CC; color:#2F6B2F}
.lkin.teikos-badge span{color:#2F6B2F}
.lkin.teikos-badge:hover{background:#DBEBD3; border-color:#C3DCB6}