/* Historias: editorial pages inside the shared public shell. */
.st { padding-top: 76px; }
.st a { color: inherit; }
.st .page-hero { padding: 70px 28px 56px; background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 12%, var(--surface)), var(--surface)); text-align: center; }
.st .page-hero-inner { max-width: 760px; margin: 0 auto; }
.st .page-hero-tag, .st .page-tag { display: inline-block; margin-bottom: 14px; color: var(--gold-text); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.st .page-hero-title, .st .page-title { font-family: var(--font-serif, 'Fraunces', serif); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -.03em; margin: 0 0 18px; }
.st .page-hero-title em, .st .page-title em { color: var(--gold-text); font-weight: 300; }
.st .page-hero-sub, .st .page-sub { font-size: 1.08rem; line-height: 1.7; color: var(--text-2); margin: 0 auto 26px; max-width: 38rem; }
.st .hero-cta { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--surface-ink); color: var(--text-on-ink) !important; font-weight: 700; font-size: .92rem; text-decoration: none; transition: transform .25s var(--ease-out, ease), box-shadow .25s; }
.st .hero-cta:hover { transform: translateY(-2px); box-shadow: var(--elev-3); }

.st .newsletter-bar { background: var(--surface-ink); color: var(--text-on-ink); padding: 22px 28px; }
.st .newsletter-bar-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.st .newsletter-bar-text { max-width: 28rem; line-height: 1.5; color: var(--text-on-ink-2); } .st .newsletter-bar-text strong { color: var(--text-on-ink); }
.st .nl-form, .st .d-flex { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.st .nl-input { min-height: 46px; min-width: 240px; padding: 0 16px; border-radius: 999px; border: 1px solid rgb(243 238 229 / .22); background: rgb(243 238 229 / .08); color: inherit; font: inherit; }
.st .nl-btn { min-height: 46px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--text-on-ink); color: var(--surface-ink); font: 700 .88rem var(--font-sans, 'Manrope'); cursor: pointer; }
.st .newsletter-bar .small, .st .newsletter-box .small { font-size: .74rem; color: var(--text-on-ink-2); } .st .w-100 { width: 100%; }
.st .newsletter-bar a { color: var(--gold-on-ink); text-decoration: underline; }

.st .alert-banner { max-width: 1100px; margin: 22px auto 0; padding: 0 28px; }
.st .alert-success-bar { display: flex; gap: 10px; align-items: center; padding: 14px 18px; border-radius: 16px; background: var(--ok-bg); color: var(--ok); font-size: .92rem; }

.st .stories-section { max-width: 1100px; margin: 0 auto; padding: 46px 28px 100px; }
.st .stories-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.st .stories-header-title { font-family: var(--font-serif, 'Fraunces', serif); font-weight: 400; font-size: 1.8rem; margin: 0; }
.st .stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.st .story-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--elev-1); opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .6s var(--ease-out, ease), box-shadow .3s; }
.st .story-card.visible { opacity: 1; transform: none; }
.st .story-card:hover { box-shadow: var(--elev-3); transform: translateY(-5px); }
.st .story-card-cover, .st .story-card-cover-placeholder { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: grid; place-items: center; color: rgb(255 255 255 / .85); font-size: 2.2rem; }
.st .story-card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.st .story-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st .story-card-date { font-size: .74rem; color: var(--text-3); }
.st .story-card-title { font-family: var(--font-serif, 'Fraunces', serif); font-weight: 400; font-size: 1.4rem; line-height: 1.2; margin: 0; }
.st .story-card-excerpt { margin: 0; color: var(--text-2); font-size: .92rem; line-height: 1.6; }
.st .story-card-footer { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--hairline); }
.st .story-card-author-name { font-weight: 700; font-size: .84rem; display: block; }
.st .story-card-author-ig, .st .author-ig { color: var(--gold-text); font-size: .76rem; text-decoration: none; }
.st .story-card-link { color: var(--gold-text); font-weight: 700; font-size: .84rem; text-decoration: none; white-space: nowrap; }
.st .category-badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: .68rem; font-weight: 700; }
.st .cat-historia { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold-text); }
.st .cat-consejo { background: var(--ok-bg); color: var(--ok); }
.st .cat-inspiracion { background: var(--info-bg); color: var(--info); }
.st .cat-terror { background: var(--err-bg); color: var(--err); }
.st .cover-grad-historia { background: linear-gradient(135deg, #3a2a0e, #8a6f2e); }
.st .cover-grad-consejo { background: linear-gradient(135deg, #17372a, #2f6a4a); }
.st .cover-grad-inspiracion { background: linear-gradient(135deg, #1b2b45, #3f6a9a); }
.st .cover-grad-terror { background: linear-gradient(135deg, #3b1a1a, #8f3a34); }
.st .cover-grad-default { background: linear-gradient(135deg, #1a1c1c, #4d463a); }
.st .empty-state { text-align: center; padding: 70px 20px; }
.st .empty-state-icon { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold-text); }
.st .empty-state-title { font-family: var(--font-serif, 'Fraunces', serif); font-weight: 400; font-size: 1.7rem; margin: 0 0 8px; }
.st .empty-state-sub { color: var(--text-2); max-width: 28rem; margin: 0 auto 22px; line-height: 1.6; }

/* Article */
.st .cover-wrap { max-height: 460px; overflow: hidden; } .st .cover-image, .st .cover-placeholder { width: 100%; height: 460px; object-fit: cover; display: grid; place-items: center; font-size: 3rem; color: rgb(255 255 255 / .8); }
.st .article-wrap, .st .page-wrap { max-width: 720px; margin: 0 auto; padding: 44px 28px 90px; }
.st .back-link { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 22px; color: var(--text-2); text-decoration: none; font-size: .88rem; font-weight: 600; }
.st .article-title { font-family: var(--font-serif, 'Fraunces', serif); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -.03em; margin: 14px 0 22px; }
.st .author-card { display: flex; gap: 14px; align-items: center; padding: 14px 0; margin-bottom: 26px; border-block: 1px solid var(--hairline); }
.st .author-avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-serif, 'Fraunces', serif); font-size: 1.2rem; background: color-mix(in srgb, var(--gold) 24%, transparent); color: var(--gold-text); }
.st .author-name { font-weight: 700; } .st .author-date { font-size: .78rem; color: var(--text-3); }
.st .article-body { font-size: 1.08rem; line-height: 1.9; white-space: pre-wrap; word-break: break-word; color: var(--text); }
.st .article-divider { border: 0; border-top: 1px solid var(--hairline); margin: 54px 0 40px; }
.st .newsletter-box { padding: 30px; border-radius: 24px; background: var(--surface-ink); color: var(--text-on-ink); }
.st .newsletter-box-title { font-family: var(--font-serif, 'Fraunces', serif); font-size: 1.6rem; margin-bottom: 6px; } .st .newsletter-box-sub { color: var(--text-on-ink-2); margin: 0 0 16px; }
.st .newsletter-box a { color: var(--gold-on-ink); } .st .nl-success { color: var(--gold-on-ink); }
.st .cta-section { text-align: center; padding: 56px 0 0; } .st .cta-section-title { font-family: var(--font-serif, 'Fraunces', serif); font-weight: 400; font-size: 1.9rem; margin: 0 0 8px; } .st .cta-section-sub { color: var(--text-2); max-width: 30rem; margin: 0 auto 22px; line-height: 1.6; }

/* Submit form */
.st .page-wrap .page-sub { margin-left: 0; }
.st .form-card { padding: 30px; border-radius: 26px; background: var(--surface-sunken); border: 1px solid var(--hairline); }
.st .form-group { margin-bottom: 20px; } .st .form-label { display: block; margin-bottom: 7px; font-weight: 700; font-size: .88rem; } .st .optional { font-weight: 400; color: var(--text-3); }
.st .form-input, .st .form-select, .st .form-textarea { width: 100%; padding: 13px 15px; border-radius: 14px; border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--text); font: inherit; }
.st .form-textarea { min-height: 220px; resize: vertical; }
.st .form-hint { display: block; margin-top: 6px; font-size: .78rem; color: var(--text-3); } .st .form-divider { border: 0; border-top: 1px solid var(--hairline); margin: 24px 0; }
.st .form-error { padding: 12px 16px; border-radius: 14px; background: var(--err-bg); color: var(--err); margin-bottom: 18px; }
.st .form-submit { display: inline-flex; align-items: center; gap: 9px; min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--surface-ink); color: var(--text-on-ink); font: 700 .95rem var(--font-sans, 'Manrope'); cursor: pointer; }
.st .review-note { display: flex; gap: 10px; align-items: center; margin-top: 18px; font-size: .84rem; color: var(--text-2); } .st .review-note i { color: var(--ok); }

@media (max-width: 900px) { .st .stories-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .st .stories-grid { grid-template-columns: 1fr; } .st .newsletter-bar-inner { flex-direction: column; align-items: stretch; } .st .nl-input { min-width: 0; width: 100%; } .st .cover-image, .st .cover-placeholder { height: 280px; } }
@media (prefers-reduced-motion: reduce) { .st .story-card { opacity: 1; transform: none; transition: none; } }