@font-face {
  font-family: Geist;
  src: url("geist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --accent: #c89174;
  --bg: #111c27;
  --panel: #172a35;
  --line: #304650;
  --text: #f2f0eb;
  --muted: #b4c0c4;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 Geist, Arial, Helvetica, sans-serif;
}
a { color: inherit; text-decoration: none; }
button, textarea { font: inherit; }
button, summary { cursor: pointer; }
button { color: inherit; }
[hidden] { display: none !important; }
.wrap { width: min(1200px, 90%); margin-inline: auto; }
.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  transform: translateY(-180%);
  z-index: 20;
  padding: 10px 16px;
  background: #f2f0eb;
  color: #111c27;
}
.skip-link:focus { transform: none; }
header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #111c27f5;
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 96px;
  gap: 25px;
}
.navlinks { display: flex; gap: 28px; align-items: center; font-size: 14px; }
.aditux-logo { display: block; width: 90px; height: 79px; color: #dba88b; flex-shrink: 0; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 1px solid var(--line);
  padding: 13px 23px;
  border-radius: 2px;
  font-weight: 600;
  background: transparent;
  color: var(--text);
}
.primary { background: linear-gradient(115deg, #e4b69b, #bf886b); border-color: #d8a68a; color: #111c27; }
.app-access { white-space: nowrap; }
.theme { border: 1px solid var(--line); border-radius: 50%; background: none; width: 35px; height: 35px; padding: 0; flex-shrink: 0; }
.eyebrow { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #deb59a; font-weight: 700; }
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; padding: 66px 0 72px; }
.hero > *, .flow > *, .roadmap > * { min-width: 0; }
h1 { font-size: clamp(37px, 4.1vw, 59px); font-weight: 400; letter-spacing: -2px; line-height: 1.12; margin: 24px 0; }
h1 span { color: #dba88b; }
.hero .eyebrow { max-width: 400px; line-height: 1.9; }
.english-tagline { color: var(--muted); font-size: 15px; }
.lead { color: var(--muted); font-size: 18px; max-width: 530px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.note { font-size: 12px; color: var(--muted); margin-top: 20px; }
.brand-visual { background: var(--panel); display: flex; align-items: center; justify-content: center; padding: 44px; aspect-ratio: 1.2; border: 1px solid var(--line); border-radius: 4px; }
.brand-visual .aditux-logo { width: 80%; height: auto; max-width: 350px; }
.band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0; }
.band .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
section { padding: 95px 0; }
h2 { font-size: clamp(32px, 3.5vw, 48px); letter-spacing: -1.7px; line-height: 1.15; font-weight: 500; margin: 15px 0 22px; }
h3 { font-size: 20px; font-weight: 500; line-height: 1.35; }
.intro { max-width: 650px; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; }
.feature { border-top: 1px solid #60717a; padding: 24px 0; }
.num { font-size: 12px; color: #dba88b; }
.feature p { color: var(--muted); font-size: 15px; }
.flow { display: grid; grid-template-columns: 1fr 1.15fr; gap: 90px; align-items: start; }
.demo-section { background: #0d1720; }
.screen { border: 1px solid #48606a; background: var(--panel); border-radius: 4px; width: 100%; overflow: hidden; }
.screenhead { padding: 17px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); }
.live { color: #8bdaa9; }
.screenbody { padding: 25px; }
.stats { display: flex; gap: 35px; padding-bottom: 22px; }
.stat b { display: block; font-size: 31px; font-weight: 500; }
.stat small { color: var(--muted); font-size: 11px; }
/* El panel conserva texto claro sobre su fondo oscuro en ambos temas. */
.access { background: #091b16; color: #f2f0eb; border: 1px solid #285344; border-radius: 7px; padding: 24px; text-align: center; }
.check { margin: 0 auto 14px; width: 49px; height: 49px; background: #89e5b3; color: #062c18; border-radius: 50%; font-size: 28px; }
.access strong { display: block; font-size: 21px; font-weight: 500; }
.access p { color: #9bb8aa; font-size: 12px; margin: 5px; }
.access.is-denied { border-color: #c9954a; }
.access.is-denied .check { background: #ebc082; color: #352406; }
.row { display: flex; justify-content: space-between; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.row span { color: var(--muted); }
.row b { text-align: right; }
.demo-controls { display: flex; gap: 9px; margin-top: 18px; }
.demo-controls button { flex: 1; min-width: 0; font-size: 12px; padding: 9px 6px; }
.demo-controls [aria-pressed="true"] { border-color: var(--accent); }
.light { background: #f2f0eb; color: #111c27; }
.light .intro, .light p { color: #51646b; }
.light .eyebrow { color: #805338; }
.step { display: grid; grid-template-columns: 40px 1fr; gap: 18px; border-bottom: 1px solid #d6d4cc; padding: 20px 0; }
.step:first-child { padding-top: 0; }
.step > span { border: 1px solid #c3c7c1; border-radius: 50%; width: 33px; height: 33px; text-align: center; color: #805338; font-size: 13px; line-height: 32px; }
.step h3 { margin: 0 0 7px; }
.step p { margin: 0; font-size: 15px; }
.roadmap { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; margin-top: 40px; }
.future { padding: 28px; background: var(--panel); border: 1px solid var(--line); border-radius: 2px; }
.tag { font-size: 11px; border: 1px solid #6c827f; padding: 5px 8px; letter-spacing: 1px; color: #d5b6a4; box-decoration-break: clone; }
.future p { color: var(--muted); }
.faq-section { padding-top: 0; }
details { border-bottom: 1px solid var(--line); padding: 22px 0; }
summary { font-size: 18px; }
details p { color: var(--muted); max-width: 820px; }
.contact { background: #123f4a; border-top: 1px solid #486c70; color: #f2f0eb; }
.contact .wrap { display: flex; justify-content: space-between; align-items: center; gap: 35px; }
.contact h2 { max-width: 650px; }
.contact p { color: #d0d9d8; }
.contact .button { background: #e2b297; color: #111c27; border-color: #e2b297; white-space: nowrap; }
.contact .eyebrow { color: #e2b297; }
.contact-status { font-size: 12px; }
footer { padding: 30px 0; color: var(--muted); font-size: 12px; }
footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
dialog { color-scheme: light; max-width: 440px; width: 90%; max-height: 90vh; overflow: auto; padding: 30px; border: 1px solid #495367; border-radius: 10px; background: #f2f0eb; color: #111c27; }
dialog::backdrop { background: #111c27b8; }
dialog .dialog-heading { font-size: 24px; letter-spacing: -.5px; line-height: 1.2; }
dialog .button { color: #111c27; border-color: #89979b; }
.contact-dialog { max-width: 530px; }
.contact-dialog textarea { display: block; width: 100%; padding: 12px; color: #111c27; background: white; border: 1px solid #89979b; resize: vertical; }
.dialog-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dialog-status { min-height: 1.65em; }
body.day { color-scheme: light; --bg: #f2f0eb; --panel: #e8e7df; --line: #c9cfc9; --text: #111c27; --muted: #51646b; }
body.day header { background: #f2f0ebf5; }
body.day .aditux-logo { color: #111c27; }
body.day .eyebrow, body.day .num, body.day h1 span { color: #855437; }
body.day .demo-section { background: #e4e7e1; }
body.day .live { color: #246442; }
body.day .future .tag { color: #123f4a; }
body.day .contact .eyebrow { color: #e2b297; }
a:focus-visible, button:focus-visible, summary:focus-visible, textarea:focus-visible { outline: 3px solid #dba88b; outline-offset: 5px; }
dialog :focus-visible { outline-color: #805338; }
.error-page main { min-height: 85vh; display: grid; align-content: center; max-width: 680px; padding: 60px 0; }
.error-icon { width: 80px; height: 80px; }
.error-page h1 { font-size: clamp(34px, 5vw, 54px); }

@media (max-width: 850px) {
  .nav { height: 80px; gap: 12px; }
  .aditux-logo { width: 75px; height: 66px; }
  .navlinks { gap: 10px; }
  .navlinks > a { display: none; }
  .navlinks .app-access { font-size: 11px; padding: 10px; }
  .hero { grid-template-columns: 1fr; gap: 35px; padding: 42px 0 55px; }
  .hero h1 { font-size: 43px; }
  .brand-visual { max-width: 550px; width: 100%; margin-inline: auto; }
  .screen { max-width: 540px; margin-inline: auto; }
  .grid, .flow, .roadmap { grid-template-columns: 1fr; }
  .flow, .roadmap { gap: 35px; }
  .demo-section .flow { gap: 32px; }
  section { padding: 65px 0; }
  .contact .wrap { display: block; }
  .contact .button { margin-top: 15px; }
  footer .wrap { flex-wrap: wrap; }
}
@media (max-width: 400px) {
  .aditux-logo { width: 66px; height: 58px; }
  .navlinks { gap: 6px; }
  .nav .theme { width: 28px; height: 28px; }
  .hero h1 { font-size: 36px; }
  .screenbody { padding: 18px; }
  .screenhead { padding: 14px 18px; }
  .stats { gap: 24px; }
  .demo-controls { flex-wrap: wrap; }
  .demo-controls button { flex-basis: 65px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}