/* Tropical Nail Care Omayra — stylesheet unico, nessuna dipendenza esterna oltre i webfont. */

/* ============ TOKENS ============ */
:root{
  color-scheme: light;

  --color-bg:#F7F1E8;
  --color-bg-alt:#EFE4D2;
  --color-surface:#FFFDF9;
  --color-ink:#2A2420;
  --color-muted:#786F63;
  --color-burgundy:#6B2430;
  --color-burgundy-dark:#4E1A23;
  --color-sage:#7C8B6E;
  --color-sage-dark:#5F6C54;
  --color-border:#E2D5C0;
  --color-error:#A6432F;

  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --size-display: clamp(2.75rem, 6vw, 5.5rem);
  --size-h2: clamp(2rem, 4vw, 3.25rem);
  --size-h3: clamp(1.375rem, 2.2vw, 1.75rem);
  --size-body-lg: clamp(1.0625rem, 1.3vw, 1.25rem);
  --size-body: 1rem;
  --size-small: 0.875rem;
  --size-label: 0.8125rem;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --space-11:160px; --space-12:200px;

  --radius-sm:4px; --radius-md:10px; --radius-lg:24px; --radius-pill:999px;

  --duration-fast:150ms; --duration-normal:350ms; --duration-slow:700ms;
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-emphasized:cubic-bezier(.16,1,.3,1);

  --container-max:1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --header-h: 76px;
}

/* ============ RESET ============ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; -webkit-text-size-adjust:100%; } /* lo scroll alle ancore è animato via JS (vedi motion.js): smooth qui creerebbe doppia animazione */
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-ink);
  font-family:var(--font-body);
  font-size:var(--size-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p,figure{ margin:0; }
input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--color-burgundy); outline-offset:3px; }

.skip-link{
  position:absolute; left:16px; top:-60px; z-index:1000;
  background:var(--color-ink); color:var(--color-bg); padding:14px 20px; border-radius:var(--radius-sm);
  font-weight:600; font-size:var(--size-small); transition:top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus{ top:16px; }
body.no-scroll{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ============ TYPOGRAPHY UTIL ============ */
.eyebrow{
  font-family:var(--font-body); font-weight:600; font-size:var(--size-label);
  letter-spacing:.14em; text-transform:uppercase; color:var(--color-burgundy);
  display:inline-flex; align-items:center; gap:var(--space-2);
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--color-burgundy); display:inline-block; }
h1,.h1{ font-family:var(--font-display); font-weight:500; font-size:var(--size-display); line-height:1.02; letter-spacing:-0.01em; }
h2,.h2{ font-family:var(--font-display); font-weight:500; font-size:var(--size-h2); line-height:1.08; letter-spacing:-0.01em; }
h3,.h3{ font-family:var(--font-display); font-weight:500; font-size:var(--size-h3); line-height:1.15; }
.body-lg{ font-size:var(--size-body-lg); line-height:1.55; color:var(--color-muted); }
em,.italic{ font-style:italic; color:var(--color-burgundy); }
.text-muted{ color:var(--color-muted); }

/* ============ LAYOUT ============ */
.container{ max-width:var(--container-max); margin-inline:auto; padding-inline:var(--gutter); }
section{ position:relative; }
.section{ padding-block: var(--space-10); }
.section--tight{ padding-block: var(--space-8); }
.section--alt{ background:var(--color-bg-alt); }
.section--dark{ background:var(--color-ink); color:var(--color-bg); }
.section-head{ max-width:640px; margin-bottom:var(--space-7); }
.section-head.center{ margin-inline:auto; text-align:center; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-9); align-items:center; }
.grid-2.reverse{ direction:rtl; } .grid-2.reverse > *{ direction:ltr; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:16px 30px; border-radius:var(--radius-pill); font-weight:600; font-size:var(--size-small);
  letter-spacing:.02em; white-space:nowrap;
  transition:transform var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.btn--primary{ background:var(--color-burgundy); color:var(--color-bg); }
.btn--primary:hover{ background:var(--color-burgundy-dark); transform:translateY(-2px); box-shadow:0 10px 24px -12px rgba(107,36,48,.55); }
.btn--secondary{ background:transparent; color:var(--color-ink); border:1px solid var(--color-ink); }
.btn--secondary:hover{ background:var(--color-ink); color:var(--color-bg); transform:translateY(-2px); }
.btn--on-dark{ background:var(--color-bg); color:var(--color-ink); }
.btn--on-dark:hover{ background:var(--color-sage); color:var(--color-bg); transform:translateY(-2px); }
.btn--block{ width:100%; }
.btn svg{ flex:none; }
.link-cta{
  display:inline-flex; align-items:center; gap:var(--space-2); font-weight:600; font-size:var(--size-small);
  color:var(--color-ink); position:relative; padding-bottom:2px;
}
.link-cta::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(1); transform-origin:left; transition:transform var(--duration-normal) var(--ease-standard); }
.link-cta span{ transition:transform var(--duration-normal) var(--ease-emphasized); }
.link-cta:hover span{ transform:translateX(4px); }

.badge{ display:inline-flex; align-items:center; gap:var(--space-2); padding:6px 14px; border-radius:var(--radius-pill); font-size:var(--size-label); font-weight:600; letter-spacing:.04em; }
.badge--sage{ background:rgba(124,139,110,.16); color:var(--color-sage-dark); }
.badge--outline{ border:1px solid var(--color-border); color:var(--color-muted); }
.badge--warn{ background:rgba(166,67,47,.12); color:var(--color-error); }

/* ============ HEADER ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100; height:var(--header-h);
  display:flex; align-items:center; background:transparent;
  transition:background-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard);
  border-bottom:1px solid transparent;
}
.site-header.is-solid{ background:var(--color-bg); box-shadow:0 1px 0 var(--color-border); border-color:var(--color-border); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.brand{ font-family:var(--font-display); font-size:1.15rem; display:flex; align-items:baseline; gap:6px; }
.brand strong{ font-weight:600; letter-spacing:.02em; font-family:var(--font-body); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; }
.brand em{ font-style:italic; color:var(--color-burgundy); }
.nav-desktop{ display:flex; align-items:center; gap:var(--space-6); }
.nav-desktop a{ font-size:var(--size-small); font-weight:600; position:relative; padding-bottom:2px; }
.nav-desktop a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--color-burgundy); transition:width var(--duration-normal) var(--ease-standard); }
.nav-desktop a:hover::after{ width:100%; }
.header-actions{ display:flex; align-items:center; gap:var(--space-5); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; padding:8px; }
.nav-toggle span{ width:22px; height:2px; background:var(--color-ink); transition:transform var(--duration-normal) var(--ease-standard), opacity var(--duration-fast); }

.mobile-nav{ position:fixed; inset:0; z-index:99; background:var(--color-bg); transform:translateX(100%); transition:transform var(--duration-normal) var(--ease-emphasized); display:flex; flex-direction:column; padding:calc(var(--header-h) + var(--space-6)) var(--gutter) var(--space-8); }
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-nav a{ font-family:var(--font-display); font-size:1.75rem; padding:var(--space-3) 0; border-bottom:1px solid var(--color-border); }
.mobile-nav-footer{ margin-top:auto; display:flex; flex-direction:column; gap:var(--space-4); }

/* ============ HERO ============ */
.hero{ min-height:100svh; display:flex; align-items:center; padding-top:var(--header-h); overflow:clip; }
.hero .container{ width:100%; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-8); align-items:center; }
.hero-copy{ display:flex; flex-direction:column; gap:var(--space-5); }
.hero-copy h1{ margin-top:var(--space-3); }
.hero-cta-row{ display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-3); }
.hero-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-5); margin-top:var(--space-7); padding-top:var(--space-5); border-top:1px solid var(--color-border); font-size:var(--size-small); color:var(--color-muted); }
.hero-meta .rating-inline{ display:flex; align-items:center; gap:6px; color:var(--color-ink); font-weight:600; }
.scroll-cue{ display:inline-flex; align-items:center; gap:8px; }
.scroll-cue .dot{ width:6px; height:6px; border-radius:50%; background:var(--color-burgundy); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.3;} 50%{ opacity:1;} }

.media-frame{ position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--color-bg-alt); isolation:isolate; }
.media-frame img{ width:100%; height:100%; object-fit:cover; }
.media-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.media-frame.arch{ border-radius:50% 50% var(--radius-lg) var(--radius-lg) / 26% 26% var(--radius-lg) var(--radius-lg); }

.hero-media{ position:relative; }
.hero-media__main{ aspect-ratio:4/5; }
.hero-media__detail{ position:absolute; width:38%; aspect-ratio:1/1; right:-6%; bottom:-8%; box-shadow:0 24px 48px -20px rgba(42,36,32,.35); border:6px solid var(--color-bg); }

/* ============ TRUST BAR ============ */
.trust-bar{ border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.trust-item{ display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-7) var(--space-5); border-left:1px solid var(--color-border); }
.trust-item:first-child{ border-left:0; }
.trust-item svg{ color:var(--color-sage); }
.trust-item h3{ font-size:1.05rem; }
.trust-item p{ color:var(--color-muted); font-size:var(--size-small); }

/* ============ CURATIVO (protagonista) ============ */
.curativo-list{ margin-top:var(--space-6); }
.curativo-row{ display:grid; grid-template-columns:auto 1fr; gap:var(--space-5); padding-block:var(--space-5); border-top:1px solid var(--color-border); align-items:baseline; }
.curativo-row:last-child{ border-bottom:1px solid var(--color-border); }
.curativo-row .num{ font-family:var(--font-display); font-style:italic; color:var(--color-burgundy); font-size:1.5rem; }
.curativo-row h3{ margin-bottom:6px; }
.curativo-row p{ color:var(--color-muted); max-width:52ch; }
.curativo-closing{ margin-top:var(--space-6); font-family:var(--font-display); font-size:var(--size-h3); }

/* ============ NEEDS STRIP (problem -> solution) ============ */
.needs-strip .eyebrow{ margin-bottom:var(--space-5); }
.needs-list{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.needs-chip{
  padding:12px 20px; border-radius:var(--radius-pill); border:1px solid var(--color-border); background:var(--color-surface);
  font-size:var(--size-small); font-weight:600; color:var(--color-ink);
}

/* ============ SERVICES ============ */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
.service-card{ display:flex; flex-direction:column; gap:var(--space-4); opacity:0; transform:translateY(28px); transition:opacity var(--duration-slow) var(--ease-emphasized), transform var(--duration-slow) var(--ease-emphasized); }
.service-card.is-visible{ opacity:1; transform:none; }
.service-card.is-featured{ grid-column:span 2; }
.service-card.is-secondary{ opacity:.85; }
.service-card.is-secondary .service-card__media{ aspect-ratio:16/9; }
.service-card.is-secondary.is-visible{ opacity:.85; }
.service-card__media{ border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/5; }
.service-card.is-featured .service-card__media{ aspect-ratio:16/10; }
.service-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform var(--duration-slow) var(--ease-emphasized); }
.service-card:hover .service-card__media img{ transform:scale(1.045); }
.service-card__body h3{ margin-top:var(--space-2); }
.service-card__body p{ color:var(--color-muted); margin-top:6px; margin-bottom:var(--space-3); }

/* ============ OMAYRA ============ */
.omayra-portrait{ aspect-ratio:4/5; max-width:420px; }
.omayra-quote{ font-family:var(--font-display); font-size:var(--size-h3); font-style:italic; margin-block:var(--space-5); }

/* ============ REVIEWS ============ */
.reviews-stat{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-5); justify-content:center; }
.reviews-stat .num{ font-family:var(--font-display); font-size:clamp(3.5rem,8vw,6rem); line-height:1; }
.reviews-quote-slot{ margin-top:var(--space-8); padding:var(--space-6); border:1px dashed var(--color-border); border-radius:var(--radius-md); text-align:center; color:var(--color-muted); max-width:640px; margin-inline:auto; }

/* ============ COURSES ============ */
.courses-media{ aspect-ratio:3/4; }

/* ============ LOCATION ============ */
.location-media{ aspect-ratio:4/3; }
.hours-summary-row{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin-block:var(--space-4); font-weight:600; }
.amenities-list{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-2); }
.amenity-chip{ padding:6px 14px; border-radius:var(--radius-pill); border:1px solid var(--color-border); font-size:var(--size-label); color:var(--color-muted); }

/* ============ FAQ ============ */
.faq-list{ max-width:760px; margin-inline:auto; }
.faq-item{ border-top:1px solid var(--color-border); opacity:0; transform:translateY(16px); transition:opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard); }
.faq-item.is-visible{ opacity:1; transform:none; }
.faq-item:last-child{ border-bottom:1px solid var(--color-border); }
.faq-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding-block:var(--space-5); text-align:left; font-size:1.05rem; font-weight:600; }
.faq-chevron{ flex:none; transition:transform var(--duration-normal) var(--ease-standard); }
.faq-trigger[aria-expanded="true"] .faq-chevron{ transform:rotate(180deg); }
.faq-panel{ height:0; overflow:hidden; transition:height var(--duration-normal) var(--ease-standard); }
.faq-panel p{ color:var(--color-muted); padding-bottom:var(--space-5); max-width:60ch; }

/* ============ CTA FINALE ============ */
.cta-final{ text-align:center; }
.cta-final h2{ color:var(--color-bg); max-width:16ch; margin-inline:auto; }
.cta-final p{ color:rgba(247,241,232,.75); max-width:48ch; margin:var(--space-4) auto var(--space-6); }

/* ============ STICKY WHATSAPP ============ */
.sticky-wa{ position:fixed; left:0; right:0; bottom:0; z-index:90; padding:var(--space-3) var(--gutter); background:var(--color-surface); border-top:1px solid var(--color-border); transform:translateY(100%); transition:transform var(--duration-normal) var(--ease-emphasized); display:none; }
.sticky-wa.is-visible{ transform:translateY(0); }

/* ============ FOOTER ============ */
.site-footer{ background:var(--color-ink); color:var(--color-bg); padding-block:var(--space-9) var(--space-6); }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-6); flex-wrap:wrap; border-bottom:1px solid rgba(247,241,232,.15); padding-bottom:var(--space-7); margin-bottom:var(--space-7); }
.footer-brand{ font-family:var(--font-display); font-size:clamp(2.25rem,6vw,4rem); }
.footer-brand em{ font-style:italic; color:var(--color-sage); }
.footer-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6); }
.footer-col h3{ font-family:var(--font-body); font-size:var(--size-label); text-transform:uppercase; letter-spacing:.1em; color:rgba(247,241,232,.55); margin-bottom:var(--space-4); font-weight:600; }
.footer-col a, .footer-col p{ font-size:var(--size-small); color:rgba(247,241,232,.85); display:block; margin-bottom:var(--space-2); }
.footer-bottom{ margin-top:var(--space-8); padding-top:var(--space-5); border-top:1px solid rgba(247,241,232,.15); display:flex; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; font-size:.8rem; color:rgba(247,241,232,.55); }
.footer-disclaimer{ font-style:italic; }

/* ============ BOOKING MODAL ============ */
.modal-overlay{ position:fixed; inset:0; z-index:200; display:flex; align-items:flex-end; justify-content:center; background:rgba(42,36,32,0); transition:background-color var(--duration-normal) var(--ease-standard); }
.modal-overlay[hidden]{ display:none; } /* l'attributo hidden deve sempre vincere su display:flex, altrimenti l'overlay trasparente intercetta i click su tutta la pagina */
.modal-overlay.is-open{ background:rgba(42,36,32,.5); }
@media (min-width:640px){ .modal-overlay{ align-items:center; } }
.modal-panel{
  width:100%; max-width:560px; max-height:92svh; overflow-y:auto; background:var(--color-surface);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0; padding:var(--space-7) var(--space-6) var(--space-6);
  transform:translateY(100%); transition:transform var(--duration-normal) var(--ease-emphasized);
}
@media (min-width:640px){ .modal-panel{ border-radius:var(--radius-lg); transform:translateY(24px) scale(.97); opacity:0; transition:transform var(--duration-normal) var(--ease-emphasized), opacity var(--duration-normal) var(--ease-standard); } }
.modal-overlay.is-open .modal-panel{ transform:translateY(0) scale(1); opacity:1; }
.modal-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-4); margin-bottom:var(--space-5); }
.modal-close{ padding:6px; margin:-6px; color:var(--color-muted); }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:var(--space-4); }
.field label{ font-size:var(--size-small); font-weight:600; }
.field input, .field select, .field textarea{
  padding:12px 14px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-bg);
  transition:border-color var(--duration-fast) var(--ease-standard);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--color-burgundy); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.booking-preview{ background:var(--color-bg-alt); border-radius:var(--radius-md); padding:var(--space-4); font-size:var(--size-small); color:var(--color-muted); margin-bottom:var(--space-5); }
.booking-preview strong{ display:block; color:var(--color-ink); font-size:var(--size-label); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.privacy-note{ font-size:.78rem; color:var(--color-muted); margin-top:var(--space-3); text-align:center; }

/* ============ REVEAL GENERICO ============ */
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity var(--duration-slow) var(--ease-emphasized), transform var(--duration-slow) var(--ease-emphasized); }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .grid-2{ gap:var(--space-7); }
  .footer-cols{ grid-template-columns:repeat(2,1fr); gap:var(--space-7); }
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .service-card.is-featured{ grid-column:span 2; }
}

@media (max-width:860px){
  .nav-desktop{ display:none; }
  .header-actions .btn--primary{ display:none; }
  .nav-toggle{ display:flex; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-media{ order:-1; max-width:420px; margin-inline:auto; width:70%; }
  .hero-media__detail{ display:none; }
  .grid-2{ grid-template-columns:1fr; }
  .grid-2.reverse{ direction:ltr; }
  .grid-2 .media-frame{ order:-1; max-width:420px; margin-inline:auto; width:100%; }
  .trust-grid{ grid-template-columns:repeat(2,1fr); }
  .trust-item:nth-child(3){ border-left:0; }
  .trust-item{ border-bottom:1px solid var(--color-border); }
  .services-grid{ grid-template-columns:1fr; }
  .service-card.is-featured{ grid-column:span 1; }
  .footer-cols{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ flex-direction:column; align-items:flex-start; }
  .sticky-wa{ display:block; }
  .field-row{ grid-template-columns:1fr; }
  body{ padding-bottom:64px; } /* spazio per sticky bar */
}

@media (max-width:480px){
  .section{ padding-block:var(--space-8); }
  .container{ padding-inline:1.25rem; }
  .curativo-row{ grid-template-columns:1fr; gap:var(--space-2); }
  .reviews-stat{ flex-direction:column; gap:var(--space-2); }
}