/* Immobiliare Nazioni Unite – stile proprio sopra la struttura di JOY (sito.css) */
.avviso-anteprima { background: var(--notte); color: #cfd6e4; }
.avviso-anteprima b { color: var(--giallo); }
.barra-fissa { background: color-mix(in srgb, var(--crema) 90%, transparent); }
.marchio { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.marchio img { width: 58px; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(14, 31, 61, .08); }
.marchio span { display: grid; line-height: 1.05; font: 600 1.05rem var(--serif); letter-spacing: -.01em; }
.marchio small { font: 600 .66rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rosso); margin-top: .2rem; }
@media (max-width: 600px) { .marchio img { width: 46px; } .marchio span { font-size: .95rem; } }

/* ---------- APERTURA: la nostra agenzia (fissa, senza effetti di scorrimento) ---------- */
.apertura.apertura-fissa { height: auto; }
.apertura-fissa .scena { position: relative; height: auto; min-height: min(100svh, 940px); display: flex; align-items: center; overflow: hidden; padding: calc(76px + clamp(2rem, 6svh, 4rem)) 0 clamp(3rem, 8svh, 5rem); background: radial-gradient(80% 90% at 15% 30%, #fff17a 0%, var(--giallo) 55%, #f2cc00 100%); color: var(--inchiostro); }
.ap-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ap-testo .occhiello { color: var(--inchiostro); letter-spacing: .26em; animation: compare .8s .1s both; }
.apertura-fissa h1 { color: var(--inchiostro); font-size: clamp(2.8rem, 5.6vw, 5.4rem); max-width: 12ch; margin-top: 1rem; opacity: 1; animation: compare .9s .2s both; }
.apertura-fissa h1 em { color: var(--rosso); }
.ap-sotto { margin-top: 1.3rem; max-width: 32rem; font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: rgba(14, 31, 61, .82); animation: compare .9s .35s both; }
.ap-testo .azioni { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; animation: compare .9s .45s both; }
.apertura-fissa .btn-vetro { color: var(--inchiostro); border-color: rgba(14, 31, 61, .35); background: rgba(255, 255, 255, .45); }
.ap-dove { display: flex; align-items: center; gap: .55rem; margin-top: 1.8rem; font-size: .95rem; color: rgba(14, 31, 61, .8); animation: compare .9s .55s both; }
.ap-dove svg { width: 1.2rem; height: 1.2rem; color: var(--rosso); flex-shrink: 0; }
.ap-foto { position: relative; height: min(76svh, 680px); }
.ap-foto figure { position: absolute; margin: 0; overflow: hidden; border-radius: 26px; box-shadow: 0 40px 70px -35px rgba(60, 40, 0, .6); }
.ap-foto img { width: 100%; height: 100%; object-fit: cover; }
.f-vetrina { top: 0; right: 0; width: 66%; height: 88%; animation: compare 1s .2s both; }
.f-vetrina img { object-position: 49% 60%; }
.f-interno { left: 0; bottom: 0; width: 58%; aspect-ratio: 4 / 3; border: 6px solid #fff8c9; animation: compare 1s .45s both; }
.f-interno figcaption { position: absolute; left: .8rem; bottom: .8rem; padding: .4rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: .8rem; font-weight: 700; color: var(--inchiostro); }
@media (max-width: 900px) {
  .ap-griglia { grid-template-columns: 1fr; }
  .ap-foto { height: auto; aspect-ratio: 4 / 4.2; margin-top: .5rem; }
}
@media (max-width: 760px) {
  .apertura-fissa .scena { padding-top: calc(66px + 1.8rem); min-height: 0; }
  .apertura-fissa h1 { font-size: clamp(2.5rem, 11vw, 3.3rem); }
  .ap-testo .azioni .btn { flex: 1 1 100%; }
  .f-interno { border-width: 4px; }
}
@media (prefers-reduced-motion: reduce) { .apertura-fissa *, .ap-foto figure { animation: none !important; } }

/* piccoli segni: il mondo del logo */
.tettino { width: 13px; height: 13px; border-radius: 50%; clip-path: none; background: radial-gradient(circle at 35% 35%, #8cc4f2, var(--blu) 60%, #1b4f86); box-shadow: 0 0 0 2px var(--inchiostro); }
.tettino.chiaro { background: var(--giallo); box-shadow: none; }
.fascia { background: var(--giallo); }
.fascia i { width: 8px; height: 8px; border-radius: 50%; background: var(--rosso); flex: none; }
.fascia span { color: var(--inchiostro); }

/* vendita / affitto */
.bollino .contratto.vendita { background: var(--inchiostro); color: #fff; }
.bollino .contratto.affitto { background: var(--blu); color: #fff; }
.bollino .nuovo { background: var(--giallo); color: var(--inchiostro); }
.filtri .scelta + .scelta { margin-left: 0; }
.filtro select:disabled { color: var(--tenue); cursor: not-allowed; }
.portali { margin-top: 1.6rem; color: var(--tenue); font-size: .95rem; }
.portali a { color: var(--inchiostro); font-weight: 600; }
.carta-codice { font: 600 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }

/* territorio */
.territorio { background: radial-gradient(110% 80% at 80% 45%, #fff6c4 0%, var(--crema) 62%); }
.francobollo { border-color: var(--blu); background: var(--giallo); }
.cartolina figcaption small { color: var(--blu); }

/* motto */
.motto { background: var(--giallo); padding: clamp(4rem, 9vw, 7rem) 0; overflow: hidden; }
.motto-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.motto img { width: clamp(150px, 22vw, 280px); border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(80, 60, 0, .55); transform: rotate(-4deg); }
.motto blockquote { margin: 0; }
.motto blockquote p { font: 400 clamp(2.1rem, 5vw, 4.4rem)/1.02 var(--serif); letter-spacing: -.03em; color: var(--inchiostro); }
.motto blockquote em { color: var(--rosso); }
.motto footer { margin-top: 1.2rem; font: 600 .8rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--inchiostro); }
@media (max-width: 700px) { .motto-in { grid-template-columns: 1fr; } .motto img { width: 150px; } }

/* cosa facciamo: casetta con il tetto */
.casetta::before { background: var(--rosso); }
.servizi-tutti { margin-top: 2.2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: .6rem; padding: 0; list-style: none; }
.servizi-tutti li { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r-ctrl); padding: .85rem 1rem; font-size: .96rem; display: flex; gap: .6rem; align-items: baseline; }
.servizi-tutti li::before { content: '✓'; color: var(--rosso); font-weight: 700; }

/* valutazione su blu notte */
.vendi .occhiello { color: var(--giallo); }
.vendi .titolo-sezione em { color: var(--giallo); }
.vendi-sfondo img { opacity: .3; }
.vendi-sfondo::after { background: linear-gradient(110deg, rgba(8, 18, 38, .96) 20%, rgba(8, 18, 38, .74)); }
.passi li > span { border-color: rgba(254, 226, 20, .6); color: var(--giallo); }
.avanzamento span { background: var(--rosso); }
.pillole input:checked + span { background: var(--inchiostro); border-color: var(--inchiostro); }

/* sedi */
.sedi { display: grid; gap: .9rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.sedi li { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r-card); padding: 1.1rem 1.2rem; display: grid; gap: .25rem; position: relative; }
.sedi li.tua { border-color: var(--rosso); box-shadow: 0 0 0 1px var(--rosso); }
.sedi b { font: 500 1.25rem var(--serif); }
.sedi .num-sede { position: absolute; right: 1rem; top: .9rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--giallo); display: grid; place-items: center; font: 600 1rem var(--serif); }
.sedi a { font-weight: 600; text-decoration: none; }
.sedi a:hover { color: var(--rosso); }
.sedi small { color: var(--tenue); }

/* chiusura, contatti, piede */
.chiusura-tetto path { stroke: var(--rosso); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 7 9 !important; stroke-dashoffset: 0 !important; }
.chiusura h2 em { color: var(--rosso); }
.mappa-copri .targa img { width: 120px; }
.piede { background: var(--notte); }
.piede-col h3 { color: var(--giallo); }
.piede-marchio img { width: 120px; border-radius: 14px; }
.targa { display: inline-block; }
.chiusura-logo { width: 84px; height: 84px; margin: 0 auto 1.2rem; border-radius: 50%; box-shadow: 0 0 0 3px var(--inchiostro), 0 14px 30px -12px rgba(14, 31, 61, .5); }

/* mutuo */
.mutuo { background: linear-gradient(180deg, var(--crema), #fff9d6); }
.mutuo-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 2rem 4rem; align-items: center; }
.mutuo-carta { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r-card); padding: clamp(1.2rem, 3vw, 2rem); box-shadow: var(--ombra); margin: 0; }
.mutuo-carta #m-prezzo { font: 500 1.4rem var(--serif); }
@media (max-width: 860px) { .mutuo-in { grid-template-columns: 1fr; } }
.mutuo .occhiello { margin-bottom: 1rem; } .mutuo .titolo-sezione { margin-bottom: 1.3rem; }

/* intro: video di presentazione a tutto schermo, una volta per visita */
.intro-video { display: none; }
.con-intro body { overflow: hidden; }
.con-intro .intro-video { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--giallo); transition: opacity .7s ease, transform .7s cubic-bezier(.7, 0, .2, 1); }
.intro-video video { height: 100%; max-height: 100svh; width: auto; max-width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--giallo); }
.intro-video.via { opacity: 0; transform: scale(1.04); pointer-events: none; }
.intro-salta { position: absolute; right: clamp(1rem, 3vw, 2rem); top: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-top)); display: inline-flex; align-items: center; gap: .35rem; padding: .7rem 1rem .7rem 1.2rem; border: 0; border-radius: 999px; background: var(--inchiostro); color: #fff; font: 600 .95rem/1 inherit; font-family: inherit; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(14, 31, 61, .5); transition: transform .2s; }
.intro-salta:hover { transform: translateY(-2px); }
.intro-salta svg { width: 1.1rem; height: 1.1rem; }
.intro-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(14, 31, 61, .12); }
.intro-barra b { display: block; height: 100%; background: var(--rosso); transform: scaleX(0); transform-origin: left; transition: transform .25s linear; }
@media (min-width: 761px) {
  .con-intro .intro-video { background: radial-gradient(42% 70% at 50% 48%, #fde016 0%, #f6d417 55%, #e6c11b 100%); }
  .intro-video video { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
}
@media (max-width: 760px) { .intro-video video { width: 100%; height: 100%; } }
.intro-play { position: absolute; left: 50%; top: 80%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .6rem; padding: 1.1rem 1.6rem 1.1rem 1.3rem; border: 0; border-radius: 999px; background: var(--rosso); color: #fff; font: 700 1.1rem/1 inherit; font-family: inherit; cursor: pointer; box-shadow: 0 18px 40px -12px rgba(150, 26, 34, .6); }
.intro-play[hidden] { display: none; }
.intro-play svg { width: 1.6rem; height: 1.6rem; }