/*! Creador: IngCarlosReina. - Realidad Aumentada Empezando Desde Cero
 * Web: https://realidad-aumentada.com.co
 * Blog: https://blog.realidad-aumentada.com.co
 * YouTube: https://www.youtube.com/@carlosreinamcr
 */
/*! Creador: IngCarlosReina. - Realidad Aumentada Empezando Desde Cero */
:root { color-scheme:light; --ink:#13283b; --muted:#3d566b; --blue:#075e83; --line:#cbdbe5; }
body.public-landing { margin:0; color:var(--ink); font:16px/1.6 "Instrument Sans",system-ui,sans-serif; }
.public-landing a { color:var(--blue); text-underline-offset:.2em; }
.site-header,.site-main,.project-footer { max-width:1120px; margin:auto; padding:clamp(18px,4vw,42px); }
.site-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-block:18px; }
.site-header nav { display:flex; flex-wrap:wrap; gap:14px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:800; color:var(--ink); text-decoration:none; }
.brand img { object-fit:contain; background:#f5f7f7; border-radius:8px; }
.hero { display:grid; grid-template-columns:1.45fr 1fr; align-items:center; gap:clamp(24px,5vw,64px); padding-block:clamp(20px,5vw,72px); }
.origin { color:#176c69; font-weight:700; }
.hero h1 { font-size:clamp(2.45rem,6vw,5rem); line-height:1.02; letter-spacing:-.055em; margin:.18em 0; max-width:12ch; }
.intro { color:var(--muted); font-size:1.18rem; max-width:40ch; }
.marker { margin:0; padding:clamp(12px,2vw,26px); background:#edf5f7; border:1px solid var(--line); border-radius:20px; }
.marker img { display:block; width:100%; height:auto; border-radius:10px; }
.marker figcaption { margin-top:12px; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-block:18px; }
.primary,.secondary { display:inline-block; border-radius:8px; padding:10px 15px; text-decoration:none; font-weight:700; }
.public-landing .primary { color:white; background:#08475d; }
.secondary { color:#08475d; background:#eaf4f7; }
.site-main section+section { margin-top:clamp(30px,5vw,70px); }
.landing-demo { display:block; height:clamp(340px,65vh,620px); height:clamp(340px,65dvh,620px); }
.demo-viewer { position:relative; isolation:isolate; overflow:hidden; border-radius:16px; }
.demo-camera-feed { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.demo-viewer .landing-demo { position:relative; }
.demo-curtain,.demo-curtain::before,.demo-curtain::after { position:absolute; inset:0; }
.demo-curtain { pointer-events:none; }
.demo-curtain::before,.demo-curtain::after {
  content:""; background:#edf5f7 url("./examples/assets/marcador.jpg") center / cover no-repeat;
  transition:transform .8s cubic-bezier(.65,0,.25,1);
}
.demo-curtain::before { clip-path:inset(0 49.9% 0 0); }
.demo-curtain::after { clip-path:inset(0 0 0 49.9%); }
.demo-viewer[data-camera-open] .demo-curtain::before { transform:translateX(-51%); }
.demo-viewer[data-camera-open] .demo-curtain::after { transform:translateX(51%); }
.demo-start { position:absolute; inset:auto 0 0; text-align:center; padding:18px; color:white; background:#13283be8; }
.demo-start button { border:0; border-radius:8px; padding:10px 20px; font:inherit; font-weight:700; cursor:pointer; }
.demo-start [data-photo] { background:#ffc553; color:#13283b; }
.demo-speech { position:absolute; z-index:1; max-width:calc(100% - 24px); padding:9px 14px; border:2px solid #075e83;
  border-radius:16px; color:#13283b; background:#fff; box-shadow:0 5px 18px #13283b55;
  font:700 15px/1.25 system-ui,sans-serif; text-align:left; cursor:pointer; animation:kai-speech-in .3s ease-out; }
.demo-speech::after { content:""; position:absolute; top:62%; right:-8px; width:11px; height:11px; rotate:45deg;
  border-top:2px solid #075e83; border-right:2px solid #075e83; background:#fff; }
@keyframes kai-speech-in { from { opacity:0; transform:translateY(6px) scale(.94); } }
.demo-start button:disabled { cursor:wait; opacity:.7; }
.demo-viewer[data-camera-open] .demo-start { right:auto; max-width:100%; box-sizing:border-box; padding:8px 12px; border-radius:0 8px 0 0; }
#demo-photo[hidden] { display:none; }
#demo-photo button { border:0; font:inherit; cursor:pointer; }
.demo-start p { margin:6px 0 0; }
.demo-start p:empty { display:none; }
@media(prefers-reduced-motion:reduce) { .demo-curtain::before,.demo-curtain::after { transition:none; } .demo-speech { animation:none; } }
.features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.features article { padding:20px; border:1px solid var(--line); border-radius:14px; }
.features h3 { margin-top:0; }
.site-main pre { overflow:auto; background:#13283b; color:#eef6ff; padding:20px; border-radius:12px; }
.project-footer { box-sizing:border-box; background:#fff3d4; border-top:4px solid #f3ac2c; color:#13283b; padding-bottom:calc(clamp(18px,4vw,42px) + 55px); }
.project-footer h2 { margin-top:0; }
.project-footer a { color:#075476; }
.project-footer .support-links,.project-footer .creator-links { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.project-footer .btn-support { padding:8px 12px; border-radius:8px; background:white; border:1px solid #bbd0de; font-weight:650; }
.project-footer .patreon-subtext { display:block; font-size:.82rem; font-weight:400; }
.project-footer .creator-links { margin-bottom:0; }
.support-float { position:fixed; right:max(14px,env(safe-area-inset-right)); bottom:max(14px,env(safe-area-inset-bottom)); z-index:2147483100;
  padding:10px 16px; border-radius:999px; background:#ffc553; color:#17283b !important; font:750 15px/1.35 system-ui,sans-serif;
  text-decoration:none; box-shadow:0 4px 20px #10223144; }
.support-float:hover { background:#ffda87; }
.support-dialog { box-sizing:border-box; width:min(92vw,560px); max-height:85dvh; padding:22px; border:0; border-radius:16px;
  color:#13283b; background:#fff3d4; overflow:auto; }
.support-dialog::backdrop { background:#10223199; }
.support-dialog .project-footer { padding:0; border:0; }
.support-dialog .support-close { display:block; margin:0 0 10px auto; border:1px solid #b8a26f; border-radius:7px;
  padding:6px 11px; background:white; color:#13283b; font:inherit; cursor:pointer; }
:focus-visible { outline:3px solid #bf6908; outline-offset:3px; }
@media(max-width:720px) { .hero,.features { grid-template-columns:1fr; } .hero h1 { max-width:15ch; } }