/* ==========================================================================
   Raymat - Studio Medico Polispecialistico
   Foglio di stile del sito (impostazione del template di riferimento,
   palette adattata ai colori del marchio)
   ========================================================================== */

:root{
  --accent:#2E7D32;        /* verde operativo: bottoni, link */
  --accent-dark:#24631F;
  --brand:#61B157;         /* verde del logo: grafica, icone */
  --ink:#13241C;           /* verde-nero: titoli, footer */
  --body:#5A6A63;
  --mist:#F1F6EF;          /* pannelli chiari */
  --line:#E2EDDF;
}

html{ scroll-behavior:smooth; }

body{
  font-family:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color:var(--body);
  background:#fff;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* --------------------------------------------------------- impaginazione */
.wrap{ width:100%; max-width:1268px; margin:0 auto; padding:0 20px; }
@media (min-width:1024px){ .wrap{ padding:0 24px; } }

.section{ padding:72px 0; }
@media (min-width:1024px){ .section{ padding:110px 0; } }

.panel{ background:var(--mist); border-radius:30px; }
.panel-inner{ padding:64px 20px; }
@media (min-width:1024px){ .panel-inner{ padding:90px 44px; } }

/* --------------------------------------------------------- tipografia */
.h-hero{
  font-size:clamp(36px,6.4vw,68px);
  line-height:1.1;
  letter-spacing:-.02em;
  font-weight:600;
  color:#fff;
}
.h-page{
  font-size:clamp(34px,6vw,62px);
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:600;
  color:var(--ink);
}
.h-sec{
  font-size:clamp(28px,3.6vw,46px);
  line-height:1.1;
  letter-spacing:-.02em;
  font-weight:600;
  color:var(--ink);
}
.h-card{
  font-size:21px;
  line-height:1.3;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.01em;
}
.h-min{
  font-size:18px;
  line-height:1.35;
  font-weight:600;
  color:var(--ink);
}
.lede{ font-size:17px; line-height:1.65; }
.prose-col{ max-width:60ch; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--accent);
}
.eyebrow svg{ width:20px; height:20px; flex:none; }
.eyebrow.on-dark{ color:#9ED697; }

/* --------------------------------------------------------- bottoni */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 28px; border-radius:50px;
  font-size:16px; font-weight:600; line-height:1;
  transition:.35s ease-in-out; white-space:nowrap;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-dark); transform:translateY(-3px); box-shadow:0 14px 28px -16px rgba(19,36,28,.55); }
.btn-white{ background:#fff; color:var(--accent); }
.btn-white:hover{ transform:translateY(-3px); box-shadow:0 14px 28px -16px rgba(0,0,0,.4); }
.btn-outline{ border:1px solid var(--line); background:#fff; color:var(--ink); }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-3px); }
.btn-glass{ background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.55); color:#fff; backdrop-filter:blur(6px); }
.btn-glass:hover{ background:#fff; color:var(--ink); transform:translateY(-3px); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ transform:translateY(-3px); opacity:.92; }

.link-more{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; color:var(--accent); transition:.3s ease-in-out;
}
.link-more svg{ width:18px; height:18px; transition:transform .3s ease-in-out; }
.link-more:hover svg{ transform:translateX(4px); }

/* --------------------------------------------------------- card */
.card{
  background:#fff; border:1px solid var(--line); border-radius:24px;
  transition:.45s ease-in-out;
}
.card-pad{ padding:28px; }
@media (min-width:1024px){ .card-pad{ padding:32px; } }
.card-hover:hover{ transform:translateY(-5px); border-color:#C8DFC3; box-shadow:0 26px 44px -34px rgba(19,36,28,.5); }

.icon-circle{
  width:56px; height:56px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; flex:none;
  transition:.4s ease-in-out;
}
.icon-circle svg{ width:26px; height:26px; }
.icon-circle.soft{ background:var(--mist); color:var(--accent); }
.card-hover:hover .icon-circle.soft{ background:var(--accent); color:#fff; }
.icon-circle.lg{ width:72px; height:72px; }
.icon-circle.lg svg{ width:32px; height:32px; }

.hairline{ height:1px; background:var(--line); border:0; }

/* --------------------------------------------------------- immagini */
/* logo fornito su fondo nero: il filtro rende trasparente il nero (scontorno) */
.logo-cutout{ filter:url(#logo-cutout); }

/* logo fornito su fondo bianco sporco: il filtro rende trasparente il fondo chiaro */
.logo-cutout-light{ filter:url(#logo-cutout-light); }

.zoom{ overflow:hidden; border-radius:20px; display:block; }
.zoom img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease-out; }
.zoom:hover img{ transform:scale(1.08); }

.media-16-10{ aspect-ratio:16/10; }
.media-4-3{ aspect-ratio:4/3; }
.media-3-4{ aspect-ratio:3/4; }
.media-1-1{ aspect-ratio:1/1; }

/* --------------------------------------------------------- liste */
.check-list{ display:grid; gap:16px; }
.check-list li{ display:flex; gap:12px; align-items:flex-start; }
.check-list li::before{
  content:""; flex:none; width:22px; height:22px; margin-top:2px; border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
}
.dot-list li{ position:relative; padding-left:18px; }
.dot-list li::before{
  content:""; position:absolute; left:0; top:11px; width:7px; height:7px; border-radius:50%;
  background:var(--brand);
}

.tag{
  display:inline-block; padding:8px 16px; border-radius:50px;
  background:var(--mist); color:var(--ink); font-size:15px; font-weight:500;
  border:1px solid var(--line);
}
.tag-dark{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#fff; }

/* --------------------------------------------------------- header */
.topbar{ background:var(--accent); color:#fff; font-size:14px; }
.topbar a{ transition:.3s; }
.topbar a:hover{ opacity:.75; }
.topbar .sep{ width:1px; height:18px; background:rgba(255,255,255,.35); }

.site-header{ background:#fff; position:relative; z-index:60; }
.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:15.5px; font-weight:500; color:var(--ink);
  padding:12px 0; transition:.3s ease-in-out;
}
.nav-link:hover{ color:var(--accent); }
.nav-link.active{ color:var(--accent); font-weight:700; }

.has-sub{ position:relative; }
.sub-menu{
  position:absolute; top:100%; left:-18px; min-width:260px;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:10px; box-shadow:0 30px 60px -40px rgba(19,36,28,.55);
  opacity:0; visibility:hidden; transform:scaleY(.86); transform-origin:top;
  transition:.28s ease-in-out;
}
.has-sub:hover .sub-menu,.has-sub:focus-within .sub-menu{ opacity:1; visibility:visible; transform:scaleY(1); }
.sub-menu a{
  display:block; padding:10px 14px; border-radius:12px;
  font-size:15.5px; color:var(--ink); transition:.25s;
}
.sub-menu a:hover{ background:var(--mist); color:var(--accent); }
.sub-menu a.active{ color:var(--accent); font-weight:700; }

/* menu mobile */
.mobile-panel{ display:none; border-top:1px solid var(--line); background:#fff; }
.mobile-panel.open{ display:block; }
.mobile-panel a{
  display:block; padding:14px 0; font-size:17px; font-weight:500;
  color:var(--ink); border-bottom:1px solid var(--line);
}
.mobile-panel a.active{ color:var(--accent); font-weight:700; }
.mobile-panel .sub a{ padding-left:18px; font-size:16px; color:var(--body); }

/* barra fissa mobile: chiamata, whatsapp e prenotazione sempre a portata di pollice */
.quickbar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
}
.quickbar .btn{ width:100%; padding:14px 6px; font-size:14px; gap:6px; }
@media (min-width:1024px){ .quickbar{ display:none; } }
body{ padding-bottom:84px; }
@media (min-width:1024px){ body{ padding-bottom:0; } }

/* --------------------------------------------------------- hero / page header */
.hero-box{
  position:relative; overflow:hidden; border-radius:30px;
  min-height:600px; display:flex; align-items:center;
}
@media (min-width:1024px){ .hero-box{ min-height:740px; } }
.hero-box::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(19,36,28,.72) 0%, rgba(19,36,28,.55) 45%, rgba(19,36,28,.78) 100%);
}
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-content{ position:relative; z-index:2; }

.page-head{
  position:relative; overflow:hidden; background:var(--mist); border-radius:30px;
  padding:72px 20px; text-align:center;
}
@media (min-width:1024px){ .page-head{ padding:104px 24px; } }
.page-head::before,.page-head::after{
  content:""; position:absolute; bottom:-90px; width:260px; height:260px; border-radius:50%;
  background:rgba(97,177,87,.1);
}
.page-head::before{ left:-60px; }
.page-head::after{ right:-60px; }
.crumb{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:#fff; border-radius:50px;
  padding:13px 26px; font-size:15px; font-weight:500;
}
.crumb a{ transition:.3s; }
.crumb a:hover{ opacity:.8; }

/* --------------------------------------------------------- blocco scuro */
.dark-box{
  position:relative; overflow:hidden; border-radius:24px;
  background:var(--ink); color:#fff;
}
.dark-box .bgimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.38; }
.dark-box .inner{ position:relative; z-index:2; }

/* --------------------------------------------------------- numeri */
.numbers{ display:flex; flex-wrap:wrap; justify-content:center; }
.num-circle{
  width:min(42vw,230px); height:min(42vw,230px); border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:18px; margin:-14px;
  transition:.45s ease-in-out;
}
@media (min-width:1024px){ .num-circle{ width:272px; height:272px; margin:-26px; } }
.num-circle.outline{ border:1px solid var(--accent); background:#fff; color:var(--ink); }
.num-circle.filled{ background:var(--accent); color:#fff; }
.num-circle .n{ font-size:clamp(28px,4vw,40px); font-weight:600; letter-spacing:-.02em; line-height:1; }
.num-circle .t{ font-size:14px; line-height:1.4; margin-top:10px; max-width:16ch; }
.num-circle.outline .t{ color:var(--body); }
.numbers:hover .num-circle.outline{ background:var(--accent); color:#fff; border-color:var(--accent); transform:translateY(-14px); }
.numbers:hover .num-circle.outline .t{ color:rgba(255,255,255,.85); }

/* --------------------------------------------------------- percorso a step */
.steps-line{ position:relative; }
.steps-line::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line);
}
.step-badge{
  position:relative; z-index:2; width:46px; height:46px; border-radius:50%;
  background:var(--accent); color:#fff; font-weight:600; font-size:14px;
  display:flex; align-items:center; justify-content:center; margin:0 auto;
}

/* --------------------------------------------------------- accordion */
.acc-item{ border-bottom:1px solid var(--line); }
.acc-btn{
  width:100%; text-align:left; display:flex; gap:20px; align-items:flex-start;
  justify-content:space-between; padding:22px 0;
  font-size:17px; font-weight:600; color:var(--ink); transition:.3s;
}
.acc-btn:hover{ color:var(--accent); }
.acc-item.open .acc-btn{ color:var(--accent); }
.acc-btn svg{ width:20px; height:20px; flex:none; margin-top:3px; transition:transform .3s ease-in-out; }
.acc-item.open .acc-btn svg{ transform:rotate(180deg); }
.acc-body{ display:none; padding:0 0 24px; max-width:72ch; }
.acc-item.open .acc-body{ display:block; }

/* --------------------------------------------------------- tab */
.tab-btn{
  padding:13px 26px; border-radius:50px; font-size:15.5px; font-weight:600;
  background:#fff; color:var(--ink); border:1px solid var(--line); transition:.3s;
}
.tab-btn:hover{ border-color:var(--accent); color:var(--accent); }
.tab-btn.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.tab-pane{ display:none; }
.tab-pane.active{ display:block; }

/* --------------------------------------------------------- form */
.field{
  width:100%; background:var(--mist); border:1px solid transparent; border-radius:14px;
  padding:17px 22px; font-size:16px; color:var(--ink); transition:.3s;
}
.field::placeholder{ color:#8A978F; }
.field:focus{ outline:none; border-color:var(--accent); background:#fff; }
textarea.field{ min-height:140px; resize:vertical; }
.form-note{ font-size:13.5px; line-height:1.55; color:#7C8A83; }

/* --------------------------------------------------------- mappa su richiesta */
.map-embed{
  position:relative; overflow:hidden; border-radius:24px;
  background:var(--mist); border:1px solid var(--line);
}
.map-embed iframe{ display:block; width:100%; height:100%; border:0; }
.map-ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  height:100%; padding:40px 24px; text-align:center;
}

/* --------------------------------------------------------- footer */
.site-footer{
  background:var(--ink); color:#fff;
  border-radius:30px 30px 0 0; margin:0 10px;
}
@media (min-width:1024px){ .site-footer{ margin:0 16px; } }
.site-footer a{ color:rgba(255,255,255,.78); transition:.3s; }
.site-footer a:hover{ color:#fff; }
.footer-title{ font-size:19px; font-weight:600; color:#fff; margin-bottom:22px; }
.foot-link{ display:flex; gap:10px; align-items:flex-start; padding:7px 0; font-size:15.5px; }
.foot-link::before{
  content:""; flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--brand); margin-top:9px;
}
.soc{
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.14);
  display:inline-flex; align-items:center; justify-content:center;
  transition:.3s;
}
.soc:hover{ background:var(--brand); }
.soc svg{ width:18px; height:18px; }

/* --------------------------------------------------------- animazioni */
@keyframes fadeInUp{
  from{ opacity:0; transform:translate3d(0,40px,0); }
  to{ opacity:1; transform:none; }
}
.reveal{ opacity:0; }
.reveal.in{ animation:fadeInUp 1s both; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; }
  .reveal.in{ animation:none; }
  .zoom img,.card,.btn{ transition:none; }
}

/* --------------------------------------------------------- utilità */
.shadow-soft{ box-shadow:0 40px 80px -60px rgba(19,36,28,.55); }
.ring-soft{ box-shadow:0 0 0 1px var(--line); }
.text-balance{ text-wrap:balance; }