/* ====================================================
   SINGLE POST EDITORIAL — vista individual
   Frame simple: main + sidebar derecho, sin trucos raros.
   ==================================================== */

.spe {
    --spe-primary: #564FFF;
    --spe-primary-soft: #AAA7FF;
    --spe-text-title: #0F172A;
    --spe-text-body: #1F2937;
    --spe-text-secondary: #475569;
    --spe-text-meta: #6B7280;
    --spe-divider: #E5E7EB;
    --spe-bg-soft: #F7F8FB;

    font-family: inherit;
    color: var(--spe-text-body);
    width: 100%;
    box-sizing: border-box;
}

.spe, .spe *, .spe *::before, .spe *::after { box-sizing: border-box; }

/* ====================================================
   FRAME — replica el patron .container-wide del site
   Padding lateral responsive (16 / 24 / 32 / 64 / 96)
   ==================================================== */
.spe-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 16px 64px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}

@media (min-width: 768px) {
    .spe-container { padding: 32px 24px 64px; }
}

@media (min-width: 1024px) {
    .spe-container {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 48px;
        padding: 32px 32px 64px;
    }
}

@media (min-width: 1280px) {
    .spe-container { padding: 32px 64px 64px; }
}

@media (min-width: 1920px) {
    .spe-container { padding: 32px 96px 64px; }
}

/* ====================================================
   MAIN COLUMN
   ==================================================== */
.spe-main {
    min-width: 0;
    max-width: 100%;
}

.spe-header { margin-bottom: 32px; }

.spe-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.spe-chip {
    display: inline-block;
    padding: 5px 14px;
    border: 1.5px solid var(--spe-primary-soft);
    border-radius: 9999px;
    color: var(--spe-primary);
    font-size: 12px;
    font-weight: 600;
    background: white;
    text-decoration: none;
    letter-spacing: 0.01em;
}

.spe-title {
    font-size: clamp(32px, 3.6vw, 44px);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--spe-text-title);
    letter-spacing: -0.015em;
}

.spe-subtitle {
    font-size: 17px;
    line-height: 1.5;
    margin: 0 0 20px;
    color: var(--spe-text-secondary);
    font-weight: 400;
}

.spe-meta {
    font-size: 13px;
    color: var(--spe-text-meta);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.spe-meta strong { color: var(--spe-text-body); font-weight: 600; }
.spe-meta__sep { color: var(--spe-text-meta); padding: 0 2px; }

/* ====================================================
   BODY
   ==================================================== */
.spe-body {
    font-size: 17px;
    line-height: 1.7;
    color: var(--spe-text-body);
}

.spe-body p { margin: 0 0 22px; }
.spe-body a { color: var(--spe-primary); text-decoration: none; }
.spe-body a:hover { text-decoration: underline; }
.spe-body h2 { font-size: 24px; font-weight: 700; color: var(--spe-text-title); margin: 32px 0 12px; }
.spe-body h3 { font-size: 20px; font-weight: 700; color: var(--spe-text-title); margin: 28px 0 10px; }
.spe-body blockquote {
    border-left: 4px solid var(--spe-primary);
    padding: 8px 0 8px 18px;
    margin: 24px 0;
    color: var(--spe-text-secondary);
    font-style: italic;
}
.spe-body ul, .spe-body ol { padding-left: 22px; margin: 0 0 22px; }
.spe-body li { margin-bottom: 8px; }

/* ====================================================
   SIDEBAR — columnna derecha, con padding interno.
   NO full-bleed. Respeta el max-width del container-wide.
   Estructura: featured + share + related + others + back-top
   ==================================================== */
.spe-sidebar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: static;
}

/* FEATURED — imagen destacada del sidebar */
.spe-featured {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--spe-divider);
    border-radius: 12px;
    background: white;
}

.spe-featured img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 0;
}

.spe-featured__caption {
    display: block;
    padding: 10px 16px;
    font-size: 12px;
    color: var(--spe-text-meta);
    background: transparent;
    text-align: left;
}

/* TITULOS DE SECCION */
.spe-sidebar__share-title,
.spe-sidebar__related-title,
.spe-sidebar__others-title {
    font-family: 'Lato', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 6%;
    color: #564FFF;
    text-transform: none;
    margin: 0 0 20px;
    text-align: center;
}

/* COMPARTIR */
.spe-share-icons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.spe-share-icon {
    width: 44px;
    height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none !important;
    border: 1.5px solid var(--spe-divider);
    background: white;
    color: var(--spe-text-secondary);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.spe-share-icon:hover {
    transform: translateY(-1px);
    border-color: var(--spe-primary);
    text-decoration: none !important;
}

.spe-share-icon--twitter { background: #000; border-color: #000; color: white; }
.spe-share-icon--whatsapp { color: #25D366; }
.spe-share-icon--telegram { color: #229ED9; }

/* CARDS RELACIONADAS */
.spe-sidebar__related,
.spe-sidebar__others {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.spe-related-card {
    display: block;
    padding: 16px;
    border: 1px solid var(--spe-divider);
    border-radius: 12px;
    background: white;
    text-decoration: none !important;
    color: inherit;
    transition: border-color 0.15s ease, transform 0.15s ease;
    overflow: hidden;
}

.spe-related-card:hover {
    border-color: var(--spe-primary-soft);
    transform: translateY(-1px);
    text-decoration: none !important;
}

.spe-related-thumb {
    margin: -16px -16px 12px;
    width: calc(100% + 32px);
    height: 120px;
    overflow: hidden;
    background: var(--spe-bg-soft);
}

.spe-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.spe-related-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.spe-related-pill {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--spe-divider);
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 500;
    color: var(--spe-text-meta);
    background: white;
    text-transform: capitalize;
}

.spe-related-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--spe-text-title);
    margin: 0 0 6px;
}

.spe-related-meta {
    font-size: 12px;
    color: var(--spe-text-meta);
    margin: 0 0 10px;
}

.spe-related-cta {
    font-size: 13px;
    font-weight: 600;
    color: var(--spe-primary);
    text-decoration: none;
}

/* BACK TO TOP */
.spe-back-to-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px auto 0;
    padding: 12px 24px;
    border: 1.5px solid var(--spe-divider);
    border-radius: 9999px;
    background: white;
    color: var(--spe-text-secondary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.spe-back-to-top:hover {
    border-color: var(--spe-primary);
    color: var(--spe-primary);
    transform: translateY(-1px);
    text-decoration: none !important;
}

.spe-back-to-top__label { line-height: 1; }

.spe-back-to-top svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ====================================================
   MOBILE / TABLET
   ==================================================== */
@media (max-width: 768px) {
    .spe-title { font-size: 26px; }
    .spe-subtitle { font-size: 15px; }
    .spe-body { font-size: 16px; line-height: 1.6; }
    .spe-share-icon { width: 40px; height: 40px; font-size: 13px; }
    .spe-sidebar { gap: 24px; }
    .spe-related-card { padding: 12px; }
}

@media (max-width: 480px) {
    .spe-title { font-size: 22px; }
    .spe-meta { font-size: 12px; }
}

/* Arrow icon (SVG) — usado en CTAs "Leer →", "Leer investigación →", "Leer artículo →"
   Mismo patron que theme .single-editorial__arrow. */
.spe-arrow {
    display: inline-block;
    vertical-align: -0.18em;
    width: 1.3em;
    height: 1.3em;
    margin-left: 0.35em;
    color: inherit;
    flex-shrink: 0;
}
.spe-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 2;
}