/* Font ospitati sul sito (nessuna richiesta a Google) */
  @font-face { font-family: "Mulish"; font-style: normal; font-weight: 400; font-display: swap; src: url("font/mulish-latin-400-normal.woff2") format("woff2"); }
  @font-face { font-family: "Mulish"; font-style: normal; font-weight: 600; font-display: swap; src: url("font/mulish-latin-600-normal.woff2") format("woff2"); }
  @font-face { font-family: "Mulish"; font-style: normal; font-weight: 700; font-display: swap; src: url("font/mulish-latin-700-normal.woff2") format("woff2"); }
  @font-face { font-family: "Tenor Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("font/tenor-sans-latin-400-normal.woff2") format("woff2"); }
  @font-face { font-family: "Mrs Saint Delafield"; font-style: normal; font-weight: 400; font-display: swap; src: url("font/mrs-saint-delafield-latin-400-normal.woff2") format("woff2"); }

  /* Colori presi dalle pagine della brochure */
  :root {
    --cioccolato: #2E0F0B;   /* pagina "La scelta del Beauty Look" */
    --bordeaux: #5E1426;     /* pagine "La mia Estetica" e "Prenotazione" */
    --bordeaux-testo: #4A0F1F;
    --malva: #8F625F;        /* pagine "Chi sono" e "La mia Visione" (un po' più scuro per la leggibilità) */
    --taupe: #B09A92;        /* pagina "I prodotti" */
    --sabbia: #D6BFAF;       /* pagina "Per la mia sposa" */
    --perla: #EDEBEA;        /* pagina "Le mie proposte" */
    --testo-chiaro: #F6ECEA;

    --script: "Mrs Saint Delafield", "Snell Roundhand", cursive;
    --caps: "Tenor Sans", "Optima", "Gill Sans", sans-serif;
    --corpo: "Mulish", "Helvetica Neue", Arial, sans-serif;

    --w: 1080px;
  }

  *, *::before, *::after { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html { scroll-behavior: smooth; scroll-padding-top: 72px; }
  body {
    margin: 0;
    background: var(--cioccolato);
    color: var(--testo-chiaro);
    font-family: var(--corpo);
    font-size: 1.0625rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  p { margin: 0 0 1em; }
  strong { font-weight: 700; }
  :focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

  .wrap { width: min(var(--w), 100% - 2.5rem); margin-inline: auto; }

  /* Ogni sezione è una "pagina" della brochure: cambia colore di fondo, testo e colore dello script */
  .sezione { background: var(--bg); color: var(--fg); padding: clamp(4rem, 9vw, 7rem) 0; }
  .t-malva      { --bg: var(--malva);      --fg: var(--testo-chiaro); --acc: var(--bordeaux-testo); --linea: rgba(246,236,234,.4); }
  .t-bordeaux   { --bg: var(--bordeaux);   --fg: var(--testo-chiaro); --acc: #E8CFC0;               --linea: rgba(246,236,234,.3); }
  .t-cioccolato { --bg: var(--cioccolato); --fg: var(--testo-chiaro); --acc: #D99A98;               --linea: rgba(246,236,234,.25); }
  .t-sabbia     { --bg: var(--sabbia);     --fg: var(--bordeaux-testo); --acc: #7A1B36;            --linea: rgba(74,15,31,.35); }
  .t-perla      { --bg: var(--perla);      --fg: var(--bordeaux-testo); --acc: #7A1B36;            --linea: rgba(74,15,31,.35); }
  .t-taupe      { --bg: var(--taupe);      --fg: var(--cioccolato);     --acc: var(--bordeaux);    --linea: rgba(46,15,11,.35); }

  /* Titolo: maiuscolo elegante + corsivo a mano che si sovrappone, come nella brochure */
  .titolo { margin: 0 0 2.5rem; font-weight: 400; line-height: 1; text-align: center; }
  .titolo .caps {
    display: block;
    font-family: var(--caps);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: clamp(1.7rem, 4.6vw, 3rem);
  }
  .titolo .script {
    display: block;
    font-family: var(--script);
    color: var(--acc);
    font-size: clamp(3.4rem, 10vw, 6.4rem);
    line-height: 0.9;
    margin-top: -0.28em;
    margin-left: 34%;
    text-transform: none;
  }
  .titolo--solo .caps { color: var(--acc); }

  .testo { max-width: 58ch; margin-inline: auto; }
  .testo--sx { margin-inline: 0; }
  .script-nota { font-family: var(--script); color: var(--acc); font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.1; margin: 1.2rem 0 0; }

  /* Bottoni */
  .btn {
    display: inline-block;
    padding: 0.95rem 1.9rem;
    border: 1px solid var(--fg);
    background: transparent;
    color: var(--fg);
    font: 400 1rem/1 var(--caps);
    letter-spacing: 0.06em;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, color .2s;
  }
  .btn:hover { background: var(--fg); color: var(--bg); }
  .btn--pieno { background: var(--sabbia); border-color: var(--sabbia); color: var(--cioccolato); }
  .btn--pieno:hover { background: var(--testo-chiaro); border-color: var(--testo-chiaro); color: var(--cioccolato); }
  .t-perla .btn--pieno, .t-sabbia .btn--pieno { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff; }
  .t-perla .btn--pieno:hover, .t-sabbia .btn--pieno:hover { background: var(--cioccolato); border-color: var(--cioccolato); }

  /* Header */
  header.top { position: sticky; top: 0; z-index: 20; background: rgba(46, 15, 11, 0.96); color: var(--testo-chiaro); border-bottom: 1px solid rgba(246,236,234,.15); }
  .top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 1rem; }
  .logo { font-family: var(--caps); font-size: 1.2rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; }
  .top nav { display: flex; gap: 1.8rem; }
  .top nav a { text-decoration: none; font-size: 0.92rem; opacity: 0.85; }
  .top nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
  .top .btn { padding: 0.65rem 1.2rem; font-size: 0.9rem; --fg: var(--testo-chiaro); --bg: var(--cioccolato); }

  /* Hero, come la copertina della brochure */
  .hero { position: relative; min-height: min(88vh, 780px); display: grid; place-items: center; text-align: center; background: var(--cioccolato); color: var(--testo-chiaro); overflow: hidden; --fg: var(--testo-chiaro); --bg: var(--cioccolato); --acc: #F0D9CF; }
  .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
  .hero-in { position: relative; padding: 4rem 0; width: min(760px, 100% - 2.5rem); }
  .hero .marchio { font-family: var(--caps); letter-spacing: 0.22em; text-transform: uppercase; font-size: 1.05rem; margin-bottom: 2.2rem; }
  .hero h1.titolo { margin-bottom: 1.6rem; }
  .hero h1 .caps { font-size: clamp(2.2rem, 6.4vw, 4.2rem); }
  .hero h1 .script { font-size: clamp(3rem, 9vw, 5.6rem); margin-left: 12%; }
  .hero .sotto { font-size: 1.15rem; max-width: 46ch; margin: 0 auto 2rem; }
  .hero .azioni { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.9rem; }
  .hero .cert { margin-top: 2rem; font-size: 0.92rem; opacity: 0.85; }

  @media (prefers-reduced-motion: no-preference) {
    .hero-in { animation: entra 1.1s ease-out both; }
    @keyframes entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  /* Chi sono */
  .chi { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
  .chi .foto { aspect-ratio: 4 / 5; background: rgba(46,15,11,.25); overflow: hidden; }
  .chi .foto img { width: 100%; height: 100%; object-fit: cover; }

  /* La mia visione */
  .parole { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem clamp(2rem, 8vw, 6rem); margin-top: 3rem; }
  .parole span { font-family: var(--script); font-size: clamp(2.6rem, 6vw, 4rem); color: var(--acc); line-height: 1; }

  /* Portfolio e recensioni (nascosti finché non hai materiale vero) */
  .galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
  .galleria figure { margin: 0; }
  .galleria img { aspect-ratio: 3/4; object-fit: cover; width: 100%; background: var(--sabbia); }
  .galleria figcaption { font-size: 0.9rem; margin-top: 0.5rem; opacity: .8; }
  .recensioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
  .recensioni blockquote { margin: 0; font-size: 1.15rem; }
  .recensioni cite { display: block; margin-top: 0.8rem; font-style: normal; font-size: 0.95rem; opacity: .85; }

  /* Proposte */
  .proposte { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); margin-top: 1rem; }
  .proposta { border-top: 1px solid var(--linea); padding-top: 1.4rem; display: flex; flex-direction: column; }
  .proposta h3 { font-family: var(--script); font-weight: 400; font-size: 4.6rem; line-height: 0.85; color: var(--acc); margin: 0 0 1.2rem; }
  .proposta ul { list-style: none; padding: 0; margin: 0 0 1.4rem; flex: 1; }
  .proposta li { padding: 0.35rem 0; }
  .proposta .prezzo { font-family: var(--caps); font-size: 2.3rem; line-height: 1; margin: 0 0 0.3rem; }
  .proposta .slogan { font-family: var(--script); font-size: 2rem; line-height: 1; color: var(--acc); margin: 0 0 1.4rem; }
  .proposta .btn { align-self: flex-start; }

  .stelle { margin-top: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--linea); padding-top: 2.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
  .stelle h3 { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 400; font-size: 1.9rem; line-height: 1.1; margin: 0 0 1rem; }
  .stelle h3 span { font-family: var(--script); text-transform: none; letter-spacing: 0; color: var(--acc); font-size: 4rem; margin-left: 0.2em; }
  .stelle dl { margin: 0; }
  .stelle dl div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--linea); font-size: 1.2rem; }
  .stelle dt { margin: 0; }
  .stelle dd { margin: 0; font-family: var(--caps); }
  .stelle .nota { font-size: 0.95rem; margin: 1rem 0 0; opacity: .85; }

  /* Beauty look e prodotti */
  .evidenza { max-width: 62ch; margin: 2rem auto 0; padding-top: 2rem; border-top: 1px solid var(--linea); }
  .brand { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; margin: 1.5rem 0 0; padding: 0; list-style: none; font-family: var(--caps); font-size: 1.25rem; }

  /* Prenotazione */
  .passi { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .passi li { border-top: 1px solid var(--linea); padding-top: 1.2rem; }
  .passi h3 { font-family: var(--caps); font-weight: 400; font-size: 1.25rem; letter-spacing: 0.04em; margin: 0 0 0.6rem; }
  .passi p { margin: 0; }
  .nb { margin: 3rem 0 0; text-align: center; font-size: 0.95rem; opacity: .9; }

  /* Altri servizi + zone */
  .duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
  .duo h2 { font-family: var(--caps); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 400; font-size: clamp(1.5rem, 3.6vw, 2.2rem); line-height: 1.15; margin: 0 0 1.2rem; }
  .duo h2 span { display: block; font-family: var(--script); text-transform: none; letter-spacing: 0; color: var(--acc); font-size: 3.6rem; line-height: .95; margin-top: -0.1em; }
  .zone { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2rem; }
  .zone li { padding: 0.55rem 0; border-bottom: 1px solid var(--linea); break-inside: avoid; font-family: var(--caps); font-size: 1.1rem; }

  /* FAQ */
  .faq { max-width: 780px; margin: 0 auto; }
  .faq details { border-top: 1px solid var(--linea); padding: 1.1rem 0; }
  .faq details:last-child { border-bottom: 1px solid var(--linea); }
  .faq summary { cursor: pointer; font-family: var(--caps); font-size: 1.15rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; transition: transform .2s; }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq details p { margin: 0.8rem 0 0; max-width: 62ch; }

  /* Contatti */
  .contatti { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
  .contatti .titolo { text-align: left; }
  .contatti .dati p { margin-bottom: 0.3rem; }
  form { display: grid; gap: 1.1rem; }
  .riga { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
  label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.35rem; }
  input, select, textarea {
    width: 100%; font: inherit; color: var(--cioccolato);
    padding: 0.8rem 0.9rem;
    background: var(--testo-chiaro);
    border: 1px solid transparent;
    border-radius: 0;
  }
  input:focus, select:focus, textarea:focus { outline: 3px solid var(--bordeaux-testo); outline-offset: 1px; }
  textarea { min-height: 110px; resize: vertical; }
  .consenso { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.92rem; font-weight: 400; }
  .consenso input { width: auto; margin-top: 0.35rem; accent-color: var(--bordeaux); }
  .esito { min-height: 1.5em; font-weight: 600; margin: 0; }
  .nota-form { font-size: 0.92rem; margin: 0; opacity: .9; }
  form .btn { justify-self: start; background: var(--bordeaux-testo); border-color: var(--bordeaux-testo); color: #fff; }
  form .btn:hover { background: var(--cioccolato); border-color: var(--cioccolato); }

  /* Footer */
  footer { background: var(--cioccolato); color: var(--testo-chiaro); padding: 3rem 0; font-size: 0.95rem; }
  footer .wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; }
  footer h3 { font: 400 1rem var(--caps); letter-spacing: 0.08em; margin: 0 0 0.7rem; }
  footer ul { list-style: none; padding: 0; margin: 0; }
  footer li { margin-bottom: 0.4rem; }
  footer a { text-decoration: none; }
  footer a:hover { text-decoration: underline; }
  footer .legale { grid-column: 1 / -1; border-top: 1px solid rgba(246,236,234,.2); padding-top: 1.2rem; font-size: 0.85rem; opacity: .85; margin: 0; }

  /* WhatsApp fisso */
  .wa { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 30; display: inline-flex; align-items: center; gap: 0.5rem; background: #1F7A4D; color: #fff; text-decoration: none; padding: 0.85rem 1.2rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
  .wa:hover { background: #17603c; }
  .wa svg { width: 20px; height: 20px; fill: currentColor; }

  .solo-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* Mobile */
  @media (max-width: 860px) {
    .chi, .duo, .contatti, .stelle { grid-template-columns: 1fr; }
    .proposte, .passi { grid-template-columns: 1fr; gap: 2.5rem; }
    .chi .foto { max-width: 340px; }
    .riga { grid-template-columns: 1fr; }
    footer .wrap { grid-template-columns: 1fr; }
    .zone { columns: 1; }
    .titolo .script { margin-left: 14%; }
    .wa span { display: none; }
    .wa { padding: 0.9rem; }
  }

  /* ===== Pagine servizio ===== */
  .hero--pagina { min-height: 0; padding: clamp(3.5rem, 8vw, 6rem) 0; }
  .hero--pagina .hero-in { padding: 0; }
  .hero--pagina .sotto { margin-bottom: 1.8rem; }
  .briciole { font-size: 0.9rem; margin: 0 0 1.6rem; opacity: .85; }
  .briciole a { text-decoration: underline; text-underline-offset: 4px; }

  .punti { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem clamp(2rem, 5vw, 4rem); margin: 2.5rem auto 0; max-width: 880px; }
  .punti div { border-top: 1px solid var(--linea); padding-top: 1rem; }
  .punti h3 { font-family: var(--caps); font-weight: 400; font-size: 1.25rem; letter-spacing: 0.03em; margin: 0 0 0.5rem; }
  .punti p { margin: 0; }

  .righe { max-width: 760px; margin: 0 auto; }
  .righe div { padding: 1.1rem 0; border-top: 1px solid var(--linea); }
  .righe div:last-child { border-bottom: 1px solid var(--linea); }
  .righe dt { font-family: var(--caps); font-size: 1.2rem; letter-spacing: 0.03em; margin-bottom: 0.3rem; }
  .righe dd { margin: 0; }
  .righe { margin-top: 0; }

  .comuni-titolo { font-family: var(--caps); font-weight: 400; font-size: 1.25rem; letter-spacing: 0.05em; margin: 2rem 0 0.6rem; }
  .comuni { list-style: none; padding: 0; margin: 0; columns: 3; column-gap: 2rem; }
  .comuni li { padding: 0.35rem 0; border-bottom: 1px solid var(--linea); break-inside: avoid; }
  .comuni--altre { columns: 2; }

  .link-occasioni { list-style: none; padding: 0; margin: 2rem auto 0; max-width: 760px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem 2rem; }
  .link-occasioni a { display: block; padding: 0.9rem 0; border-top: 1px solid var(--linea); font-family: var(--caps); font-size: 1.15rem; text-decoration: none; }
  .link-occasioni a:hover { text-decoration: underline; text-underline-offset: 6px; }

  .contatti--pagina .titolo { text-align: left; }
  .contatti--pagina .titolo .script { margin-left: 8%; }

  @media (max-width: 860px) {
    .punti, .link-occasioni { grid-template-columns: 1fr; }
    .comuni { columns: 2; }
  }
  @media (max-width: 520px) {
    .comuni, .comuni--altre { columns: 1; }
  }


  /* ===== Due look di esempio ===== */
  .look-coppia { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.8rem, 2.5vw, 1.5rem); max-width: 720px; margin: 3.5rem auto 0; }
  .look-coppia figure { margin: 0; }
  .look-coppia img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: rgba(46,15,11,.25); }
  .look-coppia figcaption { margin-top: 0.7rem; font-size: 0.95rem; opacity: 0.92; }


  /* ===== Pagine legali ===== */
  .doc { max-width: 720px; margin: 0 auto; }
  .doc h2 { font-family: var(--caps); font-weight: 400; font-size: 1.45rem; letter-spacing: 0.03em; line-height: 1.25; margin: 2.6rem 0 0.8rem; }
  .doc h2:first-child { margin-top: 0; }
  .doc ul { padding-left: 1.2rem; margin: 0 0 1em; }
  .doc li { margin-bottom: 0.4rem; }
  .doc a { text-decoration: underline; text-underline-offset: 3px; }
  .doc .agg { font-size: 0.95rem; opacity: .85; margin-bottom: 2rem; }


  /* ===== Copertina della home: nome, firma, luogo ===== */
  .hero .marchio { margin-bottom: 0.2rem; }
  .hero .firma { font-family: var(--script); color: var(--acc); font-size: clamp(2.8rem, 7vw, 4rem); line-height: 1; margin: 0 0 1.8rem; }
  .hero h1 .caps { font-size: clamp(2.4rem, 7vw, 4.4rem); }
  .hero .geo { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--caps); letter-spacing: 0.1em; font-size: 0.98rem; margin: 0.2rem 0 1.6rem; }
  .hero .geo svg { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }

  @media (max-width: 520px) {
    .hero .geo { font-size: 0.84rem; letter-spacing: 0.05em; gap: 0.45rem; }
  }

  @media (max-width: 400px) {
    .hero .geo { font-size: 0.76rem; letter-spacing: 0.03em; }
  }