html {
  scroll-behavior: smooth;
}


.banner-como-podes-ayudar {
	
    background-image: url('../imagenes/sospecho/03_Desktop_Banner_Sospecho.jpg'); /* poné tu ruta */
    background-size: cover;
    background-position: center;
    height: 200px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 94px;
  }
  
  .banner-como-podes-ayudar .overlay {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    
  }
  
  .banner-titulo-ayudar {
    color: #fff;        /* texto blanco */
    font-size: 48px;    /* ajustá el tamaño según tu diseño */
    font-weight: 700;
    margin: 0;
    padding-left: 80px; /* mismo margen que venís usando */
    text-align: left;
  }

  .ayudar-texto {
    padding: 0 80px; /* mismo padding lateral que usamos */
    margin-top: 50px;
  }
  
  
  .p-titulo-ayudar {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
    /
  }
  
  .p-parrafo-ayudar {
    font-size: 20px;
    line-height: 1.6;
    
    margin: 0;
  }
  
/********* CARDS *********/

.cards-como-ayudar {
  padding: 60px 80px; /* respeta márgenes usados antes */
  scroll-margin-top: 90px;
}

.fila-como-ayudar {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center; /* mantiene alineado en el centro */
}

.card-como-ayudar {
  flex: 1 1 300px; /* base de 300px pero flexible */
  max-width: 413px;
  height: 274px;
  
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: all 0.3s ease; /* animación suave */
  cursor: pointer; /* indica que es clickeable */

}
.card-como-ayudar:hover {
  border: 1px solid #014375; /* ahora sí se ve azul */
  box-shadow: 0 0 8px rgba(1, 67, 117, 0.3); /* sutil sombra azul */
  transform: translateY(-3px); /* pequeño efecto de "levantarse" */
}


.card-como-ayudar-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-como-ayudar-icon-container {
  width: 40px;
  height: 40px;
  background-color: #f5f5f5;  /* fondo gris */
  /* borde super fino simulado */
  box-shadow: 0 0 0 0.5px #014375;
  border-radius: 3px;         /* esquinas redondeadas */
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-como-ayudar-icon {
  width: 39px;
  height: 30px;
  object-fit: contain;  /* asegura que la imagen no se deforme */
}


.card-como-ayudar-titulo {
  font-size: 20px;
  font-weight: 700;
  
  margin: 0;
}

.card-como-ayudar-parrafo {
  font-size: 16px;
  margin: 0;
  line-height: 1.5;
}

.card-como-ayudar-link {
  display: block;
  text-decoration: none;
  color: inherit; /* respeta el color original del texto */
}


/******** MODAL ********/
.custom-modal {
  width: 500px;
  height: 550px;
  margin: auto;
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* deja la cabecera arriba */
  align-items: stretch;  /* ocupa todo el ancho del modal */
}

/* Contenedor imagen + botón */
.modal-header-custom {
  display: flex;
  justify-content: space-between; /* imagen a la izq, botón a la der */
  align-items: center;
  width: 100%;
  padding: 10px 40px;                /* solo arriba y abajo */
  border-bottom: 1px solid #ccc; /* línea gris debajo */
  box-sizing: border-box;
}
/* Imagen */
.modal-img {
  display: flex;
  align-items: center;           /* centra la imagen dentro del contenedor */
  margin-left: 5%;                /* ajusta este margen para que coincida con el margen izquierdo del texto */
}
.modal-img img {
  max-width: 280px;   /* limita el ancho */
  height: 80px;       /* mantiene proporción */
  object-fit: contain;
  display: block;
}

/* Botón cerrar estilo "X" */
.btn-cerrar {
  background: transparent;
  border: none;
  font-size: 24px;   /* tamaño grande para la X */
  font-weight: bold;
  color: #333;       /* gris oscuro */
  cursor: pointer;
  padding: 0 15px;   /* separa un poco del borde derecho */
  transition: color 0.3s ease, transform 0.2s ease;
}

.btn-cerrar:hover {
  color: #007bff;    /* azul al pasar el mouse */
  transform: scale(1.1);
}


/* Contenedor de texto */
.custom-modal-body {
  width: 85%;   /* un poco más estrecho que el modal */
  margin: 0 auto;
  padding: 20px;
  font-size: 16px;
  line-height: 1.6;
  text-align: left; /* mantiene la lectura clara */
}
.p-hace-tu-aporte{
  font-weight: 700;
  font-size: 24px;
}
.datos-bancarios {
  border-left: 2px solid #ccc; /* línea vertical */
  padding-left: 10px;
  margin: 20px 0;
}

.dato-bancario {
  display: flex;               /* coloca texto y botón en la misma línea */
  align-items: center;         /* centra verticalmente */
  margin: 5px 0;               /* espacio entre filas */
}

.btn-copiar {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #ccc;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-copiar:hover {
  color: #0056b3;
}
.datos-bancarios > p:first-child {
  margin: 0;        /* elimina márgenes arriba y abajo */
  padding-bottom: 5px; /* opcional: un pequeño espacio si querés */
  
  font-size: 16px;
}


.mensaje-copiado {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9999;
}
.mensaje-copiado.show {
  opacity: 1;
}


/*************** FORMULARIO ****************/

.voluntariado-section .container-voluntariado {
  padding: 0 80px; /* Padding lateral consistente con la página */
  max-width: 100%; /* Que ocupe todo el ancho disponible */
  box-sizing: border-box;
  margin-top: 20px;
}

.titulo-voluntariado {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 15px;
}

.texto-voluntariado {
  font-size: 20px;
  margin-bottom: 60px;
}

/* Formulario */
.form-voluntariado {
  display: flex;
  flex-direction: column;
  gap: 40px;
  
}

.form-seccion {
  display: flex;
  gap: 40px;
  flex-wrap: wrap; /* permite que baje a la siguiente línea en pantallas pequeñas */
}

.form-group,
.form-group-radio {
  flex: 1 1 200px; /* ocupa el mismo espacio, mínimo 200px */
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 5px;
  font-weight: 600;
}

/* Inputs tipo línea para Sección 1 */
.form-group input[type="text"],
.form-group input[type="email"] {
  border: none;                  /* quitamos el borde completo */
  border-bottom: 1px solid #ccc; /* línea inferior */
  padding: 5px 0;                /* espacio arriba y abajo */
  font-size: 16px;
  outline: none;                 /* quitamos outline predeterminado */
  width: 100%;                   /* ocupa todo el ancho del contenedor */
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

/* Cambio de color al hacer focus */
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus {
  border-bottom-color: #0260a1;
}


.form-group-radio div {
  display: flex;
  gap: 20px;
  margin-top: 5px;
}

input[type="radio"] {
  margin-right: 5px;
}

/* Botón */
.btn-enviar {
  background-color: #014375;
  color: #fff;
  padding: 12px 25px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  align-self: flex-start;
}

.btn-enviar:hover {
  background-color: #0260a1;
}

select[multiple] {
  height: 120px;
}
/* Contenedor vertical para la sección completa */
.form-seccion.areas-section {
  display: flex;
  flex-direction: column; /* etiqueta arriba, botones abajo */
  gap: 10px;
  width: 100%;
  align-items: flex-start; /* Alinea todo al inicio (izquierda) */
  box-sizing: border-box;
}

/* Contenedor de botones */
.areas-interes {
  display: flex;
  flex-wrap: nowrap;             /* horizontal */
  justify-content: space-between; /* distribuye los botones en todo el ancho */
  width: 100%;                   /* ocupa todo el ancho del contenedor padre */
  margin-top: 10px;
  box-sizing: border-box;
}

.area-btn {
  display: inline-flex;       /* ancho según contenido */
  align-items: center;
  justify-content: flex-start; /* texto a la izquierda */
  border-radius: 5px;
  font-weight: 600;
  white-space: nowrap;
  transition: none;            /* quitamos hover del contenedor */
  background-color: transparent;
  flex: 0;
  margin-right: 10px;
  cursor: default;            /* el label ya no es clickeable */
}

.area-btn input[type="checkbox"] {
  margin-right: 8px;
  accent-color: #014375;
  cursor: pointer;            /* solo el checkbox es clickeable */
}

/* Opcional: color cuando está seleccionado */
.area-btn input[type="checkbox"]:checked {
  background-color: #014375;
  color: #fff;
}
.titulo-voluntariado-celular-banner{
  display: none;
}
.voluntariado-section-celular{
  display: none;
}
/********** Vista Responsive *************/

@media (max-width: 767px) {
  .voluntariado-section{
    display: none;
  }
.banner-como-podes-ayudar{
  margin-top: 50px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 180px; /* altura fija */
  display: flex;
  align-items: center; /* centra verticalmente el texto */
  padding: 0 24px; /* padding lateral */
  box-sizing: border-box;
  justify-content: left;
}
.banner-como-podes-ayudar .overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 260px;
  
  
}
.banner-titulo-ayudar {
  font-size: 24px;
  font-weight: 700;
  color: white;
  text-align: left; /* texto a la izquierda */
  margin: 0;
  padding: 0; /* padding lateral */
}
.ayudar-texto {
  width: 100%;
  padding: 24px; /* padding lateral y superior/inferior */
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start; /* asegura alineación a la izquierda */
  margin-top: 0;
}
.p-titulo-ayudar{
  font-size: 20px;
}
.p-parrafo-ayudar{
  font-size: 14px;
}

.voluntariado-section-celular {
  width: 100%;
  padding: 24px; /* padding lateral */
  box-sizing: border-box;
  display: block;
}

.container-voluntariado {
  width: 100%;
}
.voluntariado-section-celular .container-voluntariado{
  padding: 0; /* padding lateral */
}
.titulo-voluntariado-celular-banner {
  background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center; /* centra verticalmente */
    justify-content: flex-start; /* texto alineado a la izquierda */
    padding: 0 24px; /* paddings laterales */
    box-sizing: border-box;
  margin-bottom: 12px;
  text-align: left;
  background-color: #014375;
  
  height: 102px !important;
  width: 100%;
}
.titulo-voluntariado-celular{
  color: white;
  font-size: 20px;
  font-weight: 700;
}
.texto-voluntariado {
  font-size: 14px;
  margin-bottom: 20px;
  text-align: left;
}
.form-group,
.form-group-radio{
  flex: 1 1 100px !important
}
.form-voluntariado {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px; /* espacio entre secciones */
}

.form-seccion {
  display: flex;
  flex-direction: column;
  gap: 16px; /* espacio entre campos dentro de la sección */
}

.form-group, .form-group-radio {
  display: flex;
  flex-direction: column;
  gap: 8px; /* espacio entre label e input */
  width: 100%;
}

/* Radio buttons apilados verticalmente */
.form-group-radio div {
  display: flex;
  flex-direction: column;
  gap: 8px; /* espacio entre cada opción */
}

/* Áreas de interés */
.areas-interes {
  display: flex;
  flex-direction: column;
  gap: 8px; /* espacio entre checkboxes */
}

.area-btn {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Botón enviar */
.btn-enviar {
  width: 100%;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 700;
  margin-top: 16px;
}
}