/* ----------------------------------------- */
/* WIDEPORCH — pagina del gelo */
/* apertura a tutta larghezza, schema della parete, tabella di confronto */
/* ----------------------------------------- */

.gelo-apertura { position: relative; min-height: 420px; display: flex; align-items: flex-end; overflow: hidden }
.gelo-apertura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.gelo-apertura:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,10,17,.55) 0%, rgba(4,10,17,.92) 78%) }
.gelo-apertura__testo { position: relative; z-index: 2; width: 100%; padding: 120px 0 34px }
.gelo-apertura .sottotitolo { color: var(--oro); margin-bottom: 12px }
.gelo-apertura h1 { font-size: 3.2rem; line-height: 1.08; max-width: 18ch }
.gelo-apertura .guida { max-width: 62ch; margin-top: 16px; font-size: 1.55rem; line-height: 1.8; opacity: .88 }

.gelo-sezione { padding: 44px 0 10px }
.gelo-due { display: grid; gap: 28px }
.gelo-due h2 { margin-bottom: 14px }
.gelo-due p { font-size: 1.55rem; line-height: 1.85; margin-bottom: 14px; opacity: .86 }
.gelo-due .sotto-nota { font-size: 1.3rem; opacity: .6; margin-bottom: 0 }

.gelo-schema svg { width: 100%; height: auto }
.gelo-schema .parete { fill: #12253d; stroke: #ed6502; stroke-width: 1.5 }
.gelo-schema .parete.tenera { stroke: #6a6660 }
.gelo-schema .poro { fill: #040a11; stroke: #f7b829; stroke-width: 1.2 }
.gelo-schema .cavita { fill: #040a11; stroke: #9a938c; stroke-width: 1.2 }
.gelo-schema .scaglia { fill: none; stroke: #ec3900; stroke-width: 2; stroke-linecap: round }
.gelo-schema .eti { fill: #c9c4be; font-family: Jost, sans-serif; font-size: 11px; letter-spacing: .08em; text-transform: uppercase }
.gelo-schema .eti.piccola { fill: #8d877f; font-size: 9.5px }

.gelo-confronto { background: var(--fondo-alt); margin-top: 34px; padding: 40px 0 44px }
.tabella-gelo { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 1.45rem }
.tabella-gelo th {
    text-align: left;
    padding: 0 12px 10px 0;
    border-bottom: 1px solid var(--bordo-grigio);
    font-size: 1.2rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--oro);
}
.tabella-gelo td { padding: 14px 12px 14px 0; border-bottom: 1px solid #12253d; line-height: 1.6; vertical-align: top }
.tabella-gelo td:first-child { opacity: .7; width: 34% }
.tabella-gelo td.nostro { color: #fff; font-weight: 600 }
.nota-tabella { margin-top: 20px; font-size: 1.35rem; line-height: 1.8; opacity: .62; max-width: 76ch }

.gelo-regole { padding: 44px 0 10px }
.regole-griglia { display: grid; gap: 18px; margin-top: 22px }
.regola { border-top: 2px solid var(--arancio); padding-top: 16px }
.regola .numero { color: var(--arancio); font-size: 1.4rem; font-weight: 600; letter-spacing: .1em }
.regola h3 { font-size: 1.9rem; margin: 6px 0 8px }
.regola p { font-size: 1.45rem; line-height: 1.75; opacity: .82 }

.gelo-garanzia { display: grid; gap: 26px; padding: 46px 0 10px }
.garanzia-testo p { font-size: 1.55rem; line-height: 1.85; margin-top: 14px; opacity: .86 }
.garanzia-testo a { text-decoration: underline }
.garanzia-testo a:hover { color: var(--arancio) }
.garanzia-foto img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover }

@media only screen and (min-width: 768px) {
    .gelo-apertura { min-height: 560px }
    .gelo-apertura__testo { padding: 180px 0 52px }
    .gelo-apertura h1 { font-size: 5.2rem }
    .gelo-sezione { padding: 64px 0 10px }
    .gelo-due { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center }
    .gelo-confronto { margin-top: 56px; padding: 62px 0 66px }
    .tabella-gelo { font-size: 1.6rem }
    .regole-griglia { grid-template-columns: 1fr 1fr; gap: 30px 40px }
    .gelo-regole { padding: 64px 0 10px }
    .gelo-garanzia { grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; padding: 64px 0 10px }
}