/* v17: one visible, short form after the three-stage explanation. */
#como{padding-top:100px;padding-bottom:90px;height:auto;min-height:100dvh}
#como .journey-heading{max-width:1120px;margin:0 auto 38px;text-align:center}
.campaign-flow{display:grid;grid-template-columns:1fr 64px 1fr 64px 1fr;align-items:center;max-width:1120px;margin:auto;gap:0}
.flow-stage{padding:28px 22px;border:1px solid #b8c9b5;border-radius:20px;background:#e8eee3;min-height:226px;text-align:left;color:#152c20;position:relative}
.flow-stage>svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5;margin-bottom:15px;display:block}
.flow-stage>span{font-size:12px;display:block;color:#3f5946}.flow-stage h3{font-size:34px;line-height:1.15;margin:8px 0 12px;letter-spacing:-1px}.flow-stage p{font-size:15px;line-height:1.5;margin:0}
.flow-link{height:34px;position:relative;text-align:center;overflow:hidden;color:#39734c}.flow-link:before{content:"";position:absolute;left:0;right:0;top:16px;height:2px;background:#8ba88a}.flow-link span{position:relative;font-size:28px;line-height:30px;background:#edf1e8;padding:0 4px}.flow-link:after{content:"";position:absolute;width:24px;height:4px;background:#54b976;left:-24px;top:15px;box-shadow:0 0 10px #299b4d}
.campaign-flow.in-view .flow-stage{animation:stage-on .7s calc(var(--step)*.55s) both}.campaign-flow.in-view .flow-link:after{animation:flow-light 2.7s .4s infinite}.campaign-flow.in-view .flow-link:nth-of-type(2):after{animation-delay:1s}
@keyframes stage-on{from{background:#e8eee3;box-shadow:0 0 0 #98bb7b00}to{background:#dceacc;box-shadow:0 6px 26px #578d3b15;border-color:#8daf77}}
@keyframes flow-light{to{left:100%}}
.start-here{display:flex;flex-direction:column;align-items:center;width:max-content;gap:8px;color:#267543;text-decoration:none;margin:25px auto 22px;font-size:15px;font-weight:600}.start-here svg{width:38px;height:46px;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;animation:arrow-breathe 2.2s ease-in-out infinite}
@keyframes arrow-breathe{50%{transform:translateY(5px);opacity:.65}}
#brief-form{max-width:780px;margin:auto;padding:32px 38px 26px;border:1px solid #c5d3c0;background:#f9fbf6;border-radius:24px;box-shadow:0 18px 60px #1a3f1e08;scroll-margin-top:90px;color:#193221}
#brief-form h3{font-size:34px;letter-spacing:-1px;margin:0 0 24px;font-weight:500}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px}.form-field{display:flex;flex-direction:column;gap:7px;font-size:14px;line-height:1.5;font-weight:500;min-width:0}.form-field input,.form-field select,.form-field textarea{width:100%;min-width:0;border:1px solid #b4c4af;border-radius:9px;background:#fff;padding:11px 12px;color:#152c20;font:400 16px Heebo,sans-serif;box-sizing:border-box}.form-field textarea{resize:vertical}.form-field :focus-visible{outline:2px solid #458553;outline-offset:2px}.form-field [aria-invalid=true]{border-color:#aa3434}.field-error{font-weight:400;font-size:12px;color:#9a2828;min-height:0}.field-error:empty{display:none}.form-wide,.contact-choice{grid-column:1/-1}.contact-choice{border:0;margin:0;padding:0;min-width:0}.contact-choice legend{font-size:14px;font-weight:500;margin-bottom:10px}.channel-options{display:flex;gap:24px;margin-bottom:12px}.channel-options label{display:flex;align-items:center;gap:6px;font-size:15px}.channel-options input{accent-color:#357248;width:18px;height:18px}.contact-choice .form-field[hidden]{display:none}
#brief-submit{display:inline-flex;gap:10px;align-items:center;margin-top:23px;background:#c8eea5;color:#102b19;min-height:48px}#brief-submit[aria-disabled=true]{opacity:.45;cursor:not-allowed;box-shadow:none}.channel-icon{display:flex}.channel-icon svg{width:22px;height:22px}.channel-icon .mail-icon{fill:none;stroke:currentColor;stroke-width:1.6}.form-promise{font-size:12px;line-height:1.5;margin:13px 0 4px;color:#466049}#brief-status{color:#246537}.journey-cta{display:flex!important;width:max-content;max-width:100%;margin:25px auto 0!important}
#voice-hint{position:absolute;bottom:auto;top:100%;left:0;transform:none;margin-top:7px;font-size:11px;max-width:100%;white-space:normal;padding:5px 10px;line-height:1.4;box-sizing:border-box;z-index:2}.story-listen{position:relative}.hero .copy{position:relative}#inicio .discover{margin-top:45px}
.motion-off .campaign-flow *,.motion-off .campaign-flow *:after,.motion-off .start-here svg{animation-play-state:paused!important}
@media(max-width:760px){#como{padding-top:82px;padding-bottom:65px}#como .journey-heading{text-align:left;margin-bottom:25px}.campaign-flow{grid-template-columns:1fr;max-width:480px}.flow-stage{min-height:0;padding:20px 20px 20px 68px}.flow-stage>svg{position:absolute;left:22px;top:24px;width:26px;height:26px}.flow-stage h3{font-size:28px;margin:4px 0 6px}.flow-stage p{font-size:14px}.flow-stage>span{font-size:11px}.flow-link{width:34px;height:36px;margin:auto;transform:rotate(90deg)}.start-here{margin:18px auto}.start-here svg{height:38px}#brief-form{padding:24px 20px;border-radius:18px}#brief-form h3{font-size:29px}.form-grid{grid-template-columns:1fr;gap:17px}.form-field,.contact-choice legend{font-size:14px}#brief-submit{width:100%;justify-content:center}.journey-cta{font-size:13px!important}.trust-film{height:auto!important;min-height:0!important;aspect-ratio:4/5!important;width:100%!important;max-width:440px;margin-left:auto!important;margin-right:auto!important;overflow:hidden}.trust-film video{width:100%!important;height:100%!important;object-fit:contain!important}.trust-film figcaption{bottom:12px!important}}
@media(prefers-reduced-motion:reduce){.campaign-flow *,.campaign-flow *:after,.start-here svg{animation:none!important}.flow-stage{background:#dceacc}.flow-link:after{display:none}}
.story-with-hint{position:relative;width:max-content;max-width:100%}.story-with-hint #voice-hint{top:100%}
#voice-hint{width:max-content;max-width:none;white-space:nowrap}

/* v17.1: chapter-scoped motion; pausing always reveals the complete explanation. */
.campaign-flow.in-view .flow-stage{animation:stage-arrive .65s cubic-bezier(.2,.7,.25,1) calc(var(--step)*.25s) both}
.campaign-flow.in-view .flow-stage>svg{animation:icon-glow 1s ease-out calc(var(--step)*.25s) both}
.campaign-flow.in-view .flow-link:after{animation:flow-pass 4s ease-in-out .5s infinite;left:0;opacity:0}
.campaign-flow.in-view .flow-link:nth-child(4):after{animation-delay:1s}
.start-here svg{animation:none}
.flow-active .start-here{animation:arrow-arrive .6s ease-out 1.15s both}
.flow-active .start-here svg{animation:arrow-breathe 2.8s ease-in-out 1.75s infinite}
@keyframes stage-arrive{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none;background:#dceacc;border-color:#8daf77}}
@keyframes icon-glow{0%,100%{color:#39734c;filter:none}45%{color:#248b43;filter:drop-shadow(0 0 7px #54b97699)}}
@keyframes flow-pass{0%{opacity:0;transform:translateX(-24px)}10%,35%{opacity:1}50%,100%{opacity:0;transform:translateX(90px)}}
@keyframes arrow-arrive{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.motion-off .campaign-flow *,.motion-off .campaign-flow *:after,.motion-off .start-here,.motion-off .start-here svg{animation:none!important;opacity:1;transform:none}
.motion-off .flow-link:after{display:none}
@media(prefers-reduced-motion:reduce){.campaign-flow *,.campaign-flow *:after,.start-here,.start-here svg{animation:none!important;opacity:1;transform:none}.flow-link:after{display:none}}

/* v17.2: center chapter 05 heading on desktop only. */
@media(min-width:761px){#como .journey-heading{grid-template-columns:1fr}}