/* =========================================================================
   MyArmonia — ENHANCE LAYER
   Caricato DOPO custom.css. Solo rifinitura estetica + animazioni.
   NESSUNA modifica a struttura, testi, foto o colori del brand:
   lavoriamo su finitura (gradienti, ombre, raggi), profondità,
   micro-tipografia e movimento. Nessuna proprietà che alteri la
   griglia rigida di Zyro (niente position/size/grid-template).
   ========================================================================= */

:root {
  --ma-rose:        #c78a8a;      /* rosa-cipria brand */
  --ma-rose-deep:   #8e5757;
  --ma-espresso:    #2a1c18;      /* scuro caldo del brand (sostituisce il nero freddo) */
  --ma-espresso-2:  #3a2823;
  --ma-cream:       #fdfaf6;
  --ma-page:        #fbf3ee;
  --ma-ink:         #5a3e37;      /* testo marrone profondo */
  --ma-line:        rgba(142, 87, 87, 0.14);
  --ma-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ma-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------------
   0) SFONDO PAGINA  —  crema con due aloni caldissimi appena percettibili
   per togliere la "piattezza" da template senza cambiare il colore.
   ------------------------------------------------------------------ */
html.is-myarmonia,
body {
  background-color: var(--ma-page) !important;
  background-image:
    radial-gradient(1200px 680px at 84% -8%,  rgba(199, 138, 138, 0.10), transparent 60%),
    radial-gradient(1000px 620px at -6% 22%,  rgba(242, 222, 196, 0.22), transparent 55%) !important;
  background-attachment: fixed !important;
}
/* Mobile / browser in-app (Instagram, iOS): l'attachment "fixed" sui
   gradienti pu\u00f2 dare scatti o non coprire bene. Su schermi piccoli lo
   rendiamo "scroll" (nessuno scatto, copertura corretta). */
@media (max-width: 920px) {
  html.is-myarmonia, body {
    background-attachment: scroll !important;
  }
}


/* ==================================================================
   1) PILLOLE ROSA  —  stessa identità cromatica, finitura premium
   Manteniamo il rosa del brand: ammorbidiamo solo lo stacco del
   gradiente, aggiungiamo un velo di luce in alto e un'ombra colorata
   piu' profonda e diffusa. Tracking leggermente piu' arioso.
   ================================================================== */
.text-box.layout-element__component--GridTextBox.ma-pill {
  background-image:
    linear-gradient(150deg,
      rgb(238, 154, 162) 0%,
      rgb(231, 132, 142) 52%,
      rgb(221, 120, 132) 100%) !important;
  border-radius: 22px !important;
  box-sizing: border-box !important;
  padding: 0 26px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 -16px 30px -22px rgba(120, 50, 60, 0.55) inset,
    0 22px 48px -22px rgba(214, 108, 122, 0.62),
    0 6px 16px -10px rgba(120, 50, 60, 0.30) !important;
}


/* ==================================================================
   2) RIQUADRI CREMA / CARD DI TESTO  —  vetro caldo + RESPIRO INTERNO
   Le celle di Zyro sono ad altezza automatica: aggiungere padding fa
   crescere il box (niente overflow) e d\u00e0 al testo l'aria che gli manca,
   cos\u00ec la casella \u00e8 sempre pi\u00f9 grande del testo. box-sizing border-box
   mantiene invariata la larghezza esterna (la colonna della griglia).
   ================================================================== */
.text-box.layout-element__component--GridTextBox.ma-card-text {
  background-color: rgba(253, 250, 246, 0.86) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  backdrop-filter: blur(14px) saturate(1.12);
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 28px 64px -30px rgba(86, 50, 50, 0.34),
    0 10px 24px -16px rgba(86, 50, 50, 0.18) !important;
  box-sizing: border-box !important;
  /* Solo respiro ORIZZONTALE in CSS (sicuro: border-box mantiene la
     larghezza esterna, niente sovrapposizioni laterali). Il respiro
     VERTICALE lo aggiunge enhance.js solo dove c'\u00e8 spazio libero, cos\u00ec
     le caselle non si toccano mai. */
  padding: 0 28px !important;
}


/* ==================================================================
   3) CARD IMMAGINI  —  profondita' calda, bordo-luce, zoom morbido
   ================================================================== */
/* GARANZIA: le foto delle card sono SEMPRE visibili. Niente fade che
   possa lasciarle a opacity 0 (quadrati vuoti) se il JS parte male o
   se l'evento 'load' \u00e8 gi\u00e0 passato. Affidabilit\u00e0 prima di tutto. */
.image-wrapper--layout img,
.image-wrapper--layout img.ma-fade {
  opacity: 1 !important;
}
.block:not(.block--header):not(.block--footer) .image-wrapper--layout {
  border-radius: 20px;
  box-shadow:
    0 26px 60px -28px rgba(86, 50, 50, 0.46),
    0 8px 20px -14px rgba(86, 50, 50, 0.24);
  transition:
    transform 0.55s var(--ma-ease),
    box-shadow 0.55s var(--ma-ease);
}
.block:not(.block--header):not(.block--footer) .image-wrapper--layout::after {
  /* sottile cornice-luce interna per staccare la foto dallo sfondo */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  pointer-events: none;
  z-index: 2;
}
.block:not(.block--header):not(.block--footer) .image-wrapper--layout:hover {
  transform: translateY(-7px);
  box-shadow:
    0 38px 80px -30px rgba(86, 50, 50, 0.55),
    0 14px 30px -18px rgba(86, 50, 50, 0.30);
}
/* NB: nessuno zoom sulle foto (né in entrata né all'hover): le immagini
   restano identiche all'originale. Solo un lieve sollevamento all'hover. */


/* ==================================================================
   4) SEZIONI SCURE  —  dal nero freddo (29,30,32) all'espresso caldo
   Il builder usa un overlay grigio-bluastro: lo riportiamo nella
   famiglia calda del brand. Solo colore, niente layout.
   ================================================================== */
.block-background__overlay--fix,
.block-background__overlay {
  background-image: linear-gradient(160deg,
              var(--ma-espresso-2) 0%,
              var(--ma-espresso) 100%) !important;
}


/* ==================================================================
   5) BOTTONI / CTA  —  finitura gioiello
   ================================================================== */
.grid-button.grid-button--primary {
  background-image: linear-gradient(135deg,
              rgb(233, 142, 152) 0%,
              rgb(220, 116, 128) 100%) !important;
  border-radius: 999px !important;
  letter-spacing: 0.02em;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.40) inset,
    0 16px 34px -16px rgba(214, 108, 122, 0.70),
    0 4px 12px -8px rgba(120, 50, 60, 0.35) !important;
  position: relative;
  overflow: hidden;
}
/* riflesso che scorre all'hover */
.grid-button.grid-button--primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg,
              transparent,
              rgba(255, 255, 255, 0.38),
              transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ma-ease);
  pointer-events: none;
}
.grid-button.grid-button--primary:hover::after { left: 130%; }
.grid-button.grid-button--primary:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 22px 44px -16px rgba(214, 108, 122, 0.80),
    0 6px 16px -8px rgba(120, 50, 60, 0.40) !important;
}
/* il bottone del form resta squadrato-morbido, non a pillola piena */
.form .grid-button.grid-button--primary,
.form__button.grid-button--primary {
  border-radius: 16px !important;
}


/* ==================================================================
   6) HEADER  —  vetro caldo + hairline inferiore
   ================================================================== */
.block-header .block-background,
.block-header .background {
  background-color: rgba(253, 250, 246, 0.82) !important;
  -webkit-backdrop-filter: saturate(1.1) blur(12px);
  backdrop-filter: saturate(1.1) blur(12px);
}
.block-header {
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.4s var(--ma-ease), border-color 0.4s var(--ma-ease);
}
body.ma-scrolled .block-header {
  border-bottom-color: var(--ma-line);
  box-shadow: 0 14px 34px -20px rgba(86, 50, 50, 0.34) !important;
}
/* underline di nav: easing piu' morbido, tinta brand */
.block-header__nav-links .item-content::after {
  background: linear-gradient(90deg, var(--ma-rose), var(--ma-rose-deep)) !important;
  height: 1.5px !important;
}


/* ==================================================================
   7) MICRO-TIPOGRAFIA  —  solo bilanciamento delle righe.
   NIENTE modifiche a interlinea o spaziatura: i box di Zyro sono
   dimensionati sulle metriche originali del testo, quindi cambiarle
   farebbe sporgere il testo dai riquadri. Ci limitiamo a 'text-wrap'
   che migliora gli a-capo senza alterare dimensioni del testo.
   ================================================================== */
.text-box.layout-element__component--GridTextBox h1,
.text-box.layout-element__component--GridTextBox h2,
.text-box.layout-element__component--GridTextBox h3 {
  text-wrap: balance;
}
.text-box.layout-element__component--GridTextBox p {
  text-wrap: pretty;
}
/* etichette brevi tutte-maiuscole: piu' tracking = piu' lusso */
.grid-button.grid-button--primary,
.block-header__nav-links .item-content {
  font-feature-settings: "ss01", "case";
}


/* ==================================================================
   8) FORM  —  rifinitura coerente con le card
   ================================================================== */
.form.layout-element__component--GridForm {
  border-radius: 24px;
}
.input__component,
.input__component--textarea,
.select-input__input,
.form__control input,
.form__control textarea,
.form__control select {
  border-radius: 14px !important;
  background-color: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid var(--ma-line) !important;
}
.input__component:hover,
.form__control input:hover,
.form__control textarea:hover {
  border-color: rgba(199, 138, 138, 0.55) !important;
}


/* ==================================================================
   9) FAB "TORNA SU" + scrollbar  —  coerenza brand
   ================================================================== */
#ma-to-top {
  background: rgba(253, 250, 246, 0.92) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px -10px rgba(86, 50, 50, 0.5) !important;
}


/* ==================================================================
   10) CARICAMENTO  —  niente comparsa "a blocchi" durante lo scroll
   Disattiviamo SIA il reveal originale (.ma-reveal di form-card-fit.js)
   SIA eventuali .fx-rise: i contenuti sono sempre presenti. La pagina
   non si "costruisce" mentre si scorre. Resta solo un dolce fade
   d'insieme al primo caricamento (vedi sotto), morbido e uniforme.
   ================================================================== */

/* tutti i blocchi sempre visibili: nessun fade-on-scroll a blocchi */
body.ma-js .block.ma-reveal,
body.ma-js .block.ma-reveal.ma-reveal-in,
body.fx-on .fx-rise,
body.fx-on .fx-rise.fx-in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* Un solo, dolce fade d'insieme della pagina al primo caricamento:
   morbido e uniforme, non a blocchi. Si disattiva da sé dopo l'avvio. */
body.ma-pagefade #__zyro-app,
body.ma-pagefade > div:first-of-type {
  animation: maPageIn 0.7s var(--ma-ease-out) both;
}
@keyframes maPageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ==================================================================
   11) ACCESSIBILITA'  —  rispetta "riduci movimento"
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.is-myarmonia, body { background-attachment: scroll !important; }
  body.ma-pagefade #__zyro-app,
  body.ma-pagefade > div:first-of-type { animation: none !important; }
  .grid-button.grid-button--primary::after { display: none; }
}