/* Hotel Blu Eden — un solo foglio di stile, niente librerie.
   Misure: desktop, tablet ≤1024px, telefono ≤767px. */

@font-face { font-family: "Noto Serif Display"; src: url("../font/noto-serif-display.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../font/dm-sans.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }

:root {
  --notte: #193256;      /* fasce blu scuro */
  --inchiostro: #242c53; /* titoli */
  --acqua: #6dadb4;
  --oro: #9f7b53;
  --sabbia: #efe7db;
  --carta: #f6f1e8;      /* sfondo della pagina */
  --testo: #383838;
  --rame: #c0925f;       /* titoletti del piede */
  --cielo: #65a3c5;
  --oliva: #4f6142;      /* WhatsApp: verde oliva del brand */
  --serif: "Noto Serif Display", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --testata: 136px;
  /* contenuto in una colonna di 1272px al massimo, come i Briganti di Capalbio; i fondi restano a tutta larghezza */
  --margine: calc(64px + max(0px, (100% - 1400px) / 2));
}

*, *::before, *::after { box-sizing: border-box; }
html { touch-action: pan-x pan-y; scroll-behavior: smooth; scroll-padding-top: var(--testata); -webkit-text-size-adjust: 100%; }
body { margin: 0; padding-top: var(--testata); background: var(--carta); color: var(--testo); font: 400 18px/30px var(--sans); }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, h5, h6, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
strong, b { font-weight: 700; }
button { font: inherit; cursor: pointer; }
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.acqua { color: var(--acqua); }

/* ---------- elementi ricorrenti ---------- */
.occhiello { font: 600 14px/20px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--oro); }
.occhiello.grande { font-size: 15px; }
.occhiello.acqua { color: var(--acqua); }
.titolo { font: 500 56px/1 var(--serif); letter-spacing: -.02em; color: var(--inchiostro); }
.bottone {
  display: inline-block; padding: 20px 35px; border: 0; border-radius: 0;
  background: var(--oro); color: #fff;
  font: 900 14px/14px var(--sans); letter-spacing: 2.8px; text-transform: uppercase; text-align: center;
  transition: background-color .3s, color .3s;
}
.bottone:hover, .bottone:focus-visible { background: var(--inchiostro); color: #fff; }
.bottone.acqua { background: var(--acqua); }
.bottone.acqua:hover, .bottone.acqua:focus-visible { background: var(--notte); }
:focus-visible { outline: 2px solid var(--acqua); outline-offset: 2px; }

.sezione { padding: 118px var(--margine) 120px; }
.sabbia { background: var(--sabbia); }
.notte { background: var(--notte); color: #fff; }

.spunte li { position: relative; padding-left: 19px; font: 400 15px/21px var(--sans); color: #000; }
.spunte li::before {
  content: ""; position: absolute; left: 0; top: 3.5px; width: 14px; height: 14px;
  background: var(--acqua);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.spunte li + li { margin-top: 20px; }

/* ---------- testata ---------- */
.testata { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--testata); background: #fff; box-shadow: 0 1px 0 #efe7db; }
.testata-top { display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 0 var(--margine); background: var(--notte); color: #fff; font: 400 13px/1 var(--sans); }
.testata-top a { color: #fff; }
.testata-top .testata-wa { margin-left: 22px; font-weight: 600; color: var(--acqua); }
.testata-barra { display: flex; align-items: center; gap: 32px; height: 96px; padding: 0 var(--margine); }
.testata-logo img { width: 190px; }
.testata-nav { display: flex; gap: 26px; margin-left: auto; }
.testata-nav a { font: 500 15px/1 var(--sans); color: var(--inchiostro); transition: color .2s; }
.testata-nav a:hover { color: var(--oro); }
.testata-cta { flex: 0 0 auto; }
.burger { display: none; flex-direction: column; justify-content: center; gap: 6px; width: 48px; height: 48px; padding: 0 10px; border: 0; background: transparent; cursor: pointer; }
.burger span { display: block; height: 2px; background: var(--inchiostro); }

/* menu a schermo intero (telefono e tablet) */
.menu-mobile { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; background: #fff; overflow-y: auto; opacity: 0; transition: opacity .22s ease-out; }
.menu-mobile[hidden] { display: none; }
.menu-mobile.aperto { opacity: 1; }
.menu-testa { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 20px; border-bottom: 1px solid #efe7db; }
.menu-testa img { width: 140px; }
.menu-chiudi { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; background: var(--sabbia); color: var(--inchiostro); cursor: pointer; }
.menu-mobile ul { margin: 0; padding: 4px 20px; list-style: none; }
.menu-mobile li a { display: flex; align-items: center; gap: 14px; min-height: 60px; padding-left: 4px; border-bottom: 1px solid #f0ebe3; font: 600 18px/1.2 var(--sans); color: var(--inchiostro); }
.menu-voce { flex: 1; }
.menu-mobile li a > svg { color: #b8c2cb; }
.menu-fondo { margin-top: auto; padding: 20px; background: var(--notte); }
.menu-cta { display: flex; align-items: center; justify-content: center; min-height: 54px; background: var(--oro); font: 700 17px/1 var(--sans); color: #fff; }
.menu-rapidi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.menu-rapidi a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border: 1px solid rgba(255, 255, 255, .35); font: 600 14px/1 var(--sans); color: #fff; }
html.menu-bloccato, html.menu-bloccato body { overflow: hidden; }

/* barra fissa in basso (solo telefono) */
.barra-mobile { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; height: 850px; margin-bottom: -75px; overflow: hidden; background: #362f1c; color: #fff; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-velo { position: absolute; inset: 0; background: linear-gradient(293deg, rgba(25, 50, 86, .21) 0%, var(--inchiostro) 58%); opacity: .87; }
.hero-testo { position: relative; padding: 175px var(--margine) 0; }
.hero-testo > * { max-width: 1000px; }
.hero-titolo { margin-top: 10px; font: 500 90px/1 var(--serif); letter-spacing: -1.8px; }
.hero-titolo b { font-weight: 700; }
.hero .occhiello { font-size: 15px; line-height: 20px; }
.hero-sotto { max-width: 910px; margin: 18px 0 25px; font-size: 22px; font-weight: 300; line-height: 34px; }

/* ---------- carosello ---------- */
.carosello { position: relative; z-index: 1; padding: 0 var(--margine) 7px; overflow: hidden; clip-path: inset(0 var(--margine)); }
.carosello-pista { display: flex; transition: transform .5s ease; }
.carosello-pista img { flex: 0 0 calc(100% / 3); width: calc(100% / 3); aspect-ratio: 3 / 2; object-fit: cover; }
.carosello-freccia { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; padding: 9.5px; border: 0; background: none; }
.carosello-freccia svg { width: 25px; height: 25px; fill: rgba(237, 237, 237, .9); }
.carosello-freccia.indietro { left: var(--margine); }
.carosello-freccia.avanti { right: var(--margine); }

/* ---------- solo adulti ---------- */
.adulti { text-align: center; }
.adulti .titolo { max-width: 610px; margin: 20px auto 48px; }
.tre-colonne { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.punto h3 { font: 500 35px/1.15 var(--serif); letter-spacing: -1.3px; color: #0f0f0f; }
.punto h3::after { content: ""; display: block; width: 68px; margin: 20px auto 12px; border-top: 1px solid var(--oro); }

/* ---------- metà testo / metà foto ---------- */
.due-metà { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; min-height: 900px; padding-top: 0; padding-bottom: 0; }
.metà-testo > p:not(.occhiello) + p { margin-top: 14px; }
.metà-testo .titolo { margin: 20px 0 28px; }
.metà-testo .bottone { margin-top: 34px; }
.metà-testo .occhiello + .titolo { margin-top: 20px; }
.foto-piena { width: 100%; height: 588px; object-fit: cover; }
.camere .foto-piena { object-position: 50% 4%; }
.colazione .foto-piena { object-position: 50% 59%; }
.notte .titolo { color: #fff; }
.notte .metà-testo > p { color: #fff; }
.notte .metà-testo .titolo { margin-top: 0; }

.due-metà .metà-testo { padding: 40px 0 100px; }
.metà-testo .firma { margin-top: 34px; font: italic 400 24px/21px var(--serif); letter-spacing: -1px; color: #000; }
.firma + .bottone { margin-top: 20px; }
/* Simone e Nadia: due foto sfalsate, la piccola incorniciata e in rilievo, una cornice oro dietro */
.collage { position: relative; height: 588px; }
.collage::before { content: ""; position: absolute; top: 34px; right: -22px; width: 78%; height: 74%; border: 1px solid var(--oro); }
.collage .foto-grande { position: absolute; top: 0; right: 0; width: 80%; height: 76%; object-fit: cover; }
.collage .foto-piccola { position: absolute; left: 0; bottom: 0; width: 58%; aspect-ratio: 3 / 2; object-fit: cover; border: 10px solid var(--sabbia); box-shadow: 0 28px 50px -24px rgba(25, 50, 86, .55); }

/* ---------- comfort ---------- */
.comfort { padding: 120px var(--margine); }
.comfort-in { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; }
.comfort .titolo { margin: 18px 0 34px; }
.dotazioni { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.dotazioni li { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-top: 1px solid #e3d9c9; font: 500 22px/1.2 var(--sans); color: var(--inchiostro); }
.dotazioni li:nth-child(-n+2) { border-top: 0; }
.dotazioni .cerchio { display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 56px; border: 1px solid rgba(109, 173, 180, .6); border-radius: 50%; background: #fff; }
.dotazioni svg { width: 28px; height: 28px; }

/* ---------- galleria ---------- */
.galleria { display: flex; flex-wrap: wrap; gap: 5px; }
.galleria a { position: relative; display: block; overflow: hidden; background: var(--sabbia); }
.galleria img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.carosello-pista img, .collage img, .foto-piena, .scheda img, .galleria a { cursor: zoom-in; }
.galleria a::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .25); opacity: 0; transition: opacity .3s; }
.galleria a:hover::after, .galleria a:focus-visible::after { opacity: 1; }

/* ---------- fasce "prenota" ---------- */
.fascia-prenota { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 410px; padding: 0 var(--margine); color: #fff; }
.fascia-prenota .titolo { position: relative; max-width: 700px; color: #fff; }
.fascia-azione { position: relative; text-align: center; }
.fascia-prenota.foto { background: url("../img/hotel-praia-a-mare-41-1600.webp") center / cover; }
.fascia-prenota.foto::before { content: ""; position: absolute; inset: 0; background: rgba(41, 40, 40, .47); }
.fascia-prenota.onde { background: var(--notte); }
.fascia-prenota.onde::before { content: ""; position: absolute; inset: 0; background: url("../img/pattern-diagonale-acqua.png"); opacity: .06; }
.fascia-prenota.onde .titolo { padding-left: 35px; max-width: 665px; }

/* ---------- pacchetti ---------- */
.pacchetti { padding: 75px var(--margine); text-align: center; }
.pacchetti .intro { max-width: 820px; margin: 28px auto 36px; }
.schede { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; }
.scheda { display: flex; flex-direction: column; padding: 0 0 32px; background: #fff; box-shadow: 0 24px 50px -32px rgba(25, 50, 86, .45); transition: transform .25s, box-shadow .25s; }
.scheda:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -30px rgba(25, 50, 86, .5); }
.scheda-foto { position: relative; overflow: hidden; }
.scheda-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.scheda-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(25, 50, 86, 0) 45%, rgba(25, 50, 86, .82) 100%); pointer-events: none; }
.giorni { position: absolute; left: 22px; bottom: 16px; z-index: 1; display: flex; align-items: baseline; gap: 10px; font: 600 14px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #fff; pointer-events: none; }
.giorni strong { font: 500 84px/1 var(--serif); letter-spacing: -.03em; text-transform: none; }
.scheda h3 { margin: 28px 32px 0; font: 500 34px/1.05 var(--serif); letter-spacing: -.02em; color: var(--notte); }
.scheda > p { margin: 14px 32px 18px; font-size: 16px; line-height: 1.6; }
.scheda .elenco { margin: 0 32px 26px; }
.elenco li { padding: 11px 0 11px 26px; border-top: 1px solid #ece4d6; font-size: 16px; line-height: 1.45; color: #1f2433; }
.elenco li::before { top: 14px; }
.elenco li:first-child { border-top: 0; }
.elenco li + li { margin-top: 0; }
.elenco li.eredita { font-weight: 600; color: var(--oro); }
.elenco li.eredita::before { background: var(--oro); }
.scheda .bottone { display: block; margin: auto 32px 0; }
.pacchetti .nota { margin-top: 40px; }

/* ---------- bimbi ---------- */
.bimbi { padding: 100px var(--margine); text-align: center; }
.bimbi .titolo { max-width: 760px; margin: 16px auto; }
.bimbi .sotto { max-width: 620px; margin: 0 auto 56px; font-size: 18px; line-height: 1.6; }
.bimbi-griglia { display: grid; grid-template-columns: 1.15fr 1fr; text-align: left; box-shadow: 0 30px 60px -30px rgba(25, 50, 86, .35); }
.bimbi-si { padding: 56px 56px 60px; background: var(--notte); color: #fff; }
.bimbi-no { padding: 56px 48px 60px; background: #fff; }
.bimbi h3 { margin-bottom: 30px; font: 500 30px/1.15 var(--serif); color: var(--inchiostro); }
.bimbi-si h3 { color: #fff; }
.bimbi-griglia li { display: flex; gap: 14px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 17px; line-height: 1.55; }
.bimbi-no li { border-top-color: #ece4d6; color: #4a5060; }
.bimbi .ico { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 3px; }
.bimbi-si .ico { color: var(--acqua); }
.bimbi-no .ico { color: #b0a493; }
.bollino { display: inline-block; margin-bottom: 14px; padding: 6px 10px; background: var(--acqua); color: var(--notte); font: 700 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.bimbi-no .bollino { background: var(--carta); color: #6b6250; }
.bimbi-azione { margin-top: 44px; }

/* ---------- recensioni ---------- */
.recensioni { padding: 70px var(--margine) 14px; text-align: center; }
.citazione { font: 300 25px/30px var(--sans); color: #0e0e0e; }
.recensioni .titolo { margin: 20px 0 28px; }
.recensioni .titolo i { font-style: italic; }
.opinioni { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 86px; text-align: left; }
.opinione { display: flex; flex-direction: column; justify-content: center; padding: 50px; background: #fff; }
.stelle { display: flex; gap: 0; margin-bottom: 20px; }
.stelle svg { width: 16px; height: 16px; fill: var(--oro); }
.opinione blockquote { margin: 0; font: 400 17px/23px var(--sans); color: #000; }
.opinione cite { display: block; margin-top: 20px; font: normal 600 17px/25px var(--sans); letter-spacing: -.34px; color: var(--cielo); }
.voti { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 70px; border-top: 1px solid var(--oro); }
.voti p { padding: 50px; font: 400 17px/23px var(--sans); color: #000; }
.voti strong { margin-right: 16px; font-size: 35px; vertical-align: -3px; }

/* ---------- domande frequenti ---------- */
.faq { padding: 98px var(--margine); }
.faq .titolo { max-width: 760px; margin: 0 auto 53px; text-align: center; }
.faq-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.faq details { border-top: 1px solid #d5d8dc; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px; list-style: none; cursor: pointer; font: 400 25px/22px var(--serif); color: #000; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 13px; height: 15px; background: var(--cielo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.faq details[open] summary { color: #1f2124; }
.faq details[open] summary::after {
  background: #1f2124;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E");
}
.faq-risposta { padding: 0 25px 25px; font: 300 17px/23px var(--sans); color: #000; }

/* ---------- preventivo ---------- */
.preventivo { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 88px var(--margine); }
.preventivo-testo { padding-right: 20px; }
.preventivo-testo .titolo { margin: 20px 0 28px; }
.preventivo-testo p:last-child { font-size: 17px; line-height: 23px; color: #000; }
/* modulo: stessa struttura e comportamento di quello dei Briganti di Capalbio, colori del Blu Eden */
.modulo { display: flex; flex-direction: column; gap: 10px; }
.righe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.righe.quattro { grid-template-columns: repeat(4, 1fr); }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.etichetta { padding: 0; font: 600 13px/17px var(--sans); color: var(--inchiostro); }
.obbl { color: var(--oro); }
.campo input, .campo textarea, .scelta label {
  width: 100%; height: 44px; padding: 0 14px; border: 1px solid #e3d9c9; border-radius: 0; background: #fff;
  font: 400 15px/1.4 var(--sans); color: var(--inchiostro); -webkit-appearance: none; appearance: none;
}
.campo textarea { height: 83px; padding: 12px 14px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: #8a8f9c; opacity: 1; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--acqua); }
.campo input.data { cursor: pointer; background: #fff url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%239f7b53' stroke-width='1.6' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 38px; }
.campo input.data.active { border-color: var(--acqua); }
.scelta { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
.scelta legend { margin: 0 0 6px; white-space: nowrap; }
.scelta > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scelta label { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0; font-weight: 500; cursor: pointer; }
.scelta input, .consenso input { margin: 0; accent-color: var(--acqua); }
.consenso { display: flex; gap: 10px; font: 400 13px/17px var(--sans); color: #4a6074; }
.consenso input { flex: 0 0 auto; margin-top: 2px; }
.consenso a { font-weight: 600; color: var(--oro); text-decoration: underline; text-underline-offset: 2px; }
.invia { width: 100%; height: 53px; border: 0; border-radius: 0; background: var(--oro); color: #fff; font: 600 17px/1 var(--sans); cursor: pointer; transition: background-color .3s; }
.invia:hover, .invia:focus-visible { background: var(--inchiostro); }
.invia:disabled { opacity: .7; cursor: default; }
.campo input.errato, .campo textarea.errato, .campo .iti.errato input, .scelta.errato label { border-color: #c0392b; box-shadow: inset 0 0 0 1px #c0392b; }
.scelta.errato legend, .consenso.errato { color: #c0392b; }
.esca { position: absolute; left: -9999px; }
.modulo-esito { margin: 4px 0 0; font: 400 14px/1.55 var(--sans); color: var(--inchiostro); }
.modulo-esito:empty { display: none; }
.modulo-esito.err { color: #b3261e; }
.modulo-esito a { font-weight: 600; color: inherit; text-decoration: underline; }

/* calendario check-in / check-out (flatpickr) nello stile del sito */
.flatpickr-calendar.cal-be { font-family: var(--sans); border-radius: 0; border: 1px solid #e3d9c9; box-shadow: 0 18px 40px rgba(25, 50, 86, .14); }
.flatpickr-calendar.cal-be::before, .flatpickr-calendar.cal-be::after { display: none; }
.cal-be .flatpickr-months { background: var(--notte); padding: 6px 0; }
.cal-be .flatpickr-months .flatpickr-month { color: #fff; fill: #fff; height: 40px; }
.cal-be .flatpickr-current-month { font-size: 15px; font-weight: 600; padding-top: 10px; }
.cal-be .flatpickr-current-month span.cur-month { font-weight: 600; }
.cal-be .flatpickr-current-month input.cur-year { font-weight: 400; color: rgba(255, 255, 255, .8); }
.cal-be .flatpickr-months .flatpickr-prev-month, .cal-be .flatpickr-months .flatpickr-next-month { color: var(--oro); fill: var(--oro); top: 6px; padding: 12px 14px; }
.cal-be .flatpickr-months .flatpickr-prev-month:hover svg, .cal-be .flatpickr-months .flatpickr-next-month:hover svg { fill: #fff; }
.cal-be .flatpickr-weekdays { background: var(--carta); height: 34px; }
.cal-be span.flatpickr-weekday { color: var(--oro); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; background: transparent; }
.cal-be .flatpickr-days { border: 0; }
.cal-be .flatpickr-day { color: var(--inchiostro); border-radius: 0; font-weight: 500; }
.cal-be .flatpickr-day:hover, .cal-be .flatpickr-day:focus { background: var(--carta); border-color: var(--carta); }
.cal-be .flatpickr-day.today { border-color: var(--oro); }
.cal-be .flatpickr-day.today:hover { background: var(--carta); color: var(--inchiostro); }
.cal-be .flatpickr-day.inRange, .cal-be .flatpickr-day.inRange:hover { background: #e3f0f1; border-color: #e3f0f1; box-shadow: -5px 0 0 #e3f0f1, 5px 0 0 #e3f0f1; }
.cal-be .flatpickr-day.selected, .cal-be .flatpickr-day.startRange, .cal-be .flatpickr-day.endRange,
.cal-be .flatpickr-day.selected:hover, .cal-be .flatpickr-day.startRange:hover, .cal-be .flatpickr-day.endRange:hover { background: var(--acqua); border-color: var(--acqua); color: #fff; border-radius: 0; }
.cal-be .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .cal-be .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .cal-be .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { box-shadow: -10px 0 0 var(--acqua); }
.cal-be .flatpickr-day.flatpickr-disabled, .cal-be .flatpickr-day.prevMonthDay, .cal-be .flatpickr-day.nextMonthDay { color: rgba(36, 44, 83, .25); }
.cal-be.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { box-shadow: -2px 0 0 #e3f0f1, 5px 0 0 #e3f0f1; }

/* ---------- piede ---------- */
.piede { padding: 80px var(--margine) 21px; background: var(--notte); color: #fff; font: 400 14px/23.8px var(--sans); }
.piede-colonne { display: grid; grid-template-columns: 460px 220px 220px 1fr; gap: 20px; }
.piede-logo { width: 244px; margin-bottom: 19px; }
.piede-titolo { margin-bottom: 24px; font: 600 19px/21.85px var(--sans); letter-spacing: -.38px; color: var(--rame); }
.piede-marchio .piede-titolo { margin: 20px 0 35px; }
.social { display: flex; gap: 25px; }
.social svg { width: 16px; height: 16px; fill: #fff; }
.contatti li { display: flex; gap: 10px; align-items: center; line-height: 21px; }
.contatti li + li { margin-top: 10px; }
.contatti svg { flex: 0 0 20px; width: 20px; height: 20px; fill: #fff; }
.link-rapidi { padding-top: 10px; }
.link-rapidi li { line-height: 21px; }
.link-rapidi li + li { margin-top: 10px; }
.piede a:hover { color: var(--acqua); }
.dati-societari { text-align: right; }
.piede-fondo { display: flex; justify-content: space-between; gap: 20px; margin: 62px 0 0; padding-top: 12px; border-top: 1px solid var(--oro); line-height: 21px; }
.piede-fondo a strong { color: var(--rame); }

/* ---------- foto ingrandite: tutto lo schermo, chiusura in alto ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: var(--notte); touch-action: pan-y; }
.lightbox[hidden] { display: none; }
.lightbox img { width: 100vw; height: 100vh; height: 100dvh; object-fit: contain; opacity: 0; transition: opacity .2s; }
.lightbox img.pronta { opacity: 1; }
.lightbox-conta { position: absolute; top: 0; left: 0; z-index: 2; padding: 0 16px; line-height: 56px; font: 500 14px/56px var(--sans); letter-spacing: .08em; color: rgba(255, 255, 255, .85); }
.lightbox-chiudi {
  position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); z-index: 2;
  width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font: 300 36px/48px var(--sans);
}
.lightbox-chiudi:hover, .lightbox-chiudi:focus-visible { background: var(--oro); }
.lightbox-freccia { position: absolute; top: 50%; z-index: 2; width: 52px; height: 52px; margin-top: -26px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .4); }
.lightbox-freccia:hover, .lightbox-freccia:focus-visible { background: var(--oro); }
.lightbox-freccia svg { width: 22px; height: 22px; margin: auto; fill: #fff; }
.lightbox-freccia.indietro { left: 10px; }
.lightbox-freccia.avanti { right: 10px; }

/* ---------- prefisso telefonico (intl-tel-input, come i Briganti di Capalbio) ---------- */
.campo .iti { display: block; width: 100%; --iti-border-color: #e3d9c9; --iti-hover-color: var(--carta); --iti-dialcode-color: var(--inchiostro); --iti-arrow-color: var(--oro); --iti-dropdown-bg: #fff; --iti-border-width: 1px; }
.campo .iti input[type=tel] { width: 100%; }
.iti__selected-country { font-family: var(--sans); }
.iti__selected-country-primary { padding: 0 6px 0 14px; }
.iti__selected-dial-code { font-size: 15px; font-weight: 500; color: var(--inchiostro); }
.iti__dropdown-content { border-radius: 0 !important; border: 1px solid var(--sabbia) !important; box-shadow: 0 18px 40px rgba(25, 50, 86, .14) !important; font-family: var(--sans); }
.iti__search-input { font-family: inherit; font-size: 16px; height: 44px; padding: 0 12px 0 36px !important; border: 0 !important; border-bottom: 1px solid var(--sabbia) !important; border-radius: 0 !important; outline: none; color: var(--inchiostro); }
.iti__country { font-size: 14px; color: var(--inchiostro); padding: 10px 12px; }
.iti__country.iti__highlight { background: var(--carta) !important; }
.iti__dial-code { color: var(--oro) !important; }

/* ---------- tablet ---------- */
@media (max-width: 1180px) {
  .testata-nav { display: none; }
  .testata-cta { margin-left: auto; }
  .burger { display: inline-flex; }
}

@media (max-width: 1024px) {
  :root { --margine: 40px; }
  .titolo { font-size: 44px; line-height: 1.15; }
  .hero-titolo { font-size: 72px; line-height: 1.15; }
  .due-metà { gap: 40px; }
  .comfort-in { grid-template-columns: 1fr; gap: 40px; }
  .bimbi-griglia { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .schede { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .opinione { padding: 35px; }
  .faq { padding-left: 21px; padding-right: 21px; }
  .piede-colonne { grid-template-columns: 1fr 1fr; }
  .dati-societari { text-align: left; }
}

/* ---------- telefono ---------- */
@media (max-width: 767px) {
  :root { --testata: 76px; --margine: 20px; }
  body { font-size: 17px; line-height: 25.5px; }
  .titolo { font-size: 46px; line-height: 1; }
  .testata-top, .testata-cta { display: none; }
  .testata-barra { justify-content: space-between; height: var(--testata); padding: 0 10px 0 20px; }
  .testata-logo img { width: 140px; }
  body { padding-bottom: 62px; }
  .pagina-grazie { padding-bottom: 0; }
  .barra-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(3, 1fr); padding-bottom: env(safe-area-inset-bottom); background: var(--notte); }
  .pagina-grazie .barra-mobile { display: none; }
  .barra-mobile a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 62px; padding: 8px 6px; font: 600 12.5px/1.15 var(--sans); text-align: center; color: #fff; }
  .barra-wa { background: var(--oliva); }
  .barra-prenota { background: var(--oro); }
  .barra-chiama { background: var(--notte); }
  html.menu-bloccato .barra-mobile { display: none; }

  .hero { height: 588px; margin-bottom: 0; text-align: center; }
  .hero-testo { padding: 50px 20px 0; }
  .hero .occhiello { font-size: 13px; }
  .hero-titolo { margin-top: 10px; font-size: 47px; line-height: 1.1; }
  .hero-sotto { margin: 18px 0 25px; font-size: 17px; line-height: 25.5px; }

  .carosello { padding: 0 0 8px; clip-path: none; }
  .carosello-pista img { flex-basis: 50%; width: 50%; }
  .carosello-freccia.indietro { left: 0; }
  .carosello-freccia.avanti { right: 0; }

  .sezione { padding: 50px 20px; }
  .adulti .titolo { max-width: 300px; margin: 20px auto 53px; }
  .tre-colonne { grid-template-columns: 1fr; gap: 34px; }
  .punto h3 { font-size: 30px; }
  .punto h3::after { width: 53px; margin: 15px auto 8px; }
  .punto p { font-size: 18px; line-height: 30px; }

  .due-metà { grid-template-columns: 1fr; gap: 50px; min-height: 0; padding-top: 50px; padding-bottom: 50px; }
  .due-metà .metà-foto { order: -1; }
  .famiglia, .colazione { padding-top: 0; }
  .foto-piena { height: 190px; }
  .collage { height: 290px; }
  .collage::before { top: 18px; right: -8px; }
  .due-metà .metà-testo { padding: 0; }
  .collage { margin-bottom: 10px; }
  .collage .foto-piccola { width: 62%; border-width: 6px; }
  .metà-testo .titolo { font-size: 40px; margin-bottom: 28px; }
  .colazione .metà-testo { text-align: center; }
  .colazione .metà-testo .titolo { font-size: 46px; }
  .colazione .metà-testo p:not(.occhiello) { font-size: 18px; line-height: 30px; }

  .comfort { padding: 55px var(--margine) 60px; }
  .comfort .titolo { margin: 14px 0 26px; }
  .dotazioni { grid-template-columns: 1fr; }
  .dotazioni li:nth-child(2) { border-top: 1px solid #e3d9c9; }
  .dotazioni li { padding: 14px 0; font-size: 19px; }
  .dotazioni .cerchio { width: 48px; height: 48px; flex-basis: 48px; }

  .galleria { gap: 3px; }

  .fascia-prenota { grid-template-columns: 1fr; gap: 43px; justify-items: center; padding: 52px 20px; text-align: center; }
  .fascia-prenota.foto .titolo { font-size: 56px; }
  .fascia-prenota.onde { gap: 8px; padding: 40px 25px; min-height: 0; }
  .fascia-prenota.onde .titolo { padding-left: 0; }
  .fascia-prenota.onde .bottone { width: 156px; padding: 15px; font-size: 13px; line-height: 13px; }

  .pacchetti { padding: 50px var(--margine); }
  .pacchetti .intro { margin: 33px 0 35px; font-size: 18px; line-height: 30px; }
  .scheda { padding: 0 0 24px; }
  .scheda h3 { margin: 22px 20px 0; font-size: 30px; }
  .scheda > p { margin: 12px 20px 16px; font-size: 17px; line-height: 23.8px; }
  .scheda .elenco { margin: 0 20px 22px; }
  .scheda .bottone { margin: auto 20px 0; }
  .giorni strong { font-size: 68px; }
  .pacchetti .nota { margin-top: 35px; font-size: 18px; line-height: 30px; }

  .bimbi { padding: 60px var(--margine); }
  .bimbi .sotto { margin-bottom: 36px; font-size: 17px; }
  .bimbi-si, .bimbi-no { padding: 36px 24px; }
  .bimbi h3 { font-size: 26px; }

  .recensioni { padding: 70px 21px 28px; }
  .citazione { font-size: 17px; line-height: 25.5px; }
  .recensioni .occhiello { text-align: left; }
  .opinioni { grid-template-columns: 1fr; gap: 25px; margin-top: 70px; }
  .voti { grid-template-columns: 1fr; margin-top: 35px; padding: 25px; border: 1px solid var(--oro); gap: 35px; }
  .voti p { padding: 0; }

  .faq { padding: 28px 21px 50px; }
  .faq .titolo { margin-bottom: 40px; }
  .faq-colonne { grid-template-columns: 1fr; gap: 0; }
  .faq summary { font-size: 25px; line-height: 30px; }
  .faq-risposta { line-height: 22.1px; }

  .preventivo { grid-template-columns: 1fr; gap: 25px; padding: 50px 20px; }
  .preventivo-testo { padding: 0; }
  .preventivo-testo .occhiello, .preventivo-testo .titolo { text-align: center; }
  .righe.quattro { grid-template-columns: 1fr 1fr; }
  .largo-tel { grid-column: 1 / -1; }   /* email e telefono su una riga intera, come i Briganti */
  .campo input, .campo textarea { font-size: 16px; }

  .piede { padding: 25px 25px 30px; text-align: center; }
  .piede-colonne { grid-template-columns: 1fr; gap: 45px; }
  .piede-colonne > div:nth-child(3) { display: none; }
  .contatti svg { flex-basis: 14px; width: 14px; height: 14px; }
  .piede-logo { width: 180px; margin: 0 auto 19px; }
  .social { justify-content: center; }
  .contatti li { justify-content: center; }
  .dati-societari { text-align: center; }
  .piede-fondo { flex-direction: column; align-items: center; margin: 40px 0 0; padding-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carosello-pista, .galleria img { transition: none; }
}

/* ---------- pagina di conferma (thank-you) ---------- */
/* ---------- pagina di ringraziamento (stesso schema dei Briganti) ---------- */
.ty { padding: 48px var(--margine) 0; }
.ty-box { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: min(620px, 72vh); padding: 56px 40px 110px; background: var(--notte); color: #fff; text-align: center; }
.ty-box::before { content: ""; position: absolute; inset: 0; background: url("../img/pattern-diagonale-acqua.png"); opacity: .06; }
.ty-box > * { position: relative; }
.ty-check { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin: 0 auto 26px; border-radius: 50%; background: var(--acqua); color: var(--notte); animation: ty-pop .42s cubic-bezier(.2, .8, .2, 1.2) both; }
.ty-check path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: ty-segno .42s .26s ease-out forwards; }
@keyframes ty-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ty-segno { to { stroke-dashoffset: 0; } }
.ty-box .titolo { margin-top: 14px; font-size: 64px; color: #fff; }
.ty-key { max-width: 30em; margin: 24px auto 0; font-size: 21px; line-height: 1.5; color: rgba(255, 255, 255, .92); text-wrap: balance; }
.giu { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; color: var(--acqua); animation: ty-giu 1.8s ease-in-out infinite; }
.ty-box .giu { position: absolute; left: 50%; bottom: 26px; margin-left: -24px; border: 1.5px solid rgba(109, 173, 180, .55); }
.giu.chiaro { margin: 26px auto 34px; border: 1.5px solid rgba(159, 123, 83, .4); color: var(--oro); }
@keyframes ty-giu { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.ty-ponte { padding: 72px var(--margine) 0; text-align: center; scroll-margin-top: calc(var(--testata) + 10px); }
.ty-ponte .titolo { max-width: 820px; margin: 0 auto; font-size: 44px; line-height: 1.1; }
.ty-scelte { padding: 0 var(--margine) 100px; scroll-margin-top: calc(var(--testata) + 10px); }
.ty-carte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ty-carta { display: flex; flex-direction: column; gap: 14px; padding: 32px; background: var(--sabbia); }
.ty-ico { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--oro); }
.ty-carta h3 { font: 500 28px/1.15 var(--serif); color: var(--inchiostro); }
.ty-carta p { flex: 1; font-size: 16px; line-height: 1.65; }
.ty-carta .bottone { display: block; }
.ty-wa { background: var(--oliva); }
.ty-chiama { background: var(--notte); }
.ty-home { margin-top: 40px; text-align: center; }
.ty-home a { font-weight: 600; color: var(--inchiostro); text-decoration: underline; text-underline-offset: 4px; }
.ty-home a:hover { color: var(--oro); }
@media (max-width: 1024px) {
  .ty-carte { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
}
@media (max-width: 767px) {
  .ty { padding: 12px 12px 0; }
  .ty-box { min-height: calc(100svh - var(--testata) - 24px); padding: 40px 22px 104px; }
  .ty-check { width: 76px; height: 76px; margin-bottom: 22px; }
  .ty-box .titolo { font-size: 46px; }
  .ty-key { font-size: 19px; }
  .ty-ponte { padding-top: 48px; }
  .ty-ponte .titolo { font-size: 32px; }
  .ty-scelte { padding-bottom: 64px; }
  .ty-carta { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) { .ty-check, .ty-check path, .giu { animation: none; stroke-dashoffset: 0; } }