/*
Theme Name: Chibalete Theme
Theme URI: https://tiendachibalete.com
Author: Chibalete Editores
Description: Theme oficial de Chibalete Editores
Version: 1.0.0
Text Domain: chibalete-theme
*/

/* 
 * Los estilos principales se manejan vía Tailwind CSS (CDN en Production).
 * Este archivo solo maneja overrides específicos de WordPress y animaciones custom.
 */

body {
    background-color: #fcf8f5;
    /* pop-cream fallback */
    color: #1a1a1a;
}

/* === QUIENES SOMOS BACKGROUND FIX === */
/* === QUIENES SOMOS BACKGROUND FIX === */
/* Target BODY using template class or ID fallback */
body.page-template-page-quienes-somos-php,
body.page-slug-quienes-somos {
    background-color: #fcf8f5 !important;
    background-image: radial-gradient(circle, rgba(120, 120, 120, 0.28) 1.2px, transparent 1.3px) !important;
    background-size: 18px 18px !important;
    background-position: 0 0 !important;
    background-attachment: scroll !important;
}

/* Ensure inner wrappers are transparent on this page ONLY */
body.page-template-page-quienes-somos-php .site,
body.page-template-page-quienes-somos-php #page,
body.page-template-page-quienes-somos-php #content,
body.page-template-page-quienes-somos-php main,
body.page-template-page-quienes-somos-php .qs-background-fix,
body.page-slug-quienes-somos .site,
body.page-slug-quienes-somos #page,
body.page-slug-quienes-somos #content,
body.page-slug-quienes-somos main,
body.page-slug-quienes-somos .qs-background-fix {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* === UTILITIES & OVERRIDES === */

/* Halftone Patterns (Used in PHP templates) */
.halftone {
    background-image: radial-gradient(#000 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.1;
}

.halftone-soft {
    background-image: radial-gradient(#000 1px, transparent 1px);
    background-size: 20px 20px;
}

.halftone-box {
    background-image: radial-gradient(currentColor 1px, transparent 1px);
    background-size: 10px 10px;
}

/* Shapes for Simulation */
.miro-blob {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #fcf8f5;
}

::-webkit-scrollbar-thumb {
    background: #000;
    border: 2px solid #fcf8f5;
}

/* === HEADER POP-ART (Cleaned) === */
/* Specifics for WP Menu structure overrides */
.ch-header-pop nav a {
    text-decoration: none;
    display: inline-block;
}

/* === HERO CHARACTER ANIMATION === */
@keyframes crab-slide-peek {
    0% {
        transform: translateX(-120%) rotate(-5deg);
        opacity: 0;
    }

    10% {
        transform: translateX(-80px) rotate(0deg);
        opacity: 1;
    }

    20% {
        transform: translateX(-80px) rotate(2deg);
    }

    30% {
        transform: translateX(-80px) rotate(-2deg);
    }

    80% {
        transform: translateX(-80px) rotate(0deg);
        opacity: 1;
    }

    90% {
        transform: translateX(-120%) rotate(5deg);
        opacity: 0;
    }

    100% {
        transform: translateX(-120%) rotate(0deg);
        opacity: 0;
    }
}

/* === MARQUEE ANIMATION === */
@keyframes marquee-right {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

.animate-marquee-right {
    display: flex;
    white-space: nowrap;
    animation: marquee-right 30s linear infinite;
}

.scroll-carousel-container {
    overflow: hidden;
    width: 100%;
}

/* === POP ART BLUE DOTS (CTA BOX) === */
.pop-blue-dots {
    background-color: #0189C5;
    background-image: radial-gradient(#ffffff 1.5px, transparent 1.5px) !important;
    background-size: 8px 8px !important;
    border: 4px solid #1a1a1a;
    box-shadow: 8px 8px 0px 0px #1a1a1a;
}

/* === HEADER POP-ART (FORCE PRODUCTION SYNC) === */

.ch-header-pop {
    background-color: #FCF8F6 !important;
    border-bottom: 8px solid #1a1a1a !important;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1000;
    height: 140px !important;
    min-height: 140px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Halftone Layer 1 (Small dots) */
.ch-header-pop::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(#808080 1px, transparent 1px) !important;
    background-size: 10px 10px !important;
    opacity: 0.4 !important;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: linear-gradient(to right, black 0%, transparent 100%);
    mask-image: linear-gradient(to right, black 0%, transparent 100%);
}

/* Halftone Layer 2 (Big dots) */
.ch-header-pop::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(#808080 10px, transparent 10px) !important;
    background-size: 40px 40px !important;
    opacity: 0.4 !important;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 100%);
}

.ch-header-pop>div {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
}

/* Navigation Links (Both a and button for React/WP compatibility) */
.ch-header-pop nav a,
.ch-header-pop nav button {
    font-family: 'Luckiest Guy', cursive !important;
    font-size: 1.3rem;
    letter-spacing: 0.1em;
    color: #1a1a1a !important;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 16px;
    background: transparent;
    border: 3px solid transparent !important;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-block;
}

/* === HEADER LOGO FIX FOR WOOCOMMERCE === */
.ch-header-pop img {
    height: 64px !important;
    /* Matches h-16 */
    width: auto !important;
    max-width: none !important;
    /* Prevent WooCommerce 100% width override */
}

/* Hover - Common */
.ch-header-pop nav a:hover,
.ch-header-pop nav button:hover {
    color: #ffffff !important;
    border-color: #1a1a1a !important;
    box-shadow: 4px 4px 0px 0px #1a1a1a !important;
    transform: translateY(-2px);
}

/* COLOR CODED HOVER */

/* Inicio (E65294) */
.ch-header-pop nav a[href*="inicio"]:hover,
.ch-header-pop nav button:nth-child(1):hover {
    background-color: #E65294 !important;
}

/* Tienda (2C296E) */
.ch-header-pop nav a[href*="tienda"]:hover,
.ch-header-pop nav button:nth-child(2):hover {
    background-color: #2C296E !important;
}

/* Servicios (F0E588) */
.ch-header-pop nav a[href*="servicios"]:hover,
.ch-header-pop nav a[href*="oficio"]:hover,
.ch-header-pop nav button:nth-child(3):hover {
    background-color: #F0E588 !important;
    color: #1a1a1a !important;
}

/* Sopa de letras (F7A9D1) */
.ch-header-pop nav a[href*="sopa"]:hover,
.ch-header-pop nav a[href*="blog"]:hover,
.ch-header-pop nav button:nth-child(4):hover {
    background-color: #F7A9D1 !important;
}

/* Quiénes somos (F0E588) */
.ch-header-pop nav a[href*="quienes"]:hover,
.ch-header-pop nav button:nth-child(5):hover {
    background-color: #F0E588 !important;
    color: #1a1a1a !important;
}

/* SAAS (127FE5) */
.ch-header-pop nav a[href*="saas"]:hover,
.ch-header-pop nav button:nth-child(6):hover {
    background-color: #127FE5 !important;
}

/* === FOOTER POP-ART (FORCE PRODUCTION SYNC) === */

.ch-footer-pop {
    background-color: #FCF8F6 !important;
    border-top: 8px solid #1a1a1a !important;
    position: relative;
    overflow: hidden !important;
}

/* Halftone Layer 1 (Small dots) */
.ch-footer-pop::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(#808080 1px, transparent 1px) !important;
    background-size: 10px 10px !important;
    opacity: 0.2 !important;
    pointer-events: none;
    z-index: 0;
}

/* Halftone Layer 2 (Big dots - Corner aesthetics) */
.ch-footer-pop::after {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 400px;
    height: 400px;
    background-image: radial-gradient(#F0E588 4px, transparent 4px) !important;
    background-size: 20px 20px !important;
    opacity: 0.1 !important;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Text Consistency Enforcement */
.ch-footer-pop h5 {
    color: #1a1a1a !important;
}

.ch-footer-pop a {
    color: #4a4a4a !important;
    /* Stone-600 */
}

.ch-footer-pop a:hover {
    color: #ED3D3B !important;
    /* Pop-red */
}

.ch-footer-pop svg {
    color: #1a1a1a !important;
}

.ch-footer-pop svg:hover {
    color: #ED3D3B !important;
}

/* === HERO SPECIFIC - ENCAPSULATED === */
#ch-hero .text-pop-stroke {
    -webkit-text-stroke: 1.5px #073B4C;
    paint-order: stroke fill;
    /* Fallback if paint-order not supported */
    text-shadow:
        2px 0 0 #073B4C,
        -2px 0 0 #073B4C,
        0 2px 0 #073B4C,
        0 -2px 0 #073B4C;
}

/* Ensure backdrop has texture (Halftone Dots) - STRICT REPAIR */
#ch-hero.hero-texture-pop::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dark dots found in local version */
    background-image: radial-gradient(#1a1a1a 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

/* Strict Blob Colors (Override) - PIXEL PERFECT REPAIR */
/* Background: #FFA326 | Border/Shadow: #204F5E */
#ch-hero .hero-logo-blob {
    background-color: #FFA326 !important;
    border: 4px solid #204F5E !important;
    box-shadow: 8px 8px 0px 0px #204F5E !important;
}

/* === STORE CTA SECTION (Post-Hero) - STRICT ENCAPSULATION === */
#ch-store-cta {
    background-color: #1a1a1a;
    /* matches pop-black */
    position: relative;
    overflow: hidden;
    width: 100%;
    border-bottom: 8px solid #1a1a1a;
}

#ch-store-cta .cta-button {
    display: inline-block;
    background-color: #088CC7 !important;
    /* Visual Spec: Blue */
    background-image: radial-gradient(#ffffff 1.5px, transparent 1.5px) !important;
    /* Visual Spec: White Dots */
    background-size: 8px 8px !important;
    color: #ffffff !important;
    font-family: 'Bangers', cursive !important;
    /* font-pop matches local */
    font-size: 1.5rem;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1rem 3rem;
    /* approx px-12 py-4 */
    border: 4px solid #ffffff !important;
    /* Visual Spec: White Border */
    box-shadow: 6px 6px 0px 0px #ffffff !important;
    /* Visual Spec: White Shadow Hard */
    letter-spacing: 0.1em;
    transform: rotate(-1deg);
    transition: all 0.2s ease;
    cursor: pointer;
}

#ch-store-cta .cta-button:hover {
    transform: translateY(-4px) rotate(0deg);
    box-shadow: 10px 10px 0px 0px #ffffff !important;
    background-color: #0679ac !important;
}

/* === NOVEDADES SECTION (Encapsulated) === */
#ch-novedades .object-contain {
    object-fit: contain !important;
}

#ch-novedades img {
    max-width: 100%;
    height: auto;
}

/* Hide Scrollbar for Novedades Carousel */
#ch-novedades .overflow-x-auto {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

#ch-novedades .overflow-x-auto::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* === NOVEDADES VISUAL STYLING (Strictly Encapsulated) === */

/* Price Badge */
#ch-novedades .nov-price-badge {
    background-color: #208C84 !important;
    font-family: 'Luckiest Guy', cursive !important;
    color: #ffffff !important;
    /* Ensure existing text utilities don't override visibility */
}

#ch-novedades .nov-price-badge * {
    color: #ffffff !important;
}

/* CTA Button */
#ch-novedades .nov-cta-btn {
    background-color: #FA006E !important;
    font-family: 'Luckiest Guy', cursive !important;
    font-weight: 700 !important;
    /* Bold */
    color: #ffffff !important;
    /* Maintain layout from before */
}

/* Product Cards: 7-Color Palette + White Dots */
/* Dots Pattern Shared */
#ch-novedades [class*="nov-card-"] {
    background-image: radial-gradient(#ffffff 1.5px, transparent 1.5px);
    background-size: 8px 8px;
    /* Fallback color if loop fails */
    background-color: #ffffff;
}

/* Palette Assigmnent */
#ch-novedades .nov-card-0 {
    background-color: #7D9DD4 !important;
}

#ch-novedades .nov-card-1 {
    background-color: #019BA2 !important;
}

/* Was card-2 */
#ch-novedades .nov-card-2 {
    background-color: #208C85 !important;
}

/* Was card-3 */
#ch-novedades .nov-card-3 {
    background-color: #FBB83D !important;
}

/* Was card-4 */
#ch-novedades .nov-card-4 {
    background-color: #FFDC1D !important;
}

/* Was card-5 */
#ch-novedades .nov-card-5 {
    background-color: #CC005B !important;
}

/* Was card-6 */

/* === HERO SECTION UPDATES === */
#ch-hero .hero-cta-btn {
    background-color: #FC3A41 !important;
    font-family: 'Luckiest Guy', cursive !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

#ch-novedades .nov-card-3 {
    background-color: #208C85 !important;
}

#ch-novedades .nov-card-4 {
    background-color: #FBB83D !important;
}

#ch-novedades .nov-card-5 {
    background-color: #FFDC1D !important;
}

#ch-novedades .nov-card-6 {
    background-color: #CC005B !important;
}

/* Ensure text legibility on dark cards might be needed, but spec didn't ask. 
   Assuming existing text utilities handle it or black text is desired (pop style usually dark outlines or black text).
   Front-page.php has text-pop-black forced now.
*/

/* =========================================
   3.5 SOPA BANNER SECTION 
   (Encapsulated #ch-sopa-banner)
   ========================================= */
#ch-sopa-banner {
    /* Height constraint to match design feel - adjust if needed */
    min-height: 500px;
    display: flex;
    align-items: center;
}

#ch-sopa-banner .sopa-banner-container {
    width: 100%;
    /* Ensure height is at least this */
    min-height: 500px;
}

/* The CTA Box Wrapper */
#ch-sopa-banner .sopa-cta-box {
    text-decoration: none;
    background-color: #E9649F;
    border: 4px solid #000;
    box-shadow: 8px 8px 0px 0px #000;
    padding: 1.5rem 2rem;
    cursor: pointer;
    /* Rotation for pop art feel */
    transform: rotate(-2deg);
    display: inline-block;
}

#ch-sopa-banner .sopa-cta-box:hover {
    transform: rotate(-2deg) translateY(-5px);
    box-shadow: 12px 12px 0px 0px #000;
}

#ch-sopa-banner .sopa-cta-content {
    text-align: left;
}

/* Line 1: ACTUALIDAD EDITORIAL */
#ch-sopa-banner .sopa-line-1 {
    font-family: 'Luckiest Guy', cursive, display;
    /* Fallback */
    font-size: 1.2rem;
    /* Small upper text */
    color: #FFF;
    margin-bottom: 0.2rem;
    letter-spacing: 0.05em;
    display: block;
    line-height: 1;
}

/* Line 2: SOPA DE LETRAS */
#ch-sopa-banner .sopa-line-2 {
    font-family: 'Luckiest Guy', cursive, display;
    font-size: 2.5rem;
    /* Large main text */
    color: #FFF;
    text-transform: uppercase;
    display: block;
    line-height: 1;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    #ch-sopa-banner {
        min-height: 200px;
    }

    #ch-sopa-banner .sopa-cta-box {
        padding: 1rem 1.5rem;
    }

    #ch-sopa-banner .sopa-line-1 {
        font-size: 1rem;
    }

    #ch-sopa-banner .sopa-line-2 {
        font-size: 1.8rem;
    }
}

/* =========================================
   4. BLOG SECTION (SOPA DE LETRAS)
   (Encapsulated #ch-blog-latest)
   ========================================= */
/* #ch-blog-latest: Background handled inline in PHP as requested */

/* CARDS */
#ch-blog-latest .blog-card {
    background-color: #6C508A;
    /* Purple background */
    border: 4px solid #000;
    padding: 2rem;
    box-shadow: 8px 8px 0px 0px #000;
    /* Pop shadow */
    color: #FFF;
    /* All text white */
    min-height: 550px;
    /* Taller cards */
}

#ch-blog-latest .blog-card:hover {
    box-shadow: 12px 12px 0px 0px #000;
}

/* LABELS & METADATA */
#ch-blog-latest .blog-cat-badge {
    background-color: #000;
    color: #FFD700;
    /* Yellow text on black badge */
}

#ch-blog-latest .blog-date {
    opacity: 0.8;
}

/* TYPOGRAPHY */
#ch-blog-latest .blog-title {
    color: #FFF;
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

#ch-blog-latest .blog-excerpt {
    color: #FFF;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* BUTTON "LEER MÁS" */
#ch-blog-latest .blog-read-more {
    background-color: #245DA5;
    /* Blue button */
    color: #FFF !important;
    font-family: 'Luckiest Guy', cursive, display;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    text-decoration: none;
}

#ch-blog-latest .blog-read-more:hover {
    background-color: #245DA5;
    /* Maintain color on hover (brightness handled by opacity or simple lift) */
    /* Requirement says strictly #245DA5 background */
}

/* Excerpt Clamping Helper */
.line-clamp-6 {
    overflow: hidden;
}

/* =========================================
   5. NUESTROS SERVICIOS (Chip-Based)
   (Encapsulated #ch-servicios)
   ========================================= */
/* #ch-servicios: Background handled via PHP inline as requested */

/* Title Button */
#ch-servicios .ch-servicios__title-btn {
    background-color: #F0E588;
    color: #F7A9D1;
    font-family: 'Luckiest Guy', cursive, display;
    text-decoration: none;
    box-shadow: 8px 8px 0px 0px #000;
    transform: rotate(-1deg);
    transition: all 0.3s ease;
    animation: wiggle 3s infinite ease-in-out;
}

#ch-servicios .ch-servicios__title-btn:hover {
    transform: rotate(1deg) scale(1.05);
    box-shadow: 12px 12px 0px 0px #000;
}

@keyframes wiggle {

    0%,
    100% {
        transform: rotate(-1deg);
    }

    50% {
        transform: rotate(1deg);
    }
}

/* Chip Container */
#ch-servicios .ch-servicios__chips {
    perspective: 1000px;
}

/* Chips */
#ch-servicios .chip {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* Color var handled inline */
    background-color: var(--chip-color, #ccc);
    color: var(--chip-text, #fff);
    /* Default white text */
    border: 4px solid #000;
    box-shadow: 8px 8px 0px 0px #000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    cursor: pointer;
    font-family: 'Luckiest Guy', cursive, display;
    font-size: 1.5rem;
    line-height: 1.1;
    text-transform: uppercase;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    padding: 1rem;
}

#ch-servicios .chip:hover,
#ch-servicios .chip:focus-visible {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 12px 16px 0px 0px #000;
    z-index: 20;
    /* Bring to front */
    outline: none;
}

/* Tooltip (CSS Only) */
#ch-servicios .chip__tooltip {
    /* Hidden state */
    opacity: 0;
    visibility: hidden;
    position: absolute;
    bottom: 110%;
    /* Above the chip */
    left: 50%;
    transform: translateX(-50%) translateY(10px);

    /* Box Model */
    width: 280px;
    background-color: #fff;
    color: #000;
    border: 4px solid #000;
    box-shadow: 6px 6px 0px 0px #000;
    padding: 1rem;

    /* Typography */
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    text-transform: none;
    line-height: 1.4;

    /* Transition */
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    /* Let hover pass through if needed, but mainly avoids flicker */
    z-index: 30;
}

/* Tooltip Arrow (Pseudo) */
#ch-servicios .chip__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

/* Show Tooltip */
#ch-servicios .chip:hover .chip__tooltip,
#ch-servicios .chip:focus-visible .chip__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* =========================================
   7. SAAS PAGE (Dedicated)
   ========================================= */

/* Targeted via wrapper div in page-saas.php */
.saas-page,
body.page-template-page-saas .saas-page {
    background-color: #FCF8F5;
    /* Puntos grises visibles */
    background-image: radial-gradient(rgba(0, 0, 0, 0.16) 2px, transparent 2px);
    /* Slightly darker/larger dot as requested "visibles" */
    background-size: 16px 16px;
    /* 16px grid */
    padding: 60px 20px;
    border-bottom: none;
    position: relative;
    overflow: hidden;
    min-height: 80vh;
}

.home-saas .saas-container {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* General Text Styles inside SaaS to ensure isolation from global theme weirdness */
.home-saas p {
    color: #1a1a1a;
    font-family: 'DM Sans', sans-serif;
    /* Fallback to clean sans */
    line-height: 1.6;
    font-size: 1rem;
    margin-bottom: 0;
}

/* BLOCKS */
.home-saas .saas-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

@media (min-width: 992px) {
    .home-saas .saas-block {
        grid-template-columns: 1fr 1fr;
        /* 2 Columns Desktop */
        gap: 60px;
    }
}

/* CONTENT SIDE */
.home-saas .saas-title {
    font-family: 'Luckiest Guy', cursive, display;
    font-size: 3rem;
    line-height: 1.1;
    color: #1a1a1a;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.home-saas .saas-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #1a1a1a;
    margin-bottom: 20px;
    opacity: 0.8;
}

.home-saas .saas-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    color: #1a1a1a;
    text-align: justify;
}

/* GALLERY SIDE */
.home-saas .saas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

@media (min-width: 768px) {
    .home-saas .saas-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2x2 grid attempt */
    }
}

.home-saas .saas-img-wrapper {
    border: 4px solid #1a1a1a;
    box-shadow: 6px 6px 0px 0px #1a1a1a;
    transition: transform 0.2s ease;
    background: #fff;
    overflow: hidden;
    aspect-ratio: 4/3;
    /* Enforce shape */
}

.home-saas .saas-img-wrapper:hover {
    transform: translateY(-4px);
    box-shadow: 10px 10px 0px 0px #1a1a1a;
}

.home-saas .saas-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* CTA FINAL SECTION */
.home-saas .saas-cta-container {
    text-align: center;
    margin-top: 40px;
    position: relative;
    z-index: 10;
}

/* Correction for class names in PHP */
.home-saas .saas-cta-text-real {
    font-family: 'Luckiest Guy', cursive, display;
    font-size: 1.5rem;
    color: #1a1a1a;
    background: #fff;
    display: inline-block;
    padding: 15px 30px;
    border: 4px solid #1a1a1a;
    box-shadow: 6px 6px 0px 0px #1a1a1a;
    transform: rotate(-1deg);
    transition: transform 0.2s ease;
}

.home-saas .saas-cta-text-real:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 10px 10px 0px 0px #1a1a1a;
}

.home-saas .saas-mail-link {
    color: #ED3D3B;
    /* Pop Red */
    text-decoration: underline;
}

.home-saas .saas-mail-link:hover {
    color: #1a1a1a;
    text-decoration: none;
}

/* CSS LIGHTBOX (Scoped) */
.saas-lightbox-overlay {
    display: none;
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
}

.saas-lightbox-overlay:target {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.saas-lightbox-close {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: default;
}

.saas-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    z-index: 100000;
}

.saas-lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    border: 4px solid #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    display: block;
}

.saas-lightbox-close-btn {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    background: #fff;
    color: #000;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border: 2px solid #000;
    transition: transform 0.2s ease;
}

.saas-lightbox-close-btn:hover {
    transform: scale(1.1);
    background: #ED3D3B;
    color: #fff;
}



/* Mobile Adjustments */
@media (max-width: 768px) {
    #ch-servicios .chip {
        width: 140px;
        height: 140px;
        font-size: 1rem;
    }

    #ch-servicios .chip__tooltip {
        width: 220px;
        bottom: 115%;
    }
}

/* =========================================
   6. ALIANZAS SECTION
   (Encapsulated #ch-alianzas)
   ========================================= */

/* PANELS */
#ch-alianzas .alianza-panel {
    /* Flex parent handled in HTML */
    padding-top: 2rem;
    /* Space for the chip */
}

/* CHIPS */

/* TEXT VISIBILITY & LEGIBILITY */
#ch-alianzas h3 {
    letter-spacing: 0.05em;
}

#ch-alianzas p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* LINK STATES */
#ch-alianzas a {
    text-decoration: none;
    text-decoration: none;
}

/* =========================================
   7. HERO CHARACTER (Animated)
   (Encapsulated .hero-character)
   ========================================= */
.hero-character {
    position: absolute;
    right: 2%;
    /* Fine-tuned to not hit edge */
    top: 55%;
    /* Vertically centered-ish */
    transform: translateY(-50%);
    height: 65%;
    /* 60-65% of hero height */
    z-index: 5;
    /* Behind text generally, but depends on flex layout */
    pointer-events: none;
    /* Let clicks pass through if needed */
}

.hero-character img {
    height: 100%;
    width: auto;
    object-fit: contain;
    /* Animation: Sway -20deg */
    transform-origin: bottom center;
    /* Pivot from bottom */
    animation: hero-sway 6s ease-in-out infinite;
}

@keyframes hero-sway {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-10deg);
    }

    /* Subtle rotation */
    100% {
        transform: rotate(0deg);
    }
}

/* Mobile/Tablet Hide */
@media (max-width: 1024px) {
    .hero-character {
        display: none;
    }
}

/* =========================================
   8. SHOP PAGE BACKGROUND (Fix)
   ========================================= */
body.woocommerce,
body.post-type-archive-product,
body.tax-product_cat,
.section-shop-custom {
    background-color: #FCF8F5 !important;
    background-image: radial-gradient(#808080 1px, transparent 1px);
    background-size: 20px 20px;
}

/* =========================================
   9. SHOP FILTERS & BUTTONS (Interactive)
   ========================================= */
.shop-filter-btn {
    position: relative;
    font-family: 'Luckiest Guy', cursive;
    font-size: 1.1rem;
    text-transform: uppercase;
    color: #F2F0E9;
    letter-spacing: 0.05em;
    padding: 12px 24px;
    background-color: var(--btn-color, #1a1a1a);
    border: 4px solid #000;
    box-shadow: 6px 6px 0px 0px #000;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
}

.shop-filter-btn:hover {
    transform: translateY(-4px);
    box-shadow: 8px 8px 0px 0px #000;
}

.shop-filter-btn.active {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 4px 4px 0px 0px #000;
    border-color: #fff;
}

/* TOOLTIP (CSS Only for Hover) */
.shop-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: #000;
    color: #fff;
    padding: 8px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: bold;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    margin-bottom: 10px;
    z-index: 50;
    border: 2px solid #fff;
}

.shop-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

.group\/tooltip:hover .shop-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Override default WooCommerce Button Styles inside Shop Loop */
.product-card-wrapper .button.add_to_cart_button.loading {
    opacity: 0.5;
    pointer-events: none;
}



/* =========================================
   10. SINGLE PRODUCT REDESIGN (EDITORIAL - 1120px STRICT)
   Updated: 2026-01-22
   ========================================= */

/* 1. Main Section Container - STRICT 1120px */
.section-single-product .woocommerce-container {
    max-width: 1120px !important;
    /* Force constraint */
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 60px;
    box-sizing: border-box;
    /* Ensure padding doesn't break width */
}

/* 2. Top Grid Layout - Balanced for 1120px */
.product-top-grid {
    display: grid;
    /* Slightly less wide image col to verify text has room */
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    /* Balanced gap */
    align-items: start;
    margin-bottom: 80px;
}

/* 3. Image Column (Left) */
.product-gallery-col {
    position: relative;
    min-width: 0;
}

.woocommerce-product-gallery {
    opacity: 1 !important;
}

.woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    border: 4px solid #000;
    box-shadow: 10px 10px 0 #000;
    border-radius: 4px;
    transition: transform 0.3s ease;
    cursor: zoom-in;
    /* Hint for lightbox */
}

/* Thumbnails */
.flex-control-thumbs {
    margin-top: 20px !important;
    display: flex;
    justify-content: center;
    /* Center thumbs */
    gap: 10px;
}

.flex-control-thumbs li {
    width: 18%;
}

.flex-control-thumbs img {
    border: 2px solid #000;
    opacity: 0.7;
    transition: all 0.2s ease;
    cursor: pointer;
}

.flex-control-thumbs img:hover,
.flex-control-thumbs .flex-active {
    opacity: 1;
    border-color: var(--blue, #088CC7);
}


/* 4. Info Column (Right) - Centered & Balanced */
.product-info-col {
    padding-top: 10px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Title */
.product_title.entry-title {
    font-family: 'Luckiest Guy', cursive, display;
    font-size: 48px !important;
    line-height: 1 !important;
    color: #000;
    margin-bottom: 25px !important;
    text-transform: uppercase;
}

/* Price */
.price {
    font-size: 26px !important;
    color: #333;
    font-weight: bold;
    font-family: 'DM Sans', sans-serif;
    margin-bottom: 20px;
    display: block;
}

/* Short Description */
.woocommerce-product-details__short-description {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 35px;
    border-left: 4px solid #FBB83D;
    padding-left: 15px;
    max-width: 100%;
    /* Utilize available space */
}

/* Meta Block */
.product_meta {
    margin-top: 35px;
    font-size: 13px;
    color: #666;
    border-top: 2px solid #eee;
    padding-top: 15px;
}

.product_meta>span {
    display: block;
    margin-bottom: 5px;
}

/* Add to Cart Button */
.single_add_to_cart_button {
    background-color: #000 !important;
    color: #fff !important;
    font-family: 'Luckiest Guy', cursive !important;
    font-size: 19px !important;
    padding: 12px 30px !important;
    border-radius: 50px !important;
    border: 2px solid #000 !important;
    transition: all 0.3s ease !important;
    margin-top: 5px;
    display: inline-block;
}

.single_add_to_cart_button:hover {
    background-color: #FBB83D !important;
    color: #000 !important;
    transform: translateY(-2px);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}

/* 5. LIGHTBOX CONTROLS (Restricted Scope) */

.pswp {
    z-index: 99999 !important;
}

.pswp__ui {
    z-index: 100000 !important;
}

/* Ensure buttons are visible */
.pswp__button--close,
.pswp__button--arrow--left,
.pswp__button--arrow--right {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Close/Back Button Styling */
.pswp__button--close {
    background: none !important;
    width: auto !important;
    height: auto !important;
    top: 30px !important;
    left: 30px !important;
    right: auto !important;
}

/* Target the injected span class from product-lightbox.js */
.chibalete-lightbox-close-label {
    display: inline-block;
    background-color: #fff;
    color: #000;
    font-family: 'Luckiest Guy', cursive, sans-serif;
    font-size: 16px;
    padding: 12px 24px;
    border: 4px solid #000;
    border-radius: 30px;
    box-shadow: 6px 6px 0 #000;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s ease;
}

.chibalete-lightbox-close-label:hover {
    background-color: #FBB83D;
    transform: translateY(-2px);
}

/* Arrows Styling */
.pswp__button--arrow--left,
.pswp__button--arrow--right {
    background: none !important;
    width: 80px !important;
    height: 80px !important;
    top: 50% !important;
    margin-top: -40px !important;
}

.pswp__button--arrow--left {
    left: 20px !important;
}

.pswp__button--arrow--right {
    right: 20px !important;
}

/* Injected arrow spans */
.chibalete-lightbox-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: #fff;
    border: 3px solid #000;
    border-radius: 50%;
    color: #000;
    font-size: 28px;
    font-weight: 900;
    font-family: sans-serif;
    box-shadow: 4px 4px 0 #000;
    transition: transform 0.2s ease;
}

.chibalete-lightbox-arrow:hover {
    background-color: #FBB83D;
    transform: scale(1.1);
}

/* Hide default SVG skins */
.pswp__button--close::before,
.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
    display: none !important;
}


/* 6. Mobile Responsiveness */
@media (max-width: 991px) {
    .section-single-product .woocommerce-container {
        padding: 20px;
        max-width: 100% !important;
        /* Allow full width on mobile/tablet */
    }

    .product-top-grid {
        grid-template-columns: 1fr;
        /* Stack */
        gap: 40px;
    }

    .product-gallery-col {
        order: -1;
    }

    .product_title.entry-title {
        font-size: 38px !important;
        text-align: center;
    }

    .product-info-col {
        padding-left: 0;
        align-items: center;
        text-align: center;
    }

    .woocommerce-product-details__short-description {
        border-left: none;
        border-top: 4px solid #FBB83D;
        padding-left: 0;
        padding-top: 15px;
    }

    /* Smaller lightbox buttons on mobile */
    .chibalete-lightbox-close-label {
        font-size: 14px;
        padding: 8px 16px;
    }

    .pswp__button--close {
        top: 15px !important;
        left: 15px !important;
    }
}

/* STRICT 1120px FIX (APPENDED) */
.single-product .chb-single-product-container {
    max-width: 1120px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 60px;
    padding-bottom: 80px;
    box-sizing: border-box;
    display: block !important;
}

/* === SINGLE POST WIDTH FIX (1120px) === */
body.single-post .section-single-post {
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
    display: block;
}

/* === QUIENES SOMOS PAGE (Encapsulated) === */
body.page-template-page-quienes-somos {
    background-color: #fcf8f5;
    background-image: radial-gradient(rgba(0, 0, 0, 0.12) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    background-repeat: repeat;
}

body.page-template-page-quienes-somos .page-quienes-somos-content ul li::marker {
    color: #1a1a1a;
    /* Black bullets */
}

/* Quiénes Somos Chips Responsive Fixes */
@media (max-width: 1024px) {
    .qs-chip {
        border-radius: 40px !important;
        aspect-ratio: auto !important;
        padding: 2rem !important;
        margin-bottom: 2rem;
    }
}

/* === SOPA DE LETRAS / BLOG BACKGROUND (Encapsulated) === */
/* Applies only to Blog archive/page */
body.blog,
body.page-sopa-de-letras,
body.category,
body.archive {
    background-color: #FCF8F5;
    background-image: radial-gradient(#cccccc 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    background-repeat: repeat;
}

/* Ensure no other background interferes on blog */
body.blog #ch-blog-latest,
body.archive #ch-blog-latest {
    background: transparent !important;
}

/* =========================================
   11. RESPONSIVE OPTIMIZATION (Mobile & Tablet)
   Strictly Scoped: No changes to Desktop (>1199px)
   ========================================= */

/* --- TABLET & MOBILE (Max 1199px) --- */
@media (max-width: 1199px) {

    /* SaaS Page Stacking */
    .saas-page .saas-block,
    body.page-template-page-saas .saas-block,
    .home-saas .saas-block {
        grid-template-columns: 1fr !important;
        /* Force stack */
        gap: 40px !important;
        text-align: center;
        /* Center align for better flow on smaller screens */
    }

    .saas-page .saas-text,
    .home-saas .saas-text {
        text-align: left;
        /* Keep text readable */
        padding: 0 10px;
    }

    /* Ensure subtitle is centered if title is */
    .home-saas .saas-title,
    .home-saas .saas-subtitle {
        text-align: center;
    }
}

/* --- MOBILE ONLY (Max 767px) --- */
@media (max-width: 767px) {

    /* Global Container Padding Safeguard */
    .saas-container,
    .container,
    .box-services-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* SaaS Typography Reduction */
    .home-saas .saas-title {
        font-size: 2.2rem !important;
        /* Down from 3rem */
        line-height: 1.1;
        word-wrap: break-word;
    }

    .home-saas .saas-subtitle {
        font-size: 1.1rem !important;
        margin-bottom: 30px !important;
    }

    /* SaaS Gallery - Single Column for Touch Targets */
    .home-saas .saas-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .home-saas .saas-img-wrapper {
        box-shadow: 4px 4px 0px 0px #1a1a1a !important;
        /* Reduce shadow offset for small screens */
    }

    /* SaaS CTA */
    .home-saas .saas-cta-text-real {
        font-size: 1.1rem !important;
        padding: 12px 20px !important;
        width: 100%;
        box-sizing: border-box;
        transform: none !important;
        /* Simplify on mobile */
    }

    /* Lightbox Mobile Adjustments */
    .saas-lightbox-content img {
        max-width: 95vw !important;
        max-height: 80vh !important;
        border-width: 2px !important;
    }

    .saas-lightbox-close-btn {
        top: -15px;
        right: 0px;
        /* Bring inside viewport */
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 20px;
    }

    .saas-lightbox-close {
        background: rgba(0, 0, 0, 0.95);
        /* Darker on mobile for focus */
    }

    /* Header Touch Targets & Flow */
    .ch-header-pop {
        height: auto !important;
        /* Allow growing */
        min-height: 100px !important;
        padding: 10px 0 !important;
        flex-wrap: wrap;
    }

    .ch-header-pop nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px !important;
        width: 100%;
    }

    .ch-header-pop nav a,
    .ch-header-pop nav button {
        font-size: 0.9rem !important;
        /* Fit more items */
        padding: 8px 12px !important;
        /* Larger touch area */
        margin: 4px;
        flex-grow: 1;
        /* Tap targets fill space */
        text-align: center;
    }
}

/* === HEADER SOCIAL ICONS === */
.ch-social-link {
    display: inline-block;
    color: #1a1a1a;
    /* pop-black default */
    transition: transform 180ms ease, color 180ms ease, fill 180ms ease;
    cursor: pointer;
}

.ch-social-link:hover,
.ch-social-link:focus-visible {
    color: #F39314 !important;
    /* Orange hover */
    transform: rotate(10deg);
    outline: none;
}

.ch-social-link:active {
    transform: scale(0.98) rotate(10deg);
}

.ch-social-link i,
.ch-social-link svg {
    display: inline-block;
    /* Ensure icons rotate with link */
}

/* === SINGLE PRODUCT DESCRIPTION FIX (No Columns) === */
body.single-product .woocommerce-Tabs-panel--description,
body.single-product #tab-description {
    columns: auto !important;
    column-count: 1 !important;
    column-width: auto !important;
    column-gap: normal !important;
}

body.single-product .woocommerce-Tabs-panel--description *,
body.single-product #tab-description * {
    columns: auto !important;
    column-count: 1 !important;
    column-width: auto !important;
}

/* =====================================================================
   =====================================================================
   FRONT-PAGE v2 — Iteración conversión + editorial ligera
   Alcance: únicamente secciones del home nuevo (hero compacto, libros,
   Chibalete+, Actualidad, Newsletter, Manifiesto). NO toca shop, single,
   páginas internas ni header/footer.
   =====================================================================
   ===================================================================== */

/* ---------- Tokens locales (no globales, scoped al home) ---------- */
:root {
    --ch-cream:        #fcf8f5;
    --ch-cream-soft:   #fdfbf7; /* más cerca del blanco */
    --ch-white:        #ffffff;
    --ch-ink:          #1a1a1a; /* negro reservado a acentos */
    --ch-ink-soft:     #3a3a3a;
    --ch-text:         #4a4a4a; /* gris suave para cuerpo */
    --ch-text-muted:   #7a7a7a;
    --ch-border:       #e9e4db; /* borde crema */
    --ch-border-strong:#1a1a1a;
    --ch-red:          #ED3D3B;
    --ch-red-hover:    #d62f2d;
    --ch-orange:       #FF9F1C;
    --ch-accent:       #118AB2;
    --ch-shadow-sm:    0 1px 2px rgba(26,26,26,.06), 0 2px 8px rgba(26,26,26,.04);
    --ch-shadow-md:    0 2px 4px rgba(26,26,26,.06), 0 8px 24px rgba(26,26,26,.06);
    --ch-shadow-lift:  0 10px 30px rgba(26,26,26,.08), 0 2px 6px rgba(26,26,26,.04);
    --ch-radius:       14px;
    --ch-radius-sm:    8px;
    --ch-space-section: clamp(3.5rem, 7vw, 6rem);
}

/* ---------- Layout base del home nuevo ---------- */
body.home {
    background-color: var(--ch-cream-soft);
    color: var(--ch-text);
}

.home .ch-section {
    background-color: var(--ch-cream-soft);
    border: none;
}

/* Kickers / titulares editoriales */
.home .ch-kicker {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ch-red);
    margin-bottom: 0.6rem;
}

.home .ch-h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: var(--ch-ink);
    margin: 0 0 0.4rem;
}

.home .ch-lede {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--ch-text);
    max-width: 42rem;
}

.home .ch-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ch-ink);
    text-decoration: none;
    border-bottom: 2px solid var(--ch-ink);
    padding-bottom: 2px;
    transition: color .2s ease, border-color .2s ease, gap .2s ease;
}
.home .ch-link-arrow:hover {
    color: var(--ch-red);
    border-bottom-color: var(--ch-red);
    gap: 0.65rem;
}
.home .ch-link-arrow--sm { font-size: 0.78rem; }

/* ---------- Botones unificados ---------- */
.home .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
    letter-spacing: 0.04em;
    padding: 0.85rem 1.4rem;
    border-radius: var(--ch-radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
    user-select: none;
}
.home .btn-primary {
    background-color: var(--ch-ink);
    color: var(--ch-white);
    border-color: var(--ch-ink);
}
.home .btn-primary:hover {
    background-color: var(--ch-red);
    border-color: var(--ch-red);
    transform: translateY(-1px);
    box-shadow: var(--ch-shadow-md);
}
.home .btn-outline {
    background-color: var(--ch-white);
    color: var(--ch-ink);
    border-color: var(--ch-ink);
}
.home .btn-outline:hover {
    background-color: var(--ch-ink);
    color: var(--ch-white);
    transform: translateY(-1px);
}
.home .btn-ghost {
    background-color: transparent;
    color: var(--ch-ink);
    border-color: var(--ch-border);
}
.home .btn-ghost:hover {
    border-color: var(--ch-ink);
    background-color: var(--ch-cream);
}
.home .btn-disabled {
    background-color: var(--ch-cream);
    color: var(--ch-text-muted);
    border-color: var(--ch-border);
    cursor: not-allowed;
}

/* =====================================================================
   1. HERO COMPACTO — reemplaza el hero grande previo
   ===================================================================== */
.home #ch-hero.hero-compact {
    min-height: 32vh;
    background-color: var(--ch-cream);
    border: none;
    border-bottom: 1px solid var(--ch-border);
    padding: 0;
}
.home #ch-hero.hero-compact::before { content: none; }

@media (min-width: 768px) {
    .home #ch-hero.hero-compact { min-height: 35vh; }
}

.home #ch-hero .hero-title {
    font-size: clamp(2.4rem, 6vw, 4.8rem);
    margin-bottom: 0.75rem;
}

.home #ch-hero .hero-sub {
    color: var(--ch-text);
}

.home #ch-hero .hero-logo-blob {
    box-shadow: 6px 6px 0 0 var(--ch-ink) !important;
}

.home #ch-hero .hero-cta-btn {
    display: inline-flex;
    align-items: center;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.9rem 1.6rem;
    border-radius: var(--ch-radius-sm);
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.home #ch-hero .hero-cta-primary {
    background-color: var(--ch-ink) !important;
    color: var(--ch-white) !important;
    border: 2px solid var(--ch-ink);
}
.home #ch-hero .hero-cta-primary:hover {
    background-color: var(--ch-red) !important;
    border-color: var(--ch-red);
    transform: translateY(-1px);
}
.home #ch-hero .hero-cta-ghost {
    background-color: transparent !important;
    color: var(--ch-ink) !important;
    border: 2px solid var(--ch-ink);
}
.home #ch-hero .hero-cta-ghost:hover {
    background-color: var(--ch-ink) !important;
    color: var(--ch-white) !important;
}

/* Oculta el hero-character legacy si aún queda en DOM */
.home .hero-character { display: none !important; }

/* =====================================================================
   2. LIBROS DESTACADOS — book-card de conversión
   ===================================================================== */
.home #ch-novedades {
    background-color: var(--ch-cream-soft);
    background-image: none !important;
    border-bottom: none;
}
.home #ch-novedades .book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.75rem;
}

@media (max-width: 640px) {
    .home #ch-novedades .book-grid {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: 75%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 1rem;
        -webkit-overflow-scrolling: touch;
    }
    .home #ch-novedades .book-card { scroll-snap-align: start; }
    .home #ch-novedades .book-grid::-webkit-scrollbar { display: none; }
}

.home .book-card {
    display: flex;
    flex-direction: column;
    background-color: var(--ch-white);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position: relative;
}
.home .book-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ch-shadow-lift);
    border-color: #d6cfc1;
}

.home .book-card__media {
    display: block;
    aspect-ratio: 3 / 4;
    background-color: var(--ch-cream);
    position: relative;
    overflow: hidden;
}
.home .book-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
    transition: transform .45s ease;
}
.home .book-card:hover .book-card__media img {
    transform: scale(1.04);
}

.home .book-card__price {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background-color: var(--ch-ink);
    color: var(--ch-white);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    line-height: 1;
}
.home .book-card__price * {
    color: var(--ch-white) !important;
    font-size: inherit !important;
    font-weight: 700 !important;
}

.home .book-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.1rem 1.1rem;
    flex-grow: 1;
}
.home .book-card__author {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ch-text-muted);
    margin: 0;
}
.home .book-card__title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 1.15rem;
    line-height: 1.2;
    color: var(--ch-ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}
.home .book-card__title a {
    color: inherit;
    text-decoration: none;
}
.home .book-card__title a:hover { color: var(--ch-red); }

.home .product-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.6rem;
}
.home .product-actions .btn {
    font-size: 0.82rem;
    padding: 0.7rem 0.8rem;
    width: 100%;
}

/* Hover quick-actions: acciones aparecen más firmes sobre la imagen */
@media (hover: hover) {
    .home .book-card .product-actions { opacity: 0.92; }
    .home .book-card:hover .product-actions { opacity: 1; }
}

/* =====================================================================
   3. CHIBALETE+ — planes
   ===================================================================== */
.home #ch-plus {
    background-color: var(--ch-cream);
    border-top: 1px solid var(--ch-border);
    border-bottom: 1px solid var(--ch-border);
}

.home .plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}
@media (min-width: 900px) {
    .home .plan-grid { gap: 1.75rem; }
}

.home .plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--ch-white);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius);
    padding: 2rem 1.75rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.home .plan-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ch-shadow-md);
    border-color: #d6cfc1;
}

.home .plan-card--featured {
    background-color: var(--ch-ink);
    color: var(--ch-white);
    border-color: var(--ch-ink);
    transform: translateY(-6px);
    box-shadow: var(--ch-shadow-lift);
}
.home .plan-card--featured:hover {
    transform: translateY(-10px);
}

.home .plan-card__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--ch-red);
    color: var(--ch-white);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    white-space: nowrap;
}

.home .plan-card__head {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--ch-border);
}
.home .plan-card--featured .plan-card__head {
    border-bottom-color: rgba(255,255,255,.15);
}

.home .plan-card__tag {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ch-text-muted);
    margin: 0 0 0.5rem;
}
.home .plan-card--featured .plan-card__tag { color: rgba(255,255,255,.7); }

.home .plan-card__title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-style: italic;
    font-size: 1.75rem;
    line-height: 1.05;
    margin: 0 0 1rem;
    color: inherit;
}

.home .plan-card__price { margin: 0; }
.home .plan-card__amount {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 2.25rem;
    line-height: 1;
}
.home .plan-card__period {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--ch-text-muted);
    margin-left: 0.3rem;
}
.home .plan-card--featured .plan-card__period { color: rgba(255,255,255,.7); }

.home .plan-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.home .plan-card__features li {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
    padding-left: 1.5rem;
    position: relative;
    color: var(--ch-text);
}
.home .plan-card--featured .plan-card__features li { color: rgba(255,255,255,.85); }

.home .plan-card__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background-color: var(--ch-red);
}

.home .plan-card__cta { width: 100%; }
.home .plan-card--featured .plan-card__cta.btn-primary {
    background-color: var(--ch-red);
    border-color: var(--ch-red);
    color: var(--ch-white);
}
.home .plan-card--featured .plan-card__cta.btn-primary:hover {
    background-color: var(--ch-red-hover);
    border-color: var(--ch-red-hover);
}

/* =====================================================================
   4. ACTUALIDAD EDITORIAL — blog ligero
   ===================================================================== */
.home #ch-blog-latest.ch-actualidad {
    background-color: var(--ch-cream-soft) !important;
    background-image: none !important;
    border-bottom: none !important;
    padding-top: clamp(3.5rem, 7vw, 5rem);
    padding-bottom: clamp(3.5rem, 7vw, 5rem);
}

.home .blog-card-lite {
    display: flex;
    flex-direction: column;
    background-color: var(--ch-white);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.home .blog-card-lite:hover {
    transform: translateY(-3px);
    box-shadow: var(--ch-shadow-md);
    border-color: #d6cfc1;
}

.home .blog-card-lite__media {
    display: block;
    aspect-ratio: 16 / 10;
    background-color: var(--ch-cream);
    overflow: hidden;
}
.home .blog-card-lite__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}
.home .blog-card-lite:hover .blog-card-lite__media img { transform: scale(1.03); }

.home .blog-card-lite__media--placeholder {
    width: 100%;
    height: 100%;
    background:
        linear-gradient(135deg, var(--ch-cream) 0%, #f3ede2 100%);
}

.home .blog-card-lite__body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.25rem 1.4rem 1.4rem;
    flex-grow: 1;
}
.home .blog-card-lite__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ch-text-muted);
}
.home .blog-card-lite__cat {
    color: var(--ch-red);
    font-weight: 700;
}
.home .blog-card-lite__title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 1.3rem;
    line-height: 1.15;
    color: var(--ch-ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home .blog-card-lite__title a {
    color: inherit;
    text-decoration: none;
}
.home .blog-card-lite__title a:hover { color: var(--ch-red); }

.home .blog-card-lite__excerpt {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ch-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home .blog-card-lite__excerpt p { margin: 0; }

/* =====================================================================
   5. NEWSLETTER
   ===================================================================== */
.home #ch-newsletter.ch-newsletter {
    background-color: var(--ch-cream);
    border-top: 1px solid var(--ch-border);
    border-bottom: 1px solid var(--ch-border);
}

.home .newsletter-form {
    display: flex;
    gap: 0.5rem;
    max-width: 480px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.home .newsletter-form__input {
    flex: 1 1 220px;
    min-width: 0;
    padding: 0.85rem 1.1rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    color: var(--ch-ink);
    background-color: var(--ch-white);
    border: 2px solid var(--ch-border);
    border-radius: var(--ch-radius-sm);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.home .newsletter-form__input:focus {
    outline: none;
    border-color: var(--ch-ink);
    box-shadow: 0 0 0 3px rgba(26,26,26,.08);
}
.home .newsletter-form__btn {
    flex: 0 0 auto;
}
.home .newsletter-form__legal {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    color: var(--ch-text-muted);
    margin-top: 0.9rem;
}

.home .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* =====================================================================
   6. MANIFIESTO — fondo crema, cierre editorial
   ===================================================================== */
.home #ch-manifiesto.ch-manifiesto {
    background-color: var(--ch-cream);
    border-top: 1px solid var(--ch-border);
    position: relative;
}
.home #ch-manifiesto.ch-manifiesto::before {
    content: "";
    position: absolute;
    top: 2.5rem; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    background-color: var(--ch-red);
    border-radius: 2px;
}

.home .manifiesto-quote {
    margin: 0;
    padding: 0;
    border: none;
}
.home .manifiesto-quote p {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.3rem, 2.4vw, 1.85rem);
    line-height: 1.45;
    color: var(--ch-ink);
    margin: 0 0 1.5rem;
}
.home .manifiesto-quote em {
    color: var(--ch-red);
    font-style: italic;
}
.home .manifiesto-signature {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ch-text-muted);
    margin: 0;
}

/* =====================================================================
   Responsive mobile ajustes finos
   ===================================================================== */
@media (max-width: 768px) {
    .home .ch-h2 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
    .home #ch-hero .hero-title { font-size: clamp(2.2rem, 9vw, 3rem); }
    .home .plan-card { padding: 1.75rem 1.4rem; }
    .home .plan-card--featured { transform: none; }
    .home .plan-card--featured:hover { transform: translateY(-3px); }
    .home #ch-manifiesto.ch-manifiesto { padding-top: 4rem; padding-bottom: 4rem; }
}

/* =====================================================================
   =====================================================================
   HEADER v2 — Editorial limpio, scoped a .ch-header
   Coexiste con .ch-header-pop legacy (no se usa, queda huérfano).
   Reutiliza tokens --ch-* del bloque FRONT-PAGE v2.
   ===================================================================== */

/* Tokens fallback por si el header se renderiza sin la home */
.ch-header {
    --ch-cream:        #fcf8f5;
    --ch-cream-soft:   #fdfbf7;
    --ch-white:        #ffffff;
    --ch-ink:          #1a1a1a;
    --ch-ink-soft:     #3a3a3a;
    --ch-text:         #4a4a4a;
    --ch-text-muted:   #7a7a7a;
    --ch-border:       #e9e4db;
    --ch-red:          #ED3D3B;
    --ch-red-hover:    #d62f2d;

    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--ch-cream-soft);
    border-bottom: 1px solid var(--ch-border);
    width: 100%;
    font-family: 'DM Sans', sans-serif;
}

/* Skip link accesibilidad */
.ch-skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px; height: 1px;
    overflow: hidden;
}
.ch-skip-link:focus {
    position: fixed;
    top: 12px; left: 12px;
    width: auto; height: auto;
    padding: 10px 16px;
    background: var(--ch-ink, #1a1a1a);
    color: #fff;
    z-index: 9999;
    border-radius: 6px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
}

.ch-header__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 3vw, 2.5rem);
    height: 80px;
}

@media (min-width: 1024px) {
    .ch-header__inner { height: 88px; }
}

/* Logo */
.ch-header__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    transition: opacity .18s ease;
}
.ch-header__logo:hover { opacity: 0.8; }

.ch-header__logo-img {
    height: 44px;
    width: auto;
    max-width: none !important;       /* override WC/global 100% */
    object-fit: contain;
    display: block;
}
@media (min-width: 1024px) {
    .ch-header__logo-img { height: 52px; }
}

/* Navegación principal (desktop) */
.ch-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}
@media (max-width: 1023px) {
    .ch-nav { display: none; }
}

.ch-header .ch-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 2rem);
}

.ch-header .ch-nav__list li { margin: 0; padding: 0; }

.ch-header .ch-nav__list a {
    display: inline-block;
    padding: 0.5rem 0.25rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    color: var(--ch-ink);
    text-decoration: none;
    position: relative;
    transition: color .18s ease;
}

/* Underline animado (editorial, no brutalista) */
.ch-header .ch-nav__list a::after {
    content: "";
    position: absolute;
    left: 0.25rem;
    right: 0.25rem;
    bottom: 0;
    height: 2px;
    background-color: var(--ch-red);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .22s ease;
}
.ch-header .ch-nav__list a:hover { color: var(--ch-red); }
.ch-header .ch-nav__list a:hover::after { transform: scaleX(1); }

/* Active state (WordPress añade current-menu-item) */
.ch-header .ch-nav__list .current-menu-item > a,
.ch-header .ch-nav__list .current_page_item > a,
.ch-header .ch-nav__list .current-menu-ancestor > a {
    color: var(--ch-ink);
}
.ch-header .ch-nav__list .current-menu-item > a::after,
.ch-header .ch-nav__list .current_page_item > a::after,
.ch-header .ch-nav__list .current-menu-ancestor > a::after {
    transform: scaleX(1);
    background-color: var(--ch-ink);
}

/* Focus visible */
.ch-header .ch-nav__list a:focus-visible,
.ch-header__logo:focus-visible,
.ch-cart-link:focus-visible,
.ch-plus-btn:focus-visible,
.ch-hamburger:focus-visible {
    outline: 2px solid var(--ch-ink);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Actions: CTA + cart + hamburguesa */
.ch-header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* =====================================================================
   CTA CHIBALETE+ — botón destacado, NO es un link de nav
   ===================================================================== */
.ch-plus-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    background-color: var(--ch-red);
    color: var(--ch-white);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.03em;
    line-height: 1;
    padding: 0.85rem 1.3rem;
    border: 2px solid var(--ch-red);
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(237, 61, 59, 0.25);
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    white-space: nowrap;
    cursor: pointer;
}
.ch-plus-btn__label { font-weight: 700; }
.ch-plus-btn__plus {
    font-weight: 900;
    font-size: 1.05em;
    margin-left: 0.1em;
    transform: translateY(-1px);
    display: inline-block;
    transition: transform .2s ease;
}
.ch-plus-btn:hover {
    background-color: var(--ch-red-hover);
    border-color: var(--ch-red-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(237, 61, 59, 0.35);
    color: var(--ch-white);
}
.ch-plus-btn:hover .ch-plus-btn__plus {
    transform: translateY(-1px) rotate(90deg);
}
.ch-plus-btn:active { transform: translateY(0); }

/* Oculta CTA desktop en mobile — se muestra dentro del overlay */
@media (max-width: 768px) {
    .ch-header__actions .ch-plus-btn { display: none; }
}

/* Cart */
.ch-cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--ch-ink);
    background-color: transparent;
    border: 1px solid var(--ch-border);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.ch-cart-link:hover {
    background-color: var(--ch-cream);
    border-color: var(--ch-ink);
    color: var(--ch-ink);
}
.ch-cart-link__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background-color: var(--ch-red);
    color: var(--ch-white);
    border: 2px solid var(--ch-cream-soft);
    border-radius: 999px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* Hamburguesa */
.ch-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--ch-border);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}
.ch-hamburger:hover {
    background-color: var(--ch-cream);
    border-color: var(--ch-ink);
}
.ch-hamburger__box {
    position: relative;
    width: 20px;
    height: 14px;
    display: inline-block;
}
.ch-hamburger__bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--ch-ink);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.ch-hamburger__bar:nth-child(1) { top: 0; }
.ch-hamburger__bar:nth-child(2) { top: 6px; }
.ch-hamburger__bar:nth-child(3) { top: 12px; }

.ch-hamburger[aria-expanded="true"] .ch-hamburger__bar:nth-child(1) {
    top: 6px; transform: rotate(45deg);
}
.ch-hamburger[aria-expanded="true"] .ch-hamburger__bar:nth-child(2) {
    opacity: 0;
}
.ch-hamburger[aria-expanded="true"] .ch-hamburger__bar:nth-child(3) {
    top: 6px; transform: rotate(-45deg);
}

@media (max-width: 1023px) {
    .ch-hamburger { display: inline-flex; }
}

/* =====================================================================
   MOBILE MENU OVERLAY (mismos IDs que JS existente)
   ===================================================================== */
.ch-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 90;
    background-color: var(--ch-cream);
    transition: transform .5s cubic-bezier(0.19, 1, 0.22, 1);
    overflow-y: auto;
}

/* Tailwind CDN ya aporta -translate-y-full y translate-y-0 (el JS existente
   añade/quita esas clases). Garantizamos el estado inicial como fallback. */
.ch-mobile-menu.-translate-y-full { transform: translateY(-100%); }
.ch-mobile-menu.translate-y-0      { transform: translateY(0); }

.ch-mobile-menu__inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 6rem 1.75rem 2.5rem;
    min-height: 100%;
}

/* CTA Chibalete+ versión móvil (arriba, prominente) */
.ch-plus-btn.ch-plus-btn--mobile {
    align-self: flex-start;
    padding: 1rem 1.6rem;
    font-size: 1rem;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity .4s ease, transform .4s ease;
}
.ch-mobile-menu.translate-y-0 .ch-plus-btn--mobile {
    opacity: 1;
    transform: translateX(0);
}

.ch-mobile-menu__nav { flex-grow: 1; }

.ch-mobile-menu__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ch-mobile-menu__list li { margin: 0; padding: 0; }

.ch-mobile-menu__list a {
    display: block;
    padding: 0.75rem 0;
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.05;
    color: var(--ch-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ch-border);
    transition: color .18s ease, padding-left .18s ease;
}
.ch-mobile-menu__list a:hover,
.ch-mobile-menu__list a:focus-visible {
    color: var(--ch-red);
    padding-left: 0.75rem;
}
.ch-mobile-menu__list .current-menu-item > a,
.ch-mobile-menu__list .current_page_item > a {
    color: var(--ch-red);
}

/* Foot (cart + social) */
.ch-mobile-menu__foot {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ch-border);
    margin-top: auto;
}

.ch-mobile-menu__cart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background-color: var(--ch-ink);
    color: var(--ch-white);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color .18s ease;
}
.ch-mobile-menu__cart:hover { background-color: var(--ch-red); }

.ch-mobile-menu__cart-badge {
    background-color: var(--ch-red);
    color: var(--ch-white);
    min-width: 24px; height: 24px;
    padding: 0 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.72rem;
}

.ch-mobile-menu__social {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.ch-mobile-menu__social a {
    color: var(--ch-text-muted);
    text-decoration: none;
    transition: color .18s ease;
}
.ch-mobile-menu__social a:hover { color: var(--ch-red); }

/* Si el overlay está abierto, bloquea scroll del body
   (clase añadida por JS; :has() fallback por si el navegador lo soporta) */
body.ch-no-scroll { overflow: hidden; }
@supports selector(:has(*)) {
    body:has(#mobile-menu-overlay.translate-y-0) { overflow: hidden; }
}

/* =====================================================================
   OVERRIDES LEGACY — neutraliza .ch-header-pop antigua si queda en caché
   ===================================================================== */
body .ch-header.ch-header-pop {
    background-image: none !important;
    box-shadow: 0 1px 0 var(--ch-border) !important;
    border-bottom: 1px solid var(--ch-border) !important;
    height: auto !important;
    min-height: 0 !important;
}
.ch-header::before,
.ch-header::after { content: none !important; }

/* =====================================================================
   =====================================================================
   SHOP v2 — Tienda editorial (scoped a .ch-shop)
   Reutiliza tokens --ch-* definidos en FRONT-PAGE v2 y HEADER v2.
   Anula la paleta pop-art antigua cuando aparezca en páginas de tienda.
   ===================================================================== */

/* Tokens fallback — por si .ch-shop carga sin home visitada antes */
.ch-shop {
    --ch-cream:        #fcf8f5;
    --ch-cream-soft:   #fdfbf7;
    --ch-white:        #ffffff;
    --ch-ink:          #1a1a1a;
    --ch-ink-soft:     #3a3a3a;
    --ch-text:         #4a4a4a;
    --ch-text-muted:   #7a7a7a;
    --ch-border:       #e9e4db;
    --ch-red:          #ED3D3B;
    --ch-red-hover:    #d62f2d;
    --ch-shadow-sm:    0 1px 2px rgba(26,26,26,.06), 0 2px 8px rgba(26,26,26,.04);
    --ch-shadow-md:    0 2px 4px rgba(26,26,26,.06), 0 8px 24px rgba(26,26,26,.06);
    --ch-shadow-lift:  0 10px 30px rgba(26,26,26,.08), 0 2px 6px rgba(26,26,26,.04);
    --ch-radius:       14px;
    --ch-radius-sm:    8px;

    background-color: var(--ch-cream-soft);
    color: var(--ch-text);
    font-family: 'DM Sans', sans-serif;
}

/* Anula el fondo de puntos grises legacy en shop/cat */
body.woocommerce,
body.post-type-archive-product,
body.tax-product_cat {
    background-color: var(--ch-cream-soft, #fdfbf7) !important;
    background-image: none !important;
}
.ch-shop .section-shop-custom {
    background-image: none !important;
    background-color: transparent !important;
}

/* ---------- Primitives (reutilizables en shop) ---------- */
.ch-shop .ch-kicker {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ch-red);
    margin-bottom: 0.6rem;
}

.ch-shop .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.ch-shop .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
    letter-spacing: 0.04em;
    padding: 0.85rem 1.4rem;
    border-radius: var(--ch-radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ch-shop .btn-primary {
    background-color: var(--ch-ink);
    color: var(--ch-white);
    border-color: var(--ch-ink);
}
.ch-shop .btn-primary:hover {
    background-color: var(--ch-red);
    border-color: var(--ch-red);
    transform: translateY(-1px);
    box-shadow: var(--ch-shadow-md);
    color: var(--ch-white);
}
.ch-shop .btn-outline {
    background-color: var(--ch-white);
    color: var(--ch-ink);
    border-color: var(--ch-ink);
}
.ch-shop .btn-outline:hover {
    background-color: var(--ch-ink);
    color: var(--ch-white);
    transform: translateY(-1px);
}
.ch-shop .btn-ghost {
    background-color: transparent;
    color: var(--ch-ink);
    border-color: var(--ch-border);
}
.ch-shop .btn-ghost:hover {
    border-color: var(--ch-ink);
    background-color: var(--ch-cream);
}
.ch-shop .btn-disabled {
    background-color: var(--ch-cream);
    color: var(--ch-text-muted);
    border-color: var(--ch-border);
    cursor: not-allowed;
}

/* =====================================================================
   1. SHOP HERO — mínimo
   ===================================================================== */
.ch-shop-hero {
    background-color: var(--ch-cream);
    border-bottom: 1px solid var(--ch-border);
}
.ch-shop-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem) clamp(2rem, 4vw, 3rem);
    text-align: center;
}
.ch-shop-hero__title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2.5rem, 6vw, 4.2rem);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ch-ink);
    margin: 0 0 0.75rem;
}
.ch-shop-hero__lede {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ch-text);
    max-width: 38rem;
    margin: 0 auto 1rem;
}
.ch-shop-hero__count {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ch-text-muted);
    margin: 0;
}
.ch-shop-hero__count span { color: var(--ch-ink); }

/* =====================================================================
   2. TOOLBAR — filtros + sort
   ===================================================================== */
.ch-shop-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: rgba(253, 251, 247, 0.96);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--ch-border);
}
/* Cuando el header ya es sticky no queremos solapamiento; ajusta top si tienes header sticky */
@media (min-width: 1024px) {
    .ch-shop-toolbar { top: 88px; }
}
@media (max-width: 1023px) {
    .ch-shop-toolbar { top: 80px; }
}

.ch-shop-toolbar__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.9rem clamp(1rem, 3vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* --- Filtros pills --- */
.ch-shop-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.25rem 0.25rem 0.5rem;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.ch-shop-filters::-webkit-scrollbar { display: none; }

@media (max-width: 640px) {
    .ch-shop-toolbar__inner { flex-direction: column; align-items: stretch; gap: 0.75rem; }
}

.ch-filter-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    background-color: var(--ch-white);
    color: var(--ch-ink);
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
    border: 1px solid var(--ch-border);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.ch-filter-pill:hover {
    border-color: var(--ch-ink);
    background-color: var(--ch-cream);
}
.ch-filter-pill.is-active,
.ch-filter-pill[aria-pressed="true"] {
    background-color: var(--ch-ink);
    color: var(--ch-white);
    border-color: var(--ch-ink);
}
.ch-filter-pill__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 0.35rem;
    border-radius: 999px;
    background-color: var(--ch-cream);
    color: var(--ch-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0;
    transition: background-color .18s ease, color .18s ease;
}
.ch-filter-pill.is-active .ch-filter-pill__count,
.ch-filter-pill[aria-pressed="true"] .ch-filter-pill__count {
    background-color: rgba(255,255,255,.18);
    color: var(--ch-white);
}
.ch-filter-pill:focus-visible {
    outline: 2px solid var(--ch-ink);
    outline-offset: 3px;
}

/* --- Sort select (nativo, bien estilizado) --- */
.ch-shop-sort {
    flex: 0 0 auto;
    position: relative;
}
.ch-shop-sort__select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.55rem 2.25rem 0.55rem 1rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ch-ink);
    background-color: var(--ch-white);
    border: 1px solid var(--ch-border);
    border-radius: 999px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 L6 6.5 L11 1.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 10px 7px;
    transition: border-color .18s ease, background-color .18s ease;
}
.ch-shop-sort__select:hover { border-color: var(--ch-ink); }
.ch-shop-sort__select:focus-visible {
    outline: 2px solid var(--ch-ink);
    outline-offset: 3px;
}

/* =====================================================================
   3. GRID + BOOK-CARD (scoped a .ch-shop — paralelo al .home)
   ===================================================================== */
.ch-shop-body__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2rem) clamp(4rem, 7vw, 6rem);
}

.ch-shop .ch-shop-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.75rem;
}
@media (min-width: 1100px) {
    .ch-shop .ch-shop-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}
@media (min-width: 1400px) {
    .ch-shop .ch-shop-grid { grid-template-columns: repeat(5, 1fr); }
}

/* .book-card reutilizada (los mismos estilos que en home, re-declarados
   para no depender de body.home) */
.ch-shop .book-card {
    display: flex;
    flex-direction: column;
    background-color: var(--ch-white);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ch-shop .book-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ch-shadow-lift);
    border-color: #d6cfc1;
}

.ch-shop .book-card__media {
    display: block;
    aspect-ratio: 3 / 4;
    background-color: var(--ch-cream);
    position: relative;
    overflow: hidden;
}
.ch-shop .book-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
    transition: transform .45s ease;
}
.ch-shop .book-card:hover .book-card__media img {
    transform: scale(1.04);
}

/* Badges (Nuevo / Oferta) */
.ch-shop .book-card__badges {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    z-index: 2;
}
.ch-shop .book-card__badge {
    display: inline-block;
    padding: 0.25rem 0.55rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 999px;
    line-height: 1;
}
.ch-shop .book-card__badge--new {
    background-color: var(--ch-ink);
    color: var(--ch-white);
}
.ch-shop .book-card__badge--sale {
    background-color: var(--ch-red);
    color: var(--ch-white);
}

/* Precio (esquina derecha superior) */
.ch-shop .book-card__price {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background-color: var(--ch-ink);
    color: var(--ch-white);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    line-height: 1;
    z-index: 2;
}
.ch-shop .book-card__price * {
    color: var(--ch-white) !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.ch-shop .book-card__price del {
    opacity: 0.55;
    margin-right: 0.3em;
}

/* Body */
.ch-shop .book-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1rem 1.1rem 1.1rem;
    flex-grow: 1;
}
.ch-shop .book-card__meta {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ch-text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.ch-shop .book-card__cat {
    color: var(--ch-ink);
    font-weight: 700;
}
.ch-shop .book-card__author {
    color: var(--ch-text-muted);
}
.ch-shop .book-card__title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 1.15rem;
    line-height: 1.2;
    color: var(--ch-ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}
.ch-shop .book-card__title a {
    color: inherit;
    text-decoration: none;
}
.ch-shop .book-card__title a:hover { color: var(--ch-red); }

.ch-shop .product-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.6rem;
}
.ch-shop .product-actions .btn {
    font-size: 0.82rem;
    padding: 0.7rem 0.8rem;
    width: 100%;
}

/* Estados WC (ajax carrito) */
.ch-shop .product-actions__buy.loading {
    opacity: 0.65;
    pointer-events: none;
    position: relative;
}
.ch-shop .product-actions__buy.added::after {
    content: " ✓";
    font-weight: 700;
}
.ch-shop .added_to_cart { display: none !important; }

/* =====================================================================
   4. EMPTY STATE
   ===================================================================== */
.ch-shop-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: clamp(3rem, 7vw, 5rem) 1rem;
    background-color: var(--ch-white);
    border: 1px dashed var(--ch-border);
    border-radius: var(--ch-radius);
    margin-top: 2rem;
}
.ch-shop-empty__title {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 900;
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    color: var(--ch-ink);
    margin: 0 0 0.5rem;
}
.ch-shop-empty__body {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--ch-text);
    margin: 0 0 1.25rem;
}

/* =====================================================================
   5. OVERRIDES LEGACY — apaga shop pop-art antiguo si aparece
   ===================================================================== */
body.woocommerce .shop-filter-btn,
body.post-type-archive-product .shop-filter-btn { display: none !important; }

body.woocommerce .section-shop-custom,
body.post-type-archive-product .section-shop-custom {
    background-image: none !important;
}

/* Oculta el "hero pop-art" antiguo si el DOM aún lo monta */
.ch-shop .product-card-wrapper { display: none !important; }

/* WC default results-count y ordering (los reemplazamos con nuestra toolbar) */
.ch-shop .woocommerce-result-count,
.ch-shop .woocommerce-ordering { display: none !important; }

/* =====================================================================
   6. MOBILE AJUSTES
   ===================================================================== */
@media (max-width: 640px) {
    .ch-shop-hero__inner { padding-top: 2.25rem; padding-bottom: 2rem; }
    .ch-shop-toolbar { position: static; }
    .ch-shop .ch-shop-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .ch-shop .book-card__body { padding: 0.75rem 0.85rem 0.85rem; }
    .ch-shop .book-card__title { font-size: 1rem; min-height: auto; }
    .ch-shop .product-actions { grid-template-columns: 1fr; }
    .ch-shop .product-actions .btn { padding: 0.75rem 0.8rem; }
}

/* =====================================================================
   =====================================================================
   SHOP FIX — Reglas defensivas post-deploy (debug de grid roto + overlay)
   Corrige: columnas angostas, imágenes colapsadas, círculo .onsale,
   toolbar como "segundo header".
   ===================================================================== */

/* -- 1) Reset absoluto de ul.products dentro de .ch-shop -----------------
   Gana a cualquier .woocommerce ul.products legacy o plugin que se cuele */
body.woocommerce .ch-shop ul.products.ch-shop-grid,
body.post-type-archive-product .ch-shop ul.products.ch-shop-grid,
.ch-shop ul.products.ch-shop-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 1.75rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
@media (min-width: 1100px) {
    body.woocommerce .ch-shop ul.products.ch-shop-grid,
    body.post-type-archive-product .ch-shop ul.products.ch-shop-grid,
    .ch-shop ul.products.ch-shop-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 2rem !important;
    }
}
@media (min-width: 1400px) {
    body.woocommerce .ch-shop ul.products.ch-shop-grid,
    body.post-type-archive-product .ch-shop ul.products.ch-shop-grid,
    .ch-shop ul.products.ch-shop-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}
@media (max-width: 640px) {
    body.woocommerce .ch-shop ul.products.ch-shop-grid,
    body.post-type-archive-product .ch-shop ul.products.ch-shop-grid,
    .ch-shop ul.products.ch-shop-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
}

/* -- 2) Reset del <li class="product"> dentro del grid -----------------
   WC por defecto hace float: left; width: 22.05%; — lo anulamos */
body.woocommerce .ch-shop ul.products.ch-shop-grid > li,
body.post-type-archive-product .ch-shop ul.products.ch-shop-grid > li,
.ch-shop ul.products.ch-shop-grid > li,
.ch-shop ul.products.ch-shop-grid > li.product,
.ch-shop ul.products.ch-shop-grid > li.book-card {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
/* La tarjeta propia sí quiere background/border-radius; lo re-aplicamos */
.ch-shop ul.products.ch-shop-grid > li.book-card {
    background-color: var(--ch-white) !important;
    border: 1px solid var(--ch-border) !important;
    border-radius: var(--ch-radius) !important;
    overflow: hidden !important;
}

/* -- 3) Imagen forzada a comportarse dentro del media ratio 3:4 ------- */
.ch-shop .book-card__media {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    background-color: var(--ch-cream) !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
}
.ch-shop .book-card__media > img,
.ch-shop ul.products li.product a img.book-card__media img,
.ch-shop ul.products li.product .book-card__media img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    padding: 1rem !important;
    margin: 0 !important;
    display: block !important;
    box-shadow: none !important;
}

/* -- 4) Matar cualquier .onsale / star-rating / result-count que se cuele */
.ch-shop .onsale,
.ch-shop span.onsale,
.ch-shop .woocommerce span.onsale,
.ch-shop .star-rating,
.ch-shop .woocommerce-result-count,
.ch-shop .woocommerce-ordering,
.ch-shop .woocommerce-pagination,
.ch-shop .woocommerce-breadcrumb {
    display: none !important;
}

/* -- 5) Desestickar toolbar para que no parezca "segundo header" -------
   Mantener borde inferior como separador visual. */
.ch-shop .ch-shop-toolbar {
    position: static !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: var(--ch-cream-soft) !important;
}

/* -- 6) [hidden] garantizado para empty-state ------------------------- */
.ch-shop [hidden] { display: none !important; }

/* -- 7) Anular las reglas pop-art legacy en body.woocommerce ---------- */
body.woocommerce,
body.post-type-archive-product,
body.tax-product_cat {
    background-image: none !important;
    background-size: initial !important;
}

/* -- 8) Forzar ocultamiento del hero pop-art legacy si el DOM aún lo trae */
.ch-shop .section-shop-custom > .container:first-child,
.ch-shop .shop-filters-bar,
.ch-shop .product-card-wrapper {
    display: none !important;
}

/* -- 9) WC a veces imprime un .woocommerce-notices-wrapper vacío arriba */
.ch-shop .woocommerce-notices-wrapper:empty { display: none !important; }

/* -- 10) Desactivar animación en prefers-reduced-motion --------------- */
@media (prefers-reduced-motion: reduce) {
    .ch-shop .book-card,
    .ch-shop .book-card__media img,
    .ch-shop .ch-filter-pill { transition: none !important; }
}

/* =====================================================================
   =====================================================================
   SINGLE PRODUCT v2 — editorial (scoped a .ch-product)
   Reemplaza block 10 pop-art. Tokens compartidos con home y shop.
   Neutraliza también los .chibalete-lightbox-* (círculo blanco flotante).
   ===================================================================== */

.ch-product {
    --ch-cream:        #fcf8f5;
    --ch-cream-soft:   #fdfbf7;
    --ch-white:        #ffffff;
    --ch-ink:          #1a1a1a;
    --ch-ink-soft:     #3a3a3a;
    --ch-text:         #4a4a4a;
    --ch-text-muted:   #7a7a7a;
    --ch-border:       #e9e4db;
    --ch-red:          #ED3D3B;
    --ch-red-hover:    #d62f2d;
    --ch-radius:       14px;
    --ch-radius-sm:    8px;
    --ch-shadow-sm:    0 1px 2px rgba(26,26,26,.06), 0 2px 8px rgba(26,26,26,.04);
    --ch-shadow-md:    0 2px 4px rgba(26,26,26,.06), 0 8px 24px rgba(26,26,26,.06);
    --ch-shadow-lift:  0 10px 30px rgba(26,26,26,.08), 0 2px 6px rgba(26,26,26,.04);

    background-color: var(--ch-cream-soft);
    color: var(--ch-text);
    font-family: 'DM Sans', sans-serif;
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* Anula cualquier fondo legacy de body.single-product */
body.single-product,
body.woocommerce.single-product {
    background-color: var(--ch-cream-soft, #fdfbf7) !important;
    background-image: none !important;
}

/* Anula el wrapper pop-art antiguo si aún existe en cache */
.ch-product .section-single-product,
.ch-product .chb-single-product-container,
.ch-product .product-top-grid,
.ch-product .product-gallery-col,
.ch-product .product-info-col,
.ch-product .product-details-block,
.ch-product .geo-decor {
    all: revert;
}

/* ---------- BREADCRUMB ---------- */
.ch-product-breadcrumb {
    background-color: var(--ch-cream);
    border-bottom: 1px solid var(--ch-border);
}
.ch-product-breadcrumb__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.85rem clamp(1rem, 3vw, 2rem);
}
.ch-product-breadcrumb__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.35rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ch-text-muted);
}
.ch-product-breadcrumb__list li { display: inline-flex; align-items: center; gap: 0.35rem; }
.ch-product-breadcrumb__list a {
    color: var(--ch-text-muted);
    text-decoration: none;
    transition: color .18s ease;
}
.ch-product-breadcrumb__list a:hover { color: var(--ch-ink); }
.ch-product-breadcrumb__list li:last-child { color: var(--ch-ink); }

/* Si WC inserta su propio .woocommerce-breadcrumb, lo estilizamos igual */
.ch-product .woocommerce-breadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.85rem clamp(1rem, 3vw, 2rem);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ch-text-muted);
}
.ch-product .woocommerce-breadcrumb a {
    color: var(--ch-text-muted);
    text-decoration: none;
}
.ch-product .woocommerce-breadcrumb a:hover { color: var(--ch-ink); }

/* ---------- PRODUCT HERO ---------- */
.ch-product-hero {
    padding: clamp(2rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.ch-product-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: flex-start;
}
@media (min-width: 960px) {
    .ch-product-hero__inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: clamp(2.5rem, 4vw, 4rem);
    }
}

/* GALERÍA */
.ch-product-hero__media {
    position: relative;
    min-width: 0;
}
@media (min-width: 960px) {
    .ch-product-hero__media {
        position: sticky;
        top: 110px; /* altura header + respiro */
    }
}

.ch-product .woocommerce-product-gallery {
    opacity: 1 !important;
    position: relative;
    margin: 0;
}

/* Figura principal */
.ch-product .woocommerce-product-gallery__wrapper {
    background-color: var(--ch-cream);
    border-radius: var(--ch-radius);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    position: relative;
}
.ch-product .woocommerce-product-gallery__image {
    width: 100%;
    height: 100%;
    margin: 0;
}
.ch-product .woocommerce-product-gallery__image a {
    display: block;
    width: 100%;
    height: 100%;
}
.ch-product .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: clamp(1rem, 3vw, 2rem) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    transition: transform .45s ease !important;
    cursor: zoom-in;
    margin: 0 !important;
}
.ch-product .woocommerce-product-gallery__image:hover img {
    transform: scale(1.02);
}

/* Trigger del zoom que WC inyecta */
.ch-product .woocommerce-product-gallery__trigger {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    width: 40px !important;
    height: 40px !important;
    background-color: var(--ch-white) !important;
    color: var(--ch-ink) !important;
    border: 1px solid var(--ch-border) !important;
    border-radius: 999px !important;
    text-indent: -9999px;
    overflow: hidden;
    z-index: 9;
    box-shadow: var(--ch-shadow-sm) !important;
}
.ch-product .woocommerce-product-gallery__trigger::before {
    content: "+";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    text-indent: 0;
}

/* Thumbnails */
.ch-product .flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem !important;
    padding: 0;
    list-style: none;
}
.ch-product .flex-control-thumbs li {
    width: calc(20% - 0.4rem) !important;
    margin: 0 !important;
}
.ch-product .flex-control-thumbs img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border: 1px solid var(--ch-border) !important;
    border-radius: var(--ch-radius-sm);
    opacity: 0.55 !important;
    cursor: pointer;
    transition: opacity .2s ease, border-color .2s ease;
}
.ch-product .flex-control-thumbs img:hover,
.ch-product .flex-control-thumbs .flex-active {
    opacity: 1 !important;
    border-color: var(--ch-ink) !important;
}

/* INFO */
.ch-product-hero__info {
    padding: 0;
    min-width: 0;
}

.ch-product-chip {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background-color: var(--ch-cream);
    color: var(--ch-ink);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 1px solid var(--ch-border);
    border-radius: 999px;
    text-decoration: none;
    margin-bottom: 1rem;
    transition: background-color .18s ease, border-color .18s ease;
}
.ch-product-chip:hover {
    background-color: var(--ch-white);
    border-color: var(--ch-ink);
    color: var(--ch-ink);
}

.ch-product-title {
    font-family: 'Playfair Display', serif !important;
    font-weight: 900 !important;
    font-style: italic !important;
    font-size: clamp(2rem, 4vw, 3.25rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.015em;
    color: var(--ch-ink) !important;
    text-transform: none !important;
    margin: 0 0 0.5rem !important;
}

.ch-product-author {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--ch-text-muted);
    margin: 0 0 1.5rem;
}

.ch-product-price {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    color: var(--ch-ink);
    margin: 0 0 1.5rem;
    line-height: 1;
}
.ch-product-price .woocommerce-Price-amount,
.ch-product-price .amount {
    color: inherit;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}
.ch-product-price del {
    color: var(--ch-text-muted);
    font-weight: 400;
    font-size: 0.7em;
    margin-right: 0.5rem;
    opacity: .8;
}
.ch-product-price ins {
    text-decoration: none;
}

.ch-product-lede {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ch-text);
    padding: 1.25rem 1.4rem;
    background-color: var(--ch-white);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius);
    margin: 0 0 1.75rem;
}
.ch-product-lede p { margin: 0 0 0.75rem; }
.ch-product-lede p:last-child { margin-bottom: 0; }

/* ---------- CTA ---------- */
.ch-product-cta {
    margin: 0 0 2rem;
}
.ch-product-cta form.cart {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0;
}
.ch-product-cta .quantity {
    display: inline-flex;
    align-items: center;
    height: 52px;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-sm);
    background-color: var(--ch-white);
    overflow: hidden;
}
.ch-product-cta .quantity input.qty {
    width: 64px;
    height: 52px;
    border: none !important;
    background: transparent;
    text-align: center;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--ch-ink);
    appearance: textfield;
    -moz-appearance: textfield;
}
.ch-product-cta .quantity input.qty::-webkit-inner-spin-button,
.ch-product-cta .quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ch-product-cta .quantity label { display: none; }

.ch-product .single_add_to_cart_button,
.ch-product button.single_add_to_cart_button,
.ch-product-cta .single_add_to_cart_button {
    flex: 1 1 auto;
    min-width: 180px;
    background-color: var(--ch-ink) !important;
    color: var(--ch-white) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    padding: 1rem 1.75rem !important;
    border: 2px solid var(--ch-ink) !important;
    border-radius: var(--ch-radius-sm) !important;
    box-shadow: none !important;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
    cursor: pointer;
    text-align: center;
    height: 52px;
}
.ch-product .single_add_to_cart_button:hover {
    background-color: var(--ch-red) !important;
    border-color: var(--ch-red) !important;
    color: var(--ch-white) !important;
    transform: translateY(-1px);
    box-shadow: var(--ch-shadow-md) !important;
}
.ch-product .single_add_to_cart_button:disabled,
.ch-product .single_add_to_cart_button.disabled {
    background-color: var(--ch-cream) !important;
    color: var(--ch-text-muted) !important;
    border-color: var(--ch-border) !important;
    cursor: not-allowed;
}

/* Variaciones (si son productos variables) */
.ch-product .variations_form .variations {
    margin-bottom: 1rem;
}
.ch-product .variations td, .ch-product .variations th {
    padding: 0.4rem 0.5rem;
    background: transparent;
    border: none;
}
.ch-product .variations select {
    padding: 0.7rem 1rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-sm);
    background-color: var(--ch-white);
    color: var(--ch-ink);
}

/* ---------- TRUST BLOCK ---------- */
.ch-product-trust {
    list-style: none;
    padding: 1.25rem;
    margin: 0;
    background-color: var(--ch-white);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.ch-product-trust__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--ch-text);
}
.ch-product-trust__item svg {
    flex-shrink: 0;
    color: var(--ch-ink);
    margin-top: 2px;
}
.ch-product-trust__item strong {
    display: block;
    font-weight: 700;
    color: var(--ch-ink);
    margin-bottom: 2px;
    font-size: 0.95rem;
}
.ch-product-trust__item span {
    display: block;
    color: var(--ch-text);
    font-size: 0.9rem;
}

/* ---------- METADATOS EDITORIALES (cinta) ---------- */
.ch-product-meta {
    background-color: var(--ch-cream);
    border-top: 1px solid var(--ch-border);
    border-bottom: 1px solid var(--ch-border);
}
.ch-product-meta__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem);
}
.ch-product-meta__list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.25rem 2rem;
}
.ch-product-meta__item { margin: 0; }
.ch-product-meta__item dt {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ch-text-muted);
    margin-bottom: 0.35rem;
}
.ch-product-meta__item dd {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--ch-ink);
    margin: 0;
    line-height: 1.3;
}

/* ---------- DESCRIPCIÓN LARGA ---------- */
.ch-product-description {
    padding: clamp(3rem, 6vw, 5rem) 0;
}
.ch-product-description__inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}
.ch-product-description__title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    color: var(--ch-ink);
    margin: 0 0 1.5rem;
    line-height: 1.05;
}
.ch-product-description__body {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--ch-text);
}
.ch-product-description__body p {
    margin: 0 0 1.2rem;
}
.ch-product-description__body h2,
.ch-product-description__body h3 {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 900;
    color: var(--ch-ink);
    margin: 2rem 0 1rem;
    line-height: 1.15;
}
.ch-product-description__body h2 { font-size: 1.6rem; }
.ch-product-description__body h3 { font-size: 1.3rem; }
.ch-product-description__body a {
    color: var(--ch-ink);
    text-decoration: underline;
    text-decoration-color: var(--ch-red);
    text-underline-offset: 4px;
}
.ch-product-description__body blockquote {
    margin: 1.75rem 0;
    padding: 1rem 1.5rem;
    border-left: 3px solid var(--ch-red);
    font-style: italic;
    color: var(--ch-ink-soft);
}
.ch-product-description__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ch-radius-sm);
    margin: 1.5rem 0;
}

/* ---------- RELATED PRODUCTS ---------- */
.ch-product-related {
    padding-bottom: clamp(3rem, 6vw, 5rem);
    border-top: 1px solid var(--ch-border);
    padding-top: clamp(3rem, 6vw, 5rem);
}
.ch-product-related__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}

/* Estilos de los related products renderizados por WC */
.ch-product-related .related.products > h2,
.ch-product-related .upsells.products > h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(1.6rem, 3vw, 2rem);
    color: var(--ch-ink);
    margin: 0 0 2rem;
    line-height: 1.1;
    text-align: center;
}
.ch-product-related ul.products {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 1.5rem !important;
}
.ch-product-related ul.products li.product {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background-color: var(--ch-white) !important;
    border: 1px solid var(--ch-border) !important;
    border-radius: var(--ch-radius) !important;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ch-product-related ul.products li.product:hover {
    transform: translateY(-3px);
    box-shadow: var(--ch-shadow-md);
    border-color: #d6cfc1;
}
.ch-product-related ul.products li.product a {
    text-decoration: none;
    color: var(--ch-ink);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.ch-product-related ul.products li.product img {
    width: 100% !important;
    aspect-ratio: 3 / 4;
    object-fit: contain !important;
    padding: 1rem !important;
    background-color: var(--ch-cream) !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
}
.ch-product-related ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Playfair Display', serif !important;
    font-weight: 900 !important;
    font-size: 1.1rem !important;
    line-height: 1.2;
    color: var(--ch-ink) !important;
    padding: 1rem 1rem 0.35rem !important;
    margin: 0 !important;
    text-transform: none !important;
}
.ch-product-related ul.products li.product .price {
    padding: 0 1rem 1rem;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--ch-ink) !important;
    display: block;
}
.ch-product-related ul.products li.product .price del { opacity: .55; margin-right: 0.4rem; }

.ch-product-related ul.products li.product .button,
.ch-product-related ul.products li.product .add_to_cart_button {
    margin: 0 1rem 1rem !important;
    background-color: var(--ch-ink) !important;
    color: var(--ch-white) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    padding: 0.7rem 1rem !important;
    border: 2px solid var(--ch-ink) !important;
    border-radius: var(--ch-radius-sm) !important;
    box-shadow: none !important;
    text-transform: none !important;
    transition: background-color .18s ease, border-color .18s ease !important;
}
.ch-product-related ul.products li.product .button:hover {
    background-color: var(--ch-red) !important;
    border-color: var(--ch-red) !important;
}
.ch-product-related .onsale { display: none !important; }

/* ---------- NOTICES WC (si add-to-cart confirma) ---------- */
.ch-product .woocommerce-notices-wrapper,
body.single-product .woocommerce-notices-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}
.ch-product .woocommerce-message,
body.single-product .woocommerce-message {
    border-left: 3px solid var(--ch-red) !important;
    background-color: var(--ch-white) !important;
    color: var(--ch-ink) !important;
    border-radius: var(--ch-radius-sm) !important;
    font-family: 'DM Sans', sans-serif !important;
    padding: 1rem 1.25rem !important;
}
.ch-product .woocommerce-message .button {
    background-color: var(--ch-ink) !important;
    color: var(--ch-white) !important;
    border-radius: var(--ch-radius-sm) !important;
    padding: 0.5rem 1rem !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
    text-transform: none !important;
    border: 2px solid var(--ch-ink) !important;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 959px) {
    .ch-product-hero__inner { gap: 2rem; }
    .ch-product-hero__media { position: static; }
    .ch-product-title { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }
    .ch-product-cta form.cart { gap: 0.5rem; }
    .ch-product .single_add_to_cart_button { min-width: 150px; }
}
@media (max-width: 640px) {
    .ch-product-hero { padding-top: 1.5rem; }
    .ch-product-cta .quantity,
    .ch-product .single_add_to_cart_button { width: 100%; }
    .ch-product-cta form.cart { flex-direction: column; align-items: stretch; }
    .ch-product-cta .quantity { width: 100%; }
    .ch-product-cta .quantity input.qty { width: 100%; }
    .ch-product-meta__list { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ch-product .woocommerce-product-gallery__image img,
    .ch-product-related ul.products li.product { transition: none !important; }
}

/* =====================================================================
   FIX OVERLAY — Lightbox PhotoSwipe (círculo blanco gigante)
   Solo este fix. No rediseña. No toca layout.
   ===================================================================== */

.chibalete-lightbox-arrow,
.chibalete-lightbox-close-label {
    display: none !important;
}

.pswp:not(.pswp--open) {
    display: none !important;
    visibility: hidden !important;
}

.pswp:not(.pswp--open) .pswp__button {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* =====================================================================
   FIX HEADER LOGO — Tienda / single-product
   Causa: WooCommerce core .woocommerce img { height: auto; max-width: 100% }
   (especificidad 0,1,1) sobrescribe .ch-header__logo-img { height: 44px }
   (especificidad 0,1,0), provocando que el logo de 1024px se renderice a
   intrinsic size y tape la página entera.
   Solución: subir especificidad del selector del logo del header.
   No rediseña nada más. No toca single-product / archive-product.
   ===================================================================== */

header.ch-header .ch-header__logo,
body.woocommerce header.ch-header .ch-header__logo,
body.single-product header.ch-header .ch-header__logo,
body.post-type-archive-product header.ch-header .ch-header__logo {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

header.ch-header .ch-header__logo-img,
body.woocommerce header.ch-header .ch-header__logo-img,
body.single-product header.ch-header .ch-header__logo-img,
body.post-type-archive-product header.ch-header .ch-header__logo-img,
body.woocommerce-page header.ch-header .ch-header__logo-img {
    height: 44px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 44px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    transform: none !important;
    position: static !important;
}

@media (min-width: 1024px) {
    header.ch-header .ch-header__logo-img,
    body.woocommerce header.ch-header .ch-header__logo-img,
    body.single-product header.ch-header .ch-header__logo-img,
    body.post-type-archive-product header.ch-header .ch-header__logo-img,
    body.woocommerce-page header.ch-header .ch-header__logo-img {
        height: 52px !important;
        max-height: 52px !important;
    }
}

/* Apagar pseudo-elementos y decoraciones heredadas del header legacy
   (.ch-header-pop::before / ::after aplicaban halftone de puntos) */
header.ch-header::before,
header.ch-header::after,
header.ch-header .ch-header__inner::before,
header.ch-header .ch-header__inner::after,
header.ch-header .ch-header__logo::before,
header.ch-header .ch-header__logo::after {
    content: none !important;
    background: none !important;
}

/* Defensa extra: cualquier img dentro del header no puede crecer más del alto del header */
header.ch-header img {
    max-height: 52px !important;
}

/* =====================================================================
   =====================================================================
   BLOG v2 — Revista editorial (scoped a .ch-blog)
   Aplica a page-sopa-de-letras.php, home.php y archive.php.
   Reutiliza tokens --ch-* del home. Anula el fondo punteado y los
   estilos pop-art del blog legacy.
   ===================================================================== */

.ch-blog {
    --ch-cream:        #fcf8f5;
    --ch-cream-soft:   #fdfbf7;
    --ch-white:        #ffffff;
    --ch-ink:          #1a1a1a;
    --ch-ink-soft:     #3a3a3a;
    --ch-text:         #4a4a4a;
    --ch-text-muted:   #7a7a7a;
    --ch-border:       #e9e4db;
    --ch-red:          #ED3D3B;
    --ch-red-hover:    #d62f2d;
    --ch-radius:       14px;
    --ch-radius-sm:    8px;
    --ch-shadow-sm:    0 1px 2px rgba(26,26,26,.06), 0 2px 8px rgba(26,26,26,.04);
    --ch-shadow-md:    0 2px 4px rgba(26,26,26,.06), 0 8px 24px rgba(26,26,26,.06);
    --ch-shadow-lift:  0 10px 30px rgba(26,26,26,.08), 0 2px 6px rgba(26,26,26,.04);

    background-color: var(--ch-cream-soft);
    color: var(--ch-text);
    font-family: 'DM Sans', sans-serif;
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* Anula el fondo punteado y la estética pop-art del blog legacy */
body.page-template-page-sopa-de-letras,
body.blog,
body.archive,
body.category,
body.tag,
body.search-results {
    background-color: var(--ch-cream-soft, #fdfbf7) !important;
    background-image: none !important;
}
body.page-template-page-sopa-de-letras .chibalete-sopa-page {
    background-image: none !important;
    background-color: transparent !important;
    padding: 0 !important;
}

/* Primitives reutilizables */
.ch-blog .ch-kicker {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ch-red);
    margin-bottom: 0.75rem;
}
.ch-blog .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* =====================================================================
   1. HEADER DE SECCIÓN
   ===================================================================== */
.ch-blog-header {
    background-color: var(--ch-cream);
    border-bottom: 1px solid var(--ch-border);
}
.ch-blog-header__inner {
    max-width: 860px;
    margin: 0 auto;
    padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem) clamp(2.5rem, 5vw, 4rem);
    text-align: left;
}
.ch-blog-header__title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 0.98;
    letter-spacing: -0.015em;
    color: var(--ch-ink);
    margin: 0 0 1rem;
}
.ch-blog-header__lede {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--ch-text);
    max-width: 42rem;
    margin: 0 0 1.75rem;
}
.ch-blog-header__search-state {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    color: var(--ch-text-muted);
    margin: 1rem 0 0;
}
.ch-blog-header__search-state a {
    color: var(--ch-ink);
    text-decoration: underline;
    text-decoration-color: var(--ch-border);
    text-underline-offset: 3px;
}
.ch-blog-header__search-state a:hover { text-decoration-color: var(--ch-red); }

/* Search minimal */
.ch-blog-search {
    position: relative;
    max-width: 480px;
    display: flex;
    gap: 0;
    background-color: var(--ch-white);
    border: 1px solid var(--ch-border);
    border-radius: 999px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.ch-blog-search:focus-within {
    border-color: var(--ch-ink);
    box-shadow: 0 0 0 3px rgba(26,26,26,.06);
}
.ch-blog-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.85rem 1rem 0.85rem 1.25rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--ch-ink);
    background: transparent;
    border: none;
    outline: none;
    border-radius: 999px 0 0 999px;
}
.ch-blog-search__input::placeholder { color: var(--ch-text-muted); }
.ch-blog-search__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 2px;
    background-color: var(--ch-ink);
    color: var(--ch-white);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .18s ease;
}
.ch-blog-search__btn:hover { background-color: var(--ch-red); }

/* =====================================================================
   2. HERO — ARTÍCULO PROTAGONISTA
   ===================================================================== */
.ch-blog-hero {
    padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2rem, 4vw, 3.5rem);
    border-bottom: 1px solid var(--ch-border);
}
.ch-blog-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: center;
}
@media (min-width: 860px) {
    .ch-blog-hero__inner {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        gap: clamp(2rem, 4vw, 3.5rem);
    }
}

.ch-blog-hero__media {
    display: block;
    aspect-ratio: 16 / 10;
    background-color: var(--ch-cream);
    border-radius: var(--ch-radius);
    overflow: hidden;
    position: relative;
    transition: transform .35s ease;
}
.ch-blog-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.ch-blog-hero__media:hover img {
    transform: scale(1.03);
}
.ch-blog-hero__media-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--ch-cream) 0%, #f3ede2 100%);
}

.ch-blog-hero__info {
    min-width: 0;
}
.ch-blog-hero__kicker {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ch-red);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ch-blog-hero__kicker a,
.ch-blog-hero__kicker span {
    color: inherit;
    text-decoration: none;
}
.ch-blog-hero__kicker a:hover { color: var(--ch-ink); }
.ch-blog-hero__kicker span[aria-hidden="true"] { color: var(--ch-text-muted); }

.ch-blog-hero__title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--ch-ink);
    margin: 0 0 1.25rem;
}
.ch-blog-hero__title a {
    color: inherit;
    text-decoration: none;
    transition: color .18s ease;
}
.ch-blog-hero__title a:hover { color: var(--ch-red); }

.ch-blog-hero__excerpt {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--ch-text);
    margin: 0 0 1.25rem;
}
.ch-blog-hero__excerpt p { margin: 0; }

.ch-blog-hero__meta {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ch-text-muted);
    margin: 0 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ch-blog-hero__meta span[aria-hidden="true"] { opacity: 0.5; }

.ch-blog-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ch-ink);
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--ch-ink);
    transition: gap .2s ease, color .18s ease, border-color .18s ease;
}
.ch-blog-hero__cta:hover {
    color: var(--ch-red);
    border-color: var(--ch-red);
    gap: 0.75rem;
}

/* =====================================================================
   3. LIST + GRID
   ===================================================================== */
.ch-blog-list {
    padding: clamp(2.5rem, 5vw, 4rem) 0 0;
}
.ch-blog-list__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}
.ch-blog-list__title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--ch-ink);
    margin: 0 0 2rem;
    line-height: 1.1;
}

.ch-blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 640px) {
    .ch-blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 2rem;
    }
}
@media (min-width: 1024px) {
    .ch-blog-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem 2rem;
    }
}

/* =====================================================================
   4. BLOG CARD
   ===================================================================== */
.ch-blog-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: transparent;
    position: relative;
    padding: 0;
    margin: 0;
    transition: transform .25s ease;
}
.ch-blog-card:hover { transform: translateY(-2px); }

.ch-blog-card__media {
    display: block;
    aspect-ratio: 4 / 3;
    background-color: var(--ch-cream);
    border-radius: var(--ch-radius);
    overflow: hidden;
    position: relative;
    box-shadow: var(--ch-shadow-sm);
    transition: box-shadow .25s ease;
}
.ch-blog-card:hover .ch-blog-card__media {
    box-shadow: var(--ch-shadow-md);
}
.ch-blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.ch-blog-card:hover .ch-blog-card__media img { transform: scale(1.04); }

.ch-blog-card__media-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--ch-cream) 0%, #f3ede2 100%);
}

.ch-blog-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0;
}

.ch-blog-card__meta {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ch-text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.ch-blog-card__cat {
    color: var(--ch-red);
    font-weight: 700;
    text-decoration: none;
    transition: color .18s ease;
}
.ch-blog-card__cat:hover { color: var(--ch-ink); }
.ch-blog-card__dot { opacity: 0.5; }
.ch-blog-card__date time { color: var(--ch-text-muted); }

.ch-blog-card__title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-style: italic;
    font-size: 1.45rem;
    line-height: 1.15;
    color: var(--ch-ink);
    margin: 0;
    letter-spacing: -0.01em;
}
.ch-blog-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color .18s ease;
}
.ch-blog-card__title a:hover { color: var(--ch-red); }

.ch-blog-card__excerpt {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ch-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
.ch-blog-card__excerpt p { margin: 0; }

.ch-blog-card__read {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ch-text-muted);
    margin: 0.25rem 0 0;
}

/* Variante compact (si la quieres usar en widgets) */
.ch-blog-card--compact .ch-blog-card__title { font-size: 1.15rem; }
.ch-blog-card--compact .ch-blog-card__media { aspect-ratio: 3 / 2; }
.ch-blog-card--compact .ch-blog-card__excerpt { -webkit-line-clamp: 2; }

/* =====================================================================
   5. PAGINATION
   ===================================================================== */
.ch-blog-pagination {
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-top: 2.5rem;
    border-top: 1px solid var(--ch-border);
    text-align: center;
}
.ch-blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.75rem;
    margin: 0 0.15rem;
    background-color: transparent;
    color: var(--ch-ink);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    border: 1px solid var(--ch-border);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.ch-blog-pagination .page-numbers:hover {
    border-color: var(--ch-ink);
    background-color: var(--ch-cream);
}
.ch-blog-pagination .page-numbers.current {
    background-color: var(--ch-ink);
    color: var(--ch-white);
    border-color: var(--ch-ink);
}
.ch-blog-pagination .page-numbers.dots {
    border: none;
    background: transparent;
    min-width: auto;
}
.ch-blog-pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: center;
}
.ch-blog-pagination ul li { margin: 0; padding: 0; }

/* Core WP pagination (navigation.pagination) */
.ch-blog-pagination .nav-links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: center;
}
.ch-blog-pagination .nav-links a,
.ch-blog-pagination .nav-links span.current,
.ch-blog-pagination .nav-links span.dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.75rem;
    background-color: transparent;
    color: var(--ch-ink);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    border: 1px solid var(--ch-border);
    border-radius: 999px;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.ch-blog-pagination .nav-links span.current {
    background-color: var(--ch-ink);
    color: var(--ch-white);
    border-color: var(--ch-ink);
}

/* =====================================================================
   6. EMPTY STATE
   ===================================================================== */
.ch-blog-empty {
    padding: clamp(3rem, 7vw, 5rem) 1rem;
    text-align: center;
    background-color: var(--ch-white);
    border: 1px dashed var(--ch-border);
    border-radius: var(--ch-radius);
}
.ch-blog-empty__title {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 900;
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    color: var(--ch-ink);
    margin: 0 0 0.5rem;
}
.ch-blog-empty__body {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--ch-text);
    margin: 0 0 1.25rem;
}
.ch-blog-empty__reset {
    display: inline-block;
    padding: 0.85rem 1.4rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--ch-ink);
    background-color: var(--ch-white);
    border: 2px solid var(--ch-ink);
    border-radius: var(--ch-radius-sm);
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.ch-blog-empty__reset:hover {
    background-color: var(--ch-ink);
    color: var(--ch-white);
    transform: translateY(-1px);
}

/* =====================================================================
   7. OVERRIDES LEGACY — apaga markup antiguo si queda en caché
   ===================================================================== */
.ch-blog .chibalete-sopa-page,
.ch-blog .sopa-container,
.ch-blog .sopa-header,
.ch-blog .sopa-title,
.ch-blog .sopa-post-item,
.ch-blog .sopa-post-thumb,
.ch-blog .sopa-cat-badge,
.ch-blog .section-blog-index,
.ch-blog .blog-grid-expanded,
.ch-blog .section-archive {
    all: revert;
}

/* Para el template anterior estuvo un rato body.blog .ch-blog-latest — lo apagamos aquí */
body.blog #ch-blog-latest,
body.archive #ch-blog-latest { display: none !important; }

/* =====================================================================
   8. RESPONSIVE
   ===================================================================== */
@media (max-width: 768px) {
    .ch-blog-header__inner { text-align: left; }
    .ch-blog-hero__inner { gap: 1.5rem; }
    .ch-blog-hero__title { font-size: clamp(1.8rem, 7vw, 2.6rem); }
    .ch-blog-card__title { font-size: 1.25rem; }
    .ch-blog-search { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ch-blog-card,
    .ch-blog-card__media img,
    .ch-blog-hero__media img { transition: none !important; }
}

/* =====================================================================
   =====================================================================
   BLOG — REFINEMENT PASS
   Capa aditiva (no reestructura). Eleva a revista editorial premium:
   tipografía, ritmo, micro-UX, color.
   ===================================================================== */

/* Token refinado: muted más oscuro para contraste AAA en caps pequeños */
.ch-blog { --ch-text-muted: #6b6b6b; }

/* Transition curve editorial */
.ch-blog {
    --ch-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 1. Font features globales del blog ---------- */
.ch-blog,
.ch-blog .ch-blog-header__title,
.ch-blog .ch-blog-hero__title,
.ch-blog .ch-blog-card__title,
.ch-blog .ch-blog-list__title {
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ---------- 2. Kicker refinado — em-dash opcional ---------- */
.ch-blog .ch-kicker {
    letter-spacing: 0.24em;
    font-size: 0.72rem;
    color: var(--ch-red);
}
.ch-blog .ch-blog-header__inner .ch-kicker::before {
    content: "— ";
    letter-spacing: 0;
    margin-right: 0.15em;
    opacity: 0.9;
}

/* ---------- 3. Header de sección — ritmo ---------- */
.ch-blog-header {
    border-bottom-color: rgba(26, 26, 26, 0.06);
}
.ch-blog-header__title {
    font-size: clamp(2.75rem, 6.5vw, 5rem);
    line-height: 0.96;
    letter-spacing: -0.025em;
    text-wrap: balance;
    margin-bottom: 1.25rem;
}
.ch-blog-header__lede {
    font-size: 1.15rem;
    line-height: 1.55;
    max-width: 36rem;
    color: var(--ch-text);
}

/* ---------- 4. Search — más refinado ---------- */
.ch-blog-search {
    border-color: rgba(26, 26, 26, 0.1);
    transition: border-color .28s var(--ch-ease), box-shadow .28s var(--ch-ease);
}
.ch-blog-search:focus-within {
    box-shadow: 0 0 0 3px rgba(26,26,26,.05);
}
.ch-blog-search__btn {
    transition: background-color .28s var(--ch-ease);
}

/* ---------- 5. HERO — proporciones y ritmo ---------- */
.ch-blog-hero {
    border-bottom-color: rgba(26, 26, 26, 0.06);
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 860px) {
    .ch-blog-hero__inner {
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
        gap: clamp(2.5rem, 5vw, 4.5rem);
        align-items: center;
    }
}

.ch-blog-hero__media {
    box-shadow: 0 1px 2px rgba(26,26,26,.04);
    transition: box-shadow .35s var(--ch-ease);
}
.ch-blog-hero__media:hover {
    box-shadow: 0 8px 24px rgba(26,26,26,.08), 0 2px 4px rgba(26,26,26,.04);
}
.ch-blog-hero__media img {
    transition: transform .6s var(--ch-ease);
}
.ch-blog-hero__media:hover img {
    transform: scale(1.025);
}

.ch-blog-hero__kicker {
    letter-spacing: 0.24em;
    font-size: 0.72rem;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.ch-blog-hero__kicker span[aria-hidden="true"] {
    color: rgba(26,26,26,0.25);
    margin: 0 0.1rem;
}

.ch-blog-hero__title {
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 0.96;
    letter-spacing: -0.025em;
    text-wrap: balance;
    margin-bottom: 1.4rem;
}
.ch-blog-hero__title a {
    transition: color .25s var(--ch-ease);
}

/* Drop cap editorial en el excerpt del hero */
.ch-blog-hero__excerpt {
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--ch-ink-soft);
}
@media (min-width: 860px) {
    .ch-blog-hero__excerpt p:first-of-type::first-letter {
        font-family: 'Playfair Display', serif;
        font-style: italic;
        font-weight: 900;
        font-size: 3.4em;
        line-height: 0.9;
        float: left;
        margin: 0.1em 0.12em 0 -0.04em;
        color: var(--ch-ink);
    }
}

.ch-blog-hero__meta {
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    color: var(--ch-text-muted);
}
.ch-blog-hero__meta span[aria-hidden="true"] {
    color: rgba(26,26,26,0.2);
    margin: 0 0.1rem;
}

.ch-blog-hero__cta {
    border-bottom-width: 1px;
    padding-bottom: 4px;
    letter-spacing: 0.1em;
    transition: gap .32s var(--ch-ease),
                color .25s var(--ch-ease),
                border-color .25s var(--ch-ease);
}

/* ---------- 6. GRID — respiración ---------- */
@media (min-width: 640px) {
    .ch-blog-grid {
        column-gap: 2rem;
        row-gap: 3rem;
    }
}
@media (min-width: 1024px) {
    .ch-blog-grid {
        column-gap: 2rem;
        row-gap: clamp(3rem, 5vw, 4rem);
    }
}

.ch-blog-list__title {
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    letter-spacing: -0.01em;
    margin-bottom: 2.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(26,26,26,0.06);
}

/* ---------- 7. CARD — solo la imagen reacciona ---------- */
.ch-blog-card {
    transition: none;
}
.ch-blog-card:hover { transform: none; }  /* quitamos lift del card */

.ch-blog-card__media {
    box-shadow: none;
    border: 1px solid rgba(26,26,26,0.05);
    transition: border-color .35s var(--ch-ease);
}
.ch-blog-card:hover .ch-blog-card__media {
    box-shadow: none;
    border-color: rgba(26,26,26,0.12);
}
.ch-blog-card__media img {
    transition: transform .6s var(--ch-ease);
}
.ch-blog-card:hover .ch-blog-card__media img {
    transform: scale(1.035);
}

.ch-blog-card__body {
    gap: 0.6rem;
}

.ch-blog-card__meta {
    letter-spacing: 0.18em;
    font-size: 0.7rem;
    gap: 0.65rem;
    color: var(--ch-text-muted);
}
.ch-blog-card__meta .ch-blog-card__dot {
    color: rgba(26,26,26,0.18);
    margin: 0 0.05rem;
}
.ch-blog-card__cat {
    transition: color .25s var(--ch-ease);
}

.ch-blog-card__title {
    font-size: 1.5rem;
    line-height: 1.12;
    letter-spacing: -0.012em;
    text-wrap: balance;
    margin-top: 0.15rem;
}
@media (min-width: 1024px) {
    .ch-blog-card__title { font-size: 1.55rem; }
}
.ch-blog-card__title a {
    transition: color .25s var(--ch-ease);
}

.ch-blog-card__excerpt {
    font-size: 0.975rem;
    line-height: 1.6;
    color: var(--ch-text);
    -webkit-line-clamp: 3;
}

.ch-blog-card__read {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    margin-top: 0.3rem;
    color: var(--ch-text-muted);
}

/* ---------- 8. IMÁGENES — object-position explícito ---------- */
.ch-blog-hero__media img,
.ch-blog-card__media img {
    object-position: center center;
}

/* ---------- 9. PAGINATION — refinamiento ---------- */
.ch-blog-pagination {
    border-top-color: rgba(26,26,26,0.06);
}
.ch-blog-pagination .page-numbers,
.ch-blog-pagination .nav-links a,
.ch-blog-pagination .nav-links span.current,
.ch-blog-pagination .nav-links span.dots {
    min-width: 44px;
    height: 44px;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    border-color: rgba(26,26,26,0.08);
    transition: background-color .25s var(--ch-ease),
                border-color .25s var(--ch-ease),
                color .25s var(--ch-ease);
}

/* ---------- 10. FOCUS — accesible pero discreto ---------- */
.ch-blog a:focus-visible,
.ch-blog button:focus-visible,
.ch-blog input:focus-visible {
    outline: 1.5px solid var(--ch-ink);
    outline-offset: 4px;
    border-radius: 3px;
}
.ch-blog .ch-blog-hero__media:focus-visible,
.ch-blog .ch-blog-card__media:focus-visible {
    outline-offset: 6px;
    border-radius: calc(var(--ch-radius) + 4px);
}

/* ---------- 11. Selección de texto editorial ---------- */
.ch-blog ::selection {
    background-color: rgba(237,61,59,0.18);
    color: var(--ch-ink);
}

/* ---------- 12. Reduced motion — neutraliza scale/zoom ---------- */
@media (prefers-reduced-motion: reduce) {
    .ch-blog-card__media img,
    .ch-blog-hero__media img {
        transform: none !important;
    }
}

/* =====================================================================
   =====================================================================
   SAAS v2 — Landing Chibalete+ (scoped a .ch-saas)
   Coherente con home/blog v2. Sin Elementor. Sin pop-art.
   Narrativa editorial + grid de producto + CTAs claros.
   ===================================================================== */

.ch-saas {
    --ch-cream:        #fcf8f5;
    --ch-cream-soft:   #fdfbf7;
    --ch-white:        #ffffff;
    --ch-ink:          #1a1a1a;
    --ch-ink-soft:     #3a3a3a;
    --ch-text:         #4a4a4a;
    --ch-text-muted:   #6b6b6b;
    --ch-border:       #e9e4db;
    --ch-red:          #ED3D3B;
    --ch-red-hover:    #d62f2d;
    --ch-radius:       14px;
    --ch-radius-sm:    8px;
    --ch-ease:         cubic-bezier(0.22, 1, 0.36, 1);

    background-color: var(--ch-cream-soft);
    color: var(--ch-text);
    font-family: 'DM Sans', sans-serif;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Neutraliza el body de página legacy si aún servía fondos pop-art */
body.page-template-page-saas,
body.page-template-page-saas-php,
body.page-slug-saas {
    background-color: var(--ch-cream-soft, #fdfbf7) !important;
    background-image: none !important;
}

/* Primitivas globales del .ch-saas */
.ch-saas .ch-kicker {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ch-red);
    margin-bottom: 1rem;
}
.ch-saas .ch-kicker--muted { color: var(--ch-text-muted); }

.ch-saas em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 900;
    color: var(--ch-ink);
}

.ch-saas .ch-saas-plus {
    color: var(--ch-red);
    font-weight: 900;
    letter-spacing: 0;
}
.ch-saas .ch-saas-plus-lite {
    color: var(--ch-red);
    font-weight: 400;
    margin: 0 0.15em;
}

.ch-saas .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    letter-spacing: 0.03em;
    padding: 1.05rem 1.6rem;
    border-radius: var(--ch-radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .22s var(--ch-ease),
                background-color .22s var(--ch-ease),
                color .22s var(--ch-ease),
                border-color .22s var(--ch-ease),
                box-shadow .22s var(--ch-ease);
}
.ch-saas .btn-primary {
    background-color: var(--ch-ink);
    color: var(--ch-white);
    border-color: var(--ch-ink);
}
.ch-saas .btn-primary:hover {
    background-color: var(--ch-red);
    border-color: var(--ch-red);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(237,61,59,0.18);
    color: var(--ch-white);
}
.ch-saas .btn-outline {
    background-color: var(--ch-white);
    color: var(--ch-ink);
    border-color: var(--ch-ink);
}
.ch-saas .btn-outline:hover {
    background-color: var(--ch-ink);
    color: var(--ch-white);
    transform: translateY(-1px);
}
.ch-saas .btn-ghost {
    background-color: transparent;
    color: var(--ch-ink);
    border-color: rgba(26,26,26,0.15);
}
.ch-saas .btn-ghost:hover {
    border-color: var(--ch-ink);
    background-color: var(--ch-cream);
}

.ch-saas a:focus-visible,
.ch-saas button:focus-visible {
    outline: 1.5px solid var(--ch-ink);
    outline-offset: 4px;
    border-radius: 3px;
}
.ch-saas ::selection {
    background-color: rgba(237,61,59,0.18);
    color: var(--ch-ink);
}

/* =====================================================================
   1. HERO
   ===================================================================== */
.ch-saas-hero {
    background-color: var(--ch-cream);
    border-bottom: 1px solid rgba(26,26,26,0.06);
}
.ch-saas-hero__inner {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(4rem, 9vw, 7rem) clamp(1rem, 3vw, 2rem) clamp(3.5rem, 7vw, 5.5rem);
    text-align: center;
}
.ch-saas-hero__title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2.4rem, 6.5vw, 4.8rem);
    line-height: 0.98;
    letter-spacing: -0.025em;
    color: var(--ch-ink);
    margin: 0 0 1.5rem;
    text-wrap: balance;
}
.ch-saas-hero__lede {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    line-height: 1.6;
    color: var(--ch-text);
    max-width: 42rem;
    margin: 0 auto 2rem;
}
.ch-saas-hero__cta {
    display: inline-flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* =====================================================================
   2–3 & 9–10. PROSE SECTIONS (narrativa editorial)
   ===================================================================== */
.ch-saas-prose {
    padding: clamp(3.5rem, 8vw, 6.5rem) 0;
    border-bottom: 1px solid rgba(26,26,26,0.05);
}
.ch-saas-prose--problema {
    background-color: var(--ch-cream-soft);
}
.ch-saas-prose--propuesta {
    background-color: var(--ch-cream);
}
.ch-saas-prose--medicion {
    background-color: var(--ch-cream-soft);
}
.ch-saas-prose--familia {
    background-color: var(--ch-cream);
}

.ch-saas-prose__inner {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    text-align: center;
}
.ch-saas-prose--propuesta .ch-saas-prose__inner { max-width: 760px; }

.ch-saas-prose__title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ch-ink);
    margin: 0 0 2rem;
    text-wrap: balance;
}

.ch-saas-prose__lede {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--ch-text);
    margin: 0 0 1.5rem;
}

.ch-saas-prose__coda {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.45;
    color: var(--ch-ink);
    margin: 2rem 0 0;
}
.ch-saas-prose__coda em {
    font-weight: 900;
}

/* Listas dentro de prose */
.ch-saas-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.ch-saas-list li {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ch-ink-soft);
    padding: 0.85rem 1.25rem;
    background-color: var(--ch-white);
    border: 1px solid rgba(26,26,26,0.06);
    border-radius: 999px;
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    max-width: 100%;
}
.ch-saas-list--minus li::before {
    content: "— ";
    color: var(--ch-red);
    font-weight: 700;
    margin-right: 0.35rem;
}
.ch-saas-list--plus {
    gap: 1rem;
}
.ch-saas-list--plus li {
    border-radius: var(--ch-radius);
    padding: 1.1rem 1.35rem;
    text-align: left;
    max-width: 100%;
    display: block;
}
.ch-saas-list--plus li strong {
    display: inline-block;
    color: var(--ch-ink);
    font-weight: 700;
    margin-right: 0.35rem;
}

/* Flow "del X al Y" en propuesta */
.ch-saas-flow {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
}
.ch-saas-flow li {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
    color: var(--ch-text);
    padding: 0.5rem 1rem;
    background-color: transparent;
    border-bottom: 1px solid rgba(26,26,26,0.08);
}
.ch-saas-flow li:last-child { border-bottom: none; }
.ch-saas-flow li span {
    color: var(--ch-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    font-weight: 700;
}
.ch-saas-flow li::before {
    content: "→";
    color: var(--ch-red);
    font-weight: 700;
}
.ch-saas-flow li em {
    font-size: 1.2rem;
}

/* =====================================================================
   SECTION (scaffolding)
   ===================================================================== */
.ch-saas-section {
    padding: clamp(4rem, 8vw, 6.5rem) 0;
    border-bottom: 1px solid rgba(26,26,26,0.05);
}
.ch-saas-section__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}
.ch-saas-section__header {
    max-width: 760px;
    margin: 0 auto clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}
.ch-saas-section__header--left {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
    max-width: 900px;
}
.ch-saas-section__title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.02;
    letter-spacing: -0.022em;
    color: var(--ch-ink);
    margin: 0 0 1.25rem;
    text-wrap: balance;
}
.ch-saas-section__lede {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ch-text);
    margin: 0;
    max-width: 38rem;
}
.ch-saas-section__header:not(.ch-saas-section__header--left) .ch-saas-section__lede {
    margin-left: auto;
    margin-right: auto;
}

/* =====================================================================
   4 & 8. GRID DE FEATURES
   ===================================================================== */
.ch-saas-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 640px) {
    .ch-saas-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
}
@media (min-width: 960px) {
    .ch-saas-grid--6 { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.75rem; }
    .ch-saas-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}

.ch-saas-feature {
    background-color: var(--ch-white);
    border: 1px solid rgba(26,26,26,0.06);
    border-radius: var(--ch-radius);
    padding: clamp(1.5rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    transition: border-color .3s var(--ch-ease), box-shadow .3s var(--ch-ease);
}
.ch-saas-feature:hover {
    border-color: rgba(26,26,26,0.15);
    box-shadow: 0 6px 20px rgba(26,26,26,0.05);
}
.ch-saas-feature__icon {
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 0.25rem;
}
.ch-saas-feature__title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.15;
    color: var(--ch-ink);
    margin: 0;
    letter-spacing: -0.01em;
}
.ch-saas-feature__body {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ch-text);
    margin: 0;
}

/* =====================================================================
   5. MODELO (flujo de 4 pasos)
   ===================================================================== */
.ch-saas-model {
    background-color: var(--ch-cream-soft);
}
.ch-saas-flow-steps {
    list-style: none;
    padding: 0;
    margin: 0 auto 2.5rem;
    max-width: 960px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 760px) {
    .ch-saas-flow-steps {
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        position: relative;
    }
    .ch-saas-flow-steps::before {
        content: "";
        position: absolute;
        top: 44px;
        left: 12.5%;
        right: 12.5%;
        height: 1px;
        background: rgba(26,26,26,0.12);
        z-index: 0;
    }
}
.ch-saas-flow-steps li {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background-color: var(--ch-white);
    border: 1px solid rgba(26,26,26,0.06);
    border-radius: var(--ch-radius);
    position: relative;
    z-index: 1;
}
@media (min-width: 760px) {
    .ch-saas-flow-steps li {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        padding: 1.5rem 1rem;
        text-align: center;
        margin: 0 auto;
        width: 88%;
        background-color: var(--ch-cream-soft);
        border: none;
    }
}
.ch-saas-flow-steps__n {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ch-white);
    background-color: var(--ch-ink);
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ch-saas-flow-steps__label {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 900;
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    color: var(--ch-ink);
    letter-spacing: -0.015em;
    line-height: 1;
}
.ch-saas-model__coda {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ch-text);
    max-width: 44rem;
    margin: 0 auto;
    text-align: center;
}

/* =====================================================================
   6. PROGRAMA (módulos numerados)
   ===================================================================== */
.ch-saas-programa {
    background-color: var(--ch-cream);
}
.ch-saas-modules {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 720px) {
    .ch-saas-modules { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}

.ch-saas-modules li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.1rem;
    padding: 1.5rem 1.6rem;
    background-color: var(--ch-white);
    border: 1px solid rgba(26,26,26,0.06);
    border-radius: var(--ch-radius);
    align-items: flex-start;
    transition: border-color .3s var(--ch-ease), box-shadow .3s var(--ch-ease);
}
.ch-saas-modules li:hover {
    border-color: rgba(26,26,26,0.18);
    box-shadow: 0 6px 20px rgba(26,26,26,0.05);
}
.ch-saas-modules__n {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 900;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--ch-red);
    min-width: 2.5rem;
}
.ch-saas-modules h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.15;
    color: var(--ch-ink);
    margin: 0 0 0.35rem;
    letter-spacing: -0.01em;
}
.ch-saas-modules p {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ch-text);
    margin: 0;
}

/* =====================================================================
   7. DIFERENCIAL (big bullets)
   ===================================================================== */
.ch-saas-diff { background-color: var(--ch-cream-soft); }
.ch-saas-bigbullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 900px;
}
.ch-saas-bigbullets li {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(26,26,26,0.08);
}
@media (min-width: 720px) {
    .ch-saas-bigbullets li {
        grid-template-columns: minmax(220px, 0.9fr) 2fr;
        gap: 2.5rem;
        padding: 2rem 0;
    }
}
.ch-saas-bigbullets li:last-child { border-bottom: none; }
.ch-saas-bigbullets strong {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 900;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    line-height: 1.15;
    color: var(--ch-ink);
    letter-spacing: -0.01em;
}
.ch-saas-bigbullets span {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ch-text);
}

/* =====================================================================
   8. APP (comparte grid, ajustes extra)
   ===================================================================== */
.ch-saas-app { background-color: var(--ch-cream); }
.ch-saas-app .ch-saas-feature {
    text-align: left;
}

/* =====================================================================
   11. FORMATO HÍBRIDO
   ===================================================================== */
.ch-saas-hybrid { background-color: var(--ch-cream-soft); }
.ch-saas-duo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: 900px;
    margin: 0 auto 2.5rem;
}
@media (min-width: 720px) {
    .ch-saas-duo {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}
.ch-saas-duo__col {
    background-color: var(--ch-white);
    border: 1px solid rgba(26,26,26,0.06);
    border-radius: var(--ch-radius);
    padding: 2rem 1.75rem;
    margin: 0;
}
.ch-saas-duo__col h3 {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 900;
    font-size: 1.6rem;
    line-height: 1.05;
    color: var(--ch-ink);
    letter-spacing: -0.015em;
    margin: 0 0 0.75rem;
}
.ch-saas-duo__col p {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ch-text);
    margin: 0;
}
.ch-saas-hybrid__coda {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.3rem, 2.3vw, 1.8rem);
    line-height: 1.3;
    color: var(--ch-ink);
    text-align: center;
    margin: 0;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.ch-saas-hybrid__coda em { font-weight: 900; }

/* =====================================================================
   12. IMPLEMENTACIÓN (negaciones)
   ===================================================================== */
.ch-saas-impl { background-color: var(--ch-cream); }
.ch-saas-negations {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 720px) {
    .ch-saas-negations {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}
.ch-saas-negations li {
    background-color: var(--ch-white);
    border: 1px solid rgba(26,26,26,0.06);
    border-radius: var(--ch-radius);
    padding: 1.4rem 1.25rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--ch-ink);
    text-align: center;
}
.ch-saas-negations li span {
    display: block;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 900;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--ch-red);
    margin-bottom: 0.4rem;
}

/* =====================================================================
   13. RESULTADO
   ===================================================================== */
.ch-saas-outcome { background-color: var(--ch-cream-soft); }
.ch-saas-outcomes {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ch-saas-outcomes li {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.3rem, 2.4vw, 1.85rem);
    line-height: 1.35;
    color: var(--ch-ink);
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(26,26,26,0.08);
    text-align: center;
}
.ch-saas-outcomes li:last-child { border-bottom: none; }
.ch-saas-outcomes strong {
    font-weight: 900;
    color: var(--ch-red);
}

/* =====================================================================
   14. CTA FINAL
   ===================================================================== */
.ch-saas-final {
    background-color: var(--ch-ink);
    color: var(--ch-white);
    padding: clamp(4rem, 9vw, 7rem) 0;
    text-align: center;
    border: none;
}
.ch-saas-final__inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}
.ch-saas-final__title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ch-white);
    margin: 0 0 2rem;
    text-wrap: balance;
}
.ch-saas-final__title em {
    color: var(--ch-white);
    /* Playfair 400 italic en el éfasis para contraste suave */
    font-weight: 400;
}
.ch-saas-final__cta {
    display: inline-flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1.75rem;
}
.ch-saas-final .btn-primary {
    background-color: var(--ch-red);
    color: var(--ch-white);
    border-color: var(--ch-red);
}
.ch-saas-final .btn-primary:hover {
    background-color: var(--ch-white);
    color: var(--ch-ink);
    border-color: var(--ch-white);
    box-shadow: 0 8px 24px rgba(255,255,255,0.18);
}
.ch-saas-final .btn-outline {
    background-color: transparent;
    color: var(--ch-white);
    border-color: rgba(255,255,255,0.35);
}
.ch-saas-final .btn-outline:hover {
    background-color: var(--ch-white);
    color: var(--ch-ink);
    border-color: var(--ch-white);
}
.ch-saas-final__note {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
    margin: 0;
}
.ch-saas-final__note a {
    color: var(--ch-white);
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.3);
    text-underline-offset: 4px;
    transition: text-decoration-color .25s var(--ch-ease);
}
.ch-saas-final__note a:hover { text-decoration-color: var(--ch-red); }

/* =====================================================================
   OVERRIDES LEGACY — apaga los estilos del viejo SaaS pop-art
   ===================================================================== */
.ch-saas .saas-block,
.ch-saas .saas-gallery,
.ch-saas .saas-lightbox-overlay,
.ch-saas .saas-cta-container,
.ch-saas .home-saas { display: none !important; }

body.page-template-page-saas .saas-page,
body.page-template-page-saas-php .saas-page { all: revert; }

/* =====================================================================
   RESPONSIVE FINO
   ===================================================================== */
@media (max-width: 640px) {
    .ch-saas-hero__inner { padding-top: 3rem; padding-bottom: 2.5rem; }
    .ch-saas-hero__cta { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .ch-saas-hero__cta .btn { width: 100%; }

    .ch-saas-final__cta { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .ch-saas-final__cta .btn { width: 100%; }

    .ch-saas-modules li { grid-template-columns: auto 1fr; gap: 0.85rem; padding: 1.25rem; }
    .ch-saas-bigbullets li { padding: 1.35rem 0; }

    .ch-saas-flow li { font-size: 1rem; flex-wrap: wrap; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .ch-saas .btn,
    .ch-saas-feature,
    .ch-saas-modules li { transition: none !important; transform: none !important; }
}

/* =====================================================================
   SAAS — Sección de video (3.5) "Así funciona Chibalete+ en la práctica"
   Se inserta entre Propuesta (3) y Qué es (4). Fondo crema igual que
   la sección 3 para crear un mismo "bloque narrativo".
   ===================================================================== */

.ch-saas-video {
    background-color: var(--ch-cream);
    border-bottom: 1px solid rgba(26,26,26,0.05);
    padding: 0;
}
.ch-saas-video__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1rem, 3vw, 2rem) clamp(4rem, 8vw, 6rem);
    text-align: center;
}

.ch-saas-video__title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.02;
    letter-spacing: -0.022em;
    color: var(--ch-ink);
    margin: 0 0 1rem;
    text-wrap: balance;
}

.ch-saas-video__lede {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--ch-text);
    max-width: 38rem;
    margin: 0 auto;
}

.ch-saas-video__frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;                  /* 16:9 */
    margin-top: clamp(2rem, 4vw, 2.75rem);
    background-color: var(--ch-ink);      /* color de fondo mientras carga */
    border-radius: var(--ch-radius);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(26,26,26,.04);
}

.ch-saas-video__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 640px) {
    .ch-saas-video__inner {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .ch-saas-video__frame {
        border-radius: var(--ch-radius-sm);
    }
}

/* =====================================================================
   SAAS VIDEO — Optimización conversión + editorial (fase 2)
   Añade hook, after, soft CTA, contact block y micro-UX del frame.
   Scoped a .ch-saas-video. No altera layout ni responsive existente.
   ===================================================================== */

/* Hook — gancho corto sobre intención de reproducir */
.ch-saas-video__hook {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(26,26,26,0.7);
    margin: 0 auto 0.75rem;
    max-width: 38rem;
}

/* Texto after — credibilidad inmediatamente tras el video */
.ch-saas-video__after {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(26,26,26,0.6);
    margin-top: 1rem;
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
}

/* Soft CTA — enlace discreto, no botón */
.ch-saas-video__cta {
    display: inline-block;
    margin-top: 0.75rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ch-ink);
    text-decoration: none;
    border-bottom: 1px solid rgba(26,26,26,0.2);
    transition: border-color 0.2s ease;
}
.ch-saas-video__cta:hover {
    border-color: var(--ch-ink);
}

/* Bloque de contacto — correo + WhatsApp */
.ch-saas-video__contact {
    margin-top: 1rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(26,26,26,0.68);
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}
.ch-saas-video__contact p { margin: 0; }
.ch-saas-video__contact a {
    color: var(--ch-ink);
    text-decoration: none;
    border-bottom: 1px solid rgba(26,26,26,0.18);
    transition: border-color 0.2s ease;
}
.ch-saas-video__contact a:hover {
    border-color: var(--ch-ink);
}

/* Micro-UX del frame — sutileza editorial */
.ch-saas-video__frame {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.ch-saas-video__frame:hover {
    transform: scale(1.01);
}

/* prefers-reduced-motion — neutraliza el scale */
@media (prefers-reduced-motion: reduce) {
    .ch-saas-video__frame,
    .ch-saas-video__frame:hover {
        transform: none !important;
        transition: none !important;
    }
}