@import url('https://fonts.cdnfonts.com/css/metropolis-2?styles=16198,16199,16195,16196,16201,16202');

        :root {
            --bg-cream: #FFF8F0; 
            --text-black: #1A1A1A; 
            --accent-red: #E8362D; 
            --accent-orange: #F8A572; 
            --section-bg: #FFFFFF;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Metropolis', sans-serif;
            background-color: var(--bg-cream);
            color: var(--text-black);
            line-height: 1.6;
            overflow-x: hidden;
        }

        html, body {
        font-size: 16px; 
        -webkit-text-size-adjust: 100%; 
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        }

        i, em {
            font-style: italic;
            font-weight: 650 !important;
            color: inherit !important;    
        }


p {
    font-weight: 450 !important;
    color: #222222 !important;   
    line-height: 1.65 !important; 
}

.footer-text {
    font-size: 0.9rem;
    color: #f0f0f0 !important;
    font-weight: 400 !important;
    margin-top: 10px;
}

.jcr-pagination-bar.jcr-pagination-bar--gap.jcr-pagination
{
    display: none !important;
}

a.feed-powered-by-es.feed-powered-by-es-center.feed-powered-by-es-feed-img.es-widget-branding{
    display: none !important;
}


@media (max-width: 768px) {
    

    p, .editorial-quote p, .why-help-content p {
        font-size: 1.1rem !important; 
        font-weight: 450 !important;
        letter-spacing: 0.1px; 
    }


    h1, h2, h3, .section-title, .quote-box-title {
        font-weight: 800 !important; 
        color: #111111 !important;
        line-height: 1.3 !important;
    }
    
    .section-title {
        font-size: 1.8rem !important;
        margin-bottom: 25px !important;
    }


    .quote-box-container {
        padding: 30px 20px !important;
        border-left-width: 6px !important; 
    }

    .editorial-quote p.highlight-philosophy {
        font-size: 1.15rem !important;
        font-weight: 600 !important; 
        color: #000000 !important;
    }
    

    .why-help-item {
        align-items: flex-start !important;
        margin-bottom: 24px !important;
    }
    

    .btn-slider-donate, .btn-tier, .btn-donate-now {
        font-weight: 700 !important;
        font-size: 1.1rem !important;
        letter-spacing: 0.3px;
    }
}

        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        header {
            margin-top: 80px;
            text-align: center;
            padding: 40px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }

        .logo-img {
            padding-top:15px;
            max-width: 315px;
            height: auto;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .logo-img:hover {
            transform: scale(1.03);
        }

        .hero {
            text-align: center;
            padding: 80px 20px;
            background: url(assets/img/banner.webp) no-repeat center center/cover;
        }

        

        .hero h1 {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--bg-cream);
        }

        .hero p {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto 40px auto;
            color: #d3d2d2 !important;
            font-weight: 450;
        }



        .btn-donate {
            display: inline-block;
            background-color: var(--accent-red);
            color: white;
            padding: 15px 30px;
            text-decoration: none;
            font-size: 0.9rem;
            border-radius: 4px;
            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
            font-weight: bold;
            letter-spacing: 1px;
            box-shadow: 0 4px 10px rgba(232, 54, 45, 0.2);
        }

        .btn-donate:hover {
            background-color: #cc2b24;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(232, 54, 45, 0.35);
        }

        .btn-donate:active {
            transform: translateY(0);
        }

        .objectives-section {
            background-color: var(--section-bg);
            padding: 80px 0;
        }

        .section-title {
            text-align: center;
            font-size: 2rem;
            margin-bottom: 50px;
            font-weight: 400;
            position: relative;
        }

       /* .section-title::after {
            content: '';
            display: block;
            width: 60px;
            height: 3px;
            background-color: var(--accent-orange);
            margin: 15px auto 0;
            transition: width 0.3s ease;
        }*/

        .objectives-section:hover .section-title::after {
            width: 100px;
        }

        .grid-3 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }

        .objective-card {
            padding: 30px;
            background-color: var(--bg-cream);
            border-left: 3px solid var(--accent-red);
            transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
        }

        .objective-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        }

        .objective-card h3 {
            margin-bottom: 15px;
            font-size: 1.2rem;
        }

        .objective-card p {
            font-size: 0.95rem;
            color: #4A4A4A;
        }

        .integration-section {
            padding: 80px 0;
        }

        .integration-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
        }

        .embed-container {
            background-color: var(--section-bg);
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.03);
            min-height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px dashed #ccc;
            transition: box-shadow 0.3s ease, border-color 0.3s ease;
        }

        .embed-container:hover {
            box-shadow: 0 8px 25px rgba(0,0,0,0.06);
            border-color: var(--accent-orange);
        }

        .about-section {
            background-color: var(--section-bg);
            padding: 80px 0;
            border-top: 1px solid rgba(0,0,0,0.05);
        }

        .news-flash-box {
            background-color: var(--bg-cream);
            padding: 30px;
            border-radius: 6px;
            margin-bottom: 40px;
            border-left: 4px solid var(--accent-red);
            transition: border-left-width 0.2s ease;
        }

        .news-flash-box:hover {
            border-left-width: 8px;
        }

        .news-tag {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--accent-red);
            letter-spacing: 1px;
            margin-bottom: 10px;
            text-transform: uppercase;
        }

        .news-highlight {
            font-size: 1.1rem;
            line-height: 1.7;
            color: var(--text-black);
            font-weight: 400;
        }

        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
        }

        .about-quote-block {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background-color: #FAF9F6;
            padding: 30px;
            border-radius: 4px;
            border-top: 2px solid #EAEAEA;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .about-quote-block:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.03);
        }

        .about-quote-block.special-border {
            border-top: 2px solid var(--accent-orange);
        }

        .about-quote-block blockquote {
            font-style: italic;
            font-size: 1rem;
            color: #333;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        .quote-author {
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            color: #777;
            letter-spacing: 0.5px;
        }

        .allocation-section {
            background-color: var(--bg-cream);
            padding: 20px 0;
            border-top: 1px solid rgba(0,0,0,0.05);
        }

        .allocation-subtitle {
            text-align: left;
            max-width: 700px;
            margin: 0px auto 20px auto;
            color: #555;
            font-size: 1.25rem;
        }

        .allocation-grid {
            display: flex;
            flex-direction: column;
            gap: 30px;
            margin-bottom: 30px;
        }

        .allocation-card {
            background-color: var(--section-bg);
            padding: 35px;
            border-radius: 6px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.02);
            border-top: 2px solid #EAEAEA;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .allocation-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.04);
        }

        .allocation-card.border-red {
            border-top: 2px solid var(--accent-red);
        }

        .dynamic-card-layout {
            display: grid;
            grid-template-columns: 1.3fr 0.7fr;
            gap: 30px;
            align-items: center;
        }

        .card-text-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .allocation-badge {
            display: inline-block;
            align-self: flex-start;
            font-size: 0.7rem;
            font-weight: 700;
            color: #777;
            background-color: #F0F0F0;
            padding: 4px 8px;
            border-radius: 3px;
            letter-spacing: 0.5px;
            margin-bottom: 15px;
        }

        .allocation-card.border-red .allocation-badge {
            color: var(--accent-red);
            background-color: rgba(232, 54, 45, 0.05);
        }

        .allocation-card h3 {
            font-size: 1.3rem;
            font-weight: 500;
            margin-bottom: 15px;
            color: var(--text-black);
        }

        .allocation-card p {
            font-size: 0.95rem;
            color: #4A4A4A;
            line-height: 1.7;
            text-align: left;
        }

        .card-image-content {
            overflow: hidden;
            border-radius: 6px;
            width: 100%;
            height: 220px; 
            box-shadow: 0 2px 8px rgba(0,0,0,0.02);
            border: 1px solid rgba(0,0,0,0.05);
        }

        .allocation-inline-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.4s ease;
        }

        .card-image-content:hover .allocation-inline-image {
            transform: scale(1.04);
        }

        .allocation-footer-note {
            background-color: var(--section-bg);
            padding: 25px;
            border-radius: 6px;
            border-left: 4px solid var(--accent-orange);
            text-align: center;
            transition: border-left-width 0.2s ease;
        }

        .allocation-footer-note:hover {
            border-left-width: 8px;
        }

        .allocation-footer-note p {
            font-size: 0.95rem;
            margin: 0;
            color: var(--text-black);
        }

        .contact-section {
            background-color: var(--bg-cream);
            padding: 80px 0;
            text-align: center;
        }

        .contact-subtitle {
            text-align: center;
            max-width: 700px;
            margin: 0px auto 20px auto;
            color: #555;
            font-size: 1.25rem;
        }

        .contact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }

        .contact-card {
            background-color: var(--section-bg);
            padding: 40px 30px;
            border-radius: 6px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.02);
            display: flex;
            flex-direction: column;
            align-items: center;
            border-top: 3px solid var(--accent-orange);
            transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
        }

        .contact-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0,0,0,0.06);
        }

        .contact-card.whatsapp-card {
            border-top: 3px solid var(--accent-red);
        }

        .contact-icon {
            font-size: 2rem;
            margin-bottom: 15px;
            transition: transform 0.3s ease;
        }

        .contact-card:hover .contact-icon {
            transform: scale(1.15);
        }

        .contact-card h3 {
            font-size: 1.2rem;
            margin-bottom: 10px;
            font-weight: 500;
        }

        .contact-card p {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 20px;
            flex-grow: 1;
        }

        .contact-link {
            color: var(--text-black);
            text-decoration: none;
            font-weight: 500;
            border-bottom: 1px dashed var(--text-black);
            padding-bottom: 2px;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .contact-link:hover {
            color: var(--accent-red);
            border-color: var(--accent-red);
        }

        .social-links {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .social-tag {
            color: var(--text-black);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s ease;
        }

        .social-tag:hover {
            color: var(--accent-orange);
        }

        .divider {
            color: #ccc;
        }

        .btn-whatsapp {
            display: inline-block;
            background-color: var(--text-black);
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 4px;
            font-size: 0.9rem;
            font-weight: 500;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .btn-whatsapp:hover {
            background-color: var(--accent-red);
            transform: translateY(-1px);
        }

        .sticky-banner {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: var(--text-black);
            color: white;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 12px 20px;
        }

        .banner-container {
            max-width: 1100px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
        }

        .banner-text {
            font-size: 0.95rem;
            margin: 0;
            font-weight: 400;
            color: #f0f0f0 !important;
        }

        .banner-btn {
            background-color: var(--accent-red);
            color: white;
            text-decoration: none;
            padding: 8px 18px;
            font-size: 0.85rem;
            font-weight: 700;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
            transition: background-color 0.2s ease, transform 0.2s ease;
        }

        .banner-btn:hover {
            background-color: #cc2b24;
            transform: scale(1.02);
        }

        .transparency-section {
            background-color: var(--section-bg);
            padding: 80px 0;
            border-top: 1px solid rgba(0,0,0,0.05);
        }

        .transparency-grid {
            display: block; 
            width: 100%;
            margin-bottom: 0px; 
        }

        .transparency-statement h3 {
            font-size: 1.5rem;
            font-weight: 500;
            margin-bottom: 20px;
            color: var(--text-black);
            line-height: 1.4;
        }

        .transparency-statement p {
            font-size: 1.05rem;
            color: #4A4A4A;
            margin-bottom: 20px;
            line-height: 1.7;
            text-align: justify;
        }

        .impact-tiers {
            width: 100%;
            text-align: center; 
            margin-top: 20px;
        }

        .impact-tiers h3 {
            font-size: 1.4rem;
            font-weight: 500;
            margin-bottom: 10px;
            color: var(--text-black);
        }

        .impact-intro {
            font-size: 0.95rem;
            color: #666;
            margin-bottom: 25px;
        }

        .tier-list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-top: 30px;
        }

        .tier-item {
            display: flex;
            align-items: center;
            background-color: var(--bg-cream);
            padding: 15px 20px;
            border-radius: 4px;
            border-left: 3px solid var(--accent-red);
            gap: 20px;
            text-decoration: none; 
            cursor: pointer;       
            transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
        }

        .tier-item:hover {
            transform: scale(1.02);
            box-shadow: 0 6px 15px rgba(0,0,0,0.03);
            background-color: #fffaf5;
        }

        .tier-item.border-orange {
            border-left: 3px solid var(--accent-orange);
        }

        .tier-amount {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--text-black);
            min-width: 65px;
            transition: color 0.2s ease;
        }

        .tier-item:hover .tier-amount {
            color: var(--accent-red);
        }

        .tier-item.border-orange:hover .tier-amount {
            color: var(--accent-orange);
        }

        .tier-desc {
            font-size: 0.95rem;
            color: #333;
            margin: 0;
            line-height: 1.4;
        }

        .context-image-container {
            margin-top: 25px;
            overflow: hidden;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.03);
            border: 1px solid rgba(0,0,0,0.05);
        }

        .context-inline-image {
            width: 100%;
            height: 360px;
            object-fit: cover;
            display: block;
            transition: transform 0.4s ease;
        }

        .context-image-container:hover .context-inline-image {
            transform: scale(1.03);
        }


        .sidebar-nav {
            position: fixed;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 999;
        }

        .sidebar-nav ul {
            list-style: none;
            display: block; 
            position: relative;
            padding: 0;
            margin: 0;
        }

        .sidebar-nav ul::before {
            content: '';
            position: absolute;
            right: 7px; 
            top: 15px;
            bottom: 15px;
            width: 2px;
            background-color: rgba(26, 26, 26, 0.08);
            z-index: 1;
        }

        .sidebar-nav li {
            margin-bottom: 24px; 
            position: relative;
            list-style: none;
        }

        .sidebar-nav li:last-child {
            margin-bottom: 0;
        }

        .sidebar-nav a {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            text-decoration: none;
            position: relative;
            height: 30px;
            z-index: 2;
            color: #666666;
            transition: color 0.3s ease;
        }

        
        .nav-label {
            font-size: 0.90rem;
            font-weight: 500;
            color: #777;
            transition: color 0.3s ease, transform 0.3s ease, font-weight 0.3s ease;
            transform: translateX(5px);
            text-align: right;
            margin-right: 14px;
            white-space: nowrap;
        }

        
        .nav-dot {
            width: 14px;
            height: 14px;
            background-color: #EAEAEA;
            border: 2px solid #D0D0D0;
            border-radius: 50%;
            margin-left: 18px; 
            flex-shrink: 0; 
            transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
        }


        .sidebar-nav a:hover .nav-label,
        .sidebar-nav a.active .nav-label {
            color: var(--text-black);
            font-weight: 700;
            transform: translateX(0);
        }

        .sidebar-nav a:hover .nav-dot {
            background-color: var(--accent-orange);
            border-color: var(--accent-orange);
            transform: scale(1.2);
        }

        .sidebar-nav a.active .nav-dot {
            background-color: var(--accent-red);
            border-color: var(--accent-red);
            transform: scale(1.4);
            box-shadow: 0 0 0 4px rgba(232, 54, 45, 0.15);
        }

        @media (max-width: 1024px) {
            .sidebar-nav {
                display: none;
            }
        }

    @media (min-width: 1025px) and (max-width: 1440px) {
    .container {
        padding-right: 150px !important; 
    }
    
    .sidebar-nav,
    .floating-nav-container {
        right: 20px !important; 
    }
}


        @media (min-width: 1025px) and (max-width: 1200px) {
    
            .sidebar-nav {
                display: none !important;
            }

            .grid-3 {
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 20px !important;
            }

            .container {
                padding-right: 150px !important;
            }
        }

        @media (min-width: 1201px) and (max-width: 1440px) {
            .grid-3 {
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 30px !important;
            }
        }



        @media (min-width: 600px) and (max-width: 1024px) {
            .grid-3 {
                grid-template-columns: 1fr !important; 
                gap: 20px;
            }
        }

        html {
            scroll-behavior: smooth;
        }

        footer {
            background-color: var(--text-black);
            color: white;
            text-align: center;
            padding: 40px 20px;
            font-size: 0.9rem;
        }

        @media (max-width: 768px) {
            .mobile-donation-cta {
                display: none;
            }
            .integration-grid, .about-grid, .allocation-grid, .transparency-grid {
                grid-template-columns: 1fr;
                gap: 30px;
            }
            .integration-grid .gfm-embed-container {
                margin-top: -25px !important;
            }
            .dynamic-card-layout {
                grid-template-columns: 1fr; 
                gap: 20px;
            }
            .card-image-content {
                height: 180px; 
            }
            .hero{background-position: 25% center !important;}
            .hero h1 { font-size: 2rem; color: var(--bg-cream) !important; }
            .transparency-statement h3 { font-size: 1.3rem; }
            .banner-container {
                flex-direction: column;
                text-align: center;
                gap: 8px;
            }
            .banner-text { font-size: 0.85rem; }
            header { margin-top: 85px; }
            .contact-subtitle { margin-bottom: 30px; }

                .why-help-item {
                 gap: 14px;
                }
                .why-help-icon {
                    width: 36px;
                    height: 36px;
                }
                .why-help-icon svg {
                    width: 18px;
                    height: 18px;
                }
                .why-help-content p {
                    font-size: 0.95rem;
                }
        }

        @media (max-width: 992px) {
            .tier-list {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 576px) {
            .tier-list {
                grid-template-columns: 1fr; 
            }
        }

        .why-help-list {
            display: flex;
            flex-direction: column;
            gap: 24px; 
            margin-bottom: 30px;
        }

        .why-help-item {
            display: flex;
            align-items: flex-start; 
            gap: 18px;
        }


        .why-help-icon {
            width: 42px;
            height: 42px;
         
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0; 
            margin-top: 2px;
        }

        
        .why-help-icon svg {
            width: 40px;
            height: 40px;
            color: var(--accent-red, #e8362d); 
        }


        .why-help-content p {
            font-size: 1rem;
            line-height: 1.6;
            color: #4a4a4a;
            margin: 0;
            text-align: left;
        }


    .costs-section {
    padding: 30px 0; 
    background-color: #ffffff; 
    }

.costs-layout-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr; 
    gap: 60px; 
    align-items: flex-start;
    margin-top: 20px;
}

.costs-text-column {
    position: sticky;
    top: 100px; 
    text-align: left;
}

.costs-text-column h3 {
    font-size: 2rem;
    color: #1a1a1a;
    margin-bottom: 20px;
    line-height: 0.6;
}

.costs-text-column .impact-intro {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 35px;
}

@media (max-width: 760px) {
    .costs-text-column .impact-intro {
        margin-top: -5px;
}

.costs-text-column h3 {
    line-height: 0.6 !important;
}
}

.costs-text-column .donation-cta-container {
    text-align: left;
}


.costs-supplies-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.supply-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f1f1f1; 
}

.supply-row:last-child {
    border-bottom: none;
}

.supply-name {
    font-size: 1rem;
    color: #4a4a4a;
    padding-right: 20px;
    line-height: 1.4;
}

.supply-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-red, #e8362d);
    white-space: nowrap;
}


.btn-donate-now {
    display: inline-block;
    background-color: var(--accent-red, #e8362d);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    padding: 16px 35px;
    border-radius: 8px;
    font-size: 1.05rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 15px rgba(232, 54, 45, 0.15);
}

.btn-donate-now:hover {
    background-color: #cc2f26;
    transform: translateY(-2px);
}


@media (max-width: 992px) {
    .costs-layout-container {
        grid-template-columns: 1fr; 
        gap: 40px;
    }
    
    .costs-text-column {
        position: relative; 
        top: 0;
    }

    .btn-donate-now {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}


.donation-slider-section {
    padding: 80px 0;
    background-color: #fcfcfc;
    text-align: center;
}

.donation-slider-section .section-subtitle {
    font-size: 1.15rem;
    color: #555;
    max-width: 700px;
    margin: -10px auto 40px auto;
    line-height: 1.6;
}


.slider-donation-box {
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 16px;
    max-width: 550px;
    margin: 0 auto;
    padding: 40px 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}


.slider-display {
    font-size: 4rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-display .currency {
    color: var(--accent-red, #e8362d);
    margin-right: 2px;
}


.slider-input-wrapper {
    margin-bottom: 35px;
}

.slider-input-wrapper input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #eef0f2;
    outline: none;
}


.slider-input-wrapper input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-red, #e8362d);
    cursor: pointer;
    transition: transform 0.1s ease;
    box-shadow: 0 2px 8px rgba(232, 54, 45, 0.3);
}

.slider-input-wrapper input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}


.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 0.9rem;
    color: #888;
    font-weight: 500;
}


.btn-slider-donate {
    display: inline-block;
    width: 100%;
    background-color: var(--accent-red, #e8362d);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    padding: 16px 0;
    border-radius: 8px;
    font-size: 1.1rem;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 15px rgba(232, 54, 45, 0.15);
    box-sizing: border-box;
}

.btn-slider-donate:hover {
    background-color: #cc2f26;
    transform: translateY(-2px);
}

@media (max-width: 576px) {
    .slider-donation-box {
        padding: 30px 20px;
    }
    .slider-display {
        font-size: 3.2rem;
    }
}


.slider-display {
    font-size: 4rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-display .currency {
    color: var(--accent-red, #e8362d);
    margin-right: 2px;
    user-select: none;
}


#donation-amount-input {
    font-size: 4rem;
    font-weight: 800;
    color: #1a1a1a;
    border: none;
    background: transparent;
    width: 160px; /* Ancho fijo ideal para 3 o 4 dígitos */
    text-align: center;
    outline: none;
    padding: 0;
    font-family: inherit;
}


#donation-amount-input::-webkit-outer-spin-button,
#donation-amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}



#donation-amount-input:focus {
    border-bottom: 2px dashed rgba(232, 54, 45, 0.4);
}


.about-team-section {
    padding: 60px 0 80px 0;
    background-color: #ffffff;
}


.quote-box-container {
    background: #fdfdfd;
    border: 1px solid #eaeaea;
    border-left: 5px solid var(--accent-red, #e8362d); 
    border-radius: 4px 12px 12px 4px;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 45px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.01);
}

.quote-box-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 0;
    margin-bottom: 25px;
    line-height: 1.4;
}


.editorial-quote {
    margin: 0;
    padding: 0;
}

.editorial-quote p {
    font-size: 1.05rem;
    color: #4a4a4a;
    line-height: 1.7;
    margin-bottom: 18px;
    text-align: left;
}

.editorial-quote p:last-child {
    margin-bottom: 0; 
}


.editorial-quote p.highlight-philosophy {
    font-size: 1.1rem;
    font-style: italic;
    color: #1a1a1a;
    font-weight: 500;
    padding: 5px 0;
    border-top: 1px dashed #eee;
    border-bottom: 1px dashed #eee;
    margin: 22px 0;
}


@media (max-width: 768px) {
    .quote-box-container {
        padding: 30px 25px;
        margin: 0 15px; 
    }
    
    .quote-box-title {
        font-size: 1.3rem;
    }
    
    .editorial-quote p {
        font-size: 1rem;
    }
    
    .editorial-quote p.highlight-philosophy {
        font-size: 1.05rem;
    }

    .gfm-embed-container{
    padding-top: 50px; 

    p{
        margin-top:-15px;
    }

    }

    .integration-grid {
        p{
            margin-top:-15px;
        }
    }
}



.floating-nav-container {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
}


.nav-toggle-btn {
    display: none;
}


@media (max-width: 1024px) {
    .floating-nav-container {
        top: 80px; 
        right: 15px;
        transform: none;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }


    .nav-toggle-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        background-color: var(--text-black, #1a1a1a);
        color: #ffffff;
        border: none;
        padding: 10px 16px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        transition: background-color 0.2s ease;
    }

    .nav-toggle-btn:hover {
        background-color: var(--accent-red, #e8362d);
    }

  
    .nav-toggle-icon {
        transition: transform 0.3s ease;
        font-size: 0.75rem;
    }

    .floating-nav-container.open .nav-toggle-icon {
        transform: rotate(180deg);
    }


    .sidebar-nav {
        position: relative;
        right: 0;
        top: 10px;
        background: #ffffff;
        padding: 15px 20px;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        border: 1px solid #eaeaea;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease;
    }

    .floating-nav-container.open .sidebar-nav {
        max-height: 400px;
        opacity: 1;
        pointer-events: auto;
    }

    .sidebar-nav ul::before {
        display: none; 
    }

    .sidebar-nav li {
        margin-bottom: 12px;
    }

    .sidebar-nav a {
        justify-content: flex-start;
        height: auto;
    }

    .nav-dot {
        order: -1; 
        margin-left: 0;
        margin-right: 10px;
    }
}

section,
.hero,
.objectives-section,
.transparency-section,
.costs-section,
.integration-section,
.allocation-section,
.about-team-section,
.contact-section {
    padding-top: 20px !important;    
    padding-bottom: 20px !important; 
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


.section-title {
    margin-bottom: 25px !important; 
}


.reveal {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}


@media (max-width: 1024px) {
    section,
    .hero,
    .objectives-section,
    .transparency-section,
    .costs-section,
    .integration-section,
    .allocation-section,
    .about-team-section,
    .contact-section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
}