:root {

  --bg: #0b1220;

  --panel: #0f172aee;

  --text: #e8ecf3;

  --muted: #a6b1c2;

  --brand: #e6b800;

  --brand-2: #8bc6ec;
  --brand-3: #9599E2;
  --ring: #e6b8007a;
  --glass: blur(10px) saturate(120%);
  --radius: 24px;
  --shadow: 0 10px 30px rgb(0 0 0 / .35);
  --grid-gap: clamp(16px, 1.5vw, 28px);
  --wrap: min(1100px, 92vw);
}


:root {
  color-scheme: dark;
}


* {

  box-sizing: border-box

}



html {

  scroll-behavior: smooth

}



body {

  margin: 0;

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;

  color: var(--text);

  background: linear-gradient(180deg, #131f36);

}



img {

  max-width: 100%;

  display: block

}



a {

  color: inherit;

  text-decoration: none

}



h1,

h2,

h3 {

  font-family: "Playfair Display", serif;

  line-height: 1.1;

  letter-spacing: .2px;

  margin: 0 0 .6em

}



p {

  line-height: 1.7;

  margin: 0 0 1em

}



.wrap {

  width: var(--wrap);

  margin-inline: auto

}



.grid {

  display: grid;

  gap: var(--grid-gap)

}



.card {

  background: var(--panel);

  border: 1px solid #ffffff20;

  border-radius: var(--radius);

  box-shadow: var(--shadow)

}



.card.padded {

  padding: clamp(18px, 2.4vw, 34px)

}



.section-gap {

  margin-block: clamp(36px, 5vw, 72px)

}



.btn {

  display: inline-flex;

  align-items: center;

  gap: .6rem;

  padding: .85rem 1.15rem;

  border-radius: 999px;

  font-weight: 600;

  background: linear-gradient(135deg, var(--brand), #ffd166);

  color: #222;

  box-shadow: var(--shadow);

  transition: transform .2s ease

}



.btn:hover {

  transform: translateY(-2px)

}



.btn.alt {

  background: linear-gradient(135deg, var(--brand-2), var(--brand-3));

  color: #0b1220

}



.btn.whatsapp {

  background: linear-gradient(135deg, #25d366, #128c7e);

  color: #fff

}



.btn.whatsapp svg {

  width: 1.1rem;

  height: 1.1rem

}



.contact-actions {

  display: flex;

  flex-wrap: wrap;

  gap: .75rem;

  margin-top: 12px

}



/* ===== Header / Nav (uniforme con le altre pagine) ===== */

header {

  position: sticky;

  top: 0;

  z-index: 50;

  border-bottom: 1px solid #ffffff1a;

  background: linear-gradient(180deg, rgb(15 23 42 /.75), transparent);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px)

}



.nav {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: .75rem 0;

  position: relative

}



.brand {

  display: flex;

  align-items: center;

  gap: .8rem;

  font-weight: 800

}



.brand .logo-img {

  height: 42px;

  width: auto;

  border-radius: 12px

}



.nav ul {

  display: flex;

  gap: 1rem;

  list-style: none;

  padding: 0;

  margin: 0

}



.nav a {

  opacity: .9

}



.nav a:hover {

  opacity: 1

}



/* Mobile menu */

.menu-toggle {

  appearance: none;

  border: 1px solid #ffffff26;

  background: #ffffff14;

  color: var(--text);

  height: 40px;

  width: 46px;

  border-radius: 10px;

  display: grid;

  place-items: center;

  cursor: pointer

}



.menu-toggle[aria-expanded="true"] {

  box-shadow: 0 0 0 3px var(--ring)

}



@media (max-width: 879.98px) {

  .menu-toggle {

    display: grid

  }



  .nav ul {

    position: absolute;

    top: calc(100% + 8px);

    right: 0;

    flex-direction: column;

    width: min(86vw, 320px);

    background: var(--panel);

    border: 1px solid #ffffff24;

    border-radius: 16px;

    padding: .6rem;

    display: none;

    box-shadow: var(--shadow)

  }



  .nav ul.open {

    display: flex

  }



  .nav ul li a {

    display: block;

    padding: .7rem .8rem;

    border-radius: 10px

  }



  .nav ul li a:active {

    background: #ffffff12

  }

}



@media (min-width:880px) {

  .menu-toggle {

    display: none

  }

}



/* ===== Hero ===== */

.hero {

  position: relative

}



.hero::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -2;

  background-image:

    linear-gradient(to bottom, rgba(11, 18, 32, 0) 70%, #131f36), url('foto/foto1.jpg');

  background-size: cover;

  background-position: center 35%;

  background-repeat: no-repeat;

  filter: contrast(1.05) brightness(.8) saturate(1.05);

}



.hero::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  background: linear-gradient(180deg, #0006, #0005 35%, #131f36 85%)

}



.hero .wrap {

  min-height: clamp(360px, 52vh, 640px);

  display: grid;

  align-items: end;

  padding: clamp(64px, 9vh, 120px) 0

}



/* ===== Layout principale (2 colonne -> 1 col su mobile) ===== */

@media (max-width:900px) {

  .cols {

    grid-template-columns: 1fr

  }

}



/* ===== Widget AmicHotel: stile coerente e responsive ===== */

.ah-be-form {

  background: var(--panel) !important;

  color: var(--text) !important;

  font-family: Inter, system-ui, sans-serif;

  font-size: 16px;

  border-radius: var(--radius);

  padding: 16px

}



/* Griglia interna del widget */

.ah-be-divPulsanti1 {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 12px;

  align-items: end

}



.ah-be-divCerca {

  grid-column: 1/-1;

}



@media (max-width:900px) {

  .ah-be-divPulsanti1 {

    grid-template-columns: 1fr 1fr

  }

}



@media (max-width:560px) {

  .ah-be-divPulsanti1 {

    grid-template-columns: 1fr

  }

}



/* Box dei campi */

.ah-be-divfrom,

.ah-be-divto,

.ah-be-divRooms,

.ah-be-divAdultsRoom1,

.ah-be-divChildrenRoom1,

.ah-be-divChildrenAgeRoom1,

.ah-be-divAdultsRoom2,

.ah-be-divChildrenRoom2,

.ah-be-divChildrenAgeRoom2,

.ah-be-divAdultsRoom3,

.ah-be-divChildrenRoom3,

.ah-be-divChildrenAgeRoom3 {

  background: var(--panel);

  border: 1px solid #ffffff20;

  border-radius: 14px;

  padding: 10px 12px;

  box-shadow: inset 0 0 0 1px #00000033

}



/* Etichette e input coerenti su fondo scuro */

.ah-be-form label {

  font-weight: 600;

  letter-spacing: .2px;

  opacity: .95;

  color: black;

}



.ah-be-form input,

.ah-be-form select {

  background: #000000;

  -webkit-text-fill-color: black !important;

  border: 1px solid #ffffff2b;

  border-radius: 10px;

  padding: 10px 12px;

  font-size: 16px;

  width: 100%;

  outline: none;

  appearance: none;

  text-shadow: none

}



.ah-be-dropdownlist {

  color: var(--text) !important

}



.ah-be-dropdownlist option {

  background: #0f172a;

  color: var(--text)

}



.ah-be-form input:focus,

.ah-be-form select:focus {

  box-shadow: 0 0 0 3px var(--ring)

}



.icoCalendar {

  color: var(--muted)

}



.ah-be-labelErrore {

  color: #ef4444;

  font-weight: 700

}



.ah-be-divRooms {

  display: none !important

}



.ah-be-btnRicerca {

  background: linear-gradient(135deg, var(--brand), #ffd166) !important;

  color: #222 !important;

  border: 0 !important;

  border-radius: 999px !important;

  padding: .9rem 1.15rem !important;

  font-weight: 700 !important;

  font-size: 1rem !important;

  box-shadow: var(--shadow) !important;

  cursor: pointer;

  width: 100%

}



.ah-be-btnRicerca:hover {

  transform: translateY(-2px);

  filter: saturate(1.05)

}



/* Aside/policies */

.policies li {
  margin: .35rem 0
}

.legal {
  display: grid;
  gap: clamp(16px, 2vw, 22px)
}

.legal-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch
}

.legal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .65rem;
  color: var(--muted)
}

.legal-list strong {
  color: var(--text)
}

.legal-box {
  border: 1px dashed #ffffff30;
  border-radius: 18px;
  padding: 1rem 1.25rem;
  background: #ffffff08
}

.legal-actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .6rem
}

.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(1040px, 94vw);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  background: var(--panel);
  border: 1px solid #ffffff24;
  border-radius: 18px;
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  z-index: 80;
  opacity: 1;
  transition: opacity .25s ease, transform .25s ease
}

.cookie-banner.hide {
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none
}

.cookie-title {
  margin: 0 0 .25rem;
  font-weight: 700
}

.cookie-copy {
  margin: 0 0 .5rem;
  color: var(--muted)
}

.cookie-link {
  color: var(--brand);
  font-weight: 700;
  text-decoration: underline
}

.cookie-actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: flex-end
}

.cookie-primary,
.cookie-secondary {
  padding: .7rem 1rem;
  font-size: .95rem
}

.cookie-options {
  display: grid;
  gap: .6rem;
  margin: .6rem 0;
}

.cookie-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem;
  align-items: center;
  padding: .7rem .9rem;
  border-radius: 14px;
  background: #ffffff0a;
  border: 1px solid #ffffff1f;
  cursor: pointer;
  position: relative;
}

.cookie-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle-box {
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #ffffff1a;
  border: 1px solid #ffffff30;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  transition: background .2s ease;
}

.toggle-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-2), var(--brand-3));
  transform: translateX(0);
  transition: transform .2s ease;
  box-shadow: 0 4px 10px rgb(0 0 0 / .2);
}

.cookie-toggle input:checked + .toggle-box {
  background: #ffffff26;
}

.cookie-toggle input:checked + .toggle-box .toggle-dot {
  transform: translateX(18px);
}

.toggle-label {
  display: grid;
  gap: 2px;
  font-weight: 700;
}

.toggle-label small {
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
}

.cookie-fab {
  position: fixed;
  left: 18px;
  bottom: 18px;
  padding: .75rem 1rem;
  border-radius: 999px;
  border: 1px solid #ffffff26;
  background: linear-gradient(135deg, var(--brand-2), var(--brand-3));
  color: #0b1220;
  box-shadow: var(--shadow);
  cursor: pointer;
  font-weight: 700;
  z-index: 78;
}

.cookie-fab:focus-visible {
  outline: none;
  box-shadow: var(--ring)
}

@media (max-width: 780px) {
  .legal-grid {
    grid-template-columns: 1fr
  }

  .cookie-banner {
    grid-template-columns: 1fr;
    align-items: flex-start
  }

  .cookie-actions {
    justify-content: flex-start
  }
}

/* Footer */
footer {
  opacity: .75;
  padding: 28px 0
}