:root{
  --bg:#0b1220; --bg2:#0f1b33; --card:#0f203f;
  --text:#e7eefc; --muted:#9fb2d1;
  --primary:#35d07f; --line:#203456; --warn:#f4c542; --err:#ff4d4d;
}

*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text);font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial}
a{color:inherit;text-decoration:none;opacity:.95}
a:hover{opacity:1}

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

.topbar{position:sticky;top:0;background:rgba(11,18,32,.75);backdrop-filter: blur(8px);border-bottom:1px solid var(--line);z-index:10}
.topbar__inner{display:flex;align-items:center;gap:18px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand__logo{width:28px;height:28px}
.brand__name{font-weight:700;letter-spacing:.2px}
.topbar__cta{display:flex;gap:10px}

.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid var(--line)}
.btn--primary{background:var(--primary);color:#06130c;border-color:transparent;font-weight:700}
.btn--ghost{background:transparent}
.btn--full{width:100%;text-align:center;margin-top:12px}

.hero{padding:52px 0 24px;border-bottom:1px solid var(--line)}
.hero__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:stretch}
.hero h1{font-size:40px;line-height:1.1;margin:0 0 12px}
.hero p{color:var(--muted);margin:0 0 18px}
.hero__actions{display:flex;gap:10px;flex-wrap:wrap}
.hero__kpis{display:flex;gap:14px;margin-top:18px;flex-wrap:wrap}
.kpi{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(15,32,63,.5)}
.kpi__n{display:block;font-weight:800;font-size:18px}
.kpi__t{display:block;color:var(--muted);font-size:13px}

.section{padding:38px 0}
.section--alt{background:rgba(15,32,63,.35);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2{margin:0 0 10px}
h3{margin:0 0 8px}
.muted{color:var(--muted)}
.card{background:rgba(15,32,63,.7);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card__title{font-weight:700;margin-bottom:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.list{margin:10px 0 0;padding-left:18px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--line);border-radius:999px;padding:8px 12px;background:rgba(15,32,63,.55);color:var(--muted)}

.panel__row{display:flex;gap:8px;margin:10px 0}
.pill{padding:6px 10px;border-radius:999px;border:1px solid var(--line);font-size:13px}
.pill--ok{background:rgba(53,208,127,.12);border-color:rgba(53,208,127,.35)}
.pill--warn{background:rgba(244,197,66,.12);border-color:rgba(244,197,66,.35)}
.panel__list{display:grid;gap:10px;margin-top:10px}
.panel__item{display:flex;justify-content:space-between;padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(11,18,32,.35)}

.cta{padding:34px 0}
.cta__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--line);border-radius:18px;padding:18px;background:rgba(15,32,63,.55)}

.footer{border-top:1px solid var(--line);padding:18px 0;color:var(--muted)}
.footer__inner{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.footer__links{display:flex;gap:12px}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
input, textarea{background:rgba(11,18,32,.55);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:10px}
textarea{min-height:90px;resize:vertical}
.error{color:var(--err);font-size:13px;margin-top:4px}

.messages{margin:16px 0}
.message{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(15,32,63,.6);margin-bottom:10px}
.message--success{border-color:rgba(53,208,127,.35)}

.status{padding:10px 12px;border-radius:12px;border:1px solid var(--line);margin:10px 0}
.status--ok{border-color:rgba(53,208,127,.45);background:rgba(53,208,127,.10)}
.status--warning{border-color:rgba(244,197,66,.45);background:rgba(244,197,66,.10)}
.status--error{border-color:rgba(255,77,77,.45);background:rgba(255,77,77,.10)}

@media (max-width: 920px){
  .hero__grid,.grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr 1fr}
  .nav{display:none}
}

.hero--bg{
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 70px 0 34px;
}

.hero__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 380px at 20% 30%, rgba(53,208,127,.15), transparent 55%),
    linear-gradient(90deg, rgba(11,18,32,.88) 0%, rgba(11,18,32,.70) 45%, rgba(11,18,32,.55) 100%);
  pointer-events:none;
}

.hero__grid{
  position: relative; /* para quedar arriba del overlay */
}

.hero__panel.card{
  background: rgba(15,32,63,.82);
  border-color: rgba(32,52,86,.9);
}

.card--icon{
  text-align:center;
  padding-top:22px;
}

.section-icon{
  width:72px;
  height:72px;
  margin:0 auto 12px;
  display:block;
  opacity:.95;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

.card--icon h3{
  margin-top:6px;
}

/* ===== Título estilo tecnológico ===== */

.section--title{
  padding-top:60px;
}

.section-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-bottom:40px;
}

.section-title h2{
  font-size:28px;
  font-weight:600;
  text-align:center;
  letter-spacing:.2px;
  color:#E7EEFC;
}

.section-title h2 span{
  font-weight:400;
  opacity:.85;
}

/* líneas punteadas */
.section-title__decor{
  flex:1;
  height:2px;
  max-width:160px;
  background: repeating-linear-gradient(
    to right,
    rgba(159,178,209,.5),
    rgba(159,178,209,.5) 6px,
    transparent 6px,
    transparent 12px
  );
  position:relative;
}

/* puntos luminosos */
.section-title__decor::before{
  content:"";
  position:absolute;
  top:-3px;
  left:50%;
  transform:translateX(-50%);
  width:8px;
  height:8px;
  border-radius:50%;
  background:#77E6FF;
  box-shadow:0 0 10px #77E6FF, 0 0 18px rgba(119,230,255,.6);
}

/* ===== SOLUCIÓN (WIREFRAME REAL) ===== */

.solution-section{
  padding:80px 0;
}

.solution-cards{
  margin-top:40px;
  gap:28px;
}

.solution-card{
  background: rgba(15,32,63,.85);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  transition:.3s ease;
}

.solution-card:hover{
  transform: translateY(-8px);
  border-color:#35D07F;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}

/* header con icono */

.solution-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.solution-header img{
  width:46px;
  height:46px;
}

.solution-card h3{
  font-size:20px;
  margin:0;
}

/* lista */

.solution-card ul{
  list-style:none;
  padding:0;
  margin:0;
}

.solution-card li{
  color:var(--muted);
  margin-bottom:6px;
  position:relative;
  padding-left:16px;
}

.solution-card li::before{
  content:"";
  width:6px;
  height:6px;
  background:#35D07F;
  border-radius:50%;
  position:absolute;
  left:0;
  top:9px;
}

/* MOBILE */

@media(max-width:900px){
  .solution-cards{
    grid-template-columns:1fr;
  }
}

/* ===== BENEFICIOS ===== */

.benefits-section{
  position:relative;
  overflow:hidden;
  padding:90px 0;
}

.benefits-cards{
  margin-top:40px;
  gap:30px;
}

.benefit-card{
  text-align:center;
  padding:30px;
  background: rgba(15,32,63,.85);
  border:1px solid var(--line);
  border-radius:20px;
  transition:.35s ease;
  position:relative;
  backdrop-filter: blur(6px);
}

.benefit-card img{
  width:72px;
  margin-bottom:14px;
  transition:.4s ease;
}

.benefit-card h3{
  margin-bottom:8px;
}

.benefit-card p{
  color:var(--muted);
  font-size:14px;
}

/* hover premium */

.benefit-card:hover img{
  transform: scale(1.12) rotate(3deg);
}

.benefit-card:hover{
  transform: translateY(-10px);
  border-color:#35D07F;
  box-shadow:0 25px 65px rgba(0,0,0,.45);
}

/* icono */

.benefit-icon{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:15px;
}

.benefit-icon img{
  width:70px;
  transition:.4s ease;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.4));
}

/* animación */

.benefit-card:hover .benefit-icon img{
  transform: scale(1.12) rotate(4deg);
}

/* glow */

.benefit-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at top, rgba(53,208,127,.15), transparent);
  opacity:0;
  transition:.35s;
}

.benefit-card:hover::before{
  opacity:1;
}

/* texto */

.benefit-card h3{
  margin-bottom:8px;
}

.benefit-card p{
  color:var(--muted);
}


/* ===== Parallax suave ===== */
.parallax{
  position: relative;
  overflow: hidden;
}

.parallax::before{
  content:"";
  position:absolute;
  inset:-80px;
  background-image: var(--parallax-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;

  /* 🔥 FOCO SUAVE */
  filter: blur(8px);

  /* ajuste visual */
  opacity: .35;
}


.parallax::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 400px at 20% 20%, rgba(53,208,127,.12), transparent 60%),
    linear-gradient(180deg, rgba(11,18,32,.82), rgba(11,18,32,.88));
}


.parallax > .container{
  position: relative;
  z-index: 1; /* para quedar sobre las capas */
}

.parallax{
  --parallax-bg: none;
}

@media (max-width:900px){
  .parallax::before{
    filter: blur(4px);
  }
}

.codeblock{
  margin:0;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background: rgba(11,18,32,.45);
  color: var(--text);
  overflow:auto;
  font-size:13px;
  line-height:1.45;
}

.api-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.api-steps{
  margin-top:10px;
}

.api-step{
  border:1px solid var(--line);
  border-radius:14px;
  background: rgba(11,18,32,.35);
  padding:12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.api-step b{
  width:28px;
  height:28px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(53,208,127,.14);
  border: 1px solid rgba(53,208,127,.35);
}

.text-center{
  text-align:center;
}

@media (max-width: 920px){
  .api-steps{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px){
  .api-steps{
    grid-template-columns: 1fr;
  }
}
/* ===== Flujo típico (upgrade) ===== */

.flow-card{
  padding:20px;
}

.flow-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.flow-title{
  margin:0;
}

.flow-sub{
  margin:6px 0 0;
}

.flow-steps{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  position:relative;
  padding-top:6px;
}

/* línea conectando pasos */
.flow-steps::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:28px;
  height:2px;
  background: linear-gradient(90deg, rgba(159,178,209,.15), rgba(53,208,127,.35), rgba(159,178,209,.15));
}

.flow-step{
  position:relative;
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(11,18,32,.35);
  padding:16px 14px;
  transition:.28s ease;
  min-height:130px;
}

.flow-step:hover{
  transform: translateY(-6px);
  border-color: rgba(53,208,127,.55);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.flow-badge{
  width:30px;
  height:30px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  background: rgba(53,208,127,.14);
  border:1px solid rgba(53,208,127,.35);
  position:absolute;
  top:-10px;
  left:14px;
}

.flow-icon{
  font-size:22px;
  width:44px;
  height:44px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:8px;
  background: rgba(15,32,63,.55);
  border:1px solid var(--line);
}

.flow-body{
  margin-top:10px;
}

.flow-label{
  font-size:12px;
  letter-spacing:.4px;
  text-transform:uppercase;
  color: var(--muted);
}

.flow-text{
  margin-top:4px;
  font-weight:700;
}

.flow-meta{
  margin-top:8px;
  font-size:12.5px;
  color: var(--muted);
  opacity:.9;
}

/* Responsive */
@media (max-width: 920px){
  .flow-steps{
    grid-template-columns:1fr 1fr;
  }
  .flow-steps::before{
    display:none;
  }
}

@media (max-width: 560px){
  .flow-steps{
    grid-template-columns:1fr;
  }
}

/* ===== Flujo típico 2x2 con flechas ===== */

.flow-card{ padding:22px; }

.flow-grid{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px 56px; /* más espacio para flechas */
  margin-top:14px;
}

.flow-box{
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(11,18,32,.35);
  padding:16px 14px;
  transition:.28s ease;
  min-height:140px;
  position:relative;
}

.flow-box:hover{
  transform: translateY(-6px);
  border-color: rgba(53,208,127,.55);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.flow-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.flow-num{
  width:30px;
  height:30px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  background: rgba(53,208,127,.14);
  border:1px solid rgba(53,208,127,.35);
}

.flow-ico{
  width:44px;
  height:44px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(15,32,63,.55);
  border:1px solid var(--line);
  font-size:22px;
}

.flow-box h4{
  margin:0 0 6px;
  font-size:16px;
}

.flow-box p{
  margin:0 0 8px;
  color: var(--text);
  opacity:.95;
}

.flow-meta{
  font-size:12.5px;
  color: var(--muted);
}

/* Flechas */
.flow-arrow{
  position:absolute;
  color: rgba(231,238,252,.75);
  font-size:24px;
  line-height:1;
  text-shadow: 0 10px 18px rgba(0,0,0,.35);
  opacity:.9;
}

/* 1 -> 2 (arriba) */
.flow-arrow--12{
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
}

/* 2 -> 3 (baja por el medio) */
.flow-arrow--23{
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  font-size:22px;
  opacity:.8;
}

/* 3 -> 4 (abajo) */
.flow-arrow--34{
  bottom: 78px;
  left: 50%;
  transform: translateX(-50%);
}

/* Mobile: vuelve a 1 columna y flechas simples */
@media (max-width: 920px){
  .flow-grid{
    grid-template-columns: 1fr;
    gap:14px;
  }
  .flow-arrow{ display:none; }
}

/* ===== ZONA PRIVADA ===== */

.private-body{
  background: linear-gradient(180deg, #08101d, #0d1a2f);
  color: var(--text);
}

.private-layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  min-height:100vh;
}

.private-sidebar{
  background: rgba(11,18,32,.95);
  border-right:1px solid var(--line);
  padding:24px 18px;
}

.private-brand{
  font-size:22px;
  font-weight:700;
  margin-bottom:28px;
}

.private-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.private-nav a{
  padding:12px 14px;
  border-radius:12px;
  color: var(--muted);
  transition:.25s ease;
}

.private-nav a:hover{
  background: rgba(53,208,127,.12);
  color: var(--text);
}

.private-main{
  padding:28px;
}

.private-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
}

.private-user{
  padding:10px 14px;
  background: rgba(15,32,63,.65);
  border:1px solid var(--line);
  border-radius:12px;
}

.private-stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
  margin-bottom:24px;
}

.private-stat-card{
  background: rgba(15,32,63,.82);
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.stat-number{
  font-size:30px;
  font-weight:700;
  color:#35D07F;
}

.stat-label{
  color:var(--muted);
}

.private-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}

.private-table{
  width:100%;
  border-collapse:collapse;
}

.private-table th,
.private-table td{
  padding:12px;
  border-bottom:1px solid var(--line);
  text-align:left;
}

.status-pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

.status-pill--ok{
  background: rgba(53,208,127,.12);
  color:#35D07F;
}

.status-pill--warning{
  background: rgba(244,197,66,.12);
  color:#F4C542;
}

.status-pill--error{
  background: rgba(255,77,77,.12);
  color:#FF4D4D;
}

@media(max-width: 960px){
  .private-layout{
    grid-template-columns: 1fr;
  }

  .private-sidebar{
    border-right:none;
    border-bottom:1px solid var(--line);
  }

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

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

@media(max-width: 640px){
  .private-stats{
    grid-template-columns: 1fr;
  }

  .private-header{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
}

/* ===== BACKOFFICE ADMIN ===== */

.admin-toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.admin-toolbar input{
  flex:1;
  min-width:240px;
}

.admin-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.private-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.btn--sm{
  padding:8px 10px;
  font-size:13px;
}

.btn--danger{
  background: rgba(255,77,77,.14);
  border:1px solid rgba(255,77,77,.35);
  color:#ff8d8d;
}

.btn--danger:hover{
  background: rgba(255,77,77,.20);
}

@media(max-width: 760px){
  .private-form-grid{
    grid-template-columns:1fr;
  }
}

.nav{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
}

.nav__link{
  position:relative;
  padding:10px 14px;
  color:var(--muted);
  font-weight:500;
  font-size:15px;
  border-radius:10px;
  transition:.25s ease;
}

.nav__link:hover{
  color:var(--text);
  background:rgba(53,208,127,.08);
}

.nav__link::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:6px;
  height:2px;
  border-radius:999px;
  background:#35D07F;
  transform:scaleX(0);
  transform-origin:left;
  transition:.25s ease;
}

.nav__link:hover::after{
  transform:scaleX(1);
}

.topbar__cta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:18px;
}

.nav-login{
  padding:9px 16px;
  border-radius:999px;
  color:#dbe7fb;
  font-size:14px;
  font-weight:600;
  border:1px solid rgba(159,178,209,.28);
  background:rgba(15,32,63,.35);
  transition:.25s ease;
}

.nav-login:hover{
  color:#06130c;
  background:#35D07F;
  border-color:#35D07F;
  box-shadow:0 10px 25px rgba(53,208,127,.22);
}

@media(max-width:920px){
  .nav{
    display:none;
  }

  .nav-login{
    padding:8px 13px;
    font-size:13px;
  }
}

.login-section{
  min-height:70vh;
  display:flex;
  align-items:center;
}

.login-card{
  max-width:420px;
  margin:0 auto;
  padding:28px;
}

.login-brand{
  text-align:center;
  margin-bottom:22px;
}

.login-brand img.login-logo{
  width:86px !important;
  max-width:86px !important;
  height:86px !important;
  object-fit:contain !important;
  display:block !important;
  margin:0 auto 14px !important;
}

.login-brand h1{
  margin:0 0 6px;
  font-size:24px;
}

.login-brand p{
  margin:0;
  font-size:14px;
}

.login-brand .login-logo{
  width:86px !important;
  max-width:86px !important;
  height:86px !important;
  object-fit:contain !important;
  display:block !important;
  margin:0 auto 14px !important;
}

.private-user-menu{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.private-user-name{
  padding:10px 14px;
  background: rgba(15,32,63,.65);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--text);
  font-weight:600;
}

.private-user-menu a,
.private-user-menu button{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(15,32,63,.45);
  color:var(--muted);
  font:inherit;
  cursor:pointer;
}

.private-user-menu a:hover,
.private-user-menu button:hover{
  background:rgba(53,208,127,.12);
  color:var(--text);
}

.login-links{
  margin-top:18px;
  text-align:center;
}

.login-links a{
  color:var(--muted);
  font-size:14px;
}

.login-links a:hover{
  color:var(--primary);
}

.error-box{
  background:rgba(255,77,77,.12);
  border:1px solid rgba(255,77,77,.35);
  color:#ff9b9b;
  padding:10px 12px;
  border-radius:12px;
  margin-bottom:14px;
}