/* =============================================
   LUCIANO DESIDERI — STUDIO MEDICO DENTISTICO
   CSS Moderno v2.0
   ============================================= */


/* ─── 1. CUSTOM PROPERTIES ─────────────────── */
:root {
  /* Palette */
  --c-primary:    #0d6e8a;
  --c-primary-dk: #084f64;
  --c-primary-lt: #1a8fae;
  --c-accent:     #c9a96e;
  --c-accent-dk:  #a8873a;
  --c-dark:       #1a2332;
  --c-text:       #2d3748;
  --c-muted:      #718096;
  --c-light:      #f7f9fc;
  --c-white:      #ffffff;
  --c-border:     #e2e8f0;

  /* Typography */
  --f-body:    'Inter', system-ui, -apple-system, sans-serif;
  --f-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-mono:    'Courier New', Courier, monospace;

  /* Layout */
  --w-max:    1200px;
  --header-h: 72px;

  /* Radius */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-full: 9999px;

  /* Shadows */
  --sh-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --sh-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --sh-lg: 0 12px 32px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);

  /* Transitions */
  --t-fast:   150ms ease;
  --t-normal: 280ms ease;
  --t-slow:   480ms ease;
}


/* ─── 2. RESET ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-white);
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; }
h1,h2,h3,h4,h5,h6 { font-family: var(--f-heading); line-height: 1.25; }


/* ─── 3. LAYOUT UTILITIES ───────────────────── */
.container {
  max-width: var(--w-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.section { padding-block: clamp(3rem, 6vw, 5rem); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.text-center { text-align: center; }
.text-muted  { color: var(--c-muted); }


/* ─── 4. TYPOGRAPHY ─────────────────────────── */
.section-tag {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: .5rem;
}
.section-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--c-dark);
  margin-bottom: 1rem;
}
.section-lead {
  font-size: 1.05rem;
  color: var(--c-muted);
  max-width: 60ch;
}
.section-title--white { color: var(--c-white); }
.section-lead--white  { color: rgba(255,255,255,.75); }

/* Decorative line under section headings */
.section-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--c-accent);
  margin-top: .6rem;
  border-radius: var(--r-full);
}
.text-center .section-title::after { margin-inline: auto; }


/* ─── 5. PLACEHOLDER SYSTEM ─────────────────── */
/*
 * Each .ph element represents a future AI-generated image.
 * To replace: remove the .ph div and insert <img src="..." alt="...">
 * The data-ai attribute describes what the image should depict.
 */
.ph {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ph-from, #084f64) 0%, var(--ph-to, #1a8fae) 100%);
}
/* Dot-grid texture overlay */
.ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 22px 22px;
  z-index: 1;
}
/* Label overlay */
.ph__label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: rgba(255,255,255,.8);
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
  background: rgba(0,0,0,.18);
}
.ph__label::before {
  content: '';
  display: block;
  width: 36px;
  height: 36px;
  border: 2px solid rgba(255,255,255,.4);
  border-radius: var(--r-sm);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.6)' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center/22px no-repeat;
}

/* Aspect ratios */
.ph--hero   { aspect-ratio: 16 / 7; }
.ph--wide   { aspect-ratio: 16 / 6; }
.ph--video  { aspect-ratio: 16 / 9; }
.ph--card   { aspect-ratio: 4 / 3;  }
.ph--square { aspect-ratio: 1 / 1;  }
.ph--tall   { aspect-ratio: 3 / 4;  }

/* Color themes */
.ph--teal     { --ph-from: #084f64; --ph-to: #1a8fae; }
.ph--violet   { --ph-from: #3d2b5a; --ph-to: #6a4a9e; }
.ph--blue     { --ph-from: #1a3a6e; --ph-to: #2e6eb5; }
.ph--green    { --ph-from: #1a4a1a; --ph-to: #2e8b57; }
.ph--gold     { --ph-from: #7a5a0a; --ph-to: #c9a96e; }
.ph--slate    { --ph-from: #2d3748; --ph-to: #4a5568; }
.ph--rose     { --ph-from: #7a2a3a; --ph-to: #c0475a; }


/* ─── 6. HEADER & NAVIGATION ────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-h);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--t-normal);
}
.site-header.scrolled { box-shadow: var(--sh-md); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  flex-shrink: 0;
}
.site-logo__icon {
  width: 40px;
  height: 40px;
  background: var(--c-primary);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-logo__icon svg { fill: white; width: 22px; height: 22px; }
.site-logo__text { display: flex; flex-direction: column; line-height: 1.2; }
.site-logo__name {
  font-family: var(--f-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-dark);
}
.site-logo__subtitle {
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Desktop nav */
.main-nav { display: flex; align-items: center; }
.main-nav > ul { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem .75rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--c-text);
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li > a.active {
  color: var(--c-primary);
  background: rgba(13,110,138,.08);
}
.main-nav > ul > li > a .nav-arrow {
  font-size: .6rem;
  opacity: .6;
  transition: transform var(--t-fast);
}
.main-nav > ul > li:hover > a .nav-arrow { transform: rotate(180deg); }

/* Dropdown */
.nav-dropdown {
  position: absolute;
  top: calc(100% + .25rem);
  left: 0;
  min-width: 240px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: .5rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--t-normal), transform var(--t-normal);
}
.main-nav > ul > li:hover > .nav-dropdown,
.main-nav > ul > li:focus-within > .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: .5rem .75rem;
  font-size: .83rem;
  color: var(--c-text);
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-dropdown a:hover { color: var(--c-primary); background: var(--c-light); }

/* Address card in dropdown */
.nav-address {
  padding: .75rem;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--c-muted);
  border-top: 1px solid var(--c-border);
  margin-top: .25rem;
}
.nav-address strong { color: var(--c-primary); display: block; margin-bottom: .25rem; }

/* CTA header button */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.25rem;
  background: var(--c-primary);
  color: var(--c-white);
  font-size: .82rem;
  font-weight: 600;
  border-radius: var(--r-full);
  transition: background var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
  margin-left: .5rem;
}
.header-cta:hover { background: var(--c-primary-dk); transform: translateY(-1px); }

/* Mobile nav trigger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  cursor: pointer;
  padding: .25rem;
  background: none;
  border: none;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--c-dark);
  border-radius: var(--r-full);
  transition: transform var(--t-normal), opacity var(--t-normal);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav panel */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--c-white);
  overflow-y: auto;
  z-index: 999;
  padding: 1.5rem;
  transform: translateX(100%);
  transition: transform var(--t-normal);
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav a {
  display: block;
  padding: .75rem 0;
  font-size: 1rem;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
}
.mobile-nav a:hover { color: var(--c-primary); }
.mobile-nav .mobile-sub { padding-left: 1rem; }
.mobile-nav .mobile-sub a { font-size: .9rem; color: var(--c-muted); }


/* ─── 7. HERO SLIDER ────────────────────────── */
.hero {
  position: relative;
  margin-top: var(--header-h);
  overflow: hidden;
}
.hero-track {
  position: relative;
  height: clamp(420px, 65vh, 680px);
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}
.slide.active {
  opacity: 1;
  pointer-events: auto;
}
.slide__bg { width: 100%; height: 100%; object-fit: cover; }
.slide__bg.ph { height: 100%; }

/* Overlay gradient */
.slide__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(10,40,60,.75) 0%,
    rgba(10,40,60,.45) 50%,
    rgba(10,40,60,.15) 100%);
}
.slide__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-inline: clamp(2rem, 8vw, 6rem);
}
.slide__text { max-width: 480px; }
.slide__tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-accent);
  background: rgba(201,169,110,.15);
  border: 1px solid rgba(201,169,110,.35);
  padding: .3rem .75rem;
  border-radius: var(--r-full);
  margin-bottom: .75rem;
}
.slide__title {
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  font-weight: 700;
  color: var(--c-white);
  line-height: 1.15;
  margin-bottom: .75rem;
}
.slide__desc {
  font-size: clamp(.9rem, 1.5vw, 1.05rem);
  color: rgba(255,255,255,.85);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.slide__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  background: var(--c-accent);
  color: var(--c-dark);
  font-weight: 600;
  font-size: .9rem;
  border-radius: var(--r-full);
  transition: background var(--t-fast), transform var(--t-fast);
}
.slide__btn:hover { background: var(--c-accent-dk); transform: translateY(-2px); }

/* Slider controls */
.slider-controls {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .5rem;
  z-index: 10;
}
.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.4);
  border: none;
  cursor: pointer;
  transition: background var(--t-normal), width var(--t-normal);
}
.slider-dot.active {
  background: var(--c-accent);
  width: 24px;
}
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--r-full);
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast);
  backdrop-filter: blur(4px);
}
.slider-arrow:hover { background: rgba(255,255,255,.3); }
.slider-arrow--prev { left: 1.5rem; }
.slider-arrow--next { right: 1.5rem; }


/* ─── 8. BENEFITS STRIP ─────────────────────── */
.benefits {
  background: var(--c-dark);
  padding-block: 0;
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 2rem 1.5rem;
  border-right: 1px solid rgba(255,255,255,.06);
  transition: background var(--t-normal);
}
.benefit-item:last-child { border-right: none; }
.benefit-item:hover { background: rgba(255,255,255,.04); }
.benefit-item a { display: contents; text-decoration: none; }
.benefit-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: rgba(13,110,138,.35);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.benefit-text h3 {
  font-family: var(--f-heading);
  font-size: .95rem;
  color: var(--c-white);
  margin-bottom: .25rem;
}
.benefit-text p {
  font-size: .78rem;
  color: rgba(255,255,255,.5);
  line-height: 1.5;
}
.benefit-more {
  display: inline-block;
  margin-top: .4rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-accent);
  transition: opacity var(--t-fast);
}
.benefit-item:hover .benefit-more { opacity: .7; }

/* Second benefits strip (Technology) */
.benefits--tech { background: var(--c-light); }
.benefits--tech .benefit-item {
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.benefits--tech .benefit-item:nth-child(4n) { border-right: none; }
.benefits--tech .benefit-icon { background: rgba(13,110,138,.1); }
.benefits--tech .benefit-text h3 { color: var(--c-dark); }
.benefits--tech .benefit-text p  { color: var(--c-muted); }


/* ─── 9. SERVICES GRID ──────────────────────── */
.services { background: var(--c-white); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.service-card {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--c-light);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  transition: box-shadow var(--t-normal), transform var(--t-normal);
}
.service-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}
.service-card__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-lt) 100%);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: white;
}
.service-card h3 {
  font-size: 1rem;
  color: var(--c-primary);
  margin-bottom: .4rem;
}
.service-card p { font-size: .86rem; color: var(--c-muted); line-height: 1.6; }


/* ─── 10. NEWS / ARTICLE SECTION ────────────── */
.news-section { background: var(--c-light); }
.news-card {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 2.5rem;
  align-items: start;
  background: var(--c-white);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.news-card__image { height: 100%; min-height: 260px; }
.news-card__image .ph { height: 100%; }
.news-card__body { padding: 2rem 2rem 2rem 0; }
.news-card__tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-primary);
  background: rgba(13,110,138,.08);
  padding: .25rem .7rem;
  border-radius: var(--r-full);
  margin-bottom: .75rem;
}
.news-card h3 {
  font-size: 1.3rem;
  color: var(--c-dark);
  margin-bottom: .75rem;
  line-height: 1.3;
}
.news-card p { font-size: .9rem; color: var(--c-muted); line-height: 1.7; margin-bottom: 1rem; }
.news-card .read-more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-primary);
  transition: gap var(--t-fast);
}
.news-card .read-more:hover { gap: .7rem; }


/* ─── 11. THREE-COLUMN SECTION ──────────────── */
.triple { background: var(--c-white); }
.triple-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

/* Ulteriori servizi accordion */
.services-list { }
.services-list dt {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--c-primary);
  cursor: pointer;
  padding: .75rem 0;
  border-bottom: 1px solid var(--c-border);
  transition: color var(--t-fast);
}
.services-list dt .dt-icon { font-size: .9rem; opacity: .7; }
.services-list dd {
  font-size: .82rem;
  color: var(--c-muted);
  line-height: 1.7;
  padding: .75rem 0 1rem 1.6rem;
  border-bottom: 1px solid var(--c-border);
}
.services-list dd a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .5rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-primary);
}
.services-list dd a:hover { text-decoration: underline; }

/* Appointment form */
.appointment-form {}
.form-title {
  font-family: var(--f-heading);
  font-size: 1.2rem;
  color: var(--c-dark);
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--c-primary);
}
.form-group {
  position: relative;
  margin-bottom: .75rem;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: .65rem .75rem .65rem 2.4rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: .88rem;
  color: var(--c-text);
  background: var(--c-light);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(13,110,138,.12);
  background: var(--c-white);
}
.form-group textarea { padding-left: .75rem; resize: vertical; min-height: 90px; }
.form-icon {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .85rem;
  color: var(--c-muted);
  pointer-events: none;
}
textarea + .form-icon { top: .85rem; transform: none; }
.btn-submit {
  display: block;
  width: 100%;
  padding: .8rem;
  background: var(--c-primary);
  color: var(--c-white);
  font-weight: 600;
  font-size: .9rem;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast);
}
.btn-submit:hover { background: var(--c-primary-dk); }
.btn-submit:disabled { opacity: .6; cursor: not-allowed; }

/* Form feedback banner */
.form-banner {
  padding: .75rem 1rem;
  border-radius: var(--r-sm);
  font-size: .88rem;
  margin-bottom: .75rem;
}
.form-banner--ok    { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.form-banner--error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* Field validation error */
.form-group input.field-error,
.form-group textarea.field-error { border-color: #e53e3e !important; }

/* Fear card */
.fear-card {
  background: var(--c-light);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
}
.fear-card__body { padding: 1.25rem; }
.fear-card h3 { font-size: 1rem; color: var(--c-dark); margin-bottom: .5rem; }
.fear-card p { font-size: .83rem; color: var(--c-muted); line-height: 1.6; margin-bottom: .75rem; }
.fear-card a {
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}


/* ─── 12. MEDICINA ESTETICA GALLERY ──────────── */
.estetica { background: var(--c-light); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.gallery-item {
  background: var(--c-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
  transition: box-shadow var(--t-normal), transform var(--t-normal);
}
.gallery-item:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
}
.gallery-item__img { position: relative; overflow: hidden; }
.gallery-item__img .ph { aspect-ratio: 4/3; }
.gallery-item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(13,110,138,.0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-normal);
}
.gallery-item:hover .gallery-item__overlay { background: rgba(13,110,138,.15); }
.gallery-item__link {
  width: 40px;
  height: 40px;
  background: var(--c-white);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
  font-size: 1.1rem;
  opacity: 0;
  transform: scale(.8);
  transition: opacity var(--t-normal), transform var(--t-normal);
}
.gallery-item:hover .gallery-item__link { opacity: 1; transform: scale(1); }
.gallery-item__body { padding: 1rem; }
.gallery-item h3 { font-size: .92rem; color: var(--c-dark); margin-bottom: .25rem; }
.gallery-item p { font-size: .78rem; color: var(--c-muted); }


/* ─── 13. FOOTER ────────────────────────────── */
.site-footer {
  background: var(--c-dark);
  color: rgba(255,255,255,.7);
  padding-block: 3.5rem 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
.footer-section h4 {
  font-family: var(--f-heading);
  font-size: 1.1rem;
  color: var(--c-white);
  margin-bottom: 1.25rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-bio { font-size: .84rem; line-height: 1.8; }
.footer-bio li { margin-bottom: .5rem; }
.footer-bio li::before { content: '·'; margin-right: .5rem; color: var(--c-accent); }

.footer-address { font-size: .85rem; line-height: 1.8; font-style: normal; }
.footer-address .addr-location {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 1rem 0 .25rem;
  display: block;
}
.footer-address .addr-location:first-child { margin-top: 0; }
.footer-contact {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .83rem;
  color: rgba(255,255,255,.65);
}
.footer-contact + .footer-contact { margin-top: .35rem; }
.footer-contact a:hover { color: var(--c-accent); }

.footer-social {
  display: flex;
  gap: .75rem;
  margin-top: 1.25rem;
}
.social-btn {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.08);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  color: rgba(255,255,255,.6);
  transition: background var(--t-fast), color var(--t-fast);
}
.social-btn:hover { background: var(--c-accent); color: var(--c-dark); }

/* Copyrights bar */
.copyrights {
  background: rgba(0,0,0,.3);
  text-align: center;
  font-size: .75rem;
  color: rgba(255,255,255,.35);
  padding: .9rem 1rem;
  letter-spacing: .03em;
}

/* Back to top */
.back-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--c-primary);
  color: white;
  border-radius: var(--r-full);
  font-size: 1.1rem;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-normal), transform var(--t-normal);
  box-shadow: var(--sh-md);
}
.back-top.visible { opacity: 1; pointer-events: auto; }
.back-top:hover { transform: translateY(-3px); }


/* ─── 14. SCROLL ANIMATIONS ─────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }


/* ─── 15. RESPONSIVE ────────────────────────── */
@media (max-width: 1024px) {
  .benefits-grid   { grid-template-columns: repeat(2, 1fr); }
  .benefit-item:nth-child(2) { border-right: none; }
  .triple-grid { grid-template-columns: 1fr 1fr; }
  .triple-grid > :last-child { grid-column: 1 / -1; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .main-nav,
  .header-cta { display: none; }
  .nav-toggle  { display: flex; }
  .mobile-nav  { display: block; }

  .hero-track { height: clamp(320px, 55vh, 500px); }
  .slide__content { padding-inline: 1.5rem; }
  .slider-arrow { display: none; }

  .benefits-grid { grid-template-columns: 1fr; }
  .benefit-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); }
  .benefits--tech .benefit-item { border-right: none; }

  .services-grid  { grid-template-columns: 1fr; }
  .news-card      { grid-template-columns: 1fr; }
  .news-card__image { min-height: 200px; }
  .news-card__body { padding: 1.5rem; }

  .triple-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .footer-grid  { grid-template-columns: 1fr; gap: 2rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .site-logo__subtitle { display: none; }
  .hero-track { height: 60vw; min-height: 280px; }
  .slide__title { font-size: 1.5rem; }
}


/* ─── 16. PAGE HERO (inner pages) ───────────── */
.page-hero {
  background: linear-gradient(135deg, var(--c-primary-dk) 0%, var(--c-primary) 100%);
  padding: 3.5rem 0 2.5rem;
  margin-top: var(--header-h);
}
.page-hero__title {
  font-family: var(--f-heading);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--c-white);
  margin-bottom: .6rem;
  line-height: 1.2;
}
.breadcrumb {
  font-size: .82rem;
  color: rgba(255,255,255,.65);
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.breadcrumb a { color: rgba(255,255,255,.8); transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--c-white); }
.breadcrumb .sep { opacity: .45; }


/* ─── 17. PAGE BODY (inner pages) ───────────── */
.page-body {
  padding-block: 3rem 4.5rem;
}

/* Legacy content compat — old framework classes */
.page-body .widget-title,
.page-body .widget-title { 
  font-family: var(--f-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--c-primary);
  border-bottom: 2px solid var(--c-primary);
  padding-bottom: .5rem;
  margin: 2rem 0 1.2rem;
}
.page-body h1 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--c-dark); margin-bottom: 1rem; }
.page-body h2 { font-size: 1.4rem; color: var(--c-dark); margin-bottom: .75rem; margin-top: 1.5rem; }
.page-body h3 { font-size: 1.1rem; color: var(--c-dark); margin-bottom: .5rem; margin-top: 1.25rem; }
.page-body p  { margin-bottom: 1rem; color: var(--c-text); line-height: 1.75; }
.page-body ul.ul1,
.page-body ul { padding-left: 1.5rem; margin-bottom: 1rem; list-style: disc; }
.page-body ul li { margin-bottom: .4rem; color: var(--c-text); line-height: 1.6; }
.page-body ol { padding-left: 1.5rem; margin-bottom: 1rem; list-style: decimal; }
.page-body b, .page-body strong { color: var(--c-dark); }
.page-body a { color: var(--c-primary); text-decoration: underline; }
.page-body a:hover { color: var(--c-primary-dk); }

/* Columns compat */
.page-body .grid-row        { margin-bottom: 1.5rem; }
.page-body .vc_row-fluid    { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.page-body .vc_span6        { flex: 1 1 calc(50% - .75rem); min-width: 220px; }
.page-body .one_half        { flex: 1 1 calc(50% - .75rem); min-width: 220px; }
.page-body .one_third       { flex: 1 1 calc(33% - 1rem); min-width: 200px; }
.page-body .two_third       { flex: 2 1 calc(66% - .75rem); min-width: 200px; }
.page-body .one_fourth      { flex: 1 1 calc(25% - 1.1rem); min-width: 160px; }

/* Image alignment */
.page-body .alignleft  { float: left; margin: 0 1.5rem 1rem 0; max-width: 280px; height: auto; }
.page-body .alignright { float: right; margin: 0 0 1rem 1.5rem; max-width: 280px; height: auto; }
.page-body .pic        { clear: both; text-align: center; margin: 1.5rem 0; }
.page-body .pic img    { max-width: 100%; height: auto; margin-inline: auto; }

/* Legacy img[align] attribute — medicina_estetica and other old pages */
.page-body img[align="left"]  { float: left;  margin: 0 1.5rem 1.25rem 0; max-width: 260px; height: auto; }
.page-body img[align="right"] { float: right; margin: 0 0 1.25rem 1.5rem; max-width: 260px; height: auto; }

/* Headings always clear floated images so new sections start below them */
.page-body h2,
.page-body h3,
.page-body h4 { clear: both; }

/* Contain floats inside .wrapper so they don't bleed into sibling elements */
.page-body .wrapper { display: flow-root; }

/* Testimonial / quote blocks */
.page-body .widget.testimonial {
  background: var(--c-light);
  border-left: 4px solid var(--c-primary);
  border-radius: var(--r-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.page-body .widget.testimonial .clearfix { display: flex; gap: 1rem; align-items: flex-start; }
.page-body .widget.testimonial img { flex-shrink: 0; width: 80px; height: 80px; object-fit: cover; border-radius: var(--r-md); }
.page-body .widget.testimonial p { margin-bottom: .5rem; font-size: .9rem; color: var(--c-muted); }
.page-body .widget.testimonial .author {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-top: .75rem;
}

/* Capitalized first letter */
.page-body .capitalized::first-letter {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--c-primary);
  float: left;
  margin-right: .05em;
  line-height: 1;
}

/* Clearfix */
.page-body .clearfix::after { content: ''; display: table; clear: both; }

/* section-headers */
.page-body .section-headers h1 {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  text-align: center;
  color: var(--c-primary);
}
.page-body .section-headers center { color: var(--c-muted); font-style: italic; }

/* Blog post / article */
.page-body .blog-post { margin-bottom: 2rem; }
.page-body .blog-post .date {
  font-size: .8rem;
  color: var(--c-muted);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* Contact form (contacts.html) */
.page-body .contact-form label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .3rem; }
.page-body .contact-form input,
.page-body .contact-form textarea,
.page-body .contact-form select {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: .88rem;
  margin-bottom: 1rem;
  background: var(--c-light);
  transition: border-color var(--t-fast);
}
.page-body .contact-form input:focus,
.page-body .contact-form textarea:focus { outline: none; border-color: var(--c-primary); }
.page-body .contact-form button,
.page-body .button,
.page-body button.button {
  display: inline-flex;
  align-items: center;
  padding: .65rem 1.75rem;
  background: var(--c-primary);
  color: white;
  font-weight: 600;
  font-size: .9rem;
  border: none;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background var(--t-fast);
}
.page-body .contact-form button:hover,
.page-body .button:hover { background: var(--c-primary-dk); }

/* Definition list (contacts.html) */
.page-body dl dt { font-weight: 700; color: var(--c-primary); margin-top: 1rem; }
.page-body dl dd { margin-left: 0; font-size: .9rem; color: var(--c-muted); }
.page-body dl dd ul { list-style: none; padding-left: 0; }
.page-body dl dd ul li { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; }

/* Gallery / image grid */
.page-body .gallery-grid-old { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.page-body .gallery-grid-old img { width: 100%; max-width: 280px; border-radius: var(--r-md); }

/* iFrame map */
.page-body iframe { border-radius: var(--r-md); max-width: 100%; }
/* Responsive 16:9 iframe container (YouTube embed) */
.video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: #000;
  margin-block: 1.25rem;
}
.video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
/* Native <video> element container */
.video-native {
  margin-block: 1.25rem;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
}
.video-native video {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin-inline: auto;
}

/* YouTube thumbnail click-to-play */
.yt-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-md);
  background: #000;
  margin-block: 1.25rem;
  cursor: pointer;
}
.yt-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--t-normal);
  max-width: none;
}
.yt-thumb:hover img { opacity: .85; }
.yt-thumb__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 68px; height: 48px;
  background: #ff0000;
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
}
.yt-thumb:hover .yt-thumb__play {
  background: #cc0000;
  transform: scale(1.08);
}
/* When expanded to iframe */
.yt-thumb iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ─── Agevolazioni / Studio ──────────────────────────────────── */
.agev-section { margin-bottom: 3rem; }

/* Payment / info cards row */
.info-cards-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.info-card {
  flex: 1 1 220px;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--c-light);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 1rem 1.25rem;
}
.info-card__icon { font-size: 1.6rem; flex-shrink: 0; line-height: 1; }
.info-card strong { display: block; font-size: .9rem; color: var(--c-dark); margin-bottom: .3rem; }
.info-card p { font-size: .83rem; color: var(--c-muted); line-height: 1.5; margin: 0; }

/* Convenzioni clickable grid */
.conv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.25rem;
}
.conv-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .5rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 1.25rem .75rem .9rem;
  color: var(--c-text);
  transition: box-shadow var(--t-normal), transform var(--t-normal), border-color var(--t-normal);
  cursor: pointer;
}
.conv-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-4px);
  border-color: var(--c-primary-lt);
  text-decoration: none;
}
.conv-card__img {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.conv-card__img img {
  max-height: 56px;
  max-width: 120px;
  width: auto;
  object-fit: contain;
  filter: grayscale(30%);
  transition: filter var(--t-normal);
}
.conv-card:hover .conv-card__img img { filter: none; }
.conv-card__body strong { display: block; font-size: .82rem; font-weight: 700; color: var(--c-dark); }
.conv-card__body p { font-size: .73rem; color: var(--c-muted); line-height: 1.4; margin: .15rem 0 0; }
.conv-card__cta { font-size: .72rem; font-weight: 600; color: var(--c-primary); margin-top: auto; padding-top: .5rem; }

/* Studio bio two-column layout */
.studio-bio { display: flex; gap: 2rem; align-items: flex-start; }
.studio-bio__photo { flex: 0 0 auto; }
.studio-bio__photo img { width: 180px; border-radius: var(--r-md); box-shadow: var(--sh-md); }
.studio-bio__text { flex: 1; }
@media (max-width: 600px) {
  .studio-bio { flex-direction: column; }
  .studio-bio__photo img { width: 100%; max-width: 200px; }
}

/* ─── Contacts page ─────────────────────────────────────────── */
.contacts-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3rem;
  align-items: start;
}
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.contact-card {
  background: var(--c-light);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 1rem 1.25rem;
  margin-bottom: .75rem;
}
.contact-card h3 {
  font-family: var(--f-body);
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-primary);
  margin-bottom: .4rem;
}
.contact-card address,
.contact-card p { font-style: normal; font-size: .88rem; line-height: 1.6; color: var(--c-text); }
.contact-card a { color: var(--c-primary); }
.contact-card a:hover { text-decoration: underline; }
@media (max-width: 768px) {
  .contacts-grid { grid-template-columns: 1fr; }
  .form-row-2 { grid-template-columns: 1fr; }
}

/* Teethok / dentosofia interactive */
/* #cellulare was hidden in old WP theme — in new site it's always visible */
.page-body #cellulare { margin-top: 2rem; display: block !important; }

/* Side-by-side layout: teeth column (left) + info panel (right)
   The old float-based .one_third / .two_third layout is replaced with flex */
#cellulare .grid-row {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  /* flex container auto-clears floats → fixes footer overlap */
}
#cellulare #post-1501 {
  flex: 0 0 auto;
}
#cellulare .two_third {
  flex: 1 1 0;
  float: none !important;
  min-width: 200px;
}
/* Info panel styling */
#toothinfo {
  padding: 1rem 1.25rem;
  background: var(--c-light);
  border-radius: var(--r-md);
  border-left: 3px solid var(--c-primary);
  min-height: 120px;
}
/* grid-col-* classes used in dente*.html (were defined in old WP theme) */
#toothinfo .grid-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: .75rem;
}
#toothinfo .grid-col { box-sizing: border-box; }
#toothinfo .grid-col-1,
#toothinfo .grid-col-9  { flex: 1 1 100%; }
#toothinfo .grid-col-3  { flex: 1 1 calc(33.33% - .6rem); min-width: 120px; }
#toothinfo .grid-col-4  { flex: 1 1 calc(50% - .6rem);    min-width: 140px; }
/* organ images inside the panel */
#toothinfo img { max-width: 100px; height: auto; border-radius: var(--r-sm); margin: .25rem; }

/* Arch outer wrappers: explicit dimensions so absolute children don't collapse them */
.arch-wrap { position: relative; }
#arch-wrap-sup { height: 360px; }
#arch-wrap-inf { height: 340px; }

/* The image map coords are hardcoded to 415 px — block any CSS scaling */
.dentiabsolute { position: relative; }
.dentiabsolute .one_half.column,
.dentiabsolute .one_half { width: 415px !important; flex: none !important; }
/* arch-inner is the position:relative context for the abs-positioned img + SVG */
.arch-inner { position: relative; width: 415px; height: 100%; }
.dentiabsolute img { max-width: none !important; width: 415px !important; display: block; }
.dentiabsolute svg { overflow: visible; }
/* No negative margin — old WP theme had -45px to overlap with sibling content */
#dentisup { margin-top: 0 !important; }
/* Space between the two arches */
#arch-wrap-inf { margin-top: 1rem; }

@media (max-width: 768px) {
  .page-body .alignleft,
  .page-body .alignright { float: none; max-width: 100%; margin: 0 0 1rem 0; }
  .page-body .vc_row-fluid,
  .page-body .one_half,
  .page-body .one_third,
  .page-body .two_third,
  .page-body .one_fourth { flex: 1 1 100%; }
}