/* Modern layer: everything after the hero. */
:root{--mint:#a7efce;--deep:#0a1f2e;--g1:#5ca680;--g2:#3aa6c9;--line:#e3ece7}
body{background:#fff}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1.6px;color:#3f6556;background:#eff8f2;padding:8px 14px;border-radius:30px;margin:0 0 22px}
.tag.light{color:var(--mint);background:#ffffff12;border:1px solid #ffffff22}
.grad{background:linear-gradient(95deg,#2f8f6b,#2f9ec4 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.offer2 .grad,.inside .grad{background:linear-gradient(95deg,var(--mint),#7fd6ee);-webkit-background-clip:text;background-clip:text}
h2{font-size:clamp(34px,4.4vw,56px);letter-spacing:-2.4px;line-height:1.08;font-weight:700}
.glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.45;pointer-events:none}
.g1{width:480px;height:480px;background:#2f9ec4;top:-160px;right:-120px}
.g2{width:420px;height:420px;background:#3aa67a;bottom:-140px;left:-120px}

/* ticker */
.ticker{background:var(--deep);overflow:hidden;padding:20px 0;border-block:1px solid #ffffff14}
.ticker-track{display:flex;gap:48px;width:max-content;animation:tick 32s linear infinite}
.ticker span{color:#cfe9de;font-size:22px;font-weight:600;letter-spacing:-.5px;white-space:nowrap;display:flex;align-items:center;gap:48px}
.ticker span:after{content:'✦';color:var(--mint);font-size:15px}
@keyframes tick{to{transform:translateX(-50%)}}

/* bento */
.path{padding:110px 0 90px}
.path-head{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:end;margin-bottom:46px}
.path-head h2{margin:0}.path-head p:last-child{color:#5c7068;font-size:16px;margin:0}
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(230px,auto);gap:16px}
.card{position:relative;overflow:hidden;border-radius:26px;padding:30px;border:1px solid var(--line);background:#f6faf8;transition:transform .35s,box-shadow .35s}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 50px #0a3a2a1a}
.card h3{font-size:26px;letter-spacing:-1px;line-height:1.15;margin:46px 0 12px}
.card p{font-size:14px;color:#566a62;margin:0;max-width:340px}
.chip{position:absolute;top:26px;left:30px;font-size:12px;font-weight:700;background:#fff;border:1px solid var(--line);border-radius:30px;padding:5px 12px;color:#2f7d5e}
.c1{grid-column:span 4;background:linear-gradient(135deg,#dff6e9,#e3f3fb)}
.c1 h3{font-size:38px;letter-spacing:-1.6px;max-width:420px}
.mini-tags{position:absolute;right:30px;bottom:30px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:260px}
.mini-tags i{font-style:normal;font-size:12px;font-weight:600;background:#fff;padding:8px 14px;border-radius:30px;box-shadow:0 6px 16px #0a3a2a14}
.c2{grid-column:span 2;background:var(--deep);color:#fff;border:0}.c2 p{color:#a9c4bb}.c2 .chip{background:#ffffff14;border-color:#ffffff25;color:var(--mint)}
.bar{height:8px;background:#ffffff1c;border-radius:9px;margin:26px 0 8px;overflow:hidden}.bar b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mint),#7fd6ee);border-radius:9px;transition:width 1.4s .3s}
.in .bar b{width:var(--w)}.c2 small{font-size:11px;color:#8fb3a6}
.c3{grid-column:span 2;background:#fff4ea;border-color:#f5e2d0}.c3 .chip{color:#c06a38}
.apps{display:flex;gap:8px;margin-top:22px}.apps i{font-style:normal;width:42px;height:42px;border-radius:13px;background:#fff;display:grid;place-items:center;box-shadow:0 6px 14px #c06a3822;font-size:18px;transition:transform .3s}
.c3:hover .apps i:nth-child(odd){transform:translateY(-6px) rotate(-6deg)}.c3:hover .apps i:nth-child(even){transform:translateY(-3px) rotate(6deg)}
.c4{grid-column:span 4;background:linear-gradient(120deg,#123a35,#0f5b66);color:#fff;border:0}.c4 p{color:#bfe0d6}.c4 .chip{background:#ffffff14;border-color:#ffffff25;color:var(--mint)}
.c4 h3{font-size:34px}.c4 a{display:inline-block;margin-top:20px;font-size:13px;font-weight:700;color:var(--mint);border-bottom:1px solid #a7efce66;padding-bottom:3px}

/* dark flipbook zone */
.inside{position:relative;overflow:hidden;background:var(--deep);color:#fff;margin:0}
.inside:before{content:'';position:absolute;width:520px;height:520px;border-radius:50%;background:#2f9ec4;filter:blur(110px);opacity:.28;top:-140px;right:-120px}
.inside .wrap{position:relative;padding:100px 0 70px}
.inside .tag,.practice .tag{color:var(--mint);background:#ffffff12;border:1px solid #ffffff22}
.inside .eyebrow,.practice .eyebrow{display:inline-block;color:var(--mint);background:#ffffff12;border:1px solid #ffffff22;padding:8px 14px;border-radius:30px;letter-spacing:1.4px}
.inside h2,.inside .section-title h2{color:#fff;font-size:clamp(34px,4.4vw,56px)}
.inside h2 em{font:inherit;background:linear-gradient(95deg,var(--mint),#7fd6ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.inside .section-title>p{color:#a9c4bb}
.flipbook{background:#ffffff0a;border:1px solid #ffffff1f;border-radius:28px;backdrop-filter:blur(10px);box-shadow:0 40px 90px #0008}
.flipbook,.flipbook span,.flipbook p{color:#b9d3ca}
.flip-top button{background:#ffffff14;border:1px solid #ffffff30;color:#fff;border-radius:30px;padding:8px 16px}
.flip-top button:hover{background:var(--mint);color:#0a1f2e}
.flip-arrow{background:#ffffff18!important;border:1px solid #ffffff33!important;color:#fff!important;border-radius:50%!important}
.flip-arrow:hover:not(:disabled){background:var(--mint)!important;color:#0a1f2e!important}
.flip-dots button{background:#ffffff1c;border:0;color:#b9d3ca;border-radius:50%}
.flip-dots button[aria-current=true]{background:var(--mint);color:#0a1f2e}

.practice{background:var(--deep);color:#fff;position:relative;border-top:1px solid #ffffff12}
.practice .wrap{padding:30px 0 100px}
.practice-heading h3{font-size:clamp(30px,3.6vw,46px);letter-spacing:-1.8px;color:#fff;font-weight:700}
.practice-heading h3 em{font:inherit;color:var(--mint)}.practice-heading p{color:#a9c4bb}
.tabs{border:0;gap:10px;margin:30px 0}
.tabs button{background:#ffffff0f;border:1px solid #ffffff22;border-radius:30px;color:#cfe3dc;padding:11px 20px;font-size:13px}
.tabs button[aria-selected=true]{background:var(--mint);color:#0a1f2e;border-color:var(--mint)}
.preview-grid{background:#ffffff0a;border:1px solid #ffffff1c;border-radius:28px;padding:36px 36px 0;align-items:end;gap:60px}
.preview-image{background:linear-gradient(160deg,#1c4a5a,#12332f);border-radius:18px 18px 0 0}
.preview-copy{padding-bottom:36px}
.preview-copy h3{color:#fff;font-size:34px}.preview-copy p,.preview-copy li{color:#b9d3ca}.preview-copy li:before{color:var(--mint)}
.preview-foot{border-color:#ffffff22}

/* personas */
.audience2{padding:110px 0 80px}
.audience2 h2{margin-bottom:46px}
.personas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.personas article{padding:30px;border-radius:26px;border:1px solid var(--line);background:#fff;transition:transform .35s,box-shadow .35s,border-color .35s}
.personas article:hover{transform:translateY(-6px);border-color:#9dcab6;box-shadow:0 24px 50px #0a3a2a14}
.avatar{display:grid;place-items:center;width:54px;height:54px;border-radius:18px;font-size:22px;color:#0a1f2e;margin-bottom:34px}
.a1{background:linear-gradient(135deg,#bff1d6,#8fdcc0)}.a2{background:linear-gradient(135deg,#bfe8f6,#8fc9ea)}.a3{background:linear-gradient(135deg,#ffe0c6,#ffc39c)}
.personas small{font-size:11px;font-weight:700;letter-spacing:1.4px;color:#4f8a6f}
.personas h3{font-size:24px;letter-spacing:-.8px;margin:8px 0 10px}.personas p{font-size:14px;color:#5c7068;margin:0}
.honest{font-size:12px;color:#7b887f;margin-top:26px}

/* offer */
.offer2{position:relative;overflow:hidden;margin:0 3%;border-radius:36px;background:linear-gradient(135deg,#0a1f2e,#0e4a52 70%,#12604f);color:#fff}
.offer2 .offer-grid{position:relative;padding:90px 0;grid-template-columns:.8fr 1.2fr;gap:70px;max-width:1050px;display:grid;align-items:center}
.offer2 .offer-art{position:relative;background:none;border:0;padding:0;text-align:center}
.offer2 .offer-art img{max-width:300px;width:100%;transform:rotate(-4deg);border-radius:6px;box-shadow:0 40px 70px #0009;transition:transform .5s}
.offer2 .offer-art:hover img{transform:rotate(0) scale(1.03)}
.badge{position:absolute;top:10px;right:8%;background:var(--mint);color:#0a1f2e;font-size:11px;font-weight:800;letter-spacing:.8px;padding:9px 14px;border-radius:30px;transform:rotate(6deg)}
.offer2 h2{color:#fff}.offer2 .offer-desc{color:#c3dcd3;font-size:16px}
.offer2 .includes li{font-size:14px;color:#e5f3ee;padding:7px 0}
.offer2 .includes li:before{content:'✓';display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#a7efce26;color:var(--mint);font-size:11px}
.offer2 .price strong{font-size:56px;font-weight:700;letter-spacing:-2.5px}.offer2 .price span{color:#a9c4bb}
.offer2 .button{background:var(--mint);color:#0a1f2e;border-radius:14px;padding:19px 26px}
.offer2 .micro{color:#a9c4bb}

/* faq + closing */
.faq{padding-top:110px}
.faq h2 em{font:inherit;background:linear-gradient(95deg,#2f8f6b,#2f9ec4);-webkit-background-clip:text;background-clip:text;color:transparent}
.faq .eyebrow{display:inline-block;color:#3f6556;background:#eff8f2;padding:8px 14px;border-radius:30px}
.faq-list{border:0;padding:0;display:grid;gap:10px}
.faq details{border:1px solid var(--line)!important;border-radius:18px;background:#f6faf8;padding:0 24px;transition:background .25s}
.faq details[open]{background:#e9f6ef}
.faq summary{font-size:16px;font-weight:600;padding:22px 30px 22px 0}
.faq summary:after{content:'+';right:0;width:30px;height:30px;top:50%;margin-top:-15px;border-radius:50%;background:#fff;display:grid;place-items:center;transition:transform .3s}
.faq details[open] summary:after{content:'+';transform:rotate(45deg)}
.faq details p{font-size:14px}
.closing2{text-align:center;padding:100px 0 110px}
.closing2 h2{margin-bottom:18px}.closing2>p:not(.tag){color:#5c7068;margin-bottom:28px}
.closing2 .button{background:#163f36;color:#fff;border-radius:14px}.closing2 .button:hover{background:#285f50}

@media(max-width:900px){.path-head{grid-template-columns:1fr;gap:20px}.bento{grid-template-columns:1fr 1fr}.c1,.c4{grid-column:span 2}.personas{grid-template-columns:1fr}.offer2 .offer-grid{grid-template-columns:1fr;gap:40px;padding:60px 0}.preview-grid{grid-template-columns:1fr;gap:30px;padding:22px 22px 0}}
@media(max-width:620px){.path{padding:70px 0 50px}.bento{grid-template-columns:1fr}.c1,.c2,.c3,.c4{grid-column:auto}.c1 h3{font-size:30px}.mini-tags{position:static;justify-content:flex-start;margin-top:22px}.card{padding:26px}.ticker span{font-size:17px}.inside .wrap{padding:70px 0 50px}.offer2{margin:0 3%;border-radius:26px}.offer2 .offer-art img{max-width:210px}.offer2 .price strong{font-size:46px}.offer2 .button{width:100%}.audience2,.faq,.closing2{padding-top:70px}.closing2{padding-bottom:70px}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.ticker-track{animation:none}.bar b{transition:none;width:var(--w)}}
.path-head .tag{grid-column:1/-1;justify-self:start;margin:0 0 14px}
.path-head{row-gap:0}
.card{min-height:250px}
.practice .practice-heading>p:not(.eyebrow){color:#b9d3ca}
.offer2 .offer-art .badge{color:#0a1f2e;font-size:11px;margin:0;display:block;top:auto;bottom:6%;right:4%;letter-spacing:.8px}
/* Opciones de trabajo — composición circular */
.c1 .mini-tags{
  position:absolute;
  right:34px;
  bottom:25px;
  width:250px;
  height:145px;
  max-width:none;
  display:block;
}

.c1 .mini-tags i{
  position:absolute;
  width:82px;
  height:82px;
  padding:8px;
  border-radius:50%;
  display:grid;
  place-items:center;
  text-align:center;
  line-height:1.15;
  background:#fff;
  color:#173744;
  box-shadow:0 10px 25px rgba(10,58,42,.12);
}

.c1 .mini-tags i:nth-child(1){
  left:0;
  top:0;
}

.c1 .mini-tags i:nth-child(2){
  left:82px;
  top:31px;
}

.c1 .mini-tags i:nth-child(3){
  left:164px;
  top:62px;
}

@media(max-width:620px){
  .c1 .mini-tags{
    position:static;
    width:auto;
    height:auto;
    display:flex;
    gap:10px;
    margin-top:24px;
  }

  .c1 .mini-tags i{
    position:static;
    width:76px;
    height:76px;
  }
}
/* La página completa debe caber bajo el header */
.flip-paper{
  width:min(440px, calc((100vh - 250px) * .772727));
  max-width:100%;
}

@media(max-width:620px){
  .flip-paper{
    width:min(245px, calc((100vh - 220px) * .772727));
  }
}
/* Lector ampliado del flipbook */
#flip-dialog{
  inset:0;
  margin:0;
  width:100vw;
  height:100vh;
  max-width:none;
  max-height:none;
  padding:18px 22px 12px;
  border-radius:0;
  background:#0b2538;
  color:#fff;
  overflow:hidden;
}

#flip-dialog[open]{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) 72px;
  grid-template-rows:minmax(0,1fr) 36px;
  gap:8px 18px;
  align-items:center;
  justify-items:center;
}

#flip-dialog .close{
  position:absolute;
  top:16px;
  right:22px;
  background:transparent;
  color:#fff;
  z-index:5;
}

#flip-dialog-image{
  grid-column:2;
  grid-row:1;
  max-width:100%;
  max-height:calc(100vh - 75px);
  width:auto;
  height:auto;
  object-fit:contain;
  box-shadow:0 20px 70px rgba(0,0,0,.35);
}

#flip-dialog-prev{
  grid-column:1;
  grid-row:1;
}

#flip-dialog-next{
  grid-column:3;
  grid-row:1;
}

#flip-dialog .reader-arrow{
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:22px;
}

#flip-dialog .reader-arrow:hover:not(:disabled){
  background:#a7efce;
  color:#0b2538;
}

#flip-dialog .reader-arrow:disabled{
  opacity:.25;
  cursor:default;
}

#flip-dialog-status{
  grid-column:2;
  grid-row:2;
  color:#b9d3ca;
  font-size:12px;
}

@media(max-width:620px){
  #flip-dialog{
    padding:12px 8px 8px;
  }

  #flip-dialog[open]{
    grid-template-columns:42px minmax(0,1fr) 42px;
    gap:6px;
  }

  #flip-dialog .reader-arrow{
    width:36px;
    height:36px;
    font-size:17px;
  }
}
/* Libro más compacto y profesional en el flipbook */
.flip-paper{
  position:relative;
  isolation:isolate;
}

.flip-paper .page-edge{
  display:none;
}

.flip-paper::before{
  content:"";
  position:absolute;
  top:4px;
  left:6px;
  right:-6px;
  bottom:-7px;
  background:
    repeating-linear-gradient(
      to bottom,
      #f7f3ea 0px,
      #f7f3ea 1px,
      #e6dfd2 1px,
      #e6dfd2 2px
    );
  border:1px solid rgba(20,40,50,.12);
  border-radius:1px 3px 3px 1px;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  z-index:0;
}

.flip-paper img{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:auto;
  border-radius:1px 2px 2px 1px;
  box-shadow:0 8px 18px rgba(0,0,0,.20);
}