

.pagina-home-c {
  --nebbia: #CBD7D8;
  --luce: #E3263D;
  --facile: cubic-bezier(.2, .7, .2, 1);
  
  --c-fondo: #0F2B30; --c-fondo-2: #0B2226; --c-testo: #FFFFFF; --c-testo-2: #CBD7D8; --c-spento: #8FA3A5;
  --c-accento: #9FD3D3; --c-linea: rgba(255, 255, 255, .14); --c-linea-forte: rgba(255, 255, 255, .55);
  --c-intestazione: rgba(11, 34, 38, .88);
  --c-terra: #15373D; --c-terra-siti: #22545B; --c-terra-bordo: rgba(159, 211, 211, .3); --c-etichetta: #B5C6C8; --c-marcatore: #9FD3D3;
}
:root[data-tono-c="medio"] .pagina-home-c {
  --c-fondo: #285F64; --c-fondo-2: #214F54; --c-testo: #FFFFFF; --c-testo-2: #DCEAEA; --c-spento: #C4D8D9;
  --c-accento: #BFE7E5; --c-linea: rgba(255, 255, 255, .2); --c-linea-forte: #A9C3C5;
  --c-intestazione: rgba(40, 95, 100, .94);
  --c-terra: #3A777C; --c-terra-siti: #4C8D92; --c-terra-bordo: rgba(255, 255, 255, .3); --c-etichetta: #E6F0F0; --c-marcatore: #FFFFFF;
}

.pagina-home-c .intestazione--sovrapposta .menu__link { text-shadow: none; }
.pagina-home-c .pie { margin-top: 0; }

.pagina-home-c .intestazione--sovrapposta.scorre {
  background: var(--c-intestazione); border-bottom-color: rgba(255, 255, 255, .08); box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .55);
}
@media (min-width: 900px) {
  .pagina-home-c .intestazione--sovrapposta .menu__link,.pagina-home-c .intestazione--sovrapposta .menu__apri-sotto { color: var(--c-testo); text-shadow: none; }
  .pagina-home-c .intestazione--sovrapposta .menu__link:hover { color: var(--c-accento); }
  .pagina-home-c .intestazione--sovrapposta .intestazione__cta { background: var(--c-testo); color: var(--c-fondo); border-color: var(--c-testo); border-radius: 999px; padding-inline: var(--s5); }
  .pagina-home-c .intestazione--sovrapposta .intestazione__cta:hover { background: var(--c-accento); border-color: var(--c-accento); color: var(--c-fondo); }
  .pagina-home-c .intestazione--sovrapposta .menu__link:focus-visible,.pagina-home-c .intestazione--sovrapposta .menu__apri-sotto:focus-visible,.pagina-home-c .intestazione--sovrapposta .intestazione__cta:focus-visible,.pagina-home-c .intestazione--sovrapposta .intestazione__logo:focus-visible { outline-color: var(--c-testo); }
}

.apertura-c {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 48vw);
  min-height: max(640px, min(100vh, 960px));
  min-height: max(640px, min(100svh, 960px));
  background: var(--c-fondo); color: var(--c-testo);
}
.apertura-c__testo {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--s5);
  padding: 128px var(--s8) 112px max(var(--margine), calc((100vw - var(--contenuto)) / 2));
  min-width: 0; container-type: inline-size;
}
.apertura-c__titolo {
  font-size: clamp(3.2rem, 0.6rem + 7.4vw, 8.75rem); font-size: clamp(3rem, 21cqi, 8.75rem); font-stretch: 76%; font-weight: 720;
  line-height: .9; letter-spacing: -0.012em; color: var(--c-testo); text-wrap: initial;
}
.apertura-c__riga { display: block; overflow: hidden; padding-block: .04em .1em; margin-block: -.04em -.1em; }
.apertura-c__riga > span { display: block; animation: c-riga 1.1s var(--facile) both; }
.apertura-c__riga:nth-child(2) > span { animation-delay: .12s; }
.apertura-c__riga:nth-child(3) > span { animation-delay: .24s; }
.apertura-c__riga--accento { color: var(--c-accento); }
.apertura-c__sotto { max-width: 30rem; animation: c-sali .9s var(--facile) both .45s; }
.apertura-c__sotto p { font-size: clamp(1.05rem, .98rem + .3vw, 1.25rem); line-height: 1.55; color: var(--c-testo-2); }

.apertura-c__cerca { width: min(100%, 28rem); position: relative; z-index: 5; animation: c-sali .9s var(--facile) both .58s; }
.apertura-c__cerca .ricerca { max-width: none; align-items: center; border-bottom: 1px solid var(--c-linea-forte); transition: border-color .3s; }
.apertura-c__cerca .ricerca:focus-within { border-bottom-color: var(--c-testo); }
.apertura-c__cerca input {
  background: transparent; border: 0; border-radius: 0; color: var(--c-testo); min-height: 52px; padding: var(--s2) var(--s2) var(--s2) 0;
  font-size: var(--t-18);
}
.apertura-c__cerca input::placeholder { color: var(--c-testo-2); opacity: 1; }
.apertura-c__cerca input::-webkit-search-cancel-button { filter: grayscale(1) brightness(3); cursor: pointer; }
.apertura-c__cerca input:focus-visible { outline: 2px solid var(--c-testo); outline-offset: 4px; border-color: transparent; }
.apertura-c__cerca .pulsante {
  width: 44px; min-height: 44px; height: 44px; padding: 0; border-radius: 999px; border: 0;
  background: transparent; color: var(--c-testo); transition: background-color .25s, color .25s;
}
.apertura-c__cerca .pulsante:hover { background: var(--c-testo); color: var(--c-fondo); }
.apertura-c__cerca .suggerimenti { color: var(--inchiostro); border-radius: 12px; overflow: hidden; border-color: transparent; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45); }

.apertura-c__azioni { animation: c-sali .9s var(--facile) both .7s; margin-top: var(--s2); }
.apertura-c__testo :focus-visible { outline-color: var(--c-testo); }
.apertura-c__media :focus-visible { outline-color: var(--bianco); }

.apertura-c__filo {
  position: absolute; left: max(var(--margine), calc((100vw - var(--contenuto)) / 2)); bottom: 0;
  width: 1px; height: 64px; background: var(--c-linea); overflow: hidden;
}
.apertura-c__filo::after {
  content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--c-testo);
  animation: c-filo 2.6s cubic-bezier(.6, 0, .3, 1) infinite 1.6s;
}

.apertura-c__media {
  position: relative; overflow: hidden; background: var(--c-fondo-2);
  animation: c-sale 1.5s cubic-bezier(.75, 0, .2, 1) both .1s;
}
.apertura-c__foto { position: absolute; inset: 0; display: block; will-change: transform; }
.apertura-c__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.apertura-c__foto.foto-viva img { animation-duration: 18s; transform-origin: 50% 20%; }
.apertura-c__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 26, 30, .72) 0, rgba(8, 26, 30, 0) 190px),
    linear-gradient(0deg, rgba(8, 26, 30, .45) 0, rgba(8, 26, 30, 0) 30%);
}
.apertura-c__didascalia {
  position: absolute; z-index: 2; left: var(--s5); bottom: var(--s5);
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border-radius: 999px;
  background: rgba(8, 26, 30, .62); color: var(--bianco); font-size: var(--t-14); text-decoration: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: c-sali .9s var(--facile) both 1.2s; transition: background-color .25s;
}
.apertura-c__didascalia:hover { background: rgba(8, 26, 30, .85); color: var(--bianco); text-decoration: underline; }

.luce-c {
  position: relative; flex: 0 0 auto; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--luce); box-shadow: 0 0 10px 1px rgba(227, 38, 61, .55);
  animation: c-luce 3s ease-in-out infinite;
}
.luce-c::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--luce); opacity: 0;
  animation: c-alone 3s ease-out infinite;
}

.racconto-c { background: var(--c-fondo); color: var(--c-testo); padding-block: var(--s9) var(--s8); position: relative; }
.racconto-c::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-linea) 30%, var(--c-linea) 70%, transparent);
}
.racconto-c__griglia { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); }
.racconto-c__mappa { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; align-items: center; }
.racconto-c__mappa .mappa { width: 100%; }
.racconto-c__titolo {
  font-size: var(--t-22); font-stretch: 100%; font-weight: 600; color: var(--c-accento);
  display: flex; align-items: center; gap: var(--s3); padding-top: 12vh;
}
.racconto-c__titolo::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.racconto-c__momenti { list-style: none; padding: 0 0 20vh; margin: 0; }
.racconto-c__momento {
  min-height: 68vh; display: flex; align-items: center; position: relative;
  padding-left: var(--s6); border-left: 1px solid var(--c-linea);
}
.racconto-c__momento::before {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--c-accento);
  transform: scaleY(0); transform-origin: top; transition: transform .9s var(--facile);
}
.racconto-c__momento p { display: grid; gap: var(--s3); }
.racconto-c__numero {
  display: inline-flex; align-items: flex-start; gap: .08em;
  font-family: var(--font-titoli); font-stretch: 78%; font-weight: 700; line-height: .86;
  font-size: clamp(5rem, 1.6rem + 9vw, 11.5rem); letter-spacing: -0.02em; color: var(--c-testo);
  transition: color .6s;
}
.racconto-c__numero .num { font-stretch: 78%; }
.racconto-c__unita { font-size: .38em; font-weight: 600; margin-top: .14em; color: var(--c-accento); transition: color .6s; }
.racconto-c__numero .luce-c--dato { width: 12px; height: 12px; margin: .12em 0 0 .14em; }
.racconto-c__riga { font-size: clamp(1.1rem, 1rem + .45vw, 1.4rem); line-height: 1.45; color: var(--c-testo-2); max-width: 24ch; transition: color .6s; }
.racconto-c__riga a { color: var(--c-accento); text-decoration-thickness: 1px; }
.racconto-c__riga a:hover { color: var(--c-testo); }
.racconto-c :focus-visible { outline-color: var(--c-accento); }

.racconto-c--guidato .racconto-c__momento:not(.attivo) .racconto-c__numero,.racconto-c--guidato .racconto-c__momento:not(.attivo) .racconto-c__unita,.racconto-c--guidato .racconto-c__momento:not(.attivo) .racconto-c__riga { color: var(--c-spento); }
.racconto-c--guidato .racconto-c__momento.attivo::before { transform: scaleY(1); }

.racconto-c .mappa__area { background: transparent; border: 0; overflow: visible; }
.racconto-c .mappa__svg .mare { fill: transparent; }
.racconto-c .mappa__svg .provincia { fill: var(--c-terra); stroke: var(--c-terra-bordo); transition: fill .8s, stroke .8s; }
.racconto-c .mappa__etichetta { fill: var(--c-etichetta); font-size: 17px; transition: opacity .6s; }
.racconto-c .marcatore__triangolo { fill: var(--c-marcatore); stroke: var(--c-terra); transition: fill .4s; }
.racconto-c .marcatore__punto { fill: var(--c-terra); }
.racconto-c .marcatore__onda { stroke: var(--c-marcatore); }
.racconto-c .marcatore:hover .marcatore__triangolo,.racconto-c .marcatore:focus-visible .marcatore__triangolo,.racconto-c .marcatore.attivo .marcatore__triangolo { fill: var(--c-testo); }
.racconto-c .marcatore:focus-visible .marcatore__area { stroke: var(--c-testo); }
.racconto-c .marcatore__g { transition: opacity .6s; }
.racconto-c .mappa__suggerimento { background: var(--bianco); color: var(--inchiostro); border-radius: 10px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5); }
@media (min-width: 900px) { .racconto-c .marcatore__scala { transform: scale(calc(var(--k, 1.4) * 1.3)); } }
.marcatore__luce { fill: var(--luce); filter: drop-shadow(0 0 2px rgba(227, 38, 61, .9)); animation: c-luce 3s ease-in-out infinite; }
.marcatore__alone { fill: none; stroke: var(--luce); stroke-width: .8; transform-box: fill-box; transform-origin: center; animation: c-alone-svg 3s ease-out infinite; }

.racconto-c[data-passo="1"] .mappa__etichetta { opacity: 0; }
.racconto-c[data-passo="2"] .provincia--siti { fill: var(--c-terra-siti); stroke: var(--c-accento); }
.racconto-c[data-passo="2"] .marcatore__onda { display: none; }
.racconto-c[data-passo="3"] .mappa__etichetta { opacity: .35; }
.racconto-c[data-passo="3"] .marcatore:not(.marcatore--vetta) .marcatore__g { opacity: .35; }
.racconto-c[data-passo="3"] .marcatore--vetta .marcatore__triangolo { fill: var(--c-testo); }
.racconto-c[data-passo="1"] .marcatore__luce,.racconto-c[data-passo="1"] .marcatore__alone,.racconto-c[data-passo="2"] .marcatore__luce,.racconto-c[data-passo="2"] .marcatore__alone { opacity: 0; animation: none; }

.pagina-home-c .carosello { padding-block: var(--s9) var(--s7); }
.pagina-home-c .carosello__testa h2,.pagina-home-c .servizi-schede__testa h2 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem); font-stretch: 80%; font-weight: 720; line-height: 1; }
.servizi-c { background: var(--bianco); padding-block: var(--s9); }
.servizi-c .servizi-schede__testa { margin-bottom: var(--s6); }

.servizi-c .servizio-scheda__carta { background: var(--carta); box-shadow: none; padding: var(--s7) var(--s5) var(--s6); transition: transform .35s var(--facile), box-shadow .35s; }
.servizi-c .servizio-scheda__carta:hover,.servizi-c .servizio-scheda__carta:focus-within { box-shadow: var(--ombra-morbida); }
.servizi-c .servizio-scheda__pulsante { border-radius: 999px; }
.fascia-c { margin-top: 0; }
.fascia-c .pulsante { border-radius: 999px; padding-inline: var(--s5); }
.fascia-c h2 { font-stretch: 80%; font-weight: 720; font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4.25rem); line-height: .98; max-width: 15ch; }
.fascia-c::before { background: linear-gradient(100deg, rgba(10, 32, 36, .9) 0%, rgba(10, 32, 36, .66) 50%, rgba(10, 32, 36, .3) 100%); }

@keyframes c-riga { from { transform: translateY(30%); } to { transform: none; } }
@keyframes c-sali { from { transform: translateY(22px); } to { transform: none; } }
@keyframes c-sale { from { clip-path: inset(22% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes c-filo { 0% { top: -40%; } 100% { top: 100%; } }
@keyframes c-luce { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes c-alone { 0% { transform: scale(.4); opacity: .7; } 70%,100% { transform: scale(1.5); opacity: 0; } }
@keyframes c-alone-svg { 0% { transform: scale(1); opacity: .8; } 70%,100% { transform: scale(3.2); opacity: 0; } }

@media (max-width: 899px) {
  .apertura-c { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .apertura-c__media { order: -1; height: clamp(230px, 36vh, 360px); height: clamp(230px, 36svh, 360px); }
  .apertura-c__foto img { object-position: 50% 30%; }
  .apertura-c__media::after { background: linear-gradient(180deg, rgba(8, 26, 30, .6) 0, rgba(8, 26, 30, 0) 110px), linear-gradient(0deg, var(--c-fondo) 0, transparent 34%); }
  .apertura-c__didascalia { left: auto; right: var(--margine-d); bottom: var(--s3); padding: 6px 12px 6px 10px; }
  .apertura-c__testo { padding: var(--s4) var(--margine-d) var(--s7) var(--margine); gap: var(--s4); }
  .apertura-c__titolo { font-size: clamp(3rem, 13cqi, 6rem); }
  .apertura-c__filo { display: none; }
  .apertura-c__azioni { margin-top: 0; }

  .racconto-c { padding-block: var(--s8) var(--s7); }
  .racconto-c__griglia { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .racconto-c__mappa { position: static; height: auto; order: 2; }
  .racconto-c__testo { display: contents; }
  .racconto-c__titolo { order: 1; padding-top: 0; }
  .racconto-c__momenti { order: 3; padding-bottom: 0; }
  .racconto-c__momento { min-height: 0; padding-block: var(--s5); }
  .racconto-c__momento::before { transform: scaleY(1); }
  .racconto-c__numero { font-size: clamp(3.75rem, 2.5rem + 6vw, 5.5rem); }
  .racconto-c .mappa__etichetta { font-size: 22px; }
}
@media (max-width: 639px) {
  .apertura-c__titolo { font-size: clamp(3rem, 1.6rem + 6.6vw, 4rem); font-size: clamp(3rem, 17.5cqi, 4.5rem); }
  .apertura-c__azioni { flex-wrap: nowrap; gap: var(--s2); }
  .apertura-c__azioni .pulsante { flex: 1 1 0; padding-inline: var(--s3); font-size: 1rem; white-space: nowrap; }
  .pagina-home-c .carosello { padding-block: var(--s8) var(--s6); }
  .servizi-c { padding-block: var(--s8); }
  .servizi-c .servizio-scheda__carta { padding: var(--s5) var(--s5) var(--s5); }
  .servizi-c .icona-servizio { margin-bottom: 0; }
  .fascia-c::before { background: linear-gradient(180deg, rgba(10, 32, 36, .9) 0%, rgba(10, 32, 36, .74) 100%); }
}

@media (max-width: 359px) { .apertura-c__azioni { flex-wrap: wrap; } }

@media (prefers-reduced-motion: reduce) {
  .apertura-c__riga > span,.apertura-c__sotto,.apertura-c__cerca,.apertura-c__azioni,.apertura-c__media,.apertura-c__didascalia,.apertura-c__foto.foto-viva img { animation: none; }
  .apertura-c__filo::after,.luce-c,.luce-c::after,.marcatore__luce,.marcatore__alone { animation: none; }
  .luce-c::after,.marcatore__alone { display: none; }
  .racconto-c__momento::before,.racconto-c__numero,.racconto-c__riga,.racconto-c .provincia { transition: none; }
}

.pagina-home-c .intestazione--sovrapposta:not(.scorre) { background: var(--c-fondo); border-bottom-color: var(--c-linea); }

.apertura-c__marchio { margin: 0 0 var(--s2); }
.apertura-c__marchio img { width: clamp(140px, 11vw, 176px); height: auto; animation: c-sali .9s var(--facile) both; }
@media (max-width: 899px) { .apertura-c__marchio img { width: 120px; } }
@media (prefers-reduced-motion: reduce) { .apertura-c__marchio img { animation: none; } }

.pagina-home-c .intestazione__logo { transition: opacity .35s ease, visibility .35s; }
.js .pagina-home-c .intestazione:not(.logo-mostrato) .intestazione__logo { opacity: 0; visibility: hidden; }

.apertura-c__media { background: var(--c-fondo); }
.apertura-c__foto {
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .55) 12%, #000 34%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .55) 12%, #000 34%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%);
  mask-composite: intersect;
}
.apertura-c__media::after { background: none; }
.apertura-c__didascalia { left: auto; right: max(var(--s6), 12%); bottom: max(var(--s6), 9%); }
@media (max-width: 899px) {
  .apertura-c__foto {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 62%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 62%, transparent 100%);
  }
  .apertura-c__didascalia { right: var(--margine-d); bottom: var(--s5); }
}

.pagina-home-c .intestazione--sovrapposta .intestazione__logo { background: none; padding: 0; }

@media (max-width: 899px) {
  .js .pagina-home-c .intestazione .intestazione__menu-pulsante { background: #FFFFFF; color: #0F2B30; border-color: #FFFFFF; border-radius: 999px; padding-inline: var(--s4); }
  .js .pagina-home-c .intestazione .intestazione__menu-pulsante:hover { background: #9FD3D3; border-color: #9FD3D3; }
}
