/* -------------------------------------------------------
  White theme + línea gráfica (acentos azul / lima)
-------------------------------------------------------- */

:root{
  --bg:#ffffff;
  --text:#0b0f14;
  --muted:#526173;

  --line: rgba(12, 18, 26, .12);
  --shadow: 0 18px 40px rgba(12,18,26,.10);

  --brand:#0078E8;
  --brand2:#12A0FF;
  --lime:#EAFF00;

  --radius:18px;
  --radius2:26px;
  --max: 1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background: var(--bg);
  font-family:"Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
.container{width:min(var(--max), calc(100% - 40px)); margin:0 auto}

/* A11y */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.h1,.h2,.h3{
  font-family:"Oswald", sans-serif;
  letter-spacing:.4px;
  margin:0;
}
.h1{font-size: clamp(34px, 4vw, 56px); line-height:1.02}
.h2{font-size: clamp(28px, 3vw, 42px); line-height:1.08}
.lead{margin:14px 0 18px; font-size:16px; line-height:1.75; color: rgba(11,15,20,.84); max-width: 60ch}
.muted{color: var(--muted); line-height:1.75}
.tiny{font-size:12px}

.link{
  font-weight:800;
  color: rgba(11,15,20,.92);
  text-decoration: underline;
  text-decoration-color: rgba(0,120,232,.35);
  text-underline-offset: 3px;
}
.link:hover{color: var(--brand)}

/* Scroll progress */
.scroll-progress{
  position:fixed; inset:0 0 auto 0; height:4px;
  background: rgba(0,0,0,.04);
  z-index:60;
}
.scroll-progress__bar{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--brand), var(--brand2), rgba(234,255,0,.7));
}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(12,18,26,.10);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding: 14px 0;
}
.brand{display:flex; align-items:center; gap:12px}
.brand__mark{
  width:44px; height:44px; border-radius:14px;
  background:
    radial-gradient(14px 14px at 25% 30%, rgba(234,255,0,.45), transparent 70%),
    linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 12px 22px rgba(0,120,232,.18);
  position:relative;
}
.brand__mark::after{
  content:"";
  position:absolute; inset:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.55);
  background: linear-gradient(180deg, rgba(255,255,255,.20), transparent);
}
.brand__name{
  font-family:"Oswald", sans-serif;
  letter-spacing:.7px;
  font-size:18px;
  line-height:1;
}
.brand__sub{display:block; font-size:12px; color: rgba(11,15,20,.62); margin-top:3px}

.nav{display:flex; align-items:center; gap:12px}
.nav__menu{display:flex; align-items:center; gap:18px}
.nav__menu a{
  font-size:14px;
  color: rgba(11,15,20,.82);
  padding:10px 10px;
  border-radius: 12px;
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
.nav__menu a:hover{
  background: rgba(0,0,0,.04);
  transform: translateY(-1px);
  color: rgba(11,15,20,.95);
}

.nav__toggle{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border: 1px solid rgba(12,18,26,.12);
  background: rgba(0,0,0,.02);
  color: var(--text);
}
.burger{display:block; width:18px; height:2px; background: var(--text); margin:0 auto; position:relative; border-radius:2px}
.burger::before,.burger::after{
  content:""; position:absolute; left:0; right:0; height:2px; background: var(--text); border-radius:2px;
}
.burger::before{top:-6px}
.burger::after{top:6px}

/* Fade lines (bordes que se desvanecen) */
.fade-line{height:2px; opacity:.9}
.fade-line--blue{
  background: linear-gradient(90deg, transparent, rgba(0,120,232,.95), rgba(18,160,255,.75), transparent);
}
.fade-line--lime{
  background: linear-gradient(90deg, transparent, rgba(234,255,0,.95), rgba(0,120,232,.40), transparent);
}

/* Buttons */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(0,120,232,.18);
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #ffffff;
  font-weight:900;
  box-shadow: 0 14px 26px rgba(0,120,232,.18);
  transition: transform .2s ease, filter .2s ease;
}
.btn:hover{transform: translateY(-1px); filter:saturate(1.06)}
.btn:active{transform: translateY(0)}
.btn--ghost{
  background: #fff;
  color: rgba(11,15,20,.90);
  border: 1px solid rgba(12,18,26,.14);
  box-shadow: none;
}
.btn--ghost:hover{background: rgba(0,0,0,.02)}
.btn--sm{padding: 10px 12px; border-radius: 14px; font-size:14px}
.btn--wide{width:100%}
.btn__shine{
  position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(234,255,0,.38), transparent);
  mask-image: linear-gradient(90deg, transparent, black 35%, black 65%, transparent);
  animation: sweep 2.8s ease-in-out infinite;
  opacity:.9;
}
@keyframes sweep{
  0%{transform: translateX(-55%)}
  100%{transform: translateX(55%)}
}

/* Chips / kicker */
.kicker{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.kicker__line{height:1px; flex:1; background: linear-gradient(90deg, rgba(0,120,232,.45), transparent)}
.chip{
  display:inline-flex; align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,120,232,.20);
  background: rgba(0,120,232,.07);
  color: rgba(11,15,20,.86);
  font-weight:900;
  font-size:12px;
  letter-spacing:.3px;
}
.chip--lime{
  border-color: rgba(0,0,0,.12);
  background: rgba(234,255,0,.35);
}

/* Hero */
.hero{
  position:relative;
  padding: 34px 0 30px;
  overflow:hidden;
}
.hero__grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items:start;
}
.hl{
  display:inline-block;
  padding: 0 .16em;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(0,120,232,.14), rgba(18,160,255,.10));
}
.hl2{
  display:inline-block;
  padding: 0 .14em;
  border-radius: 10px;
  background: rgba(234,255,0,.32);
}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}

.hero__stats{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.stat{
  border-radius: 16px;
  border: 1px solid rgba(12,18,26,.12);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 12px;
}
.stat__top{display:flex; align-items:center; gap:8px}
.stat__label{font-size:12px; font-weight:900; color: rgba(11,15,20,.78)}
.stat__value{
  margin-top:6px;
  font-family:"Oswald", sans-serif;
  font-size:28px;
}
.stat__suffix{font-size:14px; opacity:.75; margin-left:6px}
.stat__note{margin-top:4px; font-size:12px; color: rgba(11,15,20,.62)}

.dot{width:10px; height:10px; border-radius:999px}
.dot--blue{background: var(--brand); box-shadow: 0 0 0 6px rgba(0,120,232,.12)}
.dot--cyan{background: var(--brand2); box-shadow: 0 0 0 6px rgba(18,160,255,.10)}
.dot--lime{background: var(--lime); box-shadow: 0 0 0 6px rgba(234,255,0,.12)}

/* Hero media */
.hero__media{min-height: 520px}
.paper{
  border-radius: var(--radius2);
  border: 1px solid rgba(12,18,26,.12);
  background: #fff;
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.paper__top{
  display:flex; gap:8px; flex-wrap:wrap;
  padding: 14px;
  border-bottom: 1px solid rgba(12,18,26,.10);
  background: linear-gradient(180deg, rgba(0,120,232,.05), transparent);
}
.mini-badge{
  font-size:12px;
  font-weight:900;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(12,18,26,.12);
  background: rgba(0,0,0,.02);
}
.mini-badge--alt{
  border-color: rgba(0,120,232,.22);
  background: rgba(0,120,232,.06);
}

.collage{
  position:relative;
  padding: 14px;
  height: 390px;
  background:
    radial-gradient(520px 220px at 20% 20%, rgba(0,120,232,.12), transparent 60%),
    radial-gradient(520px 240px at 80% 30%, rgba(234,255,0,.14), transparent 60%),
    #fff;
}
.shot{
  position:absolute;
  border-radius: 18px;
  border: 1px solid rgba(12,18,26,.14);
  overflow:hidden;
  box-shadow: 0 16px 30px rgba(12,18,26,.14);
  transform: translate3d(0,0,0);
  transition: transform .25s ease;
}
.shot img{width:100%; height:100%; object-fit:cover}
.shot figcaption{
  position:absolute; left:10px; bottom:10px;
  font-size:12px; font-weight:900;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(12,18,26,.12);
  backdrop-filter: blur(10px);
}

/* positions */
.shot--a{left: 14px; top: 18px; width: 62%; height: 210px}
.shot--b{right: 14px; top: 44px; width: 42%; height: 160px}
.shot--c{left: 18px; bottom: 18px; width: 48%; height: 170px}
.shot--d{right: 18px; bottom: 14px; width: 52%; height: 220px}

.paper__bottom{
  padding: 14px;
  border-top: 1px solid rgba(12,18,26,.10);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.tick{display:flex; align-items:center; gap:10px; color: rgba(11,15,20,.78); font-weight:900; font-size:12px}
.tick__icon{
  width:18px; height:18px; border-radius:6px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  position:relative;
}
.tick__icon::after{
  content:"";
  position:absolute;
  left:6px; top:4px;
  width:6px; height:9px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform: rotate(42deg);
}

/* Hero bg rings */
.hero__bg{position:absolute; inset:0; pointer-events:none; z-index:-1}
.ring{
  position:absolute;
  border-radius:999px;
  border: 1px solid rgba(0,120,232,.14);
  background: radial-gradient(circle at 30% 30%, rgba(0,120,232,.06), transparent 55%);
  filter: blur(.2px);
}
.r1{width:520px; height:520px; left:-220px; top:-140px}
.r2{width:420px; height:420px; right:-170px; top:20px; border-color: rgba(234,255,0,.20); background: radial-gradient(circle at 30% 30%, rgba(234,255,0,.10), transparent 55%)}
.r3{width:520px; height:520px; right: 18%; bottom:-260px; opacity:.7}

/* Sections */
.section{padding: 58px 0}
.section--soft{
  background:
    radial-gradient(700px 320px at 10% 10%, rgba(0,120,232,.08), transparent 60%),
    radial-gradient(700px 320px at 90% 0%, rgba(234,255,0,.12), transparent 60%),
    #fbfcfe;
  border-top: 1px solid rgba(12,18,26,.06);
  border-bottom: 1px solid rgba(12,18,26,.06);
}
.section__head{max-width: 74ch}

/* Grids */
.grid-4{
  margin-top: 20px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.grid-3{
  margin-top: 20px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

/* Cards */
.card{
  border-radius: var(--radius);
  border: 1px solid rgba(12,18,26,.12);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 16px;
  min-height: 250px;
  transition: transform .25s ease, border-color .25s ease;
}
.card:hover{transform: translateY(-3px); border-color: rgba(0,120,232,.22)}
.card h3{font-family:"Oswald", sans-serif; margin:10px 0 6px; font-size:20px}
.card p{margin:0; color: rgba(11,15,20,.80); line-height:1.7}
.list{margin: 12px 0 0; padding-left: 18px; color: rgba(11,15,20,.62); display:grid; gap:6px}
.card__icon{
  width:44px; height:44px; border-radius:16px;
  border: 1px solid rgba(12,18,26,.12);
  position:relative;
  background: rgba(0,0,0,.02);
}
.card__icon::after{
  content:"";
  position:absolute; inset:10px;
  border-radius: 12px;
}
.card__icon--blue::after{background: linear-gradient(135deg, var(--brand), var(--brand2))}
.card__icon--cyan::after{background: linear-gradient(135deg, var(--brand2), rgba(234,255,0,.55))}
.card__icon--lime::after{background: linear-gradient(135deg, rgba(234,255,0,.90), rgba(0,120,232,.55))}
.card__icon--dark::after{background: linear-gradient(135deg, rgba(11,15,20,.85), rgba(0,120,232,.55))}

/* Split */
.split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  align-items:start;
}
.steps{margin-top:14px; display:grid; gap:10px}
.step{
  border-radius: var(--radius);
  border: 1px solid rgba(12,18,26,.12);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 12px;
  display:flex; gap:12px;
}
.step__n{
  width:44px; height:44px; border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  font-family:"Oswald", sans-serif;
  font-size:18px;
  background: rgba(0,120,232,.10);
  border: 1px solid rgba(0,120,232,.18);
}
.step__b h3{margin:0; font-size:18px}
.step__b p{margin:4px 0 0; color: rgba(11,15,20,.62)}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top: 14px}

/* Feature */
.feature{
  border-radius: var(--radius2);
  border: 1px solid rgba(12,18,26,.12);
  background: #fff;
  box-shadow: var(--shadow);
  overflow:hidden;
  position:sticky;
  top: 92px;
}
.feature__img{height: 280px}
.feature__img img{width:100%; height:100%; object-fit:cover}
.feature__panel{padding: 16px}
.feature__tag{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(234,255,0,.35);
  border: 1px solid rgba(12,18,26,.10);
  font-weight:900;
  font-size:12px;
}
.feature__panel h3{margin:10px 0 6px; font-family:"Oswald", sans-serif; font-size:22px}
.feature__panel p{margin:0; color: rgba(11,15,20,.72); line-height:1.7}
.mini-kpis{margin-top: 12px; display:flex; gap:12px; flex-wrap:wrap; font-weight:900; font-size:12px; color: rgba(11,15,20,.72)}
.mini-kpi{display:flex; align-items:center; gap:8px; padding: 8px 10px; border-radius: 999px; border:1px solid rgba(12,18,26,.12); background: rgba(0,0,0,.02)}

/* Tiles */
.tile{
  border-radius: var(--radius);
  border: 1px solid rgba(12,18,26,.12);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 16px;
  transition: transform .25s ease, border-color .25s ease;
}
.tile:hover{transform: translateY(-3px); border-color: rgba(234,255,0,.28)}
.tile h3{margin:0 0 6px; font-family:"Oswald", sans-serif; font-size:20px}
.tile p{margin:0; color: rgba(11,15,20,.70)}

/* Banner */
.banner{
  margin-top: 18px;
  border-radius: var(--radius2);
  border: 1px solid rgba(12,18,26,.12);
  background:
    radial-gradient(520px 220px at 20% 40%, rgba(0,120,232,.12), transparent 60%),
    radial-gradient(520px 220px at 90% 30%, rgba(234,255,0,.18), transparent 60%),
    #fff;
  box-shadow: var(--shadow);
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.banner__copy h3{margin:0; font-family:"Oswald", sans-serif; font-size:22px}
.banner__copy p{margin:6px 0 0}

/* FAQ */
.faq{margin-top: 18px; display:grid; gap: 10px}
.faq__item{
  border-radius: var(--radius);
  border: 1px solid rgba(12,18,26,.12);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 12px;
}
.faq__item summary{
  cursor:pointer;
  font-weight:900;
  list-style:none;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+";
  float:right;
  font-family:"Oswald", sans-serif;
  color: var(--brand);
}
.faq__item[open] summary::after{content:"–"}
.faq__body{margin-top: 10px; color: rgba(11,15,20,.66); line-height:1.75}

/* Contact */
.contact{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  align-items:start;
}
.info-cards{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.info-card{
  border-radius: var(--radius);
  border: 1px solid rgba(12,18,26,.12);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 12px;
}
.info-card__top{display:flex; align-items:center; gap:8px; margin-bottom: 8px}
.info-card p{margin:0; color: rgba(11,15,20,.74); line-height:1.6}

/* Form */
.form{
  border-radius: var(--radius2);
  border: 1px solid rgba(12,18,26,.12);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 16px;
  position:relative;
  overflow:hidden;
}
.form::before{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(90deg, transparent, rgba(0,120,232,.10), rgba(234,255,0,.16), transparent);
  mask-image: linear-gradient(90deg, transparent, black 28%, black 72%, transparent);
  animation: sweep 3.9s ease-in-out infinite;
  opacity:.9;
  pointer-events:none;
}
label{display:grid; gap:6px; margin-top: 12px; position:relative}
label span{font-size:12px; font-weight:900; color: rgba(11,15,20,.75)}
input,select,textarea{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(12,18,26,.14);
  background: rgba(0,0,0,.02);
  color: var(--text);
  padding: 12px;
  outline:none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
input:focus,select:focus,textarea:focus{
  border-color: rgba(0,120,232,.30);
  box-shadow: 0 0 0 6px rgba(0,120,232,.10);
}
textarea{resize: vertical}

.form__row{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px}
.form__actions{margin-top: 14px}
.form__toast{margin-top: 10px; font-size:13px; font-weight:900}
.form__toast.ok{color: rgba(0,120,232,.95)}
.form__toast.err{color: rgba(190, 30, 60, .95)}
.form__meta{
  margin-top: 12px;
  font-size:12px;
  color: rgba(11,15,20,.62);
  display:flex;
  align-items:center;
  gap:10px;
}
.lock{
  width:18px; height:18px; border-radius:6px;
  border: 1px solid rgba(12,18,26,.12);
  background: rgba(0,0,0,.02);
  position:relative;
}
.lock::before{
  content:"";
  position:absolute; left:5px; top:7px;
  width:8px; height:6px;
  border:2px solid rgba(11,15,20,.60);
  border-top:none;
  border-radius: 0 0 4px 4px;
}
.lock::after{
  content:"";
  position:absolute; left:6px; top:2px;
  width:6px; height:6px;
  border:2px solid rgba(11,15,20,.60);
  border-bottom:none;
  border-radius: 6px 6px 0 0;
}

/* Footer */
.footer{
  padding: 24px 0;
  border-top: 1px solid rgba(12,18,26,.10);
  background: #fff;
}
.footer__inner{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.footer__brand{display:flex; align-items:center; gap:12px}
.footer__links{display:flex; gap:14px; flex-wrap:wrap}
.footer__links a{font-weight:900; color: rgba(11,15,20,.72)}
.footer__links a:hover{color: var(--brand)}

/* To top */
.to-top{
  position:fixed; right:18px; bottom:18px;
  width:46px; height:46px;
  border-radius: 16px;
  border: 1px solid rgba(12,18,26,.12);
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow);
  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
}
.to-top.show{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

/* Reveal */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.in{opacity:1; transform: translateY(0)}

/* Responsive */
@media (max-width: 980px){
  .hero__grid{grid-template-columns: 1fr}
  .hero__media{min-height:auto}
  .grid-4{grid-template-columns: repeat(2, minmax(0,1fr))}
  .split{grid-template-columns: 1fr}
  .feature{position:relative; top:auto}
  .contact{grid-template-columns: 1fr}
  .info-cards{grid-template-columns: 1fr}
}
@media (max-width: 720px){
  .nav__toggle{display:inline-flex; align-items:center; justify-content:center}
  .nav__menu{
    position:absolute;
    right:20px; top:68px;
    width:min(320px, calc(100vw - 40px));
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:10px;
    border-radius: 18px;
    border: 1px solid rgba(12,18,26,.12);
    background: rgba(255,255,255,.92);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
  }
  .nav__menu.open{display:flex}
  .grid-4{grid-template-columns: 1fr}
  .grid-3{grid-template-columns: 1fr}
  .hero__stats{grid-template-columns: 1fr}
  .form__row{grid-template-columns: 1fr}
  .shot--a{width: 68%; height: 200px}
  .shot--b{width: 48%}
  .shot--c{width: 52%}
  .shot--d{width: 56%}
}