/* Tema «promo»: dal canvas «Trattamenti — 4 prototipi», pagina «Restyling · stile promo» (temi.css, .theme-promo).
   Colori e stile dalle grafiche Instagram «Promozioni»: salvia #627362 e rosa cipria a righe, schede bianche con nastro
   adesivo, titoli in maiuscolo largo e spaziato con una parola in corsivo calligrafico color rame, stella dorata.
   Si attiva con class="theme-promo" sul <body>: togliendo la classe torna il tema originale di css/sito-nuovo.css.
   Vale per le sezioni del sito nuovo (.hd-bar, .hd, .cd, .hd-dock); il footer resta nello stile precedente. */

/* Font ospitati nel sito, da fontsource 5.3.0 (OFL), sottoinsieme latino */
@font-face {
  font-family: "Jost";
  font-weight: 100 900; /* file variabile */
  font-display: swap;
  src: url("../fonts/jost-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Lexend Exa";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lexend-exa-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Ms Madi";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ms-madi-latin.woff2") format("woff2");
}

.theme-promo {
  --paper: #fdf6f4;   /* rosa cipria: fondo */
  --stone: #e6ebe3;   /* salvia chiarissimo */
  --butter: #d3dccf;  /* salvia chiaro: pillola del menu */
  --peach: #f3dcd5;   /* cipria più intenso: sfumatura */
  --night: #2c362e;   /* verde bosco quasi nero */
  --cocoa: #4f5e51;   /* salvia scuro: testo secondario */
  --sage: #627362;    /* salvia delle grafiche: bottoni, righe, numeri */
  --sage-dark: #4e5e4f;
  --copper: #9c6340;  /* rame del corsivo */
  --star: #e39a3b;    /* stella dorata */
  --grotesk: "Jost", Helvetica, Arial, sans-serif;
  --wide: "Lexend Exa", "Jost", Helvetica, Arial, sans-serif;
  --script: "Ms Madi", cursive;
}
.theme-promo .hd-bar, .theme-promo .hd-dock, .theme-promo .hd, .theme-promo .cd {
  --ink: #2f3a31;
  --glow: color-mix(in srgb, var(--peach) 75%, var(--stone));
  --rule: color-mix(in srgb, var(--sage) 40%, transparent);
  letter-spacing: 0;
}

/* Titoli: maiuscolo largo e spaziato, peso leggero; la parola in evidenza diventa corsivo color rame */
.theme-promo .hd-title, .theme-promo .cd-title { font-family: var(--wide); font-weight: 400; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.18; }
.theme-promo .hd-title { font-size: clamp(34px, 3.2vw + 8px, 58px); }
.theme-promo .cd-title { font-size: clamp(26px, 2vw + 8px, 40px); }
.theme-promo .hd-title em, .theme-promo .cd-title em { display: inline-block; font-family: var(--script); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1.55em; line-height: 0.9; color: var(--copper); padding-right: 0.08em; }
.theme-promo .hd-brand { font-family: var(--wide); font-weight: 400; font-size: 15px; letter-spacing: 0.22em; text-transform: uppercase; }
.theme-promo .hd-key strong, .theme-promo .cd-p strong { font-weight: 500; }
.theme-promo .tr-name, .theme-promo .cd1-step strong, .theme-promo .fq-q, .theme-promo .ct-txt b { font-family: var(--wide); font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; font-size: clamp(15px, 0.4vw + 12px, 18px); }
.theme-promo .cd1-label, .theme-promo .hd-facts dt { font-family: var(--wide); letter-spacing: 0.2em; font-size: 12px; color: var(--copper); }
.theme-promo .cd1-label::before { content: "✦"; margin-right: 10px; color: var(--star); }

/* Bottoni principali: salvia pieno con testo bianco (contrasto 5,1:1) */
.theme-promo .hd-pill, .theme-promo .dv-actions .tr-book.is-solid, .theme-promo .fq-ask .tr-book.is-solid, .theme-promo .hd-dock-call { background: var(--sage); border-color: var(--sage); color: #fff; font-family: var(--wide); font-weight: 400; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; }
.theme-promo .hd-pill:hover, .theme-promo .dv-actions .tr-book.is-solid:hover, .theme-promo .fq-ask .tr-book.is-solid:hover { background: var(--sage-dark); border-color: var(--sage-dark); color: #fff; }
.theme-promo .tr-book, .theme-promo .tr-ghost, .theme-promo .hd-menu { font-family: var(--wide); font-weight: 400; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; border-color: var(--sage); }
.theme-promo .tr-book:hover, .theme-promo .tr-card:hover .tr-book { background: var(--sage); border-color: var(--sage); color: #fff; }
.theme-promo .hd-dock-call { font-size: 12px; }
.theme-promo .hd-dock-ico { background: var(--sage); }

/* Schede bianche con il nastro adesivo in alto, come nelle grafiche */
.theme-promo .tr-card, .theme-promo .ct-row { background: #fff; border-color: color-mix(in srgb, var(--sage) 22%, transparent); border-radius: 14px; }
.theme-promo .tr-card::after { content: ""; position: absolute; left: 50%; top: -13px; width: 110px; height: 28px; translate: -50% 0; rotate: -2deg; background: color-mix(in srgb, #9aa197 55%, transparent); clip-path: polygon(3% 0, 97% 4%, 100% 30%, 97% 55%, 100% 80%, 96% 100%, 4% 96%, 0 72%, 3% 48%, 0 22%); pointer-events: none; }
.theme-promo .rv-card::after, .theme-promo .dv-card::after, .theme-promo .fq-ask::after { display: none; }

/* Metodo e domande: salvia */
.theme-promo .cd1-num { color: var(--sage); font-family: var(--wide); font-weight: 400; }
.theme-promo .cd1-line::before, .theme-promo .cd1-line::after { background: var(--sage); }
.theme-promo .fq-icon { border-color: var(--sage); }
.theme-promo .fq-item[open] .fq-icon { background: var(--sage); }
.theme-promo .fq-list { border-top-color: var(--sage); }

/* Foto: niente alone dietro, angoli più stretti come nelle grafiche */
.theme-promo .hd-halo { display: none; }
.theme-promo .hd-photo, .theme-promo .cd-photo { border-radius: 14px; }

/* Telefono: sotto i 900px il metodo è un percorso con il numero nel cerchio (css/sito-nuovo.css) */
@media (max-width: 900px) {
  .theme-promo .cd1-num { border-color: var(--sage); font-size: 12px; }
  .theme-promo .cd1-step:not(:last-child)::before { background: var(--sage); }
  .theme-promo .cd1-step:hover .cd1-num { background: var(--sage); color: #fff; }
}
@media (max-width: 700px) {
  .theme-promo .hd-title { font-size: 30px; letter-spacing: 0.1em; }
  .theme-promo .cd-title { font-size: 24px; letter-spacing: 0.1em; }
  .theme-promo .hd-brand { font-size: 12px; letter-spacing: 0.14em; }
  .theme-promo .hd-pill, .theme-promo .tr-book, .theme-promo .tr-ghost, .theme-promo .hd-menu, .theme-promo .dv-actions .tr-book.is-solid, .theme-promo .fq-ask .tr-book.is-solid { font-size: 12px; letter-spacing: 0.1em; }
}