/**

 * Tal�e Pinto  �  style.css custom

 * Brand: blu profondo + oro caldo. Tipografia: Inter (corpo) + Playfair Display (titoli).

 */



:root {

  --brand-deep: #0a1f33;     /* blu notte profondo */

  --brand-blue: #14375e;     /* blu medio */

  --brand-gold: #b8902f;     /* oro caldo (AAA contrast vs bianco) */

  --brand-cream: #faf7f1;    /* crema avorio */

  --brand-ink: #1a1a1a;

  --brand-muted: #6b7a8a;

}



* { box-sizing: border-box; }



html { scroll-behavior: smooth; }



html, body {

  overflow-x: hidden;

  max-width: 100%;

}

body {

  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  color: var(--brand-ink);

  background: #ffffff;

  padding-bottom: 80px;

  width: 100%;

  overflow-x: hidden;

}



h1, h2, h3, h4, h5, .font-serif {

  font-family: 'Playfair Display', Georgia, serif;

  font-weight: 600;

  color: var(--brand-deep);

}



a { color: var(--brand-blue); }

a:hover { color: var(--brand-gold); }



/* ===== NAVBAR (SCURA) ===== */

.navbar-tal�e,

.navbar-cm {

  background: linear-gradient(180deg, #0a1f33 0%, #14375e 100%);

  border-bottom: 1px solid rgba(197, 160, 89, 0.25);

  padding-top: 22px;

  padding-bottom: 22px;

  min-height: 84px;

  box-shadow: 0 4px 20px rgba(10, 31, 51, 0.3);

}

.navbar-tal�e .navbar-brand img,

.navbar-cm .navbar-brand img {

  max-height: 60px;

  filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,0.3));

}

.navbar-tal�e .nav-link,

.navbar-cm .nav-link {

  color: #faf7f1;

  font-weight: 500;

  letter-spacing: 0.5px;

  padding: 0.6rem 0.4rem;

  transition: color 0.25s;

}

.navbar-tal�e .nav-link.active,

.navbar-tal�e .nav-link:hover,

.navbar-cm .nav-link.active,

.navbar-cm .nav-link:hover { color: var(--brand-gold); }

.navbar-tal�e .navbar-toggler,

.navbar-cm .navbar-toggler {

  font-size: 1.6rem;

  color: #faf7f1;

  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));

}



/* Bottone Prenota */

.btn-prenota {

  background: var(--brand-gold);

  color: #fff !important;

  border-radius: 50px;

  padding: 8px 22px;

  font-weight: 600;

  text-transform: uppercase;

  font-size: 0.85rem;

  letter-spacing: 1px;

  transition: all 0.25s ease;

}

.btn-prenota:hover {

  background: #b08a47;

  color: #fff !important;

  transform: translateY(-1px);

}



/* Bottoni coordinati in sezione Location (Prenota ora + Vedi mappa) */

.btn-equal {

  min-width: 200px;

  padding: 8px 22px;

  border-radius: 50px;

  font-weight: 600;

  text-transform: uppercase;

  font-size: 0.85rem;

  letter-spacing: 1px;

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  line-height: 1.4;

  transition: all 0.25s ease;

  white-space: nowrap;

}

.btn-equal.btn-prenota {

  background: var(--brand-gold);

  color: #fff !important;

}

.btn-equal.btn-prenota:hover {

  background: #b08a47;

  transform: translateY(-1px);

}

.btn-equal.btn-outline-light {

  background: transparent;

  color: #faf7f1 !important;

  border: 1px solid rgba(250,247,241,0.6);

}

.btn-equal.btn-outline-light:hover {

  background: rgba(250,247,241,0.12);

  border-color: #faf7f1;

  color: #fff !important;

  transform: translateY(-1px);

}



/* Spazio extra sotto sezione Location per staccare dal footer */

.section.bg-deep {

  padding-bottom: 6rem;

}

@media (max-width: 767.98px) {

  .section.bg-deep { padding-bottom: 4rem; }

}



/* Footer social + lang switcher */

.footer-social {

  display: flex;

  gap: 1rem;

  justify-content: center;

}

.footer-social a {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 38px;

  height: 38px;

  border-radius: 50%;

  background: rgba(250,247,241,0.08);

  color: rgba(250,247,241,0.85);

  font-size: 1.1rem;

  transition: all 0.25s ease;

}

.footer-social a:hover {

  background: var(--brand-gold);

  color: #fff;

  transform: translateY(-2px);

}

.footer-lang {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.6rem;

  font-size: 0.85rem;

  color: rgba(250,247,241,0.7);

}

.footer-lang a {

  color: rgba(250,247,241,0.7);

  transition: color 0.2s;

  padding: 4px 8px;

  border-radius: 4px;

}

.footer-lang a:hover { color: var(--brand-gold); }

.footer-lang a strong {

  color: var(--brand-gold);

}



/* ===== "Il nostro spirito" - pills sintetiche ===== */

.spirito-pills {

  list-style: none;

  padding: 0;

  margin: 1.5rem 0 0;

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

}

.spirito-pills li {

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  padding: 0.45rem 0.9rem;

  background: rgba(197,160,89,0.12);

  color: var(--brand-deep);

  border: 1px solid rgba(197,160,89,0.35);

  border-radius: 50px;

  font-size: 0.85rem;

  font-weight: 600;

  line-height: 1.2;

}

.spirito-pills li i {

  color: var(--brand-gold);

  font-size: 1.05rem;

}

.spirito-chiusura {

  color: var(--brand-deep);

  opacity: 0.75;

  font-size: 0.95rem;

  border-left: 3px solid var(--brand-gold);

  padding-left: 0.9rem;

}



/* ===== HERO ===== */

.hero {

  position: relative;

  min-height: 92vh;

  display: flex;

  align-items: center;

  background-size: cover;

  background-position: center;
}

@media (max-width: 767.98px) {
  /* Pagine interne: hero pi� alto (40vh) per dare presenza visiva e segnalare che bisogna scrollare */
  .hero { min-height: 40vh !important; padding-top: 86px !important; padding-bottom: 1rem !important; }
  .hero h1 { font-size: 1.5rem !important; margin-bottom: 0.5rem !important; line-height: 1.25 !important; }
  .hero .lead { font-size: 0.9rem !important; line-height: 1.4 !important; margin-bottom: 0.6rem !important; }
  .hero .section-eyebrow { font-size: 0.68rem !important; letter-spacing: 1.5px !important; margin-bottom: 0.3rem !important; }
  .hero .btn-prenota { padding: 8px 16px !important; font-size: 0.85rem !important; }
}
  color: #fff;

  padding-top: 100px;

}

.hero::before {

  content: '';

  position: absolute; inset: 0;

  background: linear-gradient(135deg, rgba(10,31,51,0.75) 0%, rgba(10,31,51,0.35) 100%);

}

.hero .container { position: relative; z-index: 1; }

.hero h1 {

  color: #fff;

  font-size: clamp(2.5rem, 5vw, 4.5rem);

  line-height: 1.05;

  margin-bottom: 1.2rem;

}

.hero .lead {

  font-size: 1.2rem;

  font-weight: 300;

  max-width: 640px;

  color: rgba(255,255,255,0.92);

}



/* ===== SEZIONI GENERICHE ===== */

.section { padding: 5rem 0; }

.section-sm { padding: 3rem 0; }

.section-title {

  font-size: clamp(1.8rem, 3vw, 2.6rem);

  margin-bottom: 0.5rem;

}

.section-eyebrow {

  display: inline-block;

  color: var(--brand-gold);

  text-transform: uppercase;

  letter-spacing: 3px;

  font-size: 0.78rem;

  font-weight: 600;

  margin-bottom: 0.8rem;

}

.bg-cream { background: var(--brand-cream); }

.bg-deep { background: var(--brand-deep); color: #fff; }

.bg-deep h1, .bg-deep h2, .bg-deep h3 { color: #fff; }



/* ===== SERVICE / PRICING CARD (usata in menu.php, sushi, pasta) ===== */

.pricing-card {

  background: #fff;

  border-radius: 16px;

  padding: 2rem 1.75rem;

  box-shadow: 0 8px 28px rgba(10,31,51,0.08);

  border: 1px solid rgba(10,31,51,0.06);

  height: 100%;

  text-align: center;

  transition: transform .25s ease, box-shadow .25s ease;

  position: relative;

}

.pricing-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 14px 38px rgba(10,31,51,0.14);

}

.pricing-card .pricing-icon {

  width: 72px;

  height: 72px;

  border-radius: 50%;

  background: linear-gradient(135deg, #fff4dc 0%, #f8e9c4 100%);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 1.25rem;

  color: var(--brand-gold);

  font-size: 2.2rem;

  border: 2px solid rgba(212,175,55,0.18);

}

.pricing-card h3 {

  font-family: 'Playfair Display', serif;

  color: var(--brand-deep);

  font-size: 1.35rem;

  margin-bottom: 0.75rem;

}

.pricing-card ul {

  list-style: none;

  padding: 0;

  margin: 0;

  font-size: 0.95rem;

  color: var(--brand-deep);

  line-height: 2;

}

.pricing-card ul li { padding: 0.25rem 0; }

.pricing-card ul li i { margin-right: 0.5rem; }

.pricing-card--featured {

  background: linear-gradient(135deg, #fffefa 0%, #fff7e6 100%);

  border: 2px solid var(--brand-gold);

}

.pricing-card--featured .pricing-icon {

  background: linear-gradient(135deg, var(--brand-gold) 0%, #b8902a 100%);

  color: #fff;

  border-color: var(--brand-gold);

}

.pricing-card--featured::before {

  content: "Consigliato";

  position: absolute;

  top: -12px;

  left: 50%;

  transform: translateX(-50%);

  background: var(--brand-gold);

  color: #fff;

  font-size: 0.7rem;

  letter-spacing: 2px;

  text-transform: uppercase;

  padding: 4px 14px;

  border-radius: 50px;

  font-weight: 600;

}



/* ===== CARD RECENSIONI ===== */

.review-card {

  background: #fff;

  border-radius: 14px;

  padding: 1.5rem;

  box-shadow: 0 6px 24px rgba(10,31,51,0.06);

  border: 1px solid rgba(10,31,51,0.04);

  height: 100%;

}

.review-stars { color: var(--brand-gold); letter-spacing: 1px; }

.review-text {

  font-style: italic;

  color: #2c2c2c;

  line-height: 1.6;

  margin: 1rem 0;

}

.review-author {

  display: flex;

  align-items: center;

  gap: 0.7rem;

  margin-top: 1rem;

}

.review-author-simple {

  margin-top: 0.8rem;

  padding-top: 0.8rem;

  border-top: 1px solid rgba(10,31,51,0.08);

}

.review-avatar {

  width: 42px; height: 42px;

  border-radius: 50%;

  background: var(--brand-deep);

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 700;

  font-size: 0.95rem;

}

.review-name { font-weight: 600; color: var(--brand-deep); }

.review-date { font-size: 0.8rem; color: var(--brand-muted); }



/* ===== CAROSELLO RECENSIONI ===== */

.reviews-carousel { position: relative; }

.reviews-carousel .carousel-control-prev,

.reviews-carousel .carousel-control-next {

  width: 48px; height: 48px;

  top: 50%;

  transform: translateY(-50%);

  background: var(--brand-deep);

  border-radius: 50%;

  opacity: 0.85;

}

.reviews-carousel .carousel-control-prev { left: -64px; }

.reviews-carousel .carousel-control-next { right: -64px; }



/* ===== FOOTER ===== */

.site-footer {

  background: var(--brand-deep);

  color: rgba(255,255,255,0.85);

  padding: 4rem 1.25rem 1.5rem;

  margin-top: 8rem;

}

@media (min-width: 768px) {

  .site-footer { margin-top: 10rem; padding-left: 0; padding-right: 0; }

}

@media (min-width: 768px) {

  .site-footer { padding-left: 0; padding-right: 0; }

}

.site-footer > .container { padding-left: 0; padding-right: 0; }

.site-footer .footer-logo { filter: brightness(0) invert(1); }

.site-footer h5.footer-title {

  color: #fff;

  font-family: 'Inter', sans-serif;

  font-size: 0.85rem;

  text-transform: uppercase;

  letter-spacing: 2px;

  margin-bottom: 1rem;

}

.site-footer .footer-list li { padding: 0.25rem 0; }

.site-footer .footer-list i { color: var(--brand-gold); margin-right: 8px; }

/* === FOOTER: Orari & Stagione (allineamento perfetto) === */
.footer-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-title::before {
  content: "";
  width: 3px;
  height: 16px;
  background: var(--brand-gold);
  border-radius: 2px;
  flex-shrink: 0;
}

.footer-schedule {
  margin: 0 0 1.25rem 0;
  padding: 0;
  list-style: none;
}

.footer-schedule-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-schedule-row:first-child { padding-top: 0; }
.footer-schedule-row:last-child { border-bottom: none; padding-bottom: 0; }

.footer-schedule-row i {
  color: var(--brand-gold);
  font-size: 1.15rem;
  line-height: 1.3;
  margin-top: 2px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.footer-schedule-row > div {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  flex: 1;
}

.footer-schedule-row strong {
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.2px;
}

.footer-schedule-row span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
}

.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 1rem;
  border-top: 1px solid rgba(197, 160, 89, 0.18);
}

.footer-vat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
}

.footer-vat i { color: var(--brand-gold); font-size: 1.05rem; flex-shrink: 0; width: 20px; text-align: center; }
.footer-vat strong { color: #fff; font-weight: 600; }

.footer-privacy-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  font-weight: 400;
  text-decoration: none !important;
  transition: color 0.2s ease;
  width: fit-content;
}

.footer-privacy-link:hover {
  background: transparent;
  border: 0;
  color: var(--brand-gold) !important;
}

.footer-privacy-link i { color: var(--brand-gold); }

.site-footer a { color: rgba(255,255,255,0.85); }

.site-footer a:hover { color: var(--brand-gold); }

.footer-hr {

  border-color: rgba(255,255,255,0.1);

  margin: 2.5rem 0 1.5rem;

}

.site-footer .text-muted { color: rgba(255,255,255,0.55) !important; }



/* ===== BOTTONE WHATSAPP FLOATING (in basso a destra) ===== */

.wa-float {

  position: fixed;

  right: 20px; bottom: 24px;

  width: 60px; height: 60px;

  background: #25d366;

  color: #fff !important;

  border-radius: 50%;

  display: flex; align-items: center; justify-content: center;

  font-size: 1.9rem;

  box-shadow: 0 6px 20px rgba(37,211,102,0.5);

  z-index: 1000;

  animation: pulse-wa 2s infinite;

}

@keyframes pulse-wa {

  0%, 100% { box-shadow: 0 6px 20px rgba(37,211,102,0.5); }

  50%      { box-shadow: 0 6px 28px rgba(37,211,102,0.8); }

}



/* ===== BACK TO TOP (separato da WhatsApp, in basso a sinistra) ===== */

.back-to-top {

  position: fixed;

  left: 20px; bottom: 24px;

  width: 46px; height: 46px;

  background: var(--brand-deep);

  color: #fff;

  border: none;

  border-radius: 50%;

  font-size: 1.2rem;

  z-index: 999;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s;

  box-shadow: 0 4px 14px rgba(10,31,51,0.25);

}

.back-to-top.show { opacity: 1; pointer-events: auto; }

.back-to-top:hover { background: var(--brand-gold); }



/* Mobile: posizionati sopra la bottom-bar (che sta a ~72px dal fondo) */

@media (max-width: 991.98px) {

  .wa-float { right: 16px; bottom: 96px; width: 56px; height: 56px; font-size: 1.7rem; }

  .back-to-top { left: 16px; bottom: 96px; width: 44px; height: 44px; font-size: 1.1rem; }

}



/* ===== COOKIE BANNER (GDPR) - minimal premium ===== */

.cookie-banner {

  position: fixed;

  left: 0;

  right: 0;

  bottom: 24px;

  margin: 0 auto;

  width: fit-content;

  max-width: min(720px, calc(100vw - 48px));

  background: rgba(10, 31, 51, 0.96);

  color: #faf7f1;

  border-radius: 60px;

  box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(197,160,89,0.25);

  padding: 9px 14px 9px 18px;

  z-index: 1099;

  display: none;

  align-items: center;

  gap: 14px;

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  opacity: 0;

  transition: opacity 0.4s ease;

}

.cookie-banner.show {

  display: flex;

  opacity: 1;

}

.cookie-banner .cookie-icon {

  font-size: 1.15rem;

  color: var(--brand-gold);

  flex-shrink: 0;

  line-height: 1;

}

.cookie-banner .cookie-text {

  font-size: 0.85rem;

  line-height: 1.3;

  margin: 0;

  color: #faf7f1;

  white-space: normal;

  word-break: break-word;

}

.cookie-banner .cookie-text strong {

  color: var(--brand-gold);

  font-weight: 600;

}

.cookie-banner .cookie-text a {

  color: #fff;

  font-weight: 500;

  text-decoration: underline !important;

  text-underline-offset: 2px;

  text-decoration-color: rgba(255,255,255,0.5) !important;

  transition: color 0.2s;

}

.cookie-banner .cookie-text a:hover { color: var(--brand-gold); }

.cookie-banner .btn-accept {

  background: var(--brand-gold);

  color: #fff !important;

  border: none;

  padding: 9px 22px;

  border-radius: 50px;

  font-weight: 600;

  font-size: 0.82rem;

  letter-spacing: 0.3px;

  cursor: pointer;

  transition: all 0.2s ease;

  white-space: nowrap;

  flex-shrink: 0;

}

.cookie-banner .btn-accept:hover {

  background: #d4b06b;

}

.cookie-banner .btn-accept:active {

  transform: scale(0.97);

}

@media (max-width: 991.98px) {

  .cookie-banner {

    position: fixed !important;

    width: calc(100vw - 48px);

    left: 24px !important;

    right: 24px !important;

    margin: 0 auto !important;

    bottom: calc(98px + env(safe-area-inset-bottom, 0px));

    padding: 12px 14px;

    border-radius: 16px;

    gap: 10px;

    box-sizing: border-box !important;

    max-width: none !important;

    flex-wrap: wrap;

    justify-content: center;

    text-align: center;

  }

  .cookie-banner .cookie-text {

    white-space: normal;

    flex: 1 1 100%;

    font-size: 0.78rem;

    line-height: 1.35;

  }

  .cookie-banner .btn-accept {

    padding: 9px 22px;

    font-size: 0.82rem;

    flex: 1 1 auto;

  }

}

/* Galaxy S20, iPhone SE e simili (= 480px) � pi� compatto */
@media (max-width: 480px) {
  .cookie-banner {
    width: calc(100vw - 56px) !important;
    left: 28px !important;
    right: 28px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    max-width: none !important;
  }
  .cookie-banner .cookie-icon { font-size: 1.3rem !important; margin-bottom: 2px !important; }
  .cookie-banner .cookie-text { font-size: 0.75rem !important; line-height: 1.35 !important; flex: 1 1 auto !important; }
  .cookie-banner .btn-accept { padding: 10px 16px !important; font-size: 0.82rem !important; width: 100% !important; min-height: 40px !important; }
}



/* ===== BOTTOM BAR MOBILE (TabBar stile iOS / Instagram) ===== */

.bottom-bar {

  position: fixed;

  left: 0; right: 0; bottom: 0;

  background: rgba(10, 31, 51, 0.96);

  backdrop-filter: saturate(140%) blur(18px);

  -webkit-backdrop-filter: saturate(140%) blur(18px);

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 0 !important;

  display: none;

  z-index: 998;

  padding: 8px 4px calc(env(safe-area-inset-bottom, 6px) + 4px);

  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.05) inset, 0 -4px 12px rgba(0, 0, 0, 0.25);

  width: 100% !important;

  max-width: 100vw !important;

  left: 0 !important;

  right: 0 !important;

  margin: 0 !important;

  transform: none !important;

}

.bottom-bar .bottom-item {

  flex: 1 1 0;

  min-width: 0;

  display: flex; flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 2px;

  padding: 4px 1px;

  color: rgba(255, 255, 255, 0.65) !important;

  font-size: 0.68rem;

  text-decoration: none;

  text-transform: none;

  letter-spacing: 0.1px;

  font-weight: 500;

  transition: color 0.2s ease, transform 0.15s ease;

  position: relative;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

}

.bottom-bar .bottom-item i {

  font-size: 1.3rem;

  color: rgba(255, 255, 255, 0.75) !important;

  transition: color 0.2s ease, transform 0.2s ease;

  line-height: 1;

}

.bottom-bar .bottom-item span {

  font-size: 0.66rem;

  font-weight: 500;

  transition: font-weight 0.2s ease, color 0.2s ease;

  color: rgba(255, 255, 255, 0.75);

  max-width: 100%;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

/* Hover / Tap */
.bottom-bar .bottom-item:hover,
.bottom-bar .bottom-item:active {
  color: #ffffff !important;
}

.bottom-bar .bottom-item:hover i,
.bottom-bar .bottom-item:active i {
  color: #ffffff !important;
  transform: scale(1.05);
}

/* Voce CTA "Prenota" � leggermente pi� evidenziata */
.bottom-bar .bottom-item--cta i {
  color: var(--brand-gold) !important;
}

.bottom-bar .bottom-item--cta span {
  color: var(--brand-gold) !important;
  font-weight: 700;
}

/* ACTIVE � stato Instagram/TabBar iOS: icona oro + label bianca */
.bottom-bar .bottom-item.active {
  color: #ffffff !important;
  font-weight: 700;
}

.bottom-bar .bottom-item.active i {
  color: var(--brand-gold) !important;
  transform: scale(1.1);
}

.bottom-bar .bottom-item.active span {
  color: #ffffff !important;
  font-weight: 700;
}


@media (max-width: 767.98px) {

  .bottom-bar { display: flex; }

  body { padding-bottom: 90px; }

  .wa-float { bottom: 90px; right: 14px; width: 50px; height: 50px; font-size: 1.5rem; }

  .back-to-top { bottom: 155px; right: 14px; }

  /* Navbar mobile pi� alta per inglobare bandierina + contenuto */

  .navbar-tal�e {

    min-height: 86px;

    padding-top: 20px;

    padding-bottom: 20px;

  }

}



/* ===== CARD PIATTI / COCKTAIL ===== */

.dish-card {

  background: #fff;

  border-radius: 12px;

  overflow: hidden;

  box-shadow: 0 4px 16px rgba(10,31,51,0.05);

  transition: transform 0.25s;

  height: 100%;

}

.dish-card:hover { transform: translateY(-4px); }

.dish-card .dish-body { padding: 1.3rem; }

.dish-card .dish-name {

  font-family: 'Playfair Display', serif;

  font-size: 1.25rem;

  color: var(--brand-deep);

  margin-bottom: 0.4rem;

}

.dish-card .dish-desc {

  color: #4a4a4a;

  font-size: 0.92rem;

  line-height: 1.55;

}



/* ===== GALLERY ===== */

.gallery-item {

  border-radius: 10px;

  overflow: hidden;

  background: var(--brand-cream);

}

.gallery-item img {

  width: 100%; height: auto;

  display: block;

  transition: transform 0.4s;

}

.gallery-item:hover img { transform: scale(1.04); }



/* Thumbnails gallery uniformi (formato nativo 3:2 orizzontale) */

.gallery-thumb {

  aspect-ratio: 3/2;

  overflow: hidden;

  border-radius: 10px;

  background: var(--brand-cream);

}

.gallery-thumb img {

  width: 100%; height: 100%;

  object-fit: cover;

  transition: transform 0.4s;

}

.gallery-thumb:hover img { transform: scale(1.04); }



/* ===== HERO CAROSELLO 3 SLIDE ===== */

.hero-carousel {

  position: relative;

  height: 92vh;

  min-height: 600px;

  max-height: 820px;

  overflow: hidden;

}

.hero-carousel .carousel-inner {

  position: relative;

  height: 100%;

}

.hero-carousel .carousel-item {

  height: 100%;

  background-size: cover;

  background-position: center;

  background-color: #14375e;

}

.hero-carousel .carousel-item > .hero-overlay,

.hero-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(10,31,51,0.55) 0%, rgba(10,31,51,0.78) 100%);

  z-index: 1;

}

.hero-content {

  position: absolute;

  inset: 0;

  z-index: 3;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  color: #fff;

  max-width: 880px;

  padding: 0 1.5rem;

  margin: 0 auto;

  text-align: center;

}

.hero-content h1 { color: #fff; margin-bottom: 1rem; }

.hero-content h2.hero-slide-title { color: #fff !important; margin-bottom: 1rem; font-size: 2.8rem; font-weight: 700; line-height: 1.15; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }

.hero-content .lead { color: rgba(255,255,255,0.95); margin-bottom: 2rem; max-width: 720px; margin-left:auto; margin-right:auto; }

.hero-cta { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }

.btn-whatsapp-hero {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 0.6rem;

  background: #25D366;

  color: #fff !important;

  padding: 0.9rem 2rem;

  border-radius: 50px;

  font-weight: 700;

  font-size: 1.05rem;

  text-decoration: none !important;

  box-shadow: 0 6px 20px rgba(37,211,102,0.4);

  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;

}

.btn-whatsapp-hero i { font-size: 1.4rem; line-height: 1; display: inline-flex; align-items: center; }

.btn-whatsapp-hero span { line-height: 1; }

.btn-whatsapp-hero:hover { background: #1ebe5d; color: #fff !important; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(37,211,102,0.55); }

.hero-phone {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--brand-gold) !important;

  background: rgba(10, 31, 51, 0.55);

  border: 1px solid rgba(197, 160, 89, 0.4);

  padding: 8px 18px;

  border-radius: 50px;

  font-size: 1.35rem;

  font-weight: 700;

  letter-spacing: 1.5px;

  text-decoration: none !important;

  margin-top: 0.3rem;

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);

}

.hero-phone i { font-size: 1.5rem; line-height: 1; }

.hero-phone:hover { background: rgba(10, 31, 51, 0.75); border-color: var(--brand-gold); }

.hero-phone-hint {

  display: block;

  color: rgba(255,255,255,0.7);

  font-size: 0.75rem;

  text-transform: uppercase;

  letter-spacing: 1px;

  margin-top: 0.1rem;

}



/* ===== HERO FRECCE NAVIGAZIONE ===== */

.hero-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 10;

  width: 56px; height: 56px;

  background: rgba(0,0,0,0.55);

  border: 2px solid rgba(255,255,255,0.5);

  color: #fff;

  border-radius: 50%;

  font-size: 1.6rem;

  display: flex !important;

  align-items: center; justify-content: center;

  cursor: pointer;

  padding: 0;

  transition: background 0.2s, transform 0.2s, border-color 0.2s;

  text-decoration: none !important;

}

.hero-arrow:hover, .hero-arrow:focus {

  background: rgba(197,160,89,0.9);

  border-color: #fff;

  transform: translateY(-50%) scale(1.06);

  outline: none;

}

.hero-arrow-prev { left: 18px; }

.hero-arrow-next { right: 18px; }

@media (max-width: 576px) {

  .hero-arrow { width: 44px; height: 44px; font-size: 1.3rem; }

  .hero-arrow-prev { left: 8px; }

  .hero-arrow-next { right: 8px; }

}



/* ===== WIDGET TRADUZIONE (bandierina lingua, alto a sinistra - LIBERA) ===== */

.navbar-gtranslate {

  margin-right: auto;

  padding: 0.4rem 0;

  display: flex;

  align-items: center;

  flex: 0 0 auto;

  min-width: 60px;

}

.gtranslate_wrapper {

  display: inline-flex !important;

  align-items: center;

}

@media (max-width: 991px) {

  /* MOBILE: ???? a sinistra, LOGO perfettamente centrale in viewport, ? a destra */

  .navbar-gtranslate {

    display: flex;

    min-width: 70px;

    padding: 0.2rem 0;

    margin-right: auto; /* spinge a sinistra */

  }

  .navbar-brand {

    position: fixed;

    left: 50%;

    top: 6px;

    transform: translate(-50%, 0);

    margin: 0;

    padding: 0;

    z-index: 1031;

  }

  .navbar-toggler {

    margin-left: auto; /* spinge a destra */

    z-index: 1032;

    position: relative;

  }

  /* Quando il menu mobile � aperto, allontana le voci dal widget GTranslate */

  .navbar-collapse.collapsing,

  .navbar-collapse.show {

    padding-top: 1.5rem;

  }

}



/* ===== RECENSIONI MOBILE: 1 per slide ===== */

@media (max-width: 767px) {

  #reviewsCarousel .carousel-item .col-md-4:not(:first-child) { display: none; }

  #reviewsCarousel .carousel-item .col-md-4:first-child {

    flex: 0 0 100%;

    max-width: 100%;

  }

  #reviewsCarousel .row.g-4.px-4 {

    margin: 0;

    padding: 0 !important;

  }

  #reviewsCarousel .review-card { margin: 0 0.25rem; }

}



/* ===== NAVBAR: trattino separatore nel menu ===== */

.navbar-tal�e .nav-divider {

  width: 1px;

  height: 22px;

  background: rgba(255,255,255,0.25);

  margin: 0 0.4rem;

  display: inline-block;

}

.navbar-tal�e .nav-link i { margin-right: 0.3rem; }



/* ===== FOOTER CREDITS (Digital Mode) ===== */

.footer-credits {

  padding: 1.5rem 0 1rem 0;

}

.footer-credits .credits-label {

  font-family: 'Inter', system-ui, sans-serif;

  text-transform: uppercase;

  letter-spacing: 2px;

  font-size: 0.85rem;

  color: rgba(255,255,255,0.55);

  font-weight: 500;

  margin-bottom: 0.75rem;

}

.digital-mode-logo {

  height: 55px;

  width: auto;

  opacity: 0.95;

  transition: opacity 0.25s, transform 0.25s;

  display: inline-block;

}

.digital-mode-logo:hover { opacity: 1; transform: scale(1.04); }

@media (max-width: 576px) {

  .digital-mode-logo { height: 45px; }

  .footer-credits .credits-label { font-size: 0.75rem; }

}



/* ===== LINK TELEFONO (footer) ===== */

.footer-list a.phone-text,

.footer-list a[href^="tel:"] {

  color: #fff !important;

  text-decoration: none;

  font-weight: 500;

  transition: color 0.2s;

}

.footer-list a[href^="tel:"]:hover { color: var(--brand-gold) !important; }



/* ===== ACCESSIBILIT� ===== */

.btn:focus, a:focus, button:focus { outline: 2px solid var(--brand-gold); outline-offset: 3px; }



/* ===== CALA MAZZO  �  OVERRIDE BRAND TESTUALE + NAVBAR-CM (2026-07-01) ===== */

/* Brand testuale "Cala Mazzo" su riga 1 + "di Sciacca" su riga 2 sotto */

.navbar-brand--text {

  display: inline-flex !important;

  flex-direction: column !important;

  align-items: flex-start !important;

  gap: 0 !important;

  color: #fff !important;

  font-family: "Playfair Display", Georgia, serif;

  text-decoration: none;

  line-height: 1.1;

}

.navbar-brand--text .brand-name {

  font-size: 1.5rem;

  font-weight: 700;

  letter-spacing: 0.005em;

  color: #faf7f1;

  white-space: nowrap;

  line-height: 1.05;

}

.navbar-brand--text .brand-sub {

  font-size: 0.8rem;

  font-weight: 400;

  font-style: italic;

  font-family: "Inter", system-ui, sans-serif;

  color: #c5a059;

  letter-spacing: 0.04em;

  text-transform: lowercase;

  white-space: nowrap;

  line-height: 1;

  margin-top: 1px;

}

.navbar-brand--text:hover,

.navbar-brand--text:focus { color: #c5a059 !important; }

.navbar-brand--text:hover .brand-name,

.navbar-brand--text:focus .brand-name { color: #c5a059; }



/* Footer brand (link bianco che cambia colore su hover) */

.footer-brand.navbar-brand--text { display: inline-flex !important; flex-direction: column; line-height: 1.1; }

.footer-brand.navbar-brand--text .brand-name { font-size: 1.5rem; }

.footer-brand.navbar-brand--text .brand-sub { font-size: 0.85rem; opacity: 0.85; }

.footer-brand.navbar-brand--text:hover { color: #c5a059 !important; }



/* Navbar mobile: brand sempre visibile, hamburger sempre funzionante */

@media (max-width: 991.98px) {

  .navbar-cm .navbar-brand--text,

  .navbar-tal�e .navbar-brand--text {

    margin-right: auto;

    margin-left: 0.5rem;

  }

  .navbar-cm .navbar-toggler,

  .navbar-tal�e .navbar-toggler {

    margin-left: auto;

  }

  .navbar-cm .gtranslate_wrapper.navbar-gtranslate,

  .navbar-tal�e .gtranslate_wrapper.navbar-gtranslate {

    margin-left: 0.5rem;

    order: 3;

  }

}



/* Mobile piccolo: nascondi gtranslate per non affollare */

@media (max-width: 480px) {

  .navbar-cm .gtranslate_wrapper.navbar-gtranslate,

  .navbar-tal�e .gtranslate_wrapper.navbar-gtranslate {

    display: flex !important;

    z-index: 1045 !important;

  }

}



/* ===== FIGURE SEZIONE PRENOTAZIONE LETTINI (foto pi� piccola e proporzionata) ===== */

.experience-figure { margin: 0; overflow: hidden; border-radius: 12px; }

.experience-figure img {

  width: 100%;

  height: auto;

  max-height: 380px;

  object-fit: cover;

  display: block;

}

.experience-figure figcaption {

  display: block;

  text-align: center;

  font-size: 0.85rem;

  color: rgba(255,255,255,0.7);

  padding-top: 0.5rem;

}

@media (max-width: 991.98px) {

  .experience-figure img { max-height: 320px; }

}

@media (max-width: 575.98px) {

  .experience-figure img { max-height: 260px; }

}





/* ===== LOGO navbar + footer ===== */

.navbar-brand--logo {

  display: flex !important;

  align-items: center !important;

  padding: 6px 0 !important;

  gap: 8px;

}

.navbar-logo {

  height: 46px;

  width: auto;

  display: block;

  flex-shrink: 0;

}

.footer-logo {

  height: 60px;

  width: auto;

  display: block;

}

@media (max-width: 991px) {

  .navbar-logo { height: 46px; }

  .footer-logo { height: 48px; }

}





/* ===== HERO BADGE: sempre in evidenza su ogni slide ===== */

.hero-brand-fixed {

  position: absolute;

  bottom: 80px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 10;

  background: linear-gradient(135deg, #0a1f33 0%, #14304d 100%);

  color: #fff;

  font-family: 'Playfair Display', serif;

  font-weight: 700;

  font-size: 1.6rem;

  letter-spacing: 1.5px;

  padding: 16px 36px;

  border-radius: 50px;

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(212, 175, 55, 0.4);

  display: flex;

  align-items: center;

  gap: 8px;

  white-space: nowrap;

  border: 2px solid #d4af37;

}

.hero-brand-fixed .brand-sub-fixed {

  font-family: 'Inter', sans-serif;

  font-weight: 400;

  font-style: italic;

  color: #d4af37;

  font-size: 1.1rem;

  letter-spacing: 1px;

}

.hero-brand-fixed::before {

  content: "?";

  color: #d4af37;

  font-size: 1.4rem;

  margin-right: 4px;

}

@media (max-width: 767px) {

  .hero-brand-fixed {

    bottom: 60px;

    font-size: 1.1rem;

    padding: 10px 20px;

    letter-spacing: 0.5px;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(212, 175, 55, 0.4);

  }

  .hero-brand-fixed .brand-sub-fixed {

    font-size: 0.85rem;

  }

  .hero-brand-fixed::before {

    font-size: 1rem;

  }

}





/* ===== MOBILE IPHONE FIX (390px-767px) ===== */

@media (max-width: 767px) {

  /* Navbar - hamburger visibile a destra */

  .navbar-toggler {

    display: block !important;

    border: 1px solid rgba(255,255,255,0.4) !important;

    padding: 4px 8px !important;

    color: #fff !important;

    background: transparent;

    margin-left: auto;

  }

  .navbar-toggler i { color: #fff; font-size: 1.5rem; }

  .navbar-toggler:focus { box-shadow: 0 0 0 0.15rem rgba(212,175,55,0.4); }



  /* Logo navbar */

  .navbar-logo, .navbar-brand--logo img {

    max-height: 56px !important;

    width: auto;

  }

  .navbar-brand--logo {

    padding: 4px 0 !important;

    margin-right: auto !important;

  }

  .navbar-brand--text .brand-name { font-size: 1.15rem !important; }

  .navbar-brand--text .brand-sub { font-size: 0.85rem !important; }



  /* GTranslate bandierina in alto a sinistra */

  .navbar-gtranslate {

    position: absolute !important;

    top: 18px !important;

    left: 12px !important;

    right: auto !important;

    z-index: 1045 !important;

  }

  .gtranslate_wrapper { font-size: 12px !important; }



  

  }

  /* Bottom bar: ora gestito dal blocco unico (TabBar iOS full-width scuro) */

 .bottom-bar .bottom-item {

    font-size: 0.6rem !important;

    padding: 4px 0 !important;

    letter-spacing: 0 !important;

    line-height: 1.1 !important;

  }

  .bottom-bar .bottom-item i { font-size: 1.15rem !important; margin-bottom: 1px !important; }

  .bottom-bar .bottom-item span { font-size: 0.6rem; }



  /* Hero compatto (pagine interne) */

  .hero { min-height: 40vh !important; padding-top: 86px !important; }

  .hero-content { padding: 0 16px !important; max-width: 100% !important; }

  .hero h1, .hero .hero-slide-title { font-size: 1.5rem !important; line-height: 1.2 !important; }

  .hero h2 { font-size: 1.2rem !important; }

  .hero .lead { font-size: 0.95rem !important; line-height: 1.4 !important; }

  .hero p { font-size: 0.85rem !important; }

  .hero .section-eyebrow, .hero .eyebrow { font-size: 0.7rem !important; letter-spacing: 1px !important; }



  /* Bottone Prenota WhatsApp + telefono nel hero */

  .btn-whatsapp-hero { padding: 12px 20px !important; font-size: 0.95rem !important; }

  .hero-phone { font-size: 1rem !important; }



  /* Sezioni: padding corretto tra una e l'altra */

  .section { padding: 2.5rem 0 !important; }

  .section-sm { padding: 1.5rem 0 !important; }

  .section-title { font-size: 1.5rem !important; margin-bottom: 1rem !important; }

  .section-eyebrow { font-size: 0.7rem !important; margin-bottom: 0.5rem !important; }



  /* Container padding sicuro */

  .container, .container-fluid { padding-left: 18px !important; padding-right: 18px !important; }



  /* Row margin reset per non causare overflow */

  .row { margin-left: -8px !important; margin-right: -8px !important; }

  .row > * { padding-left: 8px !important; padding-right: 8px !important; }



  /* Card pricing pi� compatte */

  .pricing-card { padding: 1.25rem 1rem !important; margin-bottom: 1rem; }

  .pricing-card h3 { font-size: 1.1rem !important; }

  .pricing-card .pricing-icon { width: 56px !important; height: 56px !important; font-size: 1.6rem !important; margin-bottom: 0.75rem !important; }

  .pricing-icon i { font-size: 1.6rem !important; }







  /* Bottone WhatsApp floating sopra bottom bar */

  .wa-float {

    bottom: 88px !important;

    right: 16px !important;

    width: 50px !important;

    height: 50px !important;

  }

  .wa-float i { font-size: 1.5rem !important; }



  /* Back to top: spostato sopra bottom bar */

  .back-to-top {

    bottom: 92px !important;

    left: 16px !important;

  }



  /* Body padding bottom per bottom bar (compensata con bottom-bar floating) */

  body { padding-bottom: 72px !important; }



  /* Hero badge Cala Mazzo di Sciacca */

  .hero-brand-fixed { bottom: 100px !important; left: 12px !important; font-size: 0.75rem !important; padding: 6px 10px !important; max-width: 60%; }

  .hero-brand-fixed .brand-sub-fixed { font-size: 0.65rem !important; }



  /* Cookie banner rimosso: ora gestito dal blocco unico .cookie-banner sopra */



  /* Carosello recensioni padding */

  .review-card { padding: 1.25rem !important; }

  .review-stars { font-size: 0.9rem !important; }

  .review-text { font-size: 0.9rem !important; }

  .review-name { font-size: 0.95rem !important; }

  .review-date { font-size: 0.8rem !important; }

}





/* ===== MOBILE: pattern Tal�e Pinto (logo centrale, gtranslate sx, hamburger dx) ===== */

@media (max-width: 991px) {

  /* ???? GTranslate a sinistra */

  .navbar-gtranslate {

    display: flex !important;

    min-width: 60px;

    padding: 0.2rem 0;

    margin-right: auto !important;

  }

      /* LOGO centrato verticalmente con hamburger menu (un filo pi� in basso per far spazio alla bandierina) */
    .navbar-brand--logo {
      position: absolute !important;
      left: 50% !important;
      top: 70% !important;
      transform: translate(-50%, -50%) !important;
      margin: 0 !important;
      padding: 0 !important;
      z-index: 1031;
    }

  .navbar-brand--text {

    position: fixed !important;

    left: 50% !important;

    top: 45px !important;
    margin-top: 10px !important;

    transform: translateX(-50%) !important;

    margin: 0 !important;

    padding: 0 !important;

    z-index: 1031;

  }

  .navbar-brand--text .brand-name { font-size: 1.15rem !important; }

  .navbar-brand--text .brand-sub { font-size: 0.85rem !important; }

  /* ? Hamburger a destra */

  .navbar-toggler {

    margin-left: auto !important;

    z-index: 1032;

    position: relative;

    display: block !important;

    border: 1px solid rgba(255,255,255,0.4) !important;

    padding: 4px 8px !important;

    color: #fff !important;

    background: transparent;

  }

  .navbar-toggler i { color: #fff; font-size: 1.5rem; }

  .navbar-toggler:focus { box-shadow: 0 0 0 0.15rem rgba(212,175,55,0.4); }



  /* Menu collapse: padding top per non sovrapporsi al logo fisso */

  .navbar-collapse.collapsing,

  .navbar-collapse.show {

    padding-top: 1.5rem;

  }

}



/* ===== DESKTOP (>=992px): ripristino layout orizzontale e nascondo hamburger ===== */

@media (min-width: 992px) {

  /* Logo torna in posizione statica (annulla il fixed del pattern mobile) */

  .navbar-cm .navbar-brand--logo,

  .navbar-cm .navbar-brand {

    position: static !important;

    left: auto !important;

    top: auto !important;

    transform: none !important;

    margin-right: 1.5rem !important;

    padding: 0 !important;

  }

/* Hamburger invisibile su desktop */

  .navbar-cm .navbar-toggler {

    display: none !important;

  }

  /* Menu sempre aperto su desktop */

  .navbar-cm .navbar-collapse {

    display: flex !important;

    flex-basis: auto !important;

    flex-grow: 1 !important;

    justify-content: flex-end !important;

  }

  .navbar-cm .navbar-nav {

    flex-direction: row !important;

    align-items: center !important;

    gap: 0.25rem !important;

  }

  .navbar-cm .nav-link {

    padding: 0.5rem 0.75rem !important;

    font-size: 0.92rem !important;

  }

  /* CTA Prenota inline tra i link */

  .navbar-cm .btn-prenota {

    margin-left: 0.5rem !important;

  }
}

/* ===== BOTTOM BAR + WHATSAPP + BACK TO TOP (mobile) ===== */
@media (max-width: 767.98px) {
  .bottom-bar { display: flex !important; }
  body { padding-bottom: 90px !important; }
  .wa-float { bottom: 90px !important; right: 14px !important; width: 50px !important; height: 50px !important; font-size: 1.5rem !important; }
  .back-to-top { bottom: 90px !important; left: 14px !important; right: auto !important; }

  /* Navbar pi� alta per fare spazio a bandierina + logo */
  .navbar-cm {
    min-height: 86px;
    padding-top: 20px;
    padding-bottom: 20px;
  }



  /* Cookie banner rimosso: ora gestito dal blocco unico .cookie-banner sopra */

}



/* ===== RECENSIONI: 1 per slide su mobile ===== */

@media (max-width: 767px) {

  #reviewsCarousel .carousel-item .col-md-4:not(:first-child) { display: none; }

  #reviewsCarousel .carousel-item .col-md-4:first-child { flex: 0 0 100%; max-width: 100%; }

  #reviewsCarousel .row.g-4.px-4 { margin: 0; padding: 0 !important; }

  #reviewsCarousel .review-card { margin: 0 0.25rem; }

}





/* ===== LOGO PNG nelle slide hero (BASSO CENTRALE) ===== */

.hero-slide-logo {

  position: absolute;

  bottom: 80px;

  left: 50%;

  transform: translateX(-50%);

  height: 80px;

  width: auto;

  z-index: 6;

  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.7));

  background: rgba(255, 255, 255, 0.97);

  padding: 14px 28px;

  border-radius: 12px;

  border: 2px solid #d4af37;

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

}

@media (max-width: 767px) {

  .hero-slide-logo {

    bottom: 60px;

    height: 50px;

    padding: 8px 16px;

    border-width: 1px;

  }

}





/* ===== TITANIUM PREMIUM EFFECTS ===== */



/* Titoli con gradiente metallico oro */

.titanium-title {

  font-family: 'Playfair Display', serif;

  font-weight: 700;

  font-size: clamp(2rem, 4vw, 3.2rem);

  background: linear-gradient(135deg, #0a1f33 0%, #d4af37 40%, #f5e7b3 50%, #d4af37 60%, #0a1f33 100%);

  background-clip: text;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  display: inline-block;

  letter-spacing: 1px;

}



/* Card con ombra morbida fluttuante (senza bordi) */

.titanium-card {

  background: linear-gradient(145deg, #ffffff 0%, #faf7f1 100%);

  border-radius: 18px;

  padding: 1.75rem;

  box-shadow:

    0 10px 30px rgba(10, 31, 51, 0.08),

    0 2px 6px rgba(10, 31, 51, 0.04);

  transition: transform 0.35s ease, box-shadow 0.35s ease;

  border: 0;

}

.titanium-card:hover {

  transform: translateY(-6px);

  box-shadow:

    0 20px 50px rgba(10, 31, 51, 0.15),

    0 4px 12px rgba(10, 31, 51, 0.08);

}



/* Bottone glowing (CTA principale) */

.btn-glowing {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 14px 28px;

  background: linear-gradient(135deg, #d4af37 0%, #b8902a 100%);

  color: #fff;

  border: 0;

  border-radius: 50px;

  font-weight: 600;

  font-size: 1rem;

  letter-spacing: 0.5px;

  cursor: pointer;

  text-decoration: none;

  box-shadow:

    0 0 0 0 rgba(212, 175, 55, 0.7),

    0 6px 20px rgba(212, 175, 55, 0.4);

  transition: all 0.3s ease;

  animation: glow-pulse 2.5s ease-in-out infinite;

}

.btn-glowing:hover {

  background: linear-gradient(135deg, #e8c44d 0%, #c89e34 100%);

  transform: translateY(-2px);

  box-shadow:

    0 0 30px 2px rgba(212, 175, 55, 0.5),

    0 10px 30px rgba(212, 175, 55, 0.5);

}

@keyframes glow-pulse {

  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4), 0 6px 20px rgba(212, 175, 55, 0.4); }

  50% { box-shadow: 0 0 0 8px rgba(212, 175, 55, 0), 0 6px 20px rgba(212, 175, 55, 0.6); }

}



/* Bottone secondario (outlined) */

.btn-titanium-outline {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 12px 24px;

  background: transparent;

  color: var(--brand-deep, #0a1f33);

  border: 1.5px solid var(--brand-deep, #0a1f33);

  border-radius: 50px;

  font-weight: 500;

  text-decoration: none;

  transition: all 0.25s ease;

}

.btn-titanium-outline:hover {

  background: var(--brand-deep, #0a1f33);

  color: #fff;

  border-color: var(--brand-deep, #0a1f33);

}



/* Sezione fluttuante (no borders, ombre morbide) */

.titanium-section {

  padding: 4rem 1.5rem;

  background: #ffffff;

  box-shadow:

    0 15px 40px rgba(10, 31, 51, 0.06);

  border-radius: 24px;

  margin: 2rem auto;

  max-width: 1280px;

}


/* ============================================================
   TITANIUM PREMIUM OVERRIDES (WOW EFFECT)
   ============================================================ */
.hero__title {
  background: linear-gradient(135deg, #ffffff 0%, #c1dceb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}
.service-card, .review-card, .partner-card, .review-summary {
  border: none !important;
  box-shadow: 0 12px 30px -10px rgba(11,58,85,0.06) !important;
}
.service-card { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important; }
.service-card:hover { transform: translateY(-8px) !important; box-shadow: 0 25px 45px -12px rgba(11,58,85,0.14) !important; }
.review-card { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important; }
.review-card:hover { transform: translateY(-6px) scale(1.02) !important; box-shadow: 0 20px 40px -12px rgba(11,58,85,0.14) !important; }
.btn-primary, .hero__cta .btn-primary {
  background: linear-gradient(135deg, var(--cm-coral) 0%, #f06a46 100%) !important; border: none !important;
  box-shadow: 0 6px 16px rgba(224, 122, 95, 0.35) !important; color: #fff !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
}
.btn-primary:hover, .btn-primary:focus, .hero__cta .btn-primary:hover {
  transform: translateY(-2px) scale(1.03) !important; box-shadow: 0 10px 24px rgba(224, 122, 95, 0.5) !important;
}


















/* === MARCO FIX: NAVBAR SEMPRE FISSA SU TUTTI I DISPOSITIVI === */
.navbar.fixed-top.navbar-cm,
.navbar.navbar-cm.fixed-top,
.navbar.navbar-cm {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1030 !important;
  width: 100% !important;
}

/* BOTTOM-BAR SEMPRE VISIBILE SU MOBILE */
@media (max-width: 991.98px) {
  .bottom-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    z-index: 998 !important;
  }
}

/* BODY PADDING-TOP per compensare navbar fissa (mobile alto 86px, desktop 86px) */
body.has-fixed-navbar { padding-top: 0; }
@media (max-width: 991.98px) {
  body { padding-top: 86px !important; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (min-width: 992px) {
  body { padding-top: 86px !important; }
}


/* === BOTTOM-BAR SCHERMI PICCOLI (= 480px) � pi� compatto === */
@media (max-width: 480px) {
  .bottom-bar { padding: 6px 0 calc(env(safe-area-inset-bottom, 6px) + 2px) !important; }
  .bottom-bar .bottom-item { padding: 4px 0 !important; gap: 1px !important; }
  .bottom-bar .bottom-item i { font-size: 1.2rem !important; }
  .bottom-bar .bottom-item span { font-size: 0.6rem !important; letter-spacing: 0 !important; }
}

/* === BOTTOM-BAR iPhone SE / Galaxy Foldable (= 360px) � ultra-compatto === */
@media (max-width: 360px) {
  .bottom-bar .bottom-item i { font-size: 1.1rem !important; }
  .bottom-bar .bottom-item span { font-size: 0.58rem !important; }
}

/* === MARCO FIX 2: SUPER AGGRESSIVE OVERRIDE === */
.navbar, .navbar.fixed-top, .navbar.navbar-cm, .navbar.fixed-top.navbar-cm {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  width: 100% !important;
  max-width: 100vw !important;
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
  contain: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}
.navbar-toggler, button.navbar-toggler {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 9999 !important;
  transform: none !important;
}



/* === LOGO-FORCE: POSIZIONE IDENTICA SU TUTTE LE PAGINE === */
.navbar-brand--logo, .navbar-brand, a.navbar-brand--logo, a.navbar-brand {
  position: absolute !important;
  top: -6px !important;
  left: 58% !important;
  transform: translateX(-50%) !important;
  -webkit-transform: translateX(-50%) !important;
  z-index: 1032 !important;
  max-width: 200px !important;
}
.navbar-brand--logo .navbar-logo, .navbar-brand img.navbar-logo, .navbar-brand img {
  height: 46px !important;
  width: auto !important;
  max-height: 46px !important;
  filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,0.3)) !important;
}
/* Su desktop il logo va a sinistra (normale flusso navbar) */
@media (min-width: 992px) {
  .navbar-brand--logo, a.navbar-brand {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    max-width: none !important;
  }
}


/* === COOKIE-FORCE e MOBILE-FIX-MARCO rimossi: ora gestiti dal blocco unico .cookie-banner === */


/* === MOBILE-FIX-MARCO-20260703: HERO TITLE STRETTO (banner ora gestito sopra) === */
@media (max-width: 767.98px) {
  /* Hero slide title: font pi� piccolo + padding laterale per non scontrarsi con le frecce */
  .hero-content h2.hero-slide-title,
  .hero-slide-title {
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
    padding: 0 60px !important;
    margin: 0 auto !important;
    max-width: 100% !important;
  }
  .hero-content .lead,
  .hero .lead {
    font-size: 0.85rem !important;
    line-height: 1.35 !important;
    padding: 0 60px !important;
  }
  .hero-content .section-eyebrow,
  .hero .section-eyebrow {
    padding: 0 60px !important;
  }
}


/* === LOCATION-FORCE: numeri + indirizzo pi� bianchi e leggibili su bg-deep === */
.section.bg-deep .list-unstyled li {
  color: #ffffff !important;
  opacity: 1 !important;
  font-size: 1.02rem !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
}
.section.bg-deep .list-unstyled li strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.section.bg-deep .list-unstyled li .phone-text,
.section.bg-deep .list-unstyled li .phone-click,
.section.bg-deep .list-unstyled li a[href^="tel:"],
.section.bg-deep .list-unstyled li span[onclick] {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1.08rem !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.section.bg-deep .list-unstyled li .phone-text:hover,
.section.bg-deep .list-unstyled li .phone-click:hover {
  color: var(--brand-gold) !important;
}
.section.bg-deep .text-white-50,
.section.bg-deep small.text-white-50 {
  color: rgba(255, 255, 255, 0.85) !important;
}


/* === LOGO-BREAK: sezione logo centrato tra hero carousel e intro === */
.logo-break-section {
  background: #ffffff;
  padding: 0.4rem 0 !important;
  margin: 0 !important;
}
.logo-break-section .container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.logo-break-img {
  display: block !important;
  margin: 0 auto !important;
  max-width: 400px !important;
  width: auto !important;
  height: auto !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.08)) !important;
}
@media (max-width: 575.98px) {
  .logo-break-img { max-width: 260px !important; }
}


/* === INTERNAL-PAGES-IMG: immagini pagine interne compatte su mobile === */
@media (max-width: 767.98px) {
  main img,
  .page-content img,
  .section img,
  .gallery-thumb img,
  .hero-page img,
  .page-hero img,
  figure img,
  .experience-figure img,
  .map-figure img {
    max-height: 33vh !important;
    height: auto !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  .hero-page,
  .page-hero {
    min-height: auto !important;
    max-height: 33vh !important;
  }
}


/* === ACCESSIBILITY: prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .carousel-item, .hero-carousel .carousel-item { transition: none !important; }
}
