:root {
    --navy:#062c4e;
    --deep:#031c32;
    --blue:#0c527c;
    --orange:#f58b2b;
    --cream:#f4efe6;
    --paper:#fbfaf7;
    --ink:#102436;
    --muted:#607181;
    --line:rgba(8,44,75,.14)
}


* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"DM Sans",Arial,sans-serif;
    -webkit-font-smoothing:antialiased
}

a {
    color:inherit
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}

.site-header {
    min-height:86px;
    display:flex;
    align-items:center;
    gap:30px;
    padding:12px max(5vw,24px);
    background:rgba(251,250,247,.95);
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:10;
    backdrop-filter:blur(12px)
}

.brand {
    display:flex;
    align-items:center;
    gap:12px;
    margin-right:auto;
    text-decoration:none
}

.brand img {
    width:52px;
    height:52px;
    object-fit:contain
}

.brand span {
    display:grid;
    line-height:1.15
}

.brand strong {
    font-family:"Playfair Display",Georgia,serif;
    color:var(--navy);
    font-size:21px
}

.brand small {
    margin-top:6px;
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase
}

.site-header nav a {
    font-size:14px;
    font-weight:700;
    text-decoration-color:var(--orange);
    text-underline-offset:5px
}

.language-picker select {
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    color:var(--navy);
    padding:9px 13px;
    font-weight:700
}

.hero {
    min-height:570px;
    padding:clamp(70px,10vw,140px) max(7vw,30px);
    display:grid;
    grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);
    gap:70px;
    align-items:end;
    background:radial-gradient(circle at 85% 20%,rgba(12,82,124,.7),transparent 35%),linear-gradient(135deg,var(--deep),var(--navy));
    color:#fff;
    position:relative;
    overflow:hidden
}

.hero:after {
    content:"";
    position:absolute;
    width:290px;
    height:290px;
    border:2px solid rgba(245,139,43,.6);
    border-radius:50%;
    right:-100px;
    bottom:-170px
}

.eyebrow {
    margin:0 0 18px;
    color:var(--orange);
    font-size:12px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase
}

.hero h1,.section-heading h2 {
    margin:0;
    font-family:"Playfair Display",Georgia,serif;
    font-weight:500;
    line-height:1.02
}

.hero h1 {
    font-size:clamp(54px,7vw,100px);
    max-width:850px
}

.hero-lead {
    position:relative;
    z-index:1;
    margin:0 0 10px;
    color:#dbe5eb;
    font-size:clamp(18px,2vw,24px);
    line-height:1.55
}

.contacts {
    padding:clamp(75px,10vw,130px) max(6vw,25px)
}

.section-heading {
    max-width:900px;
    margin:0 auto 55px;
    text-align:center
}

.section-heading h2 {
    font-size:clamp(42px,5vw,72px);
    color:var(--navy)
}

.contact-grid {
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    align-items:stretch;
    gap:24px
}

.contact-card {
    min-height:480px;
    padding:clamp(30px,4vw,55px);
    border:1px solid var(--line);
    border-radius:26px;
    box-shadow:0 18px 45px rgba(6,44,78,.08);
    display:flex;
    flex-direction:column;
    background:#fff
}

.contact-card.venanzio {
    background:var(--navy);
    color:#fff
}

.number {
    align-self:flex-start;
    padding-bottom:8px;
    border-bottom:2px solid var(--orange);
    color:var(--orange);
    font-size:12px;
    font-weight:700
}

.role {
    margin:70px 0 10px;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase
}

.venanzio .role {
    color:#b8cbd8
}

.contact-card h3 {
    margin:0 0 30px;
    font-family:"Playfair Display",Georgia,serif;
    font-size:clamp(34px,4vw,52px);
    font-weight:500;
    line-height:1.08
}

.contact-card ul {
    list-style:none;
    margin:auto 0 0;
    padding:0
}

.contact-card li {
    display:grid;
    grid-template-columns:100px minmax(0,1fr);
    gap:18px;
    padding:13px 0;
    border-top:1px solid var(--line)
}

.venanzio li {
    border-color:rgba(255,255,255,.16)
}

.contact-card li>span {
    color:var(--muted);
    font-size:11px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase
}

.venanzio li>span {
    color:#a9c0ce
}

.contact-card a,.contact-card strong {
    font-weight:600;
    overflow-wrap:anywhere
}

.contact-card a {
    text-decoration-color:var(--orange);
    text-underline-offset:4px
}

/* =========================================================
   SCHEDA 03 — PSICOLOGIA E NEUROPSICOLOGIA
   ========================================================= */

.contact-card.psicologia {
    --psy-purple: #9553a1;
    --psy-purple-dark: #743d80;
    --psy-purple-light: #f6eef8;

    position: relative;
    overflow: hidden;

    background: #ffffff;
    color: var(--ink);

    border: 3px solid var(--psy-purple);
    border-radius: 26px;

    box-shadow:
        0 18px 45px rgba(149, 83, 161, 0.16);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.contact-card.psicologia:hover {
    transform: translateY(-4px);

    box-shadow:
        0 24px 55px rgba(149, 83, 161, 0.24);
}

/* Piccolo richiamo grafico viola nell'angolo */
.contact-card.psicologia::after {
    content: "";
    position: absolute;
    top: -85px;
    right: -85px;

    width: 190px;
    height: 190px;

    border: 22px solid rgba(149, 83, 161, 0.08);
    border-radius: 50%;

    pointer-events: none;
}

/* Numero 03 */
.contact-card.psicologia .number {
    color: var(--psy-purple);
    border-bottom-color: var(--psy-purple);
}

/* Logo della psicologia */
.psychology-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 112px;
    height: 112px;

    margin: 42px 0 24px;

    background: var(--psy-purple-light);
    border: 1px solid rgba(149, 83, 161, 0.22);
    border-radius: 50%;
}

.psychology-logo {
    display: block;

    width: 224px;
    height: px;

    object-fit: contain;
}

/* Titolo della specializzazione */
.contact-card.psicologia .role {
    margin: 0 0 12px;

    color: var(--psy-purple);

    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Nome */
.contact-card.psicologia h3 {
    color: var(--navy);
}

/* Descrizione dell'attività indipendente */
.psychology-independent {
    margin: 0 0 24px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.55;
}

/* Riquadro Spagna */
.psychology-spain {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: auto;
    padding: 14px 16px;

    background: var(--psy-purple-light);
    border-left: 4px solid var(--psy-purple);
    border-radius: 10px;

    color: var(--navy);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.psychology-spain .flag {
    flex: 0 0 auto;
    font-size: 22px;
}

/* Pulsante */
.contact-card.psicologia .profile-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;
    margin-top: 22px;
    padding: 14px 20px;

    background: var(--psy-purple);
    color: #ffffff;

    border: 2px solid var(--psy-purple);
    border-radius: 999px;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;

    box-shadow:
        0 10px 24px rgba(149, 83, 161, 0.22);

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.contact-card.psicologia .profile-link:hover,
.contact-card.psicologia .profile-link:focus-visible {
    background: var(--psy-purple-dark);
    border-color: var(--psy-purple-dark);

    transform: translateY(-2px);

    box-shadow:
        0 14px 30px rgba(116, 61, 128, 0.30);
}

.contact-card.psicologia .profile-link:focus-visible {
    outline: 3px solid rgba(149, 83, 161, 0.30);
    outline-offset: 4px;
}

/* Smartphone */
@media (max-width: 540px) {

    .psychology-logo-wrap {
        width: 94px;
        height: 94px;
        margin-top: 34px;
    }

    .psychology-logo {
        width: 60px;
        height: 60px;
    }

    .contact-card.psicologia .profile-link {
        padding: 13px 16px;
    }

}

.profile-link {
    display:inline-block;
    margin-top:34px
}

.closing {
    padding:70px max(7vw,30px);
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:35px;
    background:var(--cream)
}

.closing p {
    max-width:800px;
    margin:0;
    font-family:"Playfair Display",Georgia,serif;
    color:var(--navy);
    font-size:clamp(32px,4vw,58px);
    line-height:1.08
}

.closing a {
    font-weight:700;
    text-decoration-color:var(--orange);
    text-underline-offset:5px
}

footer {
    padding:38px max(7vw,30px);
    display:flex;
    justify-content:space-between;
    gap:20px;
    background:var(--deep);
    color:#fff
}

footer strong {
    font-family:"Playfair Display",Georgia,serif
}


@media(max-width:820px) {
    .site-header nav {
        display:none
    }

    .hero,.contact-grid {
        grid-template-columns:1fr
    }

    .hero {
        min-height:auto;
        gap:35px
    }

    .contact-card {
        min-height:auto
    }

    .closing {
        align-items:flex-start;
        flex-direction:column
    }

    
}


@media(max-width:540px) {
    .site-header {
        padding:10px 16px
    }

    .brand img {
        width:44px;
        height:44px
    }

    .brand small {
        font-size:8px
    }

    .hero,.contacts,.closing {
        padding-left:21px;
        padding-right:21px
    }

    .hero h1 {
        font-size:48px
    }

    .contact-card {
        padding:27px 22px
    }

    .contact-card li {
        grid-template-columns:1fr;
        gap:3px
    }

    .role {
        margin-top:48px
    }

    footer {
        padding:30px 21px;
        flex-direction:column
    }

    
}