/* ================================================================
   eFact Têxtil — base visual editável
   Altere cores, fontes e espaçamentos neste arquivo.
   ================================================================ */

@font-face { font-family: "DM Sans"; src: url("../assets/fonts/dm-sans-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../assets/fonts/dm-sans-500.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../assets/fonts/dm-sans-600.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../assets/fonts/dm-sans-700.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --blue: #001c71;
  --blue-2: #0a1f8f;
  --blue-3: #1226aa;
  --green: #00c4b3;
  --green-2: #19d3c5;
  --green-soft: #6bdad5;
  --ink: #07162d;
  --ink-2: #30435b;
  --surface: #ffffff;
  --surface-2: #f3f6f8;
  --surface-3: #e8eef2;
  --line: #d7e1e7;
  --line-strong: #b8c8d1;
  --danger: #ef4f5f;
  --warning: #f0a52b;
  --success: #00a693;
  --header-height: 80px;
  --container: 1240px;
  --shadow-soft: 0 18px 60px rgba(5, 24, 55, 0.12);
  --shadow-panel: 0 24px 80px rgba(0, 15, 54, 0.2);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

html[data-theme="dark"] {
  --ink: #edf6f8;
  --ink-2: #a9bcc8;
  --surface: #071425;
  --surface-2: #0a1b30;
  --surface-3: #10263d;
  --line: rgba(169, 205, 215, 0.18);
  --line-strong: rgba(169, 205, 215, 0.32);
  --shadow-soft: 0 18px 60px rgba(0, 0, 0, 0.28);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 20px); }
body { margin: 0; font-family: "DM Sans", Arial, sans-serif; color: var(--ink); background: var(--surface); line-height: 1.55; text-rendering: optimizeLegibility; overflow-x: hidden; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -0.04em; line-height: 1.02; }
h2 { max-width: 850px; font-size: clamp(2.35rem, 5vw, 4.75rem); margin-bottom: 1.2rem; }
h3 { font-size: clamp(1.25rem, 2.3vw, 2rem); }
p { color: var(--ink-2); }

.skip-link { position: fixed; top: 8px; left: 8px; z-index: 9999; transform: translateY(-150%); padding: 10px 14px; color: #fff; background: var(--blue); border: 2px solid var(--green); }
.skip-link:focus { transform: translateY(0); }
.container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
.section { position: relative; padding: 120px 0; }
.section-light { background: #f8fafb; color: #07162d; }
.section-mist { background: #eaf0f3; color: #07162d; }
.section-control { background: radial-gradient(circle at 65% 10%, #0b2d57 0, #071a32 35%, #031020 100%); color: #eff8fa; }
.section-light p, .section-mist p { color: #536579; }
.section-control p { color: #9eb5c2; }

.section-heading { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 36px; margin-bottom: 52px; align-items: start; }
.section-heading > div > p:last-child { max-width: 720px; font-size: 1.06rem; }
.section-heading.light h2 { color: #fff; }
.section-index { padding-top: 10px; color: var(--green) !important; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--green) !important; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.eyebrow > span:first-child:empty { width: 24px; height: 2px; background: var(--green); }
.demo-note { margin: 18px 0 0; text-align: right; font-size: 0.75rem; opacity: 0.72; }

.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 22px; border: 1px solid transparent; font-weight: 700; font-size: 0.9rem; transition: transform 160ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease); }
.button:hover { transform: translateY(-2px); }
.button:active { transform: scale(0.97); }
.button-primary { color: #001643; background: var(--green); box-shadow: 0 12px 36px rgba(0, 196, 179, 0.24); }
.button-primary:hover { background: var(--green-2); }
.button-outline { color: #fff; border-color: rgba(255, 255, 255, 0.35); background: rgba(0, 19, 45, 0.25); }
.button-outline:hover { border-color: var(--green); background: rgba(0, 196, 179, 0.08); }
.button.full { width: 100%; }
.small-button { min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); color: inherit; background: transparent; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; transition: 180ms var(--ease); }
.small-button:hover, .small-button.active { color: #001643; border-color: var(--green); background: var(--green); }

/* Cabeçalho fixo e estável */
.site-header { position: fixed; inset: 0 0 auto; z-index: 1000; width: 100%; height: var(--header-height); color: #eef8fa; background: rgba(3, 16, 32, 0.96); border-bottom: 1px solid rgba(25, 211, 197, 0.25); backdrop-filter: blur(16px); }
.header-inner { width: min(1440px, calc(100% - 48px)); height: 100%; margin-inline: auto; display: flex; align-items: center; gap: 34px; }
.brand { flex: 0 0 auto; display: flex; align-items: center; height: 44px; }
.brand img { width: 116px; height: 44px; object-fit: contain; }
.desktop-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.desktop-nav a { position: relative; color: #bacbd3; font-size: 0.78rem; font-weight: 600; white-space: nowrap; transition: color 180ms var(--ease); }
.desktop-nav a::after { content: ""; position: absolute; right: 0; bottom: -12px; left: 0; height: 2px; transform: scaleX(0); background: var(--green); transition: transform 180ms var(--ease); }
.desktop-nav a:hover, .desktop-nav a.active { color: #fff; }
.desktop-nav a:hover::after, .desktop-nav a.active::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-button, .language-button, .mobile-menu-button { min-width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; background: rgba(255, 255, 255, 0.04); }
.icon-button:hover, .language-button:hover { border-color: var(--green); }
.icon-button { display: grid; place-items: center; font-size: 1.15rem; }
.language-control { position: relative; }
.language-button { min-width: 112px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; font-size: 0.78rem; font-weight: 700; }
.language-menu { position: absolute; top: 50px; right: 0; width: 174px; padding: 7px; border: 1px solid rgba(25, 211, 197, 0.35); background: #06172c; box-shadow: var(--shadow-panel); }
.language-menu button { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: 0; color: #c9d7dc; background: transparent; text-align: left; }
.language-menu button:hover, .language-menu button[aria-selected="true"] { color: #fff; background: rgba(0, 196, 179, 0.12); }
.flag { position: relative; flex: 0 0 auto; display: inline-block; width: 25px; height: 17px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 2px; }
.flag-br { background: #159447; }
.flag-br::before { content: ""; position: absolute; inset: 2px 4px; background: #f8d434; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.flag-br::after { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%); border-radius: 50%; background: #153c8b; }
.flag-us { background: repeating-linear-gradient(to bottom, #c93b4a 0 2px, #fff 2px 4px); }
.flag-us::before { content: ""; position: absolute; top: 0; left: 0; width: 11px; height: 9px; background: #24478e; }
.flag-es { background: linear-gradient(to bottom, #b61e2f 0 25%, #f1c33a 25% 75%, #b61e2f 75%); }
.header-cta { min-height: 42px; padding-inline: 18px; font-size: 0.78rem; }
.mobile-menu-button { display: none; place-content: center; gap: 4px; }
.mobile-menu-button span { display: block; width: 18px; height: 2px; background: #fff; }
.mobile-nav { position: absolute; top: var(--header-height); left: 0; width: 100%; padding: 18px 24px 24px; background: #06172c; border-bottom: 1px solid rgba(25, 211, 197, 0.3); }
.mobile-nav a { display: block; padding: 13px 0; color: #d5e2e7; border-bottom: 1px solid rgba(255,255,255,.08); }
.mobile-nav .button { margin-top: 14px; color: #001643; border: 0; }

/* Hero */
.hero { position: relative; min-height: 920px; padding-top: var(--header-height); display: grid; align-items: center; overflow: hidden; color: #fff; background: #031020; }
.hero-image, .hero-overlay, .hero-grid { position: absolute; inset: var(--header-height) 0 0; width: 100%; height: calc(100% - var(--header-height)); }
.hero-image { object-fit: cover; object-position: center; opacity: 0.72; }
.hero-overlay { background: linear-gradient(90deg, rgba(2, 16, 32, 0.98) 0%, rgba(2, 16, 32, 0.9) 34%, rgba(2, 16, 32, 0.32) 70%, rgba(2, 16, 32, 0.64) 100%), linear-gradient(0deg, #031020 0%, transparent 24%); }
.hero-grid { opacity: 0.16; background-image: linear-gradient(rgba(25, 211, 197, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(25, 211, 197, .22) 1px, transparent 1px); background-size: 76px 76px; mask-image: linear-gradient(90deg, transparent, #000 55%, #000); }
.hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, .85fr); align-items: center; gap: 40px; padding-block: 90px; }
.hero-copy { max-width: 680px; }
.hero h1 { margin-bottom: 26px; font-size: clamp(3.5rem, 6.2vw, 6.7rem); font-weight: 500; }
.hero h1 em { display: block; color: var(--green); font-style: normal; }
.hero-description { max-width: 570px; margin-bottom: 30px; color: #b8c9d0; font-size: clamp(1rem, 1.35vw, 1.18rem); }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-trust { position: relative; max-width: 560px; margin: 26px 0 0; padding-left: 22px; color: #91aab6; font-size: 0.78rem; }
.hero-trust::before { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 13px; border: 1px solid var(--green); border-radius: 6px 6px 8px 8px; }
.hero-live-layer { position: relative; min-height: 590px; }
.hero-live-layer::before { content: ""; position: absolute; inset: 6% 2% 8% 0; border-radius: 50%; border: 1px solid rgba(0, 196, 179, 0.38); box-shadow: inset 0 0 80px rgba(0,196,179,.05), 0 0 50px rgba(0,196,179,.06); transform: rotate(-14deg); }
.floating-card { position: absolute; width: 250px; padding: 17px 18px; border: 1px solid rgba(25, 211, 197, 0.38); color: #fff; background: rgba(3, 18, 38, 0.86); box-shadow: 0 18px 50px rgba(0,0,0,.25); backdrop-filter: blur(10px); animation: card-float 5s ease-in-out infinite alternate; }
.floating-card small { display: block; margin-bottom: 8px; color: #76909e; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; }
.floating-card strong { display: block; font-size: 0.9rem; }
.floating-card b { color: var(--green); }
.floating-card .progress { display: block; height: 2px; margin-top: 14px; background: rgba(255,255,255,.14); }
.floating-card .progress i { display: block; height: 100%; background: var(--green); }
.card-op { top: 17%; left: 4%; }
.card-plan { top: 33%; right: 0; animation-delay: -.8s; }
.card-cell { bottom: 23%; left: 18%; animation-delay: -1.5s; }
.card-rfid { right: 4%; bottom: 6%; animation-delay: -2.1s; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(0,196,179,.12), 0 0 18px var(--green); }
@keyframes card-float { to { transform: translateY(-9px); } }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 650ms var(--ease), transform 650ms var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }

:focus-visible { outline: 3px solid var(--green-2); outline-offset: 3px; }
::selection { color: #001643; background: var(--green-soft); }