/* ===== RESET & BASE ===== */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'DM Sans', system-ui, sans-serif;
     color: #292524;
     background: #fff;
     -webkit-font-smoothing: antialiased;
 }

 img {
     max-width: 100%;
     display: block;
 }

 a {
     text-decoration: none;
     color: inherit;
 }

 button {
     cursor: pointer;
     font-family: inherit;
     border: none;
     background: none;
 }

 input,
 textarea,
 select {
     font-family: inherit;
 }

 textarea {
     resize: none;
 }

 /* ===== CUSTOM COLORS ===== */
 :root {
     --forest-50: #f0faf4;
     --forest-100: #dbf2e5;
     --forest-200: #b9e5ce;
     --forest-400: #4db389;
     --forest-500: #2a9469;
     --forest-600: #1b7855;
     --forest-700: #166044;
     --forest-900: #12402f;
     --earth-50: #fdf8f0;
     --earth-100: #faefd9;
     --earth-300: #eabd6e;
     --earth-400: #e09e3a;
     --earth-500: #d4821e;
     --earth-600: #b86516;
     --warm-50: #fdfaf7;
     --warm-100: #f8f1e7;
     --stone-100: #f5f5f4;
     --stone-200: #e7e5e4;
     --stone-400: #a8a29e;
     --stone-500: #78716c;
     --stone-600: #57534e;
     --stone-700: #44403c;
     --stone-800: #292524;
     --stone-900: #1c1917;
     --stone-950: #0c0a09;
 }

 /* ===== TYPOGRAPHY ===== */
 .font-display {
     font-family: 'DM Serif Display', Georgia, serif;
 }

 /* ===== UTILITY ===== */
 .container {
     max-width: 80rem;
     margin: 0 auto;
     padding: 0 1rem;
 }

 @media (min-width: 640px) {
     .container {
         padding: 0 1.5rem;
     }
 }

 @media (min-width: 1024px) {
     .container {
         padding: 0 2rem;
     }
 }

 .section-label {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     color: #059669;
     font-size: 0.75rem;
     font-weight: 700;
     letter-spacing: 0.2em;
     text-transform: uppercase;
 }


 /* ===== BUTTONS ===== */
 .btn-primary {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     background: #059669;
     color: #fff;
     font-weight: 600;
     font-size: 0.875rem;
     padding: 0.875rem 1.5rem;
     border-radius: 9999px;
     box-shadow: 0 10px 15px -3px rgba(5, 150, 105, .25);
     transition: all .3s;
     text-decoration: none;
 }

 .btn-primary:hover {
     background: #047857;
     transform: translateY(-2px);
     box-shadow: 0 20px 25px -5px rgba(4, 120, 87, .3);
 }

 .btn-earth {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     background: #f59e0b;
     color: #fff;
     font-weight: 600;
     font-size: 0.875rem;
     padding: 0.875rem 1.5rem;
     border-radius: 9999px;
     box-shadow: 0 10px 15px -3px rgba(245, 158, 11, .3);
     transition: all .3s;
     text-decoration: none;
     border: none;
 }

 .btn-earth:hover {
     background: #d97706;
     transform: translateY(-2px);
     box-shadow: 0 20px 25px -5px rgba(217, 119, 6, .3);
 }

 .btn-earth:disabled {
     background: #d6d3d1;
     color: #a8a29e;
     cursor: not-allowed;
     box-shadow: none;
     transform: none;
 }

 .btn-outline {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     border: 2px solid #059669;
     color: #059669;
     font-weight: 600;
     font-size: 0.875rem;
     padding: 0.75rem 1.5rem;
     border-radius: 9999px;
     transition: all .3s;
     background: transparent;
 }

 .btn-outline:hover {
     background: #059669;
     color: #fff;
     transform: translateY(-2px);
 }

 /* ===== ANIMATIONS ===== */
 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(24px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-10px);
     }
 }

 @keyframes bounce {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-8px);
     }
 }

 .animate-float {
     animation: float 6s ease-in-out infinite;
 }

 .animate-bounce {
     animation: bounce 1s ease-in-out infinite;
 }

 .inview-hidden {
     opacity: 0;
     transform: translateY(2rem);
     transition: opacity .7s ease, transform .7s ease;
 }

 .inview-visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* ===== NAVBAR ===== */
 #navbar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 50;
     transition: all .3s;
     background: rgba(12, 10, 9, .45);
     backdrop-filter: blur(12px);
 }

 #navbar.scrolled {
     background: rgba(255, 255, 255, .95);
     backdrop-filter: blur(12px);
     box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
     border-bottom: 1px solid #f5f5f4;
 }

 .nav-inner {
     max-width: 80rem;
     margin: 0 auto;
     padding: 0 1rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 4rem;
 }

 @media(min-width:768px) {
     .nav-inner {
         height: 5rem;
         padding: 0 1.5rem;
     }
 }

 @media(min-width:1024px) {
     .nav-inner {
         padding: 0 2rem;
     }
 }

 .nav-logo {
     display: flex;
     align-items: center;
     gap: .625rem;
 }

 .nav-logo-icon {
     width: 2.25rem;
     height: 2.25rem;
     border-radius: .75rem;
     background: linear-gradient(135deg, #f5f5f4, #e7e5e4);
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
     transition: transform .3s;
 }

 .nav-logo:hover .nav-logo-icon {
     transform: scale(1.05);
 }

 .nav-logo-name {
     font-family: 'DM Serif Display', serif;
     font-size: 1.125rem;
     line-height: 1.2;
     transition: color .3s;
 }

 .nav-logo-name.light {
     color: #fff;
 }

 .nav-logo-name.dark {
     color: #1c1917;
 }

 .nav-logo-type {
     font-size: .5625rem;
     font-weight: 700;
     letter-spacing: .15em;
     text-transform: uppercase;
     transition: color .3s;
 }

 .nav-logo-type.light {
     color: rgba(255, 255, 255, .65);
 }

 .nav-logo-type.dark {
     color: #1b7855;
 }

 .nav-links {
     display: none;
     align-items: center;
     gap: .125rem;
 }

 @media(min-width:1024px) {
     .nav-links {
         display: flex;
     }
 }

 .nav-link {
     padding: .5rem .875rem;
     border-radius: 9999px;
     font-size: .875rem;
     font-weight: 500;
     transition: all .2s;
 }

 .nav-link.light {
     color: rgba(255, 255, 255, .85);
 }

 .nav-link.light:hover {
     color: #fff;
     background: rgba(255, 255, 255, .1);
 }

 .nav-link.dark {
     color: #57534e;
 }

 .nav-link.dark:hover {
     background: #f0faf4;
     color: #1b7855;
 }

 .nav-cta {
     display: none;
     align-items: center;
     gap: .75rem;
 }

 @media(min-width:1024px) {
     .nav-cta {
         display: flex;
     }
 }

 .nav-hamburger {
     display: flex;
     padding: .5rem;
     border-radius: .5rem;
     transition: colors .2s;
 }

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

 .nav-hamburger.light {
     color: #fff;
 }

 .nav-hamburger.light:hover {
     background: rgba(255, 255, 255, .1);
 }

 .nav-hamburger.dark {
     color: #44403c;
 }

 .nav-hamburger.dark:hover {
     background: #f5f5f4;
 }

 .mobile-menu {
     display: none;
     background: #fff;
     border-bottom: 1px solid #f5f5f4;
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1);
 }

 .mobile-menu.open {
     display: block;
 }

 .mobile-menu-inner {
     max-width: 80rem;
     margin: 0 auto;
     padding: 1rem;
     display: flex;
     flex-direction: column;
     gap: .25rem;
 }

 .mobile-link {
     padding: .75rem 1rem;
     border-radius: .75rem;
     font-size: .875rem;
     font-weight: 500;
     color: #44403c;
     transition: all .2s;
     display: block;
 }

 .mobile-link:hover {
     background: #f0faf4;
     color: #1b7855;
 }

 /* ===== HERO ===== */
 #inicio {
     position: relative;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     overflow: hidden;
 }

 .hero-bg {
     position: absolute;
     inset: 0;
     z-index: 0;
 }

 .hero-bg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }

 .hero-overlay1 {
     position: absolute;
     inset: 0;
     background: linear-gradient(to right, rgba(12, 10, 9, .9) 0%, rgba(28, 25, 23, .65) 50%, rgba(28, 25, 23, .3) 100%);
 }

 .hero-overlay2 {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(12, 10, 9, .7) 0%, transparent 60%);
 }

 .hero-content {
     position: relative;
     z-index: 10;
     flex: 1;
     display: flex;
     align-items: center;
 }

 .hero-text {
     max-width: 80rem;
     margin: 0 auto;
     padding: 6rem 1rem 4rem;
     width: 100%;
 }

 @media(min-width:640px) {
     .hero-text {
         padding-left: 1.5rem;
         padding-right: 1.5rem;
     }
 }

 @media(min-width:1024px) {
     .hero-text {
         padding-left: 2rem;
         padding-right: 2rem;
     }
 }

 .hero-title {
     font-family: 'DM Serif Display', serif;
     font-weight: 400;
     color: #fff;
     line-height: 1.15;
     font-size: 2.5rem;
     margin-bottom: 1.5rem;
 }

 @media(min-width:640px) {
     .hero-title {
         font-size: 3rem;
     }
 }

 @media(min-width:768px) {
     .hero-title {
         font-size: 3.75rem;
     }
 }

 @media(min-width:1280px) {
     .hero-title {
         font-size: 4.5rem;
     }
 }

 .hero-subtitle {
     color: rgba(255, 255, 255, .75);
     font-size: 1.125rem;
     font-weight: 300;
     line-height: 1.7;
     margin-bottom: 2.5rem;
     max-width: 32rem;
 }

 @media(min-width:768px) {
     .hero-subtitle {
         font-size: 1.25rem;
     }
 }

 .hero-buttons {
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }

 @media(min-width:640px) {
     .hero-buttons {
         flex-direction: row;
         flex-wrap: wrap;
     }
 }

 .hero-stats {
     position: relative;
     z-index: 10;
     max-width: 80rem;
     margin: 0 auto;
     width: 100%;
     padding: 0 1rem;
 }

 @media(min-width:640px) {
     .hero-stats {
         padding: 0 1.5rem;
     }
 }

 @media(min-width:1024px) {
     .hero-stats {
         padding: 0 2rem;
     }
 }

 .stats-bar {
     background: rgba(255, 255, 255, .1);
     backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, .15);
     border-radius: 1rem 1rem 0 0;
     display: grid;
     grid-template-columns: 1fr 1fr;
 }

 @media(min-width:1024px) {
     .stats-bar {
         grid-template-columns: repeat(4, 1fr);
     }
 }

 .stat-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 1.5rem 1rem;
     text-align: center;
     border-right: 1px solid rgba(255, 255, 255, .15);
 }

 .stat-item:last-child {
     border-right: none;
 }

 .stat-item:nth-child(n+3) {
     border-top: 1px solid rgba(255, 255, 255, .15);
 }

 @media(min-width:1024px) {
     .stat-item:nth-child(n+3) {
         border-top: none;
     }
 }

 .stat-value {
     font-family: 'DM Serif Display', serif;
     font-size: 1.875rem;
     color: #fff;
     font-weight: 400;
 }

 @media(min-width:768px) {
     .stat-value {
         font-size: 2.25rem;
     }
 }

 .stat-label {
     color: rgba(255, 255, 255, .55);
     font-size: .75rem;
     font-weight: 500;
     margin-top: .25rem;
 }

 /* ===== ABOUT ===== */
 #nosotros {
     padding: 5rem 0;
     background: var(--warm-50);
 }

 @media(min-width:1024px) {
     #nosotros {
         padding: 7rem 0;
     }
 }

 .about-grid {
     display: grid;
     gap: 3rem;
 }

 @media(min-width:1024px) {
     .about-grid {
         grid-template-columns: 1fr 1fr;
         gap: 5rem;
         align-items: center;
     }
 }

 .about-img-wrap {
     position: relative;
     order: 2;
 }

 @media(min-width:1024px) {
     .about-img-wrap {
         order: 1;
     }
 }

 .about-img-bg {
     position: absolute;
     inset: -0.75rem;
     background: linear-gradient(135deg, var(--forest-100), var(--earth-100));
     border-radius: 1.5rem;
 }

 .about-img-inner {
     position: relative;
     border-radius: 1rem;
     overflow: hidden;
     box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
     aspect-ratio: 4/5;
     max-width: 24rem;
     margin: 0 auto;
 }

 @media(min-width:1024px) {
     .about-img-inner {
         margin: 0;
     }
 }

 .about-img-inner img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .about-img-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(28, 25, 23, .5), transparent);
 }

 .about-badge {
     position: absolute;
     bottom: -1rem;
     right: -.5rem;
     background: #fff;
     border-radius: 1rem;
     box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
     padding: 1rem;
     width: 11rem;
 }

 @media(min-width:768px) {
     .about-badge {
         right: -1.5rem;
     }
 }

 .about-badge-row {
     display: flex;
     align-items: center;
     gap: .5rem;
     margin-bottom: .5rem;
 }

 .about-badge-year-label {
     font-size: .75rem;
     font-weight: 700;
     color: #292524;
 }

 .about-badge-year {
     color: #1b7855;
     font-weight: 700;
     font-size: 1.125rem;
     line-height: 1;
 }

 .about-badge-note {
     font-size: .625rem;
     color: #a8a29e;
 }

 .about-content {
     order: 1;
 }

 @media(min-width:1024px) {
     .about-content {
         order: 2;
     }
 }

 .section-title {
     font-family: 'DM Serif Display', serif;
     font-weight: 400;
     color: #1c1917;
     line-height: 1.2;
     font-size: 1.875rem;
     margin-bottom: 1.5rem;
 }

 @media(min-width:768px) {
     .section-title {
         font-size: 2.25rem;
     }
 }

 @media(min-width:1024px) {
     .section-title {
         font-size: 3rem;
     }
 }

 .about-text {
     color: #57534e;
     font-size: 1.125rem;
     line-height: 1.7;
     margin-bottom: 1rem;
     white-space: pre-line;
 }

 .about-text2 {
     color: #78716c;
     line-height: 1.7;
     margin-bottom: 2rem;
 }

 .cards-2col {
     display: grid;
     gap: 1.25rem;
     margin-bottom: 2rem;
 }

 @media(min-width:640px) {
     .cards-2col {
         grid-template-columns: 1fr 1fr;
     }
 }

 .card-sm {
     background: #fff;
     border-radius: 1rem;
     padding: 1.25rem;
     box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
     border: 1px solid #f5f5f4;
 }

 .card-icon-wrap {
     width: 2.25rem;
     height: 2.25rem;
     border-radius: .75rem;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: .75rem;
 }

 .card-icon-wrap.green {
     background: var(--forest-100);
 }

 .card-icon-wrap.earth {
     background: var(--earth-100);
 }

 .card-sm h4 {
     font-weight: 600;
     color: #292524;
     margin-bottom: .5rem;
 }

 .card-sm p {
     color: #78716c;
     font-size: .875rem;
     line-height: 1.6;
 }

 .values-box {
     background: #fff;
     border-radius: 1rem;
     padding: 1.25rem;
     box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
     border: 1px solid #f5f5f4;
 }

 .values-title {
     font-weight: 600;
     color: #292524;
     font-size: .875rem;
     margin-bottom: .75rem;
 }

 .values-list {
     display: flex;
     flex-wrap: wrap;
     gap: .5rem;
 }

 .value-tag {
     display: inline-flex;
     align-items: center;
     gap: .375rem;
     background: var(--forest-50);
     color: var(--forest-700);
     border: 1px solid var(--forest-100);
     font-size: .75rem;
     font-weight: 600;
     padding: .375rem .75rem;
     border-radius: 9999px;
 }

 .value-dot {
     width: .375rem;
     height: .375rem;
     border-radius: 50%;
     background: var(--forest-500);
 }

 /* ===== ACTIVITIES ===== */
 #actividades {
     padding: 5rem 0;
     background: var(--warm-50);
 }

 @media(min-width:1024px) {
     #actividades {
         padding: 7rem 0;
     }
 }

 .section-header {
     text-align: center;
     margin-bottom: 3.5rem;
 }

 .section-subtitle {
     color: #78716c;
     font-size: 1.125rem;
     max-width: 32rem;
     margin: 0 auto;
     line-height: 1.7;
 }

 .activities-grid {
     display: grid;
     gap: 1.5rem;
 }

 @media(min-width:640px) {
     .activities-grid {
         grid-template-columns: 1fr 1fr;
     }
 }

 @media(min-width:1024px) {
     .activities-grid {
         grid-template-columns: repeat(4, 1fr);
     }
 }

 .activity-card {
     background: #fff;
     border-radius: 1rem;
     overflow: hidden;
     box-shadow: 0 4px 6px rgba(0, 0, 0, .07);
     border: 1px solid #f5f5f4;
     transition: all .4s;
     cursor: pointer;
 }

 .activity-card:hover {
     box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
     transform: translateY(-6px);
 }

 .activity-img {
     position: relative;
     height: 11rem;
     overflow: hidden;
 }

 .activity-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .6s;
 }

 .activity-card:hover .activity-img img {
     transform: scale(1.1);
 }

 .activity-img-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(0, 0, 0, .5), transparent);
 }

 .activity-icon-badge {
     position: absolute;
     top: .75rem;
     left: .75rem;
     width: 2.25rem;
     height: 2.25rem;
     border-radius: .75rem;
     background: rgba(255, 255, 255, .9);
     backdrop-filter: blur(4px);
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
 }

 .activity-body {
     padding: 1.25rem;
 }

 .activity-title {
     font-weight: 600;
     color: #1c1917;
     font-size: .875rem;
     line-height: 1.4;
     margin-bottom: .5rem;
 }

 .activity-desc {
     color: #78716c;
     font-size: .75rem;
     line-height: 1.6;
 }

 .activity-footer {
     padding: 0 1.25rem 1.25rem;
 }

 .activity-link {
     font-size: .75rem;
     font-weight: 600;
     color: var(--forest-600);
     transition: color .2s;
 }

 .activity-link:hover {
     color: var(--forest-700);
 }

 .btn-contacto:hover {
     box-shadow: 0 20px 20px rgba(196, 195, 195, 0.12);
     transform: translateY(-2px);
 }

 .btn-whatsapp {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.75rem;

     background: #22c55e;
     color: #fff;

     font-weight: 600;
     font-size: 1rem;

     padding: 1rem 2rem;
     min-width: 240px;

     border-radius: 9999px;
     text-decoration: none;
     border: none;

     box-shadow:
         0 10px 15px -3px rgba(34, 197, 94, .35),
         0 4px 6px -4px rgba(34, 197, 94, .25);

     transition:
         transform .3s ease,
         box-shadow .3s ease,
         background .3s ease;
 }

 .btn-whatsapp:hover {
     background: #16a34a;

     transform: translateY(-4px);

     box-shadow:
         0 25px 35px -5px rgba(22, 163, 74, .45),
         0 10px 15px -3px rgba(22, 163, 74, .35);
 }

 .btn-whatsapp svg {
     flex-shrink: 0;
 }

 /* ===== DONATIONS ===== */
 #donaciones {
     padding: 5rem 0;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #12402f 0%, #1c1917 55%, #0c0a09 100%);
 }

 @media(min-width:1024px) {
     #donaciones {
         padding: 7rem 0;
     }
 }

 .donations-radial {
     position: absolute;
     inset: 0;
     opacity: .1;
     pointer-events: none;
     background: radial-gradient(circle at 20% 50%, #2a9469 0%, transparent 55%), radial-gradient(circle at 80% 30%, #b86516 0%, transparent 50%);
 }

 .donations-grid {
     position: relative;
     display: grid;
     gap: 3rem;
 }

 @media(min-width:1024px) {
     .donations-grid {
         grid-template-columns: 1fr 1fr;
         gap: 4rem;
         align-items: center;
     }
 }

 .donations-label {
     color: var(--earth-300);
     font-size: .75rem;
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     font-weight: 700;
     letter-spacing: .2em;
     text-transform: uppercase;
     margin-bottom: 1rem;
 }

 .donations-title {
     font-family: 'DM Serif Display', serif;
     font-weight: 400;
     color: #fff;
     font-size: 1.875rem;
     line-height: 1.2;
     margin-bottom: 1.5rem;
 }

 @media(min-width:768px) {
     .donations-title {
         font-size: 2.25rem;
     }
 }

 @media(min-width:1024px) {
     .donations-title {
         font-size: 3rem;
     }
 }

 .donations-sub {
     color: #d6d3d1;
     font-size: 1.125rem;
     line-height: 1.7;
     margin-bottom: 2rem;
 }

 .donations-examples {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 1rem;
     margin-bottom: 2rem;
 }

 .donations-examples li {
     display: flex;
     align-items: center;
     gap: .75rem;
 }

 .donations-examples span {
     color: #d6d3d1;
     font-size: .875rem;
     font-weight: 500;
 }

 .donations-secure {
     display: flex;
     align-items: center;
     gap: .75rem;
     color: #a8a29e;
     font-size: .75rem;
 }

 .donate-box {
     background: #fff;
     border-radius: 1.5rem;
     box-shadow: 0 25px 50px rgba(0, 0, 0, .25);
     padding: 1.5rem;
 }

 @media(min-width:768px) {
     .donate-box {
         padding: 2rem;
     }
 }

 .donate-success {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     padding: 1.5rem 0;
 }

 .donate-success-icon {
     width: 5rem;
     height: 5rem;
     border-radius: 50%;
     background: var(--forest-100);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1rem;
 }

 .donate-success h3 {
     font-family: 'DM Serif Display', serif;
     font-size: 1.5rem;
     font-weight: 400;
     color: #1c1917;
     margin-bottom: .5rem;
 }

 .donate-success p {
     color: #78716c;
     margin-bottom: .5rem;
 }

 .donate-success .note {
     color: #a8a29e;
     font-size: .875rem;
     margin-bottom: 1.5rem;
 }

 .freq-toggle {
     display: flex;
     gap: .5rem;
     background: #f5f5f4;
     padding: .25rem;
     border-radius: 9999px;
     margin-bottom: 1.5rem;
 }

 .freq-btn {
     flex: 1;
     padding: .5rem;
     font-size: .875rem;
     font-weight: 600;
     border-radius: 9999px;
     transition: all .2s;
     color: #78716c;
 }

 .freq-btn.active {
     background: #fff;
     box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
     color: #292524;
 }

 .freq-btn:hover:not(.active) {
     color: #44403c;
 }

 .donate-title {
     font-family: 'DM Serif Display', serif;
     font-size: 1.25rem;
     font-weight: 400;
     color: #1c1917;
     margin-bottom: 1.5rem;
 }

 .amounts-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: .75rem;
     margin-bottom: 1rem;
 }

 .amount-btn {
     padding: .875rem;
     border-radius: .75rem;
     border: 2px solid #e7e5e4;
     text-align: left;
     transition: all .2s;
     background: #fff;
 }

 .amount-btn:hover {
     border-color: var(--forest-300);
     background: rgba(240, 250, 244, .5);
 }

 .amount-btn.active {
     border-color: var(--forest-500);
     background: var(--forest-50);
     box-shadow: 0 0 0 2px rgba(42, 148, 105, .15);
 }

 .amount-value {
     font-weight: 700;
     font-size: 1rem;
     color: #292524;
 }

 .amount-btn.active .amount-value {
     color: var(--forest-700);
 }

 .amount-desc {
     font-size: .75rem;
     color: #78716c;
     margin-top: .125rem;
 }

 .custom-input-wrap {
     position: relative;
     margin-bottom: 1.5rem;
     border-radius: .75rem;
     border: 2px solid #e7e5e4;
     padding: .875rem;
     transition: all .2s;
     cursor: text;
     background: #fff;
 }

 .custom-input-wrap.active {
     border-color: var(--forest-500);
     background: var(--forest-50);
 }

 .custom-input-wrap:hover:not(.active) {
     border-color: #d6d3d1;
 }

 .custom-label {
     font-size: .625rem;
     font-weight: 700;
     color: #a8a29e;
     text-transform: uppercase;
     letter-spacing: .1em;
     margin-bottom: .25rem;
 }

 .custom-row {
     display: flex;
     align-items: center;
     gap: .25rem;
 }

 .custom-prefix {
     font-weight: 600;
     color: #78716c;
 }

 .custom-field {
     width: 100%;
     background: transparent;
     font-weight: 700;
     color: #292524;
     outline: none;
     font-size: 1rem;
     border: none;
 }

 .custom-field::placeholder {
     color: #d6d3d1;
 }

 .donate-secure {
     text-align: center;
     font-size: .6875rem;
     color: #a8a29e;
     margin-top: .75rem;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: .5rem;
 }

 /* ===== FINAL CTA ===== */
 .finalcta {
     padding: 5rem 0;
     position: relative;
     overflow: hidden;
 }

 @media(min-width:1024px) {
     .finalcta {
         padding: 7rem 0;
     }
 }

 .finalcta-bg {
     position: absolute;
     inset: 0;
     z-index: 0;
 }

 .finalcta-bg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .finalcta-overlay {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, .6);
 }

 .finalcta-content {
     position: relative;
     z-index: 10;
     max-width: 56rem;
     margin: 0 auto;
     text-align: center;
     padding: 0 1rem;
 }

 .finalcta-icon {
     width: 5rem;
     height: 5rem;
     border-radius: 50%;
     background: rgba(255, 255, 255, .1);
     backdrop-filter: blur(4px);
     border: 1px solid rgba(255, 255, 255, .2);
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 2rem;
 }

 .finalcta-title {
     font-family: 'DM Serif Display', serif;
     font-weight: 400;
     color: #fff;
     font-size: 1.875rem;
     line-height: 1.2;
     margin-bottom: 1.5rem;
 }

 @media(min-width:768px) {
     .finalcta-title {
         font-size: 2.25rem;
     }
 }

 @media(min-width:1024px) {
     .finalcta-title {
         font-size: 3rem;
     }
 }

 .finalcta-sub {
     color: rgba(255, 255, 255, .7);
     font-size: 1.125rem;
     line-height: 1.7;
     margin-bottom: 2.5rem;
     max-width: 40rem;
     margin-left: auto;
     margin-right: auto;
 }

 @media(min-width:768px) {
     .finalcta-sub {
         font-size: 1.25rem;
     }
 }

 .finalcta-buttons {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     justify-content: center;
     margin-bottom: 2.5rem;
 }

 @media(min-width:640px) {
     .finalcta-buttons {
         flex-direction: row;
     }
 }

 .btn-border-white {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: .5rem;
     border: 2px solid rgba(255, 255, 255, .35);
     color: #fff;
     background: rgba(255, 255, 255, .2);
     font-weight: 600;
     font-size: 1rem;
     padding: 1rem 2rem;
     border-radius: 9999px;
     transition: all .3s;
 }

 .btn-border-white:hover {
     background: rgba(255, 255, 255, .1);
 }

 .finalcta-badges {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 1.5rem;
 }

 .finalcta-badge {
     color: rgba(255, 255, 255, .8);
     font-size: .875rem;
     font-weight: 500;
     display: flex;
     align-items: center;
     gap: .5rem;
 }

 /* ===== TEAM ===== */
 #equipo {
     padding: 5rem 0;
 }

 @media(min-width:1024px) {
     #equipo {
         padding: 7rem 0;
     }
 }

 .team-grid {
     display: grid;
     gap: 1.5rem;
 }

 @media(min-width:640px) {
     .team-grid {
         grid-template-columns: 1fr 1fr;
     }
 }

 @media(min-width:1024px) {
     .team-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 .team-card {
     background: #fff;
     border-radius: 1rem;
     overflow: hidden;
     box-shadow: 0 4px 6px rgba(0, 0, 0, .07);
     border: 1px solid #f5f5f4;
     transition: all .5s;
 }

 .team-card:hover {
     box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
     transform: translateY(-6px);
 }

 .team-body {
     padding: 1.25rem;
 }

 .team-icon {
     height: 2.5rem;
     margin: 1rem 0;
 }

 .team-title {
     font-weight: 600;
     color: #1c1917;
     font-size: 1.125rem;
     margin-bottom: .25rem;
 }

 .team-name {
     color: var(--forest-600);
     font-size: .875rem;
     font-weight: 500;
     margin-bottom: .75rem;
 }

 .team-desc {
     color: #78716c;
     font-size: .875rem;
     line-height: 1.6;
 }

 .team-footer {
     padding: 0 1.25rem 1.25rem;
 }

 .team-badge {
     font-size: .75rem;
     font-weight: 600;
     color: #d97706;
 }

 /* ===== CONTACT ===== */
 #contacto {
     padding: 5rem 0;
     background: var(--warm-50);
 }

 @media(min-width:1024px) {
     #contacto {
         padding: 7rem 0;
     }
 }

 .contact-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
     align-items: stretch;
 }

 @media (max-width: 968px) {

     .contact-grid {
         grid-template-columns: 1fr;
         gap: 2.5rem;
     }

     .contacto-img {
         border-radius: 1.5rem;
         max-height: 500px;
     }

 }

 .contact-intro {
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .contact-img-wrap {
     position: relative;
     height: 100%;
 }

 .contacto-img {
     width: 100%;
     height: 100%;

     display: block;

     object-fit: cover;

     border-radius: 2rem;

     box-shadow:
         0 20px 40px rgba(0, 0, 0, .12);
 }


 .contact-intro h2 {
     font-family: 'DM Serif Display', serif;
     font-weight: 400;
     color: #1c1917;
     font-size: 1.875rem;
     line-height: 1.2;
     margin-bottom: 1.5rem;
 }

 @media (min-width: 969px) {

     .contact-grid {
         align-items: stretch;
     }

     .contact-img-wrap {
         max-height: 100%;
     }

     .contacto-img {
         max-height: 100%;
     }

 }

 @media (max-width: 768px) {

     .contact-grid {
         grid-template-columns: 1fr;
     }

     .contacto-img {
         display: none;
     }

 }

 @media(min-width:768px) {
     .contact-intro h2 {
         font-size: 2.25rem;
     }
 }

 @media(min-width:1024px) {
     .contact-intro h2 {
         font-size: 3rem;
     }
 }

 .contact-sub {
     color: #78716c;
     font-size: 1.125rem;
     line-height: 1.7;
     margin-bottom: 2rem;
 }

 .contact-info {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     margin-bottom: 2rem;
 }

 .contact-item {
     display: flex;
     align-items: flex-start;
     gap: 1rem;
     background: #fff;
     border-radius: .75rem;
     padding: 1rem;
     box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
     border: 1px solid #f5f5f4;
 }

 .contact-item-icon {
     width: 2.5rem;
     height: 2.5rem;
     border-radius: .75rem;
     background: var(--forest-100);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .contact-item-label {
     font-size: .75rem;
     font-weight: 600;
     color: #a8a29e;
     text-transform: uppercase;
     letter-spacing: .05em;
     margin-bottom: .125rem;
 }

 .contact-item-value {
     color: #44403c;
     font-weight: 500;
     font-size: .875rem;
     transition: color .2s;
 }

 .contact-item-value:hover {
     color: var(--forest-600);
 }

 .contact-form-box {
     background: #fff;
     border-radius: 1.5rem;
     box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
     border: 1px solid #f5f5f4;
     padding: 1.5rem;
 }

 @media(min-width:768px) {
     .contact-form-box {
         padding: 2rem;
     }
 }

 .contact-form-title {
     font-family: 'DM Serif Display', serif;
     font-size: 1.25rem;
     font-weight: 400;
     color: #1c1917;
     margin-bottom: 1.5rem;
 }

 .form-row {
     display: grid;
     gap: 1rem;
     margin-bottom: 1rem;
 }

 @media(min-width:640px) {
     .form-row {
         grid-template-columns: 1fr 1fr;
     }
 }

 .field {
     margin-bottom: 1rem;
 }

 .field-label {
     display: block;
     font-size: .75rem;
     font-weight: 600;
     color: #57534e;
     margin-bottom: .375rem;
 }

 .field input,
 .field select,
 .field textarea {
     width: 100%;
     background: #f5f5f4;
     border: 1px solid #e7e5e4;
     border-radius: .75rem;
     padding: .625rem 1rem;
     font-size: .875rem;
     color: #292524;
     outline: none;
     transition: all .2s;
     -webkit-appearance: none;
     appearance: none;
 }

 .field input::placeholder,
 .field textarea::placeholder {
     color: #a8a29e;
 }

 .field input:focus,
 .field select:focus,
 .field textarea:focus {
     border-color: var(--forest-400);
     background: #fff;
     box-shadow: 0 0 0 3px var(--forest-100);
 }

 .contact-sent {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     padding: 2rem 0;
 }

 .contact-sent-icon {
     width: 5rem;
     height: 5rem;
     border-radius: 50%;
     background: var(--forest-100);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1rem;
     font-size: 2.5rem;
 }

 .contact-sent h3 {
     font-family: 'DM Serif Display', serif;
     font-size: 1.5rem;
     font-weight: 400;
     color: #1c1917;
     margin-bottom: .5rem;
 }

 .contact-sent p {
     color: #78716c;
     margin-bottom: 1.5rem;
 }

 /* ===== LOCATION ===== */
 #location {
     padding: 5rem 0;
     background: #fff;
     border-top: 1px solid #f5f5f4;
 }

 @media(min-width:1024px) {
     #location {
         padding: 7rem 0;
     }
 }

 .location-header {
     text-align: center;
     max-width: 48rem;
     margin: 0 auto 4rem;
 }


 .location-label {
     text-transform: uppercase;
     letter-spacing: .28em;
     font-size: .75rem;
     color: #f43f5e;
     margin-bottom: .75rem;
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     font-weight: 700;
 }

 .location-grid {
     display: grid;
     gap: 2rem;
 }

 @media(min-width:1024px) {
     .location-grid {
         grid-template-columns: 1fr 1fr;
         gap: 2.5rem;
         align-items: stretch;
     }
 }

 .location-card {
     border-radius: 1.5rem;
     border: 1px solid #e7e5e4;
     background: #fff;
     padding: 1.75rem;
     box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
     transition: box-shadow .2s;
 }

 .location-card:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
 }

 .loc-addr {
     display: flex;
     align-items: flex-start;
     gap: 1rem;
 }

 .loc-addr-icon {
     width: 3rem;
     height: 3rem;
     border-radius: 1rem;
     background: var(--forest-100);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .loc-addr h3 {
     font-size: 1.25rem;
     font-weight: 600;
     color: #1c1917;
     margin-bottom: .25rem;
 }

 @media(min-width:768px) {
     .loc-addr h3 {
         font-size: 1.5rem;
     }
 }

 .loc-addr p {
     color: #57534e;
     font-size: .875rem;
     line-height: 1.6;
 }

 @media(min-width:768px) {
     .loc-addr p {
         font-size: 1rem;
     }
 }

 .loc-addr .city {
     font-size: .75rem;
     font-weight: 600;
     color: #a8a29e;
     text-transform: uppercase;
     letter-spacing: .1em;
     margin-top: .5rem;
 }

 .how-to-label {
     font-size: .75rem;
     font-weight: 600;
     color: #a8a29e;
     text-transform: uppercase;
     letter-spacing: .1em;
     margin-bottom: 1.25rem;
 }

 .how-to-items {
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }

 .how-to-item {
     display: flex;
     gap: 1rem;
     padding: 1rem;
     border-radius: 1rem;
     border: 1px solid #e7e5e4;
     transition: all .2s;
 }

 .how-to-item:hover {
     border-color: var(--forest-300);
     background: #f9fafb;
 }

 .how-to-item-icon {
     font-size: 1.25rem;
     flex-shrink: 0;
     margin-top: .125rem;
 }

 .how-to-item p:first-child {
     font-size: .875rem;
     font-weight: 600;
     color: #1c1917;
     margin-bottom: .25rem;
 }

 .how-to-item p:last-child {
     font-size: .875rem;
     color: #78716c;
     line-height: 1.6;
 }

 .map-wrap {
     overflow: hidden;
     border-radius: 1.5rem;
     border: 1px solid #e7e5e4;
     background: #fff;
     box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
     height: 320px;
 }

 @media(min-width:768px) {
     .map-wrap {
         height: 420px;
     }
 }

 @media(min-width:1024px) {
     .map-wrap {
         height: 100%;
         min-height: 420px;
     }
 }

 .map-wrap iframe {
     width: 100%;
     height: 100%;
     filter: contrast(1.25) brightness(.95);
     border: none;
 }

 /* ===== FOOTER ===== */
 footer {
     background: var(--stone-950);
     color: #a8a29e;
 }

 .footer-inner {
     max-width: 80rem;
     margin: 0 auto;
     padding: 3.5rem 1rem;
 }

 @media(min-width:640px) {
     .footer-inner {
         padding: 3.5rem 1.5rem;
     }
 }

 @media(min-width:1024px) {
     .footer-inner {
         padding: 3.5rem 2rem;
     }
 }

 .footer-grid {
     display: grid;
     gap: 2.5rem;
 }

 @media(min-width:768px) {
     .footer-grid {
         grid-template-columns: 1fr 1fr;
     }
 }

 @media(min-width:1024px) {
     .footer-grid {
         grid-template-columns: 2fr 1fr 1fr;
     }
 }

 .footer-brand {}

 .footer-logo {
     display: flex;
     align-items: center;
     gap: .625rem;
     margin-bottom: 1rem;
 }

 .footer-logo-icon {
     width: 2.25rem;
     height: 2.25rem;
     border-radius: .75rem;
     background: linear-gradient(135deg, #f5f5f4, #e7e5e4);
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
 }

 .footer-logo-name {
     font-family: 'DM Serif Display', serif;
     font-size: 1.125rem;
     color: #fff;
     font-weight: 400;
     line-height: 1.2;
     display: block;
 }

 .footer-logo-type {
     font-size: .5625rem;
     font-weight: 700;
     letter-spacing: .15em;
     text-transform: uppercase;
     color: var(--forest-400);
 }

 .footer-desc {
     font-size: .875rem;
     line-height: 1.7;
     color: #78716c;
     max-width: 20rem;
     margin-bottom: 1.25rem;
 }

 .footer-social {
     display: flex;
     gap: .75rem;
     margin-bottom: 1.25rem;
 }

 .footer-social a {
     width: 2rem;
     height: 2rem;
     border-radius: .5rem;
     background: #292524;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background .2s;
     overflow: hidden;
 }

 .footer-social a:hover {
     background: #1b7855;
 }

 .footer-social img {
     width: 1.5rem;
     height: 1.5rem;
     object-fit: contain;
 }

 .footer-contacts {
     display: flex;
     flex-direction: column;
     gap: .375rem;
 }

 .footer-contact-row {
     display: flex;
     align-items: center;
     gap: .5rem;
     font-size: .875rem;
     transition: color .2s;
 }

 .footer-contact-row:hover {
     color: var(--forest-400);
 }

 .footer-contact-row img {
     width: 1.5rem;
 }

 .footer-col h4 {
     font-size: .875rem;
     font-weight: 600;
     color: #fff;
     margin-bottom: 1rem;
 }

 .footer-nav {
     display: flex;
     flex-direction: column;
     gap: .625rem;
     list-style: none;
 }

 .footer-nav a {
     font-size: .875rem;
     transition: color .2s;
 }

 .footer-nav a:hover {
     color: var(--forest-400);
 }

 .footer-programs {
     display: flex;
     flex-direction: column;
     gap: .625rem;
     list-style: none;
     margin-bottom: 1.5rem;
 }

 .footer-programs a {
     font-size: .875rem;
     transition: color .2s;
 }

 .footer-programs a:hover {
     color: var(--forest-400);
 }

 .footer-donate {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     background: var(--earth-500);
     color: #fff;
     font-size: .75rem;
     font-weight: 700;
     padding: .625rem 1rem;
     border-radius: 9999px;
     transition: all .3s;
     box-shadow: 0 4px 6px rgba(180, 101, 22, .25);
 }

 .footer-donate:hover {
     background: var(--earth-600);
     transform: translateY(-2px);
 }

 .footer-bottom {
     border-top: 1px solid rgba(41, 37, 36, .5);
 }

 .footer-bottom-inner {
     max-width: 80rem;
     margin: 0 auto;
     padding: 1.25rem 1rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: .75rem;
 }

 @media(min-width:640px) {
     .footer-bottom-inner {
         flex-direction: row;
         justify-content: space-between;
         padding: 1.25rem 1.5rem;
     }
 }

 @media(min-width:1024px) {
     .footer-bottom-inner {
         padding: 1.25rem 2rem;
     }
 }

 .footer-copy {
     font-size: .75rem;
     color: #57534e;
 }

 .footer-links {
     display: flex;
     align-items: center;
     gap: 1rem;
     font-size: .75rem;
     color: #57534e;
 }

 .footer-links a:hover {
     color: #a8a29e;
 }

 /* ===== WHATSAPP FAB ===== */
 #wafab {
     position: fixed;
     bottom: 1.5rem;
     right: 1.5rem;
     z-index: 50;
     display: flex;
     align-items: center;
 }

 .wafab-btn {
     position: relative;
     width: 3.5rem;
     height: 3.5rem;
     background: #22c55e;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     box-shadow: 0 10px 20px rgba(34, 197, 94, .4);
     transition: all .3s;
     text-decoration: none;
 }

 .wafab-btn:hover {
     background: #16a34a;
     transform: translateY(-2px) scale(1.1);
 }

 .wafab-badge {
     position: absolute;
     top: -.25rem;
     right: -.25rem;
     width: 1rem;
     height: 1rem;
     border-radius: 50%;
     background: #ef4444;
     border: 2px solid #fff;
 }

 .wafab-tooltip {
     position: absolute;
     right: 4.5rem;
     background: #1c1917;
     color: #fff;
     font-size: .75rem;
     font-weight: 600;
     padding: .375rem .75rem;
     border-radius: .5rem;
     white-space: nowrap;
     opacity: 0;
     pointer-events: none;
     transition: opacity .2s;
     box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
 }

 #wafab:hover .wafab-tooltip {
     opacity: 1;
 }

 /* ===== MUSIC FAB ===== */

 #musicfab {
     position: fixed;
     bottom: 6rem;
     /* arriba del whatsapp */
     right: 1.5rem;
     z-index: 50;
 }

 .musicfab-btn {
     width: 3.5rem;
     height: 3.5rem;
     border-radius: 50%;
     background: #eaeaea;
     display: flex;
     align-items: center;
     justify-content: center;

     box-shadow: 0 10px 20px rgba(0, 0, 0, .18);

     transition: all .3s ease;
 }

 .musicfab-btn:hover {
     transform: translateY(-2px) scale(1.06);
 }

 /* ===== TESTIMONIALS ===== */
 #testimonios {
     padding: 5rem 0;
     background: #fff;
 }

 @media(min-width:1024px) {
     #testimonios {
         padding: 7rem 0;
     }
 }

 .testimonials-grid {
     display: grid;
     gap: 1.5rem;
     margin-bottom: 4rem;
 }

 @media(min-width:768px) {
     .testimonials-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 .testimonial-card {
     background: var(--warm-50);
     border: 1px solid #f5f5f4;
     border-radius: 1rem;
     padding: 1.5rem;
     transition: all .4s;
 }

 .testimonial-card:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
 }

 .stars {
     display: flex;
     gap: .125rem;
     margin-bottom: 1rem;
 }

 .star {
     width: 1rem;
     height: 1rem;
     color: var(--earth-400);
 }

 .testimonial-text {
     color: #57534e;
     font-size: .875rem;
     line-height: 1.7;
     margin-bottom: 1.25rem;
     font-style: italic;
 }

 .testimonial-author {
     display: flex;
     align-items: center;
     gap: .75rem;
     padding-top: 1rem;
     border-top: 1px solid #e7e5e4;
 }

 .testimonial-avatar {
     width: 2.5rem;
     height: 2.5rem;
     border-radius: 50%;
     object-fit: cover;
     ring: 2px solid var(--forest-100);
 }

 .testimonial-name {
     font-size: .875rem;
     font-weight: 600;
     color: #292524;
 }

 .testimonial-role {
     font-size: .75rem;
     color: var(--forest-600);
 }

 /* ===== RESPONSIVE HELPERS ===== */
 @media(max-width:639px) {
     .hero-buttons a {
         width: 100%;
         min-width: 0;
     }

     .donate-box {
         padding: 1rem;
     }
 }

 /* Modal */

 .modal {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .65);

     display: flex;
     align-items: center;
     justify-content: center;

     padding: 20px;

     z-index: 9999;

     opacity: 0;
     pointer-events: none;

     transition: opacity .3s ease;

     backdrop-filter: blur(6px);
 }

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

 .modal-content {
     width: 100%;
     max-width: 760px;

     background: #fff;

     border-radius: 28px;

     overflow: hidden;

     box-shadow:
         0 30px 80px rgba(0, 0, 0, .25);

     transform: translateY(20px) scale(.96);

     opacity: 0;

     transition:
         transform .35s ease,
         opacity .35s ease;
 }

 .modal-content img {
     max-width: 100%;
     max-height: 70vh;
     height: auto;
     object-fit: contain;
     display: block;
     margin: 0 auto;
     width: 100%;
 }

 .modal.open .modal-content {
     transform: translateY(0) scale(1);
     opacity: 1;
 }


 /* scroll interno real */
 .modal-inner {
     position: relative;
     overflow-y: auto;
     max-height: 88vh;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
 }

 /* imagen */
 .modal-inner img {
     width: 100%;
     height: auto;
     object-fit: cover;
     border-radius: 12px;
     margin: 12px 0;
 }

 /* close */
 .modal-close {
     position: absolute;
     top: 1rem;
     right: 1rem;
     width: 2rem;
     height: 2rem;
     padding: 0.3rem;
     border-radius: 50%;
     background: rgb(182, 182, 182);
     backdrop-filter: blur(8px);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     font-weight: 700;
     z-index: 10;
     transition: all .2s ease;
 }

 .modal-close:hover {
     transform: scale(1.08);
     background: rgb(223, 223, 223);
 }

 .modal-news {
     display: flex;
     flex-direction: column;
 }

 .modal-news-image {
     background: #f5f5f4;

     display: flex;
     align-items: center;
     justify-content: center;

     padding: 20px;
 }

 .modal-news-image img {
     width: fit-content;
     max-height: 320px;

     object-fit: contain;

     border-radius: 18px;

     box-shadow:
         0 10px 30px rgba(0, 0, 0, .12);
 }

 .modal-gallery-only {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
 }

 @media (max-width: 640px) {
     .modal-gallery-only {
         display: flex;
         flex-direction: column;
         gap: 0rem;
     }
 }

 .modal-gallery-header {
     display: flex;
     flex-direction: column;
     gap: .75rem;
     padding-inline: .5rem;
     margin: 1rem;
 }

 .modal-single-image {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0.2rem 1rem 0;
     overflow: hidden;
 }

 .modal-single-image-img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     border-radius: 1.5rem;
     background: #000;
 }

 /* body */

 .modal-news-body {
     padding: 1.5rem;
 }

 .modal-news-top {
     margin-bottom: 18px;
 }

 .modal-news-title {
     font-family: 'DM Serif Display', serif;
     font-size: 2rem;
     line-height: 1.15;
     color: var(--stone-900);
     margin: 0.5rem 0 0.5rem 0;
 }

 .novedad-date {
     font-size: .82rem;
     font-weight: 600;

     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: .45rem;

     color: var(--forest-700);
     background: var(--forest-50);
     border: 1px solid var(--forest-100);

     padding: .55rem .85rem;

     border-radius: 999px;
     width: fit-content;

     line-height: 1;
 }

 .novedad-date-icon {
     width: 1rem;
     height: 1rem;

     display: block;
     flex-shrink: 0;
     object-fit: contain;
 }

 .modal-news-date {
     display: inline-flex;
     align-items: center;
     gap: .4rem;
     margin-top: 12px;
     background: var(--forest-50);
     color: var(--forest-700);
     border: 1px solid var(--forest-100);
     padding: 0px 12px;
     border-radius: 999px;
     font-size: .85rem;
     font-weight: 700;
 }

 .modal-news-desc {
     color: var(--stone-600);
     font-size: 1rem;
     line-height: 1.8;
     white-space: pre-line;
     margin-top: -2rem;
 }

 .location-gmaps {
     color: var(--forest-500);
     text-decoration: underline;
     font-size: small;
 }

 /* botones */

 .modal-news-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;

     margin-top: 28px;
 }

 /* mobile */

 @media (max-width: 640px) {

     .modal-news-body {
         padding-left: 1.2rem;
         padding-right: 1.2rem;
     }

     .modal-news-title {
         font-size: 1.6rem;
     }

     .modal-news-image img {
         max-height: 220px;
     }

     .modal-news-actions {
         flex-direction: column;
     }

     .modal-news-actions button {
         width: 100%;
     }
 }

 @keyframes springIn {
     0% {
         transform: scale(0.85) translateY(20px);
         opacity: 0;
     }

     60% {
         transform: scale(1.03) translateY(-6px);
         opacity: 1;
     }

     80% {
         transform: scale(0.98) translateY(2px);
     }

     100% {
         transform: scale(1) translateY(0);
         opacity: 1;
     }
 }

 #novedades {
     background: white;
     padding: 60px 20px;
 }

 #novedades h2 {
     text-align: center;
     margin-bottom: 30px;
 }

 .novedades-title {
     margin-top: 1rem;
     font-weight: 600;
     color: #1c1917;
     font-size: 1.125rem;
     margin-bottom: .25rem;
 }

 .novedades-desc {
     color: #78716c;
     font-size: .875rem;
     line-height: 1.6;
 }

 #novedadesGrid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 20px;
     min-height: min-content;
 }

 /* tablet */
 @media (min-width: 768px) {
     #novedadesGrid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 /* desktop */
 @media (min-width: 1024px) {
     #novedadesGrid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 .novedades-card {
     background: white;
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     padding: 16px;
     display: flex;
     flex-direction: column;
     gap: 10px;
     text-align: start;
     transition: all .4s;
 }

 .novedades-card:hover {
     box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
     transform: translateY(-6px);
 }

 .novedad-location {
     display: inline-flex;
     font-size: .82rem;
     color: var(--stone-600);
     line-height: 1.5;
 }

 .modal-news-location {
     display: inline-flex;
     align-items: center;
     margin-top: 1rem;
     color: var(--stone-600);
     font-size: .95rem;
     gap: .5rem
 }

 .modal-news-meta {
     display: flex;
     flex-direction: column;
 }

 .image-viewer-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .92);
     z-index: 99999;

     display: flex;
     justify-content: center;
     align-items: center;

     padding: 2rem;
 }

 .image-viewer-overlay img {
     max-width: 95vw;
     max-height: 90vh;
     object-fit: contain;
     border-radius: 1rem;
 }

 .image-viewer-close {
     position: absolute;
     top: 2rem;
     right: 2rem;

     width: 3rem;
     height: 3rem;

     border: none;
     border-radius: 999px;

     cursor: pointer;
     font-size: 1.5rem;
 }

 /* DONATIONS NEW */
 .donations-simple {
     position: relative;
     display: grid;
     gap: 3rem;
 }

 @media(min-width:1024px) {
     .donations-simple {
         grid-template-columns: 1fr 420px;
         align-items: center;
         gap: 4rem;
     }
 }

 /* CARD */

 .donation-card {
     background: rgba(255, 255, 255, .08);

     border: 1px solid rgba(255, 255, 255, .1);

     backdrop-filter: blur(14px);

     border-radius: 28px;

     padding: 2rem;

     box-shadow:
         0 20px 50px rgba(0, 0, 0, .25);
 }

 .donation-card-top {
     display: inline-flex;
     align-items: center;
     gap: .75rem;

     padding: .75rem 1rem;

     border-radius: 999px;

     background: rgba(255, 255, 255, .08);

     margin-bottom: 1.5rem;
 }

 .donation-note {
     display: inline-flex;
     align-items: center;
     gap: .75rem .5rem;
 }

 .donation-card-top img {
     width: 1.4rem;
     height: 1.4rem;
 }

 .donation-card-top span {
     color: white;
     font-size: .85rem;
     font-weight: 700;
     letter-spacing: .04em;
 }

 .donation-card-title {
     color: white;

     font-size: 1.75rem;

     font-family: 'DM Serif Display', serif;

     font-weight: 400;

     margin-bottom: 1.5rem;
 }

 /* ALIAS */

 .alias-box {
     display: flex;
     align-items: center;
     text-align: center;
     justify-content: space-between;
     gap: 1rem;

     background: rgba(255, 255, 255, .12);

     border: 1px solid rgba(255, 255, 255, .12);

     border-radius: 18px;

     padding: 1rem 1.25rem;

     margin-bottom: 1rem;
 }

 .alias-box span {
     color: white;

     font-size: 1rem;
     font-weight: 700;

     word-break: break-word;
 }

 .alias-box button {
     flex-shrink: 0;

     background: white;

     color: var(--forest-700);

     font-weight: 700;

     padding: .75rem 1rem;

     border-radius: 12px;

     transition: all .2s ease;
 }

 .alias-box button:hover {
     transform: translateY(-2px);
     background: var(--forest-50);
 }

 /* TEXTS */

 .donation-text {
     text-align: center;
     color: var(--forest-200);
     line-height: 1.7;
     font-size: .95rem;
     margin-bottom: 1.5rem;
     white-space: pre-line;
 }

 .donation-help {
     color: rgba(255, 255, 255, .7);
     line-height: 1.7;
     font-size: .95rem;
     margin-bottom: 1.5rem;
 }


 .donation-note {
     color: var(--earth-300);

     font-size: .9rem;

     font-weight: 600;
 }

 .donations-message {
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }

 .donations-message p {
     color: rgba(255, 255, 255, .78);

     line-height: 1.8;

     font-size: 1rem;
 }

 /* MOBILE */
 @media(max-width:640px) {

     .donation-card {
         padding: 1.5rem;
     }

     .alias-box {
         flex-direction: column;
         align-items: stretch;
     }

     .alias-box button {
         width: 100%;
     }
 }

 /* ===== QUOTE SECTION ===== */

 #quote-section {
     position: relative;
     overflow: hidden;
     padding: 7rem 1.5rem;
     background:
         linear-gradient(180deg,
             #f8f6f1 0%,
             #f3efe6 100%);
 }

 .quote-bg {
     position: absolute;
     inset: 0;
     pointer-events: none;
     opacity: .4;

     background:
         radial-gradient(circle at top right,
             rgba(120, 140, 90, .12),
             transparent 35%),
         radial-gradient(circle at bottom left,
             rgba(180, 150, 90, .10),
             transparent 40%);
 }

 .quote-box {
     position: relative;
     max-width: 900px;
     margin: 0 auto;
     text-align: center;

     padding: 4rem 2rem;

     border: 1px solid rgba(120, 110, 90, .12);

     background: rgba(255, 255, 255, .55);

     backdrop-filter: blur(10px);

     border-radius: 2rem;

     box-shadow:
         0 20px 50px rgba(0, 0, 0, .05);
 }

 .quote-text {
     font-size: clamp(1.8rem, 4vw, 3rem);
     line-height: 1.45;
     color: #2f2a22;

     font-weight: 500;
     letter-spacing: -0.03em;

     margin-bottom: 2rem;
 }

 .quote-author {
     font-size: 1rem;
     letter-spacing: .15em;
     text-transform: uppercase;

     color: #7a8b5c;

     font-weight: 700;
 }

 /* MOBILE */

 @media (max-width:768px) {

     #quote-section {
         padding: 5rem 1rem;
     }

     .quote-box {
         padding: 3rem 1.5rem;
         border-radius: 1.5rem;
     }

     .quote-text {
         line-height: 1.5;
     }

 }

 /* CAROUSEL */
 /* =========================
   MODAL CAROUSEL
========================= */

 .modal-carousel {
     position: relative;
     width: 100%;
     max-height: 720px;
     overflow: hidden;
     border-radius: 1.5rem;
 }

 .carousel-track {
     align-items: center;
     border-radius: 1.5;
     margin: 0.5rem 1rem;
     display: flex;
     scroll-snap-type: x mandatory;
     gap: 1rem;
     overflow-x: auto;
     overflow-y: hidden;
     scroll-behavior: smooth;
     scrollbar-width: none;
     -ms-overflow-style: none;
 }

 .carousel-track>* {
     min-width: 100%;
     scroll-snap-align: center;
 }

 .carousel-track::-webkit-scrollbar {
     display: none;
 }

 .carousel-image,
 .carousel-video {
     width: 100%;
     max-height: 720px;
     object-fit: contain;
     flex-shrink: 0;
     border-radius: 1.5rem;
     background: #000;
 }

 .carousel-video {
     display: block;
     width: 100%;
     max-height: 720px;

     object-fit: contain;

     border-radius: 1.5rem;
     background: #000;

     flex-shrink: 0;

     /* mejoras rendering */
     transform: translateZ(0);
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;

     /* evita glitches iOS */
     -webkit-transform: translateZ(0);

     overflow: hidden;
 }

 /* =========================
   BUTTONS
========================= */

 .carousel-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
     width: 2.5rem;
     height: 2.5rem;
     border: none;
     border-radius: 999px;
     background: rgba(70, 70, 70, 0.55);
     cursor: pointer;
     backdrop-filter: blur(10px);
     transition: .2s ease;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0;
 }

 .carousel-btn:hover {
     transform: translateY(-50%) scale(1.08);
 }

 .carousel-btn.prev {
     left: 1.3rem;
 }

 .carousel-btn.next {
     right: 1.3rem;
 }

 .carousel-btn img {
     width: 1rem;
     height: 1rem;
     object-fit: contain;
     display: block;
     filter: invert(1);
 }

 .pagination-controls button:hover:not(:disabled) {

     transform: translateY(-2px);

     background: var(--forest-500);

     color: white;
 }

 /* =========================================
   EVENTOS / NOVEDADES
========================================= */

 #novedades {
     padding: 6rem 1.5rem;
     background:
         linear-gradient(180deg,
             #ffffff 0%,
             #f8f6f1 100%);
 }

 /* ---------- grids ---------- */

 #novedadesGrid,
 #historialGrid {
     display: grid;
     gap: 1.5rem;
 }

 #historialGrid {
     min-height: min-content;
 }

 /* mobile */

 #novedadesGrid,
 #historialGrid {
     grid-template-columns: 1fr;
 }

 /* tablet */

 @media(min-width:768px) {

     #novedadesGrid {
         grid-template-columns: repeat(2, 1fr);
     }

     #historialGrid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 /* desktop */

 @media(min-width:1200px) {

     #novedadesGrid {
         grid-template-columns: repeat(3, 1fr);
     }

     #historialGrid {
         grid-template-columns: repeat(4, 1fr);
     }
 }

 /* =========================================
   NOVEDADES CARD
========================================= */

 .novedades-card {
     display: flex;
     flex-direction: column;

     background: white;

     border-radius: 1.5rem;

     overflow: hidden;

     padding: 1rem;

     box-shadow:
         0 10px 30px rgba(0, 0, 0, .06);

     transition:
         transform .35s ease,
         box-shadow .35s ease;
 }

 .novedades-card:hover {
     transform: translateY(-6px);
     box-shadow:
         0 25px 45px rgba(0, 0, 0, .12);
 }

 .novedades-card-portada {
     width: 100%;
     height: 260px;

     object-fit: cover;
     object-position: center;

     display: block;

     border-radius: 1.25rem;
     transition: transform .5s ease;
 }

 @media (max-width: 768px) {

     .novedades-card-portada {
         height: 220px;
     }

 }


 .novedades-title {

     font-size: 1.2rem;
     font-weight: 700;

     color: var(--stone-900);

     margin-bottom: .5rem;
 }

 .novedades-desc {

     color: var(--stone-600);

     line-height: 1.7;

     margin-top: .5rem;
     margin-bottom: 1.25rem;
 }

 /* =========================================
   HISTORIAL
========================================= */

 .historial-card {

     background: white;

     border-radius: 1.25rem;

     overflow: hidden;

     box-shadow:
         0 10px 25px rgba(0, 0, 0, .06);

     transition:
         transform .3s ease,
         box-shadow .3s ease;
 }

 .historial-card:hover {

     transform: translateY(-4px);

     box-shadow:
         0 18px 40px rgba(0, 0, 0, .12);
 }

 .historial-card img {

     width: 100%;
     height: 180px;

     object-fit: cover;
 }

 .historial-body {

     padding: 1rem;

     display: flex;
     flex-direction: column;

     gap: .75rem;
 }

 .historial-body h3 {

     font-size: 1rem;
     font-weight: 700;

     color: var(--stone-900);
 }

 .evento-pasado-badge {
     width: fit-content;
     background: rgba(120, 120, 120, .12);
     color: rgb(90, 90, 90);
     border: 1px solid rgba(120, 120, 120, .15);
     border-radius: 999px;
     padding: .35rem .75rem;
     font-size: .72rem;
     font-weight: 700;
 }


 /* =========================================
   PAGINATION
========================================= */

 .pagination-controls {

     display: flex;
     justify-content: center;
     align-items: center;

     gap: 1rem;

     margin-top: 2rem;
     margin-bottom: 4rem;
 }

 .pagination-controls button {

     width: 3.2rem;
     height: 3.2rem;

     border: none;
     border-radius: 999px;

     background: white;

     box-shadow:
         0 10px 25px rgba(0, 0, 0, .08);

     font-size: 1.1rem;
     font-weight: 700;

     transition:
         transform .2s ease,
         background .2s ease,
         opacity .2s ease;
 }

 .pagination-controls button:hover:not(:disabled) {
     transform: translateY(-2px);
     background: var(--forest-500);
     color: white;
 }

 .pagination-controls button:disabled {
     opacity: .35;
     cursor: not-allowed;
     transform: none;
 }

 /* =========================================
   EMPTY EVENTS
========================================= */

 /* =========================================
   EMPTY EVENTS
========================================= */

 .empty-events {

     width: 100%;
     max-width: 720px;

     margin: 0 auto;

     padding: 4rem 2rem;

     border-radius: 2rem;

     background:
         linear-gradient(180deg,
             rgba(255, 255, 255, .95) 0%,
             rgba(248, 246, 241, .95) 100%);

     border:
         1px solid rgba(0, 0, 0, .05);

     box-shadow:
         0 20px 50px rgba(0, 0, 0, .06);

     text-align: center;
 }

 .empty-events-icon {

     width: 5rem;
     height: 5rem;

     margin: 0 auto 1.5rem;

     border-radius: 999px;

     display: flex;
     align-items: center;
     justify-content: center;

     font-size: 2rem;

     background:
         rgba(92, 125, 79, .12);
 }

 .empty-events h3 {

     font-size: 1.8rem;
     font-weight: 700;

     color: var(--stone-900);

     margin-bottom: 1rem;
 }

 .empty-events p {
     max-width: 520px;
     margin: 0 auto 1.2rem;
     line-height: 1.8;
     color: var(--stone-600);
 }

 .empty-events {

     animation:
         emptyFade .5s ease;
 }

 @keyframes emptyFade {

     from {
         opacity: 0;
         transform: translateY(12px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* =========================================
   PAGINATION BUTTONS FIX
========================================= */

 .pagination-controls button,
 #prevProximos,
 #nextProximos,
 #prevHistorial,
 #nextHistorial {

     width: 3.25rem !important;
     height: 3.25rem !important;

     display: flex !important;
     align-items: center !important;
     justify-content: center !important;

     border: none !important;
     border-radius: 999px !important;

     background: white !important;

     box-shadow:
         0 10px 25px rgba(0, 0, 0, .08) !important;

     color: var(--stone-900) !important;

     font-size: 1.15rem !important;
     font-weight: 700 !important;

     cursor: pointer !important;

     transition:
         transform .2s ease,
         background .2s ease,
         color .2s ease,
         opacity .2s ease !important;
 }

 .pagination-controls button:hover:not(:disabled),
 #prevProximos:hover:not(:disabled),
 #nextProximos:hover:not(:disabled),
 #prevHistorial:hover:not(:disabled),
 #nextHistorial:hover:not(:disabled) {

     transform: translateY(-2px);

     background: var(--forest-500);

     color: white;
 }

 .pagination-controls button:disabled,
 #prevProximos:disabled,
 #nextProximos:disabled,
 #prevHistorial:disabled,
 #nextHistorial:disabled {

     opacity: .35;

     cursor: not-allowed;

     transform: none;
 }