/* ----------------------------------------- */
/* WIDEPORCH — trasporto su pallet */
/* quattro tappe in fila, poi il bancale visto dall'alto */
/* ----------------------------------------- */

.pallet-testa { padding: 112px 0 28px }
.pallet-testa .sottotitolo { color: var(--oro); margin-bottom: 10px }
.pallet-testa h1 { font-size: 2.9rem; line-height: 1.14; max-width: 20ch }
.pallet-testa .guida { margin-top: 16px; max-width: 64ch; font-size: 1.5rem; line-height: 1.8; opacity: .84 }

.pallet-percorso { display: grid; gap: 2px; padding: 24px 0 10px; background: #12253d }
.tappa { background: var(--colore-fondo); padding: 24px 20px 26px }
.tappa .segna {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--arancio);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 12px;
}
.tappa h2 { font-size: 1.9rem; margin-bottom: 8px }
.tappa p { font-size: 1.45rem; line-height: 1.75; opacity: .84 }

.pallet-bancale { background: var(--fondo-alt); margin-top: 34px; padding: 40px 0 44px }
.pallet-bancale__griglia { display: grid; gap: 30px; align-items: center }
.pallet-bancale h2 { margin-bottom: 14px }
.pallet-bancale p { font-size: 1.55rem; line-height: 1.85; margin-bottom: 14px; opacity: .86 }
.numeri-bancale { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px }
.numeri-bancale div { border-top: 1px solid var(--bordo-grigio); padding-top: 10px }
.numeri-bancale b { display: block; font-size: 1.9rem; font-weight: 600; color: var(--oro); line-height: 1.2 }
.numeri-bancale span { font-size: 1.2rem; opacity: .68 }

.bancale-schema svg { width: 100%; height: auto }
.bancale-schema .legno { fill: #1b1610; stroke: #6a6660; stroke-width: 1.5 }
.bancale-schema .asse { stroke: #6a6660; stroke-width: 1; opacity: .7 }
.bancale-schema .grande { fill: #33200f; stroke: #ed6502; stroke-width: 1.8 }
.bancale-schema .piccolo { fill: #33200f; stroke: #f7b829; stroke-width: 1.5 }
.bancale-schema .eti { fill: #c9c4be; font-family: Jost, sans-serif; font-size: 11px; letter-spacing: .1em; text-transform: uppercase }
.bancale-schema .eti.piccola { fill: #8d877f; font-size: 9.5px; letter-spacing: .04em }

.pallet-costi { padding: 44px 0 10px }
.tabella-zone { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 1.5rem }
.tabella-zone th {
    text-align: left;
    padding: 0 14px 10px 0;
    border-bottom: 1px solid var(--bordo-grigio);
    font-size: 1.15rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--oro);
}
.tabella-zone td { padding: 15px 14px 15px 0; border-bottom: 1px solid #12253d }
.tabella-zone td.prezzo { color: #fff; font-weight: 600; white-space: nowrap }
.nota-costi { margin-top: 18px; font-size: 1.35rem; line-height: 1.8; opacity: .62; max-width: 76ch }

.pallet-controllo { background: var(--fondo-blu); margin-top: 40px; padding: 40px 0 46px }
.pallet-controllo__griglia { display: grid; gap: 28px }
.controllo-foto img { width: 100%; aspect-ratio: 7 / 6; object-fit: cover }
.controllo-testo h2 { margin-bottom: 16px }
.lista-controllo { display: grid; gap: 12px }
.lista-controllo li {
    position: relative;
    padding-left: 26px;
    font-size: 1.5rem;
    line-height: 1.75;
    opacity: .88;
}
.lista-controllo li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--arancio);
    border-bottom: 2px solid var(--arancio);
    transform: rotate(-45deg);
}
.controllo-coda { margin-top: 18px; font-size: 1.45rem; line-height: 1.8; opacity: .82 }
.controllo-coda b { color: var(--oro) }

@media only screen and (min-width: 768px) {
    .pallet-testa { padding: 156px 0 36px }
    .pallet-testa h1 { font-size: 4.2rem }
    .pallet-percorso { grid-template-columns: repeat(4, 1fr); padding: 36px 0 10px }
    .tappa { padding: 28px 24px 32px }
    .pallet-bancale { margin-top: 52px; padding: 64px 0 68px }
    .pallet-bancale__griglia { grid-template-columns: 1.15fr 0.85fr; gap: 56px }
    .pallet-costi { padding: 64px 0 10px }
    .pallet-controllo { margin-top: 56px; padding: 64px 0 70px }
    .pallet-controllo__griglia { grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center }
}