/* ====== ÍCONOS DEL ENCABEZADO SITIOSIMPLE ====== */

/* Color inicial (ajústalo al tono de tu logo) */
.header .icono-whatsapp i,
.header .icono-mail i,
.header .icono-telefono i,
header .fa-whatsapp,
header .fa-envelope,
header .fa-phone {
  color: #18A396 !important; /* ← Cambia este color por el tono del logo */
  font-size: 32px !important; /* tamaño base */
  transition: all 0.3s ease;
  opacity: 1 !important;
}<style>
  .valor-box {
    transition: transform 0.3s ease, background-color 0.3s ease;
    padding: 20px;
    border-radius: 8px;
  }

  .valor-box:hover {
    transform: scale(1.03);
    background-color: #E0F4F1; /* Verde claro derivado de #18A396 */
  }

  .valor-box h3 {
    font-weight: 700;
    color: var(--bs-primary);
  }

  .valor-box p {
    color: var(--bs-secondary);
    font-size: 19px;
  }
</style>

<div class="servicios-01 d-flex flex-column align-items-center justify-content-center text-dark p-5" style="background-color: #ffffff;">
  <div class="container text-center">
    <h1 style="text-align: left; font-weight: 600; font-size: 40px; color: var(--bs-primary);">Nuestros Valores</h1>

    <!-- Fila 1: 3 columnas -->
    <div class="row mt-4">
      <div class="col-md-4 mb-4">
        <div class="valor-box">
          <h3>Empatía</h3>
          <p>Nos ponemos en el lugar de nuestros pacientes, brindando una atención cercana y humana.</p>
        </div>
      </div>
      <div class="col-md-4 mb-4">
        <div class="valor-box">
          <h3>Confianza</h3>
          <p>Generamos relaciones basadas en la transparencia y el profesionalismo.</p>
        </div>
      </div>
      <div class="col-md-4 mb-4">
        <div class="valor-box">
          <h3>Profesionalismo</h3>
          <p>Contamos con un equipo capacitado que busca siempre la excelencia en cada atención.</p>
        </div>
      </div>
    </div>

    <!-- Fila 2: 2 columnas -->
    <div class="row">
      <div class="col-md-6 mb-4">
        <div class="valor-box">
          <h3>Compromiso</h3>
          <p>Nos dedicamos con pasión y responsabilidad a mejorar la calidad de vida de quienes confían en nosotros.</p>
        </div>
      </div>
      <div class="col-md-6 mb-4">
        <div class="valor-box">
          <h3>Cercanía</h3>
          <p>Fomentamos un vínculo cálido y humano, acompañando a nuestros pacientes en cada etapa.</p>
        </div>
      </div>
    </div>

    <!-- Frase final -->
    <p style="font-weight: 600; font-size: 19px; font-family: Oswald; color: #176c64; margin-top: 30px;">
      <em>“Más que cuidadores, somos compañía, apoyo y esperanza.”</em>
    </p>
  </div>
</div>
/* --- BLOQUE DE VALORES CON SEPARADORES Y EFECTO HOVER --- */
.valores {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  background-color: #fff;
  padding: 40px 0;
  border-radius: 12px;
  text-align: center;
  flex-wrap: wrap;
}

.valor {
  flex: 1;
  padding: 0 30px;
  box-sizing: border-box;
  position: relative;
  transition: all 0.3s ease;
}

/* línea divisoria */
.valor:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background-color: #e0e0e0;
}

/* títulos */
.valor h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  color: #1e4356;
  transition: color 0.3s ease;
}

/* texto */
.valor p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
  transition: color 0.3s ease;
}

/* efecto hover */
.valor:hover {
  background-color: rgba(0, 102, 204, 0.05);
  transform: translateY(-5px);
}

.valor:hover h3 {
  color: #007bff;
}

.valor:hover p {
  color: #333;
}

/* responsive */
@media (max-width: 768px) {
  .valores {
    flex-direction: column;
  }
  .valor {
    padding: 20px 0;
  }
  .valor:not(:last-child)::after {
    display: none;
  }
}
/* --- FIN BLOQUE DE VALORES --- */
/* === Estilos para tarjetas de valores === */
.valor {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Efecto al pasar el mouse */
.valor:hover {
  transform: scale(1.03);
  background-color: #E6F7F6;
}

/* Íconos dentro de las tarjetas */
.valor i {
  font-size: 40px;
  margin-bottom: 10px;
  color: var(--bs-primary);
}

/* Títulos */
.valor h3 {
  font-weight: 700;
  font-size: 25px;
  color: var(--bs-primary);
  margin-top: 10px;
}

/* Párrafos */
.valor p {
  font-size: 18px;
  color: var(--bs-secondary);
  margin-bottom: 0;
}/* === Estilos para tarjetas de valores === */
.valor {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  text-align: center;
}

/* Efecto al pasar el mouse */
.valor:hover {
  transform: scale(1.03);
  background-color: #E6F7F6; /* Verde claro derivado de #18A396 */
}

/* Íconos */
.valor i {
  font-size: 40px;
  margin-bottom: 10px;
  color: var(--bs-primary);
  transition: color 0.3s ease;
}

/* Títulos */
.valor h3 {
  font-weight: 700;
  font-size: 25px;
  color: var(--bs-primary);
  margin-top: 10px;
  transition: color 0.3s ease;
}

/* Párrafos */
.valor p {
  font-size: 18px;
  color: var(--bs-secondary);
  margin-bottom: 0;
  transition: color 0.3s ease;
}

/* === Cambiar color de texto al pasar el mouse === */
.valor:hover h3,
.valor:hover p,
.valor:hover i {
  color: #8FA3AF; /* Plomo suave */
}@media (max-width: 768px) {
  .valor {
    padding: 15px;
    transform: none !important;
    background-color: #ffffff;
    margin-bottom: 15px;
  }

  .valor:hover {
    transform: none !important;
    background-color: #E6F7F6;
  }

  .valor h3 {
    font-size: 20px;
  }

  .valor p {
    font-size: 16px;
  }

  .valor i {
    font-size: 32px;
  }
}/* === Tarjetas de valores === */
.valor {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Hover en escritorio */
.valor:hover {
  transform: scale(1.03);
  background-color: #E6F7F6;
}

/* Íconos */
.valor i {
  font-size: 40px;
  margin-bottom: 10px;
  color: #18A396; /* Verde base fijo */
}

/* Títulos */
.valor h3 {
  font-weight: 700;
  font-size: 25px;
  color: #18A396;
  margin-top: 10px;
  transition: color 0.3s ease;
}

/* Descripciones */
.valor p {
  font-size: 18px;
  color: #8FA3AF; /* Plomo suave */
  margin-bottom: 0;
  transition: color 0.3s ease;
}

/* Hover: solo cambia texto, no íconos */
.valor:hover h3,
.valor:hover p {
  color: #8FA3AF;
}

/* === Ajustes para móviles === */
@media (max-width: 768px) {
  .valor {
    padding: 15px;
    margin-bottom: 15px;
    transform: none !important;
  }

  .valor:hover {
    transform: none !important;
  }

  .valor h3 {
    font-size: 20px;
  }

  .valor p {
    font-size: 16px;
  }

  .valor i {
    font-size: 32px;
    color: #18A396; /* Asegura que se mantenga verde en móvil */
  }
}/* === Tarjetas de valores === */
.valor {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Hover en escritorio */
@media (min-width: 769px) {
  .valor:hover {
    transform: scale(1.03);
    background-color: #E6F7F6;
  }

  .valor:hover h3,
  .valor:hover p {
    color: #8FA3AF;
  }
}

/* Íconos */
.valor i {
  font-size: 40px;
  margin-bottom: 10px;
  color: #18A396;
}

/* Títulos */
.valor h3 {
  font-weight: 700;
  font-size: 25px;
  color: #18A396;
  margin-top: 10px;
}

/* Descripciones */
.valor p {
  font-size: 18px;
  color: #8FA3AF;
  margin-bottom: 0;
}

/* === Ajustes para móviles === */
@media (max-width: 768px) {
  .valor {
    padding: 15px;
    margin-bottom: 15px;
    background-color: #ffffff;
    transform: none !important;
  }

  .valor h3 {
    font-size: 20px;
    color: #18A396;
  }

  .valor p {
    font-size: 16px;
    color: #8FA3AF;
  }

  .valor i {
    font-size: 32px;
    color: #18A396;
  }
}/* === Tarjetas de valores === */
.valor {
  background-color: #ffffff !important;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Íconos */
.valor i {
  font-size: 40px;
  margin-bottom: 10px;
  color: #18A396;
}

/* Títulos */
.valor h3 {
  font-weight: 700;
  font-size: 25px;
  color: #18A396;
  margin-top: 10px;
}

/* Descripciones */
.valor p {
  font-size: 18px;
  color: #8FA3AF;
  margin-bottom: 0;
}

/* Hover solo en escritorio */
@media (min-width: 769px) {
  .valor:hover {
    transform: scale(1.03);
    background-color: #E6F7F6;
  }

  .valor:hover h3,
  .valor:hover p {
    color: #8FA3AF;
  }
}

/* === Ajustes para móviles === */
@media (max-width: 768px) {
  .valor {
    padding: 15px;
    margin-bottom: 15px;
    background-color: #ffffff !important;
    transform: none !important;
  }

  .valor h3 {
    font-size: 20px;
    color: #18A396;
  }

  .valor p {
    font-size: 16px;
    color: #8FA3AF;
  }

  .valor i {
    font-size: 32px;
    color: #18A396;
  }
}/* === Tarjetas de valores === */
.valor {
  background-color: #ffffff !important;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Íconos */
.valor i {
  font-size: 40px;
  margin-bottom: 10px;
  color: #18A396;
}

/* Títulos */
.valor h3 {
  font-weight: 700;
  font-size: 25px;
  color: #18A396;
  margin-top: 10px;
}

/* Descripciones */
.valor p {
  font-size: 18px;
  color: #8FA3AF;
  margin-bottom: 0;
}

/* Hover solo en escritorio */
@media (min-width: 769px) {
  .valor:hover {
    transform: scale(1.03);
    background-color: #E6F7F6;
  }

  .valor:hover h3,
  .valor:hover p {
    color: #8FA3AF;
  }
}

/* === Ajustes para móviles === */
@media (max-width: 768px) {
  .valor {
    padding: 15px;
    margin-bottom: 15px;
    background-color: #ffffff !important;
    transform: none !important;
  }

  .valor h3 {
    font-size: 20px;
    color: #18A396;
  }

  .valor p {
    font-size: 16px;
    color: #8FA3AF;
  }

  .valor i {
    font-size: 32px;
    color: #18A396;
  }
}.valor {
  background-color: #ffffff !important;
  padding: 20px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  text-align: center !important;
  transition: transform 0.3s ease, background-color 0.3s ease !important;
}

.valor i {
  font-size: 40px !important;
  margin-bottom: 10px !important;
  color: #18A396 !important;
}

.valor h3 {
  font-weight: 700 !important;
  font-size: 25px !important;
  color: #18A396 !important;
  margin-top: 10px !important;
}

.valor p {
  font-size: 18px !important;
  color: #8FA3AF !important;
  margin-bottom: 0 !important;
}

@media (min-width: 769px) {
  .valor:hover {
    transform: scale(1.03) !important;
    background-color: #E6F7F6 !important;
  }

  .valor:hover h3,
  .valor:hover p {
    color: #8FA3AF !important;
  }
}

@media (max-width: 768px) {
  .valor {
    padding: 15px !important;
    margin-bottom: 15px !important;
    background-color: #ffffff !important;
    transform: none !important;
  }

  .valor h3 {
    font-size: 20px !important;
    color: #18A396 !important;
  }

  .valor p {
    font-size: 16px !important;
    color: #8FA3AF !important;
  }

  .valor i {
    font-size: 32px !important;
    color: #18A396 !important;
  }
}/* === Ajustes para móviles: texto e íconos blancos === */
@media (max-width: 768px) {
  .valor h3,
  .valor p,
  .valor i {
    color: #ffffff !important;
  }
}.valores-section {
  background-color: #18A396;
  color: #fff;
  text-align: center;
  padding: 80px 20px;
}

.valores-section h2 {
  font-size: 2.5rem;
  margin-bottom: 60px;
  font-weight: 700;
}

/* GRID PRINCIPAL */
.valores-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  justify-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

/* TARJETAS */
.valor-card {
  background: #fff;
  color: #333;
  border-radius: 20px;
  padding: 40px 25px;
  width: 100%;
  max-width: 320px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.valor-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.valor-card i {
  font-size: 40px;
  color: #18A396;
  margin-bottom: 20px;
}

.valor-card h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  color: #18A396;
  font-weight: 700;
}

.valor-card p {
  font-size: 1rem;
  color: #555;
  line-height: 1.5;
}

/* RESPONSIVE TABLET */
@media (max-width: 992px) {
  .valores-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

/* RESPONSIVE CELULAR */
@media (max-width: 600px) {
  .valores-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .valor-card {
    max-width: 100%;
  }
}.valores-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.valor-card {
  flex: 1 1 calc(33.333% - 30px);
  min-width: 280px;
  background-color: white;
  padding: 20px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border-radius: 8px;
}

/* Segunda fila con solo 2 elementos centrados */
.valor-card:nth-child(4),
.valor-card:nth-child(5) {
  flex: 1 1 calc(45% - 30px);
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .valor-card {
    flex: 1 1 100%;
  }
}.valores-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.valor-card {
  flex: 1 1 calc(33.333% - 30px);
  min-width: 280px;
  box-sizing: border-box;
}

/* Segunda fila con solo 2 elementos centrados */
.valor-card:nth-child(4),
.valor-card:nth-child(5) {
  flex: 1 1 calc(45% - 30px);
}

/* SOLO en celulares: apilado vertical */
@media (max-width: 767px) {
  .valor-card {
    flex: 1 1 100%;
  }
}/* Estilo general del pie de página */
.footer-section {
  background-color: var(--bs-primary) !important;
  padding: 30px 20px !important;
  font-family: Roboto, sans-serif !important;
  color: white !important;
}

/* Navegación vertical más compacta */
.footer-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important; /* reduce espacio entre botones */
  margin-bottom: 20px !important;
}

.footer-nav a {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: white !important;
  text-decoration: none !important;
}

/* Íconos + texto alineados horizontalmente */
.footer-contact-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  font-size: 17px !important;
  color: white !important;
}

/* Íconos más grandes */
.footer-contact-item i {
  font-size: 22px !important;
  color: white !important;
  vertical-align: middle !important;
}

/* Texto legal al pie */
.footer-legal {
  font-size: 15px !important;
  color: white !important;
  text-align: center !important;
  margin-top: 20px !important;
}/* Estilo general del pie de página */
footer {
  background-color: var(--bs-primary) !important;
  padding: 30px 20px !important;
  font-family: Roboto, sans-serif !important;
  color: white !important;
}

/* Navegación vertical más compacta */
footer nav,
footer .footer-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 20px !important;
}

footer nav a,
footer .footer-nav a {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: white !important;
  text-decoration: none !important;
}

/* Íconos + texto alineados horizontalmente */
footer .contact-item,
footer .footer-contact-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  font-size: 17px !important;
  color: white !important;
}

/* Íconos más grandes */
footer .contact-item i,
footer .footer-contact-item i {
  font-size: 22px !important;
  color: white !important;
  vertical-align: middle !important;
}

/* Texto legal al pie */
footer .footer-legal,
footer .legal-text {
  font-size: 15px !important;
  color: white !important;
  text-align: center !important;
  margin-top: 20px !important;
}/* ==== ESTILOS DEL PIE DE PÁGINA ==== */
footer {
  background-color: #18A396 !important; /* color institucional */
  color: #fff !important;
  text-align: center;
  padding: 40px 20px !important;
  font-family: "Poppins", sans-serif;
}

/* Contenedor general del footer */
footer .footer-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

/* Estilo del texto (correo y teléfono/whatsapp) */
footer .footer-info p {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 500;
}

/* Íconos de redes y contacto */
footer .footer-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  margin-top: 15px;
}

footer .footer-icons a {
  color: #fff;
  font-size: 28px; /* tamaño más grande */
  transition: color 0.3s ease, transform 0.3s ease;
}

footer .footer-icons a:hover {
  color: #e8e8e8;
  transform: scale(1.1);
}

/* Línea inferior (copyright) */
footer .footer-bottom {
  margin-top: 25px;
  font-size: 0.95rem;
  opacity: 0.9;
}

/* Ajustes responsive */
@media (max-width: 600px) {
  footer .footer-icons a {
    font-size: 24px;
  }
  footer .footer-info p {
    font-size: 1rem;
  }
}/* ==== FOOTER FAMILY HELP ==== */
footer, .footer, #footer {
  background-color: #18A396 !important;
  color: white !important;
  font-family: "Poppins", sans-serif !important;
  padding: 15px 0 !important;
}

/* Ajustar altura general */
footer .container, 
.footer .container, 
#footer .container {
  max-width: 1100px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: center;
}

/* Logo */
footer img, .footer img, #footer img {
  width: 70px !important;
  height: auto !important;
}

/* Menú de navegación */
footer ul, .footer ul, #footer ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

footer ul li, .footer ul li, #footer ul li {
  display: block !important;
  margin: 4px 0 !important;
}

footer ul li a, .footer ul li a, #footer ul li a {
  color: white !important;
  font-size: 14px !important;
  text-decoration: none !important;
}

footer ul li a:hover, .footer ul li a:hover, #footer ul li a:hover {
  text-decoration: underline !important;
}

/* Íconos del footer (Whatsapp, correo, redes, etc.) */
footer i, .footer i, #footer i {
  font-size: 20px !important;
  vertical-align: middle !important;
  margin-right: 6px !important;
}

/* Teléfono y correo */
footer a[href*="mailto"], footer a[href*="tel"],
.footer a[href*="mailto"], .footer a[href*="tel"],
#footer a[href*="mailto"], #footer a[href*="tel"] {
  color: white !important;
  font-size: 15px !important;
  text-decoration: none !important;
}

footer a[href*="mailto"]:hover, footer a[href*="tel"]:hover,
.footer a[href*="mailto"]:hover, .footer a[href*="tel"]:hover,
#footer a[href*="mailto"]:hover, #footer a[href*="tel"]:hover {
  text-decoration: underline !important;
}

/* Íconos sociales (Instagram, LinkedIn, etc.) */
footer a[href*="instagram"], footer a[href*="linkedin"],
.footer a[href*="instagram"], .footer a[href*="linkedin"],
#footer a[href*="instagram"], #footer a[href*="linkedin"] {
  font-size: 24px !important;
  margin-left: 12px !important;
  color: white !important;
  transition: transform 0.3s ease !important;
}

footer a[href*="instagram"]:hover, footer a[href*="linkedin"]:hover,
.footer a[href*="instagram"]:hover, .footer a[href*="linkedin"]:hover,
#footer a[href*="instagram"]:hover, #footer a[href*="linkedin"]:hover {
  transform: scale(1.2) !important;
}

/* Texto de copyright */
footer p, .footer p, #footer p {
  font-size: 13px !important;
  margin-top: 10px !important;
  opacity: 0.9 !important;
}

/* Responsive */
@media (max-width: 900px) {
  footer .container, .footer .container, #footer .container {
    flex-direction: column !important;
    text-align: center !important;
  }

  footer img, .footer img, #footer img {
    margin-bottom: 10px !important;
  }

  footer ul, .footer ul, #footer ul {
    margin-bottom: 10px !important;
  }
}
/* Insertar ícono de Instagram en el encabezado (solo visual) */

.header-contact-icons::after,
.contact-icons::after {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-left: 12px;
    background-image: url("https://cdn-icons-png.flaticon.com/512/2111/2111463.png");
    background-size: cover;
    background-repeat: no-repeat;
    vertical-align: middle;
}
/* =============================
   Forzar ícono de Instagram en encabezado
   ============================= */

/* 1) Selecciona cualquier contenedor que tenga íconos (correo o WhatsApp) */
header [class*="icon"],
header [class*="contact"],
header [class*="social"],
header [class*="actions"],
header [class*="user"],
header .component-area {
    position: relative;
}

/* 2) Insertamos el ícono */
header [class*="icon"]::after,
header [class*="contact"]::after,
header [class*="social"]::after,
header [class*="actions"]::after,
header .component-area::after {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-left: 12px;

    background-image: url("https://cdn-icons-png.flaticon.com/512/2111/2111463.png");
    background-size: cover;
    background-repeat: no-repeat;
    vertical-align: middle;

    /* Para que no se pegue arriba/abajo */
    position: relative;
    top: 2px;
}
/* Alinea los íconos del header */
.ss-contact {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Inserta el ícono de Instagram como pseudo-elemento */
.ss-contact::after {
  content: "\f16d"; /* Unicode del logo Instagram */
  font-family: "Font Awesome 5 Brands"; /* Ya está activo en tu sitio */
  font-size: 32px;
  color: #18a396; /* mismo color que los otros íconos */
  margin-left: 10px;
  cursor: pointer;
}.ss-contact {
  display: flex;
  align-items: center;
  gap: 10px;
}