/* Íconos sociales solo para el header */
.header-social-icon {
  font-size: 1.2rem;
  color: #bbb;
  transition: transform 0.2s, color 0.2s;
}
.footer-social-link:hover .header-social-icon {
  color: var(--color-naranja) !important;
  transform: scale(1.2);
}
/* Efecto hover para íconos de redes sociales en el footer */
.footer-social-icon:hover {
  color: var(--color-naranja) !important;
  transform: scale(1.15);
  transition: all 0.2s;
}

.footer-social-icon {
  font-size: 1.4rem;
  color: #bbb;
  transition: transform 0.2s, color 0.2s;
}
.footer-social-link:hover .footer-social-icon {
  color: var(--color-naranja) !important;
  transform: scale(1.3);
}

.footer-portfolio img {
  filter: grayscale(100%) brightness(1.2);
  opacity: 0.85;
  transition: filter 0.2s, opacity 0.2s, transform 0.2s;
  margin: 0 10px;
}
.footer-portfolio img:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.08);
}

.footer-bottom {
  border-top: 1px solid #333;
}
/* Efecto hover para el botón Registrar */
.btn-registrar:hover {
  color: var(--color-naranja) !important;
  transform: scale(1.08);
  background: #fff !important;
  transition: all 0.2s;
}
/* Botón con borde naranja */
.btn-outline-naranja {
  border: 2px solid var(--color-naranja) !important;
  background: transparent !important;
  color: var(--color-naranja) !important;
}
.btn-outline-naranja:hover {
  background: var(--color-naranja) !important;
  color: #fff !important;
}

/* Paleta de colores propuesta */

:root {
  --color-rojo-oscuro: #A94442;
  --color-rojo: #C0392B;
  --color-rojo-suave: #C97C7C;
  --color-marron: #A0522D;
  --color-naranja: #FFB347;
  --color-amarillo: #F7D358;
  --color-verde-oscuro: #7D8C7C;
  --color-verde: #A3B18A;
  --color-beige: #D6CEAA;
}

.bg-rojo-oscuro { background-color: var(--color-rojo-oscuro) !important; }
.bg-rojo { background-color: var(--color-rojo) !important; }
.bg-rojo-suave { background-color: var(--color-rojo-suave) !important; }
.bg-marron { background-color: var(--color-marron) !important; }
.bg-naranja { background-color: var(--color-naranja) !important; }
.bg-amarillo { background-color: var(--color-amarillo) !important; }
.bg-verde-oscuro { background-color: var(--color-verde-oscuro) !important; }
.bg-verde { background-color: var(--color-verde) !important; }
.bg-beige { background-color: var(--color-beige) !important; }

.text-rojo-oscuro { color: var(--color-rojo-oscuro) !important; }
.text-rojo { color: var(--color-rojo) !important; }
.text-rojo-suave { color: var(--color-rojo-suave) !important; }
.text-marron { color: var(--color-marron) !important; }
.text-naranja { color: var(--color-naranja) !important; }
.text-amarillo { color: var(--color-amarillo) !important; }
.text-verde-oscuro { color: var(--color-verde-oscuro) !important; }
.text-verde { color: var(--color-verde) !important; }
.text-beige { color: var(--color-beige) !important; }

/* Puedes usar estas clases en cualquier elemento Bootstrap para adaptar el diseño */

/* Solución para solapamiento de barra superior y navbar sticky */

/* Patrocinadores: estilos de botones y tarjetas */
.card.h-100 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.card-body.text-center {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  justify-content: space-between;
}
.select-paquete {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  transition: background 0.2s, color 0.2s;
}
.select-paquete .material-icons {
  font-size: 1.3em;
  color: #a0522d;
  vertical-align: middle;
  transition: color 0.2s;
}
.select-paquete.selected {
  background: #a0522d !important;
  color: #fff !important;
  border-color: #a0522d !important;
}
.select-paquete.selected .material-icons {
  color: #fff;
}
.btn-registrar-pagar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.btn-registrar-pagar .material-icons {
  font-size: 1.3em;
  color: #a0522d;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 768px) {

}

body {
  margin-top: 0px !important;
}
@media (max-width: 768px) {
  body {
    margin-top: 0 !important;
  }
}