/* LO STRATO DEL SITO SOPRA LA CONSEGNA LUXURY (7 ottobre 2026).
 *
 * `lux/luxury.css` e' la consegna, copiata com'e'. Qui sta solo quello che
 * il sito aggiunge o corregge, ognuno con il perche'. Si carica DOPO.
 */

/* ============================================================
   LA PRIMA SCHERMATA — il testo non tocca mai i pet
   ============================================================
   Nella consegna la fotografia occupa tutta la larghezza e il testo le
   sta sopra in posizione fissa: a 1440 «meglio.» finiva sulla testa del
   cane e le situazioni sopra il portatile, e piu' lo schermo era largo
   piu' la cosa peggiorava. Adesso le due cose hanno ciascuna il suo
   spazio, e la prova `npm run hero` misura che cane, gatto e persona non
   sono coperti a nessuna larghezza, da 320 a 2560. */

/* LA PRIMA SCHERMATA E' SOLO LA PRIMA SCHERMATA (richiesta del 7 ottobre):
   su ogni schermo la hero e' alta almeno quanto lo schermo, e la sezione
   dopo non si vede finche' non si scorre. `npm run hero` lo misura.

   Il limite, scritto perche' qualcuno lo capisca prima di toccare: nella
   fotografia orizzontale cane e gatto occupano il 54,5% destro della
   larghezza. Alta quanto lo schermo, la foto mette i pet su una fascia
   larga 0,97 volte l'altezza dello schermo; con il testo a sinistra serve
   uno schermo largo almeno 1,76 volte l'alto. Un 16:9 ci sta, un portatile
   16:10 (1440x900) o un iPad di traverso no. Li' la foto non riempie
   l'altezza: si ancora in basso a destra, con i pet interi nella colonna
   libera, e sopra sfuma nella calce. Una fotografia composta per la
   pagina intera (vedi STATO) toglierebbe il compromesso. */

/* Schermi orizzontali — computer, tablet di traverso, telefono coricato:
   colonna di testo a sinistra, foto a destra. */
@media (min-width: 701px) and (min-aspect-ratio: 5/4) {
  .hero {
    --colonna: calc(var(--gutter) + min(41vw, 960px) + 24px);
    --sotto: 100px;
    height: auto;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 108px 0 64px var(--gutter);
  }
  .hero-copy {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    max-width: min(41vw, 960px);
    z-index: 2;
  }
  .hero-question {
    max-width: none;
  }
  .hero-answer {
    white-space: normal;
    text-wrap: balance;
  }
  .hero .hero-action {
    position: relative;
    left: auto;
    bottom: auto;
    margin-top: 34px;
  }
  /* Larga quanto basta perche' il 60% destro (i pet: nella foto v4 il cane
     comincia al 41% con la coda) stia nella colonna libera, e mai piu'
     alta dello schermo. */
  /* Il fondo della foto si ferma sopra il menu fluttuante (alto 97 px
     con il suo margine): senza, il menu copriva le zampe del cane. */
  .hero-art {
    inset: auto 0 var(--sotto) auto;
    width: min(calc((100vw - var(--colonna)) / 0.6), calc((100svh - var(--sotto) - 40px) * 1.7769));
    height: auto;
    aspect-ratio: 1672 / 941;
  }
  .hero-art img {
    --sfuma-x: 38%;
    --sfuma-y: 14%;
    object-fit: cover;
    object-position: 100% 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 12%, #000 var(--sfuma-x)), linear-gradient(180deg, transparent 0, #000 var(--sfuma-y));
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, transparent 12%, #000 var(--sfuma-x)), linear-gradient(180deg, transparent 0, #000 var(--sfuma-y));
    mask-composite: intersect;
  }
  .hero::after {
    display: none;
  }
}

/* TELEFONO E TABLET IN VERTICALE — foto, titolo, pulsante (7 ottobre:
   «impagina tu come meglio viene in base alle gerarchie visive e che non
   rimangano spazi vuoti nello schermo di ogni phone»).
   Perche' la foto sopra: aggancia lo sguardo per prima, e cosi' il titolo
   resta attaccato al pulsante — chi ha letto ha l'azione sotto il pollice.
   Niente vuoti: la hero e' alta quanto lo schermo e la foto prende tutto
   quello che resta dopo testo, pulsante e menu. Si accorcia tagliando
   l'alto (parete, cielo), ancorata in basso dove stanno i pet; il minimo
   tiene intera anche la testa della persona sullo sfondo. Sui telefoni
   piu' bassi (SE) il minimo vince: la hero supera di poco lo schermo, e
   il pulsante si trova scorrendo — meglio che tagliare i pet. */
@media (max-width: 700px), (min-width: 701px) and (max-aspect-ratio: 5/4) {
  .hero {
    height: auto;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 calc(100px + env(safe-area-inset-bottom));
  }
  .hero-art {
    position: relative;
    inset: auto;
    top: auto;
    display: block;
    width: 100%;
    height: auto;
    flex: 1 1 0;
    margin: 0;
    order: 1;
    z-index: 1;
  }
  .hero-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero::after {
    display: none;
  }
  .hero-copy {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    max-width: none;
    margin: 22px var(--gutter) 0;
    order: 2;
    z-index: 2;
  }
  .hero-answer {
    white-space: nowrap;
  }
  .hero .hero-action {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    align-self: flex-start;
    margin: 20px var(--gutter) 0;
    order: 3;
  }
}
/* Telefono: foto verticale (3:4). Pet fra il 47% e l'87% dell'altezza,
   testa della persona dal 29%. Quando la foto si accorcia taglia sopra E
   sotto: object-position al 73% vuol dire 73 parti di taglio in alto
   (parete) e 27 in basso (tappeto). Al minimo, 63% dell'altezza, il taglio
   e' 27% sopra — la testa resta — e 10% sotto — le zampe restano. Con
   questi numeri anche un iPhone SE (375x667) tiene foto, titolo e
   pulsante nella prima schermata. */
@media (max-width: 700px) {
  .hero {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }
  .hero-art {
    min-height: calc(100vw * 4 / 3 * 0.63);
    /* Fino al 6% oltre la proporzione: sui telefoni alti (Pro Max) avanzava
       un vuoto sotto il pulsante. Il taglio laterale e' del 3% per parte:
       coda del gatto e bordo della stanza, non i musi. */
    max-height: calc(100vw * 4 / 3 * 1.06);
  }
  .hero-art img {
    object-position: 50% 73%;
  }
  /* Quando la foto ha raggiunto la sua altezza piena (telefoni molto
     alti) lo spazio che avanza si divide a meta': sopra il titolo e sotto
     il pulsante — respiro, non un buco in fondo. */
  .hero-copy {
    margin-top: auto;
    padding-top: 16px;
  }
  .hero .hero-action {
    margin-top: 16px;
    margin-bottom: auto;
  }
  /* Un velo chiaro e morbido solo dietro il logo, che sui telefoni
     piccoli cade sulla parte movimentata della foto (pianta, finestra). */
  .hero-art::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 70%;
    height: 120px;
    background: radial-gradient(ellipse 70% 70% at 25% 35%, rgba(250, 249, 246, 0.82), rgba(250, 249, 246, 0) 72%);
    pointer-events: none;
  }
}
/* Telefoni piccolissimi (320x568): neanche cosi' ci sta tutto. La foto
   scende ancora tagliando la parete — la persona perde la testa, i pet
   restano interi — perche' un pulsante mezzo nascosto dal menu e' peggio. */
@media (max-width: 700px) and (max-height: 600px) {
  .hero-art {
    min-height: calc(100vw * 4 / 3 * 0.52);
  }
  .hero-art img {
    object-position: 50% 79%;
  }
}
/* Tablet in verticale: foto orizzontale. Piu' alta della sua proporzione
   si allarga e taglia a sinistra (il portatile), ancorata a destra; non
   oltre il punto in cui i pet (59% della larghezza) toccherebbero il bordo. */
@media (min-width: 701px) and (max-aspect-ratio: 5/4) {
  .hero-art {
    min-height: calc(100vw / 1.7769);
    max-height: calc(100vw / (0.6 * 1.7769));
  }
  .hero-art img {
    object-position: 100% 100%;
  }
}

/* LE RIGHE DELLA PRIMA SCHERMATA — ognuna su una riga sola (7 ottobre:
   «mai con la frase che va a capo»). Le grandezze non sono scelte una per
   una: partono dalla larghezza della colonna (--col) e dal rapporto
   larghezza/corpo di ogni frase nei suoi caratteri, misurato in pagina —
   titolo 12,27 · domanda 19,82 · situazioni 34,34 · occhiello 16,15.
   Il titolo prende tutta la colonna (12,6 per un filo di margine), le
   altre sono frazioni fisse del titolo: la gerarchia resta la stessa su
   ogni schermo, cambia solo la scala.
   Le situazioni sono l'unica eccezione dichiarata: due righe, spezzate
   SOLO fra una situazione e l'altra (mai una parola sola sotto). */
.hero-copy {
  --col: min(41vw, 960px);
  --A: min(76px, calc(var(--col) / 12.6));
  --rq: 0.5;
}
.hero .hero-context {
  font-size: max(11px, calc(var(--A) * 0.27));
  white-space: nowrap;
  margin-bottom: calc(var(--A) * 0.32);
}
.hero .hero-question {
  font-size: calc(var(--A) * var(--rq));
  line-height: 1.3;
  white-space: nowrap;
  text-wrap: nowrap;
  max-width: none;
}
.hero .hero-answer {
  font-size: var(--A);
  line-height: 1.12;
  white-space: nowrap;
  text-wrap: nowrap;
  max-width: none;
  margin-top: calc(var(--A) * 0.12);
}
.hero .hero-situations {
  font-size: calc(var(--A) * var(--rs));
  line-height: 1.5;
  max-width: none;
  margin-top: calc(var(--A) * 0.38);
}
.hero-situations span {
  white-space: nowrap;
}
/* Le situazioni stanno su due righe su ogni schermo, spezzate fra una
   situazione e l'altra: su una riga sola, a computer, la frase arrivava
   dentro la fotografia. Lo stesso disegno ovunque si legge come voluto. */
.hero-copy { --rs: 0.42; }
.hero-situations span { display: block; }
/* Il pulsante cresce con il titolo: su un 2K restava a 15 px. */
.hero .hero-action {
  font-size: max(15px, calc(var(--A) * 0.27));
  padding: 1.05em 1.8em;
}
@media (min-width: 701px) and (max-aspect-ratio: 5/4) {
  .hero-copy { --col: min(680px, calc(100vw - 2 * var(--gutter))); }
}
@media (max-width: 700px) {
  .hero-copy {
    --col: calc(100vw - 2 * var(--gutter));
    --A: min(36px, calc(var(--col) / 12.6));
    --rq: 0.56;
    --rs: 0.5;
  }
}

/* Telefono coricato e finestre basse: il menu della consegna e' alto 75 px
   e su 390 di schermo copriva le righe del titolo. Qui si fa una riga
   sola, sempre alto 44 px per il dito. */
@media (max-height: 500px) and (orientation: landscape) {
  .mobile-nav {
    bottom: 10px;
    padding: 4px;
  }
  .mobile-nav a {
    flex-direction: row;
    gap: 6px;
    min-height: 44px;
    padding: 4px 10px;
    white-space: nowrap;
  }
  .mobile-nav svg {
    width: 16px;
    height: 16px;
  }
  .hero {
    --sotto: 64px;
  }
}

/* Il bronzo-ruggine delle finiture (luxury-detail.css, #9b572d) passa su
   calce (5,26) ma sul fondo di Start del telefono (#eee6d9) si ferma a
   4,47: li' si scurisce di un soffio. */
.start .eyebrow {
  color: #8e4f29;
}

/* ============================================================
   LE ESPERIENZE — fra Giorgia e Resona-start
   ============================================================
   Chi legge ha appena conosciuto Giorgia e sta per vedere il prezzo: una
   storia vera, qui, fa da prova.
   Stessa grammatica della home, nessun elemento nuovo: niente riquadri
   chiusi (la prima versione era una scheda con bordo e fondo, l'unica
   scatola del sito, e si notava); la foto ha gli angoli opposti curvi
   delle foto del percorso; i tre passaggi stanno in colonne separate da
   un filo, come in «Come funziona»; il link e' quello sottolineato.
   Pronta per crescere: con due storie o piu' (`:has`) la lista diventa
   una fila che si sfoglia di lato. Testi verbatim dalla V15. */
.esperienze {
  margin-top: clamp(64px, 8vw, 120px);
  padding: 0 var(--gutter);
  position: relative;
  z-index: 3;
}
.esperienze-testa {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 40px;
  padding-bottom: 22px;
  border-bottom: 1px solid #d5cfc5;
}
.esperienze h2 {
  font-family: Gelasio, Georgia, serif;
  font-size: clamp(36px, 3.6vw, 56px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.08;
}
.esperienze-testa .eyebrow {
  flex-basis: 100%;
  margin-bottom: 0;
}
.esperienze-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 48px;
}
.esperienza {
  display: grid;
  grid-template-columns: minmax(200px, 0.3fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  padding-top: clamp(28px, 3vw, 44px);
}
.esperienza-foto {
  margin: 0;
  border-radius: 36px 0 36px 0;
  overflow: hidden;
  aspect-ratio: 320 / 420;
}
.esperienza-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.esperienza-nomi {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8e4f29;
}
.esperienza h3 {
  margin-top: 10px;
  font-family: Gelasio, Georgia, serif;
  font-size: clamp(26px, 2.4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.15;
  text-wrap: balance;
}
.esperienza-passi {
  margin: clamp(22px, 2.4vw, 34px) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
}
.esperienza-passi > div {
  padding-top: 16px;
  border-top: 1px solid #d5cfc5;
}
.esperienza-passi dt {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.esperienza-passi dd {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}
.esperienza-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: clamp(18px, 2vw, 28px);
  font-size: 15px;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: #9b572d;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.esperienza-link:hover {
  color: #8e4f29;
}
/* Due o piu' esperienze: una fila che si sfoglia. */
.esperienze-lista:has(> .esperienza + .esperienza) {
  grid-auto-flow: column;
  grid-auto-columns: min(88%, 1040px);
  gap: clamp(28px, 4vw, 64px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.esperienze-lista:has(> .esperienza + .esperienza) > .esperienza {
  scroll-snap-align: start;
}
@media (max-width: 1050px) {
  .esperienza-passi {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
@media (max-width: 700px) {
  .esperienze {
    margin-top: 56px;
  }
  .esperienze h2 {
    font-size: 38px;
  }
  .esperienza {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 26px;
  }
  .esperienza-foto {
    aspect-ratio: 4 / 3;
  }
  .esperienza-foto img {
    object-position: 50% 30%;
  }
  .esperienza h3 {
    font-size: 28px;
  }
  .esperienze-lista:has(> .esperienza + .esperienza) {
    grid-auto-columns: 86%;
    gap: 20px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
    scroll-padding: 0 var(--gutter);
  }
}

/* ============================================================
   LE DOMANDE — si toccano col dito
   ============================================================
   Nella consegna ogni domanda era alta 24 px su computer e 31 sul
   telefono. La soglia e' 44. */
.faq-list summary {
  min-height: 44px;
}

/* ============================================================
   IL PIEDE DI PAGINA
   ============================================================
   La consegna aveva una riga sola, l'avvertenza. Il sito vivo porta
   anche i documenti legali, la ragione sociale con la partita IVA e
   l'anno: sono obblighi, non decorazione. L'avvertenza resta quella
   della consegna, parola per parola, in un corpo leggibile (era 10 px
   sul telefono). */
footer.piede {
  display: grid;
  gap: 22px;
  padding: 52px var(--gutter) 150px;
  border-top: 1px solid var(--stone);
  background: var(--chalk);
  position: relative;
  z-index: 4;
}
.piede-alto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.piede-logo {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}
.piede-logo img {
  display: block;
  width: 168px;
  height: auto;
  filter: brightness(0);
  opacity: 0.88;
}
.piede nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 26px;
}
.piede nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 100% 1px no-repeat;
}
footer.piede .piede-avviso {
  text-align: left;
  max-width: 820px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.piede-basso {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
  padding-top: 18px;
  border-top: 1px solid #e6e1d8;
  font-size: 13px;
  line-height: 1.5;
  color: #66615a;
}
@media (max-width: 700px) {
  footer.piede {
    padding: 40px var(--gutter) calc(130px + env(safe-area-inset-bottom));
  }
  .piede nav {
    flex-direction: column;
  }
  footer.piede .piede-avviso {
    font-size: 13px;
  }
}

/* ============================================================
   I CONTATTI DIRETTI IN RESONA-START (7 ottobre 2026)
   ============================================================
   Prima «Parla con Giorgia» apriva una finestra con le due scelte: un
   passaggio in piu' prima dell'azione. Adesso le due azioni sono li':
   WhatsApp e' la principale (piena), la chiamata la seconda (chiara).
   Il numero e' scritto accanto a «Chiama»: dal telefono basta toccare,
   dal computer — dove una chiamata da browser di solito non parte — lo
   si legge. Testi e messaggio sono quelli gia' approvati nella finestra. */
.start-azioni {
  display: grid;
  gap: 12px;
  width: 100%;
}
.start-azioni .pill {
  width: 100%;
  margin: 0;
  justify-content: space-between;
}
.pill.pill-chiara {
  background: transparent;
  color: var(--ink);
  border: 1px solid #9b572d66;
  box-shadow: none;
}
.pill.pill-chiara:hover {
  background: #fffdf8;
  border-color: #9b572d;
}
.pill-chiara .numero {
  font-family: Satoshi, Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #5b5349;
}

/* ============================================================
   IL MENU DEL TELEFONO, IN ALTO (7 ottobre 2026)
   ============================================================
   «Da mobile metti il menu in alto che segue lo scroll: in basso rompe
   la visuale». La barra fluttuante della consegna stava sopra il fondo
   dello schermo, dove si guarda e dove scorre il pollice. Qui diventa una
   barra sottile in cima, sempre presente, senza sfocatura (su un telefono
   la sfocatura sotto un elemento fisso si ricalcola a ogni scorrimento).
   Le voci restano le stesse quattro, alte 44 px. */
@media (max-width: 700px) {
  .mobile-nav {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    padding: calc(4px + env(safe-area-inset-top)) 8px 4px;
    gap: 2px;
    border: 0;
    border-bottom: 1px solid #e3dccf;
    border-radius: 0;
    background: rgba(250, 249, 246, 0.97);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 6px 18px -14px rgba(36, 35, 32, 0.35);
  }
  .mobile-nav a {
    flex-direction: row;
    gap: 6px;
    min-height: 44px;
    padding: 4px 6px;
    border-radius: 14px;
    font-size: 12px;
    white-space: nowrap;
  }
  .mobile-nav svg {
    width: 16px;
    height: 16px;
  }
  html {
    scroll-padding-top: 64px;
    scroll-padding-bottom: 0;
  }
  /* La hero lascia posto alla barra in cima e non piu' in fondo. */
  .hero {
    padding-top: 52px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
  .masthead {
    top: calc(52px + 22px);
  }
  footer.piede {
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 380px) {
  .mobile-nav svg {
    display: none;
  }
}

/* Corpo minimo 12 px per ogni parola della pagina (controllo responsive
   del 7 ottobre 2026: occhielli e didascalie scendevano a 10-11 px). */
.eyebrow,
.principle .eyebrow,
.hero .hero-context {
  font-size: max(12px, 1em);
}
.hero .hero-context {
  font-size: max(12px, calc(var(--A) * 0.27));
}
.hero .hero-situations {
  font-size: max(12px, calc(var(--A) * var(--rs)));
}
.phone-figure figcaption {
  font-size: 12px;
}
/* Il logo in cima e' un collegamento: bersaglio da 44 px. */
.masthead > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}