/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

/* styles.css */
.image-zoom {
  overflow: hidden;
  position: relative;
}

.image-zoom img {
  transition: transform 0.3s ease;
}

.image-zoom:hover img {
  transform: scale(1.1);
}

.content-below-navbar {
  margin-top: 100px;
}

.clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* Número de líneas a mostrar */
  overflow: hidden;
  text-overflow: ellipsis;
}

.hover-zoom {
  transition: transform 0.3s ease-in-out;
}

.hover-zoom:hover {
  transform: scale(1.1);
}

.navbar {
  background-color: #410036;
}
.nav-title {
  color: #ffeaf1;
  text-decoration: none;
  font-size: 24px;
}

.misc-text {
  color: black;
}

.misc-text:hover {
  color: #ce7a97;
}

.social-icon {
  display: inline-block;
  width: 40px; /* Tamaño de impresión */
  height: 40px; /* Tamaño de impresión */
  background-image: url("/woman/images/social_icons.jpg");
  background-size: 279px auto; /* Tamaño original de los iconos en el sprite */
  background-repeat: no-repeat;
  border-radius: 50%;
}

.copy-icon {
  width: 40px; /* Establece el ancho igual al ancho de la imagen de fondo */
  height: 40px; /* Establece el alto igual al alto de la imagen de fondo */
  background-repeat: no-repeat;
}

.facebook-icon {
  background-position: -14px -15px;
}

.telegram-icon {
  background-position: -14.5px -67px;
}

.instagram-icon {
  background-position: -67px -15px; /* -14px (izquierda) - 75px (espacio entre iconos) */
}

.twitter-icon {
  background-position: -119.5px -15px; /* -14px - 2 * 75px */
}

.whatsapp-icon {
  background-position: -172px -15px; /* -14px - 3 * 75px */
}

.messenger-icon {
  background-position: -224.5px -15px; /* -14px - 4 * 75px */
}