/* =========================================================
   SISFAC - LANDING PAGE PREMIUM
   Sistemas Comerciales y Facturación Electrónica
   ========================================================= */


/* =========================================================
   01. VARIABLES
   ========================================================= */

:root{

  /* Fondos */
  --bg:#040816;
  --bg-soft:#07101f;
  --bg-alt:#091326;

  /* Tarjetas */
  --card:#0c172c;
  --card-soft:#101d35;
  --card-hover:#132343;

  /* Marca */
  --blue:#2563eb;
  --blue-light:#3b82f6;
  --cyan:#06b6d4;
  --cyan-light:#22d3ee;

  /* Verde SISFAC */
  --green:#22c55e;
  --green-light:#84cc16;
  --lime:#a3e635;

  /* Violeta */
  --purple:#7c3aed;

  /* Textos */
  --text:#f8fafc;
  --text-soft:#e2e8f0;
  --muted:#94a3b8;
  --muted-2:#64748b;

  /* Bordes */
  --border:rgba(148,163,184,.14);
  --border-soft:rgba(148,163,184,.09);

  /* Sombras */
  --shadow-sm:0 10px 30px rgba(0,0,0,.25);
  --shadow:0 25px 60px rgba(0,0,0,.40);
  --shadow-blue:0 20px 45px rgba(37,99,235,.20);
  --shadow-green:0 20px 45px rgba(34,197,94,.20);

  /* Radios */
  --radius-sm:12px;
  --radius:18px;
  --radius-lg:26px;
  --radius-xl:32px;

  /* Animaciones */
  --transition:.25s ease;

}


/* =========================================================
   02. RESET
   ========================================================= */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:110px;
}

body{

  min-height:100vh;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:var(--text);

  line-height:1.65;

  background:

    radial-gradient(
      900px 600px at 5% -10%,
      rgba(37,99,235,.28),
      transparent 65%
    ),

    radial-gradient(
      800px 550px at 95% 8%,
      rgba(6,182,212,.18),
      transparent 60%
    ),

    radial-gradient(
      700px 500px at 50% 100%,
      rgba(34,197,94,.07),
      transparent 65%
    ),

    linear-gradient(
      180deg,
      var(--bg),
      #020617 75%
    );

  overflow-x:hidden;
}

body::selection{
  background:var(--blue);
  color:#fff;
}

img{
  max-width:100%;
  display:block;
}

a{
  text-decoration:none;
  color:inherit;
}

button,
input,
textarea,
select{
  font:inherit;
}

button{
  border:0;
}


/* =========================================================
   03. UTILIDADES
   ========================================================= */

.container{
  width:min(1180px,92%);
  margin:0 auto;
}

.section{
  position:relative;
  padding:95px 0;
}

.section-alt{

  background:
    linear-gradient(
      180deg,
      rgba(8,18,38,.90),
      rgba(8,18,38,.72)
    );

  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
}

.section-header{
  max-width:700px;
  margin-bottom:45px;
}

.section-header-center{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.section-header h2{

  font-size:
    clamp(
      2rem,
      4vw,
      3rem
    );

  line-height:1.15;

  letter-spacing:-.025em;

  margin-bottom:14px;
}

.section-header p{
  color:var(--muted);
  font-size:1.02rem;
}

.section-tag{

  display:inline-flex;

  align-items:center;

  margin-bottom:14px;

  color:var(--cyan-light);

  font-size:.78rem;

  font-weight:800;

  letter-spacing:.15em;

  text-transform:uppercase;
}


/* =========================================================
   04. HEADER
   ========================================================= */

.site-header{

  position:sticky;

  top:0;

  z-index:1000;

  border-bottom:
    1px solid
    rgba(148,163,184,.10);

  background:
    rgba(4,8,22,.80);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

.nav-container{

  min-height:88px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:24px;

  padding:10px 0;
}


/* =========================================================
   05. MARCA
   ========================================================= */

.brand{

  display:flex;

  align-items:center;

  gap:15px;

  min-width:260px;
}

.logo{

  width:auto;

  height:72px;

  max-width:115px;

  object-fit:contain;

  filter:
    drop-shadow(
      0 8px 18px
      rgba(34,197,94,.16)
    );

  transition:var(--transition);
}

.brand:hover .logo{
  transform:scale(1.035);
}

.brand-text{
  display:flex;
  flex-direction:column;
}

.brand-text h1{

  font-size:1.36rem;

  font-weight:800;

  line-height:1.1;

  letter-spacing:.045em;
}

.brand-text span{

  max-width:260px;

  margin-top:5px;

  color:var(--muted);

  font-size:.78rem;

  line-height:1.4;
}


/* =========================================================
   06. NAVEGACIÓN
   ========================================================= */

.nav{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:6px;
}

.nav a{

  position:relative;

  padding:10px 13px;

  color:var(--muted);

  font-size:.88rem;

  font-weight:600;

  border-radius:999px;

  transition:var(--transition);
}

.nav a:hover{

  color:#fff;

  background:
    rgba(37,99,235,.10);
}

.nav a.active{

  color:#fff;

  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,.24),
      rgba(124,58,237,.22)
    );

  border:
    1px solid
    rgba(96,165,250,.25);
}


/* =========================================================
   07. BOTÓN HEADER
   ========================================================= */

.btn-header{

  flex-shrink:0;

  padding:11px 17px;

  color:#fff;

  font-size:.86rem;

  font-weight:700;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--cyan)
    );

  box-shadow:
    0 12px 28px
    rgba(37,99,235,.22);

  transition:var(--transition);
}

.btn-header:hover{

  transform:
    translateY(-2px);

  box-shadow:
    0 16px 32px
    rgba(37,99,235,.32);
}


/* =========================================================
   08. MENÚ HAMBURGUESA
   ========================================================= */

.nav-toggle{
  display:none;
}

.nav-toggle span{

  display:block;

  width:21px;

  height:2px;

  background:#fff;

  border-radius:999px;

  transition:var(--transition);
}


/* =========================================================
   09. BOTONES
   ========================================================= */

.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:47px;

  padding:11px 20px;

  border-radius:999px;

  font-size:.92rem;

  font-weight:750;

  cursor:pointer;

  border:
    1px solid
    transparent;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    border-color .2s ease;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{

  color:#04100b;

  background:
    linear-gradient(
      135deg,
      var(--lime),
      var(--green)
    );

  box-shadow:
    var(--shadow-green);
}

.btn-primary:hover{

  filter:brightness(1.05);

  box-shadow:
    0 20px 42px
    rgba(34,197,94,.28);
}

.btn-outline{

  color:var(--text);

  background:
    rgba(255,255,255,.025);

  border:
    1px solid
    rgba(148,163,184,.30);
}

.btn-outline:hover{

  border-color:
    rgba(34,211,238,.50);

  background:
    rgba(6,182,212,.08);
}

.full{
  width:100%;
}


/* =========================================================
   10. HERO
   ========================================================= */

.hero{

  position:relative;

  min-height:
    calc(100vh - 88px);

  display:flex;

  align-items:center;

  padding:
    90px 0 85px;

  overflow:hidden;
}

.hero::before{

  content:"";

  position:absolute;

  width:560px;

  height:560px;

  left:-230px;

  top:0;

  border-radius:50%;

  background:
    rgba(37,99,235,.14);

  filter:
    blur(90px);

  pointer-events:none;
}

.hero::after{

  content:"";

  position:absolute;

  width:540px;

  height:540px;

  right:-240px;

  bottom:-160px;

  border-radius:50%;

  background:
    rgba(6,182,212,.11);

  filter:
    blur(100px);

  pointer-events:none;
}

.hero-grid{

  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:
    minmax(0,1.05fr)
    minmax(440px,.95fr);

  align-items:center;

  gap:72px;
}


/* =========================================================
   11. HERO TEXTO
   ========================================================= */

.hero-text{
  max-width:650px;
}

.hero-eyebrow{

  width:max-content;

  max-width:100%;

  display:flex;

  align-items:center;

  gap:9px;

  margin-bottom:19px;

  padding:7px 13px;

  color:
    var(--cyan-light);

  background:
    rgba(6,182,212,.07);

  border:
    1px solid
    rgba(34,211,238,.18);

  border-radius:999px;

  font-size:.79rem;

  font-weight:750;
}

.hero-dot{

  width:7px;

  height:7px;

  border-radius:50%;

  background:
    var(--green);

  box-shadow:
    0 0 0 5px
    rgba(34,197,94,.10);
}

.hero-text h2{

  max-width:650px;

  font-size:
    clamp(
      2.7rem,
      5.2vw,
      5rem
    );

  line-height:1.02;

  letter-spacing:-.045em;

  margin-bottom:22px;
}

.hero-text h2 span{

  display:inline-block;

  color:transparent;

  background:
    linear-gradient(
      90deg,
      var(--blue-light),
      var(--cyan-light),
      var(--lime)
    );

  background-clip:text;

  -webkit-background-clip:text;
}

.hero-description{

  max-width:610px;

  margin-bottom:24px;

  color:var(--muted);

  font-size:
    clamp(
      1rem,
      1.4vw,
      1.12rem
    );

  line-height:1.75;
}

.hero-list{

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:10px 20px;

  margin-bottom:31px;

  list-style:none;
}

.hero-list li{

  position:relative;

  padding-left:25px;

  color:var(--text-soft);

  font-size:.91rem;
}

.hero-list li::before{

  content:"✓";

  position:absolute;

  left:0;

  top:0;

  color:var(--lime);

  font-weight:900;
}

.hero-cta{

  display:flex;

  flex-wrap:wrap;

  gap:12px;

  margin-bottom:17px;
}

.hero-contact{

  color:var(--muted-2);

  font-size:.84rem;
}

.hero-business{

  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:8px;

  margin-top:25px;

  padding-top:20px;

  border-top:
    1px solid
    var(--border-soft);

  color:var(--muted);

  font-size:.81rem;
}

.hero-business strong{
  color:var(--text-soft);
}


/* =========================================================
   12. HERO SISTEMA
   ========================================================= */

.hero-media{

  display:flex;

  justify-content:center;

  align-items:center;

  min-width:0;
}

.system-showcase{

  position:relative;

  width:100%;

  max-width:590px;
}

.system-window{

  overflow:hidden;

  border-radius:22px;

  background:
    #091226;

  border:
    1px solid
    rgba(96,165,250,.25);

  box-shadow:
    0 40px 100px
    rgba(0,0,0,.55),
    0 0 70px
    rgba(37,99,235,.12);

  transform:
    perspective(1200px)
    rotateY(-3deg)
    rotateX(1deg);
}

.system-window-top{

  min-height:46px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:0 15px;

  border-bottom:
    1px solid
    var(--border-soft);

  background:
    rgba(255,255,255,.025);
}

.window-dots{
  display:flex;
  gap:6px;
}

.window-dots span{

  width:8px;

  height:8px;

  border-radius:50%;
}

.window-dots span:nth-child(1){
  background:#ef4444;
}

.window-dots span:nth-child(2){
  background:#f59e0b;
}

.window-dots span:nth-child(3){
  background:#22c55e;
}

.system-title{

  color:
    var(--muted);

  font-size:.76rem;

  font-weight:600;
}

.system-window img{

  width:100%;

  min-height:300px;

  object-fit:cover;

  object-position:center;
}


/* =========================================================
   13. TARJETAS FLOTANTES HERO
   ========================================================= */

.floating-card{

  position:absolute;

  display:flex;

  align-items:center;

  gap:10px;

  min-width:185px;

  padding:11px 14px;

  border-radius:14px;

  color:#fff;

  background:
    rgba(9,18,38,.88);

  border:
    1px solid
    rgba(148,163,184,.16);

  backdrop-filter:
    blur(14px);

  box-shadow:
    var(--shadow-sm);
}

.floating-card small{

  display:block;

  margin-bottom:1px;

  color:var(--muted);

  font-size:.68rem;
}

.floating-card strong{

  display:block;

  font-size:.78rem;
}

.floating-icon{

  width:34px;

  height:34px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:10px;

  color:var(--cyan-light);

  background:
    rgba(6,182,212,.10);
}

.card-sales{

  left:-32px;

  bottom:45px;
}

.card-sunat{

  right:-25px;

  top:68px;
}

.status-dot{

  width:13px;

  height:13px;

  border-radius:50%;

  background:var(--green);

  box-shadow:
    0 0 0 5px
    rgba(34,197,94,.12);
}


/* =========================================================
   14. BARRA PLATAFORMA
   ========================================================= */

.platform-bar{

  padding:25px 0;

  background:
    rgba(8,17,35,.68);

  border-top:
    1px solid
    var(--border-soft);

  border-bottom:
    1px solid
    var(--border-soft);
}

.platform-bar .container{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:35px;
}

.platform-bar p{

  max-width:330px;

  color:var(--text-soft);

  font-size:.86rem;

  font-weight:650;
}

.platform-items{

  display:flex;

  align-items:center;

  justify-content:flex-end;

  flex-wrap:wrap;

  gap:13px;
}

.platform-items span{

  color:var(--muted);

  font-size:.78rem;

  font-weight:600;
}

.platform-items i{

  width:3px;

  height:3px;

  border-radius:50%;

  background:
    var(--green);
}


/* =========================================================
   15. GRID GENERAL
   ========================================================= */

.grid{
  display:grid;
  gap:24px;
}


/* =========================================================
   16. CARDS GENERALES
   ========================================================= */

.card{

  position:relative;

  overflow:hidden;

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      180deg,
      rgba(15,29,55,.92),
      rgba(8,19,39,.85)
    );

  border:
    1px solid
    var(--border);

  box-shadow:
    var(--shadow-sm);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.card:hover{

  transform:
    translateY(-6px);

  border-color:
    rgba(96,165,250,.28);

  box-shadow:
    0 25px 60px
    rgba(0,0,0,.34);
}

.card-body{
  padding:26px;
}

.card-body h3{

  margin-bottom:8px;

  font-size:1.18rem;
}

.card-body p{

  margin-bottom:15px;

  color:var(--muted);

  font-size:.91rem;
}

.card-body ul{

  display:grid;

  gap:8px;

  margin-bottom:20px;

  color:var(--text-soft);

  list-style:none;

  font-size:.85rem;
}

.card-body li{

  position:relative;

  padding-left:18px;
}

.card-body li::before{

  content:"";

  position:absolute;

  left:0;

  top:.62em;

  width:6px;

  height:6px;

  border-radius:50%;

  background:
    var(--green);
}


/* =========================================================
   17. SOLUCIONES
   ========================================================= */

.solution-grid{

  grid-template-columns:
    repeat(3,minmax(0,1fr));
}

.solution-image{

  position:relative;

  overflow:hidden;

  height:220px;
}

.solution-image::after{

  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      transparent 50%,
      rgba(4,8,22,.80)
    );
}

.solution-image img{

  width:100%;

  height:100%;

  object-fit:cover;

  transition:
    transform .5s ease;
}

.solution-card:hover
.solution-image img{

  transform:
    scale(1.045);
}

.solution-label{

  position:absolute;

  top:15px;

  left:15px;

  z-index:2;

  padding:6px 10px;

  color:#fff;

  font-size:.7rem;

  font-weight:700;

  background:
    rgba(4,8,22,.65);

  backdrop-filter:
    blur(9px);

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:999px;
}

.solution-icon{

  width:40px;

  height:40px;

  display:flex;

  align-items:center;

  justify-content:center;

  margin-bottom:15px;

  border-radius:12px;

  color:var(--cyan-light);

  font-weight:800;

  background:
    rgba(6,182,212,.10);

  border:
    1px solid
    rgba(34,211,238,.12);
}

.card-link{

  color:var(--cyan-light);

  font-size:.84rem;

  font-weight:700;

  transition:var(--transition);
}

.card-link:hover{
  color:var(--lime);
}


/* =========================================================
   18. FUNCIONES
   ========================================================= */

.features-grid{

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:18px;
}

.feature{

  padding:26px 22px;

  border-radius:
    var(--radius);

  background:
    linear-gradient(
      180deg,
      rgba(17,32,59,.82),
      rgba(9,21,42,.72)
    );

  border:
    1px solid
    var(--border);

  box-shadow:
    0 13px 34px
    rgba(0,0,0,.18);

  transition:var(--transition);
}

.feature:hover{

  transform:
    translateY(-5px);

  border-color:
    rgba(34,211,238,.25);

  background:
    linear-gradient(
      180deg,
      rgba(20,39,73,.90),
      rgba(10,24,47,.85)
    );
}

.feature-icon{

  width:44px;

  height:44px;

  display:flex;

  align-items:center;

  justify-content:center;

  margin-bottom:17px;

  border-radius:13px;

  font-size:1.22rem;

  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,.18),
      rgba(6,182,212,.10)
    );

  border:
    1px solid
    rgba(96,165,250,.16);
}

.feature h3{

  margin-bottom:7px;

  font-size:1rem;
}

.feature p{

  color:var(--muted);

  font-size:.85rem;
}


/* =========================================================
   19. DEMO SISFAC
   ========================================================= */

.product-demo{
  overflow:hidden;
}

.demo-grid{

  display:grid;

  grid-template-columns:
    .85fr 1.15fr;

  align-items:center;

  gap:70px;
}

.demo-content h2{

  max-width:520px;

  margin-bottom:17px;

  font-size:
    clamp(
      2rem,
      4vw,
      3.2rem
    );

  line-height:1.12;

  letter-spacing:-.035em;
}

.demo-content > p{

  max-width:520px;

  margin-bottom:28px;

  color:var(--muted);
}

.demo-benefits{

  display:grid;

  gap:13px;

  margin-bottom:30px;
}

.demo-benefits > div{

  display:flex;

  align-items:center;

  gap:15px;
}

.demo-benefits span{

  flex:0 0 39px;

  width:39px;

  height:39px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:12px;

  color:var(--cyan-light);

  background:
    rgba(6,182,212,.08);

  border:
    1px solid
    rgba(34,211,238,.13);

  font-size:.74rem;

  font-weight:800;
}

.demo-benefits p{

  color:var(--text-soft);

  font-size:.91rem;
}

.demo-screen{

  position:relative;

  padding:11px;

  border-radius:24px;

  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,.32),
      rgba(6,182,212,.12)
    );

  box-shadow:
    0 35px 80px
    rgba(0,0,0,.42);
}

.demo-screen::before{

  content:"";

  position:absolute;

  inset:-50px;

  z-index:-1;

  background:
    rgba(37,99,235,.11);

  filter:blur(70px);
}

.demo-screen img{

  width:100%;

  max-height:470px;

  object-fit:cover;

  border-radius:17px;
}


/* =========================================================
   20. BENEFICIOS
   ========================================================= */

.benefits-modern{

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  border-top:
    1px solid
    var(--border);
}

.benefits-modern article{

  min-height:240px;

  padding:30px 27px;

  border-right:
    1px solid
    var(--border);
}

.benefits-modern article:last-child{
  border-right:0;
}

.benefit-number{

  display:block;

  margin-bottom:25px;

  color:var(--cyan);

  font-size:.77rem;

  font-weight:800;

  letter-spacing:.12em;
}

.benefits-modern h3{

  margin-bottom:10px;

  font-size:1.13rem;
}

.benefits-modern p{

  color:var(--muted);

  font-size:.88rem;
}

/* =========================================================
   21. CLIENTES / EXPERIENCIA REAL
   ========================================================= */

.clients-section{
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(
      700px 450px at 50% 35%,
      rgba(37,99,235,.10),
      transparent 70%
    ),
    radial-gradient(
      500px 350px at 90% 80%,
      rgba(34,197,94,.05),
      transparent 70%
    );
}


/* =========================================================
   INDICADORES DE EXPERIENCIA
   ========================================================= */

.clients-stats{

  max-width:980px;

  margin:
    0 auto 42px;

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  border-radius:
    var(--radius);

  overflow:hidden;

  background:
    rgba(7,18,38,.62);

  border:
    1px solid
    var(--border);

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.18);
}


.client-stat{

  min-height:125px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  padding:20px;

  text-align:center;

  border-right:
    1px solid
    var(--border);
}


.client-stat:last-child{
  border-right:0;
}


.client-stat strong{

  display:block;

  margin-bottom:7px;

  color:transparent;

  background:
    linear-gradient(
      90deg,
      var(--blue-light),
      var(--cyan-light),
      var(--lime)
    );

  background-clip:text;

  -webkit-background-clip:text;

  font-size:1.85rem;

  font-weight:900;

  line-height:1;
}


.client-stat span{

  color:
    var(--muted);

  font-size:.76rem;

  font-weight:650;
}


/* =========================================================
   RUBROS DE NEGOCIO
   ========================================================= */

.clients-business-grid{

  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:18px;

  margin-bottom:34px;
}


.client-business-card{

  position:relative;

  min-height:245px;

  padding:27px 23px;

  overflow:hidden;

  border-radius:
    var(--radius);

  background:
    linear-gradient(
      160deg,
      rgba(17,34,65,.90),
      rgba(7,18,37,.84)
    );

  border:
    1px solid
    var(--border);

  box-shadow:
    0 15px 36px
    rgba(0,0,0,.18);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.client-business-card::before{

  content:"";

  position:absolute;

  inset:0;

  opacity:0;

  background:
    radial-gradient(
      300px 200px at 10% 0%,
      rgba(37,99,235,.16),
      transparent 70%
    );

  transition:
    opacity .25s ease;

  pointer-events:none;
}


.client-business-card:hover{

  transform:
    translateY(-6px);

  border-color:
    rgba(34,211,238,.27);

  box-shadow:
    0 24px 55px
    rgba(0,0,0,.28);
}


.client-business-card:hover::before{
  opacity:1;
}


.client-business-icon{

  position:relative;

  z-index:2;

  width:50px;

  height:50px;

  display:flex;

  align-items:center;

  justify-content:center;

  margin-bottom:21px;

  border-radius:15px;

  font-size:1.35rem;

  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,.20),
      rgba(6,182,212,.11)
    );

  border:
    1px solid
    rgba(96,165,250,.17);
}


.client-business-card h3{

  position:relative;

  z-index:2;

  margin-bottom:10px;

  font-size:1.04rem;
}


.client-business-card p{

  position:relative;

  z-index:2;

  color:
    var(--muted);

  font-size:.84rem;

  line-height:1.7;
}


/* =========================================================
   EXPERIENCIA ACUMULADA
   ========================================================= */

.clients-experience{

  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:
    auto 1fr;

  align-items:center;

  gap:21px;

  max-width:980px;

  margin:
    0 auto 30px;

  padding:
    26px 30px;

  border-radius:
    var(--radius);

  background:
    linear-gradient(
      105deg,
      rgba(37,99,235,.13),
      rgba(6,182,212,.07),
      rgba(34,197,94,.06)
    );

  border:
    1px solid
    rgba(96,165,250,.16);
}


.clients-experience-icon{

  width:55px;

  height:55px;

  display:flex;

  align-items:center;

  justify-content:center;

  flex-shrink:0;

  border-radius:16px;

  color:
    var(--lime);

  font-size:1.35rem;

  background:
    rgba(163,230,53,.07);

  border:
    1px solid
    rgba(163,230,53,.16);

  box-shadow:
    0 12px 30px
    rgba(34,197,94,.08);
}


.clients-experience small{

  display:block;

  margin-bottom:5px;

  color:
    var(--cyan-light);

  font-size:.66rem;

  font-weight:850;

  letter-spacing:.12em;
}


.clients-experience h3{

  margin-bottom:6px;

  font-size:1.12rem;
}


.clients-experience p{

  max-width:780px;

  color:
    var(--muted);

  font-size:.83rem;
}


/* =========================================================
   CTA CLIENTES
   ========================================================= */

.clients-cta{

  position:relative;

  z-index:2;

  max-width:980px;

  margin:0 auto;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

  padding:
    22px 26px;

  border-radius:
    var(--radius);

  background:
    rgba(8,20,40,.70);

  border:
    1px solid
    var(--border);
}


.clients-cta span{

  display:block;

  margin-bottom:3px;

  color:
    var(--muted);

  font-size:.75rem;
}


.clients-cta strong{

  display:block;

  color:
    var(--text-soft);

  font-size:.93rem;
}


/* =========================================================
   RESPONSIVE CLIENTES - TABLET
   ========================================================= */

@media(max-width:900px){

  .clients-stats{

    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .client-stat:nth-child(2){
    border-right:0;
  }


  .client-stat:nth-child(1),
  .client-stat:nth-child(2){

    border-bottom:
      1px solid
      var(--border);
  }


  .clients-business-grid{

    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .client-business-card{
    min-height:220px;
  }

}


/* =========================================================
   RESPONSIVE CLIENTES - MÓVIL
   ========================================================= */

@media(max-width:600px){

  .clients-stats{

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    margin-bottom:30px;
  }


  .client-stat{

    min-height:105px;

    padding:16px 10px;
  }


  .client-stat strong{
    font-size:1.55rem;
  }


  .client-stat span{
    font-size:.68rem;
  }


  .clients-business-grid{

    grid-template-columns:1fr;

    gap:13px;
  }


  .client-business-card{

    min-height:0;

    padding:23px 21px;
  }


  .clients-experience{

    grid-template-columns:1fr;

    align-items:flex-start;

    padding:22px;
  }


  .clients-experience-icon{

    width:48px;

    height:48px;
  }


  .clients-cta{

    flex-direction:column;

    align-items:flex-start;

    padding:21px;
  }


  .clients-cta .btn{
    width:100%;
  }

}


/* =========================================================
   RESPONSIVE CLIENTES - MUY PEQUEÑO
   ========================================================= */

@media(max-width:380px){

  .clients-stats{
    grid-template-columns:1fr;
  }


  .client-stat{

    border-right:0 !important;

    border-bottom:
      1px solid
      var(--border);
  }


  .client-stat:last-child{
    border-bottom:0;
  }

}


/* =========================================================
   22. IMPLEMENTACIÓN
   ========================================================= */

.steps-grid{

  position:relative;

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:16px;
}

.step{

  position:relative;

  min-height:210px;

  padding:27px 24px;

  border-radius:
    var(--radius);

  background:
    rgba(8,20,40,.70);

  border:
    1px solid
    var(--border);
}

.step span{

  display:inline-block;

  margin-bottom:28px;

  color:var(--cyan-light);

  font-size:.76rem;

  font-weight:850;
}

.step h3{

  margin-bottom:8px;

  font-size:1.02rem;
}

.step p{

  color:var(--muted);

  font-size:.84rem;
}


/* =========================================================
   23. PLANES
   ========================================================= */

.pricing-grid{

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  align-items:stretch;
}

.plan{

  display:flex;

  flex-direction:column;

  padding:31px;

  overflow:visible;
}

.plan-name{

  margin-bottom:12px;

  color:var(--cyan-light);

  font-size:.74rem;

  font-weight:800;

  letter-spacing:.12em;

  text-transform:uppercase;
}

.plan h3{

  margin-bottom:9px;

  font-size:1.55rem;
}

.plan-description{

  min-height:72px;

  margin-bottom:22px;

  color:var(--muted);

  font-size:.88rem;
}

.plan ul{

  flex:1;

  display:grid;

  align-content:start;

  gap:11px;

  margin-bottom:27px;

  list-style:none;

  color:var(--text-soft);

  font-size:.87rem;
}

.plan ul li{

  position:relative;

  padding-left:22px;
}

.plan ul li::before{

  content:"✓";

  position:absolute;

  left:0;

  color:var(--green);

  font-weight:800;
}

.plan-featured{

  transform:
    translateY(-10px);

  background:
    linear-gradient(
      165deg,
      rgba(37,99,235,.32),
      rgba(9,24,47,.96) 38%,
      rgba(9,24,47,.96)
    );

  border-color:
    rgba(59,130,246,.38);

  box-shadow:
    0 30px 70px
    rgba(37,99,235,.15);
}

.plan-featured:hover{

  transform:
    translateY(-15px);
}

.badge{

  position:absolute;

  top:-13px;

  left:50%;

  transform:
    translateX(-50%);

  padding:6px 12px;

  color:#051009;

  background:
    linear-gradient(
      135deg,
      var(--lime),
      var(--green)
    );

  border-radius:999px;

  font-size:.65rem;

  font-weight:900;

  letter-spacing:.07em;

  white-space:nowrap;
}

.pricing-help{

  margin-top:34px;

  text-align:center;
}

.pricing-help p{

  color:var(--muted);

  font-size:.88rem;
}

.pricing-help a{

  color:var(--cyan-light);

  font-size:.86rem;

  font-weight:700;
}


/* =========================================================
   24. SOPORTE
   ========================================================= */

.support-grid{

  display:grid;

  grid-template-columns:
    .9fr 1.1fr;

  align-items:center;

  gap:70px;
}

.support-grid > div:first-child h2{

  max-width:500px;

  margin-bottom:18px;

  font-size:
    clamp(
      2rem,
      4vw,
      3.1rem
    );

  line-height:1.12;

  letter-spacing:-.035em;
}

.support-grid > div:first-child > p{

  max-width:510px;

  margin-bottom:26px;

  color:var(--muted);
}

.support-items{

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:15px;
}

.support-items article{

  display:flex;

  align-items:flex-start;

  gap:13px;

  min-height:142px;

  padding:20px;

  border-radius:
    var(--radius);

  background:
    rgba(13,26,50,.70);

  border:
    1px solid
    var(--border);
}

.support-items article > span{

  width:38px;

  height:38px;

  flex:0 0 38px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:11px;

  background:
    rgba(37,99,235,.12);
}

.support-items h3{

  margin-bottom:5px;

  font-size:.94rem;
}

.support-items p{

  color:var(--muted);

  font-size:.80rem;
}


/* =========================================================
   25. NOSOTROS
   ========================================================= */

.about-grid{

  display:grid;

  grid-template-columns:
    1.1fr .9fr;

  align-items:center;

  gap:70px;
}

.about-content h2{

  max-width:540px;

  margin-bottom:18px;

  font-size:
    clamp(
      2rem,
      4vw,
      3.1rem
    );

  line-height:1.12;

  letter-spacing:-.035em;
}

.about-content p{

  max-width:600px;

  margin-bottom:15px;

  color:var(--muted);
}

.about-card{

  max-width:420px;

  width:100%;

  justify-self:end;

  padding:34px;

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      150deg,
      rgba(37,99,235,.20),
      rgba(8,20,42,.90) 45%
    );

  border:
    1px solid
    rgba(59,130,246,.22);

  box-shadow:
    var(--shadow);
}

.about-icon{

  width:56px;

  height:56px;

  display:flex;

  align-items:center;

  justify-content:center;

  margin-bottom:19px;

  border-radius:16px;

  font-size:1.35rem;

  font-weight:900;

  color:#06100c;

  background:
    linear-gradient(
      135deg,
      var(--lime),
      var(--green)
    );
}

.about-card h3{

  font-size:1.55rem;
}

.about-card > p{

  margin-bottom:18px;

  color:var(--muted);

  font-size:.85rem;
}

.about-card ul{

  display:grid;

  gap:9px;

  list-style:none;

  color:var(--text-soft);

  font-size:.85rem;
}

.about-card li::before{

  content:"✓";

  margin-right:8px;

  color:var(--green);
}


/* =========================================================
   26. FAQ
   ========================================================= */

.faq-list{

  max-width:790px;

  margin:0 auto;

  display:grid;

  gap:11px;
}

.faq-list details{

  overflow:hidden;

  border-radius:
    var(--radius-sm);

  background:
    rgba(10,22,44,.64);

  border:
    1px solid
    var(--border);

  transition:var(--transition);
}

.faq-list details[open]{

  border-color:
    rgba(34,211,238,.20);

  background:
    rgba(12,28,53,.82);
}

.faq-list summary{

  position:relative;

  padding:
    18px 52px 18px 20px;

  color:var(--text-soft);

  font-size:.91rem;

  font-weight:650;

  cursor:pointer;

  list-style:none;
}

.faq-list summary::-webkit-details-marker{
  display:none;
}

.faq-list summary::after{

  content:"+";

  position:absolute;

  right:20px;

  top:50%;

  transform:
    translateY(-50%);

  color:var(--cyan-light);

  font-size:1.2rem;
}

.faq-list details[open]
summary::after{

  content:"−";
}

.faq-list details p{

  padding:
    0 20px 20px;

  color:var(--muted);

  font-size:.86rem;
}


/* =========================================================
   27. CONTACTO
   ========================================================= */

.contact-section{

  background:
    radial-gradient(
      650px 500px at 10% 20%,
      rgba(37,99,235,.11),
      transparent 70%
    );
}

.contact-header{

  max-width:650px;

  margin-bottom:40px;
}

.contact-header h2{

  margin-bottom:12px;

  font-size:
    clamp(
      2.1rem,
      4vw,
      3.2rem
    );

  line-height:1.12;
}

.contact-header p{
  color:var(--muted);
}

.contact-grid{

  display:grid;

  grid-template-columns:
    1.05fr .95fr;

  gap:27px;
}

.contact-box{

  padding:31px;

  border-radius:
    var(--radius-lg);

  background:
    rgba(10,23,46,.82);

  border:
    1px solid
    var(--border);

  box-shadow:
    var(--shadow-sm);
}

.contact-box h3{

  margin-bottom:22px;

  font-size:1.3rem;
}

.contact-form{

  display:grid;

  gap:15px;
}

.form-row{

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:15px;
}

.form-group{
  display:grid;
  gap:7px;
}

.form-group label{

  color:var(--text-soft);

  font-size:.78rem;

  font-weight:600;
}

.form-group input,
.form-group textarea,
.form-group select{

  width:100%;

  padding:12px 13px;

  color:var(--text);

  background:
    rgba(2,6,23,.60);

  border:
    1px solid
    rgba(148,163,184,.16);

  border-radius:11px;

  outline:none;

  transition:var(--transition);
}

.form-group textarea{
  resize:vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder{

  color:
    var(--muted-2);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{

  border-color:
    rgba(34,211,238,.48);

  box-shadow:
    0 0 0 3px
    rgba(6,182,212,.08);
}

.form-group select option{

  color:#fff;

  background:
    #091326;
}


/* =========================================================
   28. INFO CONTACTO
   ========================================================= */

.contact-info{

  display:grid;

  gap:13px;
}

.contact-info-card{

  display:flex;

  align-items:center;

  gap:15px;

  padding:18px;

  border-radius:
    var(--radius);

  background:
    rgba(10,22,43,.65);

  border:
    1px solid
    var(--border);
}

.contact-info-card > span{

  width:42px;

  height:42px;

  flex:0 0 42px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:12px;

  background:
    rgba(37,99,235,.12);
}

.contact-info-card small{

  display:block;

  margin-bottom:2px;

  color:var(--muted);

  font-size:.70rem;
}

.contact-info-card strong{

  display:block;

  font-size:.90rem;
}

.map-box{

  overflow:hidden;

  min-height:280px;

  border-radius:
    var(--radius);

  border:
    1px solid
    var(--border);
}

.map-box iframe{
  display:block;
}


/* =========================================================
   29. CTA FINAL
   ========================================================= */

.final-cta{

  padding:54px 0;

  background:
    linear-gradient(
      110deg,
      rgba(37,99,235,.20),
      rgba(6,182,212,.11),
      rgba(34,197,94,.08)
    );

  border-top:
    1px solid
    var(--border-soft);

  border-bottom:
    1px solid
    var(--border-soft);
}

.final-cta-content{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;
}

.final-cta-content span{

  display:block;

  margin-bottom:6px;

  color:var(--cyan-light);

  font-size:.69rem;

  font-weight:800;

  letter-spacing:.14em;
}

.final-cta-content h2{

  max-width:660px;

  font-size:
    clamp(
      1.7rem,
      3vw,
      2.45rem
    );

  line-height:1.15;
}


/* =========================================================
   30. FOOTER
   ========================================================= */

.site-footer{

  padding:
    65px 0 23px;

  background:
    #020617;

  border-top:
    1px solid
    var(--border-soft);
}

.footer-grid{

  display:grid;

  grid-template-columns:
    1.7fr repeat(3,1fr);

  gap:45px;

  padding-bottom:45px;
}

.footer-brand .brand{

  min-width:0;

  margin-bottom:16px;
}

.footer-logo{

  width:auto;

  height:50px;

  object-fit:contain;
}

.footer-brand .brand strong{

  display:block;

  margin-bottom:3px;

  font-size:1.08rem;
}

.footer-brand .brand span{

  display:block;

  max-width:250px;

  color:var(--muted);

  font-size:.73rem;

  line-height:1.4;
}

.footer-brand > p{

  max-width:360px;

  color:var(--muted);

  font-size:.83rem;
}

.footer-grid h4{

  margin-bottom:15px;

  color:var(--text-soft);

  font-size:.83rem;

  text-transform:uppercase;

  letter-spacing:.08em;
}

.footer-grid > div:not(.footer-brand){

  display:flex;

  flex-direction:column;

  align-items:flex-start;
}

.footer-grid a{

  margin-bottom:8px;

  color:var(--muted);

  font-size:.82rem;

  transition:var(--transition);
}

.footer-grid a:hover{
  color:var(--cyan-light);
}

.footer-bottom{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:20px;

  padding-top:20px;

  border-top:
    1px solid
    var(--border-soft);
}

.footer-bottom p{

  color:var(--muted-2);

  font-size:.74rem;
}


/* =========================================================
   31. WHATSAPP FLOTANTE
   ========================================================= */

.wa-float{

  position:fixed !important;

  right:20px !important;

  bottom:20px !important;

  z-index:9999;

  display:flex;

  align-items:center;

  gap:10px;

  min-width:185px;

  padding:10px 15px;

  color:#fff;

  background:
    rgba(5,15,25,.92);

  border:
    1px solid
    rgba(34,197,94,.25);

  border-radius:999px;

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.45);

  backdrop-filter:
    blur(14px);

  transition:var(--transition);
}

.wa-float:hover{

  transform:
    translateY(-3px);

  background:
    rgba(13,40,30,.95);

  border-color:
    rgba(34,197,94,.45);
}

.wa-pulse{

  position:absolute;

  left:15px;

  width:29px;

  height:29px;

  border-radius:50%;

  background:
    rgba(34,197,94,.16);

  animation:
    waPulse 2s infinite;
}

@keyframes waPulse{

  0%{
    transform:scale(.8);
    opacity:.8;
  }

  70%{
    transform:scale(1.5);
    opacity:0;
  }

  100%{
    opacity:0;
  }

}

.wa-ico{

  position:relative;

  z-index:2;

  width:30px;

  height:30px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:50%;

  color:#06110a;

  background:
    var(--green);

  font-size:.82rem;

  font-weight:900;
}

.wa-float div{
  line-height:1.2;
}

.wa-float small{

  display:block;

  color:var(--muted);

  font-size:.60rem;
}

.wa-float strong{

  display:block;

  margin-top:2px;

  font-size:.77rem;
}


/* =========================================================
   32. BOTÓN SUBIR
   ========================================================= */

.to-top{

  position:fixed !important;

  right:20px !important;

  bottom:84px !important;

  z-index:9998;

  width:43px;

  height:43px;

  display:flex;

  align-items:center;

  justify-content:center;

  color:#fff;

  background:
    rgba(5,15,28,.90);

  border:
    1px solid
    var(--border);

  border-radius:13px;

  cursor:pointer;

  opacity:0;

  visibility:hidden;

  transform:
    translateY(10px);

  transition:
    opacity .2s ease,
    visibility .2s ease,
    transform .2s ease,
    background .2s ease;
}

.to-top.show{

  opacity:1;

  visibility:visible;

  transform:
    translateY(0);
}

.to-top:hover{

  background:
    rgba(37,99,235,.20);

  border-color:
    rgba(96,165,250,.30);
}


/* =========================================================
   33. ANIMACIONES SUAVES
   ========================================================= */

@keyframes floatSoft{

  0%,
  100%{
    transform:
      translateY(0);
  }

  50%{
    transform:
      translateY(-7px);
  }

}

.card-sales{

  animation:
    floatSoft 5s
    ease-in-out infinite;
}

.card-sunat{

  animation:
    floatSoft 6s
    ease-in-out infinite;
}


/* =========================================================
   34. RESPONSIVE - 1100
   ========================================================= */

@media(max-width:1100px){

  .nav{
    gap:1px;
  }

  .nav a{
    padding:
      9px 9px;

    font-size:.82rem;
  }

  .btn-header{
    padding:
      10px 13px;

    font-size:.80rem;
  }

  .brand{
    min-width:220px;
  }

  .logo{
    height:65px;
  }

  .brand-text span{
    max-width:200px;
  }

  .hero-grid{

    grid-template-columns:
      1fr 1fr;

    gap:50px;
  }

  .hero-text h2{

    font-size:
      clamp(
        2.6rem,
        5vw,
        4.3rem
      );
  }

}


/* =========================================================
   35. RESPONSIVE - TABLET
   ========================================================= */

@media(max-width:900px){

  html{
    scroll-padding-top:80px;
  }

  .site-header{
    position:sticky;
  }

  .nav-container{

    min-height:76px;

    padding:
      8px 0;
  }

  .logo{
    height:57px;
  }

  .brand-text span{
    display:none;
  }

  .brand{
    min-width:0;
  }


  /* Botón móvil */

  .nav-toggle{

    width:43px;

    height:43px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

    margin-left:auto;

    border-radius:12px;

    background:
      rgba(37,99,235,.09);

    border:
      1px solid
      rgba(96,165,250,.15);

    cursor:pointer;

    z-index:1002;
  }


  /* Menú móvil */

  .nav{

    position:absolute;

    top:
      calc(100% + 10px);

    left:4%;

    right:4%;

    display:none;

    flex-direction:column;

    align-items:stretch;

    padding:13px;

    border-radius:
      var(--radius);

    background:
      rgba(5,11,28,.97);

    border:
      1px solid
      var(--border);

    box-shadow:
      var(--shadow);

    backdrop-filter:
      blur(18px);
  }

  .nav.open{
    display:flex;
  }

  .nav a{

    width:100%;

    padding:
      12px 13px;

    border-radius:10px;
  }

  .btn-header{
    display:none;
  }


  /* Hero */

  .hero{

    min-height:auto;

    padding:
      70px 0 80px;
  }

  .hero-grid{

    grid-template-columns:1fr;

    gap:60px;
  }

  .hero-text{
    max-width:760px;
  }

  .hero-text h2{
    max-width:750px;
  }

  .hero-media{
    max-width:720px;
    margin:0 auto;
  }

  .system-showcase{
    max-width:680px;
  }


  /* Soluciones */

  .solution-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  /* Funciones */

  .features-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  /* Demo */

  .demo-grid{

    grid-template-columns:1fr;

    gap:50px;
  }


  /* Beneficios */

  .benefits-modern{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .benefits-modern article{
    border-bottom:
      1px solid
      var(--border);
  }

  .benefits-modern article:nth-child(2){
    border-right:0;
  }


  /* Implementación */

  .steps-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  /* Planes */

  .pricing-grid{
    grid-template-columns:1fr;
  }

  .plan{
    max-width:650px;
    width:100%;
    margin:0 auto;
  }

  .plan-featured{
    transform:none;
  }

  .plan-featured:hover{
    transform:
      translateY(-6px);
  }


  /* Soporte */

  .support-grid{

    grid-template-columns:1fr;

    gap:45px;
  }


  /* Nosotros */

  .about-grid{

    grid-template-columns:1fr;

    gap:45px;
  }

  .about-card{
    justify-self:start;
  }


  /* Contacto */

  .contact-grid{
    grid-template-columns:1fr;
  }


  /* Footer */

  .footer-grid{

    grid-template-columns:
      1.5fr 1fr 1fr;

    gap:35px;
  }

  .footer-grid > div:last-child{
    grid-column:2 / 4;
  }

}


/* =========================================================
   36. RESPONSIVE - MÓVIL
   ========================================================= */

@media(max-width:600px){

  .container{
    width:min(93%,520px);
  }

  .section{
    padding:70px 0;
  }

  .section-header{
    margin-bottom:32px;
  }

  .section-header h2{
    font-size:2rem;
  }


  /* Header */

  .nav-container{
    min-height:69px;
  }

  .logo{
    height:51px;
    max-width:75px;
  }

  .brand{
    gap:9px;
  }

  .brand-text h1{
    font-size:1.1rem;
  }


  /* Hero */

  .hero{

    padding:
      55px 0 70px;
  }

  .hero-eyebrow{

    font-size:.68rem;

    white-space:normal;
  }

  .hero-text h2{

    font-size:
      clamp(
        2.4rem,
        13vw,
        3.65rem
      );
  }

  .hero-description{
    font-size:.98rem;
  }

  .hero-list{
    grid-template-columns:1fr;
  }

  .hero-cta{

    flex-direction:column;

    align-items:stretch;
  }

  .hero-cta .btn{
    width:100%;
  }

  .hero-business{
    gap:6px;
  }


  /* Pantalla */

  .system-window{

    transform:none;

    border-radius:17px;
  }

  .system-window img{
    min-height:220px;
  }

  .floating-card{
    display:none;
  }


  /* Barra plataforma */

  .platform-bar .container{

    flex-direction:column;

    align-items:flex-start;

    gap:16px;
  }

  .platform-items{

    justify-content:flex-start;

    gap:8px 10px;
  }


  /* Soluciones */

  .solution-grid{
    grid-template-columns:1fr;
  }

  .solution-image{
    height:210px;
  }


  /* Funciones */

  .features-grid{
    grid-template-columns:1fr;
  }


  /* Demo */

  .demo-grid{
    gap:38px;
  }

  .demo-content h2{
    font-size:2.05rem;
  }


  /* Beneficios */

  .benefits-modern{
    grid-template-columns:1fr;
  }

  .benefits-modern article{

    min-height:auto;

    padding:25px 10px;

    border-right:0;

    border-bottom:
      1px solid
      var(--border);
  }


  /* Clientes */

  .client-placeholder{
    padding:33px 22px;
  }


  /* Pasos */

  .steps-grid{
    grid-template-columns:1fr;
  }


  /* Soporte */

  .support-items{
    grid-template-columns:1fr;
  }


  /* Contacto */

  .form-row{
    grid-template-columns:1fr;
  }


  /* CTA final */

  .final-cta-content{

    flex-direction:column;

    align-items:flex-start;
  }

  .final-cta .btn{
    width:100%;
  }


  /* Footer */

  .footer-grid{

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:30px;
  }

  .footer-brand{
    grid-column:
      1 / -1;
  }

  .footer-grid > div:last-child{
    grid-column:auto;
  }

  .footer-bottom{

    flex-direction:column;

    align-items:flex-start;

    gap:5px;
  }


  /* WhatsApp */

  .wa-float{

    right:12px !important;

    bottom:12px !important;

    min-width:0;

    width:52px;

    height:52px;

    padding:0;

    justify-content:center;
  }

  .wa-float div{
    display:none;
  }

  .wa-pulse{
    left:11px;
  }

  .wa-ico{

    width:34px;

    height:34px;
  }


  /* Botón subir */

  .to-top{

    right:12px !important;

    bottom:72px !important;
  }

}


/* =========================================================
   37. PANTALLAS MUY PEQUEÑAS
   ========================================================= */

@media(max-width:380px){

  .hero-text h2{
    font-size:2.25rem;
  }

  .brand-text h1{
    font-size:1rem;
  }

  .logo{
    height:46px;
  }

}


/* =========================================================
   38. REDUCIR ANIMACIONES POR ACCESIBILIDAD
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{

    animation-duration:.01ms !important;

    animation-iteration-count:1 !important;

    transition-duration:.01ms !important;
  }

}


/* =========================================================
   39. AJUSTES HERO - DASHBOARD REAL SISFAC
   ========================================================= */
.system-showcase{max-width:680px;}
.system-window{background:linear-gradient(180deg,#081325,#050b18);}
.system-window img{
  width:100%;
  min-height:0;
  aspect-ratio:1365 / 596;
  object-fit:contain;
  object-position:center;
  background:#fff;
}
.hero-media{overflow:visible;}
.hero-text h2{max-width:720px;}

/* =========================================================
   40. POOL DE NEGOCIOS / GIROS
   ========================================================= */
.business-pool{overflow:hidden;}
.business-pool::before{
  content:"";position:absolute;width:620px;height:620px;top:-320px;left:-250px;
  border-radius:50%;background:rgba(37,99,235,.08);filter:blur(90px);pointer-events:none;
}
.business-pool::after{
  content:"";position:absolute;width:560px;height:560px;right:-260px;bottom:-300px;
  border-radius:50%;background:rgba(34,197,94,.06);filter:blur(100px);pointer-events:none;
}
.business-groups{
  position:relative;z-index:2;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
}
.business-group{
  position:relative;min-height:230px;padding:25px 22px;overflow:hidden;
  border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(17,34,65,.88),rgba(7,18,37,.84));
  border:1px solid var(--border);box-shadow:0 15px 36px rgba(0,0,0,.18);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.business-group::before{
  content:"";position:absolute;inset:0;opacity:0;
  background:radial-gradient(280px 180px at 15% 0%,rgba(37,99,235,.14),transparent 70%);
  transition:opacity .25s ease;pointer-events:none;
}
.business-group:hover{
  transform:translateY(-5px);border-color:rgba(34,211,238,.25);
  box-shadow:0 22px 52px rgba(0,0,0,.28);
}
.business-group:hover::before{opacity:1;}
.business-group-icon{
  position:relative;z-index:1;width:46px;height:46px;display:flex;align-items:center;
  justify-content:center;margin-bottom:17px;border-radius:14px;font-size:1.22rem;
  background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(6,182,212,.10));
  border:1px solid rgba(96,165,250,.15);
}
.business-group h3{position:relative;z-index:1;margin-bottom:14px;font-size:1.02rem;}
.business-group p{position:relative;z-index:1;margin-bottom:15px;color:var(--muted);font-size:.84rem;}
.business-tags{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;}
.business-tags span{
  display:inline-flex;align-items:center;min-height:29px;padding:5px 9px;border-radius:999px;
  color:var(--text-soft);background:rgba(255,255,255,.035);
  border:1px solid rgba(148,163,184,.13);font-size:.72rem;font-weight:600;
}
.business-group .card-link{position:relative;z-index:1;}
.business-pool-cta{
  position:relative;z-index:2;margin-top:34px;padding:23px 25px;display:flex;
  align-items:center;justify-content:space-between;gap:25px;border-radius:var(--radius);
  background:linear-gradient(105deg,rgba(37,99,235,.14),rgba(6,182,212,.07),rgba(34,197,94,.06));
  border:1px solid rgba(96,165,250,.15);
}
.business-pool-cta p{color:var(--text-soft);font-size:.94rem;font-weight:650;}

/* =========================================================
   41. DASHBOARD - SISFAC POR DENTRO
   ========================================================= */
.dashboard-section{overflow:hidden;}
.dashboard-section::before{
  content:"";position:absolute;width:650px;height:650px;left:50%;top:35%;
  transform:translate(-50%,-50%);border-radius:50%;background:rgba(37,99,235,.09);
  filter:blur(110px);pointer-events:none;
}
.dashboard-tabs{
  position:relative;z-index:2;width:max-content;max-width:100%;margin:0 auto 24px;padding:6px;
  display:flex;align-items:center;gap:5px;overflow-x:auto;border-radius:999px;
  background:rgba(3,10,25,.70);border:1px solid var(--border);box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.dashboard-tabs::-webkit-scrollbar{height:0;}
.dashboard-tab{
  flex:0 0 auto;padding:10px 18px;border-radius:999px;color:var(--muted);
  background:transparent;cursor:pointer;font-size:.82rem;font-weight:700;transition:var(--transition);
}
.dashboard-tab:hover{color:#fff;background:rgba(37,99,235,.09);}
.dashboard-tab.active{
  color:#fff;background:linear-gradient(135deg,rgba(37,99,235,.34),rgba(6,182,212,.18));
  box-shadow:0 8px 24px rgba(37,99,235,.17);
}
.dashboard-showcase{position:relative;z-index:2;max-width:1120px;margin:0 auto;}
.dashboard-browser{
  overflow:hidden;border-radius:24px;background:#07101f;border:1px solid rgba(96,165,250,.23);
  box-shadow:0 35px 90px rgba(0,0,0,.48),0 0 80px rgba(37,99,235,.08);
}
.dashboard-browser-top{
  min-height:50px;padding:0 17px;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:16px;background:rgba(255,255,255,.025);
  border-bottom:1px solid var(--border-soft);
}
.dashboard-browser-top strong{
  color:var(--text-soft);font-size:.78rem;font-weight:650;text-align:center;
}
.dashboard-online{
  justify-self:end;display:flex;align-items:center;gap:7px;color:var(--muted);
  font-size:.69rem;font-weight:650;
}
.dashboard-online i{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 4px rgba(34,197,94,.10);
}
.dashboard-image-wrap{
  position:relative;min-height:340px;display:flex;align-items:center;justify-content:center;background:#f8fafc;
}
.dashboard-image-wrap img{
  width:100%;height:auto;max-height:620px;object-fit:contain;object-position:top center;background:#fff;
  transition:opacity .22s ease,transform .22s ease;
}
.dashboard-image-wrap img.is-changing{opacity:.18;transform:scale(.992);}
.dashboard-caption{
  margin-top:18px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;
  gap:30px;border-radius:var(--radius);
  background:linear-gradient(105deg,rgba(14,29,56,.86),rgba(8,20,40,.76));
  border:1px solid var(--border);
}
.dashboard-caption>div{max-width:720px;}
.dashboard-caption span{
  display:block;margin-bottom:6px;color:var(--cyan-light);font-size:.68rem;
  font-weight:850;letter-spacing:.12em;
}
.dashboard-caption h3{margin-bottom:5px;font-size:1.15rem;}
.dashboard-caption p{color:var(--muted);font-size:.85rem;}
.dashboard-thumbnails{
  position:relative;z-index:2;max-width:980px;margin:18px auto 0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
}
.dashboard-thumb{
  overflow:hidden;padding:0;color:var(--text-soft);background:rgba(8,19,38,.82);
  border:1px solid var(--border);border-radius:14px;cursor:pointer;transition:var(--transition);
}
.dashboard-thumb:hover{transform:translateY(-3px);border-color:rgba(34,211,238,.25);}
.dashboard-thumb.active{
  border-color:rgba(34,211,238,.45);box-shadow:0 14px 30px rgba(6,182,212,.10);
}
.dashboard-thumb img{width:100%;height:84px;object-fit:cover;object-position:top center;background:#fff;}
.dashboard-thumb span{display:block;padding:9px 10px 10px;font-size:.72rem;font-weight:700;}

/* =========================================================
   42. INDICADORES / CONTROL EMPRESARIAL
   ========================================================= */
.control-section{overflow:hidden;}
.control-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
}
.control-grid article{
  position:relative;min-height:220px;padding:25px 23px;overflow:hidden;border-radius:var(--radius);
  background:linear-gradient(155deg,rgba(15,31,59,.82),rgba(7,18,37,.78));
  border:1px solid var(--border);transition:var(--transition);
}
.control-grid article:hover{
  transform:translateY(-5px);border-color:rgba(96,165,250,.25);
  box-shadow:0 20px 46px rgba(0,0,0,.24);
}
.control-icon{
  width:43px;height:43px;display:flex;align-items:center;justify-content:center;margin-bottom:21px;
  border-radius:13px;color:var(--cyan-light);font-weight:900;
  background:rgba(37,99,235,.11);border:1px solid rgba(96,165,250,.13);
}
.control-grid article>span{
  display:block;margin-bottom:5px;color:var(--cyan-light);font-size:.67rem;
  font-weight:800;letter-spacing:.10em;text-transform:uppercase;
}
.control-grid h3{margin-bottom:8px;font-size:1.08rem;}
.control-grid p{color:var(--muted);font-size:.84rem;}

/* =========================================================
   43. AJUSTES MENÚ DESKTOP
   ========================================================= */
@media(min-width:901px){
  .nav{gap:2px;}
  .nav a{padding:10px 10px;font-size:.82rem;}
  .btn-header{padding-left:15px;padding-right:15px;}
}

/* =========================================================
   44. RESPONSIVE NUEVAS SECCIONES
   ========================================================= */
@media(max-width:1100px){
  .business-groups{grid-template-columns:repeat(3,minmax(0,1fr));}
  .dashboard-image-wrap{min-height:300px;}
}

@media(max-width:900px){
  .business-groups{grid-template-columns:repeat(2,minmax(0,1fr));}
  .business-pool-cta{align-items:flex-start;flex-direction:column;}
  .dashboard-browser-top{grid-template-columns:auto 1fr auto;}
  .dashboard-caption{align-items:flex-start;flex-direction:column;}
  .dashboard-thumbnails{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dashboard-thumb img{height:105px;}
  .control-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(max-width:600px){
  .business-groups{grid-template-columns:1fr;}
  .business-group{min-height:0;}
  .business-pool-cta{padding:20px;}
  .business-pool-cta .btn{width:100%;}
  .dashboard-tabs{width:100%;justify-content:flex-start;border-radius:14px;}
  .dashboard-tab{padding:9px 13px;font-size:.74rem;}
  .dashboard-browser{border-radius:16px;}
  .dashboard-browser-top{min-height:44px;grid-template-columns:auto 1fr;padding:0 12px;}
  .dashboard-browser-top strong{justify-self:end;text-align:right;font-size:.68rem;}
  .dashboard-online{display:none;}
  .dashboard-image-wrap{min-height:190px;}
  .dashboard-caption{padding:19px;}
  .dashboard-caption .btn{width:100%;}
  .dashboard-thumbnails{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
  .dashboard-thumb img{height:82px;}
  .control-grid{grid-template-columns:1fr;}
  .control-grid article{min-height:0;}
}

@media(max-width:380px){
  .dashboard-thumbnails{grid-template-columns:1fr;}
  .dashboard-thumb img{height:110px;}
}

/* =========================================================
   48. SISFAC DESDE CUALQUIER LUGAR
   ========================================================= */

.remote-access{
  position:relative;
  padding:55px 0;
  overflow:hidden;

  background:
    linear-gradient(
      110deg,
      rgba(37,99,235,.16),
      rgba(6,182,212,.08),
      rgba(34,197,94,.06)
    );

  border-top:
    1px solid var(--border-soft);

  border-bottom:
    1px solid var(--border-soft);
}

.remote-access::before{
  content:"";
  position:absolute;

  width:430px;
  height:430px;

  left:-180px;
  top:-190px;

  border-radius:50%;

  background:
    rgba(37,99,235,.10);

  filter:
    blur(80px);
}

.remote-access-grid{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:
    auto 1fr .75fr;

  align-items:center;

  gap:30px;
}

.remote-access-icon{
  width:72px;
  height:72px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  border-radius:20px;

  font-size:2rem;

  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,.22),
      rgba(6,182,212,.12)
    );

  border:
    1px solid
    rgba(96,165,250,.20);

  box-shadow:
    0 20px 45px
    rgba(0,0,0,.20);
}

.remote-access-content h2{
  margin-bottom:10px;

  font-size:
    clamp(
      1.7rem,
      3vw,
      2.4rem
    );

  line-height:1.15;
}

.remote-access-content > p{
  max-width:650px;

  margin-bottom:17px;

  color:var(--muted);

  font-size:.92rem;
}

.remote-devices{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.remote-devices span{
  display:inline-flex;
  align-items:center;

  padding:6px 10px;

  border-radius:999px;

  color:var(--text-soft);

  background:
    rgba(255,255,255,.035);

  border:
    1px solid
    rgba(148,163,184,.13);

  font-size:.74rem;
}

.remote-access-note{
  display:flex;
  align-items:flex-start;

  gap:12px;

  padding:20px;

  border-radius:18px;

  background:
    rgba(7,18,38,.72);

  border:
    1px solid
    rgba(34,197,94,.16);
}

.remote-access-note > span{
  font-size:1.35rem;
}

.remote-access-note strong{
  display:block;

  margin-bottom:5px;

  font-size:.88rem;
}

.remote-access-note p{
  color:var(--muted);

  font-size:.78rem;
}


/* =========================================================
   49. NOTA DASHBOARD PARA PROPIETARIOS
   ========================================================= */

.dashboard-owner-note{
  max-width:760px;

  margin:
    20px auto 0;

  padding:
    13px 17px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  border-radius:14px;

  color:var(--text-soft);

  background:
    rgba(163,230,53,.05);

  border:
    1px solid
    rgba(163,230,53,.13);
}

.dashboard-owner-note span{
  flex:0 0 auto;
}

.dashboard-owner-note p{
  margin:0;

  color:var(--muted);

  font-size:.79rem;

  text-align:left;
}


/* RESPONSIVE */

@media(max-width:900px){

  .remote-access-grid{

    grid-template-columns:
      auto 1fr;

  }

  .remote-access-note{

    grid-column:
      1 / -1;

  }

}


@media(max-width:600px){

  .remote-access{
    padding:45px 0;
  }

  .remote-access-grid{

    grid-template-columns:
      1fr;

  }

  .remote-access-icon{

    width:60px;
    height:60px;

  }

  .remote-access-note{

    grid-column:auto;

  }

  .dashboard-owner-note{

    align-items:flex-start;

  }

}

/* =========================================================
   50. DISPOSITIVOS - CELULAR / TABLET / LAPTOP
   ========================================================= */

.device-showcase{
  position:relative;
  width:100%;
  max-width:720px;
  margin:0 auto;
  padding-top:115px;
}

.device-label{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);

  display:flex;
  align-items:center;
  gap:8px;

  padding:8px 13px;

  border-radius:999px;

  color:var(--text-soft);

  background:rgba(7,18,38,.78);

  border:1px solid rgba(96,165,250,.18);

  font-size:.74rem;
  font-weight:650;

  white-space:nowrap;

  backdrop-filter:blur(12px);
}

.device-dot{
  width:7px;
  height:7px;

  border-radius:50%;

  background:var(--green);

  box-shadow:
    0 0 0 5px
    rgba(34,197,94,.10);
}


/* =========================================================
   ESCENARIO DE DISPOSITIVOS
   ========================================================= */

.devices-stage{
  position:absolute;

  /* subimos ligeramente los dispositivos */
  top:35px;
  left:50%;

  width:100%;
  height:190px;

  transform:translateX(-50%);

  /* dispositivos por encima */
  z-index:5;
}


/* =========================================================
   BASE DISPOSITIVO
   ========================================================= */

.device{
  position:absolute;

  text-align:center;

  transition:
    transform .3s ease,
    filter .3s ease;
}

.device:hover{
  transform:
    translateY(-6px)
    scale(1.02);
}

.device-screen{
  overflow:hidden;

  background:#fff;

  border:
    1px solid
    rgba(148,163,184,.24);

  box-shadow:
    0 20px 45px
    rgba(0,0,0,.30);
}

.device-screen img{
  width:100%;
  height:100%;

  object-fit:contain;

  background:#fff;
}

.device-name{
  display:inline-block;

  margin-top:7px;

  color:var(--text-soft);

  font-size:.70rem;

  font-weight:700;

  text-transform:uppercase;

  letter-spacing:.06em;
}


/* =========================================================
   CELULAR
   ========================================================= */

.device-phone{
  left:7%;
  top:27px;

  width:75px;

  z-index:4;
}

.device-phone .device-screen{
  aspect-ratio:9 / 18;

  border-radius:15px;

  padding:4px;

  border:
    3px solid
    #111827;
}


/* =========================================================
   TABLET
   ========================================================= */

.device-tablet{
  left:31%;
  top:0;

  width:150px;

  z-index:3;
}

.device-tablet .device-screen{
  aspect-ratio:3 / 4;

  border-radius:13px;

  padding:5px;

  border:
    5px solid
    #111827;
}


/* =========================================================
   LAPTOP
   ========================================================= */

.device-laptop{
  right:0;
  top:7px;

  width:255px;

  z-index:2;
}

.device-laptop .device-screen{
  aspect-ratio:16 / 10;

  border-radius:8px 8px 3px 3px;

  padding:5px;

  border:
    5px solid
    #111827;
}


/* Base laptop */

.device-laptop::after{
  content:"";

  position:absolute;

  left:-10px;
  right:-10px;

  bottom:22px;

  height:7px;

  border-radius:
    0 0 12px 12px;

  background:
    linear-gradient(
      180deg,
      #475569,
      #1e293b
    );

  box-shadow:
    0 7px 12px
    rgba(0,0,0,.25);
}


/* =========================================================
   MENSAJE CENTRAL
   ========================================================= */

.device-message{
  position:absolute;

  top:205px;
  right:20px;

  z-index:8;

  display:flex;
  align-items:flex-start;
  gap:12px;

  max-width:265px;

  padding:13px 15px;

  border-radius:16px;

  background:rgba(7,18,38,.95);

  border:1px solid rgba(34,211,238,.18);

  box-shadow:
    0 18px 45px rgba(0,0,0,.32);

  backdrop-filter:blur(12px);
}

.device-message-icon{
  width:34px;
  height:34px;

  flex:0 0 34px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:10px;

  background:
    rgba(37,99,235,.12);
}

.device-message small{
  display:block;

  margin-bottom:2px;

  color:var(--muted);

  font-size:.64rem;
}

.device-message strong{
  display:block;

  color:var(--text);

  font-size:.78rem;
}

.device-message p{
  margin-top:4px;

  color:var(--muted);

  font-size:.70rem;
}


/* =========================================================
   DASHBOARD ABAJO
   ========================================================= */

.device-dashboard{
  margin-top:85px;
}


/* =========================================================
   RESPONSIVE TABLET
   ========================================================= */

@media(max-width:900px){

  .device-showcase{
    max-width:680px;
    padding-top:130px;
  }

  .devices-stage{
    height:190px;
  }

  .device-phone{
    left:5%;
  }

  .device-tablet{
    left:28%;
  }

  .device-laptop{
    right:2%;
    width:245px;
  }

}


/* =========================================================
   RESPONSIVE MÓVIL
   ========================================================= */

@media(max-width:600px){

  .device-showcase{
    padding-top:250px;
  }

  .device-label{
    width:100%;

    justify-content:center;

    text-align:center;

    white-space:normal;
  }

  .devices-stage{
    top:55px;

    height:210px;
  }

  .device-phone{
    left:4%;
    top:50px;

    width:62px;
  }

  .device-tablet{
    left:27%;
    top:20px;

    width:110px;
  }

  .device-laptop{
    right:0;
    top:35px;

    width:190px;
  }

  .device-message{
    top:208px;
    right:0;

    max-width:220px;

    padding:10px 12px;
  }

  .device-dashboard{
  position: relative;

  /* separación entre dispositivos y dashboard */
  margin-top: 155px;

  /* mantiene el dashboard por debajo */
  z-index: 2;
}

}


/* =========================================================
   PANTALLAS MUY PEQUEÑAS
   ========================================================= */

@media(max-width:390px){

  .device-showcase{
    padding-top:310px;
  }

  .devices-stage{
    height:270px;
  }

  .device-phone{
    left:3%;
    top:80px;
  }

  .device-tablet{
    left:25%;
    top:45px;
  }

  .device-laptop{
    right:0;
    top:70px;

    width:170px;
  }

  .device-message{
    top:250px;
    left:0;
    right:auto;

    max-width:100%;
  }

}

/* =========================================================
   50. HERO PRODUCT SHOWCASE
   CELULAR + TABLET + LAPTOP + DASHBOARD
   ========================================================= */

.hero-product-showcase{

    width:100%;

    max-width:720px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    position:relative;

}


/* =========================================================
   MENSAJE ACCESO INTERNET
   ========================================================= */

.devices-access-label{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    margin-bottom:25px;

    padding:8px 15px;

    border-radius:999px;

    color:var(--text-soft);

    background:
        rgba(7,18,38,.72);

    border:
        1px solid
        rgba(34,211,238,.18);

    font-size:.74rem;

    font-weight:700;

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.18);

}


.devices-access-label span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:
        var(--green);

    box-shadow:
        0 0 0 5px
        rgba(34,197,94,.10);

}


/* =========================================================
   FILA DE DISPOSITIVOS
   ========================================================= */

.devices-row{

    width:100%;

    min-height:245px;

    display:flex;

    align-items:flex-end;

    justify-content:center;

    gap:26px;

    position:relative;

    padding:
        0 15px 10px;

}


/* EFECTO LUZ */

.devices-row::before{

    content:"";

    position:absolute;

    left:50%;

    bottom:10px;

    transform:
        translateX(-50%);

    width:90%;

    height:90px;

    border-radius:50%;

    background:
        rgba(37,99,235,.16);

    filter:
        blur(45px);

    pointer-events:none;

}


/* =========================================================
   DISPOSITIVO GENERAL
   ========================================================= */

.device-item{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-end;

    transition:
        transform .30s ease;

}


.device-item:hover{

    transform:
        translateY(-7px);

}


.device-image{

    display:flex;

    align-items:flex-end;

    justify-content:center;

}


.device-image img{

    display:block;

    width:100%;

    height:auto;

    object-fit:contain;

    /* IMPORTANTE */
    background:transparent !important;

    filter:
        drop-shadow(
            0 18px 25px
            rgba(0,0,0,.40)
        );

}


/* =========================================================
   CELULAR
   ========================================================= */

.device-mobile{

    width:100px;

}


.device-mobile img{

    max-height:205px;

}


/* =========================================================
   TABLET
   ========================================================= */

.device-tablet-new{

    width:180px;

}


.device-tablet-new img{

    max-height:225px;

}


/* =========================================================
   LAPTOP
   ========================================================= */

.device-laptop-new{

    width:290px;

}


.device-laptop-new img{

    max-height:225px;

}


/* =========================================================
   NOMBRE DISPOSITIVO
   ========================================================= */

.device-caption{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    margin-top:9px;

    color:
        var(--text-soft);

}


.device-caption strong{

    font-size:.76rem;

    font-weight:650;

}


.device-caption-icon{

    color:
        var(--cyan-light);

    font-size:.85rem;

}


/* =========================================================
   MENSAJE SISFAC SIEMPRE CONTIGO
   ========================================================= */

.devices-message{

    width:min(390px,90%);

    margin:
        26px auto 48px;

    display:flex;

    align-items:center;

    gap:14px;

    padding:
        15px 18px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            rgba(12,28,54,.94),
            rgba(7,18,37,.94)
        );

    border:
        1px solid
        rgba(34,211,238,.18);

    box-shadow:
        0 20px 45px
        rgba(0,0,0,.30);

    backdrop-filter:
        blur(14px);

}


.devices-message-icon{

    width:42px;

    height:42px;

    flex:
        0 0 42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:13px;

    font-size:1.18rem;

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.24),
            rgba(6,182,212,.14)
        );

    border:
        1px solid
        rgba(96,165,250,.15);

}


.devices-message small{

    display:block;

    margin-bottom:2px;

    color:
        var(--muted);

    font-size:.67rem;

}


.devices-message strong{

    display:block;

    color:#fff;

    font-size:.88rem;

}


.devices-message p{

    margin-top:3px;

    color:
        var(--muted);

    font-size:.73rem;

}


/* =========================================================
   DASHBOARD PRINCIPAL
   ========================================================= */

.hero-dashboard{

    position:relative;

    width:100%;

    margin-top:0;

    padding:
        0 8px 25px;

}


/* VENTANA */

.hero-dashboard-window{

    width:100%;

    overflow:hidden;

    border-radius:22px;

    background:
        #07101f;

    border:
        1px solid
        rgba(96,165,250,.25);

    box-shadow:

        0 35px 80px
        rgba(0,0,0,.46),

        0 0 70px
        rgba(37,99,235,.08);

}


/* HEADER DASHBOARD */

.hero-dashboard-top{

    min-height:46px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:
        0 16px;

    color:
        var(--muted);

    background:
        rgba(255,255,255,.025);

    border-bottom:
        1px solid
        var(--border-soft);

    font-size:.72rem;

    font-weight:650;

}


/* IMAGEN DASHBOARD */

.hero-dashboard-window > img{

    display:block;

    width:100%;

    height:auto;

    background:#fff;

    object-fit:contain;

}


/* =========================================================
   TARJETAS FLOTANTES DASHBOARD
   ========================================================= */

.dashboard-floating{

    position:absolute;

    z-index:5;

    display:flex;

    align-items:center;

    gap:11px;

    min-width:190px;

    padding:
        12px 15px;

    border-radius:15px;

    color:#fff;

    background:
        rgba(9,19,39,.94);

    border:
        1px solid
        rgba(148,163,184,.17);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.35);

    backdrop-filter:
        blur(14px);

}


.dashboard-floating small{

    display:block;

    margin-bottom:2px;

    color:
        var(--muted);

    font-size:.66rem;

}


.dashboard-floating strong{

    display:block;

    font-size:.79rem;

}


/* VENTAS */

.dashboard-floating-sales{

    left:-23px;

    bottom:70px;

}


.dashboard-floating-icon{

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:11px;

    color:
        var(--cyan-light);

    background:
        rgba(6,182,212,.11);

}


/* CONTROL */

.dashboard-floating-control{

    right:-20px;

    top:65px;

}


.dashboard-status{

    width:13px;

    height:13px;

    flex:
        0 0 13px;

    border-radius:50%;

    background:
        var(--green);

    box-shadow:
        0 0 0 6px
        rgba(34,197,94,.10);

}


/* =========================================================
   RESPONSIVE 1100
   ========================================================= */

@media(max-width:1100px){

    .devices-row{

        gap:18px;

    }


    .device-mobile{

        width:82px;

    }


    .device-tablet-new{

        width:155px;

    }


    .device-laptop-new{

        width:245px;

    }

}


/* =========================================================
   RESPONSIVE TABLET
   ========================================================= */

@media(max-width:900px){

    .hero-product-showcase{

        max-width:680px;

    }


    .devices-row{

        min-height:225px;

    }


    .device-mobile{

        width:90px;

    }


    .device-tablet-new{

        width:165px;

    }


    .device-laptop-new{

        width:260px;

    }


    .devices-message{

        margin-bottom:55px;

    }

}


/* =========================================================
   RESPONSIVE CELULAR
   ========================================================= */

@media(max-width:600px){

    .devices-access-label{

        text-align:center;

        white-space:normal;

    }


    .devices-row{

        min-height:190px;

        gap:10px;

        padding-left:0;

        padding-right:0;

    }


    .device-mobile{

        width:60px;

    }


    .device-tablet-new{

        width:105px;

    }


    .device-laptop-new{

        width:170px;

    }


    .device-caption strong{

        font-size:.62rem;

    }


    .device-caption-icon{

        display:none;

    }


    .devices-message{

        width:100%;

        margin:
            20px 0 42px;

    }


    .hero-dashboard{

        padding:
            0 0 20px;

    }


    .hero-dashboard-window{

        border-radius:16px;

    }


    .dashboard-floating{

        display:none;

    }

}


/* =========================================================
   MUY PEQUEÑO
   ========================================================= */

@media(max-width:390px){

    .devices-row{

        gap:5px;

    }


    .device-mobile{

        width:52px;

    }


    .device-tablet-new{

        width:88px;

    }


    .device-laptop-new{

        width:145px;

    }

}
/* =========================================================
   FORMULARIO - ESTADOS DE ENVÍO
========================================================= */

.form-status{

  min-height:22px;

  margin-top:7px;

  font-size:.80rem;

  text-align:center;

  color:var(--muted);

}


.form-status.success{

  color:#86efac;

  padding:11px 13px;

  border-radius:10px;

  background:
    rgba(34,197,94,.08);

  border:
    1px solid
    rgba(34,197,94,.18);

}


.form-status.error{

  color:#fca5a5;

  padding:11px 13px;

  border-radius:10px;

  background:
    rgba(239,68,68,.08);

  border:
    1px solid
    rgba(239,68,68,.18);

}


#btnEnviarSolicitud:disabled{

  opacity:.70;

  cursor:not-allowed;

  transform:none;

}

/* =========================================================
   CONTADOR DE VISITAS
========================================================= */

.site-visits{
    margin-top:8px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    font-size:.76rem;
    color:var(--muted);
}

.site-visits strong{
    color:#e2e8f0;
    font-weight:700;
}

.visit-dot{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#22c55e;

    box-shadow:
        0 0 0 4px rgba(34,197,94,.10),
        0 0 12px rgba(34,197,94,.35);
}

/* =========================================================
   51. PANTALLAS GRANDES / FULL HD / MONITORES AMPLIOS
   Ajuste especial para aprovechar mejor resoluciones
   de 1400px en adelante sin afectar tablet ni móvil.
   ========================================================= */

@media(min-width:1400px){

  .container{
    width:min(1480px,94%);
  }

  .nav-container{
    min-height:92px;
  }

  .hero{
    min-height:calc(100vh - 92px);
    padding:72px 0 78px;
  }

  .hero-grid{
    grid-template-columns:
      minmax(0,1.04fr)
      minmax(600px,.96fr);
    gap:82px;
  }

  .hero-text{
    max-width:760px;
  }

  .hero-text h2{
    max-width:760px;
    font-size:clamp(3.3rem,4.35vw,5.4rem);
  }

  .hero-description{
    max-width:680px;
    font-size:1.08rem;
  }

  .hero-list{
    max-width:690px;
    gap:11px 28px;
  }

  .hero-media{
    width:100%;
    max-width:none;
  }

  .hero-product-showcase{
    max-width:860px;
  }

  .devices-row{
    min-height:265px;
    gap:32px;
  }

  .device-mobile{
    width:112px;
  }

  .device-mobile img{
    max-height:225px;
  }

  .device-tablet-new{
    width:195px;
  }

  .device-tablet-new img{
    max-height:245px;
  }

  .device-laptop-new{
    width:320px;
  }

  .device-laptop-new img{
    max-height:245px;
  }

  .devices-message{
    width:min(420px,90%);
    margin:24px auto 46px;
  }

  .hero-dashboard{
    max-width:860px;
    margin-left:auto;
    margin-right:auto;
  }

  .dashboard-showcase{
    max-width:1360px;
  }

  .dashboard-thumbnails{
    max-width:1160px;
  }

  .section-header{
    max-width:780px;
  }
}


/* =========================================================
   52. MONITORES EXTRA GRANDES
   ========================================================= */

@media(min-width:1800px){

  .container{
    width:min(1600px,92%);
  }

  .hero-grid{
    grid-template-columns:
      minmax(0,1fr)
      minmax(680px,1fr);
    gap:100px;
  }

  .hero-text{
    max-width:820px;
  }

  .hero-text h2{
    max-width:820px;
    font-size:5.6rem;
  }

  .hero-product-showcase{
    max-width:940px;
  }

  .hero-dashboard{
    max-width:940px;
  }
}

/* =========================================================
   53. PRECIOS Y CONFIGURACIÓN DE PLANES SISFAC
   ========================================================= */

.plan-configuration{

  display:inline-flex;

  align-items:center;

  width:max-content;

  max-width:100%;

  margin-bottom:18px;

  padding:7px 12px;

  color:var(--cyan-light);

  background:rgba(6,182,212,.07);

  border:1px solid rgba(34,211,238,.16);

  border-radius:999px;

  font-size:.76rem;

  font-weight:750;
}


.plan-price{

  display:flex;

  align-items:flex-end;

  gap:6px;

  min-height:64px;

  margin-bottom:8px;

  line-height:1;
}


.plan-price strong{

  color:#fff;

  font-size:3.15rem;

  font-weight:900;

  letter-spacing:-.05em;
}


.plan-currency{

  align-self:flex-start;

  margin-top:9px;

  color:var(--text-soft);

  font-size:1rem;

  font-weight:800;
}


.plan-period{

  margin-bottom:7px;

  color:var(--muted);

  font-size:.82rem;

  font-weight:650;
}


.plan-implementation{

  margin-bottom:25px;

  padding-bottom:20px;

  color:var(--muted);

  border-bottom:1px solid var(--border-soft);

  font-size:.78rem;
}


.plan-implementation strong{

  color:var(--text-soft);

  font-weight:750;
}


.plan-price-custom{

  align-items:center;
}


.plan-price-custom strong{

  color:transparent;

  background:
    linear-gradient(
      90deg,
      var(--blue-light),
      var(--cyan-light),
      var(--lime)
    );

  background-clip:text;

  -webkit-background-clip:text;

  font-size:2.15rem;

  letter-spacing:-.025em;
}


/* Plan recomendado */

.plan-featured .plan-configuration{

  color:#dbeafe;

  background:rgba(59,130,246,.12);

  border-color:rgba(96,165,250,.22);
}


.plan-featured .plan-price strong{

  text-shadow:
    0 0 35px
    rgba(59,130,246,.20);
}


/* Ayuda debajo de los planes */

.pricing-help{

  max-width:720px;

  margin:
    38px auto 0;

  padding:20px 24px;

  border-radius:16px;

  background:rgba(8,20,40,.52);

  border:1px solid var(--border-soft);
}


.pricing-help p{

  margin-bottom:6px;
}


.pricing-help p strong{

  color:var(--text-soft);
}


/* =========================================================
   RESPONSIVE PRECIOS
   ========================================================= */

@media(max-width:600px){

  .plan{

    padding:27px 23px;

  }


  .plan-price strong{

    font-size:2.75rem;

  }


  .plan-price-custom strong{

    font-size:1.9rem;

  }


  .plan-configuration{

    font-size:.72rem;

  }


  .pricing-help{

    padding:18px;

  }

}