/* =====================================================
   HELLO ELEMENTOR CHILD — assets/css/main.css
   =====================================================
   Organizzato per sezioni:
   1. CSS Custom Properties (variabili tema)
   2. Reset / Base
   3. Typography
   4. Utility Classes
   5. Layout Helpers
   6. Componenti UI
   7. Animazioni
   8. Accessibilità
   9. Print
   ===================================================== */

@font-face {
    font-family: "Qlassy";
    src: url("https://db.onlinewebfonts.com/t/5802665e969a20088c9dc4e1fca76351.eot");
    src: url("https://db.onlinewebfonts.com/t/5802665e969a20088c9dc4e1fca76351.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/5802665e969a20088c9dc4e1fca76351.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/5802665e969a20088c9dc4e1fca76351.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/5802665e969a20088c9dc4e1fca76351.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/5802665e969a20088c9dc4e1fca76351.svg#Qlassy")format("svg");
}

/* ─────────────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES
   ─────────────────────────────────────────────────────
   Modifica questi valori per personalizzare il tema.
   Usa le variabili in tutto il CSS invece di codificare
   i valori direttamente.
   ───────────────────────────────────────────────────── */
:root { 
  /* La Tua Nuova Palette */
  --clr-primary:        #A5998D; /* Main */
  --clr-primary-dark:   #92897D; 
  --clr-primary-light:  #EEEBE6; /* Sfondo chiaro */
  --clr-secondary:      #C9C2BA; /* Icone / Neutro */
  --clr-accent:         #E8E4DC; /* Sfondo scuro (o intermedio) */
  
  /* Neutrali basati sulla tua palette */
  --clr-dark:           #2F2B2D; /* Testo */
  --clr-dark-muted:     #4A4547;
  --clr-mid:            #C9C2BA;
  --clr-light:          #EEEBE6;
  --clr-white:          #ffffff;
  --clr-border:         #C9C2BA;

  /* Mappatura semantica per il tuo Brand */
  --ip-primary:         var(--clr-primary);
  --ip-bg-light:        #EEEBE6;
  --ip-bg-dark:         #E8E4DC;
  --ip-text:            #2F2B2D;
  --ip-icons:           #C9C2BA;
 

  /* Neutrali */
  --clr-dark:           #111827;
  --clr-dark-muted:     #374151;
  --clr-mid:            #6b7280;
  --clr-light:          #f9fafb;
  --clr-white:          #ffffff;
  --clr-border:         #e5e7eb;

  /* Stato */
  --clr-success:        #10b981;
  --clr-warning:        #f59e0b;
  --clr-error:          #ef4444;
  --clr-info:           #3b82f6;
 
  /* Typography - Plus Jakarta Sans per tutto il sito */
  --font-heading: 'Qlassy';
  --font-body:    'Plus Jakarta Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace; /* Mantengo il mono solo per il codice */
 
  
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.5rem;
  --fs-4xl:  3rem;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  --lh-tight:   1.2;
  --lh-snug:    1.4;
  --lh-normal:  1.6;
  --lh-relaxed: 1.8;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1536px;

  /* Border Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.10), 0 10px 10px -5px rgba(0,0,0,0.04);
  --shadow-2xl:  0 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-glow: 0 0 20px rgba(26,115,232,0.4);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* Z-index scale */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}


/* ─────────────────────────────────────────────────────
   2. RESET / BASE
   ─────────────────────────────────────────────────────*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--clr-dark);
  background-color: var(--clr-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--clr-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--clr-primary-dark); }

ul, ol { padding-left: 1.5em; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; margin: 0; }


/* ─────────────────────────────────────────────────────
   3. TYPOGRAPHY
   ─────────────────────────────────────────────────────*/
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--clr-dark);
  margin-top: 0;
  margin-bottom: 0.5em;
}
[type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover {
    background-color: initial !important;
}
.text-xs    { font-size: var(--fs-xs); }
.text-sm    { font-size: var(--fs-sm); }
.text-base  { font-size: var(--fs-base); }
.text-lg    { font-size: var(--fs-lg); }
.text-xl    { font-size: var(--fs-xl); }
.text-2xl   { font-size: var(--fs-2xl); }
.text-3xl   { font-size: var(--fs-3xl); }
.text-4xl   { font-size: var(--fs-4xl); }

.font-normal   { font-weight: var(--fw-normal); }
.font-medium   { font-weight: var(--fw-medium); }
.font-semibold { font-weight: var(--fw-semibold); }
.font-bold     { font-weight: var(--fw-bold); }
.font-black    { font-weight: var(--fw-black); }

.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

.text-primary { color: var(--clr-primary); }
.text-secondary { color: var(--clr-secondary); }
.text-muted   { color: var(--clr-mid); }
.text-white   { color: var(--clr-white); }
.text-dark    { color: var(--clr-dark); }

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
.tracking-wide  { letter-spacing: 0.05em; }
.tracking-wider { letter-spacing: 0.1em; }

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--clr-dark-muted);
}

.overline {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-primary);
}

mark {
  background: var(--clr-accent);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}


/* ─────────────────────────────────────────────────────
   4. UTILITY CLASSES
   ─────────────────────────────────────────────────────*/

/* Display */
.d-none        { display: none !important; }
.d-block       { display: block !important; }
.d-flex        { display: flex !important; }
.d-grid        { display: grid !important; }
.d-inline      { display: inline !important; }
.d-inline-flex { display: inline-flex !important; }
.d-inline-block { display: inline-block !important; }

/* Flex helpers */
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.flex-1        { flex: 1; }
.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.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; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

/* Spacing */
.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mb-8 { margin-bottom: var(--space-8); }
.mt-auto { margin-top: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

.p-0  { padding: 0; }
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }

/* Width / Height */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.w-screen { width: 100vw; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }

/* Background */
.bg-primary  { background-color: var(--clr-primary); }
.bg-light    { background-color: var(--clr-light); }
.bg-dark     { background-color: var(--clr-dark); }
.bg-white    { background-color: var(--clr-white); }

/* Border */
.border       { border: 1px solid var(--clr-border); }
.border-top   { border-top: 1px solid var(--clr-border); }
.border-bottom { border-bottom: 1px solid var(--clr-border); }
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded      { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadows */
.shadow-sm  { box-shadow: var(--shadow-sm); }
.shadow     { box-shadow: var(--shadow-md); }
.shadow-lg  { box-shadow: var(--shadow-lg); }
.shadow-xl  { box-shadow: var(--shadow-xl); }
.shadow-none { box-shadow: none; }

/* Aspect Ratio */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video  { aspect-ratio: 16 / 9; }
.aspect-portrait { aspect-ratio: 3 / 4; }

/* Object fit */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-center  { object-position: center; }

/* Opacity */
.opacity-0  { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

/* Visibility */
.invisible  { visibility: hidden; }
.visible    { visibility: visible; }

/* Pointer */
.cursor-pointer { cursor: pointer; }
.pointer-events-none { pointer-events: none; }

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


/* ─────────────────────────────────────────────────────
   5. LAYOUT HELPERS
   ─────────────────────────────────────────────────────*/
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.container-sm  { max-width: var(--container-sm); }
.container-md  { max-width: var(--container-md); }
.container-lg  { max-width: var(--container-lg); }
.container-xl  { max-width: var(--container-xl); }
.container-2xl { max-width: var(--container-2xl); }

/* Grid columns */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Sezione standard */
.section { padding: var(--space-20) 0; }
.section-sm { padding: var(--space-12) 0; }
.section-lg { padding: var(--space-24) 0; }


/* ─────────────────────────────────────────────────────
   6. COMPONENTI UI
   ─────────────────────────────────────────────────────*/

/* ── Pulsanti ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.65em 1.4em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-family: var(--font-body);
  line-height: 1;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast);
  white-space: nowrap;
  user-select: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--clr-primary);
  color: var(--clr-white);
  border-color: var(--clr-primary);
}
.btn-primary:hover {
  background: var(--clr-primary-dark);
  border-color: var(--clr-primary-dark);
  color: var(--clr-white);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background: transparent;
  color: var(--clr-primary);
  border-color: var(--clr-primary);
}
.btn-outline:hover {
  background: var(--clr-primary);
  color: var(--clr-white);
}

.btn-ghost {
  background: transparent;
  color: var(--clr-dark);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--clr-light); }

.btn-secondary {
  background: var(--clr-secondary);
  color: var(--clr-white);
  border-color: var(--clr-secondary);
}

.btn-sm { font-size: var(--fs-xs); padding: 0.5em 1em; }
.btn-lg { font-size: var(--fs-md); padding: 0.8em 2em; border-radius: var(--radius-lg); }
.btn-xl { font-size: var(--fs-lg); padding: 1em 2.5em; border-radius: var(--radius-xl); }
.btn-block { width: 100%; justify-content: center; }
.btn-rounded { border-radius: var(--radius-full); }
.btn-icon { padding: 0.65em; }

/* ── Card ── */
.card {
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.card-body  { padding: var(--space-6); }
.card-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--clr-border); background: var(--clr-light); }
.card-header { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--clr-border); }
.card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

/* ── Badge ── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.65em;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  border-radius: var(--radius-full);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.badge-primary   { background: var(--clr-primary-light); color: var(--clr-primary); }
.badge-success   { background: #d1fae5; color: #065f46; }
.badge-warning   { background: #fef3c7; color: #92400e; }
.badge-error     { background: #fee2e2; color: #991b1b; }
.badge-dark      { background: var(--clr-dark); color: var(--clr-white); }

/* ── Alert ── */
.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border-left: 4px solid;
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
}
.alert-info    { background: #eff6ff; border-color: var(--clr-info); color: #1e3a5f; }
.alert-success { background: #f0fdf4; border-color: var(--clr-success); color: #14532d; }
.alert-warning { background: #fffbeb; border-color: var(--clr-warning); color: #78350f; }
.alert-error   { background: #fef2f2; border-color: var(--clr-error); color: #7f1d1d; }

/* ── Sezione Hero ── */
.hero {
  min-height: 80vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero-content { position: relative; z-index: var(--z-raised); }
.hero-bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  z-index: var(--z-below);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.2) 100%);
  z-index: var(--z-base);
}

/* ── Section heading ── */
.section-heading { margin-bottom: var(--space-10); }
.section-heading .overline { display: block; margin-bottom: var(--space-2); }
.section-heading h2 { font-size: var(--fs-3xl); margin-bottom: var(--space-3); }
.section-heading p  { color: var(--clr-mid); max-width: 600px; }
.section-heading.center { text-align: center; }
.section-heading.center p { margin-left: auto; margin-right: auto; }

/* ── Divider ── */
.divider {
  border: none;
  border-top: 1px solid var(--clr-border);
  margin: var(--space-8) 0;
}
.divider-dashed { border-style: dashed; }
.divider-thick  { border-top-width: 3px; }

/* ── Overlay ── */
.overlay-dark  { background: rgba(0,0,0,0.5); }
.overlay-light { background: rgba(255,255,255,0.8); backdrop-filter: blur(8px); }

/* ── Sticky header helper ── */
.site-header-sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--clr-white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal);
}

/* ── Back to top button ── */
#back-to-top {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--clr-primary);
  color: var(--clr-white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal), transform var(--transition-fast);
  font-size: 1.2rem;
}
#back-to-top.visible { opacity: 1; visibility: visible; }
#back-to-top:hover { transform: translateY(-3px); }

/* ── Breadcrumb ── */
.hec-breadcrumb ol {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 4px;
  font-size: var(--fs-sm); color: var(--clr-mid);
}
.hec-breadcrumb li + li::before { content: '/'; margin-right: 4px; color: var(--clr-border); }
.hec-breadcrumb a { color: var(--clr-mid); }
.hec-breadcrumb a:hover { color: var(--clr-primary); }

/* ── Loading spinner ── */
.spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--clr-border);
  border-top-color: var(--clr-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Skeleton loading ── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: var(--radius-md);
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Video embed responsive ── */
.embed-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}
.embed-responsive iframe,
.embed-responsive video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ── Cookie banner (base) ── */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--z-toast);
  background: var(--clr-dark);
  color: var(--clr-white);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-xl);
  transform: translateY(100%);
  transition: transform var(--transition-slow);
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner a { color: var(--clr-accent); }
/* ── Typing Effect ── */
.typing-word {
    display: inline;
    font-family: var(--font-heading);
    /*font-size: 96px;*/
    font-size: clamp(65px, 8vw, 96px);
    color: var(--clr-accent);
    text-align: center;
}

.typing-cursor {
    display: inline-block;
    font-weight: 300;
    margin-left: 2px;
    animation: cursor-blink 0.75s step-end infinite;
    opacity: 0 !important;
    color: var(--clr-border);
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ─────────────────────────────────────────────────────
   7. ANIMAZIONI
   ─────────────────────────────────────────────────────*/
@keyframes fadeIn        { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp      { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown    { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft    { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight   { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn       { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes slideInUp     { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes pulse         { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes bounce        { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes wiggle        { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }

.animate-fade-in       { animation: fadeIn 0.5s ease forwards; }
.animate-fade-in-up    { animation: fadeInUp 0.6s ease forwards; }
.animate-fade-in-down  { animation: fadeInDown 0.6s ease forwards; }
.animate-fade-in-left  { animation: fadeInLeft 0.6s ease forwards; }
.animate-fade-in-right { animation: fadeInRight 0.6s ease forwards; }
.animate-scale-in      { animation: scaleIn 0.4s ease forwards; }
.animate-pulse         { animation: pulse 2s infinite; }
.animate-bounce        { animation: bounce 1s infinite; }
.animate-wiggle        { animation: wiggle 0.5s ease; }

/* Delay utilities */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-500 { animation-delay: 500ms; }
.delay-700 { animation-delay: 700ms; }

/* Transition utilities */
.transition       { transition: all var(--transition-normal); }
.transition-fast  { transition: all var(--transition-fast); }
.transition-slow  { transition: all var(--transition-slow); }
.transition-none  { transition: none; }

/* Hover effects */
.hover-lift:hover        { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.hover-scale:hover       { transform: scale(1.03); }
.hover-glow:hover        { box-shadow: var(--shadow-glow); }
.hover-opacity:hover     { opacity: 0.8; }
.hover-underline:hover   { text-decoration: underline; }


/* ─────────────────────────────────────────────────────
   8. ACCESSIBILITÀ
   ─────────────────────────────────────────────────────*/
:focus-visible {
  outline: 3px solid var(--clr-primary);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-color-scheme: dark) {
  /* Decommentare per supporto dark mode automatico */
  /*
  :root {
    --clr-dark:  #f9fafb;
    --clr-white: #111827;
    --clr-border: #374151;
  }
  */
}


/* ─────────────────────────────────────────────────────
   9. PRINT
   ─────────────────────────────────────────────────────*/
@media print {
  nav, footer, .no-print, #back-to-top, .cookie-banner { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  a { color: #000; }
  a[href]::after { content: " (" attr(href) ")"; }
  h1, h2, h3 { page-break-after: avoid; }
  img { max-width: 100% !important; }
}


/* ─────────────────────────────────────────────────────
   ZONA CUSTOM — aggiungi qui i tuoi stili specifici
   ─────────────────────────────────────────────────────*/


/*WIDGET ELEMENTOR BOTTONE CIRCLE*/
/* ── IP Bottone Circolare ────────────────────────────── */
.ip-cbtn-wrap {
    display: inline-flex;
}

.ip-cbtn {
    display: inline-block;
    color: var(--ip-text); /* Testo scuro di default */
    padding: 32px;
    position: relative;
    letter-spacing: 1px;
    text-decoration: none;
    cursor: pointer;
}

.ip-cbtn__circle {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 100%;    
    border: 1px solid var(--clr-secondary);
    /* Usa il colore icone/neutro per il cerchio sottile */
    box-shadow: 0 0 1px 1px var(--clr-secondary); 
    transition: transform 0.3s linear;
}

.ip-cbtn__white-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 56px;
    height: 56px;
    border-radius: 100%;
    background: var(--clr-secondary) !important; /* Colore Main #A5998D */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out;
}

.ip-cbtn__white-circle svg path {
    fill: var(--clr-white); /* Icona bianca sul cerchio colorato */
}

.ip-cbtn__text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    z-index: 2;
    padding: 24px 8px;
    transition: transform 0.3s linear;
    font-family: var(--font-body); 
    font-weight: var(--fw-semibold); /* Spessore consigliato per i bottoni */
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase; 
    color: inherit;
}

/* Hover Effects */
.ip-cbtn:hover .ip-cbtn__circle {
    transform: scale(0);
}
.ip-cbtn:hover .ip-cbtn__white-circle {
    transform: translate(-50%, -50%) scale(1);
}
.ip-cbtn:hover .ip-cbtn__text {
    transform: translate(40px, -50%);
    color: var(--clr-primary); /* Il testo vira sul colore brand al passaggio */
}
.ip-cbtn:hover .ip-cbtn__white-circle svg {
  width: 40px !important;
}
.ip-cbtn:hover .ip-cbtn__white-circle path {
    fill: #EDEBE5 !important;
}

/* Variante per sfondi scuri (se il bottone è su fondo #2F2B2D) */
.ip-cbtn--light {
    color: var(--clr-primary-light);
}
.ip-cbtn--light .ip-cbtn__circle {
    box-shadow: 0 0 1px 1px var(--clr-primary-light);
}



/* ================================================
   Servizi Carousel
   ================================================ */

/* Wrapper: overflow hidden → fa vedere solo il peek */
.servizi-carousel-wrap {
    overflow: hidden;
    padding-bottom: 32px;
}

/* Card */
.servizio-card {
    border-radius: 14px;
    overflow: hidden;
    background: #f5f3f0;
    display: flex;
    flex-direction: column;
}

/* Immagine */
.servizio-card__img img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.servizio-card:hover .servizio-card__img img {
    transform: scale(1.03);
}

/* Body */
.servizio-card__body {
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

/* Titolo */
.servizio-card__title {
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    font-weight: 400;
    margin: 0;
    line-height: 1.2;
}

/* Excerpt */
.servizio-card__excerpt {
    font-size: 0.875rem;
    color: #666;
    margin: 0;
    line-height: 1.6;
}

/* Link */
.servizio-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #333;
    text-decoration: none;
    border: 1px solid #c8c4be;
    border-radius: 50px;
    padding: 7px 18px;
    width: fit-content;
    margin-top: auto;
    transition: background 0.2s, border-color 0.2s;
}
.servizio-card__link:hover {
    background: #ece9e3;
    border-color: #aaa;
}

/* Owl dots */
.servizi-owl .owl-dots {
    margin-top: 20px;
    text-align: center;
}
.servizi-owl .owl-dot span {
    background: #d0cdc8 !important;
    transition: background 0.2s !important;
}
/* ── Servizio Card — struttura con immagine di sfondo ── */

.owl-carousel.owl-drag .owl-item {
  width: 624px !important;
}

.servizio-card {
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    height: 800px;
}

@media (max-width: 768px) {
    .servizio-card {
        height: 400px;
    }
}

@media (max-width: 480px) {
    .servizio-card {
        height: 320px;
    }
}

.servizio-card__inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.servizio-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}
.servizio-card:hover .servizio-card__bg {
    transform: scale(1.04);
}
/*
.servizio-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.65) 100%);
}*/

.servizio-card__content {
    position: absolute;
    bottom: 80px;
    left: 40px;
    right: 0;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.servizio-card__title {
    font-size: 45px;
    font-weight: 300;
    color: var(--clr-dark);
    margin: 0;
    line-height: 1.2;
}

/* Owl dots */
.servizi-carousel-wrap { overflow: hidden; padding-bottom: 36px; }
.servizi-owl .owl-dots { margin-top: 20px; text-align: center; }
.servizi-owl .owl-dot span { background: #d0cdc8 !important; }
.servizi-owl .owl-dot.active span { background: #555 !important; }
  /* ════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════ */

.hec-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.hec-header--default {
    background: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

.hec-header--overlay {
    background: transparent;
    max-width: 100% !important;
}
.hec-header--overlay.scrolled {
    background: rgba(0,0,0,0.95);
    backdrop-filter: blur(8px);
    max-width: 100% !important;
    padding: 5px 0 !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}
.hec-header--overlay.scrolled .hec-header__inner { 
    padding: 5px 20px !important;
}
.hec-header--overlay.scrolled .hec-header__logo img {
    height: 90px;
    width: auto;
    display: block;
}

.hec-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px;
    max-width: 1140px;
    margin: 0 auto;
    width: 100%;
}

.hec-header__logo img {
    height: 126px;
    width: auto;
    display: block;
}

/* ── Burger ── */
.hec-burger {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    position: relative;
    z-index: 1100;
}

.hec-burger__line {
    display: block;
    width: 28px;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hec-header--overlay .hec-burger__line         { background: #fff; }
.hec-header--overlay.scrolled .hec-burger__line { background: #222; }
.hec-header--default .hec-burger__line          { background: #222; }


/* ════════════════════════════════════════════
   NAV OVERLAY — slide da destra
   ════════════════════════════════════════════ */

.hec-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.18, 1);
    background: #9a8f85;
}

.hec-nav-overlay.is-open {
    transform: translateX(0);
    pointer-events: all;
}

.hec-nav-overlay__circle { display: none; }

/* Chiudi */
.hec-nav-overlay__close {
    position: absolute;
    top: 90px;
    right: 40px;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    width: 40px;
    height: 40px;
    padding: 4px;
    opacity: 0;
    transition: opacity 0.3s ease 0.35s;
    z-index: 10;
}
.hec-nav-overlay.is-open .hec-nav-overlay__close { opacity: 1; }
.hec-nav-overlay__close svg { width: 100%; height: 100%; }

/* ── Lista voci principali ── */
.hec-nav-overlay__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hec-nav-overlay__list > li {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.hec-nav-overlay.is-open .hec-nav-overlay__list > li {
    opacity: 1;
    transform: translateX(0);
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.hec-nav-overlay__list > li > a {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    line-height: 1.2;
    transition: opacity 0.2s;
    font-family: var(--font-heading);
}
.hec-nav-overlay__list > li > a:hover { opacity: 0.6; }

/* ── Toggle freccia ── */
.hec-submenu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    width: 32px;
    height: 32px;
    padding: 4px;
    margin-left: 12px;
    vertical-align: middle;
}
.hec-submenu-toggle svg {
    transition: transform 0.3s ease;
    display: block;
    width: 100%;
    height: 100%;
}
.menu-item-has-children.is-open .hec-submenu-toggle svg {
    transform: rotate(180deg);
}

/* Blocca scroll body quando menu aperto */
body.menu-is-open { overflow: hidden; }


/* ════════════════════════════════════════════
   DESKTOP (≥ 769px) — sottomenu in seconda colonna
   ════════════════════════════════════════════ */
@media (min-width: 769px) {

    .hec-nav-overlay__inner {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        max-width: 1140px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        padding: 80px 10vw;
        opacity: 0;
        transform: translateX(40px);
        transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
    }

    .hec-nav-overlay.is-open .hec-nav-overlay__inner {
        opacity: 1;
        transform: translateX(0);
    }

    .hec-nav-overlay__nav { grid-column: 1; }

    /* Sottomenu: seconda colonna */
    .hec-nav-overlay__list .sub-menu {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        list-style: none;
        padding: 0;
        margin: 0;

        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(0, -15%) translateX(240px) !important;
        width: 40vw;

        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s;
    }

    .hec-nav-overlay__list .menu-item-has-children.is-open .sub-menu {
        opacity: 1;
        pointer-events: all;
        transform: translate(0, -50%) translateX(0);
    }

    .sub-menu li a {
        font-size: 32px;
        color: rgba(255,255,255,0.75);
        text-decoration: none;
        line-height: 39px;
        display: block;
        transition: color 0.2s;
        font-family: var(--font-heading);
        font-weight: 300 !important;
    }
    .sub-menu li a:hover { color: #fff; }
}


/* ════════════════════════════════════════════
   MOBILE (≤ 768px) — accordion sotto il genitore
   ════════════════════════════════════════════ */
@media (max-width: 768px) {

    .hec-header__inner { padding: 16px 20px; }

    .hec-nav-overlay__inner {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 80px 24px;
        opacity: 0;
        transform: translateX(40px);
        transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
    }

    .hec-nav-overlay.is-open .hec-nav-overlay__inner {
        opacity: 1;
        transform: translateX(0);
    }

    .sub-menu {
        display: none;
        list-style: none;
        padding: 8px 0 8px 20px;
        margin: 0;
    }

    .menu-item-has-children.is-open .sub-menu {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .sub-menu li a {
        font-size: 1.1rem;
        color: rgba(255,255,255,0.75);
        text-decoration: none;
        line-height: 2;
        transition: color 0.2s;
    }
    .sub-menu li a:hover { color: #fff; }
}