/* ============================================================
   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-body); font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--navy); background:rgba(19,28,103,0.08); padding:7px 16px; border-radius:20px;
  margin-bottom:16px; display:inline-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:rgba(255,255,255,0.1); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-color:rgba(255,255,255,0.5); color:#fff;}
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,0.2);}
.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;}
.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:
    radial-gradient(70% 90% at 18% 100%, rgba(6,7,18,0.88) 0%, rgba(6,7,18,0) 68%),
    linear-gradient(180deg, rgba(15,18,34,0.08) 0%, rgba(15,18,34,0.1) 35%, rgba(15,18,34,0.6) 65%, rgba(15,18,34,0.92) 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(34px,5.4vw,62px); max-width:700px; margin-bottom:18px; text-shadow:0 4px 28px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.4);}
.hero-content p{ color:rgba(255,255,255,0.9); font-size:18.5px; max-width:480px; margin-bottom:28px; text-shadow:0 2px 18px rgba(0,0,0,0.5);}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap;}
.hero-cta .btn{ font-size:16px; padding:15px 30px;}

/* ---------- 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;
}

/* ---------- 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-img{
  width:100%; max-width:420px; aspect-ratio:1/1; object-fit:cover;
  border-radius:12% 46% 40% 14% / 16% 30% 36% 18%;
  box-shadow:0 30px 60px -34px rgba(15,18,34,0.2); display:block;
}
.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; background:rgba(125,216,255,0.12);}
.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:24px; padding:36px 24px;
}
.sw-modules{ display:flex; align-items:flex-start; justify-content:center; gap:28px; flex-wrap:wrap;}
.sw-module{ display:flex; flex-direction:column; align-items:center; gap:14px; width:130px;}
.sw-module img{
  width:92px; height:92px; object-fit:contain; background:#fff; border-radius:22px; padding:14px;
  box-shadow:0 22px 40px -18px rgba(0,0,0,0.55); transition:transform .2s ease;
}
.sw-module:hover img{ transform:translateY(-4px);}
.sw-module-label{ font-family:var(--font-body); font-weight:700; font-size:13.5px; color:#fff; text-align:center; letter-spacing:.01em;}
.sw-module-label small{ display:block; font-weight:500; font-size:12px; color:rgba(255,255,255,0.55); margin-top:2px;}

/* ---------- 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: LANDING ---------- */
.sw-landing-shots{ padding:60px 0 20px;}
.shot-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.shot-wide{ aspect-ratio:21/9;}

.sw-picker{ padding:70px 0 90px;}
.sw-picker-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-bottom:24px;}
.sw-picker-card{
  display:block; background:var(--paper); border:1px solid var(--line); border-radius:26px; padding:44px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sw-picker-card:hover{ transform:translateY(-6px); box-shadow:0 34px 60px -30px rgba(15,18,34,0.24); border-color:var(--navy);}
.sw-picker-card h3{ font-size:clamp(22px,2.6vw,28px); margin-bottom:12px;}
.sw-picker-card p{ color:var(--text-soft); font-size:15.5px; margin-bottom:22px;}
.sw-picker-cta{ font-family:var(--font-body); font-size:14.5px; color:var(--navy); font-weight:700; display:inline-flex; align-items:center; gap:5px; transition:gap .18s ease;}
.sw-picker-card:hover .sw-picker-cta{ gap:9px;}
.sw-picker-card--secondary{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:30px 36px; background:var(--paper-soft);
}
.sw-picker-card--secondary h3{ font-size:18.5px; margin-bottom:4px;}
.sw-picker-card--secondary p{ color:var(--text-soft); font-size:14.5px; margin-bottom:0;}
.sw-picker-card--secondary .sw-picker-cta{ flex-shrink:0;}

/* ---------- SOFTWARE: PÁGINAS DE LÍNEA (retail / restaurante / facturación electrónica) ---------- */
.sw-showcase{ padding:50px 0 10px;}

/* Mosaico de capturas reales (menú principal + detalle), reemplaza al placeholder */
.shot-mosaic{ display:flex; align-items:flex-end; justify-content:center; gap:24px; flex-wrap:wrap; padding:10px 0 40px;}
.shot-card{
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:12px;
  box-shadow:0 28px 56px -30px rgba(15,18,34,0.32);
  transition:transform .25s ease, box-shadow .25s ease;
}
.shot-card:hover{ box-shadow:0 34px 64px -26px rgba(15,18,34,0.4);}
.shot-card img{ display:block; width:100%; height:auto; border-radius:10px;}
.shot-card--lg{ width:320px; z-index:2;}
.shot-card--sm{ width:220px; transform:translateY(34px) rotate(-3deg);}
.shot-card--sm.tilt-right{ transform:translateY(34px) rotate(3deg);}
.shot-card--sm:hover{ transform:translateY(26px) rotate(-3deg) scale(1.03);}
.shot-card--sm.tilt-right:hover{ transform:translateY(26px) rotate(3deg) scale(1.03);}

.sw-feature-grid{ counter-reset:feature; display:grid; grid-template-columns:repeat(2,1fr); gap:26px; padding:70px 0;}
.sw-feature-card{
  background:var(--paper); border:1px solid var(--line); border-radius:24px; overflow:hidden; position:relative;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sw-feature-card:hover{ transform:translateY(-4px); box-shadow:0 28px 50px -28px rgba(15,18,34,0.22); border-color:rgba(19,28,103,0.25);}
.sw-feature-card::before{
  counter-increment:feature; content:counter(feature, decimal-leading-zero);
  position:absolute; top:18px; left:18px; z-index:2;
  display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%;
  background:var(--navy); color:#fff; font-family:var(--font-mono); font-size:13px; font-weight:600;
  box-shadow:0 10px 20px -8px rgba(19,28,103,0.55);
}
.sw-feature-shot{
  aspect-ratio:16/10; background:var(--paper-soft); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; padding:18px;
}
.sw-feature-shot img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; box-shadow:0 10px 26px -14px rgba(15,18,34,0.35);}
.sw-feature-body{ padding:28px 30px 32px;}
.sw-feature-card.no-shot .sw-feature-body{ padding-top:58px;}
.sw-feature-card h4{ font-size:20px; margin-bottom:10px;}
.sw-feature-card p{ font-size:15.5px; line-height:1.6; color:var(--text-soft);}

@media (max-width:680px){
  .sw-showcase{ padding:30px 0 0;}
  .shot-mosaic{ padding:0 0 10px;}
  .shot-card--sm{ display:none;}
  .shot-card--lg{ width:100%; max-width:320px;}
  .sw-feature-grid{ padding:30px 0;}
}

/* ---------- 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-body); font-size:13.5px; color:var(--navy); font-weight:700;}
.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;}
  .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;}
  .shot-grid{grid-template-columns:1fr;}
  .sw-picker-grid{grid-template-columns:1fr;}
  .sw-feature-grid{grid-template-columns:1fr;}
  .sw-picker-card--secondary{flex-direction:column; align-items:flex-start;}
}

@media (max-width:680px){
  .hero-photo{ background-position:14% 28%;}
}

@media (max-width:560px){
  .video-grid{
    grid-template-columns:none; display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    scroll-behavior:smooth; padding:4px 2px 8px; scrollbar-width:none; -ms-overflow-style:none;
  }
  .video-grid::-webkit-scrollbar{ display:none;}
  .video-card{ flex:0 0 68%; scroll-snap-align:start;}
  .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;} }