:root {
  /* --special: #D5006D; */
  /* Rosa fuerte */
  /* --special-50: #FF4D94; */
  /* Rosa medio */
  /* --special-30: #FFB2D1; */
  /* Rosa claro */
  /* --special-light: #FFF1F3; */
  /* Rosa muy claro */
  /* --special-dark: #A0004D; */
  /* Rosa oscuro */
  /* --special-rgba: rgba(213, 0, 109, 0.5); */
  /* Rosa fuerte con opacidad */
  /* --special-overlay: rgba(213, 0, 109, 0.2); */
  /* Rosa medio con opacidad */

  --special: #F37335;
  --special-50: #f38650;
  --special-30: #fdb38e;
  --special-light: #FFF9F1;
  --special-dark: #fa5d0e;
  --special-rgba: rgba(243, 115, 53, 0.5);
  --special-overlay: rgba(243, 115, 53, 0.3);

  --secondary: #8cafff;
  --dark: #34495E;
  --dark-special: #656565;
  --dark-50: rgba(52, 73, 94, .5);
  --gray-special: #f2f2f2;
  --white-special: #fff;
  --success: #58D68D;
  --error: #E74C3C;
  --success2: #28B463;
  --fsize-xl: calc(3rem + .9vw);
  --fsize-lg: calc(1.4rem + 1vw);
  --fsize-md: calc(1.3rem + 1vw);
  --fsize-sm: calc(1rem + 1vw);
  --fsize-xs: calc(.7rem + 1vw);
  --fsize-xxs: calc(.7rem + .7vw);
  --fsize-xs2: 1.2rem;
  --fsize-xxs2: 1rem;
}

body {
  font-family: 'Poppins', sans-serif;
  color: var(--dark) !important;
}

/* Color dinámico para svg */
.color-special-svg svg path {
  fill: var(--special);
  /* Aplicamos la variable al 'fill' del path */
}

.color-special {
  color: var(--special) !important;
}

.color-special-50 {
  color: var(--special-50) !important;
}

.color-special-30 {
  color: var(--special-30) !important;
}

.color-special-light {
  color: var(--special-light) !important;
}

.color-secondary {
  color: var(--secondary) !important;
}

.color-white {
  color: var(--white-special) !important;
}

.color-dark {
  color: var(--dark) !important;
}

.color-dark-50 {
  color: var(--dark-50) !important;
}

.bg-special {
  background-color: var(--special) !important;
}

.bg-special-50 {
  background-color: var(--special-50) !important;
}

.bg-special-light {
  background-color: var(--special-light) !important;
}

.bg-white {
  background-color: var(--white-special);
}

/* Navegación */
.no-fixed {
  max-width: 40px;
}

/* Botones */
.btn-special {
  background-color: var(--special);
  color: var(--white-special);
  min-height: 3rem;
  font-size: 1.1rem;
}

.btn-special-light {
  background-color: var(--special-50);
  color: var(--white-special);
  min-height: 3rem;
  font-size: 1.1rem;
}

.btn-special-sm {
  background-color: var(--special);
  color: var(--white-special);
  font-size: 1.1rem;
}

.btn-special-light-sm {
  background-color: var(--special-50);
  color: var(--white-special);
  font-size: 1.1rem;
}

.btn-special:hover,
.btn-special-sm:hover {
  background-color: var(--special-50);
  color: var(--white-special);
}

.btn-special-light:hover,
.btn-special-light-sm:hover {
  background-color: var(--special-light);
  color: var(--special);
}

.btn-special:focus,
.btn-special-sm:focus,
.btn-special-light:focus,
.btn-special-light-sm:focus {
  box-shadow: none;
}

/* inputs select textarea radio button */
.home-input,
.home-select,
.home-input:focus {
  color: var(--dark-special);
  border: none;
  font-weight: 600;
  min-height: 3rem;
  line-height: 1;
  padding-bottom: 2px;
  font-size: 1.1rem;
}

.home-input,
.home-select {
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .2);
}

/* Contáctanos */
.foot {
  text-align: center;
}

.foot-img {
  display: flex;
  justify-content: center;
}

.foot-img div {
  display: flex;
  justify-content: space-around;
}

.foot div {
  margin-bottom: 1.5rem;
}

.foot div span {
  font-size: 1.2rem;
  font-weight: 500;
}

.foot div span>i {
  font-size: 1.8rem;
  padding-right: 5%;
}

.foot-links {
  color: var(--special);
  font-size: var(--fsize-xxs2);
  /* line-height: 15px; */
  display: block;
}

.foot-links:hover {
  color: var(--special-30);
}

.foot-copyright {
  color: var(--special-30);
  text-align: center;
  padding: 1rem 0;
  width: 100%;
  background-color: var(--special-light);
}

.foot-redes {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.foot-redes img {
  height: 35px;
}

/* Pagination */
.page-link,
.page-link:hover {
  color: var(--special);
}

.page-link:focus {
  box-shadow: 0 0 0 0.2rem var(--special-rgba);
}

.page-item.active .page-link {
  background-color: var(--special-50);
  border-color: var(--special);
}

/* General */
.img-shadow {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

.elipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
}

.elipsis-mail {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

textarea {
  field-sizing: content;
}