/* TIENDA · Mr. Gimnasios · oct 2026
   Solo /manuales y las 4 páginas de manual. Reutiliza design-system.css.
   Lista cerrada (SPEC 4.14). */

/* Color de etapa: solo bordes, chip y fondo de portada */
.etapa-azul{--etapa:#4FB3C8;--etapa-bg:linear-gradient(135deg,#0E3340,#061A22)}
.etapa-verde{--etapa:#4CAF50;--etapa-bg:linear-gradient(135deg,#144526,#062A12)}
.etapa-naranja{--etapa:#FC4B08;--etapa-bg:rgba(252,75,8,.12)}
.etapa-rojo{--etapa:#C8102E;--etapa-bg:rgba(200,16,46,.15)}
.badge[class*="etapa-"],[class*="etapa-"] .badge{color:var(--etapa);border-color:var(--etapa);background:transparent}
.badge.etapa-rojo,.etapa-rojo .badge{background:#C8102E;border-color:#C8102E;color:#fff}
.card[class*="etapa-"]{border-top:4px solid var(--etapa);padding:20px}

/* Ritmo de página en celular */
@media(max-width:768px){section{padding:40px 0}}
section h2.display{margin-bottom:20px}
main small{display:block;font-size:.8125rem;line-height:1.45;margin-top:8px}
main small a{font-size:var(--fs-base)}
.faq-a li+li{margin-top:6px}
.faq-a li{padding-left:16px;position:relative}
.faq-a li::before{content:'';position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--coral)}

/* Hero de página de manual */
.hero-manual{padding:24px 0 40px;border-bottom:1px solid var(--border)}
.hero-manual h1{margin:12px 0;font-size:clamp(2.25rem,9vw,3rem)}
.hero-manual .lead{font-size:var(--fs-base);margin-bottom:16px}
.hero-manual figure{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.hero-manual figure>img{width:120px;height:auto;border-radius:4px;box-shadow:0 12px 28px rgba(0,0,0,.45)}
.hero-manual figcaption{display:flex;flex-direction:column;gap:4px}
.hero-manual .btn-lg{width:100%}
.hero-manual .price-features{margin-top:20px}
.hero-manual .mini-portadas{flex-shrink:0}
@media(min-width:900px){
  .hero-manual{padding:64px 0}
  .hero-manual .container{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:64px;align-content:start}
  .hero-manual .container>*{grid-column:1;justify-self:start}
  .hero-manual .container>figure{grid-column:2;grid-row:1/span 12;flex-direction:column;align-items:flex-start;align-self:start;background:var(--etapa-bg);padding:24px;border-radius:var(--radius-md)}
  .hero-manual figure>img{width:100%}
  .hero-manual .btn-lg{width:auto}
}

/* Precio */
.pk-monto{font-family:var(--font-display);font-weight:900;font-size:2rem;line-height:1;color:var(--coral);letter-spacing:-.01em}
.pk-monto small{display:inline;font-family:var(--font-body);font-size:.875rem;font-weight:500;color:var(--text-muted);margin:0}
.pk-tachado{text-decoration:line-through;color:var(--text-muted);font-size:var(--fs-base)}

/* Renglón de libro */
.book-row{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:start;padding:16px;background:var(--bg-card);border:1px solid var(--border);border-left:4px solid var(--etapa,var(--coral));border-radius:var(--radius-md)}
.book-row+.book-row{margin-top:12px}
.book-row:has(>.book-row-mas){row-gap:8px}
.book-row>.book-row-mas{grid-column:1/-1}
.book-row>.fila-compra{grid-column:1/-1;margin-top:0;flex-wrap:nowrap;gap:12px}
.book-row>.fila-compra .btn{flex:1 1 0;min-width:0;padding-left:12px;padding-right:12px}
.book-row>.fila-compra .pk-monto{white-space:nowrap}
.book-row>img{width:56px;height:88px;object-fit:cover;border-radius:3px;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.book-row h2,.book-row h3{font-family:var(--font-display);font-weight:800;font-size:var(--fs-lg);text-transform:uppercase;line-height:1.1;margin-bottom:4px}
.book-row p{font-size:var(--fs-base);color:var(--text-secondary)}
.book-row .faq-item{border-bottom:0}
.book-row .faq-q{font-size:var(--fs-base);padding:12px 0 8px}
.book-row .faq-q-icon{width:28px;height:28px}

/* Portadas encimadas (paquetes) y tira de 5 */
.mini-portadas{display:flex;align-items:flex-end;flex-shrink:0}
.mini-portadas img{width:72px;height:auto;border-radius:3px;box-shadow:0 8px 20px rgba(0,0,0,.45)}
.mini-portadas img+img{margin-left:-6px}
.mini-portadas--5{gap:6px;margin-bottom:20px}
.mini-portadas--5 img{width:calc((100% - 24px)/5);max-width:62px}
.mini-portadas--5 img+img{margin-left:0}
@media(min-width:900px){.mini-portadas--5 img{width:110px;max-width:none}}

/* Otras etapas (sobre .grid-2 + .card) */
.grid-2.etapas-nav{grid-template-columns:1fr 1fr;gap:8px;align-items:stretch;text-align:left}
.etapas-nav .card{padding:12px 14px;border-top:0;border-left:4px solid var(--etapa);display:flex;flex-direction:column;gap:2px;font-size:var(--fs-sm);color:var(--text-secondary)}
.etapas-nav .card strong{font-family:var(--font-display);font-weight:800;font-size:var(--fs-base);text-transform:uppercase;line-height:1.1;color:var(--text-primary)}
.syx-final-cta .etapas-nav .card{text-decoration:none;color:var(--text-secondary)}
.etapas-nav [aria-current]{opacity:.6}
.etapas-nav [aria-current]:hover{transform:none;border-color:var(--border)}

/* ¿Es para ti? */
.audience-block{padding:24px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md)}
.audience-block+.audience-block{margin-top:12px}
.audience-block.yes{border-left:4px solid var(--success)}
.audience-block.no{border-left:4px solid var(--coral)}
.audience-block h2,.audience-block h3{font-family:var(--font-display);font-weight:900;font-size:var(--fs-xl);text-transform:uppercase;line-height:1.05;margin-bottom:12px}
.audience-block ul{display:flex;flex-direction:column;gap:10px}
.audience-block li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:var(--fs-base);color:var(--text-secondary);align-items:start}
.audience-block svg{margin-top:2px}
.audience-block.yes svg{color:var(--success)}
.audience-block.no svg{color:var(--coral)}
.audience-block a{color:var(--text-primary);text-decoration:underline;text-decoration-color:var(--coral)}

/* Listas del hero a 16 px */
main .price-features li,main .price-features li span{font-size:1rem}

/* Área de toque en enlaces sueltos (≥44 px sin mover el texto) */
.enlace-tactil{padding:12px 0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lista-enlaces{display:flex;flex-direction:column;margin-top:4px}
.lista-enlaces a{display:block;padding:10px 0}
@media(min-width:769px){.pk-monto+.btn{max-width:320px}}

/* Cierre */
.syx-final-cta{padding:48px 0;background:radial-gradient(circle at 50% 50%,rgba(232,96,76,.18) 0%,transparent 60%),var(--bg-deep);border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center}
.syx-final-cta h2.display{margin-bottom:24px}
.syx-final-cta .btn{width:100%;max-width:420px}
.syx-final-cta a:not(.btn){text-decoration:underline}

/* Barra fija de compra (solo SyE y GP) */
.syx-sticky-cta{position:fixed;bottom:0;left:0;right:0;z-index:80;background:var(--bg-deep);border-top:1px solid var(--coral-border);padding:12px 16px;display:none;align-items:center;gap:12px;box-shadow:0 -8px 24px rgba(0,0,0,.25)}
.syx-sticky-cta-info{flex:1;min-width:0}
.syx-sticky-cta-price{font-family:var(--font-display);font-weight:900;font-size:1.5rem;color:var(--coral);line-height:1}
.syx-sticky-cta-label{font-size:.6875rem;color:var(--text-muted);letter-spacing:.04em}
.syx-sticky-cta .btn{flex-shrink:0;height:44px;padding:0 20px}
@media(max-width:768px){
  .syx-sticky-cta{display:flex}
  .syx-sticky-cta[hidden]{display:none}
  .pagina-manual{padding-bottom:76px}
  .pagina-manual .wa-fab{display:none}
}


/* Ajustes r2: anclas bajo el menú fijo, texto ≥16 px, aire para el botón flotante */
html{scroll-padding-top:88px}
main .btn{font-size:var(--fs-base)}
.fila-compra{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:12px}
.fila-compra .btn{flex:1 1 100%}
@media(min-width:769px){.fila-compra .btn{flex:0 1 auto}}
.footer{padding-bottom:72px}
@media(min-width:900px){.faq-list{margin-left:0}}

/* Pie compacto en celular (solo páginas de tienda): mismo contenido, en 2 columnas.
   Se conserva: con el pie a 1 columna las 5 páginas pasan los topes de altura de SPEC §6.7. */
@media(max-width:500px){.footer-grid{grid-template-columns:1fr 1fr;gap:20px 16px}.footer-grid>.footer-col:first-child{grid-column:1/-1}}
@media(max-width:500px){.footer{padding-top:48px}}
@media(max-width:768px){.syx-final-cta{padding:40px 0}.footer-col ul{gap:0}.footer-col ul a{display:inline-flex;align-items:center;min-height:44px;padding:0}}