/*
 * 303lab.es — stile del sito pubblico.
 * Valori ricavati dal sito originale in Bricks: html a 62.5% (1rem = 10px)
 * e le stesse variabili clamp() per testi, spazi e raggi.
 */

@font-face { font-family: "Apercu-mono"; src: url("../fonts/ApercuMonoPro-Light.woff2") format("woff2"), url("../fonts/ApercuMonoPro-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: fallback; }
@font-face { font-family: "Apercu-mono"; src: url("../fonts/ApercuMonoPro-Regular.woff2") format("woff2"), url("../fonts/ApercuMonoPro-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: fallback; }
@font-face { font-family: "Apercu-mono"; src: url("../fonts/ApercuMonoPro-Medium.woff2") format("woff2"), url("../fonts/ApercuMonoPro-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: fallback; }
@font-face { font-family: "Apercu-mono"; src: url("../fonts/ApercuMonoPro-Bold.woff2") format("woff2"), url("../fonts/ApercuMonoPro-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: fallback; }

:root {
  /* spazi */
  --space-xxs: clamp(0.4rem, 0.2rem + 0.4vw, 0.6rem);
  --space-xs: clamp(0.6rem, 0.2rem + 0.6vw, 0.8rem);
  --space-s: clamp(0.8rem, 0.3rem + 1.0vw, 1.2rem);
  --space-m: clamp(1.2rem, 0.6rem + 1.6vw, 2.0rem);
  --space-l: clamp(1.6rem, 0.8rem + 2.4vw, 3.0rem);
  --space-xl: clamp(2.4rem, 1.2rem + 3.6vw, 4.0rem);
  --space-xxl: clamp(3.2rem, 1.6rem + 4.8vw, 5.6rem);
  --space-xxxl: clamp(4.8rem, 2.4rem + 6.4vw, 8.0rem);
  --gap-s: clamp(0.8rem, 0.3rem + 1.0vw, 1.2rem);
  --gap-m: clamp(1.2rem, 0.6rem + 1.6vw, 2.0rem);
  --gap-l: clamp(1.6rem, 0.8rem + 2.4vw, 3.0rem);
  --gap-xl: clamp(2.4rem, 1.2rem + 3.6vw, 4.0rem);
  --gap-xxl: clamp(3.2rem, 1.6rem + 4.8vw, 5.6rem);
  /* testi */
  --text-tiny: clamp(1.2rem, 0.8rem + 0.5vw, 1.4rem);
  --text-small: clamp(1.4rem, 1.0rem + 0.6vw, 1.6rem);
  --text-regular: clamp(1.6rem, 1.2rem + 1.2vw, 2.0rem);
  --text-medium: clamp(2.0rem, 1.4rem + 1.6vw, 2.666rem);
  --text-large: clamp(2.666rem, 1.6rem + 2.2vw, 3.55rem);
  --text-xlarge: clamp(3.55rem, 1.8rem + 3.0vw, 4.73rem);
  --fs-h5: clamp(2.0rem, 1.2rem + 1.6vw, 2.666rem);
  /* raggi */
  --rad-m: 12px;
  --rad-xl: 24px;
  --rad-xxl: 32px;
  /* colori */
  --white: #ffffff;
  --grey-300: #f7f5f5;
  --black: #000000;
  --box-dark: #141414;       /* riquadri neri grandi: hero pagine servizio, footer */
  --green: #8E5FE4;          /* il viola del sito si chiama "green" in Bricks */
  --button-hover: #7b48d9;
  --accordion: #D9D9D9;
  --switch-border: #e2e8f0;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* entrate e uscite */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* pannelli che scorrono */
  --font: "Apercu-mono", "Apercu Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--grey-300); color: var(--black); font-family: var(--font); font-size: var(--text-tiny); font-weight: 400; line-height: 1.7; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, p, ul, figure { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea { font: inherit; color: inherit; }
.nobr { white-space: nowrap; }   /* parole col trattino nei titoli (vedi hbr() in inc/helpers.php) */
.skip { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--green); color: #fff; padding: 8px 14px; }
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- Pulsanti (bricks-button) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: .5em 1em; border-radius: var(--rad-m); font-size: var(--text-small); font-weight: 400; line-height: 1.7; letter-spacing: .5px; cursor: var(--cur-hand); border: 0; text-align: center; transition: background-color .1s, border-color .1s; }
.btn--primary { background: var(--green); color: var(--white); }
.btn--primary:hover { background: var(--button-hover); }
.btn--bold { font-weight: 700; }
.btn--outline-primary { background: var(--green); border: 2px solid var(--green); color: var(--white); }
.btn--outline-primary:hover { background: var(--button-hover); border-color: var(--button-hover); }
.btn--outline-light { background: transparent; border: 2px solid var(--white); color: var(--white); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); }
.btn svg { width: .7em; height: 1em; flex: none; }
/* Pulsanti con icona a comparsa ("Enviar mensaje" = freccia, "Hablamos" = fumetto): l'icona compare solo con il mouse. È un pseudo-elemento (non un <svg>) perché lo script riscrive il testo del pulsante durante l'invio.
   Da nascosta ha larghezza 0 e margine negativo che annulla il gap: il testo resta centrato e non salta quando la freccia entra. */
.btn--reveal { --reveal-size: 1.2em; --reveal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E"); }
.btn--reveal::after { content: ""; flex: none; width: 0; height: var(--reveal-size); margin-left: -10px; opacity: 0; transform: translateX(-6px); background: currentColor; -webkit-mask: var(--reveal-icon) center / contain no-repeat; mask: var(--reveal-icon) center / contain no-repeat; transition: width .25s var(--ease-out), margin-left .25s var(--ease-out), opacity .2s ease-out, transform .25s var(--ease-out); }
@media (hover: hover) { .btn--reveal:not(:disabled):hover::after { width: var(--reveal-size); margin-left: 0; opacity: 1; transform: none; } }
.btn--reveal:not(:disabled):focus-visible::after { width: var(--reveal-size); margin-left: 0; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .btn--reveal::after { transition: none; } }

/* ---------- Header (fisso allo scroll) ----------
   Resta in cima mentre si scorre. È "sticky": occupa sempre lo stesso spazio, quindi la pagina sotto non salta mai.
   In cima alla pagina è alto (10vh) e senza fondo proprio: sotto c'è già il grigio della pagina, come prima.
   Appena si scorre (.is-scrolled, messa da site.js) diventa compatto: la barra sale di --hh-shift e il contenuto scende
   di metà, così resta centrato in una barra alta --hh-c; il logo si riduce appena. Le misure cambiano solo con transform
   (niente ricalcolo dell'impaginazione). Il fondo diventa il grigio della pagina quasi pieno (90%) e sfocato, con una
   linea sottile sotto (::before): la barra si stacca dai contenuti che le scorrono sotto, e la sfocatura evita che si
   leggano in trasparenza dietro le voci del menu.
   Nota: la sfocatura sta sull'header stesso e non su ::before perché view-transition-name (cambio pagina morbido, in fondo)
   isola l'header: uno strato interno non vedrebbe la pagina sotto da sfocare. */
html { scroll-padding-top: 72px; }
.header { --hh: 10vh; --hh-c: 64px; --hh-shift: max(0px, calc(var(--hh) - var(--hh-c))); --hh-ease: cubic-bezier(0.25, 1, 0.5, 1);
  position: sticky; top: 0; z-index: 50; height: var(--hh); padding: var(--space-s) var(--space-m); display: flex; align-items: center; justify-content: center;
  background-color: rgb(247 245 245 / 0); }
.header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  box-shadow: 0 1px 0 rgb(0 0 0 / .07), 0 10px 30px -18px rgb(0 0 0 / .2); }
.header__in { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.header__logo img { height: 38px; width: auto; transform-origin: left center; }
.header.is-scrolled { transform: translateY(calc(-1 * var(--hh-shift))); background-color: rgb(247 245 245 / .9);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .header.is-scrolled { background-color: rgb(247 245 245 / .97); } }
.header.is-scrolled::before { opacity: 1; }
.header.is-scrolled .header__in { transform: translateY(calc(var(--hh-shift) / 2)); }
.header.is-scrolled .header__logo img { transform: scale(.86); }
/* le transizioni partono solo dopo il primo disegno: una pagina riaperta già scorsa nasce compatta, senza animazione */
.header.is-ready { transition: transform .26s var(--hh-ease), background-color .2s ease-out; }
.header.is-ready::before { transition: opacity .2s ease-out; }
.header.is-ready .header__in, .header.is-ready .header__logo img { transition: transform .26s var(--hh-ease); }
.scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; opacity: 0; }
.nav { display: flex; align-items: center; }
.nav ul { display: flex; }
.nav li { margin-left: 30px; }
.nav a { display: block; font-size: var(--text-small); font-weight: 500; text-transform: capitalize; line-height: 1.7; color: var(--black); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--black); }
@media (hover: hover) {
  /* menu desktop: all'hover compare dietro la voce una pillola grigia tenue */
  .nav ul { isolation: isolate; }
  .nav a { position: relative; }
  .nav a::before { content: ""; position: absolute; inset: -3px -12px; border-radius: 999px; background: rgba(0, 0, 0, .065); opacity: 0; transform: scale(.9); transition: opacity .18s ease-out, transform .18s ease-out; z-index: -1; pointer-events: none; }
  .nav a:hover::before { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .nav a::before { transition: opacity .01s; transform: none; } }
  /* menu mobile: all'hover compare il pallino viola a destra della voce */
  .mmenu__link:hover::after { opacity: 1; transform: none; }
}
.header__right { display: flex; align-items: center; justify-content: flex-end; column-gap: var(--gap-l); width: 239px; }
.lang { width: 90px; font-weight: 700; }
.switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1.5px solid var(--switch-border); }
.switch__item { display: inline-flex; align-items: center; justify-content: center; padding: 4px 14px; border-radius: 999px; font-size: .875rem; font-weight: 500; line-height: 1; }
.switch__item:hover { opacity: .75; }
.switch__item--on { background: var(--green); color: var(--white); font-weight: 600; pointer-events: none; }
/* burger: due linee da 22 px (la seconda corta, a destra) dentro un'area da toccare di 44 px; il margine negativo allinea il bordo destro dell'icona al margine della pagina.
   Al passaggio del mouse la linea corta si allunga; con il menu aperto le due linee si incrociano in una X. */
.burger { display: none; flex: none; width: 44px; height: 44px; margin-right: -12px; padding: 0; border-radius: 8px; background: none; border: 0; cursor: var(--cur-hand); position: relative; transition: transform .14s var(--ease-out); }
.burger:active { transform: scale(.92); }
.burger span { position: absolute; height: 2px; border-radius: 2px; background: var(--black); transition: transform .3s var(--ease-out), width .22s var(--ease-out), left .22s var(--ease-out); }
.burger span:nth-child(1) { top: 17px; left: 10px; width: 22px; }
.burger span:nth-child(2) { top: 25px; left: 18px; width: 14px; }
@media (hover: hover) { .burger:hover span:nth-child(2) { left: 10px; width: 22px; } }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { left: 10px; width: 22px; transform: translateY(-4px) rotate(-45deg); }
/* menu mobile: scheda bianca che entra da destra (dove sta il burger); da chiuso non si raggiunge nemmeno con Tab (visibility).
   Entra con la curva "drawer" (380 ms) ed esce più in fretta (260 ms); le voci arrivano a cascata solo in apertura. */
.mmenu { position: fixed; top: 10px; right: 10px; bottom: 10px; width: 340px; max-width: 88vw; display: flex; flex-direction: column; background: var(--white); color: var(--black); border-radius: var(--rad-xl); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; transform: translateX(calc(100% + 20px)); visibility: hidden; transition: transform .26s var(--ease-out), visibility 0s linear .26s; z-index: 60; }
.mmenu.is-open { transform: none; visibility: visible; transition: transform .38s var(--ease-drawer), visibility 0s; }
.mmenu__top { flex: none; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 8px 0 24px; }
.mmenu__mark img { width: 34px; height: auto; }
.mmenu__close { width: 44px; height: 44px; border-radius: 8px; background: none; border: 0; color: var(--black); font-size: 30px; line-height: 1; cursor: var(--cur-hand); transition: transform .14s var(--ease-out); }
.mmenu__close:active { transform: scale(.92); }
.mmenu__list { flex: none; padding: 8px 24px 0; }
.mmenu__list li, .mmenu__cta, .mmenu__foot { opacity: 0; transform: translateX(14px); transition: opacity .18s ease-out, transform .18s ease-out; }
.mmenu.is-open .mmenu__list li, .mmenu.is-open .mmenu__cta, .mmenu.is-open .mmenu__foot { opacity: 1; transform: none; transition: opacity .3s ease-out calc(var(--i, 0) * 40ms + 80ms), transform .45s var(--ease-out) calc(var(--i, 0) * 40ms + 80ms); }
.mmenu__link { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,.08); font-size: clamp(1.8rem, 5.6vw, 2.2rem); font-weight: 500; line-height: 1.2; text-transform: capitalize; transform-origin: left center; transition: transform .14s var(--ease-out); }
/* pallino viola al posto dei vecchi numeri: fisso sulla pagina attuale, a comparsa con hover e tocco */
.mmenu__link::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 2px; border-radius: 50%; background: var(--green); opacity: 0; transform: scale(.4); transition: opacity .18s ease-out, transform .22s var(--ease-out); }
.mmenu__link:active { transform: scale(.98); }
.mmenu__link:active::after, .mmenu__link[aria-current="page"]::after { opacity: 1; transform: none; }
/* parte bassa del pannello: il margine automatico la spinge in fondo (sotto il pollice), con pulsante e contatti */
.mmenu__bottom { margin-top: auto; padding: 40px 24px 24px; display: flex; flex-direction: column; row-gap: 32px; }
.mmenu__cta .btn { width: 100%; min-height: 56px; padding: .55em 1em; font-size: clamp(1.8rem, 5vw, 2rem); transition: transform .14s var(--ease-out), background-color .1s; }
.mmenu__cta .btn:active { transform: scale(.97); }
.mmenu__cta .btn svg { width: 1.2em; height: 1.2em; }
.mmenu__foot { display: flex; flex-direction: column; row-gap: 14px; font-size: var(--text-tiny); color: rgba(0,0,0,.6); }
.mmenu__contact { display: flex; flex-direction: column; row-gap: 2px; }
.mmenu__foot a { color: var(--black); }
.mmenu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 55; }
.mmenu-overlay.is-open { opacity: 1; pointer-events: auto; }
html.is-menu-open { overflow: hidden; }
/* sotto i 1120 px il menu diventa burger e l'header resta su una sola riga: logo | IT-ES + pulsante | burger.
   Il menu esteso (logo 170 + voci ~560 + blocco destro 239 + margini) vuole ~1020 px: la soglia lascia margine per etichette più lunghe. */
@media (max-width: 1119px) {
  .header { --hh: 64px; --hh-c: 56px; }
  html { scroll-padding-top: 64px; }
  .header__in { flex-wrap: nowrap; column-gap: 12px; }
  .nav ul { display: none; }
  .nav { order: 3; }
  .burger { display: block; }
  .header__right { order: 2; width: auto; margin-left: auto; column-gap: 12px; }
  .lang { width: auto; }
}
/* sul telefono il pulsante "Parliamo" sta nel menu: nell'header restano logo, lingua e burger */
@media (max-width: 575px) {
  .header__logo img { height: 32px; }
  .header.is-scrolled .header__logo img { transform: scale(.9); }
  .header__right .btn { display: none; }
}

/* ---------- Hero home ---------- */
/* Header + hero = esattamente lo schermo. Su Chrome Android e Safari iOS "vh" misura lo schermo con la barra dell'indirizzo
   nascosta: all'apertura, con la barra visibile, il riquadro usciva sotto il bordo. "svh" misura lo schermo con la barra
   visibile (sul desktop è uguale a vh); la riga con vh resta come ripiego per i browser vecchi.
   Sotto i 1120 px l'header è alto 64 px fissi (non 10vh), quindi l'hero prende il resto dello schermo. */
.hero { height: 90vh; height: 90svh; background: var(--grey-300); padding: 0 var(--space-m) var(--space-m); display: flex; justify-content: center; }
@media (max-width: 1119px) { .hero { height: calc(100vh - 64px); height: calc(100svh - 64px); } }
.hero__box { position: relative; width: 100%; height: 100%; border-radius: var(--rad-xxl); overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: #0b0bd6 radial-gradient(120% 90% at 20% 10%, #1a1aff 0%, #0a0a9a 45%, #05055a 100%); }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__in { position: relative; z-index: 1; width: 90%; max-width: 1400px; display: flex; flex-direction: column; align-items: center; row-gap: var(--gap-xl); }
.hero__title { font-size: var(--text-large); font-weight: 300; line-height: 1.4; color: var(--white); text-align: center; max-width: 33ch; }
.hero__btns { display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--gap-m); row-gap: var(--gap-s); }

/* ---------- Sezioni ---------- */
.main { background: var(--grey-300); padding: var(--space-xxl) 0; display: flex; flex-direction: column; align-items: center; row-gap: var(--gap-xl); }
.ct { width: 100%; max-width: 1300px; padding: 0 var(--space-m); display: flex; flex-direction: column; align-items: center; row-gap: var(--gap-xl); }
.h2 { font-size: var(--fs-h5); font-weight: 700; line-height: 1.4; text-align: center; }
.divider { width: 100%; max-width: 1300px; display: flex; flex-direction: column; align-items: center; }
.divider::before { content: ""; display: block; height: 26px; }
.divider svg, .divider img { width: 63px; height: auto; }
@media (max-width: 991px) { .divider { margin-top: var(--space-l); } }

/* Trabajo con */
.work { width: 100%; display: flex; column-gap: var(--gap-m); align-items: stretch; }
.work__card { flex: 1 1 0; min-width: 0; background: var(--white); border-radius: var(--rad-xl); padding: var(--space-l) var(--space-s); display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--gap-s); }
.work__star { font-size: 56px; font-weight: 500; line-height: 1.2; text-transform: uppercase; }
.work__t { font-size: var(--text-regular); font-weight: 300; line-height: 1.2; text-transform: uppercase; }
.work__d { font-weight: 300; }
@media (max-width: 767px) { .work { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } }

/* Servizi */
.svc { width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 20px; }
.svc__card { background: var(--white); border-radius: 45px; padding: var(--space-xl); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; row-gap: var(--gap-s); }
.svc__t { font-size: var(--text-regular); font-weight: 500; line-height: 1.2; text-transform: capitalize; color: var(--green); }
.svc__t a:hover { text-decoration: underline; text-underline-offset: 4px; }
.svc__d { font-size: var(--text-small); }

/* Processo */
.proc { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; row-gap: var(--gap-l); }
.proc__item { display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--gap-s); }
.proc__n { font-size: var(--text-xlarge); font-weight: 700; line-height: 1.2; text-transform: uppercase; color: var(--green); }
.proc__t { font-size: var(--text-regular); font-weight: 500; line-height: 1.2; text-transform: uppercase; overflow-wrap: break-word; }
.proc__d { font-size: var(--text-small); max-width: 27ch; overflow-wrap: break-word; }
/* 4 colonne ci stanno solo da 768 px in su: sotto, 2 per riga (a 500 px DESARROLLO usciva dallo schermo) */
@media (max-width: 767px) { .proc { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } }

/* Chi sono */
.about { width: 100%; max-width: 1300px; margin-top: var(--space-m); padding: 0 var(--space-m); display: flex; align-items: center; row-gap: var(--gap-m); column-gap: var(--gap-xxl); }
.about__img { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; row-gap: var(--gap-s); }
.about__img img { width: 100%; max-width: 320px; height: auto; }
.about__img .about__ph { width: 320px; max-width: 100%; aspect-ratio: 724 / 1024; background: #e7e4e4; border-radius: 4px; }
.about__txt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; row-gap: var(--gap-m); }
.about__h { font-size: var(--fs-h5); font-weight: 700; line-height: 1; }
.about__p { font-size: var(--text-small); max-width: 39ch; }
@media (max-width: 575px) {
  .about { flex-wrap: wrap; row-gap: var(--gap-xl); }
  .about__img, .about__txt { flex-basis: 100%; align-items: center; }
  .about__p { text-align: center; }
}

/* FAQ (accordion) */
.faq { width: 100%; max-width: 880px; display: flex; flex-direction: column; align-items: center; row-gap: var(--space-xl); }
.acc { width: 100%; }
.acc__item summary { list-style: none; display: flex; align-items: center; gap: 16px; background: var(--accordion); border-radius: var(--rad-m); padding: 15px; min-height: 60px; margin-bottom: 12px; cursor: var(--cur-hand); }
.acc__item summary::-webkit-details-marker { display: none; }
.acc__t { flex: 1; font-size: var(--text-small); font-weight: 400; line-height: 1.4; text-transform: uppercase; }
.acc__i { font-size: var(--text-medium); width: .875em; height: .875em; flex: none; }
.acc__i--minus { display: none; }
.acc__item[open] .acc__i--minus { display: block; }
.acc__item[open] .acc__i--plus { display: none; }
.acc__c { font-size: var(--text-tiny); padding: 0 var(--space-m) 15px; }

/* ---------- Footer (struttura Lovable, colori del sito) ---------- */
.footer { background: var(--grey-300); padding: 48px var(--space-m) var(--space-m); }
.footer__box { background: var(--box-dark); color: var(--white); border-radius: var(--rad-xxl); }
.footer__in { max-width: 1400px; margin: 0 auto; padding: 80px 24px 40px; }
@media (min-width: 1024px) { .footer__in { padding-left: 40px; padding-right: 40px; } }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 64px; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(3, 1fr); } .footer__brand { grid-column: span 2; } }
.footer__logo { display: inline-block; height: 48px; margin-bottom: 16px; color: var(--green); }
.footer__logo svg { height: 100%; width: auto; }
.footer__logo svg :not([fill="none"]) { fill: var(--green); }
@media (min-width: 768px) { .footer__logo { height: 56px; } }
.footer__brand p { font-size: 14px; line-height: 20px; font-weight: 300; max-width: 384px; color: rgba(255,255,255,.75); }
.footer__contact h4, .footer__h { display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .12em; color: var(--green); margin-bottom: 16px; }
.footer__contact h4 img, .footer__h img { width: 26px; height: auto; }
.footer__contact ul { display: flex; flex-direction: column; row-gap: 8px; font-size: 14px; line-height: 20px; }
.footer__muted { color: rgba(255,255,255,.6); }
.footer a { transition: color .15s; }
.footer a:hover { color: var(--green); }
.footer__bar { border-top: 1px solid rgba(142,95,228,.3); padding-top: 24px; display: flex; flex-direction: column; gap: 12px; justify-content: space-between; font-size: 12px; line-height: 16px; color: rgba(255,255,255,.5); }
@media (min-width: 768px) { .footer__bar { flex-direction: row; } }
.footer__links { display: flex; flex-wrap: wrap; gap: 24px; }
.footer__ck { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; }
.footer__ck:hover { color: var(--white); }

/* ---------- Banner dei cookie (mostrato da site.js) ---------- */
.ck { position: fixed; left: var(--space-m); bottom: var(--space-m); z-index: 54; width: min(440px, calc(100vw - 2 * var(--space-m))); max-height: calc(100vh - 2 * var(--space-m)); overflow-y: auto; background: var(--box-dark); color: var(--white); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--rad-xl); padding: 24px; box-shadow: 0 16px 48px rgba(0, 0, 0, .22); font-size: var(--text-tiny); line-height: 1.6; opacity: 0; transform: translateY(16px); transition: opacity .25s ease-out, transform .35s var(--ease-out); }
.ck.is-in { opacity: 1; transform: none; }
.ck [hidden], .ck[hidden] { display: none !important; }
.ck__t { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: var(--text-small); font-weight: 700; }
.ck__t img { width: 30px; height: auto; }
.ck__p { color: rgba(255, 255, 255, .85); }
.ck__p a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.ck__opts { display: grid; gap: 10px; margin-top: 16px; }
.ck__opt { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .15); border-radius: var(--rad-m); }
.ck__opt strong { font-weight: 500; }
.ck__opt small { grid-column: 1 / -1; font-size: inherit; color: rgba(255, 255, 255, .65); }
.ck__always { font-size: 12px; color: var(--green); }
.ck__tgl { appearance: none; -webkit-appearance: none; position: relative; width: 40px; height: 24px; margin: 0; border-radius: 999px; background: rgba(255, 255, 255, .25); transition: background-color .2s ease-out; }
.ck__tgl::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); transition: transform .25s var(--ease-out); }
.ck__tgl:checked { background: var(--green); }
.ck__tgl:checked::after { transform: translateX(16px); }
.ck__tgl:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.ck__acts { display: flex; gap: 10px; margin-top: 18px; }
.ck__acts .btn { flex: 1 1 0; min-height: 44px; }
.ck__set { display: block; margin: 10px auto 0; padding: 8px 4px; background: none; border: 0; font: inherit; color: rgba(255, 255, 255, .85); text-decoration: underline; text-underline-offset: 3px; }
.ck__set:hover { color: var(--white); }
.ck__save { width: 100%; min-height: 44px; margin-top: 10px; }
@media (max-width: 575px) { .ck { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 20px; } }

/* ---------- Pagine servizio ---------- */
.phero { min-height: 60vh; background: var(--grey-300); padding: 0 var(--space-m) var(--space-m); display: flex; }
.phero__box { width: 100%; border-radius: var(--rad-xxl); background: var(--box-dark); display: flex; align-items: center; justify-content: center; padding: var(--space-xxl) var(--space-m); }
.phero__in { max-width: 900px; display: flex; flex-direction: column; align-items: center; row-gap: var(--gap-m); text-align: center; color: var(--white); }
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--green); font-size: var(--text-small); }
.eyebrow img, .eyebrow svg { width: 34px; height: auto; }
.phero__title { font-size: var(--text-large); font-weight: 300; line-height: 1.4; }
.phero__text { font-size: var(--text-small); color: rgba(255,255,255,.8); max-width: 60ch; margin-bottom: var(--space-s); }
.why { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.why__card { background: var(--white); border-radius: 45px; padding: var(--space-xl); display: flex; flex-direction: column; row-gap: var(--gap-s); text-align: center; align-items: center; }
.why__n { font-size: var(--text-xlarge); font-weight: 700; line-height: 1.2; color: var(--green); }
.why__t { font-size: var(--text-small); }
.benef { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.incl { width: 100%; background: var(--white); border-radius: 45px; padding: var(--space-xl); display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xl); }
.incl__l { display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--gap-m); }
.incl__h { font-size: var(--fs-h5); font-weight: 700; line-height: 1.4; }
.incl__p { font-size: var(--text-small); }
.checks { display: flex; flex-direction: column; row-gap: var(--gap-s); }
.checks li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--text-small); }
.checks__i { color: var(--green); font-weight: 700; }
.price { max-width: 760px; text-align: center; display: flex; flex-direction: column; align-items: center; row-gap: var(--gap-m); }
.price p { font-size: var(--text-small); }
.price strong { color: var(--green); font-weight: 700; }
@media (max-width: 991px) { .why, .benef { grid-template-columns: 1fr 1fr; } .incl { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .why, .benef, .svc { grid-template-columns: 1fr; } }

/* ---------- Contatto ---------- */
.contact { width: 100%; display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; align-items: stretch; }
.contact__info { background: var(--white); border-radius: 45px; padding: var(--space-xl); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; row-gap: var(--gap-m); }
.contact__info p { font-size: var(--text-small); }
.contact__form { background: var(--white); border-radius: 45px; padding: var(--space-xl); }
.cform { display: flex; flex-direction: column; row-gap: var(--gap-s); }
.field { display: flex; flex-direction: column; row-gap: 6px; font-size: var(--text-tiny); }
.field input, .field textarea { width: 100%; background: var(--grey-300); border: 1.5px solid transparent; border-radius: var(--rad-m); padding: 12px 14px; font-size: var(--text-small); line-height: 1.5; }
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--green); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: var(--text-tiny); cursor: var(--cur-hand); }
.check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--black); cursor: var(--cur-hand); }
.cform .check { margin-top: 14px; }
.check a { text-decoration: underline; text-underline-offset: 3px; }
.cform .btn { align-self: flex-start; margin-top: 14px; }
.cform__msg { font-size: var(--text-tiny); min-height: 1.7em; }
.cform__msg.is-ok { color: #1e8e4e; }
.cform__msg.is-err { color: #c0392b; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#contacto { scroll-margin-top: var(--space-l); }

/* Allegati del modulo */
.files__toggle { list-style: none; display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; cursor: var(--cur-hand); font-size: var(--text-small); }
.files__toggle::-webkit-details-marker { display: none; }
.files__toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 8px; }
.files__toggle:hover .files__title { text-decoration: underline; text-underline-offset: 3px; }
.files__title { font-weight: 500; }
.files__opt { color: rgba(0, 0, 0, .6); }
.files__plus { position: relative; flex: none; width: 20px; height: 20px; color: var(--green); transition: transform .2s ease-out; }
.files__plus::before, .files__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%); }
.files__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.files[open] .files__plus { transform: rotate(45deg); }
.files__body { display: flex; flex-direction: column; row-gap: 8px; margin-top: 12px; }
.drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 4px; padding: 20px 16px; text-align: center; background: var(--grey-300); border: 1.5px dashed var(--accordion); border-radius: var(--rad-m); cursor: var(--cur-hand); transition: border-color .15s, background-color .15s; }
.drop:hover, .drop.is-drag { border-color: var(--green); }
.drop.is-drag { background: rgba(142, 95, 228, .08); }
.drop:has(.drop__input:focus-visible) { border-color: var(--green); outline: 2px solid var(--green); outline-offset: 2px; }
.drop__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }
.drop__txt { font-size: var(--text-small); }
.drop__txt strong { color: var(--green); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.drop__hint { max-width: 46ch; font-size: 12px; line-height: 1.5; color: rgba(0, 0, 0, .6); }
.files__list { display: flex; flex-direction: column; row-gap: 6px; }
.files__list:empty { display: none; }
.files__item { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 14px; background: var(--grey-300); border-radius: var(--rad-m); font-size: var(--text-tiny); }
.files__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files__size { flex: none; color: rgba(0, 0, 0, .6); }
.files__rm { flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; font-size: 20px; line-height: 1; cursor: var(--cur-hand); }
.files__rm:hover { background: rgba(0, 0, 0, .08); }
.files__err { font-size: var(--text-tiny); color: #c0392b; }
.files__err:empty { display: none; }
@media (max-width: 767px) { .contact { grid-template-columns: 1fr; } }

/* ---------- Legali / 404 ---------- */
/* testo legale dentro un riquadro bianco come le altre card; margine laterale uguale a quello di header e riquadri */
.legal { width: calc(100% - 2 * var(--space-m)); max-width: 960px; padding: var(--space-xl); background: var(--white); border-radius: 45px; display: flex; flex-direction: column; row-gap: var(--gap-s); }
.legal h1 { font-size: var(--fs-h5); font-weight: 700; line-height: 1.4; margin-bottom: var(--space-s); }
.legal p { font-size: var(--text-small); }
/* poca aria sopra e sotto il riquadro (il footer ha già 48px suoi); .main.main--legal vince anche sulla regola del telefono */
.main.main--legal { padding-top: var(--space-l); padding-bottom: var(--space-l); }

/* ---------- 404 ----------
   Riquadro scuro grande (come gli hero delle pagine servizio) alto quanto l'hero della home: header + riquadro = schermo.
   "404" gigante in viola con un cursore "_" che lampeggia (il sito è tutto in font monospazio, da terminale);
   sotto, l'indirizzo cercato barrato in viola, i due pulsanti e, staccate da una linea sottile, le scorciatoie alle pagine. */
.nf { min-height: 90vh; min-height: 90svh; padding: 0 var(--space-m) var(--space-m); display: flex; }
@media (max-width: 1119px) { .nf { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); } }
.nf__box { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-xxl) var(--space-m); border-radius: var(--rad-xxl); background: var(--box-dark); color: var(--white); }
.nf__in { width: 100%; min-width: 0; max-width: 760px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.nf__code { display: flex; align-items: baseline; font-size: clamp(12rem, 6rem + 15vw, 24rem); font-weight: 700; line-height: .9; letter-spacing: -.04em; color: var(--green); margin-bottom: var(--space-l); }
.nf__code::before, .nf__code::after { content: ""; width: .5em; height: .08em; margin-left: .06em; background: currentColor; }
.nf__code::before { margin: 0 .06em 0 0; visibility: hidden; }   /* spazio uguale a sinistra: il 404 resta centrato */
.nf__code::after { animation: nf-blink 1.1s steps(1, end) infinite; }
@keyframes nf-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nf__code::after { animation: none; } }
.nf__title { font-size: var(--fs-h5); font-weight: 700; line-height: 1.3; text-wrap: balance; }
.nf__text { margin-top: var(--space-xs); font-size: var(--text-small); color: rgb(255 255 255 / .72); text-wrap: balance; }
.nf__path { max-width: 100%; margin-top: var(--space-m); padding: 6px 16px; border: 1px solid rgb(255 255 255 / .14); border-radius: 999px; font-size: var(--text-tiny); color: rgb(255 255 255 / .6); }
.nf__path span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: line-through; text-decoration-color: var(--green); text-decoration-thickness: 2px; }
.nf__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px var(--gap-m); margin-top: var(--space-xl); }
.nf__more { width: 100%; margin-top: var(--space-xl); padding-top: var(--space-l); border-top: 1px solid rgb(255 255 255 / .1); }
.nf__label { font-size: var(--text-tiny); color: rgb(255 255 255 / .55); }
.nf__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.nf__links a { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 16px; border-radius: 999px; background: rgb(255 255 255 / .07); font-size: var(--text-tiny); transition: background-color .15s ease-out, color .15s ease-out; }
.nf__links a:hover { background: var(--green); }
.nf__links a:active { transform: scale(.97); }
@media (max-width: 575px) {
  .nf__box { padding: 48px 20px; }
  .nf__links a { min-height: 44px; }
}

/* ---------- Telefono (fino a 575px): margini e ritmo verticale ----------
   Un solo margine laterale di 16px (header, riquadri, card e footer sulla stessa linea);
   tra le sezioni 70-110px, dentro una sezione 26px, così ogni blocco si legge come un gruppo. */
@media (max-width: 575px) {
  :root { --space-m: 1.6rem; }
  .main { padding: 56px 0 24px; }
  .about { margin-top: 44px; }
  /* hero: come prima (titolo e pulsanti centrati nel riquadro, i pulsanti uno sopra l'altro), ma con il titolo più piccolo
     e le righe bilanciate. */
  .hero__title { font-size: clamp(2.2rem, 0.8rem + 4vw, 2.8rem); line-height: 1.35; text-wrap: balance; }
  .hero__btns { flex-direction: column; align-items: center; row-gap: 12px; }
  .work__card { padding-inline: 14px; }
  .work__t { overflow-wrap: anywhere; }
  .footer__in { padding: 56px 24px 32px; }
  .footer__grid { margin-bottom: 40px; }
  .btn { min-height: 44px; }
}

/* Puntatore: freccia e mano bianche con bordo nero (si vedono su qualsiasi sfondo); su touch non si vedono.
   Nei campi di testo resta il cursore di testo. */
:root { --cur-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 3v15.6l3.9-3.7 2.6 6 2.7-1.2-2.6-5.9h5.5z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='miter' paint-order='stroke'/%3E%3C/svg%3E") 4 3, default; --cur-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg transform='translate%281 1%29 scale%280.092%29 translate%28-31 -59%29'%3E%3Cg fill='%23000' stroke='%23000' stroke-width='26' stroke-linejoin='round'%3E%3Crect x='112' y='72' width='28' height='150' rx='14'/%3E%3Crect x='146' y='125' width='24' height='97' rx='12'/%3E%3Crect x='175' y='137' width='23' height='85' rx='11.5'/%3E%3Crect x='203' y='149' width='22' height='73' rx='11'/%3E%3Cpath d='M112 190H225V226C225 240 216 252 212 262L207 296H118L116 284L108 266L54 211C44 201 46 186 58 183C64 181 70 183 76 189L112 222Z'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Crect x='112' y='72' width='28' height='150' rx='14'/%3E%3Crect x='146' y='125' width='24' height='97' rx='12'/%3E%3Crect x='175' y='137' width='23' height='85' rx='11.5'/%3E%3Crect x='203' y='149' width='22' height='73' rx='11'/%3E%3Cpath d='M112 190H225V226C225 240 216 252 212 262L207 296H118L116 284L108 266L54 211C44 201 46 186 58 183C64 181 70 183 76 189L112 222Z'/%3E%3C/g%3E%3Cpath d='M143 130V200M172.5 142V204M200.5 154V206' stroke='%23000' stroke-width='11' stroke-linecap='round' fill='none'/%3E%3C/g%3E%3C/svg%3E") 10 2, pointer; }
body { cursor: var(--cur-arrow); }
a[href], button, summary, select, label[for], label.ck__opt, [role="button"], input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="file"] { cursor: var(--cur-hand); }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]), textarea { cursor: text; }

/* Cambio pagina morbido (Chrome, Edge, Safari 18.2+): l'header resta fermo, il contenuto sfuma. */
@view-transition { navigation: auto; }
.header { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; animation-timing-function: ease-out; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }