/* The Loop Method — componentes propios (planes y paso a paso) */

/* ---------- Planes ---------- */
.lp-grid{display:grid;grid-template-columns:1fr;gap:28px;padding-top:12px;list-style:none;margin:0;padding-left:0}
@media (min-width:900px){.lp-grid{grid-template-columns:1fr 1.12fr 1fr;gap:20px;align-items:stretch}}
.lp-card{position:relative;display:flex;flex-direction:column;padding:30px 26px 26px;background:var(--color-surface,#fff);border:1px solid var(--color-border,#e5e7eb);color:var(--color-on-surface)}
.lp-card--featured{background:var(--color-interactive,#1F4377);border-color:var(--color-interactive,#1F4377);color:#fff;box-shadow:0 24px 60px rgba(31,67,119,.35)}
@media (min-width:900px){.lp-card--featured{transform:translateY(-18px);padding:40px 32px 32px}}
@media (max-width:899px){.lp-card--featured{order:-1}}
.lp-badge{position:absolute;top:-13px;left:24px;padding:6px 10px;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;line-height:1;background:var(--color-surface-secondary,#EEF2F7);color:var(--color-accent,#2457C5)}
.lp-card--featured .lp-badge{background:#fff;color:var(--color-interactive,#1F4377)}
.lp-over{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent,#2457C5);margin:0}
.lp-card--featured .lp-over{color:#A9C3F2}
.lp-name{font-family:var(--font-heading);font-weight:900;font-size:clamp(2.1rem,3.4vw,2.8rem);line-height:1.05;letter-spacing:-.02em;margin:.35rem 0 0}
.lp-desc{font-size:14px;line-height:1.5;margin:.6rem 0 0;color:var(--color-on-surface-secondary,#61697a)}
@media (min-width:900px){.lp-desc{min-height:3em}}
.lp-card--featured .lp-desc{color:rgba(255,255,255,.78)}
.lp-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin:1.4rem 0 0}
.lp-price strong{font-family:var(--font-heading);font-weight:900;font-size:clamp(2.4rem,4vw,3.4rem);letter-spacing:-.02em;line-height:1}
.lp-price span{font-size:14px;font-weight:500;color:var(--color-on-surface-secondary,#61697a)}
.lp-card--featured .lp-price span{color:rgba(255,255,255,.75)}
.lp-total{font-size:14px;margin:.55rem 0 0;color:var(--color-on-surface-secondary,#61697a)}
.lp-total s{margin-right:.3rem}
.lp-card--featured .lp-total{color:rgba(255,255,255,.8)}
.lp-save{display:inline-block;margin-top:.7rem;padding:4px 8px;font-size:12px;font-weight:700;background:#E6F4EC;color:#1C7C4A;align-self:flex-start}
.lp-card--featured .lp-save{background:rgba(255,255,255,.14);color:#BFF0D3}
.lp-save--empty{visibility:hidden}
.lp-cta{display:flex;align-items:center;justify-content:center;height:48px;margin-top:1.5rem;font-size:14px;font-weight:600;text-decoration:none;border-radius:var(--radius-button,0);border:1.5px solid var(--color-interactive,#1F4377);color:var(--color-interactive,#1F4377);background:transparent;transition:transform .15s ease,background-color .15s ease,color .15s ease}
.lp-cta:hover{background:var(--color-interactive,#1F4377);color:#fff}
.lp-cta:active{transform:scale(.97)}
.lp-card--featured .lp-cta{background:#fff;color:var(--color-interactive,#1F4377);border-color:#fff}
.lp-card--featured .lp-cta:hover{background:#E8EEF8}
.lp-note{margin:.7rem 0 0;text-align:center;font-size:12px;color:var(--color-on-surface-secondary,#61697a)}
.lp-card--featured .lp-note{color:rgba(255,255,255,.7)}

/* Barra de ciclo */
.lp-cycle{margin-top:1.6rem;padding-top:1.25rem;border-top:1px solid var(--color-border,#e5e7eb)}
.lp-card--featured .lp-cycle{border-top-color:rgba(255,255,255,.2)}
.lp-cycle-title{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .7rem;color:var(--color-on-surface-secondary,#61697a)}
.lp-card--featured .lp-cycle-title{color:rgba(255,255,255,.7)}
.lp-bar{display:grid;gap:4px}
.lp-bar--3{grid-template-columns:repeat(3,1fr)}
.lp-bar--6{grid-template-columns:repeat(6,1fr)}
.lp-seg{position:relative;height:10px;background:var(--color-surface-secondary,#EEF2F7);overflow:hidden}
.lp-card--featured .lp-seg{background:rgba(255,255,255,.16)}
.lp-seg i{position:absolute;inset:0;width:0;background:var(--color-accent,#2457C5);transition:width .7s cubic-bezier(.2,.7,.2,1)}
.lp-card--featured .lp-seg i{background:#fff}
.lp-seg--on i{transition-delay:calc(var(--k,0) * 180ms)}
.is-in .lp-seg--on i{width:100%}
.lp-labels{display:grid;gap:4px;margin-top:.45rem;font-size:11px;line-height:1.3;color:var(--color-on-surface-secondary,#61697a)}
.lp-labels--3{grid-template-columns:repeat(3,1fr)}
.lp-labels--2{grid-template-columns:repeat(2,1fr)}
.lp-labels .off{opacity:.55}
.lp-card--featured .lp-labels{color:rgba(255,255,255,.85)}
.lp-caption{margin:.6rem 0 0;font-size:13px;font-weight:600}
.lp-caption em{font-style:normal;font-weight:500;color:var(--color-on-surface-secondary,#61697a)}
.lp-card--featured .lp-caption em{color:rgba(255,255,255,.75)}

.lp-feats{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem;font-size:14px}
.lp-feats li{display:flex;align-items:flex-start;gap:.6rem}
.lp-feats li::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--color-accent,#2457C5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.lp-card--featured .lp-feats li::before{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4377' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.lp-feats li.no{color:#98A1B0}
.lp-feats li.no::before{background:#E5E8EE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A1B0' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/10px no-repeat}
.lp-feats small{display:inline-block;margin-left:.35rem;padding:1px 6px;font-size:11px;font-weight:500;background:var(--color-surface-secondary,#EEF2F7);color:var(--color-on-surface-secondary,#61697a)}

/* Qué pasa después de pagar (producto) */
.lp-after{margin-top:.5rem;padding:1.25rem 1.25rem 1.1rem;background:var(--color-surface-secondary,#EEF2F7)}
.lp-after h3{margin:0 0 .9rem;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-on-surface-secondary,#61697a)}
.lp-after ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem;counter-reset:a}
.lp-after li{display:flex;gap:.8rem;font-size:14px;line-height:1.45;counter-increment:a}
.lp-after li::before{content:counter(a);flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--color-interactive,#1F4377);color:#fff;font-size:12px;font-weight:700}
.lp-after strong{display:block;font-weight:700}
.lp-after span{color:var(--color-on-surface-secondary,#61697a)}

/* ---------- Paso a paso con celular fijo ---------- */
.ls-wrap{display:grid;grid-template-columns:1fr;gap:0;margin-top:3.5rem}
@media (min-width:900px){.ls-wrap{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:4rem;align-items:start}}
.ls-steps{position:relative}
.ls-list{list-style:none;margin:0;padding:0}
.ls-track{position:absolute;left:13px;top:14px;bottom:14px;width:2px;background:rgba(31,67,119,.18)}
.ls-fill{position:absolute;left:0;top:0;width:100%;height:0;background:var(--color-interactive,#1F4377)}
.ls-step{position:relative;padding:0 0 3rem 3rem}
.ls-step:last-child{padding-bottom:0}
.ls-body{position:relative}
.ls-dot{position:absolute;left:-3rem;top:-.1rem;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--color-interactive,#1F4377);background:var(--color-surface,#fff);font-size:11px;font-weight:700;color:var(--color-interactive,#1F4377);transition:background-color .3s,color .3s}
.ls-step.is-active .ls-dot,.ls-step.is-done .ls-dot{background:var(--color-interactive,#1F4377);color:#fff}
.ls-kicker{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--color-interactive,#1F4377)}
.ls-title{margin:.4rem 0 0;font-family:var(--font-heading);font-weight:900;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15;letter-spacing:-.01em}
.ls-text{margin:.6rem 0 0;max-width:30rem;font-size:16px;line-height:1.6}
.ls-shot{margin:1.25rem 0 0;width:min(62vw,250px)}
.ls-phone{position:relative;aspect-ratio:848/1264;border:7px solid var(--color-on-surface,#0B1B33);border-radius:30px;overflow:hidden;background:#fff;box-shadow:0 22px 50px rgba(11,27,51,.22)}
.ls-phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.ls-stage{display:none}
@media (min-width:900px){
  .ls-step{min-height:60vh;padding-bottom:0;display:flex;flex-direction:column;justify-content:center;transition:opacity .4s ease}
  .ls-ready .ls-step{opacity:.35}
  .ls-ready .ls-step.is-active{opacity:1}
  .ls-shot{display:none}
  .ls-track{top:30vh;bottom:30vh}
  .ls-stage{display:block;position:sticky;top:max(110px,calc(50vh - 280px));justify-self:center;width:min(100%,320px)}
  .ls-stage .ls-phone img{opacity:0;transform:scale(1.04);transition:opacity .45s ease,transform .6s ease}
  .ls-stage .ls-phone img.is-on{opacity:1;transform:none}
  .ls-count{margin:1rem 0 0;text-align:center;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--color-on-surface-secondary,#61697a)}
}
@media (prefers-reduced-motion:reduce){
  .lp-seg i,.ls-stage img,.ls-step{transition:none}
}

/* ---------- Los resultados se construyen: línea de 12 semanas ---------- */
.lr{margin-top:3.5rem}
.lr-track{position:relative;height:28px}
.lr-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;background:rgba(255,255,255,.18)}
.lr-fill{position:absolute;left:0;top:50%;height:4px;margin-top:-2px;width:0;background:#fff;box-shadow:0 0 18px rgba(255,255,255,.55)}
.lr-weeks{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr)}
.lr-wk{position:relative;display:flex;align-items:center;justify-content:center}
.lr-wk i{width:12px;height:12px;border-radius:50%;background:var(--color-interactive,#1F4377);border:2px solid rgba(255,255,255,.4);transition:background-color .3s,border-color .3s,transform .3s}
.lr-wk.is-on i{background:#fff;border-color:#fff;transform:scale(1.15)}
.lr-wk:nth-child(4n)::after{content:"";position:absolute;right:0;top:-6px;bottom:-6px;width:1px;background:rgba(255,255,255,.22)}
.lr-wk:last-child::after{display:none}
.lr-months{display:grid;grid-template-columns:repeat(3,1fr);margin-top:.6rem;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);text-align:center}
.lr-legend{margin:.9rem 0 0;text-align:center;font-size:13px;color:rgba(255,255,255,.7)}
.lr-legend b{display:inline-block;width:10px;height:10px;margin-right:.4rem;border-radius:50%;background:#fff;vertical-align:-1px}
.lr-cards{list-style:none;margin:2.25rem 0 0;padding:0;display:grid;gap:16px}
@media (min-width:768px){.lr-cards{grid-template-columns:repeat(3,1fr)}}
.lr-card{display:flex;flex-direction:column;gap:.75rem;padding:2rem;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);transition:opacity .5s ease,background-color .5s ease,border-color .5s ease,transform .5s ease}
.lr-ready .lr-card{opacity:.4;transform:translateY(8px)}
.lr-ready .lr-card.is-lit{opacity:1;transform:none;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)}
.lr-plans{max-width:46rem;margin:3rem auto 0;display:flex;flex-direction:column;gap:.9rem}
.lr-row{display:grid;grid-template-columns:7.5rem 1fr 9rem;align-items:center;gap:1rem;font-size:14px}
.lr-plan{font-weight:700}
.lr-meta{text-align:right;color:rgba(255,255,255,.75);font-size:13px}
.lr-cover{position:relative;height:10px;background:rgba(255,255,255,.14)}
.lr-cover i{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.55);transition:width .9s cubic-bezier(.2,.7,.2,1)}
.lr-row--best .lr-cover i{background:#fff}
.lr-row--best .lr-plan::after{content:"Recomendado";display:block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#A9C3F2}
.lr-plans.is-in .lr-cover i{width:var(--to)}
@media (max-width:600px){
  .lr-months span small{display:none}
  .lr-wk i{width:9px;height:9px}
  .lr-row{grid-template-columns:5.8rem 1fr;row-gap:.25rem}
  .lr-meta{grid-column:2;text-align:left}
}
@media (prefers-reduced-motion:reduce){.lr-card,.lr-cover i,.lr-wk i{transition:none}}

/* ---------- Planes: aparición escalonada y elevación al pasar el mouse ---------- */
.lp-card{transition:opacity .6s ease,translate .6s cubic-bezier(.2,.7,.2,1),scale .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
.lp-ready .lp-card:not(.is-in){opacity:0;translate:0 40px;scale:.95}
@media (hover:hover){
  .lp-card:hover{translate:0 -10px;scale:1.03;box-shadow:0 28px 60px rgba(11,27,51,.16);z-index:2}
  .lp-card--featured:hover{scale:1.04;box-shadow:0 34px 80px rgba(31,67,119,.45)}
  .lp-grid:hover .lp-card:not(:hover){opacity:.9}
}
.lp-card:focus-within{translate:0 -10px;scale:1.03;z-index:2}
@media (prefers-reduced-motion:reduce){
  .lp-card{transition:box-shadow .2s ease}
  .lp-ready .lp-card:not(.is-in){opacity:1;translate:none;scale:none}
  .lp-card:hover,.lp-card:focus-within{translate:none;scale:none}
}