/* ===== Programa interactivo ===== */
.prog{--pg-dur:.45s}
.pg-intro{color:var(--muted);margin:18px 0 34px;max-width:620px}

/* Recorrido */
.pg-path{list-style:none;display:flex;flex-wrap:wrap;gap:8px 0;margin:30px 0 38px;counter-reset:p}
.pg-path li{position:relative;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#b3b3b3;padding-right:24px;transition:color .4s}
.pg-path li:after{content:"";position:absolute;right:8px;top:50%;width:12px;height:1px;background:#d6d6d6}
.pg-path li:last-child:after{display:none}
.pg-path li.on{color:var(--ink);font-weight:600}
.pg-path li.on:after{background:var(--red)}

/* Selector de día */
.pg-days{position:relative;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.pg-day{all:unset;cursor:pointer;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline;padding:18px 20px 22px 0;transition:opacity .3s}
.pg-day:not(.is-on){opacity:.42}
.pg-day:hover{opacity:1}
.pg-day:focus-visible{outline:1px solid var(--red);outline-offset:4px}
.pg-d-n{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);grid-row:span 2}
.pg-d-t{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:clamp(1.5rem,2.6vw,2.2rem);color:var(--ink);line-height:1.1}
.pg-d-h{grid-column:2;font-size:.8rem;letter-spacing:.14em;color:var(--muted);margin-top:4px}
.pg-d-s{grid-column:2;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-top:6px}
.pg-days-bar{position:absolute;left:0;bottom:-1px;height:2px;width:50%;background:var(--red);transition:transform .5s cubic-bezier(.6,0,.2,1)}
.pg-days.d2 .pg-days-bar{transform:translateX(100%)}

.pg-tools{display:flex;justify-content:flex-end;margin:18px 0 6px}
.pg-all{all:unset;cursor:pointer;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid transparent;transition:.25s}
.pg-all:hover{color:var(--red);border-color:var(--red)}

/* Panel de día */
.pg-panel{animation:pg-in .6s cubic-bezier(.2,.7,.2,1)}
@keyframes pg-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pg-flow{display:flex;align-items:center;gap:12px;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--red);margin-top:8px}
.pg-flow i{width:22px;height:1px;background:currentColor}
.pg-lead{font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.15rem,1.6vw,1.45rem);color:var(--ink);line-height:1.45;max-width:760px;margin:14px 0 30px}

/* Línea de tiempo */
.pg-tl{list-style:none;position:relative;padding-left:0}
.pg-tl:before{content:"";position:absolute;left:66px;top:8px;bottom:8px;width:1px;background:var(--line)}
.pg-tl:after{content:"";position:absolute;left:66px;top:8px;width:1px;height:calc(var(--pg-p,0)*(100% - 16px));background:var(--red);transition:height .15s linear}
.pg-s,.pg-brk{position:relative;opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.pg-s.seen,.pg-brk.seen{opacity:1;transform:none}
.pg-s{border-bottom:1px solid var(--line)}

.pg-h{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:52px 1fr auto 28px;align-items:center;column-gap:30px;padding:24px 0}
.pg-h:focus-visible{outline:1px solid var(--red);outline-offset:2px}
.pg-h time{font-size:.95rem;font-weight:500;color:var(--red);letter-spacing:.04em;position:relative}
.pg-h time:after{content:"";position:absolute;right:-19px;top:50%;width:7px;height:7px;margin-top:-4px;border-radius:50%;background:#fff;border:1px solid #c9c9c9;transition:.3s}
.pg-s.open .pg-h time:after,.pg-h:hover time:after{background:var(--red);border-color:var(--red)}
.pg-tt b{display:block;font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:clamp(1.2rem,1.7vw,1.5rem);color:var(--ink);line-height:1.2;transition:color .25s}
.pg-tt em{display:block;font-style:normal;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.pg-h:hover .pg-tt b{color:var(--red)}
.pg-tag{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);border:1px solid var(--ink);padding:5px 10px;white-space:nowrap}
.pg-tag-r{color:#fff;background:var(--red);border-color:var(--red)}
.pg-h>.pg-tag{grid-column:3}
.pg-ic{grid-column:4;position:relative;width:20px;height:20px;justify-self:end}
.pg-ic:before,.pg-ic:after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1px;background:var(--ink);transform:translate(-50%,-50%);transition:transform var(--pg-dur) cubic-bezier(.6,0,.2,1)}
.pg-ic:after{transform:translate(-50%,-50%) rotate(90deg)}
.pg-s.open .pg-ic:after{transform:translate(-50%,-50%) rotate(0)}

/* Desplegable: animación de altura con grid */
.pg-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--pg-dur) cubic-bezier(.6,0,.2,1)}
.pg-s.open .pg-b{grid-template-rows:1fr}
.pg-b>div{overflow:hidden;padding-left:82px;color:var(--text)}
.pg-b>div>*:first-child{margin-top:4px}
.pg-b>div>*:last-child{margin-bottom:32px}
.pg-b>div>*{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.pg-s.open .pg-b>div>*{opacity:1;transform:none;transition-delay:.12s}

.pg-b h4{font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.pg-b h5{font-family:"Playfair Display",Georgia,serif;font-size:1.05rem;color:var(--ink);margin-bottom:8px}
.pg-b p{color:var(--muted);margin-bottom:14px;max-width:720px}
.pg-b ul{list-style:none;margin-bottom:6px}
.pg-b ul li{position:relative;padding-left:18px;color:var(--muted);line-height:1.55;margin-bottom:5px}
.pg-b ul li:before{content:"";position:absolute;left:0;top:12px;width:8px;height:1px;background:var(--red)}
.pg-quote{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:1.15rem;color:var(--ink)!important;border-left:2px solid var(--red);padding-left:16px}
.pg-sub{display:grid;grid-template-columns:56px 1fr;column-gap:18px;padding:16px 0;border-top:1px dashed var(--line)}
.pg-sub>time{font-size:.8rem;color:var(--red);padding-top:2px}
.pg-sub>*:not(time){grid-column:2}
.pg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pg-grid4{grid-template-columns:repeat(4,1fr)}
.pg-cols{columns:2;column-gap:40px;max-width:720px}
.pg-layers{list-style:none;counter-reset:l;display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.pg-layers li{counter-increment:l;font-size:.8rem;letter-spacing:.06em;color:var(--ink);border:1px solid var(--line);padding:7px 12px;background:#fff;transition:.25s}
.pg-layers li:before{content:counter(l);color:var(--red);margin-right:8px;font-size:.72rem}
.pg-layers li:hover{border-color:var(--red)}
.pg-seq{color:var(--ink)!important;letter-spacing:.04em}
.pg-check{font-size:.85rem;color:var(--red)!important;margin-top:8px}
.pg-ratio{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)!important;font-weight:600}
.pg-ratio i{width:14px;height:1px;background:var(--red)}
.pg-phases,.pg-stations{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.pg-phases>div,.pg-stations>div{border:1px solid var(--line);padding:20px 20px 12px;background:#fff;transition:border-color .3s,transform .3s}
.pg-phases>div:hover,.pg-stations>div:hover{border-color:var(--red);transform:translateY(-3px)}
.pg-phases>div>span,.pg-stations>div>span{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:6px}
.pg-stations>div>span{font-family:"Playfair Display",Georgia,serif;font-size:1.8rem;letter-spacing:0;line-height:1}
.pg-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin:6px 0 22px;counter-reset:s}
.pg-steps li{counter-increment:s;position:relative;padding:0 18px 0 0}
.pg-steps li:before{content:"0" counter(s);display:block;font-size:.7rem;letter-spacing:.2em;color:var(--red);margin-bottom:6px}
.pg-steps li:after{content:"→";position:absolute;right:10px;top:18px;color:var(--red)}
.pg-steps li:last-child:after{display:none}
.pg-steps b{display:block;font-family:"Playfair Display",Georgia,serif;font-size:1.25rem;color:var(--ink)}
.pg-steps span{font-size:.85rem;color:var(--muted)}

/* Pausas */
.pg-brk{display:grid;grid-template-columns:52px 1fr;column-gap:30px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.pg-brk time{font-size:.8rem;color:#b3b3b3}
.pg-brk span{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:#b3b3b3}

/* Objetivo del día */
.pg-goal{margin-top:34px;padding:26px 28px;background:#faf9f8;border-left:2px solid var(--red)}
.pg-goal span{display:block;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.pg-goal p{font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.1rem,1.8vw,1.5rem);color:var(--ink);line-height:1.4}
.pg-goal i{font-style:normal;color:var(--red);margin:0 .25em}

@media (max-width:760px){
  .pg-path{display:none}
  .pg-days{margin-top:22px}
  .pg-day{grid-template-columns:1fr;padding:14px 10px 18px 0}
  .pg-d-n{grid-row:auto}
  .pg-d-h,.pg-d-s{grid-column:1}
  .pg-d-s{font-size:.66rem}
  .pg-tl:before,.pg-tl:after{left:4px}
  .pg-h{grid-template-columns:1fr 24px;grid-template-areas:"time ic" "tt ic" "tag ic";row-gap:4px;padding:20px 0 20px 22px}
  .pg-h time{grid-area:time;font-size:.8rem}
  .pg-h time:after{right:auto;left:-22px}
  .pg-tt{grid-area:tt}
  .pg-h>.pg-tag{grid-area:tag;justify-self:start;margin-top:6px}
  .pg-ic{grid-area:ic;align-self:center}
  .pg-b>div{padding-left:22px}
  .pg-grid,.pg-grid4,.pg-phases,.pg-stations,.pg-steps{grid-template-columns:1fr}
  .pg-steps{gap:14px}.pg-steps li:after{display:none}
  .pg-cols{columns:1}
  .pg-sub{grid-template-columns:1fr}.pg-sub>*:not(time){grid-column:1}
  .pg-brk{grid-template-columns:auto 1fr;column-gap:14px;padding-left:22px}
  .pg-goal{padding:20px}
}
@media (prefers-reduced-motion:reduce){.pg-s,.pg-brk{opacity:1;transform:none}.prog *{transition:none!important;animation:none!important}}
