/* ==========================================================================
   Home di Una Villa Amalfi — impianto "dittico".
   Prova di redesign del 25/08/2026, vive solo su questa pagina.
   Le classi sono tutte prefissate `uvh-` per non incrociare mai il tema
   (`eltdf-`, `vc_`, `wpb_`) ne' le nostre di `site/stile.css` (`uv-`).
   Questa pagina NON carica i bundle del tema: nessun jQuery, nessun
   WPBakery, nessun Owl. Carica pero' `site/stile.css` dopo questo foglio,
   perche' li' vivono le regole del widget Octorate e del suo calendario
   (§13 di CLAUDE.md) — che qui servono identiche.
   ========================================================================== */

/* --- caratteri: gli stessi due file gia' sul server ----------------------- */
@font-face{
  font-family:'Josefin Sans';font-style:normal;font-weight:100 700;font-display:swap;
  src:url(/assets/vendor/fonts/josefin-sans-normal-latin.woff2?ver=1783262024) format('woff2');
}
@font-face{
  font-family:caviar_dreamsbold;font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/vendor/theme/assets/fonts/caviardreams_bold-webfont/caviardreams_bold-webfont.woff2) format('woff2');
}

/* --- il mondo -------------------------------------------------------------
   I neutri vengono dalle foto, non da una tavolozza generica: l'intonaco a
   calce delle pareti e la pietra tagliata del bordo piscina. Sono grigio-caldi
   chiarissimi, deliberatamente NON crema. Il colore satura lo porta la
   fotografia — il mare, i limoni, la ceramica di Vietri della colazione —
   e l'oro del marchio fa da unico accento costruito.
   -------------------------------------------------------------------------- */
:root{
  --ground:#f6f5f2;      /* intonaco a calce */
  --paper:#ffffff;
  --ink:#1b1a17;
  --ink-soft:#5a564d;
  --gold:#a59156;        /* marchio, fisso */
  --gold-deep:#7d6c3c;   /* testo piccolo in oro: il marchio non tiene 4.5:1 */
  /* Stessa tinta del marchio (H 45, S 31%), solo il 10% piu' scura: serve
     dove il bianco poggia sull'oro. Misurato: bianco su #a59156 da' 3.10:1,
     sotto il minimo di 4.5:1 per il testo piccolo; su #837445 da' 4.62:1.
     A occhio e' lo stesso oro. Il marchio #a59156 resta ovunque altrove. */
  --gold-ink:#837445;
  --pale:#f1ead9;
  --line:#e3e0d9;
  --shadow:0 18px 44px -22px rgba(27,26,23,.34);

  --gut:clamp(20px,4vw,40px);
  --col:1240px;
  --rythm:clamp(72px,10vw,132px);   /* respiro fra le sezioni */

  --label:.72rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:'Josefin Sans',-apple-system,'Segoe UI',sans-serif;
  font-size:1.0625rem;font-weight:300;line-height:1.75;letter-spacing:.012em;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{
  font-family:caviar_dreamsbold,'Josefin Sans',serif;font-weight:700;
  text-wrap:balance;margin:0;letter-spacing:.02em;line-height:1.18;
}
p{margin:0}

/* --- le superfici che non ho disegnato io, ma che spediscono lo stesso ---- */
::selection{background:var(--pale);color:var(--ink)}
:root{caret-color:var(--gold);accent-color:var(--gold)}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px;border-radius:2px}
a{text-underline-offset:.22em;text-decoration-thickness:1px}
@supports (scrollbar-color:auto){
  html{scrollbar-color:var(--gold) var(--ground);scrollbar-width:thin}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

.uvh-wrap{max-width:var(--col);margin:0 auto;padding-inline:var(--gut)}
.uvh-label{
  display:block;font-size:var(--label);font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);margin:0 0 .5em;
}
.uvh-skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--paper);color:var(--ink);padding:12px 20px;
}
.uvh-skip:focus{left:12px;top:12px}

/* --- testata ---------------------------------------------------------------
   Trasparente sopra la fotografia, si posa su fondo pieno appena si scorre.
   -------------------------------------------------------------------------- */
.uvh-top{
  position:fixed;inset:0 0 auto;z-index:40;
  transition:background .35s ease,box-shadow .35s ease;
}
/* Il fondo e la velatura devono arrivare ai bordi dello schermo: per questo
   la barra e' a piena larghezza e il contenuto sta in un contenitore interno
   centrato. Metterle sulla stessa scatola larga 1240px lasciava due strisce
   scoperte sui monitor larghi. */
.uvh-top__in{
  display:flex;align-items:center;gap:24px;
  max-width:var(--col);margin:0 auto;padding:18px var(--gut);
  transition:padding .35s ease;
}
.uvh-top::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(rgba(20,19,16,.46),rgba(20,19,16,0));
  transition:opacity .35s ease;
}
.uvh-top.is-set{background:var(--paper);box-shadow:0 1px 0 var(--line)}
.uvh-top.is-set .uvh-top__in{padding-block:11px}
.uvh-top.is-set::before{opacity:0}

.uvh-brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.uvh-brand img{height:38px;width:auto;transition:height .35s ease,filter .35s ease}
.uvh-top:not(.is-set) .uvh-brand img{filter:brightness(0) invert(1)}
.uvh-top.is-set .uvh-brand img{height:32px}
.uvh-brand span{
  font-family:caviar_dreamsbold,serif;font-weight:700;font-size:1.02rem;
  letter-spacing:.26em;text-transform:uppercase;color:#fff;transition:color .35s ease;
  white-space:nowrap;
}
.uvh-top.is-set .uvh-brand span{color:var(--ink)}

.uvh-nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px)}
.uvh-nav a{
  font-size:.86rem;letter-spacing:.15em;text-transform:uppercase;font-weight:400;
  text-decoration:none;color:#fff;padding-block:6px;position:relative;transition:color .35s ease;
}
.uvh-top.is-set .uvh-nav a{color:var(--ink)}
.uvh-nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
.uvh-nav a:hover::after,.uvh-nav a:focus-visible::after{transform:scaleX(1)}

.uvh-book{
  font-size:.8rem;letter-spacing:.17em;text-transform:uppercase;text-decoration:none;
  padding:11px 21px;background:var(--gold-ink);color:#fff;border:1px solid var(--gold-ink);
  transition:background .3s ease,color .3s ease;white-space:nowrap;
}
.uvh-book:hover,.uvh-book:focus-visible{background:transparent;color:var(--gold-ink)}
.uvh-top:not(.is-set) .uvh-book:hover,.uvh-top:not(.is-set) .uvh-book:focus-visible{color:#fff;border-color:#fff}

.uvh-burger{display:none;background:none;border:0;padding:8px;cursor:pointer;color:#fff}
.uvh-top.is-set .uvh-burger{color:var(--ink)}
.uvh-burger span{display:block;width:24px;height:1.5px;background:currentColor;margin:5px 0;transition:transform .3s ease,opacity .3s ease}
.uvh-top.is-nav .uvh-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.uvh-top.is-nav .uvh-burger span:nth-child(2){opacity:0}
.uvh-top.is-nav .uvh-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* --- la prima schermata ----------------------------------------------------
   Le tre fotografie orizzontali da 2000px sono le sole che reggano la piena
   larghezza: qui e' l'unico posto dove vanno. Dissolvenza lenta, ed e' il
   solo movimento autoriale della pagina — tutto il resto sta fermo.
   -------------------------------------------------------------------------- */
.uvh-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;isolation:isolate}
.uvh-hero__shots{position:absolute;inset:0;z-index:-2;background:var(--ink)}
.uvh-hero__shots img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s ease-in-out;
}
.uvh-hero__shots img.is-on{opacity:1}
.uvh-hero::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(18,17,14,.30) 0%,rgba(18,17,14,0) 34%,rgba(18,17,14,.20) 62%,rgba(18,17,14,.62) 100%);
}
.uvh-hero__say{
  max-width:var(--col);margin:0 auto;padding:0 var(--gut) clamp(150px,20vh,210px);
  width:100%;color:#fff;
}
.uvh-hero__say h2{
  font-size:clamp(2.5rem,7.4vw,5.4rem);line-height:1.02;letter-spacing:.01em;
  max-width:12ch;text-shadow:0 2px 26px rgba(0,0,0,.34);margin:0;
}
/* le tre didascalie stanno impilate nella stessa cella di griglia: l'altezza
   e' quella della piu' alta e non c'e' nessuno scatto quando si scambiano */
.uvh-hero__say h2{display:grid}
.uvh-hero__say h2 span{grid-area:1/1;opacity:0;transition:opacity 1.4s ease-in-out}
.uvh-hero__say h2 span.is-on{opacity:1}

/* piede della prima schermata: il modulo di ricerca appoggiato sul bordo */
.uvh-dock{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  max-width:var(--col);margin:0 auto;padding-inline:var(--gut);
  transform:translateY(38%);
}
.uvh-dock__panel{background:var(--paper);box-shadow:var(--shadow);padding:26px clamp(20px,3vw,40px) 8px}
.uvh-dock__say{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin:0 0 6px;padding-bottom:16px;border-bottom:1px solid var(--line);
}
.uvh-dock__say h2{font-size:1.28rem;letter-spacing:.055em}
.uvh-dock__say p{font-size:.94rem;color:var(--ink-soft);max-width:52ch}
/* Sotto i 900px il widget si nasconde, come sul sito attuale: da telefono si
   prenota da /booking/, dove il calendario e' una pagina di Octorate. */
.uvh-dock__form{min-height:120px}
.uvh-dock__mobile{display:none}

/* --- il dittico ------------------------------------------------------------
   La coppia e' l'impianto: una colonna di testo e un pannello fotografico che
   si scambiano di lato scendendo. Le foto del sito sono quasi tutte verticali
   da 650-800px: qui quel formato diventa la griglia invece di essere un
   limite, e nessuna immagine viene mai mostrata piu' grande di quanto regga.
   -------------------------------------------------------------------------- */
.uvh-dip{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(34px,6vw,88px);align-items:center;
  max-width:var(--col);margin:0 auto;padding:var(--rythm) var(--gut);
}
.uvh-dip--flip .uvh-dip__say{order:2}
/* Il pannello di ricerca sporge dal bordo della fotografia: la prima sezione
   dopo la testata gli fa posto con un margine dedicato, invece di sperare che
   il respiro normale basti. Sotto i 900px il pannello torna nel flusso e
   questo margine si azzera. */
.uvh-hero+.uvh-dip{padding-top:calc(var(--rythm) + 132px)}
.uvh-dip__say{max-width:62ch}
.uvh-dip__say h1,.uvh-dip__say h2{font-size:clamp(1.85rem,3.5vw,2.55rem);margin-bottom:.7em}
.uvh-dip__say p+p{margin-top:1.1em}
.uvh-dip__say p{color:var(--ink-soft)}
.uvh-more{
  display:inline-block;margin-top:2em;font-size:var(--label);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--gold);padding-bottom:5px;
  transition:color .3s ease,border-color .3s ease;
}
.uvh-more:hover,.uvh-more:focus-visible{color:var(--gold-deep)}

/* la firma dell'impianto: due verticali affiancate, la seconda scesa */
.uvh-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px);align-items:start}
.uvh-pair img{width:100%;aspect-ratio:800/1013;object-fit:cover}
.uvh-pair img:nth-child(2){margin-top:15%}
.uvh-solo img{width:100%;aspect-ratio:1000/802;object-fit:cover}

/* --- le tre voci -----------------------------------------------------------
   Sono citazioni letterarie, non recensioni: il respiro della pagina fra la
   colazione e le camere. Nessuna fotografia, apposta.
   -------------------------------------------------------------------------- */
.uvh-voices{background:var(--paper);border-block:1px solid var(--line)}
.uvh-voices__in{
  max-width:var(--col);margin:0 auto;padding:clamp(56px,7vw,86px) var(--gut);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,5vw,66px);
}
.uvh-voices figure{margin:0;display:flex;flex-direction:column;gap:18px}
.uvh-voices blockquote{
  margin:0;font-size:1.06rem;line-height:1.72;color:var(--ink);
  quotes:'\201C' '\201D';
}
.uvh-voices blockquote::before{content:open-quote;color:var(--gold);margin-right:.1em}
.uvh-voices blockquote::after{content:close-quote;color:var(--gold)}
.uvh-voices figcaption{
  font-size:var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
}
.uvh-voices figcaption b{font-weight:400;color:var(--ink);display:block;letter-spacing:.16em}

/* --- l'indice delle camere -------------------------------------------------
   Qui il ritmo del dittico si rompe di proposito: e' la risoluzione della
   pagina. Cinque colonne da ~230px, che e' esattamente la misura che le foto
   da 650px reggono su schermo retina.
   -------------------------------------------------------------------------- */
.uvh-rooms{max-width:var(--col);margin:0 auto;padding:0 var(--gut) var(--rythm)}
.uvh-rooms__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.8vw,24px);
}
.uvh-rooms__list a{display:block;text-decoration:none;color:inherit}
.uvh-rooms__list img{width:100%;aspect-ratio:650/1217;object-fit:cover;transition:opacity .4s ease}
.uvh-rooms__list a:hover img,.uvh-rooms__list a:focus-visible img{opacity:.86}
.uvh-rooms__name{
  display:block;margin:16px 0 3px;font-family:caviar_dreamsbold,serif;font-weight:700;
  font-size:.95rem;letter-spacing:.06em;line-height:1.35;
}
.uvh-rooms__data{
  display:block;font-size:.8rem;letter-spacing:.09em;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.uvh-rooms__data i{font-style:normal;color:var(--gold)}

/* --- piede ---------------------------------------------------------------- */
.uvh-foot{background:var(--paper);border-top:1px solid var(--line);padding:clamp(46px,6vw,68px) 0}
.uvh-foot__in{
  max-width:var(--col);margin:0 auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(26px,4vw,54px);
}
.uvh-foot p,.uvh-foot li{font-size:.9rem;color:var(--ink-soft);line-height:1.85}
.uvh-foot a{color:var(--ink-soft);text-decoration:none;transition:color .3s ease}
.uvh-foot a:hover,.uvh-foot a:focus-visible{color:var(--gold-deep)}
.uvh-foot ul{list-style:none;margin:0;padding:0}
.uvh-foot__mark{height:44px;width:auto;margin-bottom:18px}
.uvh-foot__legal{
  max-width:var(--col);margin:clamp(34px,4vw,46px) auto 0;padding-inline:var(--gut);
  padding-top:22px;border-top:1px solid var(--line);
  font-size:.8rem;color:var(--ink-soft);display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;
}
.uvh-foot__legal button{
  background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:.22em;
}

/* ==========================================================================
   Adattamenti. La soglia dei 900px e' la stessa del sito: sopra si prenota
   dal widget, sotto si passa da /booking/.
   ========================================================================== */
@media (max-width:1040px){
  .uvh-rooms__list{grid-template-columns:repeat(3,1fr)}
  .uvh-rooms__list li:nth-child(4),.uvh-rooms__list li:nth-child(5){grid-column:span 1}
}
@media (max-width:900px){
  .uvh-nav{
    position:fixed;inset:0 0 auto;transform:translateY(-102%);
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--paper);padding:86px var(--gut) 26px;
    transition:transform .42s cubic-bezier(.2,.7,.3,1);box-shadow:var(--shadow);
  }
  .uvh-top.is-nav .uvh-nav{transform:translateY(0)}
  .uvh-nav a,.uvh-top.is-set .uvh-nav a{color:var(--ink);font-size:1rem;padding:13px 0;width:100%;border-bottom:1px solid var(--line)}
  .uvh-nav a::after{display:none}
  .uvh-burger{display:block;order:3}
  .uvh-book{display:none}
  .uvh-hero+.uvh-dip{padding-top:var(--rythm)}
  .uvh-dock{position:static;transform:none;padding:0;margin-top:calc(var(--rythm) * -.4)}
  .uvh-dock__panel{padding:24px var(--gut) 26px}
  .uvh-dock__form{display:none}
  .uvh-dock__mobile{
    display:inline-block;margin-top:6px;background:var(--gold-ink);color:#fff;
    text-decoration:none;padding:14px 30px;font-size:.82rem;letter-spacing:.17em;text-transform:uppercase;
  }
  .uvh-hero{min-height:84svh}
  .uvh-hero__say{padding-bottom:clamp(56px,9vh,86px)}
  .uvh-dip{grid-template-columns:1fr;gap:34px}
  .uvh-dip--flip .uvh-dip__say{order:0}
  .uvh-voices__in{grid-template-columns:1fr;gap:34px}
  .uvh-voices figcaption{margin-top:0}
  .uvh-foot__in{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .uvh-rooms__list{grid-template-columns:repeat(2,1fr)}
  .uvh-pair img:nth-child(2){margin-top:9%}
  .uvh-foot__in{grid-template-columns:1fr}
  .uvh-brand span{font-size:.9rem;letter-spacing:.2em}
}