/* TIGRELLA — brand.css: font Besley + stili dei blocchi aggiunti (.tg-*) sopra il template Signora Bettola.
   #171310 #C1272D #1E6F93 #2D5744 #E0A526 #F9F2E6 vengono sostituiti da rebrand.mjs con la palette. */
@font-face { font-family: "Besley"; font-weight: 400 900; font-style: normal; font-display: swap; src: url("fonts/Besley-wght.woff2") format("woff2"); }
@font-face { font-family: "Besley"; font-weight: 400 900; font-style: italic; font-display: swap; src: url("fonts/Besley-Italic-wght.woff2") format("woff2"); }

:root { --tg-dark: #171310; --tg-red: #C1272D; --tg-blue: #1E6F93; --tg-green: #2D5744; --tg-yellow: #E0A526; --tg-cream: #F9F2E6; }
body { font-family: "Besley", Georgia, serif; }

/* Besley è più larga di Awesome Serif ExtraTall: i titoli giganti si stringono un po' */
.elementor-heading-title { letter-spacing: -0.01em; }

/* blocchi aggiunti */
.tg-block { max-width: 720px; }
.tg-block p { margin: 0 0 .6em; font-family: "Besley", Georgia, serif; }
.tg-block .elementor-heading-title { font-family: "Besley", Georgia, serif; }

/* 03. hero: riga di servizio, nota, CTA sotto il titolo */
.elementor-element-05316ec { --gap: 14px 0px; --row-gap: 14px; }
.elementor-4170 .elementor-element.elementor-element-191322f .elementor-heading-title { font-weight: 700; font-style: italic; }
.tg-servizio { color: var(--tg-cream); font-size: 22px; font-weight: 600; text-align: center; line-height: 1.3; }
.tg-nota { color: var(--tg-cream); opacity: .8; font-size: 15px; font-weight: 500; text-align: center; }
.tg-btn .elementor-button { font-family: "Besley", Georgia, serif; font-weight: 800; font-size: 15px; letter-spacing: .04em; border-radius: 999px; padding: 16px 34px; background: var(--tg-red); color: var(--tg-cream); transition: transform .2s ease, background .2s ease; }
.tg-btn .elementor-button:hover { background: var(--tg-yellow); color: var(--tg-dark); transform: translateY(-2px); }
.tg-btn-yellow .elementor-button { background: var(--tg-yellow); color: var(--tg-dark); }
.tg-btn-yellow .elementor-button:hover { background: var(--tg-cream); }

/* 04. intro e riepilogo sotto le schede */
.elementor-element-tg-formule-intro p { color: var(--tg-cream); font-size: 20px; text-align: center; line-height: 1.45; max-width: 640px; margin: -60px auto 0; }
.elementor-element-tg-riepilogo { max-width: 860px; margin: 0 auto; padding: 0 20px; }
.elementor-element-tg-riepilogo p { color: var(--tg-cream); font-size: 17px; line-height: 1.5; text-align: center; margin: 0 0 .5em; }
.elementor-element-tg-riepilogo b { color: var(--tg-yellow); font-weight: 800; }

/* 06. frase sopra la galleria */
.elementor-element-tg-galleria-frase { width: 100%; max-width: none; margin: 0 0 30px; }
.elementor-element-tg-galleria-frase .elementor-heading-title { color: var(--tg-dark); font-size: 40px; font-weight: 900; font-style: italic; text-align: center; letter-spacing: .02em; }

/* 07. form offerte (al posto del form Klaviyo) */
.tg-form { max-width: 520px; margin: 0 auto; font-family: "Besley", Georgia, serif; text-align: center; }
.tg-form-testo { color: var(--tg-cream); font-size: 20px; font-style: italic; margin: 0 0 18px; }
.tg-form-row { display: flex; gap: 10px; }
.tg-form-row input { flex: 1; min-width: 0; font: 500 16px/1 "Besley", Georgia, serif; padding: 14px 18px; border: 2px solid var(--tg-cream); border-radius: 999px; background: var(--tg-cream); color: var(--tg-dark); }
.tg-form-row button { font: 800 14px/1 "Besley", Georgia, serif; letter-spacing: .04em; padding: 14px 22px; border: 0; border-radius: 999px; background: var(--tg-yellow); color: var(--tg-dark); cursor: pointer; white-space: nowrap; }
.tg-form-row button:hover { background: var(--tg-cream); }
.tg-form-privacy { color: var(--tg-cream); opacity: .75; font-size: 13px !important; line-height: 1.4; margin: 12px 0 0; }
.tg-ok { color: var(--tg-yellow); font-weight: 700; margin-top: 12px; }
@media (max-width: 640px) { .tg-form-row { flex-direction: column; } }

/* 09. occhiello sopra "Un altro giro?" */
.elementor-element-tg-occhiello .elementor-heading-title { color: var(--tg-red); font-size: 16px; font-weight: 800; letter-spacing: .12em; margin-bottom: -10px; }

/* 10. recensioni placeholder */
.elementor-element-tg-recensioni { max-width: 640px; }
.elementor-element-tg-recensioni p { color: var(--tg-dark); font-size: 18px; line-height: 1.5; }
.tg-placeholder { display: inline-block; border: 2px dashed var(--tg-red); color: var(--tg-red) !important; padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: 15px !important; }
.tg-link { color: var(--tg-red); font-weight: 800; letter-spacing: .04em; text-decoration: underline; }

/* 12. footer: link nelle colonne */
.footerLink a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* mascotte al posto della "tombola 25" e del corno: dimensioni contenute */
.elementor-element.elementor-element-d39ea03 img { max-width: 150px; }
.elementor-element.elementor-element-30a1ea5 img { max-width: 260px; }

/* la pagina finisce al blocco offerte: il gradiente sotto il ventaglio porta al footer scuro */
.elementor-element.elementor-element-58eb56b { background-image: linear-gradient(180deg, var(--tg-blue) 0%, var(--tg-dark) 100%) !important; }
.elementor-element.elementor-element-58eb56b { --min-height: 260px; min-height: 260px; }

/* bottoni delle schede: Besley è più larga di Asap Condensed → un po' più piccoli, soprattutto su mobile */
/* NB: le regole per-elemento di Elementor sono `.elementor-4170 .elementor-element.elementor-element-XXX …` (specificità 0,4,0): per vincere serve lo stesso prefisso */
.elementor-4170 .elementor-element.elementor-element-8673067 .elementor-button { font-size: 20px; letter-spacing: .01em; }
@media (max-width: 767px) { .elementor-4170 .elementor-element.elementor-element-8673067 .elementor-button { font-size: 15px; } }

/* hero mobile: la scatola appesa si sovrappone al testo → solo da tablet in su */
@media (max-width: 767px) { .elementor-4170 .elementor-element.elementor-element-d16aa04 { display: none; } }
@media (max-width: 767px) { .tg-servizio { font-size: 18px; } .tg-nota { font-size: 14px; } .elementor-element-tg-hero-servizio { padding: 0 36px 0 20px; } }
/* hero tablet/laptop (768–1365px): il ventaglio deve solo fare capolino sopra l'onda, non passare dietro al testo */
@media (min-width: 768px) and (max-width: 1365px) { .elementor-4170 .elementor-element.elementor-element-824b6d9 { bottom: calc(190px - 39vw); } }

/* Tigelliamo?: 3 schede per riga da 1024px in su (nel reference erano al 30% + gap 75px → ne entravano 2) */
@media (min-width: 1024px) {
  .elementor-4170 .elementor-element.elementor-element-4f67a00 { --gap: 40px 40px; --row-gap: 40px; --column-gap: 40px; }
  .elementor-4170 .elementor-element.elementor-element-d82a320.e-con,
  .elementor-4170 .elementor-element.elementor-element-e6efc09.e-con,
  .elementor-4170 .elementor-element.elementor-element-0e76df9.e-con,
  .elementor-4170 .elementor-element.elementor-element-5caeb1c.e-con,
  .elementor-4170 .elementor-element.elementor-element-76843c1.e-con { --width: calc((100% - 80px) / 3); --flex-grow: 0; --flex-shrink: 0; }
  .elementor-4170 .elementor-element.elementor-element-a31bcf3 img,
  .elementor-4170 .elementor-element.elementor-element-fdb95c4 img,
  .elementor-4170 .elementor-element.elementor-element-1f5ad57 img,
  .elementor-4170 .elementor-element.elementor-element-ea4c575 img,
  .elementor-4170 .elementor-element.elementor-element-9acd3aa img { height: 260px; }
}

/* 04b. le tre carte che si girano (dorso a scacchi + etichetta → fronte colorato con l'offerta) */
.elementor-element-tg-flip { width: 100%; max-width: none; }
.tg-flip-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 40px 70px; padding: 0 20px; }
/* NB: il tema Hello stila button:hover/:focus (sfondo #c36!) → serve specificità maggiore */
button.tg-flip, button.tg-flip:hover, button.tg-flip:focus { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; display: block; width: 300px; cursor: pointer; font: inherit; color: inherit; container-type: inline-size; -webkit-tap-highlight-color: transparent; transition: none; }
.tg-flip:focus-visible .tg-flip-inner { outline: 3px solid var(--tg-yellow); outline-offset: 6px; border-radius: 6%; }
.tg-flip-inner { position: relative; display: block; width: 100%; aspect-ratio: 1182 / 2197; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.2, .7, .2, 1); }
.tg-flip:hover .tg-flip-inner { transform: rotateY(-8deg) translateY(-6px); }
.tg-flip.is-flipped .tg-flip-inner, .tg-flip.is-flipped:hover .tg-flip-inner { transform: rotateY(180deg); }
.tg-flip-face { position: absolute; inset: 0; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tg-flip-face img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); }
.tg-flip-front { transform: rotateY(180deg); }
.tg-flip-text { position: absolute; inset: 9% 11% 8%; display: flex; flex-direction: column; text-align: left; white-space: normal; color: var(--tg-cream); font-family: "Besley", Georgia, serif; line-height: 1.15; }
.tg-flip-text > * { flex: 0 0 auto; }
.tg-flip-title { display: block; font-weight: 800; font-size: 8.6cqw; letter-spacing: .02em; }
.tg-flip-body { display: block; margin-top: auto; font-weight: 700; font-size: 7.4cqw; line-height: 1.3; }
.tg-flip-price { display: block; margin: 6% 0 auto; font-weight: 800; font-style: italic; font-size: 15.5cqw; line-height: 1; letter-spacing: -.02em; }
.tg-flip-note { display: block; font-style: italic; font-weight: 600; font-size: 5cqw; line-height: 1.2; }
.tg-flip-label { display: block; margin-top: 22px; text-align: center; white-space: normal; color: var(--tg-yellow); font-family: "Besley", Georgia, serif; }
.tg-flip-label b { display: block; font-weight: 800; font-size: 30px; letter-spacing: .02em; }
.tg-flip-label i { display: block; font-style: italic; font-weight: 500; font-size: 24px; line-height: 1.15; }
@media (max-width: 1023px) { button.tg-flip, button.tg-flip:hover, button.tg-flip:focus { width: 240px; } .tg-flip-label b { font-size: 26px; } .tg-flip-label i { font-size: 20px; } }
@media (max-width: 767px) { .tg-flip-grid { gap: 36px; } button.tg-flip, button.tg-flip:hover, button.tg-flip:focus { width: 230px; } }
@media (prefers-reduced-motion: reduce) { .tg-flip-inner { transition: none; } }

/* 07. titolo offerte: centrato, su due righe, con respiro ai lati (nel reference era un titolo corto a 100px) */
.elementor-4170 .elementor-element.elementor-element-58f8a82 { width: 100%; max-width: 1100px; box-sizing: border-box; padding: 0 24px; text-align: center; }
.elementor-4170 .elementor-element.elementor-element-58f8a82 .elementor-heading-title { font-size: 84px; line-height: 1.02; }
.elementor-4170 .elementor-element.elementor-element-58f8a82 .elementor-heading-title .lower { display: block; }
@media (max-width: 1366px) { .elementor-4170 .elementor-element.elementor-element-58f8a82 .elementor-heading-title { font-size: 66px; } }
@media (max-width: 768px) { .elementor-4170 .elementor-element.elementor-element-58f8a82 .elementor-heading-title { font-size: 46px; } }
@media (max-width: 430px) { .elementor-4170 .elementor-element.elementor-element-58f8a82 .elementor-heading-title { font-size: 38px; } }
.elementor-4170 .elementor-element.elementor-element-d35a868 { padding-left: 24px; padding-right: 24px; box-sizing: border-box; }