/*
 * Guía Segurillanta
 * Public editorial design system
 *
 * Scope contract:
 * all public editorial styles MUST live below .sg-guide
 * to avoid affecting the legacy public frontend.
 */

.sg-guide {
    --sg-red: #af272e;
    --sg-red-dark: #8f1e24;

    --sg-ink: #151515;
    --sg-ink-soft: #303030;
    --sg-muted: #6e6e73;

    --sg-line: #e7e7e7;
    --sg-surface: #f6f6f4;
    --sg-surface-2: #eeeeeb;

    --sg-white: #ffffff;

    --sg-radius-sm: 10px;
    --sg-radius-md: 16px;
    --sg-radius-lg: 24px;

    --sg-shadow:
        0 18px 50px rgba(0, 0, 0, 0.07);

    --sg-container: 1240px;
    --sg-reading: 760px;

    background: var(--sg-white);
    color: var(--sg-ink);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 16px;
    line-height: 1.55;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


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


.sg-guide img {
    max-width: 100%;
    height: auto;
}


/* ============================================================
   Layout
   ============================================================ */

.sg-guide-shell {
    width: min(
        calc(100% - 48px),
        var(--sg-container)
    );

    margin-inline: auto;
}


.sg-guide-reading {
    width: min(
        calc(100% - 48px),
        var(--sg-reading)
    );

    margin-inline: auto;
}


.sg-guide-section {
    padding-block: clamp(64px, 8vw, 112px);
}


.sg-guide-section--soft {
    background: var(--sg-surface);
}


/* ============================================================
   Shared typography
   ============================================================ */

.sg-guide-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin: 0 0 20px;

    color: var(--sg-red);

    font-size: 12px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


.sg-guide-eyebrow::before {
    width: 8px;
    height: 8px;

    border-radius: 999px;

    background: currentColor;

    content: "";
}


.sg-guide-title {
    max-width: 940px;

    margin: 0;

    color: var(--sg-ink);

    font-size: clamp(44px, 7vw, 84px);
    font-weight: 760;
    line-height: 0.98;
    letter-spacing: -0.055em;
}


.sg-guide-title--category {
    font-size: clamp(40px, 6vw, 72px);
}


.sg-guide-intro {
    max-width: 760px;

    margin: 28px 0 0;

    color: var(--sg-muted);

    font-size: clamp(18px, 2vw, 23px);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.015em;
}


.sg-guide-section-title {
    margin: 0;

    color: var(--sg-ink);

    font-size: clamp(30px, 4vw, 46px);
    font-weight: 720;
    line-height: 1.05;
    letter-spacing: -0.04em;
}


/* ============================================================
   Hero
   ============================================================ */

.sg-guide-hero {
    position: relative;

    overflow: hidden;

    padding-block: clamp(72px, 9vw, 126px);

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(175, 39, 46, 0.10),
            transparent 34%
        ),
        var(--sg-surface);
}


.sg-guide-hero::after {
    position: absolute;

    right: -120px;
    bottom: -200px;

    width: 430px;
    height: 430px;

    border: 1px solid rgba(21, 21, 21, 0.08);
    border-radius: 50%;

    content: "";
    pointer-events: none;
}


/* ============================================================
   Topic navigation
   ============================================================ */

.sg-guide-topics-wrap {
    border-top: 1px solid var(--sg-line);
    border-bottom: 1px solid var(--sg-line);

    background: var(--sg-white);
}


.sg-guide-topics {
    display: flex;
    align-items: center;
    gap: 8px;

    padding-block: 14px;

    overflow-x: auto;

    scrollbar-width: none;
}


.sg-guide-topics::-webkit-scrollbar {
    display: none;
}


.sg-guide-topic {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;

    min-height: 42px;

    padding: 10px 15px;

    border: 1px solid transparent;
    border-radius: 999px;

    color: var(--sg-ink-soft);
    background: transparent;

    font-size: 13px;
    font-weight: 650;
    line-height: 1;

    text-decoration: none;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}


.sg-guide-topic:hover {
    border-color: var(--sg-line);

    color: var(--sg-ink);
    background: var(--sg-surface);

    text-decoration: none;

    transform: translateY(-1px);
}


.sg-guide-topic.is-active {
    color: var(--sg-white);
    background: var(--sg-ink);
}


.sg-guide-topic-count {
    color: inherit;

    font-size: 11px;

    opacity: 0.55;
}


/* ============================================================
   Featured story
   ============================================================ */

.sg-guide-feature {
    display: grid;
    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(330px, 0.75fr);

    min-height: 540px;

    overflow: hidden;

    border-radius: var(--sg-radius-lg);

    background: var(--sg-ink);

    box-shadow: var(--sg-shadow);
}


.sg-guide-feature-media {
    position: relative;

    min-height: 480px;

    overflow: hidden;

    background: #ddddda;
}


.sg-guide-feature-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 500ms ease;
}


.sg-guide-feature:hover
.sg-guide-feature-media img {
    transform: scale(1.018);
}


.sg-guide-feature-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: clamp(34px, 5vw, 64px);
}


.sg-guide-feature-kicker {
    margin: 0 0 16px;

    color: #e7aeb1;

    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


.sg-guide-feature-title {
    margin: 0;

    color: var(--sg-white);

    font-size: clamp(30px, 4vw, 52px);
    font-weight: 720;
    line-height: 1.03;
    letter-spacing: -0.045em;
}


.sg-guide-feature-title a {
    color: inherit;
    text-decoration: none;
}


.sg-guide-feature-excerpt {
    margin: 22px 0 0;

    color: rgba(255, 255, 255, 0.70);

    font-size: 17px;
    line-height: 1.65;
}


.sg-guide-feature-meta {
    margin-top: 28px;

    color: rgba(255, 255, 255, 0.52);

    font-size: 12px;
    font-weight: 600;
}


/* ============================================================
   Cards
   ============================================================ */

.sg-guide-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: clamp(24px, 3vw, 38px);
}


.sg-guide-card {
    min-width: 0;
}


.sg-guide-card-media {
    display: block;

    position: relative;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    border-radius: var(--sg-radius-md);

    background: var(--sg-surface-2);
}


.sg-guide-card-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 350ms ease,
        filter 350ms ease;
}


.sg-guide-card:hover
.sg-guide-card-media img {
    transform: scale(1.025);
}


.sg-guide-card-body {
    padding: 22px 2px 0;
}


.sg-guide-card-kicker {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 12px;

    color: var(--sg-red);

    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}


.sg-guide-card-title {
    margin: 0;

    color: var(--sg-ink);

    font-size: clamp(21px, 2.1vw, 28px);
    font-weight: 700;
    line-height: 1.13;
    letter-spacing: -0.03em;
}


.sg-guide-card-title a {
    color: inherit;

    text-decoration: none;
}


.sg-guide-card-title a:hover {
    color: var(--sg-red);
}


.sg-guide-card-excerpt {
    margin: 14px 0 0;

    color: var(--sg-muted);

    font-size: 15px;
    line-height: 1.65;
}


.sg-guide-card-meta {
    margin-top: 18px;

    color: #8a8a8f;

    font-size: 12px;
}


/* ============================================================
   Topic cards
   ============================================================ */

.sg-guide-topic-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}


.sg-guide-topic-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-height: 156px;

    padding: 24px;

    border: 1px solid var(--sg-line);
    border-radius: var(--sg-radius-md);

    color: var(--sg-ink);
    background: var(--sg-white);

    text-decoration: none;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}


.sg-guide-topic-card:hover {
    border-color: #d6d6d2;

    color: var(--sg-ink);

    text-decoration: none;

    transform: translateY(-3px);

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.06);
}


.sg-guide-topic-card-name {
    font-size: 18px;
    font-weight: 680;
    line-height: 1.2;
    letter-spacing: -0.02em;
}


.sg-guide-topic-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-top: 28px;

    color: var(--sg-muted);

    font-size: 12px;
}


.sg-guide-topic-card-arrow {
    color: var(--sg-red);

    font-size: 20px;
    line-height: 1;
}


/* ============================================================
   Article header
   ============================================================ */

.sg-guide-article-header {
    padding:
        clamp(62px, 8vw, 112px)
        0
        clamp(44px, 6vw, 72px);

    background: var(--sg-white);
}


.sg-guide-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;

    margin-bottom: 34px;

    color: var(--sg-muted);

    font-size: 12px;
    font-weight: 650;
}


.sg-guide-breadcrumb a {
    color: inherit;

    text-decoration: none;
}


.sg-guide-breadcrumb a:hover {
    color: var(--sg-red);
}


.sg-guide-breadcrumb-separator {
    color: #b2b2b2;
}


.sg-guide-article-title {
    max-width: 1030px;

    margin: 0;

    color: var(--sg-ink);

    font-size: clamp(42px, 6.6vw, 76px);
    font-weight: 760;
    line-height: 1;
    letter-spacing: -0.055em;
}


.sg-guide-article-deck {
    max-width: 820px;

    margin: 28px 0 0;

    color: var(--sg-muted);

    font-size: clamp(19px, 2.1vw, 24px);
    line-height: 1.55;
    letter-spacing: -0.015em;
}


.sg-guide-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;

    margin-top: 32px;

    color: #79797e;

    font-size: 13px;
}


.sg-guide-article-meta strong {
    color: var(--sg-ink);

    font-weight: 650;
}


.sg-guide-dot {
    color: #b7b7b7;
}


/* ============================================================
   Article hero image
   ============================================================ */

.sg-guide-article-visual {
    width: min(
        calc(100% - 48px),
        var(--sg-container)
    );

    margin-inline: auto;
}


.sg-guide-article-visual img {
    display: block;

    width: 100%;

    max-height: 690px;

    object-fit: cover;

    border-radius: var(--sg-radius-lg);
}


/* ============================================================
   Article prose
   ============================================================ */

.sg-guide-prose-wrap {
    padding-block: clamp(56px, 7vw, 96px);
}


.sg-guide-prose {
    color: #292929;

    font-size: clamp(17px, 1.5vw, 19px);
    line-height: 1.82;
}


.sg-guide-prose > *:first-child {
    margin-top: 0;
}


.sg-guide-prose > *:last-child {
    margin-bottom: 0;
}


.sg-guide-prose p {
    margin: 0 0 1.55em;
}


.sg-guide-prose h2 {
    margin:
        2.2em
        0
        0.75em;

    color: var(--sg-ink);

    font-size: clamp(28px, 3.3vw, 38px);
    font-weight: 720;
    line-height: 1.12;
    letter-spacing: -0.035em;
}


.sg-guide-prose h3 {
    margin:
        1.9em
        0
        0.65em;

    color: var(--sg-ink);

    font-size: clamp(23px, 2.5vw, 29px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.025em;
}


.sg-guide-prose h4,
.sg-guide-prose h5,
.sg-guide-prose h6 {
    margin:
        1.7em
        0
        0.6em;

    color: var(--sg-ink);

    font-weight: 700;
}


.sg-guide-prose ul,
.sg-guide-prose ol {
    margin:
        0
        0
        1.7em;

    padding-left: 1.4em;
}


.sg-guide-prose li {
    margin-bottom: 0.65em;
}


.sg-guide-prose a {
    color: var(--sg-red);

    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


.sg-guide-prose blockquote {
    margin:
        2.2em
        0;

    padding:
        4px
        0
        4px
        28px;

    border-left: 4px solid var(--sg-red);

    color: var(--sg-ink-soft);

    font-size: 1.18em;
    font-weight: 520;
    line-height: 1.6;
}


.sg-guide-prose img {
    display: block;

    width: auto;
    max-width: 100%;

    margin:
        2.4em
        auto;

    border-radius: var(--sg-radius-md);
}


.sg-guide-prose table {
    display: block;

    width: 100%;

    margin:
        2em
        0;

    overflow-x: auto;

    border-collapse: collapse;
}


.sg-guide-prose th,
.sg-guide-prose td {
    min-width: 130px;

    padding:
        14px
        16px;

    border-bottom: 1px solid var(--sg-line);

    text-align: left;
}


.sg-guide-prose th {
    color: var(--sg-ink);

    font-size: 13px;
    font-weight: 700;
}


/* ============================================================
   Source / author information
   ============================================================ */

.sg-guide-note {
    margin-top: 48px;

    padding-top: 28px;

    border-top: 1px solid var(--sg-line);
}


.sg-guide-note-title {
    margin: 0 0 12px;

    color: var(--sg-ink);

    font-size: 14px;
    font-weight: 700;
}


.sg-guide-note-text {
    margin: 0;

    color: var(--sg-muted);

    font-size: 13px;
    line-height: 1.7;
}


/* ============================================================
   Empty state
   ============================================================ */

.sg-guide-empty {
    max-width: 720px;

    padding:
        clamp(36px, 6vw, 64px);

    border: 1px solid var(--sg-line);
    border-radius: var(--sg-radius-lg);

    background: var(--sg-surface);
}


.sg-guide-empty-title {
    margin: 0;

    color: var(--sg-ink);

    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
}


.sg-guide-empty-copy {
    margin: 14px 0 0;

    color: var(--sg-muted);

    font-size: 16px;
    line-height: 1.65;
}


/* ============================================================
   Links / actions
   ============================================================ */

.sg-guide-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-top: 22px;

    color: var(--sg-red);

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
}


.sg-guide-link:hover {
    color: var(--sg-red-dark);

    text-decoration: none;
}


/* ============================================================
   Accessibility
   ============================================================ */

.sg-guide a:focus-visible {
    outline:
        3px solid
        rgba(175, 39, 46, 0.35);

    outline-offset: 4px;

    border-radius: 4px;
}


/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 991px) {

    .sg-guide-feature {
        grid-template-columns: 1fr;
    }


    .sg-guide-feature-media {
        min-height: 390px;

        aspect-ratio: 16 / 9;
    }


    .sg-guide-topic-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .sg-guide-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 767px) {

    .sg-guide-shell,
    .sg-guide-reading,
    .sg-guide-article-visual {
        width: min(
            calc(100% - 32px),
            var(--sg-container)
        );
    }


    .sg-guide-hero {
        padding-block: 62px;
    }


    .sg-guide-title {
        font-size: clamp(40px, 13vw, 58px);
    }


    .sg-guide-article-title {
        font-size: clamp(38px, 11vw, 54px);
    }


    .sg-guide-intro,
    .sg-guide-article-deck {
        font-size: 18px;
    }


    .sg-guide-feature {
        min-height: 0;

        border-radius: 18px;
    }


    .sg-guide-feature-media {
        min-height: 0;

        aspect-ratio: 4 / 3;
    }


    .sg-guide-feature-content {
        padding: 30px 24px 34px;
    }


    .sg-guide-feature-title {
        font-size: 31px;
    }


    .sg-guide-grid,
    .sg-guide-topic-grid {
        grid-template-columns: 1fr;
    }


    .sg-guide-topic-grid {
        gap: 10px;
    }


    .sg-guide-topic-card {
        min-height: 132px;
    }


    .sg-guide-article-visual img {
        max-height: none;

        border-radius: 14px;
    }


    .sg-guide-prose-wrap {
        padding-block: 48px;
    }


    .sg-guide-prose {
        font-size: 17px;
        line-height: 1.76;
    }
}


@media (prefers-reduced-motion: reduce) {

    .sg-guide *,
    .sg-guide *::before,
    .sg-guide *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ============================================================
   D7B-5C3A — Desktop visual refinement
   ============================================================ */


/*
 * Desktop topic navigation:
 * all topics remain reachable without hidden horizontal overflow.
 */
@media (min-width: 992px) {

    .sg-guide-topics {
        flex-wrap: wrap;

        overflow: visible;

        gap: 6px 8px;
    }


    .sg-guide-topic {
        padding-inline: 13px;
    }
}


/*
 * Featured story:
 * give long editorial headlines slightly more breathing room.
 */
@media (min-width: 992px) {

    .sg-guide-feature {
        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(390px, 0.85fr);
    }


    .sg-guide-feature-title {
        font-size: clamp(30px, 3.2vw, 47px);
        line-height: 1.045;
    }
}


/*
 * Stable editorial image ratios.
 */
.sg-guide-feature-media {
    aspect-ratio: 16 / 10;
    min-height: 0;
}


.sg-guide-feature-media img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.sg-guide-card-media {
    aspect-ratio: 16 / 10;
}


.sg-guide-article-visual {
    overflow: hidden;

    border-radius: var(--sg-radius-lg);

    background: var(--sg-surface);
}


.sg-guide-article-visual img {
    width: 100%;

    aspect-ratio: 16 / 9;

    max-height: none;

    object-fit: cover;
    object-position: center;

    border-radius: inherit;
}


/*
 * Bring the reader into the article slightly sooner.
 */
.sg-guide-prose-wrap {
    padding-top: clamp(46px, 5vw, 70px);
}


/*
 * A single article in a category should feel intentional,
 * not like one orphaned card in a three-column grid.
 */
.sg-guide-grid.sg-guide-grid--single {
    grid-template-columns:
        minmax(0, 760px);

    justify-content: start;
}


.sg-guide-grid--single .sg-guide-card {
    display: grid;
    grid-template-columns:
        minmax(280px, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;

    overflow: hidden;

    border: 1px solid var(--sg-line);
    border-radius: var(--sg-radius-lg);

    background: var(--sg-white);
}


.sg-guide-grid--single
.sg-guide-card-media {
    height: 100%;

    min-height: 360px;

    border-radius: 0;
}


.sg-guide-grid--single
.sg-guide-card-body {
    padding: 36px;
}


.sg-guide-grid--single
.sg-guide-card-title {
    font-size: clamp(27px, 3vw, 36px);
}


@media (max-width: 767px) {

    .sg-guide-grid.sg-guide-grid--single {
        grid-template-columns: 1fr;
    }


    .sg-guide-grid--single .sg-guide-card {
        display: block;

        border-radius: 16px;
    }


    .sg-guide-grid--single
    .sg-guide-card-media {
        min-height: 0;

        aspect-ratio: 16 / 10;
    }


    .sg-guide-grid--single
    .sg-guide-card-body {
        padding: 24px;
    }
}


/* ============================================================
   D7B-5C3B — Final desktop visual corrections
   ============================================================ */


/*
 * FEATURED STORY
 *
 * Desktop:
 * the media column must fill the complete grid row.
 * Do not let aspect-ratio leave a black strip underneath.
 */
@media (min-width: 992px) {

    .sg-guide-feature {
        align-items: stretch;
    }


    .sg-guide-feature-media {
        height: 100%;
        min-height: 540px;

        aspect-ratio: auto;
    }


    .sg-guide-feature-media img {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        object-fit: cover;
    }
}


/*
 * Tablet keeps a predictable editorial ratio.
 */
@media (
    min-width: 768px
) and (
    max-width: 991px
) {

    .sg-guide-feature-media {
        height: auto;
        min-height: 0;

        aspect-ratio: 16 / 9;
    }
}


/*
 * Mobile gets a slightly taller composition.
 */
@media (max-width: 767px) {

    .sg-guide-feature-media {
        height: auto;
        min-height: 0;

        aspect-ratio: 4 / 3;
    }
}


/*
 * SINGLE ARTICLE CATEGORY
 *
 * The previous rule combined height:100% with aspect-ratio,
 * allowing the media box to demand more horizontal space
 * than its CSS Grid column.
 *
 * Explicitly remove the ratio on horizontal layouts.
 */
@media (min-width: 768px) {

    .sg-guide-grid--single
    .sg-guide-card-media {
        width: 100%;
        height: 100%;

        min-width: 0;
        min-height: 320px;

        aspect-ratio: auto;
    }


    .sg-guide-grid--single
    .sg-guide-card-media img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }


    .sg-guide-grid--single
    .sg-guide-card-body {
        min-width: 0;
    }
}


/*
 * Make one-article category landing feel deliberately featured
 * rather than like an incomplete three-column grid.
 */
@media (min-width: 992px) {

    .sg-guide-grid.sg-guide-grid--single {
        grid-template-columns:
            minmax(0, 980px);
    }


    .sg-guide-grid--single
    .sg-guide-card {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(0, 0.92fr);

        align-items: stretch;
    }


    .sg-guide-grid--single
    .sg-guide-card-body {
        display: flex;
        flex-direction: column;
        justify-content: center;

        padding: 42px;
    }


    .sg-guide-grid--single
    .sg-guide-card-title {
        font-size: clamp(
            27px,
            2.6vw,
            36px
        );
    }
}


/*
 * Restore normal card behavior on phones.
 */
@media (max-width: 767px) {

    .sg-guide-grid--single
    .sg-guide-card-media {
        width: 100%;
        height: auto;

        min-height: 0;

        aspect-ratio: 16 / 10;
    }


    .sg-guide-grid--single
    .sg-guide-card-media img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }
}


/* ============================================================
   D7B-5C3C — Visual scale refinement
   OWNER feedback 2026-09-15
   ============================================================ */


/*
 * HUB + CATEGORY HERO
 *
 * Reduce vertical footprint while preserving
 * the editorial character and breathing room.
 */
.sg-guide-hero {
    padding-block:
        clamp(
            52px,
            6.5vw,
            88px
        );
}


/*
 * CATEGORY — SINGLE ARTICLE
 *
 * The single-feature card should not compete
 * typographically with the page title itself.
 */
@media (min-width: 768px) {

    .sg-guide-grid--single
    .sg-guide-card-title {
        font-size:
            clamp(
                23px,
                2vw,
                30px
            );

        line-height: 1.12;
    }
}


/*
 * ARTICLE TITLE
 *
 * Keep it strongly editorial but one level
 * below the previous oversized treatment.
 */
.sg-guide-article-title {
    max-width: 950px;

    font-size:
        clamp(
            38px,
            5.2vw,
            62px
        );

    line-height: 1.02;
}


/*
 * ARTICLE HERO IMAGE
 *
 * Deliberately narrower than the main site shell.
 * This gives the photograph more editorial restraint
 * and better visual relationship with the text column.
 */
.sg-guide-article-visual {
    width:
        min(
            calc(100% - 48px),
            1080px
        );
}


/*
 * Mobile should still use nearly the full viewport.
 */
@media (max-width: 767px) {

    .sg-guide-article-visual {
        width:
            min(
                calc(100% - 32px),
                1080px
            );
    }


    .sg-guide-article-title {
        max-width: none;

        font-size:
            clamp(
                35px,
                10vw,
                48px
            );
    }
}

/* =========================================================
   D7B-5C3D — ARTICLE PAGE SCALE FIX
   Objetivo:
   - reducir H1 del artículo
   - reducir tamaño visual de la imagen principal
   - no afectar hub ni categoría
   ========================================================= */

.sg-guide-article .sg-guide-article__title,
.sg-guide-article h1 {
    font-size: clamp(3.4rem, 5vw, 6.2rem);
    line-height: 0.96;
    letter-spacing: -0.045em;
    max-width: 12ch;
}

.sg-guide-article .sg-guide-article__excerpt {
    max-width: 900px;
}

.sg-guide-article .sg-guide-article__media,
.sg-guide-article .sg-guide-article__figure,
.sg-guide-article figure {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}

.sg-guide-article .sg-guide-article__media img,
.sg-guide-article .sg-guide-article__figure img,
.sg-guide-article figure img {
    width: 100%;
    max-height: 620px;
    object-fit: cover;
}

/* Si existe bloque interior específico del contenido */
.sg-guide-article .sg-guide-article__content {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   D7B-5C3E — Article scale real fix
   Uses the actual public article selectors.
   ============================================================ */


/*
 * ARTICLE TITLE
 *
 * Deliberately more restrained than previous versions.
 */
@media (min-width: 768px) {

    .sg-guide-article-title {
        max-width: 840px;

        font-size:
            clamp(
                34px,
                4vw,
                52px
            );

        line-height: 1.04;
        letter-spacing: -0.045em;
    }
}


/*
 * ARTICLE HERO IMAGE
 *
 * Reduce visual dominance.
 */
@media (min-width: 768px) {

    .sg-guide-article-visual {
        width:
            min(
                calc(100% - 48px),
                900px
            );
    }


    .sg-guide-article-visual img {
        aspect-ratio: 16 / 9;

        width: 100%;

        object-fit: cover;
        object-position: center;
    }
}


/* ============================================================
   D7B-5C3F — Article image: preserve original composition
   OWNER feedback 2026-09-15
   ============================================================ */


/*
 * Never crop the main editorial photograph.
 *
 * The uploaded image keeps its intrinsic aspect ratio.
 * Its size is controlled by the container width instead.
 */
.sg-guide-article-visual {
    width:
        min(
            calc(100% - 48px),
            780px
        );

    overflow: visible;

    background: transparent;
}


.sg-guide-article-visual img {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;
    max-height: none;

    aspect-ratio: auto;

    object-fit: contain;
    object-position: center;

    margin-inline: auto;

    border-radius: inherit;
}


/*
 * Mobile remains almost full width,
 * still preserving the complete photograph.
 */
@media (max-width: 767px) {

    .sg-guide-article-visual {
        width:
            min(
                calc(100% - 32px),
                780px
            );
    }


    .sg-guide-article-visual img {
        width: 100%;
        height: auto;

        aspect-ratio: auto;

        object-fit: contain;
    }
}


/* ============================================================
   D7B-5C3G — Guía Segurillanta article image standard

   MASTER ASSET:
   1600 × 800 px
   Ratio 2:1

   Rendering contract:
   - never crop
   - desktop target up to 960 × 480
   - preserve intrinsic ratio for non-standard legacy images
   - mobile uses available width
   ============================================================ */


/*
 * Desktop / tablet:
 * reserve a modern panoramic presentation area,
 * but never distort or crop the source.
 */
@media (min-width: 768px) {

    .sg-guide-article-visual {
        display: flex;
        align-items: center;
        justify-content: center;

        width:
            min(
                calc(100% - 48px),
                960px
            );

        margin-inline: auto;

        overflow: visible;

        background: transparent;
    }


    .sg-guide-article-visual img {
        display: block;

        width: auto;
        height: auto;

        max-width: 100%;
        max-height: 480px;

        aspect-ratio: auto;

        object-fit: contain;
        object-position: center;

        margin-inline: auto;
    }
}


/*
 * Mobile:
 * use the available width and keep
 * the complete original composition.
 */
@media (max-width: 767px) {

    .sg-guide-article-visual {
        display: block;

        width:
            calc(100% - 32px);

        margin-inline: auto;
    }


    .sg-guide-article-visual img {
        display: block;

        width: 100%;
        height: auto;

        max-width: 100%;
        max-height: none;

        aspect-ratio: auto;

        object-fit: contain;

        margin-inline: auto;
    }
}


/* ============================================================
   D7B-5C4A — Mobile visual refinement
   390–430 px primary UAT
   ============================================================ */

@media (max-width: 767px) {

    /*
     * General vertical rhythm
     */

    .sg-guide-section {
        padding-block: 48px;
    }


    .sg-guide-hero {
        padding-block: 46px;
    }


    /*
     * Hub + category titles
     *
     * Still strongly editorial, but no longer
     * overpower the complete mobile viewport.
     */

    .sg-guide-title,
    .sg-guide-title--category {
        font-size:
            clamp(
                36px,
                10vw,
                44px
            );

        line-height: 1.02;
        letter-spacing: -0.045em;
    }


    .sg-guide-intro {
        margin-top: 22px;

        font-size: 17px;
        line-height: 1.55;
    }


    /*
     * Eyebrows
     */

    .sg-guide-eyebrow {
        margin-bottom: 16px;

        font-size: 11px;
        letter-spacing: 0.13em;
    }


    /*
     * Topic navigation
     *
     * Explicit horizontal scrolling belongs only
     * to this component, not the whole page.
     */

    .sg-guide-topics {
        gap: 6px;

        padding-block: 11px;

        overflow-x: auto;
        overscroll-behavior-x: contain;

        scroll-snap-type: x proximity;
        scroll-padding-inline: 16px;

        -webkit-overflow-scrolling: touch;
    }


    .sg-guide-topic {
        min-height: 40px;

        padding:
            9px
            12px;

        font-size: 12px;

        scroll-snap-align: start;
    }


    /*
     * Featured story
     */

    .sg-guide-feature {
        border-radius: 18px;
    }


    .sg-guide-feature-content {
        padding:
            26px
            22px
            28px;
    }


    .sg-guide-feature-kicker {
        margin-bottom: 12px;

        font-size: 10px;
    }


    .sg-guide-feature-title {
        font-size: 28px;
        line-height: 1.06;
    }


    .sg-guide-feature-excerpt {
        margin-top: 16px;

        font-size: 16px;
        line-height: 1.58;
    }


    .sg-guide-feature-meta {
        margin-top: 20px;
    }


    /*
     * "Explora por tema"
     *
     * Reduce the excessive height of eight stacked cards.
     */

    .sg-guide-topic-grid {
        gap: 10px;
    }


    .sg-guide-topic-card {
        min-height: 108px;

        padding:
            19px
            20px;
    }


    .sg-guide-topic-card-name {
        font-size: 17px;
    }


    .sg-guide-topic-card-footer {
        margin-top: 18px;
    }


    /*
     * Section headings
     */

    .sg-guide-section-title {
        font-size:
            clamp(
                28px,
                8vw,
                36px
            );

        line-height: 1.08;
    }


    /*
     * Article header
     */

    .sg-guide-article-header {
        padding:
            48px
            0
            38px;
    }


    .sg-guide-breadcrumb {
        gap: 7px;

        margin-bottom: 26px;

        font-size: 11px;
    }


    .sg-guide-article-title {
        max-width: none;

        font-size:
            clamp(
                33px,
                8.8vw,
                40px
            );

        line-height: 1.045;
        letter-spacing: -0.04em;
    }


    .sg-guide-article-deck {
        margin-top: 22px;

        font-size: 17px;
        line-height: 1.58;
    }


    .sg-guide-article-meta {
        gap: 8px;

        margin-top: 26px;

        font-size: 12px;
        line-height: 1.5;
    }


    /*
     * Article image
     *
     * Preserve complete 2:1 asset / original ratio.
     */

    .sg-guide-article-visual {
        width: calc(100% - 32px);
    }


    .sg-guide-article-visual img {
        width: 100%;
        height: auto;

        max-height: none;

        aspect-ratio: auto;

        object-fit: contain;
    }


    /*
     * Article body
     */

    .sg-guide-prose-wrap {
        padding-block: 42px;
    }


    .sg-guide-prose {
        font-size: 17px;
        line-height: 1.72;
    }


    /*
     * Cards
     */

    .sg-guide-card-body {
        padding-top: 18px;
    }


    .sg-guide-card-title {
        font-size: 22px;
        line-height: 1.14;
    }


    .sg-guide-card-excerpt {
        margin-top: 11px;

        font-size: 15px;
    }


    /*
     * WhatsApp legacy floating control.
     *
     * guia CSS is loaded only on Guia pages,
     * so this does not alter the rest of Segurillanta.
     */

    .mensajes {
        right: 12px !important;
        bottom: 14px !important;
    }


    .mensajes img {
        width: 58px !important;
        height: auto !important;
    }
}


/*
 * Extra-small phones.
 */
@media (max-width: 359px) {

    .sg-guide-title,
    .sg-guide-title--category {
        font-size: 34px;
    }


    .sg-guide-article-title {
        font-size: 32px;
    }
}


/* ============================================================
   D7B-5C4B — Mobile H1 scale refinement
   ============================================================ */

@media (max-width: 767px) {

    /*
     * Hub + category H1
     */
    .sg-guide-title,
    .sg-guide-title--category {
        font-size:
            clamp(
                31px,
                8.5vw,
                38px
            );

        line-height: 1.04;
        letter-spacing: -0.04em;
    }


    /*
     * Article H1
     */
    .sg-guide-article-title {
        font-size:
            clamp(
                29px,
                7.8vw,
                34px
            );

        line-height: 1.07;
        letter-spacing: -0.035em;
    }
}


/*
 * Very small devices
 */
@media (max-width: 359px) {

    .sg-guide-title,
    .sg-guide-title--category {
        font-size: 30px;
    }


    .sg-guide-article-title {
        font-size: 28px;
    }
}