/* ==========================================================================
   Pagina /chi-siamo/ — contenuto centrale (copertina, racconto, dotazioni,
   galleria, invito a prenotare, esperienza, panorama, recensioni).
   Valori presi dagli stili calcolati del sito vivo a 1440px.
   Le variabili e le classi comuni (contenitore, occhiello, testo-intro,
   bottone) stanno in base.css: qui c'e' solo cio' che e' di questa pagina.
   ========================================================================== */

.chi-siamo-simboli{position:absolute;width:0;height:0;overflow:hidden}

/* ------------------------------------------------------------- copertina */
.chi-siamo-copertina{
  position:relative;
  height:515px;
  overflow:hidden;
  background:#fafafa;          /* fondo dietro alla foto */
  text-align:center;
}
/* l'originale muoveva la foto in parallasse: qui e' ferma, ma inquadrata
   sullo stesso punto (72,74% dell'altezza) che si vedeva a riposo */
.chi-siamo-copertina__foto{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 72.74%;
}
.chi-siamo-copertina__contenuto{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:100%;
}
.chi-siamo-copertina__titolo{
  margin:0;
  font-family:var(--display);
  font-size:72px;
  font-weight:400;
  line-height:79.992px;
  letter-spacing:-2.88px;
  color:var(--bianco);
}

/* ---------------------------------------------------------- intestazione */
.chi-siamo-intestazione{
  margin-top:100px;
  padding:28px 0 24px 5%;   /* i 28px erano il margine sopra al titolo */
}
.chi-siamo-intestazione__titolo{
  margin:0;
  font-family:var(--display);
  font-size:110px;
  font-weight:400;
  line-height:121px;
  letter-spacing:-3.3px;
  color:#ccc1bd;              /* beige del tema per i titoloni */
}

/* -------------------------------------------------------------- racconto */
.chi-siamo-racconto{padding-left:4%}
.chi-siamo-racconto__griglia{display:flex}
.chi-siamo-racconto__colonna{width:50%}
/* il 3% e' calcolato sulla colonna (550px a 1440) e vale 16,5px */
.chi-siamo-racconto__colonna p{padding-right:3%;margin:10px 0}

/* ------------------------------------------------------------------ filo */
.chi-siamo-filo{padding-top:35px}
.chi-siamo-filo__linea{
  display:block;
  width:1px;
  height:118px;
  margin-left:2.7%;
  background:var(--linea);
}

/* -------------------------------------------------------------- facciata */
.chi-siamo-facciata img{width:100%;height:auto}

/* ------------------------------------------------------------- dotazioni */
.chi-siamo-dotazioni{padding-top:130px}
.chi-siamo-dotazioni__griglia{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.chi-siamo-dotazioni__colonna + .chi-siamo-dotazioni__colonna{padding-left:10%}
/* i 2,92px sotto ricreano l'interlinea 29,92 della riga dell'originale */
.chi-siamo-dotazioni__voce{
  display:flex;
  align-items:flex-start;
  padding-bottom:2.92px;
}
.chi-siamo-dotazioni__voce + .chi-siamo-dotazioni__voce{margin-top:48px}
.chi-siamo-dotazioni__icona{
  flex:0 0 auto;
  width:16px;
  height:16px;
  margin:5px 12px 0 0;
  color:var(--accento);
}
.chi-siamo-dotazioni__titolo{
  margin:0;
  font-family:var(--display);
  font-size:27px;
  font-weight:400;
  line-height:27px;
  color:var(--nero);
}

/* -------------------------------------------------------------- galleria */
/* a tutta larghezza: tre foto da bordo a bordo con 30px di canale */
.chi-siamo-galleria{padding-top:150px}
.chi-siamo-galleria__griglia{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  padding-bottom:30px;
}
.chi-siamo-galleria__voce img{width:100%;height:auto}

/* --------------------------------------------------------------- prenota */
.chi-siamo-prenota{padding-top:130px}
/* il riquadro e' ora un blocco di azione: .azioni gli da' la colonna centrata,
   qui restano bordo e respiro dell'originale */
.chi-siamo-prenota__riquadro{
  padding:30px 50px 85px;
  border:1px solid var(--linea);
}
.chi-siamo-prenota__riquadro .azioni__coppia{margin:40px 0 3px}
.chi-siamo-prenota__bottone{position:relative}
.chi-siamo-prenota__alternativa{position:relative}
/* filo nero sotto al bottone: c'e' anche a riposo */
.chi-siamo-prenota__bottone::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  height:1px;
  background:var(--accento);
}
/* il colore dell'hover ora lo da' .bottone in base.css (verde del brand):
   qui resta solo il filo che si ridisegna, che e' proprio di questo bottone. */
.chi-siamo-prenota__bottone:hover::after{
  background:var(--accento);
  transform-origin:100% 50%;
  transform:scaleX(0);
  animation:chi-siamo-filo-bottone .5s .2s forwards;
}
@keyframes chi-siamo-filo-bottone{
  from{transform-origin:0 50%;transform:scaleX(0)}
  to{transform-origin:0 50%;transform:scaleX(1)}
}

/* ------------------------------------------------------------ esperienza */
.chi-siamo-esperienza{padding-top:140px}
.chi-siamo-esperienza__griglia{display:flex}
.chi-siamo-esperienza__colonna{width:50%}
.chi-siamo-esperienza__colonna--testo{padding-top:50px}
.chi-siamo-esperienza__titolo{
  margin:-5px 0 0;
  font-family:var(--display);
  font-size:46px;
  font-weight:400;
  line-height:59.8px;
  letter-spacing:-1.38px;
  color:var(--nero);
}

/* -------------------------------------------------------------- panorama */
.chi-siamo-panorama{padding-top:49px}
.chi-siamo-panorama img{
  width:1024px;
  max-width:100%;
  height:auto;
  margin-inline:auto;
}

/* ------------------------------------------------------------ recensioni */
.chi-siamo-recensioni{padding:157px 0 153px}
.chi-siamo-recensioni__carosello{position:relative}
.chi-siamo-recensioni__vista{overflow:hidden}
.chi-siamo-recensioni__pista{
  display:flex;
  align-items:flex-start;
  gap:30px;
  transition:transform .8s cubic-bezier(.4,0,.2,1);
}
.chi-siamo-recensioni__pista.senza-transizione{transition:none}
.chi-siamo-recensioni__voce{flex:0 0 auto}
.chi-siamo-recensioni__scheda{
  max-width:390px;
  margin:0 auto;
  text-align:center;
}
.chi-siamo-recensioni__stelle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  /* i 12px a destra sono la spaziatura che l'originale metteva dopo
     l'ultima stella: spostano la fila di 6px a sinistra, come lì */
  padding-right:12px;
  height:29.92px;
  margin:0 0 29px;
  color:var(--accento);
}
.chi-siamo-recensioni__stelle svg{width:21px;height:21px;flex:0 0 auto}
.chi-siamo-recensioni__testo{
  margin:0 0 30px;
  font-family:var(--display);
  font-size:27px;
  font-weight:400;
  line-height:37.8px;
  color:var(--nero);
}
.chi-siamo-recensioni__autore{
  margin:0;
  font-family:var(--corpo);
  font-size:14px;
  font-weight:500;
  line-height:26.18px;
  letter-spacing:1.96px;
  text-transform:uppercase;
  color:var(--accento);
}
.chi-siamo-recensioni__freccia{
  position:absolute;
  top:50%;
  width:50px;
  height:50px;
  transform:translateY(-50%);
  color:var(--linea);
  transition:color .2s ease-out;
}
.chi-siamo-recensioni__freccia--indietro{left:-50px}
.chi-siamo-recensioni__freccia--avanti{right:-50px}
.chi-siamo-recensioni__freccia:hover{color:var(--accento)}
.chi-siamo-recensioni__freccia svg{
  display:block;
  width:50px;
  height:50px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-miterlimit:10;
}

/* ==================================================== schermi fino a 1024 */
@media (max-width:1024px){
  .chi-siamo-copertina{height:400px}

  .chi-siamo-intestazione{padding-left:50px}

  .chi-siamo-racconto{padding-left:0}
  .chi-siamo-racconto__colonna p{padding-right:6%}

  .chi-siamo-filo{padding-top:15px}
  .chi-siamo-filo__linea{display:none}

  .chi-siamo-facciata{padding-top:30px}

  .chi-siamo-dotazioni{padding-top:100px}
  .chi-siamo-dotazioni__griglia{grid-template-columns:1fr;gap:48px}
  .chi-siamo-dotazioni__colonna + .chi-siamo-dotazioni__colonna{padding-left:0}

  .chi-siamo-galleria{padding-top:120px}

  .chi-siamo-prenota{padding-top:100px}

  .chi-siamo-esperienza{padding-top:110px}
  .chi-siamo-esperienza__griglia{display:block}
  .chi-siamo-esperienza__colonna{width:100%}
  .chi-siamo-esperienza__colonna--testo{padding-top:0}
  .chi-siamo-esperienza__colonna--testo p{padding-right:10%}

  .chi-siamo-panorama{padding-top:110px}

  .chi-siamo-recensioni{padding:120px 0 120px}
  .chi-siamo-recensioni__freccia--indietro{left:-20px}
  .chi-siamo-recensioni__freccia--avanti{right:-20px}
}

/* ===================================================== schermi fino a 768 */
@media (max-width:768px){
  .chi-siamo-copertina__titolo{font-size:65px;line-height:72.215px;letter-spacing:-2.6px}

  .chi-siamo-intestazione{margin-top:0;padding:50px 0 24px 30px}

  .chi-siamo-racconto__griglia{display:block}
  .chi-siamo-racconto__colonna{width:100%}
  .chi-siamo-racconto__colonna p{padding-right:0}

  .chi-siamo-facciata{padding-top:20px}

  .chi-siamo-dotazioni{padding-top:80px;padding-bottom:100px}

  .chi-siamo-galleria{padding-top:0}
  .chi-siamo-galleria__griglia{grid-template-columns:1fr;padding-bottom:0}

  .chi-siamo-prenota{padding-top:80px}
  .chi-siamo-prenota__riquadro{padding:30px 20px 40px}
  .chi-siamo-prenota__riquadro .azioni__coppia{margin:25px 0 3px}

  .chi-siamo-esperienza{padding-top:90px}
  .chi-siamo-esperienza__colonna--testo p{padding-right:0}

  .chi-siamo-panorama{padding-top:90px}

  .chi-siamo-recensioni{padding:100px 0 100px}
  /* sotto i 768 l'originale nasconde le frecce del carosello */
  .chi-siamo-recensioni__freccia{display:none}
}

/* ================================================= schermi fino a 680 */
@media (max-width:680px){
  .chi-siamo-copertina__titolo{font-size:50px;line-height:55.55px;letter-spacing:-2px}
  .chi-siamo-intestazione__titolo{font-size:65px;line-height:71.5px;letter-spacing:-1.95px}
  .chi-siamo-esperienza__titolo{font-size:40px;line-height:52px;letter-spacing:-1.2px}
}