/* IBERFIT WEB V6.43.3 — aesthetic polish: CTA system + app storytelling */
/* Final CTA: one coherent conversion surface instead of oversized copy + isolated button. */
.cta-panel{padding-top:clamp(1.5rem,3vw,2.5rem)}
.cta-panel-inner{position:relative;isolation:isolate;overflow:hidden;display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-items:start!important;justify-content:initial!important;gap:0!important;padding:clamp(2.35rem,5vw,4.35rem)!important;background:radial-gradient(circle at 88% 42%,rgba(217,181,104,.15),transparent 18rem),linear-gradient(145deg,#173827,#1f4933 58%,#173827)!important;border:1px solid rgba(217,181,104,.18);border-radius:28px!important;box-shadow:0 24px 64px rgba(4,22,16,.16)!important}
.cta-panel-inner:after{content:"";position:absolute;z-index:-1;right:clamp(1.5rem,6vw,5.5rem);top:50%;width:clamp(170px,19vw,300px);aspect-ratio:173/192;transform:translateY(-50%);background:url('/assets/iberfit-isotipo-oficial.png') center/contain no-repeat;opacity:.055;filter:grayscale(1) brightness(2.1);pointer-events:none}
.cta-panel-inner>div{position:relative;z-index:1;max-width:min(760px,72%)}
.cta-panel-inner h2{max-width:23ch!important;font-size:clamp(2.05rem,3.45vw,3.5rem)!important;line-height:1.02!important;letter-spacing:-.038em;margin-bottom:1rem!important;text-wrap:balance}
.cta-panel-inner p{max-width:44rem!important;margin:0!important;color:rgba(255,255,255,.77)!important;font-size:clamp(.96rem,1.2vw,1.04rem);line-height:1.65}
.cta-panel-inner>.btn{position:relative;z-index:1;justify-self:start!important;align-self:auto!important;margin-top:1.65rem;min-height:50px;padding-inline:1.45rem!important;background:linear-gradient(135deg,#d9b568,#b8973a)!important;color:#10271b!important;border-color:rgba(255,255,255,.12)!important;box-shadow:0 12px 30px rgba(4,22,16,.22)!important}
@media(hover:hover) and (pointer:fine){.cta-panel-inner>.btn:hover{transform:translateY(-2px);box-shadow:0 17px 36px rgba(4,22,16,.28)!important}}

/* Online app evidence: avoid cramped two-column layouts and use a crop that actually shows the planning UI. */
.app-story{grid-template-columns:minmax(280px,.88fr) minmax(0,1.12fr)!important;gap:clamp(36px,5vw,72px)!important}
.app-story-copy,.app-story-stage{min-width:0}
.app-story-stage{width:100%;min-height:560px!important}
.app-screen--plan{width:min(86%,560px)!important;right:1%!important;top:2%!important}
.app-screen--session{width:min(49%,390px)!important;left:0!important;bottom:1%!important}
.app-screen--progress{width:min(49%,390px)!important;right:0!important;bottom:2%!important}
.app-screen--plan img{aspect-ratio:760/387;object-fit:cover;background:#0b1d15}

@media(max-width:1160px){.app-story{grid-template-columns:1fr!important}.app-story-copy{max-width:720px!important}.app-story-stage{max-width:760px;margin-inline:auto}.app-story-copy h2{max-width:18ch!important}}
@media(max-width:760px){.cta-panel-inner{padding:2rem 1.35rem!important;border-radius:22px!important}.cta-panel-inner:after{right:-1.75rem;top:40%;width:180px;opacity:.035}.cta-panel-inner>div{max-width:100%}.cta-panel-inner h2{max-width:20ch!important;font-size:clamp(2rem,9vw,2.8rem)!important}.cta-panel-inner>.btn{width:100%;justify-self:stretch!important;margin-top:1.4rem}.app-story-stage{min-height:0!important}}
@media(max-width:640px){.app-story-stage{align-items:start!important}.app-story-stage .app-screen{align-self:start!important;height:auto!important}}
@media(prefers-reduced-motion:reduce){.cta-panel-inner>.btn{transition:none!important}}