/* ====================================================================
   GUIAS-NUEVAS.CSS — ThinkChip Editorial System
   ==================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500&display=swap');

/* Variables y base de toda la sección editorial */
.guia-nueva {
    --gn-bg: #f2f0eb;
    --gn-surface: #f2f0eb;
    --gn-ink: #0c0c0a;
    --gn-ink-muted: #6b6960;
    --gn-espresso: #1a1714;
    --gn-cream: #f5f1ea;
    --gn-gold: #D4A574;
    --gn-xiaomi: #ff6700;
    --gn-border: #0c0c0a;

    --font-display: 'Syne', sans-serif;
    --font-body: 'DM Sans', sans-serif;

    background: var(--gn-bg);
    color: var(--gn-ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    counter-reset: section-counter;
}

html:has(.guia-nueva),
body:has(.guia-nueva) {
    background-color: #f2f0eb !important;
}

/* Prohibición total de corte de palabras en títulos (diseño ThinkChip Lab) */
.guia-nueva h1,
.guia-nueva h2,
.guia-nueva h3,
.guia-nueva h4,
.guia-nueva h5,
.guia-nueva h6,
.guias-hero h1,
.guias-hero h2,
.guias-hero h3,
.guias-hero .hero-h1-row,
.page-intro h1,
.page-intro h2,
.c-section-h2,
.c-titulo-seccion,
.c-titulo-seccion--long {
    hyphens: none !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

/* ====================================================================
   0. HERO UNIVERSAL — Un selector, todas las páginas.
      Requiere solo: <header class="guias-hero"> en cualquier página.
   ==================================================================== */
.guias-hero {
    /* Fallback de variables por si se usa fuera de .guia-nueva */
    --gn-cream: #f5f1ea;
    --gn-gold: #D4A574;

    background: #0c0c0a;
    color: #f5f1ea;
    padding: 100px 40px 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    background-image:
        linear-gradient(rgba(12, 12, 10, 0.85), rgba(12, 12, 10, 0.85)),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.guias-hero .hero-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 60px;
    flex: 1;
    position: relative;
    z-index: 2;
}

.guias-hero .hero-content {
    max-width: 850px;
}

.guias-hero h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(40px, 6.5vw, 85px);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin: 20px 0 0;
    color: #f5f1ea;
}

.guias-hero .hero-h1-row {
    display: block;
}

.guias-hero p {
    max-width: 580px;
    margin-top: 48px;
    font-size: 1.2rem;
    line-height: 1.5;
    color: rgba(245, 241, 234, 0.8);
}

.guias-hero .hero-tag {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(245, 241, 234, 0.55);
    margin-bottom: 32px;
    display: inline-block;
    padding-left: 32px;
    position: relative;
}

.guias-hero .hero-tag::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 22px;
    height: 1px;
    background: rgba(245, 241, 234, 0.4);
}

.guias-hero .hero-edition {
    flex-shrink: 0;
    width: 280px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "label  label"
        "date   date"
        "avatar caption";
    align-items: center;
    column-gap: 20px;
    row-gap: 14px;
    padding: 20px 0;
    border-top: 1px solid rgba(245, 241, 234, 0.15);
    border-bottom: 1px solid rgba(245, 241, 234, 0.1);
    align-self: flex-end;
    margin-bottom: 40px;
}

.guias-hero .hero-edition-label {
    grid-area: label;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #D4A574;
}

.guias-hero .hero-edition-date {
    grid-area: date;
    font-family: 'Syne', sans-serif;
    font-style: italic;
    font-size: 1.7rem;
    font-weight: 700;
    color: #f5f1ea;
}

.guias-hero .hero-edition-avatar {
    grid-area: avatar;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(245, 241, 234, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #f5f1ea;
    position: relative;
}

.guias-hero .hero-edition-avatar::before {
    content: "";
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 7px;
    height: 7px;
    background: #D4A574;
    border-radius: 50%;
    border: 2px solid #0c0c0a;
}

.guias-hero .hero-edition-caption {
    grid-area: caption;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(245, 241, 234, 0.5);
    line-height: 1.3;
}

.guias-hero .hero-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(245, 241, 234, 0.6);
    font-family: 'DM Sans', sans-serif;
    position: relative;
    z-index: 2;
}

.guias-hero .scroll-indicator {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(245, 241, 234, 0.3);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #f5f1ea;
    text-decoration: none;
    transition: all 0.3s ease;
}

.guias-hero .scroll-indicator:hover {
    border-color: #f5f1ea;
    background: rgba(245, 241, 234, 0.1);
    transform: translateY(4px);
}

/* — Responsive hero — */
@media (max-width: 1100px) {
    .guias-hero {
        padding: 80px 30px 40px;
        min-height: auto;
    }

    .guias-hero .hero-main,
    .guia-nueva .hero-main {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 40px !important;
    }

    .guias-hero .hero-edition,
    .guia-nueva .hero-edition {
        width: 100% !important;
        margin-bottom: 20px !important;
        align-self: flex-start !important;
    }

    .guias-hero .hero-meta {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .guias-hero,
    .guia-nueva .guias-hero {
        padding: 60px 16px 40px !important;
        min-height: auto !important;
    }

    .guias-hero .hero-main,
    .guia-nueva .hero-main {
        gap: 24px !important;
    }

    .guias-hero h1 {
        font-size: clamp(20px, 6.2vw, 42px);
        letter-spacing: -0.04em;
        overflow-wrap: normal;
        word-break: keep-all;
        hyphens: none;
    }

    .guias-hero .hero-content {
        display: block;
    }

    .guias-hero .hero-content p {
        margin-top: 1.5rem !important;
        padding-top: 0 !important;
        font-size: 1.05rem;
    }

    .guias-hero .hero-edition,
    .guia-nueva .hero-edition {
        margin-bottom: 0 !important;
        margin-top: 1.5rem !important;
    }
}

.guia-nueva .guia-articulo {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 80px;
}

/* ====================================================================
   1. TÍTULOS (Jerarquía Editorial Coherente)
   ==================================================================== */
.guia-nueva .c-titulo-seccion {
    font-family: var(--font-display);
    font-size: clamp(44px, 8vw, 96px);
    /* El Rey del diseño */
    font-weight: 800;
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--gn-ink);
    margin: 5rem 0 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 8px solid var(--gn-ink);
    /* Thicker for more impact */
    position: relative;
}


.guia-nueva .c-titulo-seccion--long {
    text-transform: uppercase !important;
    font-size: clamp(34px, 5.5vw, 72px);
    letter-spacing: -0.02em;
    line-height: 1.0;
}

/* ====================================================================
   2. VEREDICTO RÁPIDO
   ==================================================================== */
.guia-nueva .c-editorial-verdict {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    border: 4px solid var(--gn-ink);
    margin: 4rem 0 2rem;
    background: var(--gn-surface);
    position: relative;
    box-shadow: 20px 20px 0px rgba(12, 12, 10, 0.03);
    transition: transform 0.3s ease;
}

.guia-nueva .c-editorial-verdict:hover {
    transform: translate(-5px, -5px);
    box-shadow: 25px 25px 0px rgba(255, 103, 0, 0.1);
}

.guia-nueva .c-editorial-verdict::before {
    content: "VEREDICTO";
    position: absolute;
    left: -4rem;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.3em;
    color: var(--gn-ink);
    opacity: 0.2;
}

.guia-nueva .verdict-column {
    padding: 3.5rem;
    display: flex;
    flex-direction: column;
}

.guia-nueva .verdict-column:first-child {
    background: var(--gn-surface);
    color: var(--gn-ink);
    border-right: 2px solid var(--gn-ink);
}

.guia-nueva .verdict-column.is-premium {
    background: var(--gn-espresso);
    color: var(--gn-cream) !important;
}

.guia-nueva .verdict-column.is-premium h3,
.guia-nueva .verdict-column.is-premium p {
    color: var(--gn-cream) !important;
}

.guia-nueva .verdict-badge {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gn-ink-muted);
    margin-bottom: 1.5rem;
}

.guia-nueva .verdict-column.is-premium .verdict-badge {
    color: var(--gn-xiaomi);
}

.guia-nueva .verdict-column h3 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
    /* Escala coherente */
    font-weight: 800;
    margin: 0 0 1.5rem 0;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.guia-nueva .verdict-column p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
}

/* Resumen bajo el veredicto */
.guia-nueva .c-verdict-summary {
    display: flex;
    gap: 2.5rem;
    margin-bottom: 4rem;
    flex-wrap: wrap;
}

.guia-nueva .summary-item {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gn-ink);
}

.guia-nueva .summary-item strong {
    font-weight: 800;
    margin-right: 0.3rem;
}

/* ====================================================================
   3. TIRA DE DIFERENCIAS
   ==================================================================== */
.guia-nueva .c-differences-strip {
    display: flex !important;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.5rem 0;
    margin-bottom: 4rem;
    border-top: 1px solid rgba(12, 12, 10, 0.15);
    border-bottom: 1px solid rgba(12, 12, 10, 0.15);
    flex-wrap: wrap;
}

.guia-nueva .diff-unit {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.guia-nueva .diff-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gn-gold);
    text-transform: uppercase;
}

.guia-nueva .diff-unit p {
    font-size: 1rem;
    margin: 0;
    font-weight: 500;
}

/* ====================================================================
   4. EDITORIAL SPLIT
   ==================================================================== */
.guia-nueva .editorial-split {
    display: grid !important;
    grid-template-columns: 350px 1fr !important;
    gap: 4rem;
    margin: 4rem 0;
    align-items: start;
}

.guia-nueva .editorial-split__header {
    position: sticky;
    top: 100px;
    /* Offset for sticky nav */
}

.guia-nueva .editorial-split__header h2 {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 1.5rem;
    border-bottom: 4px solid var(--gn-ink);
    padding-bottom: 1rem;
}

.guia-nueva .editorial-split__content {
    border-left: 1px solid var(--gn-gold);
    padding-left: 3rem;
}

.guia-nueva .u-lead-text {
    font-size: 1.3rem;
    line-height: 1.5;
    margin-bottom: 2.5rem;
    color: var(--gn-ink);
    font-weight: 500;
}

.guia-nueva .u-lead-text::first-letter {
    font-family: var(--font-display);
    font-size: 5.5rem;
    /* Aumentado para ocupar 3 líneas */
    font-weight: 800;
    float: left;
    line-height: 0.8;
    margin-top: 0.15em;
    margin-right: 0.85rem;
    color: var(--gn-gold);
    text-transform: uppercase;
}

/* ====================================================================
   5. TARJETAS BRUTALISTAS
   ==================================================================== */
.guia-nueva .c-brutalist-card-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem;
    margin-top: 2rem;
    counter-reset: bcard-counter;
}

.guia-nueva .c-brutalist-card {
    background: var(--gn-bg);
    border: 1px solid var(--gn-ink);
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    /* Para que la marca de agua no se salga */
    counter-increment: bcard-counter;
}

/* Enlaces de Acción (CTA) de las tarjetas */
.guia-nueva .c-brutalist-card a:not(.btn) {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.9rem;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--gn-ink);
    border-bottom: 2px solid var(--gn-gold);
    padding-bottom: 0.2rem;
    align-self: flex-start;
    position: relative;
    z-index: 2;
    transition: all 0.2s ease;
}

.guia-nueva .c-brutalist-card a:not(.btn):hover {
    color: var(--gn-gold);
    gap: 1rem;
}

.guia-nueva .c-brutalist-card.is-premium a:not(.btn) {
    color: var(--gn-cream);
}

.guia-nueva .c-brutalist-card.is-premium a:not(.btn):hover {
    color: var(--gn-gold);
}

/* Marca de Agua (01, 02) */
.guia-nueva .c-brutalist-card::after {
    content: "0" counter(bcard-counter);
    position: absolute;
    bottom: -1.5rem;
    right: 1rem;
    font-family: var(--font-display);
    font-size: 8rem;
    font-weight: 800;
    color: rgba(12, 12, 10, 0.04);
    line-height: 1;
    z-index: 0;
    pointer-events: none;
}

.guia-nueva .c-brutalist-card.is-premium {
    background: var(--gn-espresso);
    color: var(--gn-cream) !important;
}

.guia-nueva .c-brutalist-card.is-premium::after {
    color: rgba(245, 241, 234, 0.04);
}

.guia-nueva .c-brutalist-card__icon {
    font-size: 1.5rem;
    color: var(--gn-gold);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.guia-nueva .c-brutalist-card h3 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0 0 1.5rem 0;
    position: relative;
    z-index: 1;
    line-height: 1.1;
    display: flex;
    flex-direction: column;
}

/* Añadir "01 - " al inicio del título automáticamente */
.guia-nueva .c-brutalist-card h3::before {
    content: "0" counter(bcard-counter) " — ";
    color: var(--gn-gold);
    font-size: 0.8em;
    margin-bottom: 0.2rem;
}

.guia-nueva .c-brutalist-card p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 1;
}

.guia-nueva .c-brutalist-card.is-premium h3,
.guia-nueva .c-brutalist-card.is-premium p {
    color: var(--gn-cream) !important;
}

/* ────────────────────────────────────────────────────────────────────
   DUELO DUO (Solución a la "exceso de cuadros" - Solapado Editorial)
   ──────────────────────────────────────────────────────────────────── */
.guia-nueva .c-duelo-duo {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0;
    margin: 4rem 0;
    position: relative;
    padding-bottom: 2rem;
}

.guia-nueva .duo-panel {
    padding: 3rem 2.5rem;
    border: 1px solid var(--gn-ink);
    position: relative;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.guia-nueva .duo-panel--standard {
    background: var(--gn-surface);
    z-index: 1;
}

.guia-nueva .duo-panel--ultra {
    background: var(--gn-espresso);
    color: var(--gn-cream);
    z-index: 2;
    margin-left: -2rem;
    /* Solapado */
    margin-top: 2rem;
    box-shadow: 15px 15px 0 var(--gn-xiaomi);
}

.guia-nueva .duo-panel--ultra h3,
.guia-nueva .duo-panel--ultra p {
    color: var(--gn-cream) !important;
}

.guia-nueva .duo-panel h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 1rem 0;
    letter-spacing: -0.02em;
}

.guia-nueva .duo-panel p {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    opacity: 0.9;
}

.guia-nueva .duo-badge {
    position: absolute;
    top: -1rem;
    right: 2rem;
    background: var(--gn-gold);
    color: var(--gn-ink);
    padding: 0.2rem 0.8rem;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.guia-nueva .duo-panel--ultra .duo-badge {
    background: var(--gn-xiaomi);
    color: #fff;
}

/* Hover effect */
.guia-nueva .c-duelo-duo:hover .duo-panel--standard {
    transform: translateX(-10px);
}

.guia-nueva .c-duelo-duo:hover .duo-panel--ultra {
    transform: translate(10px, 10px);
}

@media (max-width: 768px) {
    .guia-nueva .c-duelo-duo {
        grid-template-columns: 1fr !important;
    }

    .guia-nueva .duo-panel--ultra {
        margin-left: 0;
        margin-top: -1rem;
    }
}

/* ────────────────────────────────────────────────────────────────────
   PRODUCT SHOWCASE
   ──────────────────────────────────────────────────────────────────── */
.guia-nueva .c-product-showcase {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4rem;
    align-items: center;
    margin: 4rem 0;
}

.guia-nueva .product-visual {
    padding: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.guia-nueva .product-ghost-text {
    position: absolute;
    font-family: var(--font-display);
    font-size: 18rem;
    font-weight: 800;
    color: rgba(12, 12, 10, 0.03);
    z-index: 0;
    line-height: 1;
    pointer-events: none;
    text-transform: uppercase;
}

.guia-nueva .product-img {
    position: relative;
    z-index: 2;
    max-width: 80%;
    filter: drop-shadow(20px 20px 40px rgba(0, 0, 0, 0.15));
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.guia-nueva .product-visual:hover .product-img {
    transform: scale(1.08) translateY(-15px) rotate(-2deg);
}

/* Glow Effects */
.guia-nueva .product-visual--xiaomi {
    background: radial-gradient(circle at center, rgba(255, 103, 0, 0.08) 0%, #f2f0eb 70%) !important;
}

.guia-nueva .product-visual--ultra {
    background: radial-gradient(circle at center, rgba(212, 165, 116, 0.1) 0%, #0c0c0a 70%) !important;
}

/* Technical Callouts */
.guia-nueva .tech-callout {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid var(--gn-ink);
    min-width: 140px;
}

.guia-nueva .tech-callout.is-dark {
    background: rgba(12, 12, 10, 0.8);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.guia-nueva .tech-label {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--gn-xiaomi);
    margin-bottom: 4px;
}

.guia-nueva .tech-desc {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.guia-nueva .tech-callout--top-right {
    top: 10%;
    right: 10%;
}

.guia-nueva .tech-callout--bottom-left {
    bottom: 10%;
    left: 10%;
}

/* ────────────────────────────────────────────────────────────────────
   MATRIZ DE PERFILES (Decisión de Compra)
   ──────────────────────────────────────────────────────────────────── */
.guia-nueva .c-profile-matrix {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem;
    margin: 2rem 0 3rem;
}

@media (max-width: 992px) {
    .guia-nueva .c-profile-matrix {
        grid-template-columns: 1fr !important;
    }
}



.guia-nueva .profile-card {
    background: var(--gn-surface);
    border: 1px solid var(--gn-ink);
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: auto;
}

.guia-nueva .profile-card.is-featured {
    background: var(--gn-espresso);
    color: var(--gn-cream) !important;
}

.guia-nueva .profile-card.is-featured h3,
.guia-nueva .profile-card.is-featured p,
.guia-nueva .profile-card.is-featured .profile-card__tag {
    color: var(--gn-cream) !important;
}

.guia-nueva .profile-card__number {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 800;
    color: rgba(12, 12, 10, 0.05);
    line-height: 1;
}

.guia-nueva .profile-card.is-featured .profile-card__number {
    color: rgba(245, 241, 234, 0.1);
}

.guia-nueva .profile-card__tag {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gn-gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 0.5rem;
}

.guia-nueva .profile-card h3 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 1rem 0;
    letter-spacing: -0.02em;
}

.guia-nueva .profile-card p {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 1.5rem 0;
    flex-grow: 1;
}

.guia-nueva .profile-card__choice {
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(12, 12, 10, 0.1);
}

.guia-nueva .profile-card.is-featured .profile-card__choice {
    border-top: 1px solid rgba(245, 241, 234, 0.1);
    color: var(--gn-gold);
}

/* ────────────────────────────────────────────────────────────────────
   EDITORIAL MANIFESTO (Sección Oscura)
   ──────────────────────────────────────────────────────────────────── */
.guia-nueva .c-editorial-manifesto--dark {
    background: var(--gn-ink);
    color: var(--gn-surface);
    padding: 6rem 4rem;
    margin: 6rem 0;
    position: relative;
    overflow: hidden;
}

.guia-nueva .c-editorial-manifesto--dark::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.05;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.guia-nueva .c-editorial-manifesto--dark h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    margin: 0 0 1.5rem 0;
    line-height: 1.1;
    color: #ffffff;
}

.guia-nueva .c-editorial-manifesto--dark .u-lead-text {
    font-size: 1.2rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 3rem;
}

.c-editorial-manifesto--dark p {
    color: #f5f1ea !important;
}

.c-editorial-manifesto--dark h4 {
    color: #D4A574 !important;
}

.guia-nueva .c-editorial-manifesto--dark p {
    color: #f5f1ea !important;
}

.guia-nueva .c-editorial-manifesto--dark h4 {
    color: #D4A574 !important;
}

/* ────────────────────────────────────────────────────────────────────
   BOTONES BRUTALISTAS
   ──────────────────────────────────────────────────────────────────── */
.guia-nueva .c-buy-grid {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.guia-nueva .c-brutalist-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem 2.5rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.05em;
    border: 2px solid #ffffff;
    background: var(--gn-ink);
    color: #ffffff;
    box-shadow: 4px 4px 0px rgba(255, 255, 255, 0.9);
    transition: all 0.2s ease;
}

.guia-nueva .c-brutalist-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px rgba(255, 255, 255, 0.9);
}

.guia-nueva .c-brutalist-btn--amazon {
    background: #ff6b00;
    /* Naranja Amazon */
    border-color: #ff6b00;
}

/* ────────────────────────────────────────────────────────────────────
   HERO TAGS
   ──────────────────────────────────────────────────────────────────── */
.guia-nueva .hero-tag {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--gn-ink);
    display: block;
    margin-bottom: 1rem;
}

/* ────────────────────────────────────────────────────────────────────
   PRODUCT INFO (Textos, Precios, Specs)
   ──────────────────────────────────────────────────────────────────── */
.guia-nueva .product-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.guia-nueva .product-model {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    /* Potente pero subyugado al H2 */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    margin: 0.5rem 0 0.5rem 0;
    line-height: 0.85;
}

.guia-nueva .product-price-tag {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gn-ink-muted);
    margin-bottom: 1.5rem;
}

.guia-nueva .product-copy .u-lead-text {
    font-family: var(--font-body);
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    color: var(--gn-ink);
}

/* ────────────────────────────────────────────────────────────────────
   SPECS MINIMAL (El bloque de características)
   ──────────────────────────────────────────────────────────────────── */
.guia-nueva .product-specs-minimal {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 2.5rem;
}

.guia-nueva .spec-box {
    font-size: 0.95rem;
    line-height: 1.5;
}

.guia-nueva .spec-label {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.5rem;
    color: var(--gn-ink);
}

.guia-nueva .spec-value {
    color: var(--gn-ink-muted);
    font-weight: 500;
}

/* ====================================================================
   7. TABLA COMPARATIVA — Diseño Editorial Cañero
   ==================================================================== */
.guia-nueva .c-comparison-table-wrapper {
    margin: 4rem 0;
    overflow-x: auto;
    position: relative;
    /* Sombra brutalista sólida */
    box-shadow: 8px 8px 0 var(--gn-ink);
    border: 3px solid var(--gn-ink);
    border-radius: 0;
    background: var(--gn-surface);
}

.guia-nueva .c-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    /* Sin min-width: que fluya al ancho del wrapper */
}

/* — CABECERA NEGRA CON TIPOGRAFÍA BRUTAL — */
.guia-nueva .c-comparison-table thead tr {
    background: var(--gn-ink);
}

.guia-nueva .c-comparison-table thead th {
    color: var(--gn-cream);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 1.5rem 1.4rem;
    text-align: left;
    border-right: 1px solid rgba(245, 241, 234, 0.1);
}

.guia-nueva .c-comparison-table thead th:first-child {
    color: rgba(245, 241, 234, 0.4);
    font-size: 0.65rem;
}

/* Columna Ultra: acento naranja en el header */
.guia-nueva .c-comparison-table thead th:last-child {
    color: var(--gn-xiaomi);
    border-right: none;
}

/* — FILAS: Stripes alternadas — */
.guia-nueva .c-comparison-table tbody tr:nth-child(even) {
    background: rgba(12, 12, 10, 0.03);
}

.guia-nueva .c-comparison-table tbody tr:nth-child(odd) {
    background: var(--gn-surface);
}

/* — CELDAS — */
.guia-nueva .c-comparison-table td {
    padding: 1.3rem 1.4rem;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    vertical-align: middle;
    border-bottom: 1px solid rgba(12, 12, 10, 0.1);
    border-right: 1px solid rgba(12, 12, 10, 0.08);
}

/* Característica (col 1): label track uppercase */
.guia-nueva .c-comparison-table td:first-child {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gn-ink-muted);
    border-left: 3px solid var(--gn-gold);
    width: 28%;
    padding-left: 1.2rem;
}

/* Columna Ultra (col 3): más negrita + fondo cálido */
.guia-nueva .c-comparison-table td:last-child {
    font-weight: 700;
    color: var(--gn-ink);
    border-right: none;
    border-left: 1px solid rgba(255, 103, 0, 0.15);
    background: rgba(255, 103, 0, 0.03) !important;
}

.guia-nueva .c-comparison-table tr:last-child td {
    border-bottom: none;
}

/* Hover: fila completa se ilumina */
.guia-nueva .c-comparison-table tbody tr {
    transition: background 0.15s ease;
}

.guia-nueva .c-comparison-table tbody tr:hover td {
    background: rgba(212, 165, 116, 0.12) !important;
}

.guia-nueva .c-comparison-table tbody tr:hover td:first-child {
    border-left-color: var(--gn-xiaomi);
    color: var(--gn-ink);
}

/* — MOBILE: tabla a ancho completo, rompe el padding del artículo — */
@media (max-width: 640px) {
    .guia-nueva .c-comparison-table-wrapper {
        box-shadow: 3px 3px 0 var(--gn-ink);
        border-width: 2px;
        /* Rompe el padding del .guia-articulo y ocupa todo el ancho */
        margin-left: -20px;
        margin-right: -20px;
        width: calc(100% + 40px);
        overflow-x: auto;
    }

    .guia-nueva .c-comparison-table thead th {
        padding: 0.9rem 0.8rem;
        font-size: 0.65rem;
        letter-spacing: 0.08em;
    }

    .guia-nueva .c-comparison-table td {
        padding: 0.9rem 0.8rem;
        font-size: 0.82rem;
    }

    .guia-nueva .c-comparison-table td:first-child {
        font-size: 0.58rem;
        width: 32%;
        padding-left: 0.8rem;
        letter-spacing: 0.04em;
    }
}

/* ====================================================================
   6b. LINEUP DE PRODUCTOS (c-iphone-lineup) — Editorial horizontal
       Úsalo para cualquier guía de "elige tu modelo"
   ==================================================================== */
.guia-nueva .c-iphone-lineup {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 3rem 0 5rem;
    border: 3px solid var(--gn-ink);
}

.guia-nueva .c-iphone-item {
    display: grid;
    grid-template-columns: 200px 1fr;
    border-bottom: 2px solid var(--gn-ink);
    background: var(--gn-surface);
    transition: background 0.2s ease;
}

.guia-nueva .c-iphone-item:last-child {
    border-bottom: none;
}

.guia-nueva .c-iphone-item:hover {
    background: rgba(12, 12, 10, 0.02);
}

/* Modelo destacado: fondo oscuro */
.guia-nueva .c-iphone-item--featured {
    background: var(--gn-espresso);
}

.guia-nueva .c-iphone-item--featured:hover {
    background: #222;
}

.guia-nueva .c-iphone-item__img {
    border-right: 2px solid var(--gn-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: rgba(12, 12, 10, 0.03);
}

.guia-nueva .c-iphone-item--featured .c-iphone-item__img {
    background: rgba(255, 255, 255, 0.04);
    border-right-color: rgba(255, 255, 255, 0.1);
}

.guia-nueva .c-iphone-item__img img {
    width: 100%;
    max-height: 160px;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.12));
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.guia-nueva .c-iphone-item:hover .c-iphone-item__img img {
    transform: scale(1.06) translateY(-4px);
}

.guia-nueva .c-iphone-item__info {
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
}

.guia-nueva .c-iphone-item__label {
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gn-gold);
}

.guia-nueva .c-iphone-item--featured .c-iphone-item__label {
    color: #ff6b00;
}

.guia-nueva .c-iphone-item__name {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1;
    color: var(--gn-ink);
}

.guia-nueva .c-iphone-item--featured .c-iphone-item__name,
.guia-nueva .c-iphone-item--featured .c-iphone-item__info p {
    color: var(--gn-cream) !important;
}

.guia-nueva .c-iphone-item__info p {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--gn-ink-muted);
    margin: 0;
}

.guia-nueva .c-iphone-item__info .btn {
    align-self: flex-start;
    margin-top: 0.5rem;
}

/* — Mobile: stacked — */
@media (max-width: 640px) {
    .guia-nueva .c-iphone-item {
        grid-template-columns: 1fr;
    }

    .guia-nueva .c-iphone-item__img {
        border-right: none;
        border-bottom: 2px solid var(--gn-ink);
        padding: 1.5rem;
        max-height: 160px;
    }

    .guia-nueva .c-iphone-item__info {
        padding: 1.5rem;
    }
}

/* ────────────────────────────────────────────────────────────────────
   LINK CLUSTER (Los 3 botones del final)
   ──────────────────────────────────────────────────────────────────── */
.guia-nueva .c-link-cluster {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.guia-nueva .cluster-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    color: var(--gn-ink);
    background: var(--gn-surface);
    border: 1px solid var(--gn-ink);
    box-shadow: 4px 4px 0px rgba(12, 12, 10, 0.05);
    transition: all 0.2s ease;
}

.guia-nueva .cluster-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px rgba(12, 12, 10, 0.05);
    background: var(--gn-bg);
}

.guia-nueva .cluster-btn i {
    color: var(--gn-xiaomi);
    font-size: 0.8rem;
}

/* ────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 992px) {

    /* Ajustes generales de contenedor */
    .guia-nueva .guia-articulo {
        padding: 0 10px 40px;
    }

    /* Títulos con más impacto en móvil */
    .guia-nueva .c-titulo-seccion {
        font-size: clamp(22px, 8vw, 38px);
        margin-top: 3rem;
        padding-bottom: 1rem;
        line-height: 1.1;
        overflow-wrap: normal;
        word-break: keep-all !important;
        hyphens: none !important;
    }

    .guia-nueva .c-differences-strip {
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
        width: calc(100% + 30px);
    }

    .guia-nueva .c-titulo-seccion--long {
        font-size: clamp(18px, 6vw, 24px);
        line-height: 1.05;
        word-break: keep-all !important;
        overflow-wrap: normal;
        hyphens: none !important;
    }

    /* Conversión de Grids a Columna Única */
    .guia-nueva .c-editorial-verdict {
        grid-template-columns: 1fr !important;
        gap: 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        border-width: 3px;
        box-shadow: 8px 8px 0px rgba(12, 12, 10, 0.05);
    }

    .guia-nueva .c-editorial-verdict::before {
        display: none;
    }

    .guia-nueva .c-product-showcase,
    .guia-nueva .editorial-split,
    .guia-nueva .c-brutalist-card-grid,
    .guia-nueva .c-profile-matrix,
    .guia-nueva .c-link-cluster {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    /* Veredicto Móvil: Más compacto */
    .guia-nueva .verdict-column {
        padding: 2rem 1.2rem;
    }

    .guia-nueva .verdict-column h3 {
        font-size: 28px;
        /* Jerarquía clara */
        line-height: 1;
    }

    /* Product Showcase Móvil */
    .guia-nueva .product-visual {
        padding: 2rem;
        margin-left: -15px;
        margin-right: -15px;
        width: calc(100% + 30px);
    }

    .guia-nueva .product-number {
        font-size: 8rem;
    }

    .guia-nueva .product-model {
        font-size: 40px;
        /* Potente pero menos que el H2 */
        line-height: 0.85;
    }

    /* Editorial Split Móvil */
    .guia-nueva .editorial-split {
        gap: 2rem;
    }

    .guia-nueva .editorial-split__header {
        position: static;
    }

    .guia-nueva .editorial-split__content {
        border-left: none;
        border-top: 2px solid var(--gn-gold);
        padding-left: 0;
        padding-top: 2rem;
    }

    /* Tarjetas Brutalistas Móvil */
    .guia-nueva .c-brutalist-card {
        padding: 2.5rem 1.2rem;
    }

    .guia-nueva .c-brutalist-card h3 {
        font-size: 28px;
    }

    .guia-nueva .c-brutalist-card::after {
        font-size: 5rem;
        bottom: -0.5rem;
    }

    /* Manifesto Dark Móvil: Full Width Breakout */
    .guia-nueva .c-editorial-manifesto--dark {
        padding: 2.5rem 15px;
        margin: 2.5rem -15px;
        width: calc(100% + 30px);
    }

    .guia-nueva .c-editorial-manifesto--dark h2 {
        font-size: 28px;
    }

    /* Botones Full Width en Móvil */
    .guia-nueva .btn--principal,
    .guia-nueva .c-brutalist-btn,
    .guia-nueva .cluster-btn {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        justify-content: center;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .guia-nueva .c-link-cluster {
        gap: 1rem;
    }
}

/* ====================================================================
   SECCIÓN SEO: NOVEDADES (c-novedades)
   ==================================================================== */
.guia-nueva .c-novedades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem 2rem;
    margin-bottom: 5rem;
}

.guia-nueva .c-novedades-card {
    display: flex;
    flex-direction: column;
    border-top: 4px solid var(--gn-ink);
    padding-top: 1.5rem;
}

.guia-nueva .c-novedades-card__title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    min-height: 4.5rem;
    display: flex;
    align-items: flex-start;
}

.guia-nueva .c-novedades-card__text {
    font-family: var(--font-sans);
    color: var(--gn-ink-muted);
    font-size: 1.15rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .guia-nueva .c-novedades-card__title {
        min-height: auto;
        font-size: 1.4rem;
        margin-bottom: 0.5rem;
    }
    .guia-nueva .c-novedades-grid {
        gap: 2.5rem;
    }
}

/* ====================================================================
   EDITORIAL FLOW SYSTEM — Componentes reutilizables para todas las guías.
   Usan var(--guia-acento) como color principal y
   var(--guia-acento-alt) como color secundario.
   Funcionan en cualquier página que defina esas variables.
   ==================================================================== */

/* — Fondo beige global para cualquier página con guias-hero — */
html:has(.guias-hero),
body:has(.guias-hero) {
    background-color: #f2f0eb !important;
}

/* ─── TOC ─── */
.c-toc {
    margin: 2.5rem 0 4rem;
    padding: 1.5rem 1.75rem;
    border: 2px solid var(--gn-ink, #0c0c0a);
    background: var(--gn-bg, #f2f0eb);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.06);
}

.c-toc__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gn-ink-muted, #6b6960);
    margin-bottom: 0.85rem;
}

.c-toc ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.4rem 1.5rem;
    counter-reset: toc;
}

.c-toc li {
    counter-increment: toc;
}

.c-toc li::before {
    content: counter(toc, decimal-leading-zero) "  ";
    font-weight: 800;
    color: var(--guia-acento, #D4A574);
    margin-right: 0.4rem;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}

.c-toc a {
    color: var(--gn-ink, #0c0c0a);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.c-toc a:hover {
    color: var(--guia-acento, #D4A574);
}

@media (max-width: 640px) {
    .c-toc ol {
        grid-template-columns: 1fr;
    }

    .c-toc {
        padding: 1.25rem;
    }
}

/* ─── Section wrapper ─── */
.c-section-edit {
    margin: 6rem 0;
    padding: 0;
}

/* ─── Eyebrow ─── */
.c-eyebrow {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-display, 'Syne', sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gn-ink-muted, #6b6960);
    margin: 0 0 1.25rem;
}

.c-eyebrow::before {
    content: "";
    width: 36px;
    height: 2px;
    background: var(--guia-acento, #D4A574);
}

.c-eyebrow__num {
    color: var(--guia-acento, #D4A574);
}

/* ─── Section H2 ─── */
.c-section-h2 {
    font-family: var(--font-display, 'Syne', sans-serif);
    font-size: clamp(34px, 5vw, 58px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0 0 1.75rem;
    color: var(--gn-ink, #0c0c0a);
    text-align: left;
}

.c-section-h2 em {
    color: var(--guia-acento, #D4A574);
    font-style: italic;
    font-weight: 800;
}

/* ─── Dek ─── */
.c-dek {
    font-size: 1.2rem;
    line-height: 1.55;
    font-weight: 500;
    color: var(--gn-ink, #0c0c0a);
    max-width: 760px;
    margin: 0 0 2.5rem;
    padding: 0;
    background: transparent;
    border: none;
}

.c-dek strong {
    background: linear-gradient(transparent 62%, color-mix(in srgb, var(--guia-acento, #D4A574) 22%, transparent) 62%);
    padding: 0 2px;
    font-weight: 700;
}

/* ─── Pull quote ─── */
.c-pull-quote {
    font-family: var(--font-display, 'Syne', sans-serif);
    font-size: clamp(22px, 2.6vw, 30px);
    font-style: italic;
    font-weight: 600;
    line-height: 1.3;
    color: var(--gn-ink, #0c0c0a);
    border-left: 4px solid var(--guia-acento, #D4A574);
    padding: 0.5rem 0 0.5rem 1.75rem;
    margin: 3rem 0 4rem;
    max-width: 720px;
}

.c-pull-quote em {
    color: var(--guia-acento, #D4A574);
    font-style: italic;
}

/* ─── Closer ─── */
.c-closer {
    font-family: var(--font-display, 'Syne', sans-serif);
    font-size: 1.1rem;
    font-weight: 500;
    font-style: italic;
    line-height: 1.55;
    color: var(--gn-ink, #0c0c0a);
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    padding-top: 1.5rem;
    margin: 3rem 0 0;
    max-width: 760px;
}

.c-closer::before {
    content: "Punto clave";
    font-style: normal;
    font-weight: 800;
    color: var(--guia-acento, #D4A574);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    display: block;
    margin-bottom: 0.6rem;
}

/* ─── Dark section ─── */
.c-section-edit--dark {
    background: var(--gn-ink, #0c0c0a);
    color: #fff;
    padding: 4rem 2.5rem;
    margin: 6rem -2.5rem;
    border-radius: 0;
}

.c-section-edit--dark .c-section-h2 {
    color: #fff;
}

.c-section-edit--dark .c-dek {
    color: rgba(255, 255, 255, 0.85);
}

.c-section-edit--dark .c-eyebrow {
    color: rgba(255, 255, 255, 0.55);
}

.c-section-edit--dark .c-closer {
    color: rgba(255, 255, 255, 0.85);
    border-top-color: rgba(255, 255, 255, 0.15);
}

/* ─── Stat list ─── */
.c-stat-list {
    display: grid;
    gap: 1.25rem;
    margin: 2.5rem 0;
    list-style: none;
    padding: 0;
}

.c-stat-list li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.25rem;
    align-items: baseline;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.c-stat-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.c-stat-list__label {
    font-family: var(--font-display, 'Syne', sans-serif);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--gn-ink-muted, #6b6960);
}

.c-stat-list__txt {
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--gn-ink, #0c0c0a);
}

/* Dark variant (inside c-section-edit--dark) */
.c-section-edit--dark .c-stat-list li {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.c-section-edit--dark .c-stat-list__label {
    color: rgba(255, 255, 255, 0.5);
}

.c-section-edit--dark .c-stat-list__txt {
    color: rgba(255, 255, 255, 0.85);
}

.c-stat-list__verdict {
    font-family: var(--font-display, 'Syne', sans-serif);
    font-style: italic;
    font-weight: 700;
    color: var(--guia-acento, #D4A574);
    font-size: 1.05rem;
    white-space: nowrap;
}

/* ─── Diptych ─── */
.c-diptych {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 100%;
    margin: 0 0 3rem;
    position: relative;
    border: 2px solid var(--gn-ink, #0c0c0a);
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.08);
}

.c-diptych__col {
    padding: 3rem 2.5rem;
    background: var(--gn-bg, #f2f0eb);
}

.c-diptych__col--si {
    border-right: 1px solid var(--gn-ink, #0c0c0a);
}

.c-diptych__verdict {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--gn-ink, #0c0c0a);
    color: #fff;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display, 'Syne', sans-serif);
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    z-index: 2;
    border: 3px solid var(--gn-bg, #f2f0eb);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.c-diptych__head {
    font-family: var(--font-display, 'Syne', sans-serif);
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid;
}

.c-diptych__col--si .c-diptych__head {
    color: var(--guia-acento, #D4A574);
    border-color: var(--guia-acento, #D4A574);
}

.c-diptych__col--no .c-diptych__head {
    color: var(--guia-acento-alt, #6b6960);
    border-color: var(--guia-acento-alt, #6b6960);
}

.c-diptych__row {
    margin-bottom: 2rem;
}

.c-diptych__row:last-child {
    margin-bottom: 0;
}

.c-diptych__row strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-family: var(--font-display, 'Syne', sans-serif);
    font-weight: 700;
}

.c-diptych__col--si .c-diptych__row strong {
    color: var(--guia-acento, #D4A574);
}

.c-diptych__col--no .c-diptych__row strong {
    color: var(--guia-acento-alt, #6b6960);
}

.c-diptych__row p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--gn-ink-muted, #6b6960);
    margin: 0;
}

/* ─── Alt accent variant (aplica a secciones con --gold, --purple, etc.) ─── */
.c-eyebrow--alt::before {
    background: var(--guia-acento-alt);
}

.c-eyebrow--alt .c-eyebrow__num {
    color: var(--guia-acento-alt);
}

.c-section-h2--alt em {
    color: var(--guia-acento-alt);
}

.c-pull-quote--alt {
    border-left-color: var(--guia-acento-alt);
}

.c-pull-quote--alt em {
    color: var(--guia-acento-alt);
}

.c-closer--alt::before {
    color: var(--guia-acento-alt);
}

/* ─── Editorial inline links ─── */
.c-section-edit a:not(.btn):not(.cluster-btn) {
    color: var(--gn-ink, #0c0c0a);
    text-decoration: none;
    font-weight: 700;
    background-image: linear-gradient(var(--guia-acento, #D4A574), var(--guia-acento, #D4A574));
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    padding-bottom: 1px;
    transition: color 0.25s ease, background-size 0.25s ease;
}

.c-section-edit a:not(.btn):not(.cluster-btn):hover {
    color: var(--guia-acento, #D4A574);
    background-size: 100% 100%;
    background-image: linear-gradient(color-mix(in srgb, var(--guia-acento, #D4A574) 12%, transparent), color-mix(in srgb, var(--guia-acento, #D4A574) 12%, transparent));
}

/* ─── Link cluster (sin scope .guia-nueva) ─── */
.c-link-cluster {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.c-link-cluster__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    font-family: var(--font-display, 'Syne', sans-serif);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    color: var(--gn-ink, #0c0c0a);
    background: var(--gn-surface, #f2f0eb);
    border: 1px solid var(--gn-ink, #0c0c0a);
    box-shadow: 4px 4px 0px rgba(12, 12, 10, 0.05);
    transition: all 0.2s ease;
}

.c-link-cluster__item:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px rgba(12, 12, 10, 0.05);
    background: var(--gn-bg, #f2f0eb);
}

.c-link-cluster__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    text-align: left;
}

.c-link-cluster__category {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--guia-acento, #D4A574);
    text-transform: uppercase;
}

.c-link-cluster__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gn-ink, #0c0c0a);
}

.c-link-cluster__arrow {
    color: var(--gn-ink, #0c0c0a);
    font-size: 0.9rem;
    margin-left: 1rem;
}

.c-link-cluster .cluster-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    font-family: var(--font-display, 'Syne', sans-serif);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    color: var(--gn-ink, #0c0c0a);
    background: var(--gn-bg, #f2f0eb);
    border: 1px solid var(--gn-ink, #0c0c0a);
    box-shadow: 4px 4px 0px rgba(12, 12, 10, 0.05);
    transition: all 0.2s ease;
}

.c-link-cluster .cluster-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px rgba(12, 12, 10, 0.05);
}

.c-link-cluster .cluster-btn i {
    color: var(--guia-acento, #D4A574);
    font-size: 0.8rem;
}

/* ─── Responsive editorial flow ─── */
@media (max-width: 768px) {
    .c-diptych {
        grid-template-columns: 1fr;
    }

    .c-diptych__col--si {
        border-right: none;
        border-bottom: 1px solid var(--gn-ink, #0c0c0a);
    }

    .c-section-edit--dark {
        padding: 3rem 1.5rem;
        margin: 4rem -15px;
    }

    .c-stat-list li {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .c-link-cluster {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .c-link-cluster .cluster-btn,
    .c-link-cluster__item {
        width: 100%;
    }
}

/* ====================================================================
   UNIFICACIÓN DE BOTONES FINALES EN GUÍAS (.c-botones-finales-comparador)
   ==================================================================== */
.guia-nueva .c-botones-finales-comparador .btn {
    background: var(--gn-ink, #0c0c0a) !important;
    color: #ffffff !important;
    border: 2px solid var(--gn-ink, #0c0c0a) !important;
    box-shadow: 4px 4px 0 rgba(12, 12, 10, 0.2) !important;
    font-family: var(--font-display, 'Syne', sans-serif);
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 0 !important;
    padding: 1rem 2rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

.guia-nueva .c-botones-finales-comparador .btn:hover {
    background: #1a1714 !important;
    color: #ffffff !important;
    border-color: #1a1714 !important;
    transform: translate(-3px, -3px) !important;
    box-shadow: 5px 5px 0 rgba(12, 12, 10, 0.25) !important;
}

@media (max-width: 768px) {
    .guia-nueva .c-botones-finales-comparador .btn {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}