/*
 * Apuan Peaks — sistema grafico v4 (2026-11)
 *
 * Lo standard dei brand outdoor premium, senza scorciatoie: fotografia
 * protagonista, Archivo per titoli e cifre, Inter per il testo, un solo
 * verde per le azioni secondarie, ogni circuito con il suo colore sui
 * propri dati. Caricato dopo style.css e dopo il CSS del plugin.
 *
 * INDICE
 *  1. Fondamenta e superfici del browser
 *  2. Testata, pannelli, menu su telefono
 *  3. Pulsanti e collegamenti
 *  4. Titoli e blocchi editoriali (ritocchi a style.css)
 *  5. Aperture fotografiche: home, pagina, banda
 *  6. Circuiti: schede, confronto
 *  7. Home: manifesto, regole, chiusura
 *  8. Scheda circuito
 *  9. Scheda vetta e testate del plugin
 * 10. Pie' di pagina
 * 11. Movimento
 */

/* ==========================================================================
   1. FONDAMENTA
   ========================================================================== */

:root {
	--v4-ink: #131714;
	--v4-body: #343a36;
	--v4-muted: #5f6762;
	--v4-paper: #ffffff;
	--v4-stone: #f3f1ed;
	--v4-stone-2: #e7e4de;
	--v4-line: #e2ded7;
	--v4-forest: #24563a;
	--v4-night: #101412;
	--v4-on-night: #eef1ee;
	--v4-on-night-mute: #aeb7b1;
	--v4-display: "Archivo", "Inter", system-ui, sans-serif;
	--v4-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--v4-wrap: 1320px;
	--v4-gutter: clamp(1.25rem, 4vw, 3.5rem);
	--v4-sec: clamp(4.5rem, 10vw, 9rem);
	--v4-hh: 76px;
	--v4-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--v4-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

@media (max-width: 980px) {
	:root { --v4-hh: 66px; }
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--v4-hh) + 16px); scrollbar-color: #b9b3a9 var(--v4-stone); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body#top.ap-v4 #main { padding-top: var(--v4-hh) !important; }
body#top.ap-v4.ap-has-hero #main { padding-top: 0 !important; }
body#top.ap-v4 #wrap_all { overflow: visible; }

#top ::selection { background: var(--v4-forest); color: #fff; }
#top :focus-visible { outline: 2px solid var(--v4-forest); outline-offset: 3px; border-radius: 4px; }

#top .ap-icon { width: 18px; height: 18px; flex: none; }
#top .ap-tnum { font-variant-numeric: tabular-nums; }

#top .ap-skip { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: .75rem 1rem; background: var(--v4-ink); color: #fff; border-radius: 8px; }
#top .ap-skip:focus { left: 1rem; top: 1rem; }

/* Le immagini di sfondo delle aperture */
#top .ap-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--ap-hero-pos, var(--ap-focus, center)); z-index: -2; }

/* ==========================================================================
   2. TESTATA
   ========================================================================== */

#top .ap-header {
	position: fixed; inset: 0 0 auto; z-index: 500;
	height: var(--v4-hh);
	color: var(--v4-ink);
	background: rgba(255, 255, 255, .97);
	box-shadow: 0 1px 0 var(--v4-line);
	--ap-mark-ink: #fff;
	transition: background-color 260ms ease, box-shadow 260ms ease, color 260ms ease;
}
@supports (backdrop-filter: blur(1px)) {
	#top .ap-header { background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.4) blur(12px); }
}
.admin-bar #top .ap-header, #top.admin-bar .ap-header { top: 32px; }
@media (max-width: 782px) { #top.admin-bar .ap-header { top: 46px; } }

/* Sopra una fotografia la testata parte trasparente, poi diventa bianca. */
#top.ap-has-hero .ap-header:not(.is-solid):not(.is-open) { background: transparent; box-shadow: none; backdrop-filter: none; color: #fff; --ap-mark-ink: var(--v4-ink); }
#top.ap-has-hero.ap-header-ink .ap-header:not(.is-solid):not(.is-open) { color: var(--v4-ink); --ap-mark-ink: #fff; }

#top .ap-header__inner { height: 100%; width: min(100% - 2 * var(--v4-gutter), var(--v4-wrap)); margin-inline: auto; display: flex; align-items: center; gap: 1.5rem; }

#top .ap-brand { display: inline-flex; align-items: center; gap: .7rem; margin-right: auto; color: inherit; text-decoration: none; }
#top .ap-brand__mark { width: 34px; height: 34px; }
#top .ap-mark-ridge { stroke: var(--ap-mark-ink, #fff); }
#top .ap-brand__name { font-family: var(--v4-display); font-stretch: 118%; font-weight: 820; font-size: 1.0625rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
#top .ap-brand__name small { display: block; margin-top: .3em; font-family: var(--v4-text); font-stretch: 100%; font-size: .6875rem; font-weight: 500; letter-spacing: .08em; opacity: .75; }

#top .ap-nav { display: flex; align-items: center; gap: .15rem; }
#top .ap-nav__item { position: relative; }
#top .ap-nav__link {
	display: inline-flex; align-items: center; gap: .35rem; height: 44px; margin: 0; padding: 0 .9rem;
	border: 0; border-radius: 999px; background: none; color: inherit;
	font: 500 .96875rem/1 var(--v4-text); text-decoration: none; cursor: pointer;
	transition: background-color 180ms ease;
}
#top .ap-nav__link .ap-icon { width: 14px; height: 14px; transition: transform 200ms var(--v4-ease-out); }
#top .ap-nav__link[aria-expanded="true"] .ap-icon { transform: rotate(180deg); }
#top .ap-nav__link.is-current { box-shadow: inset 0 -2px 0 currentColor; border-radius: 0; }
@media (hover: hover) and (pointer: fine) {
	#top .ap-nav__link:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
	#top .ap-nav__link.is-current:hover { border-radius: 999px; box-shadow: none; }
}

#top .ap-header__cta { margin-left: .5rem; min-height: 44px; padding: 0 1.25rem; font-size: .9375rem; }
#top.ap-has-hero .ap-header:not(.is-solid):not(.is-open) .ap-header__cta { --b-bg: #fff; --b-fg: var(--v4-ink); --b-bd: #fff; }
#top.ap-has-hero.ap-header-ink .ap-header:not(.is-solid):not(.is-open) .ap-header__cta { --b-bg: var(--v4-ink); --b-fg: #fff; --b-bd: var(--v4-ink); }

/* Pannelli */
#top .ap-mega,
#top .ap-menu {
	position: absolute; top: calc(100% + 10px); z-index: 10;
	background: #fff; color: var(--v4-ink);
	box-shadow: 0 2px 6px rgba(19, 23, 20, .06), 0 24px 60px rgba(19, 23, 20, .16);
	opacity: 0; visibility: hidden;
	transition: opacity 180ms var(--v4-ease-out), transform 180ms var(--v4-ease-out), visibility 0s linear 180ms;
}
#top .ap-mega { left: 50%; width: min(760px, 92vw); padding: 1rem; border-radius: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; transform: translate(-50%, -6px) scale(.98); transform-origin: top center; }
#top .ap-menu { left: 0; min-width: 260px; padding: .5rem; border-radius: 14px; transform: translateY(-6px) scale(.98); transform-origin: top left; }
#top .ap-nav__item.is-open .ap-mega { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
#top .ap-nav__item.is-open .ap-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

#top .ap-mega__item { display: grid; grid-template-columns: 84px 1fr; gap: 1rem; align-items: center; padding: .6rem; border-radius: 12px; color: var(--v4-ink); text-decoration: none; transition: background-color 160ms ease; }
#top .ap-mega__item:hover, #top .ap-mega__item:focus-visible, #top .ap-mega__item[aria-current] { background: var(--v4-stone); }
#top .ap-mega__item img { width: 84px; height: 64px; object-fit: cover; object-position: var(--ap-focus, center); border-radius: 8px; }
#top .ap-mega__item strong { display: block; font-family: var(--v4-display); font-size: 1.125rem; font-weight: 760; letter-spacing: -0.01em; color: var(--v4-ink); }
#top .ap-mega__item span span { display: block; font-size: .875rem; color: var(--v4-muted); }
#top .ap-mega__all { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-top: .25rem; padding: 1rem .75rem .6rem; border-top: 1px solid var(--v4-line); color: var(--v4-ink); font-weight: 600; font-size: .9375rem; text-decoration: none; }
#top .ap-mega__all:hover { text-decoration: underline; text-underline-offset: .25em; }

#top .ap-menu a { display: block; padding: .7rem .85rem; border-radius: 9px; color: var(--v4-ink); font-size: .96875rem; font-weight: 500; line-height: 1.35; text-decoration: none; }
#top .ap-menu a:hover, #top .ap-menu a:focus-visible, #top .ap-menu a[aria-current] { background: var(--v4-stone); }
#top .ap-menu a span { display: block; margin-top: .15rem; font-size: .8125rem; font-weight: 400; color: var(--v4-muted); }

/* Menu su telefono */
#top .ap-burger { display: none; width: 46px; height: 46px; margin: 0 -10px 0 0; padding: 0; border: 0; border-radius: 999px; background: none; color: inherit; cursor: pointer; }
#top .ap-burger .ap-icon { width: 24px; height: 24px; margin: auto; display: block; }
#top .ap-burger__close { display: none !important; }
#top .ap-header.is-open .ap-burger__close { display: block !important; }
#top .ap-header.is-open .ap-burger__open { display: none !important; }
#top .ap-drawer { display: none; }

@media (max-width: 1080px) {
	#top .ap-nav, #top .ap-header__cta { display: none; }
	#top .ap-burger { display: block; }
	#top .ap-header__inner { gap: .5rem; }
	#top .ap-header__inner::after { content: ""; order: 2; }

	#top .ap-drawer {
		display: block; position: fixed; inset: var(--v4-hh) 0 0; z-index: 499;
		overflow-y: auto; overscroll-behavior: contain;
		padding: .5rem var(--v4-gutter) calc(2rem + env(safe-area-inset-bottom));
		background: #fff;
		opacity: 0; visibility: hidden; transform: translateY(-8px);
		transition: opacity 220ms var(--v4-ease-out), transform 220ms var(--v4-ease-out), visibility 0s linear 220ms;
	}
	#top.admin-bar .ap-drawer { top: calc(var(--v4-hh) + 46px); }
	#top.ap-menu-open .ap-drawer { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	#top .ap-drawer__label { margin: 1.5rem 0 .6rem; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--v4-muted); }
	#top .ap-drawer__circuits { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
	#top .ap-drawer__circuits a { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; color: #fff; text-decoration: none; isolation: isolate; background: var(--v4-night); }
	#top .ap-drawer__circuits img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--ap-focus, center); z-index: -2; }
	#top .ap-drawer__circuits a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .75)); }
	#top .ap-drawer__circuits span { position: absolute; left: .75rem; right: .75rem; bottom: .6rem; font-size: .8125rem; line-height: 1.3; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .9); }
	#top .ap-drawer__circuits strong { display: block; font-family: var(--v4-display); font-size: 1.25rem; font-weight: 760; color: #fff; }
	#top .ap-drawer__links { margin-top: 1rem; }
	#top .ap-drawer__link,
	#top .ap-drawer__group summary { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--v4-line); color: var(--v4-ink); font-family: var(--v4-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; list-style: none; }
	#top .ap-drawer__group summary::-webkit-details-marker { display: none; }
	#top .ap-drawer__group summary .ap-icon { transition: transform 200ms var(--v4-ease-out); color: var(--v4-muted); }
	#top .ap-drawer__group[open] summary .ap-icon { transform: rotate(180deg); }
	#top .ap-drawer__group a { display: block; padding: .8rem 0 .8rem 1rem; border-bottom: 1px solid var(--v4-line); color: var(--v4-body); font-size: 1.0625rem; text-decoration: none; }
	#top .ap-drawer__link .ap-icon { color: var(--v4-muted); }
	#top .ap-drawer__cta { width: 100%; margin-top: 1.75rem; }
}
@media (max-width: 420px) {
	#top .ap-brand__name small { display: none; }
	#top .ap-brand__name { font-size: .9375rem; }
}

/* ==========================================================================
   3. PULSANTI E COLLEGAMENTI
   ========================================================================== */

#top .ap-btn {
	--b-bg: var(--v4-ink); --b-fg: #fff; --b-bd: var(--v4-ink);
	display: inline-flex; align-items: center; justify-content: center; gap: .6em;
	min-height: 52px; margin: 0; padding: 0 1.6rem;
	border: 1.5px solid var(--b-bd); border-radius: 999px;
	background: var(--b-bg); color: var(--b-fg);
	font: 600 1rem/1.1 var(--v4-text); letter-spacing: -0.005em; text-align: center; text-decoration: none; white-space: nowrap;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--v4-ease-out);
}
#top .ap-btn:active { transform: scale(.97); }
#top .ap-btn .ap-icon { transition: transform 200ms var(--v4-ease-out); }
#top .ap-btn--ghost { --b-bg: transparent; --b-fg: var(--v4-ink); --b-bd: color-mix(in srgb, var(--v4-ink) 30%, transparent); }
#top .ap-btn--light { --b-bg: #fff; --b-fg: var(--v4-ink); --b-bd: #fff; }
#top .ap-btn--outline-light { --b-bg: transparent; --b-fg: #fff; --b-bd: rgba(255, 255, 255, .6); }
#top .ap-btn--glass { --b-bg: rgba(255, 255, 255, .22); --b-fg: var(--v4-ink); --b-bd: rgba(19, 23, 20, .3); backdrop-filter: blur(6px); }
@media (hover: hover) and (pointer: fine) {
	#top .ap-btn:hover { --b-bg: var(--v4-forest); --b-bd: var(--v4-forest); --b-fg: #fff; }
	#top .ap-btn--ghost:hover, #top .ap-btn--glass:hover { --b-bg: var(--v4-ink); --b-bd: var(--v4-ink); --b-fg: #fff; }
	#top .ap-btn--light:hover { --b-bg: var(--v4-stone); --b-bd: var(--v4-stone); --b-fg: var(--v4-ink); }
	#top .ap-btn--outline-light:hover { --b-bg: #fff; --b-bd: #fff; --b-fg: var(--v4-ink); }
	#top .ap-btn:hover .ap-icon { transform: translateX(3px); }
}

/* I pulsanti del plugin (moduli, area personale, Albo) parlano la stessa lingua. */
#top .ap-button,
#top a.ap-button { min-height: 52px; border-radius: 999px; font-family: var(--v4-text); font-weight: 600; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--v4-ease-out); }
#top .ap-button:hover,
#top .ap-button:focus-visible { transform: none; box-shadow: none; background: var(--v4-forest); border-color: var(--v4-forest); }
#top .ap-button:active { transform: scale(.97); }
#top .ap-button--ghost:hover { background: var(--v4-ink); border-color: var(--v4-ink); color: #fff; }
#top .ap-button--light:hover { background: var(--v4-stone); border-color: var(--v4-stone); color: var(--v4-ink); }

#top .ap-arrowlink,
#top .ap-more {
	display: inline-flex; align-items: center; gap: .45em; padding: 0; border: 0;
	color: var(--v4-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	transition: text-decoration-color 200ms ease;
}
#top .ap-more::after {
	content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 200ms var(--v4-ease-out);
}
#top .ap-arrowlink .ap-icon { width: 16px; height: 16px; transition: transform 200ms var(--v4-ease-out); }
@media (hover: hover) and (pointer: fine) {
	#top .ap-arrowlink:hover, #top .ap-more:hover { color: var(--v4-ink); text-decoration-color: currentColor; }
	#top .ap-arrowlink:hover .ap-icon, #top .ap-more:hover::after { transform: translateX(3px); }
}
#top .ap-sec--dark .ap-more, #top .ap-band .ap-more { color: #fff; }

/* ==========================================================================
   4. TITOLI E BLOCCHI EDITORIALI
   ========================================================================== */

#top h1, #top h2, #top h3, #top h4 { font-family: var(--v4-display); }

/* Le etichette sopra i titoli sono sparite: il titolo parla da solo. */
#top .ap-eyebrow { display: none; }

#top .ap-title { font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
#top .ap-title--xl,
#top .ap-statement { font-weight: 800; letter-spacing: -0.04em; line-height: .96; font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
#top .ap-lead, #top p.ap-lead { color: var(--v4-body); }
#top .ap-sec--dark .ap-lead, #top .ap-sec--dark p { color: var(--v4-on-night-mute); }

#top .ap-sec { padding-block: var(--v4-sec); }
#top .ap-sec--stone { background: var(--v4-stone); }
#top .ap-sec--dark { background: var(--v4-night); }
#top .ap-wrap { width: min(100% - 2 * var(--v4-gutter), var(--v4-wrap)); }

/* Le tre regole: riga sottile in alto, numeri grandi e leggeri */
#top .ap-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1.5px solid var(--v4-ink); counter-reset: ap-r; }
#top .ap-rules > li { position: static; margin: 0; padding: 2rem clamp(1rem, 2.5vw, 2.5rem) 0 0; background: none; border: 0; border-radius: 0; box-shadow: none; counter-increment: ap-r; }
#top .ap-rules > li + li { padding-left: clamp(1rem, 2.5vw, 2.5rem); border-left: 1px solid var(--v4-stone-2); }
#top .ap-rules > li::before { content: counter(ap-r); position: static; display: block; width: auto; height: auto; margin: 0 0 1.5rem; padding: 0; border: 0; border-radius: 0; background: none; font-family: var(--v4-display); font-weight: 300; font-size: 4.5rem; line-height: 1; letter-spacing: -0.04em; color: var(--v4-forest); font-variant-numeric: tabular-nums; box-shadow: none; }
#top .ap-rules h3 { margin: 0 0 .85rem; font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); letter-spacing: -0.02em; }
#top .ap-rules p { margin: 0; color: var(--v4-body); }
#top .ap-rules strong { color: var(--v4-ink); font-weight: 600; }
@media (max-width: 860px) {
	#top .ap-rules { grid-template-columns: 1fr; }
	#top .ap-rules > li, #top .ap-rules > li + li { padding: 1.75rem 0; border-left: 0; border-bottom: 1px solid var(--v4-stone-2); display: grid; grid-template-columns: 3.25rem 1fr; gap: 0 1rem; }
	#top .ap-rules > li::before { font-size: 2.75rem; margin: 0; grid-row: span 2; }
}

/* Chiusura con invito: niente riquadro, il titolo grande basta */
#top .ap-cta { padding: 0; background: none; border: 0; box-shadow: none; text-align: left; }
#top .ap-cta .ap-title { font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem); letter-spacing: -0.04em; line-height: .96; }

/* ==========================================================================
   5. APERTURE FOTOGRAFICHE
   ========================================================================== */

/* --- Home --- */
#top .ap-open { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: max(640px, 100svh); color: #fff; background: #6f86b4; }
#top .ap-open .ap-hero-img { object-position: var(--ap-hero-pos, var(--ap-focus, center 40%)); transform-origin: 50% 70%; }
#top .ap-open::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 14, 12, .42) 0%, rgba(10, 14, 12, .18) 40%, rgba(10, 14, 12, 0) 65%), linear-gradient(180deg, rgba(10, 14, 12, .45) 0%, rgba(10, 14, 12, .1) 35%, rgba(10, 14, 12, .1) 55%, rgba(10, 14, 12, .62) 100%); pointer-events: none; }
#top .ap-open--ink { color: var(--v4-ink); }
#top .ap-open--ink::before { background: linear-gradient(180deg, rgba(10, 14, 12, 0) 0%, rgba(10, 14, 12, 0) 55%, rgba(10, 14, 12, .58) 100%); }
#top .ap-open__copy { position: relative; padding-top: calc(var(--v4-hh) + clamp(2.5rem, 9vh, 6.5rem)); }
#top .ap-open__title { margin: 0; max-width: 11ch; color: inherit; font-size: clamp(3.1rem, 1.6rem + 6.2vw, 6rem); font-weight: 800; font-stretch: 104%; letter-spacing: -0.04em; line-height: .92; }
#top .ap-open__title .ap-line { display: block; }
#top .ap-open__sub { max-width: 30rem; margin: 1.5rem 0 2rem; color: inherit; font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height: 1.5; font-weight: 450; opacity: .94; }
#top .ap-open__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
#top .ap-open:not(.ap-open--ink) .ap-open__actions .ap-btn:first-child { --b-bg: #fff; --b-fg: var(--v4-ink); --b-bd: #fff; }
#top .ap-open:not(.ap-open--ink) .ap-btn--glass { --b-fg: #fff; --b-bd: rgba(255, 255, 255, .7); --b-bg: rgba(10, 14, 12, .32); backdrop-filter: blur(8px); }

#top .ap-picker { position: relative; margin-top: auto; padding-top: 3rem; padding-bottom: clamp(1.25rem, 3vw, 2.25rem); }
#top .ap-picker__label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 .75rem; color: #fff; font-size: .9375rem; }
#top .ap-picker__label strong { font-weight: 600; color: #fff; }
#top .ap-picker__label span { font-size: .875rem; opacity: .85; }
#top .ap-picker__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border-radius: 16px; background: rgba(255, 255, 255, .2); }
#top .ap-picker__list li { margin: 0; padding: 0; }
#top .ap-picker__list a {
	display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .25rem 1rem; height: 100%;
	padding: 1.1rem 1.25rem 1.15rem; color: var(--v4-ink); text-decoration: none;
	background: rgba(255, 255, 255, .93); backdrop-filter: blur(14px) saturate(1.3);
	transition: background-color 200ms ease;
}
#top .ap-picker__list a:hover, #top .ap-picker__list a:focus-visible { background: #fff; }
#top .ap-picker__name { display: flex; align-items: center; gap: .55rem; font-family: var(--v4-display); font-size: 1.375rem; font-weight: 780; letter-spacing: -0.015em; line-height: 1.1; }
#top .ap-picker__name i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
#top .ap-picker__facts { grid-column: 1; font-size: .875rem; color: var(--v4-muted); font-variant-numeric: tabular-nums; }
#top .ap-picker__go { grid-row: 1 / span 2; grid-column: 2; align-self: center; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--v4-stone); transition: background-color 200ms ease, color 200ms ease, transform 200ms var(--v4-ease-out); }
#top .ap-picker__go .ap-icon { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
	#top .ap-picker__list a:hover .ap-picker__go { background: var(--v4-ink); color: #fff; transform: translateX(2px); }
}
@media (max-width: 980px) { #top .ap-picker__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
	#top .ap-open { min-height: auto; }
	#top .ap-open .ap-hero-img { object-position: var(--ap-hero-pos, var(--ap-focus, 40% 70%)); }
	#top .ap-open__copy { padding-top: calc(var(--v4-hh) + 2rem); }
	#top .ap-open__sub { margin: 1rem 0 1.5rem; }
	#top .ap-open__actions .ap-btn { flex: 1 1 auto; }
	#top .ap-open::before { background: linear-gradient(180deg, rgba(10, 14, 12, .4) 0%, rgba(10, 14, 12, .05) 40%, rgba(10, 14, 12, .65) 100%); }
	#top .ap-open--ink::before { background: linear-gradient(180deg, rgba(10, 14, 12, 0) 0%, rgba(10, 14, 12, 0) 40%, rgba(10, 14, 12, .65) 100%); }
	#top .ap-picker { margin-top: 13rem; }
	#top .ap-picker__label span { display: none; }
	#top .ap-picker__list { grid-template-columns: 1fr; border-radius: 14px; }
	#top .ap-picker__list a { padding: .9rem 1rem; }
	#top .ap-picker__name { font-size: 1.1875rem; }
}

/* --- Testata di pagina --- */
#top .ap-phero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: min(72svh, 680px); color: #fff; background: var(--v4-night); }
#top .ap-phero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 11, 10, .5) 0%, rgba(8, 11, 10, .05) 30%, rgba(8, 11, 10, .2) 55%, rgba(8, 11, 10, .8) 100%), linear-gradient(90deg, rgba(8, 11, 10, .45) 0%, rgba(8, 11, 10, 0) 65%); }
#top .ap-phero--plain { min-height: auto; background: var(--v4-forest); }
#top .ap-phero__inner { padding-top: calc(var(--v4-hh) + 4rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); }
#top .ap-phero__title { max-width: 16ch; margin: 0; color: #fff; font-size: clamp(2.75rem, 1.6rem + 5vw, 5.5rem); font-weight: 820; letter-spacing: -0.04em; line-height: .94; }
#top .ap-phero__sub { max-width: 40ch; margin: 1.25rem 0 0; color: rgba(255, 255, 255, .92); font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.5rem); line-height: 1.4; }
#top .ap-phero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
#top .ap-phero__facts { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1.75rem 0 0; padding: 0; }
#top .ap-phero__facts li { margin: 0; padding: .45rem .9rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; font-size: .9375rem; color: #fff; backdrop-filter: blur(6px); }

/* --- Banda fotografica --- */
#top .ap-band { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--v4-night); }
#top .ap-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 11, 10, .84) 0%, rgba(8, 11, 10, .55) 50%, rgba(8, 11, 10, .2) 100%); }
#top .ap-band .ap-wrap { padding-block: clamp(6rem, 14vw, 12rem); }
#top .ap-band__title { max-width: 12ch; margin: 0; color: #fff; font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem); font-weight: 800; letter-spacing: -0.04em; line-height: .96; }
#top .ap-band--quote .ap-band__title { max-width: 18ch; font-weight: 700; }
#top .ap-band__text { max-width: 36rem; margin: 1.75rem 0 0; color: rgba(255, 255, 255, .9); font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height: 1.55; }
#top .ap-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }

/* ==========================================================================
   6. CIRCUITI: SCHEDE E CONFRONTO
   ========================================================================== */

#top .ap-tabs { display: inline-flex; margin: 0 0 1.75rem; padding: 4px; border-radius: 999px; background: var(--v4-stone); }
#top .ap-sec--stone .ap-tabs { background: #fff; }
#top .ap-tabs[hidden] { display: none; }
#top .ap-tabs button { min-height: 40px; margin: 0; padding: 0 1.1rem; border: 0; border-radius: 999px; background: none; color: var(--v4-muted); font: 600 .9375rem/1 var(--v4-text); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
#top .ap-tabs button[aria-selected="true"] { background: #fff; color: var(--v4-ink); box-shadow: 0 1px 2px rgba(19, 23, 20, .08), 0 2px 8px rgba(19, 23, 20, .06); }
#top .ap-sec--stone .ap-tabs button[aria-selected="true"] { background: var(--v4-ink); color: #fff; }
#top .ap-circuits-v4 [role="tabpanel"][hidden] { display: none; }
#top .ap-circuits-v4:not(.is-tabbed) .ap-compare { margin-top: 2rem; }

#top .ap-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
#top .ap-cards--cols-1 { grid-template-columns: 1fr; }
#top .ap-card { position: relative; isolation: isolate; display: block; overflow: hidden; aspect-ratio: 5 / 4; border-radius: 22px; color: #fff; text-decoration: none; background: var(--v4-night); }
#top .ap-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--ap-focus, center); z-index: -2; transition: transform 900ms var(--v4-ease-out); }
#top .ap-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 11, 10, .05) 30%, rgba(8, 11, 10, .85) 100%); }
#top .ap-card__body { position: absolute; left: 0; right: 0; bottom: 0; display: block; padding: clamp(1.25rem, 2.5vw, 2rem); }
#top .ap-card__tag { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem; padding: .35rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; }
#top .ap-card__tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px rgba(255, 255, 255, .75); }
#top .ap-card__title { display: block; color: #fff; font-family: var(--v4-display); font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
#top .ap-card__tagline { display: block; max-width: 34ch; margin: .5rem 0 1.25rem; color: rgba(255, 255, 255, .88); font-size: 1rem; line-height: 1.45; }
#top .ap-card__facts { display: flex; flex-wrap: wrap; gap: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .25); font-family: var(--v4-display); font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
#top .ap-card__facts small { display: block; margin-bottom: .15rem; font-family: var(--v4-text); font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
#top .ap-card__go { position: absolute; top: clamp(1.25rem, 2.5vw, 2rem); right: clamp(1.25rem, 2.5vw, 2rem); width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--v4-ink); transition: transform 240ms var(--v4-ease-out); }
@media (hover: hover) and (pointer: fine) {
	#top .ap-card:hover .ap-card__img { transform: scale(1.04); }
	#top .ap-card:hover .ap-card__go { transform: rotate(-45deg); }
}
@media (max-width: 760px) {
	#top .ap-cards { grid-template-columns: 1fr; }
	#top .ap-card { aspect-ratio: 4 / 5; }
}

#top .ap-compare { overflow-x: auto; border: 1px solid var(--v4-line); border-radius: 18px; background: #fff; }
#top .ap-compare table { width: 100%; min-width: 680px; margin: 0; border: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; background: none; }
#top .ap-compare th, #top .ap-compare td { padding: 1.1rem 1.25rem; border: 0; border-bottom: 1px solid var(--v4-line); background: none; text-align: left; vertical-align: middle; }
#top .ap-compare thead th { background: var(--v4-stone); color: var(--v4-muted); font-family: var(--v4-text); font-size: .8125rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
#top .ap-compare tbody tr:last-child > * { border-bottom: 0; }
#top .ap-compare tbody th { color: var(--v4-ink); font-family: var(--v4-display); font-size: 1.25rem; font-weight: 760; }
#top .ap-compare tbody th i { display: inline-block; width: 10px; height: 10px; margin-right: .6rem; border-radius: 50%; background: var(--c); }
#top .ap-compare .ap-num { text-align: right; color: var(--v4-ink); font-weight: 600; }
#top .ap-compare .ap-muted { color: var(--v4-muted); font-size: .9375rem; }
#top .ap-compare tbody tr { transition: background-color 160ms ease; }
#top .ap-compare tbody tr:hover { background: #fbfaf8; }

/* ==========================================================================
   7. HOME: MANIFESTO, CHIUSURA
   ========================================================================== */

#top .ap-manifesto { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
#top .ap-manifesto .ap-statement { margin: 0 0 2rem; }
#top .ap-manifesto .ap-lead { margin-bottom: 1rem; }
#top .ap-manifesto .ap-figure, #top .ap-manifesto figure { margin: 0; }
#top .ap-manifesto figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--ap-focus, center); border-radius: 20px; }
#top .ap-manifesto figcaption { margin-top: .85rem; font-size: .875rem; color: var(--v4-muted); }
#top .ap-zero { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 2.25rem 0 0; padding: 0; }
#top .ap-zero li { margin: 0; padding: .5rem .95rem; border: 1px solid var(--v4-line); border-radius: 999px; color: var(--v4-ink); font-size: .9375rem; font-weight: 500; }
@media (max-width: 860px) {
	#top .ap-manifesto { grid-template-columns: 1fr; }
	#top .ap-manifesto figure img { aspect-ratio: 3 / 2; }
}

#top .ap-split-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
#top .ap-split-head .ap-title { margin: 0; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); }
#top .ap-split-head .ap-lead { margin: 0; max-width: 34rem; }
@media (max-width: 860px) { #top .ap-split-head { grid-template-columns: 1fr; } }

#top .ap-after { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-top: 2rem; }
#top .ap-after p { margin: 0; color: var(--v4-muted); }

#top .ap-closing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
#top .ap-closing .ap-title { margin: 0; font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem); letter-spacing: -0.04em; line-height: .96; }
#top .ap-closing .ap-lead { margin: 1.5rem 0 2.25rem; }
#top .ap-closing .ap-actions { margin: 0; }
#top .ap-closing__note { margin: 1.25rem 0 0; color: var(--v4-muted); font-size: .9375rem; }
#top .ap-closing figure { margin: 0; }
#top .ap-closing figure img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: var(--ap-focus, center); border-radius: 22px; }
@media (max-width: 860px) {
	#top .ap-closing { grid-template-columns: 1fr; }
	#top .ap-closing figure { order: -1; }
	#top .ap-closing figure img { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   8. SCHEDA CIRCUITO
   ========================================================================== */

#top .ap-chero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: min(78svh, 760px); color: #fff; background: var(--v4-night); }
#top .ap-chero .ap-hero-img { object-position: var(--ap-focus, center 55%); }
#top .ap-chero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 11, 10, .45) 0%, rgba(8, 11, 10, 0) 28%, rgba(8, 11, 10, .1) 50%, rgba(8, 11, 10, .78) 100%), linear-gradient(90deg, rgba(8, 11, 10, .55) 0%, rgba(8, 11, 10, .25) 45%, rgba(8, 11, 10, 0) 70%); }
#top .ap-chero__inner { padding-top: calc(var(--v4-hh) + 3rem); padding-bottom: clamp(7rem, 12vw, 9rem); }
#top .ap-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.25rem; color: rgba(255, 255, 255, .85); font-size: .9375rem; }
#top .ap-crumbs a { color: inherit; text-decoration: none; }
#top .ap-crumbs a:hover { text-decoration: underline; text-underline-offset: .25em; }
#top .ap-crumbs .ap-icon { width: 14px; height: 14px; opacity: .7; }
#top .ap-chero__title { margin: 0; color: #fff; font-size: clamp(3.25rem, 1.8rem + 6.5vw, 6rem); font-weight: 820; letter-spacing: -0.04em; line-height: .9; }
#top .ap-chero__title span { display: block; margin-bottom: .35em; color: rgba(255, 255, 255, .85); font-family: var(--v4-text); font-size: clamp(1.0625rem, .9rem + .6vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em; }
#top .ap-chero__tagline { max-width: 34ch; margin: 1.25rem 0 0; color: rgba(255, 255, 255, .92); font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.5rem); line-height: 1.4; }

#top .ap-cfacts { position: relative; z-index: 3; margin-top: calc(-1 * clamp(4rem, 7vw, 5rem)); }
#top .ap-cfacts dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, auto)); margin: 0; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 2px 6px rgba(19, 23, 20, .05), 0 20px 50px rgba(19, 23, 20, .12); }
#top .ap-cfacts dl > div { padding: 1.35rem 1.5rem; border-left: 1px solid var(--v4-line); }
#top .ap-cfacts dl > div:first-child { border-left: 0; }
#top .ap-cfacts dt { margin: 0; padding: 0; color: var(--v4-muted); font-size: .8125rem; font-weight: 500; }
#top .ap-cfacts dd { margin: .25rem 0 0; padding: 0; color: var(--v4-ink); font-family: var(--v4-display); font-size: clamp(1.375rem, 1.15rem + .8vw, 1.875rem); font-weight: 760; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
#top .ap-cfacts dd small { margin-left: .15em; color: var(--v4-muted); font-size: max(.8125rem, .55em); font-weight: 600; letter-spacing: 0; }
#top .ap-cfacts .ap-cfacts__txt { padding-top: .2rem; font-family: var(--v4-text); font-size: 1rem; font-weight: 600; letter-spacing: 0; line-height: 1.35; }
#top .ap-grade { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
#top .ap-grade b { display: inline-grid; place-items: center; min-width: 2.4rem; height: 1.8rem; padding: 0 .4rem; border-radius: 6px; background: var(--v4-ink); color: #fff; font-size: .875rem; letter-spacing: .02em; }
@media (max-width: 1100px) {
	#top .ap-cfacts dl { grid-template-columns: repeat(3, 1fr); }
	#top .ap-cfacts dl > div:nth-child(3n + 1) { border-left: 0; }
	#top .ap-cfacts dl > div:nth-child(n + 4) { border-top: 1px solid var(--v4-line); }
}
@media (max-width: 560px) {
	#top .ap-cfacts dl { grid-template-columns: 1fr 1fr; }
	#top .ap-cfacts dl > div { padding: 1rem 1.1rem; border-left: 1px solid var(--v4-line); }
	#top .ap-cfacts dl > div:nth-child(odd) { border-left: 0; }
	#top .ap-cfacts dl > div:nth-child(n + 3) { border-top: 1px solid var(--v4-line); }
	#top .ap-grade { font-size: .9375rem; }
}

#top .ap-cpage { display: grid; grid-template-columns: 200px minmax(0, 1fr) 340px; gap: clamp(2rem, 4vw, 4rem); align-items: start; padding-block: clamp(3.5rem, 7vw, 6rem) var(--v4-sec); }
#top .ap-ctoc { position: sticky; top: calc(var(--v4-hh) + 2rem); font-size: .9375rem; }
#top .ap-ctoc p { margin: 0 0 .75rem; color: var(--v4-muted); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
#top .ap-ctoc ol { list-style: none; margin: 0; padding: 0; border-left: 1.5px solid var(--v4-line); }
#top .ap-ctoc li { margin: 0; padding: 0; }
#top .ap-ctoc a { display: block; margin-left: -1.5px; padding: .45rem 0 .45rem 1rem; border-left: 1.5px solid transparent; color: var(--v4-muted); line-height: 1.35; text-decoration: none; transition: color 160ms ease, border-color 160ms ease; }
#top .ap-ctoc a:hover { color: var(--v4-ink); }
#top .ap-ctoc a.is-active { border-left-color: var(--v4-ink); color: var(--v4-ink); font-weight: 600; }

/* Testo della scheda */
#top .ap-cprose { max-width: 68ch; font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 1.68; color: var(--v4-body); }
#top .ap-cprose > p:first-child { margin-bottom: 1.5rem; color: var(--v4-ink); font-size: clamp(1.3125rem, 1.1rem + .9vw, 1.75rem); font-weight: 500; line-height: 1.38; letter-spacing: -0.012em; }
#top .ap-cprose h3 { margin: clamp(3.5rem, 7vw, 5rem) 0 1.25rem; color: var(--v4-ink); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 780; letter-spacing: -0.03em; line-height: 1.05; }
#top .ap-cprose strong { color: var(--v4-ink); font-weight: 600; }
#top .ap-cprose a:not([class]) { color: var(--v4-forest); text-underline-offset: .2em; }

/* La giornata, vetta per vetta */
#top .ap-seq { list-style: none; margin: 1.5rem 0 0; padding: 0; }
#top .ap-seq > li { position: relative; margin: 0; padding: 0 0 2rem 4.25rem; }
#top .ap-seq > li::before { content: ""; position: absolute; left: calc(1.5rem - .75px); top: 3rem; bottom: .25rem; width: 1.5px; background: var(--v4-line); }
#top .ap-seq > li:last-child::before { display: none; }
#top .ap-seq__n { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--v4-ink); color: #fff; font-family: var(--v4-display); font-size: 1rem; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
#top .ap-seq h4 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin: 0 0 .6rem; padding-top: .55rem; color: var(--v4-ink); font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.2; }
#top .ap-seq h4 small { color: var(--v4-muted); font-family: var(--v4-text); font-size: .9375rem; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
#top .ap-seq p { margin: 0; }

/* Calendario dei mesi */
#top .ap-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; list-style: none; margin: 1.5rem 0 .75rem; padding: 0; }
#top .ap-months li { margin: 0; padding: 0; text-align: center; }
#top .ap-months b { display: block; height: 40px; margin-bottom: .45rem; border-radius: 8px; background: var(--v4-stone-2); }
#top .ap-months .is-best b { background: var(--c, var(--v4-forest)); }
#top .ap-months .is-ok b { background: color-mix(in srgb, var(--c, var(--v4-forest)) 45%, #fff); }
#top .ap-months .is-care b { background: repeating-linear-gradient(135deg, #e2b48a 0 6px, #ecc9a6 6px 12px); }
#top .ap-months .is-gear b { background: repeating-linear-gradient(135deg, #b9c9d9 0 6px, #d3dfea 6px 12px); }
#top .ap-months span { color: var(--v4-muted); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
#top .ap-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; margin: 0 0 1.75rem; padding: 0; color: var(--v4-muted); font-size: .875rem; }
#top .ap-legend li { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: 0; }
#top .ap-legend i { width: 14px; height: 14px; border-radius: 4px; background: var(--v4-stone-2); }
#top .ap-legend .is-best i { background: var(--c, var(--v4-forest)); }
#top .ap-legend .is-ok i { background: color-mix(in srgb, var(--c, var(--v4-forest)) 45%, #fff); }
#top .ap-legend .is-care i { background: repeating-linear-gradient(135deg, #e2b48a 0 4px, #ecc9a6 4px 8px); }
#top .ap-legend .is-gear i { background: repeating-linear-gradient(135deg, #b9c9d9 0 4px, #d3dfea 4px 8px); }
@media (max-width: 480px) { #top .ap-months span { font-size: .625rem; letter-spacing: 0; } #top .ap-months b { height: 32px; } }

/* Lista dello zaino */
#top .ap-pack { list-style: none; margin: 1.5rem 0 1rem; padding: 0; overflow: hidden; border: 1px solid var(--v4-line); border-radius: 18px; }
#top .ap-pack li { margin: 0; padding: 0; }
#top .ap-pack li + li { border-top: 1px solid var(--v4-line); }
#top .ap-pack li.is-key { background: #f2f7f3; }
#top .ap-pack label { display: grid; grid-template-columns: 26px 1fr; gap: 1rem; align-items: start; margin: 0; padding: 1rem 1.25rem; cursor: pointer; font-weight: 400; transition: background-color 160ms ease; }
#top .ap-pack label:hover { background: rgba(19, 23, 20, .025); }
#top .ap-pack input { appearance: none; -webkit-appearance: none; display: grid; place-items: center; width: 22px; height: 22px; margin: 3px 0 0; border: 1.5px solid #b9b3a9; border-radius: 7px; background: #fff; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease; }
#top .ap-pack input::after { content: ""; width: 11px; height: 6px; border: 2.5px solid #fff; border-top: 0; border-right: 0; opacity: 0; transform: rotate(-45deg) translate(1px, -1px) scale(.6); transition: transform 200ms var(--v4-ease-out), opacity 120ms ease; }
#top .ap-pack input:checked { background: var(--v4-forest); border-color: var(--v4-forest); }
#top .ap-pack input:checked::after { opacity: 1; transform: rotate(-45deg) translate(1px, -1px) scale(1); }
#top .ap-pack strong { display: block; color: var(--v4-ink); font-weight: 600; }
#top .ap-pack small { display: block; margin-top: .15rem; color: var(--v4-muted); font-size: .9375rem; line-height: 1.45; }
#top .ap-pack input:checked + span strong { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--v4-muted) 60%, transparent); color: var(--v4-muted); }
#top .ap-pack-meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0; color: var(--v4-muted); font-size: .9375rem; }
#top .ap-pack-meta button { margin: 0; padding: 0; border: 0; background: none; color: var(--v4-ink); font: inherit; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
#top .ap-pack-meta[hidden] { display: none; }

/* Errori frequenti */
#top .ap-mistakes { display: grid; gap: 1rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
#top .ap-mistakes li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem; margin: 0; padding: 1.35rem 1.5rem; border-radius: 16px; background: #fbf3ec; }
#top .ap-mistakes li::before { content: ""; width: 24px; height: 24px; margin-top: .15rem; background: #a24a1f;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5 2.8 19.5h18.4L12 3.5Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 10v4.5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.2' r='1.1'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5 2.8 19.5h18.4L12 3.5Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 10v4.5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.2' r='1.1'/%3E%3C/svg%3E") center / contain no-repeat; }
#top .ap-mistakes strong { display: block; margin-bottom: .25rem; color: var(--v4-ink); font-size: 1.0625rem; }
#top .ap-mistakes p:empty, #top .ap-mistakes br { display: none; }
#top .ap-mistakes p { margin: 0; }

/* Una cosa sola */
#top .ap-oneline { margin: 0; padding: 0; border: 0; background: none; quotes: none; font-style: normal; }
#top .ap-oneline::before, #top .ap-oneline::after { content: none; }
#top .ap-oneline p { margin: 0 0 1em; color: var(--v4-body); font-size: inherit; line-height: 1.68; }
#top .ap-oneline p:first-child { color: var(--v4-ink); font-family: var(--v4-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; }

/* Riquadro laterale */
#top .ap-caside { position: sticky; top: calc(var(--v4-hh) + 2rem); display: grid; gap: 1rem; }
#top .ap-join { padding: 1.75rem; border-radius: 20px; background: var(--v4-ink); color: var(--v4-on-night); }
#top .ap-join h2 { margin: 0 0 .75rem; color: #fff; font-size: 1.625rem; letter-spacing: -0.025em; line-height: 1.1; }
#top .ap-join p { margin: 0 0 1rem; color: var(--v4-on-night-mute); font-size: 1rem; line-height: 1.5; }
#top .ap-join .ap-btn { width: 100%; }
#top .ap-join .ap-btn + .ap-btn { margin-top: .6rem; }
#top .ap-join ul { display: grid; gap: .65rem; list-style: none; margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .9375rem; }
#top .ap-join li { display: grid; grid-template-columns: 20px 1fr; gap: .65rem; margin: 0; padding: 0; color: var(--v4-on-night); line-height: 1.45; }
#top .ap-join li .ap-icon { width: 18px; height: 18px; margin-top: .15rem; color: #8fd0aa; }
#top .ap-join__done { margin: 1.25rem 0 0 !important; color: #8fd0aa !important; font-size: .9375rem !important; }
#top .ap-join__closed { margin: 1.25rem 0 0 !important; color: #f0b27a !important; font-size: .9375rem !important; }
#top .ap-csafety { padding: 1.35rem 1.5rem; border: 1px solid var(--v4-line); border-radius: 18px; font-size: .9375rem; line-height: 1.5; }
#top .ap-csafety strong { display: block; margin-bottom: .35rem; color: var(--v4-ink); font-family: var(--v4-display); font-size: 1.125rem; letter-spacing: -0.01em; }
#top .ap-csafety p { margin: 0; color: var(--v4-muted); }

@media (max-width: 1180px) {
	#top .ap-cpage { grid-template-columns: minmax(0, 1fr) 320px; }
	#top .ap-ctoc { display: none; }
}
@media (max-width: 900px) {
	#top .ap-cpage { grid-template-columns: 1fr; }
	#top .ap-caside { position: static; }
}

/* Le vette sulla mappa */
#top .ap-detail { padding-block: var(--v4-sec); }
#top .ap-cpeaks__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: 2.5rem; }
#top .ap-cpeaks__title { margin: 0; color: var(--v4-ink); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
#top .ap-cpeaks__lead { max-width: 36rem; margin: 0; color: var(--v4-body); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; }
@media (max-width: 860px) { #top .ap-cpeaks__head { grid-template-columns: 1fr; } }

#top .ap-cprofile { margin: 0 0 2rem; padding: 1.5rem 1.5rem 1rem; border-radius: 18px; background: #fff; }
#top .ap-cprofile svg { display: block; width: 100%; height: auto; overflow: visible; }
#top .ap-cprofile__base { stroke: #cfcac1; stroke-dasharray: 2 4; }
#top .ap-cprofile__fill { fill: color-mix(in srgb, var(--c) 14%, transparent); }
#top .ap-cprofile__ridge { fill: none; stroke: var(--c); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
#top .ap-cprofile__pk circle { fill: #fff; stroke: var(--c); stroke-width: 3; }
#top .ap-cprofile__pk text { fill: var(--v4-ink); font-family: var(--v4-text); font-size: 13px; font-weight: 600; }
#top .ap-cprofile__q { fill: var(--v4-muted) !important; font-weight: 500 !important; font-variant-numeric: tabular-nums; }
#top .ap-cprofile figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin-top: .5rem; color: var(--v4-muted); font-size: .8125rem; }
@media (max-width: 560px) { #top .ap-cprofile__lbl { display: none; } #top .ap-cprofile { padding: 1rem; } }

#top .ap-cpeaks__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
#top .ap-cpeaks__grid--single { grid-template-columns: 1fr; }
#top .ap-cpeaks__list { list-style: none; margin: 0; padding: 0; overflow: hidden; border-radius: 18px; background: #fff; }
#top .ap-cpeaks__list li { display: grid; grid-template-columns: 2.25rem 1fr auto; gap: 1rem; align-items: center; margin: 0; padding: 1rem 1.25rem; }
#top .ap-cpeaks__list li + li { border-top: 1px solid var(--v4-line); }
#top .ap-cpeaks__n { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--c); color: #fff; font-family: var(--v4-display); font-weight: 700; font-variant-numeric: tabular-nums; }
#top .ap-cpeaks__list a { color: var(--v4-ink); font-family: var(--v4-display); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; }
#top .ap-cpeaks__list a:hover { text-decoration: underline; text-underline-offset: .2em; }
#top .ap-cpeaks__alt { color: var(--v4-muted); font-size: .9375rem; font-variant-numeric: tabular-nums; }
#top .ap-cpeaks__map { margin: 0; }
#top .ap-cpeaks__map .ap-map { min-height: 420px; border-radius: 18px; overflow: hidden; }
#top .ap-cpeaks__map figcaption { margin-top: .75rem; color: var(--v4-muted); font-size: .875rem; }
#top .ap-cpeaks__gpx { margin: 2rem 0 0; }
@media (max-width: 860px) { #top .ap-cpeaks__grid { grid-template-columns: 1fr; } #top .ap-cpeaks__map .ap-map { min-height: 320px; } }

/* Altri circuiti */
#top .ap-others { padding-block: clamp(3.5rem, 7vw, 6rem); }
#top .ap-others__title { margin: 0 0 2rem; color: var(--v4-ink); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
#top .ap-others__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
#top .ap-others__grid a { position: relative; isolation: isolate; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 18px; color: #fff; text-decoration: none; background: var(--v4-night); }
#top .ap-others__grid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--ap-focus, center); z-index: -2; transition: transform 900ms var(--v4-ease-out); }
#top .ap-others__grid a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(8, 11, 10, .82)); }
#top .ap-others__grid span { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.1rem; color: rgba(255, 255, 255, .9); font-size: .9375rem; font-variant-numeric: tabular-nums; }
#top .ap-others__grid strong { display: block; color: #fff; font-family: var(--v4-display); font-size: 1.75rem; font-weight: 780; letter-spacing: -0.025em; }
@media (hover: hover) and (pointer: fine) { #top .ap-others__grid a:hover img { transform: scale(1.04); } }
@media (max-width: 760px) { #top .ap-others__grid { grid-template-columns: 1fr; } #top .ap-others__grid a { aspect-ratio: 16 / 9; } }

/* Barra d'azione su telefono */
#top .ap-mbar { display: none; }
@media (max-width: 900px) {
	#top .ap-mbar { position: fixed; z-index: 400; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .75rem; padding: .75rem var(--v4-gutter) calc(.75rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); box-shadow: 0 -1px 0 var(--v4-line); transform: translateY(110%); transition: transform 280ms var(--v4-ease-out); }
	#top .ap-mbar.is-on { transform: none; }
	#top .ap-mbar div { margin-right: auto; color: var(--v4-muted); font-size: .875rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
	#top .ap-mbar strong { display: block; color: var(--v4-ink); font-family: var(--v4-display); font-size: 1.0625rem; }
	#top .ap-mbar .ap-btn { min-height: 46px; padding: 0 1.25rem; }
	#top.ap-has-mbar .ap-footer { padding-bottom: 6rem; }
}

/* ==========================================================================
   9. SCHEDA VETTA E TESTATE DEL PLUGIN
   ========================================================================== */

#top .ap-hero--peak .ap-hero__title,
#top .ap-hero .ap-hero__title { font-family: var(--v4-display); font-weight: 820; letter-spacing: -0.04em; }
#top .ap-hero__eyebrow::before { display: none; }
#top .ap-detail-page .ap-article { padding-top: clamp(3rem, 6vw, 5rem); }

/* Le comparse a ogni scheda del plugin sono spente: il movimento sta solo
   nell'apertura e nel profilo delle vette. */
#top .ap-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ==========================================================================
   10. PIE' DI PAGINA
   ========================================================================== */

#top .ap-footer { padding: clamp(4rem, 8vw, 6rem) 0 2rem; background: var(--v4-night); color: var(--v4-on-night-mute); font-size: .9375rem; --ap-mark-ink: var(--v4-ink); }
#top .ap-footer__inner { width: min(100% - 2 * var(--v4-gutter), var(--v4-wrap)); margin-inline: auto; }
#top .ap-footer a { color: var(--v4-on-night); text-decoration: none; }
#top .ap-footer a:hover { text-decoration: underline; text-underline-offset: .25em; }
#top .ap-footer .ap-brand { margin-bottom: 1.5rem; color: #fff; }
#top .ap-footer__top { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2.5rem; padding-bottom: 3.5rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
#top .ap-footer__motto { max-width: 16ch; margin: 0 0 1rem; color: var(--v4-on-night); font-family: var(--v4-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 760; letter-spacing: -0.025em; line-height: 1.1; }
#top .ap-footer__note { max-width: 40ch; margin: 0; color: var(--v4-on-night-mute); line-height: 1.55; }
#top .ap-footer__heading { margin: 0 0 1rem; color: var(--v4-on-night-mute); font-family: var(--v4-text); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
#top .ap-footer ul { display: grid; gap: .6rem; list-style: none; margin: 0; padding: 0; }
#top .ap-footer li { margin: 0; padding: 0; }
#top .ap-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.75rem; font-size: .875rem; }
#top .ap-footer__sos strong { color: #fff; }
@media (max-width: 860px) {
	#top .ap-footer__top { grid-template-columns: 1fr 1fr; }
	#top .ap-footer__top > :first-child { grid-column: 1 / -1; }
}

/* Enfold: il suo pie' di pagina e la barra in fondo non servono piu'. */
#top #footer, #top #socket, #top #scroll-top-link { display: none !important; }

/* ==========================================================================
   11. MOVIMENTO
   Un solo momento coreografato per pagina: l'apertura della home e il
   profilo delle vette nella scheda circuito.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.js-v4 #top .ap-open .ap-hero-img { animation: v4-settle 1800ms var(--v4-ease-out) both; }
	.js-v4 #top .ap-open__title .ap-line { clip-path: inset(0 0 100% 0); transform: translateY(.35em); animation: v4-line 900ms var(--v4-ease-out) forwards; }
	.js-v4 #top .ap-open__title .ap-line:nth-child(2) { animation-delay: 110ms; }
	.js-v4 #top .ap-open__sub,
	.js-v4 #top .ap-open__actions { opacity: 0; transform: translateY(10px); animation: v4-rise 700ms var(--v4-ease-out) 380ms forwards; }
	.js-v4 #top .ap-open__actions { animation-delay: 460ms; }
	.js-v4 #top .ap-picker__list li { opacity: 0; transform: translateY(14px); animation: v4-rise 700ms var(--v4-ease-out) forwards; animation-delay: calc(560ms + var(--i, 0) * 60ms); }

	.js-v4 #top .ap-cprofile__ridge { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); }
	.js-v4 #top .ap-cprofile__fill, .js-v4 #top .ap-cprofile__pk { opacity: 0; }
	.js-v4 #top .ap-cprofile__pk { transform: translateY(6px); transform-box: fill-box; }
	.js-v4 #top .ap-cprofile.is-in .ap-cprofile__ridge { stroke-dashoffset: 0; transition: stroke-dashoffset 1400ms var(--v4-ease-in-out); }
	.js-v4 #top .ap-cprofile.is-in .ap-cprofile__fill { opacity: 1; transition: opacity 800ms ease 700ms; }
	.js-v4 #top .ap-cprofile.is-in .ap-cprofile__pk { opacity: 1; transform: none; transition: opacity 400ms var(--v4-ease-out), transform 400ms var(--v4-ease-out); }
}
@keyframes v4-settle { from { transform: scale(1.07); filter: saturate(.85); } to { transform: none; filter: none; } }
@keyframes v4-line { to { clip-path: inset(0 0 -.2em 0); transform: none; } }
@keyframes v4-rise { to { opacity: 1; transform: none; } }

/* ==========================================================================
   12. BLOCCHI DELLA SCHEDA DENTRO .ap-prose
   Gli elenchi del testo lungo (style.css, sezione 7) hanno pallini e numeri
   propri: qui li spengo per i blocchi che si disegnano da soli.
   ========================================================================== */

#top .ap-prose .ap-months li,
#top .ap-prose .ap-legend li,
#top .ap-prose .ap-pack li { margin: 0; padding: 0; }
#top .ap-prose .ap-months li::before,
#top .ap-prose .ap-legend li::before,
#top .ap-prose .ap-pack li::before { content: none; display: none; }
#top .ap-prose .ap-pack li + li { border-top: 1px solid var(--v4-line); }

#top .ap-prose .ap-seq > li { margin: 0; padding: 0 0 2rem 4.25rem; }
#top .ap-prose .ap-seq > li::before { content: ""; position: absolute; left: calc(1.5rem - .75px); top: 3rem; bottom: .25rem; width: 1.5px; height: auto; border-radius: 0; background: var(--v4-line); font-size: 0; }
#top .ap-prose .ap-seq > li:last-child::before { display: none; }

#top .ap-prose .ap-mistakes li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem; margin: 0; padding: 1.35rem 1.5rem; }
#top .ap-prose .ap-mistakes li::before { position: static; top: auto; left: auto; width: 24px; height: 24px; border-radius: 0; background: #a24a1f; }

#top .ap-prose .ap-oneline { margin: 0; padding: 0; border: 0; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: 0; }

/* I collegamenti senza classe dentro .ap-main prendono il verde del testo
   (style.css, sezione 6): nei componenti v4 il colore lo decide il componente. */
#top .ap-main .ap-crumbs a { color: inherit; }
#top .ap-main .ap-picker__list a { color: var(--v4-ink); text-decoration: none; }
#top .ap-main .ap-cpeaks__list a { color: var(--v4-ink); }
#top .ap-main .ap-others__grid a { color: #fff; }
#top .ap-main .ap-cprose a:not([class]) { color: var(--v4-forest); }

/* Telefono: il pulsante resta in testata, piu' compatto, accanto al menu */
@media (max-width: 1080px) {
	#top .ap-header .ap-header__cta { display: inline-flex; min-height: 42px; margin-left: 0; padding: 0 1.1rem; font-size: .9375rem; }
	#top .ap-burger { margin-right: -6px; }
}
@media (max-width: 360px) {
	#top .ap-header .ap-header__cta { padding: 0 .85rem; }
	#top .ap-brand__name { font-size: .875rem; letter-spacing: .02em; }
}

/* Niente bordi colorati spessi a sinistra: il fondo tinto basta a separare. */
#top .ap-callout, #top .ap-callout--quiet, #top .ap-safety, #top .ap-note, #top .ap-attempt, #top .ap-peak-circuits a { border-left-width: 1px; }
#top .ap-warning::before { display: none; }
#top .ap-prose blockquote { padding-left: 0; border-left: 0; }
/* Le etichette delle schede ("Quanto costa") reggono il titolo che segue:
   restano, ma come testo semplice, non come pillola maiuscola. */
#top .ap-tag, #top .ap-callout__title { display: block; margin: 0 0 .35rem; padding: 0; border: 0; background: none; color: var(--v4-muted); font-family: var(--v4-text); font-size: .9375rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
#top .ap-hero__eyebrow { letter-spacing: .04em; }
