@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Merriweather:300,700,300italic,700italic|Source+Sans+Pro:900");

/*
    Massively by HTML5 UP | Refactored for Natalia Moreno Campaign
    ---------------------------------------------------------------------
    TABLE OF CONTENTS
    ---------------------------------------------------------------------
    1.  Reset & Base Setup
    2.  Typography
    3.  Layout & Grid System
    4.  Main Structure (Wrapper, Header, Main, Footer)
    5.  Components
        - Buttons
        - Forms
        - Tables
        - Lists
        - Icons
        - Images & Boxes
        - Cards (Proposals/Parche)
    6.  Specific Sections
        - Navigation (Desktop)
        - Intro / Hero
        - Proposals & Featured
        - Volunteer / Parche
    7.  Utilities & Animations
    8.  Media Queries
        - Max-width: 1680px
        - Max-width: 1280px
        - Max-width: 980px
        - Max-width: 736px (Mobile)
        - Max-width: 480px
        - Max-width: 360px
        - Orientation: Portrait
*/

/* ==========================================================================
   1. RESET & BASE SETUP
   ========================================================================== */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, 
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, 
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, 
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, 
summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

html {
    box-sizing: border-box;
    font-size: 16pt;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    line-height: 1;
    -webkit-text-size-adjust: none;
    -ms-overflow-style: scrollbar;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; 
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 2.375;
    /* Overridden Base Colors */
    background-color: #3f016e;
    color: #ffffff;
}

body.is-preload *, body.is-preload *:before, body.is-preload *:after {
    animation: none !important;
    transition: none !important;
}

/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    margin: 0 0 1rem 0;
    color: #ffffff; /* Inverted for campaign */
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    border-bottom: 0;
    color: inherit;
    text-decoration: none;
}

h1 { font-size: 4rem; line-height: 1.1; margin: 0 0 2rem 0; }
h2 { font-size: 1.75rem; line-height: 1.3; margin: 0 0 1.5rem 0; }
h3 { font-size: 1.25rem; margin: 0 0 1.5rem 0; }
h4 { font-size: 1rem; }
h5 { font-size: 0.9rem; }
h6 { font-size: 0.8rem; }

p {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    text-align: justify;
    margin: 0 0 2rem 0;
}

strong, b {
    font-weight: 600;
    color: #ffffff;
}

em, i {
    font-style: italic;
}

sub { font-size: 0.8rem; position: relative; top: 0.5rem; }
sup { font-size: 0.8rem; position: relative; top: -0.5rem; }

blockquote {
    border-left: solid 4px #eeeeee;
    font-style: italic;
    margin: 0 0 2rem 0;
    padding: 0.5rem 0 0.5rem 2rem;
}

code {
    border: solid 2px #eeeeee;
    background: rgba(220, 220, 220, 0.25);
    font-family: "Courier New", monospace;
    font-size: 0.9rem;
    margin: 0 0.25rem;
    padding: 0.25rem 0.65rem;
}

pre {
    -webkit-overflow-scrolling: touch;
    font-family: "Courier New", monospace;
    font-size: 0.9rem;
    margin: 0 0 2rem 0;
}

pre code {
    display: block;
    line-height: 1.75;
    padding: 1rem 1.5rem;
    overflow-x: auto;
}

hr {
    border: 0;
    border-bottom: solid 2px #eeeeee;
    margin: 3rem 0;
}

hr.major {
    margin: 5rem 0;
}

a {
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border-bottom: dotted 1px;
    text-decoration: none;
    color: #212931;
    border-bottom-color: rgba(33, 41, 49, 0.5);
}

a:hover {
    border-bottom-color: transparent;
    color: #FEAE33 !important;
}

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }

/* ==========================================================================
   3. LAYOUT & GRID SYSTEM
   ========================================================================== */

.row {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
    margin-top: 0;
    margin-left: -1.5rem;
}

.row > * {
    box-sizing: border-box;
    padding: 0 0 0 1.5rem;
}

.row.gtr-uniform { margin-top: -1.5rem; }
.row.gtr-uniform > * { padding-top: 1.5rem; }
.row.gtr-uniform > * > :last-child { margin-bottom: 0; }

.row.aln-left { justify-content: flex-start; }
.row.aln-center { justify-content: center; }
.row.aln-right { justify-content: flex-end; }
.row.aln-top { align-items: flex-start; }
.row.aln-middle { align-items: center; }
.row.aln-bottom { align-items: flex-end; }

.row > .imp { order: -1; }
.row > .col-1 { width: 8.33333%; }
.row > .col-2 { width: 16.66667%; }
.row > .col-3 { width: 25%; }
.row > .col-4 { width: 33.33333%; }
.row > .col-5 { width: 41.66667%; }
.row > .col-6 { width: 50%; }
.row > .col-7 { width: 58.33333%; }
.row > .col-8 { width: 66.66667%; }
.row > .col-9 { width: 75%; }
.row > .col-10 { width: 83.33333%; }
.row > .col-11 { width: 91.66667%; }
.row > .col-12 { width: 100%; }

/* ==========================================================================
   4. MAIN STRUCTURE
   ========================================================================== */

#wrapper {
    transition: opacity 0.5s ease;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

#wrapper > .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #212931;
    background-image: url("../../images/overlay.png"), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../../images/bg.jpg");
    background-size: auto, auto, 100% auto;
    background-position: center, center, top center;
    background-repeat: repeat, no-repeat, no-repeat;
    background-attachment: scroll, scroll, scroll;
    z-index: -1;
}

#wrapper.fade-in:before {
    pointer-events: none;
    transition: opacity 1s ease-in-out;
    transition-delay: 0.75s;
    background: #1e252d;
    content: '';
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

body.is-preload #wrapper.fade-in:before {
    opacity: 1;
}

/* Header (Hidden by default in this design) */
#header {
    height: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    display: none !important;
}

/* Main Content Area */
#main {
    background-color: #3f016e !important;
    color: #ffffff;
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    z-index: 2;
    border: none;
}

#main > * {
    padding: 6rem 10%;
    border-top: none;
    margin: 0;
    width: 100%;
    max-width: 100%;
}

#main > *:first-child { border-top: 0; }
#main > footer { text-align: center; }

/* Posts Grid */
#main > .posts {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    text-align: center;
    width: 100%;
    padding: 0 !important; /* Overridden */
}

#main > .posts > * {
    flex-shrink: 1;
    flex-grow: 0;
    width: 50%;
    padding: 4rem;
    padding-top: 0rem !important;
}

#main > .posts > article {
    border-color: #eeeeee;
    border-left-width: 2px;
    border-style: solid;
    border-top-width: 2px;
    text-align: center;
}

#main > .posts > article > :last-child { margin-bottom: 0; }
#main > .posts > article:nth-child(2n - 1) { border-left-width: 0; }
#main > .posts > article:nth-child(-n + 2) { border-top-width: 0; }

/* Featured Post */
#main > .post {
    padding: 8rem 8rem 6rem 8rem;
}
#main > .post.featured {
    text-align: center;
    padding: 4rem 15% 3rem 15% !important; /* Optimized Sizing */
}
#main > .post header.major > .date {
    margin-top: -2rem;
}
#main > .post header.major > h1, 
#main > .post header.major h2 {
    font-size: 4rem;
    line-height: 1.1;
    margin: 0 0 2rem 0;
}
#main > .post.featured header.major h2 {
    font-size: 2.2rem !important;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}
#main > .post.featured header.major p {
    font-size: 0.95rem;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Footer */
#footer {
    color: #717981;
    display: flex;
    background-color: #f5f5f5;
    cursor: default;
    position: relative;
    margin: 0 auto;
    width: calc(100% - 4rem);
    max-width: 72rem;
    z-index: 2;
}

#footer > section {
    flex-basis: 50%;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 4rem 4rem 2rem 4rem;
    border-left: solid 2px #e2e2e2;
}

#footer > section:first-child { border-left: 0; }

#footer > section.split {
    display: flex;
    flex-direction: column;
    padding: 0;
}

#footer > section.split > section {
    padding: 3rem 4rem 1rem 4rem;
    border-top: solid 2px #e2e2e2;
}

#footer > section.split > section:first-child {
    padding: 5rem 4rem 1rem 4rem;
    border-top: 0;
}

#footer > section.split > section:last-child {
    padding: 3rem 4rem 3rem 4rem;
}

#footer a {
    color: #717981;
    border-bottom-color: rgba(113, 121, 129, 0.5);
}

#footer a:hover {
    border-bottom-color: transparent;
    color: #FEAE33 !important;
}

#copyright {
    color: rgba(255, 255, 255, 0.25);
    cursor: default;
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.075em;
    line-height: 1.5;
    text-align: center !important;
    text-transform: uppercase;
    margin: 4rem auto 8rem auto;
    width: calc(100% - 4rem);
    max-width: 72rem;
    z-index: 2;
    position: relative;
}

#copyright a { color: inherit; border-bottom-color: inherit; }
#copyright ul { list-style: none; margin: 0; padding-left: 0; }
#copyright ul li { border-left: solid 2px; display: inline-block; line-height: 1; margin-left: 1rem; padding-left: 1rem; }
#copyright ul li:first-child { border-left: 0; margin-left: 0; padding-left: 0; }

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* --- Buttons --- */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
    appearance: none;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    display: inline-block;
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.075em;
    height: 3rem;
    line-height: 3rem;
    padding: 0 2rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    background-color: transparent;
    box-shadow: inset 0 0 0 2px #212931;
    color: #212931 !important;
}

.button:hover {
    box-shadow: inset 0 0 0 2px #FEAE33;
    color: #FEAE33 !important;
}

.button.primary {
    background-color: #212931;
    box-shadow: none;
    color: #ffffff !important;
}
.button.primary:hover { background-color: #FEAE33; }
.button.fit { width: 100%; }
.button.small { font-size: 0.7rem; height: 2.5rem; line-height: 2.5rem; padding: 0 1.5rem; }
.button.large { font-size: 0.9rem; height: 3.5rem; line-height: 3.5rem; padding: 0 2.75rem; }
.button:disabled, .button.disabled { pointer-events: none; opacity: 0.25; }

/* Intro Button Overrides */
#intro .button {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px #3f016e; /* Purple Border */
    color: #3f016e !important;           /* Purple Text */
}
#intro .button:hover {
    background-color: #3f016e;           /* Purple Background on Hover */
    box-shadow: inset 0 0 0 2px #3f016e;
    color: #ffffff !important;           /* White Text on Hover */
}
#intro .button.primary {
    background-color: #25d366;           /* WhatsApp Green Background */
    box-shadow: none;
    color: #ffffff !important;           /* White Text */
    border: none;
}
#intro .button.primary:hover {
    background-color: #128c7e;           /* Darker Green on Hover */
    color: #ffffff !important;
}

/* Footer Button Overrides */
#footer .button {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px #717981;
    color: #717981 !important;
}
#footer .button:hover {
    box-shadow: inset 0 0 0 2px #FEAE33;
    color: #FEAE33 !important;
}
#footer .button.primary {
    background-color: #717981;
    box-shadow: none;
    color: #f5f5f5 !important;
}
#footer .button.primary:hover { background-color: #FEAE33; }

/* Campaign Buttons */
.donate-btn {
    background-color: #ffffff; /* Purple */
    color: #ffffff; /* White text */
    padding: 0.5rem 1.5rem;
    border: none;
    border-radius: 30px;
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    font-weight: 900;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.075em;
    text-decoration: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 180px;
}
.donate-btn:hover { background-color: #FEAE33; color: #ffffff; }

#readMoreBtn,
.post.featured .button.large {
    background-color: #ffffff !important;
    color: #3f016e !important;
    box-shadow: inset 0 0 0 2px #3f016e !important;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif !important;
}
#readMoreBtn:hover,
.post.featured .button.large:hover {
    background-color: #3f016e !important;
    color: #ffffff !important;
}

.btn-plan {
    display: inline-block;
    background-color: transparent;
    border: 2px solid #3f016e;
    color: #3f016e !important;
    padding: 0.6rem 1.2rem;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-align: center;
}
.btn-plan:hover { background-color: #3f016e; color: #ffffff !important; }

.btn-primary {
    background-color: #3f016e !important;
    color: #ffffff !important;
    width: 100%;
    border-radius: 50px !important;
    height: 3.5rem !important;
    font-size: 0.9rem !important;
    margin-top: 1rem;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    font-weight: bold;
    border: none;
}
.btn-primary:hover {
    background-color: #FEAE33 !important;
    transform: translateY(-2px);
}

/* --- Forms --- */
form { margin: 0 0 2rem 0; }
form > :last-child { margin-bottom: 0; }
form > .fields {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 3rem);
    margin: -1.5rem 0 2rem -1.5rem;
}
form > .fields > .field {
    flex-grow: 0;
    flex-shrink: 0;
    padding: 1.5rem 0 0 1.5rem;
    width: calc(100% - 1.5rem);
}
form > .fields > .field.half { width: calc(50% - 0.75rem); }
form > .fields > .field.third { width: calc(100%/3 - 0.5rem); }
form > .fields > .field.quarter { width: calc(25% - 0.375rem); }

label {
    display: block;
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.075em;
    font-size: 0.8rem;
    text-transform: uppercase;
    margin: 0 0 0.75rem 0;
    color: #212931;
}

input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
    appearance: none;
    background: transparent;
    border-radius: 0;
    border: solid 2px #eeeeee;
    color: inherit;
    display: block;
    outline: 0;
    padding: 0 1rem;
    text-decoration: none;
    width: 100%;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
    border-color: #FEAE33;
}

input[type="text"],
input[type="password"],
input[type="email"],
select {
    height: 3rem;
}

textarea { padding: 0.75rem 1rem; }

select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23eeeeee' /%3E%3C/svg%3E");
    background-size: 1.25rem;
    background-repeat: no-repeat;
    background-position: calc(100% - 1rem) center;
    height: 3rem;
    padding-right: 3rem;
    text-overflow: ellipsis;
}
select option { background-color: #ffffff; color: #212931; }

input[type="checkbox"], input[type="radio"] {
    appearance: none;
    display: block;
    float: left;
    margin-right: -2rem;
    opacity: 0;
    width: 1rem;
    z-index: -1;
}
input[type="checkbox"] + label, input[type="radio"] + label {
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    letter-spacing: 0;
    font-family: "Merriweather", Georgia, serif;
    text-transform: none;
    font-weight: 300;
    padding-left: 2.8rem;
    padding-right: 1rem;
    position: relative;
    color: #212931;
}
input[type="checkbox"] + label:before, input[type="radio"] + label:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    text-transform: none !important;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    border-radius: 0;
    border: solid 2px #eeeeee;
    content: '';
    font-size: 0.8rem;
    height: 1.8rem;
    left: 0;
    line-height: 1.65rem;
    position: absolute;
    text-align: center;
    top: -0.125rem;
    width: 1.8rem;
}
input[type="checkbox"]:checked + label:before, input[type="radio"]:checked + label:before {
    content: '\f00c';
    background-color: #212931;
    border-color: #212931;
    color: #ffffff;
}
input[type="checkbox"]:focus + label:before, input[type="radio"]:focus + label:before { border-color: #FEAE33; }
input[type="radio"] + label:before { border-radius: 100%; }

::-webkit-input-placeholder { color: #909498 !important; opacity: 1.0; }
:-moz-placeholder { color: #909498 !important; opacity: 1.0; }
::-moz-placeholder { color: #909498 !important; opacity: 1.0; }
:-ms-input-placeholder { color: #909498 !important; opacity: 1.0; }

/* Custom "Parche" Form */
.parche-form {
    max-width: 600px;
    margin: 40px auto 0;
}
.parche-form .form-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.parche-form .form-group label {
    display: block;
    text-align: left;
    font-size: 0.75rem;
    color: #3f016e;
    margin-bottom: 0.5rem;
    font-weight: bold;
}
.parche-form input, .parche-form select {
    border: 2px solid #eeeeee;
    border-radius: 8px;
    height: 3.5rem;
    transition: border-color 0.3s ease;
    width: 100%;
    padding: 15px;
    margin-bottom: 0; /* Handled by row gap */
    font-size: 1rem;
}
.parche-form input:focus, .parche-form select:focus {
    border-color: #FEAE33 !important;
}
.parche-form select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%233f016e' /%3E%3C/svg%3E") !important;
    background-size: 1.25rem;
    background-repeat: no-repeat;
    background-position: calc(100% - 1rem) center;
    line-height: 1.5 !important; 
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    vertical-align: middle;
}

/* Footer Form Overrides */
#footer input[type="text"],
#footer input[type="password"],
#footer input[type="email"],
#footer select,
#footer textarea { border-color: #e2e2e2; }
#footer input:focus, #footer select:focus, #footer textarea:focus { border-color: #FEAE33; }

/* --- Tables --- */
.table-wrapper { -webkit-overflow-scrolling: touch; overflow-x: auto; }
table { margin: 0 0 2rem 0; width: 100%; border-collapse: collapse; border-spacing: 0; }
table tbody tr { border: solid 1px #eeeeee; border-left: 0; border-right: 0; }
table tbody tr:nth-child(2n + 1) { background-color: rgba(220, 220, 220, 0.25); }
table td { padding: 0.75rem 0.75rem; }
table th {
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.075em;
    line-height: 1.5;
    padding: 0 0.75rem 0.75rem 0.75rem;
    text-align: left;
    text-transform: uppercase;
    color: #212931;
}
table thead { border-bottom: solid 2px #eeeeee; }
table tfoot { border-top: solid 2px #eeeeee; }
table.alt { border-collapse: separate; }
table.alt tbody tr td { border: solid 1px #eeeeee; border-left-width: 0; border-top-width: 0; }
table.alt tbody tr td:first-child { border-left-width: 1px; }
table.alt tbody tr:first-child td { border-top-width: 1px; }
table.alt thead { border-bottom: 0; }
table.alt tfoot { border-top: 0; }

/* --- Lists --- */
ol, ul { list-style: none; }
ol { list-style: decimal; margin: 0 0 2rem 0; padding-left: 1.25rem; }
ol li { padding-left: 0.25rem; }
ul { list-style: disc; margin: 0 0 2rem 0; padding-left: 1rem; }
ul li { padding-left: 0.5rem; }
ul.divided { list-style: none; padding-left: 0; }
ul.divided li { border-top: solid 1px #eeeeee; padding: 0.5rem 0; }
ul.divided li:first-child { border-top: 0; padding-top: 0; }
ul.icons { cursor: default; list-style: none; padding-left: 0; }
ul.icons li { display: inline-block; padding: 0 0.5rem 0 0; vertical-align: middle; }
ul.icons li:last-child { padding-right: 0; }
ul.icons li .icon:before { width: 2.25rem; height: 2.25rem; line-height: 2.25rem; display: inline-block; text-align: center; border-radius: 100%; font-size: 1.25rem; }
ul.icons.alt li .icon:before { transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; font-size: 1rem; box-shadow: inset 0 0 0 2px #eeeeee; }
ul.icons li a.icon:hover:before { color: #FEAE33; }
ul.icons.alt li a.icon:hover:before { box-shadow: inset 0 0 0 2px #FEAE33; }
#footer ul.icons.alt li .icon:before { box-shadow: inset 0 0 0 2px #e2e2e2; }
#footer ul.icons.alt li a.icon:hover:before { box-shadow: inset 0 0 0 2px #FEAE33; }

ul.actions { display: flex; cursor: default; list-style: none; margin-left: -1rem; padding-left: 0; }
ul.actions li { padding: 0 0 0 1rem; vertical-align: middle; }
ul.actions.special { justify-content: center; width: 100%; margin-left: 0; }
ul.actions.special li:first-child { padding-left: 0; }
ul.actions.stacked { flex-direction: column; margin-left: 0; }
ul.actions.stacked li { padding: 1.3rem 0 0 0; }
ul.actions.stacked li:first-child { padding-top: 0; }
ul.actions.fit { width: calc(100% + 1rem); }
ul.actions.fit li { flex-grow: 1; flex-shrink: 1; width: 100%; }
ul.actions.fit li > * { width: 100%; }
ul.actions.fit.stacked { width: 100%; }

.pagination { display: inline-flex; user-select: none; cursor: default; list-style: none; margin: 0 0 2rem 2px; padding: 0; }
.pagination a, .pagination span {
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
    border: solid 2px #eeeeee;
    display: inline-block;
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    font-size: 0.8rem;
    font-weight: 900;
    height: 3rem;
    letter-spacing: 0.075em;
    line-height: calc(3rem - 4px);
    margin-left: -2px;
    min-width: 3rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
.pagination a { color: #212931 !important; }
.pagination a:hover { color: #FEAE33 !important; border-color: #FEAE33; z-index: 1; }
.pagination a:hover + a, .pagination a:hover + span { border-left-color: #FEAE33; }
.pagination a.active { background-color: #eeeeee; }
.pagination span { color: #eeeeee; }

/* --- Icons --- */
.icon { text-decoration: none; border-bottom: none; position: relative; }
.icon:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    text-transform: none !important;
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
}
.icon > .label { display: none; }
.icon.solid:before { font-weight: 900; }
.icon.brands:before { font-family: 'Font Awesome 5 Brands'; }

/* --- Images & Boxes --- */
.image { border: 0; display: inline-block; position: relative; }
.image img { display: block; }
.image.left, .image.right { max-width: 40%; }
.image.left img, .image.right img { width: 100%; }
.image.left { float: left; margin: 0 2rem 2rem 0; top: 0.75rem; }
.image.right { float: right; margin: 0 0 2rem 2rem; top: 0.75rem; }
.image.fit { display: block; margin: 2.5rem 0; width: 100%; }
.image.fit:first-child { margin-top: 0; }
.image.fit img { width: 100%; }
.image.main { display: block; margin: 4rem 0; width: 100%; }
.image.main:first-child { margin-top: 0; }
.image.main img { width: 100%; }
a.image { overflow: hidden; }
a.image img { transition: transform 0.2s ease-out; }
a.image:hover img { transform: scale(1.05); }

#main > .post.featured .image.main {
    width: 70% !important;
    margin: 2rem auto !important;
    max-width: 800px;
}

.box { border: solid 2px #eeeeee; margin-bottom: 2rem; padding: 1.5rem; }
.box > :last-child, .box > :last-child > :last-child, .box > :last-child > :last-child > :last-child { margin-bottom: 0; }
.box.alt { border: 0; border-radius: 0; padding: 0; }

/* --- Cards (Campaign) --- */
.proposal-card {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease;
    color: #3f016e;
}
.proposal-card:hover { transform: translateY(-5px); }
.proposal-card h3 {
    color: #3f016e;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #FEAE33;
    display: inline-block;
    padding-bottom: 5px;
}
.proposal-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    text-align: left;
    color: #3f016e;
}

.parche-card {
    background: #ffffff;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    max-width: 700px;
    margin: 0 auto;
    color: #3f016e;
    border: 1px solid #eeeeee;
}

/* ==========================================================================
   6. SPECIFIC SECTIONS
   ========================================================================== */

/* --- Desktop Navigation --- */
#top-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    height: 4.5rem;
    z-index: 1000;
    transition: background-color 0.5s ease;
}
.nav-left { display: flex; align-items: center; gap: 1.5rem; margin-left: 2rem; flex: 1; }
.nav-left a {
    color: #3f016e;
    text-decoration: none;
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    font-weight: 900;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.075em;
    transition: color 0.2s ease;
    border-bottom: none;
}
body.scrolled #top-nav .nav-left a {
    color: #ffffff !important;
}

.nav-left a:hover { color: #FEAE33; }
.nav-center { display: flex; justify-content: center; align-items: center; flex: 1; }
.nav-logo-image { width: 250px; height: auto; display: block; }
.nav-right { display: flex; align-items: center; justify-content: flex-end; margin-right: 2rem; flex: 1; }

/* Dropdowns */
.dropdown { position: relative; display: inline-block; padding-bottom: 15px; margin-bottom: -15px; }
.dropdown-content {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1001;
    border-radius: 8px;
    margin-top: 5px; 
    overflow: hidden;
}
.dropdown-content::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    height: 15px;
    background: transparent;
}
.dropdown:hover .dropdown-content { display: block; animation: fadeIn 0.3s ease forwards; }
.dropdown-content a {
    color: #3f016e !important;
    padding: 12px 16px;
    text-align: center; 
    display: block;
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    font-weight: 900;
    font-size: 0.75rem;
    text-transform: uppercase;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f0f0f0 !important;
}
.dropdown-content a:hover {
    background-color: #FEAE33; /* Teal/Blue Brand Color */
    color: #ffffff !important; /* White text */
}


/* --- Intro / Hero --- */
#intro {
    background-color: #ffffff !important;
    color: #3f016e !important;
    padding: 0 2rem;               /* Reduced top/bottom padding to let flexbox center it */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;             /* CHANGED: Forces full screen height */
    transition: opacity 1s ease, transform 1s ease;
    position: relative;
    cursor: default;
    text-align: center;
    z-index: 1;
    margin-top: 0;
}

#intro h1 {
    font-family: "Source Sans Pro", Helvetica, sans-serif; /* Keep original font */
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: #3f016e !important; /* Ensure it stays purple */
    text-transform: uppercase;
}

/* Specific style for the subheading */
#intro h1 .sub-heading-text {
    display: block;             /* Moves it to a new line */
    font-size: 1.6rem;          /* Smaller as requested */
    font-weight: 900;           /* Keeps the heavy weight of the original font */
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
    color: #FEAE33 !important;
}

#intro p { font-size: 0.80rem; font-style: italic; margin-top: -0.25rem; text-align: left; color: #3f016e !important; }
#intro a { color: #ffffff; border-bottom-color: rgba(255, 255, 255, 0.5); }
#intro a:hover { border-bottom-color: transparent; color: #FEAE33 !important; }
#intro.hidden {
    pointer-events: none;
    transform: translateY(2rem);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
    opacity: 0;
    visibility: hidden;
}
body.is-preload #intro { transform: translateY(2rem); opacity: 0; }

.split-hero { 
    display: flex; 
    align-items: center; 
    width: 100%; 
    max-width: 1400px; /* Increased from 1200px to give it more room to move */
    margin: 0;         /* Changed from '0 auto' to '0' to align the container left */
    gap: 0rem; 
}
.hero-content { flex: 0.8; text-align: left; }
.hero-image { 
    flex: 1.2; 
    margin-left: -5rem; /* Shifting the container to the left */
    position: relative;
    z-index: 1;
}
.hero-image img { 
    max-width: 100%;    /* Slightly larger to help with the shift */
    height: auto; 
    display: block; 
    margin-left: 0rem; /* Shifting the actual image within the container */
}

/* --- Section Backgrounds --- */
section.special, article.special { text-align: center; }
#news { background-color: #f9f9f9; }
section { transition: background-color 0.5s ease; }

/* About */
#about-natalia { background-color: #3f016e !important; }
#about-natalia p { color: #ffffff; }

/* Proposals */
#proposals-natalia {
    background-color: #f1f2f6 !important;
    padding: 8rem 10% 2rem 10% !important;
}
#proposals-natalia header.major h2 { color: #3f016e !important; }

/* Volunteer / Hagamos Parche */
#volunteer-natalia, 
.hagamos-parche {
    background-color: #ffffff !important;
    padding: 3rem 10% !important;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}
.hagamos-parche h2 {
    color: #3f016e;
    font-weight: 900;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}
.hagamos-parche h2 span { color: #FEAE33; }

.centered-subtitle {
    text-align: center !important;
    margin: 0 auto 3rem auto !important;
    max-width: 700px;
    font-style: italic;
    color: #717981;
}

/* Headers General */
header { cursor: default; }
header > .date { display: block; font-size: 0.8rem; height: 1; margin: 0 0 1rem 0; position: relative; }
header > p { font-style: italic; }
header > h1 + p { font-size: 1.1rem; margin-top: -0.5rem; line-height: 2; }
header > h2 + p { font-size: 1rem; margin-top: -0.75rem; }
header > h3 + p { font-size: 0.9rem; margin-top: -0.75rem; }
header > h4 + p { font-size: 0.8rem; margin-top: -0.75rem; }
header.major { margin: 0 0 4rem 0; text-align: center; }
header.major > :last-child { margin-bottom: 0; }
header.major > p { margin-top: 0; text-align: center; }
header.major > .date { font-size: 1rem; margin: 0 0 4rem 0; }
header.major > .date:before, header.major > .date:after {
    content: ''; display: block; position: absolute; top: 50%;
    width: calc(50% - 6rem); border-top: solid 2px #eeeeee;
}
header.major > .date:before { left: 0; }
header.major > .date:after { right: 0; }

/* ==========================================================================
   7. UTILITIES & ANIMATIONS
   ========================================================================== */

@keyframes fadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(5px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.mobile-only { display: none !important; }
.social-embed { display: flex; justify-content: center; }
.social-embed iframe, .social-embed blockquote { width: 100% !important; max-width: 100% !important; }
.social-embed iframe { border-radius: 12px; }
.instagram-media { margin-left: auto !important; margin-right: auto !important; }

/* ==========================================================================
   8. MEDIA QUERIES
   ========================================================================== */

/* Max-Width: 1680px */
@media screen and (max-width: 1680px) {
    html { font-size: 12pt; }
}

/* Max-Width: 1280px */
@media screen and (max-width: 1280px) {
    html { font-size: 11pt; }
    #main > .post { padding: 6rem 4rem 4rem 4rem; }
}

/* Max-Width: 980px */
@media screen and (max-width: 980px) {
    #top-nav { display: none; }
    #intro { padding: 4rem 4rem 2rem 4rem; min-height: 90vh; }
    #intro p br { display: none; }
    header br { display: none; }
    header.major { margin: 0 0 2rem 0; }
    label { font-size: 0.9rem; }
    .button { font-size: 0.9rem; height: 3.25rem; line-height: 3.25rem; }
    .button.large { font-size: 1rem; height: 3.75rem; line-height: 3.75rem; }
    #main > .posts > * { width: 50%; padding: 2.5rem; }
    #footer { display: block; }
    #footer > section { border-top: solid 2px #e2e2e2; }
    #footer > section:first-child { border-top: 0; }
    #footer > section.split > section { padding: 4rem 4rem 2rem 4rem; }
    #footer > section.split > section:first-child { padding: 4rem 4rem 2rem 4rem; }
    #footer > section.split > section:last-child { padding: 4rem 4rem 2rem 4rem; }
    #copyright { margin: 4rem auto; }
}

/* Max-Width: 736px (Mobile) */
@media screen and (max-width: 736px) {
    /* Base Mobile Styles */
    .mobile-only { display: block !important; }
    .desktop-only { display: none !important; }
    .floating-logo { display: none !important; }
    #wrapper.fade-in:before { display: none !important; }
    body.is-preload #wrapper.fade-in:before { opacity: 0 !important; }
	
	body {
        background-color: #ffffff !important;
    }

	body.is-preload #wrapper {
        opacity: 1 !important;
        visibility: visible !important;
        transition: none !important;
    }

	body.is-preload #wrapper:before,
    #wrapper.fade-in:before {
        display: none !important;
        content: none !important;
    }

    /* Mobile Menu Toggle (Hamburger) */
    #mobile-menu-toggle {
        position: fixed;
        top: 25px !important;
        left: 25px !important;
        width: 26px !important;
        height: 18px !important;
        z-index: 10001;
        cursor: pointer;
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
    }
    #mobile-menu-toggle span {
        display: block !important;
        height: 2px !important;
        width: 100% !important;
        background-color: #000000; /* Explicitly black per logic, or overridden below */
        border-radius: 1px;
        transition: all 0.3s ease;
    }
    #mobile-menu-toggle.open span { background-color: #ffffff !important; }
    #mobile-menu-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    #mobile-menu-toggle.open span:nth-child(2) { opacity: 0; }
    #mobile-menu-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* Mobile Top Right Button */
    .mobile-parche-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 25px;
        right: 25px;
        z-index: 10001;
        background-color: #ffffff !important;
        color: #3f016e !important; 
        border: 2px solid #3f016e !important;
        font-size: 0.9rem !important; 
        padding: 0 1.2rem !important;
        height: 2.5rem !important;
        border-radius: 50px;
        font-family: "Source Sans Pro", Helvetica, sans-serif;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        transition: all 0.3s ease !important;
    }
    #mobile-menu-toggle.open ~ .mobile-parche-btn {
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    /* Mobile Overlay Menu */
    #mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.95);
        z-index: 10000;
        display: none;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    #mobile-menu-overlay.active { display: flex; }
    #mobile-menu-overlay ul { list-style: none; padding: 0; }
    #mobile-menu-overlay ul li { margin: 1.2rem 0 !important; }
    #mobile-menu-overlay ul li a {
        font-size: 2rem;
        text-decoration: none;
        color: white;
        font-weight: bold;
        text-transform: uppercase;
    }
    .donate-link { color: #e74c3c !important; }
    .mobile-logo-wrapper {
        display: block !important;
        width: 100%;
        text-align: center;
        margin-top: 3rem;
        margin-bottom: 0rem;
    }
    .mobile-logo-wrapper img { width: 80%; max-width: 280px; height: auto; }
    .whatsapp-nav-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        background-color: #25d366 !important;
        color: #ffffff !important;
        padding: 0.8rem 1.5rem !important;
        border-radius: 50px;
        font-size: 1.1rem !important;
        font-weight: 900;
        margin-top: 1rem;
        border-bottom: none !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }
    .whatsapp-nav-btn i { margin-right: 10px; font-size: 1.4rem; }

    /* Intro & Hero Mobile */
    #intro { 
        height: auto !important; 
        min-height: 100vh !important; 
        padding: 3rem 1rem 2rem 1rem !important; 
    }
    @media screen and (max-width: 736px) {
        #intro h1.main-heading {
            font-size: 2.5rem;
        }
        #intro h1.main-heading .sub-heading {
            font-size: 1.2rem;
        }
    }
    #intro p { font-size: 1rem; margin-top: 0rem; }
    #intro .actions { display: none; }
    #intro .button { font-size: 0.8rem !important; display: block; width: 100%; }
    
    .split-hero { flex-direction: column; text-align: center; gap: 1rem !important; }
    .hero-content { flex: 1; text-align: left; }
    .hero-image { width: 125% !important; margin-bottom: 1rem !important; margin-top: 2rem !important; }
    .hero-image img { width: 180% !important; transform: scale(1.1); margin-top: 0rem !important; margin-left: 1rem !important; }


    /* Main Content Mobile */
    #main > * { padding: 4rem 1.5rem; }
    #main > .post { padding: 4rem 2rem 2rem 2rem; }
    #main > .post header.major > .date { margin-top: -1rem; margin-bottom: 2rem; }
    #main > .post header.major > h1, #main > .post header.major h2 { font-size: 2.5rem; line-height: 1.2; margin: 0 0 1.5rem 0; }
    
    /* Post Grid Mobile */
    #main > .posts > * { width: 100%; padding: 2rem; }
    #main > .posts > article:nth-child(2n - 1) { border-left-width: 2px; }
    #main > .posts > article:nth-child(-n + 2) { border-top-width: 2px; }
    #main > .posts > article:nth-child(n) { border-left-width: 0; }
    #main > .posts > article:nth-child(-n + 1) { border-top-width: 0; }
    #main > .posts > article .image { max-width: 25rem; margin-left: auto; margin-right: auto; }

    /* Featured Post Mobile */
    #main > .post.featured .image.main { width: 100% !important; margin: 1.5rem 0 !important; }
    #main > .post.featured header.major h2 { font-size: 1.8rem !important; }

    /* Sections Mobile */
    #about, #proposals, #volunteer { padding-top: 4rem !important; padding-bottom: 4rem !important; }
    
    /* Proposals Card Stacking */
    #proposals-natalia .row > div {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        margin-bottom: 2rem;
    }
    .proposal-card { padding: 2rem !important; }

    /* Forms & Actions Mobile */
    .image.fit, .image.main { margin: 2rem 0; }
    form > .fields { width: calc(100% + 3rem); margin: -1.5rem 0 2rem -1.5rem; }
    form > .fields > .field { padding: 1.5rem 0 0 1.5rem; width: calc(100% - 1.5rem); }
    form > .fields > .field.half, form > .fields > .field.third, form > .fields > .field.quarter { width: calc(100% - 1.5rem); }
    
    ul.actions:not(.fixed) { flex-direction: column; margin-left: 0; width: 100% !important; }
    ul.actions:not(.fixed) li { flex-grow: 1; flex-shrink: 1; padding: 1rem 0 0 0; text-align: center; width: 100%; }
    ul.actions:not(.fixed) li > * { width: 100%; }
    ul.actions:not(.fixed) li:first-child { padding-top: 0; }
    ul.actions:not(.fixed) li .button { width: 100%; }
    
    .pagination .page, .pagination .extra { display: none; }
    
    /* Parche Form Mobile */
    .parche-form .form-row { flex-direction: column; gap: 0; }
    .parche-card { padding: 1.5rem; }

    /* Footer Mobile */
    #footer { width: 100%; }
    #footer > section { padding: 2rem 2rem 0.1rem 2rem; }
    #footer > section.split > section { padding: 2rem 2rem 0.1rem 2rem; }
    #footer > section.split > section:first-child { padding: 2rem 2rem 0.1rem 2rem; }
    #footer > section.split > section:last-child { padding: 2rem 2rem 0.1rem 2rem; }
    #copyright ul li { border-left: 0; margin: 1rem 0 0 0; padding-left: 0; display: block; }
    #copyright ul li:first-child { margin-top: 0; }
	.mobile-only { display: block !important; }
}

/* Max-Width: 480px */
@media screen and (max-width: 480px) {
    #main { width: 100%; }
    #footer { width: 100%; }
}

/* Max-Width: 360px */
@media screen and (max-width: 360px) {
    html { font-size: 10pt; }
}

/* Orientation & Other */
@media screen and (orientation: portrait) {
    #wrapper > .bg { background-size: auto, auto, auto 175%; }
}

@media screen and (min-width: 737px) {
    #mobile-menu-toggle { display: none; }
}


.bg.fixed {
    background: none !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

/* keep current spacing ABOVE copyright, remove ALL space below it */
#copyright {
    margin-top: 0 !important;          /* keep how it looks now */
    padding-top: 0.5rem !important;    /* keep how it looks now */
    
    /* ↓↓↓ remove bottom whitespace only ↓↓↓ */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* absolutely kill any extra space under copyright */
/* make sure copyright text is visible */
#copyright {
    color: #000 !important;             /* black text */
    font-size: 0.9rem;
    text-align: center;

    margin-top: 0.5rem !important;      /* keep visible spacing */
    padding-top: 0.5rem !important;

    /* remove space BELOW only */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;

    overflow: visible !important;       /* prevents clipping */
    height: auto !important;
}

/* DO NOT hide copyright anymore */
#copyright::after,
#copyright::before {
    content: none !important;
}

/* remove whitespace at very bottom of page */
html, body {
    margin-bottom: 0 !important;
    padding-bottom: 1rem !important;
}

/* Ensure Mobile Overlay is hidden on Desktop */
#mobile-menu-overlay {
    display: none;
}

.social-embed {
    display: flex;
    justify-content: center;
    /* Reduce padding slightly for embeds so they have more width */
    padding: 2rem !important; 
}

.social-embed iframe, 
.social-embed blockquote {
    width: 100% !important;
    max-width: 100% !important;
}

.social-embed iframe {
    border-radius: 12px;
    /* Key fix: Force the height to scale with the width */
    height: auto !important;
    aspect-ratio: 9/16;       /* Standard vertical video ratio */
    min-height: 500px;        /* Safety minimum height */
}

@media screen and (max-width: 736px) {
    /* --- 1. Top Right Buttons (Volunteer + WhatsApp) --- */
    .mobile-parche-btn.mobile-only {
        right: 75px !important; 
        padding: 0 1rem !important;
    }

    .mobile-whatsapp-float {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 25px;
        right: 25px;
        z-index: 10001;
        background-color: #ffffff !important; 
        color: #25d366 !important;            
        width: 2.5rem;                         
        height: 2.5rem;
        border-radius: 50%;
        font-size: 1.2rem;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        transition: all 0.3s ease;
        border: 2px solid #3f016e !important; 
    }

    .mobile-whatsapp-float:active {
        background-color: #3f016e !important;
        color: #ffffff !important;
    }

    /* --- 2. Intro Section Container --- */
    #intro { 
        height: auto !important; 
        min-height: 100vh !important; 
        padding: 3rem 1.5rem 2rem 1.5rem !important; /* Balanced side padding from last block */
    }

    /* --- 3. Hero Layout (Content & Images) --- */
    .split-hero { 
        flex-direction: column; 
        text-align: center; 
        gap: 1rem !important; 
    }

    .hero-content { 
        flex: 1; 
        width: 100% !important;
        text-align: left; /* Restores left alignment */
        padding: 0 !important;
        margin: 0 !important;
        margin-top: -3rem !important; 
    }

    .hero-image { 
        width: 125% !important;     
        margin-left: 0rem !important;   /* Shift from last block */
        margin-right: 0 !important;
        margin-bottom: 0rem !important; 
        margin-top: -3rem !important; 
    }

    .hero-image img { 
        width: 100% !important;      
        transform: scale(1) !important; /* Reset zoom */
        margin-left: 0 !important;   
        margin-top: 0 !important;
    }

    /* --- 4. Text Adjustments --- */
    #intro h1 .sub-heading-text {
        font-size: 1.2rem !important;
    }
}

@media screen{
    
    /* --- 1. Maximize Screen Width (Reduce Padding) --- */
    #intro { 
        padding: 4rem 1rem 2rem 1rem !important; /* Reduced side padding to 1rem */
        text-align: center !important;
        height: auto !important;
        min-height: 100vh !important;
    }

    /* --- 2. Make the Image Fill the Width --- */
    .hero-image { 
        width: 100% !important;     
        margin: 0 !important;       /* Remove margins */
        margin-bottom: 1rem !important; 
    }

    .hero-image img { 
        width: 115% !important;      /* Zoom in slightly to cut off whitespace edges */
        margin-left: -7.5% !important; /* Center the zoomed image */
        transform: scale(1) !important;
        max-width: none !important;  /* Allow it to overflow the container slightly if needed */
    }

    /* --- 3. Make Typography Bigger & Bolder --- */
    #intro h1 {
        font-size: 3rem !important;      /* INCREASED from 2.2rem */
        line-height: 1 !important;
        margin-bottom: 0.5rem !important;
        margin-top: 0.5rem !important;
    }

    .sub-heading-text {
        display: block;
        font-size: 1.3rem !important;    /* INCREASED from 1rem */
        letter-spacing: 0.05em;
        margin-top: 0.5rem;
        font-weight: 600;                /* Made bolder */
    }

    /* --- 4. Make Body Text Wider and Readable --- */
    .hero-content { 
        width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
    }

    #intro p {
        font-style: normal !important;
        text-align: center !important;
        font-size: 1.5rem !important;   /* INCREASED size */
        line-height: 1.3 !important;     /* Tighter line height for impact */
        color: #3f016e !important;
        margin-top: 1rem !important;
        font-weight: 500 !important;
    }

    /* --- 5. Button Adjustments (Top Right) --- */
    .mobile-parche-btn.mobile-only {
        right: 75px !important; 
        padding: 0 1rem !important;
    }
}
 /* =========================
   VIDEO MODAL - BULLETPROOF
========================= */
#videoModal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.9) !important;
  z-index: 999999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
}

#videoModal.show {
  display: flex !important;
}

.video-modal-content {
  position: relative !important;
  width: 90vw !important;
  max-width: 400px !important;
  aspect-ratio: 9 / 16 !important;
  background: #000 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
}

#videoPlayer {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.video-close-btn {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  z-index: 999999 !important;
  background: rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  border: 2px solid white !important;
  font-size: 28px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  line-height: 36px !important;
  text-align: center !important;
  padding: 0 !important;
  font-weight: bold !important;
  transition: background 0.2s ease !important;
}

.video-close-btn:hover {
  background: rgba(255, 255, 255, 0.6) !important;
}

@media screen and (max-width: 736px) {
  .video-modal-content {
    width: 90vw !important;
    max-width: 380px !important;
  }
}

/* --- UNIFIED MOBILE BUTTONS (Kit & WhatsApp) --- */

/* 1. Shared Layout & Dimensions (Makes them identical size) */
.kit-nav-btn,
.whatsapp-nav-btn {
    display: flex !important;           /* Use flexbox to center content */
    align-items: center;
    justify-content: center;
    
    /* CONTROL SIZE HERE */
    width: 100% !important;              /* Both take up 80% of screen width */
    max-width: 320px !important;        /* Stops them from getting too huge */
    height: 3.5rem !important;          /* Forces exact same height */
    margin: 0.8rem auto !important;     /* Centers them horizontally + spacing */
    
    border-radius: 50px;                /* Identical bubble shape */
    font-size: 1rem !important;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.2s ease;
}

/* 2. Specific Style: Kit de Campaña (Purple) */
.kit-nav-btn {
    background-color: #3f016e !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important; /* White border to pop */
}

/* 3. Specific Style: WhatsApp (Green) */
.whatsapp-nav-btn {
    background-color: #25d366 !important;
    color: #ffffff !important;
    border: none !important;              /* No border for WhatsApp */
}

/* WhatsApp Icon spacing */
.whatsapp-nav-btn i {
    margin-right: 10px;
    font-size: 1.4rem;
}

/* Hover Effects */
.kit-nav-btn:hover, .whatsapp-nav-btn:hover {
    transform: scale(1.05);
}

/* 1. Make the overlay darker for better readability */
#mobile-menu-overlay {
    background: rgba(18, 18, 18, 0.98) !important; /* Almost solid black */
}

/* 2. Sleek Typography for Menu Links */
#mobile-menu-overlay ul li a {
    border-bottom: none !important;  /* Removes the dotted lines */
    font-family: "Source Sans Pro", sans-serif; /* Clean sans-serif */
    font-weight: 600 !important;     /* Lighter than the current 900 */
    font-size: 1.25rem !important;   /* Slightly smaller for elegance */
    letter-spacing: 0.15em;          /* Adds spacing for a premium look */
    color: #ffffff !important;
    transition: color 0.3s ease;
}

/* 3. Add Hover Effect */
#mobile-menu-overlay ul li a:not(.kit-nav-btn):not(.whatsapp-nav-btn):hover {
    color: #FEAE33 !important;       /* Orange on touch/hover */
}

/* --- UNIFIED MOBILE BUTTONS (Refined) --- */
.kit-nav-btn,
.whatsapp-nav-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    
    width: 100% !important;           /* Slightly wider to give text room */
    max-width: 340px !important;
    height: 3.5rem !important;       /* Fixed height for uniformity */
    margin: 0.8rem auto !important;
    
    border-radius: 50px;
    font-size: 0.9rem !important;    /* Smaller font prevents text wrapping */
    letter-spacing: 0.05em;          /* Clean spacing */
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Soft shadow for depth */
    transition: transform 0.2s ease;
    white-space: nowrap;             /* Forces text to stay on one line */
}

/* Specific Colors remain the same */
.kit-nav-btn {
    background-color: #8F3292 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.3) !important; /* Subtle border */
}

.whatsapp-nav-btn {
    background-color: #25d366 !important;
    color: #ffffff !important;
    border: none !important;
}

/* Fix Icon Spacing */
.whatsapp-nav-btn i {
    margin-right: 8px;
    font-size: 1.3rem;
    margin-bottom: 2px; /* Visual alignment fix */
}

/* Pushes the buttons down to create a "Footer" feel in the menu */
#mobile-menu-overlay ul li:nth-last-child(2) {
    margin-top: 3rem !important;
}

/* Add extra top spacing specifically to the Kit button to separate groups */
.kit-nav-btn {
    margin-top: 2.5rem !important; 
}

/* ===== FULLSCREEN OVERLAY ===== */
.image-modal {
  position: fixed;
  inset: 0;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 2147483647; /* MAX SAFE Z-INDEX */

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.image-modal.active {
  opacity: 1;
  pointer-events: auto;
}



/* ===== IMAGE CONTAINER ===== */
.image-modal__content {
  position: relative;
}

/* ===== IMAGE ===== */
.image-modal__img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;

  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.65);
}

/* ===== CLOSE BUTTON (BRIGHT + IMAGE CORNER) ===== */
.image-modal__close {
  position: absolute;
  top: -1px;
  right: 7px;

  background: none;
  border: none;
  outline: none;
  box-shadow: none;

  color: #ffffff;        /* pure white X */
  font-size: 36px;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;
  padding: 0;
  margin: 0;

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); /* pop on purple */
}

/* Remove browser focus ring */
.image-modal__close:focus {
  outline: none;
  box-shadow: none;
}

/* Optional hover polish */
.image-modal__close:hover {
  opacity: 0.85;
  transform: scale(1.08);
}

.image-modal .image-modal__close {
  color: white !important;
}


body.modal-open > *:not(.image-modal) {
  visibility: hidden;
}

@media (max-width: 600px) {
  .image-modal__close {
    font-size: 24px;   /* smaller X on mobile */
  }
}