/*
Theme Name: Villa Insugherata Roma
Theme URI: http://www.beatfly.com/
Author: Beat Fly
Author URI: http://www.beatfly.com/
Description: Custom Responsive Theme by Beatf Fly.
Version: 4.0
Start: 03.07.2025
Online: 15.10.2025
Updates: 
*/

/* =====================================================
   Variabili e Impostazioni Globali
===================================================== */
:root {
    /* Palette BG Primary - Giallo */
    --bg-primary-0: #fff;
    --bg-primary-50: #f6f7f3;
    --bg-primary-100: #e9ebe3;
    --bg-primary-200: #c8cdba;
    --bg-primary-300: #adb495;
    --bg-primary-400: #9ba27d;
    --bg-primary-500: #91946c;
    --bg-primary-600: #82825d;
    --bg-primary-700: #2a271e;

    /* Palette BG Neutral - Black & White */
    --bg-neutral-0: #fff;
    --bg-neutral-50: #fafafa;
    --bg-neutral-100: #f5f5f5;
    --bg-neutral-200: #e5e5e5;
    --bg-neutral-300: #d4d4d4;
    --bg-neutral-400: #a1a1a1;
    --bg-neutral-500: #525252;
    --bg-neutral-600: #404040;
    --bg-neutral-700: #000;
	
	
	--bg-accent-100:#d5d7f5;
	--bg-accent-200:#bcc0f5;
	--bg-accent-300:#A3A9F5;
            
    /* Variabili Tipografiche */
    /* Titoli */
    --title-font-family:'Cormorant Garamond', serif;
    --title-color: var(--bg-neutral-600);
    --title-font-weight: 300;
    --title-line-height: calc(1em + 0.25rem);
    --title-letter-spacing: -0.022em;
    --title-margin: 0 0 1.5rem;
        
    /* Body */
    --body-font-family:'DM Sans', sans-serif;
    --body-color: var(--bg-neutral-500);
    --body-font-size: 1.125rem;
    --body-font-weight: 300;
    --body-line-height: 1.5;
    --body-bg: #fafaf8;
    
    /* Strong */
    --strong-weight: 400;
    --strong-color: var(--bg-neutral-600);
    
    /* Paragrafo */
    --paragraph-margin: 0 0 1rem;
    
    /* HR */
    --hr-color: var(--bg-neutral-400);
    --hr-margin: 1.5rem 0;
    
    /* Cursor Text Selection */
    --text-selection-bg: var(--bg-neutral-500);
    --text-selection-color: var(--bg-neutral-0);
    
    /* Inverted Color */
    --inverted-color: var(--bg-neutral-700);
    
    /*Back To Top Link*/
	--bg-back-to-top:var(--bg-primary-300);
    --bg-back-to-top-hover:var(--bg-primary-400);
    --color-back-to-top:var(--bg-primary-700);
    --color-back-to-top-hover:var(--bg-primary-700);
    --border-back-to-top:1px solid var(--bg-primary-300);
    
    /* Form */
    --label-font-family: var(--body-font-family);
    --label-font-weight: var(--strong-weight);
    --label-color: var(--title-color);
    --label-font-size: 1rem;
    --legend-color: var(--title-color);
    --legend-weight: var(--strong-weight);
    --legend-font-size: 1.125rem;
    
    /* Spaziature */
    --form-control-padding: 0.75rem 1rem;
    --form-control-font-size: 1rem;
    --form-control-line-height: 1.5;
    --form-control-radius: 0.25rem;
    --form-group-margin-bottom: 1.5rem;
    --form-helper-font-size: 0.875rem;
    --form-helper-margin-top: 0.25rem;

    /* Colori */
    --form-bg: var(--bg-neutral-0);
    --form-color: var(--bg-neutral-500);
    --form-color-hover: var(--bg-neutral-500);
    --form-color-focus: var(--bg-neutral-700);
    --form-placeholder-color: #6c757d;
    --form-disabled-bg: #e9ecef;
    --form-disabled-color: var(--bg-neutral-300);

    /* Transizioni e ombre */
    --form-transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,background-color 0.15s ease-in-out;
    
    /* Input Border */
    --input-border:1px solid var(--bg-neutral-200);
    --input-border-focus:1px solid var(--bg-neutral-400);
    --input-border-hover:var(--bg-neutral-300);
    --input-focus-shadow:0 0 0 0.2rem rgba(240,240,240,0.6);
    
    /* Input Required Color */
    --input-required-color:var(--bg-neutral-500);
    
    /* Pesi */
    --font-w-300: 300;
    --font-w-400: 400;
    --font-w-500: 500;
    --font-w-600: 600;
    --font-w-700: 700;
    
    /* Link */
    --color-link:#7F6A37;
    --color-link-hover:var(--bg-neutral-700);
    
    /* Image Radius */
    --image-radius: 1rem;
    
    /* Navbar */
    --bg-navbar-default:var(--bg-primary-50);
    --bg-navbar-default-active:var(--bg-primary-100);
    --color-navbar-menu-link:var(--bg-primary-700);
    --color-navbar-menu-link-hover-active:var(--color-link);
    --navbar-font-family:var(--body-font-family);
    --navbar-font-size:0.75rem;
    --navbar-font-weight:bold;
    --navbar-letter-spacing:0;
    
    --bg-dropdown-menu: var(--bg-navbar-default);
    --bg-dropdown-menu-hover: var(--bg-primary-100);
    --color-dropdown-menu-link: var(--color-navbar-menu-link);
    --color-dropdown-menu-link-hover-active: var(--color-navbar-menu-link-hover-active);
        
    /* Card */
    --card-padding-xy:1rem;
    --card-padding-x:1rem;
    --card-padding-y:.5rem;
    --card-border:1px solid var(--bg-primary-100);
    --card-radius:0.5rem;
    --card-shadow:0;
	
	/* Badge and Pill */
	--badge-padding-x:0.25em;
    --badge-padding-y:0.5em;
    --badge-font-size:0.75em;
    --badge-font-weight:400;
    --badge-letter-spacing:0.063rem;
    --badge-border-radius:0;
	--badge-text-transform:uppercase;
		        
    /* Bottoni (BTN) */
    --btn-color: var(--bg-neutral-0);
    --btn-font-family: var(--body-font-family);
    --btn-font-weight: var(--strong-weight);
    --btn-font-size: 1rem;
    --btn-text-transform: capitalize;
    --btn-radius: 0.25rem;
    --btn-padding: 0.75rem 1rem;
    
    /* Semplificazione ombre pulsanti */
    --shadow-color:rgba(0, 0, 0, 0.05);
    --btn-shadow:none;
    --btn-shadow-hover:none;
    
    /* Bottoni Default */
    --color-btn-default: var(--bg-neutral-0);
    --color-btn-default-focus: var(--bg-neutral-0);
    --color-btn-default-active: var(--bg-neutral-0);
    --color-btn-default-hover: var(--bg-neutral-0);
    
    --bg-default: var(--bg-neutral-700);
    --bg-default-focus: var(--bg-neutral-600);
    --bg-default-active: var(--bg-neutral-600);
    --bg-default-hover: var(--bg-neutral-600);
    
    --border-default: var(--bg-neutral-700);
    --border-default-focus: var(--bg-neutral-600);
    --border-default-active: var(--bg-neutral-600);
    --border-default-hover: var(--bg-neutral-600);
    
    /* Bottoni Default Border */
    --color-btn-default-border: var(--bg-neutral-700);
    --color-btn-default-border-focus: var(--bg-neutral-0);
    --color-btn-default-border-active: var(--bg-neutral-0);
    --color-btn-default-border-hover: var(--bg-neutral-0);
    
    --bg-default-border: transparent;
    --bg-default-border-focus: var(--bg-neutral-700);
    --bg-default-border-active: var(--bg-neutral-700);
    --bg-default-border-hover: var(--bg-neutral-700);
    
    --border-default-border: var(--bg-neutral-700);
    --border-default-border-focus: var(--bg-neutral-700);
    --border-default-border-active: var(--bg-neutral-700);
    --border-default-border-hover: var(--bg-neutral-700);
    
    /* Bottoni Primary */
    --color-btn-primary: var(--bg-primary-700);
    --color-btn-primary-focus: var(--bg-primary-700);
    --color-btn-primary-active: var(--bg-primary-700);
    --color-btn-primary-hover: var(--bg-primary-700);
    
    --bg-primary: var(--bg-primary-100);
    --bg-primary-focus: var(--bg-primary-200);
    --bg-primary-active: var(--bg-primary-200);
    --bg-primary-hover: var(--bg-primary-200);
    
    --border-primary: var(--bg-primary-300);
    --border-primary-focus: var(--bg-primary-400);
    --border-primary-active: var(--bg-primary-400);
    --border-primary-hover: var(--bg-primary-400);
    
    /* Bottoni Primary Border */
    --color-btn-primary-border: var(--bg-primary-700);
    --color-btn-primary-border-focus: var(--bg-primary-700);
    --color-btn-primary-border-active: var(--bg-primary-700);
    --color-btn-primary-border-hover: var(--bg-primary-700);
    
    --bg-primary-border: transparent;
    --bg-primary-border-focus: var(--bg-primary-200);
    --bg-primary-border-active: var(--bg-primary-200);
    --bg-primary-border-hover: var(--bg-primary-200);
    
    --border-primary-border: var(--bg-primary-300);
    --border-primary-border-focus: var(--bg-primary-400);
    --border-primary-border-active: var(--bg-primary-400);
    --border-primary-border-hover: var(--bg-primary-400);
    
    /* Spaziatura (Sistema modulare) */
    --space-unit: 1rem;
    --space-xxs: calc(0.25 * var(--space-unit));
    --space-xs: calc(0.5 * var(--space-unit));
    --space-sm: calc(0.75 * var(--space-unit));
    
    /* Spazio (gutter) tra le colonne per Griglia */
    --grid-gutter: 1.5rem;    
}

/* =====================================================
   Title Fonts - Garamond 300
===================================================== */
/* cormorant-garamond-300 - latin */
@font-face {
  font-display:swap;
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300;
  src:url('fonts/cormorant-garamond-v20-latin-300.woff2') format('woff2');}

/* =====================================================
   Title Fonts - dm-sans 300,400
===================================================== */
/* dm-sans-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/dm-sans-v16-latin-300.woff2') format('woff2');}

/* dm-sans-300italic - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/dm-sans-v16-latin-300italic.woff2') format('woff2');}

/* dm-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/dm-sans-v16-latin-regular.woff2') format('woff2');}


/* =====================================================
   Reset e Impostazioni di Base
===================================================== */
*, *::before, *::after {
    box-sizing:border-box;
    margin:0;
    padding:0;}

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    line-height:1.5;}

body{
    text-rendering:optimizeSpeed;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    background-color:var(--body-bg);
    color:var(--body-color);
    font-family:var(--body-font-family);
    font-size:var(--body-font-size);
    font-weight:var(--body-font-weight);
    line-height:var(--body-line-height);}

/*Colore evidenziazione testo
-------------------------------------------------------------- */
/*Mozilla based browsers*/
::-moz-selection{
   background-color:var(--text-selection-bg);
   color:var(--text-selection-color);}
   
/*Works in Safari*/
::selection{
   background-color:var(--text-selection-bg);
   color:var(--text-selection-color);}

/* =====================================================
   Tipografia e Elementi Testuali
===================================================== */

/* Heading Hierarchy */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    color: var(--title-color);
    display:block;
    font-family: var(--title-font-family);
    font-weight: var(--title-font-weight);
    line-height: var(--title-line-height);
    letter-spacing: var(--title-letter-spacing);
    margin: var(--title-margin);
    text-wrap:balance;}

/* Responsive Font Sizes con clamp() */
h1, .h1{font-size:clamp(3.375rem, 3.0682rem + 1.2273vw, 4.05rem);}

h2, .h2{font-size:clamp(2.5313rem, 2.3011rem + 0.9205vw, 3.0375rem);}

h3, .h3{font-size:clamp(2.1094rem, 1.9176rem + 0.767vw, 2.5313rem);}

h4, .h4{font-size:clamp(1.6875rem, 1.5341rem + 0.6136vw, 2.025rem);}

h5, .h5{font-size:clamp(1.4063rem, 1.2784rem + 0.5114vw, 1.6875rem);}

h6, .h6{font-size:clamp(1.2656rem, 1.1506rem + 0.4602vw, 1.5188rem);}

/* Display Text */
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    color:var(--title-color);
    display:block;
    font-family:var(--title-font-family);
    font-weight:var(--title-font-weight);
    letter-spacing:var(--title-letter-spacing);
    line-height:1.1;}

.display-1{font-size:clamp(3.375rem, 2.7399rem + 2.5405vw, 4.7723rem);}

.display-2{font-size:clamp(2.5313rem, 2.0549rem + 1.9053vw, 3.5792rem);}

.display-3{font-size:clamp(2.1094rem, 1.7124rem + 1.5878vw, 2.9827rem);}

.display-4{font-size:clamp(1.6875rem, 1.3699rem + 1.2702vw, 2.3861rem);}

.display-5{font-size:clamp(1.4063rem, 1.1416rem + 1.0585vw, 1.9884rem);}

.display-6{font-size:clamp(1.2656rem, 1.0275rem + 0.9527vw, 1.7896rem);}

/* Paragrafi e Testi */
p{margin:var(--paragraph-margin);}
    
/* Text Size & Weight */
.txt-xs{font-size:0.875rem;}/*14*/
.txt-s{font-size:1rem;}/*16px*/
.txt-m{font-size:1.25rem;}/*20px*/
    
.fw-300{font-weight:var(--font-w-300);}
.fw-400{font-weight:var(--font-w-400);}
.fw-500{font-weight:var(--font-w-500);}
.fw-600{font-weight:var(--font-w-600);}
.fw-700{font-weight:var(--font-w-700);}

b,
strong{
    color:var(--strong-color);
    font-weight:var(--strong-weight);}

small,
.small{
    color:#000;
    font-size:85%;}

sub,
sup{
    font-size:70%;
    line-height:0;
    opacity:0.6;
    position:relative;
    vertical-align:baseline;}

sup{top:-0.5em;}

sub{bottom:-0.25em;}

a{
    color:var(--color-link);
    text-decoration:underline;
    /* Ottimizzazioni transizioni sugli elementi interattivi */
    transition-duration:0.2s;
    transition-timing-function:ease-in-out;
    transition-property:color, background-color, border-color;}

a:hover,
a:focus{
    color:var(--color-link-hover);
    text-decoration:none;}

a:focus{
    outline:5px auto -webkit-focus-ring-color;
    outline-offset:-2px;}

a.inverted {
    color: var(--color-link-hover);
    text-decoration: none;}

a.inverted:hover,
a.inverted:focus {
    color:var(--color-link);
    text-decoration:none;}

.not-underline{text-decoration:none !important;}

.underline{text-decoration:underline !important;}

/* HR */
hr{
    border:none;
    border-top:1px solid var(--hr-color);
    margin:var(--hr-margin);
    width:100%;}

/* Liste Comuni */
ul,
ol{
    padding-left:2rem;
    margin:1.25rem 0;}

ul ul,
ol ul,
ul ol,
ol ol{margin-bottom:0;}

li{margin-bottom:0.5em;}

li:last-child{margin-bottom:0;}

/* Liste Neutre */
.list-nostyle{
    list-style:none;
    margin:0;
    padding-left:0;}

.list-nostyle li{
    display:flex;
    justify-content:start;
    align-items:center;
    gap:0.5rem;}

/* Liste Neutre in linea*/
.list-inline{
    list-style:none;
    padding:0;
    margin:0;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:0.8rem;}

.list-inline li{margin:0;}

.list-inline svg {
    cursor:pointer;
    transition:fill .3s ease;}

/* Definition List */
dl{
    display:flex;
    flex-direction:column;
    margin:0.5rem 0 1rem;}
    
dl:last-child{margin:0.5rem 0 0;}

dt,
dd{line-height:1.4;}

dt{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:0.3rem;
    font-weight:var(--strong-weight);
    margin-bottom:0.5em;}

dd{
    margin-left:0;
    margin-bottom:0.5rem;}

dd:last-child{margin-bottom:0;}

/* Blockquote */
blockquote{
    font-size:clamp(1.4063rem, 1.3263rem + 0.3196vw, 1.582rem);
    font-weight:var(--strong-weight);
    line-height:1.3;
    margin:1rem 0;
    position:relative;
    z-index:0;}

blockquote cite{
    display:block;
    font-size:1rem;
    margin:0.5em 0;
    padding-left:1.5rem;
    position:relative;
    z-index:0;}

blockquote cite::after{
    content:'';
    background:#000;
    height:1px;
    width:16px;
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
    z-index:1;}
    
audio,
canvas,
progress,
video{display:inline-block;vertical-align:baseline;}
    
audio:not([controls]){display:none;height:0;}

/* =====================================================
   Immagini e Media
===================================================== */
figure{margin:0;}

img,
svg{vertical-align:middle;}

/* Immagine Responsive con Aspect Ratio (feature sperimentale) */
.img-fluid{
    height:auto;
    max-width:100%;}

/* Elementi con raggio d'angolo */
.radius,
.radius img{border-radius:var(--image-radius);}

/*Alternate Content*/
.alternate-opacity{
    pointer-events: auto;
    transition:all 0.3s ease-in-out;}

.alternate-opacity:hover figure img{
    opacity:0.6;
    transition:opacity 0.3s ease-in-out;}

.alternate-opacity figure:hover img{opacity:1;}

.alternate-image:nth-child(odd){margin-top:3.5rem;}

@media (max-width:900px){
	.alternate-image:nth-child(odd){margin-top:0;}
}

/* Tabelle */
/*table{
    width:100%;
    border-collapse:collapse;
    margin:1.5rem 0;}

th,
td{
    padding:0.75rem;
    text-align:left;
    border-bottom:1px solid #ddd;}

th{
    background-color:#f5f5f5;
    font-weight:bold;}*/

/* =====================================================
   Form e Accessibilità nei Form
===================================================== */
form{
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;}

.form-group{
    width:100%;
    margin-bottom:var(--form-group-margin-bottom);}

fieldset{
    border:0;
    margin:0;
    padding:0;
    min-width:0;}

label{
    display:inline-block;
    max-width:100%;
    margin-bottom:0.375rem;
    color:var(--label-color);
    font-family:var(--label-font-family);
    font-size:var(--label-font-size);
    font-weight:var(--label-font-weight);}

legend{
    display:block;
    width:100%;
    margin-bottom:1.5rem;
    padding-bottom:0.5rem;
    border:0;
    border-bottom:var(--card-border);
    color:var(--legend-color);
    font-size:var(--legend-font-size);
    font-weight:var(--legend-weight);
    line-height:inherit;}

/* Elementi di input */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
textarea,
select{
    display:block;
    width:100%;
    padding:var(--form-control-padding);
    font-size:var(--form-control-font-size);
    line-height:var(--form-control-line-height);
    color:var(--form-color);
    background-color:var(--form-bg);
    background-clip:padding-box;
    border:var(--input-border);
    border-radius:var(--form-control-radius);
    transition:var(--form-transition);
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;}

/* Stato hover */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):hover,
textarea:hover,
select:hover{
    border-color:var(--input-border-hover);}

/* Stato focus */
input:focus:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
textarea:focus,
select:focus{
    color:var(--form-color-focus);
    background-color:var(--form-bg);
    border:var(--input-border-focus);
    outline:0;
    box-shadow:var(--input-focus-shadow);}

/* Stato active */
input:active:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
textarea:active,
select:active{
    box-shadow:0 0 0 0.15rem rgba(240,240,240,0.4);}

/* Placeholder */
::placeholder{
    color:var(--form-placeholder-color);
    opacity:0.6;}

/* Stato disabilitato */
input:disabled,
textarea:disabled,
select:disabled{
    background-color:var(--form-disabled-bg);
    color:var(--form-disabled-color);
    opacity:1;
    cursor:not-allowed;}

/* Checkbox e radio */
input[type="checkbox"],
input[type="radio"]{
    margin-right:0.5rem;
    cursor:pointer;}

.checkbox-group,
.radio-group{
    display:flex;
    align-items:center;
    margin-bottom:0.5rem;}

/* Select */
select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath fill='%23343a40' d='M0 0l4 6 4-6z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 1rem center;
    background-size:8px 6px;
    padding-right:2.5rem;}

/* File input */
input[type="file"]{
    padding:0.375rem 0.75rem;
    font-size:var(--form-control-font-size);
    line-height:var(--form-control-line-height);
    background-color:var(--form-bg);
    border:var(--input-border);
    border-radius:var(--form-control-radius);}

/* Textarea */
textarea{
    resize:vertical;
    min-height:100px;}

/* Testo di aiuto */
.form-text{
    display:block;
    margin-top:var(--form-helper-margin-top);
    font-size:var(--form-helper-font-size);
    color:var(--form-placeholder-color);}

/* Range input */
input[type="range"]{
    -webkit-appearance:none;
    width:100%;
    height:0.5rem;
    border-radius:var(--form-control-radius);
    background:#dee2e6;
    outline:none;
    padding:0;
    margin:0;}

input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:1.25rem;
    height:1.25rem;
    border-radius:50%;
    background:#007bff;
    cursor:pointer;
    transition:background 0.15s ease-in-out;}

input[type="range"]::-moz-range-thumb{
    width:1.25rem;
    height:1.25rem;
    border:0;
    border-radius:50%;
    background:#007bff;
    cursor:pointer;
    transition:background 0.15s ease-in-out;}

/* Span required nel campi Form*/
.required-marker{color:var(--input-required-color);}

/* Responsive */
@media(max-width:768px){
    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
    textarea,
    select,
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"]{
        padding:0.625rem 0.875rem;
        font-size:0.95rem;}

    .form-group{
        margin-bottom:1rem;}
}

/* =====================================================
   Bottoni e Link di Bottone
===================================================== */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:0;
    text-align:center;
    white-space:nowrap;
    vertical-align:middle;
    cursor:pointer;
    text-transform:var(--btn-text-transform);
    background-image:none;
    border:1px solid transparent;
    padding:var(--btn-padding);
    font-size:var(--btn-font-size);
    font-weight:var(--btn-font-weight);
    font-family:var(--btn-font-family);
    text-decoration:none;
    line-height:1.5;
    border-radius:var(--btn-radius);
    box-shadow:var(--btn-shadow);
    user-select:none;
    letter-spacing:0;
    transition:color 0.2s ease-in-out,background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,box-shadow 0.2s ease-in-out;}

.btn:hover,
.btn:focus,
.btn.focus{
    text-decoration:none;
    box-shadow:var(--btn-shadow-hover);}

.btn:focus,
.btn:focus-visible{
    outline:0;
    box-shadow:0 0 0 0.2rem var(--shadow-color);}

.btn:active,
.btn.active{
    background-image:none;
    outline:0;
    box-shadow:inset 0 0.15em 0 0 var(--shadow-color);}

/* Stato disabilitato */
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn{
    cursor:not-allowed;
    opacity:0.65;
    box-shadow:none;}

a.btn.disabled,
fieldset[disabled] a.btn{
    pointer-events:none;}

/* =====================================================
   Bottoni Default
===================================================== */
.btn-default{
    color:var(--color-btn-default);
    background-color:var(--bg-default);
    border-color:var(--border-default);}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus{
    color:var(--color-btn-default-hover);
    background-color:var(--bg-default-hover);
    border-color:var(--border-default-hover);
    box-shadow:var(--btn-shadow-hover);}

.btn-default:active,
.btn-default.active{
    color:var(--color-btn-default-active);
    background-color:var(--bg-default-active);
    border-color:var(--border-default-active);}

/* =====================================================
   Bottoni Default Border
===================================================== */
.btn-default-border{
    color:var(--color-btn-default-border);
    background-color:var(--bg-default-border);
    border-color:var(--border-default-border);}

.btn-default-border:hover,
.btn-default-border:focus,
.btn-default-border.focus{
    color:var(--color-btn-default-border-hover);
    background-color:var(--bg-default-border-hover);
    border-color:var(--border-default-border-hover);}

/* =====================================================
   Bottoni Primary
===================================================== */
.btn-primary{
    color:var(--color-btn-primary);
    background-color:var(--bg-primary);
    border-color:var(--border-primary);}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus{
    color:var(--color-btn-primary-hover);
    background-color:var(--bg-primary-hover);
    border-color:var(--border-primary-hover);
    box-shadow:var(--btn-shadow-hover);}

.btn-primary:active,
.btn-primary.active{
    color:var(--color-btn-primary-active);
    background-color:var(--bg-primary-active);
    border-color:var(--border-primary-active);}

/* =====================================================
   Bottoni Primary Border
===================================================== */
.btn-primary-border{
    color:var(--color-btn-primary-border);
    background-color:var(--bg-primary-border);
    border-color:var(--border-primary-border);
    box-shadow:var(--btn-shadow);}

.btn-primary-border:hover,
.btn-primary-border:focus,
.btn-primary-border.focus{
    color:var(--color-btn-primary-border-hover);
    background-color:var(--bg-primary-border-hover);
    border-color:var(--border-primary-border-hover);
    box-shadow:var(--btn-shadow-hover);}

/* =====================================================
   Bottoni Link
===================================================== */
.btn-link{
    font-weight:var(--btn-font-weight);
    font-family:var(--btn-font-family);
    font-size:var(--btn-font-size);
    padding:0;
    border-radius:0;
    background-color:transparent;
    box-shadow:none;
    border-color:transparent;}

.btn-link:hover,
.btn-link:focus,
.btn-link:active{
    text-decoration:underline;
    background-color:transparent;}

/* =====================================================
   Bottoni Dimensioni
===================================================== */
.btn-lg{
    padding:1rem 1.25rem;
    font-size:1.25rem;
    border-radius:var(--btn-radius);}

.btn-sm{
    padding:0.5rem 1rem;
    font-size:0.85rem;
    border-radius:var(--btn-radius);}

.btn-xs{
    padding:0.25rem 0.25rem;
    font-size:0.75rem;
    border-radius:var(--btn-radius);}

.btn-block{
    display:block;
    width:100%;}

/* =====================================================
   Utility Classes di Spaziatura (sistema modulare)
===================================================== */
/* Margine superiore */
.mt-0{margin-top:0;}
.mt-05{margin-top:calc(0.5 * var(--space-unit));}
.mt-1{margin-top:var(--space-unit);}
.mt-2{margin-top:calc(2 * var(--space-unit));}
.mt-3{margin-top:calc(3 * var(--space-unit));}
.mt-4{margin-top:calc(4 * var(--space-unit));}

/* Margine inferiore */
.mb-0{margin-bottom:0;}
.mb-05{margin-bottom:calc(0.5 * var(--space-unit));}
.mb-1{margin-bottom:var(--space-unit);}
.mb-2{margin-bottom:calc(2 * var(--space-unit));}
.mb-3{margin-bottom:calc(3 * var(--space-unit));}
.mb-4{margin-bottom:calc(4 * var(--space-unit));}

/* Margine sinistro */
.ml-05{margin-left:calc(0.5 * var(--space-unit));}
.ml-1{margin-left:var(--space-unit);}
.ml-2{margin-left:calc(2 * var(--space-unit));}
.ml-3{margin-left:calc(3 * var(--space-unit));}
.ml-4{margin-left:calc(4 * var(--space-unit));}

/* Margine sinistro negativo */
.ml-n1{margin-left:calc(-1 * var(--space-unit));}
.ml-n2{margin-left:calc(-2 * var(--space-unit));}
.ml-n3{margin-left:calc(-3 * var(--space-unit));}
.ml-n4{margin-left:calc(-4 * var(--space-unit));}

/* Margine destro */
.mr-05{margin-right:calc(0.5 * var(--space-unit));}
.mr-1{margin-right:var(--space-unit);}
.mr-2{margin-right:calc(2 * var(--space-unit));}
.mr-3{margin-right:calc(3 * var(--space-unit));}
.mr-4{margin-right:calc(4 * var(--space-unit));}

/* Margine globale */
.m-0{margin:0;}

/* Padding orizzontale */
.pxy-05{padding:calc(0.5 * var(--space-unit));}
.pxy-1{padding:var(--space-unit);}
.pxy-2{padding:calc(2 * var(--space-unit));}

/* Padding superiore e inferiore */
.pt-05{padding-top:calc(0.5 * var(--space-unit));}
.pt-1{padding-top:var(--space-unit);}
.pt-2{padding-top:calc(2 * var(--space-unit));}
.pb-05{padding-bottom:calc(0.5 * var(--space-unit));}
.pb-1{padding-bottom:var(--space-unit);}
.pb-2{padding-bottom:calc(2 * var(--space-unit));}

/* Padding laterale */
.pr-05{padding-right:calc(0.5 * var(--space-unit));}
.pr-1{padding-right:var(--space-unit);}
.pr-2{padding-right:calc(2 * var(--space-unit));}
.pl-05{padding-left:calc(0.5 * var(--space-unit));}
.pl-1{padding-left:var(--space-unit);}
.pl-2{padding-left:calc(2 * var(--space-unit));}

.move_up{transition:all 0.2s ease-in-out;}

.move_up:focus,
.move_up:hover{transform:translateY(-0.1875rem);}

/* Altre Utility di Testo */
.text-left{text-align:left;}
.text-right{text-align:right;}
.text-center{text-align:center;}
.text-uppercase{text-transform:uppercase;}

/* Alignment Text
-------------------------------------------------------------- */

/* Center To Left */
.txt-center-sm-left{
  text-align:left; /* Valore predefinito per schermi piccoli */
}

@media only screen and (min-width: 992px) {
  .txt-center-sm-left{
    text-align:center; /* Cambia a "center" per schermi grandi */
  }
}

/* Right To Left */
.txt-right-sm-left{
  text-align:left; /* Valore predefinito per schermi piccoli */
}

@media only screen and (min-width: 992px) {
  .txt-right-sm-left{
    text-align:right; /* Cambia a "right" per schermi grandi */
  }
}

/* Right To Center */
.txt-right-sm-center{
  text-align:center; /* Valore predefinito per schermi piccoli */
}

@media only screen and (min-width: 768px) {
  .txt-right-sm-center{
    text-align:right; /* Cambia a "right" per schermi medi e grandi */
  }
}

/* Left To Center */
.txt-left-sm-center{
  text-align:center; /* Valore predefinito per schermi piccoli */
}

@media only screen and (min-width: 768px) {
  .txt-left-sm-center{
    text-align:left; /* Cambia a "left" per schermi medi e grandi */
  }
}

/*Accessibility Skip Link
-------------------------------------------------------------- */
#skip a{
    display:block;
    position:absolute;
    left:-999px;
    top:-999px;}

#skip a:focus{
    left:0;
    top:0;
    padding:3px;
    background:#ffc;
    border:1px solid #990000;}

/*Intro SEO Home page
-------------------------------------------------------------- */
/*accessibility hiding elements*/
.hide-element{
    border:0;
    clip:rect(1px, 1px, 1px, 1px);
    height:1px;
    margin:-1px;
    overflow:hidden;
    padding:0;
    position:absolute;
    width:1px;}

.hide-element-focusable:active,
.hide-element-focusable:focus{
    clip:auto;
    height:auto;
    margin:0;
    overflow:visible;
    position:static;
    width:auto;}

/* =====================================================
   Animazioni e Preferenze Utente
===================================================== */
/* Prefisso per focus-visible in Firefox */
button:-moz-focusring{outline: 2px solid Highlight;}
button:focus-visible{outline: 2px solid Highlight;}

/* Media Query per Media Queries con unità in em */
@media (max-width: 48em) {
    body{font-size:1rem; }
}

/* Accessibilità: contrasto elevato */
@media (prefers-contrast: high) {
    :root {
        --body-color: #000;
        --title-color: #000;
    }
}

/* Ridurre animazioni se richiesto */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================
   Layout Semantico e Container
===================================================== */
section,
footer{position:relative;}

/* =====================================================
   SISTEMA DI GRIGLIA MODERNO
   Basato su Flexbox con media query e utility responsive,
   ispirato a Bootstrap: container fissi e fluidi e colonne
   definite per breakpoint (es. col-sm-*, col-md-*, col-lg-*, col-xl-*).
   Note: Il supporto per IE11 non è incluso.
===================================================== */

/* =====================================================
   Sistema Contenitore
===================================================== */
.container,
.container-fluid{
    width:100%;
    padding-right:var(--grid-gutter);
    padding-left:var(--grid-gutter);
    margin-right:auto;
    margin-left:auto;}

/* Impostazione dei max-width del container in base ai breakpoint */
@media (min-width: 48em) {  /* 768px */
  .container {max-width:750px; }
}
@media (min-width: 62em) {  /* 992px */
  .container {max-width:970px; }
}
@media (min-width: 75em) {  /* 1200px */
  .container{max-width:1170px; }
}
@media (min-width: 87.5em) { /* 1400px */
  .container{max-width:1320px; }
}

/* =====================================================
   Core della Griglia
===================================================== */
/* .row: definita in flex con wrap e margini negativi per compensare il padding delle colonne */
.row {
    display:flex;
    flex-wrap:wrap;
    margin-right:calc(-1 * var(--grid-gutter));
    margin-left:calc(-1 * var(--grid-gutter));
    /* Ho rimosso gap per rispettare il comportamento originale */}

/* Inversione della direzione della row */
.row.reverse{flex-direction:row-reverse;}

/* Regola base per tutte le colonne (layout mobile-first):
   le colonne occupano il 100% di larghezza per default */
[class*="col-"] {
    padding-right:var(--grid-gutter);
    padding-left:var(--grid-gutter);
    flex:0 0 100%;
    max-width:100%;
    box-sizing:border-box;}

/* =====================================================
   Colonne Responsive
   Definizione delle colonne per breakpoint:
   sm (≥768px), md (≥992px), lg (≥1200px) e xl (≥1400px)
===================================================== */

/* Breakpoint Small (≥768px) */
@media (min-width: 48em) {
  .col-sm-12 { flex: 0 0 100%;   max-width: 100%; }
  .col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-sm-9  { flex: 0 0 75%;      max-width: 75%; }
  .col-sm-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-sm-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-sm-6  { flex: 0 0 50%;      max-width: 50%; }
  .col-sm-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-sm-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-sm-3  { flex: 0 0 25%;      max-width: 25%; }
  .col-sm-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-sm-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
    
  /* Offset per breakpoint Small (≥768px) */
  .col-sm-offset-0 { margin-left: 0; }
  .col-sm-offset-1 { margin-left: 8.3333%; }
  .col-sm-offset-2 { margin-left: 16.6667%; }
  .col-sm-offset-3 { margin-left: 25%; }
  .col-sm-offset-4 { margin-left: 33.3333%; }
  .col-sm-offset-5 { margin-left: 41.6667%; }
  .col-sm-offset-6 { margin-left: 50%; }
  .col-sm-offset-7 { margin-left: 58.3333%; }
  .col-sm-offset-8 { margin-left: 66.6667%; }
  .col-sm-offset-9 { margin-left: 75%; }
  .col-sm-offset-10 { margin-left: 83.3333%; }
  .col-sm-offset-11 { margin-left: 91.6667%; }
  .col-sm-offset-12 { margin-left: 100%; }
}

/* Breakpoint Medium (≥992px) */
@media (min-width: 62em) {
  .col-md-12 { flex: 0 0 100%;   max-width: 100%; }
  .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-md-9  { flex: 0 0 75%;      max-width: 75%; }
  .col-md-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-md-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-md-6  { flex: 0 0 50%;      max-width: 50%; }
  .col-md-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-md-3  { flex: 0 0 25%;      max-width: 25%; }
  .col-md-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-md-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
    
  /* Offset per breakpoint Medium (≥992px) */
  .col-md-offset-0 { margin-left: 0; }
  .col-md-offset-1 { margin-left: 8.3333%; }
  .col-md-offset-2 { margin-left: 16.6667%; }
  .col-md-offset-3 { margin-left: 25%; }
  .col-md-offset-4 { margin-left: 33.3333%; }
  .col-md-offset-5 { margin-left: 41.6667%; }
  .col-md-offset-6 { margin-left: 50%; }
  .col-md-offset-7 { margin-left: 58.3333%; }
  .col-md-offset-8 { margin-left: 66.6667%; }
  .col-md-offset-9 { margin-left: 75%; }
  .col-md-offset-10 { margin-left: 83.3333%; }
  .col-md-offset-11 { margin-left: 91.6667%; }
  .col-md-offset-12 { margin-left: 100%; }
}

/* Breakpoint Large (≥1200px) */
@media (min-width: 75em) {
  .col-lg-12 { flex: 0 0 100%;   max-width: 100%; }
  .col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-lg-9  { flex: 0 0 75%;      max-width: 75%; }
  .col-lg-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-lg-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-lg-6  { flex: 0 0 50%;      max-width: 50%; }
  .col-lg-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-lg-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-lg-3  { flex: 0 0 25%;      max-width: 25%; }
  .col-lg-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-lg-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
    
  /* Offset per breakpoint Large (≥1200px) */
  .col-lg-offset-0 { margin-left: 0; }
  .col-lg-offset-1 { margin-left: 8.3333%; }
  .col-lg-offset-2 { margin-left: 16.6667%; }
  .col-lg-offset-3 { margin-left: 25%; }
  .col-lg-offset-4 { margin-left: 33.3333%; }
  .col-lg-offset-5 { margin-left: 41.6667%; }
  .col-lg-offset-6 { margin-left: 50%; }
  .col-lg-offset-7 { margin-left: 58.3333%; }
  .col-lg-offset-8 { margin-left: 66.6667%; }
  .col-lg-offset-9 { margin-left: 75%; }
  .col-lg-offset-10 { margin-left: 83.3333%; }
  .col-lg-offset-11 { margin-left: 91.6667%; }
  .col-lg-offset-12 { margin-left: 100%; }
}

/* Breakpoint Extra Large (≥1400px) */
@media (min-width: 87.5em) {
  .col-xl-12 { flex: 0 0 100%;   max-width: 100%; }
  .col-xl-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-xl-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-xl-9  { flex: 0 0 75%;      max-width: 75%; }
  .col-xl-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-xl-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-xl-6  { flex: 0 0 50%;      max-width: 50%; }
  .col-xl-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-xl-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-xl-3  { flex: 0 0 25%;      max-width: 25%; }
  .col-xl-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-xl-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
  
  /* Offset per breakpoint Extra Large (≥1400px) */
  .col-xl-offset-0 { margin-left: 0; }
  .col-xl-offset-1 { margin-left: 8.3333%; }
  .col-xl-offset-2 { margin-left: 16.6667%; }
  .col-xl-offset-3 { margin-left: 25%; }
  .col-xl-offset-4 { margin-left: 33.3333%; }
  .col-xl-offset-5 { margin-left: 41.6667%; }
  .col-xl-offset-6 { margin-left: 50%; }
  .col-xl-offset-7 { margin-left: 58.3333%; }
  .col-xl-offset-8 { margin-left: 66.6667%; }
  .col-xl-offset-9 { margin-left: 75%; }
  .col-xl-offset-10 { margin-left: 83.3333%; }
  .col-xl-offset-11 { margin-left: 91.6667%; }
  .col-xl-offset-12 { margin-left: 100%; }
}

/* =====================================================
   Utility Responsive ed Extra
   Classi per Ordinamento, Allineamento e Gestione degli Spazi
===================================================== */

/* Classi per ordinamento (order) */
.order-first { order:-1;}
.order-last  { order:999;}
.order-0     { order:0;}
.order-1     { order:1;}
.order-2     { order:2;}
.order-3     { order:3;}

/* Utility responsive per l'ordinamento */
/* Breakpoint Small (≥768px) */
@media (min-width: 48em) {
  .order-sm-first { order:-1;}
  .order-sm-last  { order:999;}
  .order-sm-0     { order:0;}
  .order-sm-1     { order:1;}
  .order-sm-2     { order:2;}
  .order-sm-3     { order:3;}
}
/* Breakpoint Medium (≥992px) */
@media (min-width: 62em) {
  .order-md-first { order:-1;}
  .order-md-last  { order:999;}
  .order-md-0     { order:0;}
  .order-md-1     { order:1;}
  .order-md-2     { order:2;}
  .order-md-3     { order:3;}
}
/* Breakpoint Large (≥1200px) */
@media (min-width: 75em) {
  .order-lg-first { order:-1;}
  .order-lg-last  { order:999;}
  .order-lg-0     { order:0;}
  .order-lg-1     { order:1;}
  .order-lg-2     { order:2;}
  .order-lg-3     { order:3;}
}
/* Breakpoint Extra Large (≥1400px) */
@media (min-width: 87.5em) {
  .order-xl-first { order:-1;}
  .order-xl-last  { order:999;}
  .order-xl-0     { order:0;}
  .order-xl-1     { order:1;}
  .order-xl-2     { order:2;}
  .order-xl-3     { order:3;}
}

/* Allineamento orizzontale (justify-content) */
.justify-start   { justify-content:flex-start;}
.justify-center  { justify-content:center;}
.justify-end     { justify-content:flex-end;}
.justify-between { justify-content:space-between;}
.justify-around  { justify-content:space-around;}

/* Allineamento verticale (align-items) */
.align-start  { align-items:flex-start;}
.align-center { align-items:center;}
.align-end    { align-items:flex-end;}

/* Utility per rimuovere i gutter */
.no-gutters {
  margin: 0;
}
.no-gutters > [class*="col-"] {
  padding: 0;
}
    
.h-100{height:100%!important}

.h-auto{height:auto!important}

.w-100{width:100% !important;}

.gap-1{gap:.25rem;}

.gap-2{gap:1rem;}

.d-flex{display:flex !important;}
    
.d-inline-flex{display:inline-flex !important;}

.flex-column{flex-direction:column !important;}

.flex-column-reverse{flex-direction:column-reverse !important;}
    
.d-block,
.d-text{display:block;}
    
.d-text{margin-bottom:0.5rem;}

.center-block{
    display:block;
    margin-right:auto;
    margin-left:auto;}

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}

/* =====================================================
   Classi Extra e Utility Addizionali
===================================================== */

/* =====================================================
   CLASSE TEMPORANEA DI DEMO
   Aggiunge un background-color: pink a tutte le colonne,
   utile per visualizzare le combinazioni della griglia.
===================================================== */
.demo [class*="col-"] {
  background-color: pink !important;
}

/* =====================================================
   Commenti Finali
   Questo sistema di griglia mantiene la semplicità d'uso ispirata a Bootstrap,
   con container fissi e fluidi e colonne definite per i vari breakpoint
   (es. col-sm-*, col-md-*, col-lg-*, col-xl-*).
   Sono stati applicati miglioramenti moderni come l'eliminazione dei prefissi obsoleti
   e utility responsive per ordinamento e allineamento.
===================================================== */

/* =====================================================
   Spaziatura Verticale Fluida (Top & Bottom) con clamp()
   Le classi definite qui applicano solo il padding verticale
   (top e bottom), lasciando a zero il padding laterale.
   
   Le varianti sono:
   - sp-xs: per sezioni compatte (da smartphone)
   - sp-sm: per sezioni medie (tablet)
   - sp-md: per sezioni ampie (desktop)
   
   Inoltre, sono previste le varianti "top" e "bottom" per
   applicare il padding solo in una direzione.
===================================================== */

/* Padding su top e bottom */
.sp-xs{padding:clamp(4rem, calc(2vw + 3rem), 6rem) 0;}

.sp-sm{padding:clamp(6rem, calc(2vw + 4rem), 8rem) 0;}

.sp-md{padding:clamp(8rem, calc(2vw + 6rem), 10rem) 0;}

/* Solo Padding Top */
.sp-xs-top{padding: clamp(4rem, calc(2vw + 3rem), 6rem) 0 0 0;}

.sp-sm-top{padding: clamp(6rem, calc(2vw + 4rem), 8rem) 0 0 0;}

.sp-md-top{padding:clamp(8rem, calc(2vw + 6rem), 10rem) 0 0 0;}

/* Solo Padding Bottom */
.sp-xs-bottom{padding:0 0 clamp(4rem, calc(2vw + 3rem), 6rem) 0;}

.sp-sm-bottom{padding:0 0 clamp(6rem, calc(2vw + 4rem), 8rem) 0;}

.sp-md-bottom{padding:0 0 clamp(8rem, calc(2vw + 6rem), 10rem) 0;}

/* =====================================================
   Hamburger Menu e Navigazione
===================================================== */
/* Header e layout generale */
.site-header{
  position:relative;
  width:100%;
  z-index:1000;
  background:var(--bg-navbar-default);
  transition:background 0.3s ease, box-shadow 0.3s ease;}

.site-header.fixed{
    position:fixed;
    top:0;
    left:0;
    background:var(--bg-navbar-default);
    width:100%;
    transition:background 0.3s ease, box-shadow 0.3s ease;}

.site-header.fixed.active{
  background:rgba(243,238,225,0.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  position: relative; /* necessario per posizionare il pulsante in maniera assoluta */}

/* Logo */
.site-logo img {
	height:auto;
  	width:35px;}

/* Menu (desktop): posizionato staticamente all'interno del contenitore */
.menu-container .main-navigation {
  position: static;
  transition: none;}

.main-navigation .menu-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;}

.main-navigation .menu-list > li {
  margin:0 0 0 1rem;
  position: relative;}

.main-navigation .menu-list > li:first-child {
  margin:0;}

.main-navigation .menu-list li a {
  color: var(--color-navbar-menu-link);
  display: inline-flex;
  align-items: center;
  font-family: var(--navbar-font-family);
  font-size: var(--navbar-font-size);
  font-weight: var(--navbar-font-weight);
  letter-spacing: var(--navbar-letter-spacing);
  padding: 0.5rem;
  text-decoration: none;
  text-transform: uppercase;}

/* Focus State */
.main-navigation .menu-list li a:focus {
  outline: 0 solid var(--border-default-hover);
  outline-offset: 0;}

/* Evidenziazione voce corrente */
.main-navigation .menu-list li.current-menu-item > a {
  color: var(--color-navbar-menu-link-hover-active);}

.main-navigation .menu-list li a:hover,
.main-navigation .menu-list li a:focus,
.main-navigation .menu-list li.current-menu-item > a:hover,
.main-navigation .menu-list li.current-menu-item > a:focus,
.main-navigation .menu-list li.current-menu-item a {
  color: var(--color-navbar-menu-link-hover-active);}

/* Voce di menu con classe cta */
.main-navigation .menu-list li.cta > a {
  color: var(--bg-neutral-0);
  background-color: var(--bg-neutral-700);
  border-color: var(--bg-neutral-700);
  padding: 0.375rem 0.75rem;
  border-radius: var(--btn-radius);}

.main-navigation .menu-list li.cta > a:hover,
.main-navigation .menu-list li.cta > a:focus,
.main-navigation .menu-list li.cta.current-menu-item > a {
  color: var(--bg-neutral-0);
  background-color: var(--bg-neutral-600);
  border-color: var(--bg-neutral-600);}

/* Submenu */
.main-navigation .menu-list li.has-submenu > a::after {
  content: "▶";
  font-size: 0.6em;
  margin-left: 0.255em;
  transition: transform 0.3s ease;}

.main-navigation .menu-list li.open > a::after {
  transform: rotate(90deg);}

.main-navigation .menu-list li ul.sub-menu {
  background: var(--bg-neutral-0);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
  list-style: none;
  margin-top: 0.125rem;
  min-width: 10rem;
  box-shadow: 0 0.125rem 0.313rem rgba(0,0,0,0.1);
  padding: 0.5rem 0;
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;}

.main-navigation .menu-list li ul.sub-menu li {
  margin: 0;}

.main-navigation .menu-list li.open > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);}

/* Hamburger (solo icona, senza svg) */
.hamburger {
  background: var(--bg-primary-0);
  border: 1px solid rgba(0,0,0,0.8);
  border-radius: 0.375rem;
  cursor: pointer;
  padding: 1rem;
  z-index: 1200;
  display: none; /* Nascosto in desktop */}

.hamburger .hamburger-icon {
  display: block;
  width: 1.5rem;
  height: 0.125rem;
  background: var(--bg-primary-600);
  position: relative;
  transition: all 0.3s ease;}

.hamburger .hamburger-icon::before,
.hamburger .hamburger-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 1.5rem;
  height: 0.125rem;
  background: var(--bg-primary-600);
  transition: all 0.3s ease;}

.hamburger .hamburger-icon::before {
  top: -8px;}

.hamburger .hamburger-icon::after {
  top: 8px;}

.hamburger.open .hamburger-icon {
  background: transparent;}

.hamburger.open .hamburger-icon::before {
  transform: rotate(45deg);
  top: 0;}

.hamburger.open .hamburger-icon::after {
  transform: rotate(-45deg);
  top: 0;}

/* ===============================
   Modalità Mobile (max-width: 1024px)
=============================== */
@media (max-width: 1024px) {

  /* Posiziona il pulsante hamburger nel contenitore in modo assoluto */
  .hamburger-container {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1300; /* superiore al menu stesso */}
    
  .hamburger {
    display: block;}

  /* Riposiziona il menu in off-canvas */
  .menu-container .main-navigation {
    position: fixed;
    top: 0;
    right: -100%;
    width: 60%;
    height: 100vh; /* viewport height completa */
    background: var(--bg-primary-0);
    padding: 1.5rem;
    overflow-y: auto;
    transition: right 0.3s ease;
    z-index: 1200; /* fondamentale: sempre sotto l'hamburger */}

  /* Stato aperto del menu */
  .menu-container .main-navigation.open {
    right: 0;
    -webkit-overflow-scrolling: touch; /* scrolling fluido su mobile */}

  /* Menu mobile: elenco in colonna */
  .main-navigation .menu-list {
    flex-direction: column;}
    
  .main-navigation .menu-list > li {
    margin: 0;}
    
  .main-navigation .menu-list li a {
    font-size: 0.85rem;}
    
  .main-navigation .menu-list li.has-submenu > a::after {
    content: "▼";}
    
  .main-navigation .menu-list li.open > a::after {
    transform: rotate(180deg);}
    
  .main-navigation .menu-list li ul.sub-menu {
    box-shadow:none;
    margin:0.125rem 0;
    max-height:0;
    overflow:hidden;
    padding:0;
    position:static;
    transition:max-height 0.3s ease;}
    
  .main-navigation .menu-list li.open > ul.sub-menu{
    max-height:500px;}}

/* Overlay scuro che copre tutta la pagina */
.menu-overlay{
    background:rgba(0,0,0,0.6);
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    z-index:1100; /* più basso del menu (1200) e hamburger (1300) */
    opacity:0;
    visibility:hidden;
    transition:opacity 0.3s ease;}

/* Stato visibile dell'overlay quando il menu è aperto */
.menu-overlay.active{
    opacity:1;
    visibility:visible;}

/* Transizione Fade testo menu mobile */
@media (max-width: 1024px) {
    .menu-container .main-navigation{
        opacity:0;
        transition:right 0.3s ease, opacity 0.3s ease;}

    .menu-container .main-navigation.open{opacity:1;}
}

/*Text Color Primary
-------------------------------------------------------------- */
.text-primary-0{color:var(--bg-primary-0);}
.text-primary-50{color:var(--bg-primary-50);}
.text-primary-100{color:var(--bg-primary-100);}
.text-primary-200{color:var(--bg-primary-200);}
.text-primary-300{color:var(--bg-primary-300);}
.text-primary-400{color:var(--bg-primary-400);}
.text-primary-500{color:var(--bg-primary-500);}
.text-primary-600{color:var(--bg-primary-600);}
.text-primary-700{color:var(--bg-primary-700);}

/*Text Color Accent
-------------------------------------------------------------- */
.text-neutral-0{color:var(--bg-neutral-0);}
.text-neutral-50{color:var(--bg-neutral-50);}
.text-neutral-100{color:var(--bg-neutral-100);}
.text-neutral-200{color:var(--bg-neutral-200);}
.text-neutral-300{color:var(--bg-neutral-300);}
.text-neutral-400{color:var(--bg-neutral-400);}
.text-neutral-500{color:var(--bg-neutral-500);}
.text-neutral-600{color:var(--bg-neutral-600);}
.text-neutral-700{color:var(--bg-neutral-700);}

/*Background Colors Primary - Viola
-------------------------------------------------------------- */
.bg-primary-0{background-color:var(--bg-primary-0);}
.bg-primary-50{background-color:var(--bg-primary-50);}
.bg-primary-100{background-color:var(--bg-primary-100);}
.bg-primary-200{background-color:var(--bg-primary-200);}
.bg-primary-300{background-color:var(--bg-primary-300);}
.bg-primary-400{background-color:var(--bg-primary-400);}
.bg-primary-500{background-color:var(--bg-primary-500);}
.bg-primary-600{background-color:var(--bg-primary-600);}
.bg-primary-700{background-color:var(--bg-primary-700);}

/*Background Colors Neutral - Black & White
-------------------------------------------------------------- */
.bg-neutral-0{background-color:var(--bg-neutral-0);}
.bg-neutral-50{background-color:var(--bg-neutral-50);}
.bg-neutral-100{background-color:var(--bg-neutral-100);}
.bg-neutral-200{background-color:var(--bg-neutral-200);}
.bg-neutral-300{background-color:var(--bg-neutral-300);}
.bg-neutral-400{background-color:var(--bg-neutral-400);}
.bg-neutral-500{background-color:var(--bg-neutral-500);}
.bg-neutral-600{background-color:var(--bg-neutral-600);}
.bg-neutral-700{background-color:var(--bg-neutral-700);}

/*Images utility
-------------------------------------------------------------- */
a img.opacity{
  background-color:white;
  opacity:1;
  transition:all 0.5s ease;}

a:hover img.opacity{opacity:0.7 !important;}

.over-gradient{
  position:relative;
  z-index:0;}

.over-gradient::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  height:100%;
  width:100%;
  background:linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
  z-index:1;}

/* Figure Flexbox Figcaption */
.figure-flex{
	overflow:hidden;
  	display:flex;
  	flex-flow:row nowrap;
  	align-items:flex-start;
  	justify-content:center;
	position:relative;
	z-index:0;

    transition:all 0.3s ease-in-out;}

.figure-flex img{
	object-fit:cover;
	object-position:center;}
    
/* Box: Center Center */
.figure-flex-center{align-items:center;}
	
/* Box: Bottom Center */
.figure-flex-bottom{align-items:flex-end;}

/* Box: Top Right */
.figure-flex-top-right{justify-content:flex-end;}

/* Box: Top left */
.figure-flex-top-left{justify-content:flex-start;}

/* Box: Center Left */
.figure-flex-center-left{
  	align-items:center;
  	justify-content:flex-start;}

/* Box: Bottom Right */
.figure-flex-bottom-right{
  	align-items:flex-end;
  	justify-content:flex-end;}

/* Box: Bottom Left */
.figure-flex-bottom-left{
  	align-items:flex-end;
  	justify-content:flex-start;}

.figure-flex figcaption{
    /*color:#fff;*/
    /*font-size:0.625em;*/
    font-weight:bold;
  	line-height:1.3;
  	margin:1rem;
	position:absolute;
  	word-break:break-word;
	z-index:2;}

.figure-flex figcaption.block{
	line-height:1;
	margin:0;
  	padding:0.5rem 1rem;
	width:100%;

	background: rgba(255, 255, 255, 0.3); /* bianco semitrasparente */
    backdrop-filter: blur(7px);         /* sfocatura sullo sfondo */
    -webkit-backdrop-filter: blur(7px); /* supporto Safari */
	
	border-top: 1px solid rgba(255, 255, 255, 0.3); /* bordo superiore delicato */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);      /* ombra molto leggera */

    color: white;}
    
/* Badge */
.badge{
  	display:inline-flex;
    align-items:center;
  	font-size:var(--badge-font-size);
  	font-weight:var(--badge-font-weight);
    letter-spacing:var(--badge-letter-spacing);
  	line-height:1;
  	padding:var(--badge-padding-y) var(--badge-padding-x);
    text-align:center;
    text-transform:var(--badge-text-transform);
  	white-space:nowrap;}
    
.no-border{border:none;}

a.badge{
    text-decoration:none;}
    
a:hover.badge,
a:active.badge{
	text-decoration:underline;}

/* Hero - Versione Ottimizzata */
.hero_wrapper {
	position: relative;
  	width: 100%;
  	height: 100svh; /* Preferibile a dvh per migliore supporto mobile */
  	min-height: -webkit-fill-available; /* Fix per Safari iOS */
  	overflow: hidden;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	isolation: isolate; /* Crea nuovo stacking context */}

.hero_wrapper::after {
	content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to top, 
      rgba(18, 18, 19, 1) 0%, 
      rgba(24, 24, 51, 0.1) 35%
    );
  
    /* Ottimizzazione prestazioni */
    pointer-events: none;
    will-change: opacity;}

.hero_background {
  	position: absolute;
  	inset: 0; /* Sostituisce top/left/right/bottom */
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  	object-position: center;
  	z-index: -2;
  	will-change: transform; /* Ottimizzazione performance */}

.hero_video_container {
  	position: absolute;
  	inset: 0;
  	width: 100%;
  	height: 100%;
  	overflow: hidden;
  	pointer-events: none;
  	background-size: cover;
  	background-position: center;
  	background-repeat: no-repeat;
  	z-index: -1;
  	will-change: transform;}

.hero_video_container iframe {
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	width: 100vw;
  	height: 100vh;
  	min-width: 100%;
  	min-height: 100%;
  	transform: translate(-50%, -50%) scale(1.1);
  	border: 0;
  	aspect-ratio: 16/9; /* Nuova proprietà CSS */}

/* Ottimizzazione aspect ratio moderna */
@supports (aspect-ratio: 16/9) {
  .hero_video_container iframe {
    width: max(100vw, calc(100vh * 16 / 9));
    height: max(100vh, calc(100vw * 9 / 16));
  }
}

.hero_content {
  	color: #fff;
  	display: block;
  	font-family: var(--title-font-family);
    
    font-size:3.125rem;
    font-size:clamp(3.125rem, calc(2rem + 5.68vw), 6.25rem);
    
  	font-weight: var(--title-font-weight);
  	letter-spacing: var(--title-letter-spacing);
  	line-height: 1;
  	max-width:min(90%, 1000px);
  	padding: 0 1rem;
  	position: relative;
  	z-index: 10;
  	text-align: center;
  	text-shadow: 
    	0 1px 2px rgba(0, 0, 0, 0.4),
    	0 2px 4px rgba(0, 0, 0, 0.4);
  	mix-blend-mode: screen; /* Migliore leggibilità su sfondi chiari */
  	animation: fadeIn 1s ease-out; /* Effetto di entrata */}

/* Ottimizzazione mobile avanzata */
@media (max-width: 768px) {
  .hero_wrapper {height:100vh;}
  
  .hero_content {padding:0 0.5rem;}
}

/* Animazioni */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
    
/* Card */
/*=============================
CARD BASE
=============================*/
.card{
    background-clip:border-box;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    min-width:0;
    position:relative;
    overflow-wrap:break-word;
    margin:0 0 2rem;
    box-shadow:var(--card-shadow);
    -webkit-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;}
    
.no-overflow{overflow:visible;}

.card h3,
.card h4,
.card h5{margin:0;}

.card h3 a,
.card h4 a,
.card h5 a,
.card h3 a:active,
.card h4 a:active,
.card h5 a:active{
    color:var(--color-link-hover);
    text-decoration:none;}

.card h3 a:hover,
.card h4 a:hover,
.card h5 a:hover{
    color:var(--color-link);
    text-decoration:none;}

/*Usability Link*/
.card h3 a:before,
.card h4 a:before{
    content:'';
    position:absolute;
    inset:0;
    z-index:1;}

.card:focus-within{box-shadow:0 .375rem 1.5rem 0 rgba(140,152,164,.125);}
.card:focus-within :focus{box-shadow:none;outline:0;}

/*Bordi e Raggi e Margin*/
.card-radius{border-radius:var(--card-radius);}

.card-border{border:var(--card-border);}

.card-no-margin{margin:0;}

/*Header, Meta, Body, Footer*/
.card-header{
    border-bottom:var(--card-border);
    padding:var(--card-padding-y) var(--card-padding-x);}

.card-meta{
    border-bottom:var(--card-border);
    color:var(--bg-neutral-400);
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:0.75rem;
    font-weight:bold;
    padding:var(--card-padding-y) var(--card-padding-x);}

.card-meta span{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:0.4rem;
    align-items:start;}

.card-meta span svg{margin-top:0.2em;}

.card-body{
    flex:1 1 auto;/*altezza uguale su tutte */
    padding:var(--card-padding-xy);}
    
.card-footer{
    border-top:var(--card-border);
    font-size:0.75rem;
    padding:var(--card-padding-y) var(--card-padding-x);}

/*Immagini*/
.card-image,
.card-image-top{
    display:block;
    overflow:hidden;
    position:relative;
    z-index:0;}

.card-image{border-radius:0;}
.card.card-radius .card-image{border-radius:var(--card-radius);}

.card-image-top{
    border-top-left-radius:var(--card-radius);
    border-top-right-radius:var(--card-radius);}

.card-image figure,
.card-image-top figure{overflow:hidden;}

/*Effetti Visivi Hover su Card*/

/*Zoom + Blur*/
.card-hover-effect img{
    filter:blur(0);
    transform:scale(1);
    transition:transform 0.4s ease-in-out,filter 0.4s ease-in-out;}

.card-hover-effect:hover img{
    filter:blur(0.5px);
    transform:scale(1.05);
    transition:transform 0.4s ease-in-out,filter 0.4s ease-in-out;}

/*Shift Up*/
.card-transition:focus,
.card-transition:hover{
    transform:translateY(-0.1875rem);
    transition:transform 0.3s ease-in-out;}

/*Page Title */
.page-title{padding:clamp(10rem, calc(3vw + 7rem), 12rem) 0 0 0;}

/* Breadcrumbs */
.breadcrumbs{
	color:var(--body-color);
    display:block;
    font-size:0.813rem;
	font-weight:500;
	letter-spacing:0.02rem;
    padding:1rem 0;}
	
.breadcrumbs a{
	color:var(--color-link-hover);
	text-decoration:none;
    transition:color 0.2s ease, text-decoration 0.2s ease;}

.breadcrumbs a:hover{
	color:var(--color-link);
	text-decoration:underline;}

/*CSS Masonry Gallery
-------------------------------------------------------------- */
.masonry__container{
    -webkit-column-count:5;
    -moz-column-count:5;
    column-count:5;
    -webkit-column-gap:1rem;
    -moz-column-gap:1rem;
    column-gap:1rem;
    margin:0 1.5rem;}

.masonry__item{
    display:inline-block;
    width:100%;
    margin-bottom:0.5rem;
    transition:all 0.3s ease;
    -webkit-column-break-inside:avoid;
    page-break-inside:avoid;
    break-inside:avoid;
    overflow:hidden;
    position:relative;}

.masonry__item img{
    width:100%;
    height:auto;
    display:block;
    -webkit-transition:-webkit-transform 0.3s ease;
    transition:transform 0.3s ease;}

.masonry__item:hover img{
    -webkit-transform:scale(1.05);
    transform:scale(1.05);}

.masonry__item:hover{z-index: 10;}

@media screen and (max-width: 1024px) {
    .masonry__container{
        -webkit-column-count:4;
        -moz-column-count:4;
        column-count:4;}
}

@media screen and (max-width: 768px) {
    .masonry__container{
        -webkit-column-count:3;
        -moz-column-count:3;
        column-count:3;}
}

@media screen and (max-width: 480px) {
    .masonry__container {
        -webkit-column-count:2;
        -moz-column-count:2;
        column-count:2;}
}

/*Stack Cards on Scroll
-------------------------------------------------------------- */
.overflow-inherit{overflow:inherit;} /*For Stack Section*/

.stack{
	background:var(--bg-primary-50);
    position:-webkit-sticky;/*safari support*/
    position:sticky;
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-column-gap:1rem;
    align-items:center;
	min-height:400px;
    width:100%;}

.stack .image{
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	align-self:stretch;}

.stack .image img{
	-o-object-fit:cover;
	object-fit:cover;}

.stack .content{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:flex-start;
	padding:1.125rem 1rem;
	position:relative;}

.stack:nth-child(1){
    margin-bottom:7.5rem;/*120px*/
    top:5.625rem;/*90px*/}

.stack:nth-child(2){
    margin-bottom:6.25rem;/*100px*/
    top:6.875rem;/*110px*/}

.stack:nth-child(3){
    margin-bottom:5rem;/*80px*/
    top:8.125rem;/*130px*/}

.stack:nth-child(4){
    margin-bottom:3.75rem;/*60px*/
    top:9.375rem;/*150px*/}

@media (max-width:820px) {
	.stack{
		grid-template-columns:1fr;
        position:inherit;}
	
	.stack:nth-child(1),
	.stack:nth-child(2),
	.stack:nth-child(3),
	.stack:nth-child(4){
		margin-bottom:2rem;
		top:auto;}
}

/*Parallax Section
-------------------------------------------------------------- */
/* ——— Parallax Section ——— */
.section-parallax{
    position:relative;
    width:100%;
    text-align:center;
    color:#fff;
    z-index:0;

    /* fallback static se browser non supporta clamp() */
    padding:30vh 0;

    /* moderna */
    /*padding:clamp(252px, 10vw, 306px) 0;*/

    background-size:cover;
    background-position:50% 50%;
    background-repeat:no-repeat;}

.section-parallax::after {
    content:"";
    position:absolute;
    inset:0;
    background-color:rgba(0, 0, 0, 0.5);
    z-index:-1;}

.section-parallax .section-parallax-title{  
  	color:#fff;
  	display:block;
  	font-family:var(--title-font-family);
  	font-size:clamp(3.375rem, 2.7399rem + 2.5405vw, 4.7723rem);
  	font-weight:var(--title-font-weight);
  	letter-spacing:var(--title-letter-spacing);
  	line-height:1;
  	max-width:min(90%, 1000px);
  	padding:0 1rem;
  	position:relative;
  	z-index:10;
  	text-align:center;
  	text-shadow: 
    	0 1px 2px rgba(0, 0, 0, 0.4),
    	0 2px 4px rgba(0, 0, 0, 0.4);
  	mix-blend-mode:screen; /* Migliore leggibilità su sfondi chiari */
  	animation:fadeIn 1s ease-out; /* Effetto di entrata */}

/* ——— Immagini WebP responsive ——— */
.section-parallax.location {
  /* mobile first */
  background-image:url('images/parallax/giardini-della-insugherata-roma-xs.webp');}

@media (min-width: 480px) {
    .section-parallax.location{background-image:url('images/parallax/giardini-della-insugherata-roma-sm.webp');}
}

@media (min-width: 768px) {
    .section-parallax.location{background-image:url('images/parallax/giardini-della-insugherata-roma-md.webp');}
}

@media (min-width: 992px) {
    .section-parallax.location{background-image:url('images/parallax/giardini-della-insugherata-roma-lg.webp');}
}

@media (min-width: 1200px) {
    .section-parallax.location{background-image: url('images/parallax/giardini-della-insugherata-roma-xl.webp');}
}

/*reviews*/
.section-parallax.reviews {
  /* mobile first */
  background-image:url('images/parallax/review-vigna-mereghiana-xs.webp');}

@media (min-width: 480px) {
  .section-parallax.reviews{background-image:url(images/parallax/review-vigna-mereghiana-sm.webp);}
}
@media (min-width: 768px) {
  .section-parallax.reviews{background-image:url(images/parallax/review-vigna-mereghiana-md.webp);}
}
@media (min-width: 992px) {
  .section-parallax.reviews{background-image:url(images/parallax/review-vigna-mereghiana-lg.webp);}
}
@media (min-width: 1200px) {
  .section-parallax.reviews{background-image:url(images/parallax/review-vigna-mereghiana-xl.webp);}
}

/* Parallax “vero” solo su desktop */
@media (min-width: 768px) {
    .section-parallax {
        background-attachment:fixed;
        will-change:background-position;}
}

/* Parallax CTA Half Left + Right
-------------------------------------------------------------- */
.parallax-split{
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    padding:clamp(6rem, 16vh, 14rem) 0;
    position:relative;
    z-index:0;
    min-height:clamp(32rem, 60vh, 60rem);}

/* Sfondo dinamico lato sinistro o destro */
.parallax-split::before{
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
    content:'';
    position:absolute;
    top:0;
    height:100%;
    width:50%;
    z-index:1;}

/* Overlay sempre definito ma visibile solo su mobile */
.parallax-split::after{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0, 0, 0, 0.4);
    z-index:1;
    display:none;}

/* Layout dinamico */
.parallax-split[data-align="left"]::before {left: 0;}

.parallax-split[data-align="right"]::before {right: 0;}

/* Container sopra */
.parallax-split .container{
    position:relative;
    z-index:4;}

/* Immagini dinamiche */
.cover_book::before{background-image:url("images/gruppo-piccolomini-roma.webp");}

/* Mobile adjustments */
@media (max-width: 820px) {
    .parallax-split::before{
        width:100%;
        left:0 !important;
        right:0 !important;}

    .parallax-split::after{display:block;}
    
    .parallax-split .badge,
    .parallax-split h2,
    .parallax-split p,
    .parallax-split strong{color:#fff;}
}

/*Video Reel Section
-------------------------------------------------------------- */
/* contenitore a tutta larghezza/altezza */
.video-container{
    position:relative;
    width:100%;
    height:0;
    /*
    padding-bottom:56.25%;  rapporto 16:9; cambia se il tuo video ha un altro aspect-ratio 
    */
    
    /* 16 ÷ 9 ≃ 1.7778 → 177.78% */
    padding-bottom: 177.78%;
    overflow:hidden;}

/* il video scala sempre per riempire il container */
.video-background{
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    height:100%;
    transform:translate(-50%, -50%);
    /* se vuoi vedere l’intero video senza ritaglio: */
    object-fit: contain;
    /* se invece vuoi “riempire” tagliando (come background): */
    /* object-fit: cover; */}
    
/*Footer Back To Top Link
-------------------------------------------------------------- */
.back-to-top{
 	background:var(--bg-back-to-top);
    border:var(--border-back-to-top);
 	color:var(--color-back-to-top);
	cursor:pointer;
	display:none;
	font-size:1.125rem;
 	width:45px;
 	height:45px;
 	line-height:45px;
 	position:fixed;
 	right:2vw;
    bottom:18vh;
 	transition:background 0.3s;
    transition: 0.3s;
	text-align:center;
	text-decoration:none !important;
 	z-index:9991;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;}

.back-to-top:hover,
.back-to-top:active,
.back-to-top:focus{
	background:var(--bg-back-to-top-hover);
	color:var(--color-back-to-top-hover);
	text-decoration:none !important;}
    
/*Footer */	
footer{
	color:var(--bg-neutral-300);
	font-size:1rem;
	padding-block:1.5rem;}

footer ul li{}
			
footer a{
	color:var(--bg-neutral-300);
	text-decoration:none;}

footer a:hover,
footer a:focus{
	color:var(--bg-neutral-0);
	text-decoration:underline;}

footer hr{border-top:1px solid var(--bg-neutral-500);}
    
/*iFrame Google Map
-------------------------------------------------------------- */
iframe{border:0;}

.iframe-mappa{
	border:none;
	line-height:0;
	margin:0;
    overflow:hidden;
    width:100%;}

.iframe-mappa iframe{
	height:500px;
	width:100%;}
    
/*WP Entry Content elements
-------------------------------------------------------------- */
.entry-content figure{
  	display:flex;
  	flex-flow:row nowrap;
	justify-content:flex-start;
  	align-items:flex-end;
	margin:2em auto;
	overflow:hidden;
    position:relative;
	z-index:0;}

.entry-content figure img{
    display:block;
    margin:0 auto;
    border-radius:0.5rem;}

.entry-content figure figcaption{
	background:var(--bg-neutral-50);
	color:var(--bg-neutral-700);
  	margin:1em;
  	display:inline-flex;
  	justify-content:center;
  	align-items:center;
  	font-size:0.625rem;
  	font-weight:400;
  	line-height:normal;
  	padding:.35em .85em;
  	text-transform:uppercase;
  	white-space:nowrap;
  	-webkit-border-radius:50rem;
  	-moz-border-radius:50rem;
  	border-radius:50rem;
	
	position:absolute;
  	word-break:break-word;
  	z-index:2;}

.entry-content img{
  	display:block;
  	margin:2em auto 1em;}
        
/* Contact Form 7 Style
-------------------------------------------------------------- */
.wpcf7 .ajax-loader{margin:8px 24px 0 !important;}

.wpcf7 form .wpcf7-response-output{
    margin:0.5em 0 0 !important;
    padding:1em !important;
    border:1px solid #000 !important; /* Black */
	-webkit-border-radius:.3125rem;
	-moz-border-radius:.3125rem;
	border-radius:.3125rem;}
 
.wpcf7 form.init .wpcf7-response-output{display:none;}
 
.wpcf7 form.sent .wpcf7-response-output{
    border-color:#46b450 !important; /* Green */
	background-color:#dff0d8 !important;}
 
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output{
    border-color:orangered !important; /* Red */
	background-color:orangered !important;}
 
.wpcf7 form.spam .wpcf7-response-output{
    border-color:#f56e28 !important; /* Orange */}
 
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{
    border-color:papayawhip !important; /* Yellow */
	background-color:peachpuff!important;}

.wpcf7-not-valid-tip{
    color:orangered !important;
    font-size:0.75rem !important;
    font-weight:normal;
    display:block;
    padding-block:0.313rem}

.wpcf7 .screen-reader-response{display:none;}

/*WhatsApp Chat Button*/
#whatsApp-container{
    display:none;
  	position:fixed;
  	right:1.5vw;
    bottom:6vh;
  	z-index:999999999;}

#whatsApp-button{
    border:1px solid #25d366;
  	display:block;
  	position:relative;
  	text-decoration:none;
  	width:50px;
  	height:50px;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
  	-webkit-transition: all 0.2s ease-in-out;
  	transition: all 0.2s ease-in-out;
  	-webkit-transform: scale(1);
  	transform: scale(1);
  	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjU2IiB3aWR0aD0iMjU2IiB2aWV3Qm94PSItMjMgLTIxIDY4MiA2ODIuNjY3IiBmaWxsPSIjZmZmIiB4bWxuczp2PSJodHRwczovL3ZlY3RhLmlvL25hbm8iPjxwYXRoIGQ9Ik01NDQuMzg3IDkzLjAwOEM0ODQuNTEyIDMzLjA2MyA0MDQuODgzLjAzNSAzMjAuMDUxIDAgMTQ1LjI0NiAwIDIuOTggMTQyLjI2MiAyLjkxIDMxNy4xMTNjLS4wMjMgNTUuODk1IDE0LjU3OCAxMTAuNDU3IDQyLjMzMiAxNTguNTUxTC4yNSA2NDBsMTY4LjEyMS00NC4xMDJjNDYuMzI0IDI1LjI3IDk4LjQ3NyAzOC41ODYgMTUxLjU1MSAzOC42MDJoLjEzM2MxNzQuNzg1IDAgMzE3LjA2Ni0xNDIuMjczIDMxNy4xMzMtMzE3LjEzMy4wMzUtODQuNzQyLTMyLjkyMi0xNjQuNDE4LTkyLjgwMS0yMjQuMzU5ek0zMjAuMDUxIDU4MC45NDFoLS4xMDljLTQ3LjI5Ny0uMDItOTMuNjg0LTEyLjczLTEzNC4xNi0zNi43NDJsLTkuNjIxLTUuNzE1LTk5Ljc2NiAyNi4xNzIgMjYuNjI5LTk3LjI3LTYuMjctOS45NzNjLTI2LjM4Ny00MS45NjktNDAuMzItOTAuNDc3LTQwLjI5Ny0xNDAuMjgxLjA1NS0xNDUuMzMyIDExOC4zMDUtMjYzLjU3IDI2My42OTktMjYzLjU3IDcwLjQwNi4wMjMgMTM2LjU5IDI3LjQ3NyAxODYuMzU1IDc3LjMwMXM3Ny4xNTYgMTE2LjA1MSA3Ny4xMzMgMTg2LjQ4NGMtLjA2MiAxNDUuMzQ0LTExOC4zMDUgMjYzLjU5NC0yNjMuNTk0IDI2My41OTR6bTE0NC41ODYtMTk3LjQxOGMtNy45MjItMy45NjktNDYuODgzLTIzLjEzMy01NC4xNDgtMjUuNzgxLTcuMjU4LTIuNjQ1LTEyLjU0Ny0zLjk2MS0xNy44MjQgMy45NjktNS4yODUgNy45My0yMC40NjkgMjUuNzgxLTI1LjA5NCAzMS4wNjZzLTkuMjQyIDUuOTUzLTE3LjE2OCAxLjk4NC0zMy40NTctMTIuMzM2LTYzLjcyNy0zOS4zMzJjLTIzLjU1NS0yMS4wMTItMzkuNDU3LTQ2Ljk2MS00NC4wODItNTQuODkxLTQuNjE3LTcuOTM3LS4wMzktMTEuODEyIDMuNDc3LTE2LjE3MiA4LjU3OC0xMC42NTIgMTcuMTY4LTIxLjgyIDE5LjgwOS0yNy4xMDVzMS4zMi05LjkxOC0uNjY0LTEzLjg4M2MtMS45NzctMy45NjUtMTcuODI0LTQyLjk2OS0yNC40MjYtNTguODQtNi40MzctMTUuNDQ1LTEyLjk2NS0xMy4zNTktMTcuODMyLTEzLjYwMi00LjYxNy0uMjMtOS45MDItLjI3Ny0xNS4xODctLjI3N3MtMTMuODY3IDEuOTgtMjEuMTMzIDkuOTE4LTI3LjczIDI3LjEwMi0yNy43MyA2Ni4xMDUgMjguMzk1IDc2LjY4NCAzMi4zNTUgODEuOTczIDU1Ljg3OSA4NS4zMjggMTM1LjM2NyAxMTkuNjQ4YzE4LjkwNiA4LjE3MiAzMy42NjQgMTMuMDQzIDQ1LjE3NiAxNi42OTUgMTguOTg0IDYuMDMxIDM2LjI1NCA1LjE4IDQ5LjkxIDMuMTQxIDE1LjIyNy0yLjI3NyA0Ni44NzktMTkuMTcyIDUzLjQ4OC0zNy42OCA2LjYwMi0xOC41MTIgNi42MDItMzQuMzc1IDQuNjE3LTM3LjY4NC0xLjk3Ny0zLjMwNS03LjI2Mi01LjI4NS0xNS4xODQtOS4yNTR6bTAgMCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+") center/32px 32px no-repeat #25d366;}

#whatsApp-button:hover{
    background-color:#128c7e;
    border:1px solid #128c7e;
    color:var(--bg-neutral-0);
  	-webkit-transform:scale(1.06);
  	transform:scale(1.06);
  	-webkit-transition:all 0.2s ease-in-out;
  	transition:all 0.2s ease-in-out;}
    
/*Cookie Notice Plugin*/
#cookie-notice{background-color:#000 !important;}

#cookie-notice .cn-button{color:#99B2F7;}

#cookie-notice .cn-button:hover,
#cookie-notice .cn-button:active,
#cookie-notice .cn-button:focus{color:#fff !important;}

#cookie-notice .cn-button:not(.cn-button-custom){
	color:#fff !important;
	text-decoration:none !important;
	background:transparent !important;
	border:1px solid #fff !important;}

#cookie-notice .cn-button:not(.cn-button-custom):hover{
	color:#999 !important;
	background:transparent !important;
	border:1px solid #fff !important;
	text-decoration:none !important;}

/* Owl Carousel v2.3.4
-------------------------------------------------------------- */
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}

/* Owl Carousel Theme
-------------------------------------------------------------- */
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:0.188rem}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:1.875rem}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#0d0d0d}