/* ===============================
   CRAZYLOVE – STYLE.CSS (FULL RED • PREMIUM)
   =============================== */

:root{
  --bg:#07060b;
  --bg2:#0b0912;

  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.12);

  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);

  /* FULL RED LUXURY */
  --accent:#ff004c;
  --accent2:#ff2b2b;
  --accent3:#b3001b;

  --radius:18px;
  --radius2:22px;

  --shadow:0 18px 60px rgba(0,0,0,.55);
  --shadow2:0 22px 70px rgba(0,0,0,.62);
}

*{ box-sizing:border-box; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.cookie[hidden],
.navpanel[hidden]{
  display:none !important;
}

html,body{
  margin:0;
  padding:0;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(255,0,76,.18), transparent 60%),
    radial-gradient(900px 600px at 80% 10%, rgba(255,43,43,.14), transparent 55%),
    radial-gradient(900px 650px at 50% 80%, rgba(179,0,27,.16), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap{ width:min(1160px,92vw); margin:0 auto; }
.dot{ opacity:.6; padding:0 .5rem; }

/* ===============================
   TOPBAR
   =============================== */
.topbar{
  background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:.55rem 0;
  font-size:.92rem;
  flex-wrap:wrap;
}
.topbar__link{
  opacity:.86;
}
.topbar__link:hover{ opacity:1; }

/* ===============================
   HEADER
   =============================== */
.header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(16px);
  background:linear-gradient(to bottom, rgba(7,6,11,.92), rgba(7,6,11,.55));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.9rem 0;
  gap:1rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  min-width: 160px;
}
.brand__logo{
  width:36px;
  height:36px;
  object-fit:contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
.brand__name{
  font-weight:800;
  letter-spacing:.06em;
  opacity:.95;
}

.nav{
  display:flex;
  gap:1rem;
  align-items:center;
}
.nav a{
  opacity:.86;
  font-weight:700;
  letter-spacing:.01em;
}
.nav a:hover{ opacity:1; }

.navbtn{
  display:none;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  padding:.55rem .75rem;
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}

/* Mobile nav panel */
.navpanel{
  padding:1rem;
  display:grid;
  gap:.85rem;
  background:rgba(7,6,11,.95);
  border-top:1px solid rgba(255,255,255,.08);
}
.navpanel a{
  opacity:.92;
  font-weight:800;
}
.navpanel a:hover{ opacity:1; }

/* ===============================
   HERO
   =============================== */
.hero{
  position:relative;
  min-height:78vh;
  display:grid;
  align-items:end;
  overflow:hidden;
}

.hero__slides{ position:absolute; inset:0; }
.hero__slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.04);
  transition: opacity 1.1s ease, transform 6s ease;
  filter: saturate(1.08) contrast(1.04);
}
.hero__slide.is-active{ opacity:1; transform:scale(1); }

/* più contrasto + vibe red */
.hero__scrim{
  position:absolute;
  inset:0;
  background:
    radial-gradient(70% 60% at 20% 20%, rgba(255,0,76,.18), transparent 60%),
    linear-gradient(to top, rgba(7,6,11,.94) 0%, rgba(7,6,11,.55) 55%, rgba(7,6,11,.18) 100%);
}

.hero__glow{
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(520px 260px at 18% 30%, rgba(255,43,43,.22), transparent 60%),
    radial-gradient(600px 280px at 82% 22%, rgba(255,0,76,.18), transparent 62%),
    radial-gradient(700px 320px at 55% 80%, rgba(179,0,27,.18), transparent 60%);
  mix-blend-mode:screen;
  opacity:.9;
  pointer-events:none;
  animation: floatGlow 10s ease-in-out infinite alternate;
}
@keyframes floatGlow{
  from{ transform: translateY(0); }
  to{ transform: translateY(-20px); }
}

.hero__content{
  position:relative;
  padding:3.2rem 0 2.1rem;
}

.badge{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.48rem .82rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  font-size:.92rem;
  font-weight:750;
  box-shadow: 0 16px 50px rgba(0,0,0,.45);
}

h1{
  margin:.95rem 0 .65rem;
  font-size: clamp(2.15rem, 4.2vw, 3.55rem);
  line-height:1.06;
  letter-spacing:-.02em;
  text-shadow:
    0 18px 70px rgba(0,0,0,.75),
    0 0 30px rgba(255,0,76,.10);
}

.lead{
  max-width:52ch;
  color:var(--muted);
  font-size:1.08rem;
  line-height:1.55;
}

.hero__cta{
  display:flex;
  gap:.85rem;
  flex-wrap:wrap;
  margin:1.2rem 0 1.25rem;
}

.hero__stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:.9rem;
  margin-top:1.2rem;
}
.stat{
  padding:1rem 1.05rem;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.50);
}
.stat__k{
  font-size:1.35rem;
  font-weight:900;
}
.stat__v{
  color:var(--muted);
  line-height:1.45;
}

/* ===============================
   BUTTONS (ULTRA LUXURY)
   =============================== */
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;

  padding:.95rem 1.15rem;
  border-radius:999px;

  font-weight:900;
  letter-spacing:.01em;
  color:rgba(255,255,255,.95);

  background:
    radial-gradient(120% 140% at 20% 10%, rgba(255,0,76,.35), transparent 55%),
    radial-gradient(120% 140% at 80% 0%, rgba(255,43,43,.28), transparent 60%),
    linear-gradient(135deg, rgba(255,0,76,.22), rgba(179,0,27,.26));

  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,0,76,.12) inset;

  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, background .18s ease;
  cursor:pointer;
}

.cta:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 22px 70px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,0,76,.18) inset;
}

.cta:active{ transform: translateY(-1px) scale(.99); }

.cta--ghost{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.cta--ghost:hover{
  background: rgba(255,255,255,.08);
}

.btn, .btnlite{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:.62rem .92rem;
  border-radius:999px;

  font-weight:900;
  color:rgba(255,255,255,.92);

  background: rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 34px rgba(0,0,0,.45);

  transition: transform .16s ease, background .16s ease, border-color .16s ease;
  cursor:pointer;
}

.btn:hover, .btnlite:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,0,76,.22);
}

.btn:active, .btnlite:active{
  transform: translateY(0) scale(.99);
}

/* focus accessibile */
.cta:focus-visible,
.btn:focus-visible,
.btnlite:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(255,0,76,.30),
    0 18px 60px rgba(0,0,0,.55);
}

/* ===============================
   SECTIONS
   =============================== */
.section{ padding:3.2rem 0; }
.section--dark{
  background:
    radial-gradient(600px 260px at 15% 15%, rgba(255,0,76,.09), transparent 60%),
    rgba(255,255,255,.02);
}
.section__head{ margin-bottom:1.2rem; }

h2{
  margin:0 0 .45rem;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  letter-spacing:-.01em;
}

.muted{
  color:var(--muted);
  line-height:1.55;
}

/* ===============================
   LAYOUT / CARDS
   =============================== */
.grid2{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:1.3rem;
  align-items:stretch;
}

.card{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow);
}

.card--photo{
  min-height:320px;
  background-size:cover;
  background-position:center;
  overflow:hidden;
  position:relative;
}

.card--photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top, rgba(7,6,11,.88), transparent 65%),
    radial-gradient(60% 50% at 20% 20%, rgba(255,0,76,.16), transparent 60%);
  pointer-events:none;
}

.card__overlay{
  position:absolute;
  inset:auto 0 0 0;
  padding:1.1rem;
}
.card__title{ font-weight:900; font-size:1.1rem; }
.card__sub{ color:var(--muted); line-height:1.45; }

.pillrow{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:1rem;
}
.pill{
  padding:.45rem .75rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.86);
  font-weight:800;
}

/* ===============================
   SUITES
   =============================== */
.cards3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1rem;
}

.suite{
  border-radius: var(--radius2);
  overflow:hidden;
  background: rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 70px rgba(0,0,0,.58);
}

.suite__img{
  height:230px;
  background-size:cover;
  background-position:center;
  filter: saturate(1.12) contrast(1.06);
  position:relative;
}

.suite__img::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top, rgba(7,6,11,.82), rgba(7,6,11,.00) 60%),
    radial-gradient(60% 50% at 20% 20%, rgba(255,0,76,.18), transparent 60%);
  pointer-events:none;
}

.suite__body{ padding:1.05rem 1.05rem 1.15rem; }
.suite__body h3{ margin:.2rem 0 .35rem; font-size:1.15rem; letter-spacing:-.01em; }
.suite__body p{ margin:0; color:var(--muted); line-height:1.55; }

.suite__actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  margin-top:1rem;
}

.link{
  opacity:.95;
  font-weight:900;
}
.link:hover{
  text-decoration: underline;
}

/* Note */
.note{
  margin-top:1.2rem;
  padding:1rem 1.1rem;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius2);
}

/* ===============================
   FEATURES
   =============================== */
.features{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1rem;
}
.feature{
  padding:1.1rem;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.icon{ font-size:1.4rem; }
.feature h3{ margin:.6rem 0 .3rem; font-size:1.05rem; }
.feature p{ margin:0; color:var(--muted); line-height:1.55; }

.ctaBand{
  margin-top:1.4rem;
  padding:1.2rem;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(500px 220px at 20% 20%, rgba(255,0,76,.12), transparent 60%),
    radial-gradient(500px 220px at 80% 30%, rgba(255,43,43,.10), transparent 60%),
    rgba(255,255,255,.04);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.ctaBand__title{ font-weight:950; font-size:1.15rem; }
.ctaBand__sub{ color:var(--muted); line-height:1.45; }

/* ===============================
   GALLERY
   =============================== */
.gallery{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:.8rem;
}
.g{
  grid-column: span 4;
  min-height:180px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  background-size:cover;
  background-position:center;
  display:block;
  overflow:hidden;
  position:relative;
}

.g::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top, rgba(7,6,11,.65), transparent 65%),
    radial-gradient(60% 50% at 20% 20%, rgba(255,0,76,.10), transparent 60%);
  opacity:.9;
  pointer-events:none;
}

.g:hover{ transform: translateY(-2px); }

/* ===============================
   CONTACTS / FORM
   =============================== */
.contactCard{
  padding:1.1rem;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  display:grid;
  gap:.75rem;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.biglink{
  font-weight:950;
  font-size:1.05rem;
  opacity:.96;
}
.biglink:hover{ opacity:1; }

.form{
  padding:1.2rem;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
}
.form__title{
  font-weight:950;
  font-size:1.2rem;
  margin-bottom:1rem;
}
.field{
  display:grid;
  gap:.45rem;
  margin-bottom:.9rem;
}
.field span{
  color:rgba(255,255,255,.84);
  font-weight:900;
  font-size:.92rem;
}
input,select,textarea{
  width:100%;
  padding:.9rem 1rem;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(120% 160% at 20% 0%, rgba(255,0,76,.10), transparent 55%),
    rgba(7,6,11,.62);
  color:var(--text);
  outline:none;
  transition: border-color .16s ease, background .16s ease;
}
input:hover,select:hover,textarea:hover{
  border-color: rgba(255,0,76,.22);
}
textarea{ resize: vertical; }

.check{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  margin:.8rem 0 1rem;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.4;
}
.check a{ text-decoration: underline; }
.form__actions{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
}

.tiny{ font-size:.88rem; }
.mini{
  margin-top:1rem;
  color: rgba(255,255,255,.72);
}
.mini a{
  text-decoration: underline;
  opacity:.9;
}
.mini a:hover{ opacity:1; }

/* ===============================
   FOOTER
   =============================== */
.footer{
  border-top:1px solid rgba(255,255,255,.10);
  padding:1.4rem 0;
  background:rgba(255,255,255,.02);
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  color: rgba(255,255,255,.78);
}
.footer__links{
  display:flex;
  gap:1rem;
  align-items:center;
}
.linkbtn{
  background:none;
  border:none;
  color: rgba(255,255,255,.86);
  cursor:pointer;
  font-weight:900;
}
.linkbtn:hover{ text-decoration: underline; }

/* ===============================
   FLOATING WHATSAPP
   =============================== */
.fab{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:60;

  padding:.9rem 1.1rem;
  border-radius:999px;

  background:
    radial-gradient(120% 140% at 20% 10%, rgba(255,0,76,.34), transparent 55%),
    linear-gradient(135deg, rgba(255,0,76,.22), rgba(179,0,27,.28));

  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 22px 80px rgba(0,0,0,.68);
  font-weight:950;
}
.fab:hover{ transform: translateY(-2px); }

/* ===============================
   COOKIE BANNER
   =============================== */
.cookie{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:end center;
  padding:16px;
  background:rgba(0,0,0,.55);
}
.cookie__box{
  width:min(820px, 96vw);
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(120% 160% at 20% 0%, rgba(255,0,76,.10), transparent 55%),
    rgba(7,6,11,.94);
  backdrop-filter: blur(14px);
  padding:1.1rem;
  box-shadow: 0 24px 90px rgba(0,0,0,.75);
}
.cookie__title{
  font-weight:950;
  font-size:1.1rem;
  margin-bottom:.35rem;
}
.cookie__text{
  color:var(--muted);
  margin:.45rem 0 1rem;
  line-height:1.55;
}
.cookie__text a{ text-decoration: underline; }
.cookie__actions{
  display:flex;
  justify-content:flex-end;
  gap:.7rem;
  flex-wrap:wrap;
}

/* ===============================
   RESPONSIVE (UPDATED)
   =============================== */

@media (max-width: 980px){
  .grid2{ grid-template-columns:1fr; }
  .cards3{ grid-template-columns:1fr; }
  .features{ grid-template-columns:1fr 1fr; }
  .hero__stats{ grid-template-columns:1fr; max-width:520px; }
  .gallery .g{ grid-column: span 6; }
}

/* MOBILE */
@media (max-width: 720px){

  .nav{ display:none; }
  .navbtn{ display:inline-flex; }

  .topbar__inner{
    flex-direction:column;
    align-items:flex-start;
    gap:.35rem;
    padding:.6rem 0;
  }

  .topbar__left{
    display:flex;
    flex-wrap:wrap;
    gap:.55rem .8rem;
    width:100%;
  }
  .topbar__right{
    width:100%;
    display:flex;
    justify-content:flex-start;
  }

  .topbar__link{
    opacity:.92;
    font-weight:800;
    font-size:.93rem;
  }
  .dot{ display:none; }

  .header__inner{
    padding:.75rem 0;
  }

  .navpanel{
    position:fixed;
    left:0;
    right:0;
    top:0;
    z-index:70;

    padding: calc(56px + 48px) 16px 16px;

    background: rgba(7,6,11,.96);
    border-top: none;
    border-bottom: 1px solid rgba(255,255,255,.10);

    max-height: 100vh;
    overflow:auto;
  }

  .navpanel a{
    padding:.85rem .9rem;
    border-radius:16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
  }

  .navpanel a:hover{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,0,76,.22);
  }

  .hero{ min-height:72vh; }
  .gallery .g{ grid-column: span 12; }
  .features{ grid-template-columns:1fr; }
}

/* ===============================
   FIX CLICK + TESTI (HERO / OVERLAY)
   =============================== */
.hero { position: relative; }
.hero__slides { position:absolute; inset:0; z-index:0; }

.hero__scrim{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.hero__glow{
  position:absolute;
  inset:-30%;
  z-index:2;
  pointer-events:none;
}

.hero__content{
  position:relative;
  z-index:3;
}

.hero__slide{ pointer-events:none; }

.card__overlay{
  position:absolute;
  inset:auto 0 0 0;
  padding:1.15rem;
  background: linear-gradient(to top, rgba(7,6,11,.88), rgba(7,6,11,.00));
}

.card__title{ text-shadow: 0 10px 30px rgba(0,0,0,.75); }
.card__sub{ text-shadow: 0 10px 30px rgba(0,0,0,.65); }

/* ===============================
   FIX FORM CONSENSI (MOBILE) – CLEAN
   =============================== */
.check input[type="checkbox"]{
  flex: 0 0 auto;
  margin-top:.2rem;
}

.check label,
.check .check__text{
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 720px){
  .check{
    flex-wrap:wrap;
    align-items:flex-start;
    gap:.6rem;
  }

  .check label,
  .check .check__text{
    display:block;
    width:100%;
    text-align:left;
    line-height:1.35;
  }

  .check > *:not(input){
    flex: 1 1 100%;
    min-width: 0;
  }
}