/* Le variabili stanno su :root e non su .italcura-site/.ic-footer: le pagine
   interne (chi-siamo, contatti, ...) non hanno quei contenitori, quindi non
   ricevevano ne' la palette ne' il font e uscivano col grigioverde #666 e il
   font di sistema. Su :root valgono per tutto il sito. */

/* Font del brand: Inter, ospitato sul sito. Nessuna richiesta a Google e nessun
   dato inviato a terzi. Il file e' quello variabile: un solo woff2 copre tutti
   i pesi da 100 a 900, quindi non serve scaricarne uno per peso.
   Fino a ieri qui c'era "Plus Jakarta Sans", che non caricava nessuno: non
   esisteva nessun @font-face, quindi il browser ripiegava sul font di sistema
   e il nome nel CSS era puramente decorativo. Ora il font c'e' davvero. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --ic-primary: #26715c;
    --ic-primary-strong: #006953;
    --ic-primary-soft: #dcf3e7;
    --ic-primary-pale: #e7fff2;
    --ic-sage: #8cb8ad;
    --ic-peach: #f7d0c3;
    --ic-clay: #a27a6e;
    /* piu' scuro di --ic-clay: quello serve anche da sfondo (la striscia della
       card), come testo su bianco stava a 3,79:1 */
    --ic-clay-strong: #8a6659;
    --ic-ink: #0b1f18;
    --ic-forest: #1a2e26;
    --ic-text: #435b53;
    --ic-muted: #526b62;
    --ic-border: #e6ece9;
    --ic-cream: #fafaf9;
    --ic-white: #ffffff;
    --ic-shadow-sm: 0 4px 20px -2px rgba(26, 46, 38, 0.05);
    --ic-shadow-md: 0 18px 48px -12px rgba(26, 46, 38, 0.14);
    --ic-shadow-lg: 0 30px 80px -18px rgba(26, 46, 38, 0.22);
    --ic-radius-sm: 12px;
    --ic-radius-md: 18px;
    --ic-radius-lg: 24px;
    --ic-radius-xl: 32px;
}

html {
    /* La navbar NON e' fissa: scorre via con la pagina (verificato: a scroll
       600 la sua y e' -600, a 3000 e' -3000). Quindi non c'e' niente da
       compensare, e i 126px di prima lasciavano 126px di vuoto sopra il
       bersaglio quando si clicca un'ancora. Qui basta un po' d'aria: i 112px di
       padding delle sezioni fanno il resto. */
    scroll-padding-top: 32px;

    /* Scorrimento fluido quando si clicca un'ancora. L'eccezione per chi ha
       chiesto meno animazioni c'e' piu' sotto, in prefers-reduced-motion:
       quella regola esisteva gia' prima di questa, segno che il fluido era
       previsto e la riga base era andata persa. */
    scroll-behavior: smooth;
}

body {
    background: #fafaf9;
    /* Il font e il colore del testo valgono per TUTTO il sito, non solo per la
       home: prima erano solo su .italcura-site, quindi navbar, breadcrumb e
       pagine interne usavano il font di sistema e il grigioverde #666666. */
    color: var(--ic-text);
    font-family: "Inter", "Segoe UI", sans-serif;
}

.italcura-site,
.italcura-navbar,
.ic-footer {
    color: var(--ic-text);
    font-family: "Inter", "Segoe UI", sans-serif;
}

.italcura-site h1,
.italcura-site h2,
.italcura-site h3,
.italcura-site h4,
.italcura-navbar h1,
.italcura-navbar h2,
.italcura-navbar h3,
.ic-footer h1,
.ic-footer h2,
.ic-footer h3,
.ic-footer h4 {
    color: var(--ic-ink);
    font-family: "Inter", "Segoe UI", sans-serif;
    font-weight: 700;
    letter-spacing: -0.035em;
}

.italcura-navbar {
    z-index: 1040;
    align-items: stretch;
    flex-direction: column;
    padding: 0;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(230, 236, 233, 0.9);
    box-shadow: 0 8px 30px rgba(26, 46, 38, 0.05);
    backdrop-filter: blur(18px);
}

.italcura-navbar > .container {
    max-width: 1280px;
    padding-right: 24px;
    padding-left: 24px;
}

.italcura-topbar {
    position: relative;
    width: 100%;
    height: 34px;
    align-self: stretch;
    flex: 0 0 auto;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.92);
    background: var(--ic-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.015em;
    padding-top: 0.7vw;
}

.italcura-ticker-viewport {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.italcura-ticker-track {
    display: flex;
    width: max-content;
    animation: italcura-ticker-scroll 38s linear infinite;
    will-change: transform;
}

.italcura-ticker-group {
    display: flex;
    min-width: max-content;
    flex: 0 0 auto;
    align-items: center;
    padding-right: 30px;
    padding-left: 30px;
    white-space: nowrap;
}

.italcura-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.italcura-ticker-item--primary strong {
    color: var(--ic-white);
    font-weight: 700;
}

.italcura-ticker-item i {
    color: #bcead9;
    font-size: 9px;
}

.italcura-ticker-separator {
    margin: 0 22px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
}

.italcura-topbar:hover .italcura-ticker-track,
.italcura-topbar:focus-within .italcura-ticker-track {
    animation-play-state: paused;
}

@keyframes italcura-ticker-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

.italcura-navbar .navbar-brand {
    display: flex;
    align-items: center;
    margin-right: 28px;
    padding: 14px 0;
}

.italcura-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--ic-ink);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1;
    text-decoration: none;
    text-transform: none;
}

/* Segno: era una scatola 42x42 con sfondo pesca e ombra costruita attorno
   al carattere "+" di testo. Con l'immagine del logo non serve piu' nessuno
   dei due: il file ha gia' i propri colori e il proprio spazio. Tolto anche
   il tagline "Assistenza e famiglia", il logo occupa da solo tutta la fascia.

   Il box segue il rapporto del disegno (152/108 = 1,407, arrotondato come
   80/57 = 1,404): se i due numeri non tornano il logo viene schiacciato.
   Con 80x57 in una navbar alta 76 restano 9,5 px di aria sopra e sotto. */
.italcura-wordmark-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 57px;
    flex: 0 0 80px;
    line-height: 1;
}

.italcura-wordmark-mark img {
    display: block;
    width: 100%;
    height: 100%;
}

.italcura-wordmark-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.italcura-wordmark-copy strong {
    color: var(--ic-ink);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1;
}

.italcura-wordmark-copy strong span,
.italcura-wordmark > span:last-child > span {
    color: var(--ic-primary);
}

.italcura-wordmark-copy small {
    color: var(--ic-clay-strong);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
}

.navbar.italcura-navbar .navbar-nav.mr-auto {
    margin: 0;
    padding: 0;
    list-style: none;
}

.navbar.italcura-navbar .navbar-nav.mr-auto .nav-link {
    position: relative;
    margin: 0 1px;
    padding: 18px 11px !important;
    color: #3e4945;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* Bootstrap ha ".navbar-light .navbar-nav .nav-link" con specificita (0,3,0) e vince.
   Queste regole la superano per applicare i colori del design. */
.navbar.italcura-navbar .navbar-nav.mr-auto .nav-link {
    color: #3e4945;
}

.navbar.italcura-navbar .navbar-nav.mr-auto .nav-link:hover,
.navbar.italcura-navbar .navbar-nav.mr-auto .nav-link:focus {
    color: var(--ic-primary);
}

.navbar.italcura-navbar .navbar-nav.mr-auto .nav-link::after {
    position: absolute;
    right: 11px;
    bottom: 12px;
    left: 11px;
    height: 2px;
    content: "";
    border-radius: 2px;
    background: var(--ic-primary);
    opacity: 0;
    transform: scaleX(0.3);
    transition: opacity 160ms ease, transform 160ms ease;
}

.navbar.italcura-navbar .navbar-nav.mr-auto .nav-link:hover,
.navbar.italcura-navbar .navbar-nav.mr-auto .nav-link:focus {
    color: var(--ic-primary);
}

.navbar.italcura-navbar .navbar-nav.mr-auto .nav-link:hover::after,
.navbar.italcura-navbar .navbar-nav.mr-auto .nav-link:focus::after {
    opacity: 1;
    transform: scaleX(1);
}

.navbar.italcura-navbar .navbar-nav:not(.mr-auto) {
    align-items: center;
    margin-left: 10px;
}

.ic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 14px 22px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.ic-btn:hover,
.ic-btn:focus {
    transform: translateY(-2px);
    text-decoration: none;
}

.ic-btn--primary,
.ic-btn--primary:hover,
.ic-btn--primary:focus {
    border-color: var(--ic-primary);
    color: var(--ic-white);
    background: var(--ic-primary);
    box-shadow: 0 12px 26px rgba(38, 113, 92, 0.22);
}

.ic-btn--primary:hover,
.ic-btn--primary:focus {
    color: var(--ic-white);
    background: var(--ic-primary-strong);
    box-shadow: 0 16px 34px rgba(38, 113, 92, 0.28);
}

.ic-btn--secondary,
.ic-btn--secondary:hover,
.ic-btn--secondary:focus {
    border-color: rgba(38, 113, 92, 0.2);
    color: var(--ic-primary-strong);
    background: var(--ic-primary-soft);
    box-shadow: none;
}

.ic-btn--secondary:hover,
.ic-btn--secondary:focus {
    border-color: rgba(38, 113, 92, 0.3);
    color: var(--ic-ink);
    background: #c8e8da;
}

.ic-btn--nav {
    min-height: 44px;
    padding: 11px 18px;
    font-size: 13px;
}

.ic-btn--block {
    width: 100%;
    margin-top: auto;
}

.italcura-navbar .navbar-toggler {
    width: 46px;
    height: 40px;
    border: 1px solid var(--ic-border);
    border-radius: 12px;
    padding: 8px 10px;
}

.italcura-navbar .navbar-toggler-icon {
    position: relative;
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--ic-ink);
}

.italcura-navbar .navbar-toggler-icon::before,
.italcura-navbar .navbar-toggler-icon::after {
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    content: "";
    border-radius: 2px;
    background: var(--ic-ink);
}

.italcura-navbar .navbar-toggler-icon::before {
    top: -7px;
}

.italcura-navbar .navbar-toggler-icon::after {
    top: 7px;
}

.italcura-navbar .navbar-collapse {
    align-items: center;
}

.italcura-site {
    min-height: 100vh;
    overflow: hidden;
    background: var(--ic-cream);
}

.ic-main {
    background: var(--ic-cream);
}

.ic-hero {
    position: relative;
    overflow: hidden;
    padding: 88px 0 92px;
    background:
        radial-gradient(circle at 82% 18%, rgba(247, 208, 195, 0.72), transparent 30%),
        radial-gradient(circle at 6% 100%, rgba(140, 184, 173, 0.35), transparent 34%),
        linear-gradient(145deg, #ffffff 0%, #fbfdfc 58%, #f1faf5 100%);
}

.ic-hero::after {
    position: absolute;
    right: -170px;
    bottom: -250px;
    width: 620px;
    height: 620px;
    content: "";
    border: 1px solid rgba(38, 113, 92, 0.12);
    border-radius: 50%;
}

.ic-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.ic-blob--one {
    top: 9%;
    left: -130px;
    width: 280px;
    height: 280px;
    background: rgba(220, 243, 231, 0.55);
}

.ic-blob--two {
    right: 9%;
    bottom: 8%;
    width: 220px;
    height: 220px;
    background: rgba(255, 219, 207, 0.42);
}

.ic-hero-copy {
    position: relative;
    z-index: 3;
}

.ic-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(38, 113, 92, 0.15);
    border-radius: 999px;
    padding: 8px 14px;
    color: var(--ic-primary-strong);
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 8px 22px rgba(26, 46, 38, 0.05);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ic-dot {
    width: 9px;
    height: 9px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: var(--ic-primary);
    box-shadow: 0 0 0 4px rgba(38, 113, 92, 0.12);
}

.ic-hero h1 {
    max-width: 760px;
    margin: 24px 0 0;
    color: var(--ic-ink);
    font-size: clamp(46px, 5.1vw, 70px);
    font-weight: 700;
    letter-spacing: -0.055em;
    line-height: 1.03;
}

.ic-hero h1 span {
    color: var(--ic-primary);
}

.ic-lead {
    max-width: 720px;
    margin: 24px 0 0;
    color: var(--ic-text);
    font-size: 18px;
    line-height: 1.75;
}

.ic-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.ic-fact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 40px;
}

.ic-fact {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 82px;
    border: 1px solid var(--ic-border);
    border-radius: 16px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--ic-shadow-sm);
}

.ic-fact > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    color: var(--ic-primary);
    background: var(--ic-primary-soft);
    font-size: 16px;
}

.ic-fact span {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--ic-muted);
    font-size: 12px;
    line-height: 1.45;
}

.ic-fact strong {
    color: var(--ic-ink);
    font-size: 12px;
    font-weight: 700;
}

.ic-hero-column {
    position: relative;
    z-index: 2;
}

.ic-hero-scene {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 520px;
}

.ic-orbit {
    position: absolute;
    border: 1px solid rgba(38, 113, 92, 0.18);
    border-radius: 50%;
}

.ic-orbit--outer {
    width: 470px;
    height: 470px;
}

.ic-orbit--inner {
    width: 350px;
    height: 350px;
    border-color: rgba(162, 122, 110, 0.2);
}

.ic-request-card {
    position: relative;
    z-index: 2;
    width: min(100%, 370px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 28px;
    padding: 26px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--ic-shadow-lg);
    backdrop-filter: blur(14px);
}

.ic-request-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    color: var(--ic-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.ic-request-top i {
    color: var(--ic-primary);
    font-size: 18px;
}

.ic-request-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--ic-border);
}

.ic-request-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 20px 20px 20px 8px;
    color: var(--ic-white);
    background: var(--ic-primary);
    box-shadow: 0 12px 24px rgba(38, 113, 92, 0.24);
    font-size: 22px;
}

.ic-request-profile div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ic-request-profile small {
    color: var(--ic-clay-strong);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ic-request-profile strong {
    color: var(--ic-ink);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.ic-request-lines {
    display: grid;
    gap: 11px;
    padding-top: 22px;
}

.ic-request-lines div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ic-text);
    font-size: 11px;
    font-weight: 600;
}

.ic-request-lines i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    color: var(--ic-primary);
    background: var(--ic-primary-soft);
    font-size: 10px;
}

.ic-float-card {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--ic-shadow-md);
}

.ic-float-card > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    color: var(--ic-primary);
    background: var(--ic-primary-soft);
}

.ic-float-card > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ic-float-card strong {
    color: var(--ic-ink);
    font-size: 11px;
    font-weight: 700;
}

.ic-float-card small {
    color: var(--ic-muted);
    font-size: 11px;
}

/* Le float card stanno appoggiate agli angoli della card: e' la scelta del
   disegno e su desktop non da' problemi, perche' la sovrapposizione (19px)
   resta dentro il raggio dell'angolo (28px) e cade nella parte trasparente.
   Su schermi 768-991px la scena scende a 500px e la card torna larga 370px,
   quindi piu' alta: la sovrapposizione sale a 29px, supera l'angolo e si vede.
   Quelle due larghezze si correggono nel blocco @media (max-width: 991px). */
.ic-float-card--top {
    top: 70px;
    left: 4px;
}

.ic-float-card--bottom {
    right: -4px;
    bottom: 62px;
}

.ic-float-card--bottom > span {
    color: #72554b;
    background: #ffdbcf;
}

.ic-section {
    position: relative;
    padding: 112px 0;
}

.ic-section--white {
    background: var(--ic-white);
}

.ic-section--soft {
    background: linear-gradient(180deg, #f2fbf6 0%, #e7fff2 100%);
}

.ic-section--process {
    color: rgba(255, 255, 255, 0.72);
    background:
        radial-gradient(circle at 10% 100%, rgba(38, 113, 92, 0.34), transparent 36%),
        radial-gradient(circle at 90% 0%, rgba(140, 184, 173, 0.13), transparent 28%),
        var(--ic-forest);
}

.ic-section--contact {
    background: var(--ic-cream);
}

.ic-section-heading {
    position: relative;
    z-index: 1;
}

.ic-section-heading--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 50px;
}

.ic-section-heading > div,
.ic-section-heading--center {
    max-width: 760px;
}

.ic-section-heading--center {
    margin-right: auto;
    margin-bottom: 52px;
    margin-left: auto;
    text-align: center;
}

.ic-kicker {
    display: inline-block;
    margin-bottom: 13px;
    border-radius: 999px;
    padding: 7px 12px;
    color: var(--ic-primary);
    background: var(--ic-primary-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.ic-section-heading h2 {
    margin: 0;
    color: var(--ic-ink);
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.13;
}

.ic-section-heading p {
    max-width: 700px;
    margin: 17px 0 0;
    color: var(--ic-text);
    font-size: 16px;
    line-height: 1.75;
}

.ic-section-heading--center p {
    margin-right: auto;
    margin-left: auto;
}

.ic-section-heading--light h2 {
    color: var(--ic-white);
}

.ic-section-heading--light p {
    color: rgba(255, 255, 255, 0.68);
}

.ic-section--process .ic-kicker {
    color: var(--ic-ink);
    background: #9df3d6;
}

.ic-outline-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    border: 1px solid var(--ic-border);
    border-radius: 12px;
    padding: 11px 14px;
    color: var(--ic-muted);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--ic-shadow-sm);
    font-size: 12px;
    font-weight: 600;
}

.ic-outline-badge i {
    color: var(--ic-primary);
}

.ic-model-grid {
    position: relative;
    z-index: 1;
    align-items: stretch;
}

/* Da 992px in su le due colonne sono affiancate (col-lg-6), quindi qui il
   margine verticale non serve. E non e' solo inutile: le card hanno
   height:100%, e in flexbox il margine entra nell'ingombro, quindi questo
   valore accorciava la seconda card di 24px e la spostava anche in basso.
   Il distacco serve quando le colonne si impilano, e sta nel blocco 991px. */
.ic-model-grid > div + div {
    margin-top: 0;
}

.ic-model-card {
    position: relative;
    display: flex;
    height: 100%;
    min-height: 660px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ic-border);
    border-radius: 22px;
    padding: 38px;
    background: var(--ic-white);
    box-shadow: var(--ic-shadow-sm);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.ic-model-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ic-shadow-md);
}

.ic-model-stripe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5px;
    background: var(--ic-primary);
}

.ic-model-card--secondary .ic-model-stripe {
    background: var(--ic-clay);
}

.ic-model-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.ic-badge {
    display: inline-block;
    margin-bottom: 12px;
    border-radius: 999px;
    padding: 7px 11px;
    color: var(--ic-primary);
    background: var(--ic-primary-soft);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ic-badge--warm {
    color: #72554b;
    background: #ffdbcf;
}

.ic-model-card h3 {
    margin: 0;
    color: var(--ic-ink);
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.25;
}

.ic-model-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 16px;
    color: var(--ic-primary);
    background: var(--ic-primary-soft);
    font-size: 22px;
}

.ic-model-card--secondary .ic-model-icon {
    color: #72554b;
    background: #ffdbcf;
}

.ic-model-card > p {
    margin: 24px 0 0;
    color: var(--ic-text);
    font-size: 15px;
    line-height: 1.8;
}

.ic-model-card > ul {
    display: grid;
    gap: 12px;
    margin: 25px 0 28px;
    padding: 0;
    list-style: none;
}

.ic-model-card > ul li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: var(--ic-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
}

.ic-model-card > ul i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    margin-top: 1px;
    border-radius: 50%;
    color: var(--ic-primary);
    background: var(--ic-primary-soft);
    font-size: 10px;
}

.ic-model-card--secondary > ul i {
    color: #72554b;
    background: #ffdbcf;
}

.ic-model-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: auto;
    margin-bottom: 25px;
    border: 1px solid var(--ic-border);
    border-radius: 15px;
    padding: 15px 17px;
    background: var(--ic-cream);
}

.ic-model-price > span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ic-model-price small {
    color: var(--ic-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ic-model-price strong {
    color: var(--ic-primary);
    font-size: 14px;
    font-weight: 700;
}

.ic-model-card--secondary .ic-model-price strong {
    color: #72554b;
}

/* row-gap e' il distacco verticale fra le righe. Prima era affidato a un
   margin-bottom sulle card che esisteva solo sotto i 1200px, quindi da 1200px
   in su le due righe si toccavano. */
.ic-service-grid {
    position: relative;
    z-index: 1;
    row-gap: 24px;
}

.ic-service-grid > div {
    display: flex;
}

.ic-service-card {
    display: flex;
    width: 100%;
    min-height: 350px;
    flex-direction: column;
    border: 1px solid var(--ic-border);
    border-radius: 18px;
    padding: 25px;
    background: var(--ic-cream);
    box-shadow: var(--ic-shadow-sm);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.ic-service-card:hover {
    border-color: rgba(38, 113, 92, 0.25);
    transform: translateY(-4px);
    box-shadow: var(--ic-shadow-md);
}

.ic-service-card--clay {
    background: #fffaf8;
}

.ic-service-card--sage {
    background: #f8fcfa;
}

.ic-service-card--peach {
    background: #fff7f3;
}

/* Foto in cima alla card, a filo: i margini negativi annullano il padding di
   25px della card, cosi' l'immagine tocca i bordi, e gli angoli arrotondati
   restano solo sopra. object-fit ritaglia la fascia senza deformare. */
.ic-service-photo {
    margin: -25px -25px 20px;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
}

.ic-service-photo img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.ic-service-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 19px;
    border-bottom: 1px solid var(--ic-border);
}

.ic-service-head > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: var(--ic-primary);
    background: var(--ic-primary-soft);
    font-size: 20px;
}

.ic-service-card--clay .ic-service-head > span {
    color: #72554b;
    background: #ffdbcf;
}

.ic-service-card--sage .ic-service-head > span {
    color: #3c665d;
    background: #beece0;
}

.ic-service-card--peach .ic-service-head > span {
    color: #8d6e63;
    background: #f7d0c3;
}

.ic-service-head em {
    border-radius: 7px;
    padding: 6px 8px;
    color: var(--ic-primary);
    background: var(--ic-primary-soft);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ic-service-card--clay .ic-service-head em,
.ic-service-card--peach .ic-service-head em {
    color: #72554b;
    background: #ffdbcf;
}

.ic-service-card--sage .ic-service-head em {
    color: #426c63;
    background: #beece0;
}

.ic-service-card h3 {
    margin: 22px 0 0;
    color: var(--ic-ink);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.35;
}

.ic-service-card p {
    margin: 13px 0 22px;
    color: var(--ic-text);
    font-size: 13px;
    line-height: 1.75;
}

.ic-service-card > a {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    color: var(--ic-primary);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.ic-service-card > a:hover,
.ic-service-card > a:focus {
    color: var(--ic-primary-strong);
    text-decoration: none;
}

/* row-gap: qui non c'era nessun distacco, e sotto i 768px le tre card
   impilate si toccavano. */
.ic-process-grid {
    position: relative;
    z-index: 1;
    row-gap: 24px;
}

.ic-process-card {
    position: relative;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 32px;
    background: rgba(255, 255, 255, 0.055);
    transition: transform 180ms ease, background-color 180ms ease;
}

.ic-process-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-4px);
}

.ic-process-card > span {
    position: absolute;
    top: 24px;
    right: 25px;
    /* era 0,24: sul fondo scuro della sezione fa 2,2:1 e i numeri 1-2-3 non si
       leggevano. A 0,55 arriva a 5,6:1 e la sequenza dei passaggi si segue. */
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-weight: 700;
}

.ic-process-card > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 28px;
    border-radius: 16px;
    color: var(--ic-ink);
    background: var(--ic-peach);
    font-size: 20px;
}

.ic-process-card--two > i {
    background: var(--ic-sage);
}

.ic-process-card--three > i {
    background: #d7c2ba;
}

.ic-process-card h3 {
    margin: 0;
    color: var(--ic-white);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.ic-process-card p {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    line-height: 1.75;
}

/* row-gap: sotto i 992px le quattro card vanno su due righe. */
.ic-clarity-grid {
    position: relative;
    z-index: 1;
    row-gap: 24px;
}

.ic-clarity-grid > div {
    display: flex;
}

.ic-clarity-grid article {
    width: 100%;
    height: 100%;
    border: 1px solid var(--ic-border);
    border-radius: 18px;
    padding: 25px;
    background: var(--ic-cream);
    box-shadow: var(--ic-shadow-sm);
}

.ic-clarity-grid article > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 23px;
    border-radius: 15px;
    color: var(--ic-primary);
    background: var(--ic-primary-soft);
    font-size: 20px;
}

.ic-clarity-grid article:nth-child(even) > i {
    color: #72554b;
    background: #ffdbcf;
}

.ic-clarity-grid article h3 {
    margin: 0;
    color: var(--ic-ink);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.35;
}

.ic-clarity-grid article p {
    margin: 13px 0 0;
    color: var(--ic-text);
    font-size: 13px;
    line-height: 1.75;
}

.ic-contact-shell {
    overflow: hidden;
    border: 1px solid var(--ic-border);
    border-radius: 30px;
    background: var(--ic-cream);
    box-shadow: var(--ic-shadow-lg);
}

/* Bootstrap mette sul .row margini negativi di 15px per lato, pensati per
   compensare il padding di 15px del contenitore. Questa scheda non ha padding,
   quindi le colonne (pannello verde + modulo) sbordavano di 15px per lato e
   overflow:hidden le tagliava via: il padding interno si riduceva a 3px su
   mobile e a 42/35px invece di 56/50px su desktop. Azzero solo la riga
   esterna: quelle dentro .ic-form-fields devono tenere i loro margini, li
   recuperano dal padding delle colonne e servono ad affiancare i campi. */
.ic-contact-shell > .row {
    margin-right: 0;
    margin-left: 0;
}

.ic-contact-aside {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    padding: 56px;
    color: rgba(255, 255, 255, 0.75);
    background:
        radial-gradient(circle at 90% 10%, rgba(157, 243, 214, 0.2), transparent 28%),
        var(--ic-primary-strong);
}

.ic-contact-chip {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    margin-bottom: 25px;
    border-radius: 999px;
    padding: 8px 12px;
    color: var(--ic-primary-strong);
    background: #9df3d6;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.ic-contact-aside h2 {
    margin: 0;
    color: var(--ic-white);
    font-size: clamp(32px, 3.5vw, 46px);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.12;
}

.ic-contact-aside > p {
    margin: 21px 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    line-height: 1.75;
}

.ic-contact-points {
    display: grid;
    gap: 20px;
    margin-top: 40px;
}

.ic-contact-points > div {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ic-contact-points > div > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    color: var(--ic-primary-strong);
    background: rgba(157, 243, 214, 0.95);
    font-size: 15px;
}

.ic-contact-points span {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* era 0,68 di bianco: 3,66:1 sul verde, sotto soglia per un testo da 11px */
    color: rgba(255, 255, 255, 0.86);
    font-size: 11px;
    line-height: 1.6;
}

.ic-contact-points strong {
    color: var(--ic-white);
    font-size: 13px;
    font-weight: 700;
}

.ic-contact-form {
    padding: 50px;
    background: var(--ic-cream);
}

.ic-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 22px;
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 14px 16px;
}

.ic-alert > i {
    margin-top: 2px;
}

.ic-alert > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ic-alert strong {
    font-size: 13px;
}

.ic-alert span {
    font-size: 11px;
}

.ic-alert--success {
    border-color: rgba(38, 113, 92, 0.22);
    color: var(--ic-primary-strong);
    background: #e9f8f1;
}

.ic-alert--error {
    border-color: rgba(162, 82, 70, 0.24);
    color: #7b4036;
    background: #fff0ec;
}

.ic-form-fields {
    position: relative;
}

.ic-form-fields .form-group {
    margin-bottom: 18px;
}

.ic-form-fields .control-label,
.ic-form-fields label {
    margin-bottom: 7px;
    color: var(--ic-ink);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}

.ic-form-fields .form-control {
    min-height: 50px;
    border: 1px solid #d6e2dd;
    border-radius: 12px;
    padding: 12px 14px;
    color: var(--ic-ink);
    background: var(--ic-white);
    box-shadow: none;
    font-family: "Inter", "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 1.5;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.ic-form-fields textarea.form-control {
    min-height: 140px;
    resize: vertical;
}

.ic-form-fields .form-control:focus {
    border-color: var(--ic-primary);
    background: var(--ic-white);
    box-shadow: 0 0 0 4px rgba(58, 146, 121, 0.13);
}

.ic-form-fields .form-control::placeholder {
    /* era #91a29b: 2,68:1 sul campo bianco, sotto la soglia di 4,5:1. Su mobile
       il segnaposto e' l'unico testo che dice come scrivere il dato. */
    color: #66796f;
}

.ic-form-fields .form-control.is-invalid,
.ic-form-fields .form-control.is-invalid:focus {
    border-color: #ba1a1a;
    box-shadow: 0 0 0 4px rgba(186, 26, 26, 0.1);
}

.ic-form-fields .help-block,
.ic-form-fields .invalid-feedback {
    margin-top: 6px;
    color: #8b5048;
    font-size: 12px;
    line-height: 1.5;
}

.ic-form-fields .text-danger {
    color: #ba1a1a;
    font-size: 12px;
}

.ic-form-fields input[type="checkbox"] {
    width: 20px;
    height: 20px;
    /* flex: la casella non deve schiacciarsi quando il testo e' lungo */
    flex: 0 0 auto;
    margin-top: 2px;
    /* era --ic-sage (#8cb8ad): 2,19:1 sul bianco, sotto il 3:1 che serve per
       identificare un componente. Il bordo della casella deve vedersi. */
    border-color: #6c9488;
}

.ic-form-fields input[type="checkbox"]:focus {
    box-shadow: 0 0 0 3px rgba(38, 113, 92, 0.25);
}

/* Casella ed etichetta sulla stessa riga, con il testo che va a capo allineato
   sotto di se' e non sotto la casella.
   Il markup arriva da input_checkbox() del framework: l'<input> non ha la
   classe form-check-input di Bootstrap (esce con class='') e l'etichetta e'
   inline-block. Un inline-block con testo lungo non entra accanto alla casella
   e scende a capo: per questo si vedevano impilati. Con il flex non succede.
   L'etichetta e' legata con for=, quindi toccare il testo cambia la casella:
   il bersaglio e' tutto il blocco, non il quadratino. */
.ic-form-fields .form-check,
.ic-form-fields .custom-control {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding-left: 0;
}

.ic-form-fields .form-check label,
.ic-form-fields .custom-control-label {
    display: block;
    margin-left: 0;
    color: var(--ic-text);
    font-size: 12px;
    line-height: 1.6;
}

.ic-form-fields .form-check-inline,
.ic-form-fields .custom-control-inline {
    display: flex;
    align-items: flex-start;
}

.ic-form-fields a {
    color: var(--ic-primary);
    font-weight: 700;
    text-decoration: underline;
}

.ic-form-emergency {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 3px 0 18px;
    border: 1px solid #f0d4c9;
    border-radius: 12px;
    padding: 11px 13px;
    color: #7a554b;
    background: #fff7f3;
    font-size: 11px;
    line-height: 1.55;
}

.ic-form-emergency i {
    margin-top: 2px;
    color: #a27a6e;
}

.ic-form-fields .btn {
    min-height: 54px;
    border: 1px solid var(--ic-primary) !important;
    border-radius: 13px !important;
    padding: 14px 22px !important;
    color: var(--ic-white) !important;
    background: var(--ic-primary) !important;
    box-shadow: 0 12px 26px rgba(38, 113, 92, 0.22) !important;
    font-family: "Inter", "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease !important;
}

.ic-form-fields .btn:hover,
.ic-form-fields .btn:focus {
    background: var(--ic-primary-strong) !important;
    box-shadow: 0 16px 34px rgba(38, 113, 92, 0.28) !important;
    transform: translateY(-2px);
}

.ic-form-fields .g-recaptcha {
    max-width: 100%;
    margin-bottom: 22px;
    overflow: hidden;
}

.ic-form-fields .g-recaptcha iframe {
    max-width: 100%;
}

/* Fondo rosa #FFDBCF. Serve perche' il footer era l'unica superficie grande
   ancora tutta bianca, e il rosa fin qui' era usato 4 volte in tutto il
   foglio. Su questo fondo:
     titoli  --ic-ink   13,31:1   testo  --ic-text  5,69:1   <- passano gia'
     hover   --ic-primary 4,53:1  <- passa, resta com'e'
     link    --ic-muted 4,48:1    <- sotto soglia di 0,02, va scurito
     barra   #70827a    3,15:1    <- sotto soglia, va scurita
   Il logo va su una scheda bianca perche' il suo "Cura" #D99278 su un fondo
   rosa arriva a 1,7:1 e sparisce.

   Il bordo superiore e' un rosa piu' scuro, non il --ic-border verde-grigio:
   una linea verde su un fondo rosa si vede come un errore. */
#footer_hero.ic-footer {
    margin-top: 0;
    padding: 76px 0 20px;
    color: var(--ic-text);
    background: #ffdbcf;
    border-top: 1px solid #e0b6a4;
    box-shadow: 0 -8px 28px rgba(26, 46, 38, 0.035);
}

/* Nelle pagine interne il contenuto finisce a filo del footer: il container
   non ha padding inferiore e il rosa attacca subito sotto l'ultimo paragrafo.
   Il footer segue direttamente quel container; sulla home invece segue
   .ic-section, che ha gia' il suo respiro, quindi li' resta com'e'. */
.container + #footer_hero.ic-footer {
    margin-top: 80px;
}

#footer_hero.ic-footer a,
#footer_hero.ic-footer a:hover,
#footer_hero.ic-footer a:focus {
    color: var(--ic-text);
}

/* Neutralizza i colori chiari ereditati dal footer scuro del template originale:
   custom.css usa "#footer_hero a" (specificita 1,0,0) che batte le regole a classe. */
#footer_hero.ic-footer a.italcura-wordmark,
#footer_hero.ic-footer a.italcura-wordmark:hover,
#footer_hero.ic-footer a.italcura-wordmark:focus {
    color: var(--ic-ink);
    font-size: 25px;
    line-height: 1;
}

.ic-footer .container {
    max-width: 1280px;
    padding-right: 24px;
    padding-left: 24px;
}

.ic-footer-grid {
    position: relative;
}

.ic-footer-grid > div:first-child > p {
    max-width: 430px;
    margin: 20px 0 0;
    color: var(--ic-text);
    font-size: 13px;
    line-height: 1.8;
}

.ic-footer .italcura-wordmark,
.italcura-wordmark--footer,
.italcura-wordmark--footer:hover {
    color: var(--ic-ink);
    font-size: 25px;
    line-height: 1;
}


.ic-footer-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 420px;
    margin-top: 22px;
    border: 1px solid #e0b6a4;
    border-radius: 13px;
    padding: 12px 14px;
    color: #4a5f57;
    background: #fdf4f0;
    font-size: 11px;
    line-height: 1.6;
}

.ic-footer-note i {
    color: var(--ic-primary);
}

.ic-footer h2 {
    margin: 0 0 18px;
    color: var(--ic-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* La struttura originale del CMS usa <p><strong> per i titoli delle colonne,
   non <h2>. Stesso aspetto del design. */
#footer_hero.ic-footer p > strong {
    margin: 0 0 18px;
    color: var(--ic-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Blocco contatti: address() del CMS, riportato nel design */
#footer_hero.ic-footer address {
    margin: 0;
    font-style: normal;
}

#footer_hero.ic-footer address ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#footer_hero.ic-footer address li {
    position: relative;
    margin-bottom: 10px;
    /* Spazio per l'icona. .fa-ul/.fa-li mette le icone a -2,14em, cioe' FUORI
       dal bordo della colonna: su mobile il glifo arrivava a filo del bordo
       dello schermo mentre tutto il resto ha 24px di margine, e la prima
       colonna sembrava attaccata al lato. Ora l'icona sta dentro e il testo le
       sta accanto. Il rientro e' su tutte le righe, compresa quella della
       P. IVA che icona non ha, cosi' i testi restano allineati tra loro. */
    padding-left: 26px;
    color: var(--ic-text);
    font-size: 13px;
    line-height: 1.7;
}

#footer_hero.ic-footer address li:last-child {
    margin-bottom: 0;
}

#footer_hero.ic-footer address .fa {
    width: 20px;
    color: var(--ic-primary);
}

/* L'icona non esce piu' dal bordo: parte dallo stesso margine dei titoli. */
#footer_hero.ic-footer address .fa-li {
    left: 0;
    width: 18px;
    text-align: left;
}

.ic-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ic-footer li {
    margin-bottom: 10px;
}

.ic-footer a,
.ic-footer a:hover,
.ic-footer a:focus {
    color: #4a5f57;
    font-size: 12px;
    text-decoration: none;
}

/* Tap target 24px: solo sui link delle liste, non sul wordmark */
.ic-footer li a,
.ic-footer li a:hover,
.ic-footer li a:focus {
    display: inline-block;
    min-height: 24px;
    line-height: 24px;
}

/* Le 119 sedi del footer arrivano dal CMS come <a class="badge badge-default">.
   "badge-default" e' una variante di Bootstrap 3: in Bootstrap 4 non esiste, e
   .badge da solo non ha sfondo. Risultato: i nomi uscivano come testo nudo.
   Qui li rendo pillole bianche sul fondo rosa. La specificita' include li e a
   per battere le regole dei link del footer piu' sopra. */
.ic-footer li a.badge-default {
    display: inline-block;
    min-height: 0;
    border: 1px solid #e3bdab;
    border-radius: 999px;
    padding: 5px 12px;
    color: var(--ic-text);
    background: var(--ic-white);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    transition: border-color 160ms ease, color 160ms ease;
}

.ic-footer li a.badge-default:hover,
.ic-footer li a.badge-default:focus {
    border-color: var(--ic-primary);
    color: var(--ic-primary-strong);
}

.ic-footer a:hover,
.ic-footer a:focus {
    color: var(--ic-primary);
}

.ic-footer-bottom {
    display: flex;
    /* baseline e non center: copyright e note hanno lunghezze diverse e su una
       riga sola devono appoggiarsi tutti sulla stessa base */
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 32px;
    margin-top: 52px;
    border-top: 1px solid #e0b6a4;
    padding-top: 20px;
    /* il contenitore ha la classe text-right: qui serve l'allineamento a
       sinistra, le note si allineano da sole piu' sotto */
    text-align: left;
    color: #54655e;
    font-size: 11px;
    line-height: 1.5;
}

/* Le due note legali in un gruppo proprio, appoggiate a destra. Prima erano
   tre span sciolti distribuiti con space-between su tutta la larghezza: il
   centrale restava sospeso a meta' strada e i tre sembravano scollegati. */
.ic-footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 24px;
    max-width: 62%;
    margin-left: auto;
    text-align: right;
}

@media (max-width: 767px) {
    .ic-footer-legal {
        justify-content: flex-start;
        max-width: none;
        margin-left: 0;
        text-align: left;
    }
}

/* --------------------------------------------------------------
   FOOTER - impaginazione
   Solo disposizione: nessun contenuto spostato, rinominato o tolto.
   -------------------------------------------------------------- */

/* La fascia delle sedi. Prima cominciava subito dopo la griglia, che e' alta
   quanto la colonna piu' lunga: "Sedi" nasceva attaccata all'ultima voce dei
   contatti e sembrava parte di quella colonna. Il filetto e' lo stesso che usa
   la barra finale. Le sedi restano sempre visibili: nessun <details>. */
.ic-footer-sedi-col {
    margin-top: 44px;
    border-top: 1px solid #e0b6a4;
    padding-top: 28px;
}

/* Sotto i 576px la prima colonna prende tutta la larghezza e le due liste si
   affiancano nella riga successiva: ci vuole un segno che dica dove finisce un
   gruppo. Sostituisce lo <hr> che stava dentro una colonna vuota, largo zero
   ma con 36px di margine sotto. */
@media (max-width: 575px) {
    .ic-footer-grid > div + div {
        margin-top: 12px;
        border-top: 1px solid #e0b6a4;
        padding-top: 24px;
    }
}

.italcura-navbar a:focus-visible,
.italcura-site a:focus-visible,
.italcura-site button:focus-visible,
.italcura-site input:focus-visible,
.italcura-site select:focus-visible,
.italcura-site textarea:focus-visible,
.ic-footer a:focus-visible {
    outline: 3px solid rgba(58, 146, 121, 0.3);
    outline-offset: 3px;
}

@media (max-width: 1199px) {
    .italcura-navbar .navbar-toggler {
        display: block;
    }

    .italcura-topbar {
        height: 30px;
        font-size: 9px;
    }

    .italcura-ticker-track {
        animation-duration: 50s;
    }

    .italcura-ticker-group {
        padding-right: 20px;
        padding-left: 20px;
    }

    .italcura-ticker-item {
        gap: 5px;
    }

    .italcura-ticker-item i {
        font-size: 7px;
    }

    .italcura-ticker-separator {
        margin: 0 14px;
        font-size: 9px;
    }

    .italcura-navbar .navbar-brand {
        padding: 12px 0;
    }

    .italcura-navbar .navbar-collapse {
        margin-top: 0;
        border-top: 1px solid var(--ic-border);
        padding: 12px 0 16px;
    }

    .navbar.italcura-navbar .navbar-nav.mr-auto {
        width: 100%;
    }

    .navbar.italcura-navbar .navbar-nav.mr-auto .nav-link {
        margin: 0;
        padding: 11px 0 !important;
    }

    .navbar.italcura-navbar .navbar-nav.mr-auto .nav-link::after {
        display: none;
    }

    .navbar.italcura-navbar .navbar-nav:not(.mr-auto) {
        width: 100%;
        margin-top: 8px;
    }

    .ic-btn--nav {
        width: 100%;
    }

    .ic-hero {
        padding-top: 68px;
    }

    .ic-fact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ic-model-card {
        min-height: auto;
    }


    .ic-service-card,
    .ic-clarity-grid article {
        min-height: 0;
    }

    .ic-footer-grid > div {
        margin-bottom: 36px;
    }
}

@media (max-width: 991px) {
    /* Sotto i 992px col-lg-6 collassa e le due card si impilano: qui il
       distacco di 24px ci vuole, altrimenti si toccano. */
    .ic-model-grid > div + div {
        margin-top: 24px;
    }

    .ic-hero {
        padding: 60px 0 64px;
    }

    .ic-hero h1 {
        max-width: 820px;
    }

    .ic-hero-column {
        margin-top: 38px;
    }

    .ic-hero-scene {
        min-height: 500px;
    }

    .ic-orbit--outer {
        width: 440px;
        height: 440px;
    }

    .ic-orbit--inner {
        width: 330px;
        height: 330px;
    }

    /* Fascia 768-991px (tablet, e telefoni con "sito desktop" attivo): la scena
       scende a 500px e la card torna larga 370px, quindi piu' alta. Alle quote
       di base (70/62) la float entrava nella card di 29px, oltre il raggio
       dell'angolo, e il taglio si vedeva. A 32px resta fuori con ~10px d'aria. */
    .ic-float-card--top {
        top: 32px;
    }

    .ic-float-card--bottom {
        bottom: 32px;
    }

    .ic-section {
        padding: 86px 0;
    }

    .ic-section-heading--split {
        align-items: flex-start;
        flex-direction: column;
        gap: 24px;
    }

    .ic-contact-aside,
    .ic-contact-form {
        padding: 42px;
    }
}

@media (max-width: 767px) {
    .italcura-navbar .navbar-brand {
        margin-right: auto;
    }

    .italcura-wordmark {
        gap: 8px;
        font-size: 21px;
    }

    /* era 36x36: un quadrato schiaccia un marchio largo 1,4 volte l'alto
       e lo riduce a 36x25 px, illeggibile su telefono. */
    .italcura-wordmark-mark {
        width: 48px;
        height: 34px;
        flex-basis: 48px;
        font-size: 20px;
    }

    .italcura-wordmark-copy strong {
        font-size: 21px;
    }

    .italcura-wordmark-copy small {
        font-size: 8px;
    }

    .ic-hero {
        padding: 44px 0 20px;
    }

    .ic-pill {
        align-items: flex-start;
        border-radius: 14px;
        font-size: 11px;
        line-height: 1.5;
    }

    .ic-hero h1 {
        margin-top: 20px;
        font-size: clamp(38px, 11vw, 52px);
        line-height: 1.04;
    }

    .ic-lead {
        margin-top: 20px;
        font-size: 15px;
        line-height: 1.7;
    }

    .ic-hero-actions {
        flex-direction: column;
    }

    .ic-hero-actions .ic-btn {
        width: 100%;
    }

    .ic-fact-grid {
        gap: 10px;
        margin-top: 30px;
    }

    .ic-fact {
        min-height: 92px;
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
        padding: 13px;
    }

    .ic-fact strong {
        font-size: 11px;
    }

    .ic-fact span {
        font-size: 12px;
    }

    .ic-hero-scene {
        min-height: 440px;
    }

    .ic-orbit--outer {
        width: min(88vw, 360px);
        height: min(88vw, 360px);
    }

    .ic-orbit--inner {
        width: min(68vw, 280px);
        height: min(68vw, 280px);
    }

    .ic-request-card {
        width: calc(100% - 12px);
        padding: 21px;
    }

    .ic-float-card--top {
        top: 8px;
        left: -4px;
    }

    .ic-float-card--bottom {
        right: -4px;
        bottom: 8px;
    }

    .ic-float-card {
        padding: 10px 12px;
    }

    .ic-float-card > span {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .ic-float-card strong {
        font-size: 11px;
    }

    .ic-float-card small {
        font-size: 11px;
    }

    .ic-section {
        padding: 70px 0;
    }

    .ic-hero + .ic-section {
        padding-top: 32px;
    }

    .ic-section-heading--split,
    .ic-section-heading--center {
        margin-bottom: 38px;
    }

    .ic-section-heading h2 {
        font-size: 34px;
    }

    .ic-section-heading p {
        font-size: 14px;
    }

    .ic-model-card {
        border-radius: 18px;
        padding: 25px;
    }

    .ic-model-card h3 {
        font-size: 24px;
    }

    .ic-model-price {
        align-items: flex-start;
        flex-direction: column;
    }

    .ic-model-price .text-right {
        text-align: left !important;
    }

    .ic-service-card,
    .ic-clarity-grid article {
        border-radius: 16px;
        padding: 21px;
    }

    .ic-process-card {
        min-height: 0;
        border-radius: 16px;
        padding: 24px;
    }

    .ic-contact-shell {
        border-radius: 22px;
    }

    .ic-contact-aside,
    .ic-contact-form {
        padding: 30px 24px;
    }

    .ic-contact-aside h2 {
        font-size: 36px;
    }

    .ic-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 575px) {
    .italcura-topbar {
        height: 30px;
        font-size: 9px;
    }

    .italcura-ticker-track {
        animation-duration: 54s;
    }

    .italcura-ticker-group {
        padding-right: 16px;
        padding-left: 16px;
    }

    .italcura-ticker-separator {
        margin: 0 12px;
    }

    .ic-hero h1 {
        font-size: 36px;
    }

    .ic-fact-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ic-request-profile strong {
        font-size: 16px;
    }

    .ic-request-lines div {
        font-size: 11px;
    }

    /* Qui prima c'era ".ic-float-card--top { display: none }": la prima float
       veniva nascosta sotto i 575px, e la sezione restava con una sola card a
       sporgere dall'angolo. Nella scena c'e' spazio per entrambe: la scena e'
       alta 440px, la card 275, le due float ~58 ciascuna piu' 8px di margine =
       407px su 440. Restano le posizioni ereditate da <=767px (top: 8px,
       left: -4px), quindi le due float stanno sopra e sotto la card senza
       toccarla. */
    .ic-float-card--bottom {
        right: 0;
        bottom: 8px;
    }

    .ic-model-head {
        gap: 12px;
    }

    .ic-model-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    /* Il modulo non restringe piu' il margine laterale sotto i 575px:
       eredita i 24px della regola <=767px, gli stessi del pannello verde
       che gli sta sopra. Cosi' i bordi restano allineati. */

    .ic-form-fields .row > [class*="col-"] {
        margin-bottom: 0;
    }

    .ic-form-fields .g-recaptcha {
        transform: scale(0.9);
        transform-origin: left center;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .ic-btn,
    .ic-model-card,
    .ic-service-card,
    .ic-process-card,
    .navbar.italcura-navbar .navbar-nav.mr-auto .nav-link::after {
        transition: none;
    }

    .italcura-ticker-viewport {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .italcura-ticker-track {
        animation: none;
        transform: none;
    }

    .italcura-ticker-group[aria-hidden="true"] {
        display: none;
    }
}

/* ==========================================================================
   BREADCRUMB
   Arrivava da Bootstrap senza nessuno stile ItalCura: testo #6c757d su #e9ecef
   = 3,95:1 e link #007bff = 3,36:1, entrambi sotto la soglia di 4,5:1. Inoltre
   quella fascia grigia non apparteneva alla palette.

   Il markup annida due volte la classe .breadcrumb (un div esterno e l'ol
   interno), quindi li tratto separatamente per non disegnare due bordi.
   ========================================================================== */

div.breadcrumb {
    background: #f2f7f5;
    border-bottom: 1px solid var(--ic-border);
}

ol.breadcrumb {
    margin-bottom: 0;
    padding-top: 13px;
    padding-bottom: 13px;
    background: none;
    font-size: 13px;
}

.breadcrumb-item,
.breadcrumb-item.active {
    color: #54655e;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--ic-sage);
    content: "/";
}

.breadcrumb-item a,
.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
    color: var(--ic-primary-strong);
    text-decoration: none;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
    text-decoration: underline;
}

/* ------------------------------------------------------------------
   Bersagli tattili e campi, su dispositivo a dita
   Regole da AGENTS.md: hit target mobile >= 44px, input mobile >= 16px.
   ------------------------------------------------------------------ */

@media (pointer: coarse), (max-width: 767px) {
    /* Su iOS il browser ingrandisce la pagina quando si tocca un campo con
       font-size sotto i 16px, e non torna piu' indietro: si resta con la
       pagina zoomata e il layout sfalsato. I campi sono a 13px per il disegno,
       quindi li porto a 16px solo dove il problema esiste (dita o schermo
       stretto), senza cambiare l'aspetto su desktop. */
    .ic-form-fields .form-control {
        font-size: 16px;
    }

    /* Questi link erano a 24px: e' il minimo della WCAG 2.2 AA, ma sotto il
       dito restano scomodi. A 44px si prendono al primo colpo. */
    .ic-footer li a,
    .ic-footer li a:hover,
    .ic-footer li a:focus {
        min-height: 44px;
        line-height: 44px;
    }

    /* Con la riga a 44px l'icona dei contatti, che sta a 0,14em dalla cima,
       resterebbe appesa in alto mentre il testo va al centro: la riallineo. */
    #footer_hero.ic-footer address .fa-li {
        top: 50%;
        transform: translateY(-50%);
    }

    .ic-service-card > a {
        min-height: 44px;
    }

    /* Le 119 pillole delle sedi: a 44px il footer crescerebbe di ~730px su un
       telefono da 390 (circa 34 righe in piu'). Le porto a ~36px, che per una
       lista densa e' il compromesso ragionevole; il minimo di 24px della
       WCAG 2.2 AA resta rispettato. */
    .ic-footer li a.badge-default {
        padding: 9px 14px;
    }
}

/* ------------------------------------------------------------------
   Accessibilita' da tastiera e tocchi (da AGENTS.md)
   ------------------------------------------------------------------ */

/* Link "salta al contenuto": e' il primo elemento focalizzabile della pagina.
   Nascosto finche' non riceve il focus, ma non con display:none, che lo
   toglierebbe anche dall'ordine di tabulazione. fixed perche' chi tabula da
   meta' pagina deve vederlo comparire davanti a se', non in cima al documento.
   z-index sopra la navbar, altrimenti resterebbe coperto. */
.ic-skip-link {
    position: fixed;
    z-index: 1100;
    top: 8px;
    left: 8px;
    transform: translateY(-200%);
    border-radius: 12px;
    padding: 12px 18px;
    color: var(--ic-white);
    background: var(--ic-primary-strong);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 160ms ease;
}

.ic-skip-link:focus {
    transform: translateY(0);
    color: var(--ic-white);
    outline: 3px solid rgba(255, 255, 255, 0.65);
    outline-offset: 2px;
}

/* Su molti browser mobili il doppio tocco fa zoom: manipulation toglie solo
   quello, lasciando attivi pinch e doppio tocco per lo zoom volontario. */
a,
button,
input,
select,
textarea,
label,
summary,
[role="button"] {
    touch-action: manipulation;
}

/* Il flash grigio/blu al tocco non fa parte del disegno: lo porto sul verde del
   marchio, tenue. */
html {
    -webkit-tap-highlight-color: rgba(38, 113, 92, 0.18);
}

/* Titoli con le righe bilanciate: evita l'ultima riga con una parola sola.
   I browser che non conoscono la proprieta' la ignorano e restano come prima. */
.ic-hero h1,
.ic-section-heading h2,
.ic-contact-aside h2,
.ic-model-card h3,
.ic-service-card h3,
.ic-process-card h3 {
    text-wrap: balance;
}

/* Chi Siamo: il testo sta in una col-md-12 e le righe arrivavano a ~1100px,
   faticose da seguire. Limito la misura a ~70 caratteri. I titoli restano
   a tutta larghezza. */
.chisiamo-content > p,
.chisiamo-content > ul,
.chisiamo-content > ol {
    max-width: 70ch;
}

/* ── Titoli delle pagine interne ──────────────────────────────────────────
   Le pagine interne non hanno il wrapper .italcura-site della home: i loro
   titoli restavano quelli del CMS, con pesi e spaziature diversi (custom.css:
   .page-header peso 900, .chisiamo-content h3 peso 600). Qui prendono la
   tipografia della home: Inter, peso 700, spaziatura stretta.
   Gli h1..h4 nudi coprono le altre pagine interne (contatti, news, servizi);
   .page-header e .chisiamo-content h* ci vogliono perche' in custom.css quei
   selettori hanno specificita' piu' alta e vanno battuti.
   La home non cambia: li' i titoli hanno regole piu' specifiche
   (.ic-hero h1, .ic-section-heading h2, .ic-model-card h3, ...) che restano
   vincenti. Questo foglio e' caricato dopo custom.css, quindi a pari
   specificita' vince. */
h1,
h2,
h3,
h4,
.page-header,
h1.page-header,
h2.page-header,
h3.page-header,
.chisiamo-content h2,
.chisiamo-content h3,
.chisiamo-content h4,
.chisiamo-content h5 {
    color: var(--ic-ink);
    font-weight: 700;
    letter-spacing: -0.035em;
}

/* Il verde di marca, lo stesso di "selezione di professionisti." nella home
   (--ic-primary, #26715c): sul titolo della pagina e sui sottotitoli del
   contenuto. Il titolo di sezione del contenuto (h2) resta scuro, come nella
   home, dove gli h2 delle sezioni sono ink. */
.page-header,
h1.page-header,
h2.page-header,
h3.page-header,
.chisiamo-content h3,
.chisiamo-content h5 {
    color: var(--ic-primary);
}

/* Pagina contatti: sotto i 768px il blocco contatti passa PRIMA del modulo
   (classi order-* di Bootstrap), quindi lo stacco va sotto, non sopra:
   altrimenti la scheda del modulo si attacca di nuovo. */
@media (max-width: 767px) {
    .ic-contatti-info {
        margin-bottom: 40px;
    }
}

/* ===== SmartMenus 1.1.1 (core + bootstrap-4 addon) =====
   Incluso qui invece che dal CDN: il menu della navbar (dropdown
   annidati delle sedi) e' gestito da smartmenus.bootstrap-4, che
   lo inizializza a runtime. */
.sm{box-sizing:border-box;position:relative;z-index:9999;-webkit-tap-highlight-color:transparent}.sm,.sm li,.sm ul{display:block;list-style:none;margin:0;padding:0;line-height:normal;direction:ltr;text-align:left}.sm-rtl,.sm-rtl li,.sm-rtl ul{direction:rtl;text-align:right}.sm>li>h1,.sm>li>h2,.sm>li>h3,.sm>li>h4,.sm>li>h5,.sm>li>h6{margin:0;padding:0}.sm ul{display:none}.sm a,.sm li{position:relative}.sm a{display:block}.sm a.disabled{cursor:default}.sm::after{content:"";display:block;height:0;font:0/0 serif;clear:both;overflow:hidden}.sm *,.sm ::after,.sm ::before{box-sizing:inherit}
.navbar-nav.sm-collapsible .sub-arrow{position:absolute;top:50%;right:0;margin:-.7em .5em 0 0;border:1px solid rgba(0,0,0,.1);border-radius:.25rem;padding:0;width:2em;height:1.4em;font-size:1.25rem;line-height:1.2em;text-align:center}.navbar-nav.sm-collapsible .sub-arrow::before{content:'+'}.navbar-nav.sm-collapsible .show>a>.sub-arrow::before{content:'-'}.navbar-dark .navbar-nav.sm-collapsible .nav-link .sub-arrow{border-color:rgba(255,255,255,.1)}.navbar-nav.sm-collapsible .has-submenu{padding-right:3em}.navbar-nav.sm-collapsible .dropdown-item,.navbar-nav.sm-collapsible .nav-link{position:relative}.navbar-nav:not(.sm-collapsible) .nav-link .sub-arrow{display:inline-block;width:0;height:0;margin-left:.255em;vertical-align:.255em;border-top:.3em solid;border-right:.3em solid transparent;border-left:.3em solid transparent}.fixed-bottom .navbar-nav:not(.sm-collapsible) .nav-link .sub-arrow,.fixed-bottom .navbar-nav:not(.sm-collapsible):not([data-sm-skip]) .dropdown-toggle::after{border-top:0;border-bottom:.3em solid}.navbar-nav:not(.sm-collapsible) .dropdown-item .sub-arrow,.navbar-nav:not(.sm-collapsible):not([data-sm-skip]) .dropdown-menu .dropdown-toggle::after{position:absolute;top:50%;right:0;width:0;height:0;margin-top:-.3em;margin-right:1em;border-top:.3em solid transparent;border-bottom:.3em solid transparent;border-left:.3em solid}.navbar-nav:not(.sm-collapsible) .dropdown-item.has-submenu{padding-right:2em}.navbar-nav .scroll-down,.navbar-nav .scroll-up{position:absolute;display:none;visibility:hidden;height:20px;overflow:hidden;text-align:center}.navbar-nav .scroll-down-arrow,.navbar-nav .scroll-up-arrow{position:absolute;top:-2px;left:50%;margin-left:-8px;width:0;height:0;overflow:hidden;border-top:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid;border-left:7px solid transparent}.navbar-nav .scroll-down-arrow{top:6px;border-top:7px solid;border-right:7px solid transparent;border-bottom:7px solid transparent;border-left:7px solid transparent}.navbar-nav.sm-collapsible .dropdown-menu .dropdown-menu{margin:.5em}.navbar-nav:not([data-sm-skip]) .dropdown-item{white-space:normal}.navbar-nav:not(.sm-collapsible) .sm-nowrap>li>.dropdown-item{white-space:nowrap}