/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/* ============================================================
   QUADRILATERO ALLESTIMENTI — CSS globale (child theme)
   Da caricare nel child theme insieme a quadrilatero.js
   Le classi .q-* si assegnano in Elementor: Avanzate → Classi CSS
   ============================================================ */


.elementor-nav-menu--dropdown-mobile ul.elementor-nav-menu li a.elementor-item.elementor-item-active{
	color: #142130 !important;
}


/* ---------- 1. TOKEN ---------- */
:root{
  --q-navy:#152E3A; --q-navy-2:#0F2530; --q-navy-3:#001F2E;
  --q-wine:#96033C; --q-wine-strong:#7A0230; --q-wine-deep:#6B002A;
  --q-teal:#4D9EBA; --q-orange:#EF8628; --q-peach:#F5B88E;
  --q-green:#8A9C3B; --q-green-dark:#075239;
  --q-slate:#6D6D70; --q-mist:#BBBDC0; --q-muted:#56697B;
  --q-paper:#FFFFFF; --q-paper-2:#F4F6F7; --q-paper-3:#EBEFF1;
  --q-line:#E3E9EC;
  --q-radius:18px; --q-radius-lg:26px;
  --q-shadow-sm:0 6px 18px rgba(21,46,58,.08);
  --q-shadow-md:0 18px 44px rgba(21,46,58,.14);
  --q-shadow-lg:0 30px 70px rgba(0,0,0,.35);
  --q-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. BASE ---------- */
::selection{ background:var(--q-wine); color:#fff; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* ---------- 3. HEADER A CAPSULA (Theme Builder) — ANTI-OVERFLOW su ogni device
   Assegna .q-header al contenitore esterno dell'header
   e .q-nav alla capsula interna. Lo stato .is-scrolled lo aggiunge il JS. ---------- */
.q-header, .q-header *{ box-sizing:border-box; }
.q-header{ position:fixed; inset:0 0 auto 0; left:0; right:0; width:100%;
  z-index:99; padding:1rem clamp(12px,4vw,24px); transition:padding .4s var(--q-ease); }

/* la capsula riempie il contenitore ma NON può superare lo schermo */
.q-header .q-nav{
  width:100%; max-width:1240px; min-width:0; margin-inline:auto; position:relative;
  border-radius:999px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  transition:background .45s var(--q-ease), border-color .45s var(--q-ease), box-shadow .45s var(--q-ease);
}
/* i figli si rimpiccioliscono invece di allargare la capsula (fix dello sfondamento) */
.q-header .q-nav > *{ min-width:0; }

.q-header.is-scrolled{ padding-top:.6rem; padding-bottom:.6rem; }
.q-header.is-scrolled .q-nav{
  background:rgba(255,255,255,.72); border-color:rgba(21,46,58,.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 12px 34px rgba(21,46,58,.12), 0 2px 8px rgba(21,46,58,.05);
}

/* logo: non allarga mai la capsula */
.q-header .q-logo, .q-header .q-logo-light, .q-header .q-logo-dark{ max-width:58%; }
.q-header .q-logo img, .q-header .q-logo-light img, .q-header .q-logo-dark img{ max-width:100%; height:auto; }

/* testo menu: bianco in cima, scuro da scrollato (adatta ai widget del tuo header) */
.q-header .elementor-nav-menu a{ color:rgba(255,255,255,.88); border-radius:999px; padding:.5rem 1rem; transition:background .25s,color .25s; }
.q-header .elementor-nav-menu a:hover{ background:rgba(255,255,255,.14); color:#fff; }
.q-header .elementor-nav-menu .current-menu-item > a{ background:rgba(255,255,255,.18); color:#fff; }
.q-header.is-scrolled .elementor-nav-menu a{ color:var(--q-navy); }
.q-header.is-scrolled .elementor-nav-menu a:hover{ background:rgba(21,46,58,.07); color:var(--q-navy); }
.q-header.is-scrolled .elementor-nav-menu .current-menu-item > a{ background:rgba(150,3,60,.11); color:var(--q-wine); }
/* logo doppio: .q-logo-light visibile in cima, .q-logo-dark da scrollato */
.q-header .q-logo-dark{ display:none; } .q-header .q-logo-light{ display:block; }
.q-header.is-scrolled .q-logo-dark{ display:block; } .q-header.is-scrolled .q-logo-light{ display:none; }

/* ----- 3b. MENU MOBILE (≤1024px): hamburger adattivo + pannello a comparsa -----
   Richiede il widget "Nav Menu" con Breakpoint/Dropdown impostato su Tablet.
   Se in header hai un pulsante CTA da nascondere su mobile, assegnagli .q-hide-mobile. */
@media (max-width:1024px){
  /* hamburger nativo Elementor: bianco in cima → navy da scrollato (era invisibile su bianco) */
  .q-header .elementor-menu-toggle{ color:#fff; border-radius:12px; padding:8px; }
  .q-header.is-scrolled .elementor-menu-toggle{ color:var(--q-navy); }
  .q-header .elementor-menu-toggle i,
  .q-header .elementor-menu-toggle svg{ font-size:26px; width:26px; height:26px; }

  /* nasconde eventuale CTA a cui hai assegnato .q-hide-mobile */
  .q-header .q-hide-mobile{ display:none !important; }

  /* pannello del menu: card bianca sotto la capsula, mai più larga della capsula */
  .q-header .elementor-nav-menu--dropdown,
  .q-header nav.elementor-nav-menu--dropdown{
    position:absolute; left:0; right:0; width:auto; top:calc(100% + 12px);
    background:#fff; border-radius:20px; border:1px solid rgba(21,46,58,.08);
    box-shadow:0 20px 50px rgba(21,46,58,.18);
    padding:10px; max-height:70vh; overflow:auto;
  }
  .q-header .elementor-nav-menu--dropdown a{
    color:var(--q-navy); font-weight:600; font-size:16px;
    padding:14px 16px; border-radius:12px;
  }
  .q-header .elementor-nav-menu--dropdown a:hover,
  .q-header .elementor-nav-menu--dropdown .current-menu-item > a{
    background:rgba(150,3,60,.09); color:var(--q-wine);
  }
}

/* schermi piccoli: capsula un filo più compatta */
@media (max-width:480px){
  .q-header{ padding-left:12px; padding-right:12px; }
  .q-header .q-nav{ padding:6px 8px; }
}

/* compensa l'header fisso sulla prima sezione di ogni pagina */
.q-page-offset{ padding-top:96px; }

/* ---------- 4. MARQUEE (striscia parole che scorre, identica alla demo)
   Assegna .q-marquee al CONTENITORE della striscia; dentro tieni UN widget
   Titolo con le parole separate da " · ". Il JS le trasforma in nastro
   scorrevole con i quadratini colorati; si ferma al passaggio del mouse. ---------- */
.q-marquee{ overflow:hidden; border-block:1px solid rgba(255,255,255,.08); }
.q-marquee .q-marquee__track{ display:flex; width:max-content; animation:q-marquee 30s linear infinite; will-change:transform; }
.q-marquee:hover .q-marquee__track{ animation-play-state:paused; }
.q-marquee__item{ display:inline-flex; align-items:center; padding:1.05rem 0; white-space:nowrap;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:clamp(1.05rem,2.1vw,1.65rem); letter-spacing:-.01em; color:#fff; }
.q-marquee__item > span{ padding:0 1.5rem; }
.q-marquee__sep i{ display:block; width:11px; height:11px; border-radius:3px; background:var(--q-wine); }
.q-marquee__sep:nth-child(4n+3) i{ background:var(--q-teal); }
@keyframes q-marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .q-marquee .q-marquee__track{ animation:none; } }

/* ---------- 5. CARD & HOVER ---------- */
/* sollevamento card: assegna .q-lift al contenitore-card */
.q-lift{ transition:transform .4s var(--q-ease), box-shadow .4s var(--q-ease); }
.q-lift:hover{ transform:translateY(-8px); box-shadow:var(--q-shadow-md); }
/* zoom immagine al passaggio (per Image/Image Box): assegna .q-zoom */
.q-zoom img{ transition:transform .6s var(--q-ease); }
.q-zoom:hover img{ transform:scale(1.05); }
/* barra colorata che si accende in alto alla card: .q-topbar + colore via --q-accent */
.q-topbar{ position:relative; overflow:hidden; }
.q-topbar::before{ content:""; position:absolute; left:0; top:0; height:4px; width:100%;
  background:var(--q-accent,var(--q-teal)); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--q-ease); z-index:2; }
.q-topbar:hover::before{ transform:scaleX(1); }

/* ---------- 6. REVEAL ALLO SCROLL
   Assegna .q-reveal agli elementi/contenitori da animare in ingresso.
   Ritardi: aggiungi anche .q-d1 / .q-d2 / .q-d3 ---------- */
.q-reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--q-ease), transform .7s var(--q-ease); }
.q-reveal.is-in{ opacity:1; transform:none; }
.q-d1.is-in{ transition-delay:.12s; } .q-d2.is-in{ transition-delay:.24s; } .q-d3.is-in{ transition-delay:.36s; }
@media (prefers-reduced-motion:reduce){ .q-reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- 7. PULSANTI ---------- */
/* freccia che scivola (se il pulsante ha un'icona) */
.elementor-button .elementor-button-icon{ transition:transform .3s var(--q-ease); }
.elementor-button:hover .elementor-button-icon{ transform:translateX(4px); }
/* variante ghost: assegna .q-btn-ghost al widget Pulsante */
.q-btn-ghost .elementor-button{ background:transparent; border:1px solid rgba(255,255,255,.45); color:#fff; }
.q-btn-ghost .elementor-button:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff; }
.q-btn-ghost--dark .elementor-button{ background:transparent; border:1px solid rgba(21,46,58,.35); color:var(--q-navy); }
.q-btn-ghost--dark .elementor-button:hover{ background:rgba(21,46,58,.06); border-color:var(--q-navy); color:var(--q-navy); }

/* ---------- 8. UTILITÀ SEZIONI ---------- */
.q-dark{ background:linear-gradient(160deg,var(--q-navy-2),var(--q-navy-3)); }
.q-dark h1,.q-dark h2,.q-dark h3,.q-dark h4{ color:#fff; }
.q-dark p{ color:rgba(255,255,255,.75); }
.q-card-dark{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--q-radius); }
.q-eyebrow{ color:var(--q-teal); font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:13px; }

/* ---------- 9. BACK TO TOP (iniettato dal JS) ---------- */
.q-top{ position:fixed; right:22px; bottom:22px; z-index:98; width:48px; height:48px; border-radius:14px;
  display:grid; place-items:center; background:var(--q-wine); color:#fff; border:none; cursor:pointer;
  box-shadow:var(--q-shadow-md); opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .3s var(--q-ease), transform .3s var(--q-ease), background .25s; }
.q-top.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.q-top:hover{ background:var(--q-wine-strong); }

/* ---------- 10. FORM (Elementor Pro Form) ---------- */
.q-form .elementor-field{ background:var(--q-paper-2); border:1px solid var(--q-line); border-radius:12px; }
.q-form .elementor-field:focus{ border-color:var(--q-teal); box-shadow:0 0 0 3px rgba(77,158,186,.18); outline:none; }

/* ---------- 11. BAGLIORE PUNTATORE + PARALLAX 3D (hero)
   .q-spotlight  → sul contenitore HERO: alone teal che segue il mouse
   .q-parallax   → sul contenitore/immagine dentro l'hero: inclinazione 3D
   .q-tilt       → sulle card: tilt 3D leggero al passaggio ---------- */
.q-spotlight{ position:relative; overflow:hidden; }
.q-spotlight > .elementor-container,
.q-spotlight > .e-con-inner{ position:relative; z-index:1; } /* contenuto sopra l'alone */
.q-spotlight .q-spot{
  position:absolute; width:560px; height:560px; border-radius:50%;
  left:72%; top:34%; transform:translate(-50%,-50%);
  pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(77,158,186,.20), transparent 62%);
  transition:left .35s ease, top .35s ease;
}
.q-parallax{ transform-style:preserve-3d; transition:transform .25s var(--q-ease); will-change:transform; }
.q-tilt{ transition:transform .35s var(--q-ease), box-shadow .35s var(--q-ease); }
@media (prefers-reduced-motion:reduce){
  .q-spotlight .q-spot{ display:none; }
  .q-parallax, .q-tilt{ transition:none; }
}
@media (max-width:767px){ .q-spotlight .q-spot{ width:380px; height:380px; } }

/* ===== HERO IMAGE — identica alla demo (card + chip + ingresso) ===== */
.q-heroimg{position:relative;}
.q-heroimg img{
  width:100%;height:auto;display:block;
  aspect-ratio:1/1;object-fit:cover;
  border-radius:22px;border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 70px rgba(0,0,0,.42);
  animation:qHeroIn .9s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes qHeroIn{from{opacity:0;transform:scale(1.04);}to{opacity:1;transform:none;}}
/* chip in vetro con quadratino bordeaux */
.q-heroimg::after{
  content:'Allestimenti su misura';
  position:absolute;left:16px;bottom:16px;z-index:2;
  padding:8px 14px 8px 31px;border-radius:999px;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;color:#fff;
  background:rgba(8,16,22,.5);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  white-space:nowrap;
}
.q-heroimg::before{
  content:'';position:absolute;left:28px;bottom:27px;z-index:3;
  width:11px;height:11px;border-radius:3px;background:#96033C;
  box-shadow:0 0 0 3px rgba(150,3,60,.25);
}
@media (prefers-reduced-motion:reduce){.q-heroimg img{animation:none;}}
/* ===== PULSANTE PRIMARIO — identico alla demo ===== */
.q-btn-primary .elementor-button{
  display:inline-flex;align-items:center;gap:.6rem;
  background:#96033C;color:#fff;border-radius:100px;
  padding:15px 26px;font-family:'Manrope',sans-serif;font-weight:700;
  font-size:15.5px;letter-spacing:.01em;
  box-shadow:0 8px 24px rgba(150,3,60,.30);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),background .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s cubic-bezier(.22,.61,.36,1);
  will-change:transform;border:none;
}
.q-btn-primary .elementor-button:hover{
  transform:translateY(-3px);background:#7A0230;
  box-shadow:0 14px 34px rgba(150,3,60,.42);color:#fff;
}
.q-btn-primary .elementor-button-icon{display:inline-flex;transition:transform .3s cubic-bezier(.22,.61,.36,1);}
.q-btn-primary .elementor-button:hover .elementor-button-icon{transform:translateX(4px);}
.q-btn-primary .elementor-button-icon svg{width:18px;height:18px;fill:currentColor;}
/* ===== TESSERE LOGO accanto agli occhielli ===== */
.q-eyebrow .elementor-heading-title{display:inline-flex;align-items:center;gap:.6rem;}
.q-eyebrow .elementor-heading-title::before{
  content:'';width:17px;height:17px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3Crect width='7' height='7' rx='2' fill='%234D9EBA'/%3E%3Crect x='10' width='7' height='7' rx='2' fill='%2396033C'/%3E%3Crect y='10' width='7' height='7' rx='2' fill='%238A9C3B'/%3E%3Crect x='10' y='10' width='7' height='7' rx='2' fill='%23EF8628'/%3E%3C/svg%3E") no-repeat center/contain;
}