/* Iron Lanes, portale — direzione grafica "Campo" (approvata da CHR il 21/10/2026). */

@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonti/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonti/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonti/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonti/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonti/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

:root {
	color-scheme: dark;
	--fondo: #12140F;
	--fondo-2: #1A1D16;
	--campo: #0C0E09;
	--linea: #2E3228;
	--linea-forte: #4A4F40;
	--testo: #E9E6DC;
	--testo-2: #C9C6BA;
	--tenue: #B9B6AA;
	--tenue-2: #A3A396;
	--accento: #D9A441;
	--accento-chiaro: #F0C068;
	--errore-bordo: #C2563F;
	--errore-fondo: #2A1712;
	--errore-testo: #F4B4A3;
	--avviso-bordo: #8A6A2A;
	--avviso-fondo: #241E10;
	--avviso-testo: #EBD3A0;
	--condensato: "Barlow Condensed", "Arial Narrow", sans-serif;
	--margine: clamp(16px, 4vw, 40px);
	--spazio-sezione: clamp(56px, 8vw, 104px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--fondo);
	color: var(--testo);
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.55;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accento); }
a:hover { color: var(--accento-chiaro); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }

.salta { position: absolute; left: -9999px; }
.salta:focus { left: 16px; top: 8px; z-index: 10; background: var(--accento); color: var(--fondo); padding: 8px 14px; border-radius: 4px; }

.contenitore { max-width: 1240px; margin: 0 auto; padding-left: var(--margine); padding-right: var(--margine); }
.sezione { padding-top: var(--spazio-sezione); padding-bottom: var(--spazio-sezione); }
.sezione-alt { background: var(--fondo-2); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.pila { display: flex; flex-direction: column; gap: 36px; }
.solo-sopra { padding-top: var(--spazio-sezione); }
.link-forte { font-weight: 600; text-decoration: none; }

.etichetta { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accento); }
.etichetta-tenue { color: var(--tenue-2); }
.titolo-pagina, .titolo-sezione { font-family: var(--condensato); font-weight: 700; text-transform: uppercase; line-height: 1; }
.titolo-pagina { font-size: clamp(36px, 4.4vw, 56px); }
.titolo-sezione { font-size: clamp(34px, 4vw, 52px); }
.titolo-scheda { font-family: var(--condensato); font-weight: 600; font-size: 26px; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.1; }
.testo-tenue { color: var(--tenue); }
.piccolo { font-size: 14px; color: var(--tenue-2); }
.intestazione { display: flex; flex-direction: column; gap: 8px; }
.intestazione-riga { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.intestazione-riga > p { max-width: 440px; color: var(--tenue); }

/* Pulsanti */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 18px; border-radius: 4px; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid var(--linea-forte); background: transparent; color: var(--testo); }
.btn:hover { color: #fff; border-color: #6A6F5E; }
.btn-primario { background: var(--accento); border-color: var(--accento); color: var(--fondo); font-weight: 700; letter-spacing: 0.02em; }
.btn-primario:hover { background: var(--accento-chiaro); border-color: var(--accento-chiaro); color: var(--fondo); }
.btn-contorno { border-color: var(--accento); color: var(--accento); }
.btn-contorno:hover { color: var(--accento-chiaro); border-color: var(--accento-chiaro); }
.btn-grande { min-height: 52px; padding: 14px 28px; font-size: 17px; }
.btn-pieno { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: wait; }

/* Testata */
.testata { position: relative; z-index: 5; border-bottom: 1px solid var(--linea); background: var(--fondo); }
.testata .contenitore { height: 68px; display: flex; align-items: center; gap: 28px; }
.marchio { display: flex; align-items: center; gap: 10px; color: var(--testo); text-decoration: none; }
.marchio:hover { color: #fff; }
.marchio span { font-family: var(--condensato); font-weight: 700; font-size: 24px; letter-spacing: 0.08em; }
.menu { display: flex; align-items: center; gap: 24px; font-size: 15px; font-weight: 500; }
.menu a { color: var(--testo-2); text-decoration: none; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--accento); }
.presto { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fondo); background: var(--tenue-2); padding: 1px 6px; border-radius: 3px; margin-left: 6px; }
.riempi { flex: 1; }
.azioni { display: flex; align-items: center; gap: 14px; }
.lingua { font-size: 14px; color: var(--tenue-2); text-decoration: none; }
.lingua strong { color: var(--testo-2); font-weight: 600; }
.giocatore svg { flex: none; }
.menu-telefono { display: none; position: relative; }
.menu-telefono summary { list-style: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--linea-forte); border-radius: 4px; cursor: pointer; color: var(--testo); }
.menu-telefono summary::-webkit-details-marker { display: none; }
.menu-telefono .tendina { position: absolute; right: 0; top: 52px; width: min(300px, calc(100vw - 32px)); background: var(--fondo-2); border: 1px solid var(--linea-forte); border-radius: 6px; padding: 8px; display: flex; flex-direction: column; }
.menu-telefono .tendina a { padding: 12px 12px; color: var(--testo); text-decoration: none; border-radius: 4px; }
.menu-telefono .tendina a:hover { background: var(--linea); }
.menu-telefono hr { border: 0; border-top: 1px solid var(--linea); margin: 6px 0; width: 100%; }
.solo-telefono { display: none; }

@media (max-width: 860px) {
	.menu, .azioni .solo-desktop { display: none; }
	.menu-telefono, .solo-telefono { display: block; }
	.testata .contenitore { gap: 12px; }
}

/* Apertura della pagina principale */
.apertura { position: relative; overflow: hidden; border-bottom: 1px solid var(--linea); min-height: 520px; height: min(78vh, 720px); display: flex; align-items: flex-end; }
.apertura > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.apertura::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,20,15,0.92) 0%, rgba(18,20,15,0.75) 38%, rgba(18,20,15,0.05) 75%); }
.apertura .contenitore { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(32px, 6vw, 72px); }
.apertura-testo { max-width: 620px; display: flex; flex-direction: column; gap: 20px; }
.stato { display: flex; align-items: center; gap: 10px; }
.stato::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accento); }
.apertura h1 { font-family: var(--condensato); font-weight: 700; font-size: clamp(42px, 6.4vw, 82px); line-height: 0.98; text-transform: uppercase; }
.apertura-testo > p { font-size: clamp(17px, 1.6vw, 20px); color: #D3D0C4; max-width: 540px; }
.apertura .piccolo { font-size: 14px; }
.bottoni { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-vetro { border-color: #8A8C7E; background: rgba(18,20,15,0.4); }
@media (max-width: 700px) {
	.apertura { height: auto; min-height: 0; flex-direction: column; align-items: stretch; }
	.apertura > img { position: static; aspect-ratio: 16 / 10; height: auto; }
	.apertura::after { display: none; }
	.apertura .contenitore { padding-top: 28px; }
}

/* Pilastri */
.pilastri { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.pilastro { background: var(--fondo); padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; }
.pilastro p { color: var(--tenue); }

/* Mezzi */
.griglia-mezzi { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.mezzo { background: var(--fondo); border: 1px solid var(--linea); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.mezzo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mezzo-corpo { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 14px; }
.mezzo-titolo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mezzo-titolo h3 { font-family: var(--condensato); font-weight: 700; font-size: 30px; text-transform: uppercase; }
.mezzo-titolo span { font-size: 13px; font-weight: 600; color: var(--tenue-2); text-transform: uppercase; letter-spacing: 0.08em; text-align: right; }
.dati { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 15px; }
.dati dt { color: var(--tenue-2); }
.dati dd { margin: 0; overflow-wrap: anywhere; }

/* Mappe */
.griglia-mappe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 24px; }
.mappa { position: relative; border-radius: 6px; overflow: hidden; min-height: 360px; display: flex; align-items: flex-end; }
.mappa-grande { grid-column: 1 / -1; min-height: 420px; }
.mappa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mappa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18,20,15,0.95) 0%, rgba(18,20,15,0.15) 65%); }
.mappa-testo { position: relative; z-index: 1; padding: 28px; display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.mappa-testo h3 { font-family: var(--condensato); font-weight: 700; font-size: 32px; text-transform: uppercase; line-height: 1; }
.mappa-grande .mappa-testo h3 { font-size: 40px; }
.mappa-testo p { color: #D3D0C4; }
.mappa-testo .etichetta { letter-spacing: 0.1em; }

/* Come si gioca */
.passi { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
.passi li { display: flex; flex-direction: column; gap: 10px; border-top: 2px solid var(--accento); padding-top: 18px; }
.passi .numero { font-family: var(--condensato); font-weight: 700; font-size: 20px; color: var(--accento); }
.passi h3 { font-size: 19px; font-weight: 600; }
.passi p { color: var(--tenue); font-size: 16px; }

/* Riquadri "in preparazione" */
.riquadro-futuro { border: 1px dashed var(--linea-forte); border-radius: 6px; padding: clamp(24px, 4vw, 40px); display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.riquadro-futuro > div { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.riquadro-futuro h2 { font-family: var(--condensato); font-weight: 700; font-size: 34px; text-transform: uppercase; line-height: 1; }
.riquadro-futuro p { color: var(--tenue); }

/* Notizie */
.griglia-notizie { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px 24px; }
.notizia-scheda { border-top: 1px solid var(--linea); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.notizia-scheda h3 { font-size: 21px; font-weight: 600; line-height: 1.25; }
.notizia-scheda h3 a { color: var(--testo); text-decoration: none; }
.notizia-scheda h3 a:hover { color: var(--accento); }
.notizia-scheda p { color: var(--tenue); font-size: 16px; }
.meta { display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--tenue-2); }
.meta .tipo { color: var(--accento); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }
.articolo { max-width: 760px; display: flex; flex-direction: column; gap: 22px; }
.articolo h1 { font-family: var(--condensato); font-weight: 700; font-size: clamp(36px, 4.4vw, 52px); line-height: 1.02; text-transform: uppercase; }
.articolo .sommario { font-size: 20px; color: var(--testo-2); }
.articolo img { border-radius: 6px; border: 1px solid var(--linea); }
.articolo-testo { display: flex; flex-direction: column; gap: 16px; color: var(--testo-2); font-size: 18px; line-height: 1.65; }
.indietro { font-weight: 600; text-decoration: none; }

/* Requisiti e piè di pagina */
.requisiti { border-top: 1px solid var(--linea); background: var(--fondo-2); }
.requisiti .contenitore { padding-top: 32px; padding-bottom: 32px; display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; }
.requisiti h2 { font-family: var(--condensato); font-weight: 600; font-size: 22px; text-transform: uppercase; letter-spacing: 0.04em; }
.requisiti p { color: var(--tenue); flex: 1 1 520px; }
.piede { border-top: 1px solid var(--linea); }
.piede .contenitore { padding-top: 40px; padding-bottom: 48px; display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: flex-start; justify-content: space-between; }
.piede .marchio-testo { font-family: var(--condensato); font-weight: 700; font-size: 22px; letter-spacing: 0.08em; }
.piede-chi { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.piede nav { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 15px; }
.piede nav a { color: var(--testo-2); text-decoration: none; }
.piede nav a:hover { color: var(--accento); }
.piede .legale { font-size: 13px; color: #8A8C7E; flex-basis: 100%; }

/* Pagine interne */
.pagina { padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(48px, 7vw, 96px); display: flex; flex-direction: column; gap: 32px; }
.colonne { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.colonna-larga { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.colonna-stretta { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.pannello { background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 6px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.pannello h2 { font-family: var(--condensato); font-weight: 600; font-size: 24px; text-transform: uppercase; }
.separatore { height: 1px; background: var(--linea); }
.riga-bottoni { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.vetrina { position: relative; border-radius: 6px; overflow: hidden; min-height: 300px; display: flex; align-items: flex-end; }
.vetrina img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vetrina::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18,20,15,0.95) 0%, rgba(18,20,15,0.3) 70%); }
.vetrina-testo { position: relative; z-index: 1; padding: 28px; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; width: 100%; }
.vetrina-testo h2 { font-family: var(--condensato); font-weight: 700; font-size: 32px; text-transform: uppercase; line-height: 1; }
.vetrina-testo p { color: #D3D0C4; max-width: 460px; }

/* Moduli */
.accesso { display: flex; flex-wrap: wrap; align-items: stretch; min-height: calc(100vh - 69px); }
.accesso-foto { flex: 1 1 520px; position: relative; min-height: 640px; display: flex; align-items: flex-end; }
.accesso-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.accesso-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18,20,15,0.92) 0%, rgba(18,20,15,0.1) 55%); }
.accesso-foto > div { position: relative; z-index: 1; padding: 40px clamp(24px, 4vw, 56px); display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.accesso-foto .frase { font-family: var(--condensato); font-weight: 700; font-size: 38px; line-height: 1.02; text-transform: uppercase; }
.accesso-foto p { color: var(--testo-2); }
.accesso-modulo { flex: 1 1 380px; display: flex; justify-content: center; align-items: flex-start; padding: clamp(28px, 6vw, 72px) var(--margine); }
.accesso-modulo > div { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 860px) { .accesso-foto { display: none; } }
.schede { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--linea-forte); border-radius: 4px; padding: 3px; gap: 3px; }
.schede button { min-height: 42px; font: inherit; font-size: 15px; font-weight: 600; border: none; border-radius: 3px; cursor: pointer; background: transparent; color: var(--tenue-2); }
.schede button[aria-selected="true"] { background: var(--linea); color: var(--testo); }
.modulo { display: flex; flex-direction: column; gap: 18px; }
.modulo h1 { font-family: var(--condensato); font-weight: 700; font-size: 36px; text-transform: uppercase; line-height: 1; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label, .campo .etichetta-campo { font-size: 14px; font-weight: 600; color: var(--testo-2); }
.campo-riga { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.campo-riga a { font-size: 14px; }
.campo input { height: 48px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--testo); background: var(--campo); border: 1px solid var(--linea-forte); border-radius: 4px; width: 100%; }
.campo input[aria-invalid="true"] { border-color: var(--errore-bordo); }
.aiuto { font-size: 14px; color: var(--tenue-2); }
.errore-campo { font-size: 14px; color: var(--errore-testo); }
.spunta { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--testo-2); cursor: pointer; }
.spunta input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accento); flex: none; }
.avviso { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 4px; font-size: 15px; border: 1px solid; }
.avviso-errore { border-color: var(--errore-bordo); background: var(--errore-fondo); color: var(--errore-testo); }
.avviso-attenzione { border-color: var(--avviso-bordo); background: var(--avviso-fondo); color: var(--avviso-testo); }
.avviso .btn { align-self: flex-start; }
.icona-posta { color: var(--accento); }

/* Striscia sopra le pagine in preparazione */
.striscia { background: var(--avviso-fondo); border-bottom: 1px solid var(--avviso-bordo); color: var(--avviso-testo); font-size: 14px; }
.striscia .contenitore { padding-top: 10px; padding-bottom: 10px; }

/* Documenti (privacy) */
.documento { display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: flex-start; }
.indice { flex: 1 1 240px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; border-left: 2px solid var(--linea); padding-left: 16px; }
.indice a { color: var(--testo-2); text-decoration: none; padding: 2px 0; }
.indice a:hover { color: var(--accento); }
.documento article { flex: 999 1 560px; min-width: 0; max-width: 720px; display: flex; flex-direction: column; gap: 28px; }
.documento section { display: flex; flex-direction: column; gap: 8px; color: var(--testo-2); }
.documento section h2 { font-family: var(--condensato); font-weight: 600; font-size: 26px; text-transform: uppercase; color: var(--testo); }
.documento ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.documento .riquadro { padding: 20px; background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 6px; }

/* Contatti */
.griglia-contatti { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.griglia-contatti .pannello p { color: var(--tenue); font-size: 15px; }
.griglia-contatti a { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.elenco { margin: 0; padding-left: 20px; color: var(--testo-2); display: flex; flex-direction: column; gap: 4px; }