/* MBR Instagram Feed */
.mbr-instagram-feed {
  position: relative;
}

.inst {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

@media (max-width: 768px) {
  .inst {
    width: 100%;
  }
}

.inst__login-block p {
  text-align: center;
}

.inst__title {
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

.inst__content {
  margin-bottom: 10px;
}

.inst__more {
  margin-top: 20px;
}

.inst__login-button {
  transition: all 0.2s linear;
  padding: 0 10px 0 80px;
  display: block;
  position: relative;
  text-decoration: none;
  color: white;
  background: #cc0055;
  font-size: 18px;
  line-height: 60px;
  height: 60px;
  border-radius: 2px;
  width: 400px;
  margin: 0 auto;
}

.inst__login-button:hover,
.inst__login-button:focus {
  background: #990040;
  text-decoration: none;
  color: white;
}

.inst__login-button:before {
  content: "\f16d";
  display: block;
  position: absolute;
  font-family: "FontAwesome";
  width: 60px;
  height: 60px;
  line-height: 60px;
  top: 0;
  left: 0;
  text-align: center;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px 0 0 2px;
}

.inst__loader-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0.8;
  top: 0;
  left: 0;
}

.inst__loader {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  position: relative;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}

.inst__loader span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #ff4488;
  margin: 35px 5px;
  opacity: 0;
}

.inst__loader span:nth-child(1) {
  animation: opacitychange 1s ease-in-out infinite;
}

.inst__loader span:nth-child(2) {
  animation: opacitychange 1s ease-in-out 0.33s infinite;
}

.inst__loader span:nth-child(3) {
  animation: opacitychange 1s ease-in-out 0.66s infinite;
}

@keyframes opacitychange {
  0%,
  100% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
}

.inst__account {
  margin-bottom: 20px;
}

.inst__avatar {
  float: left;
  margin-right: -50px;
  height: 50px;
}

.inst__avatar img {
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.0975);
}

.inst__link {
  float: right;
  padding: 12px 10px 10px 60px;
  width: 100%;
  overflow-x: hidden;
}

.inst__link a {
  text-decoration: none;
  height: 50px;
  line-height: 16px;
}

.inst__images .slick-frame {
  visibility: hidden;
}

.inst__images .slick-frame.slick-initialized {
  visibility: visible;
}

.inst__images .slick-arrow {
  text-indent: -9999px;
  position: absolute;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin: 0;
  padding: 0;
  outline: none !important;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  border: none;
  background: transparent;
}

.inst__images .slick-arrow:before {
  transition: all 0.2s linear;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: "MobiriseIcons" !important;
  text-indent: 0;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0;
  background: rgba(0, 0, 0, 0.5);
}

.inst__images .slick-arrow:hover:before {
  opacity: 1 !important;
  background: #1b1b1b !important;
}

.inst__images .slick-arrow.slick-prev {
  left: 15px;
}

.inst__images .slick-arrow.slick-prev:before {
  content: "\e943";
}

.inst__images .slick-arrow.slick-next {
  right: 15px;
}

.inst__images .slick-arrow.slick-next:before {
  content: "\e966";
}

.inst__images:hover .slick-arrow:before {
  opacity: 0.5;
}

.inst__error {
  padding: 10px;
  background: pink;
  border: 1px solid deeppink;
  color: red;
  border-radius: 3px;
}

.inst-card {
  position: relative;
}

.inst-card:hover .inst-card__info {
  opacity: 1;
}

.inst-card__link {
  display: block;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
}

.inst-card__info {
  transition: opacity 0.2s linear;
  opacity: 0;
  display: block;
  position: relative;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.inst-card__info-inner {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: white;
  font-size: 16px;
}

.inst-card__likes span {
  font-size: 20px;
  color: lightcoral;
}

.inst-card__comments span {
  font-size: 20px;
  color: lightskyblue;
}
/* =================================================================
   1. Estilos Base para Botones Sociales (.btn-social)
   ================================================================= */
.btn-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Tamaño del área del botón */
    width: 50px; 
    height: 50px;
    border-radius: 50%;
    text-decoration: none;
    /* Mantenemos la transición, pero solo afectará al color */
    transition: fill 0.3s ease; 
    background-color: transparent;
    cursor: pointer;
}

/* =================================================================
   2. Estilos del SVG y Color por Defecto (Gris)
   ================================================================= */

/* Tamaño del ícono */
.btn-social svg {
    width: 31px;
    height: 31px;
    transition: fill 0.3s ease; /* Transición solo para el color */
}

.btn-social svg,
.btn-social svg * {
    box-sizing: content-box !important;
}

/* COLOR GRIS POR DEFECTO PARA TODOS LOS ÍCONOS */
/* Máxima especificidad para asegurar el color gris inicial */
#social-buttons1-m .btn-social svg path {
    fill: #A9A9A9 !important; 
}


/* =================================================================
   3. Efectos de Interacción (Hover) - SOLO CAMBIO DE COLOR
   ================================================================= */

/* Eliminamos transform y box-shadow para un efecto más sutil */
.btn-social:hover {
    /* No hay cambios visuales en el contenedor, solo en el ícono */
}


/* APLICACIÓN DE COLOR SOCIAL al hacer HOVER (sobrescribe el gris) */

/* WhatsApp HOVER */
#social-buttons1-m .btn-social.whatsapp:hover svg path {
    fill: #25D366 !important;
}

/* Facebook HOVER */
#social-buttons1-m .btn-social.facebook:hover svg path {
    fill: #3b5998 !important;
}

/* Twitter HOVER */
#social-buttons1-m .btn-social.twitter:hover svg path {
    fill: #1da1f2 !important;
}

/* Instagram HOVER (listo por si lo añades) */
#social-buttons1-m .btn-social.instagram:hover svg path {
    fill: #e4405f !important;
}
/* Aseguramos que el título siempre sea blanco y legible */
h4.card-title {
    /* 1. Color de Texto: Blanco o muy claro */
    color: #FFFFFF !important;

    /* 2. Sombra de Texto para Contraste */
    /* Crea un halo sutil negro y suave alrededor del texto */
    text-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.9),  /* Sombra más oscura y definida */
        -1px -1px 2px rgba(0, 0, 0, 0.9); /* Sombra para todos los lados */

    /* * O si prefieres una sombra más simple (similar a lo que ya propuse),
     * pero igual de efectiva para el contraste:
     * text-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
     */
}

/* Si tu tema usa el color de texto en la clase display-5, puedes hacer la regla más específica: */
.card-box .mbr-fonts-style.display-5 {
    color: #FFFFFF !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9), -1px -1px 2px rgba(0, 0, 0, 0.9);
}
/* ==========================================================
   Estilos de Contraste para el Botón (btn-white-outline)
   ========================================================== */

/* Asegura el color blanco para el texto y el borde */
.btn-white-outline {
    /* 1. Color del texto: blanco */
    color: #FFFFFF !important;

    /* 2. Borde: blanco, para que sea visible en fondos oscuros */
    border-color: #FFFFFF !important;

    /* 3. Sombra de texto para asegurar la legibilidad del texto sobre el fondo */
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8) !important;

    /* 4. Sombra de la caja (botón) para que "flote" */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}

/* Opcional: Asegurar que el hover y el focus también mantengan el contraste */
.btn-white-outline:hover,
.btn-white-outline:focus {
    /* Si el hover cambia a un color de fondo, aseguramos que el texto siga siendo claro */
    color: #FFFFFF !important;
    /* Si el hover tiene un fondo, también puedes ajustar la sombra para que se vea mejor */
    text-shadow: none !important;
}
/* ==========================================================
   Botón de Flecha de Scroll (100% libre de Mobirise)
   ========================================================== */

/* 1. Estilos del Contenedor del Círculo (.scroll-arrow-button) */
.scroll-arrow-button {
    /* Posicionamiento y capa (z-index) para que esté visible */
    position: absolute; 
    bottom: 20px;       
    left: 50%;          
    transform: translateX(-50%); 
    z-index: 20;        

    /* Estilos del Círculo Visible */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px; 
    height: 60px;
    border-radius: 50%; 
    background-color: rgba(255, 255, 255, 0.2); 
    border: 1px solid rgba(255, 255, 255, 0.4); 
    cursor: pointer;
    transition: all 0.3s ease; 
}

/* 2. Estilos del Enlace y la Flecha SVG */
.scroll-arrow-button a {
    display: flex; 
    align-items: center;
    justify-content: center;
    width: 100%; 
    height: 100%;
    text-decoration: none; 
    color: #FFFFFF; /* Color de la flecha: blanco */
}

/* 3. Estilos del SVG (la Flecha) */
.scroll-arrow-button a svg {
    width: 32px; 
    height: 32px;
    stroke: currentColor; 
    fill: none;           
    transition: transform 0.3s ease; 
}

/* 4. Efectos Hover */
.scroll-arrow-button:hover {
    background-color: rgba(255, 255, 255, 0.4); 
    border-color: rgba(255, 255, 255, 0.8);   
}

.scroll-arrow-button:hover a svg {
    transform: translateY(5px); 
}

/* 5. Necesario para el scroll suave */
html {
    scroll-behavior: smooth;
}