/* ============================================================
   1 · HERO
   ============================================================ */
.gp-hero{ position:relative; overflow:hidden;
  padding-block:clamp(48px,6vw,84px) clamp(56px,7vw,96px);
  background:
    radial-gradient(120% 120% at 90% -10%, rgba(28,157,215,.10), transparent 55%),
    radial-gradient(90% 90% at -5% 110%, rgba(140,198,63,.12), transparent 55%), var(--bg); }
.gp-hero__watermark{
  position:absolute; top:clamp(40px,7vw,90px); left:-2vw; z-index:0; pointer-events:none;
  font-family:var(--ff-head); font-weight:700; font-size:clamp(120px,22vw,300px);
  letter-spacing:-.04em; line-height:.8; color:var(--ink); opacity:.03; white-space:nowrap; user-select:none;
}
.gp-hero .wrap{ position:relative; z-index:2 }
.gp-hero__grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(36px,5vw,80px); align-items:center }
.gp-hero__crumbs{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-3); margin-bottom:22px }
.gp-hero__crumbs a:hover{ color:var(--blue-d) }
.gp-hero__crumbs i{ color:var(--line-2); font-style:normal }
.gp-hero__copy h1{ font-size:clamp(40px,6vw,68px); letter-spacing:-.03em; margin-top:14px }
.gp-hero__copy .lead{ margin-top:20px; max-width:500px }
.gp-hero__actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:34px }
.gp-hero__inspired{ display:flex; align-items:center; gap:12px; margin-top:34px; flex-wrap:wrap }
.gp-hero__inspired small{ font-family:var(--ff-head); font-weight:600; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted) }
.gp-hero__inspired b{ font-family:var(--ff-head); font-size:19px; color:var(--green-d); letter-spacing:-.01em }

/* botón con shimmer (descarga) */
.btn-dl{ position:relative; overflow:hidden; isolation:isolate }
.btn-dl::before{ content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent) }
.btn-dl:hover::before{ animation:gpShine 1s ease }
@keyframes gpShine{ from{ transform:translateX(-120%) } to{ transform:translateX(130%) } }
.btn-dl svg{ transition:transform .25s }
.btn-dl:hover svg{ transform:translateY(2px) }

/* mockup 3D de la guía (portada del e-book) */
.gp-book{ position:relative; justify-self:center; width:min(470px,92vw) }
.gp-book__img{
  position:relative; z-index:2; display:block; width:100%; height:auto;
  filter:drop-shadow(-16px 26px 34px rgba(20,40,64,.26));
  animation:gpFloaty 6.5s ease-in-out infinite;
}
@keyframes gpFloaty{ 50%{ transform:translateY(-14px) } }
.gp-book__floor{
  position:absolute; z-index:0; left:8%; right:8%; bottom:3%; height:44px; pointer-events:none;
  background:radial-gradient(50% 100% at 50% 100%, rgba(20,40,64,.22), transparent 72%);
  filter:blur(14px); animation:gpFloorPulse 6.5s ease-in-out infinite;
}
@keyframes gpFloorPulse{ 50%{ transform:scaleX(.86); opacity:.7 } }
.gp-book__badge{
  position:absolute; z-index:4; background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-md); padding:12px 15px; display:flex; align-items:center; gap:11px;
}
.gp-book__badge .ic{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#fff; flex:none }
.gp-book__badge .ic svg{ width:20px; height:20px }
.gp-book__badge small{ display:block; font-size:11px; color:var(--ink-3); line-height:1.2 }
.gp-book__badge b{ font-family:var(--ff-head); font-size:16px; color:var(--ink); line-height:1.05 }
.gp-book__badge--top{ top:9%; left:-30px; animation:gpFloaty 5s ease-in-out infinite }
.gp-book__badge--top .ic{ background:linear-gradient(150deg,#9BD24B,#6FAE2A) }
.gp-book__badge--bot{ bottom:11%; right:-26px; animation:gpFloaty 6.5s ease-in-out infinite .5s }
.gp-book__badge--bot .ic{ background:linear-gradient(150deg,#34AEE3,#1683BB) }
@media (max-width:520px){
  .gp-book__badge--top{ left:-8px }
  .gp-book__badge--bot{ right:8px }
}
@media (prefers-reduced-motion:reduce){
  .gp-book__img, .gp-book__floor, .gp-book__badge{ animation:none }
}

/* ============================================================
   2 · BANNER CTA (barra carbón)
   ============================================================ */
.gp-banner{ padding-block:0 clamp(8px,2vw,16px); margin-top:clamp(8px,2vw,20px) }
.gp-banner__bar{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border-radius:var(--r-pill); padding:22px clamp(24px,3vw,40px);
  background:
    radial-gradient(90% 200% at 100% 0%, rgba(28,157,215,.28), transparent 60%),
    radial-gradient(70% 180% at 0% 100%, rgba(140,198,63,.22), transparent 60%), var(--ink);
  box-shadow:var(--shadow-lg); color:#fff;
}
.gp-banner__bar h2{ color:#fff; font-size:clamp(19px,2vw,25px); letter-spacing:-.02em }
.gp-banner__bar p{ color:rgba(255,255,255,.7); font-size:14.5px; margin-top:6px;
  display:flex; align-items:center; gap:8px }
.gp-banner__bar p svg{ width:17px; height:17px; color:#a6d957; flex:none }
.gp-banner__bar .btn{ flex:none }

/* ============================================================
   3 · IMPULSA (portada + copy + pasos)
   ============================================================ */
.gp-impulsa{ padding-block:clamp(60px,8vw,110px) }
.gp-impulsa__grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(40px,6vw,84px); align-items:center }

/* contenedor de portada (compartido) */
.gp-cover{ position:relative; justify-self:center; width:min(340px,82vw) }

/* mockup 3D de la guía (sección final) */
.gp-cover__mockup{
  display:block; width:100%; height:auto;
  filter:drop-shadow(-16px 26px 36px rgba(8,30,52,.45));
  animation:gpFloaty 6.5s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){ .gp-cover__mockup{ animation:none } }

/* mockup tablet con la tabla de contenidos (sección Impulsa) */
.gp-impulsa__media .gp-cover{ perspective:none; width:min(360px,84vw) }
.gp-cover__tablet{
  display:block; width:100%; height:auto;
  filter:drop-shadow(-14px 26px 36px rgba(20,40,64,.28));
  animation:gpFloaty 6.5s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){ .gp-cover__tablet{ animation:none } }
.gp-cover__tape{ position:absolute; z-index:3; top:18px; right:-14px;
  font-family:var(--ff-head); font-weight:700; font-size:12px; letter-spacing:.05em; color:#0e1c2e;
  background:linear-gradient(100deg,#a6d957,#7fd0c0); padding:8px 16px; border-radius:var(--r-pill);
  box-shadow:0 12px 26px -10px rgba(91,196,230,.7); transform:rotate(4deg) }

.gp-impulsa__copy .lead{ margin-top:18px }
.gp-impulsa__copy > p{ color:var(--ink-2); margin-top:16px; line-height:1.7 }
.gp-impulsa__close{ margin-top:22px; font-family:var(--ff-head); font-weight:600; color:var(--blue-d); font-size:16.5px }

/* pasos Planifica → Promociona → Vende */
.gp-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:30px 0 4px; position:relative }
.gp-steps::before{ content:""; position:absolute; top:34px; left:16%; right:16%; height:2px; z-index:0;
  background:repeating-linear-gradient(90deg, var(--line-2) 0 7px, transparent 7px 14px) }
.gp-step{ position:relative; z-index:1; text-align:center; display:flex; flex-direction:column; align-items:center }
.gp-step__ic{ width:68px; height:68px; border-radius:20px; display:grid; place-items:center; color:#fff;
  box-shadow:var(--shadow-md); transition:transform .3s cubic-bezier(.2,.7,.2,1) }
.gp-step:hover .gp-step__ic{ transform:translateY(-5px) scale(1.05) }
.gp-step__ic svg{ width:32px; height:32px; stroke-width:1.7 }
.gp-step:nth-child(1) .gp-step__ic{ background:linear-gradient(150deg,#9BD24B,#6FAE2A) }
.gp-step:nth-child(2) .gp-step__ic{ background:linear-gradient(150deg,#4FC3A4,#2C8E8E) }
.gp-step:nth-child(3) .gp-step__ic{ background:linear-gradient(150deg,#34AEE3,#1683BB) }
.gp-step b{ font-family:var(--ff-head); font-size:16px; margin-top:14px; color:var(--ink) }

/* ============================================================
   4 · STATS (contadores)
   ============================================================ */
.gp-stats{ padding-block:clamp(48px,6vw,80px); border-block:1px solid var(--line) }
.gp-stats__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px) }
.gp-stat{ text-align:center; display:flex; flex-direction:column; align-items:center; position:relative }
.gp-stat:not(:last-child)::after{ content:""; position:absolute; top:14%; bottom:14%; right:0;
  width:1px; background:var(--line) }
.gp-stat__ic{ width:64px; height:64px; border-radius:18px; display:grid; place-items:center;
  background:var(--grad-soft); color:var(--blue-d); margin-bottom:18px }
.gp-stat__ic svg{ width:30px; height:30px; stroke-width:1.7 }
.gp-stat__num{ font-family:var(--ff-head); font-weight:700; font-size:clamp(38px,5vw,56px); line-height:1;
  letter-spacing:-.03em; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
.gp-stat small{ display:block; margin-top:10px; font-size:14.5px; color:var(--ink-3); font-weight:500 }

/* ============================================================
   5 · CONTENIDO (qué vas a encontrar)
   ============================================================ */
.gp-toc-sec{ padding-block:clamp(60px,8vw,110px) }
.gp-toc-list{ max-width:880px; margin:clamp(40px,5vw,60px) auto 0; position:relative }
.gp-toc-list::before{ content:""; position:absolute; left:23px; top:30px; bottom:30px; width:2px;
  background:repeating-linear-gradient(180deg, var(--line-2) 0 8px, transparent 8px 16px) }
.gp-toc-item{ position:relative; display:flex; gap:22px; padding:20px 0; align-items:flex-start }
.gp-toc-item__num{ position:relative; z-index:1; flex:none; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; background:#fff; border:2px solid var(--blue);
  font-family:var(--ff-head); font-weight:700; font-size:18px; color:var(--blue-d);
  transition:background .3s, color .3s, transform .3s, border-color .3s }
.gp-toc-item:hover .gp-toc-item__num{ background:var(--grad); border-color:transparent; color:#fff; transform:scale(1.08) }
.gp-toc-item__body{ padding-top:3px }
.gp-toc-item__body h3{ font-size:clamp(17px,1.6vw,20px); letter-spacing:-.01em }
.gp-toc-item__body p{ color:var(--ink-3); font-size:15px; margin-top:6px; line-height:1.6; max-width:62ch }

/* ============================================================
   6 · RESEÑAS (sección oscura)
   ============================================================ */
.gp-reviews .section-head h2{ color:#fff }
.gp-reviews .eyebrow{ color:#7dd3e6 }
.gp-reviews .eyebrow::before{ background:linear-gradient(90deg,#a6d957,#5bc4e6) }
.gp-reviews__stack{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,26px);
  max-width:1140px; margin:clamp(28px,4vw,44px) auto 0; align-items:stretch }
.gp-review{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg);
  padding:clamp(26px,2.6vw,34px); text-align:left; position:relative; overflow:hidden;
  display:flex; flex-direction:column }
.gp-review__stars{ color:#FFB020; letter-spacing:3px; font-size:20px }
.gp-review__quote{ color:#fff; font-size:clamp(15px,1.15vw,16.5px); line-height:1.62; margin:16px 0 0;
  max-width:none; font-weight:500; flex:1 }
.gp-review__who{ display:flex; align-items:center; justify-content:flex-start; gap:14px; margin-top:24px }
.gp-review__av{ width:54px; height:54px; border-radius:50%; flex:none; overflow:hidden;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.16) 0 8px, rgba(255,255,255,.07) 8px 16px);
  border:1px dashed rgba(255,255,255,.4); display:grid; place-items:center; color:rgba(255,255,255,.7) }
.gp-review__av svg{ width:24px; height:24px }
.gp-review__meta{ text-align:left }
.gp-review__meta b{ font-family:var(--ff-head); color:#fff; font-size:16px; display:block }
.gp-review__meta small{ color:rgba(255,255,255,.6); font-size:13px; display:block }

/* ============================================================
   7 · FAQ
   ============================================================ */
.gp-faq{ padding-block:clamp(60px,8vw,110px); background:var(--bg-soft) }
.gp-faq__list{ max-width:820px; margin:clamp(36px,5vw,52px) auto 0; display:flex; flex-direction:column; gap:14px }
.gp-faq__item{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  transition:box-shadow .25s, border-color .25s }
.gp-faq__item[open]{ box-shadow:var(--shadow-md); border-color:transparent }
.gp-faq__item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:22px clamp(20px,2.4vw,30px); font-family:var(--ff-head); font-weight:600;
  font-size:clamp(15.5px,1.5vw,18px); color:var(--ink) }
.gp-faq__item summary::-webkit-details-marker{ display:none }
.gp-faq__q-num{ color:var(--green-d); margin-right:4px }
.gp-faq__item summary .gp-faq__ico{ flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:var(--grad-soft); color:var(--blue-d); transition:transform .3s, background .3s, color .3s }
.gp-faq__item summary .gp-faq__ico svg{ width:18px; height:18px }
.gp-faq__item[open] summary .gp-faq__ico{ transform:rotate(45deg); background:var(--grad); color:#fff }
.gp-faq__item p{ padding:0 clamp(20px,2.4vw,30px) 24px; color:var(--ink-2); font-size:15.5px; line-height:1.7; margin:0 }

/* ============================================================
   8 · CTA FINAL (degradado azul + portada)
   ============================================================ */
.gp-final{ position:relative; overflow:hidden; isolation:isolate; color:#fff;
  padding-block:clamp(60px,8vw,104px);
  background:
    radial-gradient(120% 130% at 85% 0%, rgba(28,157,215,.5), transparent 55%),
    linear-gradient(135deg,#1C9DD7 0%,#1683BB 55%,#13628f 100%); }
.gp-final__grid-deco{ position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(70% 70% at 30% 50%, #000, transparent 80%);
  mask-image:radial-gradient(70% 70% at 30% 50%, #000, transparent 80%) }
.gp-final__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,5vw,72px); align-items:center }
.gp-final__copy .eyebrow{ color:#d6f0a8 }
.gp-final__copy .eyebrow::before{ background:#a6d957 }
.gp-final__copy h2{ color:#fff; font-size:clamp(30px,4.6vw,52px); letter-spacing:-.025em; margin:14px 0 8px; text-wrap:balance }
.gp-final__copy h3{ color:#fff; font-size:clamp(19px,2vw,26px); font-weight:600; letter-spacing:-.01em }
.gp-final__copy p{ color:rgba(255,255,255,.85); margin-top:14px; font-size:clamp(15px,1.4vw,17px);
  display:flex; align-items:center; gap:9px }
.gp-final__copy p svg{ width:18px; height:18px; color:#bfe98a; flex:none }
.gp-final__copy .gp-final__actions{ margin-top:30px }
.gp-final .btn-light{ background:#fff; color:var(--blue-d) }
.gp-final .btn-light:hover{ transform:translateY(-2px); box-shadow:0 22px 46px -14px rgba(0,0,0,.35); color:var(--ink) }
.gp-final__media{ justify-self:center }
.gp-final__media .gp-cover{ width:min(300px,78vw) }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .gp-hero__grid{ grid-template-columns:1fr; gap:48px }
  .gp-hero__media{ order:-1 }
  .gp-reviews__stack{ grid-template-columns:1fr; max-width:600px }
  .gp-impulsa__grid{ grid-template-columns:1fr; gap:48px }
  .gp-cover{ order:-1 }
  .gp-final__grid{ grid-template-columns:1fr; gap:44px; text-align:center }
  .gp-final__copy .eyebrow{ justify-content:center }
  .gp-final__copy p{ justify-content:center }
  .gp-final__grid-deco{ -webkit-mask-image:radial-gradient(80% 60% at 50% 30%, #000, transparent 80%);
    mask-image:radial-gradient(80% 60% at 50% 30%, #000, transparent 80%) }
}
@media (max-width:640px){
  .gp-stats__grid{ grid-template-columns:1fr; gap:34px }
  .gp-stat:not(:last-child)::after{ display:none }
  .gp-stat:not(:last-child){ padding-bottom:34px; border-bottom:1px solid var(--line) }
  .gp-banner__bar{ flex-direction:column; align-items:flex-start; border-radius:var(--r-xl); text-align:left }
  .gp-banner__bar .btn{ width:100% }
  .gp-steps::before{ display:none }

}
@media (max-width:420px){
  .gp-steps{ grid-template-columns:1fr; gap:20px }
  .gp-steps .gp-step{ flex-direction:row; gap:16px; text-align:left }
  .gp-step b{ margin-top:0 }
}