Home

{source}
<section class="sr-hero" aria-label="Presentazione Psicoterapia Sistemico-Relazionale">
<div class="sr-hero__warm" aria-hidden="true"></div>

<div class="sr-hero__wrap">
<div class="sr-hero__grid">


<div class="sr-hero__card">
<p class="sr-hero__kicker">Psicoterapia sistemico-relazionale</p>

<h1 class="sr-hero__title">
Ritrovare equilibrio nelle relazioni, con uno sguardo sul sistema
</h1>

<p class="sr-hero__text">
La psicoterapia sistemico-relazionale permette di intervenire in situazioni di disagio
dell’individuo, della coppia e della famiglia, con uno sguardo che mette al centro
il sistema, ossia la rete di relazioni in cui è inserita la persona cosiddetta “malata”.
Questo permette di agire da subito sull’equilibrio delle relazioni, alleggerendo il paziente
e realizzando, in tempi non troppo lunghi, un relativo benessere.
</p>

<p class="sr-hero__text sr-hero__text--small">
La stessa ottica si presta molto agevolmente anche a gestire i gruppi in attività di formazione.
</p>

<div class="sr-hero__actions">
<a class="sr-btn sr-btn--primary" href="/./contattami.html">Prenota un colloquio</a>
<a class="sr-btn sr-btn--ghost" href="/./di-cosa-mi-occupo.html">Scopri i percorsi</a>
</div>

<div class="sr-hero__tags" aria-label="Aree di intervento">
<span class="sr-tag">Individuale</span>
<span class="sr-tag">Coppia</span>
<span class="sr-tag">Famiglia</span>
<span class="sr-tag">Formazione</span>
</div>
</div>


<figure class="sr-hero__media" aria-label="Immagine di accoglienza">
<div class="sr-hero__img" role="img" aria-label="Immagine psicoterapia"></div>
<figcaption class="sr-hero__caption">
Uno spazio sicuro per comprendere, riorganizzare, ripartire.
</figcaption>
</figure>

</div>
</div>
</section>

<style>
:root{
--sr-white: #ffffff;
--sr-ink: #1b1b1b;
--sr-ink-soft: rgba(27,27,27,.78);

--sr-warm-1: #ffb36b;
--sr-warm-2: #ff7a2f;
--sr-warm-3: #d4551f;

--sr-card: rgba(255,255,255,.86);
--sr-border: rgba(255, 255, 255, .55);
--sr-shadow: 0 20px 55px rgba(0,0,0,.20);

--sr-radius: 18px;
--sr-max: 1180px;
}

/* SEZIONE */
.sr-hero{
position: relative;
overflow: hidden;
color: var(--sr-ink);
background: #fff;
}

/* Sfondo caldo (MA NON copre l’immagine perché non è sopra la figure) */
.sr-hero__warm{
position:absolute;
inset:0;
background:
radial-gradient(70% 60% at 15% 25%, rgba(255,179,107,.55) 0%, rgba(255,179,107,0) 60%),
radial-gradient(70% 60% at 80% 30%, rgba(255,122,47,.35) 0%, rgba(255,122,47,0) 60%),
linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,247,240,1) 45%, rgba(255,255,255,1) 100%);
pointer-events:none;
}

.sr-hero__wrap{
position: relative;
max-width: var(--sr-max);
margin: 0 auto;
padding: clamp(22px, 4vw, 56px);
}

/* Layout: 2 colonne desktop, 1 colonna mobile (box sopra, immagine sotto) */
.sr-hero__grid{
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: clamp(16px, 2.4vw, 28px);
align-items: stretch;
}

/* CARD */
.sr-hero__card{
background: var(--sr-card);
border: 1px solid var(--sr-border);
border-radius: var(--sr-radius);
box-shadow: var(--sr-shadow);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: clamp(18px, 3.2vw, 34px);
position: relative;
}

/* bordo luminoso caldo */
.sr-hero__card::before{
content:"";
position:absolute;
inset:-1px;
border-radius: calc(var(--sr-radius) + 1px);
padding: 1px;
background: linear-gradient(135deg, rgba(255,179,107,.55), rgba(255,122,47,.55), rgba(212,85,31,.30));
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events:none;
}

.sr-hero__kicker{
margin: 0 0 10px 0;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
font-size: 12px;
color: rgba(27,27,27,.65);
}

.sr-hero__title{
margin: 0 0 14px 0;
font-size: clamp(26px, 3.1vw, 42px);
line-height: 1.06;
color: var(--sr-ink);
}

.sr-hero__text{
margin: 0 0 12px 0;
font-size: 16px;
line-height: 1.65;
color: var(--sr-ink-soft);
}

.sr-hero__text--small{
font-size: 14px;
color: rgba(27,27,27,.72);
}

/* BOTTONI */
.sr-hero__actions{
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 18px;
}

.sr-btn{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 16px;
border-radius: 12px;
text-decoration: none;
font-weight: 700;
border: 1px solid transparent;
transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
user-select: none;
}

.sr-btn:active{ transform: translateY(1px); }

.sr-btn--primary{
background: linear-gradient(135deg, var(--sr-warm-2), var(--sr-warm-3));
color: var(--sr-white);
box-shadow: 0 12px 30px rgba(255,122,47,.25);
}

.sr-btn--primary:hover{
transform: translateY(-1px);
box-shadow: 0 16px 36px rgba(255,122,47,.30);
}

.sr-btn--ghost{
background: rgba(255,255,255,.75);
color: var(--sr-ink);
border-color: rgba(0,0,0,.08);
}

.sr-btn--ghost:hover{
background: rgba(255,255,255,.92);
transform: translateY(-1px);
}

/* TAGS */
.sr-hero__tags{
display:flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}

.sr-tag{
font-size: 12px;
font-weight: 700;
padding: 7px 10px;
border-radius: 999px;
background: rgba(255, 122, 47, .10);
border: 1px solid rgba(255, 122, 47, .20);
color: rgba(27,27,27,.78);
}

/* MEDIA (immagine visibile, incorniciata) */
.sr-hero__media{
margin: 0;
display: grid;
grid-template-rows: 1fr auto;
gap: 10px;
}

.sr-hero__img{
border-radius: var(--sr-radius);
border: 1px solid rgba(255, 122, 47, .22);
box-shadow: 0 18px 46px rgba(0,0,0,.22);
overflow: hidden;
min-height: clamp(320px, 44vh, 520px);
background-image: url("/./home/immagine.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}

/* leggero overlay per leggibilità e stile, ma NON la uccide */
.sr-hero__img::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(60% 60% at 30% 30%, rgba(255,179,107,.16) 0%, rgba(255,179,107,0) 60%),
linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.18) 100%);
pointer-events:none;
}

.sr-hero__caption{
font-size: 13px;
color: rgba(27,27,27,.66);
padding: 0 2px;
}

/* MOBILE: verticale (box sopra, immagine sotto) */
@media (max-width: 860px){
.sr-hero__grid{
grid-template-columns: 1fr;
}
.sr-hero__img{
min-height: 320px;
}
}
</style>{/source}