/* =========================================================================
   REAL ROOMS — Foglio di stile principale
   Design costiero elegante · mobile-first · accessibile
   Struttura:
   01 Token · 02 Reset · 03 Tipografia · 04 Layout · 05 Bottoni
   06 Header · 07 Hero · 08 Fiducia · 09 Camere · 10 Servizi
   11 Chi siamo · 12 Posizione · 13 Territorio · 14 Info pratiche
   15 Recensioni · 16 FAQ · 17 Form · 18 Footer · 19 Barre fisse
   20 Lightbox · 21 Pagine interne · 22 Guida · 23 Utility
   ====================================================================== */


/* =========================================================================
   01 · TOKEN
   ====================================================================== */

:root {
	/* Colori */
	--rr-ink:        #0F1E26;
	--rr-ink-soft:   #46595F;
	--rr-ink-faint:  #7C8C90;
	--rr-deep:       #0B2A38;
	--rr-deep-2:     #103544;
	--rr-sea:        #14556B;
	--rr-lagoon:     #4FA3B5;
	--rr-terracotta: #C05B3B;
	--rr-terracotta-d: #A44A2E;
	--rr-sand:       #E6D8C3;
	--rr-sand-soft:  #F3EADC;
	--rr-paper:      #FDFBF7;
	--rr-white:      #FFFFFF;
	--rr-wa:         #25D366;
	--rr-ok:         #1E7A4E;
	--rr-err:        #B3261E;

	--rr-line:       rgba(15, 30, 38, .12);
	--rr-line-soft:  rgba(15, 30, 38, .07);
	--rr-line-dark:  rgba(255, 255, 255, .16);

	/* Tipografia
	   Marcellus: grazie di origine lapidaria, un solo peso (400), pensato
	   per il maiuscolo. Jost: geometrico, aperto, buona resa in piccolo.
	   Jost ha un occhio medio contenuto: corpo e interlinea sono alzati
	   di conseguenza rispetto a un carattere più grande di natura. */
	--rr-display: "Marcellus", "Times New Roman", Georgia, serif;
	--rr-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Marcellus in maiuscolo è più largo del Cormorant: la scala scende
	   di conseguenza, altrimenti il titolo va a capo male sui telefoni. */
	--fs-hero:  clamp(2.5rem, 9.6vw, 6.4rem);
	--fs-h1:    clamp(1.85rem, 4.8vw, 3.1rem);
	--fs-h2:    clamp(1.5rem, 3.4vw, 2.35rem);
	--fs-h3:    clamp(1.15rem, 2.2vw, 1.45rem);
	--fs-lead:  clamp(1.08rem, 1.6vw, 1.28rem);
	--fs-body:  clamp(1.05rem, 1.01rem + 0.18vw, 1.125rem);
	--fs-sm:    0.9875rem;
	--fs-xs:    0.855rem;

	/* Spaziature */
	--s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
	--s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
	--s-12: 3rem;   --s-16: 4rem;   --s-20: 5rem;   --s-24: 6rem;

	/* Ritmo verticale.
	   Una pagina lunga si legge dal respiro fra le sezioni prima ancora che
	   dai contenuti: se lo spazio e' sempre lo stesso l'occhio non capisce
	   dove finisce un discorso e ne comincia un altro. Qui ci sono tre
	   misure — fra sezioni, dentro una sezione, fra un blocco e il suo
	   titolo — e ogni distanza del sito usa una di queste. */
	/* Ritmo verticale. I valori sono stati stretti di circa un terzo rispetto
	   alla prima stesura: su schermo grande 8,5rem fra due sezioni sono 136
	   pixel di vuoto, e il risultato era una pagina che si leggeva a strappi,
	   con i blocchi che sembravano non appartenersi. I rapporti fra i tre
	   livelli restano gli stessi, cambia la scala. */
	--sec-y:   clamp(3.25rem, 6vw, 5.75rem); /* fra una sezione e l'altra */
	--block-y: clamp(1.9rem, 3.4vw, 3rem);   /* fra blocchi nella stessa sezione */
	--head-y:  clamp(1.6rem, 2.6vw, 2.4rem); /* fra un titolo e il suo contenuto */

	/* Forme */
	--r-sm: 8px;
	--r-md: 14px;
	--r-lg: 22px;
	--r-xl: 32px;
	--r-pill: 999px;

	/* Ombre */
	--sh-1: 0 1px 2px rgba(11, 42, 56, .06), 0 2px 8px rgba(11, 42, 56, .05);
	--sh-2: 0 4px 12px rgba(11, 42, 56, .07), 0 12px 32px rgba(11, 42, 56, .07);
	--sh-3: 0 10px 24px rgba(11, 42, 56, .10), 0 28px 64px rgba(11, 42, 56, .12);

	--ease: cubic-bezier(.22, .61, .36, 1);

	--header-h: 72px;
}

@media (min-width: 1024px) {
	:root { --header-h: 84px; }
}


/* =========================================================================
   02 · RESET
   ====================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	background: var(--rr-paper);
	color: var(--rr-ink);
	font-family: var(--rr-body);
	font-size: var(--fs-body);
	line-height: 1.72;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--rr-sea); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rr-terracotta); }

button { font: inherit; color: inherit; }

ul, ol { margin: 0; padding: 0; }

figure, blockquote { margin: 0; }

iframe { border: 0; }

:focus-visible {
	outline: 3px solid var(--rr-lagoon);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection { background: var(--rr-sand); color: var(--rr-deep); }


/* =========================================================================
   03 · TIPOGRAFIA
   ====================================================================== */

h1, h2, h3, h4 {
	font-family: var(--rr-display);
	font-weight: 400;          /* Marcellus ha un solo peso */
	line-height: 1.16;
	letter-spacing: 0;
	margin: 0;
	color: var(--rr-deep);
	text-wrap: balance;
}

/* --- Maiuscoletto ------------------------------------------------------
   Marcellus nasce dalle capitali incise nella pietra: dà il meglio in
   maiuscolo, con una spaziatura fra le lettere più generosa del normale.
   Il maiuscolo si usa dove il testo è breve e fa da insegna — titoli di
   sezione, nomi delle strutture, intestazioni delle schede.

   Restano in tondo, di proposito:
     · i nomi delle camere, che sono lunghi e in maiuscolo diventerebbero
       muri di lettere ("MATRIMONIALE CON TERRAZZA GRANDE E LETTO...")
     · le domande delle FAQ, che sono frasi vere e vanno lette
     · tutti i testi correnti
   Il maiuscolo si legge più lentamente perché sparisce il profilo della
   parola: va usato per farsi guardare, non per farsi leggere.            */

.rr-hero__title,
.rr-sechead__title,
.rr-pagehero__title,
.rr-about__title,
.rr-enquiry__title,
.rr-404__title,
.rr-roomsingle__title,
.rr-room__title,
.rr-prop__name,
.rr-rooms__grouphead h3,
.rr-service__title,
.rr-arrive__title,
.rr-arrive__card h4,
.rr-season__title,
.rr-explore__card h3,
.rr-practical__item h3,
.rr-village h3,
.rr-itinerary h3,
.rr-move__card h3,
.rr-trail h3,
.rr-beach h3,
.rr-food__item h3,
.rr-location__subtitle,
.rr-related__title,
.rr-roomsingle__sub,
.rr-dronebox h3,
.rr-droneoffer h3,
.rr-cardbox h3 {
	text-transform: uppercase;
	letter-spacing: .085em;
	word-spacing: .06em;
}

/* --- Frasi brevi di contorno ------------------------------------------
   Elenchi di caratteristiche, distanze, dotazioni, vantaggi: sono etichette,
   non prosa. In maiuscolo spaziato diventano un fregio attorno al contenuto
   invece di sembrare testo da leggere. Il corpo scende un poco, perché le
   maiuscole occupano piu' spazio e pesano di piu' otticamente.            */

.rr-hero__facts li,
.rr-enquiry__perks li,
.rr-trust__points li span,
.rr-room__specs li,
.rr-room__amenities li,
.rr-distances li > span,
.rr-distances li > strong,
.rr-explore__villages strong,
.rr-village header span,
.rr-searchbar__note,
.rr-form__reassure,
.rr-review__meta,
.rr-actionbar__item span,
.rr-footer__list--plain strong,
.rr-prop__count,
.rr-season__tag,
.rr-droneoffer__tag,
.rr-itinerary__days,
.rr-room__tierlabel,
.rr-404__text,
.rr-dronecredit {
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 500;
}

/* Il maiuscolo ha bisogno di piu' interlinea: senza le lettere che scendono
   sotto la riga, due righe vicine sembrano attaccate. */
.rr-hero__facts li,
.rr-enquiry__perks li,
.rr-trust__points li span,
.rr-room__specs li,
.rr-distances li > span,
.rr-explore__villages strong,
.rr-footer__list--plain strong { line-height: 1.5; }

/* Le maiuscole vanno rimpicciolite per pareggiare il peso ottico. */
.rr-hero__facts li,
.rr-enquiry__perks li,
.rr-room__specs li,
.rr-distances li > span,
.rr-distances li > strong { font-size: .76rem; }

.rr-room__amenities li,
.rr-searchbar__note,
.rr-form__reassure,
.rr-review__meta { font-size: .74rem; letter-spacing: .11em; }

.rr-trust__points li span { font-size: .82rem; letter-spacing: .09em; }
.rr-explore__villages strong { font-size: .78rem; }
.rr-village header span { font-size: .72rem; }
/* Le etichette della barra fissa erano 0,62rem, cioe' 9,9 px su un telefono
   da 360: troppo piccole per l'elemento che su mobile e' la principale via di
   contatto. In maiuscolo, con la spaziatura fra lettere, si leggono anche piu'
   piccole di quanto siano. 0,72rem = 11,5 px e' il minimo ragionevole. */
.rr-actionbar__item span { font-size: .72rem; letter-spacing: .07em; }
.rr-footer__list--plain strong { font-size: .74rem; letter-spacing: .1em; }
.rr-dronecredit { font-size: .64rem; letter-spacing: .12em; }

/* Più il corpo è grande, meno spaziatura serve: a 6 rem una crenatura
   ampia quanto quella di un sottotitolo spezzerebbe la parola. */
.rr-hero__title { letter-spacing: .055em; }
.rr-pagehero__title,
.rr-sechead__title,
.rr-about__title,
.rr-enquiry__title,
.rr-404__title { letter-spacing: .065em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

small { font-size: var(--fs-xs); }

.rr-eyebrow {
	font-family: var(--rr-display);
	font-size: .82rem;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--rr-terracotta);
	margin: 0 0 var(--s-3);
}

.rr-sechead {
	max-width: 62ch;
	margin: 0 0 var(--head-y);
}
.rr-sechead--center { margin-inline: auto; text-align: center; }

.rr-sechead__title {
	font-size: var(--fs-h2);
	margin: 0 0 var(--s-4);
}

/* Filetto sotto l'occhiello: separa senza aggiungere rumore. */
.rr-sechead--center .rr-eyebrow::after {
	content: "";
	display: block;
	width: 34px;
	height: 1px;
	margin: .7rem auto 0;
	background: currentColor;
	opacity: .45;
}

.rr-sechead__intro {
	font-size: var(--fs-lead);
	color: var(--rr-ink-soft);
	line-height: 1.6;
}


/* =========================================================================
   04 · LAYOUT
   ====================================================================== */

.rr-container {
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.rr-container.rr-container--narrow { max-width: 800px; }  /* specificita' alzata: la regola base viene dopo */

.rr-section { padding-block: var(--sec-y); }

.rr-section--alt {
	background: var(--rr-sand-soft);
	border-block: 1px solid var(--rr-line-soft);
}

.rr-main { display: block; }


/* =========================================================================
   05 · BOTTONI
   ====================================================================== */

.rr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	padding: .82em 1.55em;
	border: 1.5px solid transparent;
	border-radius: var(--r-pill);
	font-family: var(--rr-body);
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	/* I pulsanti sono etichette brevi: in maiuscolo spaziato guadagnano
	   presenza senza bisogno del grassetto. */
	text-transform: uppercase;
	letter-spacing: .09em;
	transition: background-color .22s var(--ease), color .22s var(--ease),
	            border-color .22s var(--ease), transform .18s var(--ease),
	            box-shadow .22s var(--ease);
	white-space: nowrap;
}

.rr-btn:hover { transform: translateY(-1px); }
.rr-btn:active { transform: translateY(0); }

.rr-btn .rr-icon { flex: 0 0 auto; }

.rr-btn--primary {
	background: var(--rr-terracotta);
	border-color: var(--rr-terracotta);
	color: #fff;
	box-shadow: 0 2px 10px rgba(192, 91, 59, .28);
}
.rr-btn--primary:hover {
	background: var(--rr-terracotta-d);
	border-color: var(--rr-terracotta-d);
	color: #fff;
	box-shadow: 0 6px 20px rgba(192, 91, 59, .34);
}

.rr-btn--outline {
	background: transparent;
	border-color: var(--rr-line);
	color: var(--rr-deep);
}
.rr-btn--outline:hover {
	border-color: var(--rr-sea);
	background: var(--rr-sea);
	color: #fff;
}

.rr-btn--ghost {
	background: rgba(255,255,255,.08);
	border-color: var(--rr-line-dark);
	color: #fff;
}

.rr-btn--glass {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .38);
	color: #fff;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.rr-btn--glass:hover {
	background: rgba(255, 255, 255, .96);
	color: var(--rr-deep);
	border-color: #fff;
}

.rr-btn--wa {
	background: var(--rr-wa);
	border-color: var(--rr-wa);
	color: #06301A;
}
.rr-btn--wa:hover { background: #1FBE5B; border-color: #1FBE5B; color: #06301A; }

.rr-btn--sm { padding: .6em 1.15em; font-size: var(--fs-xs); }
.rr-btn--lg { padding: 1em 2em; font-size: 1rem; }
.rr-btn--block { width: 100%; }


/* =========================================================================
   06 · HEADER
   ====================================================================== */

.rr-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: .8rem 1.4rem;
	background: var(--rr-deep);
	color: #fff;
	border-radius: 0 0 var(--r-sm) 0;
	text-decoration: none;
}
.rr-skip:focus { left: 0; color: #fff; }

.rr-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 500;
	height: var(--header-h);
	display: flex;
	align-items: center;
	background: rgba(253, 251, 247, .82);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	border-bottom: 1px solid transparent;
	transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.rr-header.is-stuck {
	background: rgba(253, 251, 247, .96);
	border-bottom-color: var(--rr-line-soft);
	box-shadow: 0 1px 20px rgba(11, 42, 56, .06);
}

/* Header trasparente sopra l'hero della home.
   Una sfumatura scura appena accennata tiene leggibili logo e menu anche
   quando sotto capita una porzione di cielo chiaro. */
.rr-home .rr-header:not(.is-stuck) {
	background: linear-gradient(180deg, rgba(6,22,30,.58) 0%, rgba(6,22,30,.22) 60%, rgba(6,22,30,0) 100%);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.rr-home .rr-header:not(.is-stuck) .rr-brand__name strong,
.rr-home .rr-header:not(.is-stuck) .rr-brand__name em,
.rr-home .rr-header:not(.is-stuck) .rr-nav__list > li > a,
.rr-home .rr-header:not(.is-stuck) .rr-header__tel {
	text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.rr-home .rr-header:not(.is-stuck) .rr-brand__name strong,
.rr-home .rr-header:not(.is-stuck) .rr-nav__list > li > a,
.rr-home .rr-header:not(.is-stuck) .rr-header__tel,
.rr-home .rr-header:not(.is-stuck) .rr-lang__toggle { color: #fff; }
.rr-home .rr-header:not(.is-stuck) .rr-brand__name em { color: rgba(255,255,255,.72); }
.rr-home .rr-header:not(.is-stuck) .rr-brand__mark { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.3); }
.rr-home .rr-header:not(.is-stuck) .rr-burger__box span,
.rr-home .rr-header:not(.is-stuck) .rr-burger__box::before,
.rr-home .rr-header:not(.is-stuck) .rr-burger__box::after { background: #fff; }
.rr-home .rr-header:not(.is-stuck) .rr-lang__toggle { border-color: rgba(255,255,255,.32); }

.rr-header__spacer { height: var(--header-h); }
.rr-home .rr-header__spacer { display: none; }

.rr-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	width: 100%;
}

/* --- Marchio --- */
.rr-brand { flex: 0 0 auto; min-width: 0; }

.rr-brand__text {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	text-decoration: none;
}

.rr-brand__mark {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border: 1.5px solid var(--rr-line);
	border-radius: 50%;
	background: var(--rr-white);
	color: var(--rr-sea);
	font-family: var(--rr-display);
	font-size: 1.02rem;
	letter-spacing: .06em;
	transition: all .3s var(--ease);
}

.rr-brand__name { display: flex; flex-direction: column; line-height: 1.2; }
.rr-brand__name strong {
	font-family: var(--rr-display);
	font-size: 1.32rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--rr-deep);
}
.rr-brand__name em {
	font-style: normal;
	font-size: .62rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--rr-ink-faint);
	margin-top: 1px;
}

.custom-logo-link { display: block; line-height: 0; }
.custom-logo {
	max-height: 52px;
	width: auto;
	transition: filter .3s var(--ease);
}
/* Sopra la fotografia di apertura il logo riceve un'ombra morbida:
   evita che un marchio scuro sparisca su una zona scura dell'immagine. */
.rr-home .rr-header:not(.is-stuck) .custom-logo {
	filter: drop-shadow(0 1px 6px rgba(0,0,0,.55));
}

/* --- Navigazione --- */
.rr-nav__list {
	display: none;
	list-style: none;
	gap: clamp(1rem, 2vw, 2rem);
	align-items: center;
}

.rr-nav__list a {
	position: relative;
	display: inline-block;
	padding: .35rem 0;
	font-size: .875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--rr-ink);
	text-decoration: none;
	transition: color .2s var(--ease);
}

.rr-nav__list a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 1.5px;
	background: currentColor;
	transition: width .28s var(--ease);
}
.rr-nav__list a:hover::after,
.rr-nav__list .current-menu-item > a::after { width: 100%; }

.rr-nav__mobileextra { display: none; }

/* --- Azioni header --- */
/* Spaziatura dell'intestazione.
   Il gap originale era var(--s-2), mezzo centimetro scarso: numero di
   telefono e pulsante "Prenota" si toccavano quasi. Un primo tentativo a
   1,15rem non bastava ancora. Qui il numero e' staccato con un margine
   proprio, cosi' la distanza fra lui e il pulsante e' esplicita e non
   dipende dal gap comune a tutti gli elementi del gruppo. */
.rr-header__actions {
	display: flex;
	align-items: center;
	gap: clamp(.6rem, 1.2vw, 1rem);
	flex: 0 0 auto;
}
.rr-header__actions .rr-header__tel { margin-right: clamp(1rem, 2.6vw, 2.25rem); }

/* Il selettore lingua e' spinto a sinistra dal margine automatico e tenuto
   a distanza dal gruppo dei pulsanti. */
.rr-header__inner > .rr-lang {
	margin-left: auto;
	margin-right: clamp(1.1rem, 3vw, 2.5rem);
	flex: 0 0 auto;
}

.rr-header__tel {
	display: none;
	align-items: center;
	gap: .4rem;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--rr-deep);
	text-decoration: none;
	white-space: nowrap;
}
.rr-header__tel:hover { color: var(--rr-terracotta); }

.rr-header__actions .rr-btn--primary { display: none; }

/* --- Burger --- */
.rr-burger {
	display: inline-grid;
	place-items: center;
	width: 44px; height: 44px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}

.rr-burger__box { position: relative; width: 22px; height: 14px; display: block; }
.rr-burger__box span,
.rr-burger__box::before,
.rr-burger__box::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%; height: 1.8px;
	background: var(--rr-deep);
	border-radius: 2px;
	transition: transform .3s var(--ease), opacity .2s var(--ease), width .3s var(--ease);
}
.rr-burger__box::before { top: 0; }
.rr-burger__box span { top: 6.1px; width: 75%; }
.rr-burger__box::after { bottom: 0; }

.rr-burger[aria-expanded="true"] .rr-burger__box::before { transform: translateY(6.1px) rotate(45deg); }
.rr-burger[aria-expanded="true"] .rr-burger__box span { opacity: 0; width: 0; }
.rr-burger[aria-expanded="true"] .rr-burger__box::after { transform: translateY(-6.1px) rotate(-45deg); }

/* --- Selettore lingua --- */
.rr-lang { position: relative; }

.rr-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .42rem .6rem;
	background: none;
	border: 1.5px solid var(--rr-line);
	border-radius: var(--r-pill);
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--rr-deep);
	cursor: pointer;
	transition: all .2s var(--ease);
}
.rr-lang__toggle:hover { border-color: var(--rr-sea); }

.rr-lang__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 168px;
	list-style: none;
	padding: .4rem;
	background: var(--rr-white);
	border: 1px solid var(--rr-line-soft);
	border-radius: var(--r-md);
	box-shadow: var(--sh-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: all .22s var(--ease);
	z-index: 20;
}
.rr-lang.is-open .rr-lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }

.rr-lang__menu a {
	display: flex;
	align-items: baseline;
	gap: .55rem;
	padding: .5rem .7rem;
	border-radius: var(--r-sm);
	font-size: var(--fs-sm);
	color: var(--rr-ink);
	text-decoration: none;
}
.rr-lang__menu a:hover { background: var(--rr-sand-soft); color: var(--rr-deep); }
.rr-lang__menu a[aria-current="true"] { background: var(--rr-sand); font-weight: 600; }
.rr-lang__short { font-weight: 700; font-size: var(--fs-xs); letter-spacing: .06em; }
.rr-lang__label { color: var(--rr-ink-soft); }

/* TranslatePress: adegua il suo markup al tema */
.rr-lang--trp .trp-language-switcher > div { border-radius: var(--r-pill) !important; }

.rr-lang--footer .rr-lang__menu { top: auto; bottom: calc(100% + 8px); }

/* TranslatePress mette il proprio selettore lingua fisso in basso a destra,
   dove il tema ha la barra di azione rapida: su telefono i due si
   sovrapponevano e il selettore copriva il pulsante "Disponibilita".
   Qui viene sollevato sopra la barra. Con Polylang il problema non si pone,
   perche' il selettore e' quello del tema, nell'intestazione. */
@media (max-width: 1023px) {
	.trp-floater-ls, #trp-floater-ls, .trp_language_switcher_shortcode {
		bottom: calc(var(--actionbar-h, 62px) + env(safe-area-inset-bottom, 0px) + 12px) !important;
	}
}


/* --- Menu mobile aperto --- */
@media (max-width: 1023px) {
	/* Il menu copre TUTTO lo schermo, non solo la parte sotto l'intestazione.
	   Prima partiva da var(--header-h) e la striscia dell'header restava
	   visibile sopra: sembrava un pannello a meta' e su schermi corti le voci
	   non ci stavano. Ora inset: 0 e un pulsante di chiusura dedicato. */
	.rr-nav {
		position: fixed;
		inset: 0;
		background: var(--rr-paper);
		padding: calc(var(--header-h) + var(--s-4)) clamp(1.15rem, 5vw, 2rem) var(--s-16);
		overflow-y: auto;
		overscroll-behavior: contain;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px);
		transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
		z-index: 490;
	}
	.rr-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

	.rr-nav__close {
		position: absolute;
		top: calc((var(--header-h) - 44px) / 2);
		right: clamp(1.15rem, 5vw, 2rem);
		width: 44px; height: 44px;
		display: grid; place-items: center;
		background: none; border: 0; cursor: pointer;
		color: var(--rr-deep);
	}

	.rr-nav__list {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.rr-nav__list > li { border-bottom: 1px solid var(--rr-line-soft); }
	.rr-nav__list a {
		display: block;
		padding: 1.05rem .2rem;
		font-family: var(--rr-display);
		font-size: 1.28rem;
		text-transform: uppercase;
		letter-spacing: .1em;
		color: var(--rr-deep) !important;
	}
	.rr-nav__list a::after { display: none; }

	.rr-nav__mobileextra { display: block; margin-top: var(--s-8); }
	.rr-nav__mobileextra .rr-btn {
		background: var(--rr-deep);
		border-color: var(--rr-deep);
		color: #fff;
	}

	body.rr-navopen { overflow: hidden; }

	/* Con il menu aperto la barra fissa in basso e il selettore lingua
	   flottante di TranslatePress resterebbero sopra al pannello. */
	body.rr-navopen .rr-actionbar,
	body.rr-navopen .trp-floater-ls,
	body.rr-navopen #trp-floater-ls { display: none !important; }
}

@media (min-width: 1024px) {
	.rr-nav__list { display: flex; }
	.rr-burger { display: none; }
	.rr-nav__close { display: none; }
	.rr-header__tel { display: inline-flex; }
	.rr-header__actions .rr-btn--primary { display: inline-flex; }
}


/* =========================================================================
   07 · HERO
   ====================================================================== */

.rr-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-top: calc(var(--header-h) + var(--s-8));
	padding-bottom: var(--s-8);
	overflow: hidden;
	isolation: isolate;
}

.rr-hero__media { position: absolute; inset: 0; z-index: -2; }
.rr-hero__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Video di sfondo.
   Parte invisibile e compare in dissolvenza solo quando il browser è
   davvero in grado di riprodurlo: se qualcosa non va, resta la fotografia
   sotto e nessuno se ne accorge. */
.rr-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transition: opacity 1.1s var(--ease);
	pointer-events: none;
}
.rr-hero__video.is-playing { opacity: 1; }

/* Sotto i 900 px il video non viene nemmeno scaricato: pesa quanto tutto
   il resto della pagina e su rete mobile non vale il prezzo. */
@media (max-width: 899px) {
	.rr-hero__video { display: none !important; }
}

.rr-hero__fallback {
	width: 100%; height: 100%;
	background:
		radial-gradient(120% 90% at 20% 10%, #1E6A80 0%, transparent 60%),
		linear-gradient(160deg, #0B2A38 0%, #14556B 55%, #4FA3B5 100%);
}

/* Velo di lettura.
   Una sola sfumatura non basta: qui ne agiscono tre insieme — verticale
   per staccare testo e barra di ricerca, orizzontale per creare una zona
   scura sotto la colonna di testo, e un velo uniforme leggero. Su una
   fotografia chiara come un mare al sole è l'unico modo per garantire il
   contrasto minimo richiesto dalle linee guida di accessibilità. */
.rr-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg,
			rgba(6,22,30,.50) 0%,
			rgba(6,22,30,.08) 30%,
			rgba(6,22,30,.10) 50%,
			rgba(6,22,30,.48) 80%,
			rgba(6,22,30,.76) 100%),
		linear-gradient(100deg,
			rgba(6,22,30,.58) 0%,
			rgba(6,22,30,.30) 30%,
			rgba(6,22,30,.05) 55%,
			rgba(6,22,30,0) 70%);
}

/* Velo rinforzato: si usa quando lo sfondo è chiaro o in movimento.
   Una fotografia ha una luminosità sola; un video cambia per tutta la sua
   durata. Su questo filmato il drone sale e a metà entra il cielo: la fascia
   del menu passa da 0,16 a 0,70 di luminanza. Le soglie qui sotto derivano
   dal contrasto misurato su tutti e diciotto i fotogrammi, prendendo il
   novantacinquesimo percentile di ogni riquadro di testo — cioè le chiazze
   chiare che passano sotto le lettere, non la media della zona.
   Con il velo delle sole fotografie l'occhiello scendeva a 2,96:1;
   così sta a 5,06:1, sopra il minimo di 4,5:1 anche nel momento peggiore. */
.rr-hero--video .rr-hero__scrim,
.rr-hero--dim .rr-hero__scrim {
	background:
		linear-gradient(180deg,
			rgba(6,22,30,.10) 0%,
			rgba(6,22,30,0) 15%,
			rgba(6,22,30,0) 45%,
			rgba(6,22,30,.06) 75%,
			rgba(6,22,30,.14) 100%),
		linear-gradient(100deg,
			rgba(6,22,30,.20) 0%,
			rgba(6,22,30,.06) 30%,
			rgba(6,22,30,.03) 50%,
			rgba(6,22,30,0) 65%);
}

/* Il velo qui sopra è quasi inesistente, ed è una conseguenza diretta del
   pannello che sta dietro alle scritte (più sotto, .rr-hero__content::before).

   La storia di questo valore, in numeri misurati sulla fotografia:
     velo uniforme iniziale   → passava il 24% della luminosità dello scatto
     velo direzionale         → 46%
     velo minimo + pannello   → 83%

   Il salto arriva dall'aver separato i due problemi. Far leggere il testo e
   mostrare la fotografia sono richieste in conflitto solo finché si usa lo
   stesso strumento per entrambe: un velo che copre tutto deve spegnere
   anche il golfo e la città, dove non c'è scritto niente. Il pannello
   interviene solo sotto le quattro righe di testo, quindi il resto
   dell'immagine non paga nulla.

   Contrasto misurato dentro il pannello, sul quinto percentile (le chiazze
   chiare peggiori sotto le lettere, non la media della zona):
   occhiello 4,6:1 · titolo 6,3:1 · testo 7,1:1 · dati 5,9:1 · pulsanti 5,9:1.
   Tutto sopra il minimo di 4,5:1, e l'ombra del testo qui sotto aggiunge
   ulteriore margine. */
.rr-hero__eyebrow,
.rr-hero__title,
.rr-hero__text,
.rr-hero__facts li,
.rr-hero__scrolldown {
	text-shadow:
		0 1px 2px rgba(6,22,30,.42),
		0 2px 22px rgba(6,22,30,.55);
}

/* I pulsanti hanno un fondo proprio: l'ombra sul testo li sporcherebbe. */
.rr-hero__cta .rr-btn { text-shadow: none; }

/* L'intestazione è prima della sezione di apertura nel documento: la classe
   arriva dal body, non da un selettore fratello. */
.rr-hasvideo .rr-header:not(.is-stuck),
.rr-hasdim .rr-header:not(.is-stuck) {
	background: linear-gradient(180deg, rgba(6,22,30,.70) 0%, rgba(6,22,30,.34) 60%, rgba(6,22,30,0) 100%);
}

.rr-hero__content {
	color: #fff;
	padding-bottom: var(--s-10);
	position: relative;
	--pannello-x: clamp(1.3rem, 3vw, 2.4rem);   /* sporgenza laterale */
	--pannello-y: clamp(1.5rem, 3vw, 2.6rem);   /* sporgenza sopra */

	/* Larghezza della colonna di testo. Il pannello si ricava da questa,
	   non da un numero suo: se fossero indipendenti, basterebbe cambiare
	   una frase perché il testo sbordasse dal riquadro o ci ballasse
	   dentro. Qui la finestra è per costruzione la colonna più le due
	   sporgenze laterali. */
	--colonna: 44rem;
}

/* Tutto ciò che è largo si ferma alla colonna. Il titolo no: è una parola
   sola e la sua misura la decide il corpo del carattere. */
.rr-hero__facts,
.rr-hero__cta { max-width: var(--colonna); }

/* Il testo deve stare SOPRA il pannello, non sotto. */
.rr-hero__content > * { position: relative; z-index: 1; }

/* La finestra semitrasparente dietro le scritte.

   E' la soluzione giusta al problema "il testo si confonde con la foto",
   meglio del velo su tutta l'immagine: il velo per far leggere quattro
   righe doveva spegnere anche il golfo e la citta', dove non c'e' scritto
   niente. Il pannello agisce solo dove serve, quindi la fotografia intorno
   puo' restare luminosa.

   La sfocatura dello sfondo (backdrop-filter) fa il grosso del lavoro: non
   scurisce soltanto, cancella il DETTAGLIO sotto le lettere. E' il
   dettaglio che disturba la lettura, perche' i contorni dei palazzi
   competono con i contorni dei caratteri. Dove il browser non la
   supportasse, la regola @supports piu' sotto compensa con un fondo piu'
   coprente. */
.rr-hero__content::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: calc(-1 * var(--pannello-y));
	bottom: calc(var(--s-10) - var(--pannello-y) * .62);
	left: calc(var(--rr-gutter, clamp(1.15rem, 4vw, 2.5rem)) - var(--pannello-x));
	width: min(
		calc(var(--colonna) + var(--pannello-x) * 2),
		calc(100% - 2 * var(--rr-gutter, clamp(1.15rem, 4vw, 2.5rem)) + var(--pannello-x) * 2));
	border-radius: clamp(16px, 1.6vw, 26px);
	background:
		linear-gradient(135deg,
			rgba(8,26,35,.60) 0%,
			rgba(8,26,35,.48) 55%,
			rgba(8,26,35,.38) 100%);
	border: 1px solid rgba(255,255,255,.13);
	box-shadow:
		0 24px 64px rgba(4,16,22,.32),
		inset 0 1px 0 rgba(255,255,255,.07);
	backdrop-filter: blur(15px) saturate(115%);
	-webkit-backdrop-filter: blur(15px) saturate(115%);
	pointer-events: none;
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	.rr-hero__content::before {
		background: linear-gradient(135deg, rgba(8,26,35,.68), rgba(8,26,35,.56));
	}
}

/* Sugli schermi stretti il pannello arriva quasi a filo: a quella larghezza
   una cornice stretta sembrerebbe un errore di impaginazione. */
@media (max-width: 640px) {
	.rr-hero__content {
		--pannello-x: .9rem;
		--pannello-y: 1.2rem;
	}
	.rr-hero__content::before { border-radius: 14px; }
}

/* Chi ha chiesto meno trasparenze nel sistema operativo riceve un fondo
   pieno: la sfocatura e' anche un effetto di movimento percepito. */
@media (prefers-reduced-transparency: reduce) {
	.rr-hero__content::before {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: rgba(8,26,35,.74);
	}
}

.rr-hero__eyebrow {
	font-size: clamp(.78rem, 1.5vw, .95rem);
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255,255,255,.92);
	margin: 0 0 var(--s-4);
	text-shadow: 0 1px 12px rgba(0,0,0,.6);
}

.rr-hero__title {
	font-size: var(--fs-hero);
	line-height: 1.02;
	color: #fff;
	margin: 0 0 var(--s-5);
	text-shadow: 0 2px 4px rgba(0,0,0,.35), 0 8px 44px rgba(0,0,0,.5);
}

.rr-hero__text {
	max-width: min(52ch, var(--colonna, 44rem));
	font-size: var(--fs-lead);
	line-height: 1.65;
	color: #fff;
	margin: 0 0 var(--s-6);
	text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 2px 18px rgba(0,0,0,.55);
}

.rr-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3) var(--s-5);
	list-style: none;
	margin: 0 0 var(--s-8);
}
.rr-hero__facts li {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.rr-hero__facts .rr-icon { color: var(--rr-sand); }

.rr-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --- Barra ricerca --- */
.rr-searchbar { position: relative; z-index: 2; }

.rr-searchbar__form {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-3);
	padding: var(--s-4);
	background: rgba(253,251,247,.97);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-3);
}

.rr-searchbar__field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }

.rr-searchbar__field label {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .78rem;   /* era .7rem = 11,2 px: etichette di campi, vanno lette */
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rr-ink-faint);
}
.rr-searchbar__field label .rr-icon { color: var(--rr-sea); }

.rr-searchbar__field input,
.rr-searchbar__field select {
	width: 100%;
	padding: .7rem .8rem;
	border: 1.5px solid var(--rr-line);
	border-radius: var(--r-sm);
	background: var(--rr-white);
	font-family: inherit;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--rr-ink);
	transition: border-color .2s var(--ease);
}
.rr-searchbar__field input:focus,
.rr-searchbar__field select:focus { border-color: var(--rr-sea); }

.rr-searchbar__submit { align-self: end; padding-block: .85em; }

.rr-searchbar__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	margin: var(--s-3) 0 0;
	font-size: var(--fs-xs);
	color: #fff;
	text-align: center;
	text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.rr-searchbar__note .rr-icon { color: var(--rr-sand); flex: 0 0 auto; }

@media (min-width: 760px) {
	.rr-searchbar__form { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; }
}


/* =========================================================================
   08 · BARRA FIDUCIA
   ====================================================================== */

.rr-trust {
	background: var(--rr-deep);
	color: #fff;
	padding-block: clamp(2.25rem, 4vw, 3.25rem);
}

.rr-trust__inner {
	display: grid;
	gap: var(--s-6);
	align-items: center;
}

.rr-trust__score { text-align: center; }

.rr-trust__stars { display: flex; justify-content: center; gap: 2px; color: #F2B33D; margin-bottom: .3rem; }

.rr-trust__num {
	font-family: var(--rr-display);
	font-size: 2.9rem;
	line-height: 1;
	color: #fff;
	margin: 0;
}
.rr-trust__num small { font-size: 1.1rem; font-weight: 400; color: rgba(255,255,255,.6); }

.rr-trust__meta { font-size: var(--fs-xs); color: rgba(255,255,255,.72); margin: .25rem 0 0; }

.rr-trust__points {
	display: grid;
	gap: var(--s-4);
	list-style: none;
}
.rr-trust__points li {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	font-size: var(--fs-sm);
	line-height: 1.45;
	color: rgba(255,255,255,.9);
}
/* Le icone su fondo chiaro usano --rr-sea, non --rr-lagoon.
   Il lagoon (#4FA3B5) sul fondo carta da' 2,81:1, sotto la soglia di 3:1
   che le linee guida chiedono agli elementi grafici. Sono icone accompagnate
   da un'etichetta, quindi non e' un errore bloccante, ma a quel contrasto si
   perdono su uno schermo al sole o poco luminoso. Il sea da' 7,99:1.
   Nel footer, che ha fondo scuro, il lagoon resta: li' arriva a 5,16:1. */
.rr-trust__points .rr-icon { color: var(--rr-sea); flex: 0 0 auto; margin-top: 1px; }

@media (min-width: 760px) {
	.rr-trust__points { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-8); }
}
@media (min-width: 1024px) {
	.rr-trust__inner { grid-template-columns: auto 1fr; gap: var(--s-16); }
	.rr-trust__score {
		text-align: left;
		padding-right: var(--s-8);
		border-right: 1px solid var(--rr-line-dark);
	}
	.rr-trust__stars { justify-content: flex-start; }
}


/* =========================================================================
   08b · LE DUE STRUTTURE
   ====================================================================== */

.rr-props__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--s-6);
}

.rr-prop {
	display: flex;
	flex-direction: column;
	background: var(--rr-white);
	border: 1px solid var(--rr-line-soft);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-1);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.rr-prop:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }

.rr-prop__media { position: relative; }
.rr-prop__media img,
.rr-prop__media .rr-imgph {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0;
}

.rr-prop__count {
	text-transform: uppercase;
	letter-spacing: .09em;

	position: absolute;
	left: var(--s-4);
	bottom: var(--s-4);
	padding: .35rem .85rem;
	background: rgba(11, 42, 56, .86);
	backdrop-filter: blur(6px);
	color: #fff;
	border-radius: var(--r-pill);
	font-size: var(--fs-xs);
	font-weight: 600;
}

.rr-prop__body { padding: var(--s-6); display: flex; flex-direction: column; flex: 1; }

.rr-prop__name { font-size: 1.28rem; margin: 0 0 .3rem; }

.rr-prop__tagline { font-size: var(--fs-sm); color: var(--rr-ink-soft); margin: 0 0 var(--s-4); }

.rr-prop__addr {
	display: flex;
	align-items: flex-start;
	gap: .4rem;
	margin: 0 0 var(--s-5);
	font-size: var(--fs-xs);
	color: var(--rr-ink-faint);
	line-height: 1.5;
}
.rr-prop__addr .rr-icon { color: var(--rr-terracotta); flex: 0 0 auto; margin-top: 2px; }
.rr-prop__addr a { color: inherit; text-decoration: none; }
.rr-prop__addr a:hover { color: var(--rr-terracotta); text-decoration: underline; }

.rr-prop__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: auto; }

.rr-prop__ota { margin: var(--s-3) 0 0; }
.rr-prop__ota a {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: var(--fs-xs);
	color: var(--rr-ink-faint);
	text-decoration: none;
}
.rr-prop__ota a:hover { color: var(--rr-sea); text-decoration: underline; }

.rr-props__note {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: .45rem;
	max-width: 70ch;
	margin: var(--s-8) auto 0;
	font-size: var(--fs-xs);
	color: var(--rr-ink-faint);
	text-align: center;
	line-height: 1.55;
}
.rr-props__note .rr-icon { flex: 0 0 auto; margin-top: 2px; }


/* =========================================================================
   08c · CREDITO FOTO AEREE (GolfoDrone)
   ====================================================================== */

.rr-dronecredit {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	margin: .5rem 0 0;
	font-size: .7rem;
	letter-spacing: .04em;
	color: var(--rr-ink-faint);
}
.rr-dronecredit .rr-icon { opacity: .7; }
.rr-dronecredit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rr-dronecredit a:hover { color: var(--rr-terracotta); }

.rr-dronecredit--hero {
	position: absolute;
	right: clamp(1rem, 4vw, 2.5rem);
	bottom: 8px;
	z-index: 2;
	margin: 0;
	padding: .25rem .6rem;
	background: rgba(8, 26, 34, .42);
	backdrop-filter: blur(4px);
	border-radius: var(--r-pill);
	color: rgba(255, 255, 255, .74);
}
.rr-dronecredit--hero a { color: rgba(255, 255, 255, .92); }
.rr-dronecredit--hero a:hover { color: #fff; }

@media (max-width: 899px) {
	.rr-dronecredit--hero { display: none; }
}


/* =========================================================================
   09 · CAMERE
   ====================================================================== */

.rr-rooms__grouphead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .4rem var(--s-4);
	margin: var(--s-4) 0 var(--s-8);
	padding-bottom: var(--s-3);
	border-bottom: 2px solid var(--rr-sand);
}
.rr-rooms__grouphead:not(:first-of-type) { margin-top: calc(var(--sec-y) * .8); }
.rr-rooms__grouphead h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }
.rr-rooms__grouphead p { margin: 0; font-size: var(--fs-sm); color: var(--rr-ink-faint); flex: 1; }
.rr-rooms__ota {
	text-transform: uppercase;
	letter-spacing: .09em;

	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--rr-sea);
	text-decoration: none;
	white-space: nowrap;
}
.rr-rooms__ota:hover { color: var(--rr-terracotta); }

.rr-rooms { display: grid; gap: clamp(3rem, 6vw, 5.5rem); }

.rr-room {
	display: grid;
	gap: var(--s-6);
	align-items: center;
}

@media (min-width: 900px) {
	.rr-room { grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 4vw, 4rem); }
	.rr-room:nth-child(even) .rr-room__media { order: 2; }
}

/* --- Media --- */
.rr-room__media { position: relative; }

.rr-room__badge {
	text-transform: uppercase;
	letter-spacing: .09em;

	position: absolute;
	top: var(--s-4);
	left: var(--s-4);
	z-index: 3;
	padding: .4rem .9rem;
	background: var(--rr-terracotta);
	color: #fff;
	border-radius: var(--r-pill);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: .02em;
	box-shadow: 0 3px 12px rgba(192,91,59,.35);
}

.rr-room__single,
.rr-carousel__zoom {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	overflow: hidden;
	border-radius: var(--r-lg);
}

.rr-room__single img,
/* --- Formato verticale delle immagini camera --------------------------
   Gli scatti consegnati sono verticali 9:16, fatti col telefono. Portarli in
   un riquadro orizzontale 4:3 costringeva a scartare il 58% dell'immagine e,
   siccome il letto sta sempre nella meta' bassa, il riquadro si riempiva di
   muro: era esattamente il difetto che si vedeva sul sito.

   Con il riquadro verticale 3:4 dello stesso scatto si conserva il 75%, il
   soggetto entra intero, e su telefono - da dove arriva la maggior parte
   delle prenotazioni - l'immagine riempie lo schermo invece di ridursi a una
   fascia alta un terzo.                                                    */
.rr-carousel__zoom img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--r-lg);
	transition: transform .7s var(--ease);
}
.rr-room__single:hover img,
.rr-carousel__zoom:hover img { transform: scale(1.04); }

.rr-carousel__zoomicon {
	position: absolute;
	right: var(--s-3);
	bottom: var(--s-3);
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	background: rgba(11,42,56,.62);
	backdrop-filter: blur(6px);
	color: #fff;
	border-radius: 50%;
	opacity: 0;
	transform: scale(.9);
	transition: all .25s var(--ease);
}
.rr-room__single:hover .rr-carousel__zoomicon,
.rr-carousel__zoom:hover .rr-carousel__zoomicon { opacity: 1; transform: scale(1); }

/* --- Carosello --- */
.rr-carousel { position: relative; border-radius: var(--r-lg); overflow: hidden; }

.rr-carousel__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
}
.rr-carousel__track::-webkit-scrollbar { display: none; }

.rr-carousel__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	min-width: 0;
}

.rr-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 44px; height: 44px;   /* 42 era sotto il minimo per il tocco */
	background: rgba(253,251,247,.9);
	backdrop-filter: blur(8px);
	border: 0;
	border-radius: 50%;
	color: var(--rr-deep);
	cursor: pointer;
	box-shadow: var(--sh-1);
	opacity: 0;
	transition: opacity .25s var(--ease), background-color .2s var(--ease);
	z-index: 4;
}
.rr-carousel:hover .rr-carousel__nav,
.rr-carousel__nav:focus-visible { opacity: 1; }
.rr-carousel__nav:hover { background: #fff; }
.rr-carousel__nav--prev { left: var(--s-3); }
.rr-carousel__nav--next { right: var(--s-3); }
.rr-carousel__nav[disabled] { opacity: 0 !important; pointer-events: none; }

@media (hover: none) {
	.rr-carousel__nav { opacity: .92; }
}

.rr-carousel__dots {
	position: absolute;
	left: 50%;
	bottom: var(--s-3);
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	padding: 5px 9px;
	background: rgba(11,42,56,.42);
	backdrop-filter: blur(6px);
	border-radius: var(--r-pill);
	z-index: 4;
}
/* Il puntino resta di 6 px, ma l'area sensibile al dito e' molto piu' grande.
   Prima il bersaglio coincideva col disegno: sei pixel, impossibili da
   centrare su un telefono. Il riquadro trasparente creato da ::before porta
   l'area toccabile a 28x28 senza cambiare l'aspetto — piu' del minimo utile
   in una fila di puntini ravvicinati, dove 44 si sovrapporrebbero fra loro. */
.rr-carousel__dot {
	position: relative;
	width: 6px; height: 6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.5);
	cursor: pointer;
	transition: all .25s var(--ease);
}
.rr-carousel__dot::before {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 28px; height: 28px;
	transform: translate(-50%, -50%);
}
.rr-carousel__dot.is-active { background: #fff; width: 18px; border-radius: var(--r-pill); }

/* --- Corpo --- */
.rr-room__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-3);
	margin-bottom: var(--s-3);
}

.rr-room__title { font-size: var(--fs-h3); margin: 0; }

.rr-room__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; margin: 0; }

.rr-room__tier {
	font-family: var(--rr-display);
	font-size: 1.4rem;
	color: var(--rr-terracotta);
	letter-spacing: -.02em;
}
.rr-room__tierlabel {
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rr-ink-faint);
}
.rr-room__from {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--rr-sea);
}

.rr-room__specs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-4);
	list-style: none;
	margin: 0 0 var(--s-4);
	padding-bottom: var(--s-4);
	border-bottom: 1px solid var(--rr-line-soft);
}
.rr-room__specs li {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: var(--fs-sm);
	color: var(--rr-ink-soft);
}
.rr-room__specs .rr-icon { color: var(--rr-sea); }

.rr-room__text { color: var(--rr-ink-soft); margin-bottom: var(--s-5); }

.rr-room__amenities {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 0 0 var(--s-5);
}
.rr-room__amenities li {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .38rem .8rem;
	white-space: nowrap;
	background: var(--rr-sand-soft);
	border: 1px solid var(--rr-line-soft);
	border-radius: var(--r-pill);
	font-size: var(--fs-xs);
	color: var(--rr-ink-soft);
}
.rr-section--alt .rr-room__amenities li { background: var(--rr-white); }
.rr-room__amenities .rr-icon { color: var(--rr-sea); flex: 0 0 auto; }

.rr-room__note {
	display: flex;
	align-items: flex-start;
	gap: .45rem;
	margin: 0 0 var(--s-5);
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--rr-ink-faint);
}
.rr-room__note .rr-icon { flex: 0 0 auto; margin-top: 2px; }

.rr-room__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Il segnaposto segue il formato delle immagini vere: se restasse 4:3, in
   attesa del caricamento la pagina salterebbe di altezza a ogni foto. */
.rr-imgph {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 3 / 4;
	background: linear-gradient(135deg, var(--rr-sand-soft), var(--rr-sand));
	border-radius: var(--r-lg);
	color: var(--rr-ink-faint);
}
.rr-imgph--card { min-height: 240px; }

/* Elenco dotazioni esteso (pagina della singola camera) */
.rr-room__amenities--full {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: .5rem;
}
.rr-room__amenities--full li {
	justify-content: flex-start;
	padding: .5rem .8rem;
	border-radius: var(--r-sm);
	font-size: var(--fs-sm);
}


/* =========================================================================
   10 · SERVIZI
   ====================================================================== */

.rr-services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--s-5);
}

.rr-service {
	padding: var(--s-6);
	background: var(--rr-white);
	border: 1px solid var(--rr-line-soft);
	border-radius: var(--r-md);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.rr-service:hover {
	transform: translateY(-3px);
	box-shadow: var(--sh-2);
	border-color: transparent;
}

.rr-service__icon {
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	margin-bottom: var(--s-4);
	background: var(--rr-sand-soft);
	border-radius: var(--r-md);
	color: var(--rr-sea);
}

.rr-service__title { font-size: 1.04rem; margin: 0 0 var(--s-2); }

.rr-service__text { font-size: var(--fs-sm); color: var(--rr-ink-soft); line-height: 1.6; }


/* =========================================================================
   10b · RIQUADRO GOLFODRONE
   ====================================================================== */

/* --- Riquadro proposta riprese aeree --- */
.rr-droneoffer,
.rr-dronebox {
	display: grid;
	gap: 0;
	background: var(--rr-deep);
	color: rgba(255, 255, 255, .84);
	border-radius: var(--r-lg);
	overflow: hidden;
}
@media (min-width: 780px) {
	.rr-droneoffer,
	.rr-dronebox { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

.rr-droneoffer__media,
.rr-dronebox__media { min-height: 200px; }
.rr-droneoffer__media img,
.rr-dronebox__media img,
.rr-droneoffer__media .rr-imgph,
.rr-dronebox__media .rr-imgph {
	width: 100%; height: 100%;
	min-height: 200px;
	object-fit: cover;
	border-radius: 0;
	background: var(--rr-deep-2);
	color: rgba(255,255,255,.35);
}

.rr-droneoffer__body,
.rr-dronebox__body {
	padding: clamp(1.5rem, 4vw, 2.5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.rr-droneoffer h3,
.rr-dronebox h3 { color: #fff; font-size: clamp(1.15rem, 2.4vw, 1.55rem); margin: 0 0 var(--s-3); }

.rr-droneoffer p,
.rr-dronebox__text { font-size: var(--fs-sm); line-height: 1.65; color: rgba(255,255,255,.82); }
.rr-dronebox__text p { margin-bottom: .8em; }

.rr-dronebox .rr-eyebrow { color: var(--rr-sand); }

.rr-droneoffer__tag {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	align-self: flex-start;
	margin-bottom: var(--s-3);
	padding: .3rem .8rem;
	background: rgba(255,255,255,.1);
	border-radius: var(--r-pill);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--rr-sand);
}

.rr-droneoffer .rr-btn--outline,
.rr-dronebox .rr-btn--outline {
	align-self: flex-start;
	margin-top: var(--s-4);
	border-color: rgba(255,255,255,.32);
	color: #fff;
}
.rr-droneoffer .rr-btn--outline:hover,
.rr-dronebox .rr-btn--outline:hover { background: #fff; color: var(--rr-deep); border-color: #fff; }

.rr-dronebox { margin-top: var(--block-y); }
.rr-droneoffer { margin-top: var(--block-y); }


/* =========================================================================
   11 · CHI SIAMO
   ====================================================================== */

.rr-about__grid { display: grid; gap: var(--s-10); align-items: center; }

@media (min-width: 900px) {
	.rr-about__grid { grid-template-columns: 1fr 1.05fr; gap: clamp(2.5rem, 6vw, 5rem); }
}

.rr-about__media { position: relative; }

.rr-about__img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--r-xl) var(--r-xl) var(--r-xl) 60px;
	box-shadow: var(--sh-2);
}

.rr-about__stamp {
	position: absolute;
	right: -8px;
	bottom: -18px;
	display: grid;
	place-items: center;
	gap: 2px;
	width: 132px; height: 132px;
	padding: var(--s-3);
	background: var(--rr-deep);
	color: #fff;
	border-radius: 50%;
	text-align: center;
	box-shadow: var(--sh-3);
}
.rr-about__stampnum {
	font-family: var(--rr-display);
	font-size: 2.3rem;
	line-height: 1;
}
.rr-about__stamptxt { font-size: .66rem; line-height: 1.3; color: rgba(255,255,255,.78); }

.rr-about__title { font-size: var(--fs-h2); margin: 0 0 var(--s-5); }

.rr-about__text { color: var(--rr-ink-soft); font-size: var(--fs-lead); line-height: 1.7; margin-bottom: var(--s-6); }

.rr-about__points { list-style: none; display: grid; gap: var(--s-4); margin: 0 0 var(--s-8); }
.rr-about__points li { display: flex; gap: var(--s-3); }
.rr-about__points .rr-icon { color: var(--rr-terracotta); flex: 0 0 auto; margin-top: 3px; }
.rr-about__points strong { display: block; color: var(--rr-deep); font-size: var(--fs-sm); margin-bottom: 1px; }
.rr-about__points span { font-size: var(--fs-sm); color: var(--rr-ink-soft); line-height: 1.55; }


/* =========================================================================
   12 · POSIZIONE
   ====================================================================== */

.rr-location { display: grid; gap: var(--s-8); margin-bottom: var(--block-y); }

@media (min-width: 900px) {
	.rr-location { grid-template-columns: 1.15fr 1fr; gap: var(--s-10); align-items: start; }
}

.rr-location__map {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-2);
	background: var(--rr-white);
}
.rr-location__map iframe {
	width: 100%;
	height: clamp(280px, 42vw, 420px);
	display: block;
	filter: saturate(.85);
}

.rr-location__addr {
	display: flex;
	gap: var(--s-3);
	padding: var(--s-5);
	background: var(--rr-white);
	border-top: 1px solid var(--rr-line-soft);
}
.rr-location__addr .rr-icon { color: var(--rr-terracotta); flex: 0 0 auto; margin-top: 2px; }
.rr-location__addr strong { display: block; color: var(--rr-deep); font-size: var(--fs-sm); }
.rr-location__addr span { display: block; font-size: var(--fs-sm); color: var(--rr-ink-soft); margin-bottom: .3rem; }
.rr-location__addr a {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: var(--fs-xs);
	font-weight: 600;
	text-decoration: none;
}

.rr-location__subtitle {
	font-size: 1rem;
	margin: 0 0 var(--s-3);
	padding-bottom: var(--s-2);
	border-bottom: 1px solid var(--rr-line-soft);
}
.rr-location__panel > .rr-location__subtitle:not(:first-child) { margin-top: var(--s-8); }

.rr-distances { list-style: none; display: grid; gap: 1px; background: var(--rr-line-soft); border-radius: var(--r-sm); overflow: hidden; }
.rr-distances li {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .75rem .9rem;
	background: var(--rr-white);
	font-size: var(--fs-sm);
}
.rr-distances .rr-icon { color: var(--rr-sea); flex: 0 0 auto; }
.rr-distances li > span { flex: 1; color: var(--rr-ink-soft); }
.rr-distances li > strong { color: var(--rr-deep); font-weight: 600; white-space: nowrap; }
.rr-distances--train li { padding-left: 1.5rem; position: relative; }
.rr-distances--train li::before {
	content: "";
	position: absolute;
	left: .9rem; top: 50%;
	width: 5px; height: 5px;
	transform: translateY(-50%);
	background: var(--rr-lagoon);
	border-radius: 50%;
}

.rr-location__hint {
	display: flex;
	gap: .4rem;
	margin: var(--s-3) 0 0;
	font-size: var(--fs-xs);
	color: var(--rr-ink-faint);
	line-height: 1.5;
}
.rr-location__hint .rr-icon { flex: 0 0 auto; margin-top: 2px; }

/* --- Come arrivare --- */
.rr-arrive__title { font-size: var(--fs-h3); margin: 0 0 var(--s-8); text-align: center; }

.rr-arrive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--s-5);
}

.rr-arrive__card {
	padding: var(--s-6);
	background: var(--rr-white);
	border: 1px solid var(--rr-line-soft);
	border-radius: var(--r-md);
}
.rr-arrive__icon {
	display: grid; place-items: center;
	width: 46px; height: 46px;
	margin-bottom: var(--s-3);
	background: var(--rr-deep);
	color: #fff;
	border-radius: var(--r-sm);
}
.rr-arrive__card h4 { font-size: 1rem; margin: 0 0 var(--s-3); }
.rr-arrive__card ul { list-style: none; display: grid; gap: .6rem; }
.rr-arrive__card li {
	position: relative;
	padding-left: 1rem;
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--rr-ink-soft);
}
.rr-arrive__card li::before {
	content: "";
	position: absolute;
	left: 0; top: .6em;
	width: 5px; height: 1.5px;
	background: var(--rr-terracotta);
}


/* =========================================================================
   13 · TERRITORIO
   ====================================================================== */

.rr-explore__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--s-5);
	margin-bottom: var(--block-y);
}

.rr-explore__card {
	padding: var(--s-6);
	background: var(--rr-sand-soft);
	border-radius: var(--r-md);
	border: 1px solid var(--rr-line-soft);
}
.rr-section--alt .rr-explore__card { background: var(--rr-white); }

.rr-explore__card--wide { grid-column: 1 / -1; }
@media (min-width: 900px) {
	.rr-explore__card--wide { grid-column: span 2; }
}

.rr-explore__icon {
	display: inline-grid; place-items: center;
	width: 46px; height: 46px;
	margin-bottom: var(--s-3);
	background: var(--rr-white);
	border-radius: var(--r-sm);
	color: var(--rr-sea);
	box-shadow: var(--sh-1);
}
.rr-section--alt .rr-explore__icon { background: var(--rr-sand-soft); box-shadow: none; }

.rr-explore__card h3 { font-size: 1.08rem; margin: 0 0 var(--s-2); }
.rr-explore__card p { font-size: var(--fs-sm); color: var(--rr-ink-soft); line-height: 1.6; }

.rr-explore__villages {
	list-style: none;
	display: grid;
	gap: .55rem;
	margin-top: var(--s-4);
	padding-top: var(--s-4);
	border-top: 1px solid var(--rr-line-soft);
}
.rr-explore__villages li { display: flex; flex-wrap: wrap; gap: .2rem .6rem; font-size: var(--fs-sm); }
.rr-explore__villages strong { color: var(--rr-deep); min-width: 108px; }
.rr-explore__villages span { color: var(--rr-ink-faint); }

.rr-cardbox {
	margin-top: var(--block-y);   /* stacca dal riquadro precedente */
	display: flex;
	gap: var(--s-5);
	padding: var(--s-6);
	background: var(--rr-deep);
	color: #fff;
	border-radius: var(--r-lg);
}
.rr-cardbox__icon {
	display: grid; place-items: center;
	flex: 0 0 auto;
	width: 54px; height: 54px;
	background: rgba(255,255,255,.1);
	border-radius: var(--r-sm);
	color: var(--rr-sand);
}
.rr-cardbox h3 { color: #fff; font-size: 1.14rem; margin: 0 0 var(--s-2); }
.rr-cardbox p { font-size: var(--fs-sm); color: rgba(255,255,255,.82); line-height: 1.6; }
.rr-cardbox__note {
	display: flex; gap: .4rem;
	font-size: var(--fs-xs) !important;
	color: rgba(255,255,255,.66) !important;
}
.rr-cardbox__note .rr-icon { flex: 0 0 auto; margin-top: 2px; }
.rr-cardbox .rr-btn--outline { border-color: rgba(255,255,255,.32); color: #fff; margin-top: var(--s-3); }
.rr-cardbox .rr-btn--outline:hover { background: #fff; color: var(--rr-deep); border-color: #fff; }

@media (max-width: 599px) {
	.rr-cardbox { flex-direction: column; gap: var(--s-4); }
}

.rr-explore__more { text-align: center; margin: var(--block-y) 0 0; }


/* =========================================================================
   14 · INFO PRATICHE
   ====================================================================== */

.rr-practical {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	gap: 1px;
	background: var(--rr-line-soft);
	border: 1px solid var(--rr-line-soft);
	border-radius: var(--r-md);
	overflow: hidden;
	margin-bottom: var(--block-y);
}

.rr-practical__item { padding: var(--s-6); background: var(--rr-paper); }
.rr-section--alt .rr-practical__item { background: var(--rr-white); }

.rr-practical__icon {
	display: grid; place-items: center;
	width: 40px; height: 40px;
	margin-bottom: var(--s-3);
	background: var(--rr-sand-soft);
	border-radius: 50%;
	color: var(--rr-sea);
}
.rr-section--alt .rr-practical__icon { background: var(--rr-sand-soft); }

.rr-practical__item h3 { font-size: 1rem; margin: 0 0 var(--s-2); }
.rr-practical__item p { font-size: var(--fs-sm); color: var(--rr-ink-soft); line-height: 1.6; }
.rr-practical__note { font-size: var(--fs-xs) !important; color: var(--rr-ink-faint) !important; margin-top: .5rem !important; }

.rr-season__title { font-size: var(--fs-h3); text-align: center; margin: 0 0 var(--s-8); }

.rr-season__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--s-4);
}
.rr-season__item {
	padding: var(--s-5);
	background: var(--rr-white);
	border-radius: var(--r-md);
	border-top: 3px solid var(--rr-lagoon);
	box-shadow: var(--sh-1);
}
.rr-season__item:nth-child(2) { border-top-color: var(--rr-terracotta); }
.rr-season__item:nth-child(3) { border-top-color: var(--rr-sea); }
.rr-season__item:nth-child(4) { border-top-color: var(--rr-ink-faint); }

.rr-season__tag {
	display: block;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rr-deep);
	margin-bottom: .4rem;
}
.rr-season__item p { font-size: var(--fs-sm); color: var(--rr-ink-soft); line-height: 1.55; }


/* =========================================================================
   15 · RECENSIONI
   ====================================================================== */

.rr-reviews__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--s-5);
}

.rr-review {
	position: relative;
	padding: var(--s-6);
	background: var(--rr-white);
	border: 1px solid var(--rr-line-soft);
	border-radius: var(--r-md);
	box-shadow: var(--sh-1);
}

.rr-review__quote { display: block; color: var(--rr-sand); margin-bottom: var(--s-2); }

.rr-review blockquote {
	font-family: var(--rr-display);
	font-size: 1.14rem;
	line-height: 1.5;
	color: var(--rr-deep);
	margin: 0 0 var(--s-4);
}
.rr-review blockquote p { margin-bottom: .5em; }

.rr-review figcaption { display: flex; flex-direction: column; gap: 1px; }
.rr-review__name { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--rr-ink); }
.rr-review__meta { font-size: var(--fs-xs); color: var(--rr-ink-faint); }

.rr-review__score {
	position: absolute;
	top: var(--s-5);
	right: var(--s-5);
	display: grid;
	place-items: center;
	min-width: 42px;
	padding: .3rem .5rem;
	background: var(--rr-deep);
	color: #fff;
	border-radius: var(--r-sm);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.rr-reviews__more { text-align: center; margin: var(--s-10) 0 0; }

.rr-reviews__badge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	margin: calc(var(--s-8) * -1) 0 var(--s-8);
	font-size: var(--fs-sm);
	color: var(--rr-ink-soft);
}
.rr-reviews__stars { display: inline-flex; gap: 1px; color: #F2B33D; }
.rr-reviews__badge strong {
	font-family: var(--rr-display);
	font-size: 1.5rem;
	color: var(--rr-deep);
	line-height: 1;
}

.rr-reviews__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-3);
	margin-top: var(--block-y);
}

.rr-reviews__note {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: .4rem;
	max-width: 62ch;
	margin: var(--s-5) auto 0;
	font-size: var(--fs-xs);
	color: var(--rr-ink-faint);
	text-align: center;
	line-height: 1.55;
}
.rr-reviews__note .rr-icon { flex: 0 0 auto; margin-top: 2px; }


/* =========================================================================
   16 · FAQ
   ====================================================================== */

.rr-accordion {
	border-top: 1px solid var(--rr-line);
}

.rr-accordion__item { border-bottom: 1px solid var(--rr-line); }

.rr-accordion__heading { margin: 0; font-family: var(--rr-body); }

.rr-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	width: 100%;
	padding: 1.25rem .25rem;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	font-family: var(--rr-body);
	font-size: clamp(1.02rem, 1.9vw, 1.16rem);
	font-weight: 500;
	color: var(--rr-deep);
	transition: color .2s var(--ease);
}
.rr-accordion__trigger:hover { color: var(--rr-terracotta); }

.rr-accordion__sign {
	display: grid; place-items: center;
	flex: 0 0 auto;
	width: 32px; height: 32px;
	background: var(--rr-sand-soft);
	border-radius: 50%;
	color: var(--rr-sea);
	transition: transform .3s var(--ease), background-color .25s var(--ease);
}
.rr-accordion__trigger[aria-expanded="true"] .rr-accordion__sign {
	transform: rotate(45deg);
	background: var(--rr-deep);
	color: #fff;
}

.rr-accordion__panel { overflow: hidden; }
.rr-accordion__content {
	padding: 0 3rem 1.5rem .25rem;
	color: var(--rr-ink-soft);
	font-size: var(--fs-sm);
	line-height: 1.7;
}

.rr-faq__foot {
	margin: var(--s-8) 0 0;
	text-align: center;
	font-size: var(--fs-sm);
	color: var(--rr-ink-soft);
}


/* =========================================================================
   17 · FORM RICHIESTA
   ====================================================================== */

.rr-enquiry {
	background: var(--rr-deep);
	color: #fff;
}

.rr-enquiry__grid { display: grid; gap: var(--s-10); }

@media (min-width: 900px) {
	.rr-enquiry__grid { grid-template-columns: .85fr 1.15fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
}

.rr-enquiry .rr-eyebrow { color: var(--rr-sand); }

.rr-enquiry__title { font-size: var(--fs-h2); color: #fff; margin: 0 0 var(--s-4); }

.rr-enquiry__lead { font-size: var(--fs-lead); color: rgba(255,255,255,.82); line-height: 1.65; margin-bottom: var(--s-6); }
.rr-enquiry__lead strong { color: #fff; }

.rr-enquiry__perks { list-style: none; display: grid; gap: .7rem; margin: 0 0 var(--s-8); }
.rr-enquiry__perks li {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	font-size: var(--fs-sm);
	color: rgba(255,255,255,.86);
	line-height: 1.5;
}
.rr-enquiry__perks .rr-icon { color: var(--rr-sea); flex: 0 0 auto; margin-top: 2px; }

.rr-enquiry__direct { display: grid; gap: var(--s-3); max-width: 340px; }
.rr-enquiry__direct .rr-btn--outline { border-color: rgba(255,255,255,.3); color: #fff; }
.rr-enquiry__direct .rr-btn--outline:hover { background: #fff; color: var(--rr-deep); border-color: #fff; }

.rr-enquiry__ota {
	font-size: var(--fs-xs);
	color: rgba(255,255,255,.6);
	text-align: center;
	text-decoration: underline;
}
.rr-enquiry__ota:hover { color: #fff; }

/* --- Riquadro form --- */
.rr-enquiry__formwrap {
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: var(--rr-paper);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-3);
	color: var(--rr-ink);
}

.rr-form__row { display: grid; gap: var(--s-4); margin-bottom: var(--s-4); }
@media (min-width: 560px) {
	.rr-form__row--2 { grid-template-columns: 1fr 1fr; }
}

.rr-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: var(--s-4); min-width: 0; }
.rr-form__row .rr-field { margin-bottom: 0; }

.rr-field label {
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--rr-ink-soft);
}
.rr-field label span[aria-hidden] { color: var(--rr-terracotta); }

.rr-field input[type="text"],
.rr-field input[type="email"],
.rr-field input[type="tel"],
.rr-field input[type="date"],
.rr-field select,
.rr-field textarea {
	width: 100%;
	padding: .78rem .9rem;
	background: var(--rr-white);
	border: 1.5px solid var(--rr-line);
	border-radius: var(--r-sm);
	font-family: inherit;
	font-size: var(--fs-sm);
	color: var(--rr-ink);
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.rr-field textarea { resize: vertical; min-height: 96px; }

.rr-field input:focus,
.rr-field select:focus,
.rr-field textarea:focus {
	border-color: var(--rr-sea);
	box-shadow: 0 0 0 3px rgba(20, 85, 107, .12);
	outline: none;
}

.rr-field input[aria-invalid="true"],
.rr-field select[aria-invalid="true"] { border-color: var(--rr-err); }

.rr-field--check { flex-direction: row; }
.rr-field--check label {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: var(--fs-xs);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--rr-ink-soft);
	line-height: 1.5;
	cursor: pointer;
}
.rr-field--check input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--rr-sea); }

.rr-form__nights {
	margin: -.5rem 0 var(--s-4);
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--rr-sea);
}

.rr-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-2); }

.rr-form__reassure {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--rr-ink-faint);
}
.rr-form__reassure .rr-icon { color: var(--rr-ok); flex: 0 0 auto; }

.rr-form__feedback:empty { display: none; }
.rr-form__feedback {
	margin-top: var(--s-4);
	padding: .85rem 1rem;
	border-radius: var(--r-sm);
	font-size: var(--fs-sm);
	line-height: 1.5;
}
.rr-form__feedback.is-ok { background: rgba(30,122,78,.1); color: var(--rr-ok); border: 1px solid rgba(30,122,78,.25); }
.rr-form__feedback.is-err { background: rgba(179,38,30,.08); color: var(--rr-err); border: 1px solid rgba(179,38,30,.22); }

.rr-alert {
	margin-bottom: var(--s-5);
	padding: .9rem 1.1rem;
	border-radius: var(--r-sm);
	font-size: var(--fs-sm);
}
.rr-alert--ok { background: rgba(30,122,78,.1); color: var(--rr-ok); border: 1px solid rgba(30,122,78,.25); }
.rr-alert--err { background: rgba(179,38,30,.08); color: var(--rr-err); border: 1px solid rgba(179,38,30,.22); }

/* Honeypot: fuori schermo ma non display:none (alcuni bot lo rilevano) */
.rr-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

.rr-btn[disabled] { opacity: .6; pointer-events: none; }


/* =========================================================================
   18 · FOOTER
   ====================================================================== */

.rr-footer { background: var(--rr-ink); color: rgba(255,255,255,.72); }

.rr-footer__top {
	display: grid;
	gap: var(--s-8);
	padding-block: var(--block-y) var(--s-10);
}

@media (min-width: 720px) {
	.rr-footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-8); }
	.rr-footer__top--5 { grid-template-columns: 1.3fr 1fr 1.1fr 1fr .8fr; gap: var(--s-6); }
}
@media (min-width: 720px) and (max-width: 1099px) {
	.rr-footer__top--5 { grid-template-columns: 1fr 1fr 1fr; }
}

.rr-footer__h3b { margin-top: var(--s-6) !important; }

.rr-footer__prop { margin-bottom: var(--s-3); }
.rr-footer__prop strong { display: block; color: #fff; font-size: var(--fs-sm); }
.rr-footer__prop span { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,.6); line-height: 1.45; }
.rr-footer__prop a { font-size: var(--fs-xs); text-decoration: underline; }

.rr-footer__name,
.rr-footer__logo { margin: 0 0 var(--s-3); }
.rr-footer__name { font-family: var(--rr-display); font-size: 1.35rem; text-transform: uppercase; letter-spacing: .12em; color: #fff; }
/* Il logo NON viene piu' forzato a bianco.
   Il filtro brightness(0) invert(1) rende bianco tutto cio' che non e'
   trasparente: funziona con un logo monocromatico su sfondo trasparente, ma
   se il file ha lo sfondo bianco - come il tuo - l'intero rettangolo diventa
   bianco e in fondo alla pagina si vede un riquadro vuoto. Ora il logo si
   mostra com'e', dentro una piastrella chiara che lo stacca dal fondo scuro
   e che ha senso qualunque sia il file. */
.rr-footer__logo {
	display: inline-block;
	background: #fff;
	padding: .55rem .8rem;
	border-radius: var(--r-sm, 8px);
	line-height: 0;
}
.rr-footer__logo img { max-height: 44px; width: auto; display: block; }

.rr-footer__tag { font-size: var(--fs-sm); line-height: 1.6; max-width: 34ch; }

.rr-footer h3 {
	font-family: var(--rr-body);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 var(--s-4);
}

.rr-footer__list { list-style: none; display: grid; gap: .7rem; }
.rr-footer__list li { display: flex; align-items: flex-start; gap: .55rem; font-size: var(--fs-sm); line-height: 1.5; }
.rr-footer__list .rr-icon { color: var(--rr-lagoon); flex: 0 0 auto; margin-top: 2px; }
.rr-footer__list a { color: rgba(255,255,255,.78); text-decoration: none; }
.rr-footer__list a:hover { color: #fff; text-decoration: underline; }
.rr-footer__list--plain li { display: block; }
.rr-footer__list--plain strong { color: rgba(255,255,255,.95); font-weight: 600; }


.rr-footer__brand { min-width: 0; }
.rr-footer__col { min-width: 0; }


.rr-footer__bottom { border-top: 1px solid rgba(255,255,255,.09); }

.rr-footer__bottominner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	padding-block: var(--s-5);
}

.rr-footer__copy { margin: 0; font-size: var(--fs-xs); color: rgba(255,255,255,.5); }

.rr-footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-4); list-style: none; }
.rr-footer__legal a { font-size: var(--fs-xs); color: rgba(255,255,255,.6); text-decoration: none; }
.rr-footer__legal a:hover { color: #fff; }

.rr-lang--footer .rr-lang__toggle { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.8); }
.rr-lang--footer .rr-lang__toggle:hover { border-color: rgba(255,255,255,.5); }


/* =========================================================================
   19 · BARRE FISSE (MOBILE)
   ====================================================================== */

.rr-actionbar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 480;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	background: rgba(253,251,247,.97);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid var(--rr-line-soft);
	box-shadow: 0 -2px 18px rgba(11,42,56,.08);
	padding-bottom: env(safe-area-inset-bottom);
	transform: translateY(110%);
	transition: transform .35s var(--ease);
}
.rr-actionbar.is-visible { transform: translateY(0); }

.rr-actionbar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: .6rem .3rem;
	font-size: .68rem;
	font-weight: 600;
	color: var(--rr-deep);
	text-decoration: none;
	border-right: 1px solid var(--rr-line-soft);
}
.rr-actionbar__item:last-child { border-right: 0; }
.rr-actionbar__item .rr-icon { color: var(--rr-sea); }
.rr-actionbar__item--wa .rr-icon { color: var(--rr-wa); }
.rr-actionbar__item--cta { background: var(--rr-terracotta); color: #fff; }
.rr-actionbar__item--cta .rr-icon { color: #fff; }

.rr-wafloat {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 470;
	display: none;
	place-items: center;
	width: 56px; height: 56px;
	background: var(--rr-wa);
	color: #fff;
	border-radius: 50%;
	box-shadow: 0 6px 22px rgba(37,211,102,.42);
	transition: transform .25s var(--ease);
}
.rr-wafloat:hover { transform: scale(1.06); color: #fff; }

@media (min-width: 900px) {
	.rr-actionbar { display: none; }
	.rr-wafloat { display: grid; }
}

@media (max-width: 899px) {
	body { padding-bottom: 62px; }
}


/* =========================================================================
   20 · LIGHTBOX
   ====================================================================== */

.rr-lightbox {
	position: fixed;
	inset: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 5vw, 3rem);
	background: rgba(8, 22, 29, .94);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	opacity: 0;
	transition: opacity .28s var(--ease);
}
.rr-lightbox[hidden] { display: none; }
.rr-lightbox.is-open { opacity: 1; }

.rr-lightbox__figure { max-width: 100%; max-height: 100%; text-align: center; }
.rr-lightbox__figure img {
	max-width: 100%;
	max-height: 82vh;
	width: auto;
	border-radius: var(--r-md);
	box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.rr-lightbox__figure figcaption {
	margin-top: var(--s-4);
	font-family: var(--rr-display);
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: rgba(255,255,255,.86);
}

.rr-lightbox__close,
.rr-lightbox__nav {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px; height: 48px;
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s var(--ease);
}
.rr-lightbox__close:hover,
.rr-lightbox__nav:hover { background: rgba(255,255,255,.22); }

.rr-lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.rr-lightbox__nav--prev { left: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.rr-lightbox__nav--next { right: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }

body.rr-lbopen { overflow: hidden; }


/* =========================================================================
   21 · PAGINE INTERNE
   ====================================================================== */

.rr-pagehero {
	position: relative;
	padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 3.5rem);
	background: linear-gradient(180deg, var(--rr-sand-soft) 0%, var(--rr-paper) 100%);
	border-bottom: 1px solid var(--rr-line-soft);
	text-align: center;
}

.rr-pagehero__title { font-size: var(--fs-h1); margin: 0 0 var(--s-4); }

.rr-pagehero__lead {
	max-width: 62ch;
	margin-inline: auto;
	font-size: var(--fs-lead);
	color: var(--rr-ink-soft);
	line-height: 1.6;
}

.rr-pagehero--guide { background: linear-gradient(180deg, #0B2A38 0%, #14556B 100%); }
.rr-pagehero--guide .rr-pagehero__title { color: #fff; }
.rr-pagehero--guide .rr-pagehero__lead { color: rgba(255,255,255,.82); }
.rr-pagehero--guide .rr-eyebrow { color: var(--rr-sand); }

.rr-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: var(--s-6);
	font-size: var(--fs-xs);
	color: var(--rr-ink-faint);
}
.rr-crumbs a { color: var(--rr-ink-soft); text-decoration: none; }
.rr-crumbs a:hover { color: var(--rr-terracotta); }

/* --- Prosa --- */
.rr-prose { font-size: var(--fs-body); line-height: 1.68; color: var(--rr-ink-soft); }
.rr-prose h2 { font-size: var(--fs-h2); margin: 1.35em 0 .5em; }
.rr-prose h3 { font-size: var(--fs-h3); margin: 1.25em 0 .4em; }
.rr-prose ul, .rr-prose ol { margin: 0 0 1.2em 1.2em; }
.rr-prose li { margin-bottom: .4em; }
.rr-prose img { border-radius: var(--r-md); margin-block: 1.5em; }
.rr-prose blockquote {
	margin: 1.8em 0;
	padding-left: 1.4em;
	border-left: 3px solid var(--rr-sand);
	font-family: var(--rr-display);
	font-size: 1.3rem;
	color: var(--rr-deep);
}
.rr-prose__hero { width: 100%; border-radius: var(--r-lg); margin-bottom: var(--s-8); }

/* --- Camera singola --- */
.rr-roomsingle { padding-block: var(--sec-y); }
.rr-roomsingle__grid { display: grid; gap: var(--s-8); }
@media (min-width: 900px) {
	.rr-roomsingle__grid { grid-template-columns: 1.15fr 1fr; gap: var(--s-10); align-items: start; }
}
.rr-roomsingle__title { font-size: var(--fs-h1); margin: 0 0 var(--s-4); }
.rr-roomsingle__sub { font-size: 1.2rem; margin: var(--s-6) 0 var(--s-3); }

.rr-gallerygrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.rr-gallerygrid__item {
	padding: 0; border: 0; background: none; cursor: zoom-in;
	border-radius: var(--r-md); overflow: hidden;
}
.rr-gallerygrid__item.is-lead { grid-column: 1 / -1; }
.rr-gallerygrid__item img {
	width: 100%; height: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform .6s var(--ease);
}
.rr-gallerygrid__item.is-lead img { aspect-ratio: 4 / 3; }  /* la prima resta piu' larga, ma non 16:9: non c'e' larghezza da cui ricavarla */
.rr-gallerygrid__item:hover img { transform: scale(1.05); }

.rr-related { margin-top: var(--block-y); }
.rr-related__title { font-size: var(--fs-h3); margin: 0 0 var(--s-5); }
.rr-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-4); }
.rr-related__card { display: block; text-decoration: none; }
.rr-related__card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r-md); margin-bottom: .6rem; }
.rr-related__card span { font-family: var(--rr-display); font-size: 1.05rem; color: var(--rr-deep); }

/* --- Elenco articoli --- */
.rr-postlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-6); }
.rr-postcard { background: var(--rr-white); border: 1px solid var(--rr-line-soft); border-radius: var(--r-md); overflow: hidden; }
.rr-postcard__media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.rr-postcard__body { padding: var(--s-5); }
.rr-postcard__title { font-size: 1.16rem; margin: 0 0 .5rem; }
.rr-postcard__title a { color: inherit; text-decoration: none; }
.rr-postcard__excerpt { font-size: var(--fs-sm); color: var(--rr-ink-soft); }
.rr-postcard__more { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }

.rr-pagination { display: flex; justify-content: center; gap: .5rem; margin-top: var(--s-10); }
.rr-pagination .page-numbers {
	display: grid; place-items: center;
	min-width: 40px; height: 40px;
	padding-inline: .6rem;
	border: 1px solid var(--rr-line);
	border-radius: var(--r-sm);
	text-decoration: none;
	font-size: var(--fs-sm);
}
.rr-pagination .current { background: var(--rr-deep); color: #fff; border-color: var(--rr-deep); }

.rr-empty { text-align: center; padding-block: var(--s-12); }

/* --- 404 --- */
.rr-404 { text-align: center; }
.rr-404__title { font-size: var(--fs-h1); margin: 0 0 var(--s-4); }
.rr-404__text { font-size: var(--fs-lead); color: var(--rr-ink-soft); margin-bottom: var(--s-8); }
.rr-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }


/* =========================================================================
   22 · GUIDA
   ====================================================================== */

.rr-toc {
	position: sticky;
	top: var(--header-h);
	z-index: 100;
	background: var(--rr-white);
	border-bottom: 1px solid var(--rr-line-soft);
	box-shadow: var(--sh-1);
}
.rr-toc ul {
	display: flex;
	gap: var(--s-5);
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	padding-block: .9rem;
}
.rr-toc ul::-webkit-scrollbar { display: none; }
.rr-toc a {
	white-space: nowrap;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--rr-ink-soft);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
}
.rr-toc a:hover { color: var(--rr-deep); border-bottom-color: var(--rr-terracotta); }

/* --- Itinerari --- */
.rr-itineraries { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-5); }

.rr-itinerary {
	padding: var(--s-6);
	background: var(--rr-white);
	border: 1px solid var(--rr-line-soft);
	border-radius: var(--r-md);
}
.rr-itinerary--featured {
	background: var(--rr-deep);
	border-color: var(--rr-deep);
	color: rgba(255,255,255,.84);
}
.rr-itinerary--featured h3 { color: #fff; }
.rr-itinerary__days {
	text-transform: uppercase;
	letter-spacing: .09em;

	display: inline-block;
	padding: .28rem .8rem;
	margin-bottom: var(--s-3);
	background: var(--rr-terracotta);
	color: #fff;
	border-radius: var(--r-pill);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .04em;
}
.rr-itinerary h3 { font-size: 1.14rem; margin: 0 0 var(--s-4); }
.rr-itinerary ol { list-style: none; display: grid; gap: .8rem; counter-reset: step; }
.rr-itinerary li {
	position: relative;
	padding-left: 1.1rem;
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: inherit;
}
.rr-itinerary li::before {
	content: "";
	position: absolute;
	left: 0; top: .62em;
	width: 5px; height: 5px;
	background: var(--rr-lagoon);
	border-radius: 50%;
}
/* Il colore del grassetto va dichiarato QUI, sulla scheda chiara, e subito
   dopo per quella scura. Prima la regola generica stava piu' in basso nel
   file e, avendo la stessa specificita' della variante --featured, vinceva
   per posizione: "Giorno 1", "Giorno 2" e "Giorno 3" venivano scritti in
   #0B2A38 sopra uno sfondo #0B2A38, cioe' erano invisibili. */
.rr-itinerary strong { color: var(--rr-deep); }
.rr-itinerary--featured strong { color: var(--rr-sand); }
.rr-itinerary__tip {
	display: flex; gap: .45rem;
	margin: var(--s-4) 0 0;
	padding-top: var(--s-4);
	border-top: 1px solid rgba(255,255,255,.14);
	font-size: var(--fs-xs);
	font-style: italic;
}
.rr-itinerary__tip .rr-icon { color: var(--rr-sand); flex: 0 0 auto; margin-top: 2px; }

/* --- Borghi --- */
.rr-villages { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-5); }
.rr-village { padding: var(--s-6); background: var(--rr-white); border-radius: var(--r-md); border-left: 3px solid var(--rr-lagoon); }
.rr-village--bonus { border-left-color: var(--rr-terracotta); }
.rr-village header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: var(--s-2); }
.rr-village h3 { font-size: 1.1rem; margin: 0; }
.rr-village header span {
	display: inline-flex; align-items: center; gap: .3rem;
	font-size: var(--fs-xs); font-weight: 600; color: var(--rr-sea);
	white-space: nowrap;
}
.rr-village p { font-size: var(--fs-sm); color: var(--rr-ink-soft); line-height: 1.6; }

/* --- Muoversi --- */
.rr-move { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--s-5); }
.rr-move__card { padding: var(--s-6); background: var(--rr-sand-soft); border-radius: var(--r-md); }
.rr-move__icon {
	display: grid; place-items: center;
	width: 46px; height: 46px;
	margin-bottom: var(--s-3);
	background: var(--rr-white);
	border-radius: var(--r-sm);
	color: var(--rr-sea);
}
.rr-move__card h3 { font-size: 1.08rem; margin: 0 0 var(--s-2); }
.rr-move__card p { font-size: var(--fs-sm); color: var(--rr-ink-soft); line-height: 1.6; }
.rr-move__card ul { list-style: none; display: grid; gap: .45rem; margin-top: var(--s-3); }
.rr-move__card li {
	position: relative; padding-left: 1rem;
	font-size: var(--fs-xs); color: var(--rr-ink-soft); line-height: 1.5;
}
.rr-move__card li::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: 5px; height: 1.5px; background: var(--rr-terracotta);
}
.rr-move__card .rr-btn { margin-top: var(--s-4); }

/* --- Sentieri / spiagge / cibo --- */
.rr-trails, .rr-beaches, .rr-food {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	gap: var(--s-5);
	margin-bottom: var(--block-y);
}
.rr-trail, .rr-beach, .rr-food__item {
	padding: var(--s-5);
	background: var(--rr-white);
	border: 1px solid var(--rr-line-soft);
	border-radius: var(--r-md);
}
.rr-trail h3, .rr-beach h3, .rr-food__item h3 { font-size: 1rem; margin: 0 0 var(--s-2); }
.rr-trail p, .rr-beach p, .rr-food__item p { font-size: var(--fs-sm); color: var(--rr-ink-soft); line-height: 1.6; }
.rr-food__item > span {
	display: grid; place-items: center;
	width: 38px; height: 38px;
	margin-bottom: var(--s-3);
	background: var(--rr-sand-soft);
	border-radius: 50%;
	color: var(--rr-terracotta);
}

/* --- Callout --- */
.rr-callout {
	display: flex;
	gap: var(--s-4);
	padding: var(--s-5) var(--s-6);
	background: var(--rr-sand-soft);
	border-radius: var(--r-md);
	border-left: 3px solid var(--rr-sea);
}
.rr-callout--warn { border-left-color: var(--rr-terracotta); background: rgba(192,91,59,.07); }
.rr-callout .rr-icon { color: var(--rr-terracotta); flex: 0 0 auto; margin-top: 2px; }
.rr-callout strong { display: block; color: var(--rr-deep); margin-bottom: .3rem; }
.rr-callout p { font-size: var(--fs-sm); color: var(--rr-ink-soft); line-height: 1.6; }

/* --- Consigli --- */
.rr-tips { display: grid; gap: var(--s-3); margin: 0 0 var(--block-y); counter-reset: tip; list-style: none; }
.rr-tips li {
	position: relative;
	padding: var(--s-4) var(--s-5) var(--s-4) 3.4rem;
	background: var(--rr-sand-soft);
	border-radius: var(--r-sm);
	font-size: var(--fs-sm);
	color: var(--rr-ink-soft);
	line-height: 1.55;
	counter-increment: tip;
}
.rr-tips li::before {
	content: counter(tip);
	position: absolute;
	left: var(--s-4); top: 50%;
	transform: translateY(-50%);
	display: grid; place-items: center;
	width: 28px; height: 28px;
	background: var(--rr-deep);
	color: #fff;
	border-radius: 50%;
	font-family: var(--rr-display);
	font-size: .95rem;
}


/* =========================================================================
   23 · UTILITY, ACCESSIBILITÀ, MOVIMENTO, STAMPA
   ====================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.rr-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* Rivelazione progressiva allo scroll */
[data-rr-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
	will-change: opacity, transform;
}
[data-rr-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	[data-rr-reveal] { opacity: 1 !important; transform: none !important; }
}

@media (prefers-contrast: more) {
	:root { --rr-ink-soft: #2A3B41; --rr-ink-faint: #4A5C61; --rr-line: rgba(15,30,38,.28); }
}

@media print {
	.rr-header, .rr-actionbar, .rr-wafloat, .rr-lightbox,
	.rr-searchbar, .rr-carousel__nav, .rr-carousel__dots,
	.rr-toc, .rr-btn { display: none !important; }
	body { background: #fff; color: #000; padding: 0; }
	.rr-hero { min-height: auto; padding-block: 2rem; }
	.rr-hero__scrim, .rr-hero__media { display: none; }
	.rr-hero__title, .rr-hero__text, .rr-hero__eyebrow { color: #000 !important; text-shadow: none; }
	.rr-enquiry, .rr-trust, .rr-footer { background: #fff !important; color: #000 !important; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}


/* =========================================================================
   24 · RIFINITURE
   Piccole cose che nessuno nota una per una, ma che insieme distinguono
   un sito curato da uno assemblato.
   ====================================================================== */

/* --- Passaggio fra sezioni --------------------------------------------
   Le fasce chiare alternate hanno un bordo netto che taglia la pagina in
   scalini. Una sfumatura di pochi pixel ammorbidisce il passaggio senza
   che si veda da dove viene.                                            */
.rr-section--alt {
	position: relative;
	border-block: 0;
	background:
		linear-gradient(180deg, rgba(230,216,195,.30) 0%, transparent 90px),
		linear-gradient(0deg,   rgba(230,216,195,.30) 0%, transparent 90px),
		var(--rr-sand-soft);
}

/* --- Schede -----------------------------------------------------------
   Ombra a due livelli: una stretta che stacca dal fondo, una larga e
   tenue che dà profondità. Una sola ombra sembra sempre finta.          */
.rr-service,
.rr-arrive__card,
.rr-review,
.rr-season__item,
.rr-village,
.rr-trail,
.rr-beach,
.rr-food__item,
.rr-itinerary,
.rr-postcard {
	transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

.rr-arrive__card:hover,
.rr-village:hover,
.rr-itinerary:not(.rr-itinerary--featured):hover,
.rr-trail:hover,
.rr-beach:hover,
.rr-food__item:hover,
.rr-season__item:hover {
	transform: translateY(-2px);
	box-shadow: var(--sh-2);
}

/* --- Icone dei servizi ------------------------------------------------
   Al passaggio del mouse la pastiglia si scurisce: un segnale piccolo,
   ma dice che la scheda è viva.                                         */
.rr-service:hover .rr-service__icon {
	background: var(--rr-deep);
	color: #fff;
}
.rr-service__icon { transition: background-color .3s var(--ease), color .3s var(--ease); }

/* --- Fotografie delle camere ------------------------------------------ */
.rr-room__media {
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-2);
}
.rr-carousel, .rr-room__single { box-shadow: none; }

/* --- Numeri che contano ------------------------------------------------
   Punteggio, fascia di prezzo e distanze sono le cifre su cui l'occhio
   si ferma: cifre a larghezza fissa evitano il tremolio fra una riga e
   l'altra negli elenchi incolonnati.                                    */
.rr-trust__num,
.rr-about__stampnum,
.rr-review__score,
.rr-reviews__badge strong,
.rr-distances li > strong {
	font-variant-numeric: tabular-nums;
}

/* --- Prima lettera dei paragrafi introduttivi -------------------------- */
.rr-sechead__intro p { text-wrap: pretty; }

/* --- Elenco distanze --------------------------------------------------
   Righe alternate appena percettibili: aiutano l'occhio a seguire la
   riga fino al numero senza bisogno di puntini di guida.                */
.rr-distances li:nth-child(even) { background: rgba(230,216,195,.22); }
.rr-section--alt .rr-distances li:nth-child(even) { background: rgba(230,216,195,.38); }

/* --- Pulsante principale ----------------------------------------------
   L'ombra segue il colore del pulsante invece di essere grigia: è così
   che si comporta la luce vera.                                         */
.rr-btn--primary {
	box-shadow: 0 1px 2px rgba(164, 74, 46, .22), 0 6px 18px rgba(192, 91, 59, .26);
}
.rr-btn--primary:hover {
	box-shadow: 0 2px 4px rgba(164, 74, 46, .26), 0 10px 26px rgba(192, 91, 59, .34);
}

/* --- Barra di ricerca --------------------------------------------------
   Alzata rispetto alla fotografia con un'ombra profonda: sembra appoggiata
   sopra invece che incollata dentro.                                    */
.rr-searchbar__form {
	box-shadow: 0 2px 6px rgba(6, 22, 30, .16), 0 24px 60px rgba(6, 22, 30, .32);
	border: 1px solid rgba(255, 255, 255, .5);
}

/* --- Intestazione dei gruppi di camere --------------------------------- */
.rr-rooms__grouphead {
	border-bottom: 0;
	padding-bottom: var(--s-4);
	position: relative;
}
.rr-rooms__grouphead::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 64px; height: 2px;
	background: var(--rr-terracotta);
}

/* --- Fisarmonica ------------------------------------------------------- */
.rr-accordion__item { transition: background-color .25s var(--ease); }
.rr-accordion__item:has(.rr-accordion__trigger[aria-expanded="true"]) {
	background: linear-gradient(90deg, rgba(230,216,195,.22), transparent 70%);
}

/* --- Piè di pagina ----------------------------------------------------- */
.rr-footer__col h3::after {
	content: "";
	display: block;
	width: 24px; height: 1px;
	margin-top: .55rem;
	background: var(--rr-lagoon);
	opacity: .6;
}

/* --- Selezione del testo ----------------------------------------------- */
::selection { background: var(--rr-sand); color: var(--rr-deep); }

/* --- Messa a fuoco da tastiera -----------------------------------------
   Doppio anello: chiaro sopra scuro e viceversa, così si vede su
   qualunque fondo.                                                       */
:focus-visible {
	outline: 2px solid var(--rr-lagoon);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px rgba(79, 163, 181, .25);
	border-radius: 4px;
}

/* --- Schermi molto larghi ----------------------------------------------
   Oltre i 1700 px la colonna di testo diventa troppo lunga da leggere:
   il contenitore si ferma, il respiro cresce.                            */
@media (min-width: 1700px) {
	.rr-container { max-width: 1340px; }
	.rr-hero__text { max-width: min(46ch, var(--colonna, 44rem)); }
}