/* ================================================================
   MARIACLARA 9.1 — PEARL AURORA LUXURY (07/11/2026)
   File separato, non distruttivo: effetti e correzioni condivise.
   01 • Sezioni bianche | 02 • Pulsanti | 03 • Header & footer
   04 • Card | 05 • Carosello | 06 • Mobile & accessibilità
   ================================================================ */

/* 01 • Decorazioni vettoriali: il contenuto resta HTML selezionabile. */
.intro-section, .portfolio-section, .content-section,
.gallery-section, .legal-document, .atelier-bridal {
  background-image: url("../decor/pearl-aurora-top.svg"), url("../decor/pearl-aurora-bottom.svg");
  background-position: center top, center bottom;
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat;
  background-color: #fcfaf7;
}
.intro-section { background-color: #fffdfa; }
.portfolio-section:nth-of-type(odd), .gallery-section { background-color: #f0f8f4; }
/* Le onde devono rimanere ai margini: testi/foto sempre in primo piano. */
.intro-section .container, .content-section .container,
.portfolio-section .container, .gallery-section .container,
.atelier-bridal .container { position: relative; z-index: 1; }

/* 02 • Capsule Petrolio 3D ad alto contrasto sui fondi chiari. */
.home-explore a,
.inner-hero__actions .liquid-btn,
.content-section .liquid-btn--emerald,
.end-cta .liquid-btn--emerald,
.portfolio-tags--booking .liquid-btn {
  color: #fff1cc !important;
  background: radial-gradient(ellipse at 32% -14%,rgba(141,234,226,.55),transparent 62%),
              linear-gradient(160deg,#267d7e 0%,#07525b 57%,#022f39 100%) !important;
  border: 1px solid rgba(232,202,143,.60) !important;
  box-shadow: inset 0 2px 3px #d4ffff7b, inset 0 -5px 11px #001d3185,
              0 11px 25px rgba(2,44,47,.25), 0 2px 1px #e9c68950 !important;
  text-shadow: 0 1px 2px #002226 !important;
  transition: transform .25s ease,box-shadow .25s ease,filter .25s ease;
}
.home-explore a:hover,
.inner-hero__actions .liquid-btn:hover,
.content-section .liquid-btn--emerald:hover,
.portfolio-tags--booking .liquid-btn:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 2px 3px #d4ffff99, inset 0 -5px 11px #001d3185,
              0 17px 31px rgba(2,44,47,.32), 0 0 0 1px #e9c689aa !important;
}
.home-explore a { position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; font-weight: 600; }
.home-explore a::after { content: ""; position: absolute; pointer-events:none; inset:-60% auto -60% -65%; width:42%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-17deg);
  animation: aurora-sweep 5.7s ease-in-out infinite; }
.home-explore a:nth-child(2n)::after { animation-delay: .9s; }
@keyframes aurora-sweep { 0%,30%{transform:translateX(0) skewX(-17deg);opacity:0} 42%{opacity:.85}
  70%,100%{transform:translateX(510%) skewX(-17deg);opacity:0} }
/* Cinematic Light Sweep su dispositivi che supportano l'animazione. */
.liquid-btn::after,.mobile-book a::after,.gold-ribbon::after,.photo-nav::after { animation-duration: 5.3s; }

/* 03 • Identità e pulsanti del footer. */
.brand .mc-live-logo--header { width: 122px; min-width: 122px; }
.footer-logo .mc-live-logo--footer { width: min(100%,410px); max-width: 410px; }
.footer-logo .mc-live-logo--footer img { image-rendering: auto; }
.top-bar__inner>.top-social { align-items: center; gap: 10px; }
.top-social a { width: 38px !important; height: 38px !important; font-size: 0 !important; line-height: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center; }
.top-social svg { width: 22px !important; height: 22px !important; display: block; }
.top-social a::before,.top-social a::after { content: none !important; display: none !important; }
.footer-utility [data-open-install], .footer-utility .gold-ribbon[data-open-install] {
  width: max-content !important; min-width: 0 !important; max-width: 100%;
  padding: 12px 25px !important; margin-inline: auto; justify-self: center;
  white-space: nowrap;
}
/* X popup assolutamente simmetrica. */
#install-close { box-sizing: border-box; display: grid !important; place-items:center;
  width: 42px !important; height: 42px !important; min-width: 42px;
  padding:0 !important; aspect-ratio: 1; border-radius:50% !important;
  font: 500 28px/1 Arial,sans-serif !important; text-align:center; }

/* 04 • Card trattamenti: vetro definito, luce oro, testi nitidi. */
.service-group { border-color:rgba(241,212,155,.62); background:
  radial-gradient(ellipse at 17% -8%,rgba(153,237,224,.28),transparent 67%),
  linear-gradient(133deg,rgba(52,126,127,.83),rgba(10,73,80,.98) 64%,rgba(4,52,62,.98));
  box-shadow:inset 0 2px 2px #f5fff57d,inset 0 -2px 5px #001e335b,
    0 20px 42px rgba(2,35,42,.35),0 0 0 1px #d9b77a2a;
}
.service-group h3 { color:#ffe5ae; text-shadow:0 1px 5px #002a30; }
.service-pill { color:#fff3d8; border-color:#f8ddb570;
  background:linear-gradient(140deg,rgba(102,165,159,.30),rgba(2,49,58,.53));
  box-shadow:inset 0 1px 2px #ffffff38,0 4px 12px #001b2525; }
.service-pill:hover { background:linear-gradient(140deg,#388280,#08515b); color:#fff6de; }
/* Floating images illuminated in champagne gold on dark portfolio. */
.portfolio-photo, .portfolio-photo button, .portfolio-photo img { border-radius: 24px; }
.portfolio-photo { box-shadow: 0 17px 30px rgba(2,37,43,.22),0 12px 38px rgba(222,177,91,.22),0 0 1px #e6c583aa; }
.lightbox > img { box-shadow: 0 18px 65px rgba(233,183,101,.25), 0 1px 8px #e7bc7750; }
.quick-actions a[aria-label="Prenota su Fresha"] .mc-mini-svg { color:#fff3d2; filter:drop-shadow(0 1px 2px #4e3617); }

/* 05 • Drag manuale + scorrimento cinematico automatico. */
.gallery-track { scroll-snap-type:none !important; scroll-behavior:auto !important; cursor:grab; touch-action:pan-x pan-y;
  overscroll-behavior-x:contain; -webkit-user-select:none; user-select:none; scrollbar-width:none; }
.gallery-track::-webkit-scrollbar { display:none; }
.gallery-track.is-dragging { cursor:grabbing; scroll-behavior:auto !important; }
.gallery-track .gallery-tile { scroll-snap-align:none; }
.gallery-track .gallery-tile img { -webkit-user-drag:none; user-drag:none; }
.gallery-controls { display:none; }

/* 06 • Mobile: il CTA Prenota resta cliccabile davanti ai contenuti. */
@media(max-width:760px) {
  .brand .mc-live-logo--header { width:82px; min-width:82px; }
  .footer-logo .mc-live-logo--footer { width:min(86vw,360px); }
  .intro-section,.portfolio-section,.content-section,.gallery-section,.atelier-bridal {
    background-size:auto 240px,auto 245px;
  }
  .mobile-book { position:fixed !important; z-index: 100000 !important;
    pointer-events:auto !important; isolation:isolate; }
  .mobile-book a { position:relative; z-index:2; pointer-events:auto !important;
    min-height:48px; touch-action:manipulation; }
  .mobile-book a[href*="fresha.com"] { min-height:50px; }
  .quick-actions { bottom:110px; }
  .top-social a { width:36px !important;height:36px !important; }
}
/* Modali intenzionalmente sopra CTA e barra fissa; quando chiusi niente click-block. */
#install-shade[hidden],#consent-shade[hidden],#ultimate-install[hidden],#ultimate-cookie[hidden] {
  display:none !important;pointer-events:none !important; }
#install-shade:not([hidden]), #consent-shade:not([hidden]) { z-index:100100 !important; }
#ultimate-install:not([hidden]), #ultimate-cookie:not([hidden]) { z-index:100101 !important; }
/* Focus visibile e tocco reattivo. */
:where(a,button,[role="button"]):focus-visible { outline:2px solid #e8bd73;outline-offset:3px; }
:where(button,a).mc-touched { filter:brightness(1.13); }
@media(prefers-reduced-motion:reduce) {
  .home-explore a::after { animation:none; opacity:0; }
}




/* 07 — Le sezioni chiare già coperte dalla 9.1 conservano il loro
   trattamento; estendiamo solo ai due blocchi bianchi mancanti della Home. */

.promo-section {
  background-color: #fcfaf7;
  background-image:
    url("../decor/pearl-aurora-top.svg"),
    url("../decor/pearl-aurora-bottom.svg");
  background-position: center top, center bottom;
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat;
}

.promo-section > .container {
  position: relative;
  z-index: 1;
}

/* 08 — Nessuna immagine raster per il bottone: vero link, CSS leggero. */





/* 09 — L'immagine originale è 1080×1600: rapporto 27/40.
   La cornice segue l'intero ritratto, senza stretch né crop. */
.page-portfolio .lux-page-image {
  width: 100%;
  max-width: 465px;
  height: auto !important;
  aspect-ratio: 27 / 40;
  justify-self: end;
  overflow: hidden;
}
.page-portfolio .lux-page-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 760px) {
  
  .promo-section {
    background-size: auto 240px, auto 245px;
  }
  .page-portfolio .lux-page-image {
    justify-self: center;
    width: min(100%, 345px);
    max-width: 345px;
    height: auto !important;
  }
}
@media (max-width: 620px) {
  .page-portfolio .lux-page-image {
    width: min(100%, 320px);
    max-width: 320px;
  }
  
}


/* ===================================================================
   MARIACLARA 9.3 — PATCH MIRATA (07/11/2026)
   10 • Carosello Home: swipe mobile nativo + autoplay senza stalli
   11 • Fresha: massimo contrasto nella promozione della Home
   =================================================================== */
/* Mobile: gesto orizzontale nativo, scroll verticale della pagina libero. */
#gallery-track { -webkit-overflow-scrolling: touch; scroll-behavior: auto !important;
  touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
#gallery-track .gallery-tile { touch-action: pan-x pan-y; }
#gallery-track .gallery-tile img { pointer-events: none; }
#gallery-track.is-dragging { cursor: grabbing; }
/* Gold Liquid Glossy più leggibile, senza cambiare destinazione o testo. */
.promo-panel a.liquid-btn--gold {
  position: relative;
  background: radial-gradient(ellipse at 40% 0%,#fff9e8,transparent 68%),
              linear-gradient(180deg,#fff2c4 0%,#eac47f 38%,#c18c40 83%,#eac68a 100%) !important;
  border: 1px solid #a67434 !important;
  color: #06383d !important;
  box-shadow: inset 0 2px 2px #ffffffec,inset 0 -4px 7px #80501e6b,
              0 3px 0 #865b2880,0 12px 27px #7852203d !important;
}
.promo-panel a.liquid-btn--gold .liquid-btn__inner {
  background: transparent !important;
  box-shadow: none !important;
  color: #06383d !important;
  text-shadow: 0 1px 0 #fffbeb !important;
}
.promo-panel a.liquid-btn--gold .liquid-btn__inner span {
  color: inherit !important;
}
.promo-panel a.liquid-btn--gold:hover {
  filter: brightness(1.04);
  transform: translateY(-2px);
}
.promo-panel a.liquid-btn--gold:focus-visible {
  outline: 3px solid #065f66;
  outline-offset: 4px;
}


/* ============================================================================
   12 | TOPBAR PERFECTION · 9.5.2
   Solo icone social e numero telefonico sul desktop.
   Le varianti dei pulsanti approvate non vengono modificate.
   ============================================================================ */
/* Le icone sono CENTRATE rispetto al cerchio, senza offset di font o padding. */
.top-bar__inner > .top-social {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  justify-self:end;
  gap:10px !important;
}
.top-bar__inner > .top-social > a {
  box-sizing:border-box !important;
  display:grid !important;
  place-items:center !important;
  position:relative;
  flex:0 0 38px !important;
  width:38px !important;
  height:38px !important;
  min-width:38px;
  min-height:38px;
  padding:0 !important;
  margin:0 !important;
  line-height:1 !important;
  text-indent:0 !important;
  border-radius:50% !important;
}
.top-bar__inner > .top-social > a > svg {
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:21px !important;
  height:21px !important;
  margin:0 !important;
  padding:0 !important;
  transform:translate(-50%,-50%) !important;
  transform-origin:center center !important;
  pointer-events:none;
}
/* Telefono presente nell'HTML di tutte le pagine, nascosto sui mobili/tablet. */
.top-bar__inner > .mc-topbar-phone { display:none !important; }
@media (min-width:981px) {
  .top-bar__inner {
    grid-template-columns:minmax(0,1fr) auto auto auto;
    column-gap:clamp(14px,2.2vw,34px);
    align-items:center;
  }
  .top-bar__inner > .mc-topbar-phone {
    display:inline-flex !important;
    grid-column:3;
    grid-row:1;
    align-items:center;
    justify-content:center;
    gap:8px;
    white-space:nowrap;
    font-weight:650;
    font-size:13px;
    letter-spacing:.025em;
    line-height:1.25;
    color:#f4dfa9;
    text-decoration:none;
  }
  .top-bar__inner > .mc-topbar-phone > svg {
    width:17px;
    height:17px;
    flex:none;
  }
  .top-bar__inner > .top-social {
    grid-column:4;
    grid-row:1;
  }
  .top-bar__inner > .mc-topbar-phone:hover { color:#fff7df; }
  .top-bar__inner > .mc-topbar-phone:focus-visible {
    outline:2px solid #e8bd73;
    outline-offset:4px;
    border-radius:5px;
  }
}
@media (max-width:760px) {
  .top-bar__inner > .top-social { gap:6px !important; }
  .top-bar__inner > .top-social > a {
    flex-basis:36px !important;
    width:36px !important;
    height:36px !important;
    min-width:36px;
    min-height:36px;
  }
  .top-bar__inner > .top-social > a > svg {
    width:20px !important;
    height:20px !important;
  }
}