/* =========================================================
   Hotel Villa Mare Riccione - mockup 2
   Ripartenza: restano dal mockup 1 solo token, bottoni,
   Media Gallery e footer. Il resto va ridisegnato.
   Cinematica in CSS scroll-driven, mai listener sullo scroll.
   ========================================================= */

:root {
  color-scheme: light;
  --teal: #216C78;
  --teal-dark: #17515A;
  --teal-deep: #0F3A41;
  --sand: #B6916F;
  --sand-light: #E7E1E1;
  --grey: #54595F;
  --grey-mid: #858585;
  --taupe: #877B7A;
  --white: #FFFFFF;
  --ink: #1F2A2C;
  --off: #F4F6F6;
  --line: rgba(31, 42, 44, .12);
  --shadow: 0 30px 60px -30px rgba(15, 58, 65, .35);
  --font-display: "Jost", "Futura", "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Jost", "Futura", "Helvetica Neue", Arial, sans-serif;
  --warm: #F7F5F2;
  --sand-pale: #E8DFD3;
  --font-body: "Titillium Web", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --wrap: 1280px;
  --intro: 2.5s;        /* attesa dello splash prima che parta l'hero */
  --mark-h: min(46vh, 420px);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html { overflow-x: clip; }
body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; color: var(--grey); background: var(--warm); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* grana filmica leggerissima, fissa, non intercetta il puntatore */
.grain { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ---------- layout ---------- */
.wrap { width: min(var(--wrap), 100% - 3rem); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; }
.section { padding-block: clamp(4rem, 9vw, 8rem); }
.section--off { background: var(--off); }

/* ---------- tipografia ---------- */
.label { display: inline-block; font: 600 .75rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--teal); margin-bottom: 1.25rem; }
.h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 3.8vw, 3.4rem); line-height: 1.08; letter-spacing: -.01em; color: var(--ink); margin-bottom: 1.5rem; }
.h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.2; color: var(--ink); }
.lead { font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.7; max-width: 58ch; }
.sub { font-family: var(--font-accent); font-weight: 200; font-size: clamp(1.1rem, 1.5vw, 1.35rem); color: var(--taupe); }
.mask { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.mask > span { display: block; }

/* ---------- bottoni: due tessere a spigolo (etichetta + quadrato icona) separate da un filo ---------- */

/* ---------- bottoni "a due tessere" + link testuale ---------- */
.btn { --gap: 3px; position: relative; display: inline-flex; align-items: stretch; height: 54px; border-radius: 0; border: 0; padding: 0;
  font: 600 .74rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; background: transparent;
  transition: transform .25s var(--ease); }
.btn:active { transform: scale(.98); }
.btn > span, .btn::before { display: inline-flex; align-items: center; padding: 0 1.6rem; }
.btn i { display: grid; place-items: center; width: 54px; margin-left: var(--gap); font-size: 1.15rem; flex: none; transition: transform .4s var(--ease), background-color .35s var(--ease), color .35s var(--ease), margin .35s var(--ease); }
.btn:hover i { margin-left: 0; }
.btn:hover i::before { transform: translateX(3px); }
.btn i::before { transition: transform .35s var(--ease); }

/* il testo del bottone è il nodo di testo: lo avvolgo con un box tramite ::before non serve, uso il flex del contenitore */
.btn { gap: 0; }
.btn__label, .btn > :not(i) { display: inline-flex; align-items: center; }

.btn--primary { color: var(--white); }
.btn--primary .btn__label { background: var(--teal); padding: 0 1.6rem; }
.btn--primary i { background: var(--teal-deep); color: var(--white); }
.btn--primary:hover .btn__label { background: var(--teal-dark); }
.btn--primary:hover i { background: var(--white); color: var(--teal); }

.btn--light { color: var(--teal-deep); }
.btn--light .btn__label { background: var(--white); padding: 0 1.6rem; }
.btn--light i { background: var(--teal); color: var(--white); }
.btn--light:hover i { background: var(--teal-deep); }

.btn--ghost { color: var(--teal); }
.btn--ghost .btn__label { border: 1px solid rgba(33,108,120,.5); padding: 0 1.6rem; }
.btn--ghost i { background: var(--teal); color: var(--white); }
.btn--ghost:hover .btn__label { background: var(--teal); color: var(--white); border-color: var(--teal); }

.btn--ghost-light { color: var(--white); }
.btn--ghost-light .btn__label { border: 1px solid rgba(255,255,255,.55); padding: 0 1.6rem; }
.btn--ghost-light i { background: var(--white); color: var(--teal); }
.btn--ghost-light:hover .btn__label { background: var(--white); color: var(--teal); border-color: var(--white); }

/* bottone senza icona: solo la tessera etichetta */
.btn:not(:has(i)) .btn__label { padding: 0 1.75rem; }

/* link testuale con riga e freccia */
.link-arrow { display: inline-flex; align-items: center; gap: .75rem; padding-bottom: .5rem; font: 600 .78rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: inherit; position: relative; }
.link-arrow::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform-origin: left; transition: transform .5s var(--ease); }
.link-arrow:hover::after { transform: scaleX(.4); }
.link-arrow i { font-size: 1.1rem; transition: transform .4s var(--ease); }
.link-arrow:hover i { transform: translateX(6px); }


/* ---------- segnaposto sezioni da ridisegnare ---------- */
.todo { padding-block: clamp(6rem, 12vw, 9rem); background: var(--off); text-align: center; }
.todo .h2 { margin-bottom: .75rem; }
.eyebrow { font: 600 .74rem/1 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--sand); margin-bottom: 1.25rem; }


/* =========================================================
   ETICHETTE, CTA
   ========================================================= */
.eyebrow--paren::before { content: "(  "; } .eyebrow--paren::after { content: "  )"; }
.eyebrow { font-family: var(--font-display); font-weight: 500; }
.cta { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 1.5rem; font: 500 .74rem/1 var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: var(--white); background: var(--teal); transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.cta:hover { background: var(--teal-dark); }
.cta--light { background: transparent; border: 1px solid rgba(255,255,255,.7); }
.cta--light:hover { background: var(--white); color: var(--teal-deep); border-color: var(--white); }


/* =========================================================
   SPLASH DI APERTURA (solo CSS, ~2,6 s)
   ========================================================= */
.splash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; pointer-events: none; }
.splash__bg { position: absolute; inset: 0; overflow: hidden; background: var(--teal-deep); }
.splash__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, rgba(33,108,120,.55), rgba(15,58,65,.95) 70%); }
.splash__stage { position: relative; display: grid; place-items: center; }
.splash__mark { position: relative; overflow: hidden; }
.splash__mark img { display: block; height: var(--mark-h); width: auto; }
.splash__shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%); mix-blend-mode: overlay; opacity: 0; }
.splash__slit { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 0; height: 1px; background: rgba(255,255,255,.9); box-shadow: 0 0 24px rgba(255,255,255,.6); }
.splash__thread { position: absolute; left: 50%; bottom: -2.75rem; translate: -50% 0; width: clamp(120px, 16vw, 200px); height: 1px; background: rgba(255,255,255,.22); overflow: hidden; }
.splash__thread::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.9); transform-origin: left; scale: 0 1; }

@media (prefers-reduced-motion: reduce) { .splash { display: none; } :root { --intro: 0s; } }
/* splash già visto in questa sessione (classe messa dallo script inline in <head>) */
html.no-splash .splash { display: none; }
html.no-splash { --intro: .1s; }
html.no-splash .header .brand { animation: none; }

@media (prefers-reduced-motion: no-preference) {
  /* 1. la fessura di luce si apre */
  .splash__slit { animation: slitOpen .7s var(--ease) .15s both, slitOut .4s var(--ease) 1.15s both; }
  @keyframes slitOpen { to { width: calc(var(--mark-h) * .82); } }
  @keyframes slitOut { to { opacity: 0; } }

  /* 2. il logo si scopre dalla fessura, dall'interno verso l'alto e il basso */
  .splash__mark { animation: markReveal 1s var(--ease) .55s both; }
  @keyframes markReveal { from { clip-path: inset(50% 0 50% 0); scale: 1.06; } to { clip-path: inset(0 0 0 0); scale: 1; } }

  /* 3. un riflesso attraversa il logo */
  .splash__shine { animation: shine 1.1s var(--ease) 1.15s both; }
  @keyframes shine { 0% { opacity: 0; transform: translateX(-120%); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(120%); } }

  /* 4. il filo si riempie: il caricamento */
  .splash__thread::after { animation: thread 1.15s cubic-bezier(.5,0,.2,1) .75s both; }
  @keyframes thread { to { scale: 1 1; } }
  .splash__thread { animation: threadOut .35s var(--ease) 1.95s both; }
  @keyframes threadOut { to { opacity: 0; } }

  /* 5. il logo sale verso l'header e passa la mano a quello vero */
  .splash__stage { animation: markToHeader .95s cubic-bezier(.65,0,.2,1) 1.85s both; }
  @keyframes markToHeader {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    72% { opacity: 1; }
    100% { transform: translateY(calc(-50vh + 190px)) scale(.7); opacity: 0; }
  }

  /* 6. il velo petrolio si solleva */
  .splash__bg { animation: veilUp .9s cubic-bezier(.65,0,.2,1) 2.05s both; }
  @keyframes veilUp { to { clip-path: inset(0 0 100% 0); } }

  /* 7. via dallo schermo */
  .splash { animation: splashEnd .01s linear 3s both; }
  @keyframes splashEnd { to { visibility: hidden; } }

  /* il logo dell'header entra quando quello dello splash arriva */
  .header .brand { animation: brandIn .5s var(--ease) 2.5s both; }
  @keyframes brandIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 899px) {
  :root { --mark-h: min(34vh, 260px); }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes markToHeader {
      0% { transform: translateY(0) scale(1); opacity: 1; }
      72% { opacity: 1; }
      100% { transform: translateY(calc(-50vh + 110px)) scale(.62); opacity: 0; }
    }
  }
}

/* =========================================================
   HEADER: menu · logo grande (210→60, scuro allo scroll) · tel · prenota
   ========================================================= */
#header-sentinel { position: absolute; top: 80px; height: 1px; width: 1px; pointer-events: none; }
.header { --logo-h: 300px; position: fixed; inset: 0 0 auto 0; z-index: 50; color: var(--white); padding-block: 1.25rem;
  transition: background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease); }
.header__grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; }
.header:not(.is-scrolled) .header__grid { filter: drop-shadow(0 1px 3px rgba(15,58,65,.4)); }
.header.is-scrolled { --logo-h: 60px; padding-block: .5rem; background: rgba(247,245,242,.92); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
@supports (backdrop-filter: blur(1px)) { .header.is-scrolled { background: rgba(247,245,242,.8); backdrop-filter: blur(14px) saturate(160%); } }
.brand { display: inline-flex; align-items: center; justify-self: center; }
.brand__logo { height: var(--logo-h); width: auto; transition: height .55s var(--ease); }
.brand__logo.is-dark { display: none; }
.header.is-scrolled .brand__logo.is-light { display: none; }
/* allo scroll solo la parte grafica del logo (cerchio + onda): il file è intero, il ritaglio è CSS */
.header.is-scrolled .brand__logo.is-dark { display: block; width: calc(var(--logo-h) * 1111 / 930); object-fit: cover; object-position: top; }
.brand--menu .brand__logo { height: 76px; }
.header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 1.75rem; }
.header__phone { font: 400 .82rem/1 var(--font-display); letter-spacing: .1em; }
/* «Richiedi preventivo»: porta al form in fondo alla pagina (richiesta del marketing, 12/10/2026) */
/* pieno, color sabbia del marchio, come sul sito di prima (richiesta di Vincenzo) */
.header__quote { display: inline-flex; align-items: center; height: 42px; padding: 0 1.5rem; font: 500 .74rem/1 var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: var(--white); background: var(--sand); transition: background .35s var(--ease); }
.header__quote i { display: none; }
.header__quote:hover { background: color-mix(in srgb, var(--sand) 82%, #000); }
.header__phone, .header__quote { white-space: nowrap; }
/* con «Richiedi preventivo» il numero non ci sta più: sotto i 1600 px resta nel menu, nei pulsanti fissi e nel footer */
@media (max-width: 1599px) { .header__phone { display: none; } }
@media (max-width: 1399px) { .header__actions { gap: 1.25rem; } }
.header .cta { height: 42px; background: transparent; border: 1px solid currentColor; color: inherit; }
.header .cta:hover { background: var(--white); color: var(--teal-deep); border-color: var(--white); }
.header.is-scrolled .cta { background: var(--teal); border-color: var(--teal); color: var(--white); }
.header.is-scrolled .cta:hover { background: var(--teal-dark); }
/* selettore di lingua, a destra di Prenota: lingua corrente + tendina con le altre */
.lang { position: relative; }
.lang__btn { display: inline-flex; align-items: center; gap: .35rem; height: 42px; padding: 0 .1rem; cursor: pointer; list-style: none;
  font: 500 .74rem/1 var(--font-display); letter-spacing: .22em; transition: opacity .3s var(--ease); }
.lang__btn::-webkit-details-marker { display: none; }
.lang__btn i { font-size: .8rem; transition: transform .35s var(--ease); }
.lang__btn:hover { opacity: .7; }
.lang[open] .lang__btn i { transform: rotate(180deg); }
.lang__list { position: absolute; top: calc(100% + .6rem); right: -1rem; min-width: 10.5rem; margin: 0; padding: .5rem 0; list-style: none;
  background: rgba(247,245,242,.97); color: var(--ink); box-shadow: 0 18px 40px -18px rgba(15,58,65,.45); }
.lang__list a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .7rem 1.1rem;
  font: 500 .74rem/1 var(--font-display); letter-spacing: .22em; transition: color .3s var(--ease), background-color .3s var(--ease); }
.lang__list a span { font: 300 .82rem/1 var(--font-display); letter-spacing: .04em; color: var(--taupe); transition: color .3s var(--ease); }
.lang__list a:hover { color: var(--teal); background: var(--teal-pale, #E9F1F2); }
.lang__list a:hover span { color: var(--teal); }
@media (prefers-reduced-motion: no-preference) {
  .lang[open] .lang__list { animation: langIn .35s var(--ease) both; }
  @keyframes langIn { from { opacity: 0; transform: translateY(-6px); } }
}
@media (max-width: 899px) { .lang__list { right: 0; } }
.burger, .menu__close { color: inherit; background: none; border: 0; cursor: pointer; }
.burger { display: inline-flex; align-items: center; gap: .8rem; justify-self: start; padding: .6rem .6rem .6rem 0; font: 500 .74rem/1 var(--font-display); letter-spacing: .22em; text-transform: uppercase; }
.burger__icon { position: relative; width: 28px; height: 12px; }
.burger__icon span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: width .3s var(--ease), transform .3s var(--ease); }
.burger__icon span:nth-child(1) { top: 0; }
.burger__icon span:nth-child(2) { top: 50%; transform: translateY(-50%); width: 65%; }
.burger__icon span:nth-child(3) { bottom: 0; }
.burger:hover .burger__icon span:nth-child(2) { width: 100%; }
@media (max-width: 899px) {
  .header { --logo-h: 165px; }
  .header.is-scrolled { --logo-h: 50px; }
  .header__phone, .header__quote, .header .cta, .burger__text { display: none; }
  .brand--menu .brand__logo { height: 60px; }
}

/* =========================================================
   MENU POPUP (apertura a cerchio dal burger, in alto a sinistra)
   ========================================================= */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--teal-deep); color: var(--white); display: grid; grid-template-rows: auto 1fr; visibility: hidden; isolation: isolate;
  clip-path: circle(0 at 3rem 3rem); transition: clip-path .9s var(--ease), visibility 0s .9s; }
.menu.is-open { visibility: visible; clip-path: circle(160% at 3rem 3rem); transition: clip-path .9s var(--ease), visibility 0s; }
.menu__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--teal-deep); }
.menu__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; filter: saturate(.8) contrast(1.05); }
.menu__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(15,58,65,.85) 0%, rgba(33,108,120,.55) 50%, rgba(15,58,65,.9) 100%); }
.silk { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen; pointer-events: none; }
.silk--1 { left: -20vmax; top: -25vmax; background: radial-gradient(circle at 40% 40%, rgba(120,200,210,.9), rgba(33,108,120,0) 60%); }
.silk--2 { right: -25vmax; top: 10vh; background: radial-gradient(circle at 50% 50%, rgba(182,145,111,.75), rgba(33,108,120,0) 60%); }
.silk--3 { left: 20vw; bottom: -35vmax; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.55), rgba(33,108,120,0) 60%); }
@media (prefers-reduced-motion: no-preference) {
  .silk--1 { animation: silk1 22s ease-in-out infinite alternate; }
  .silk--2 { animation: silk2 26s ease-in-out infinite alternate; }
  .silk--3 { animation: silk3 30s ease-in-out infinite alternate; }
  @keyframes silk1 { to { transform: translate(28vw, 18vh) scale(1.25) rotate(20deg); } }
  @keyframes silk2 { to { transform: translate(-30vw, 22vh) scale(.85) rotate(-30deg); } }
  @keyframes silk3 { to { transform: translate(20vw, -30vh) scale(1.2); } }
}
.menu__bar { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; }
.menu__close { display: inline-flex; align-items: center; gap: .6rem; font: 500 .74rem/1 var(--font-display); letter-spacing: .22em; text-transform: uppercase; padding: .6rem .2rem .6rem .6rem; }
.menu__close i { font-size: 1.5rem; }
.menu__body { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 2rem; align-content: center; padding-block: 3rem; overflow: auto; }
.menu__nav { grid-column: 1 / 8; display: flex; flex-direction: column; gap: clamp(.9rem, 1.6vh, 1.4rem); }
.menu__voice { display: flex; align-items: baseline; gap: 1.25rem; font-family: var(--font-display); font-weight: 200; font-size: clamp(1.3rem, 2.2vw, 2rem); line-height: 1.15; color: var(--white); }
.menu__voice > span { display: inline-block; transition: transform .4s var(--ease); }
a.menu__voice:hover > span { transform: translateX(.6rem); }
.menu__voice small { font: 500 .66rem/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; opacity: .5; min-width: 2.2rem; flex: none; }
.menu__group:has(.menu__sub) .menu__voice { opacity: .75; }
.menu__sub { display: flex; flex-wrap: wrap; gap: .35rem 1.6rem; margin-top: .5rem; padding-left: 3.45rem; }
.menu__sub a { font: 400 .95rem/1.5 var(--font-body); color: rgba(255,255,255,.75); transition: color .3s var(--ease), transform .3s var(--ease); }
.menu__sub a:hover { color: var(--white); transform: translateX(3px); }
.menu__actions { display: flex; flex-direction: column; align-items: stretch; gap: .6rem; width: min(100%, 20rem); }
.menu__actions .cta { width: 100%; height: 48px; text-decoration: none; }
.menu__aside { grid-column: 9 / 13; display: flex; flex-direction: column; justify-content: center; gap: 2.25rem; border-left: 1px solid rgba(255,255,255,.18); padding-left: 2rem; }
.menu__aside .eyebrow { display: block; color: rgba(255,255,255,.65); margin-bottom: .75rem; }
.menu__aside div > a:not(.cta) { display: block; font-size: 1.05rem; line-height: 1.8; }
.menu__aside div > a:not(.cta) { color: rgba(255,255,255,.88); transition: color .3s var(--ease); }
.menu__aside div > a:not(.cta):hover { color: var(--white); }
.menu__social { display: flex; gap: 1rem; }
.menu__social a, .menu__aside .menu__social > a:not(.cta) { display: inline-grid; line-height: 1; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.35); font-size: 1.25rem; transition: background .3s var(--ease), color .3s var(--ease); }
.menu__social a:hover { background: var(--white); color: var(--teal); }
.menu__lang { display: flex; gap: 1rem; font: 500 .78rem/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; }
.menu__lang .is-active { border-bottom: 1px solid var(--white); padding-bottom: .25rem; }
.menu__aside .cta { align-self: flex-start; }
@media (prefers-reduced-motion: no-preference) {
  .menu__group { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .menu.is-open .menu__group { opacity: 1; transform: none; transition-delay: calc(.08s + var(--i, 0) * .045s); }
}
@media (max-width: 899px) {
  .menu__body { grid-template-columns: 1fr; align-content: start; row-gap: 2.5rem; }
  .menu__nav, .menu__aside { grid-column: 1 / -1; }
  .menu__aside { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.18); padding-top: 2rem; }
  .menu__voice { font-size: clamp(1.15rem, 4.4vw, 1.5rem); }
  .menu__sub { padding-left: 3.45rem; gap: .3rem 1.1rem; }
  .menu__nav { gap: .8rem; }
}
body.menu-open { overflow: hidden; }

/* =========================================================
   HERO: video a tutto schermo, uno slogan enorme al centro
   ========================================================= */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: 100dvh; display: grid; place-items: center; color: var(--white); text-align: center; padding: 370px 1.5rem 7rem; }
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
/* livello che segue il puntatore (js/interne.js): più largo del riquadro, così gli spostamenti non scoprono i bordi */
.hero__depth { position: absolute; inset: -4%; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,58,65,.45) 0%, rgba(15,58,65,.15) 40%, rgba(15,58,65,.25) 70%, rgba(15,58,65,.7) 100%); }
.hero__content { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; max-width: 1240px; }
.hero__brand { font: 400 .78rem/1 var(--font-display); letter-spacing: .38em; text-transform: uppercase; opacity: .9; }
.hero__slogan { font-family: var(--font-display); font-weight: 200; font-size: clamp(2.6rem, 5.9vw, 5.7rem); line-height: 1.02; letter-spacing: -.01em; }
.hero__line { display: block; }
@media (min-width: 900px) { .hero__line { white-space: nowrap; } }
.hero__slogan .w { display: inline-block; }
.hero__slogan .w--strong { font-weight: 400; }
.hero__cta { display: flex; flex-direction: column; align-items: center; gap: .9rem; margin-top: .5rem; }
.hero__note { font-family: var(--font-accent); font-weight: 300; font-size: 1rem; letter-spacing: .02em; opacity: .9; }
.hero__scroll { position: absolute; left: max(1.5rem, calc((100vw - var(--wrap)) / 2)); bottom: 2.25rem; display: flex; align-items: center; gap: 1rem; font: 500 .68rem/1 var(--font-display); letter-spacing: .28em; text-transform: uppercase; color: var(--white); }
.hero__scroll i { display: block; width: 1px; height: 56px; background: rgba(255,255,255,.6); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--white); transform-origin: top; animation: scrollLine 2.2s var(--ease) infinite; }
@keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__video { animation: heroIn 4.5s var(--ease) both; }
  @keyframes heroIn { from { transform: scale(1.12); } to { transform: scale(1); } }
  .hero__slogan .w { opacity: 0; transform: translateY(.45em); filter: blur(6px); animation: wordIn 1.1s var(--ease) both; animation-delay: calc(var(--intro) + var(--i, 0) * .09s); }
  @keyframes wordIn { to { opacity: 1; transform: none; filter: blur(0); } }
  .hero__brand, .hero__cta, .hero__scroll { opacity: 0; animation: rise 1.2s var(--ease) both; }
  .hero__brand { animation-delay: calc(var(--intro) - .15s); } .hero__cta { animation-delay: calc(var(--intro) + .9s); } .hero__scroll { animation-delay: calc(var(--intro) + 1.2s); }
  @keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 899px) { .hero { padding-top: 215px; padding-bottom: 6rem; } .hero__scroll { display: none; } }

/* =========================================================
   MANIFESTO: una frase grande, tanta aria
   ========================================================= */
.manifesto { background: var(--warm); padding-block: clamp(6rem, 14vw, 11rem); }
.manifesto__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; }
.manifesto__h1 { font-family: var(--font-display); font-weight: 100; font-size: clamp(2.6rem, 5.6vw, 5.2rem); line-height: 1; letter-spacing: -.015em; color: var(--ink); }
.manifesto__h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.15rem, 1.9vw, 1.65rem); line-height: 1.35; color: var(--taupe); max-width: 34ch; margin-bottom: 1.75rem; }
.manifesto__big { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.35rem, 2.4vw, 2.15rem); line-height: 1.35; color: var(--ink); max-width: 34ch; letter-spacing: -.005em; }
.manifesto__small { max-width: 52ch; color: var(--grey); font-size: 1.05rem; margin-top: .75rem; }

/* =========================================================
   PISCINA: foto pinnata, zoom-out, parole giganti in scorrimento
   ========================================================= */
.pool { background: var(--teal-deep); color: var(--white); }
.pool__stage { position: relative; min-height: 100vh; overflow: hidden; display: grid; align-items: end; }
.pool__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pool__stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,58,65,.15) 0%, rgba(15,58,65,0) 35%, rgba(15,58,65,.75) 100%); pointer-events: none; }
.pool__marquee { position: absolute; top: 24%; left: 0; translate: 0 -50%; display: flex; gap: .35em; white-space: nowrap; font-family: var(--font-display); font-weight: 100; font-size: clamp(3.5rem, 9vw, 9rem); line-height: 1; letter-spacing: -.02em; color: rgba(255,255,255,.9); z-index: 1; }
.pool__marquee span::after { content: "·"; margin-left: .35em; opacity: .5; }
.pool__panel { position: relative; z-index: 2; width: min(var(--wrap), 100% - 3rem); margin-inline: auto; padding-bottom: clamp(3rem, 6vw, 5rem); max-width: 100%; }
.pool__panel > * { max-width: 44ch; }
.pool__panel .eyebrow { color: rgba(255,255,255,.75); }
.h2--light { color: var(--white); }
.pool__text { color: rgba(255,255,255,.85); margin-bottom: 1.75rem; }
.pool__panel .link-arrow { color: var(--white); }

/* ---- cinematica hero / piscina (solo con animation-timeline) ---- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero__bg { animation: heroPar linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes heroPar { to { transform: translateY(18vh) scale(1.05); } }
    .hero__content { animation: heroFade linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
    @keyframes heroFade { to { opacity: 0; transform: translateY(-6vh); } }

    .pool__scroller { height: 260vh; view-timeline-name: --pool; view-timeline-axis: block; }
    .pool__stage { position: sticky; top: 0; height: 100vh; min-height: 0; }
    .pool__img { animation: poolZoom linear both; animation-timeline: --pool; animation-range: entry 0% exit 70%; }
    @keyframes poolZoom { from { transform: scale(1.3); } to { transform: scale(1); } }
    .pool__marquee { animation: marquee linear both; animation-timeline: --pool; animation-range: contain 0% contain 100%; }
    @keyframes marquee { from { transform: translateX(12vw); } to { transform: translateX(-62%); } }
    .pool__panel { animation: poolPanel linear both; animation-timeline: --pool; animation-range: contain 25% contain 55%; }
    @keyframes poolPanel { from { opacity: 0; transform: translateY(8vh); } to { opacity: 1; transform: none; } }
  }
}

/* =========================================================
   CAMERE: blocco petrolio, 3 tipologie in scorrimento orizzontale
   (per ogni camera: una foto grande, poi una foto più bassa con le info)
   ========================================================= */
.rooms { background: var(--teal-deep); color: var(--white); }
.rooms__stage { padding-block: clamp(5rem, 9vw, 8rem); }
.rooms__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.rooms__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; position: relative; z-index: 2; }
.rooms__text .eyebrow { color: rgba(255,255,255,.7); }
.rooms__lead { color: rgba(255,255,255,.82); margin-bottom: 1.75rem; max-width: 40ch; }
.rooms__text .link-arrow { color: var(--white); }
.rooms__count { display: flex; align-items: baseline; gap: .8rem; margin-top: 3rem; font-family: var(--font-display); font-weight: 200; font-size: 2.2rem; color: rgba(255,255,255,.9); }
.rooms__count-list { display: block; height: 1em; line-height: 1; overflow: hidden; }
.rooms__count-list b { display: block; font-weight: 200; height: 1em; }
.rooms__count i { display: block; width: 3rem; height: 1px; background: rgba(255,255,255,.5); align-self: center; }
.rooms__count > b { font-weight: 200; font-size: 1.1rem; opacity: .6; }
.rooms__viewport { overflow-x: auto; scrollbar-width: none; min-width: 0; container-type: inline-size; }
.rooms__viewport::-webkit-scrollbar { display: none; }
/* Dal 09/10/2026 (richiesta di Vincenzo): la foto principale è ORIZZONTALE, per far vedere la
   camera il più completa possibile. Foto larga e scheda affiancate non ci stavano nella colonna,
   quindi ogni camera è una colonna: foto 3:2 sopra, scheda + seconda foto sotto. Il markup è
   quello generato (figure e article fratelli nella pista): li impila la griglia a due righe con
   riempimento per colonne. --rw è la larghezza di una camera, --rg lo spazio fra le camere. */
.rooms__track { --rw: min(46vw, 700px, (100vh - 400px) * 1.5); --rg: clamp(1.25rem, 2.5vw, 2.25rem);
  display: grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: var(--rw);
  column-gap: var(--rg); row-gap: 1.25rem; align-items: start; width: max-content; }
.room { margin: 0; min-width: 0; }

/* foto grande, orizzontale */
.room--big { aspect-ratio: 3 / 2; overflow: hidden; background: var(--teal); }
.room--big img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.room--big:hover img { transform: scale(1.04); }

/* sotto: la scheda e, a destra, la seconda foto */
.room--info { display: flex; gap: clamp(1rem, 2vw, 1.75rem); align-items: flex-start; }
.room__card { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .7rem; }
.room__name { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.1; color: var(--white); }
.room__specs { display: flex; flex-direction: column; gap: .3rem; margin: 0; padding: .75rem 0; border-block: 1px solid rgba(255,255,255,.2); }
.room__specs > div { display: flex; gap: .6rem; align-items: baseline; }
.room__specs dt { font: 500 .68rem/1.5 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); flex: none; }
.room__specs dd { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: .95rem; color: var(--white); }
.room__desc { color: rgba(255,255,255,.8); font-size: .95rem; line-height: 1.5; }
.room__media { flex: none; width: 36%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--teal); }
.room__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.room--info:hover .room__media img { transform: scale(1.04); }

@media (max-width: 899px) {
  .rooms__grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .rooms__count { display: none; }
  .rooms__track { --rw: 84vw; }
  .room__media { display: none; } /* al telefono la colonna resta corta: la seconda foto è nella pagina Camere */
}

/* =========================================================
   DOVE SIAMO: fascia sabbia, foto a cavallo del bordo, contatori
   ========================================================= */
.where { background: var(--sand-pale); padding-block: 0 clamp(5rem, 9vw, 8rem); }
.where__grid { display: grid; grid-template-columns: 5fr 6fr; column-gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.where__media { aspect-ratio: 4 / 5; overflow: hidden; margin-top: clamp(-10rem, -12vw, -6rem); position: relative; z-index: 2; }
.where__media img { width: 100%; height: 100%; object-fit: cover; }
.where__text { padding-top: clamp(4rem, 8vw, 7rem); }
.where__text .link-arrow { color: var(--teal-deep); margin-top: .5rem; }
.lead { color: var(--grey); margin-bottom: 1.5rem; }
.counters { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2rem 2.5rem; margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid rgba(31,42,44,.14); }
.counters li { display: flex; flex-direction: column; gap: .3rem; }
.counters b { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 3.2vw, 3rem); line-height: 1; color: var(--ink); }
.counters li > span { font: 500 .72rem/1.4 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); }
@media (max-width: 899px) { .where__grid { grid-template-columns: 1fr; } .where__media { margin-top: -4rem; width: 78%; } .where__text { padding-top: 2.5rem; } }

/* =========================================================
   GUSTO: foto grande + scheda bianca sovrapposta all'angolo
   ========================================================= */
.taste { background: var(--warm); padding-block: clamp(5rem, 9vw, 8rem); }
.taste__head { max-width: 62ch; margin-bottom: clamp(3rem, 6vw, 5rem); }
.dish { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); align-items: end; color: inherit; margin-bottom: clamp(3rem, 6vw, 5rem); }
.dish__media { grid-column: 1 / 9; grid-row: 1; aspect-ratio: 16 / 10; overflow: hidden; }
.dish__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.dish:hover .dish__media img { transform: scale(1.04); }
.dish__card { grid-column: 8 / 13; grid-row: 1; background: var(--white); padding: clamp(1.75rem, 3vw, 2.75rem); margin-bottom: clamp(-3rem, -4vw, -2rem); position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.dish--rev .dish__media { grid-column: 5 / 13; }
.dish--rev .dish__card { grid-column: 1 / 6; }
.h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; color: var(--ink); }
.dish__card p { color: var(--grey); }
.dish__card .link-arrow { color: var(--teal); margin-top: .25rem; }
@media (max-width: 899px) { .dish__media, .dish--rev .dish__media { grid-column: 1 / -1; } .dish__card, .dish--rev .dish__card { grid-column: 2 / -1; margin-top: -3rem; margin-bottom: 0; grid-row: auto; } }

/* =========================================================
   RICCIONE: aerea a tutta pagina, frase sopra
   ========================================================= */
.riccione { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; display: grid; place-items: center; text-align: center; color: var(--white); padding: clamp(6rem, 12vw, 9rem) 1.5rem; }
.riccione__media { position: absolute; inset: -12% 0; z-index: -2; }
.riccione__media img { width: 100%; height: 100%; object-fit: cover; }
.riccione::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(15,58,65,.45); }
.riccione__content { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; max-width: 900px; }
.riccione__content .eyebrow { color: rgba(255,255,255,.75); }
.riccione__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: 1.02; letter-spacing: -.01em; }
.riccione__text { color: rgba(255,255,255,.88); max-width: 58ch; font-size: 1.05rem; }
.riccione__content .cta { margin-top: .5rem; }

/* =========================================================
   RECENSIONI + CHIUSURA
   ========================================================= */
.reviews { background: var(--warm); padding-block: clamp(5rem, 9vw, 8rem) clamp(2rem, 4vw, 3rem); text-align: center; }
.reviews .eyebrow { display: block; margin-bottom: 1rem; }
.reviews__title { margin-bottom: clamp(2rem, 4vw, 3rem); }
.reviews .ti-widget { margin-inline: auto; }
.closing { background: var(--warm); padding-block: clamp(3rem, 6vw, 5rem) clamp(6rem, 12vw, 10rem); }
.closing__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2.25rem; }
.closing__statement { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.8rem, 3.6vw, 3.3rem); line-height: 1.15; color: var(--ink); max-width: 26ch; }
.closing__statement b { font-weight: 400; }

/* =========================================================
   OFFERTE: blocco petrolio
   ========================================================= */
.offers { background: var(--teal-deep); color: var(--white); padding-block: clamp(5rem, 9vw, 8rem); }
.offers__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.offers__head .eyebrow { color: rgba(255,255,255,.7); }
.offers__head .h2 { max-width: 24ch; margin-bottom: 0; }
.offers__head .link-arrow { color: var(--white); flex: none; }
.offers__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem; }
.offer { display: block; color: inherit; }
.offer__media { aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 1.1rem; background: var(--teal); }
.offer__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.offer:hover .offer__media img { transform: scale(1.04); }
.offer h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.2; margin-bottom: .35rem; }
.offer p { color: rgba(255,255,255,.7); font-size: .95rem; }
@media (max-width: 899px) { .offers__head { flex-direction: column; align-items: flex-start; } .offers__grid { grid-template-columns: 1fr; } }

/* =========================================================
   FAQ
   ========================================================= */
.faq { background: var(--warm); padding-block: clamp(5rem, 9vw, 8rem); }
.faq__grid { display: grid; grid-template-columns: 4fr 7fr; column-gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq__head { position: sticky; top: 7rem; }
.faq__head .h2 { max-width: 12ch; }
.faq__item { border-top: 1px solid rgba(31,42,44,.14); }
.faq__item:last-child { border-bottom: 1px solid rgba(31,42,44,.14); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.25rem 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: var(--ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { flex: none; font-size: 1.1rem; color: var(--teal); transition: transform .4s var(--ease); }
.faq__item[open] summary i { transform: rotate(45deg); }
.faq__item p { padding: 0 3rem 1.5rem 0; color: var(--grey); }
@media (max-width: 899px) { .faq__grid { grid-template-columns: 1fr; } .faq__head { position: static; margin-bottom: 2rem; } }

/* =========================================================
   CONTATTI: foto + form a righe
   ========================================================= */
.contact { display: grid; grid-template-columns: 5fr 7fr; background: var(--white); }
.contact__photo { position: relative; min-height: 100%; display: grid; align-items: end; color: var(--white); isolation: isolate; }
.contact__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.contact__photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,58,65,.1), rgba(15,58,65,.8)); }
.contact__caption { padding: clamp(2rem, 4vw, 3.5rem); }
.contact__caption .eyebrow { color: rgba(255,255,255,.75); }
.contact__caption .h2 { margin-bottom: .5rem; font-size: clamp(1.8rem, 2.6vw, 2.6rem); }
.contact__sub { color: rgba(255,255,255,.85); }
.contact__form { padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 6vw, 6rem); }
/* àncora #info del sito di prima e posizione del salto: il form non finisce sotto l'header fisso */
.contact { position: relative; scroll-margin-top: 90px; }
.contact__anchor { position: absolute; top: 0; left: 0; scroll-margin-top: 90px; }
.mrp { min-height: 420px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font: 500 .7rem/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); }
.field input, .field textarea { border: 0; border-bottom: 1px solid rgba(31,42,44,.25); background: none; padding: .7rem 0; font: 400 1.05rem/1.4 var(--font-body); color: var(--ink); border-radius: 0; resize: vertical; transition: border-color .3s var(--ease); }
.field input:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--teal); }
.check { grid-column: 1 / -1; display: flex; gap: .75rem; align-items: flex-start; font-size: .9rem; color: var(--grey); }
.check input { margin-top: .3rem; accent-color: var(--teal); }
.check a { color: var(--teal); font-weight: 600; }
.check a:hover { color: var(--teal-dark); }
.form__actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.form__alt { display: inline-flex; align-items: center; gap: .5rem; color: var(--teal); font-weight: 600; font-size: .95rem; }
.form__alt i { font-size: 1.3rem; }
@media (max-width: 899px) { .contact { grid-template-columns: 1fr; } .contact__photo { min-height: 60vw; } .form { grid-template-columns: 1fr; } }

/* =========================================================
   NEWSLETTER: cielo a tutta larghezza, velo petrolio, titolo sottile
   ========================================================= */
.news { position: relative; isolation: isolate; overflow: hidden; color: var(--white); min-height: 80vh; display: grid; align-items: center; padding-block: clamp(5rem, 9vw, 8rem); }
.news__media { position: absolute; inset: -10% 0; z-index: -2; }
.news__media img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 35%; }
.news::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(15,58,65,.9) 0%, rgba(15,58,65,.7) 45%, rgba(15,58,65,.2) 100%); }
.news__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 3rem; }
.news .eyebrow { color: rgba(255,255,255,.7); }
.news__title { font-family: var(--font-display); font-weight: 100; font-size: clamp(2.4rem, 5.2vw, 4.8rem); line-height: 1.02; letter-spacing: -.01em; margin-bottom: 1.25rem; }
.news__title span { display: block; font-weight: 300; }
.news__sub { font-family: var(--font-accent); font-weight: 300; font-size: clamp(1.1rem, 1.5vw, 1.35rem); color: rgba(255,255,255,.85); }
.news__cta { justify-self: end; display: inline-flex; align-items: center; gap: 1.5rem; color: var(--white); }
.news__cta-label { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1; border-bottom: 1px solid rgba(255,255,255,.6); padding-bottom: .35rem; transition: border-color .4s var(--ease); }
.news__cta i { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; font-size: 1.4rem; transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease); }
.news__cta:hover .news__cta-label { border-color: var(--white); }
.news__cta:hover i { background: var(--white); color: var(--teal-deep); transform: translateX(6px); }
@media (max-width: 899px) { .news { min-height: 0; } .news__inner { grid-template-columns: 1fr; gap: 2rem; } .news__cta { justify-self: start; } }

/* ---- cinematica sezioni interne (solo con animation-timeline) ---- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @media (min-width: 900px) {
      .rooms__scroller { height: 300vh; view-timeline-name: --rooms; view-timeline-axis: block; }
      .rooms__stage { position: sticky; top: 0; height: 100vh; padding-block: clamp(4rem, 9vh, 5.5rem) 0; display: grid; align-items: center; } /* in alto lo spazio dell'header */
      .rooms__viewport { overflow: visible; clip-path: inset(0 -100vw 0 0); }
      .rooms__track { animation: roomsPan linear both; animation-timeline: --rooms; animation-range: contain 0% contain 88%; }
      /* la pista si ferma con la terza camera al bordo sinistro: le tre soste sono equidistanti */
      @keyframes roomsPan { from { transform: translateX(0); } to { transform: translateX(calc(-2 * (var(--rw) + var(--rg)))); } }

      .rooms__count-list b { animation: countStep linear both; animation-timeline: --rooms; animation-range: contain 0% contain 88%; }
      /* soste equidistanti (0, 50%, 100%): il numero cambia a metà strada fra una camera e l'altra */
      @keyframes countStep {
        0%, 25% { translate: 0 0; }
        25.1%, 75% { translate: 0 -100%; }
        75.1%, 100% { translate: 0 -200%; }
      }
      .rooms__scroller { height: 280vh; }
    }
    .where__media img { animation: rZoom linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .dish__media img { animation: rZoom linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .riccione__media img { animation: riccPar linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes riccPar { from { transform: translateY(-6%) scale(1.05); } to { transform: translateY(6%) scale(1.05); } }
    .contact__photo img { animation: rZoom linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .news__media img { animation: riccPar linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}

/* =========================================================
   MEDIA GALLERY (fallback senza animation-timeline)
   ========================================================= */
.gal { background: var(--teal-deep); color: var(--white); }
.gal__stage { position: relative; padding-block: clamp(4rem, 8vw, 7rem); }
.gal__title { text-align: center; margin-bottom: 3rem; position: relative; z-index: 3; }
.gal__title .h2 { color: var(--white); font-size: clamp(2.6rem, 6vw, 5.5rem); margin-bottom: .5rem; font-weight: 300; letter-spacing: .02em; }
.gal__title .sub { color: rgba(255,255,255,.75); }
.gal__layer { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; width: min(var(--wrap), 100% - 3rem); margin: 0 auto 1rem; }
.gal__item { display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--teal); box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
.gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.gal__item:hover img { transform: scale(1.05); }
.gal__end { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin: 3rem auto 0; width: min(var(--wrap), 100% - 3rem); position: relative; z-index: 3; }
.gal__end-title { font-family: var(--font-accent); font-weight: 200; font-size: clamp(1.8rem, 3.6vw, 3.4rem); line-height: 1.1; color: var(--white); }
.gal__bg { display: none; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { position: relative; isolation: isolate; overflow: hidden; background: var(--teal-deep); color: rgba(255,255,255,.82); font-size: .95rem; }
.footer__bg { position: absolute; inset: 0; z-index: -2; }
.footer__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; opacity: .45; }
.footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,58,65,.55) 0%, rgba(15,58,65,.85) 55%, var(--teal-deep) 100%); }
.footer a:hover { color: var(--white); }
.footer__top { display: grid; grid-template-columns: 4fr 4fr 4fr; column-gap: 3rem; row-gap: 3rem; padding-block: clamp(4rem, 8vw, 7rem) clamp(2rem, 4vw, 3rem); }
.footer__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.footer__logo { width: clamp(140px, 14vw, 190px); }
.footer__claim { font-family: var(--font-accent); font-weight: 300; font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.4; color: var(--white); max-width: 26ch; }
.footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 2rem; align-content: start; }
.footer__nav a { display: block; padding: .45rem 0; font-family: var(--font-display); font-weight: 300; font-size: .95rem; color: rgba(255,255,255,.85); border-bottom: 1px solid rgba(255,255,255,.1); transition: padding-left .3s var(--ease), color .3s var(--ease); }
.footer__nav a:hover { padding-left: .5rem; color: var(--white); }
.footer__contact { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.footer__big { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.4rem, 1.9vw, 1.8rem); line-height: 1.2; color: var(--white); transition: color .3s var(--ease); }
.footer__big:hover { color: var(--sand-pale); }
.footer__contact address { font-style: normal; line-height: 1.7; margin-top: .5rem; }
.footer__social { display: flex; gap: .75rem; margin-top: 1rem; }
.footer__social a { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.3); font-size: 1.25rem; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.footer__social a:hover { background: var(--white); color: var(--teal-deep); border-color: var(--white); }

/* la scritta gigante tagliata dal bordo */
.footer__word { position: relative; height: clamp(5rem, 12vw, 11rem); overflow: hidden; pointer-events: none; }
.footer__word span { position: absolute; left: 50%; top: 0; translate: -50% 0; white-space: nowrap; font-family: var(--font-display); font-size: clamp(6rem, 21vw, 21rem); line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.28); }

.footer__legal { position: relative; border-top: 1px solid rgba(255,255,255,.12); padding-block: 1.75rem 2rem; font-size: .82rem; line-height: 1.7; color: rgba(255,255,255,.6); background: rgba(15,58,65,.6); }
.footer__links { display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; margin-bottom: 1rem; }
.footer__links a { color: rgba(255,255,255,.8); }
/* popup della dichiarazione di accessibilità (Plugin NS): sta dentro il footer, quindi
   non deve ereditarne testo piccolo e link bianchi. Le variabili sono quelle di Elementor
   che il documento del plugin usa per i colori. */
.footer__links .nsacc-dialog { --e-global-color-primary: var(--teal); --e-global-color-text: var(--grey); font-size: 1rem; line-height: 1.6; text-align: left; }
.footer__links .nsacc-dialog a { color: var(--teal); }
.footer__links .nsacc-dialog a:hover { color: var(--teal-deep); }
.nsacc-document h1, .nsacc-document h2, .nsacc-document .nsacc-titolo { font-family: var(--font-display); font-weight: 400; line-height: 1.2; margin: 0 0 .6em; }
.nsacc-document h2 { margin-top: 1.4em; }
.nsacc-document p { margin: 0 0 1em; }
.footer__geo { color: var(--sand); }
.footer__company { margin-bottom: 1.25rem; }
.footer__credits { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.footer__ns { display: inline-flex; align-items: center; gap: .6rem; color: rgba(255,255,255,.8); }
.footer__ns .ns-logo { width: 22px; height: 22px; }
.footer__top-link { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.3); color: var(--white); font-size: 1.2rem; transition: background .3s var(--ease), color .3s var(--ease); }
.footer__top-link:hover { background: var(--white); color: var(--teal-deep); }
@media (max-width: 899px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__nav { grid-template-columns: 1fr; }
  .footer__credits { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   STICKY PRENOTA + WHATSAPP (desktop, in basso a destra)
   ========================================================= */

/* =========================================================
   STICKY PRENOTA + WHATSAPP (desktop) e BARRA MOBILE
   ========================================================= */
.floating { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 48; display: none; flex-direction: row; align-items: center; gap: 3px;
  opacity: 0; translate: 0 1.5rem; pointer-events: none; transition: opacity .5s var(--ease), translate .5s var(--ease); }
.floating.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.floating a { display: inline-flex; align-items: center; gap: .75rem; height: 54px; padding: 0 1.5rem 0 1.2rem; border-radius: 0; font: 600 .76rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--white);
  box-shadow: 0 18px 40px -18px rgba(15,58,65,.7); transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
.floating a i { font-size: 1.5rem; }
.floating a:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -18px rgba(15,58,65,.8); }
.floating__book { background: var(--teal); }
.floating__book:hover { background: var(--teal-dark); }
.floating .floating__wa { background: var(--white); color: var(--teal-deep); width: 54px; padding: 0 !important; justify-content: center; overflow: hidden; border-radius: 0; border: 1px solid rgba(15,58,65,.15); }
.floating__wa span { display: none; }
.floating .floating__quote { background: var(--white); color: var(--teal-deep); width: 54px; padding: 0 !important; justify-content: center; overflow: hidden; border: 1px solid rgba(15,58,65,.15); }
.floating__quote span { display: none; }
.floating .floating__quote:hover { background: var(--teal); color: var(--white); border-color: var(--teal); }
.floating .floating__wa:hover { background: var(--teal); color: var(--white); border-color: var(--teal); }
@media (min-width: 900px) { .floating { display: flex; } }
@media (prefers-reduced-motion: no-preference) {
  .floating.is-on .floating__book { animation: nudge 6s ease-in-out 3s infinite; }
  @keyframes nudge { 0%, 92%, 100% { transform: none; } 94% { transform: translateY(-4px); } 97% { transform: translateY(0); } }
}

/* =========================================================
   BARRA MOBILE
   ========================================================= */
.mobilebar { position: fixed; inset: auto 0 0 0; z-index: 45; display: none; grid-template-columns: 1fr auto auto auto; gap: .6rem; background: var(--white);
  box-shadow: 0 -1px 0 var(--line), 0 -12px 30px -20px rgba(15,58,65,.4); padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); }
.mobilebar .btn { height: 50px; }
.mobilebar .btn .btn__label { flex: 1; justify-content: center; }
.mobilebar__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); color: var(--teal); font-size: 1.35rem; }
@media (max-width: 899px) { .mobilebar { display: grid; } body { padding-bottom: 72px; } }

/* =========================================================
   LAYER CINEMATICO (solo con animation-timeline)
   ========================================================= */
.progress { display: none; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* reveal generici legati allo scroll: nessun JS */
    .r-up { animation: rUp linear both; animation-timeline: view(); animation-range: entry 5% entry 45%; }
    @keyframes rUp { from { opacity: 0; translate: 0 2.5rem; } to { opacity: 1; translate: 0 0; } }
    .r-wipe { animation: rWipe linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    @keyframes rWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
    .r-wipe-up { animation: rWipeUp linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    @keyframes rWipeUp { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
    .r-wipe img, .r-wipe-up img { animation: rZoom linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    @keyframes rZoom { from { scale: 1.18; } to { scale: 1; } }
    .r-mask > span { animation: rMask linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes rMask { from { translate: 0 110%; } to { translate: 0 0; } }

    @media (min-width: 900px) {
      .gal__scroller { height: 420vh; view-timeline-name: --gal; view-timeline-axis: block; }
      .gal__stage { position: sticky; top: 0; height: 100vh; padding: 0; overflow: hidden; }
      .gal__title { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; animation: galTitle linear both; animation-timeline: --gal; animation-range: contain 0% contain 30%; }
      @keyframes galTitle { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.3); filter: blur(6px); } }
      .gal__layer { position: absolute; inset: 0; display: block; width: auto; margin: 0; transform-origin: 50% 50%; will-change: transform, opacity; }
      .gal__item { position: absolute; width: 20vw; box-shadow: 0 60px 120px -40px rgba(0,0,0,.8); }
      .gal__item--1 { left: 8%; top: 10%; width: 19vw; }
      .gal__item--2 { right: 9%; top: 6%; width: 16vw; aspect-ratio: 1; }
      .gal__item--3 { left: 16%; bottom: 8%; width: 15vw; aspect-ratio: 3 / 2; }
      .gal__item--4 { right: 14%; bottom: 10%; width: 21vw; }
      .gal__layer--2 .gal__item--1 { left: 30%; top: 14%; }
      .gal__layer--2 .gal__item--4 { right: 28%; bottom: 12%; }
      .gal__layer--3 .gal__item--2 { right: 22%; top: 18%; }
      .gal__layer--3 .gal__item--3 { left: 6%; bottom: 20%; }
      .gal__layer--1 { animation: fly linear both; animation-timeline: --gal; animation-range: contain 0% contain 45%; }
      .gal__layer--2 { animation: fly linear both; animation-timeline: --gal; animation-range: contain 18% contain 68%; }
      .gal__layer--3 { animation: fly linear both; animation-timeline: --gal; animation-range: contain 40% contain 92%; }
      @keyframes fly { 0% { opacity: 0; transform: scale(.3); } 18% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; transform: scale(2.6); } }
      .gal__bg { display: block; position: absolute; inset: 0; z-index: 0; opacity: 0; animation: galBg linear both; animation-timeline: --gal; animation-range: contain 70% contain 92%; }
      .gal__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
      .gal__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,58,65,.05) 40%, rgba(15,58,65,.75) 100%); }
      @keyframes galBg { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
      .gal__layer { z-index: 1; }
      .gal__end { position: absolute; inset: auto 0 0 0; width: auto; margin: 0; padding: 0 max(1.5rem, calc((100vw - var(--wrap)) / 2)) clamp(2.5rem, 5vw, 4.5rem); z-index: 3; animation: galEnd linear both; animation-timeline: --gal; animation-range: contain 84% contain 100%; }
      @keyframes galEnd { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: none; } }
    }

    /* footer: foto che si avvicina, scritta che sale dal bordo */
    .footer__bg img { animation: footZoom linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes footZoom { from { transform: scale(1.15); } to { transform: scale(1); } }
    .footer__word span { animation: wordUp linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
}

/* =========================================================
   PAGINE INTERNE (dal 28/09/2026)
   Testi solo da assets/testi/testi_completi_Hotel Villa Mare.docx.
   Header, menu, offerte, form, newsletter e footer arrivano dalla home
   tramite tools/costruisci-pagine.py: qui solo i blocchi nuovi.
   ========================================================= */
ol { margin: 0; padding: 0; list-style: none; }
.menu a[aria-current="page"] { color: var(--sand-pale); }
.menu__sub a[aria-current="page"] { color: var(--white); }
.menu__sub a[aria-current="page"]::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: .55rem; vertical-align: middle; background: var(--sand); }
.footer__nav a[aria-current="page"] { color: var(--sand-pale); }

/* ---------- testata: foto a tutto schermo, titolo in basso ---------- */
.phero { position: relative; isolation: isolate; overflow: hidden; min-height: 92svh; display: grid; align-items: end; color: var(--white); padding: 360px 0 clamp(3rem, 6vw, 5rem); }
.phero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; }
.phero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,58,65,.6) 0%, rgba(15,58,65,.12) 36%, rgba(15,58,65,.22) 58%, rgba(15,58,65,.85) 100%); }
.phero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font: 500 .7rem/1.4 var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.crumbs li + li::before { content: "/"; margin-right: .9rem; opacity: .5; }
.crumbs a { transition: color .3s var(--ease); }
.crumbs a:hover { color: var(--white); }
.crumbs [aria-current] { color: var(--white); }
.phero__title { font-family: var(--font-display); font-weight: 200; font-size: clamp(3rem, 8vw, 7.4rem); line-height: .98; letter-spacing: -.02em; max-width: 14ch; }
.phero__sub { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.15rem, 2vw, 1.75rem); line-height: 1.3; max-width: 38ch; color: rgba(255,255,255,.92); }
@media (max-width: 899px) { .phero { padding-top: 215px; min-height: 82svh; } }
@media (prefers-reduced-motion: no-preference) {
  .phero__bg img { animation: heroIn 3.5s var(--ease) both; }
  .phero__inner > * { opacity: 0; animation: rise 1.1s var(--ease) both; }
  .phero__inner > :nth-child(1) { animation-delay: .15s; }
  .phero__inner > :nth-child(2) { animation-delay: .3s; }
  .phero__inner > :nth-child(3) { animation-delay: .5s; }
  @supports (animation-timeline: view()) {
    .phero__bg { animation: heroPar linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}

/* ---------- introduzione: una frase grande, il resto più piccolo e spostato ---------- */
.pintro { background: var(--warm); padding-block: clamp(5rem, 11vw, 9rem); }
.pintro__grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 2rem; row-gap: 2.25rem; }
.pintro .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.pintro__lead { grid-column: 1 / 11; font-family: var(--font-display); font-weight: 200; font-size: clamp(1.45rem, 2.7vw, 2.4rem); line-height: 1.3; color: var(--ink); letter-spacing: -.005em; }
.pintro__body { grid-column: 6 / 12; display: grid; gap: 1.1rem; font-size: 1.08rem; line-height: 1.75; }
@media (max-width: 899px) { .pintro__lead, .pintro__body { grid-column: 1 / -1; } }

/* ---------- testo + foto, alternati; la foto piccola si sovrappone all'angolo ---------- */
/* fasce foto + testo delle pagine interne (la home non le usa):
   foto alta che esce fino al bordo della finestra, con parallasse; scheda testo
   sovrapposta a cavallo del bordo della foto; numerazione 01, 02… solo se in pagina
   le fasce sono più d'una */
body { counter-reset: split; }
.split { --bg: var(--warm); --panel: var(--white); --bleed: calc((100vw - min(var(--wrap), 100vw - 3rem)) / 2);
  counter-increment: split; background: var(--bg); padding-block: clamp(4.5rem, 9vw, 8rem); overflow-x: clip; }
.split--sand { --bg: var(--sand-pale); }
.split--deep { --bg: var(--teal-deep); --panel: var(--teal); color: rgba(255,255,255,.86); }
.split--deep .h2 { color: var(--white); }
.split--deep .eyebrow { color: rgba(255,255,255,.7); }
.split__grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 2rem; align-items: end; }
.split__media { grid-column: 1 / 8; grid-row: 1; margin-left: calc(-1 * var(--bleed)); }
.split__text { grid-column: 7 / 13; grid-row: 1; position: relative; z-index: 1; margin-bottom: clamp(2.5rem, 7vw, 6rem);
  background: var(--panel); padding: clamp(2.25rem, 4vw, 3.75rem); box-shadow: var(--shadow); }
.split--rev .split__media { grid-column: 6 / 13; margin-left: 0; margin-right: calc(-1 * var(--bleed)); }
.split--rev .split__text { grid-column: 1 / 7; }
.split__img { position: relative; height: clamp(30rem, 86vh, 54rem); overflow: hidden; background: var(--teal); }
.split__img--wide { height: clamp(26rem, 72vh, 44rem); }
.split__img img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }
.split__text .h2 { font-size: clamp(1.9rem, 3vw, 2.8rem); }
.split__text p { font-size: 1.04rem; line-height: 1.75; }
.split__text p + p { margin-top: 1rem; }
.split__text .link-arrow, .split__text .cta { margin-top: 2rem; }
.split__text .link-arrow { color: var(--teal-deep); }
.split--deep .split__text .link-arrow { color: var(--white); }
/* numero di capitolo con filo: solo se la fascia ne ha altre prima o dopo */
.split:has(~ .split) .split__text::before, .split ~ .split .split__text::before {
  content: counter(split, decimal-leading-zero); display: block; width: max-content;
  font: 300 2.6rem/1 var(--font-display); letter-spacing: .02em; color: var(--sand);
  padding-bottom: 1rem; margin-bottom: 1.75rem;
  background: linear-gradient(currentColor, currentColor) left bottom / 2.5rem 1px no-repeat; }
.split--deep .split__text::before { color: rgba(255,255,255,.75); }
@media (max-width: 899px) {
  .split__media, .split--rev .split__media { grid-column: 1 / -1; grid-row: 1; margin-inline: -1.5rem; }
  .split__text, .split--rev .split__text { grid-column: 1 / -1; grid-row: 2; margin: -5rem .5rem 0; }
  .split__img, .split__img--wide { height: clamp(22rem, 105vw, 36rem); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .split .split__img img { animation: splitPar linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes splitPar { from { transform: translateY(-6%); } to { transform: translateY(6%); } }
  }
}

/* ---------- box in evidenza: blocco petrolio, eventualmente su foto ---------- */
.band { position: relative; isolation: isolate; overflow: hidden; background: var(--teal-deep); color: rgba(255,255,255,.86); padding-block: clamp(5rem, 10vw, 8.5rem); }
.band__bg { position: absolute; inset: -10% 0; z-index: -2; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; }
.band--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(15,58,65,.94) 0%, rgba(15,58,65,.82) 50%, rgba(15,58,65,.55) 100%); }
.band__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 6vw, 6rem); row-gap: 2rem; align-items: start; }
.band .h2 { color: var(--white); }
.band .eyebrow { color: rgba(255,255,255,.7); }
.band__text p { font-size: 1.1rem; line-height: 1.8; }
.band__text p + p { margin-top: 1rem; }
.band__text b { color: var(--white); font-weight: 600; }
.band__big { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1.35; color: var(--white); }
.band--sand { background: var(--sand-pale); color: var(--grey); }
.band--sand .h2 { color: var(--ink); } .band--sand .eyebrow { color: var(--sand); } .band--sand .band__text b { color: var(--ink); } .band--sand .band__big { color: var(--ink); }
@media (max-width: 899px) { .band__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
  .band__bg img { animation: riccPar linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
} }

/* distanze: nome a sinistra, misura grande a destra */
.dist li { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 2rem; row-gap: .2rem; align-items: baseline; padding: 1.15rem 0; border-top: 1px solid rgba(255,255,255,.16); }
.dist li:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.dist__name { font-family: var(--font-display); font-weight: 400; font-size: 1.08rem; color: var(--white); }
.dist__val { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.5rem, 2.5vw, 2.2rem); line-height: 1; color: var(--white); text-align: right; white-space: nowrap; }
.dist__note { grid-column: 1 / -1; font-size: .92rem; color: rgba(255,255,255,.62); }

/* ---------- come raggiungerci: tre schede ---------- */
.ways { background: var(--warm); padding-block: clamp(5rem, 9vw, 8rem); }
.ways__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem; margin-top: 1rem; }
.way { background: var(--white); padding: clamp(1.75rem, 3vw, 2.75rem); display: flex; flex-direction: column; gap: 1rem; }
.way > i { font-size: 2.2rem; color: var(--teal); }
.way h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; color: var(--ink); }
.way p { font-size: 1rem; line-height: 1.7; }
@media (max-width: 899px) { .ways__grid { grid-template-columns: 1fr; } }
.mapbox { background: var(--warm); padding-bottom: clamp(5rem, 9vw, 8rem); }
.mapbox iframe { display: block; width: 100%; height: min(62vh, 560px); border: 0; filter: grayscale(.35) contrast(1.04); }

/* ---------- capitoli senza foto (Cosa fare, Beach Village) ---------- */
.chap { --bg: var(--warm); background: var(--bg); padding-block: clamp(4.5rem, 9vw, 8rem); }
.chap--sand { --bg: var(--sand-pale); }
.chap--deep { --bg: var(--teal-deep); color: rgba(255,255,255,.85); }
.chap--deep .h2 { color: var(--white); } .chap--deep .eyebrow { color: rgba(255,255,255,.65); }
.chap__grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 2rem; row-gap: 1.5rem; align-items: start; }
.chap__head { grid-column: 1 / 6; }
.chap__head .h2 { margin-bottom: 0; }
.chap__text { grid-column: 7 / 13; }
.chap__text p { font-size: 1.1rem; line-height: 1.8; }
.chap__num { display: block; font: 500 .72rem/1 var(--font-display); letter-spacing: .24em; color: var(--sand); margin-bottom: 1.5rem; }
@media (max-width: 899px) { .chap__head, .chap__text { grid-column: 1 / -1; } }

/* ---------- camere: galleria a tre foto + scheda con tendina ---------- */
.rtypes { background: var(--warm); padding-bottom: clamp(3rem, 6vw, 5rem); }
.rtype { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 2rem; row-gap: 2.25rem; align-items: start; padding-block: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--line); }
.rtype__gallery { grid-column: 1 / 8; grid-row: 1; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: .75rem; aspect-ratio: 16 / 11; }
.rtype__gallery figure { overflow: hidden; background: var(--teal); }
.rtype__gallery figure:first-child { grid-row: 1 / 3; }
.rtype__gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.rtype__gallery figure:hover img { transform: scale(1.04); }
.rtype__info { grid-column: 9 / 13; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.rtype--rev .rtype__gallery { grid-column: 6 / 13; }
.rtype--rev .rtype__info { grid-column: 1 / 5; }
.rtype__name { font-family: var(--font-display); font-weight: 200; font-size: clamp(2.1rem, 3.6vw, 3.2rem); line-height: 1.04; color: var(--ink); }
.rtype__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; width: 100%; padding-block: .95rem; border-block: 1px solid var(--line); font: 500 .8rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); }
.rtype__meta .sep { width: 1px; height: 1.1em; background: var(--line); }
.rtype__people { display: inline-flex; align-items: center; gap: 1px; color: var(--teal); font-size: 1.25rem; }
.rtype__people b { font: 400 .9rem/1 var(--font-display); margin-inline: .2rem; }
.rtype__desc p { line-height: 1.75; }
.rtype__desc p + p { margin-top: .9rem; }
.acc { width: 100%; border-bottom: 1px solid var(--line); }
.acc summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; cursor: pointer; list-style: none; font: 500 .74rem/1.3 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--teal-deep); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary i { font-size: 1.1rem; color: var(--teal); transition: transform .4s var(--ease); }
.acc[open] summary i { transform: rotate(45deg); }
.acc ul { columns: 2; column-gap: 1.5rem; padding-bottom: 1.25rem; }
.acc li { break-inside: avoid; display: flex; gap: .6rem; padding: .22rem 0; font-size: .95rem; line-height: 1.45; }
.acc li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: .55em; background: var(--sand); }
@media (max-width: 899px) {
  .rtype__gallery, .rtype__info, .rtype--rev .rtype__gallery, .rtype--rev .rtype__info { grid-column: 1 / -1; grid-row: auto; }
  .acc ul { columns: 1; }
}

/* ---------- servizi: griglia a filo, le voci cliccabili si accendono ---------- */
.svc { background: var(--warm); padding-block: clamp(4.5rem, 9vw, 8rem); }
/* mosaico: box servizio e foto alternati, 4 colonne; le foto --wide prendono 2 colonne, le --tall 2 righe */
.svc__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-flow: dense; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.svc__item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem;
  padding: clamp(2rem, 3vw, 2.75rem) clamp(1.25rem, 2vw, 2rem) clamp(2.25rem, 3.4vw, 3rem); background: var(--warm); color: var(--grey);
  transition: background .45s var(--ease), color .45s var(--ease); }
.svc__ring { display: grid; place-items: center; padding: 80px; border: 1px solid rgba(33,108,120,.22); border-radius: 50%; margin-bottom: 1.4rem;
  transition: border-color .45s var(--ease), transform .6s var(--ease); }
.svc__icon { font-size: 3.4rem; line-height: 1; color: var(--teal); transition: color .45s var(--ease); }
.svc__item h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.28rem; line-height: 1.2; color: var(--ink); transition: color .45s var(--ease); }
.svc__item p { font-size: .98rem; line-height: 1.6; max-width: 26ch; }
.svc__go { margin-top: .6rem; font-size: 1.25rem; color: var(--sand); transition: transform .4s var(--ease), color .45s var(--ease); }
a.svc__item:hover { background: var(--teal-deep); color: rgba(255,255,255,.82); }
a.svc__item:hover h3, a.svc__item:hover .svc__icon, a.svc__item:hover .svc__go { color: var(--white); }
a.svc__item:hover .svc__ring { border-color: rgba(255,255,255,.35); transform: scale(1.04); }
a.svc__item:hover .svc__go { transform: translateX(5px); }
.svc__ph { position: relative; margin: 0; overflow: hidden; background: var(--teal); min-height: 22rem; }
.svc__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc__ph--wide { grid-column: span 2; }
.svc__ph--tall { grid-row: span 2; }
.svc__more { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; font-family: var(--font-display); font-weight: 200; font-size: clamp(1.6rem, 3vw, 2.6rem); color: var(--ink); }
@media (max-width: 1099px) { .svc__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 599px) {
  .svc__grid { grid-template-columns: 1fr; }
  .svc__ph--wide { grid-column: auto; } .svc__ph--tall { grid-row: auto; }
  .svc__ph { min-height: 0; aspect-ratio: 4 / 3; }
  .svc__ring { padding: 56px; }
}

/* ---------- media gallery: colonne sfalsate + visore ---------- */
.mgal { background: var(--teal-deep); padding-block: clamp(4rem, 8vw, 7rem); }
.mgal__grid { columns: 3; column-gap: 1rem; }
.mgal__item { display: block; width: 100%; margin: 0 0 1rem; overflow: hidden; break-inside: avoid; background: var(--teal); cursor: zoom-in; padding: 0; border: 0; }
.mgal__item img { width: 100%; height: auto; transition: transform 1.2s var(--ease), opacity .6s var(--ease); }
.mgal__item:hover img { transform: scale(1.04); }
@media (max-width: 899px) { .mgal__grid { columns: 2; column-gap: .6rem; } .mgal__item { margin-bottom: .6rem; } }
.lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8,32,36,.96); color: var(--white); }
.lb::backdrop { background: rgba(8,32,36,.96); }
.lb[open] { display: grid; place-items: center; }
.lb img { max-width: min(92vw, 1600px); max-height: 84vh; width: auto; height: auto; box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); }
.lb__btn { position: absolute; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(255,255,255,.35); color: var(--white); font-size: 1.4rem; transition: background .3s var(--ease), color .3s var(--ease); }
.lb__btn:hover { background: var(--white); color: var(--teal-deep); }
.lb__close { top: 1.25rem; right: 1.25rem; }
.lb__prev { left: 1.25rem; top: 50%; translate: 0 -50%; }
.lb__next { right: 1.25rem; top: 50%; translate: 0 -50%; }
.lb__count { position: absolute; bottom: 1.5rem; left: 50%; translate: -50% 0; font: 500 .72rem/1 var(--font-display); letter-spacing: .24em; color: rgba(255,255,255,.7); }
@media (max-width: 899px) { .lb__prev, .lb__next { top: auto; bottom: 1rem; translate: none; } .lb__count { bottom: 2.1rem; } }

/* ---------- offerte e newsletter come pagine ---------- */
.offers--page .offers__grid { margin-top: 0; }
/* iscrizione newsletter: form a righe come quello dei contatti, foto a destra */
.nlsub { display: grid; grid-template-columns: 7fr 5fr; background: var(--white); }
.nlsub__form { padding: clamp(3.5rem, 7vw, 7rem) clamp(1.5rem, 7vw, 7rem); align-self: center; }
.nlsub__photo { position: relative; min-height: 34rem; overflow: hidden; }
.nlsub__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.form--nl { margin-top: 2rem; }
.form__done { grid-column: 1 / -1; margin: 0; padding: 1.25rem 1.5rem; background: var(--teal); color: var(--white); font-size: .98rem; }
@media (max-width: 899px) { .nlsub { grid-template-columns: 1fr; } .nlsub__photo { min-height: 70vw; order: -1; } }

/* chiusure di pagina: frase lunga, frase a metà pagina, testo di contorno */
.closing--mid { padding-block: clamp(4rem, 8vw, 6.5rem); background: var(--warm); }
.closing__statement--long { font-size: clamp(1.6rem, 3vw, 2.7rem); max-width: 34ch; }
.closing .lead { margin: 0; text-align: center; max-width: 56ch; }

/* =====================================================================
   PISCINA PANORAMICA — pagina campione del nuovo linguaggio delle interne (06/10/2026)
   Ogni animazione è legata allo scroll (animation-timeline) e sta dentro
   @supports + prefers-reduced-motion: senza, si vede lo stato finale.
   ===================================================================== */

/* ---------- testata «finestra»: foto piena che si ritira in una finestra, titolo che si divide ----------
   Tre livelli sulla foto, uno per motore: .phx__photo (controscala allo scroll, CSS), .phx__depth
   (puntatore, GSAP), img (zoom d'arrivo, CSS). Il titolo si muove solo con translate: niente
   top/left animati, che ricalcolano l'impaginazione a ogni fotogramma e fanno scattare la scena. */
.phx { --lx: max(1.5rem, (100vw - var(--wrap)) / 2); --foot: clamp(3rem, 9vh, 6rem);
  position: relative; height: 270vh; background: var(--warm); view-timeline: --phx block; }
.phx__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; color: var(--white); }
.phx__frame { position: absolute; inset: 0; overflow: hidden; will-change: clip-path; }
.phx__photo { position: absolute; inset: 0; will-change: transform; }
.phx__depth { position: absolute; inset: -3%; }
.phx__depth img { width: 100%; height: 100%; object-fit: cover; }
.phx__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,58,65,.5) 0%, rgba(15,58,65,.05) 32%, rgba(15,58,65,.15) 55%, rgba(15,58,65,.78) 100%); }
.phx__top { position: absolute; left: 0; right: 0; top: clamp(7.5rem, 30vh, 15rem); z-index: 2; }
.phx__words { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* grandezza del titolo: la calcola costruisci-pagine.py dalla riga più lunga (--phx-fs, --phx-fs-m) */
.phx__title { font: 200 clamp(3rem, var(--phx-fs, 10.5vw), 10rem)/.9 var(--font-display); letter-spacing: -.045em; }
.phx__w { position: absolute; left: var(--lx); white-space: nowrap; will-change: transform; }
.phx__w--1 { top: calc(100vh - var(--foot) - 4.2rem - 1.8em); }
.phx__w--2 { top: calc(100vh - var(--foot) - 4.2rem - .9em); }
.phx__foot { position: absolute; left: 0; right: 0; bottom: var(--foot); z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.phx__sub { font: 300 clamp(1.1rem, 1.8vw, 1.6rem)/1.3 var(--font-display); color: rgba(255,255,255,.9); max-width: 34ch; }
.phx__cue { position: relative; flex: none; width: 1px; height: 84px; background: rgba(255,255,255,.3); overflow: hidden; }
.phx__cue span { position: absolute; inset: 0; background: var(--white); }
/* testata con più foto (.phx--slides): si danno il cambio in dissolvenza, ognuna con uno zoom lento;
   le fa girare js/interne.js (classe is-on), tre barre sottili dicono a che punto si è */
.phx--slides .phx__depth img.phx__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s cubic-bezier(.4, 0, .2, 1); }
.phx--slides .phx__depth img.phx__slide.is-on { opacity: 1; }
.phx__dots { display: flex; gap: .5rem; margin-left: auto; margin-right: 1.6rem; align-self: flex-end; }
.phx__dots i { position: relative; width: 2.6rem; height: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.phx__dots i::after { content: ""; position: absolute; inset: 0; background: var(--white); transform: scaleX(0); transform-origin: left; }
.phx__dots i.is-on::after { animation: phxDot var(--phx-slide, 6s) linear forwards; }
.phx__dots i.is-done::after { transform: scaleX(1); }
@keyframes phxDot { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  .phx--slides .phx__depth img.phx__slide.is-on { animation: phxKen 8s cubic-bezier(.2, 0, .3, 1) both; }
  @keyframes phxKen { from { transform: scale(1.14); } to { transform: scale(1.02); } }
}
.phx--one .phx__dots, .phx__foot .phx__dots { order: 2; } .phx__foot .phx__cue { order: 3; }

/* la finestra d'arrivo: margini dai bordi (desktop) */
.phx { --ft: 27vh; --fs: 13vw; --fb: 21vh; }
/* senza animazioni legate allo scroll: testata normale, a schermo pieno */
.phx { height: auto; } .phx__stage { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .phx__depth img { animation: phxIn 2.6s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes phxIn { from { transform: scale(1.12); } }
  .phx__cue span { animation: scrollLine 2.4s var(--ease) infinite; }
  @supports (animation-timeline: view()) {
    .phx { height: 270vh; } .phx__stage { position: sticky; }
    .phx__frame, .phx__photo, .phx__shade, .phx__w, .phx__top, .phx__foot { animation-timeline: --phx; animation-fill-mode: both; animation-timing-function: cubic-bezier(.37, 0, .25, 1); }
    /* la foto si ritira in una finestra… */
    .phx__frame { animation-name: phxFrame; animation-range: contain 0% contain 68%; }
    @keyframes phxFrame { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(var(--ft) var(--fs) var(--fb) var(--fs)); } }
    /* …mentre dentro si allarga appena in controscala (parallasse) */
    .phx__photo { animation-name: phxCounter; animation-range: contain 0% contain 68%; }
    @keyframes phxCounter { to { transform: scale(1.14) translateY(-4%); } }
    .phx__shade { animation-name: phxShade; animation-range: contain 0% contain 45%; animation-timing-function: linear; }
    @keyframes phxShade { to { opacity: 0; } }
    /* il titolo si divide, solo con translate: «Piscina» sopra la finestra a sinistra, «panoramica» sotto a destra */
    .phx__w--1 { animation-name: phxW1; animation-range: contain 3% contain 68%; }
    @keyframes phxW1 { to { color: var(--teal-deep);
      transform: translate(calc(var(--fs) - var(--lx)), calc(var(--ft) - 100vh + var(--foot) + 4.2rem + 1.02em)); } }
    .phx__w--2 { animation-name: phxW2; animation-range: contain 3% contain 68%; }
    @keyframes phxW2 { to { color: var(--teal-deep);
      transform: translate(calc(100vw - var(--fs) - var(--lx) - 100%), calc(100vh - var(--fb) - 100vh + var(--foot) + 4.2rem + .7em)); } }
    .phx__top, .phx__foot { animation-name: phxOut; animation-range: contain 0% contain 16%; animation-timing-function: linear; }
    @keyframes phxOut { to { opacity: 0; transform: translateY(-3vh); } }
    /* titolo di una parola sola: la parola scende sotto la finestra, il sottotitolo sale sopra */
    .phx--one .phx__foot { animation: none; }
    .phx--one .phx__cue { animation: phxOut linear both; animation-timeline: --phx; animation-range: contain 0% contain 16%; }
    .phx--one .phx__sub { animation: phxSub cubic-bezier(.37, 0, .25, 1) both; animation-timeline: --phx; animation-range: contain 3% contain 68%; }
    @keyframes phxSub { to { color: var(--teal-deep); transform: translate(calc(var(--fs) - var(--lx)), calc(var(--ft) - 1.6rem - 100vh + var(--foot))); } }
  }
}
@media (max-width: 899px) {
  .phx { --ft: 30vh; --fs: 6vw; --fb: 26vh; }
  .phx__title { font-size: min(5rem, var(--phx-fs-m, 15vw)); }
  .phx--one .phx__sub { max-width: 24ch; }
}

/* ---------- manifesto ---------- */
.pquote__more { max-width: 46ch; margin: clamp(2rem, 4vw, 3.5rem) auto 0; text-align: center; font: 300 clamp(1.15rem, 1.7vw, 1.5rem)/1.5 var(--font-display); color: var(--grey); }

/* ---------- manifesto: la frase si riempie di colore mentre la leggi ---------- */
.pquote { background: var(--warm); padding-block: clamp(6rem, 16vw, 13rem); }
.pquote__text { max-width: 26ch; margin-inline: auto; text-align: center; font: 300 clamp(2rem, 4.6vw, 4.4rem)/1.12 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
/* ---------- in cifre ---------- */
.pfacts { background: var(--teal-deep); color: var(--white); padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.pfacts__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.pfacts__item { padding: 0 clamp(1rem, 2.4vw, 2.5rem); border-left: 1px solid rgba(255,255,255,.18); }
.pfacts__item:first-child { border-left: 0; padding-left: 0; }
.pfacts__big { display: flex; align-items: center; gap: .5rem; min-height: 1.1em; font: 200 clamp(2.6rem, 5vw, 4.8rem)/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pfacts__big i { width: .4em; height: 1px; background: currentColor; opacity: .5; }
.pfacts__big span { white-space: nowrap; }
.pfacts__item:nth-child(2) .pfacts__big { font-size: clamp(1.9rem, 3.2vw, 3.2rem); min-height: calc(clamp(2.6rem, 5vw, 4.8rem) * 1); }
.pfacts__big--word { font-size: clamp(1.8rem, 2.8vw, 2.7rem); line-height: 1.05; min-height: calc(clamp(2.6rem, 5vw, 4.8rem) * 1); }
.pfacts__label { margin-top: 1.2rem; font: 500 .72rem/1.3 var(--font-display); letter-spacing: .24em; text-transform: uppercase; color: var(--sand); }
@media (max-width: 899px) {
  .pfacts__grid { grid-template-columns: 1fr 1fr; row-gap: 3rem; }
  .pfacts__item:nth-child(3) { border-left: 0; padding-left: 0; }
}

/* ---------- pannelli impilati ---------- */
.pstk { position: relative; background: var(--teal-deep); }
/* fondo pieno sul pannello: se la foto non è ancora arrivata (lazy), il pannello copre comunque quello sotto,
   invece di lasciar vedere foto, titolo e velo del precedente (07/10, pagina Offerte con 9 offerte) */
.pstk__panel { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; color: var(--white); isolation: isolate; background: var(--teal-deep);
  display: flex; align-items: flex-end; box-shadow: 0 -30px 60px -20px rgba(15,58,65,.45); }
.pstk__bg { position: absolute; inset: 0; z-index: -2; }
.pstk__bg img { width: 100%; height: 100%; object-fit: cover; }
.pstk__panel::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15,58,65,.35) 0%, rgba(15,58,65,0) 35%), linear-gradient(20deg, rgba(15,58,65,.92) 0%, rgba(15,58,65,.55) 38%, rgba(15,58,65,0) 70%); }
.pstk__text { padding-bottom: clamp(3rem, 10vh, 6.5rem); }
.pstk__num { display: flex; align-items: baseline; gap: .7rem; margin-bottom: 1.6rem; font: 200 clamp(2.4rem, 4vw, 3.6rem)/1 var(--font-display); }
.pstk__of { font-size: .9rem; letter-spacing: .2em; color: var(--sand); }
.pstk__of::before { content: "/ "; }
.pstk__title { max-width: 14ch; font: 200 clamp(2.6rem, 6.2vw, 6rem)/.98 var(--font-display); letter-spacing: -.03em; }
.pstk__body { max-width: 52ch; margin-top: 1.6rem; font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.75; color: rgba(255,255,255,.88); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .pstk__bg img { animation: pstkIn linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    @keyframes pstkIn { from { scale: 1.18; } to { scale: 1; } }
  }
}

/* ---------- nastro (lo muove fx.js; senza, gira in CSS) ---------- */
.pmarq { overflow: hidden; background: var(--warm); padding-block: clamp(2.5rem, 5vw, 4.5rem); border-block: 1px solid var(--line); }
.marquee-track { display: flex; width: max-content; }
.pmarq__half { display: flex; align-items: center; flex: none; }
.pmarq span { padding-inline: clamp(1.5rem, 3vw, 3rem); white-space: nowrap; font: 200 clamp(2.6rem, 7vw, 7rem)/1 var(--font-display); letter-spacing: -.035em; color: var(--teal-deep); }
.pmarq i { flex: none; width: clamp(.6rem, 1vw, .9rem); aspect-ratio: 1; border-radius: 50%; background: var(--sand); }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: pmarqLoop 40s linear infinite; }
  @keyframes pmarqLoop { to { transform: translateX(-50%); } }
}

/* ---------- chiusura su acqua animata ---------- */
.pwave { position: relative; overflow: hidden; isolation: isolate; background: var(--teal); color: var(--white); padding-block: clamp(6rem, 14vw, 11rem); text-align: center; }
.pwave__lines { position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 200%; height: 70%; z-index: -1; fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pwave__lines path { vector-effect: non-scaling-stroke; }
.pwave__inner { display: flex; flex-direction: column; align-items: center; }
.pwave__ask { font: 300 clamp(1.1rem, 1.6vw, 1.4rem)/1.4 var(--font-display); letter-spacing: .02em; color: rgba(255,255,255,.75); }
.pwave__answer { max-width: 24ch; margin: 1.4rem 0 2.6rem; font: 200 clamp(2rem, 4.4vw, 4rem)/1.1 var(--font-display); letter-spacing: -.02em; }
.pwave__answer b { font-weight: 400; }
@media (prefers-reduced-motion: no-preference) {
  .pwave__lines path { animation: pwaveDrift 18s linear infinite; }
  .pwave__lines path:nth-child(2) { animation-duration: 24s; animation-direction: reverse; }
  .pwave__lines path:nth-child(3) { animation-duration: 30s; }
  @keyframes pwaveDrift { to { transform: translateX(-720px); } }
}

@media (max-width: 899px) {
  .pstk__title { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .pstk__body { font-size: .98rem; line-height: 1.65; }
}

/* ---------- correzioni solo per le interne (body.interna): la home resta com'è ----------
   La foto del form contatti ha uno zoom allo scroll e usciva dal riquadro: a 390 px la pagina
   sforava di 35 px in orizzontale. overflow: clip non crea un contenitore di scorrimento,
   quindi la view-timeline della foto continua a funzionare. (La home ha lo stesso difetto.) */
.interna .contact__photo { overflow: clip; }
@media (max-width: 899px) {
  .pfacts__item { min-width: 0; }
  .pfacts__item:nth-child(2) .pfacts__big { font-size: clamp(1.4rem, 6.4vw, 2rem); }
}

/* ---------- cursore delle pagine interne (il punto è nel markup, lo muove js/interne.js) ---------- */
.cursor-dot { --gold: var(--teal); position: fixed; left: 0; top: 0; z-index: 9999; width: 10px; height: 10px; margin: -5px;
  border-radius: 50%; background: var(--teal); pointer-events: none; opacity: 0; mix-blend-mode: multiply;
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), opacity .3s, background-color .3s; }
.cursor-dot.is-on { opacity: 1; }
.cursor-dot.is-link { width: 46px; height: 46px; margin: -23px; background: rgba(33,108,120,.18); }
.cursor-dot.fx-label { margin: -46px; mix-blend-mode: normal;
  /* etichette su due righe («Camera doppia», «Guarda le foto»): centrate e dentro il cerchio.
     A sinistra in più lo spazio che la spaziatura delle lettere lascia dopo l'ultima lettera. */
  text-align: center; line-height: 1.45; padding: 0 .4rem 0 calc(.4rem + .22em); }


/* =====================================================================
   Form Network Service (tema WordPress): le classi nsfm__* del Plugin NS con la grafica
   del form del mockup (.form, .field, .check, .form__actions). Unica aggiunta al CSS del mockup.
   ===================================================================== */
.nsfm.form { display: block; }
.nsfm .nsfm__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
.nsfm .nsfm__field { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
.nsfm .nsfm__grid > .nsfm__field { grid-column: auto; }
.nsfm .nsfm__grid > .nsfm__field--c6 { grid-column: 1 / -1; }
.nsfm .nsfm__label { font: 500 .7rem/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); }
.nsfm .nsfm__req { display: none; }   /* il mockup non segna gli obbligatori */
.nsfm .nsfm__input { border: 0; border-bottom: 1px solid rgba(31,42,44,.25); background: none; padding: .7rem 0; font: 400 1.05rem/1.4 var(--font-body);
  color: var(--ink); border-radius: 0; box-shadow: none; resize: vertical; transition: border-color .3s var(--ease); width: 100%; }
.nsfm .nsfm__input:focus { outline: 0; border-bottom-color: var(--teal); }
.nsfm textarea.nsfm__input { min-height: 0; height: calc(1.4em * 3 + 1.4rem); }
.nsfm .nsfm__field--privacy { margin-top: 2rem; }
.nsfm .nsfm__check { display: flex; gap: .75rem; align-items: flex-start; font-size: .9rem; color: var(--grey); cursor: pointer; }
.nsfm .nsfm__check input { margin-top: .3rem; accent-color: var(--teal); position: static; opacity: 1; width: auto; height: auto; }
.nsfm .nsfm__check-box { display: none; }
.nsfm .nsfm__check a { color: var(--teal); font-weight: 600; text-decoration: none; }
.nsfm .nsfm__check a:hover { color: var(--teal-dark); }
.nsfm .nsfm__actions { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 2rem; }
.nsfm .nsfm__actions .nsfm__submit.cta { border: 0; border-radius: 0; cursor: pointer; background: var(--teal); color: var(--white); height: 46px; padding: 0 1.5rem;
  font: 500 .74rem/1 var(--font-display); letter-spacing: .22em; text-transform: uppercase; box-shadow: none; }
.nsfm .nsfm__actions .nsfm__submit.cta:hover { background: var(--teal-dark); }
.nsfm .nsfm__error { font-size: .8rem; color: #b3412e; min-height: 0; }
.nsfm .nsfm__message { margin-top: 1.5rem; }
@media (max-width: 899px) { .nsfm .nsfm__grid { grid-template-columns: 1fr; } }

/* Pulsanti con etichette lunghe (tedesco: «Entdecken Sie unsere Spezialitäten», 16/10/2026):
   sul telefono vanno a capo invece di allargare la colonna e far scorrere la pagina di lato.
   Quelli che stanno su una riga restano identici. */
@media (max-width: 600px) {
  .btn { max-width: 100%; height: auto; min-height: 54px; white-space: normal; }
  .btn > span { padding-block: .85rem; line-height: 1.35; min-width: 0; }
}