:root {
    --rosso: #d7182a;
    --rosso-scuro: #b01222;
    --rosa: #fbecec;
    --testo: #1d1d1f;
    --tenue: #6b6b70;
    --linea: #e4e1e1;
    --fondo: #ffffff;
    --titoli: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--testo);
    font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

main, .testata, .piede { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

h1, h2 { font-family: var(--titoli); font-weight: 700; line-height: 1.1; margin: 0 0 16px; letter-spacing: -0.01em; }
h1 { font-size: clamp(40px, 7vw, 68px); }
h2 { font-size: clamp(28px, 4vw, 36px); }
a { color: var(--rosso); }
.rosso { color: var(--rosso); }

.occhiello {
    margin: 0 0 10px;
    color: var(--rosso);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.testata { display: flex; justify-content: flex-end; padding-top: 16px; }
.testata img { width: 150px; height: auto; }

/* Apertura */
.apertura {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 24px 0 48px;
}
.sottotitolo { font-size: 19px; color: var(--tenue); max-width: 30em; }
.copertina {
    width: 100%;
    max-width: 380px;
    height: auto;
    justify-self: center;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 24px 48px -12px rgba(120, 20, 30, .28);
    transform: rotate(2deg);
}
.copertina.piccola { max-width: 200px; display: block; margin: 8px auto 32px; }

/* Modulo */
.modulo {
    background: var(--rosa);
    border-radius: 16px;
    padding: 36px;
    max-width: 640px;
    margin: 0 auto 64px;
}
.modulo > p { margin: 0 0 24px; }
form label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 14px; }
form input[type=text], form input[type=email] {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 14px 16px;
    font: inherit;
    font-weight: 400;
    border: 1px solid var(--linea);
    border-radius: 10px;
    background: #fff;
    color: var(--testo);
}
form input:focus { outline: 2px solid var(--rosso); outline-offset: 1px; border-color: transparent; }
.spunta { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.spunta input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--rosso); }
.nascosto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.errore { color: var(--rosso-scuro); font-size: 14px; font-weight: 600; margin: -8px 0 14px; }

.bottone {
    display: inline-block;
    margin-top: 8px;
    padding: 16px 28px;
    background: var(--rosso);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s;
}
.bottone:hover { background: var(--rosso-scuro); }
form .bottone { width: 100%; font-size: 18px; }
.bottone.secondario { background: var(--testo); }

/* Cosa trovi dentro */
.dentro { max-width: 720px; margin: 0 auto 72px; }
.dentro ol { list-style: none; counter-reset: n; padding: 0; margin: 0; }
.dentro li {
    counter-increment: n;
    position: relative;
    padding: 18px 0 18px 64px;
    border-bottom: 1px solid var(--linea);
}
.dentro li::before {
    content: counter(n);
    position: absolute;
    left: 0;
    top: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--rosso);
    color: #fff;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.dentro strong { display: block; font-size: 18px; }
.dentro span { color: var(--tenue); }

/* Storia */
.storia {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 72px;
}
.storia img { width: 100%; height: auto; border-radius: 16px; }
.firma { font-family: var(--titoli); font-style: italic; font-size: 34px; color: var(--rosso); margin: 8px 0; }

/* Grazie */
.grazie { max-width: 600px; text-align: center; padding-bottom: 48px; }
.nota { color: var(--tenue); font-size: 14px; }
.riquadro { background: var(--rosa); border-radius: 16px; padding: 28px; margin-top: 40px; }



@media (max-width: 760px) {
    body { font-size: 16px; }
    main, .testata, .piede { padding: 0 16px; }
    .testata { justify-content: center; }
    .apertura, .storia { grid-template-columns: 1fr; gap: 28px; text-align: left; }
    .apertura { padding-top: 8px; }
    .copertina { max-width: 240px; order: -1; }
    .modulo { padding: 24px 20px; margin-left: -4px; margin-right: -4px; }
    .storia img { max-width: 320px; justify-self: center; }
}

/* Chi sono, metodo, voci */
.storia h2, .metodo h2 { margin-bottom: 20px; }
.metodo {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 72px;
}
.metodo img { order: 2; width: 100%; height: auto; border-radius: 16px; }
.voci { margin-bottom: 72px; }
.voci h2 { margin-bottom: 28px; }
.griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.voci blockquote {
    margin: 0;
    padding: 24px 24px 20px;
    background: var(--rosa);
    border-left: 4px solid var(--rosso);
    border-radius: 4px 16px 16px 4px;
    font-family: var(--titoli);
    font-style: italic;
    font-size: 19px;
    line-height: 1.45;
}
.voci cite { display: block; margin-top: 12px; font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--tenue); font-style: normal; }
.chiusura { text-align: center; max-width: 620px; margin: 0 auto 72px; }
.chiusura .nota { margin-top: 20px; }

@media (max-width: 760px) {
    .metodo, .griglia { grid-template-columns: 1fr; gap: 24px; }
    .metodo img { order: -1; max-width: 320px; justify-self: center; }
    .voci blockquote { font-size: 17px; }
}

/* Chi sono in apertura */
.storia.in-cima { padding-top: 16px; }
.storia h1 { font-size: clamp(34px, 5vw, 52px); }
.titolo-guida { font-size: clamp(40px, 7vw, 68px); }
.apertura { border-top: 1px solid var(--linea); padding-top: 56px; }

/* Piede e pagine legali */
.legale { max-width: 760px; padding-top: 16px; padding-bottom: 64px; }
.legale h1 { font-size: clamp(34px, 5vw, 48px); }
.legale h2 { font-size: 24px; margin: 40px 0 12px; }
.legale h3 { font-size: 18px; margin: 28px 0 8px; font-family: inherit; }
.legale .data { color: var(--tenue); font-size: 15px; }
.legale .base { font-size: 15px; color: var(--tenue); }
.legale table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 12px 0; }
.legale th, .legale td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--linea); }
.legale th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); }
.legale td { overflow-wrap: anywhere; }

/* Piede */
.piede { max-width: none; margin-top: 24px; padding: 48px 20px 28px; background: #1d1d1f; color: #c9c9cc; font-size: 15px; }
.piede-colonne { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1.3fr 1fr; gap: 32px; }
.piede-marchio img { width: 150px; height: auto; background: #fff; border-radius: 12px; padding: 8px 12px; }
.piede-marchio p { margin: 14px 0 0; max-width: 24em; line-height: 1.5; }
.piede-titolo { margin: 0 0 10px; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.piede ul { list-style: none; margin: 0; padding: 0; }
.piede li { margin-bottom: 8px; }
.piede a { color: #c9c9cc; text-decoration: none; overflow-wrap: anywhere; }
.piede a:hover { color: #fff; text-decoration: underline; }
.piede-dati { max-width: 1040px; margin: 36px auto 0; padding-top: 20px; border-top: 1px solid #3a3a3e; font-size: 13px; color: #8e8e93; }
@media (max-width: 760px) {
    .piede { padding: 40px 16px 24px; }
    .piede-colonne { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
    .piede-marchio { grid-column: 1 / -1; }
}

/* Anteprima Instagram (immagini nostre, niente contenuti di Meta: nessun cookie) */
.instagram { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin: 24px auto 72px; }
.ig-scheda { display: block; background: #fff; border: 1px solid var(--linea); border-radius: 18px; padding: 16px; color: var(--testo); text-decoration: none; box-shadow: 0 20px 40px -24px rgba(120, 20, 30, .25); transition: transform .2s; }
.ig-scheda:hover { transform: translateY(-3px); }
.ig-testa { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ig-avatar { width: 56px; height: 56px; border-radius: 50%; padding: 2px; background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); }
.ig-nome { margin: 0; font-weight: 700; font-size: 16px; }
.ig-bio { margin: 0; color: var(--tenue); font-size: 14px; }
.ig-segui { margin-left: auto; background: var(--rosso); color: #fff; font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 8px; }
.ig-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-radius: 10px; overflow: hidden; }
.ig-griglia img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
@media (max-width: 760px) {
    .instagram { grid-template-columns: 1fr; gap: 28px; }
    .ig-testo { order: -1; }
}
.instagram > * { min-width: 0; }