/* Villa Nonno Nicola — Panorama petrolio
   Colori misurati sul design del kit (confronta-design.py --colori) = token di 03-COLORI-E-FONT.
   Font del kit serviti in locale (Lora + DM Sans, licenza OFL in assets/fonts/). */

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/Lora-Latin-Ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/Lora-Latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/DM-Sans-Variable.woff2") format("woff2");
}

:root {
  /* palette del design (token del kit) */
  --petrolio: #194F4A;
  --avorio: #FBFAF4;
  --pietra: #F1EEE5;
  --ambra: #D8833B;
  --testo: #2F403C;
  --secondario: #64736D;
  --accento: #A9602D;
  --bianco: #FFFFFF;
  --bordo: #D8DDD4;
  /* stati: variante ambra della nota di leggibilità del kit (4,66:1 col bianco),
     usata per hover/focus/pressione dei pulsanti e per i pulsanti con etichetta piccola */
  --ambra-focus: #B35D24;
  --errore: #A93D2D;
  --ombra-card: 0 12px 32px rgba(25, 79, 74, .09);
  --ombra-pulsante: 0 4px 12px rgba(169, 96, 45, .18);

  --font-titoli: "Lora", Georgia, "Times New Roman", serif;
  --font-testo: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  --r-campo: 8px;
  --r-card: 12px;
  --r-card-l: 16px;
  --r-foto: 24px;
  --r-hero: 28px;

  --contenuto: 1312px;
  --margine: 64px;
  --t: 180ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}
body {
  margin: 0;
  background: var(--avorio);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.richiesta h2, .faq h2, .dintorni h2, .animali h2, .pagina h1, .pagina h2 { text-wrap: balance; }
h1, h2, h3 { font-family: var(--font-titoli); font-weight: 500; color: var(--petrolio); margin: 0; letter-spacing: -0.005em; }
p { margin: 0; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--petrolio); color: var(--bianco); padding: 12px 18px; border-radius: var(--r-campo);
  text-decoration: none; font-weight: 600;
}
.skip:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--petrolio); outline-offset: 3px; }

.wrap { width: min(var(--contenuto), calc(100% - 2 * var(--margine))); margin-inline: auto; }

.ico { width: 24px; height: 24px; flex: none; }

/* ---------- pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 44px;
  border: 0; border-radius: 999px;
  background: var(--ambra); color: var(--bianco);
  font-family: var(--font-testo); font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: .005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: var(--ombra-pulsante);
  transition: background-color var(--t), box-shadow var(--t), transform var(--t);
}
.btn:hover { background: var(--ambra-focus); box-shadow: 0 8px 20px rgba(169, 96, 45, .26); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { background: var(--ambra-focus); outline: 3px solid var(--petrolio); outline-offset: 3px; }
.btn--piccolo { background: var(--ambra-focus); font-size: 16px; padding: 0 38px; }
.btn--piccolo:hover { background: var(--petrolio); box-shadow: 0 6px 16px rgba(25, 79, 74, .22); }

/* ---------- etichetta di sezione ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accento);
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--ambra); flex: none; }
.eyebrow--centro { justify-content: center; }
.eyebrow--centro::before { display: none; }

/* ---------- header ---------- */
.header { background: var(--avorio); position: sticky; top: 0; z-index: 30; transition: transform 320ms cubic-bezier(.2, .7, .2, 1), box-shadow 320ms ease; }
.header.ombra { box-shadow: 0 8px 24px rgba(25, 79, 74, .08); }
.header.giu { transform: translateY(-100%); }
.header__in { height: 88px; display: flex; align-items: center; gap: 32px; }
.header__logo { display: block; flex: none; border-radius: 6px; }
.header__logo img { width: 260px; height: auto; }
.nav { margin-left: auto; margin-right: auto; padding-left: 64px; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; }
.nav a {
  display: inline-block; padding: 8px 0; font-size: 17px; color: var(--petrolio); text-decoration: none;
  background: linear-gradient(var(--ambra), var(--ambra)) left 100% / 0 2px no-repeat;
  transition: background-size var(--t), color var(--t);
}
.nav a:hover, .nav a:focus-visible { background-size: 100% 2px; }
/* Selettore lingue IT · EN · FR: arriva allo step 6, qui tra il menu e il pulsante (.lingue) */
.lingue:empty { display: none; }
.header__cta { flex: none; padding: 0 40px; }
.burger {
  display: none; margin-left: auto; width: 48px; height: 48px; margin-right: -12px;
  align-items: center; justify-content: center; background: none; border: 0; color: var(--petrolio); cursor: pointer;
  border-radius: 12px; transition: background-color var(--t);
}
.burger .ico { width: 28px; height: 28px; }
.burger:hover { background: var(--pietra); }

/* ---------- menu da telefono ---------- */
.menu-mob {
  position: fixed; inset: 0; z-index: 100; background: var(--avorio);
  display: flex; flex-direction: column; padding: 0 24px 24px;
  opacity: 0; visibility: hidden; transition: opacity var(--t), visibility 0s linear 180ms;
  overflow-y: auto;
}
.menu-mob[hidden] { display: none; }
.menu-mob.aperto { opacity: 1; visibility: visible; transition: opacity var(--t), visibility 0s; }
.menu-mob__top { height: 88px; display: flex; align-items: center; justify-content: space-between; flex: none; }
.menu-mob__top img { width: 190px; height: auto; }
.menu-mob__chiudi { width: 48px; height: 48px; margin-right: -12px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--petrolio); cursor: pointer; border-radius: 12px; }
.menu-mob__chiudi .ico { width: 28px; height: 28px; }
.menu-mob__card { background: var(--bianco); border-radius: 20px; padding: 18px 26px 28px; box-shadow: var(--ombra-card); }
.menu-mob__card ul { list-style: none; margin: 0 0 22px; padding: 0; }
.menu-mob__card li a {
  display: block; padding: 12px 0; font-family: var(--font-titoli); font-size: 30px; line-height: 1.25; color: var(--petrolio); text-decoration: none;
}
.menu-mob__card li a:active { color: var(--accento); }
.menu-mob__card .btn { width: 100%; }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; min-height: 590px; padding: 112px 0 86px; overflow: hidden; }
.hero__foto, .hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero__foto img { object-fit: cover; object-position: 50% 100%; }
.hero__card {
  margin-left: 32px; width: 610px; max-width: 100%;
  background: var(--avorio); border-radius: var(--r-hero);
  padding: 38px 42px 44px;
  box-shadow: 0 18px 40px rgba(25, 79, 74, .12);
}
.hero__card .eyebrow::before { display: none; }
.hero h1 { margin-top: 16px; font-size: 58px; line-height: 1.1; letter-spacing: -0.01em; }
.hero h1 span { display: block; }
.hero h1 .accento { color: var(--accento); }
.hero__testo { margin-top: 22px; font-size: 20px; line-height: 1.45; max-width: 445px; }
.hero__card .btn { margin-top: 32px; padding: 0 50px; }

/* ---------- barra date ---------- */
.datebar-wrap { position: relative; z-index: 5; margin-top: -50px; }
.datebar {
  margin-inline: 28px;
  display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: center;
  min-height: 108px; padding: 14px 32px 14px 12px;
  background: var(--bianco); border-radius: 20px; box-shadow: var(--ombra-card);
}
.dfield { position: relative; display: flex; align-items: center; gap: 18px; padding: 10px 20px; min-height: 64px; border-radius: 14px; transition: background-color var(--t); }
.dfield + .dfield::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--bordo); }
.dfield:hover { background: var(--avorio); }
.dfield .ico { color: var(--ambra); width: 30px; height: 30px; }
.dfield__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dfield label { font-size: 16px; color: var(--petrolio); line-height: 1.3; cursor: pointer; }
.dfield input, .dfield select {
  border: 0; background: transparent; padding: 0; margin: 0; width: 100%;
  font-size: 16px; color: var(--secondario); line-height: 1.5; min-height: 26px;
  -webkit-appearance: none; appearance: none; cursor: pointer; border-radius: 4px;
}
.dfield input:focus-visible, .dfield select:focus-visible { outline: 2px solid var(--petrolio); outline-offset: 2px; }
.dfield input.compilato, .dfield select.compilato { color: var(--testo); }
.dfield__sel { position: relative; display: flex; align-items: center; }
.dfield__sel select { padding-right: 26px; }
.dfield__sel .ico { position: absolute; right: 0; width: 18px; height: 18px; color: var(--petrolio); pointer-events: none; }
.datebar .btn { margin-left: 20px; padding: 0 58px; }
.datebar__err { margin: 10px 28px 0; font-size: 15px; color: var(--errore); min-height: 0; }
.datebar__err:empty { display: none; }

/* campi data nativi: icona del kit al posto di quella del browser, tutto il campo apre il calendario */
input[type="date"] { position: relative; }
input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input[type="date"]::-webkit-datetime-edit { padding: 0; }

/* ---------- servizi ---------- */
.servizi { margin-top: 32px; }
.servizi ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.servizi li {
  background: var(--pietra); border-radius: var(--r-card); min-height: 122px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 18px 12px; text-align: center; font-size: 17px; line-height: 1.3; color: var(--petrolio);
  transition: background-color var(--t), transform var(--t);
}
.servizi li:hover { background: #ECE8DD; }
.servizi .ico { width: 36px; height: 36px; color: var(--ambra); }

/* ---------- la casa ---------- */
.casa { padding: 54px 0 56px; scroll-margin-top: 0; }
.casa__grid {
  display: grid; grid-template-columns: 1fr 646px; column-gap: 64px;
  grid-template-areas: "testo foto" "cta foto";
  grid-template-rows: auto 1fr;
}
.casa__testo { grid-area: testo; padding-top: 22px; }
.casa h2 { margin-top: 22px; font-size: 56px; line-height: 1.14; }
.casa h2 span { display: block; }
.casa__p { margin-top: 30px; font-size: 20px; line-height: 1.65; max-width: 470px; }
.casa__cta { grid-area: cta; align-self: start; margin-top: 52px; }
.casa__cta .btn { padding: 0 54px; }
.casa__foto { grid-area: foto; position: relative; }
.casa__foto img { width: 100%; height: 420px; object-fit: cover; border-radius: var(--r-foto); }

/* foto con etichetta */
.foto { position: relative; overflow: hidden; border-radius: var(--r-foto); }
.foto img { transition: transform 600ms cubic-bezier(.2, .7, .2, 1); }
.etichetta {
  position: absolute; z-index: 1; background: var(--bianco); color: var(--testo);
  font-size: 14px; line-height: 1.3; padding: 8px 14px; border-radius: 10px;
  box-shadow: 0 6px 16px rgba(25, 79, 74, .12);
}

/* ---------- camere e piscina ---------- */
.spazi { background: var(--pietra); padding: 32px 0 34px; scroll-margin-top: 0; }
.spazi__grid { display: grid; grid-template-columns: 680px 1fr; }
.scheda { display: grid; align-items: start; column-gap: 38px; }
.scheda--camere { grid-template-columns: 338px 1fr; padding-right: 26px; }
.scheda--piscina { grid-template-columns: 1fr 276px; padding-left: 34px; border-left: 2px solid var(--ambra); margin-block: 8px; }
.scheda--piscina .scheda__testo { padding-top: 28px; }
.scheda--camere .scheda__testo { padding-top: 36px; }
.scheda .foto img { width: 100%; height: 344px; object-fit: cover; }
.scheda--piscina .foto { margin-block: -8px; }
.scheda h2 { margin-top: 18px; font-size: 39px; line-height: 1.1; }
.scheda h2 span { display: block; }
.scheda__p { margin-top: 30px; font-size: 17px; line-height: 1.5; max-width: 300px; }
.scheda .btn { margin-top: 36px; }
.scheda .etichetta { left: 12px; bottom: 12px; }
.scheda--piscina .etichetta { left: auto; right: 12px; }
.spazi__cta-mob { display: none; }

/* ---------- fascia animali ---------- */
.animali { background: var(--petrolio); color: var(--bianco); scroll-margin-top: 0; }
.animali__in { min-height: 150px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 26px 0 26px 48px; }
.animali .ico { width: 58px; height: 58px; color: var(--ambra); margin-right: 34px; }
.animali h2 { color: var(--bianco); font-size: 38px; line-height: 1.2; }
.animali__p { margin-top: 6px; font-size: 18px; line-height: 1.45; color: rgba(255, 255, 255, .94); }
.animali__aside { border-left: 2px solid var(--ambra); padding: 4px 64px 4px 48px; font-size: 18px; line-height: 1.55; min-height: 70px; display: flex; align-items: center; max-width: 236px; box-sizing: content-box; }

/* ---------- dintorni ---------- */
.dintorni { padding: 58px 0 24px; text-align: center; }
.dintorni h2 { margin-top: 8px; font-size: 50px; line-height: 1.15; }
.dintorni__p { margin-top: 12px; font-size: 20px; }
.dintorni ul { list-style: none; margin: 38px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; text-align: left; }
.dintorni li {
  background: var(--bianco); border-radius: var(--r-card-l); padding: 28px 28px 30px;
  display: grid; grid-template-columns: 34px 1fr; column-gap: 16px; align-items: start;
  box-shadow: 0 1px 0 rgba(25, 79, 74, .03);
  transition: box-shadow var(--t), transform var(--t);
}
.dintorni li:hover { box-shadow: var(--ombra-card); }
.dintorni .ico { width: 30px; height: 30px; color: var(--ambra); margin-top: 2px; }
.dintorni h3 { font-size: 23px; line-height: 1.25; }
.dintorni li p { margin-top: 8px; font-size: 17px; line-height: 1.45; max-width: 222px; }

/* ---------- FAQ e richiesta ---------- */
.info { padding: 56px 0 50px; }
.info__grid { display: grid; grid-template-columns: 608px minmax(0, 1fr); column-gap: 0; }
.info__grid > * { min-width: 0; }
.faq { padding-right: 68px; border-right: 1px solid var(--bordo); padding-bottom: 120px; scroll-margin-top: 24px; }
.faq h2, .richiesta h2 { margin-top: 12px; font-size: 46px; line-height: 1.15; }
.faq ul { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 20px; }
.vh-titolo { margin: 0; font-family: var(--font-testo); font-weight: 400; font-size: inherit; line-height: inherit; color: inherit; letter-spacing: 0; }
.faq__item { background: var(--bianco); border: 1.5px solid var(--bordo); border-radius: var(--r-card); transition: border-color var(--t), box-shadow var(--t); }
.faq__item:hover { border-color: #C5CCC1; }
.faq__item.aperto { box-shadow: var(--ombra-card); border-color: transparent; }
.faq__q {
  width: 100%; min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 22px 14px 20px; background: none; border: 0; text-align: left; cursor: pointer;
  font-size: 18px; line-height: 1.35; color: var(--petrolio); border-radius: var(--r-card);
}
.faq__ico { position: relative; width: 22px; height: 22px; flex: none; }
.faq__q .ico { position: absolute; inset: 0; width: 22px; height: 22px; color: var(--petrolio); transition: transform 260ms cubic-bezier(.2, .7, .2, 1), opacity 200ms ease; }
.faq__q .ico--meno { opacity: 0; transform: rotate(-90deg); }
.faq__item.aperto .ico--piu { opacity: 0; transform: rotate(90deg); }
.faq__item.aperto .ico--meno { opacity: 1; transform: none; }
.faq__q:hover .ico--piu { transform: rotate(90deg); }
.faq__item.aperto .faq__q:hover .ico--piu { transform: rotate(90deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 200ms ease; }
.faq__item.aperto .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 22px 20px 20px; font-size: 17px; line-height: 1.55; color: var(--testo); }

.richiesta { padding-left: 58px; scroll-margin-top: 24px; }
.richiesta__p { margin-top: 10px; font-size: 19px; }
.modulo { margin-top: 20px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 10px; }
.campo { display: flex; flex-direction: column; margin-bottom: 18px; min-width: 0; }
.campo input, .campo select { min-width: 0; }
.campo--arrivo, .campo--partenza, .campo--ospiti { grid-column: span 2; }
.campo--nome, .campo--email { grid-column: span 3; }
.campo--nome { margin-right: 8px; }
.campo--email { margin-left: 8px; }
.campo--msg { grid-column: 1 / -1; }
.campo label { font-size: 15px; font-weight: 500; color: var(--testo); margin-bottom: 8px; }
.campo label .facoltativo { font-weight: 400; color: var(--secondario); }
.input-wrap { position: relative; display: flex; align-items: center; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 0 14px;
  background: var(--bianco); border: 1.5px solid var(--bordo); border-radius: var(--r-campo);
  font-size: 16px; color: var(--testo);
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--t), box-shadow var(--t);
}
.campo textarea { min-height: 76px; padding: 12px 14px; resize: vertical; line-height: 1.45; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--secondario); opacity: 1; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #BFC7BC; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--petrolio); box-shadow: 0 0 0 3px rgba(25, 79, 74, .14); }
.input-wrap input, .input-wrap select { padding-right: 44px; }
.input-wrap .ico { position: absolute; right: 14px; width: 20px; height: 20px; color: var(--secondario); pointer-events: none; }
.input-wrap--sel .ico { color: var(--petrolio); }
.campo input[type="date"]:not(.compilato) { color: var(--secondario); }
.campo [aria-invalid="true"] { border-color: var(--errore); }
.campo__err { font-size: 14px; color: var(--errore); margin-top: 6px; }
.campo__err:empty { display: none; }
.modulo__fine { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 6px; }
.modulo__fine .btn { padding: 0 52px; }
.modulo__nota { font-size: 14px; line-height: 1.45; color: var(--secondario); max-width: 400px; }
.modulo__nota a { color: var(--petrolio); }
.esito {
  grid-column: 1 / -1; margin-top: 18px; display: grid; grid-template-columns: 24px 1fr; gap: 4px 12px;
  background: var(--bianco); border: 1.5px solid var(--bordo); border-radius: var(--r-card); padding: 16px 18px;
}
.esito[hidden] { display: none; }
.esito .ico { color: var(--petrolio); margin-top: 3px; }
.esito strong { font-family: var(--font-titoli); font-weight: 500; font-size: 20px; color: var(--petrolio); }
.esito p { grid-column: 2; font-size: 15px; line-height: 1.5; }
.esito a { color: var(--petrolio); font-weight: 600; }

/* ---------- footer ---------- */
.footer { background: var(--petrolio); color: var(--bianco); }
.footer__in { min-height: 150px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; padding: 36px 0 28px; }
.footer__brand img { width: 208px; height: auto; }
.footer__brand p { margin-top: 10px; font-size: 15px; color: rgba(255, 255, 255, .9); }
.footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 32px; }
.footer a { color: var(--bianco); text-decoration: none; font-size: 16px; }
.footer nav a, .footer__legal a { display: inline-block; padding: 6px 0; background: linear-gradient(var(--ambra), var(--ambra)) left 100% / 0 2px no-repeat; transition: background-size var(--t); }
.footer nav a:hover, .footer__legal a:hover, .footer nav a:focus-visible, .footer__legal a:focus-visible { background-size: 100% 2px; }
.footer__legal { justify-self: end; display: flex; gap: 28px; margin-right: 40px; }
.footer :focus-visible { outline-color: var(--bianco); }
.footer__base { border-top: 1px solid rgba(255, 255, 255, .16); padding: 16px 0 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: 14px; color: rgba(255, 255, 255, .82); }
.footer__base a { font-size: 14px; color: var(--bianco); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; transition: text-decoration-color var(--t); }
.footer__base a:hover { text-decoration-color: var(--ambra); }
.credit a { text-decoration: none; font-weight: 600; }

/* ---------- galleria ---------- */
.galleria {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--avorio); color: var(--testo); overflow: hidden;
}
.galleria::backdrop { background: rgba(25, 79, 74, .6); }
.galleria[open] { display: flex; flex-direction: column; }
.galleria__top { flex: none; display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--bordo); }
.galleria__top h2 { font-size: 24px; margin-right: auto; }
.galleria__conta { font-size: 15px; color: var(--secondario); min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.gbtn {
  width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--bordo); background: var(--bianco); color: var(--petrolio);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.gbtn:hover { background: var(--petrolio); border-color: var(--petrolio); color: var(--bianco); }
.gbtn:disabled { opacity: .4; cursor: default; background: var(--bianco); color: var(--petrolio); border-color: var(--bordo); }
.galleria__corpo { position: relative; flex: 1; min-height: 0; }
.galleria__track {
  height: 100%; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.galleria__track::-webkit-scrollbar { display: none; }
.galleria__track figure { flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 88px 16px; }
.galleria__track img { max-width: 100%; max-height: calc(100% - 36px); width: auto; height: auto; object-fit: contain; border-radius: 12px; background: var(--pietra); }
.galleria__track figcaption { margin-top: 12px; font-size: 15px; color: var(--secondario); text-align: center; }
.galleria__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.galleria__nav--prev { left: 20px; }
.galleria__nav--next { right: 20px; }

/* ---------- banner cookie ---------- */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 16px; font-size: 13px; line-height: 1.35;
  background: var(--avorio); color: var(--testo); border-top: 1px solid var(--bordo);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; }
.cookie-corto { display: none; }
.cookie-bar a { color: var(--petrolio); text-decoration: underline; text-underline-offset: 2px; }
.cookie-bar__x { background: none; border: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--petrolio); cursor: pointer; border-radius: 50%; flex: none; }
.cookie-bar__x .ico { width: 18px; height: 18px; }
.cookie-bar__x:hover { background: var(--pietra); }

/* ---------- pagine semplici (privacy, 404) ---------- */
.pagina { padding: 64px 0 88px; }
.pagina .wrap { max-width: 820px; }
.pagina h1 { font-size: 52px; line-height: 1.12; margin-top: 14px; }
.pagina h2 { font-size: 30px; line-height: 1.2; margin-top: 44px; scroll-margin-top: 24px; }
.pagina p, .pagina li { font-size: 18px; line-height: 1.6; margin-top: 14px; }
.pagina ul { padding-left: 22px; margin: 0; }
.pagina a { color: var(--petrolio); }
.pagina .btn { margin-top: 32px; color: var(--bianco); }
.solo-desk { display: inline; }
.pagina__nota { color: var(--secondario); font-size: 15px !important; }

/* =========================================================
   1024–1279: margini più stretti
   ========================================================= */
@media (max-width: 1279px) {
  :root { --margine: 32px; }
  .nav { padding-left: 24px; }
  .casa__grid { grid-template-columns: 1fr 52%; column-gap: 48px; }
  .spazi__grid { grid-template-columns: 1fr 1fr; }
  .scheda--camere { grid-template-columns: 42% 1fr; column-gap: 28px; }
  .scheda--piscina { grid-template-columns: 1fr 38%; column-gap: 28px; }
  .scheda h2 { font-size: 34px; }
  .info__grid { grid-template-columns: 46% minmax(0, 1fr); }
  .faq h2, .richiesta h2 { font-size: 38px; }
  .dintorni h3 { font-size: 21px; }
  .faq { padding-right: 44px; }
  .richiesta { padding-left: 44px; }
  .datebar .btn { padding: 0 40px; }
}

/* =========================================================
   768–1023: tablet
   ========================================================= */
@media (max-width: 1023px) {
  .nav, .header__cta { display: none; }
  .burger { display: inline-flex; }
  .header__logo img { width: 220px; }

  .hero__card { width: 64%; min-width: 460px; }
  .hero h1 { font-size: 44px; line-height: 1.14; }

  .footer__in { grid-template-columns: 1fr; gap: 26px; min-height: 0; }
  .footer__legal { justify-self: start; margin: -16px 0 0; }

  .servizi ul { grid-template-columns: repeat(3, 1fr); gap: 14px; }

  .spazi__grid { grid-template-columns: 1fr; gap: 32px; }
  .scheda--camere, .scheda--piscina { grid-template-columns: 300px 1fr; padding: 0; border: 0; margin: 0; }
  .scheda--piscina .foto { order: -1; margin: 0; }
  .scheda--piscina .etichetta { left: 12px; right: auto; }

  .animali__in { padding-left: 0; grid-template-columns: auto 1fr; row-gap: 18px; }
  .animali__aside { grid-column: 2; padding: 0 0 0 20px; min-height: 0; }

  .dintorni ul { grid-template-columns: 1fr; gap: 16px; }
  .dintorni li { max-width: 640px; width: 100%; margin-inline: auto; }

  .info__grid { grid-template-columns: 1fr; }
  .faq { padding: 0 0 56px; border: 0; }
  .richiesta { padding: 0; }
}

@media (max-width: 899px) {
  .datebar { grid-template-columns: repeat(3, 1fr); padding: 18px 16px 16px; margin-inline: 0; row-gap: 8px; }
  .datebar .btn { grid-column: 1 / -1; margin: 0; width: 100%; }
  .dfield { flex-direction: column; align-items: flex-start; gap: 10px; padding: 6px 8px; min-width: 0; }
  .dfield__txt { align-self: stretch; }
  .dfield + .dfield::before { display: none; }
  .datebar__err { margin-inline: 4px; }
}

/* =========================================================
   320–767: telefono
   ========================================================= */
@media (max-width: 767px) {
  :root { --margine: 24px; }
  body { font-size: 16px; }
  .header__logo img { width: 190px; }

  .eyebrow { font-size: 13px; letter-spacing: .03em; }

  .hero { min-height: 504px; padding: 142px 0 57px; }
  .hero__card { margin: 0; width: 100%; min-width: 0; border-radius: 22px; padding: 26px 24px 24px; }
  .hero h1 { font-size: 32px; line-height: 1.25; margin-top: 12px; }
  .hero__testo { margin-top: 12px; font-size: 16px; line-height: 1.4; }
  .hero__card .btn { margin-top: 22px; padding: 0 38px; font-size: 16px; }

  .datebar-wrap { margin-top: -39px; }
  .datebar { border-radius: 20px; padding: 18px 8px 20px; }
  .dfield { padding: 4px 8px 6px; min-height: 0; }
  .dfield .ico { width: 24px; height: 24px; }
  .dfield label { font-size: 15px; }
  .dfield input, .dfield select { font-size: 14px; }
  .dfield__sel .ico { width: 14px; height: 14px; }
  .datebar .btn { margin: 12px 8px 0; width: auto; }

  .servizi { margin-top: 28px; }
  .servizi ul { gap: 12px 6px; }
  .servizi li { min-height: 102px; font-size: 14px; gap: 10px; padding: 14px 6px; }
  .servizi .ico { width: 30px; height: 30px; }

  .casa { padding: 20px 0 42px; }
  .casa__grid { grid-template-columns: 1fr 142px; column-gap: 20px; grid-template-areas: "testo foto" "cta cta"; grid-template-rows: auto auto; }
  .casa__testo { padding-top: 6px; }
  .casa h2 { margin-top: 10px; font-size: 32px; line-height: 1.18; }
  .casa__p { margin-top: 18px; font-size: 16px; line-height: 1.45; }
  .casa__foto img { height: 277px; border-radius: 16px; }
  .casa__foto { border-radius: 16px; }
  .casa__cta { margin-top: 24px; }
  .casa__cta .btn { padding: 0 52px; }

  .spazi { padding: 24px 0 28px; }
  .spazi__grid { gap: 34px; }
  .scheda--camere, .scheda--piscina { grid-template-columns: 148px 1fr; column-gap: 20px; }
  .scheda .foto { border-radius: 16px; }
  .scheda .foto img { height: 202px; }
  .scheda--camere .scheda__testo, .scheda--piscina .scheda__testo { padding-top: 14px; }
  .scheda h2 { margin-top: 12px; font-size: 24px; line-height: 1.22; }
  .scheda__p { margin-top: 18px; font-size: 15px; line-height: 1.45; }
  .scheda .etichetta { display: none; }
  .scheda--camere .btn { display: none; }
  .spazi__cta-mob { display: flex; margin-top: 26px; }
  .spazi__cta-mob .btn { width: 100%; }

  .animali__in { grid-template-columns: 38px 1fr; column-gap: 20px; padding: 28px 0 30px; align-items: start; }
  .animali .ico { width: 40px; height: 40px; margin: 6px 0 0; }
  .animali h2 { font-size: 26px; line-height: 1.25; }
  .animali__p { margin-top: 12px; font-size: 16px; }
  .animali__aside { font-size: 15px; border-left: 0; border-top: 2px solid var(--ambra); padding: 14px 0 0; max-width: none; margin-top: 0; }

  .dintorni { padding: 42px 0 20px; text-align: left; }
  .dintorni .eyebrow--centro { justify-content: flex-start; }
  .dintorni .eyebrow--centro::before { display: block; }
  .dintorni h2 { margin-top: 12px; font-size: 28px; }
  .dintorni__p { margin-top: 12px; font-size: 16px; line-height: 1.45; }
  .dintorni ul { margin-top: 26px; gap: 15px; }
  .dintorni li { padding: 22px 22px 22px; grid-template-columns: 30px 1fr; column-gap: 20px; align-items: center; }
  .dintorni .ico { width: 28px; height: 28px; align-self: center; }
  .dintorni h3 { font-size: 20px; }
  .dintorni li p { font-size: 15px; margin-top: 8px; }

  .info { padding: 44px 0 48px; }
  .faq h2, .richiesta h2 { font-size: 30px; margin-top: 12px; }
  .richiesta h2 { font-size: 28px; }
  .faq ul { margin-top: 24px; gap: 16px; }
  .faq__q { min-height: 58px; font-size: 15px; padding: 12px 16px 12px 14px; }
  .faq__ico, .faq__q .ico { width: 20px; height: 20px; }
  .faq__a p { font-size: 15px; padding: 0 16px 16px 14px; }
  .faq { padding-bottom: 52px; }
  .richiesta__p { font-size: 15px; line-height: 1.5; margin-top: 10px; }
  .modulo { margin-top: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; }
  .campo--arrivo, .campo--partenza { grid-column: span 1; }
  .campo--ospiti, .campo--nome, .campo--email, .campo--msg { grid-column: 1 / -1; margin-left: 0; margin-right: 0; }
  .campo { margin-bottom: 20px; }
  .campo textarea { min-height: 110px; }
  .modulo__fine .btn { width: 100%; }
  .modulo__nota { max-width: none; font-size: 13px; }

  .footer__in { grid-template-columns: 1fr; gap: 26px; padding: 36px 0 26px; min-height: 0; }
  .footer nav ul { gap: 6px 24px; }
  .footer nav a, .footer__legal a { font-size: 15px; }
  .footer__legal { justify-self: start; margin: -16px 0 0; gap: 24px; }
  .footer__base { flex-direction: column; font-size: 13px; padding-bottom: 56px; }
  .footer__base a { font-size: 13px; }

  .galleria__top { padding: 10px 16px; gap: 10px; }
  .galleria__top h2 { font-size: 20px; }
  .galleria__track figure { padding: 12px 12px 8px; }
  .galleria__nav { top: auto; bottom: 16px; transform: none; }
  .galleria__nav--prev { left: auto; right: 76px; }
  .galleria__nav--next { right: 16px; }
  .galleria__track img { max-height: calc(100% - 96px); }
  .galleria__track figcaption { margin-bottom: 60px; padding-right: 120px; text-align: left; align-self: flex-start; }

  .cookie-bar { font-size: 12px; padding: 6px 8px 6px 12px; justify-content: space-between; }
  .cookie-bar p { white-space: nowrap; }
  .cookie-lungo { display: none; }
  .cookie-corto { display: inline; }

  .solo-desk { display: none; }
  .pagina { padding: 40px 0 64px; }
  .pagina h1 { font-size: 34px; }
  .pagina h2 { font-size: 24px; margin-top: 36px; }
  .pagina p, .pagina li { font-size: 16px; }
}

@media (max-width: 359px) {
  :root { --margine: 16px; }
  .hero__card { padding: 22px 18px 20px; }
  .hero h1 { font-size: 29px; }
  .servizi ul { grid-template-columns: repeat(2, 1fr); }
  .casa__grid { grid-template-columns: 1fr 118px; }
  .scheda--camere, .scheda--piscina { grid-template-columns: 120px 1fr; column-gap: 14px; }
  .scheda h2 { font-size: 21px; }
  .dfield input, .dfield select { font-size: 13px; }
  .modulo { gap: 0 12px; }
  .campo--arrivo .input-wrap input, .campo--partenza .input-wrap input { padding-left: 10px; padding-right: 32px; }
  .campo--arrivo .input-wrap .ico, .campo--partenza .input-wrap .ico { right: 10px; width: 18px; height: 18px; }
}

@media (hover: hover) {
  .foto:hover img { transform: scale(1.025); }
}


/* =========================================================
   MOVIMENTO — step 5-bis «rendilo tuo»
   Pochi gesti, sempre su transform/opacity: l'impaginazione non si sposta mai.
   ========================================================= */
:root { --e: cubic-bezier(.2, .7, .2, 1); }

/* ingresso della prima schermata */
@keyframes vnn-sale { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes vnn-panorama { from { scale: 1.07; } to { scale: 1; } }
@keyframes vnn-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vnn-zampa {
  0% { transform: rotate(0); } 18% { transform: rotate(-14deg) translateY(-3px); } 36% { transform: rotate(10deg); }
  54% { transform: rotate(-6deg) translateY(-1px); } 72% { transform: rotate(3deg); } 100% { transform: rotate(0); }
}
@keyframes vnn-passo { from { opacity: 0; transform: var(--r) scale(.6); } to { opacity: .34; transform: var(--r) scale(1); } }
@keyframes vnn-su { from { transform: translateY(100%); } to { transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .hero__foto img { animation: vnn-panorama 1.8s var(--e) backwards; }
  .hero__card { animation: vnn-sale .8s var(--e) .05s backwards; }
  .hero__card .eyebrow { animation: vnn-sale .7s var(--e) .25s backwards; }
  .hero h1 span:first-child { animation: vnn-sale .7s var(--e) .33s backwards; }
  .hero h1 .accento { animation: vnn-sale .7s var(--e) .43s backwards; }
  .hero__testo { animation: vnn-sale .7s var(--e) .53s backwards; }
  .hero__card .btn { animation: vnn-sale .7s var(--e) .63s backwards; }
  .datebar { animation: vnn-sale .8s var(--e) .5s backwards; }
  .cookie-bar { animation: vnn-su .5s var(--e) 1.2s backwards; }
  .galleria[open] { animation: vnn-fade .25s ease; }
}

/* sezioni che arrivano scorrendo (IntersectionObserver aggiunge .in) */
.js .reveal { opacity: 0; translate: 0 26px; transition: opacity .75s var(--e) var(--d, 0s), translate .75s var(--e) var(--d, 0s); }
.js .reveal.in { opacity: 1; translate: none; }
.js .foto.reveal img { scale: 1.08; transition: scale 1.4s var(--e) var(--d, 0s), transform 600ms var(--e); }
.js .foto.reveal.in img { scale: 1; }
/* chi ha già una sua transizione la tiene insieme a quella d'ingresso */
.js .servizi li.reveal { transition: opacity .7s var(--e) var(--d, 0s), translate .7s var(--e) var(--d, 0s), background-color var(--t), transform 240ms var(--e), box-shadow 240ms var(--e); }
.js .dintorni li.reveal { transition: opacity .7s var(--e) var(--d, 0s), translate .7s var(--e) var(--d, 0s), transform 240ms var(--e), box-shadow 240ms var(--e); }
.js .faq__item.reveal { transition: opacity .7s var(--e) var(--d, 0s), translate .7s var(--e) var(--d, 0s), border-color var(--t), box-shadow var(--t); }

/* schede che rispondono a mouse, tastiera e dito */
.servizi li { position: relative; }
.servizi .ico, .dintorni .ico { transition: transform 300ms var(--e); }
.servizi li:active { transform: scale(.97); }
.dintorni li:active { transform: scale(.985); }
@media (hover: hover) {
  .servizi li:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(25, 79, 74, .08); }
  .servizi li:hover .ico { transform: translateY(-2px) scale(1.08); }
  .servizi li:nth-child(6):hover .ico { transform: rotate(45deg) scale(1.08); }
  .servizi li:nth-child(5):hover .ico { transform: rotate(-12deg) scale(1.08); }
  .dintorni li:hover { transform: translateY(-4px); }
  .dintorni li:hover .ico { transform: translateY(-3px); }
}
.btn:active { transform: translateY(1px) scale(.98); }

/* foto che si aprono nella galleria */
.foto__apri { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; border-radius: inherit; }
.foto .etichetta { z-index: 2; pointer-events: none; }
.foto__badge {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(251, 250, 244, .92); color: var(--petrolio);
  box-shadow: 0 4px 12px rgba(25, 79, 74, .16); opacity: 0; transform: scale(.8); transition: opacity 220ms ease, transform 260ms var(--e);
}
.foto__badge .ico { width: 20px; height: 20px; }
.foto__apri:hover .foto__badge, .foto__apri:focus-visible .foto__badge { opacity: 1; transform: none; }
.foto__apri:focus-visible { outline: 3px solid var(--bianco); outline-offset: -6px; }
.foto:active img { transform: scale(1.015); }
@media (hover: none) { .foto__badge { opacity: 1; transform: none; width: 34px; height: 34px; top: 10px; right: 10px; } .foto__badge .ico { width: 17px; height: 17px; } }

/* fascia animali: la zampa saluta, e lascia le sue impronte */
.animali__in { position: relative; }
.animali__zampa { transform-origin: 50% 80%; }
.impronte { position: absolute; left: 63%; top: 50%; width: 120px; height: 60px; margin-top: -30px; pointer-events: none; }
.impronte .ico { position: absolute; width: 20px; height: 20px; color: var(--ambra); opacity: .34; margin: 0; --r: rotate(90deg); transform: var(--r); }
.impronte .ico:nth-child(1) { left: 0; top: 30px; }
.impronte .ico:nth-child(2) { left: 30px; top: 8px; }
.impronte .ico:nth-child(3) { left: 62px; top: 30px; }
.impronte .ico:nth-child(4) { left: 94px; top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .js .animali__in.in .animali__zampa { animation: vnn-zampa 1.3s ease-in-out .55s; }
  .js .impronte .ico { opacity: 0; }
  .js .animali__in.in .impronte .ico { animation: vnn-passo .5s var(--e) backwards; opacity: .34; }
  .js .animali__in.in .impronte .ico:nth-child(1) { animation-delay: .9s; }
  .js .animali__in.in .impronte .ico:nth-child(2) { animation-delay: 1.15s; }
  .js .animali__in.in .impronte .ico:nth-child(3) { animation-delay: 1.4s; }
  .js .animali__in.in .impronte .ico:nth-child(4) { animation-delay: 1.65s; }
  @media (hover: hover) { .animali__in:hover .animali__zampa { animation: vnn-zampa 1.1s ease-in-out; } }
}

/* menu attivo mentre si scorre */
.nav a.attivo { background-size: 100% 2px; }

/* menu da telefono: la scheda scende, le voci arrivano una dopo l'altra */
.menu-mob__card { transform: translateY(-14px); opacity: 0; transition: transform 380ms var(--e), opacity 260ms ease; }
.menu-mob.aperto .menu-mob__card { transform: none; opacity: 1; }
.menu-mob__card li, .menu-mob__card .btn { opacity: 0; translate: 0 10px; transition: opacity 320ms ease, translate 380ms var(--e), background-color var(--t); }
.menu-mob.aperto .menu-mob__card li, .menu-mob.aperto .menu-mob__card .btn { opacity: 1; translate: none; }
.menu-mob.aperto .menu-mob__card li:nth-child(1) { transition-delay: 80ms; }
.menu-mob.aperto .menu-mob__card li:nth-child(2) { transition-delay: 130ms; }
.menu-mob.aperto .menu-mob__card li:nth-child(3) { transition-delay: 180ms; }
.menu-mob.aperto .menu-mob__card li:nth-child(4) { transition-delay: 230ms; }
.menu-mob.aperto .menu-mob__card .btn { transition-delay: 290ms, 290ms, 0s; }

/* galleria: binario di miniature che scorre col dito */
.galleria__mini {
  flex: none; display: flex; gap: 8px; padding: 10px 24px 14px; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; overscroll-behavior-x: contain; border-top: 1px solid var(--bordo);
}
.galleria__mini::-webkit-scrollbar { display: none; }
.gmini {
  flex: none; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--pietra);
  cursor: pointer; scroll-snap-align: center; opacity: .62; transition: opacity 200ms ease, border-color 200ms ease, transform 200ms var(--e);
}
.gmini img { height: 100%; width: auto; display: block; }
.gmini:hover { opacity: 1; }
.gmini.attiva { opacity: 1; border-color: var(--ambra); }
.gmini:active { transform: scale(.96); }
.galleria__track img { transition: opacity 300ms ease; }

/* profondità leggera del panorama: solo da computer, solo trasformazioni */
@media (min-width: 1024px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero__foto { top: -60px; height: calc(100% + 60px); will-change: transform; }
}

@media (max-width: 1023px) {
  .impronte { left: auto; right: 0; top: auto; bottom: 18px; margin-top: 0; width: 110px; height: 44px; }
  .impronte .ico { width: 16px; height: 16px; }
  .impronte .ico:nth-child(1) { left: 0; top: 22px; } .impronte .ico:nth-child(2) { left: 26px; top: 4px; }
  .impronte .ico:nth-child(3) { left: 52px; top: 22px; } .impronte .ico:nth-child(4) { left: 78px; top: 4px; }
}
@media (max-width: 767px) {
  .galleria__mini { padding: 8px 16px 12px; }
  .gmini { height: 52px; }
  .galleria__nav { bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; translate: none; }
  .js .foto.reveal img { scale: 1; }
  .header { transition: none; }
}
.header:focus-within { transform: none; }

/* =========================================================
   STEP 6 — il copy nelle forme del design (IT · EN · FR)
   ========================================================= */
.btn .ico { width: 20px; height: 20px; }
.btn--secondario { background: var(--bianco); color: var(--petrolio); border: 1.5px solid var(--petrolio); box-shadow: none; }
.btn--secondario:hover, .btn--secondario:focus-visible { background: var(--petrolio); color: var(--bianco); box-shadow: 0 8px 20px rgba(25, 79, 74, .18); }
.btn--grande { min-height: 58px; width: 100%; font-size: 18px; padding: 0 24px; }
.eyebrow--chiaro { color: var(--ambra); }

/* header: sei voci, Prenota e lingue */
.header__in { gap: 24px; }
.header__logo img { width: 230px; }
.nav { margin: 0 auto; padding-left: 0; }
.nav ul { gap: 22px; }
.nav a { font-size: 16px; }
.lingue { display: flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 600; color: var(--secondario); flex: none; }
.lingue a { padding: 8px 4px; color: var(--petrolio); text-decoration: none; border-radius: 4px; background: linear-gradient(var(--ambra), var(--ambra)) center calc(100% - 4px) / 0 2px no-repeat; transition: background-size var(--t), color var(--t); }
.lingue a:hover, .lingue a:focus-visible { background-size: calc(100% - 8px) 2px; }
.lingue a[aria-current] { color: var(--accento); background-size: calc(100% - 8px) 2px; }

/* hero: titolo lungo e tre pulsanti */
.hero { padding-top: 96px; }
.hero__card { width: 648px; padding: 36px 40px 40px; }
.hero h1 { font-size: 44px; line-height: 1.15; margin-top: 14px; }
.hero__testo { margin-top: 16px; font-size: 19px; max-width: none; }
.hero__testo + .hero__testo { margin-top: 6px; }
.hero__azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero__card .hero__azioni .btn { margin-top: 0; padding: 0 26px; }
.hero__card .hero__azioni .btn:first-child { padding: 0 30px; }

/* calendari: barra dell'hero e scheda di «Come prenotare» */
.cal { position: relative; }
.datebar { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 14px 26px 14px 12px; }
.datebar .cal__campi { display: grid; grid-template-columns: repeat(3, 1fr); }
.datebar .btn { margin-left: 16px; padding: 0 28px; font-size: 16px; }
.datebar .cal__err, .datebar .cal__riserva { grid-column: 1 / -1; padding-left: 14px; }
.cfield { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 14px; min-height: 64px; border-radius: 14px; transition: background-color var(--t), border-color var(--t); min-width: 0; }
.datebar .cfield + .cfield::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--bordo); }
.datebar .cfield:hover, .datebar .cfield:focus-within { background: var(--avorio); }
.cfield > .ico { color: var(--ambra); width: 28px; height: 28px; }
.cfield__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cfield label { font-size: 16px; color: var(--petrolio); line-height: 1.3; cursor: pointer; }
.cfield input, .cfield select {
  border: 0; background: transparent; padding: 0; margin: 0; width: 100%; min-width: 0;
  font-size: 15px; color: var(--testo); line-height: 1.5; min-height: 26px;
  -webkit-appearance: none; appearance: none; cursor: pointer; border-radius: 4px;
}
.cfield input:focus-visible, .cfield select:focus-visible { outline: 2px solid var(--petrolio); outline-offset: 2px; }
.cfield__sel { position: relative; display: flex; align-items: center; }
.cfield__sel select { padding-right: 26px; }
.cfield__sel .ico { position: absolute; right: 0; width: 18px; height: 18px; color: var(--petrolio); pointer-events: none; }
.data-wrap { position: relative; }
.data-segn { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--secondario); font-size: 14.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 150ms ease; }
.data-wrap input:not(.compilato):not(:focus) { color: transparent; }
.data-wrap input.compilato + .data-segn, .data-wrap input:focus + .data-segn { opacity: 0; }
.cfield [aria-invalid="true"] { outline: 2px solid var(--errore); outline-offset: 2px; }
.cal__err { margin: 0; font-size: 14px; color: var(--errore); }
.cal__err span { display: block; padding-top: 10px; }
.cal__err span[hidden] { display: none; }
.cal__riserva { margin: 10px 0 0; font-size: 14px; }
.cal__riserva[hidden] { display: none; }
.cal__riserva a { color: var(--petrolio); font-weight: 600; text-underline-offset: 3px; }
.cal__nota { margin-top: 12px; font-size: 14px; color: var(--secondario); text-align: center; }

/* recensioni */
.recensioni { padding: 72px 0 36px; text-align: center; }
.recensioni h2 { font-size: 46px; line-height: 1.15; }
.voti { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; }
.voto { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 24px 28px 26px; background: var(--bianco); border-radius: var(--r-card-l); color: var(--testo); text-decoration: none; box-shadow: 0 1px 0 rgba(25, 79, 74, .03); transition: transform 240ms var(--e), box-shadow 240ms var(--e); }
.voto:hover, .voto:focus-visible { transform: translateY(-4px); box-shadow: var(--ombra-card); }
.voto:active { transform: scale(.985); }
.voto__nome { font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accento); }
.voto__num { font-family: var(--font-titoli); font-size: 46px; line-height: 1.1; color: var(--petrolio); }
.voto__num small { font-family: var(--font-testo); font-size: 18px; color: var(--secondario); }
.voto__conta { font-size: 15px; color: var(--secondario); }
.voto__ext { position: absolute; top: 22px; right: 22px; width: 20px; height: 20px; color: var(--ambra); transition: transform 240ms var(--e); }
.voto:hover .voto__ext { transform: translate(2px, -2px); }
.citazione { margin: 44px auto 0; max-width: 780px; }
.citazione p { font-family: var(--font-titoli); font-size: 30px; line-height: 1.3; color: var(--petrolio); }
.citazione footer { margin-top: 12px; font-size: 15px; color: var(--secondario); }
.recensioni__da { margin: 18px auto 0; max-width: 640px; font-size: 16px; color: var(--secondario); }

/* animali: la fascia petrolio, più grande */
.animali { padding: 72px 0; }
.animali__grid { display: grid; grid-template-columns: 1fr 520px; gap: 56px; align-items: center; }
.animali .animali__in { display: grid; grid-template-columns: 58px 1fr; column-gap: 26px; align-items: start; min-height: 0; padding: 0; }
.animali .animali__zampa { width: 58px; height: 58px; margin: 6px 0 0; color: var(--ambra); }
.animali h2 { font-size: 40px; line-height: 1.2; margin-top: 12px; }
.animali__testo > p:not(.eyebrow) { margin-top: 14px; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .94); }
.animali__testo a { color: var(--bianco); text-decoration-color: var(--ambra); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.citazione--chiara { margin: 26px 0 0; max-width: none; border-left: 2px solid var(--ambra); padding-left: 22px; }
.citazione--chiara p { font-size: 24px; color: var(--bianco); }
.citazione--chiara footer { color: rgba(255, 255, 255, .78); font-size: 14px; }
.animali__foto img { width: 100%; height: 520px; object-fit: cover; }
.animali .impronte { left: auto; right: 0; top: 2px; margin-top: 0; }

/* l'appartamento */
.casa { padding: 64px 0; }
.casa__grid { grid-template-columns: 1fr 560px; grid-template-areas: "testo foto"; grid-template-rows: auto; column-gap: 64px; align-items: stretch; }
.casa__testo { padding-top: 0; }
.casa h2 { margin-top: 14px; font-size: 44px; line-height: 1.15; }
.casa__p { margin-top: 18px; font-size: 19px; line-height: 1.55; max-width: none; }
.lista-ico { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px 28px; }
.lista-ico--due { grid-template-columns: 1fr 1fr; }
.lista-ico li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; line-height: 1.4; }
.lista-ico .ico { width: 24px; height: 24px; color: var(--ambra); margin-top: -1px; flex: none; }
.casa__nota { margin-top: 16px; font-size: 17px; line-height: 1.5; }
.casa .casa__foto { align-self: stretch; }
.casa .casa__foto img { height: 100%; min-height: 440px; }

/* striscia delle foto (camera, cameretta, soggiorno) */
.spazi { padding: 40px 0 44px; }
.striscia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.striscia .foto img { width: 100%; height: 320px; object-fit: cover; }
.striscia .etichetta { left: 12px; bottom: 12px; }
.spazi__cta { display: flex; justify-content: center; margin-top: 28px; }

/* per i bambini */
.bambini { padding: 64px 0; }
.bambini__grid { display: grid; grid-template-columns: 1fr 620px; gap: 56px; align-items: center; }
.bambini h2 { font-size: 40px; line-height: 1.18; }
.bambini__foto { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bambini__foto img { width: 100%; height: 360px; object-fit: cover; }
.bambini .etichetta { left: auto; right: 12px; bottom: 12px; }

/* il mare e i dintorni */
.dintorni { padding: 64px 0; }
.dintorni h2 { font-size: 46px; }
.dintorni .dintorni__due { grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1040px; margin: 36px auto 0; }
.dintorni .puntini { display: block; margin: 12px 0 0; padding: 0; list-style: none; }
.dintorni .puntini li { display: block; position: relative; background: none; box-shadow: none; border-radius: 0; padding: 5px 0 5px 20px; font-size: 17px; line-height: 1.45; max-width: none; }
.dintorni .puntini li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--ambra); }
.dintorni .puntini li:hover { transform: none; box-shadow: none; }

/* come arrivare */
.arrivo { background: var(--pietra); padding: 64px 0; }
.arrivo__testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.arrivo h2 { font-size: 46px; line-height: 1.15; }
.arrivo__schede { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.arrivo__schede li { background: var(--bianco); border-radius: var(--r-card-l); padding: 24px; display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; transition: transform 240ms var(--e), box-shadow 240ms var(--e); }
.arrivo__schede .ico { width: 28px; height: 28px; color: var(--ambra); }
.arrivo__schede p { font-size: 16.5px; line-height: 1.5; }
.arrivo__schede p + p { margin-top: 8px; }
@media (hover: hover) { .arrivo__schede li:hover { transform: translateY(-4px); box-shadow: var(--ombra-card); } }
.js .arrivo__schede li.reveal { transition: opacity .7s var(--e) var(--d, 0s), translate .7s var(--e) var(--d, 0s), transform 240ms var(--e), box-shadow 240ms var(--e); }

/* come prenotare */
.prenota { padding: 72px 0; }
.prenota__grid { display: grid; grid-template-columns: 1fr 500px; gap: 64px; align-items: start; }
.prenota h2 { font-size: 46px; line-height: 1.15; }
.passi { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.passi li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: center; }
.passo__n { width: 52px; height: 52px; border-radius: 50%; background: var(--pietra); color: var(--accento); display: flex; align-items: center; justify-content: center; font-family: var(--font-titoli); font-size: 26px; line-height: 1; }
.passo__t { font-size: 18px; line-height: 1.45; }
.cal--prenota { background: var(--bianco); border-radius: 20px; padding: 26px; box-shadow: var(--ombra-card); }
.cal--prenota .cal__campi { display: grid; gap: 12px; }
.cal--prenota .cfield { border: 1.5px solid var(--bordo); border-radius: 12px; padding: 10px 16px; min-height: 66px; }
.cal--prenota .cfield:hover { border-color: #BFC7BC; }
.cal--prenota .cfield:focus-within { border-color: var(--petrolio); box-shadow: 0 0 0 3px rgba(25, 79, 74, .12); }
.cal--prenota .btn { width: 100%; margin-top: 18px; white-space: normal; text-align: center; min-height: 52px; }

/* domande frequenti */
.faq { background: var(--pietra); padding: 72px 0; border-right: 0; scroll-margin-top: 0; }
.faq__grid { display: grid; grid-template-columns: 360px 1fr; gap: 64px; align-items: start; }
.faq__testa { position: sticky; top: 110px; }
.faq .faq__lista { margin: 0; gap: 14px; }
.faq__item.aperto { box-shadow: var(--ombra-card); }

/* contatti */
.contatti { padding: 72px 0 80px; }
.contatti__grid { display: grid; grid-template-columns: 1fr 440px; gap: 64px; align-items: center; }
.contatti h2 { font-size: 46px; line-height: 1.15; }
.contatti__p { margin-top: 14px; font-size: 19px; line-height: 1.55; }
.contatti a:not(.btn) { color: var(--petrolio); text-underline-offset: 3px; }
.contatti address { margin-top: 22px; font-style: normal; font-size: 18px; line-height: 1.6; }
.contatti__mail { margin-top: 12px; font-size: 18px; }
.contatti__azioni { display: grid; gap: 12px; }

/* footer col CIN */
.footer__in { grid-template-columns: 1.1fr 1.3fr .9fr; align-items: start; gap: 40px; padding: 52px 0 36px; }
.footer__mono { width: 48px; height: 48px; margin-bottom: 16px; border-radius: 10px; }
.footer__info p { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .9); }
.footer__info p + p { margin-top: 4px; }
.footer__info a { font-size: 15px; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; }
.footer nav ul { flex-direction: column; gap: 2px; }
.footer__base .footer__legal { margin: 0; justify-self: auto; display: flex; gap: 8px; align-items: center; }
.footer__base .footer__legal a { font-size: 14px; }

/* barra fissa da telefono */
.barra-tel { display: none; }

/* banner cookie: «Ok» */
.cookie-bar__ok { flex: none; min-height: 30px; padding: 4px 16px; border: 0; border-radius: 999px; background: var(--petrolio); color: var(--bianco); font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color var(--t); }
.cookie-bar__ok:hover { background: var(--ambra-focus); }

/* 404 in tre lingue */
.pagina--404 .pagina__altra { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--bordo); }
.pagina--404 .pagina__altra h2 { margin-top: 0; font-size: 28px; }
.pagina__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.pagina .pagina__azioni .btn { margin-top: 0; }
.pagina .btn--secondario { color: var(--petrolio); }
.pagina .btn--secondario:hover { color: var(--bianco); }

/* ---------- da 1200 in giù: il menu va nel pulsante ---------- */
@media (max-width: 1199px) {
  .nav, .header__cta { display: none; }
  .burger { display: inline-flex; margin-left: 4px; }
  .lingue { margin-left: auto; }
  .animali__grid { grid-template-columns: 1fr 420px; gap: 40px; }
  .casa__grid { grid-template-columns: 1fr 46%; column-gap: 40px; }
  .bambini__grid { grid-template-columns: 1fr 52%; gap: 40px; }
  .arrivo__schede { grid-template-columns: repeat(2, 1fr); }
  .prenota__grid { grid-template-columns: 1fr 440px; gap: 40px; }
  .faq__grid { grid-template-columns: 280px 1fr; gap: 40px; }
  .datebar { grid-template-columns: 1fr; padding: 16px; }
  .datebar .btn { margin: 10px 0 0; width: 100%; }
}
@media (max-width: 1023px) {
  .hero__card { width: 72%; min-width: 480px; }
  .hero h1 { font-size: 38px; }
  .animali__grid, .casa__grid, .bambini__grid, .prenota__grid, .faq__grid, .contatti__grid { grid-template-columns: 1fr; }
  .casa__grid { grid-template-areas: "testo" "foto"; row-gap: 32px; }
  .casa .casa__foto img { min-height: 0; height: 380px; }
  .animali__foto img { height: 380px; }
  .faq__testa { position: static; }
  .faq__grid { gap: 28px; }
  .contatti__grid { gap: 32px; }
  .prenota__grid { gap: 32px; }
  .footer__in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899px) {
  .datebar .cal__campi { grid-template-columns: 1fr; gap: 4px; }
  .datebar .cfield { flex-direction: row; align-items: center; padding: 8px 10px; }
  .datebar .cfield + .cfield::before { display: block; left: 10px; right: 10px; top: 0; bottom: auto; width: auto; height: 1px; }
  .datebar .cal__err, .datebar .cal__riserva { padding-left: 4px; }
}
@media (max-width: 767px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .header__logo img { width: 176px; }
  .header__in { gap: 10px; }
  .lingue { font-size: 13px; }

  .hero { padding: 120px 0 52px; }
  .hero__card { width: 100%; min-width: 0; padding: 24px 22px 22px; }
  .hero h1 { font-size: 27px; line-height: 1.22; margin-top: 10px; }
  .hero__testo { font-size: 16px; margin-top: 12px; }
  .hero__azioni { margin-top: 20px; gap: 8px; }
  .hero__card .hero__azioni .btn, .hero__card .hero__azioni .btn:first-child { flex: 1 1 100%; padding: 0 20px; font-size: 16px; }
  .datebar-wrap { margin-top: -34px; }
  .datebar { padding: 12px 12px 14px; }
  .cfield label { font-size: 15px; }
  .datebar .cfield > .ico { width: 24px; height: 24px; }

  .recensioni { padding: 48px 0 24px; }
  .recensioni h2 { font-size: 30px; }
  .voti { gap: 8px; margin-top: 22px; }
  .voto { padding: 14px 12px 14px; gap: 2px; }
  .voto__nome { font-size: 12px; letter-spacing: .02em; }
  .voto__num { font-size: 27px; }
  .voto__num small { font-size: 13px; }
  .voto__conta { font-size: 12px; }
  .voto__ext { top: 12px; right: 10px; width: 14px; height: 14px; }
  .citazione { margin-top: 28px; }
  .citazione p { font-size: 22px; }
  .recensioni__da { font-size: 15px; }

  .animali { padding: 44px 0; }
  .animali__grid { gap: 26px; }
  .animali .animali__in { grid-template-columns: 38px 1fr; column-gap: 16px; }
  .animali .animali__zampa { width: 38px; height: 38px; margin-top: 2px; }
  .animali h2 { font-size: 26px; }
  .animali__testo > p:not(.eyebrow) { font-size: 16px; margin-top: 12px; }
  .citazione--chiara p { font-size: 20px; }
  .animali__foto img { height: 260px; }
  .animali .impronte { display: none; }

  .casa { padding: 44px 0; }
  .casa__grid { grid-template-columns: 1fr; grid-template-areas: "testo" "foto"; row-gap: 24px; }
  .casa h2 { font-size: 28px; }
  .casa__p { font-size: 16px; }
  .lista-ico--due { grid-template-columns: 1fr; }
  .lista-ico li { font-size: 16px; }
  .casa__nota { font-size: 16px; }
  .casa .casa__foto img { height: 240px; min-height: 0; }

  .spazi { padding: 28px 0 32px; }
  .striscia { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--margine)); padding: 0 var(--margine) 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .striscia::-webkit-scrollbar { display: none; }
  .striscia > li { flex: 0 0 80%; scroll-snap-align: start; scroll-margin-left: var(--margine); }
  .striscia .foto img { height: 240px; }
  .spazi__cta { margin-top: 20px; }
  .spazi__cta .btn { width: 100%; }

  .bambini { padding: 44px 0; }
  .bambini h2 { font-size: 26px; }
  .bambini__grid { gap: 22px; }
  .bambini__foto { gap: 10px; }
  .bambini__foto img { height: 190px; }
  .bambini .etichetta { right: 8px; bottom: 8px; font-size: 12px; padding: 6px 9px; }

  .dintorni { padding: 44px 0; }
  .dintorni h2 { font-size: 26px; }
  .dintorni .dintorni__due { grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
  .dintorni .puntini li { font-size: 15.5px; }

  .arrivo { padding: 44px 0; }
  .arrivo h2 { font-size: 30px; }
  .arrivo__testa .btn { width: 100%; }
  .arrivo__schede { grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
  .arrivo__schede li { padding: 18px; }
  .arrivo__schede p { font-size: 15.5px; }

  .prenota { padding: 44px 0; }
  .prenota h2 { font-size: 30px; }
  .passi { gap: 12px; margin-top: 20px; }
  .passi li { grid-template-columns: 42px 1fr; gap: 14px; }
  .passo__n { width: 42px; height: 42px; font-size: 21px; }
  .passo__t { font-size: 16px; }
  .cal--prenota { padding: 18px; }

  .faq { padding: 44px 0; }
  .faq__grid { gap: 20px; }
  .faq .faq__lista { gap: 10px; }

  .contatti { padding: 44px 0 52px; }
  .contatti h2 { font-size: 30px; }
  .contatti__p, .contatti address, .contatti__mail { font-size: 16px; }
  .btn--grande { min-height: 52px; font-size: 17px; }

  .footer__in { grid-template-columns: 1fr; gap: 24px; padding: 40px 0 26px; }
  .footer__base { padding-bottom: 20px; }

  .barra-tel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(251, 250, 244, .97); border-top: 1px solid var(--bordo);
  }
  .barra-tel a { min-height: 46px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 16px; text-decoration: none; color: var(--bianco); transition: transform 160ms var(--e), background-color var(--t); }
  .barra-tel a:active { transform: scale(.97); }
  .barra-tel .ico { width: 18px; height: 18px; }
  .barra-tel__wa { background: var(--ambra-focus); }
  .barra-tel__tel { background: var(--petrolio); }
  .cookie-bar { bottom: calc(62px + env(safe-area-inset-bottom)); }
  .cookie-bar__ok { font-size: 12px; padding: 4px 12px; min-height: 28px; }
}
@media (max-width: 359px) {
  .header__logo img { width: 150px; }
  .hero h1 { font-size: 24px; }
  .voto__num { font-size: 23px; }
  .voto { padding: 12px 9px; }
}

/* step 6 · giro di controllo delle foto */
h2 { text-wrap: balance; }
.hero h1 span { text-wrap: balance; }
p, li { text-wrap: pretty; }
.cal .btn { white-space: normal; text-align: center; line-height: 1.25; padding-top: 10px; padding-bottom: 10px; }
.prenota__grid > *, .datebar-wrap > *, .cal__campi > * { min-width: 0; }
.footer__brand .footer__mono { width: 48px; height: 48px; }
.voto__num { white-space: nowrap; }
@media (max-width: 767px) {
  .dintorni .dintorni__due > li { align-items: start; }
  .dintorni .dintorni__due > li > .ico { align-self: start; margin-top: 3px; }
  .arrivo__schede li { grid-template-columns: 1fr; gap: 10px; }
  .voto__num { font-size: 25px; }
  .voto__num small { font-size: 12px; }
}
@media (max-width: 359px) {
  .voto__num { font-size: 21px; }
  .voto__num small { font-size: 11.5px; }
  .voto__nome { font-size: 11.5px; }
}
@media (max-width: 767px) {
  .voto__num { white-space: normal; font-size: 27px; }
  .voto__num small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.3; }
}
@media (max-width: 359px) { .voto__num { font-size: 23px; } .voto__num small { font-size: 12px; } }
.pagina__azioni .btn { white-space: normal; text-align: center; line-height: 1.25; }
@media (max-width: 767px) { .pagina__azioni .btn { flex: 1 1 100%; } }
/* banner cookie: una riga anche sugli schermi più stretti */
.ck-corto { display: none; }
@media (max-width: 767px) { .cookie-bar { gap: 8px; padding: 6px 10px; } }
@media (max-width: 430px) { html[lang="fr"] .ck-lungo { display: none; } html[lang="fr"] .ck-corto { display: inline; } }
@media (max-width: 359px) { .ck-lungo { display: none; } .ck-corto { display: inline; } }
/* hero: i tre pulsanti su una riga da computer, in tutte le lingue */
@media (min-width: 1024px) {
  .hero__card { width: 704px; }
  .hero__card .hero__azioni .btn { font-size: 16px; }
  .hero__card .hero__azioni .btn--secondario { padding: 0 22px; }
}
@media (min-width: 1024px) {
  html[lang="fr"] .hero__azioni { gap: 8px; }
  html[lang="fr"] .hero__card .hero__azioni .btn, html[lang="fr"] .hero__card .hero__azioni .btn:first-child { font-size: 15px; padding: 0 18px; }
}

/* step 7 · giro 1 */
.datebar .cal__campi { grid-column: 1; grid-row: 1; }
.datebar > .btn { grid-column: 2; grid-row: 1; }
.datebar .cal__err { grid-column: 1 / -1; grid-row: 2; }
.datebar .cal__riserva { grid-column: 1 / -1; grid-row: 3; }
.cal__err span { padding: 8px 0 2px; }
.cal--prenota .cal__err span { padding: 10px 0 0; }
.cal__err span, .cal__riserva { scroll-margin-top: 100px; scroll-margin-bottom: 24px; }
.cal--prenota { scroll-margin-top: 24px; }
.tel { white-space: nowrap; }
@media (max-width: 1199px) {
  .datebar .cal__campi, .datebar > .btn, .datebar .cal__err, .datebar .cal__riserva { grid-column: 1; grid-row: auto; }
}
@media (max-width: 767px) {
  /* la barra fissa WhatsApp/Chiama non deve coprire errori e link di riserva */
  .cal__err span, .cal__riserva { scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .cal--prenota { scroll-margin-top: 16px; }
}

/* tornata 08/10 · il logo come sull'insegna: fiore sopra, scritta sotto, più grande da telefono */
.header__in, .menu-mob__top { height: 96px; }
.header__logo { flex: 0 1 180px; min-width: 128px; }
.header__logo img { width: 100%; max-width: 180px; height: auto; }
.menu-mob__top img { width: 172px; height: auto; }