/* Centro Estetico Jolie — CSS condiviso fra index.html, trattamenti.html e
   privacy.html.
   Estratto verbatim dal <style> inline di index.html: qui sta solo cio' che
   entrambe le pagine usano (token, reset, header e menu, .btn, footer,
   utility di movimento condivise). Cio' che serve a una pagina sola resta
   inline in quella pagina. */

/* Font salvati dentro il sito (fonts/, licenze OFL accanto) invece del
   <link> a Google Fonts: nessuna richiesta a domini esterni. Solo i pesi che
   il CSS usa davvero: Italiana 400, Manrope 400/600/700. */
@font-face{font-family:'Italiana';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/italiana-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/manrope-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/manrope-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/manrope-latin-700-normal.woff2) format('woff2');}

:root{
  --avorio:#F8F4EF;
  --rosa-cipria:#C2A79D;
  --beige-nude:#E0B78F;
  --nocciola:#AC8673;
  --nocciola-scuro:#7A5744;
  --nocciola-profondo:#5C3F2F;
  --bruno:#3B322C;
  --bruno-tenue:rgba(59,50,44,.74);
  --bordo-tenue:rgba(59,50,44,.14);
  --avorio-velato:rgba(248,244,239,.92);
  --ombra-morbida:rgba(59,50,44,.18);
  --font-titoli:'Italiana', serif;
  --font-testo:'Manrope', sans-serif;
  --dur-fast:180ms;
  --dur-base:280ms;
  --ease-premium:cubic-bezier(0.4,0,0.2,1);
  --space-xs:8px;
  --space-sm:16px;
  --space-md:24px;
  --space-lg:40px;
  --space-xl:64px;
  --space-2xl:96px;
  --t-titolo:clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
  --t-sottotitolo:clamp(1.15rem, 0.5vw + 1.05rem, 1.35rem);
  --t-corpo:1.05rem;
  --t-lista:.98rem;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{overflow-x:clip;scroll-behavior:smooth;}
body{
  overflow-x:clip;
  font-family:var(--font-testo);
  background:var(--avorio);
  color:var(--bruno);
  line-height:1.7;
  font-weight:400;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;}
h1,h2,h3{font-family:var(--font-titoli);font-weight:400;font-style:normal;line-height:1.12;color:var(--bruno);overflow-wrap:anywhere;min-width:0;}
h2{font-size:var(--t-titolo);}
.contenitore{width:min(1120px, 90%);margin:0 auto;}
.skip-link{
  position:absolute;left:-999px;top:auto;
  background:var(--nocciola-scuro);color:var(--avorio);
  padding:12px 20px;border-radius:0 0 8px 0;font-weight:600;z-index:200;
  text-decoration:none;
}
.skip-link:focus{left:0;top:0;}
:focus-visible{outline:2px solid var(--nocciola-scuro);outline-offset:3px;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:15px 30px;border-radius:999px;
  font-family:var(--font-testo);font-weight:600;font-size:.95rem;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-premium), border-color var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium);
}
.btn-primario{background:var(--nocciola-scuro);color:var(--avorio);border:1.5px solid var(--nocciola-scuro);}
.btn-primario:hover{background:var(--nocciola-profondo);border-color:var(--nocciola-profondo);}
.btn-primario:active{transform:scale(.97);}
.btn-contorno{background:transparent;color:var(--bruno);border:1.5px solid var(--bruno);}
.btn-contorno:hover{background:var(--bruno);color:var(--avorio);}
.btn-contorno:active{transform:scale(.97);}
.btn-avorio{background:var(--avorio);color:var(--nocciola-scuro);border:1.5px solid var(--avorio);}
.btn-avorio:hover{background:transparent;color:var(--avorio);border-color:var(--avorio);}
.btn-avorio:active{transform:scale(.97);}
.btn.magnetic{will-change:transform;}
.testo-breve{display:none;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

@media (max-width:480px){
  .testo-lungo{display:none;}
  .testo-breve{display:inline;}
}

/* HEADER */
header.header{
  position:sticky;top:0;z-index:50;
  background:var(--avorio-velato);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--bordo-tenue);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
  padding:16px 0;
}
.wordmark{
  display:flex;flex-direction:column;text-decoration:none;color:var(--bruno);flex-shrink:0;
}
.wordmark svg{display:block;height:29px;width:auto;}
.wordmark-sub{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bruno-tenue);margin-top:2px;font-weight:600;}
.header-menu{
  position:absolute;top:100%;left:0;right:0;
  background:var(--avorio-velato);
  backdrop-filter:blur(6px);
  box-shadow:0 14px 30px var(--ombra-morbida);
  animation:menu-apertura var(--dur-fast) var(--ease-premium) both;
}
.header-menu ul{list-style:none;padding:var(--space-xs) 0;}
.header-menu ul li + li{border-top:1px solid var(--bordo-tenue);}
.header-menu a{
  display:block;padding:12px 0;
  font-size:.95rem;font-weight:600;letter-spacing:.02em;
  text-decoration:none;color:var(--bruno);
  transition:color var(--dur-fast) var(--ease-premium);
}
.header-menu a:hover{color:var(--nocciola-scuro);}
.header-menu a:active{color:var(--nocciola-profondo);}
@keyframes menu-apertura{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}}
.header-azioni{display:flex;align-items:center;gap:var(--space-sm);}
.header-instagram{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex-shrink:0;
  border-radius:50%;
  background:transparent;
  border:1.5px solid var(--bruno);
  color:var(--bruno);
  transition:background var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-premium), transform var(--dur-fast) var(--ease-premium);
}
.header-instagram svg{display:block;width:18px;height:18px;}
.header-instagram:hover{background:var(--bruno);color:var(--avorio);}
.header-instagram:active{transform:scale(.97);}
.header-menu-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex-shrink:0;
  border-radius:50%;
  background:transparent;
  border:1.5px solid var(--bruno);
  color:var(--bruno);
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-premium), transform var(--dur-fast) var(--ease-premium);
}
.header-menu-toggle svg{display:block;width:18px;height:18px;}
.header-menu-toggle:hover{background:var(--bruno);color:var(--avorio);}
.header-menu-toggle:active{transform:scale(.97);}
@media (max-width:859px){
  .header-inner{gap:var(--space-xs);}
  .header-azioni{gap:var(--space-xs);}
  .header-azioni .btn-primario{padding:10px 15px;}
}
@media (max-width:480px){
  .header-instagram,.header-menu-toggle{width:36px;height:36px;}
  .header-instagram svg,.header-menu-toggle svg{width:16px;height:16px;}
}

/* NAVIGAZIONE — nella fascia in cui il contenitore e' ancora stretto, gap e
   padding della barra si stringono invece di mandare a capo il pulsante. */
@media (min-width:860px) and (max-width:1023px){
  .header-inner{gap:var(--space-sm);}
  .header-azioni{gap:var(--space-xs);}
  .header-azioni .btn-primario{padding:12px 20px;}
}

@media (max-width:420px){
  :root{--t-lista:.92rem;}
}

footer{
  background:var(--avorio);
  border-top:1px solid var(--bordo-tenue);
  padding:var(--space-lg) 0;
  text-align:center;
}
footer p{font-size:.85rem;color:var(--bruno-tenue);}
footer p + p{margin-top:6px;}
footer a{color:var(--nocciola-scuro);text-decoration:none;font-weight:600;}
footer a:hover{text-decoration:underline;}
footer a:active{color:var(--nocciola-profondo);}

@media (min-width:860px){
  .header-inner{padding:20px 0;}
}

/* ── motion-locali: scroll-reveal ── */
[data-reveal]{
  opacity:0;transform:translateY(18px);
  transition:opacity 520ms var(--ease-premium), transform 520ms var(--ease-premium);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity, transform;
}
[data-reveal].is-in{opacity:1;transform:none;}

/* ── motion-locali: ripple-press ── */
.ripple{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;}
.ripple > .ripple-wave{
  position:absolute;border-radius:50%;transform:scale(0);opacity:.3;
  background:currentColor;pointer-events:none;
  animation:ripple-bloom 600ms ease-out forwards;
}
@keyframes ripple-bloom{to{transform:scale(1);opacity:0;}}

/* ── prefers-reduced-motion: i soli frammenti delle regole condivise ── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1;transform:none;transition:none;}
  .btn.magnetic{transition:none;}
  .ripple > .ripple-wave{display:none;}
  .header-menu{animation:none;}
}