/* ============================================================
   CUORE DI ROMA SUITES — LAYER DI MARCHIO
   ------------------------------------------------------------
   Questo file si carica DOPO style.css e ne ridefinisce la
   palette, aggiungendo i componenti del marchio.

   ⚠️  Per tornare al design precedente basta rimuovere la riga
       <link ... brand.css"> da index.html. Nessun altro effetto.

   CONCEPT: non "annuncio di un appartamento" ma "collezione di
   dimore romane". Base espresso caldo, accento ambra antica,
   terra bruciata per il livello marchio, sezioni chiare in
   travertino per creare respiro e gerarchia.
   ============================================================ */

:root{
  /* --- Fondali: espresso caldo romano --- */
  --bg:        #171310;
  --bg-2:      #1d1814;
  --surface:   #241d18;
  --surface-2: #2c241d;

  /* --- Inchiostri: travertino caldo --- */
  --ivory:     #f4ece3;
  --text:      #cfc2b4;
  --muted:     #948577;

  /* --- Accento: ambra antica --- */
  --gold:      #cf9a4e;
  --gold-2:    #ab7a33;
  --gold-soft: rgba(207,154,78,.13);

  /* --- Terra: il livello "collezione" (fascia marchio, bottoni suite) --- */
  --roman:     #7a4630;
  --roman-2:   #57301f;
  --roman-soft:rgba(122,70,48,.16);

  /* --- Travertino: sezioni chiare --- */
  --stone:     #f6efe5;
  --stone-2:   #ece1d2;
  --stone-ink: #261c14;
  --stone-txt: #584c40;

  --line:      rgba(244,236,227,.10);
  --line-2:    rgba(244,236,227,.18);
}

::selection{background:rgba(207,154,78,.30)}

/* ============================================================
   1. BARRA DEL MARCHIO
   Sottile fascia sopra l'header: presenta la collezione senza
   rubare spazio alla suite. È il segnale "questo è un gruppo".
   ============================================================ */
.brandbar{
  --bbh:36px;
  position:fixed;top:0;left:0;right:0;
  z-index:110;
  transform:translateY(0);
  transition:transform .45s var(--ease);
  background:var(--roman-2);
  color:var(--ivory);
  font-family:var(--sans);
  font-size:.79rem;
  letter-spacing:.02em;
}
.brandbar__in{
  max-width:var(--maxw);
  margin:0 auto;
  padding:9px clamp(16px,5vw,80px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brandbar__mark{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-weight:500;
  white-space:nowrap;
}
.brandbar__mark svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.6}
.brandbar__links{display:flex;align-items:center;gap:20px}
.brandbar__links a{
  color:rgba(242,237,226,.82);
  transition:color .3s var(--ease);
  border-bottom:1px solid transparent;
  padding-bottom:1px;
}
.brandbar__links a:hover,
.brandbar__links a:focus-visible{color:var(--ivory);border-bottom-color:var(--gold)}

@media(max-width:720px){
  .brandbar{font-size:.72rem}
  .brandbar__in{padding:8px 16px}
  .brandbar__links{gap:14px}
  .brandbar__hide{display:none}
}

/* La barra scompare allo scroll e l'header prende il suo posto */
.brandbar.is-away{transform:translateY(-100%)}
.header{top:36px;transition:top .45s var(--ease),padding .4s var(--ease),background .4s,box-shadow .4s,backdrop-filter .4s}
.header.is-scrolled{top:0}
@media(max-width:720px){
  .brandbar{--bbh:32px}
  .header{top:32px}
}

/* ============================================================
   2. FIRMA DI COLLEZIONE NELL'HEADER
   Il nome della suite è il protagonista; sopra, in piccolo,
   il marchio. Gerarchia esplicita.
   ============================================================ */
.brand__group{
  display:block;
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
  line-height:1;
  margin-bottom:5px;
}

/* ============================================================
   3. SEZIONE CHIARA (travertino)
   Rompe il buio dove il contenuto è da leggere, non da guardare.
   Usata per "La collezione" e per la FAQ.
   ============================================================ */
.section--stone{
  background:var(--stone);
  max-width:none;
  padding-left:0;
  padding-right:0;
}
.section--stone > *{
  max-width:var(--maxw);
  margin-left:auto;
  margin-right:auto;
  padding-left:clamp(20px,5vw,80px);
  padding-right:clamp(20px,5vw,80px);
}
.section--stone h2,
.section--stone h3{color:var(--stone-ink)}
.section--stone h2 em,
.section--stone h3 em{color:var(--gold-2)}
.section--stone p,
.section--stone .section__sub{color:var(--stone-txt)}
.section--stone .kicker{color:var(--gold-2)}
.section--stone .kicker::before,
.section--stone .kicker::after{background:var(--gold-2)}

/* ============================================================
   4. LA COLLEZIONE — griglia delle suite
   Le card NON sono tutte identiche: la suite attiva è grande e
   fotografica, quelle in arrivo sono più piccole e sobrie.
   La differenza di trattamento comunica lo stato.
   ============================================================ */
.collection{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(20px,2.6vw,34px);
  align-items:stretch;
}
/* Con poche suite la griglia si stringe, così le card non si dilatano */
.collection--1{max-width:560px;margin-inline:auto}
.collection--2{max-width:900px;margin-inline:auto}
.collection--3{max-width:1180px;margin-inline:auto}

.suitecard{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:var(--rad);
  overflow:hidden;
  box-shadow:0 2px 4px rgba(38,28,20,.05), 0 16px 44px rgba(38,28,20,.09);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.suitecard--live:hover,
.suitecard--live:focus-within{
  transform:translateY(-5px);
  box-shadow:0 3px 6px rgba(38,28,20,.06), 0 26px 66px rgba(38,28,20,.15);
}

.suitecard__media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--stone-2);
}
.suitecard__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease-out);
}
.suitecard--live:hover .suitecard__media img{transform:scale(1.045)}

.suitecard__flag{
  position:absolute;top:14px;left:14px;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  border-radius:100px;
  background:rgba(23,19,16,.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--ivory);
  font-size:.72rem;font-weight:500;letter-spacing:.02em;
}
.suitecard__flag svg{width:13px;height:13px;fill:var(--gold)}

.suitecard__body{
  padding:clamp(20px,2.2vw,28px);
  display:flex;flex-direction:column;flex:1;gap:12px;
}
.suitecard__area{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-2);font-weight:600;
}
.suitecard__name{
  font-family:var(--serif);
  font-size:clamp(1.5rem,2.3vw,1.95rem);
  line-height:1.1;
  color:var(--stone-ink);
  letter-spacing:-.015em;
}
.suitecard__text{color:var(--stone-txt);font-size:.96rem;line-height:1.62}

.suitecard__facts{
  display:flex;flex-wrap:wrap;gap:7px;
  margin-top:auto;padding-top:6px;
}
.suitecard__fact{
  font-size:.79rem;
  padding:5px 11px;
  border-radius:100px;
  background:var(--stone-2);
  color:var(--stone-txt);
}

.suitecard__go{
  margin-top:16px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 22px;
  border-radius:100px;
  background:var(--roman-2);
  color:var(--ivory);
  font-weight:500;font-size:.94rem;
  transition:background .35s var(--ease);
}
.suitecard__go:hover,.suitecard__go:focus-visible{background:var(--roman)}

/* --- Suite in arrivo: trattamento volutamente più sobrio --- */
.suitecard--soon{
  background:transparent;
  box-shadow:none;
  border:1px dashed rgba(38,28,20,.22);
}
.suitecard--soon .suitecard__media{
  aspect-ratio:16/10;
  background:var(--stone-2);
  display:grid;place-items:center;
}
.suitecard--soon .suitecard__media svg{
  width:40px;height:40px;fill:none;
  stroke:rgba(38,28,20,.28);stroke-width:1.2;
}
.suitecard--soon .suitecard__name{color:rgba(38,28,20,.62)}
.suitecard--soon .suitecard__go{
  background:transparent;
  color:var(--stone-txt);
  border:1px solid rgba(38,28,20,.22);
  cursor:default;
}

/* ============================================================
   5. PAGINA VETRINA (suites.html)
   ============================================================ */
.vetrina{
  min-height:56vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:clamp(90px,12vw,150px) clamp(20px,5vw,80px) clamp(40px,6vw,70px);
  background:
    linear-gradient(rgba(23,19,16,.72),rgba(23,19,16,.86)),
    url("../images/trevi/hero.jpg") center/cover;
}
.vetrina__in{max-width:760px}
.vetrina h1{
  font-size:clamp(2.4rem,6vw,4.4rem);
  color:var(--ivory);
  margin-bottom:20px;
}
.vetrina h1 em{font-style:italic;color:var(--gold)}
.vetrina p{color:rgba(242,237,226,.8);font-size:clamp(1rem,1.6vw,1.16rem);max-width:56ch;margin:0 auto}

/* ============================================================
   6. RITOCCHI DI COERENZA
   ============================================================ */
/* Il verde marchio entra anche nel bottone principale del sito,
   così la collezione e la suite parlano la stessa lingua. */
.btn--solid{background:var(--gold);color:#15100a}
.btn--solid:hover{background:var(--gold-2)}

/* Focus visibile su tutti i nuovi elementi interattivi */
.brandbar__links a:focus-visible,
.suitecard__go:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion:reduce){
  .suitecard,.suitecard__media img{transition:none}
  .suitecard--live:hover{transform:none}
  .suitecard--live:hover .suitecard__media img{transform:none}
}

/* ============================================================
   7. LOCKUP: IL MARCHIO È LA RIGA PRINCIPALE
   Prima l'immobile era il titolo grande e il marchio una nota
   sopra. Invertito: il marchio comanda, l'immobile è la
   specificazione. È ciò che rende il sito "di un collettivo".
   ============================================================ */
.brand__house{
  font-family:var(--serif);
  font-size:1.2rem;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ivory);
  line-height:1.1;
  display:block;
}
.brand__unit{
  display:block;
  margin-top:3px;
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
}
.brand__unit-sep{opacity:.5;margin:0 3px}
.brand__unit [data-i18n]{color:var(--muted);font-weight:500}

@media(max-width:820px){
  .brand__house{font-size:1rem}
  .brand__unit{font-size:.6rem;letter-spacing:.16em}
  .brand__unit-sep,.brand__unit [data-i18n]{display:none}
}

/* ============================================================
   8. HOME DEL MARCHIO
   ============================================================ */
.bhero{
  position:relative;
  min-height:88vh;
  display:grid;
  align-items:center;
  padding:clamp(120px,15vw,190px) clamp(20px,5vw,80px) clamp(70px,9vw,110px);
  background:
    linear-gradient(105deg, rgba(23,19,16,.94) 0%, rgba(23,19,16,.80) 46%, rgba(23,19,16,.55) 100%),
    url("../images/trevi/hero.jpg") center/cover fixed;
}
@media(max-width:900px){
  .bhero{background-attachment:scroll;min-height:78vh;
    background-image:linear-gradient(rgba(23,19,16,.90),rgba(23,19,16,.78)),url("../images/trevi/hero.jpg");}
}
.bhero__in{max-width:var(--maxw);margin:0 auto;width:100%}
.bhero__kicker{
  display:inline-block;
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:22px;
}
.bhero__title{
  font-family:var(--serif);
  font-size:clamp(2.9rem,8vw,6.2rem);
  line-height:.98;
  letter-spacing:-.03em;
  color:var(--ivory);
  margin-bottom:26px;
  max-width:15ch;
}
.bhero__title em{display:block;font-style:italic;color:var(--gold)}
.bhero__lead{
  color:var(--text);
  font-size:clamp(1rem,1.55vw,1.18rem);
  line-height:1.68;
  max-width:52ch;
  margin-bottom:38px;
}
.bhero__cta{display:flex;flex-wrap:wrap;gap:14px}

/* --- Tre motivi --- */
.bcards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(18px,2.4vw,30px);
  margin-top:clamp(34px,4vw,52px);
}
.bcard{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--rad);
  padding:clamp(26px,3vw,38px);
}
.bcard__ico{
  display:grid;place-items:center;
  width:46px;height:46px;
  border-radius:50%;
  background:var(--gold-soft);
  color:var(--gold);
  font-size:1.24rem;
  margin-bottom:18px;
}
.bcard h3{
  font-family:var(--serif);
  font-size:1.28rem;color:var(--ivory);
  margin-bottom:9px;font-weight:500;
}
.bcard p{color:var(--text);font-size:.96rem;line-height:1.62}

/* --- Lo standard --- */
.bstd{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:clamp(20px,2.6vw,34px);
  margin-top:clamp(30px,3.5vw,46px);
}
.bstd li{
  padding-top:20px;
  border-top:1px solid rgba(38,28,20,.18);
}
.bstd strong{
  display:block;
  font-family:var(--serif);
  font-size:1.18rem;font-weight:600;
  color:var(--stone-ink);
  margin-bottom:8px;
}
.bstd span{color:var(--stone-txt);font-size:.95rem;line-height:1.62}

/* --- Contatti --- */
.bcontact{
  display:flex;flex-wrap:wrap;gap:14px;
  justify-content:center;
  margin-top:clamp(26px,3vw,40px);
}

/* La home non ha il calendario: il bottone WhatsApp usa il verde di sistema */
.btn--wa{background:var(--wa);color:#fff}
.btn--wa:hover{filter:brightness(1.07)}