.guide-page { overflow: clip; }
.guide-page .guide-section { padding-block: var(--space-10); }
.guide-page h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.04; }
.guide-page h3 { font-size: 1.5rem; line-height: 1.05; }
.guide-page a { font-weight: var(--font-weight-semibold); }
.guide-hero { position: relative; overflow: hidden; padding-block: var(--space-7); }
.guide-hero::after, .guide-closing::after { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, transparent 49.5%, rgb(255 255 255 / 10%) 50%, transparent 50.5%), linear-gradient(0deg, transparent 49.5%, rgb(255 255 255 / 8%) 50%, transparent 50.5%); background-size: 280px 280px; content: ""; pointer-events: none; }
.guide-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-9); align-items: center; }
.guide-hero__copy, .guide-hero__media, .guide-map__intro, .guide-map__steps, .guide-sole__intro, .guide-surface__heading, .guide-fit__intro, .guide-material__intro, .guide-scenarios__intro, .guide-routes__intro { min-width: 0; }
.guide-hero__copy { max-width: 35rem; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.guide-hero__copy > * { margin: 0; }
.guide-breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); color: rgb(255 255 255 / 78%); font-size: var(--font-size-sm); }
.guide-hero__signature { color: var(--color-lime); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-label); }
.guide-hero h1 { color: var(--color-white); font-size: clamp(2.5rem, 5.2vw, 4rem); }
.guide-hero__lead { max-width: 34rem; color: var(--color-white); font-size: var(--font-size-lg); line-height: var(--line-height-lg); }
.guide-hero__motto { color: var(--color-lime); font-weight: var(--font-weight-semibold); }
.guide-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.guide-hero__link { color: var(--color-white); text-underline-offset: .2em; }
.guide-hero__media { width: 100%; margin: 0; min-width: 0; height: 33.125rem; border-radius: var(--radius-panel); overflow: hidden; box-shadow: var(--shadow-elevated); }
.guide-hero__media img, .guide-surface__media img, .guide-material__media img { width: 100%; height: 100%; object-fit: cover; }
.guide-hero__media img { object-position: 70% center; }
.guide-map__intro, .guide-fit__intro, .guide-scenarios__intro, .guide-routes__intro { max-width: 42.5rem; margin-inline: auto; text-align: center; }
.guide-map__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-8); }
.guide-step { display: grid; grid-template-columns: 1fr; gap: var(--space-3); min-width: 0; padding-right: var(--space-5); border-right: var(--border-default); }
.guide-step:last-child { padding-right: 0; border-right: 0; }
.guide-step__number, .guide-scenarios__grid > article > span { color: var(--color-pitch); font-family: var(--font-heading); font-size: 3.25rem; font-weight: var(--font-weight-bold); line-height: .85; }
.guide-step h3 { margin-bottom: var(--space-3); }
.guide-step p { max-width: 16.25rem; }
.guide-sole__intro { max-width: 44rem; }
.guide-sole__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.guide-sole-card { display: flex; flex-direction: column; min-width: 0; border: var(--border-default); border-radius: var(--radius-card); overflow: hidden; background: var(--color-white); }
.guide-sole-card__band { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-4); background: var(--color-night); color: var(--color-white); }
.guide-sole-card__band span { color: var(--color-lime); font-family: var(--font-heading); font-size: 3.25rem; font-weight: var(--font-weight-bold); line-height: .8; }
.guide-sole-card__band p { margin: 0; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-label); }
.guide-sole-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-width: 0; padding: var(--space-5); }
.guide-sole-card__body > * { margin: 0; }
.guide-sole-card__body p { max-width: 15.625rem; }
.guide-sole-card__body a { margin-top: auto; }
.guide-sole__note { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--space-4); max-width: 45.625rem; margin: var(--space-7) auto 0; padding: var(--space-4) var(--space-5); border-left: 4px solid var(--color-lime); background: var(--color-ivory); }
.guide-sole__note p { margin: 0; }
.guide-surface { color: var(--color-white); }
.guide-surface__heading { margin-bottom: var(--space-6); }
.guide-surface__layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.guide-surface__media { width: 100%; min-width: 0; margin: 0; }
.guide-surface__media img { aspect-ratio: 16 / 10; border-radius: var(--radius-panel); }
.guide-surface__media figcaption { color: rgb(255 255 255 / 75%); }
.guide-surface__copy { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.guide-surface__copy > * { margin: 0; }
.guide-surface__copy > p { max-width: 25rem; color: var(--color-lime); font-size: var(--font-size-lg); }
.guide-surface__copy article { position: relative; min-width: 0; padding: var(--space-4); border: 1px solid rgb(255 255 255 / 20%); }
.guide-surface__copy article > span { color: var(--color-lime); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-label); }
.guide-surface__copy h3 { color: var(--color-white); margin-top: var(--space-2); }
.guide-surface__copy article p { margin-bottom: 0; }
.guide-fit__warning { max-width: 42.5rem; margin: var(--space-6) auto var(--space-7); padding: var(--space-4) var(--space-5); border-left: 4px solid var(--color-red); background: var(--color-ivory); }
.guide-fit__warning span { display: inline-block; margin-bottom: var(--space-2); color: var(--color-red); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-label); }
.guide-fit__warning p { margin: 0; }
.guide-fit__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.guide-fit__grid article { min-width: 0; padding: var(--space-5); border-top: 3px solid var(--color-pitch); background: var(--color-ivory); }
.guide-fit__grid article p { max-width: 16rem; margin-bottom: 0; }
.guide-material { color: var(--color-white); }
.guide-material__intro { max-width: 43.75rem; margin-bottom: var(--space-7); }
.guide-material__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); align-items: stretch; }
.guide-material__media { width: 100%; min-width: 0; min-height: 37.5rem; margin: 0; overflow: hidden; border-radius: var(--radius-panel); }
.guide-material__media img { object-position: center; }
.guide-material__criteria { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.guide-material__criteria article { min-width: 0; padding: var(--space-5); border: 1px solid rgb(255 255 255 / 24%); }
.guide-material__criteria article:nth-child(2) { background: var(--color-ivory); color: var(--color-charcoal); }
.guide-material__criteria h3 { color: var(--color-white); }
.guide-material__criteria article:nth-child(2) h3 { color: var(--color-charcoal); }
.guide-material__criteria p { max-width: 23.75rem; margin-bottom: 0; }
.guide-material__criteria a { display: inline-block; margin-top: var(--space-4); color: var(--color-lime); }
.guide-scenarios__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.guide-scenarios__grid > article { min-width: 0; padding: var(--space-5); border: var(--border-default); background: var(--color-white); }
.guide-scenarios__grid h3 { margin-top: var(--space-3); }
.guide-scenarios__grid p { max-width: 21rem; margin-bottom: 0; }
.guide-scenarios__attention { border-color: var(--color-night) !important; background: var(--color-night) !important; color: var(--color-white); }
.guide-scenarios__attention > span { color: var(--color-lime) !important; }
.guide-scenarios__attention h3 { color: var(--color-white); }
.guide-check__content { max-width: 45rem; margin-inline: auto; }
.guide-check__list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); padding-left: 0; list-style: none; }
.guide-check__list li { position: relative; min-width: 0; padding-left: var(--space-6); }
.guide-check__list li::before { position: absolute; top: .25rem; left: 0; width: 1rem; height: 1rem; border: 2px solid var(--color-charcoal); background: var(--color-lime); content: ""; }
.guide-check__legal { margin-top: var(--space-7); padding: var(--space-5); border: var(--border-default); background: var(--color-ivory); }
.guide-check__legal h3 { margin-bottom: var(--space-3); }
.guide-check__legal p { max-width: 42.5rem; }
.guide-routes__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.guide-route { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; min-height: 14rem; padding: var(--space-5); border: 2px solid transparent; color: var(--color-white); text-decoration: none; }
.guide-route:hover { border-color: var(--color-charcoal); color: var(--color-white); text-decoration: underline; }
.guide-route span { margin-bottom: auto; color: var(--color-lime); font-family: var(--font-heading); font-size: 3rem; font-weight: var(--font-weight-bold); line-height: .8; }
.guide-route strong { font-family: var(--font-heading); font-size: 2rem; letter-spacing: var(--tracking-heading); line-height: .95; }
.guide-route small { margin-top: var(--space-3); color: rgb(255 255 255 / 82%); }
.guide-route--natural { background: var(--color-pitch); }
.guide-route--synthetic { background: var(--color-night); }
.guide-route--turf { background: #315449; }
.guide-route--futsal { background: var(--color-pitch-deep); }
.guide-closing { position: relative; overflow: hidden; padding-block: var(--space-9); text-align: center; }
.guide-closing .container { position: relative; z-index: 1; }
.guide-closing__content { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); max-width: 40.625rem; margin-inline: auto; }
.guide-closing__content > * { margin: 0; }
.guide-closing__motto { color: var(--color-lime); font-weight: var(--font-weight-bold); }
.guide-closing__content p:not(.guide-closing__motto) { max-width: 35rem; color: var(--color-white); }
.guide-closing__content .btn { margin-top: var(--space-2); }
.guide-ecom-attribute { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); }
@media (max-width: 68.6875rem) { .guide-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); } .guide-hero__copy { max-width: 43rem; } .guide-hero__media { height: 24rem; } .guide-sole__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-surface__layout { grid-template-columns: 1fr; } .guide-surface__copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-surface__copy > p { grid-column: 1 / -1; } .guide-material__layout { grid-template-columns: 1fr; gap: var(--space-6); } .guide-material__media { min-height: 25rem; max-height: 32rem; } .guide-material__criteria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-material__criteria article:last-child { grid-column: 1 / -1; } }
@media (max-width: 61.1875rem) { .guide-map__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-step:nth-child(2) { border-right: 0; padding-right: 0; } .guide-fit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-fit__grid article:last-child { grid-column: 1 / -1; } .guide-fit__grid article:last-child p { max-width: 34rem; } .guide-scenarios__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-scenarios__grid > article:last-child { grid-column: 1 / -1; } .guide-routes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 51.1875rem) { .guide-page .guide-section { padding-block: var(--space-8); } .guide-hero { padding-block: var(--space-6); } .guide-hero__grid { gap: var(--space-5); } .guide-hero__copy { gap: var(--space-3); } .guide-hero__lead { font-size: var(--font-size-base); } .guide-hero__media { height: auto; aspect-ratio: 4 / 5; } .guide-map__steps, .guide-sole__grid, .guide-fit__grid, .guide-material__criteria, .guide-scenarios__grid, .guide-routes__grid { grid-template-columns: 1fr; } .guide-step { grid-template-columns: 3.75rem minmax(0, 1fr); padding: 0 0 var(--space-5); border-right: 0; border-bottom: var(--border-default); } .guide-step:nth-child(2) { padding-right: 0; } .guide-step:last-child { padding-bottom: 0; border-bottom: 0; } .guide-step p, .guide-sole-card__body p, .guide-fit__grid article p, .guide-scenarios__grid p { max-width: none; } .guide-sole__note { grid-template-columns: 1fr; } .guide-surface__copy { grid-template-columns: 1fr; } .guide-surface__copy > p { grid-column: auto; } .guide-material__criteria article:last-child, .guide-scenarios__grid > article:last-child { grid-column: auto; } .guide-material__media { min-height: 0; height: auto; aspect-ratio: 4 / 5; } .guide-route { min-height: 7rem; } .guide-route span { position: absolute; right: var(--space-5); font-size: 2.5rem; } .guide-route { position: relative; } .guide-closing { padding-block: var(--space-8); } .guide-closing__content .btn { width: min(100%, 22.5rem); } }