/*
 * EticaSi 2026 — base: token, tipografia, pulsanti, intestazione a pillola, menu, dock mobile.
 * Identita' di eticasiimmobiliare.it (blu, arancio, Montserrat) in chiave moderna. Mobile-first.
 * Il portale impone colori con !important su p/li/span/label: ogni sezione scura ridefinisce --ink.
 */

body[data-ms-layout="eticasi2026"] {
  --e-blue: #0a6bb5;
  --e-blue-2: #168bd3;
  --e-navy: #07325a;
  --e-navy-2: #0a4577;
  --e-orange: #ed721a;
  --e-orange-d: #c9560a;
  --e-orange-2: #ff8f3d;
  --e-sky: #eaf4fb;
  --e-white: #fff;
  --e-ink: #0b2a45;
  --e-muted: #4c667c;
  --e-line: rgba(10, 107, 181, 0.16);
  --e-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --e-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --e-r: 28px;

  /* Elenco e scheda immobile ereditano i colori della casa. */
  --brand: #0a6bb5;
  --brand-strong: #07325a;
  --brand-2: #07325a;
  --brand-soft: #168bd3;
  --brand-rgb: 10, 107, 181;
  --brand-ghost: #eaf4fb;
  --brand-wash: #f3f9fd;
  --accent: #ed721a;
  --bg: #f3f9fd;
  --surface: #fff;
  --surface-2: #f3f9fd;
  --card: #fff;
  --card-soft: #f3f9fd;
  --line: #d6e6f3;
  --muted: #4c667c;
  --page-bg: linear-gradient(180deg, #f6fbff 0%, #e6f1fa 100%);
  --hero-bg: linear-gradient(180deg, #f6fbff 0%, #e6f1fa 100%);
  --footer-bg: #07325a;
  --shadow-soft: 0 10px 30px rgba(7, 50, 90, 0.08);
  --shadow-strong: 0 18px 44px rgba(7, 50, 90, 0.16);
  --focus-ring: 0 0 0 3px rgba(237, 114, 26, 0.35);
  --text: #0b2a45;
  --ink: #0b2a45;
  --ink-strong: #0b2a45;

  background: #f3f9fd;
  color: var(--e-ink);
  font-family: var(--e-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Sezioni scure/colorate: testo chiaro. */
.e-hero, .e-phero, .e-cta, .e-footer, .e-menu, .e-marquee, .e-office, .e-tile--big, .e-tile--orange,
.e-flip-face, .e-team, .e-svc-col--orange, .e-place--orange, .e-ccard--orange, .e-header .e-pill {
  --ink: #fff;
  --ink-strong: #fff;
}

.e-search, .e-listing, .e-card, .e-acc, .e-checks, .e-quotes blockquote, .e-tile:not(.e-tile--big):not(.e-tile--orange), .e-ccard:not(.e-ccard--orange), .e-place:not(.e-place--orange) {
  --ink: #0b2a45;
  --ink-strong: #0b2a45;
}

body[data-ms-layout="eticasi2026"] .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.e-root { overflow-x: clip; }
.e-wrap { width: min(1200px, 100% - 36px); margin-inline: auto; }
@media (min-width: 720px) { .e-wrap { width: min(1200px, 100% - 64px); } }

.e-ico { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.e-ico--flip { transform: scaleX(-1); }

/* ------------------------------------------------------------ tipografia */
.e-kicker {
  display: inline-block; margin: 0 0 16px; padding: 7px 14px; border-radius: 999px;
  background: rgba(237, 114, 26, 0.12); font: 700 0.72rem/1 var(--e-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--e-orange);
}
.e-kicker--light { background: rgba(255, 255, 255, 0.14); color: #fff; }

.e-display { margin: 0 0 22px; font: 800 clamp(2.7rem, 1rem + 9vw, 6.8rem) / 0.98 var(--e-sans); letter-spacing: -0.035em; color: #fff; }
.e-display--page { font-size: clamp(2.2rem, 1rem + 5.6vw, 4.8rem); }
.e-h2 { margin: 0 0 18px; font: 800 clamp(1.8rem, 1rem + 3.4vw, 3.2rem) / 1.08 var(--e-sans); letter-spacing: -0.025em; color: var(--e-navy); }
.e-h2--light { color: #fff; }
.e-lead { margin: 0; max-width: 40rem; font: 500 clamp(1.02rem, 0.95rem + 0.5vw, 1.25rem) / 1.65 var(--e-sans); color: rgba(255, 255, 255, 0.9); }
.e-copy { margin: 0 0 22px; max-width: 34rem; font: 500 1.02rem / 1.75 var(--e-sans); color: var(--e-muted); }

.e-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; }
.e-w > span { display: inline-block; }
.e-js [data-split]:not(.is-in) .e-w > span { transform: translateY(110%); }
.e-js [data-split] .e-w > span { transition: transform 0.9s var(--e-ease); transition-delay: calc(var(--d, 0ms) + var(--w, 0) * 70ms); }

.e-js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--e-ease), transform 0.8s var(--e-ease); transition-delay: var(--d, 0ms); }
.e-js [data-reveal="zoom"] { transform: scale(0.92); }
.e-js [data-reveal].is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ pulsanti */
.e-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 2px solid transparent; border-radius: 999px;
  font: 700 0.95rem/1 var(--e-sans); text-decoration: none; cursor: pointer; transition: transform 0.35s var(--e-ease), box-shadow 0.35s, background 0.3s; will-change: transform;
}
.e-btn .e-ico { transition: transform 0.35s var(--e-ease); }
.e-btn:hover .e-ico { transform: translateX(4px); }
.e-btn--orange { background: var(--e-orange-d); color: #fff; box-shadow: 0 10px 26px rgba(237, 114, 26, 0.38); }
.e-btn--orange:hover { background: #b34c07; }
.e-btn--blue { background: var(--e-blue); color: #fff; box-shadow: 0 10px 26px rgba(10, 107, 181, 0.32); }
.e-btn--ghost { border-color: rgba(255, 255, 255, 0.6); color: #fff; background: rgba(255, 255, 255, 0.08); }
.e-btn--ghost:hover { background: rgba(255, 255, 255, 0.2); }
.e-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.e-center { display: flex; justify-content: center; margin-top: 28px; }
.e-link { display: inline-flex; align-items: center; gap: 8px; font: 700 0.95rem/1 var(--e-sans); color: var(--e-blue); text-decoration: none; }
.e-link--light { color: #fff; }
.e-link:hover .e-ico { transform: translateX(5px); }
.e-link .e-ico { transition: transform 0.3s var(--e-ease); }

/* ------------------------------------------------------------ intestazione: pillola flottante */
.e-header { position: fixed; z-index: 60; top: 12px; left: 0; right: 0; padding: 0 12px; pointer-events: none; }
.e-pill {
  pointer-events: auto; display: flex; align-items: center; gap: 14px; width: min(1160px, 100%); margin: 0 auto; padding: 8px 10px 8px 14px; border-radius: 999px;
  background: rgba(7, 50, 90, 0.82); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 12px 34px rgba(7, 50, 90, 0.28); transition: background 0.4s, transform 0.5s var(--e-ease);
}
.e-header.is-scrolled .e-pill { background: rgba(7, 50, 90, 0.94); }
.e-brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; }
.e-brand-mark { width: 38px; height: 38px; }
.e-brand-text { display: flex; flex-direction: column; line-height: 1; }
.e-brand-text b { font: 800 1.05rem/1 var(--e-sans); color: #fff; }
.e-brand-text i { margin-top: 3px; font: 600 0.7rem/1 var(--e-sans); font-style: normal; letter-spacing: 0.12em; color: #8cc8f0; }
.e-nav { display: none; }
.e-nav a { padding: 10px 14px; border-radius: 999px; font: 600 0.88rem/1 var(--e-sans); color: #fff; text-decoration: none; transition: background 0.3s; }
.e-nav a:hover { background: rgba(255, 255, 255, 0.14); }
.e-nav a.is-active { background: var(--e-orange-d); }
.e-call { display: none; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; font: 700 0.88rem/1 var(--e-sans); color: var(--e-navy); text-decoration: none; }
.e-burger { position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--e-orange-d); cursor: pointer; }
.e-burger i { position: absolute; left: 13px; width: 18px; height: 2px; border-radius: 2px; background: #fff; transition: transform 0.4s var(--e-ease), top 0.4s var(--e-ease); }
.e-burger i:first-child { top: 17px; }
.e-burger i:last-child { top: 25px; }
.e-burger[aria-expanded="true"] i:first-child { top: 21px; transform: rotate(45deg); }
.e-burger[aria-expanded="true"] i:last-child { top: 21px; transform: rotate(-45deg); }
.e-progress { position: absolute; left: 50%; bottom: -6px; width: min(1160px, 100% - 40px); height: 3px; transform: translateX(-50%); border-radius: 3px; overflow: hidden; }
.e-progress i { display: block; height: 100%; background: var(--e-orange); transform: scaleX(0); transform-origin: left; }

@media (min-width: 1040px) {
  .e-header { top: 18px; }
  .e-nav { display: flex; gap: 2px; }
  .e-call { display: inline-flex; }
  .e-burger { display: none; }
}

/* menu a tendina a schermo intero (mobile) */
.e-menu {
  position: fixed; z-index: 55; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 96px 28px 120px; background: var(--e-navy);
  clip-path: circle(0 at calc(100% - 40px) 40px); transition: clip-path 0.7s var(--e-ease);
}
.e-menu.is-open { clip-path: circle(150% at calc(100% - 40px) 40px); }
.e-menu[hidden] { display: none; }
.e-menu-nav { display: flex; flex-direction: column; gap: 4px; }
.e-menu-nav a { padding: 6px 0; font: 800 clamp(2rem, 9vw, 3rem) / 1.1 var(--e-sans); letter-spacing: -0.02em; color: #fff; text-decoration: none; }
.e-menu-nav a:hover { color: var(--e-orange); }
.e-menu-foot { margin: 28px 0 0; font: 500 1rem/1.6 var(--e-sans); color: #8cc8f0; }
.e-menu-foot a { color: #fff; font-weight: 700; }
body.e-menu-open { overflow: hidden; }

/* dock mobile: azioni rapide sempre a portata di pollice */
.e-dock {
  position: fixed; z-index: 58; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 6px; padding: 6px;
  border-radius: 999px; background: rgba(7, 50, 90, 0.94); backdrop-filter: blur(14px); box-shadow: 0 12px 32px rgba(7, 50, 90, 0.4);
}
.e-dock a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; border-radius: 999px; font: 700 0.8rem/1 var(--e-sans); color: #fff; text-decoration: none; }
.e-dock a.is-main { background: var(--e-orange-d); }
body.e-menu-open .e-dock { display: none; }
@media (min-width: 1040px) { .e-dock { display: none; } }
@media (max-width: 1039px) { body[data-ms-layout="eticasi2026"] { padding-bottom: 84px; } }

/* ------------------------------------------------------------ hero */
.e-hero { position: relative; isolation: isolate; clip-path: inset(0 0 -90px 0); padding: 120px 0 56px; background: linear-gradient(135deg, var(--e-blue) 0%, var(--e-navy) 100%); }
@media (min-width: 900px) { .e-hero { padding: 140px 0 150px; } }
.e-hero-inner { position: relative; z-index: 2; }
.e-orb { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.e-orb--a { top: -18%; right: -12%; width: min(60vw, 720px); aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #ff9a4d, var(--e-orange) 55%, #c9560a); opacity: 0.95; animation: e-float 12s ease-in-out infinite; }
.e-orb--b { bottom: -30%; left: -10%; width: min(50vw, 560px); aspect-ratio: 1; background: radial-gradient(circle, rgba(22, 139, 211, 0.7), transparent 68%); animation: e-float 15s ease-in-out infinite reverse; }
@keyframes e-float { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-3%, 4%, 0) scale(1.05); } }
.e-ring { position: absolute; z-index: 1; top: 108px; right: 5%; display: none; width: 190px; height: 190px; }
.e-ring svg { width: 100%; height: 100%; animation: e-spin 28s linear infinite; }
.e-ring text { font: 700 13.5px var(--e-sans); letter-spacing: 3px; text-transform: uppercase; fill: #fff; }
.e-ring b { position: absolute; inset: 50%; width: 76px; height: 76px; margin: -38px; display: grid; place-items: center; border-radius: 50%; background: #fff; font: 800 3.4rem/1 var(--e-sans); color: var(--e-orange); padding-bottom: 8px; }
@keyframes e-spin { to { transform: rotate(360deg); } }
@media (min-width: 900px) { .e-ring { display: block; } }
.e-hero-search { position: relative; z-index: 3; margin-top: 34px; }
@media (min-width: 900px) { .e-hero-search { position: absolute; left: 0; right: 0; bottom: -52px; margin: 0 auto; } }