@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  --blue:#49afe5;
  --blue2:#4d73c8;
  --purple:#7446c7;
  --purple2:#4b287f;
  --deep:#271050;
  --deep2:#1f0d46;
  --ink:#25223a;
  --muted:#6c6a78;
  --soft:#f7f7f9;
  --line:#ecebf0;
  --mint:#a8dda9;
  --white:#fff;
  --shell:min(1140px,calc(100% - 42px));
  --shadow:0 20px 55px rgba(31,21,72,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:'Poppins',Arial,sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}
.shell{width:var(--shell);margin:auto}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{line-height:1.12;letter-spacing:-.025em}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--blue2);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase
}
.kicker:before{content:"";width:22px;height:2px;background:currentColor}
.kicker.light{color:#fff}

.btn{
  min-height:48px;
  padding:0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:2px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  transition:.2s ease
}
.btn:hover{transform:translateY(-2px)}
.btn-blue{background:var(--blue);color:#fff}
.btn-purple{background:var(--purple);color:#fff}
.btn-white{background:#fff;color:var(--deep)}
.btn-mint{background:var(--mint);color:var(--deep)}
.btn-outline{border:1px solid rgba(255,255,255,.45);color:#fff;background:transparent}

/* HEADER: same visual system as /marketing/ */
.header{
  position:sticky;
  top:0;
  z-index:1000;
  background:#fff;
  border-bottom:1px solid #f0eff3
}
.header-inner{
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px
}
.logo-image{
  display:block;
  height:48px;
  width:auto
}
.nav{display:flex;align-items:center;gap:28px}
.nav a{font-size:12px;font-weight:600;color:#363243}
.nav a:hover{color:var(--blue2)}
.nav .nav-cta{padding:13px 18px;background:var(--blue);color:#fff}
.menu{
  display:none;
  width:42px;
  height:42px;
  border:1px solid var(--line);
  background:#fff
}
.menu span{display:block;width:18px;height:2px;margin:4px auto;background:var(--deep)}

/* HERO: same blue/purple + diagonal composition as the Marketing index */
.hero{
  position:relative;
  min-height:650px;
  overflow:hidden;
  background:#1c1b24
}
.hero-photo{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(29,37,55,.14),rgba(29,37,55,.14)),
    url('https://images.pexels.com/photos/6476185/pexels-photo-6476185.jpeg?auto=compress&cs=tinysrgb&w=1800') center/cover no-repeat;
  filter:grayscale(1) contrast(1.04)
}
.hero-photo:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(40,20,86,.10) 30%,rgba(35,68,110,.22) 100%)
}
.hero-color{
  position:absolute;
  left:0;top:0;bottom:0;
  width:62%;
  background:linear-gradient(135deg,rgba(74,174,229,.97) 0%,rgba(83,107,199,.97) 47%,rgba(116,70,199,.97) 100%);
  clip-path:polygon(0 0,78% 0,100% 100%,0 100%)
}
.hero-color:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(45,25,100,.20))
}
.hero-map{
  position:absolute;
  left:1%;
  top:8%;
  width:55%;
  height:86%;
  z-index:2;
  background:url('/marketing/assets/img/world-panama.svg') center/contain no-repeat;
  opacity:.38
}
.hero-inner{
  min-height:650px;
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:58px;
  align-items:center
}
.hero-copy{
  color:#fff;
  padding:64px 0 78px
}
.hero-copy h1{
  margin:17px 0 18px;
  max-width:650px;
  color:#fff;
  font-size:clamp(42px,4.6vw,64px);
  font-weight:800;
  line-height:1.01;
  text-transform:uppercase
}
.hero-copy p{
  max-width:590px;
  color:rgba(255,255,255,.92);
  font-size:16px
}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:30px
}
.hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px
}
.hero-points span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.13);
  color:#f6f2fb;
  font-size:10px;
  font-weight:600
}
.hero-points i{
  width:17px;height:17px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--mint);
  color:#24472c;
  font-style:normal;
  font-size:10px
}

/* Right hero panels */
.hero-product,
.hero-advisor{
  position:relative;
  min-height:470px;
  display:flex;
  align-items:center;
  justify-content:center
}
.product-stage{
  width:86%;
  min-height:380px;
  border-radius:28px;
  background:rgba(255,255,255,.94);
  box-shadow:0 30px 75px rgba(17,10,42,.28);
  position:relative;
  overflow:hidden
}
.product-stage:before{
  content:"";
  position:absolute;
  right:-60px;top:-65px;
  width:250px;height:250px;
  border-radius:68px;
  background:var(--mint)
}
.product-paper{
  position:absolute;
  left:15%;
  top:24%;
  width:72%;
  min-height:180px;
  padding:28px;
  background:#fff;
  transform:rotate(3deg);
  border:1px solid #ddd7e2;
  box-shadow:0 18px 42px rgba(39,16,80,.15)
}
.product-paper small{
  display:block;
  color:var(--purple2);
  font-size:10px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase
}
.product-paper strong{
  display:block;
  margin-top:10px;
  color:var(--deep);
  font-size:27px;
  line-height:1.02
}
.product-paper em{
  display:block;
  margin-top:12px;
  color:#7b7481;
  font-size:11px;
  font-style:normal
}
.advisor-stage{
  width:80%;
  min-height:440px;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center
}
.advisor-stage:before{
  content:"";
  position:absolute;
  inset:28px 10px 0;
  border-radius:70px 70px 0 0;
  background:linear-gradient(145deg,#b5e3b8,#8fd99a)
}
.advisor-stage img{
  position:relative;
  z-index:2;
  width:82%;
  height:430px;
  object-fit:cover;
  object-position:center 14%;
  filter:saturate(.95);
  box-shadow:0 28px 64px rgba(20,10,44,.20)
}

/* overlap cards like the index */
.hero-strip{
  position:relative;
  z-index:10;
  margin-top:-52px
}
.hero-strip-grid{
  width:min(860px,calc(100% - 36px));
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  background:#fff;
  box-shadow:var(--shadow)
}
.hero-strip-card{
  min-height:142px;
  padding:25px 24px;
  border-right:1px solid var(--line)
}
.hero-strip-card:last-child{border-right:0}
.hero-strip-card.featured{
  color:#fff;
  background:linear-gradient(145deg,var(--blue),var(--purple))
}
.hero-strip-card b{
  display:inline-grid;
  place-items:center;
  width:40px;height:40px;
  border-radius:50%;
  background:#eef7fd;
  color:var(--blue2);
  font-size:13px
}
.hero-strip-card.featured b{
  background:rgba(255,255,255,.18);
  color:#fff
}
.hero-strip-card h3{
  margin:14px 0 5px;
  font-size:15px
}
.hero-strip-card p{
  margin:0;
  color:#7a7581;
  font-size:10px
}
.hero-strip-card.featured p{color:#eef7ff}

/* sections */
.section{padding:92px 0}
.section.gray{background:#f7f7f9}
.section.deep{
  color:#fff;
  background:linear-gradient(135deg,#38166f 0%,#6a3dbc 52%,#4e49ac 100%)
}
.section-head{max-width:760px;margin-bottom:40px}
.section-head.center{text-align:center;margin-inline:auto}
.section-head h2{
  margin:10px 0 12px;
  color:var(--deep);
  font-size:clamp(34px,4vw,52px);
  font-weight:700
}
.section-head p{color:var(--muted);font-size:13px}
.section.deep .section-head h2{color:#fff}
.section.deep .section-head p{color:#e6def2}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{
  padding:24px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 12px 30px rgba(31,18,62,.06)
}
.card .num{
  color:var(--blue2);
  font-size:10px;
  font-weight:800
}
.card h3{margin:10px 0 6px;font-size:17px}
.card p{margin:0;color:var(--muted);font-size:11px}

.compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.compare-card{
  min-height:260px;
  padding:28px;
  border-radius:5px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16)
}
.compare-card.green{
  background:var(--mint);
  color:var(--deep);
  border-color:var(--mint)
}
.compare-card h3{font-size:24px}
.compare-card ul{
  margin:16px 0 0;
  padding-left:18px;
  font-size:12px
}

.module-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px
}
.module{
  min-height:150px;
  padding:23px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 10px 24px rgba(31,18,62,.05)
}
.module .num{
  color:#6eb577;
  font-weight:800;
  font-size:10px
}
.module h3{margin:10px 0 5px;font-size:15px}
.module p{margin:0;color:var(--muted);font-size:10px}

.price-wrap{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:42px;
  align-items:center
}
.price-card{
  padding:34px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow)
}
.price-big{
  color:var(--deep);
  font-size:60px;
  font-weight:800;
  line-height:1
}
.price-big small{
  display:block;
  margin-bottom:5px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}
.price-card ul{padding-left:18px;font-size:11px}
.price-copy h2{
  margin:10px 0 12px;
  color:var(--deep);
  font-size:42px
}
.price-copy p{color:var(--muted);font-size:13px}

.founder{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:54px;
  align-items:center
}
.founder h2{
  color:var(--deep);
  font-size:38px;
  margin:9px 0 6px
}
.founder p{color:var(--muted);font-size:12px}
.founder-photo{
  border:8px solid #fff;
  box-shadow:var(--shadow)
}
.founder-photo img{
  width:100%;
  height:440px;
  object-fit:cover;
  object-position:center 15%
}
.check-list{
  display:grid;
  gap:9px;
  margin-top:18px
}
.check-list div{
  display:flex;
  gap:9px;
  align-items:flex-start;
  font-size:11px
}
.check-list i{
  width:21px;height:21px;
  display:grid;place-items:center;
  flex:0 0 21px;
  border-radius:50%;
  background:var(--deep);
  color:#fff;
  font-style:normal;
  font-size:10px
}

.faq{display:grid;gap:8px;max-width:860px}
.faq details{
  padding:15px 17px;
  border:1px solid var(--line);
  background:#fff
}
.faq summary{
  cursor:pointer;
  font-size:12px;
  font-weight:600
}
.faq p{
  margin:10px 0 0;
  color:var(--muted);
  font-size:11px
}

.final-cta{
  padding:72px 0;
  text-align:center;
  color:#fff;
  background:linear-gradient(125deg,#301361,#6040ac 58%,#4776c9)
}
.final-cta h2{
  max-width:780px;
  margin:9px auto 12px;
  font-size:clamp(34px,4vw,48px);
  color:#fff
}
.final-cta p{color:#e8e1f1}
.final-price{
  margin:12px 0 18px;
  color:#fff;
  font-size:42px;
  font-weight:800
}
.final-price small{font-size:11px}

.footer{
  background:#201044;
  color:#d5cee0
}
.footer-grid{
  padding:42px 0 28px;
  display:grid;
  grid-template-columns:1.4fr .7fr .7fr;
  gap:45px
}
.footer-logo{height:42px;width:auto;filter:brightness(0) invert(1)}
.footer p{max-width:420px;color:#aaa1b7;font-size:11px}
.footer-links{display:grid;gap:8px;align-content:start}
.footer-links strong{color:#fff;font-size:12px}
.footer-links a{font-size:11px;color:#c8c0d3}
.footer-bottom{
  padding:17px 0 24px;
  border-top:1px solid rgba(255,255,255,.10);
  font-size:10px;
  color:#948aa1;
  display:flex;
  justify-content:space-between
}

/* motion */
.reveal{opacity:0;transform:translateY(28px);transition:.65s ease}
.reveal.left{transform:translateX(-34px)}
.reveal.right{transform:translateX(34px)}
.reveal.show{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(22px);transition:.55s ease}
.stagger.show>*{opacity:1;transform:none}
.stagger.show>*:nth-child(2){transition-delay:.08s}
.stagger.show>*:nth-child(3){transition-delay:.16s}
.stagger.show>*:nth-child(4){transition-delay:.24s}
.progress{
  position:fixed;
  left:0;top:0;
  width:0;height:3px;
  z-index:1200;
  background:linear-gradient(90deg,var(--blue),var(--purple))
}

@media(max-width:980px){
  .nav{display:none}
  .menu{display:block}
  .nav.open{
    display:grid;
    position:absolute;
    top:82px;
    left:20px;right:20px;
    padding:16px;
    background:#fff;
    box-shadow:0 16px 38px rgba(32,20,60,.15)
  }
  .hero-inner{grid-template-columns:1fr}
  .hero-color{width:78%}
  .hero-copy{width:72%}
  .hero-product,.hero-advisor{display:none}
  .founder,.price-wrap{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  :root{--shell:min(100% - 28px,1140px)}
  .header-inner{height:68px}
  .logo-image{height:40px}
  .nav.open{top:68px;left:14px;right:14px}
  .hero,.hero-inner{min-height:610px}
  .hero-color{
    width:100%;
    clip-path:polygon(0 0,100% 0,90% 100%,0 100%);
    opacity:.94
  }
  .hero-map{width:95%;left:-12%;opacity:.25}
  .hero-copy{width:92%;padding:68px 0}
  .hero-copy h1{font-size:40px}
  .hero-strip{margin-top:0}
  .hero-strip-grid{grid-template-columns:1fr;width:100%}
  .hero-strip-card{border-right:0;border-bottom:1px solid var(--line)}
  .section{padding:68px 0}
  .grid-3,.grid-4,.module-grid,.compare{grid-template-columns:1fr}
  .price-copy h2,.founder h2{font-size:34px}
  .founder-photo img{height:360px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{display:grid;gap:7px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .reveal,.stagger>*{opacity:1!important;transform:none!important}
}


/* ==========================================================
   CENTTI MARKETING v6.1 · KIT COMPLETO
   Secciones visuales recuperadas del material original
   ========================================================== */

.hero-product .product-stage.real-cover{
  width:78%;
  min-height:470px;
  background:rgba(255,255,255,.08);
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}
.hero-product .product-stage.real-cover:before{
  width:230px;
  height:230px;
  right:-35px;
  top:-20px;
  border-radius:65px;
  background:rgba(168,221,169,.92);
}
.kit-cover-photo{
  position:relative;
  z-index:2;
  width:76%;
  max-height:440px;
  object-fit:contain;
  transform:rotate(2deg);
  box-shadow:0 26px 65px rgba(18,9,45,.28);
}

.media-showcase{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:54px;
  align-items:center;
}
.media-copy h2{
  margin:10px 0 12px;
  color:var(--deep);
  font-size:clamp(34px,4vw,50px);
}
.media-copy p{
  color:var(--muted);
  font-size:13px;
}
.media-frame{
  padding:18px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.media-frame img{
  width:100%;
  height:auto;
}
.section.deep .media-copy h2{color:#fff}
.section.deep .media-copy p{color:#e5def0}
.section.deep .media-frame{
  background:rgba(255,255,255,.96);
  border-color:rgba(255,255,255,.28);
}

.product-gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:32px;
}
.gallery-card{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 15px 34px rgba(31,18,62,.07);
  overflow:hidden;
}
.gallery-card img{
  width:100%;
  aspect-ratio:446/261;
  object-fit:cover;
}
.gallery-card figcaption{
  padding:13px 15px 15px;
  color:#625b69;
  font-size:10px;
  font-weight:600;
}
.gallery-card.cover-card img{
  aspect-ratio:auto;
  object-fit:contain;
  background:#f7f7f9;
}

.audience-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.audience-card{
  min-height:190px;
  padding:22px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(31,18,62,.05);
}
.audience-card .ico{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:50%;
  background:linear-gradient(145deg,#eef7fd,#eef8ef);
  color:var(--purple2);
  font-size:18px;
}
.audience-card h3{
  margin:16px 0 7px;
  font-size:16px;
}
.audience-card p{
  margin:0;
  color:var(--muted);
  font-size:10px;
}

.apply-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  position:relative;
}
.apply-grid:before{
  content:"";
  position:absolute;
  left:13%;
  right:13%;
  top:27px;
  border-top:1px dashed #bcb5c8;
}
.apply-step{
  position:relative;
  z-index:1;
  text-align:center;
}
.apply-step b{
  width:54px;height:54px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(145deg,var(--blue),var(--purple));
  color:#fff;
  border:7px solid #fff;
  box-shadow:0 7px 22px rgba(31,18,62,.12);
}
.apply-step h3{
  margin:0 0 5px;
  font-size:16px;
}
.apply-step p{
  margin:0 auto;
  max-width:260px;
  color:var(--muted);
  font-size:10px;
}

@media(max-width:980px){
  .media-showcase{grid-template-columns:1fr}
  .audience-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .hero-product .product-stage.real-cover{display:none}
  .product-gallery{grid-template-columns:1fr}
  .audience-grid{grid-template-columns:1fr}
  .apply-grid{grid-template-columns:1fr;gap:18px}
  .apply-grid:before{display:none}
}