/* Estilos de secciones que aún usan clases propias (beneficios, testimonios, marquesina, paginación).
 El resto de la tienda usa las clases del front de referencia (tienda.css). */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.saltar{position:absolute;left:12px;top:-60px;background:var(--texto);color:var(--fondo);padding:10px 16px;z-index:100;border-radius:var(--radio)}
.saltar:focus{top:12px}
.contenedor{max-width:1280px;margin:0 auto;padding:0 clamp(18px,4vw,48px)}
.contenedor.angosto{max-width:760px}

/* ============ Reveal ============ */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.js .rv.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}*{animation:none!important;scroll-behavior:auto!important}}

.marq{overflow:hidden;padding:15px 0;white-space:nowrap;font:600 13px/1 var(--f-texto);letter-spacing:.18em;text-transform:uppercase}
.marq .pista{display:inline-flex;animation:marq 38s linear infinite}
.marq:hover .pista{animation-play-state:paused}
.marq span{padding:0 26px}.marq b{font-weight:400;opacity:.7}
@keyframes marq{to{transform:translateX(-50%)}}

.seccion{padding:clamp(56px,9vw,112px) 0}
.sec-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(26px,4vw,48px)}
.sec-cab h2,.col-txt h2,.seccion.texto h2{font-size:clamp(34px,5vw,60px);font-weight:500}

/* Beneficios y testimonios */
.beneficios{border-block:1px solid var(--borde);padding:clamp(34px,5vw,60px) 0}
.beneficios .contenedor{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,56px)}
.beneficios .contenedor>div{display:flex;flex-direction:column;gap:6px}
.beneficios .num{font:500 13px/1 var(--f-texto);letter-spacing:.2em;color:var(--primario);margin-bottom:8px}
.beneficios b{font:600 24px/1.1 var(--f-titulos)}
.beneficios span:not(.num){color:var(--suave);font-size:15px}
@media(max-width:700px){.beneficios .contenedor{grid-template-columns:1fr}}
.citas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
.cita{margin:0;background:var(--tarjeta);padding:clamp(24px,3vw,40px);border-radius:var(--radio);position:relative}
.cita::before{content:"“";position:absolute;top:6px;left:22px;font:600 90px/1 var(--f-titulos);color:var(--primario);opacity:.35}
.cita blockquote{margin:30px 0 22px;font:500 clamp(20px,2vw,25px)/1.3 var(--f-titulos)}
.cita figcaption{font:600 11px/1 var(--f-texto);letter-spacing:.18em;text-transform:uppercase;color:var(--suave)}
@media(max-width:860px){.citas{grid-template-columns:1fr}}

.paginas{display:flex;gap:8px;justify-content:center;margin-top:clamp(36px,5vw,64px)}
.paginas a{min-width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--borde);border-radius:50%;font-size:14px;transition:.25s}
.paginas a:hover{border-color:var(--texto)}.paginas a.on{background:var(--texto);color:var(--fondo);border-color:var(--texto)}