﻿* { box-sizing: border-box; }
:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #173a32; background: #f6f7f2; }
body { margin: 0; }
.pagina { max-width: 1600px; margin: auto; padding: 0 6%; }
header { min-height: 120px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid #dce3da; }
.marchio { display: flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; font-size: 31px; font-weight: 650; letter-spacing: -1px; }
.simbolo { width: 34px; height: 34px; border: 1px solid #5b8072; border-radius: 50%; display: grid; place-items: center; }
.simbolo i { width: 14px; height: 14px; border-radius: 50%; background: #315f4f; }
.firma { align-self: flex-end; font-size: 9px; letter-spacing: 2px; margin: 0 0 6px 3px; color: #61776a; }
.intestazione { font-size: 13px; color: #637568; }
main { padding: 83px 0 65px; }
.etichetta { font-size: 10px; letter-spacing: 2px; font-weight: 650; display: flex; align-items: center; gap: 12px; }
.etichetta span { width: 26px; height: 1px; background: #6c806e; }
h1 { font-size: clamp(38px,5vw,70px); font-weight: 500; letter-spacing: -2.8px; line-height: 1.09; margin: 28px 0 24px; }
.introduzione { font-size: 17px; line-height: 1.85; color: #617065; max-width: 740px; }
.stato { display: inline-flex; gap: 10px; align-items: center; border: 1px solid #d6decc; background: #eef1e6; border-radius: 30px; padding: 11px 17px; font-size: 12px; margin-top: 15px; }
.indicatore { width: 6px; height: 6px; background: #7c8860; border-radius: 50%; }
.aree { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 32px; margin-top: 75px; }
article { border-top: 1px solid #cbd6c8; padding-top: 22px; }
.numero { color: #637960; font-size: 11px; letter-spacing: 1px; }
h2 { font-size: 18px; font-weight: 550; margin: 20px 0 10px; }
article p { color: #627066; font-size: 13px; line-height: 1.8; max-width: 260px; }
footer { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #dce3da; padding: 25px 0 30px; color: #627066; font-size: 11px; }
a:focus-visible { outline: 2px solid #315f4f; outline-offset: 6px; }
@media(max-width:800px) { .aree { grid-template-columns: repeat(2,minmax(0,1fr)); } main { padding-top: 58px; } }
@media(max-width:480px) { header { min-height: 90px; } .intestazione { display: none; } h1 { letter-spacing: -1.5px; } .introduzione { font-size: 15px; } .introduzione br { display: none; } .aree { gap: 24px; margin-top: 48px; } footer { flex-direction: column; gap: 8px; } }
