/* ============================================================
   TTSoft — Tittisoft di Tullio Tesorone
   CLONE FEDELE del sito Wix originale
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Open+Sans+Condensed:wght@300;700&family=Open+Sans:wght@400;600;700&display=swap');

:root {
  --rosso: #e13a44;
  --grigio-testo: #444444;
  --grigio-nav: #5b5b5b;
  --grigio-chiaro: #7a7a7a;
  --verde: #3c9a3c;
  --verde-scuro: #2f7d2f;
  --sidebar: #58585a;
  --max: 1000px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--grigio-testo);
  background: #ffffff;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--rosso); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- Header / Nav ---------- */
.site-header { padding-top: 26px; }
/* menu a "linguette da quaderno" con bordino azzurro */
.main-nav ul {
  list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap;
  gap: 6px; padding: 8px 0 0; margin: 0 0 30px;
  border-bottom: 2px solid #cddcea;
}
.main-nav a {
  position: relative; top: 2px; display: block;
  font-family: 'Open Sans Condensed', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300; font-size: 15px; letter-spacing: .3px;
  color: var(--grigio-nav); text-decoration: none; white-space: nowrap;
  padding: 9px 15px; background: #fff;
  border: 1px solid #cddcea; border-bottom: none;
  border-radius: 8px 8px 0 0;
  transition: background .15s, color .15s;
}
.main-nav a::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: #4a90c2; border-radius: 8px 8px 0 0;
}
.main-nav a:hover { color: var(--rosso); text-decoration: none; background: #f6fafd; }
.main-nav a.active { color: #e2b1b1; border-color: #e2b1b1; }
.main-nav a.active::before { background: #e2b1b1; }
@media (max-width: 560px){
  .main-nav ul { gap: 4px; }
  .main-nav a { font-size: 13px; padding: 7px 10px; }
}

/* logo + eyebrow */
.brand-eyebrow {
  color: var(--rosso); font-size: 10px; letter-spacing: 3px; text-transform: none;
  font-family: Helvetica, Arial, sans-serif; margin-bottom: 10px;
}
.logo-img { width: 300px; max-width: 80%; margin-bottom: 10px; }
.logo-img.small { width: 180px; }

/* ---------- Titoli ---------- */
h1.title, h2.title {
  font-family: 'Open Sans Condensed', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700; font-size: 60px; line-height: 1.05; color: var(--grigio-testo);
  letter-spacing: -.5px; margin: 6px 0 26px;
}
h2.title.light { color: #b7b7b7; font-weight: 300; }

@media (max-width: 600px){ h1.title, h2.title { font-size: 42px; } }

/* ---------- Foglio a quaderno (condiviso su tutte le pagine) ---------- */
.sheet {
  background-color: #fdfdf7;
  background-image:
    linear-gradient(to right, transparent 32px, #e9bcbc 32px, #e9bcbc 33px, transparent 33px),
    repeating-linear-gradient(to bottom,
      transparent 0, transparent 17px, #cfe0ef 17px, #cfe0ef 18px,
      transparent 18px, transparent 44px, #cfe0ef 44px, #cfe0ef 45px,
      transparent 45px, transparent 62px);
  border: 1px solid #e8e8e1;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  padding: 30px 32px 42px 48px;   /* riga rossa ~32px, testo a 48px: appena a destra della riga */
  margin: 6px 0 40px;
}
.home-hero .tagline { font-size: 18px; color: var(--grigio-chiaro); margin: 30px 0 22px; }

/* ---------- Titolo home "scritto a mano" (loop ogni 20s) ---------- */
.title.title-hand { font-family: 'Caveat', cursive; font-weight: 700; color: #3a3a3a; letter-spacing: 0; }
.title-hand .hand-line { position: relative; display: inline-block; }
.title-hand .hand-ink { display: inline-block; padding-right: .25em; clip-path: inset(0 100% 0 0); animation: scrivi 20s ease-out infinite; }
.title-hand .hand-pen { position: absolute; top: -6px; left: 0; font-size: 26px; opacity: 0; pointer-events: none; animation: penna 20s ease-out infinite; }
@keyframes scrivi {
  0%     { clip-path: inset(0 100% 0 0); opacity: 1; }  /* nascosto */
  12%    { clip-path: inset(0 0 0 0);    opacity: 1; }  /* scritto (~2,4s) */
  90%    { clip-path: inset(0 0 0 0);    opacity: 1; }  /* resta */
  96%    { clip-path: inset(0 0 0 0);    opacity: 0; }  /* sfuma */
  96.5%  { clip-path: inset(0 100% 0 0); opacity: 0; }  /* reset nascosto */
  100%   { clip-path: inset(0 100% 0 0); opacity: 0; }
}
@keyframes penna {
  0%   { left: 0;    opacity: 1; }
  12%  { left: 100%; opacity: 1; }
  14%  { left: 100%; opacity: 0; }
  100% { left: 100%; opacity: 0; }
}
@media (max-width: 640px){
  .sheet {
    padding: 22px 16px 28px 34px;
    background-image:
      linear-gradient(to right, transparent 20px, #e9bcbc 20px, #e9bcbc 21px, transparent 21px),
      repeating-linear-gradient(to bottom,
        transparent 0, transparent 17px, #cfe0ef 17px, #cfe0ef 18px,
        transparent 18px, transparent 44px, #cfe0ef 44px, #cfe0ef 45px,
        transparent 45px, transparent 62px);
  }
}
.arrow-link {
  display: inline-flex; align-items: center; gap: 14px;
  color: var(--rosso); font-size: 15px;
}
.arrow-link .arw { font-size: 22px; line-height: 1; }
.arrow-link:hover { text-decoration: underline; }

/* Call-to-action stile "post-it" (home) */
.postit {
  position: relative; display: inline-block; max-width: 340px;
  margin-top: 20px;
  background: #ffe067; color: #4a3f13;
  font-family: 'Open Sans', Arial, sans-serif; font-weight: 700; font-size: 16px; line-height: 1.35;
  text-decoration: none; padding: 20px 22px;
  transform: rotate(-2deg);
  box-shadow: 2px 8px 16px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.postit::before {
  content: ""; position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%) rotate(3deg);
  width: 78px; height: 22px;
  background: rgba(120,180,220,.5); border: 1px solid rgba(90,150,190,.45);
}
/* il post-it compare dopo che il titolo ha finito di scriversi (~2,6s) */
.postit-wrap { display: inline-block; opacity: 0; animation: postit-in .6s ease-out 2.6s forwards; }
@keyframes postit-in {
  0%   { opacity: 0; transform: translateY(16px) scale(.92); }
  70%  { opacity: 1; transform: translateY(-2px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
.postit .postit-arrow { color: #e13a44; font-weight: 800; display: inline-block; transition: transform .18s ease; }
.postit:hover { transform: rotate(0deg) translateY(-3px) scale(1.02); box-shadow: 3px 12px 24px rgba(0,0,0,.22); text-decoration: none; }
.postit:hover .postit-arrow { transform: translateX(5px); }

/* Home: foglio più alto con "testa" e "piede" del quaderno di prima elementare */
.home-hero.sheet { position: relative; min-height: 860px; padding-top: 54px; padding-bottom: 118px; }
/* firma a mano nell'angolo in basso a destra (nel piede) */
.firma-quaderno {
  position: absolute; right: 240px; bottom: 180px; z-index: 2;
  text-align: right; line-height: 1.12;
  font-family: 'Caveat', cursive; color: #6b4a2b; transform: rotate(-2deg);
}
.firma-quaderno .motto  { display: block; font-size: 46px; font-weight: 700; }
.firma-quaderno .spiega { display: block; font-size: 27px; color: #8f8f8f; margin-top: 4px; }
.firma-quaderno .firma  { display: block; font-size: 30px; margin-top: 5px; }
@media (max-width: 640px){
  .firma-quaderno { right: 18px; bottom: 70px; }
  .firma-quaderno .motto  { font-size: 26px; }
  .firma-quaderno .spiega { font-size: 17px; }
  .firma-quaderno .firma  { font-size: 19px; }
}
/* testa: riga rossa orizzontale in alto + margine bianco sopra */
.home-hero.sheet::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 38px;
  background-color: #fdfdf7;
  background-image: linear-gradient(to right, transparent 32px, #e9bcbc 32px, #e9bcbc 33px, transparent 33px);
  border-bottom: 2px solid #e2b1b1;
  border-radius: 6px 6px 0 0;
}
/* piede: riga rossa orizzontale in basso + margine bianco sotto */
.home-hero.sheet::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 74px;
  background-color: #fdfdf7;
  background-image: linear-gradient(to right, transparent 32px, #e9bcbc 32px, #e9bcbc 33px, transparent 33px);
  border-top: 2px solid #e2b1b1;
  border-radius: 0 0 6px 6px;
}
@media (max-width: 640px){
  .home-hero.sheet { min-height: 560px; padding-top: 46px; padding-bottom: 82px; }
  .home-hero.sheet::before { background-image: linear-gradient(to right, transparent 20px, #e9bcbc 20px, #e9bcbc 21px, transparent 21px); }
  .home-hero.sheet::after  { background-image: linear-gradient(to right, transparent 20px, #e9bcbc 20px, #e9bcbc 21px, transparent 21px); }
}

/* ---------- Servizi (due colonne) ---------- */
.services-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; padding-bottom: 50px; }
.svc-block { margin-bottom: 44px; }
.svc-head {
  font-family: 'Open Sans Condensed','Helvetica Neue',Arial,sans-serif;
  font-weight: 700; font-size: 26px; color: var(--grigio-testo); margin-bottom: 6px;
}
.svc-head a { color: var(--grigio-testo); }
.svc-sublink { display: block; font-size: 13px; color: var(--grigio-chiaro); text-decoration: underline; margin-top: 2px; }
.svc-body p { font-size: 15px; color: #4a4a4a; margin-bottom: 14px; }
.svc-body .rossoX { color: var(--rosso); font-weight: 700; }
.svc-body a { text-decoration: underline; color: #2a5db0; }
.svc-body ul { list-style: none; }
.svc-body li { padding: 5px 0; font-size: 15px; }
.svc-body li .stato { font-size: 12px; color: var(--grigio-chiaro); }

@media (max-width: 760px){ .services-grid { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- Contatti ---------- */
.contact-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px; padding-bottom: 50px; }
.contact-info .address { color: var(--rosso); font-size: 15px; line-height: 1.7; margin-bottom: 26px; }
.contact-social { display: flex; gap: 16px; }
.contact-social a { color: #111; }
.contact-social svg { width: 22px; height: 22px; fill: currentColor; }

.info-img { margin-bottom: 26px; }
form.wix-form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
form.wix-form .full { grid-column: 1 / -1; }
form.wix-form label { display: block; font-size: 13px; color: var(--grigio-chiaro); margin-bottom: 4px; }
form.wix-form input, form.wix-form textarea {
  width: 100%; border: none; border-bottom: 1px solid #c9c9c9; padding: 6px 0;
  font-family: inherit; font-size: 15px; color: #333; background: transparent;
}
form.wix-form textarea { min-height: 70px; resize: vertical; }
form.wix-form input:focus, form.wix-form textarea:focus { outline: none; border-bottom-color: var(--rosso); }
form.wix-form .submit {
  grid-column: 1 / -1; justify-self: center; margin-top: 6px;
  background: #fff; border: 1px solid #333; color: #333; font-size: 14px;
  padding: 10px 34px; cursor: pointer;
}
form.wix-form .submit:hover { background: #333; color: #fff; }

@media (max-width: 760px){ .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Webinar ---------- */
.webinar-wrap { text-align: center; padding-bottom: 50px; }
.webinar-wrap img { margin: 0 auto; max-width: 760px; width: 100%; }

/* ---------- Utilities ---------- */
.util-subtitle { text-align: center; font-size: 22px; font-weight: 700; color: var(--grigio-testo); margin: 4px 0 30px; }
.util-video { max-width: 760px; margin: 0 auto 36px; }
.util-video .ratio { position: relative; padding-bottom: 56.25%; height: 0; }
.util-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.util-box { max-width: 820px; margin: 0 auto; border: 1px solid #e2e2e2; border-radius: 4px; padding: 30px 34px; }
.util-box h3 { color: var(--verde); font-size: 22px; margin: 22px 0 12px; }
.util-box h3:first-child { margin-top: 0; }
.util-box p { font-size: 15px; margin-bottom: 14px; }
.util-box ul { list-style: none; }
.util-box li { padding: 5px 0 5px 26px; position: relative; font-size: 15px; }
.util-box li::before { content: "✓"; color: var(--verde); position: absolute; left: 0; font-weight: 700; }
.util-box a { text-decoration: underline; color: #2a5db0; }

/* ---------- PagoPA (placeholder) ---------- */
.pagopa { text-align: center; padding: 40px 0 70px; }
.pagopa h2 { font-family:'Open Sans Condensed',Arial,sans-serif; font-weight:700; font-size:48px; color:var(--grigio-testo); margin-bottom:18px; }
.pagopa p { max-width: 520px; margin: 0 auto 18px; color: var(--grigio-chiaro); font-size: 16px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid #eee; padding: 26px 0 40px; text-align: center; }
.site-footer p { font-size: 12px; color: #9a9a9a; }

/* ---------- Barra social laterale (destra) ---------- */
.social-bar {
  position: fixed; top: 20px; right: 0; width: 44px; background: var(--sidebar);
  padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 14px;
  border-radius: 6px 0 0 6px; z-index: 50;
}
.social-bar a {
  width: 26px; height: 26px; border-radius: 50%; background: #6f6f71;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.social-bar a:hover { background: var(--rosso); }
.social-bar svg { width: 14px; height: 14px; fill: #fff; }

/* HOME: tono "scrivania" caldo attorno alla card */
body.home-bleed{ background-color: #efe7db; }
body.home-bleed .home-hero.sheet{ box-shadow: 0 12px 34px rgba(60,45,25,.16); }
/* righe della Home in verde bosco (al posto dell'azzurro) */
body.home-bleed .home-hero.sheet{
  background-image:
    linear-gradient(to right, transparent 32px, #e9bcbc 32px, #e9bcbc 33px, transparent 33px),
    repeating-linear-gradient(to bottom,
      transparent 0, transparent 17px, #dadada 17px, #dadada 18px,
      transparent 18px, transparent 44px, #dadada 44px, #dadada 45px,
      transparent 45px, transparent 62px);
}
/* footer esterno nascosto in Home: il © vive dentro il piede del foglio */
body.home-bleed .site-footer{ display: none; }
.home-hero.sheet .piede-copy{
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 20px; margin: 0;
  text-align: center; font-family: 'Open Sans', Arial, sans-serif;
  font-size: 12px; letter-spacing: .2px; color: #a09a8c;
}
@media (max-width: 640px){
  .home-hero.sheet .piede-copy{ font-size: 10px; bottom: 14px; padding: 0 10px; }
}

/* navigazione a slide: frecce avanti/indietro tra le pagine */
.slide-nav-btn{
  position:fixed; top:50%; transform:translateY(-50%); z-index:60;
  width:52px; height:52px; border-radius:50%;
  background:#3a3a3a; color:#fff; display:flex; align-items:center; justify-content:center;
  text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:background .2s ease, transform .2s ease;
}
.slide-nav-btn:hover{ background:#6a6a6a; transform:translateY(-50%) scale(1.06); }
.slide-nav-btn svg{ width:24px; height:24px; stroke:#fff; stroke-width:2.3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.slide-prev{ left:18px; }
.slide-next{ right:18px; }
.slide-counter{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:60;
  background:#3a3a3a; color:#fff; font-family:'Open Sans',Arial,sans-serif; font-weight:700;
  font-size:13px; letter-spacing:2px; padding:8px 16px; border-radius:100px;
  box-shadow:0 6px 18px rgba(20,41,74,.22);
}
@media (max-width:640px){
  .slide-nav-btn{ width:44px; height:44px; }
  .slide-prev{ left:8px; } .slide-next{ right:8px; }
  .slide-counter{ bottom:12px; font-size:12px; padding:7px 14px; }
}

/* pulsante email fisso in basso a destra */
.email-fab {
  position: fixed; right: 18px; bottom: 18px; width: 44px; height: 44px;
  background: #58585a; border-radius: 6px; display: flex; align-items: center; justify-content: center; z-index: 50;
}
.email-fab:hover { background: var(--rosso); }
.email-fab svg { width: 22px; height: 22px; fill: #fff; }

@media (max-width: 640px){
  .social-bar { display: none; }
}