/* ============================================================
   Grupo Sisdetek SAS — hoja de estilos global
   ============================================================ */

:root{
  --ink:#0f1222;
  --navy:#131c67;
  --paper:#ffffff;
  --paper-soft:#f4f5f7;
  --line: rgba(15,18,34,0.09);
  --text-soft: rgba(15,18,34,0.6);
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --max: 1160px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font:inherit;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-0.01em; color:var(--ink);}
p{line-height:1.65;}

.eyebrow{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy); opacity:.75; margin-bottom:14px; display:block;
}

.btn{
  font-family:var(--font-body); font-weight:600; font-size:14.5px; padding:13px 26px; border-radius:50px;
  border:1.5px solid transparent; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn-navy{ background:var(--navy); color:#fff; box-shadow:0 14px 28px -12px rgba(19,28,103,0.5);}
.btn-navy:hover{ transform:translateY(-2px); box-shadow:0 18px 32px -10px rgba(19,28,103,0.6);}
.btn-ghost{ background:transparent; border-color:rgba(255,255,255,0.35); color:#fff;}
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,0.08);}
.btn-outline{ background:#fff; border-color:var(--line); color:var(--ink);}
.btn-outline:hover{ border-color:var(--navy); color:var(--navy);}

a.btn:focus-visible,
button:focus-visible,
a:focus-visible{
  outline:2.5px solid var(--navy);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- NAV (glass, floating, sticky) ---------- */
.nav-shell{ position:fixed; top:16px; left:0; right:0; z-index:200; padding:0 20px; transition:top .25s ease;}
nav.pill{
  position:relative;
  max-width:1060px; margin:0 auto; background:rgba(255,255,255,0.5); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,0.7); border-radius:50px; box-shadow:0 16px 38px -20px rgba(15,18,34,0.22);
  display:flex; align-items:center; justify-content:space-between; padding:18px 36px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  nav.pill{ background:rgba(255,255,255,0.94); }
}
.pill .brand img{height:52px; display:block;}
.pill-links{display:flex; align-items:center; gap:46px;}
.pill-links > li{position:relative;}
.pill-links a.top-link{font-size:16.5px; font-weight:500; color:var(--ink); opacity:.82; display:flex; align-items:center; gap:5px; padding:8px 0;}
.pill-links > li:hover a.top-link{opacity:1;}
.caret{font-size:9px; opacity:.6; transform:translateY(1px);}
.submenu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px);
  background:rgba(255,255,255,0.92); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.6);
  border-radius:16px; box-shadow:0 20px 40px -18px rgba(15,18,34,0.3); padding:10px; min-width:190px;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.pill-links > li:hover .submenu{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);}
.submenu a{display:block; padding:9px 12px; border-radius:10px; font-size:13.5px; color:var(--ink);}
.submenu a:hover{background:var(--paper-soft); color:var(--navy);}
.submenu a span{display:block; font-size:11px; color:var(--text-soft); margin-top:1px;}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:10px;}
.burger span{width:20px; height:2px; background:var(--ink); display:block;}

/* ---------- HERO (full-bleed, shrinks on scroll) ---------- */
.hero-spacer{ height:100vh; }
.hero-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; z-index:1; }
.hero-photo{
  position:absolute; inset:0; background-image:url('assets/hero-local.png'); background-size:cover; background-position:center 35%;
  transform-origin:center top;
  will-change: transform, border-radius;
}
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,18,34,0.04) 0%, rgba(15,18,34,0.02) 30%, rgba(15,18,34,0.65) 100%);
}
.hero-content{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 32px 64px;
  color:#fff;
}
.hero-content-inner{max-width:var(--max); margin:0 auto;}
.hero-content h1{ color:#fff; font-size:clamp(30px,4.6vw,52px); max-width:640px; margin-bottom:16px; text-shadow:0 2px 24px rgba(15,18,34,0.4);}
.hero-content p{ color:rgba(255,255,255,0.85); font-size:16.5px; max-width:440px; margin-bottom:26px; text-shadow:0 1px 16px rgba(15,18,34,0.4);}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap;}

/* ---------- PAGE HEADER (páginas internas: software, catálogo) ---------- */
.page-header{ padding:196px 0 60px; background:var(--paper-soft); }
.page-header .eyebrow{ margin-bottom:14px; }
.page-header h1{ font-size:clamp(28px,4vw,44px); max-width:640px; margin-bottom:16px;}
.page-header p{ color:var(--text-soft); font-size:16px; max-width:560px;}

/* ---------- CATÁLOGO (embebido vía iframe, ocupa el resto del viewport) ---------- */
body.catalog-page{ display:flex; flex-direction:column; min-height:100vh;}
.catalog-page-header{ padding:164px 0 24px;}
.catalog-page-header h1{ margin-bottom:0;}
.catalog-embed{ padding:24px 0 0; flex:1 1 auto; display:flex;}
.catalog-frame-wrap{
  flex:1 1 auto; display:flex; width:100%;
  border-radius:0; overflow:hidden; border:0; box-shadow:none; background:var(--paper-soft);
}
.catalog-iframe{ display:block; flex:1 1 auto; width:100%; border:0;}

/* ---------- SOBRE NOSOTROS: NUESTRA MISIÓN ---------- */
.mission-split{ padding:200px 0 90px; background:var(--paper);}
.mission-split-row{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center;}
.mission-split-copy h1{ font-size:clamp(30px,4vw,46px); margin:12px 0 20px;}
.mission-split-copy p{ color:var(--text-soft); font-size:15.5px; max-width:520px;}
.mission-split-photo{ display:flex; justify-content:center;}
.framed-photo{
  width:100%; max-width:440px; aspect-ratio:1/1; object-fit:cover;
  border-radius:24px; box-shadow:0 30px 60px -34px rgba(15,18,34,0.28); display:block;
}
.blob-photo{
  width:100%; max-width:440px; aspect-ratio:1/1;
  border-radius:63% 37% 54% 46% / 45% 41% 59% 55%;
  background:var(--paper-soft); border:1px dashed rgba(15,18,34,0.25);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:40px;
}
.photo-placeholder-text{ font-family:var(--font-mono); font-size:13px; color:var(--text-soft); line-height:1.6;}

/* ---------- SOBRE NOSOTROS: NUESTRA HISTORIA ---------- */
.history-split{ padding:90px 0; background:var(--paper-soft);}
.history-split-row{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center;}
.history-split-photo{ display:flex; justify-content:center;}
.blob-photo--history{ max-width:360px; box-shadow:0 30px 60px -34px rgba(15,18,34,0.2);}
.history-split-copy h2{ font-size:clamp(26px,3.2vw,36px); margin:12px 0 18px;}
.placeholder-copy{
  display:inline-block; font-style:italic; color:var(--text-soft); font-size:14.5px;
  border:1px dashed rgba(15,18,34,0.25); border-radius:12px; padding:14px 18px; background:var(--paper);
}

/* ---------- PUNTOS DE VENTA ---------- */
#puntos-venta{ background:var(--paper-soft); padding:50px 0 80px;}
.sec-head{max-width:560px; margin-bottom:40px;}
.sec-head h2{font-size:clamp(24px,2.8vw,32px); margin-bottom:12px;}
.sec-head p{color:var(--text-soft); font-size:15.5px;}
.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.video-card{
  position:relative; aspect-ratio:9/17.5; border-radius:18px; overflow:hidden; background:var(--ink);
}
.video-card video{ width:100%; height:100%; object-fit:cover; display:block;}
.video-card .vc-overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,18,34,0) 55%, rgba(15,18,34,0.75) 100%);
  display:flex; align-items:flex-end; padding:16px; pointer-events:none;
}
.video-card .vc-label{color:#fff; font-size:12.5px; font-weight:600;}
.video-card .vc-play{
  position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,0.25); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:11px;
}

/* ---------- RESEÑAS ---------- */
#resenas{ padding:80px 0;}
.review-carousel{ position:relative;}
.review-grid{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:4px 2px 8px; scrollbar-width:none; -ms-overflow-style:none;
}
.review-grid::-webkit-scrollbar{ display:none;}
.review-card{
  background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:32px;
  display:flex; flex-direction:column; flex:0 0 360px; height:280px; scroll-snap-align:start;
}
.stars{ color:#f5a623; font-size:17px; letter-spacing:3px; margin-bottom:14px;}
.review-card p{
  font-size:16px; color:var(--ink); margin-bottom:20px; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;
}
.review-who{ display:flex; align-items:center; gap:12px; margin-top:auto;}
.review-avatar{ width:42px; height:42px; border-radius:50%; background:var(--paper-soft); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:15px; color:var(--navy); flex-shrink:0;}
.review-who b{ display:block; font-size:15px;}
.review-who span{ font-size:13px; color:var(--text-soft);}

.review-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:38px; height:38px; border-radius:50%; background:var(--paper); border:1px solid var(--line);
  box-shadow:0 10px 24px -10px rgba(15,18,34,0.25); display:flex; align-items:center; justify-content:center;
  font-size:19px; color:var(--ink); cursor:pointer; transition:background .18s ease, color .18s ease;
}
.review-arrow:hover{ background:var(--navy); color:#fff;}
.review-arrow.prev{ left:-6px;}
.review-arrow.next{ right:-6px;}

/* ---------- YA CONOCES NUESTRO SOFTWARE ---------- */
#software-cta{ background:var(--ink); color:#fff; padding:90px 0;}
.sw-row{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:60px; align-items:center;}
.sw-copy .eyebrow{color:#7dd8ff; opacity:.9;}
.sw-copy h2{ color:#fff; font-size:clamp(26px,3.2vw,38px); margin-bottom:16px;}
.sw-copy p{ color:rgba(255,255,255,0.62); font-size:15.5px; margin-bottom:28px; max-width:420px;}
.sw-shot{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:20px; padding:14px; position:relative;
}
.sw-shot img{ border-radius:10px;}
.sw-badge{
  position:absolute; top:-14px; left:24px; background:#fff; color:var(--ink); font-family:var(--font-mono);
  font-size:11px; padding:6px 14px; border-radius:20px; box-shadow:0 10px 24px -10px rgba(0,0,0,0.4);
}

/* ---------- RECONOCIMIENTOS ---------- */
#reconocimientos{ padding:80px 0;}
.recog-box{
  display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center;
  background:var(--paper-soft); border-radius:22px; padding:40px; border:1px solid var(--line);
}
.recog-photo{
  aspect-ratio:3/4; border-radius:16px; overflow:hidden; background:var(--ink);
}
.recog-photo video{ width:100%; height:100%; object-fit:cover; object-position:50% 15%; display:block; }
.recog-copy .eyebrow{margin-bottom:12px;}
.recog-copy h3{font-size:22px; margin-bottom:10px;}
.recog-copy p{color:var(--text-soft); font-size:15px;}

/* ---------- SOFTWARE PAGE ---------- */
.product-lines{ padding:80px 0; }
.header-links{ display:flex; gap:10px; margin-top:28px; flex-wrap:wrap;}
.header-links a{
  font-family:var(--font-mono); font-size:12.5px; color:var(--navy); background:var(--paper);
  border:1px solid var(--line); padding:9px 18px; border-radius:20px; transition:background .18s ease, border-color .18s ease;
}
.header-links a:hover{ background:var(--navy); color:#fff; border-color:var(--navy);}

.line-row{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:72px; align-items:center;}
.line-row + .line-row{ margin-top:96px; padding-top:96px; border-top:1px solid var(--line);}
.line-row.reverse .line-shot{ order:2; }
.line-row.reverse .line-copy{ order:1; }
.line-tag{ display:flex; align-items:center; gap:12px; margin-bottom:18px;}
.line-num{
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--navy);
  background:var(--paper-soft); border:1px solid var(--line); border-radius:8px;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.line-tag .eyebrow{ margin:0;}
.line-copy h2{ font-size:clamp(26px,3vw,34px); margin-bottom:18px;}
.line-copy > p{ color:var(--text-soft); font-size:15.5px; margin-bottom:28px; max-width:460px;}
.line-copy ul{ display:flex; flex-direction:column; gap:13px;}
.line-copy li{ font-size:14.5px; color:var(--text-soft); padding-left:22px; position:relative;}
.line-copy li::before{ content:"—"; position:absolute; left:0; color:var(--navy);}
.line-shot{
  background:var(--paper-soft); border:1px solid var(--line); border-radius:22px; padding:14px; position:relative;
  box-shadow:0 40px 70px -40px rgba(15,18,34,0.28);
}
.line-shot img{ border-radius:12px;}

.admin-panel{ background:var(--paper-soft); border:1px solid var(--line); border-radius:22px; padding:44px; margin-top:96px;}
.admin-panel h3{ font-size:22px; margin-bottom:10px;}
.admin-panel > .wrap-p, .admin-panel p{ color:var(--text-soft); font-size:14.5px; margin-bottom:22px; max-width:520px;}
.admin-tags{ display:flex; flex-wrap:wrap; gap:9px;}
.admin-tags span{
  font-family:var(--font-mono); font-size:12px; padding:8px 15px; border-radius:20px;
  background:var(--paper); border:1px solid var(--line); color:var(--ink); transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.admin-tags span:hover{ background:var(--navy); color:#fff; border-color:var(--navy);}

.demos{ background:var(--paper-soft); padding:90px 0;}
.demo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.demo-card{
  background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:30px; position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}
.demo-card:hover{ transform:translateY(-4px); box-shadow:0 30px 50px -30px rgba(15,18,34,0.22);}
.demo-num{
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--text-soft);
  width:28px; height:28px; border:1px solid var(--line); border-radius:8px; display:flex; align-items:center; justify-content:center;
  position:absolute; top:28px; left:30px;
}
.demo-card h4{ font-size:17px; margin:44px 0 8px;}
.demo-card p{ font-size:14px; color:var(--text-soft);}
.demo-soon{
  position:absolute; top:26px; right:26px;
  display:inline-block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--navy); color:#fff; padding:5px 12px; border-radius:20px;
}

/* ---------- NOSOTROS: CÓMO LLEGAR / VISÍTANOS ---------- */
.directions{ padding:90px 0 110px; background:var(--paper);}
.directions-card{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:40px; align-items:center;
  background:var(--paper-soft); border:1px solid var(--line); border-radius:28px; padding:48px;
}
.directions-copy h2{ font-size:clamp(24px,3vw,32px); margin:12px 0 10px;}
.directions-copy p{ color:var(--text-soft); font-size:15.5px;}
.directions-video{
  aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:var(--ink);
  box-shadow:0 30px 60px -34px rgba(15,18,34,0.35);
}
.directions-video video{ width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- CLIENTES / TESTIMONIOS ---------- */
.testimonios{ padding:70px 0 90px;}
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.testi-card h4{ font-size:15.5px; margin-bottom:4px;}
.testi-card p{ font-size:13.5px; color:var(--text-soft);}
.testi-placeholder{
  aspect-ratio:9/16; border:1px dashed rgba(15,18,34,0.25); border-radius:18px; background:var(--paper-soft);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:20px; margin-bottom:14px; gap:8px;
}
.testi-flag{ font-family:var(--font-mono); font-size:12.5px; color:var(--navy); font-weight:600;}
.testi-sub{ font-size:12px; color:var(--text-soft); max-width:180px;}
.testi-note{ margin-top:24px; font-family:var(--font-mono); font-size:11.5px; color:var(--text-soft);}

/* ---------- FOOTER ---------- */
footer.site-footer{ background:var(--ink); color:rgba(255,255,255,0.7); width:100%;}
.footer-bar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px 24px; padding:18px 32px;}
.footer-contact{ display:flex; gap:22px; flex-wrap:wrap;}
.footer-contact a, .footer-contact span{ font-size:13px; color:rgba(255,255,255,0.8);}
.footer-contact a:hover{ color:#fff;}
.footer-copy{ font-size:11.5px; color:rgba(255,255,255,0.45);}

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.show{ opacity:1; transform:translateY(0);}

@media (max-width:920px){
  .pill-links{display:none;}
  .pill-links.mobile-open{
    display:flex; flex-direction:column; align-items:stretch; gap:4px;
    position:absolute; top:calc(100% + 10px); left:8px; right:8px; background:#fff;
    padding:16px 20px; border-radius:16px; box-shadow:0 20px 40px -16px rgba(15,18,34,0.3);
  }
  .pill-links.mobile-open > li{width:100%;}
  .pill-links.mobile-open a.top-link{padding:10px 0;}
  .pill-links.mobile-open .submenu{
    position:static; opacity:1; pointer-events:auto; transform:none;
    box-shadow:none; border:none; background:transparent; backdrop-filter:none;
    padding:0 0 6px 14px; min-width:0;
  }
  .pill-links.mobile-open .submenu a{padding:7px 0; font-size:13px;}
  .burger{display:flex;}
  .mission-split{padding:150px 0 60px;}
  .mission-split-row, .history-split-row{grid-template-columns:1fr; gap:32px;}
  .directions-card{grid-template-columns:1fr; padding:28px; gap:24px;}
  .video-grid{grid-template-columns:repeat(2,1fr);}
  .testi-grid{grid-template-columns:repeat(2,1fr);}
  .sw-row{grid-template-columns:1fr;}
  .recog-box{grid-template-columns:1fr;}
  .line-row{grid-template-columns:1fr; gap:30px;}
  .line-row + .line-row{margin-top:56px; padding-top:56px;}
  .line-row.reverse .line-shot,
  .line-row.reverse .line-copy{order:initial;}
  .admin-panel{padding:28px; margin-top:56px;}
  .demo-grid{grid-template-columns:1fr;}
}

@media (max-width:560px){
  .video-grid{grid-template-columns:1fr;}
  .testi-grid{grid-template-columns:1fr;}
  .footer-bar{ flex-direction:column; align-items:flex-start; padding:16px 24px;}
  .footer-contact{ gap:6px 18px;}
  .review-card{ flex-basis:78vw;}
  .review-arrow{ width:32px; height:32px; font-size:16px;}
  .review-arrow.prev{ left:-2px;}
  .review-arrow.next{ right:-2px;}
  .catalog-page-header{ padding:132px 0 18px;}
}

@media (prefers-reduced-motion:reduce){ *{transition-duration:.001ms !important;} }