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

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&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: 'Plus Jakarta Sans', 'Inter', sans-serif;
    --font-body: 'Inter', 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;
}

/* Cuando el GuideHero está presente, el main no necesita padding-top extra */
.guide-hero+main.container {
    padding-top: 0 !important;
}

.guide-hero+main {
    padding-top: 0 !important;
}

/* Prohibición total de corte de palabras en títulos (diseño ThinkChip Lab) */


.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;
}

/* Las definiciones de .guias-hero heredadas se han eliminado para evitar conflictos con el componente de Svelte <GuideHero> */

.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(2.5rem, 5vw, 4rem);
    /* El Rey del diseño */
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--gn-ink);
    margin: 5rem 0 3rem;
    padding-bottom: 0;
    border-bottom: none;
    /* 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: 3rem 2.5rem;
    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 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(212, 165, 116, 0.15);
    color: var(--gn-gold);
    border-radius: 10px;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;

}

.guia-nueva .c-brutalist-card h3 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.2vw, 2.2rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0 0 2rem 0;
    position: relative;
    z-index: 1;
    line-height: 1.25;
    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.6rem;
}

.guia-nueva .c-brutalist-card p {
    font-size: 1.15rem;
    line-height: 1.75;
    margin: 0 0 2rem 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;
}

/* ====================================================================
   6a. SPEAKER MATRIX — Cards de Producto (reutilizables)
   ==================================================================== */
.guia-nueva .c-speaker-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
    max-width: 100%;
}

.guia-nueva .c-speaker-card {
    background: var(--gn-surface);
    border: 1px solid rgba(12, 12, 10, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.guia-nueva .c-speaker-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(12, 12, 10, 0.1);
}

.guia-nueva .c-speaker-image-box {
    width: 100%;
    aspect-ratio: 5/3;
    background: #f5f5f7;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.guia-nueva .c-speaker-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 100%;
}

.guia-nueva .c-speaker-info {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.guia-nueva .c-speaker-tag {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--guia-acento, #1428A0);
    margin-bottom: 0.75rem;
}

.guia-nueva .c-speaker-info h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gn-ink);
    margin-bottom: 1rem;
    line-height: 1.3;
}

.guia-nueva .c-speaker-info p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--gn-ink-muted);
    margin-bottom: 1.5rem;
    flex: 1;
}

.guia-nueva .c-speaker-info .btn {
    margin-top: auto;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .guia-nueva .c-speaker-matrix {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin: 2rem 0;
    }

    .guia-nueva .c-speaker-card {
        border-radius: 8px;
    }

    .guia-nueva .c-speaker-image-box {
        aspect-ratio: 16/9;
    }

    .guia-nueva .c-speaker-info {
        padding: 1.5rem;
    }

    .guia-nueva .c-speaker-info h3 {
        font-size: 1.1rem;
    }
}

/* ====================================================================
   6b. FEATURES GRID — Diseño Premium para Características
   ==================================================================== */
.guia-nueva .c-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.guia-nueva .c-feature-card {
    background: var(--gn-surface);
    border: 1px solid rgba(12, 12, 10, 0.08);
    padding: 2.5rem;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.guia-nueva .c-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--guia-acento, #1428A0), var(--guia-acento-alt, #FFBA08));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.guia-nueva .c-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(12, 12, 10, 0.08);
    border-color: rgba(12, 12, 10, 0.15);
}

.guia-nueva .c-feature-card:hover::before {
    opacity: 1;
}

.guia-nueva .c-feature-card__icon-wrapper {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--guia-acento, #1428A0), var(--guia-acento-alt, #FFBA08));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: #fff;
    font-size: 1.5rem;
}

.guia-nueva .c-feature-card__content h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gn-ink);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.guia-nueva .c-feature-card__subtitle {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--guia-acento, #1428A0);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}

.guia-nueva .c-feature-card__text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--gn-ink-muted);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .guia-nueva .c-features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin: 2rem 0;
    }

    .guia-nueva .c-feature-card {
        padding: 2rem 1.5rem;
    }

    .guia-nueva .c-feature-card__icon-wrapper {
        width: 56px;
        height: 56px;
        font-size: 1.25rem;
    }

    .guia-nueva .c-feature-card__content h3 {
        font-size: 1.25rem;
    }
}

/* ====================================================================
   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;
}

/* Última columna: sin acento forzado, consistente con el resto */
.guia-nueva .c-comparison-table thead th:last-child {
    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;
}

/* Última columna: más peso pero sin tinte de marca forzado */
.guia-nueva .c-comparison-table td:last-child {
    font-weight: 700;
    color: var(--gn-ink);
    border-right: none;
}

.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(--guia-acento, var(--gn-gold));
    color: var(--gn-ink);
}

/* Destacado de celdas (usado en comparativas de hardware) */
.guia-nueva .c-comparison-table .is-highlight {
    font-weight: 800;
    color: var(--guia-acento, var(--gn-gold));
}

/* — 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: 0;
        margin-right: -20px;
        width: calc(100% + 20px);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .guia-nueva .c-comparison-table {
        min-width: 580px;
        /* Previene compresión de columnas y permite scroll horizontal */
    }

    .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: 28%;
        /* Mantener proporción sobre el min-width */
        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 {
    max-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;
        overflow: hidden;
    }

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

    .guia-nueva .c-iphone-item__img img {
        max-width: 100%;
        max-height: 100%;
    }

    .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: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }

    .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: 0;
        margin-right: 0;
        width: 100%;
    }

    .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: clamp(20px, 6.5vw, 26px);
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    .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 0;
        width: 100%;
    }

    .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;
        white-space: normal !important;
        /* Permitir salto de línea en móvil */
        text-align: center;
    }

    .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;
    }
}

/* ====================================================================
   THINKCHIP GUIDE REFRESH 2026
   Capa visual para guias migradas: producto, luz, tarjetas suaves.
   ==================================================================== */
.guia-nueva {
    --gn-bg: #f2f0eb;
    --gn-surface: #ffffff;
    --gn-ink: #0c0c0a;
    --gn-ink-muted: #6b6960;
    --gn-soft-border: rgba(12, 12, 10, 0.06);
    --gn-soft-shadow: 0 16px 46px rgba(17, 24, 39, 0.07), 0 2px 8px rgba(17, 24, 39, 0.03);
    --gn-soft-shadow-hover: 0 24px 64px rgba(17, 24, 39, 0.1), 0 4px 14px rgba(17, 24, 39, 0.04);
    background: var(--gn-bg);
}

.guia-nueva h1,
.guia-nueva h2,
.guia-nueva h3,
.guia-nueva h4,
.guia-nueva .hero-h1-row,
.guia-nueva .c-section-h2,
.guia-nueva .c-titulo-seccion {
    letter-spacing: 0 !important;
}

.guia-nueva .guias-hero {
    max-width: 1200px;
    min-height: auto !important;
    margin: 0 auto 4rem;
    padding: clamp(2.5rem, 6vw, 5rem) !important;
    background: #ffffff !important;
    color: var(--gn-ink) !important;
    border: 1px solid var(--gn-soft-border);
    border-radius: 24px;
    box-shadow: var(--gn-soft-shadow);
    overflow: hidden;
}

.guia-nueva .guias-hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--guia-acento, var(--color-acento, #059669)), transparent 88%);
    opacity: 0.7;
}

.guia-nueva .guias-hero h1,
.guia-nueva .guias-hero .hero-h1-row {
    color: var(--gn-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
    text-transform: none !important;
}

.guia-nueva .guias-hero p,
.guia-nueva .guias-hero .hero-edition-caption,
.guia-nueva .guias-hero .hero-meta {
    color: var(--gn-ink-muted) !important;
}

.guia-nueva .guias-hero .hero-tag,
.guia-nueva .guias-hero .hero-edition-date {
    color: var(--guia-acento, var(--color-acento, #059669)) !important;
}

.guia-nueva .guias-hero .hero-edition {
    padding: 1.25rem;
    background: #f7f7f5;
    border: 1px solid var(--gn-soft-border);
    border-radius: 18px;
}

.guia-nueva .guias-hero .hero-edition-avatar {
    background: #ffffff !important;
    color: var(--gn-ink) !important;
    box-shadow: inset 0 0 0 1px var(--gn-soft-border);
}

.guia-nueva .guias-hero .scroll-indicator {
    border-color: var(--gn-soft-border) !important;
    color: var(--gn-ink) !important;
    background: #ffffff;
}

.guia-nueva .c-titulo-seccion,
.guia-nueva .c-section-edit {
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.guia-nueva .c-titulo-seccion {
    font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
    text-transform: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
}

.guia-nueva .c-eyebrow {
    color: var(--guia-acento, var(--color-acento, #059669)) !important;
}

.guia-nueva .c-brutalist-card-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 1.4rem !important;
    counter-reset: none !important;
}

.guia-nueva .c-brutalist-card {
    background: #ffffff !important;
    color: var(--gn-ink) !important;
    border: 1px solid var(--gn-soft-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--gn-soft-shadow) !important;
    padding: clamp(1.35rem, 3vw, 2rem) !important;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

.guia-nueva .c-brutalist-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--gn-soft-shadow-hover) !important;
}

.guia-nueva .c-brutalist-card::after,
.guia-nueva .c-brutalist-card h3::before {
    content: none !important;
}

.guia-nueva .c-brutalist-card__header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.guia-nueva .c-brutalist-card__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 14px;
    background: color-mix(in srgb, var(--guia-acento, #059669) 11%, #fff);
    color: var(--guia-acento, #059669) !important;
    margin: 0 !important;
}

.guia-nueva .c-brutalist-card h3 {
    color: var(--gn-ink) !important;
    text-transform: none !important;
    font-size: clamp(1.15rem, 2vw, 1.45rem) !important;
    line-height: 1.18 !important;
    margin: 0 0 0.85rem 0 !important;
}

.guia-nueva .c-brutalist-card p,
.guia-nueva .c-brutalist-card li {
    color: #2c2a24 !important;
    font-size: 1rem !important;
    line-height: 1.72 !important;
}

.guia-nueva .c-brutalist-card strong {
    color: var(--guia-acento, var(--color-acento, #059669)) !important;
    font-weight: 700 !important;
}

.guia-nueva .c-iphone-lineup {
    gap: 1rem !important;
    margin: 3rem 0 5rem !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.guia-nueva .c-iphone-lineup--grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: start;
}

.guia-nueva .c-iphone-item {
    grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr) !important;
    background: #ffffff !important;
    border: 1px solid var(--gn-soft-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--gn-soft-shadow);
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, background 0.3s ease !important;
}

.guia-nueva .c-iphone-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--gn-soft-shadow-hover);
}

.guia-nueva .c-iphone-item--featured {
    background: #11120f !important;
}

.guia-nueva .c-iphone-item__img {
    border-right: 0 !important;
    background: linear-gradient(145deg, color-mix(in srgb, var(--guia-acento, #059669) 10%, #fff), #f7f7f5) !important;
    min-height: 210px;
}

.guia-nueva .c-iphone-item--featured .c-iphone-item__img {
    background: rgba(255, 255, 255, 0.05) !important;
}

.guia-nueva .c-iphone-item__img img {
    max-height: 190px !important;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.16)) !important;
}

.guia-nueva .c-iphone-item__name {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.guia-nueva .c-iphone-item__label {
    color: var(--guia-acento, var(--color-acento, #059669)) !important;
}

.guia-nueva .c-comparison-table-wrapper,
.guia-nueva .c-faq__item,
.guia-nueva .c-faq-brutalist,
.guia-nueva .c-novedades-card {
    background: #ffffff !important;
    border: 1px solid var(--gn-soft-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--gn-soft-shadow) !important;
}

.guia-nueva .c-faq__item,
.guia-nueva .c-faq-brutalist {
    overflow: hidden;
}

.guia-nueva .c-faq__question,
.guia-nueva .c-faq-brutalist summary {
    padding: 1.25rem 1.4rem !important;
    color: var(--gn-ink) !important;
    font-weight: 800 !important;
}

.guia-nueva .c-faq__answer,
.guia-nueva .c-faq-brutalist p {
    color: var(--gn-ink-muted) !important;
}

.guia-nueva .c-editorial-manifesto--dark {
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 26px 70px rgba(17, 24, 39, 0.14);
}

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

.guia-nueva .c-link-cluster .cluster-btn,
.c-link-cluster .cluster-btn,
.c-link-cluster__item {
    background: #ffffff !important;
    color: var(--gn-ink, #0c0c0a) !important;
    border: 1px solid var(--gn-soft-border, rgba(12, 12, 10, 0.06)) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 26px rgba(17, 24, 39, 0.05) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: transform 0.24s ease, box-shadow 0.24s ease !important;
}

.guia-nueva .c-link-cluster .cluster-btn:hover,
.c-link-cluster .cluster-btn:hover,
.c-link-cluster__item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 18px 38px rgba(17, 24, 39, 0.08) !important;
}

.guia-nueva .btn--principal,
.guia-nueva .c-brutalist-btn,
.guia-nueva .c-botones-finales-comparador .btn {
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 22px rgba(17, 24, 39, 0.08) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.guia-nueva .btn--principal:hover,
.guia-nueva .c-brutalist-btn:hover,
.guia-nueva .c-botones-finales-comparador .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 30px rgba(17, 24, 39, 0.12) !important;
}

@media (max-width: 768px) {
    .guia-nueva .guias-hero {
        min-height: auto !important;
        margin: 0 0 3rem;
        border-radius: 18px;
        padding: 2rem 1.35rem !important;
    }

    .guia-nueva .c-iphone-item {
        grid-template-columns: 1fr !important;
    }

    .guia-nueva .c-iphone-item__img {
        min-height: 180px;
        border-bottom: 1px solid var(--gn-soft-border) !important;
    }

    .guia-nueva .c-brutalist-card-grid,
    .guia-nueva .c-link-cluster,
    .c-link-cluster {
        grid-template-columns: 1fr !important;
    }
}

/* ====================================================================
   Ajustes finos: guia iPhone
   ==================================================================== */
.guia-nueva .c-novedades-grid {
    gap: 2rem !important;
    margin-top: 3rem !important;
}

.guia-nueva .c-novedades-card {
    padding: clamp(2rem, 3.5vw, 2.5rem) !important;
    border-top: 0 !important;
    border-radius: 20px !important;
}

.guia-nueva .c-novedades-card__title {
    font-family: var(--font-display) !important;
    font-size: clamp(1.4rem, 2.5vw, 1.8rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    margin: 0 0 1.25rem !important;
    color: var(--gn-ink, #0c0c0a) !important;
    min-height: 0 !important;
}

.guia-nueva .c-novedades-card__text {
    font-family: var(--font-body) !important;
    font-size: clamp(1.05rem, 1.5vw, 1.15rem) !important;
    line-height: 1.75 !important;
    color: var(--gn-ink-muted, #6b6960) !important;
}

.guia-nueva .c-editorial-manifesto {
    background: #ffffff !important;
    border: 1px solid var(--gn-soft-border) !important;
    border-radius: 24px !important;
    padding: clamp(1.75rem, 4vw, 3rem) !important;
    margin: 4rem 0 !important;
    box-shadow: var(--gn-soft-shadow) !important;
    position: relative;
    border-left: 6px solid var(--guia-acento, var(--color-acento, #007aff)) !important;
}

.guia-nueva .c-editorial-manifesto h2,
.guia-nueva .c-editorial-manifesto h3 {
    color: var(--gn-ink, #0c0c0a) !important;
    font-family: var(--font-display) !important;
    font-size: clamp(1.4rem, 3vw, 2.1rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0 0 1.25rem 0 !important;
    text-transform: none !important;
    border: none !important;
}

.guia-nueva .c-editorial-manifesto p {
    color: var(--gn-ink-muted, #6b6960) !important;
    font-family: var(--font-body) !important;
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
    margin: 0 !important;
}

.guia-nueva .c-editorial-manifesto ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 1.25rem 0 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
}

.guia-nueva .c-editorial-manifesto li {
    color: var(--gn-ink-muted, #57534e) !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    padding-left: 1.5rem !important;
    position: relative !important;
}

.guia-nueva .c-editorial-manifesto li::before {
    content: "→" !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--guia-acento, var(--color-acento, #007aff)) !important;
    font-weight: 700 !important;
}

.guia-nueva .c-editorial-manifesto strong {
    color: var(--gn-ink, #0c0c0a) !important;
    font-weight: 700 !important;
}

.guia-nueva .c-editorial-manifesto--dark {
    background: #10110f !important;
    border-radius: 24px !important;
    padding: clamp(2rem, 5vw, 4rem) !important;
    color: #f7f5ef !important;
    margin: 4rem 0 !important;
    position: relative;
    border: none !important;
}

.guia-nueva .c-editorial-manifesto--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--guia-acento, var(--color-acento, #007aff)) 30%, transparent), transparent 36%);
    opacity: 0.65;
    pointer-events: none;
}

.guia-nueva .c-editorial-manifesto--dark h2,
.guia-nueva .c-editorial-manifesto--dark h3 {
    color: #ffffff !important;
    font-family: var(--font-display) !important;
    font-size: clamp(1.6rem, 4vw, 2.6rem) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin: 0 0 1.5rem 0 !important;
    border: none !important;
    position: relative;
    z-index: 1;
}

.guia-nueva .c-editorial-manifesto--dark p {
    color: rgba(247, 245, 239, 0.8) !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
    position: relative;
    z-index: 1;
}

.guia-nueva .c-editorial-manifesto--dark ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 1.5rem 0 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    position: relative;
    z-index: 1;
}

.guia-nueva .c-editorial-manifesto--dark li {
    color: rgba(247, 245, 239, 0.85) !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    padding-left: 1.5rem !important;
    position: relative !important;
    z-index: 1;
}

.guia-nueva .c-editorial-manifesto--dark li::before {
    content: "→" !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--guia-acento, var(--color-acento, #007aff)) !important;
    font-weight: 700 !important;
}

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

.guia-nueva .c-editorial-manifesto--dark .btn,
.guia-nueva .c-editorial-manifesto--dark a {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
}

/* ====================================================================
   FAQ unificado: mismo patron que comparativas/ecosistemas (.comp-faq)
   ==================================================================== */
.guia-nueva .c-faq,
.guia-nueva .c-faq-section {
    max-width: 780px !important;
    margin: 5rem auto 4rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.guia-nueva .c-faq__title,
.guia-nueva .c-faq-section .c-titulo-seccion {
    font-family: var(--font-display, 'Space Grotesk', sans-serif) !important;
    font-size: clamp(1.6rem, 4vw, 2.4rem) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: none !important;
    margin: 0 0 2rem !important;
    padding: 0 !important;
    color: var(--gn-ink, #0a0a0a) !important;
}

.guia-nueva .comp-faq,
.guia-nueva .c-faq-list,
.guia-nueva .c-faq-brutalist-wrapper {
    max-width: 780px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.guia-nueva .comp-faq__item,
.guia-nueva .c-faq__item,
.guia-nueva .c-faq-brutalist {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #e8e8ed !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.guia-nueva .comp-faq__item:first-child,
.guia-nueva .c-faq__item:first-child,
.guia-nueva .c-faq-brutalist:first-child {
    border-top: 1px solid #e8e8ed !important;
}

.guia-nueva .comp-faq__item summary,
.guia-nueva .c-faq__question,
.guia-nueva .c-faq-brutalist summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    width: 100% !important;
    padding: 1.5rem 0 !important;
    cursor: pointer !important;
    list-style: none !important;
    background: transparent !important;
    color: #0a0a0a !important;
    font-family: var(--font-display, 'Space Grotesk', sans-serif) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    transition: color 0.2s ease !important;
}

.guia-nueva .comp-faq__item summary::-webkit-details-marker,
.guia-nueva .c-faq__question::-webkit-details-marker,
.guia-nueva .c-faq-brutalist summary::-webkit-details-marker {
    display: none !important;
}

.guia-nueva .comp-faq__item summary::after,
.guia-nueva .c-faq__question::after,
.guia-nueva .c-faq-brutalist summary::after {
    content: '' !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    background-image:
        linear-gradient(#a1a1a6 0 0),
        linear-gradient(#a1a1a6 0 0) !important;
    background-position: center !important;
    background-size: 100% 2px, 2px 100% !important;
    background-repeat: no-repeat !important;
    transition: transform 0.3s ease !important;
}

.guia-nueva .comp-faq__item[open] summary::after,
.guia-nueva .c-faq__item[open] .c-faq__question::after,
.guia-nueva .c-faq-brutalist[open] summary::after {
    transform: rotate(135deg) !important;
}

.guia-nueva .comp-faq__item summary:hover,
.guia-nueva .c-faq__question:hover,
.guia-nueva .c-faq-brutalist summary:hover {
    color: var(--guia-acento, #0071e3) !important;
}

.guia-nueva .comp-faq__item>div,
.guia-nueva .c-faq__answer,
.guia-nueva .c-faq-brutalist>p,
.guia-nueva .c-faq-brutalist>div {
    padding: 0 0 1.5rem !important;
    background: transparent !important;
    color: #6b6b6b !important;
    font-family: var(--font-body, 'Space Mono', monospace) !important;
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.guia-nueva .comp-faq__item>div p,
.guia-nueva .c-faq__answer p,
.guia-nueva .c-faq-brutalist>p {
    margin: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* ====================================================================
   Hero editorial unificado: sello + fecha, sin foto ni bloque oscuro
   ==================================================================== */
.guias-hero {
    --gn-hero-accent: var(--guia-acento, var(--color-acento, #0071e3));
    width: min(1200px, calc(100% - 32px)) !important;
    min-height: auto !important;
    margin: 0 auto 4rem !important;
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 6vw, 5rem) !important;
    padding-right: clamp(1.5rem, 22vw, 17rem) !important;
    background: #ffffff !important;
    color: var(--gn-ink, #0c0c0a) !important;
    border: 1px solid var(--gn-soft-border, rgba(0, 0, 0, 0.06)) !important;
    border-radius: 24px !important;
    box-shadow: var(--gn-soft-shadow, 0 20px 60px rgba(17, 24, 39, 0.07), 0 2px 8px rgba(17, 24, 39, 0.04)) !important;
    position: relative !important;
    overflow: visible !important;
}

.guias-hero::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 2rem !important;
    bottom: 2rem !important;
    width: 4px !important;
    border-radius: 999px !important;
    background: var(--gn-hero-accent) !important;
    opacity: 1 !important;
}

.guias-hero .hero-main {
    display: block !important;
    width: 100% !important;
    max-width: 720px !important;
    padding: 0 !important;
}

.guias-hero .hero-content {
    display: block !important;
    max-width: 720px !important;
    text-align: left !important;
}

.guias-hero .hero-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin: 0 0 1.25rem !important;
    padding: 0 !important;
    color: var(--gn-hero-accent) !important;
    font-family: var(--font-body, 'Space Mono', monospace) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.guias-hero .hero-tag::before {
    content: "" !important;
    position: static !important;
    display: inline-block !important;
    width: 26px !important;
    height: 1px !important;
    background: currentColor !important;
    opacity: 0.5 !important;
}

.guias-hero h1,
.guias-hero .hero-h1-row {
    margin: 0 !important;
    color: var(--gn-ink, #0c0c0a) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    font-family: var(--font-display, 'Space Grotesk', sans-serif) !important;
    font-size: clamp(2.35rem, 6.4vw, 5rem) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-wrap: balance !important;
}

.guias-hero p {
    max-width: 640px !important;
    margin: 1.5rem 0 0 !important;
    color: var(--gn-ink-muted, #6b6960) !important;
    font-family: var(--font-body, 'Space Mono', monospace) !important;
    font-size: clamp(1rem, 1.6vw, 1.12rem) !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
}

.guias-hero .hero-edition {
    position: absolute !important;
    right: clamp(2rem, 6vw, 4rem) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 128px !important;
    height: 128px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    background: #ffffff !important;
    border: 2px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 50% !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05) !important;
    color: var(--gn-ink, #0c0c0a) !important;
}

.guias-hero .hero-edition::after {
    content: "" !important;
    position: absolute !important;
    inset: 6px !important;
    border: 1px solid var(--gn-hero-accent) !important;
    border-radius: 50% !important;
    opacity: 0.35 !important;
}

.guias-hero .hero-edition-avatar,
.guias-hero .hero-edition-caption {
    display: none !important;
}

.guias-hero .hero-edition-date,
.guias-hero .hero-edition-label {
    position: relative !important;
    z-index: 1 !important;
    max-width: 92px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

.guias-hero .hero-edition-date {
    order: 1 !important;
    color: var(--gn-hero-accent) !important;
    font-family: var(--font-display, 'Space Grotesk', sans-serif) !important;
    font-size: 0.95rem !important;
    font-style: normal !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
}

.guias-hero .hero-edition-label {
    order: 2 !important;
    color: #8a8780 !important;
    font-family: var(--font-body, 'Space Mono', monospace) !important;
    font-size: 0.48rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.14em !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
}

.guias-hero .hero-meta {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 1rem !important;
    margin: 2rem 0 0 !important;
    color: var(--gn-ink-muted, #6b6960) !important;
    font-family: var(--font-body, 'Space Mono', monospace) !important;
    font-size: 0.78rem !important;
    line-height: 1.5 !important;
}

.guias-hero .scroll-indicator {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid var(--gn-soft-border, rgba(0, 0, 0, 0.08)) !important;
    background: #ffffff !important;
    color: var(--gn-ink, #0c0c0a) !important;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.06) !important;
}

@media (max-width: 860px) {
    .guias-hero {
        width: min(100% - 24px, 1200px) !important;
        margin-bottom: 3rem !important;
        padding: 2rem 1.5rem !important;
        border-radius: 18px !important;
    }

    .guias-hero .hero-main,
    .guias-hero .hero-content {
        max-width: none !important;
    }

    .guias-hero .hero-edition {
        display: none !important;
    }

    .guias-hero h1,
    .guias-hero .hero-h1-row {
        font-size: clamp(2.1rem, 10vw, 3.7rem) !important;
    }
}

/* ====================================================================
   Compatibilidad heroes antiguos: mismo patron real que .comp-hero
   ==================================================================== */
.guias-hero {
    width: min(1200px, calc(100% - 32px)) !important;
    max-width: 1200px !important;
    min-height: auto !important;
    margin: 0 auto 4rem !important;
    padding: 4rem 5rem 3rem !important;
    background: #ffffff !important;
    color: #0c0c0a !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    border-radius: var(--radius-xl, 24px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}

.guias-hero::before {
    content: none !important;
}

.guias-hero .hero-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 1.5rem !important;
    width: 100% !important;
    max-width: none !important;
    padding: 1rem 2rem 0 !important;
    position: relative !important;
}

.guias-hero .hero-main::before {
    content: "" !important;
    position: absolute !important;
    left: -5rem !important;
    top: 2.5rem !important;
    bottom: 2.5rem !important;
    width: 4px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #0071e3, #8b5cf6) !important;
}

.guias-hero .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    max-width: 760px !important;
    text-align: left !important;
}

.guias-hero .hero-tag {
    display: block !important;
    margin: 0 0 1.5rem !important;
    padding: 0 0 0 2.6rem !important;
    color: var(--guia-acento, #0071e3) !important;
    font-family: var(--font-body, 'Space Mono', monospace) !important;
    font-size: 0.65rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.guias-hero .hero-tag::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 22px !important;
    height: 1px !important;
    background: #0c0c0a !important;
    opacity: 0.15 !important;
}

.guias-hero h1,
.guias-hero .hero-h1-row {
    display: inline !important;
    margin: 0 !important;
    color: #0c0c0a !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    font-family: var(--font-display, 'Space Grotesk', sans-serif) !important;
    font-size: clamp(2.5rem, 5.5vw, 4.5rem) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.guias-hero h1 {
    display: block !important;
    max-width: 860px !important;
}

.guias-hero p {
    max-width: 640px !important;
    margin: 1.6rem 0 0 !important;
    color: #6b6960 !important;
    font-family: var(--font-body, 'Space Mono', monospace) !important;
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
}

.guias-hero .hero-edition {
    position: static !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    order: 2 !important;
}

.guias-hero .hero-edition::after,
.guias-hero .hero-edition-label,
.guias-hero .hero-edition-caption {
    content: none !important;
    display: none !important;
}

.guias-hero .hero-edition-avatar {
    display: grid !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    place-items: center !important;
    background: var(--color-superficie, #f5f4f0) !important;
    color: #0c0c0a !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
}

.guias-hero .hero-edition-avatar::before {
    content: "TC" !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
}

.guias-hero .hero-edition-date {
    max-width: none !important;
    color: #6b6960 !important;
    font-family: var(--font-body, 'Space Mono', monospace) !important;
    font-size: 0.8rem !important;
    font-style: normal !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}

.guias-hero .hero-edition-date::before {
    content: "Actualizado: " !important;
}

.guias-hero .hero-meta {
    display: none !important;
}

@media (max-width: 768px) {
    .guias-hero {
        width: min(100% - 24px, 1200px) !important;
        padding: 3rem 1.5rem 2.5rem !important;
        margin-bottom: 3rem !important;
    }

    .guias-hero .hero-main {
        padding: 0 !important;
    }

    .guias-hero .hero-main::before {
        left: -1.5rem !important;
        top: 1rem !important;
        bottom: 1rem !important;
    }

    .guias-hero h1,
    .guias-hero .hero-h1-row {
        font-size: clamp(2.25rem, 11vw, 3.5rem) !important;
    }
}