.proposals{background:var(--paper);color:var(--blue);overflow:clip;scroll-margin-top:0}
.proposals-head{padding:36px 6vw 65px;max-width:1600px;margin:auto}
.proposals-topline{display:flex;justify-content:space-between;gap:20px;border-top:1px solid;padding-top:16px;font:600 11px/1.4 monospace;letter-spacing:.08em}
.proposals h2{font:900 clamp(54px,9.2vw,148px)/.88 Impact,'Arial Black',Arial,sans-serif;letter-spacing:-.035em;margin:55px 0 30px}
.proposals h2>span{display:block;font-size:.42em;letter-spacing:-.015em;margin-bottom:.45em;color:var(--purple)}
.proposals h2 em{font-style:normal;display:inline-block;color:var(--orange);transform:rotate(-3deg)}
.proposals-lead{display:flex;justify-content:space-between;align-items:center;gap:30px}
.proposals-lead p{max-width:500px;font-size:clamp(19px,1.6vw,25px);line-height:1.45;margin:0}
.proposals-lead>span{font:95px/.8 Arial,sans-serif;color:var(--purple);padding-right:5vw}
.proposal-grid{display:grid;grid-template-columns:1fr 1fr}
.proposal{position:relative;isolation:isolate;padding:40px 6vw 55px;min-width:0}
.proposal-label{font:600 11px/1.5 monospace;letter-spacing:.065em;position:relative;z-index:2;margin:0 0 45px;border-bottom:1px solid;padding-bottom:17px}
.proposal h3{font:900 clamp(36px,3.7vw,60px)/1.02 Impact,'Arial Black',Arial,sans-serif;letter-spacing:-.025em;margin:0 0 25px;position:relative;z-index:1}
.proposal h3 em{font-style:normal}
.proposal p:not(.proposal-label){font-size:clamp(17px,1.25vw,20px);line-height:1.55;max-width:550px;margin:0 0 20px;position:relative;z-index:1}
.proposal details{position:relative;z-index:2;margin-top:30px;max-width:560px;border-top:1px solid;border-bottom:1px solid}
.proposal summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;font-size:16px;font-weight:700}
.proposal summary::-webkit-details-marker{display:none}
.proposal summary span{font:30px/.7 Arial,sans-serif;transition:transform .18s ease}
.proposal details[open] summary span{transform:rotate(45deg)}
.proposal-detail{padding:4px 0 15px}
.proposal .proposal-detail p{font-size:16px;line-height:1.55}
.proposal .proposal-detail p:last-child{margin-bottom:8px}
.proposal-board{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:7vw;background:var(--blue);color:var(--white);align-items:center;padding-top:45px;padding-bottom:65px}
.proposal-board h3{font-size:clamp(54px,6vw,94px)}
.proposal-board h3 em{color:var(--yellow)}
.proposal-board .proposal-label{color:var(--yellow)}
.board-art{position:relative;padding:35px 0;min-width:0}
.paper-board{position:relative;z-index:1;background:var(--paper);color:var(--blue);padding:28px;transform:rotate(5deg);box-shadow:-14px 14px 0 var(--orange)}
.board-top{font:700 14px/1.2 monospace;letter-spacing:.15em;display:flex;justify-content:space-between;border-bottom:2px solid;padding-bottom:18px}
.board-ledger{display:grid;font:900 clamp(40px,5.4vw,84px)/1.1 Impact,'Arial Black',Arial,sans-serif;letter-spacing:-.02em;padding:20px 0}
.board-ledger span+span{color:var(--purple)}
.board-ledger strong{background:var(--yellow);font-weight:900;margin:10px -7px 0;padding:5px 7px}
.board-bottom{font:600 10px/1.4 monospace;letter-spacing:.06em;border-top:2px solid;padding-top:17px}
.board-star{position:absolute;right:-35px;top:-40px;font:220px/1 Georgia,serif;color:var(--yellow);transform:rotate(10deg)}
.board-stamp{position:absolute;bottom:-15px;right:0;z-index:2;color:var(--white);background:var(--purple);font:900 clamp(23px,3vw,43px)/1 Impact,'Arial Black',Arial,sans-serif;padding:14px 20px;transform:rotate(-7deg)}
.proposal-goals{background:var(--yellow)}
.proposal-goals h3 em{color:var(--purple)}
.proposal-ledger{background:var(--paper)}
.proposal-ledger h3 em{color:var(--purple)}
.proposal-symbol{position:absolute;z-index:0;right:4vw;top:90px;font:160px/1 Impact,Arial,sans-serif;opacity:.13;pointer-events:none}
.target-symbol{font-family:Arial,sans-serif;font-size:220px;top:65px;right:3vw;transform:rotate(-15deg)}
.ledger-symbol{font-size:210px;transform:rotate(-12deg);color:var(--purple)}
.proposal-shopping{background:var(--purple);color:var(--white);padding-top:40px}
.proposal-shopping h3 em{color:var(--yellow)}
.shopping-mark{display:block;width:fit-content;font:700 11px/1.15 monospace;letter-spacing:.08em;transform:rotate(-7deg);color:var(--blue);background:var(--yellow);padding:9px 14px;margin:-12px 0 28px}
.proposal-calendar{background:var(--orange);color:var(--blue)}
.calendar-symbol{font:220px/1 Arial,sans-serif;top:90px;right:3vw}
.proposal-credit{grid-column:1/-1;display:grid;grid-template-columns:.9fr 1fr;gap:8vw;align-items:center;background:var(--paper);padding-top:65px;padding-bottom:65px}
.credit-art{position:relative;isolation:isolate;padding:55px 10px;transform:rotate(-5deg);text-align:center}
.credit-art>span{position:absolute;inset:-25px 0 auto;font:clamp(320px,35vw,540px)/1 Georgia,serif;z-index:-1;color:var(--yellow);text-align:center}
.credit-art strong{display:block;font:900 clamp(42px,5.2vw,80px)/.95 Impact,'Arial Black',Arial,sans-serif;letter-spacing:-.035em;color:var(--purple)}
.proposal-credit h3 em{color:var(--purple)}
.proposals-footer{padding:40px 6vw;display:flex;align-items:end;justify-content:space-between;gap:30px;background:var(--blue);color:var(--white)}
.proposals-footer p{font:900 clamp(35px,5vw,75px)/.9 Impact,'Arial Black',Arial,sans-serif;margin:0;letter-spacing:-.02em}
.proposals-footer strong{color:var(--yellow);font-weight:900}
.proposals-footer .replay{align-self:end}
@media(max-width:700px){
 .proposals-head{padding:28px 6vw 45px}.proposals-topline{font-size:9px;gap:14px}.proposals h2{font-size:clamp(44px,11.5vw,80px);margin:40px 0 25px;line-height:.98}.proposals h2 em{display:block}.proposals-lead p{font-size:18px}.proposals-lead>span{font-size:64px;padding:0}
 .proposal-grid{grid-template-columns:1fr}.proposal{padding:30px 6vw 42px}.proposal-label{font-size:10px;margin-bottom:30px}.proposal h3{font-size:clamp(35px,9.4vw,58px)}
 .proposal-board,.proposal-credit{grid-template-columns:1fr;gap:32px}.proposal-board{padding-bottom:65px}.proposal-board h3{font-size:clamp(50px,13vw,82px)}.board-art{padding:15px 12px 25px;max-width:430px;width:100%;margin:auto}.board-star{font-size:150px;top:-20px;right:-8px}.paper-board{padding:23px;box-shadow:-8px 9px 0 var(--orange)}.board-ledger{font-size:clamp(46px,13vw,75px)}.board-stamp{bottom:0;right:10px}
 .proposal-symbol{right:6vw;top:65px}.target-symbol{font-size:180px}.ledger-symbol{font-size:165px}.calendar-symbol{font-size:180px;top:75px}
 .proposal-credit .proposal-copy{grid-row:1}.credit-art{padding:50px 0;max-width:430px;width:100%;margin:auto}.credit-art>span{font-size:330px;top:-15px}.credit-art strong{font-size:52px}
 .proposals-footer{align-items:start;flex-direction:column;padding:35px 6vw}.proposals-footer .replay{align-self:start}
}
@media(prefers-reduced-motion:reduce){.proposal summary span{transition:none}}

/* Generated lettering and halftone cutouts */
.proposals-head{display:grid;grid-template-columns:1.55fr .65fr;column-gap:5vw;align-items:center;padding-bottom:45px}
.proposals-topline{grid-column:1/-1}
.proposals h2.proposal-head-art{font-size:inherit;line-height:0;margin:30px 0 0;min-width:0}
.proposal-head-art img{display:block;width:100%;height:auto}
.proposals-lead{display:block;padding-top:40px}
.proposals-lead>span{display:block;font-size:115px;margin-top:30px;transform:rotate(-10deg)}
.proposals-lead p{font-size:clamp(18px,1.65vw,26px);max-width:330px}
.proposal h3.proposal-title-art{font-size:inherit;line-height:0;margin:-8px 0 18px;max-width:520px}
.proposal-title-art img{display:block;width:100%;height:auto}
.proposal-board .proposal-title-art{max-width:560px}
.proposal-board{gap:5vw}
.proposal-board .proposal-label{margin-bottom:20px}
.proposal-label{margin-bottom:24px}
.board-art{height:650px;padding:0;display:grid;place-items:center}
.proposal-cutout{display:block;width:100%;height:100%;object-fit:contain}
.receipt-cutout{position:relative;z-index:1;transform:rotate(7deg);max-height:630px}
.board-star{top:12%;right:-2%;font-size:210px}
.board-orbit{position:absolute;inset:13% 0 7%;border:2px solid var(--yellow);border-radius:50%;transform:rotate(-23deg)}
.board-stamp{bottom:3%;right:0;box-shadow:5px 5px 0 var(--orange);transform:rotate(-9deg)}
.proposal-goals{background-image:radial-gradient(#0b2f7710 .7px,transparent .9px);background-size:5px 5px}
.proposal-ledger{background-image:repeating-linear-gradient(0deg,transparent 0 37px,#0b2f7709 37px 38px)}
.shopping-collage{height:260px;margin:20px -2vw -10px;transform:rotate(-5deg)}
.calendar-collage{position:relative;isolation:isolate;height:260px;display:grid;place-items:center;margin:20px 0 -10px}
.calendar-paper{background:var(--paper);padding:17px 28px;transform:rotate(6deg);box-shadow:9px 9px 0 var(--purple);position:relative;z-index:1}
.calendar-paper>span{font:600 10px/1.3 monospace;letter-spacing:.1em;display:block;border-bottom:1px solid;padding-bottom:8px}
.calendar-paper>span:last-child{border-top:1px solid;border-bottom:0;padding-top:8px;padding-bottom:0}
.calendar-paper strong{display:block;font:900 35px/.95 Impact,'Arial Black',Arial,sans-serif;padding:12px 0}
.calendar-ring{position:absolute;inset:15px 4%;border:2px solid;border-radius:50%;transform:rotate(-17deg)}
.calendar-collage>b{position:absolute;z-index:2;right:1%;bottom:0;font:130px/.8 Arial,sans-serif;color:var(--purple);transform:rotate(-10deg)}
.proposal-credit{grid-template-columns:.8fr 1fr;gap:6vw}
.credit-art{height:610px;max-width:520px;padding:0;transform:rotate(-8deg)}
.credit-art img{position:relative;z-index:1}
.credit-art>span.merit-orbit{position:absolute;inset:20% -5% 10%;border:2px solid var(--purple);border-radius:50%;transform:rotate(22deg)}
.proposal-credit .proposal-title-art{max-width:620px}
.shopping-collage{height:340px;transform:rotate(-3deg)}
.calendar-collage.calendar-mascot{height:340px}
.calendar-mascot .proposal-cutout{position:relative;z-index:1;object-fit:cover;object-position:center}
.board-art.board-video{height:auto;padding:0;width:100%;max-width:640px;margin:auto}
.accounts-demo{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#1c285f}
.proposal summary:focus-visible{outline:3px solid currentColor;outline-offset:6px}
@media(prefers-reduced-motion:no-preference){
 .proposal summary span{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
 .proposal-title-art img{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
 .proposal summary{transition:padding .25s ease}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .proposal-title-art:hover img{transform:rotate(-2deg) scale(1.025)}
 .proposal summary:hover{padding-left:10px;padding-right:10px}
 .proposal summary:hover span{transform:rotate(90deg)}
 .proposal details[open] summary:hover span{transform:rotate(135deg)}
}
@media(max-width:1000px) and (min-width:701px){.board-art{height:500px}.credit-art{height:490px}.shopping-collage{height:210px}.calendar-collage{height:210px}.calendar-paper strong{font-size:29px}}
@media(max-width:700px){
 .proposals-head{display:block;padding-bottom:35px}.proposals h2.proposal-head-art{margin:26px -2vw 8px}.proposals-lead{display:flex;padding-top:0;gap:16px}.proposals-lead>span{font-size:65px;margin-top:0}.proposals-lead p{font-size:18px;max-width:280px}
 .proposal h3.proposal-title-art{margin:-5px 0 20px;max-width:520px}.proposal-label{margin-bottom:25px}.proposal-board .proposal-label{margin-bottom:20px}
 .board-art{height:440px;max-width:430px;margin:0 auto;width:100%;padding:0}.receipt-cutout{max-height:440px}.board-star{font-size:140px;top:8%}.board-stamp{bottom:0;right:3%}.proposal-board{gap:20px}
 .shopping-collage{height:270px;margin:10px -2vw 0}.calendar-collage{height:245px;margin-top:20px}.calendar-collage>b{font-size:100px}
 .calendar-collage.calendar-mascot{height:300px}
 .proposal-credit{grid-template-columns:1fr;gap:15px}.credit-art{height:410px;max-width:330px;padding:0;margin:0 auto}.credit-art>span.merit-orbit{inset:20% -3% 10%}
}

/* Small print details: navigation, ink marks, and quieter illustrations. */
.ink-underline{position:relative;text-decoration-line:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;text-underline-offset:5px;text-decoration-skip-ink:none}
.proposals-topline>span:first-child::after{content:"";display:inline-block;width:36px;height:8px;margin-left:12px;background:radial-gradient(circle,var(--orange) 3px,transparent 3.5px) 0 0/12px 8px}
.proposal-title-art{scroll-margin-top:35px}
.proposal-label{border-bottom:0;padding-bottom:20px}
.proposal-label::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;clip-path:polygon(0 30%,38% 5%,70% 40%,100% 10%,99% 75%,64% 100%,26% 65%,0 95%);opacity:.65}
.proposal-label::before{content:"";position:absolute;right:0;bottom:-3px;width:8px;height:8px;background:currentColor;border-radius:50%;transform:rotate(-10deg)}
.proposal summary span{display:grid;place-items:center;flex-shrink:0;width:29px;height:29px;border:1px solid currentColor;border-radius:50%;font-size:25px;line-height:1}
.proposal details[open] .proposal-detail{border-left:2px solid currentColor;padding:2px 0 2px 16px;margin:0 0 20px}
.proposal summary:focus-visible{outline-offset:4px}
.proposals-footer{position:relative;padding-top:55px}
.proposals-footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:9px;background:var(--paper);clip-path:polygon(0 0,100% 0,100% 35%,95% 60%,88% 30%,82% 80%,75% 45%,67% 100%,60% 30%,54% 70%,46% 35%,39% 90%,33% 40%,26% 70%,20% 25%,12% 85%,6% 35%,0 65%)}
.proposals-footer .replay{text-underline-offset:6px}
@media(max-width:700px){.proposals-topline>span:first-child::after{display:none}.proposal-title-art{scroll-margin-top:22px}}

/* ── Animación de la propuesta 02: 3 escenas en bucle de 18 s ──────────────
   CSS puro, sin JS ni imágenes. Las medidas van en cqw para que escale con
   el ancho del contenedor. Respeta prefers-reduced-motion: las escenas se
   cruzan con un fundido simple y la barra de progreso se queda quieta. */
.plan-anim{--pm-dur:12s;--pm-card:#0b2f77;--pm-paper:#eae5dc;--pm-yellow:#ffc400;--pm-orange:#ff6a00;--pm-purple:#4a0090;
  position:relative;width:100%;aspect-ratio:1;container-type:inline-size;overflow:hidden;background:var(--pm-card);
  font-family:Arial,Helvetica,sans-serif;margin:0 0 22px}
.plan-anim .esc{position:absolute;inset:0;padding:9cqw 8cqw 12cqw;display:flex;flex-direction:column;justify-content:center;
  opacity:0;animation:pm-scene var(--pm-dur) linear infinite both}
.plan-anim .esc-1{gap:6cqw}
.plan-anim .esc-2{gap:5.5cqw;animation-delay:calc(var(--pm-dur)/3)}
.plan-anim .esc-3{gap:4cqw;padding:8cqw 8cqw 11cqw;animation-delay:calc(var(--pm-dur)*2/3)}

.plan-anim [data-pm]{animation-duration:var(--pm-dur);animation-iteration-count:infinite;animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.2,.8,.2,1)}

.plan-anim .tit{margin:0;font:900 9.6cqw/.95 Impact,"Arial Black",Arial,sans-serif;letter-spacing:-.03em;color:var(--pm-paper);animation-name:pm-up}
.plan-anim .tit span{color:var(--pm-yellow)}
.plan-anim .cifra{font:900 14.5cqw/.9 Impact,"Arial Black",Arial,sans-serif;letter-spacing:-.04em;margin-top:2cqw}
.plan-anim .rotulo{font:700 4.3cqw/1.3 monospace;letter-spacing:.1em}

/* escena 1 · la meta */
.plan-anim .ficha{transform:rotate(-1.4deg)}
.plan-anim .ficha>div{background:var(--pm-paper);color:var(--pm-card);padding:4.5cqw 5cqw 5cqw;
  box-shadow:1.8cqw 2cqw 0 var(--pm-orange);animation-name:pm-pop;animation-delay:0.167s}
.plan-anim .barra-grupo{animation-name:pm-up;animation-delay:0.3s}
.plan-anim .barra-grupo .rotulo{display:flex;justify-content:flex-end;color:var(--pm-yellow);margin-bottom:2cqw}
.plan-anim .barra{position:relative;height:4.2cqw;background:#ffffff24}
.plan-anim .barra i{position:absolute;inset:0;background:var(--pm-orange);transform-origin:left center;
  animation-name:pm-bar;animation-timing-function:cubic-bezier(.3,.9,.3,1)}
.plan-anim .barra u{position:absolute;top:-2cqw;bottom:-2cqw;right:0;width:1cqw;background:var(--pm-yellow)}
.plan-anim .esc-1 .tit{animation-delay:0.433s}

/* escena 2 · el año con presupuesto */
.plan-anim .esc-2 .tit{animation-delay:calc(var(--pm-dur)/3 + 0.133s)}
.plan-anim .lista{display:flex;flex-direction:column}
.plan-anim .fila{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2.6cqw;padding:2.8cqw 0;
  border-bottom:1px solid #ffffff33;animation-name:pm-left}
.plan-anim .fila:last-child{border-bottom:0}
.plan-anim .mes{background:var(--pm-yellow);color:var(--pm-card);font:700 4.3cqw/1 monospace;letter-spacing:.08em;padding:1.7cqw 2cqw}
.plan-anim .qué{font:700 4.6cqw/1.1 Arial,Helvetica,sans-serif;color:var(--pm-paper);letter-spacing:-.01em}
.plan-anim .plata{font:900 6.2cqw/1 Impact,"Arial Black",Arial,sans-serif;letter-spacing:-.02em;color:var(--pm-yellow)}
.plan-anim .fila:nth-child(1){animation-delay:calc(var(--pm-dur)/3 + 0.333s)}
.plan-anim .fila:nth-child(2){animation-delay:calc(var(--pm-dur)/3 + 0.467s)}
.plan-anim .fila:nth-child(3){animation-delay:calc(var(--pm-dur)/3 + 0.6s)}
.plan-anim .fila:nth-child(4){animation-delay:calc(var(--pm-dur)/3 + 0.733s)}

/* escena 3 · las cuentas antes y después */
.plan-anim .esc-3 .tit{font-size:8.8cqw;animation-delay:calc(var(--pm-dur)*2/3 + 0.133s)}
.plan-anim .fichas{display:flex;flex-direction:column;gap:3cqw}
.plan-anim .tarjeta{background:var(--pm-paper);color:var(--pm-card);padding:3.2cqw 3.6cqw 3.6cqw;display:flex;
  flex-direction:column;gap:2.4cqw;box-shadow:1.2cqw 1.4cqw 0 #00000038;animation-name:pm-pop}
.plan-anim .tarjeta>span{font:700 4.2cqw/1 monospace;letter-spacing:.12em}
.plan-anim .antes{transform:rotate(-1.1deg)}
.plan-anim .antes .tarjeta{animation-delay:calc(var(--pm-dur)*2/3 + 0.3s)}
.plan-anim .después{transform:rotate(1.1deg)}
.plan-anim .después .tarjeta{animation-delay:calc(var(--pm-dur)*2/3 + 0.467s)}
.plan-anim .después .tarjeta>span{color:var(--pm-purple)}
.plan-anim .dato{display:grid;gap:3cqw;margin:0}
.plan-anim .dato.dos{grid-template-columns:1fr 1fr}
.plan-anim .dato.tres{grid-template-columns:1fr 1fr 1fr;gap:2.6cqw}
.plan-anim .dato dt{font:700 3.8cqw/1.2 monospace;letter-spacing:.06em;color:var(--pm-purple)}
.plan-anim .dato dd{font:900 6.8cqw/1 Impact,"Arial Black",Arial,sans-serif;letter-spacing:-.02em;margin:.8cqw 0 0}
.plan-anim .sello{position:absolute;right:7cqw;bottom:4.5cqw;background:var(--pm-yellow);color:var(--pm-card);
  font:900 6cqw/1 Impact,"Arial Black",Arial,sans-serif;letter-spacing:.02em;padding:2.2cqw 3cqw;
  box-shadow:1.1cqw 1.2cqw 0 #00000045;animation-name:pm-stamp;animation-timing-function:cubic-bezier(.2,.9,.2,1);
  animation-delay:calc(var(--pm-dur)*2/3 + 0.633s)}

/* barra de progreso del bucle */
.plan-anim .bucle{position:absolute;left:0;right:0;bottom:0;height:1.4cqw;background:#ffffff1f;z-index:4}
.plan-anim .bucle i{display:block;height:100%;background:var(--pm-yellow);transform-origin:left center;transform:scaleX(0);
  animation:pm-loop var(--pm-dur) linear infinite}

@keyframes pm-scene{0%,100%{opacity:0}2.2%,30.6%{opacity:1}33%{opacity:0}}
@keyframes pm-up{0%,100%{opacity:0;transform:translateY(3.5cqw)}3.8%,30%{opacity:1;transform:none}32.8%{opacity:0}}
@keyframes pm-pop{0%,100%{opacity:0;transform:scale(.9)}4.2%,30%{opacity:1;transform:scale(1)}32.8%{opacity:0}}
@keyframes pm-left{0%,100%{opacity:0;transform:translateX(-5cqw)}4%,30%{opacity:1;transform:none}32.8%{opacity:0}}
@keyframes pm-bar{0%,4.5%{transform:scaleX(0)}17%,100%{transform:scaleX(1)}}
@keyframes pm-stamp{0%,100%{opacity:0;transform:rotate(-26deg) scale(1.9)}4.6%,30%{opacity:1;transform:rotate(-7deg) scale(1)}32.8%{opacity:0}}
@keyframes pm-fade{0%,100%{opacity:0}4%,30%{opacity:1}32.8%{opacity:0}}
@keyframes pm-loop{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}

@media(prefers-reduced-motion:reduce){
  .plan-anim [data-pm]{animation-name:pm-fade!important;transform:none!important}
  .plan-anim .barra i{transform:scaleX(1)}
  .plan-anim .bucle i{animation:none;transform:scaleX(1)}
}

/* Cada escena entra y luego se sostiene ~5 s. Para que nunca quede totalmente
   quieta, los bloques de contenido flotan despacio de forma continua. Se anima
   la propiedad `translate`, no `transform`, para no pisar las rotaciones. */
.plan-anim .ficha,
.plan-anim .lista,
.plan-anim .fichas{animation:pm-flota 4.5s ease-in-out infinite}
.plan-anim .lista{animation-duration:5.2s}
.plan-anim .fichas{animation-duration:5.8s}
@keyframes pm-flota{0%,100%{translate:0 0}50%{translate:0 -1.1cqw}}
@media(prefers-reduced-motion:reduce){
  .plan-anim .ficha,.plan-anim .lista,.plan-anim .fichas{animation:none;translate:none}
}

/* ── Animación de la propuesta 03: 3 escenas en bucle de 12 s ──────────────
   Misma técnica que .plan-anim, pero sobre papel rayado en vez de fondo azul.
   Keyframes con prefijo sh- porque el archivo original reutilizaba los nombres
   pm- con definiciones distintas y se pisaban entre sí. */
.hoja-anim{--sh-dur:12s;--sh-ink:#0b2f77;--sh-paper:#eae5dc;--sh-purple:#4a0090;
  position:relative;width:100%;aspect-ratio:1;container-type:inline-size;overflow:hidden;
  background:repeating-linear-gradient(0deg,transparent 0 6.2cqw,#0b2f7714 6.2cqw,#0b2f7714 6.4cqw) var(--sh-paper);
  font-family:Arial,Helvetica,sans-serif;margin:0 0 22px}
.hoja-anim .esc{position:absolute;inset:0;padding:12cqw 9cqw 14cqw;display:flex;flex-direction:column;justify-content:center;
  opacity:0;animation:sh-scene var(--sh-dur) linear infinite forwards}
.hoja-anim .esc-1{gap:9cqw}
.hoja-anim .esc-2{gap:8cqw;animation-delay:calc(var(--sh-dur)/3)}
.hoja-anim .esc-3{gap:6cqw;animation-delay:calc(var(--sh-dur)*2/3)}

.hoja-anim [data-sh]{animation-duration:var(--sh-dur);animation-iteration-count:infinite;animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.2,.8,.2,1)}

.hoja-anim .tit{margin:0;font:900 12cqw/1.02 Impact,"Arial Black",Arial,sans-serif;letter-spacing:-.035em;
  color:var(--sh-ink);animation-name:sh-up}
.hoja-anim .tit span{color:var(--sh-purple)}

/* escena 1 · la misma plantilla */
.hoja-anim .chips{display:flex;gap:3cqw;align-items:stretch}
.hoja-anim .chip{flex:1;text-align:center;border:.7cqw solid var(--sh-ink);color:var(--sh-ink);
  font:700 5.2cqw/1 monospace;letter-spacing:.04em;padding:3.4cqw 1cqw;animation-name:sh-up}
.hoja-anim .chip.lleno{border-color:var(--sh-purple);background:var(--sh-purple);color:var(--sh-paper)}
.hoja-anim .chip:nth-child(1){animation-delay:.333s}
.hoja-anim .chip:nth-child(2){animation-delay:.467s}
.hoja-anim .chip:nth-child(3){animation-delay:.6s}

/* escena 2 · el saldo se calcula solo */
.hoja-anim .esc-2 .tit{animation-delay:calc(var(--sh-dur)/3)}
.hoja-anim .suma{display:flex;flex-direction:column;align-items:flex-end;gap:2cqw}
.hoja-anim .mov{font:900 11cqw/1 Impact,"Arial Black",Arial,sans-serif;letter-spacing:-.02em;color:var(--sh-ink);
  animation-name:sh-left}
.hoja-anim .mov.resta{color:var(--sh-purple)}
.hoja-anim .suma .mov:nth-child(1){animation-delay:calc(var(--sh-dur)/3 + .367s)}
.hoja-anim .suma .mov:nth-child(2){animation-delay:calc(var(--sh-dur)/3 + .567s)}
.hoja-anim .raya{align-self:stretch;height:.8cqw;background:var(--sh-ink);transform-origin:right center;margin:1.4cqw 0;
  animation-name:sh-rule;animation-timing-function:cubic-bezier(.3,.9,.3,1);animation-delay:calc(var(--sh-dur)/3 + .667s)}
.hoja-anim .total{background:var(--sh-ink);color:var(--sh-paper);font:900 13cqw/1 Impact,"Arial Black",Arial,sans-serif;
  letter-spacing:-.02em;padding:2cqw 3cqw;animation-name:sh-pop;animation-delay:calc(var(--sh-dur)/3 + .867s)}

/* escena 3 · todos igual, todo se compara */
.hoja-anim .esc-3 .tit{font-size:11cqw;animation-delay:calc(var(--sh-dur)*2/3)}
.hoja-anim .salones{display:flex;flex-direction:column;gap:3cqw}
.hoja-anim .salon{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:3cqw;animation-name:sh-left}
.hoja-anim .salon:nth-child(1){animation-delay:calc(var(--sh-dur)*2/3 + .333s)}
.hoja-anim .salon:nth-child(2){animation-delay:calc(var(--sh-dur)*2/3 + .467s)}
.hoja-anim .salon:nth-child(3){animation-delay:calc(var(--sh-dur)*2/3 + .6s)}
.hoja-anim .curso{background:var(--sh-ink);color:var(--sh-paper);font:700 5cqw/1 monospace;letter-spacing:.06em;padding:1.6cqw 2cqw}
.hoja-anim .puntos{height:0;border-bottom:.4cqw dotted #0b2f7766}
.hoja-anim .monto{font:900 7.4cqw/1 Impact,"Arial Black",Arial,sans-serif;letter-spacing:-.02em;color:var(--sh-ink)}
.hoja-anim .cierre{margin:0;font:900 6.4cqw/1.05 Impact,"Arial Black",Arial,sans-serif;letter-spacing:-.02em;
  color:var(--sh-purple);animation-name:sh-up;animation-delay:calc(var(--sh-dur)*2/3 + .733s)}

/* barra del bucle */
.hoja-anim .bucle{position:absolute;left:0;right:0;bottom:0;height:1.4cqw;background:#0b2f7720;z-index:4}
.hoja-anim .bucle i{display:block;height:100%;background:var(--sh-purple);transform-origin:left center;transform:scaleX(0);
  animation:sh-loop var(--sh-dur) linear infinite}

/* flotación continua: los envoltorios sin entrada propia */
.hoja-anim .chips,.hoja-anim .suma,.hoja-anim .salones{animation:sh-flota 4.8s ease-in-out infinite}
.hoja-anim .suma{animation-duration:5.4s}
.hoja-anim .salones{animation-duration:6s}

@keyframes sh-scene{0%,33.3%{opacity:1}33.31%,100%{opacity:0}}
@keyframes sh-up{0%{opacity:0;transform:translateY(3.5cqw)}2.4%,33.3%{opacity:1;transform:none}33.31%,100%{opacity:0;transform:translateY(3.5cqw)}}
@keyframes sh-pop{0%{opacity:0;transform:scale(.9)}2.6%,33.3%{opacity:1;transform:scale(1)}33.31%,100%{opacity:0;transform:scale(.9)}}
@keyframes sh-left{0%{opacity:0;transform:translateX(-5cqw)}2.5%,33.3%{opacity:1;transform:none}33.31%,100%{opacity:0;transform:translateX(-5cqw)}}
@keyframes sh-rule{0%,5%{transform:scaleX(0)}14%,100%{transform:scaleX(1)}}
@keyframes sh-fade{0%{opacity:0}2.5%,33.3%{opacity:1}33.31%,100%{opacity:0}}
@keyframes sh-loop{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes sh-flota{0%,100%{translate:0 0}50%{translate:0 -1.1cqw}}

@media(prefers-reduced-motion:reduce){
  .hoja-anim [data-sh]{animation-name:sh-fade!important;transform:none!important}
  .hoja-anim .raya{transform:scaleX(1)}
  .hoja-anim .bucle i{animation:none;transform:scaleX(1)}
  .hoja-anim .chips,.hoja-anim .suma,.hoja-anim .salones{animation:none;translate:none}
}

/* ── Animación de la propuesta 04: 4 escenas en bucle de 10 s ──────────────
   El archivo original cambiaba el DOM con JavaScript; aquí las cuatro escenas
   van superpuestas y se turnan con CSS. Prefijo cv- (convenio). */
.conv-anim{--cv-dur:10s;--cv-bg:#4a0090;--cv-paper:#eae5dc;--cv-yellow:#ffc400;--cv-orange:#ff6a00;
  position:relative;width:100%;aspect-ratio:1;container-type:inline-size;overflow:hidden;
  background:repeating-linear-gradient(0deg,transparent 0 6.2cqw,#eae5dc14 6.2cqw,#eae5dc14 6.4cqw) var(--cv-bg);
  font-family:Arial,Helvetica,sans-serif;margin:22px 0 4px}
.conv-anim .esc{position:absolute;inset:0;padding:11cqw 9cqw 13cqw;display:flex;flex-direction:column;
  justify-content:center;opacity:0;animation:cv-scene var(--cv-dur) linear infinite forwards}
.conv-anim .esc-1{gap:5.5cqw}
.conv-anim .esc-2{gap:5cqw;animation-delay:calc(var(--cv-dur)/4)}
.conv-anim .esc-3{gap:8cqw;animation-delay:calc(var(--cv-dur)/2)}
.conv-anim .esc-4{gap:7cqw;animation-delay:calc(var(--cv-dur)*3/4)}

.conv-anim [data-cv]{animation-duration:var(--cv-dur);animation-iteration-count:infinite;animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.16,.9,.24,1)}
.conv-anim .tit{margin:0;font:900 12cqw/1.02 Impact,"Arial Black",Arial,sans-serif;letter-spacing:-.035em;
  color:var(--cv-paper);animation-name:cv-up}
.conv-anim .tit span{color:var(--cv-yellow)}

/* escena 1 · consigo el precio, no compro */
.conv-anim .esc-1 .tit{font-size:11cqw}
.conv-anim .cuentas{display:flex;flex-direction:column;gap:2.6cqw}
.conv-anim .cuenta{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:3cqw;animation-name:cv-left}
.conv-anim .cuenta:nth-child(1){animation-delay:.18s}
.conv-anim .cuenta:nth-child(2){animation-delay:.3s}
.conv-anim .cuenta:nth-child(3){animation-delay:.42s}
.conv-anim .num{background:var(--cv-paper);color:var(--cv-bg);font:700 5cqw/1 monospace;letter-spacing:.06em;padding:1.6cqw 2cqw}
.conv-anim .puntos{height:0;border-bottom:.4cqw dotted #eae5dc66}
.conv-anim .qué{font:900 7.4cqw/1 Impact,"Arial Black",Arial,sans-serif;letter-spacing:-.02em;color:var(--cv-paper)}
.conv-anim .cuenta.destaca .num{background:var(--cv-orange);color:var(--cv-paper)}
.conv-anim .cuenta.destaca .qué{color:var(--cv-orange)}

/* escena 2 · nadie pone de su bolsillo */
.conv-anim .esc-2 .tit{font-size:13cqw;animation-delay:calc(var(--cv-dur)/4)}
.conv-anim .sello{align-self:flex-start;border:.7cqw solid var(--cv-orange);color:var(--cv-orange);
  font:700 5.2cqw/1 monospace;letter-spacing:.04em;padding:3cqw 4cqw;
  animation-name:cv-pop;animation-timing-function:cubic-bezier(.2,1.2,.3,1);animation-delay:calc(var(--cv-dur)/4 + .28s)}

/* escena 3 · se negocia una sola vez */
.conv-anim .esc-3 .tit{animation-delay:calc(var(--cv-dur)/2)}
.conv-anim .pasos{display:flex;gap:3cqw;align-items:stretch}
.conv-anim .paso{flex:1;text-align:center;border:.7cqw solid var(--cv-paper);color:var(--cv-paper);
  font:700 5.2cqw/1 monospace;letter-spacing:.04em;padding:3.4cqw 1cqw;animation-name:cv-up}
.conv-anim .paso.lleno{border-color:var(--cv-yellow);background:var(--cv-yellow);color:var(--cv-bg);
  animation-name:cv-pop;animation-timing-function:cubic-bezier(.2,1.2,.3,1)}
.conv-anim .paso:nth-child(1){animation-delay:calc(var(--cv-dur)/2 + .18s)}
.conv-anim .paso:nth-child(2){animation-delay:calc(var(--cv-dur)/2 + .3s)}
.conv-anim .paso:nth-child(3){animation-delay:calc(var(--cv-dur)/2 + .42s)}

/* escena 4 · el ahorro se publica */
.conv-anim .esc-4 .tit{animation-delay:calc(var(--cv-dur)*3/4)}
.conv-anim .resta{display:flex;flex-direction:column;align-items:flex-end;gap:1.6cqw}
.conv-anim .linea{font:900 10cqw/1 Impact,"Arial Black",Arial,sans-serif;letter-spacing:-.02em;color:var(--cv-paper);
  animation-name:cv-right}
.conv-anim .linea.naranja{color:var(--cv-orange)}
.conv-anim .resta .linea:nth-child(1){animation-delay:calc(var(--cv-dur)*3/4 + .2s)}
.conv-anim .resta .linea:nth-child(2){animation-delay:calc(var(--cv-dur)*3/4 + .34s)}
.conv-anim .raya{align-self:stretch;height:.8cqw;background:var(--cv-paper);transform-origin:right center;margin:1.2cqw 0;
  animation-name:cv-rule;animation-timing-function:cubic-bezier(.3,.9,.3,1);animation-delay:calc(var(--cv-dur)*3/4 + .5s)}
.conv-anim .ahorro{background:var(--cv-yellow);color:var(--cv-bg);font:900 13cqw/1 Impact,"Arial Black",Arial,sans-serif;
  letter-spacing:-.02em;padding:2cqw 3cqw;
  animation-name:cv-pop;animation-timing-function:cubic-bezier(.2,1.2,.3,1);animation-delay:calc(var(--cv-dur)*3/4 + .66s)}

/* flotación continua de los envoltorios sin entrada propia */
.conv-anim .cuentas,.conv-anim .pasos,.conv-anim .resta{animation:cv-flota 2.6s ease-in-out infinite alternate}

/* barra del bucle: cuatro tramos que se llenan por turnos */
.conv-anim .bucle{position:absolute;left:0;right:0;bottom:0;height:1.4cqw;background:#eae5dc20;z-index:4;
  display:flex;gap:.6cqw;padding:0 .6cqw;align-items:center}
.conv-anim .bucle span{flex:1;height:.55cqw;overflow:hidden}
.conv-anim .bucle i{display:block;height:100%;background:var(--cv-yellow);transform-origin:left center;
  animation-duration:var(--cv-dur);animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both}
.conv-anim .bucle span:nth-child(1) i{animation-name:cv-t1}
.conv-anim .bucle span:nth-child(2) i{animation-name:cv-t2}
.conv-anim .bucle span:nth-child(3) i{animation-name:cv-t3}
.conv-anim .bucle span:nth-child(4) i{animation-name:cv-t4}

@keyframes cv-scene{0%,25%{opacity:1}25.01%,100%{opacity:0}}
@keyframes cv-up{0%{opacity:0;transform:translateY(3.2cqw)}5%,25%{opacity:1;transform:none}25.01%,100%{opacity:0;transform:translateY(3.2cqw)}}
@keyframes cv-left{0%{opacity:0;transform:translateX(-7cqw)}4.5%,25%{opacity:1;transform:none}25.01%,100%{opacity:0;transform:translateX(-7cqw)}}
@keyframes cv-right{0%{opacity:0;transform:translateX(7cqw)}4.5%,25%{opacity:1;transform:none}25.01%,100%{opacity:0;transform:translateX(7cqw)}}
@keyframes cv-pop{0%{opacity:0;transform:scale(.8)}3.1%{opacity:1;transform:scale(1.05)}5%,25%{opacity:1;transform:scale(1)}25.01%,100%{opacity:0;transform:scale(.8)}}
@keyframes cv-rule{0%{transform:scaleX(0)}4%,25%{transform:scaleX(1)}25.01%,100%{transform:scaleX(0)}}
@keyframes cv-flota{0%{translate:0 .45cqw}100%{translate:0 -.45cqw}}
@keyframes cv-t1{0%{transform:scaleX(0)}25%,100%{transform:scaleX(1)}}
@keyframes cv-t2{0%,25%{transform:scaleX(0)}50%,100%{transform:scaleX(1)}}
@keyframes cv-t3{0%,50%{transform:scaleX(0)}75%,100%{transform:scaleX(1)}}
@keyframes cv-t4{0%,75%{transform:scaleX(0)}100%{transform:scaleX(1)}}

@media(prefers-reduced-motion:reduce){
  .conv-anim [data-cv]{animation-name:cv-fade!important;transform:none!important}
  .conv-anim .raya{transform:scaleX(1)}
  .conv-anim .cuentas,.conv-anim .pasos,.conv-anim .resta{animation:none;translate:none}
  .conv-anim .bucle i{animation:none;transform:scaleX(1)}
}
@keyframes cv-fade{0%{opacity:0}4%,25%{opacity:1}25.01%,100%{opacity:0}}

/* ── Animación de la propuesta 05: 4 escenas en bucle de 10 s ──────────────
   Misma técnica que .conv-anim (el original también rotaba el DOM con JS).
   Prefijo cal- (calendario). */
.cal-anim{--cal-dur:10s;--cal-bg:#ff6a00;--cal-ink:#0b2f77;--cal-purple:#4a0090;
  position:relative;width:100%;aspect-ratio:1;container-type:inline-size;overflow:hidden;
  background:repeating-linear-gradient(0deg,transparent 0 6.2cqw,#0b2f7714 6.2cqw,#0b2f7714 6.4cqw) var(--cal-bg);
  font-family:Arial,Helvetica,sans-serif;margin:22px 0 4px}
.cal-anim .esc{position:absolute;inset:0;padding:11cqw 9cqw 13cqw;display:flex;flex-direction:column;
  justify-content:center;opacity:0;animation:cal-scene var(--cal-dur) linear infinite forwards}
.cal-anim .esc-1{gap:6cqw}
.cal-anim .esc-2{gap:6cqw;animation-delay:calc(var(--cal-dur)/4)}
.cal-anim .esc-3{gap:7cqw;animation-delay:calc(var(--cal-dur)/2)}
.cal-anim .esc-4{gap:8cqw;animation-delay:calc(var(--cal-dur)*3/4)}

.cal-anim [data-cal]{animation-duration:var(--cal-dur);animation-iteration-count:infinite;animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.16,.9,.24,1)}
.cal-anim .tit{margin:0;font:900 11cqw/1.02 Impact,"Arial Black",Arial,sans-serif;letter-spacing:-.035em;
  color:var(--cal-ink);animation-name:cal-up}
.cal-anim .tit span{color:var(--cal-purple)}

/* escena 1 · todo el año a la vista */
.cal-anim .meses{display:flex;flex-direction:column;gap:2.6cqw}
.cal-anim .mes{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:3cqw;animation-name:cal-left}
.cal-anim .mes:nth-child(1){animation-delay:.18s}
.cal-anim .mes:nth-child(2){animation-delay:.3s}
.cal-anim .mes:nth-child(3){animation-delay:.42s}
.cal-anim .sigla{background:var(--cal-ink);color:var(--cal-bg);font:700 5cqw/1 monospace;letter-spacing:.06em;padding:1.6cqw 2cqw}
.cal-anim .puntos{height:0;border-bottom:.4cqw dotted #0b2f7766}
.cal-anim .evento{font:900 7cqw/1 Impact,"Arial Black",Arial,sans-serif;letter-spacing:-.02em;color:var(--cal-ink)}
.cal-anim .mes.morado .sigla{background:var(--cal-purple)}
.cal-anim .mes.morado .evento{color:var(--cal-purple)}

/* escena 2 · los permisos, con tiempo */
.cal-anim .esc-2 .tit{animation-delay:calc(var(--cal-dur)/4)}
.cal-anim .aviso{display:flex;flex-direction:column;align-items:flex-start;gap:2cqw}
.cal-anim .frase{margin:0;font:900 9cqw/1 Impact,"Arial Black",Arial,sans-serif;letter-spacing:-.02em;color:var(--cal-ink);
  animation-name:cal-up;animation-delay:calc(var(--cal-dur)/4 + .2s)}
.cal-anim .raya{align-self:stretch;height:.8cqw;background:var(--cal-ink);transform-origin:left center;margin:1.2cqw 0;
  animation-name:cal-rule;animation-timing-function:cubic-bezier(.3,.9,.3,1);animation-delay:calc(var(--cal-dur)/4 + .38s)}
.cal-anim .chapa{background:var(--cal-ink);color:var(--cal-bg);font:700 5.2cqw/1 monospace;letter-spacing:.04em;
  padding:2.8cqw 3.4cqw;animation-name:cal-pop;animation-timing-function:cubic-bezier(.2,1.2,.3,1);
  animation-delay:calc(var(--cal-dur)/4 + .52s)}

/* escena 3 · cada sección pide lo suyo */
.cal-anim .esc-3 .tit{animation-delay:calc(var(--cal-dur)/2)}
.cal-anim .secciones{display:flex;flex-direction:column;gap:2.4cqw}
.cal-anim .seccion{border:.7cqw solid var(--cal-ink);color:var(--cal-ink);font:700 5.2cqw/1 monospace;letter-spacing:.04em;
  padding:3cqw;animation-name:cal-left}
.cal-anim .seccion.lleno{border-color:var(--cal-purple);background:var(--cal-purple);color:var(--cal-bg)}
.cal-anim .seccion:nth-child(1){animation-delay:calc(var(--cal-dur)/2 + .18s)}
.cal-anim .seccion:nth-child(2){animation-delay:calc(var(--cal-dur)/2 + .3s)}
.cal-anim .seccion:nth-child(3){animation-delay:calc(var(--cal-dur)/2 + .42s)}

/* escena 4 · el año, planeado */
.cal-anim .esc-4 .tit{font-size:13cqw;animation-delay:calc(var(--cal-dur)*3/4)}
.cal-anim .tres{display:flex;gap:3cqw;align-items:stretch}
.cal-anim .col{flex:1;text-align:center;border:.7cqw solid var(--cal-ink);color:var(--cal-ink);
  font:700 5.2cqw/1 monospace;letter-spacing:.04em;padding:3.4cqw 1cqw;animation-name:cal-up}
.cal-anim .col.lleno{background:var(--cal-ink);color:var(--cal-bg);
  animation-name:cal-pop;animation-timing-function:cubic-bezier(.2,1.2,.3,1)}
.cal-anim .col:nth-child(1){animation-delay:calc(var(--cal-dur)*3/4 + .18s)}
.cal-anim .col:nth-child(2){animation-delay:calc(var(--cal-dur)*3/4 + .3s)}
.cal-anim .col:nth-child(3){animation-delay:calc(var(--cal-dur)*3/4 + .42s)}

/* flotación continua */
.cal-anim .meses,.cal-anim .aviso,.cal-anim .tres{animation:cal-flota 2.6s ease-in-out infinite alternate}
.cal-anim .secciones{animation:cal-flota 2.8s ease-in-out infinite alternate}

/* barra del bucle: cuatro tramos por turnos */
.cal-anim .bucle{position:absolute;left:0;right:0;bottom:0;height:1.4cqw;background:#0b2f7720;z-index:4;
  display:flex;gap:.6cqw;padding:0 .6cqw;align-items:center}
.cal-anim .bucle span{flex:1;height:.55cqw;overflow:hidden}
.cal-anim .bucle i{display:block;height:100%;background:var(--cal-ink);transform-origin:left center;
  animation-duration:var(--cal-dur);animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both}
.cal-anim .bucle span:nth-child(1) i{animation-name:cal-t1}
.cal-anim .bucle span:nth-child(2) i{animation-name:cal-t2}
.cal-anim .bucle span:nth-child(3) i{animation-name:cal-t3}
.cal-anim .bucle span:nth-child(4) i{animation-name:cal-t4}

@keyframes cal-scene{0%,25%{opacity:1}25.01%,100%{opacity:0}}
@keyframes cal-up{0%{opacity:0;transform:translateY(3.2cqw)}5%,25%{opacity:1;transform:none}25.01%,100%{opacity:0;transform:translateY(3.2cqw)}}
@keyframes cal-left{0%{opacity:0;transform:translateX(-7cqw)}4.5%,25%{opacity:1;transform:none}25.01%,100%{opacity:0;transform:translateX(-7cqw)}}
@keyframes cal-pop{0%{opacity:0;transform:scale(.8)}3.1%{opacity:1;transform:scale(1.05)}5%,25%{opacity:1;transform:scale(1)}25.01%,100%{opacity:0;transform:scale(.8)}}
@keyframes cal-rule{0%{transform:scaleX(0)}4%,25%{transform:scaleX(1)}25.01%,100%{transform:scaleX(0)}}
@keyframes cal-fade{0%{opacity:0}4%,25%{opacity:1}25.01%,100%{opacity:0}}
@keyframes cal-flota{0%{translate:0 .45cqw}100%{translate:0 -.45cqw}}
@keyframes cal-t1{0%{transform:scaleX(0)}25%,100%{transform:scaleX(1)}}
@keyframes cal-t2{0%,25%{transform:scaleX(0)}50%,100%{transform:scaleX(1)}}
@keyframes cal-t3{0%,50%{transform:scaleX(0)}75%,100%{transform:scaleX(1)}}
@keyframes cal-t4{0%,75%{transform:scaleX(0)}100%{transform:scaleX(1)}}

@media(prefers-reduced-motion:reduce){
  .cal-anim [data-cal]{animation-name:cal-fade!important;transform:none!important}
  .cal-anim .raya{transform:scaleX(1)}
  .cal-anim .meses,.cal-anim .aviso,.cal-anim .secciones,.cal-anim .tres{animation:none;translate:none}
  .cal-anim .bucle i{animation:none;transform:scaleX(1)}
}

/* Las dos propuestas de una misma fila comparten altura, pero su contenido no:
   el desplegable quedaba a distinta altura en cada una. La tarjeta pasa a ser
   columna flexible y el <details> se empuja al fondo, así los dos se alinean.
   En una sola columna no hay espacio sobrante, así que no cambia nada. */
/* (alineación de desplegables: ver regla más abajo) */

/* Alinear los desplegables de las dos propuestas de una misma fila.
   Cada par tiene el mismo número de hijos (02/03 → 4, 04/05 → 5), así que con
   subgrid comparten las filas de la rejilla: el rótulo queda a la altura del
   rótulo, el titular del titular y el <details> del <details>, estén abiertos
   o cerrados. Empujar el desplegable al fondo con margin-top:auto NO sirve:
   al abrir una, la otra crece y su resumen se va hasta abajo. */
@supports(grid-template-rows:subgrid){
  @media(min-width:701px){
    .proposal-goals,.proposal-ledger{display:grid;grid-template-rows:subgrid;grid-row:span 4}
    .proposal-shopping,.proposal-calendar{display:grid;grid-template-rows:subgrid;grid-row:span 5}
  }
}

/* ── Propuesta 01 sin video: título a la izquierda, texto y desplegable a la
   derecha, para que el bloque azul no quede con media pantalla vacía. El
   tráiler del tablero va justo debajo, a pantalla completa. */
@media(min-width:701px){
  .proposal-board{grid-template-columns:minmax(0,1fr);padding-bottom:40px}
  .proposal-board .proposal-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:6vw;align-items:start}
  .proposal-board .proposal-copy>.proposal-label{grid-column:1/-1}
  .proposal-board .proposal-copy>.proposal-title-art{grid-column:1;grid-row:2/span 2;margin:0}
  .proposal-board .proposal-copy>p:not(.proposal-label),
  .proposal-board .proposal-copy>details{grid-column:2}
  .proposal-board .proposal-copy>p:not(.proposal-label){margin-top:1.2em}
}

/* ── Tráiler del tablero (iframe tablero/, compilado desde notas/tablero/) ──
   Ancho completo en 16:9. Al entrar en pantalla crece desde una tarjeta con
   esquinas redondeadas hasta ocupar todo el ancho (tablero.js mueve --t-s y
   --t-r). */
.tablero-trailer{grid-column:1/-1;margin:0;background:var(--blue);padding:0 0 34px;
  display:flex;flex-direction:column;align-items:center;overflow:hidden}
.tablero-trailer[hidden]{display:none}
.tablero-marco{position:relative;width:min(100%,calc(100svh*16/9));aspect-ratio:16/9;background:#fff;
  scale:var(--t-s,1);border-radius:var(--t-r,0px);overflow:hidden;transform-origin:center top;
  box-shadow:0 30px 60px #0b122040}
.tablero-marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none}
.tablero-reproducir{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;
  border-radius:999px;font:700 12px/1.2 monospace;letter-spacing:.14em;text-transform:uppercase;padding:12px 20px}
.tablero-reproducir{position:absolute;left:50%;top:50%;translate:-50% -50%;background:var(--blue);color:#fff}
.tablero-reproducir svg{width:20px;height:20px;fill:currentColor}
.tablero-reproducir[hidden]{display:none}
.tablero-reproducir:focus-visible{outline:3px solid #fff;outline-offset:3px}