@charset "utf-8";

/* =========================
   🎨 ESTILOS GLOBALES
   (Se aplican en TODAS las páginas)
========================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

body {
  line-height: 1.6;
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}

body * {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
body * .visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   🟦 HEADER
========================= */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0077ac;
  color: white;
  padding: 25px 30px;
  position: relative; /* necesario para posicionar el menú desplegable */
}

.logo {
  position: absolute;
  left: 80px;
  top: 18px;
  width: auto;
  height: auto;
  z-index: 10;
}

.logo img {
  height: 40px;
}

.main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.main-nav ul {
  display: flex;
  list-style: none;
  gap: 80px;
}

.main-nav a {
  text-decoration: none;
  color: white;
  font-weight: 500;
  transition: color 0.3s ease;
}

.main-nav a:hover {
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Botón DONATE */
.donate {
  position: absolute;
  right: 80px;
  top: 25px;
  z-index: 11;
}

.donate a {
  background-color: #002C45;
  color: #ffffff;
  padding: 8px 15px;
  border-radius: 100px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  z-index: 20;
}

.donate a:hover {
  background-color: #ecbe61;
}

/* Botón hamburguesa */
#menu-toggle {
  display: none;
  font-size: 28px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  z-index: 20;
}




/* =========================
   🟦 FOOTER
========================= */

footer {
  background-color: #0077ac;
  color: white;
  padding: 20px;
  font-size: 14px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1450px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.footer-left,
.footer-center,
.footer-right {
  flex: 1;
}

.footer-logo {
  height: 40px;
}

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

.instagram-link {
  display: inline-block;
}

.instagram-icon {
  height: 24px;
  width: 24px;
  filter: brightness(0) invert(1);
  transition: opacity 0.3s ease;
}

.instagram-icon:hover {
  opacity: 0.7;
}

@media (max-width: 600px) {
  .footer-content {
    flex-direction: row;
    text-align: center;
  }

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

/* =========================
   � HOME (Hero + Icon Section)
========================= */

.hero-section {
  position: relative;
  width: 100%;
  height: 350px;
  background: url("mae7.jpg") no-repeat center center / cover;
  align-items: center;
  padding: 50px 80px;
  color: #001a3a;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 600px;
}

.intro-text { font-size: 1.1rem; margin-bottom: 15px; font-weight: 400; }
.main-text { font-size: 2.5rem; font-weight: 700; margin-bottom: 30px; color: #001a3a; line-height: 0.6 }
.main-text em { font-style: italic; font-weight: 800; color: #002743; }

.donate-btn {
  display: inline-block;
  background-color: #002C45;
  color: white;
  padding: 12px 24px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.donate-btn:hover { background-color: #ecbe61; }

/* RESPONSIVE HERO */
@media (max-width: 768px) {
  .hero-section { height: 280px; padding: 40px 20px; background-position: center center; }
  .hero-section::before { background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0)); }
  .main-text { font-size: 1.8rem; }
  .intro-text { font-size: 1rem; }
  .donate-btn { font-size: 0.95rem; padding: 10px 20px; }
}

@media (max-width: 480px) {
  .hero-section { height: 320px; }
  .main-text { font-size: 1.4rem; }
  .intro-text { font-size: 0.9rem; }
  .donate-btn { font-size: 0.9rem; padding: 8px 16px; }
}

.icon-section {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin: 0;
  padding: 0;
}

.icon-box {
  flex: 1;
  padding: 40px 20px;
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.icon-box img { width: 60px; height: auto; margin-bottom: 10px; }
.icon-box p { margin: 0; font-size: 16px; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; }

.box-1 { background: #0077AC; }
.box-2 { background: #0099DD; }
.box-3 { background: #24BBFF; }

/* =========================
   Responsive Icon Section
========================= */
@media (max-width: 768px) {
  .icon-box {
    padding: 20px 10px; /* menos padding */
  }

  .icon-box img {
    width: 30px; /* iconos más pequeños */
    margin-bottom: 6px;
  }

}

@media (max-width: 480px) {
  .icon-box {
    padding: 15px 5px;
  }

  .icon-box img {
    width: 30px;
  }

}

@media (max-width: 768px) {
  .icon-section .icon-box p {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .icon-section .icon-box p {
    font-size: 12px;
  }
}


/* 🌟 BLOQUES CENTRADOS (Info + Imagen) */
.info-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin: auto;
  max-width: auto;
  flex-wrap: wrap; /* permite adaptar en pantallas pequeñas */
  position: relative;
  overflow: hidden;
  background: url("back1-01.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.info-block.reverse-responsive {
  background: url("back3-01.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* � TEXTO DENTRO DE BLOQUES */
.text-content {
  flex: 1;
  max-width: 300px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

.text-content h2 {
  font-size: 32px;
  margin-bottom: 20px;
}

.text-content p {
  font-size: 18px;
  margin-bottom: 20px;
}

.text-content button {
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  background-color: #002C45;
  color: white;
  border-radius: 100px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.text-content button:hover {
  background-color: #ecbe61; /* color de fondo en hover */
  color: #ffffff; /* color del texto en hover */
}

/* 🖼 IMAGEN DENTRO DE BLOQUES */
.image-content {
  flex: 1;
  max-width: 400px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.image-content img {
  width: 100%;
  border-radius: 20px;
  object-fit: cover;
}

/* 📱 MODO RESPONSIVO BLOQUES INFO */
@media (max-width: 768px) {
  .info-block {
    flex-direction: row;
    text-align: center;
    padding: 20px 20px;
  }
}

/* 🌈 BLOQUE HOMEPHRASE (Imagen con overlay y texto centrado) */
.homephrase {
  width: 100%;
  height: 200px;
}

.homephrase .imagen {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("mae11.png") center center / cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.homephrase .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.homephrase .texto {
  position: relative;
  color: white;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  z-index: 2;
  padding: 0 20px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}


.learn-more-btn {
  display: inline-block;
  padding: 10px 20px;
  background: #002C45;
  color: white;
  border-radius: 13px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}

.learn-more-btn:hover {
  background: #ecbe61;
}

/* =========================
   👥 ABOUT US (aboutus.html)
========================= */

/* Sección Hero About Us */
.aboutus {
  width: 100%;
  height: 200px;
}

.aboutus .imagenus {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("mae11.png") center center / cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.aboutus .textous {
  position: relative;
  color: white;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  z-index: 2;
  padding: 0 20px;
}

/* Historia */
.historia-section {
  display: flex;
  flex-wrap: wrap;
  padding: 40px 240px;
  background-color: white;
  gap: 70px;
  background: url("back1-01.png");
  background-size: cover;
}

.historia-texto {
  flex: 1 1 300px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.historia-texto h2 { font-size: 28px; margin-bottom: 20px; color: #0077ac; }
.historia-texto p { max-width: 500px; text-align: justify; line-height: 1.6; font-size: 19px; color: #333; }

.historia-carrusel {
  flex: 1 1 300px;
  position: relative;
  overflow: hidden;
}

.carrusel-container { position: relative; overflow: hidden; width: 100%; }
.carrusel { display: flex; width: 100%; }
.historia-carrusel img {
  width: 100%;
  max-width: 100%;
  height: 350px; /* altura fija más pequeña */
  flex: 0 0 100%;
  object-fit: cover;
  border-radius: 30px;
}

.flecha {
  position: absolute;
  top: 50%;
  background-color: #0077ac;
  color: white;
  border: none;
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
  z-index: 1;
  opacity: 0.8;
}

.flecha:hover { opacity: 1; }
.flecha.izquierda { left: 10px; }
.flecha.derecha { right: 10px; }

@media (max-width: 768px) {
  .historia-section { flex-direction: column; padding: 0px 10px; gap: 15px; background: none;}
  .historia-texto { text-align: center; align-items: center; }
  .historia-texto h2 { font-size: 24px; }
  .historia-texto p { font-size: 16px; padding: 0 10px; text-align: justify; }
}

/* =========================
   Responsive Carrusel
========================= */
@media (max-width: 768px) {
  .historia-carrusel img {
    height: 300px; /* más pequeño en tablets/móviles */
    border-radius: 20px;
  }

  .flecha {
    padding: 6px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .historia-carrusel img {
    height: 210px; /* aún más pequeño en móviles chicos */
    border-radius: 15px;
  }

  .flecha {
    padding: 4px;
    font-size: 14px;
  }
}

/* Evitar efecto de barrido vertical en imágenes del carrusel */
.historia-carrusel img {
  opacity: 1 !important;
  transform: translateX(0) !important;
  transition: none !important;
}

/* =========================
   🟩 TRES RECT�NGULOS (HOME o Education)
========================= */

.tres-rectangulos {
  display: flex;
  justify-content: space-between;
  padding: 50px 240px;
  gap: 100px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: url("back3-01.png");
  background-size: cover;
}

.rectangulo {
  background: #CBEEFF;
  flex: 1 1 0;
  border-radius: 20px;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icono { font-size: 48px; margin-bottom: 12px; }
.rectangulo h3 { margin: 0 0 10px 0; font-size: 22px; color: #002C45; }
.rectangulo p { font-size: 14px; color: #002C45; line-height: 1.4; max-width: 250px; }

/* =========================
   TRES RECTÁNGULOS - RESPONSIVE
========================= */
@media (max-width: 768px) {
  .tres-rectangulos {
    flex-direction: column;      /* Poner los rectángulos uno debajo del otro */
    padding: 40px 20px;          /* Menos padding superior/inferior, más a los lados */
    gap: 30px;                   /* Menor separación entre rectángulos */
    align-items: center;         /* Centrar rectángulos horizontalmente */
  }

  .rectangulo {
    width: 100%;                 /* Cada rectángulo ocupa todo el ancho posible */
    max-width: 350px;            /* Limita el tamaño máximo */
    padding: 25px;               /* Más espacio interno para respirar */
  }

  .icono {
    font-size: 36px;             /* Iconos más pequeños */
  }

  .rectangulo h3 {
    font-size: 18px;             /* Títulos más pequeños */
  }

  .rectangulo p {
    font-size: 14px;             /* Mantener texto legible */
    max-width: 300px;            /* Ajusta la longitud del texto */
  }
}


/* =========================
   👤 PERFIL FOUNDER (Home o About)
========================= */

.perfil-founder {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  color: white;
}

.perfil-founder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.overlayyy {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 70%;
  background: linear-gradient(to right, rgba(0, 44, 182, 0) 0%, rgba(0, 119, 182, 0.8) 30%, rgba(0, 119, 168, 1) 100%);
  display: flex;
  align-items: center;
}

.contenido-texto {
  padding-bottom: 80px;
  padding-top: 80px;
  padding-left: 300px;
  padding-right: 100px;
}

h4 { font-weight: normal; margin: 0; }
h2 { font-size: 2rem; font-weight: bold; margin: 10px 0; }
p { line-height: 1.6; margin-bottom: 15px; }

/* =========================
   PERFIL FOUNDER - RESPONSIVE
========================= */
@media (max-width: 768px) {
  .perfil-founder {
    height: auto;               /* que crezca según contenido */
    display: flex;
    flex-direction: column;     /* poner imagen y contenido en columna */
	  padding: none;
	  margin: none;
  }

  .perfil-founder img {
    height: auto;              /* menos altura para móviles */
    object-fit: contain;
  }

  .overlayyy {
    width: 100%;                /* ocupar todo el ancho */
    position: relative;         /* ya no absoluto para evitar cortar */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
	background-color: #0077ac;
  }

  .contenido-texto {
    padding: 20px;              /* menos padding, centrado */
  }

  h2 {
    font-size: 1.4rem;          /* más pequeño en móviles */
  }

  h4 {
    font-size: 1rem;
  }

  p {
    font-size: 0.8rem;
  }
}


/* =========================
   📩 CONTACT (contact.html)
========================= */
.contacto-section {
	background: url("back1-01.png");
	width: 100%;
	background-size: contain;
	background-repeat: space;
	}

.contacto {
  display: flex;
  gap: 100px;
  align-items: stretch;
  max-width: auto;
  height: 500px;
  margin: 50px 100px;
}

.contacto-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.contacto-info h2 { color: #0b2b66; font-size: 2rem; margin: 0; text-decoration: underline;}
.contacto-info p { color: white; margin: 0; max-width: 300px; }
.contacto-info p1 { color: #0b2b66; margin: 0; max-width: 290px; }

.icono-box {
  background-color: #0b79b8;
  width: 180px;
  height: auto;                 /* se adapta al contenido */
  border-radius: 10px;
  display: flex;
  flex-direction: column;       /* apila ícono y texto */
  justify-content: center;
  align-items: center;
  padding: 15px;                /* espacio interior */
  margin-bottom: 10px;
}

.icono-box img {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;           /* separación con el texto */
}

.icono-box p {
  color: white;                 /* texto visible sobre el fondo azul */
  font-size: 14px;
  margin: 0;
}

.contacto-formulario {
  flex: 1;
  background-color: #b9e3f7;
  padding: 30px;
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contacto-formulario form { display: flex; flex-direction: column; }

.contacto-formulario label { font-size: 0.9rem; margin-top: 10px; }

.contacto-formulario input,
.contacto-formulario textarea {
  border: none;
  border-radius: 12px;
  padding: 10px;
  margin-top: 5px;
  font-size: 1rem;
}

.contacto-formulario textarea { resize: none; }

.contacto-formulario button {
  margin-top: 15px;
  background-color: #0b2b66;
  color: white;
  padding: 8px 20px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

.contacto-formulario button:hover { background-color: #08305b; }

@media (max-width: 768px) {
  .contacto {
    flex-direction: column;   /* apilar elementos */
    align-items: center;      /* centrar horizontalmente */
    gap: 40px;                /* menos espacio entre bloques */
    margin: 0 20px;           /* margen más chico en móviles */
    height: auto;             /* que crezca según contenido */
	padding: 50px;
  }
	
	.contacto-section {
	width: 100%;
	background-size: contain;
	background-repeat: repeat-y;
  }

  .contacto-info,
  .contacto-formulario {
    width: 100%;              /* que cada bloque use todo el ancho disponible */
    max-width: 400px;         /* opcional: limitar el ancho para que no se vean gigantes */
  }

  .contacto-formulario {
    padding: 20px;
  }
}


/* =========================
   📚 EDUCATION (education.html)
========================= */

/* 🌟 SECCIÓN 2 - 3 iconos con frase horizontal */
.education-icons {
  display: flex;
  justify-content: space-around;
  background-color: #0077AC;
  color: white;
  padding: 40px 20px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  gap: 20px;
  height: 150px;
}

.education-icons .icon-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
}

.education-icons .icon-box img {
  width: 50px;
  height: 50px;
  background: #002C45;
  border-radius: 50%;
  padding: 10px;
}
.icon-box p {
	
font-size: 1.3em;
	}

/* RESPONSIVE EDUCATION ICONS: icono arriba, texto debajo */
@media (max-width: 768px) {
  .education-icons {
    padding: 20px 10px;   /* menos padding */
    gap: 20px;            /* espacio entre icon-box */
    height: auto;         /* altura automática */
    justify-content: center;
  }

  .education-icons .icon-box {
    flex-direction: column;  /* icono arriba, texto debajo */
    align-items: center;     /* centrar contenido */
    gap: 10px;               /* espacio entre icono y texto */
  }

  .education-icons .icon-box img {
    width: 40px;            /* icono más pequeño */
    height: 40px;
    padding: 5px;           /* menos padding interno */
  }

  .education-icons .icon-box p {
    font-size: 1rem;        /* texto más pequeño */
    text-align: center;     /* centrar texto */
  }
}

/* Para pantallas muy pequeñas (<480px) */
@media (max-width: 480px) {
  .education-icons {
    gap: 15px;               /* menos espacio entre icon-box */
    flex-wrap: wrap;         /* que pase a varias filas si no cabe */
  }

  .education-icons .icon-box {
    flex: 1 1 45%;           /* 2 por fila aproximadamente */
  }
}


/* 🌟 SECCIÓN 3 - Planting roots: foto + texto + 2 fotos verticales */
.planting-roots {
  display: flex;
  justify-content: space-between;
  background-color: white;
  padding: 50px 80px;
  gap: 60px;
  flex-wrap: wrap;
}

.planting-roots .left-photo {
  flex: 1;
  min-width: 250px;
  height: 460px;          /* 🔑 altura del rectángulo */
  overflow: hidden;       /* oculta lo que sobresale */
  border-radius: 15px;    /* opcional */
}

.planting-roots .left-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* recorta para llenar el rectángulo */
  object-position: center;/* centra el recorte */
}

.planting-roots .center-text {
  flex: 1;
  min-width: 350px;

}

.planting-roots .center-text h2 {
  font-size: 3em;
  margin-bottom: 20px;
  color: #002C45;
  text-align: center; 
}

.planting-roots .center-text p {
  font-size: 1rem;
  line-height: 1.6;
  text-align: justify; 

}

.planting-roots .right-photos {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;           /* espacio entre las dos fotos */
}

.planting-roots .right-photos img {
  width: 100%;
  height: calc((500px - 50px) / 2); /* 🔑 cada foto mide la mitad menos el gap */
  object-fit: cover;
  object-position: center;
  border-radius: 15px;
}

/* RESPONSIVE PLANTING ROOTS */
@media (max-width: 768px) {
  .planting-roots {
    flex-direction: column;      /* apila los elementos uno debajo del otro */
    padding: 40px 20px;          /* más padding a los lados */
    gap: 30px;                   /* reduce el gap entre bloques */
  }

  .planting-roots .left-photo,
  .planting-roots .center-text,
  .planting-roots .right-photos {
    flex: none;                  /* que no se expandan automáticamente */
    width: 100%;                 /* ocupen todo el ancho */
  }

  .planting-roots .left-photo {
    height: 200px;               /* reduce altura de la foto izquierda */
  }

  .planting-roots .center-text h2 {
    font-size: 2rem;             /* texto más pequeño */
  }

  .planting-roots .center-text p {
    font-size: 0.8rem;           /* párrafos más pequeños */
    text-align: justify;
  }

  .planting-roots .right-photos img {
    height: 140px;               /* reduce altura de las fotos derechas */
  }
}


/* =========================
   💖 DONATE (donate.html)
========================= */

/* ====================== DONATE SECTION ====================== */
.donate-section {
  position: relative;
  width: 100%;
  min-height: 500px;
  background: url("mae12.png") center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  box-sizing: border-box;
}

.donate-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to right, rgba(0, 44, 69, 0.6), rgba(0, 44, 69, 1));
  z-index: 1;
}

.donate-content {
  position: relative;
  display: flex;
  gap: 50px;
  width: 100%;
  max-width: 1300px;
  z-index: 2;
  flex-wrap: wrap;
	 align-items: flex-end; /* Esto alinea el contenido verticalmente al fondo */
}

/* Texto izquierda */
.donate-text {
  flex: 1;
  width: 200px;
  color: white;
}

.donate-text h2 {
  font-size: 2.5rem;
}

.donate-text p {
  font-size: 1rem;
  line-height: 1.5;
 width: 600px;
}

/* DONATE TEXT RESPONSIVE */
@media (max-width: 1024px) {
  .donate-text {
    width: auto;            /* usar todo el ancho disponible */
    max-width: auto;       /* limitar ancho para no estirar demasiado */
  }

  .donate-text h2 {
    font-size: 2rem;        /* reducir tamaño del título */
  }

  .donate-text p {
    font-size: 0.95rem;     /* reducir texto */
    line-height: 1.4;
    width: 100%;            /* que no se desborde */
  }
}

@media (max-width: 768px) {
  .donate-text {
    text-align: center;     /* centrar en pantallas pequeñas */
    padding: 0 20px;        /* padding lateral para no pegar al borde */
  }

  .donate-text h2 {
    font-size: 1.8rem;      /* ajustar más */
  }

  .donate-text p {
    font-size: 0.9rem;
    line-height: 1.4;
  }
}

@media (max-width: 480px) {
  .donate-text h2 {
    font-size: 1.5rem;
  }

  .donate-text p {
    font-size: 0.85rem;
  }
}


/* Caja formulario derecha */
.donate-box {
  flex: 1;
  min-width: 300px;
  background: white;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Parte superior: choose amount / enter your own */
.donate-amount {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background: #e6f2ff; /* color diferente */
  flex-wrap: wrap;
  gap: 20px;
}

.choose-amount, .enter-own {
  flex: 1;
  min-width: 120px;
}

.choose-amount span, .enter-own span {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
  color: #002C45;
}

.amount-options button {
  margin-right: 10px;
  margin-bottom: 5px;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: #cce6ff;
  cursor: pointer;
  font-weight: bold;
}

.amount-options button:hover {
  background: #0077AC;
  color: white;
}

.enter-own input {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Personal info */
.personal-info {
  padding: 20px;
  background: #cce6ff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.personal-info span {
  font-weight: bold;
  color: #002C45;
  margin-bottom: 5px;
}

.personal-info input {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
}

/* Estilo uniforme para el select (Payment Method) manteniendo la flecha predeterminada */
#method {
  width: 100%;
  padding: 10px;            /* ajusta el tamaño de la caja */
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 0.8rem;
  background: white;      /* mismo color que inputs y donate-box */
  color: gray;
  cursor: pointer;
  box-sizing: border-box;
  /* quitar appearance para mantener flecha predeterminada */
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
}

/* Label del select */
label[for="method"] {
  font-weight: bold;
  color: #002C45;
  display: block;
  margin-bottom: 5px;
}

.donate-button {
  padding-bottom: 20px;
  display: flex;
  justify-content: center;
  background: #cce6ff;
}

#donateBttn {
  padding: 10px 15px;
  border: none;
  border-radius: 100px;
  background: #002C45;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

#donateBttn:hover {
  background: #ecbe61;
}


/* =========================
   EFECTOS DE MOVIMIENTO Y ZOOM
========================= */

/* Efecto hover para botones y enlaces importantes */
button, .donate-bttn, .donate a {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

button:hover, .donate-bttn:hover, .donate a:hover {
  transform: scale(1.05);
}

/* Efecto hover para iconos de secciones */
.icon-box img, .rectangulo .icono {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.icon-box img:hover, .rectangulo .icono:hover {
  transform: scale(1.2) rotate(5deg);
  filter: brightness(1.2);
}


/* Efecto hover para las imágenes de carrusel */
.planting-roots img, .right-photos img {
  transition: transform 0.4s ease, filter 0.4s ease;
}

.planting-roots img:hover,
.right-photos img:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Efecto hover para rectángulos de la sección "tres-rectangulos" */
.rectangulo {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rectangulo:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Efecto flotante / sutil para overlay de hero y homephrase */
.hero-section::before,
.homephrase .overlay,
.perfil-founder .overlayyy {
  transition: transform 0.5s ease;
}

.hero-section:hover::before,
.homephrase:hover .overlay,
.perfil-founder:hover .overlayyy {
  transform: scale(1.02);
}

/* Animación suave para texto que aparece sobre imágenes */
.hero-content, .homephrase .texto, .perfil-founder .contenido-texto {
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.hero-content:hover, .homephrase:hover .texto, .perfil-founder:hover .contenido-texto {
  transform: translateY(-5px);
  opacity: 1;
}

.support-block { display: flex; justify-content: center; /* Centra horizontalmente todo el bloque */ align-items: center; /* Centra verticalmente */ gap: 40px; /* Espacio entre imagen y texto */ padding: 60px 20px; border-radius: 20px; margin: 0 auto; /* centra el bloque en la página */ background-image: url("back1-01.png"); background-size: contain; } .support-image img { width: 350px; height: auto; border-radius: 15px; /* bordes redondeados */ object-fit: cover; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .support-content { flex: 1; max-width: 500px; /* limita el ancho del texto */ } .support-content h2 { font-size: 28px; margin-bottom: 20px; color: #002c45; } .support-item { display: flex; align-items: flex-start; margin-bottom: 15px; } .circle { width: 16px; height: 16px; background-color: #002C45; border-radius: 50%; margin-right: 15px; margin-top: 6px; } .support-item p { margin: 0; font-size: 16px; color: #333; line-height: 1.4; }

/* SUPPORT BLOCK RESPONSIVE */
@media (max-width: 1024px) {
  .support-block {
    flex-direction: column;   /* apilar imagen y contenido */
    padding: 50px 40px;       /* menos padding que en desktop */
    gap: 30px;                /* reducir separación */
  }

  .support-image img {
    width: 80%;               /* más pequeño que en desktop */
    max-width: 300px;
  }

  .support-content {
    max-width: 70%;          /* que ocupe todo el ancho disponible */
  }

  .support-content h2 {
    font-size: 24px;          /* ajustar tamaño del título */
	text-align: center;
  }

  .support-item p {
    font-size: 15px;          /* texto más pequeño */
  }

  .circle {
    width: 14px;
    height: 14px;
    margin-right: 10px;
    margin-top: 5px;
  }
}

@media (max-width: 768px) {
  .support-block {
    padding: 40px 20px;       /* menos padding lateral */
    gap: 25px;
  }

  .support-image img {
    width: 90%;               /* ocupar casi todo el ancho */
    max-width: 250px;
  }

  .support-content h2 {
    font-size: 22px;
  }

  .support-item p {
    font-size: 14px;
  }

  .circle {
    width: 12px;
    height: 12px;
    margin-right: 8px;
    margin-top: 4px;
  }
}

@media (max-width: 480px) {
  .support-block {
    padding: 30px 15px;
    gap: 20px;
  }

  .support-image img {
    width: 100%;
    max-width: 200px;
  }

  .support-content h2 {
    font-size: 20px;
  }

  .support-item p {
    font-size: 13px;
  }

  .circle {
    width: 10px;
    height: 10px;
    margin-right: 6px;
    margin-top: 3px;
  }
}


@media (max-width: 768px) {
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    position: relative;
  }

  /* Botón hamburguesa a la izquierda */
  #menu-toggle {
    display: block;
    font-size: 26px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    z-index: 10;
  }

  /* Logo centrado */
  .logo {
    position: absolute;
    margin: auto;
    z-index: 5;
	padding-top: 8px;
	
  }

  .logo img {
    max-height: 40px;
    width: auto;
  }

  /* Donate a la extrema derecha */
  .donate {
    right: 10px;
	position: relative;
    padding-bottom: 50px;
    z-index: 5;
  }

  .donate a {
    padding: 8px 15px;
    font-size: 0.9rem;
  }

  /* Menú vertical que cae */
  .main-nav {
    display: none; /* oculto por defecto */
    flex-direction: column;
    background-color: #0077ac;
    width: 100%;
    margin-top: 10px; /* cae debajo del header */
  }

  .main-nav ul {
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding-left: 0;
    text-align: center;
  }

  .main-nav.show {
    display: flex; /* aparece al abrir */
  }

  .main-nav a {
    color: white;
    text-decoration: none;
    padding: 5px 0;
    display: block;
    font-weight: bold;
  }

  .main-nav a:hover {
    background-color: #005f8c;
  }
}

@media (max-width: 768px) {
  header.menu-open .donate {
    display: none; /* oculta donate cuando el menú está abierto */
  }
	 header.menu-open .logo {
    display: none; /* oculta donate cuando el menú está abierto */
  }
}

.donate-section, .donate-box {
  opacity: 1;
  transform: translateY(0);
}

.amount-options button.selected {
  background: #0077AC;
  color: white;
}