.icon-redes {
   width: 60px;
   height: 60px;
   background-color: white;
   border-radius: 10%; /* opcional, hace los iconos redondos */
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 5px; /* opcional, ajusta espacio interno */
   box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* opcional, para un poco de profundidad */
   transition: transform 0.9s ease, filter 0.9s ease;
}

.icon-redes img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

 .iconos-redes a:hover {
   filter: brightness(1.2); /* ilumina la imagen un 20% */
   transform: scale(1.1);   /* agranda ligeramente */
 }
 
.negrita {
   font-weight: 700; /* bold */
 }

/*************************** COMO PODES AYUDAR ***********************/
.card-ayuda {
   width: 370px;
   display: flex;
   flex-direction: column;
   padding: 15px;
   background-color: #fff;
   text-align: left;
 }
 
 /* Grid que incluye icono, h3, p y botón */
 .card-ayuda-body {
   display: grid;
   grid-template-columns: 40px 1fr; /* columna 1 = icono, columna 2 = contenido */
   grid-template-rows: auto 1fr auto; /* fila 1 = h3+icono, fila 2 = p flexible, fila 3 = botón fijo */
   column-gap: 12px;
   row-gap: 6px;
   height: 150px; /* altura fija del área de contenido */
 }
 .gap-responsive {
   gap: 1.5rem !important;
}
 /* Icono */
 .icono-ayuda {
   width: 40px;
   height: 40px;
   object-fit: contain;
   grid-column: 1;
   grid-row: 1;
 }
 
 /* H3 */
 .h3-ayuda {
   grid-column: 2;
   grid-row: 1;
   align-self: center;
   margin: 0;
   font-size: 1.25rem;
   font-weight: 700;
 }
 
 /* Párrafo */
 .p-ayuda {
   grid-column: 2;
   grid-row: 2;
   margin: 0;
   font-size: 0.95rem;
   color: #333;
   line-height: 1.2;
 }
 
/* Botón estilo transparente con flecha */
.btn-ayuda {
   grid-column: 2;
   grid-row: 3;
   display: inline-flex;            /* Para alinear texto + flecha */
   align-items: center;             /* Centrado vertical */
   justify-content: flex-start;     /* Texto a la izquierda */
   margin-top: 5px;
   padding: 8px 0;
   background-color: transparent;   /* Sin fondo */
   border: none;                    /* Sin borde */
   color: #014375;
   text-decoration: none;
   font-weight: 500;
   font-size: 0.95rem;
   cursor: pointer;
   transition: color 0.2s ease;
}



/* Flecha a la derecha del texto */
.btn-ayuda::after {
   content: "➔";  /* flecha más gruesa */
   margin-left: 8px;
   font-size: 1rem;
   color: #014375;
}
/* Hover del botón */
.btn-ayuda:hover span {
   color: #429AE8;
   text-decoration: underline;
}


.btn-ayuda:hover::after {
   color: #429AE8;
   transform: translateX(4px);      /* flecha se mueve un poco a la derecha */
}

 
 /* Título de la sección */
 .h2-ayudar {
   font-size: 32px;
   font-weight: 700;
 }
 

 
/*Estilos para celulares (pantallas de hasta 767px) */
@media (max-width: 767px){
   .social-container {
      height: 207px !important; /* altura fija en mobile */
  }
  
  .social-container img {
      height: 100%;
      object-fit: cover;
  }
  .titulo-social{
   font-size: 16px !important;
   font-weight: 700;
  }
  .p-social{
   font-size: 14px !important;
   font-weight: 400;
  }
   .iconos-redes{
    display: flex;
    height: 48px !important;
    margin-top: 8px;
   }
   .icon-redes{
      width: 48px !important;
      height: 48px !important;
   }

   .h2-ayudar{
      font-size: 16px !important;
   }
   .h3-ayuda {
      font-size: 14px !important;
   }
   .p-ayuda{
      font-size: 14px !important;
   }
   .btn-ayuda{
      font-size: 16px !important;
      font-weight: 600;
      color: #014375;
   }
   .gap-responsive {
      gap: 0 !important;
  }
  .card-ayuda-body {
   display: grid;
   grid-template-columns: 40px 1fr;
   grid-template-rows: auto 1fr auto;
   column-gap: 8px; /* antes 12px */
   row-gap: 2px; /* antes 6px */
   height: 130px; /* antes 150px */
 }
}