:root { --ink:#252620; --ink-soft:#353630; --paper:#f5f4ef; --paper-soft:#ebeae4; --white:#fbfcf8; --text:#22231f; --muted:#70736c; --line:#d2d2ca; --lime:#86ae4e; --magenta:#a82f68; --container:1160px; }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:76px; }
body { margin:0; color:var(--text); background:var(--paper); font-family:Inter,Aptos,"Segoe UI",Arial,sans-serif; line-height:1.55; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; } a { color:inherit; text-decoration:none; } button { font:inherit; }
.product-container { width:min(calc(100% - 42px),var(--container)); margin-inline:auto; }
.skip { position:fixed; z-index:1000; top:10px; left:10px; padding:9px 13px; color:#fff; background:var(--ink); transform:translateY(-150%); } .skip:focus { transform:none; }
.product-header { position:fixed; z-index:100; inset:0 0 auto; height:74px; color:#fff; background:rgba(37,38,32,.96); border-bottom:1px solid #4a4b44; backdrop-filter:blur(14px); }
.header-inner { height:100%; display:flex; align-items:center; justify-content:space-between; gap:26px; }
.product-brand { display:flex; align-items:center; gap:9px; } .product-brand img { width:42px; height:42px; object-fit:contain; } .product-brand span { display:flex; flex-direction:column; line-height:1; letter-spacing:.2em; } .product-brand small { margin-bottom:4px; color:#b3b5ae; font-size:.47rem; } .product-brand strong { font-size:.88rem; letter-spacing:.26em; }
.product-header nav { display:flex; align-items:center; gap:24px; color:#b9bbb5; font-size:.72rem; font-weight:750; } .product-header nav a:hover { color:#fff; } .product-header .header-cta { padding:10px 14px; color:#252620; background:#a8ca78; }
.menu-toggle { display:none; width:44px; height:44px; padding:10px; color:#fff; background:transparent; border:1px solid #55564f; } .menu-toggle i { display:block; height:2px; margin:4px 0; background:currentColor; } .menu-toggle span { position:absolute; width:1px; height:1px; overflow:hidden; }
.product-hero { padding-top:74px; color:#fff; background:var(--ink); }
.hero-content { padding-top:65px; padding-bottom:48px; }
.back-company { color:#b5b7b0; font-size:.72rem; font-weight:750; }
.hero-content > p,.label { margin:55px 0 16px; color:var(--magenta); font-size:.62rem; font-weight:900; letter-spacing:.16em; }
.hero-content h1 { max-width:1050px; margin:0; font-size:clamp(3.3rem,7vw,7rem); font-weight:510; letter-spacing:-.07em; line-height:.9; text-wrap:balance; }
.hero-bottom { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:38px; color:#b9bbb5; font-size:.76rem; }
.hero-bottom a { padding:12px 17px; color:#252620; background:#a8ca78; font-weight:850; }
.hero-photo { min-height:455px; position:relative; display:flex; align-items:flex-end; padding:18px max(20px,calc((100% - var(--container))/2)); background-image:linear-gradient(rgba(25,26,22,.15),rgba(25,26,22,.15)),url("../images/hero-garita-02.webp"); background-position:center; background-size:cover; }
.hero-photo span { color:rgba(255,255,255,.75); font-size:.54rem; font-weight:850; letter-spacing:.1em; }
.product-intro,.product-section,.product-demo { padding:85px 0; }
.intro-grid,.product-heading,.demo-grid,.implementation-grid,.faq-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; }
.label { margin-top:0; }
.intro-grid h2,.product-heading h2,.demo-grid h2,.implementation-grid h2,.faq-grid h2,.product-support h2,.product-contact h2 { margin:0; font-size:clamp(2.2rem,4.4vw,4.4rem); font-weight:510; letter-spacing:-.06em; line-height:.98; }
.intro-grid .lead { margin-top:0; color:#343631; font-size:1.16rem; } .intro-grid p { color:var(--muted); }
.intro-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:25px; } .intro-tags span { padding:8px 11px; background:#e6e5df; border:1px solid var(--line); font-size:.68rem; font-weight:750; }
.product-section { background:var(--paper-soft); }
.product-heading { align-items:end; margin-bottom:35px; } .product-heading > p { max-width:460px; margin:0; color:var(--muted); }
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); }
.feature-grid article { min-height:265px; display:flex; flex-direction:column; padding:23px; background:#f8f7f3; border-right:1px solid var(--line); }
.feature-grid b { color:var(--magenta); font-size:.62rem; } .feature-grid h3 { margin:75px 0 10px; font-size:1.08rem; } .feature-grid p { margin:0; color:var(--muted); font-size:.78rem; }
.product-demo { background:var(--paper); }
.demo-grid { align-items:center; } .demo-grid > div:first-child > p:last-child { color:var(--muted); }
.demo-film { min-height:360px; position:relative; overflow:hidden; display:grid; place-content:center; gap:7px; color:#fff; background:#20211d; text-align:center; }
.demo-film::after { content:""; position:absolute; z-index:1; inset:0; background:rgba(25,26,22,.28); pointer-events:none; }
.demo-film video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.demo-film span,.demo-film small { position:relative; z-index:2; }
.demo-film span { font-size:.64rem; font-weight:850; letter-spacing:.12em; } .demo-film small { color:#dedfd9; font-size:.57rem; }
.problems-section { background:#f1f0ea; }
.problem-list { border-top:1px solid var(--line); }
.problem-list article { display:grid; grid-template-columns:.8fr 1.5fr 1fr; gap:28px; align-items:center; min-height:92px; padding:15px 0; border-bottom:1px solid var(--line); }
.problem-list strong { font-size:.83rem; } .problem-list span { color:var(--muted); font-size:.78rem; } .problem-list b { color:#596b3b; font-size:.72rem; }
.implementation-section { color:#fff; background:var(--ink); }
.implementation-grid > div > p:last-child { color:#b0b2ac; }
.implementation-grid ol { padding:0; margin:0; list-style:none; border-top:1px solid #4b4c46; }
.implementation-grid li { display:grid; grid-template-columns:45px 1fr; gap:20px; padding:19px 0; border-bottom:1px solid #4b4c46; } .implementation-grid li > b { color:#b9d394; font-size:.61rem; } .implementation-grid li div { display:flex; justify-content:space-between; gap:25px; } .implementation-grid li strong { font-size:.83rem; } .implementation-grid li span { color:#a5a7a1; font-size:.75rem; }
.product-support { padding:90px 0; background:#e5e4de; text-align:center; }
.product-support h2 { max-width:1000px; margin-inline:auto; }
.support-timeline { display:grid; grid-template-columns:repeat(3,1fr); margin-top:45px; border-top:1px solid #c7c8c0; }
.support-timeline article { min-height:190px; display:flex; flex-direction:column; padding:22px; border-right:1px solid #c7c8c0; text-align:left; }
.support-timeline small { color:var(--magenta); font-size:.59rem; font-weight:850; letter-spacing:.12em; } .support-timeline strong { margin:55px 0 8px; } .support-timeline p { margin:0; color:var(--muted); font-size:.76rem; }
.faq-section { background:var(--paper); }
.faq-grid details { border-top:1px solid var(--line); } .faq-grid details:last-child { border-bottom:1px solid var(--line); } .faq-grid summary { cursor:pointer; padding:19px 30px 19px 0; font-size:.82rem; font-weight:800; } .faq-grid details p { margin:0 0 20px; color:var(--muted); font-size:.78rem; }
.product-contact { padding:80px 0; color:#fff; background:#3b3c37; }
.contact-grid { display:grid; grid-template-columns:1fr auto; align-items:center; gap:55px; }
.product-contact h2 { max-width:800px; } .product-contact p { color:#c0c2bb; }
.product-contact a { padding:14px 18px; color:#252620; background:#a8ca78; font-weight:850; }
.product-footer { padding:28px 0; color:#9ea099; background:#20211d; } .product-footer > div { display:flex; align-items:center; justify-content:space-between; gap:25px; font-size:.69rem; } .product-footer .product-brand img { width:35px; height:35px; }
.product-top { position:fixed; z-index:90; right:17px; bottom:17px; width:56px; height:56px; display:grid; place-items:center; padding:7px; background:linear-gradient(145deg,rgba(255,255,252,.94),rgba(229,234,221,.9)); border:1px solid rgba(68,76,61,.2); border-radius:50%; box-shadow:0 7px 22px rgba(32,34,28,.16),inset 0 0 0 4px rgba(255,255,255,.35); backdrop-filter:blur(8px); opacity:0; pointer-events:none; transform:translateY(10px) scale(.92); transition:opacity .2s ease,transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease; } .product-top.is-visible { opacity:1; pointer-events:auto; transform:none; } .product-top.is-visible:hover { transform:translateY(-3px) scale(1.04); background:linear-gradient(145deg,#fff,#e5eed7); border-color:rgba(104,142,66,.42); box-shadow:0 10px 27px rgba(32,34,28,.19),inset 0 0 0 4px rgba(255,255,255,.48); } .product-top:focus-visible { outline:3px solid rgba(169,202,121,.58); outline-offset:3px; } .product-top img { width:39px; transform:rotate(180deg); filter:drop-shadow(0 2px 3px rgba(32,34,28,.16)); }

.product-hero--biometric .hero-photo { background-image:linear-gradient(rgba(35,42,31,.34),rgba(35,42,31,.34)),url("../images/hero-garita-03.webp"); }
.product-hero--roster .hero-photo { background-image:linear-gradient(rgba(39,42,36,.33),rgba(39,42,36,.33)),url("../images/hero-garita-01.webp"); }
.product-hero--orders .hero-photo { background-color:#dcddd7; background-image:linear-gradient(rgba(37,38,32,.08),rgba(37,38,32,.08)),url("../images/sistema-pedidos.png"); background-position:center; background-repeat:no-repeat; background-size:min(1100px,88%) auto; }
.product-hero--forms .hero-photo { background-color:#e2e3dd; background-image:linear-gradient(rgba(37,38,32,.06),rgba(37,38,32,.06)),url("../images/sistema-formularios.png"); background-position:center; background-repeat:no-repeat; background-size:min(1040px,88%) auto; }
.product-hero--orders .hero-photo span,.product-hero--forms .hero-photo span { padding:7px 9px; color:#fff; background:rgba(32,34,29,.82); }

.product-panel { min-height:410px; display:flex; flex-direction:column; justify-content:center; padding:42px; color:#30332d; background:#e4e7dd; border:1px solid var(--line); }
.product-panel>small { margin-bottom:24px; color:var(--magenta); font-size:.58rem; font-weight:900; letter-spacing:.13em; }
.product-panel ol { margin:0; padding:0; list-style:none; border-top:1px solid #bbc2b2; }
.product-panel li { min-height:67px; display:grid; grid-template-columns:74px 1fr; gap:17px; align-items:center; border-bottom:1px solid #bbc2b2; }
.product-panel li b { color:#5f793e; font-size:.61rem; letter-spacing:.08em; }
.product-panel li span { font-size:.84rem; font-weight:720; }
.product-panel>p { margin:22px 0 0; color:#70756a; font-size:.63rem; font-weight:750; }
.product-panel--roster { background:#e8e6df; }
.product-panel--roster li b { color:var(--magenta); }
.product-panel--temporary { background:#e5eadf; }
.product-panel--temporary li b { color:#587737; }

.product-programs { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.product-programs article { min-height:430px; display:flex; flex-direction:column; padding:34px; background:#f8f7f3; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.product-programs small { color:var(--magenta); font-size:.58rem; font-weight:900; letter-spacing:.12em; }
.product-programs h3 { margin:58px 0 12px; font-size:clamp(2rem,3.4vw,3.4rem); font-weight:540; letter-spacing:-.055em; line-height:1; }
.product-programs p { max-width:490px; margin:0; color:var(--muted); font-size:.81rem; }
.product-programs ul { margin:24px 0 25px; padding:0; list-style:none; border-top:1px solid var(--line); }
.product-programs li { padding:8px 0; color:#4f534b; border-bottom:1px solid var(--line); font-size:.7rem; }
.product-programs a { align-self:flex-start; margin-top:auto; padding-bottom:4px; border-bottom:1px solid currentColor; font-size:.69rem; font-weight:850; }
.product-demo--temporary { background:#eceee8; }

.product-screen { min-height:410px; position:relative; display:grid; place-items:center; margin:0; padding:25px; overflow:hidden; background:#dfe1da; border:1px solid var(--line); }
.product-screen img { width:100%; max-height:440px; object-fit:contain; filter:saturate(.9) contrast(.98); box-shadow:0 14px 32px rgba(36,38,32,.16); }
.product-screen figcaption { position:absolute; left:18px; bottom:16px; padding:6px 8px; color:#fff; background:rgba(30,32,27,.84); font-size:.55rem; font-weight:850; letter-spacing:.1em; }

.related-section { background:#f3f2ed; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.related-grid a { min-height:175px; display:flex; flex-direction:column; padding:20px; background:#f8f7f3; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .16s ease; }
.related-grid a:hover { background:#eef2e8; }
.related-grid small { color:var(--magenta); font-size:.57rem; font-weight:900; letter-spacing:.1em; }
.related-grid strong { margin:45px 0 8px; font-size:.92rem; }
.related-grid span { color:var(--muted); font-size:.72rem; }

@media (max-width:850px) {
  .menu-toggle { display:block; } .product-header nav { position:absolute; top:74px; right:15px; left:15px; display:none; flex-direction:column; align-items:stretch; gap:0; padding:10px; background:#2d2e29; border:1px solid #50514a; } .product-header nav.is-open { display:flex; } .product-header nav a { padding:12px; }
  .intro-grid,.product-heading,.demo-grid,.implementation-grid,.faq-grid { grid-template-columns:1fr; gap:35px; }
  .feature-grid { grid-template-columns:1fr 1fr; } .feature-grid article:nth-child(2) { border-right:0; }
  .problem-list article { grid-template-columns:1fr; gap:7px; padding:20px 0; }
  .contact-grid { grid-template-columns:1fr; }
  .related-grid { grid-template-columns:1fr 1fr; }
  .product-programs { grid-template-columns:1fr; }
  .product-programs article { min-height:390px; }
}
@media (max-width:550px) {
  .product-container { width:min(calc(100% - 30px),var(--container)); }
  .product-brand span { display:none; } .hero-content { padding-top:45px; } .hero-content > p { margin-top:40px; } .hero-content h1 { font-size:3.4rem; } .hero-bottom { align-items:flex-start; flex-direction:column; }
  .hero-photo { min-height:330px; }
  .product-intro,.product-section,.product-demo { padding:68px 0; }
  .feature-grid { grid-template-columns:1fr; } .feature-grid article { min-height:210px; border-right:0; border-bottom:1px solid var(--line); } .feature-grid h3 { margin-top:45px; }
  .implementation-grid li div { flex-direction:column; gap:5px; }
  .support-timeline { grid-template-columns:1fr; } .support-timeline article { min-height:150px; border-right:0; border-bottom:1px solid #c7c8c0; } .support-timeline strong { margin-top:35px; }
  .product-footer > div { align-items:flex-start; flex-direction:column; }
  .product-panel,.product-screen { min-height:350px; padding:24px; }
  .product-panel li { grid-template-columns:64px 1fr; }
  .related-grid { grid-template-columns:1fr; }
  .related-grid a { min-height:145px; }
  .related-grid strong { margin-top:34px; }
  .product-programs article { min-height:0; padding:25px; }
  .product-programs h3 { margin-top:40px; }
}