@layer reset,theme,global,layout,components,utilities;@layer reset{*,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    text-rendering: optimizeSpeed;
  }

  blockquote,
  body,
  dd,
  dl,
  figure,
  h1,
  h2,
  h3,
  h4,
  p {
    margin: 0;
  }

  :where(ul, ol):where([role="list"]) {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  a:not([class]) {
    text-decoration-thickness: max(0.08em, 1px);
    text-underline-offset: 0.3em;
  }

  img,
  picture,
  svg {
    display: block;
    max-inline-size: 100%;
  }

  img[width] {
    height: auto;
  }

  svg {
    fill: currentColor;
    pointer-events: none;
  }

  :target {
    scroll-padding-block-start: 2rem;
  }

  :focus {
    scroll-padding-block-end: 8vh;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  @media (prefers-reduced-motion: reduce) {
    html:focus-within {
      scroll-behavior: auto;
    }

    *,
    :after,
    :before {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
    }
  }
}@layer theme{:root {
    --primary: #3fc4fd;
    --secondary: #006acd;
    --accent: #024788;
    --background: #fbfbfe;
    --text: #040316;
    --text-on-light: #010104;
    --surface-1: #f1f8fe;
    --surface-2: #e1ecf9;
    --surface-3: #c9def4;
    --surface-4: #eeeef2;
    --padding-sm: clamp(1rem, 3%, 1.5rem);
    --padding-md: clamp(1.5rem, 6%, 3rem);
    --padding-lg: clamp(3rem, 12%, 6rem);
    --block-flow-sm: min(2rem, 4vh);
    --block-flow-md: min(4rem, 8vh);
    --block-flow-lg: min(8rem, 16vh);
    
    --text--2: clamp(0.6944rem, 0.6577rem + 0.1836vw, 0.8rem);
    --text--1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem);
    --text-0: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
    --text-1: clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem);
    --text-2: clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem);
    --text-3: clamp(1.728rem, 1.4799rem + 1.2407vw, 2.4414rem);
    --text-4: clamp(2.0736rem, 1.7334rem + 1.7011vw, 3.0518rem);
    --text-5: clamp(2.4883rem, 2.027rem + 2.3067vw, 3.8147rem);

    
    --cq-text--2: clamp(0.6944rem, 0.6577rem + 0.1836cqi, 0.8rem);
    --cq-text--1: clamp(0.8333rem, 0.7754rem + 0.2899cqi, 1rem);
    --cq-text-0: clamp(1rem, 0.913rem + 0.4348cqi, 1.25rem);
    --cq-text-1: clamp(1.2rem, 1.0739rem + 0.6304cqi, 1.5625rem);
    --cq-text-2: clamp(1.44rem, 1.2615rem + 0.8924cqi, 1.9531rem);
    --cq-text-3: clamp(1.728rem, 1.4799rem + 1.2407cqi, 2.4414rem);
    --cq-text-4: clamp(2.0736rem, 1.7334rem + 1.7011cqi, 3.0518rem);
    --cq-text-5: clamp(2.4883rem, 2.027rem + 2.3067cqi, 3.8147rem);
  }

  html {
    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --primary: #0287c0;
      --secondary: #339cff;
      --accent: #77bcfd;
      --text: #eae9fc;
      --background: #010104;
      --surface-1: #01080e;
      --surface-2: #06111e;
      --surface-3: #0b2036;
      --surface-4: #0d0d11;
    }
  }
}@layer global{body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--text);
    background-color: var(--background);
    line-height: 1.5;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  a {
    color: inherit;
  }

  p:not(footer p),
  dd,
  li {
    text-wrap: pretty;
    max-inline-size: 65ch;
  }

  .logo {
    background-image: url(/icons/logo-theme-light.svg);
    width: 130px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
  }

  @media (prefers-color-scheme: dark) {
    .logo {
      background-image: url(/icons/logo-theme-dark.svg);
    }
  }
}@layer layout{main {
    margin-block-start: 51px;

    @media (width > 1000px) {
      margin-block-start: 60px;
    }

    &.simple-page {
      h1 {
        font-size: var(--text-2);
        margin-block-end: 1.1em;
      }

      h2 {
        margin-block-end: 0.4em;
      }

      p + h2, ul + h2 {
        margin-block-start: 1.5em;
      }

      p + p {
        margin-block-start: 1em;
      }
    }
  }

  .stack-layout {
    display: grid;
    place-items: center;
    grid-template-areas: "stack";
    background-color: var(--primary);
    height: 40vh;
    max-height: 600px;
    background-color: rgba(60, 135, 179, 0.6);

    &>* {
      grid-area: stack;
    }

    h1 {
      font-size: var(--text-5);
      text-align: center;
      line-height: 1;
      z-index: 1;
    }

    img {
      object-fit: cover;
      height: min(40vh, 600px);
      width: 100%;
      z-index: -1;
    }
  }

  .grid-2 {
    display: grid;

    @media (width > 900px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .grid {

    &[data-type="2-1"],
    &[data-type="1-2"] {
      display: grid;
      row-gap: 2rem;
      column-gap: var(--grid-column-gap, 3rem);
      align-items: var(--grid-align, center);
    }

    @media (width > 900px) {
      &[data-type="2-1"] {
        grid-template-columns: 2fr 1fr;
      }

      &[data-type="1-2"] {
        grid-template-columns: 1fr 2fr;
      }
    }
  }

  .wrapper {
    margin-inline: var(--margin-inline, auto);
    max-inline-size: min(var(--content-max, 1240px), 100% - 2rem);

    &[data-size="small"] {
      --content-max: 65ch;
    }
  }
}@layer components{.site-header {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    inline-size: 100%;
    background-color: var(--surface-3);
    color: var(--text);
    padding-block: 10px;
    z-index: 10;

    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      max-inline-size: calc(100% - 2rem);
      margin: auto;
      padding-inline: 1rem;

      .logo {
        font-size: 1rem;
      }

      .menu-toggle {
        font-size: 1.3rem;
        text-decoration: none;

        @media (width > 1000px) {
          display: none;
        }
      }

      .nav-links {
        display: none;
        background-color: var(--surface-3);
        text-align: right;
        list-style: none;
        flex-direction: column;

        &.active {
          display: flex;
        }

        @media (width <=1000px) {
          top: 48px;
          right: 0;
          width: 100%;
          position: absolute;
        }

        @media (width > 1000px) {
          display: flex;
          flex-direction: row;
        }

        li {
          margin: 0;

          @media (width > 1000px) {
            margin-inline-start: 1rem;
          }

          a {
            display: block;
            text-decoration: none;
            padding: 1rem;
            color: var(--text);

            &[aria-current="page"] {
              text-decoration: underline;
              text-decoration-thickness: max(0.08em, 1px);
              text-underline-offset: 0.15em;
            }

            &:hover {
              @media (hover: hover) {
                background-color: var(--surface-2);
                color: var(--text);
                transition:
                  background-color 0.3s,
                  color 0.3s;
              }
            }

            @media (width <=1000px) {
              border-bottom: 1px solid var(--surface-1);
            }

            @media (width > 1000px) {
              padding: 0.5rem 1rem;
            }
          }
        }
      }
    }
  }

  

  .button {
    display: inline-block;
    color: var(--button-color, var(--text-on-light));
    background-color: var(--button-bg, var(--primary));
    padding: var(--button-padding, 0.35em 1em);
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border-radius: 0.15em;
    min-inline-size: 10ch;

    p+&,
    dl+&,
    ul+&,
    ol+& {
      --flow-space: 3em;
    }

    &[data-margin="margin"] {
      margin-block-start: 3em;
    }
  }

  .prenota {
    position: relative;
    container-type: inline-size;
    padding-inline: 1rem;
    padding-block: var(--block-flow-lg);
    background-color: var(--surface-3);
    text-align: center;

    p {
      margin-inline: auto;
    }

    a {
      display: inline-block;
    }

    a,
    p {
      font-size: var(--cq-text-0);
    }

    h2 {
      font-size: var(--cq-text-3);
    }

    @media (width > 768px) {
      background: url("/images/banner-1.webp") no-repeat top center/cover;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(25, 61, 82, 0.9);
      }

      p,
      h2,
      a {
        position: relative;
        color: #fff;
      }
    }
  }
}@layer utilities{.flow>*+* {
    margin-block-start: var(--flow-space, 1em);
  }

  .block-section {
    padding-block: var(--block-flow-lg);
  }

  .cq {
    container-type: inline-size;
  }

  .cq-title-section {
    font-size: var(--cq-text-3);
    line-height: 1.2em;

    &:has(+ p) {
      margin-block-end: 1.2em;
    }
  }

  .cq-text-section {
    font-size: var(--cq-text-0);
  }

  .bg-surface-4 {
    background-color: var(--surface-4);
  }

  .full-bleed-bg {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100vw;
      height: 100%;
      background-color: inherit;
      z-index: -1;
    }

    &>* {
      position: relative;
    }
  }

  .mx-auto {
    margin-inline: auto;
  }
}.hero{display:grid;gap:.5rem;align-items:center;background-color:var(--primary);color:var(--text-on-light);padding-block:var(--padding-md);@media(width > 1000px){background-color: rgba(63,196,253,0.6); padding-block: 0; grid-template-areas: "hero";>*{grid-area:hero}}.hero-content { padding-inline: var(--padding-sm); container-type: inline-size; display: flex; flex-direction: column; gap: 0.5rem; h1 { font-size: clamp(1.5rem, 5cqi, 3.5rem); } p:first-of-type { font-size: clamp(1.2rem, 3.5cqi, 2.2rem); text-transform: uppercase; } p+p { font-size: clamp(1rem, 2cqi, 1.4rem); max-inline-size: 50ch; } @media (width > 1000px) { padding-inline: var(--padding-lg); } } img { display: none; @media (width > 1000px) { display: inline-grid; object-fit: cover; width: 100%; height: min(60vh, 600px); z-index: -1; } }}.chi-siamo{display:grid;padding-block:var(--padding-lg);padding-inline:1rem;article { container-type: inline-size; h2 { font-size: clamp(1.5rem, 5cqi, 2.5rem); margin-block-end: 1rem; } p:first-of-type { margin-block-end: 0.5rem; } p { max-inline-size: 80ch; } .button { margin-block-start: 2rem; display: inline-block; } } img { display: none; } @media (width > 1000px) { min-block-size: 400px; padding-inline: 0; padding-block: 0; align-items: center; grid-template-columns: 1fr 1fr; article { grid-column: 2 / 3; grid-row: 1 / -1; padding-block: 2rem; padding-inline: var(--padding-lg); } img, picture { display: block; width: 100%; height: 100%; grid-column: 1 / 2; grid-row: 1 / -1; } }}.servizi{background-color:var(--surface-4);padding-block:var(--padding-lg);padding-inline:var(--padding-sm);text-align:center;width:100%;container-type:inline-size;display:flex;justify-content:center;flex-wrap:wrap;gap:2rem;h2 { font-size: clamp(1.4rem, 4.4cqi, 3rem); margin-block-end: var(--padding-sm); flex-basis: 100%; } .servizio { color: var(--text); padding: 1.5rem; background-color: var(--background); border-radius: 10px; width: 100%; min-inline-size: 250px; img { margin-inline: auto; margin-block-end: 1rem; } @container (width >=600px) { flex: 1; max-inline-size: 300px; } }}.important-articles{padding-block:var(--padding-lg);padding-inline:var(--padding-sm);text-align:center;width:100%;container-type:inline-size;display:flex;justify-content:center;flex-wrap:wrap;gap:2rem;h2 { font-size: clamp(1.4rem, 4.4cqi, 3rem); margin-block-end: var(--padding-sm); flex-basis: 100%; } article { color: var(--text); padding: 1.5rem; background-color: var(--surface-1); border-radius: 10px; width: 100%; min-inline-size: 280px; h3 { margin-block-end: 0.75rem; font-size: clamp(1.3rem, 3.3cqi, 2rem); } .button { margin-block-start: 2rem; } @container (width >=600px) { flex: 1; max-inline-size: 500px; } }}.assistenza{container-type:inline-size;padding-inline:1rem;padding-block-end:var(--padding-lg);display:grid;article { max-inline-size: 60ch; h2 { margin-block-end: 1rem; } p:first-of-type { margin-block-end: 0.5rem; } p:last-of-type { font-weight: bold; } dl { margin-block-start: 2rem; } @container (width > 500px) { h2 { font-size: clamp(1.5rem, 4cqi, 2.5rem); } p:last-of-type { font-size: clamp(1rem, 2.3cqi, 1.3rem); } dl { font-size: clamp(1rem, 3cqi, 2rem); } } } @media (width > 768px) { grid-template-columns: 1fr 1fr; align-items: center; article { margin-block-end: 0; grid-row: 1 / 2; grid-column: 2 / 3; } img, picture { grid-row: 1 / 2; grid-column: 1 / 2; justify-self: end; } }}.banner-1,.banner-2{position:relative;container-type:inline-size;padding-inline:1rem;padding-block:var(--block-flow-lg);p { position: relative; margin-inline: auto; text-align: center; line-height: 1.4; @container (width > 550px) { font-size: clamp(1.2rem, 3cqi, 1.8rem); } } @media (width > 768px) { padding-block: min(15rem, 30vh); p { z-index: 10; color: #fff; } }}.banner-1{background-color:var(--surface-3);@media(width > 768px){background: url("/images/banner-1.webp") no-repeat top center/cover; &::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(25,61,82,.9)}}}.banner-2{background-color:var(--surface-1);@media(width > 768px){background-image: url("/images/banner-2.webp"); background-repeat: no-repeat; background-size: cover; &::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8)}}}.sezione-contatti{padding-block:var(--block-flow-md);background-color:var(--surface-4);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));justify-items:center;gap:1rem;article { padding: var(--padding-sm); h2 { margin-block-end: 0.5em; } p { margin-block-end: 1rem; } dt:not(:first-of-type) { margin-block-start: 0.5em; } dt { font-weight: bold; } dt:last-of-type+dd, dt:last-of-type+dd+dd { display: inline-block; margin-right: 10px; } }}.site-footer{padding-inline:1rem;padding-block:var(--block-flow-sm);margin-block-start:auto;font-size:.875rem;text-align:center}.about{align-items:center;justify-items:center;article { max-inline-size: 60ch; padding-block: var(--block-flow-md); font-size: var(--text-0); } img { object-fit: cover; width: 100%; height: 100%; } @media (width > 900px) { gap: 4rem; }}.recensioni{container-type:inline-size;padding-block:var(--block-flow-lg);display:flex;justify-content:center;flex-wrap:wrap;gap:3rem;width:100%;h2 { flex-basis: 100%; text-align: center; font-size: var(--cq-text-4); } article { border-radius: 10px; background-color: var(--surface-4); max-inline-size: 500px; padding: var(--padding-sm); display: flex; flex-direction: column; font-size: var(--cq-text-1); p:last-of-type { text-transform: uppercase; font-weight: bold; text-align: right; margin-block-start: auto; } @container (media > 650px) { flex: 1; } } a { font-size: var(--cq-text-1); flex-basis: 100%; text-align: center; }}.sceglierci{container-type:inline-size;display:grid;grid-template-rows:auto;grid-template-columns:1fr;justify-items:center;h2 { font-size: var(--cq-text-4); margin-block-end: var(--padding-sm); } h2, h2+p { text-align: center; } h2+p { margin-inline: auto; font-size: var(--cq-text-1); } article { margin-block: 2rem; p { font-size: var(--cq-text-0); } } img { align-self: end; margin-block-end: -1px; } @media (width > 1000px) { grid-template-columns: 1fr 1fr; align-items: center; column-gap: 2rem; h2, h2+p { grid-column: span 2; } h2+p { margin-block-end: var(--block-flow-lg); } }}.anatomia-orecchio{h2 { margin-block-end: 1.2em; } dl { dt { font-weight: bold; margin-block-end: 0.375em; font-size: var(--cq-text-0); } dd { &:not(:last-of-type) { margin-block-end: 2em; } } }}.ipoacusia{align-items:center;h2 { margin-block-end: 1.2em; } dl { dt { font-weight: bold; margin-block-end: 0.375em; font-size: var(--cq-text-0); } dd { &:not(:last-of-type) { margin-block-end: 2em; } } } img { width: 100%; }}.gravità{align-items:center;justify-items:center;h2 { margin-block-end: 1.2em; } dl { dt { font-weight: bold; margin-block-end: 0.375em; font-size: var(--cq-text-0); } dd { &:not(:last-of-type) { margin-block-end: 2em; } } } img { width: 100%; margin-block-start: 2rem; }}.altre-cause{img { align-self: end; } dt { font-size: var(--cq-text-1); } dd:not(:last-of-type) { margin-block-end: 1.3em; }}.neurosensoriale{p, dd { font-size: var(--cq-text-0); } h3 { font-size: var(--cq-text-2); } dt { font-size: var(--cq-text-1); } dd:not(:last-of-type) { margin-block-end: 1.3em; }}.dove-siamo{justify-items:center;dl dd:last-of-type { margin-block-end: 1.2em; } dt { font-size: var(--cq-text-2); font-weight: bold; &:not(:first-of-type) { margin-block-start: 1em; } } dd { font-size: var(--cq-text-1); }}