/* ==========================================================================
   Terrazzini Cibele — fondamenta
   Valori presi dagli stili calcolati del sito vivo (docs/research/design_tokens.json).
   Niente Elementor, niente qodef: solo i valori che quel CSS produceva.
   ========================================================================== */

:root{
  /* colori */
  --nero:#000;
  --testo:#505050;          /* corpo */
  --testo-forte:#333;
  --testo-tenue:#7a7a7a;    /* paragrafi introduttivi */
  --grigio:#8a8a8a;
  --linea:#c4c4c4;          /* separatori */
  --accento:#0b6354;        /* verde del brand: occhielli e bottone PRENOTA */
  --bianco:#fff;

  /* fondali */
  --rosa-alto:#fff4f1;
  --rosa-basso:#fff8f6;
  --crema-alto:#fffbf9;
  --crema-basso:#fff;

  /* misure */
  --griglia:1140px;         /* contenitore dei contenuti */
  --griglia-larga:1400px;   /* contenitore a tutta larghezza */
  --bordo-pagina:40px;      /* respiro laterale dell'header */
  --altezza-header:130px;

  /* tipografia */
  --corpo:'Sarabun',sans-serif;
  --display:'Forum',serif;
}

/* --------------------------------------------------------------- azzeramento */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bianco);
  font-family:var(--corpo);
  font-size:16px;
  font-weight:300;
  line-height:29.92px;
  color:var(--testo);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;border:0;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
figure{margin:0}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:400;font-family:var(--display);color:var(--nero)}
p{margin:0 0 10px}
:focus-visible{outline:2px solid var(--accento);outline-offset:3px}

/* --------------------------------------------------------------- impianto */
.contenitore{
  width:100%;
  max-width:var(--griglia);
  margin-inline:auto;
  padding-inline:20px;
}
.contenitore--largo{max-width:var(--griglia-larga)}
.sezione{position:relative}
.sfondo-rosa{background-image:linear-gradient(var(--rosa-alto) 0%,var(--rosa-basso) 100%)}
.sfondo-crema{background-image:linear-gradient(var(--crema-alto) 0%,var(--crema-basso) 100%)}

/* ------------------------------------------------------ titolo di sezione */
/* occhiello + titolo + filo verticale: il gruppo si ripete in tutta la home */
.titolo-sezione{text-align:center;position:relative}
.titolo-sezione--sinistra{text-align:left}
.occhiello{
  margin:10px 0;
  font-family:var(--corpo);
  font-size:14px;
  font-weight:500;
  line-height:32px;
  letter-spacing:2.1px;
  text-transform:uppercase;
  color:var(--accento);
}
.titolo{
  margin-top:-9px;
  font-family:var(--display);
  font-size:58px;
  font-weight:400;
  line-height:69.6px;
  letter-spacing:-2.32px;
  color:var(--nero);
}
.titolo--medio{font-size:46px;line-height:55.2px;letter-spacing:-1.84px}
.titolo--piccolo{font-size:34px;line-height:40.8px;letter-spacing:-1.38px}
/* filo verticale che scende sopra l'occhiello */
.filo{
  display:block;
  width:1px;
  height:48px;
  background:var(--linea);
  position:absolute;
  left:50%;
  top:-54px;
}
.titolo-sezione--sinistra .filo{left:0}

.testo-intro{
  font-family:'Roboto',var(--corpo);
  font-size:18px;
  font-weight:400;
  line-height:33.66px;
  color:var(--testo-tenue);
}

/* --------------------------------------------------------------- bottoni */
.bottone{
  display:inline-block;
  font-family:var(--corpo);
  font-size:11px;
  font-weight:600;
  line-height:31.9px;
  letter-spacing:3.3px;
  text-transform:uppercase;
  color:var(--nero);
  padding:21px 46px;
  border:1px solid var(--nero);
  background:transparent;
  transition:color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;
}
/* hover: il tema porta il bottone al verde del brand, non al nero
   (.qodef-button.qodef-layout--outlined:hover in augustine-core) */
.bottone:hover{background:var(--accento);border-color:var(--accento);color:var(--bianco)}
.bottone--pieno{background:var(--accento);border-color:var(--accento);color:var(--bianco)}
.bottone--pieno:hover{background:var(--accento);border-color:var(--accento);color:var(--bianco)}
.bottone--piccolo{padding:12px 24px;font-size:11px}
.bottone--chiaro{color:var(--bianco);border-color:var(--bianco)}
.bottone--chiaro:hover{background:var(--bianco);color:var(--nero)}

/* ------------------------------------------------------- blocco di azione */
/* Un solo invito dominante per schermata, il resto piu' leggero.
   Tre pesi, tutti gia' nella tavolozza del sito — nessun colore nuovo:
     1. .bottone--pieno       verde pieno   -> l'azione primaria, una sola
     2. .bottone              contornato    -> l'alternativa (Booking)
     3. .azioni__telefono     testo con filo-> il ripiego (telefono)
   L'ordine verticale e' quello della lettura: azione, alternativa, prova. */
.azioni{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  text-align:center;
}
.azioni--sinistra{align-items:flex-start;text-align:left}

/* la coppia primaria/alternativa sta su una riga sola finche' ci sta */
.azioni__coppia{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:14px 20px;
}
.azioni--sinistra .azioni__coppia{justify-content:flex-start}

/* riga di rassicurazione sotto l'azione: dice dove porta il clic, non promette
   nulla che non sia verificabile */
.azioni__nota{
  margin:0;
  max-width:52ch;
  font-family:var(--corpo);
  font-size:14px;
  font-weight:300;
  line-height:22px;
  color:var(--testo-tenue);
}

/* Terzo livello: il telefono. Non e' un bottone e non deve sembrarlo — resta
   nella riga di testo, stesso corpo, con il filo sotto perche' si veda che si
   tocca. Su un telefono e' l'azione a minor attrito che ci sia. */
.azioni__telefono{
  color:var(--testo-forte);
  border-bottom:1px solid var(--linea);
  white-space:nowrap;
  transition:color .2s ease-out,border-color .2s ease-out;
}
.azioni__telefono:hover{color:var(--accento);border-color:var(--accento)}

/* ---------------------------------------------------------- prova sociale */
/* Punteggio Booking accanto all'invito a prenotare, non solo nell'intestazione.
   Dati CONGELATI alla copia del sito, come il badge e l'intestazione: 9,5 su
   100 recensioni. Non si aggiornano da soli. */
.prova-sociale{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  gap:4px 9px;
  font-family:var(--corpo);
  font-size:14px;
  font-weight:300;
  line-height:20px;
  color:var(--testo-tenue);
}
.prova-sociale__stelle{
  display:inline-flex;
  align-items:center;
  gap:2px;
  color:var(--accento);
  line-height:0;
}
.prova-sociale__stella{
  width:14px;
  height:16px;
  fill:currentColor;
}
.prova-sociale__voto{
  font-size:16px;
  font-weight:600;
  color:var(--testo-forte);
}
.prova-sociale__fonte{border-bottom:1px solid transparent;transition:border-color .2s ease-out}
a.prova-sociale:hover .prova-sociale__fonte{border-color:var(--linea)}

/* --------------------------------------------------------------- utilita' */
.solo-desktop{display:block}
.solo-mobile{display:none}
.visivamente-nascosto{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* comparsa allo scorrimento: il tema la faceva in JS, qui e' CSS + observer */
.appare{opacity:0;transform:translateY(30px);transition:opacity .8s ease-out,transform .8s ease-out}
.appare.visibile{opacity:1;transform:none}

/* --------------------------------------------------------- schermi stretti */
@media (max-width:768px){
  /* i due bottoni non stanno affiancati sotto i 768: impilati e larghi uguali,
     cosi' il bersaglio del tocco resta ampio e la gerarchia si legge dall'alto */
  .azioni__coppia{flex-direction:column;align-items:stretch;width:100%;max-width:340px}
  .azioni--sinistra .azioni__coppia{align-items:stretch}
  .azioni__coppia .bottone{display:block;text-align:center;padding-inline:20px}
  .azioni{gap:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .appare{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}