/* Historia «¿A ti también te pasa?»: situaciones reconocibles y lo que cambia al entrenarlas. */
.story{--story-bg:#141416;--story-card:#1f1f23;--story-ink:#f2eee7;--story-muted:#c9c5bd;--story-line:#35353b;--story-red:#e8342c;--story-yellow:#ffc20e;--story-accent:#ffc20e;background:var(--story-bg);color:var(--story-ink);font-family:Poppins,Arial,Helvetica,sans-serif}
.story-wrap{width:min(1160px,calc(100% - 48px));margin:auto}
.story-kicker{margin:0;font-size:12px;font-weight:800;letter-spacing:.2em;line-height:1.35;color:var(--story-accent)}
.story h2{margin:16px 0 18px;font-size:clamp(36px,4.5vw,62px);font-weight:900;line-height:1.05;letter-spacing:-.03em;color:var(--story-ink)}.story h2 span{color:var(--story-accent)}
.story-heading{max-width:880px;margin-bottom:40px}.story-heading>p:last-child{margin:0;max-width:720px;font-size:19px;line-height:1.5;color:var(--story-muted)}
.story-pains{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.story-pain{padding:28px 28px 30px;background:var(--story-card);border-left:4px solid var(--story-red)}
.story-pain h3{margin:0 0 10px;font-size:clamp(22px,2.2vw,28px);font-weight:900;line-height:1.12;letter-spacing:-.03em;color:#fff}
.story-pain p{margin:0;font-size:16px;line-height:1.55;color:var(--story-muted)}
.story-change{margin-top:56px;padding-top:44px;border-top:1px solid var(--story-line)}
.story-change-heading h3{margin:12px 0 26px;max-width:760px;font-size:clamp(28px,3vw,40px);font-weight:900;line-height:1.1;letter-spacing:-.03em;color:var(--story-ink)}
.story-shifts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.story-shifts li{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;padding:18px 24px;background:var(--story-card)}
.story-shifts small{display:block;margin-bottom:3px;font-size:12px;font-weight:900;letter-spacing:.16em;color:#8f8b93}
.story-before{font-size:16px;color:var(--story-muted)}
.story-before s{text-decoration-color:rgba(232,52,44,.7)}
.story-shifts b{font-size:22px;color:var(--story-red)}
.story-after{font-size:17px;font-weight:800;color:#fff}.story-after small{color:var(--story-accent)}
.story-quote{margin:44px 0 0;padding:30px 32px;background:var(--story-yellow);color:#1b1a19}
.story-quote p{margin:0 0 14px;font-size:clamp(19px,2vw,24px);font-weight:700;line-height:1.4;letter-spacing:-.02em}
.story-quote footer{font-size:13px;color:#3b352f}
.story-cta{display:inline-flex;align-items:center;gap:12px;margin-top:36px;min-height:52px;padding:12px 26px;border-radius:999px;background:var(--story-yellow);color:#1b1a19;font-size:12px;font-weight:900;letter-spacing:.08em;text-decoration:none}
.story-cta:hover,.story-cta:focus-visible{background:#fff}
@media(max-width:730px){.story-wrap{width:calc(100% - 32px)}.story-heading>p:last-child{font-size:17px}.story-pains{grid-template-columns:1fr}.story-pain{padding:24px 22px}.story-shifts li{grid-template-columns:1fr;gap:6px;padding:16px 18px}.story-shifts b{transform:rotate(90deg);justify-self:start}.story-cta{width:100%;justify-content:center}}
/* Dos tramos: el problema en oscuro y lo que cambia en claro. */
.story-band-dark{padding:88px 0 80px}
.story-band-light{--story-bg:#f4efe6;--story-card:#fffdf9;--story-ink:#1b1a19;--story-muted:#5f5952;--story-line:#d4cabe;--story-red:#d93628;--story-accent:#c4281c;background:var(--story-bg);color:var(--story-ink);padding:80px 0 88px}
@media(max-width:730px){.story-band-dark{padding:70px 0 60px}.story-band-light{padding:60px 0 70px}}
.story-band-light .story-change{margin-top:0;padding-top:0;border-top:0}
.story-band-light .story-shifts small{color:#8a8279}
.story-band-light .story-after{color:var(--story-ink)}
.story-band-light .story-cta{background:#1b1a19;color:#fff}.story-band-light .story-cta:hover,.story-band-light .story-cta:focus-visible{background:var(--story-accent)}

/* Refinado de los bloques: situaciones numeradas y antes/después con jerarquía clara. */
.story-pains{counter-reset:pain}
.story-pain{position:relative;counter-increment:pain;padding:34px 30px 32px 30px;border-left:0;border-top:3px solid var(--story-red);background:linear-gradient(180deg,#25252a 0%,var(--story-card) 100%);transition:transform .25s ease,border-color .25s ease}
.story-pain::before{content:counter(pain,decimal-leading-zero);display:block;margin-bottom:18px;font-size:13px;font-weight:900;letter-spacing:.18em;color:var(--story-red)}
.story-pain:hover{transform:translateY(-4px);border-top-color:var(--story-yellow)}
.story-pain:hover::before{color:var(--story-yellow)}
.story-pain h3{font-size:clamp(23px,2.3vw,30px)}
.story-pain p{font-size:16px;line-height:1.6}
.story-shifts{gap:12px}
.story-shifts li{position:relative;grid-template-columns:1fr 44px 1.15fr;gap:18px;padding:22px 28px;border:1px solid var(--story-line);background:var(--story-card)}
.story-shifts b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--story-red);color:#fff;font-size:20px;line-height:1}
.story-after{position:relative;padding-left:20px;border-left:3px solid var(--story-accent);font-size:18px}
.story-before{font-size:16px;opacity:.9}
.story-quote{position:relative;padding:38px 40px 34px 84px;border-radius:0}
.story-quote::before{content:"“";position:absolute;left:26px;top:6px;font-family:Georgia,serif;font-size:110px;font-weight:900;line-height:1;color:rgba(27,26,25,.22)}
.story-band-light .story-pain,.story-band-light .story-shifts li{border-color:var(--story-line)}
.story-band-light .story-shifts li{box-shadow:0 1px 0 rgba(0,0,0,.04)}
@media(max-width:730px){.story-pain{padding:28px 22px 26px}.story-shifts li{grid-template-columns:1fr;gap:10px;padding:18px}.story-shifts b{justify-self:start;transform:rotate(90deg)}.story-after{padding-left:14px}.story-quote{padding:30px 22px 26px 22px}.story-quote::before{position:static;display:block;height:46px;margin-bottom:-6px;font-size:84px}}
/* Salida al final de la historia: la entrevista y una nota debajo */
.story-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:36px}
.story-actions .story-cta{margin-top:0}
.story-actions-note{flex-basis:100%;margin:6px 0 0;font-size:15px;color:var(--story-muted)}
@media(max-width:730px){.story-actions .story-cta{width:100%;justify-content:center}}
/* Contraste AA en las etiquetas ANTES / DESPUÉS. */
.story-shifts small{color:#a8a4ab}
.story-band-light .story-shifts small{color:#6b635a}
/* Bloques 01–04 más contenidos y proporcionados. */
.story-pain{padding:26px 24px 24px}
.story-pain::before{margin-bottom:12px}
.story-pain h3{font-size:clamp(20px,1.9vw,24px);margin-bottom:8px}
.story-pain p{font-size:15px;line-height:1.55}