.elementor-334 .elementor-element.elementor-element-b3e1634{--display:flex;}.elementor-334 .elementor-element.elementor-element-3dd0fe7{width:100%;max-width:100%;}@media(min-width:768px){.elementor-334 .elementor-element.elementor-element-b3e1634{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-3dd0fe7 */.sp-services {
    /* Palette Medica/Elegante */
    --sp-primary: #0e7c7b;        /* Teal Profondo */
    --sp-primary-dark: #095c5b;   /* Hover */
    --sp-accent: #d4eaea;         /* Background accenti */
    --sp-text: #334155;           /* Grigio scuro leggibile */
    --sp-text-light: #64748b;     /* Testo secondario */
    --sp-bg: #ffffff;
    --sp-surface: #f8fafc;        /* Grigio chiarissimo */
    --sp-border: #e2e8f0;
    
    --sp-radius: 16px;
    --sp-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --sp-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--sp-bg);
    color: var(--sp-text);
    line-height: 1.5;
    padding-bottom: 40px;
    margin-bottom: 80px; /* Spazio verticale tra i diversi studi */
  }

  .sp-services *, .sp-services *::before, .sp-services *::after { box-sizing: border-box; }
  .sp-services img { max-width: 100%; display: block; height: auto; border-radius: var(--sp-radius); }
  
  /* Reset link */
  .sp-services a { text-decoration: none; color: inherit; transition: 0.2s; }
  .sp-services a:hover { color: var(--sp-primary); }
  
  /* UTILS - LARGHEZZA MODIFICATA A 1320px */
  .sp-container { width: min(100% - 32px, 1320px); margin: 0 auto; }
  
  .sp-skip { position: absolute; top: 0; left: 0; padding: 1rem; background: #000; color: #fff; z-index: 9999; transform: translateY(-100%); transition: transform 0.3s; }
  .sp-skip:focus { transform: translateY(0); }
  .sp-srLive { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

  /* HERO SECTION */
  .sp-hero {
    padding: 60px 0 40px;
    background: radial-gradient(circle at top right, var(--sp-accent) 0%, transparent 40%);
    text-align: center;
  }
  .sp-badge {
    display: inline-block;
    padding: 4px 12px;
    background: #e0f2f1;
    color: var(--sp-primary-dark);
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 99px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .sp-title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.1;
    color: #1e293b;
    margin: 0 0 16px;
    font-weight: 800;
  }
  .sp-subtitle {
    font-size: 1.125rem;
    color: var(--sp-text-light);
    max-width: 65ch;
    margin: 0 auto 24px;
  }
  .sp-trust {
    display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
    list-style: none; padding: 0; margin: 0 0 30px;
  }
  .sp-trust li {
    font-size: 0.9rem; font-weight: 600; color: var(--sp-text);
    display: flex; align-items: center; gap: 6px;
    background: #fff; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--sp-border);
  }
  .sp-note { font-size: 0.9rem; margin-top: 16px; color: var(--sp-text-light); }
  .sp-note a { color: var(--sp-primary); font-weight: 600; text-decoration: underline; }

  /* BUTTONS */
  .sp-ctaRow { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
  .sp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 48px; padding: 0 24px; border-radius: 99px;
    font-weight: 700; font-size: 1rem; cursor: pointer;
    text-decoration: none;
  }
  /* Testo bianco forzato sui bottoni primary e whatsapp */
  a.sp-btnPrimary, a.sp-btnWhatsapp { color: #ffffff !important; }
  
  .sp-btnPrimary { background: var(--sp-primary); box-shadow: 0 4px 12px rgba(14, 124, 123, 0.3); }
  .sp-btnPrimary:hover { background: var(--sp-primary-dark); transform: translateY(-1px); color: #ffffff !important; }
  
  .sp-btnWhatsapp { background: #25D366; }
  .sp-btnWhatsapp:hover { background: #1ebc57; color: #ffffff !important; }
  
  .sp-btnGhost { background: transparent; border: 1px solid var(--sp-border); color: var(--sp-text); }
  .sp-btnGhost:hover { background: var(--sp-surface); border-color: var(--sp-text-light); color: var(--sp-text); }

  /* STICKY NAV */
  .sp-switchWrap {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sp-border);
    padding: 12px 0; transition: box-shadow 0.3s;
  }
  .sp-switchWrap.is-stuck { box-shadow: var(--sp-shadow); }
  .sp-switchWrap .sp-container { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  
  .sp-switch {
    display: flex; background: var(--sp-surface); border: 1px solid var(--sp-border);
    padding: 4px; border-radius: 99px;
  }
  .sp-tab {
    background: transparent; border: none; padding: 8px 20px;
    border-radius: 99px; font-weight: 600; color: var(--sp-text-light);
    cursor: pointer; transition: 0.2s; font-size: 0.95rem;
  }
  .sp-tab.is-active { background: #fff; color: var(--sp-primary); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
  .sp-quickActions { display: flex; gap: 12px; }
  .sp-miniLink { font-weight: 600; font-size: 0.9rem; color: var(--sp-primary); }
  .sp-miniLink:hover { text-decoration: underline; }

  /* CONTENT */
  .sp-content { padding-top: 40px; }
  .sp-panel { display: none; animation: fadeIn 0.4s ease; }
  .sp-panel.is-active { display: block; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

  .sp-introBlock { display: grid; gap: 30px; align-items: center; margin-bottom: 40px; }
  .sp-introText h2 { font-size: 1.75rem; color: var(--sp-primary); margin-bottom: 12px; }
  
  /* GRID & CARDS */
  .sp-grid { display: grid; gap: 20px; margin-bottom: 30px; }
  .sp-card {
    background: #fff; border: 1px solid var(--sp-border); border-radius: var(--sp-radius);
    padding: 24px; transition: transform 0.2s, box-shadow 0.2s;
    display: flex; flex-direction: column; height: 100%;
  }
  .sp-card:hover { transform: translateY(-4px); box-shadow: var(--sp-shadow-hover); border-color: var(--sp-primary); }
  .sp-cardIcon { font-size: 2rem; margin-bottom: 12px; }
  .sp-card h3 { font-size: 1.1rem; margin: 0 0 8px; color: #1e293b; }
  .sp-card p { font-size: 0.95rem; color: var(--sp-text-light); margin: 0; flex-grow: 1; }

  /* ACCORDION (Mobile) */
  .sp-accordion { display: none; } 
  .sp-item { margin-bottom: 10px; border: 1px solid var(--sp-border); border-radius: 12px; overflow: hidden; }
  .sp-item summary {
    padding: 16px; font-weight: 700; cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; align-items: center; background: #fff;
  }
  .sp-item summary::after { content: '+'; font-size: 1.2rem; color: var(--sp-primary); }
  .sp-item[open] summary::after { content: '−'; }
  .sp-itemBody { padding: 0 16px 16px; font-size: 0.95rem; color: var(--sp-text-light); background: #fff; border-top: 1px solid #f1f5f9; }

  /* PROCESS STEPS (Sfondo Verde Acqua Chiaro) */
  .sp-process { 
    margin: 60px 0; 
    padding: 60px 20px;
    background-color: #f0fdfa; 
    border-radius: var(--sp-radius);
    border: 1px solid #ccfbf1;
  }
  .sp-h2-center { text-align: center; margin-bottom: 30px; font-size: 1.8rem; }
  .sp-stepsGrid { display: grid; gap: 30px; }
  .sp-step { text-align: center; position: relative; }
  .sp-stepNum {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; background: var(--sp-primary); color: #fff;
    font-weight: 700; border-radius: 50%; margin: 0 auto 12px;
  }

  /* FAQ SECTION (Sfondo Grigio Chiaro) */
  .sp-faqSection {
      background-color: var(--sp-surface); 
      padding: 60px 20px;
      border-radius: var(--sp-radius);
      margin-bottom: 40px;
  }
  .sp-infoBox { 
      background: #fff; 
      border: 1px solid var(--sp-border); 
      border-radius: var(--sp-radius); 
      padding: 30px; 
      max-width: 800px; 
      margin: 0 auto; 
      box-shadow: var(--sp-shadow); 
  }
  .sp-faqItem { border-bottom: 1px solid var(--sp-border); margin-bottom: 10px; }
  .sp-faqItem:last-child { border-bottom: none; }
  .sp-faqItem summary { padding: 12px 0; font-weight: 600; cursor: pointer; outline: none; }
  .sp-faqBody { padding-bottom: 12px; color: var(--sp-text-light); }

  /* FOOTER */
  .sp-footerCta { margin-top: 60px; text-align: center; background: #1e293b; color: #fff; padding: 40px 20px; border-radius: var(--sp-radius); }
  .sp-footerContent h2 { color: #fff; margin-bottom: 8px; }
  .sp-footerContent p { color: #94a3b8; margin-bottom: 24px; }
  .sp-hours { display: block; margin-top: 20px; color: #64748b; font-size: 0.85rem; }
  .sp-footerCta a:hover { color: #fff; }

  /* RESPONSIVE */
  @media (min-width: 768px) {
    .sp-introBlock { grid-template-columns: 1fr 1fr; }
    .sp-gridCards { grid-template-columns: repeat(3, 1fr); }
    .sp-stepsGrid { grid-template-columns: repeat(3, 1fr); }
    .sp-accordion { display: none; } 
  }
  @media (max-width: 767px) {
    .sp-gridCards { display: none; } 
    .sp-accordion { display: block; margin-bottom: 30px; }
    .sp-switchWrap .sp-container { flex-direction: column; gap: 10px; }
    .sp-switch { width: 100%; }
    .sp-tab { flex: 1; text-align: center; }
    .sp-quickActions { width: 100%; justify-content: space-between; padding: 0 10px; }
    .sp-card { padding: 16px; }
  }
  .sp-anchor { scroll-margin-top: 140px; }
</style>


<section class="sp-services" id="studio-riva" aria-labelledby="title-riva">
  <a class="sp-skip" href="#main-riva">Salta ai contenuti principali</a>

  <header class="sp-hero" role="banner">
    <div class="sp-container">
      <span class="sp-badge">Sede di Riva presso Chieri</span>
      
      <h1 class="sp-title" id="title-riva">Il tuo percorso di salute:<br>Odontoiatria e Ginecologia</h1>
      
      <p class="sp-subtitle">
        Due aree specialistiche, un unico approccio basato sull'ascolto.<br>
        Assistente alla poltrona: <strong>Marina</strong>
      </p>

      <ul class="sp-trust" aria-label="Punti di forza">
        <li><span aria-hidden="true">📅</span> Disponibilità rapida</li>
        <li><span aria-hidden="true">🛡️</span> Preventivi trasparenti</li>
        <li><span aria-hidden="true">📍</span> Parcheggio in zona</li>
      </ul>

      <div class="sp-ctaRow" role="group" aria-label="Azioni principali">
        <a class="sp-btn sp-btnPrimary" href="tel:+390119468427" aria-label="Chiama lo studio di Riva">
          Chiama: 011 94 68 427
        </a>
        <a class="sp-btn sp-btnWhatsapp" href="https://wa.me/390119468427" target="_blank" aria-label="Scrivici su WhatsApp">
          WhatsApp
        </a>
      </div>

      <p class="sp-note">
        Urgenze o dolore acuto? <a href="tel:+390119468427">Chiama subito lo 011 94 68 427</a>
      </p>
    </div>
  </header>

  <nav class="sp-switchWrap" aria-label="Menu selezione area medica">
    <div class="sp-container">
      <div class="sp-switch" role="tablist" aria-label="Aree specialistiche">
        <button class="sp-tab is-active" type="button" role="tab"
          aria-selected="true" aria-controls="sp-panel-odo-riva" id="sp-tab-odo-riva" data-target="odo">
          Odontoiatria
        </button>
        <button class="sp-tab" type="button" role="tab"
          aria-selected="false" aria-controls="sp-panel-gyn-riva" id="sp-tab-gyn-riva" data-target="gyn">
          Ginecologia
        </button>
      </div>
      <div class="sp-quickActions">
        <a class="sp-miniLink" href="#contatti-riva">Contatti</a>
      </div>
    </div>
  </nav>

  <div class="sp-srLive" aria-live="polite"></div>

  <main class="sp-container sp-content" id="main-riva">

    <section class="sp-panel is-active" id="sp-panel-odo-riva" role="tabpanel" aria-labelledby="sp-tab-odo-riva" tabindex="-1">
      <div class="sp-introBlock sp-anchor" id="odontoiatria-riva">
        <div class="sp-introText">
          <h2>Il sorriso: Salute ed Estetica</h2>
          <p>
            Dall'igiene periodica alle riabilitazioni complesse. A Riva offriamo anche servizi dedicati all'<strong>Estetica del Sorriso</strong> e <strong>Trattamenti Botox</strong>.
          </p>
        </div>
        <figure class="sp-media">
          <img class="sp-img" src="https://images.unsplash.com/photo-1606811841689-23dfddce3e95?q=80&w=1000&auto=format&fit=crop" 
               alt="Studio dentistico a Riva" loading="lazy" width="800" height="450">
        </figure>
      </div>

      <div class="sp-grid sp-gridCards">
        <article class="sp-card"><div class="sp-cardIcon">✨</div><h3>Igiene e Prevenzione</h3><p>Detartrasi, pulizia e controlli periodici.</p></article>
        <article class="sp-card"><div class="sp-cardIcon">🦷</div><h3>Conservativa</h3><p>Otturazioni e ricostruzioni.</p></article>
        <article class="sp-card"><div class="sp-cardIcon">💉</div><h3>Estetica e Botox</h3><p>Trattamenti Botox ed estetica del sorriso.</p></article>
        <article class="sp-card"><div class="sp-cardIcon">🔬</div><h3>Radiografia</h3><p>Diagnostica per immagini in sede.</p></article>
      </div>
      
      <div class="sp-accordion" data-accordion="odo-riva">
        <details class="sp-item"><summary>Igiene e Prevenzione</summary><div class="sp-itemBody">Pulizia e controlli periodici.</div></details>
        <details class="sp-item"><summary>Conservativa</summary><div class="sp-itemBody">Otturazioni e cure.</div></details>
        <details class="sp-item"><summary>Estetica e Botox</summary><div class="sp-itemBody">Trattamenti estetici avanzati.</div></details>
      </div>
    </section>

    <section class="sp-panel" id="sp-panel-gyn-riva" role="tabpanel" aria-labelledby="sp-tab-gyn-riva" aria-hidden="true" tabindex="-1">
      <div class="sp-introBlock sp-anchor" id="ginecologia-riva">
        <div class="sp-introText">
          <h2>Salute della donna</h2>
          <p>Visite e controlli nelle diverse fasi della vita.</p>
        </div>
        <figure class="sp-media">
          <img class="sp-img" src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?q=80&w=1000&auto=format&fit=crop" 
               alt="Visita ginecologica" loading="lazy" width="800" height="450">
        </figure>
      </div>
      <div class="sp-grid sp-gridCards">
        <article class="sp-card"><div class="sp-cardIcon">🩺</div><h3>Visita Ginecologica</h3><p>Anamnesi e valutazione clinica.</p></article>
        <article class="sp-card"><div class="sp-cardIcon">🌸</div><h3>Prevenzione</h3><p>Screening periodici fondamentali.</p></article>
      </div>
      <div class="sp-accordion" data-accordion="gyn-riva">
        <details class="sp-item"><summary>Visita Ginecologica</summary><div class="sp-itemBody">Controllo completo.</div></details>
      </div>
    </section>

    <section class="sp-process" aria-label="Come funziona">
      <h2 class="sp-h2-center">Come funziona</h2>
      <div class="sp-stepsGrid">
        <div class="sp-step"><span class="sp-stepNum">1</span><strong>Scegli l'area</strong><p>Odontoiatria o Ginecologia?</p></div>
        <div class="sp-step"><span class="sp-stepNum">2</span><strong>Prenota facile</strong><p>Chiama lo 011 94 68 427.</p></div>
        <div class="sp-step"><span class="sp-stepNum">3</span><strong>Visita e Piano</strong><p>Valutazione e preventivo chiaro.</p></div>
      </div>
    </section>

    <section class="sp-faqSection" id="faq-riva">
      <div class="sp-infoBox">
        <h3>Domande Frequenti</h3>
        <details class="sp-faqItem"><summary>Come posso prenotare?</summary><div class="sp-faqBody">Chiama lo 011 94 68 427.</div></details>
        <details class="sp-faqItem"><summary>Preventivi gratuiti?</summary><div class="sp-faqBody">Il preventivo viene fatto dopo la visita.</div></details>
      </div>
    </section>

    <footer class="sp-footerCta" id="contatti-riva">
      <div class="sp-footerContent">
        <h2>Siamo a Riva presso Chieri</h2>
        <p>Via V. Veneto, 27 - Riva di Chieri (TO)</p>
        <div class="sp-ctaRow" style="justify-content:center;">
          <a class="sp-btn sp-btnPrimary" href="tel:+390119468427">Chiama 011 94 68 427</a>
          <a class="sp-btn sp-btnGhost" href="https://maps.google.com/?q=Via+V.+Veneto+27+Riva+di+Chieri" target="_blank">Indicazioni Maps</a>
        </div>
        <small class="sp-hours">Assistente: Marina</small>
      </div>
    </footer>
  </main>
</section>


<section class="sp-services" id="studio-canelli" aria-labelledby="title-canelli">
  <a class="sp-skip" href="#main-canelli">Salta ai contenuti principali</a>

  <header class="sp-hero" role="banner">
    <div class="sp-container">
      <span class="sp-badge">Sede di Canelli</span>
      <h1 class="sp-title" id="title-canelli">Il tuo percorso di salute:<br>Odontoiatria e Ginecologia</h1>
      <p class="sp-subtitle">
        Due aree specialistiche, un unico approccio.<br>
        Assistente alla poltrona: <strong>Carla</strong>
      </p>

      <ul class="sp-trust" aria-label="Punti di forza">
        <li><span aria-hidden="true">📅</span> Disponibilità rapida</li>
        <li><span aria-hidden="true">🛡️</span> Preventivi trasparenti</li>
        <li><span aria-hidden="true">📍</span> Parcheggio in zona</li>
      </ul>

      <div class="sp-ctaRow" role="group" aria-label="Azioni principali">
        <a class="sp-btn sp-btnPrimary" href="tel:+390141834564" aria-label="Chiama lo studio di Canelli">
          Chiama: 0141 83 45 64
        </a>
        <a class="sp-btn sp-btnWhatsapp" href="https://wa.me/390141834564" target="_blank" aria-label="Scrivici su WhatsApp">
          WhatsApp
        </a>
      </div>
    </div>
  </header>

  <nav class="sp-switchWrap" aria-label="Menu selezione area medica">
    <div class="sp-container">
      <div class="sp-switch" role="tablist" aria-label="Aree specialistiche">
        <button class="sp-tab is-active" type="button" role="tab"
          aria-selected="true" aria-controls="sp-panel-odo-canelli" id="sp-tab-odo-canelli" data-target="odo">
          Odontoiatria
        </button>
        <button class="sp-tab" type="button" role="tab"
          aria-selected="false" aria-controls="sp-panel-gyn-canelli" id="sp-tab-gyn-canelli" data-target="gyn">
          Ginecologia
        </button>
      </div>
      <div class="sp-quickActions">
        <a class="sp-miniLink" href="#contatti-canelli">Contatti</a>
      </div>
    </div>
  </nav>

  <main class="sp-container sp-content" id="main-canelli">
    <section class="sp-panel is-active" id="sp-panel-odo-canelli" role="tabpanel" aria-labelledby="sp-tab-odo-canelli" tabindex="-1">
      <div class="sp-introBlock sp-anchor" id="odontoiatria-canelli">
        <div class="sp-introText">
          <h2>Il sorriso: dalla funzione all'estetica</h2>
          <p>Dall'igiene periodica alle riabilitazioni complesse.</p>
        </div>
        <figure class="sp-media">
          <img class="sp-img" src="https://images.unsplash.com/photo-1606811841689-23dfddce3e95?q=80&w=1000&auto=format&fit=crop" 
               alt="Studio Canelli" loading="lazy" width="800" height="450">
        </figure>
      </div>

      <div class="sp-grid sp-gridCards">
        <article class="sp-card"><div class="sp-cardIcon">✨</div><h3>Igiene e Prevenzione</h3><p>Pulizia e detartrasi.</p></article>
        <article class="sp-card"><div class="sp-cardIcon">🦷</div><h3>Interventi</h3><p>Cure conservative e anestesia.</p></article>
        <article class="sp-card"><div class="sp-cardIcon">🔬</div><h3>Radiografia</h3><p>Radiografia in studio.</p></article>
      </div>
      <div class="sp-accordion" data-accordion="odo-canelli">
        <details class="sp-item"><summary>Igiene e Prevenzione</summary><div class="sp-itemBody">Pulizia completa.</div></details>
        <details class="sp-item"><summary>Interventi</summary><div class="sp-itemBody">Cure conservative.</div></details>
      </div>
    </section>

    <section class="sp-panel" id="sp-panel-gyn-canelli" role="tabpanel" aria-labelledby="sp-tab-gyn-canelli" aria-hidden="true" tabindex="-1">
      <div class="sp-introBlock sp-anchor" id="ginecologia-canelli">
        <div class="sp-introText">
          <h2>Salute della donna</h2>
          <p>Visite e controlli specialistici a Canelli.</p>
        </div>
        <figure class="sp-media">
          <img class="sp-img" src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?q=80&w=1000&auto=format&fit=crop" 
               alt="Ginecologia Canelli" loading="lazy" width="800" height="450">
        </figure>
      </div>
      <div class="sp-grid sp-gridCards">
        <article class="sp-card"><div class="sp-cardIcon">🩺</div><h3>Visita Ginecologica</h3><p>Anamnesi e valutazione.</p></article>
      </div>
      <div class="sp-accordion" data-accordion="gyn-canelli">
        <details class="sp-item"><summary>Visita Ginecologica</summary><div class="sp-itemBody">Controllo completo.</div></details>
      </div>
    </section>

    <section class="sp-process" aria-label="Come funziona">
      <h2 class="sp-h2-center">Come funziona</h2>
      <div class="sp-stepsGrid">
        <div class="sp-step"><span class="sp-stepNum">1</span><strong>Scegli l'area</strong><p>Odontoiatria o Ginecologia?</p></div>
        <div class="sp-step"><span class="sp-stepNum">2</span><strong>Prenota facile</strong><p>Chiama lo 0141 83 45 64.</p></div>
        <div class="sp-step"><span class="sp-stepNum">3</span><strong>Visita e Piano</strong><p>Valutazione approfondita.</p></div>
      </div>
    </section>

    <section class="sp-faqSection" id="faq-canelli">
      <div class="sp-infoBox">
        <h3>Domande Frequenti</h3>
        <details class="sp-faqItem"><summary>Come prenotare?</summary><div class="sp-faqBody">Chiama o usa WhatsApp.</div></details>
        <details class="sp-faqItem"><summary>Urgenze?</summary><div class="sp-faqBody">Sì, chiamaci subito.</div></details>
      </div>
    </section>

    <footer class="sp-footerCta" id="contatti-canelli">
      <div class="sp-footerContent">
        <h2>Siamo a Canelli (Asti)</h2>
        <p>C.so Libertà, 21</p>
        <div class="sp-ctaRow" style="justify-content:center;">
          <a class="sp-btn sp-btnPrimary" href="tel:+390141834564">Chiama 0141 83 45 64</a>
          <a class="sp-btn sp-btnGhost" href="https://maps.google.com/?q=Corso+Liberta+21+Canelli" target="_blank">Indicazioni Maps</a>
        </div>
        <small class="sp-hours">Assistente: Carla</small>
      </div>
    </footer>
  </main>
</section>


<section class="sp-services" id="studio-isola" aria-labelledby="title-isola">
  <a class="sp-skip" href="#main-isola">Salta ai contenuti principali</a>

  <header class="sp-hero" role="banner">
    <div class="sp-container">
      <span class="sp-badge">Sede di Isola d'Asti</span>
      <h1 class="sp-title" id="title-isola">Il tuo percorso di salute:<br>Odontoiatria e Ginecologia</h1>
      <p class="sp-subtitle">
        Due aree specialistiche, un unico approccio basato sull'ascolto.<br>
        Assistente alla poltrona: <strong>Carla</strong>
      </p>

      <ul class="sp-trust" aria-label="Punti di forza">
        <li><span aria-hidden="true">📅</span> Disponibilità rapida</li>
        <li><span aria-hidden="true">🛡️</span> Preventivi trasparenti</li>
        <li><span aria-hidden="true">📍</span> Parcheggio in zona</li>
      </ul>

      <div class="sp-ctaRow" role="group" aria-label="Azioni principali">
        <a class="sp-btn sp-btnPrimary" href="tel:+393316318457" aria-label="Chiama lo studio di Isola">
          Chiama: 331 6318457
        </a>
        <a class="sp-btn sp-btnWhatsapp" href="https://wa.me/393316318457" target="_blank" aria-label="Scrivici su WhatsApp">
          WhatsApp
        </a>
      </div>

      <p class="sp-note">
        Urgenze o dolore acuto? <a href="tel:+393316318457">Chiama subito</a>
      </p>
    </div>
  </header>

  <nav class="sp-switchWrap" aria-label="Menu selezione area medica">
    <div class="sp-container">
      <div class="sp-switch" role="tablist" aria-label="Aree specialistiche">
        <button class="sp-tab is-active" type="button" role="tab"
          aria-selected="true" aria-controls="sp-panel-odo-isola" id="sp-tab-odo-isola" data-target="odo">
          Odontoiatria
        </button>
        <button class="sp-tab" type="button" role="tab"
          aria-selected="false" aria-controls="sp-panel-gyn-isola" id="sp-tab-gyn-isola" data-target="gyn">
          Ginecologia
        </button>
      </div>
      <div class="sp-quickActions">
        <a class="sp-miniLink" href="#contatti-isola">Contatti</a>
      </div>
    </div>
  </nav>

  <main class="sp-container sp-content" id="main-isola">
    <section class="sp-panel is-active" id="sp-panel-odo-isola" role="tabpanel" aria-labelledby="sp-tab-odo-isola" tabindex="-1">
      <div class="sp-introBlock sp-anchor" id="odontoiatria-isola">
        <div class="sp-introText">
          <h2>Cura e Prevenzione a Isola</h2>
          <p>Dall'igiene periodica agli interventi più complessi. Un punto di riferimento per la tua salute orale.</p>
        </div>
        <figure class="sp-media">
          <img class="sp-img" src="https://images.unsplash.com/photo-1629909613654-28e377c37b09?q=80&w=1000&auto=format&fit=crop" 
               alt="Studio dentistico Isola d'Asti" loading="lazy" width="800" height="450">
        </figure>
      </div>

      <div class="sp-grid sp-gridCards">
        <article class="sp-card"><div class="sp-cardIcon">✨</div><h3>Igiene e Pulizia</h3><p>Pulizia dei denti e detartrasi periodica.</p></article>
        <article class="sp-card"><div class="sp-cardIcon">🦷</div><h3>Interventi</h3><p>Cure conservative e interventi con anestesia.</p></article>
        <article class="sp-card"><div class="sp-cardIcon">🔬</div><h3>Radiografia</h3><p>Diagnostica per immagini in sede.</p></article>
      </div>
      
      <div class="sp-accordion" data-accordion="odo-isola">
        <details class="sp-item"><summary>Igiene e Pulizia</summary><div class="sp-itemBody">Pulizia professionale.</div></details>
        <details class="sp-item"><summary>Interventi</summary><div class="sp-itemBody">Cure con anestesia.</div></details>
        <details class="sp-item"><summary>Radiografia</summary><div class="sp-itemBody">Esami in sede.</div></details>
      </div>
    </section>

    <section class="sp-panel" id="sp-panel-gyn-isola" role="tabpanel" aria-labelledby="sp-tab-gyn-isola" aria-hidden="true" tabindex="-1">
      <div class="sp-introBlock sp-anchor" id="ginecologia-isola">
        <div class="sp-introText">
          <h2>Salute della donna</h2>
          <p>Visite specialistiche e controlli a Isola d'Asti.</p>
        </div>
        <figure class="sp-media">
          <img class="sp-img" src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?q=80&w=1000&auto=format&fit=crop" 
               alt="Visita ginecologica" loading="lazy" width="800" height="450">
        </figure>
      </div>
      <div class="sp-grid sp-gridCards">
        <article class="sp-card"><div class="sp-cardIcon">🩺</div><h3>Visita Ginecologica</h3><p>Anamnesi e valutazione clinica.</p></article>
      </div>
      <div class="sp-accordion" data-accordion="gyn-isola">
        <details class="sp-item"><summary>Visita Ginecologica</summary><div class="sp-itemBody">Controllo completo.</div></details>
      </div>
    </section>
    
    <section class="sp-process" aria-label="Come funziona">
      <h2 class="sp-h2-center">Come funziona</h2>
      <div class="sp-stepsGrid">
        <div class="sp-step"><span class="sp-stepNum">1</span><strong>Scegli il servizio</strong><p>Odontoiatria o Ginecologia.</p></div>
        <div class="sp-step"><span class="sp-stepNum">2</span><strong>Prenota</strong><p>Chiama il 331 6318457.</p></div>
        <div class="sp-step"><span class="sp-stepNum">3</span><strong>Visita</strong><p>Piano di cura chiaro e preventivo.</p></div>
      </div>
    </section>

    <section class="sp-faqSection" id="faq-isola">
      <div class="sp-infoBox">
        <h3>Domande Frequenti</h3>
        <details class="sp-faqItem"><summary>Come prenotare?</summary><div class="sp-faqBody">Chiama i numeri 331 6318457 o 333 6757970.</div></details>
        <details class="sp-faqItem"><summary>Gestite le urgenze?</summary><div class="sp-faqBody">Sì, chiamaci subito per verificare la disponibilità.</div></details>
      </div>
    </section>

    <footer class="sp-footerCta" id="contatti-isola">
      <div class="sp-footerContent">
        <h2>Siamo a Isola d'Asti (Asti)</h2>
        <p>Corso Gen. Volpini 262, 14057</p>
        <p>Email: <a href="mailto:canelli@studiosacchipagliano.it" style="color:#fff; text-decoration:underline;">canelli@studiosacchipagliano.it</a></p>
        <div class="sp-ctaRow" style="justify-content:center;">
          <a class="sp-btn sp-btnPrimary" href="tel:+393316318457">Chiama 331 6318457</a>
          <a class="sp-btn sp-btnGhost" href="http://googleusercontent.com/maps.google.com/2" target="_blank">Indicazioni Maps</a>
        </div>
        <small class="sp-hours">Assistente alla poltrona: Carla</small>
      </div>
    </footer>
  </main>
</section>


<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Seleziona tutte le istanze degli studi nella pagina (Riva, Canelli e Isola)
    const serviceSections = document.querySelectorAll(".sp-services");

    serviceSections.forEach(root => {
      const tabs = root.querySelectorAll(".sp-tab");
      const panels = root.querySelectorAll(".sp-panel");
      const stickyNav = root.querySelector(".sp-switchWrap");
      const liveRegion = root.querySelector(".sp-srLive");

      // 1. Funzione per cambiare tab
      function switchTab(targetId) {
        tabs.forEach(t => {
          const isActive = t.dataset.target === targetId;
          t.classList.toggle("is-active", isActive);
          t.setAttribute("aria-selected", isActive);
        });

        panels.forEach(p => {
          const isTarget = p.id.includes("sp-panel-" + targetId);
          p.classList.toggle("is-active", isTarget);
          p.setAttribute("aria-hidden", !isTarget);
        });

        root.querySelectorAll("details[open]").forEach(d => d.removeAttribute("open"));
        if(liveRegion) liveRegion.textContent = `Sezione ${targetId === 'odo' ? 'Odontoiatria' : 'Ginecologia'} attivata.`;
      }

      // 2. Click Event Listeners
      tabs.forEach(tab => {
        tab.addEventListener("click", () => {
          const target = tab.dataset.target; 
          switchTab(target);
          
          const mainContent = root.querySelector(".sp-content");
          if(mainContent) {
             const offset = stickyNav ? stickyNav.offsetHeight : 80;
             const elementPosition = mainContent.getBoundingClientRect().top + window.scrollY;
             const offsetPosition = elementPosition - offset - 20;
             window.scrollTo({ top: offsetPosition, behavior: "smooth" });
          }
        });
      });

      // 3. Sticky Shadow Logic
      window.addEventListener("scroll", () => {
        if(stickyNav) {
           const navTop = stickyNav.getBoundingClientRect().top;
           if(navTop <= 0) {
             stickyNav.classList.add("is-stuck");
           } else {
             stickyNav.classList.remove("is-stuck");
           }
        }
      }, { passive: true });

      // 4. Keyboard Navigation
      const tabList = root.querySelector('[role="tablist"]');
      if(tabList) {
        tabList.addEventListener("keydown", e => {
          if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
            const current = document.activeElement;
            if(current.closest('.sp-services') !== root) return;
            const next = e.key === "ArrowRight" ? current.nextElementSibling : current.previousElementSibling;
            if (next && next.classList.contains("sp-tab")) {
              next.focus(); next.click();
            }
          }
        });
      }
    });
  });
</script>/* End custom CSS */