/*
Theme Name: Chibalete Theme
Theme URI: https://chibalete.com
Author: Gemini
Author URI: https://google.com
Description: Un tema premium personalizado para Chibalete Editores, basado en diseño Pop Art / Miro.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
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;
}

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