@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@100..900&display=swap");
/*
$font-size-xs:14px;
$font-size-s:16px;
$font-size-m:20px;
$font-size-l:32px;
$font-size-xl:40px;
$font-size-xxl:48px;
$font-size-xxxl:54px;
*/
.ccolor-primary {
  color: #E7A930;
}

.ccolor-white {
  color: #fdfdfd;
}

.ccolor-secondary {
  color: #8A671A;
}

.cfont-xxs {
  font-size: 0.75rem;
}

body {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: #1f1f29;
  background-color: #fdfdfd;
}

/*
$font-size-xs:14px;
$font-size-s:16px;
$font-size-m:20px;
$font-size-l:32px;
$font-size-xl:40px;
$font-size-xxl:48px;
$font-size-xxxl:54px;
*/
.ccolor-primary {
  color: #E7A930 !important;
}

.ccolor-black {
  color: #1f1f29 !important;
}

.cfont-xxs {
  font-size: 0.75rem;
}

h1 {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.5; /* 150% de la altura de línea */
  color: #1f1f29; /* Color del texto */
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra con 10% de opacidad */
  -webkit-margin-before: 0.67em;
          margin-block-start: 0.67em;
  -webkit-margin-after: 0.67em;
          margin-block-end: 0.67em;
  -webkit-margin-start: 0px;
          margin-inline-start: 0px;
  -webkit-margin-end: 0px;
          margin-inline-end: 0px;
}

h2 {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.5; /* 150% de la altura de línea */
  color: #1f1f29; /* Color del texto */
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra con 10% de opacidad */
  -webkit-margin-before: 0.67em;
          margin-block-start: 0.67em;
  -webkit-margin-after: 0.67em;
          margin-block-end: 0.67em;
  -webkit-margin-start: 0px;
          margin-inline-start: 0px;
  -webkit-margin-end: 0px;
          margin-inline-end: 0px;
}

h3 {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2; /* 120% de la altura de línea */
  text-transform: uppercase;
  -webkit-margin-before: 0.67em;
          margin-block-start: 0.67em;
  -webkit-margin-after: 0.67em;
          margin-block-end: 0.67em;
  -webkit-margin-start: 0px;
          margin-inline-start: 0px;
  -webkit-margin-end: 0px;
          margin-inline-end: 0px;
}
h3 span {
  font-size: 16px;
  font-weight: 400;
  display: block;
  text-transform: none;
}

h4 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2; /* 120% de la altura de línea */
  -webkit-margin-before: 0.67em;
          margin-block-start: 0.67em;
  -webkit-margin-after: 0.67em;
          margin-block-end: 0.67em;
  -webkit-margin-start: 0px;
          margin-inline-start: 0px;
  -webkit-margin-end: 0px;
          margin-inline-end: 0px;
}
h4 span {
  font-size: 0.875rem;
  font-weight: 400;
  display: block;
}

h5 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2; /* 120% de la altura de línea */
  -webkit-margin-before: 0.67em;
          margin-block-start: 0.67em;
  -webkit-margin-after: 0.67em;
          margin-block-end: 0.67em;
  -webkit-margin-start: 0px;
          margin-inline-start: 0px;
  -webkit-margin-end: 0px;
          margin-inline-end: 0px;
}
h5 span {
  font-size: 0.75rem;
  font-weight: 300;
  display: block;
}

a {
  text-decoration: none;
}

p {
  line-height: 1.4;
}

.ligas-primary {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: #E7A930;
}

.custom-btn-primary {
  background-color: #E7A930;
  border-color: #E7A930;
  border-radius: 24px;
  padding-left: 24px;
  padding-right: 24px;
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.1em;
}
.custom-btn-primary:hover {
  background-color: #8A671A;
  border-color: #8A671A;
}
.custom-btn-primary:active {
  background-color: #cc8f18 !important; /* Ajusta el color al hacer clic */
  border-color: #cc8f18 !important;
  box-shadow: none; /* Elimina la sombra cuando se hace clic */
}
.custom-btn-primary:focus {
  background-color: #8A671A;
  border-color: #8A671A;
  box-shadow: 0 0 0 0.1rem rgba(231, 169, 48, 0.25) !important; /* Añadir foco con sombra */
}

.custom-btn-secondary {
  background-color: #4498C9;
  border-color: #4498C9;
  border-radius: 24px;
  padding-left: 24px;
  padding-right: 24px;
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.1em;
}
.custom-btn-secondary:hover {
  background-color: #317da9 !important; /* Ajusta el color al hacer clic */
  border-color: #317da9 !important;
}
.custom-btn-secondary:active {
  background-color: #317da9 !important; /* Ajusta el color al hacer clic */
  border-color: #317da9 !important;
  box-shadow: none; /* Elimina la sombra cuando se hace clic */
}
.custom-btn-secondary:focus {
  background-color: #317da9 !important; /* Ajusta el color al hacer clic */
  border-color: #317da9 !important;
  box-shadow: 0 0 0 0.1rem rgba(68, 152, 201, 0.25) !important; /* Añadir foco con sombra */
}

.cbtn-primary {
  background-color: #E7A930;
  border-color: #E7A930;
  border-radius: 24px;
  padding-left: 24px;
  padding-right: 24px;
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #fdfdfd;
  letter-spacing: 0.1em;
}
.cbtn-primary:hover {
  background-color: #8A671A;
  border-color: #8A671A;
  color: #fdfdfd;
}
.cbtn-primary:active {
  background-color: #cc8f18 !important; /* Ajusta el color al hacer clic */
  border-color: #cc8f18 !important;
  box-shadow: none; /* Elimina la sombra cuando se hace clic */
}
.cbtn-primary:focus {
  background-color: #8A671A;
  border-color: #8A671A;
  box-shadow: 0 0 0 0.1rem rgba(231, 169, 48, 0.25) !important; /* Añadir foco con sombra */
}

.cbtn-secondary {
  background-color: #4498C9;
  border-color: #4498C9;
  border-radius: 24px;
  padding-left: 24px;
  padding-right: 24px;
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: #fdfdfd;
}
.cbtn-secondary:hover {
  background-color: #317da9 !important; /* Ajusta el color al hacer clic */
  border-color: #317da9 !important;
  color: #fdfdfd;
}
.cbtn-secondary:active {
  background-color: #317da9 !important; /* Ajusta el color al hacer clic */
  border-color: #317da9 !important;
  color: #fdfdfd;
  box-shadow: none; /* Elimina la sombra cuando se hace clic */
}
.cbtn-secondary:focus {
  background-color: #317da9 !important; /* Ajusta el color al hacer clic */
  border-color: #317da9 !important;
  color: #fdfdfd;
  box-shadow: 0 0 0 0.1rem rgba(68, 152, 201, 0.25) !important; /* Añadir foco con sombra */
}

.form-control {
  font-size: 0.875rem;
}

.cbtn-ghost {
  background-color: #fdfdfd;
  border-color: #4498C9;
  color: #4498C9;
  border-radius: 24px;
  padding-left: 24px;
  padding-right: 24px;
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.1em;
}
.cbtn-ghost:hover {
  background-color: #c7c7c7 !important; /* Ajusta el color al hacer clic */
  border-color: #317da9 !important;
}
.cbtn-ghost:active {
  background-color: #c7c7c7 !important; /* Ajusta el color al hacer clic */
  border-color: #317da9 !important;
  box-shadow: none; /* Elimina la sombra cuando se hace clic */
}
.cbtn-ghost:focus {
  background-color: #c7c7c7 !important; /* Ajusta el color al hacer clic */
  border-color: #317da9 !important;
  box-shadow: 0 0 0 0.1rem rgba(68, 152, 201, 0.25) !important; /* Añadir foco con sombra */
}

.cbtn-error {
  background-color: #C94A53;
  border-color: #C94A53;
  color: #fdfdfd;
  border-radius: 24px;
  padding-left: 24px;
  padding-right: 24px;
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.1em;
}
.cbtn-error:hover {
  background-color: #ad333c !important; /* Ajusta el color al hacer clic */
  border-color: #ad333c !important;
}
.cbtn-error:active {
  background-color: #ad333c !important; /* Ajusta el color al hacer clic */
  border-color: #ad333c !important;
  box-shadow: none; /* Elimina la sombra cuando se hace clic */
}
.cbtn-error:focus {
  background-color: #ad333c !important; /* Ajusta el color al hacer clic */
  border-color: #ad333c !important;
  box-shadow: 0 0 0 0.1rem rgba(201, 74, 83, 0.25) !important; /* Añadir foco con sombra */
}

.cbtn-danger {
  background-color: #fdfdfd;
  border-color: #C94A53;
  color: #C94A53;
  border-radius: 24px;
  padding-left: 24px;
  padding-right: 24px;
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.1em;
}
.cbtn-danger:hover {
  background-color: #ad333c !important; /* Ajusta el color al hacer clic */
  border-color: #ad333c !important;
  color: #fdfdfd;
}
.cbtn-danger:active {
  background-color: #ad333c !important; /* Ajusta el color al hacer clic */
  border-color: #ad333c !important;
  color: #fdfdfd;
  box-shadow: none; /* Elimina la sombra cuando se hace clic */
}
.cbtn-danger:focus {
  background-color: #ad333c !important; /* Ajusta el color al hacer clic */
  border-color: #ad333c !important;
  color: #fdfdfd;
  box-shadow: 0 0 0 0.1rem rgba(201, 74, 83, 0.25) !important; /* Añadir foco con sombra */
}

.cCard {
  background-color: black;
  border-radius: 20px;
  overflow: hidden;
}
.cCard__header {
  height: 150px;
}
.cCard__header1 {
  background-image: url("../img/corte-cabello.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
}
.cCard__header2 {
  background-image: url("../img/ritual-barba.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
}
.cCard__header3 {
  background-image: url("../img/servicio-facial.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
}
.cCard__title {
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: #fdfdfd;
}
.cCard__ico {
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: 0.1em;
  color: #fdfdfd;
}
.cCard__text {
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  color: #fdfdfd;
}
.cCard__text li {
  font-size: 0.75rem;
}
.cCard__border {
  border-color: #8A671A;
}

.custom-navbar {
  padding: 20px 0 20px 0;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.1em;
}
.custom-navbar .navbar-toggler {
  border-color: transparent;
}
.custom-navbar .navbar-toggler:active, .custom-navbar .navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}

.navbar__logo {
  height: 100px;
  width: 100px;
}
.navbar__item {
  padding: 0px 10px 0 10px;
}
.navbar__liga {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.1em;
  opacity: 0.9;
  transition: 0.3s all ease;
  position: relative;
}
@media (min-width: 768px) {
  .navbar__liga:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    background: #E7A930;
    height: 3px;
    opacity: 1;
    visibility: visible;
    width: 0;
    transition: 0.15s all ease-out;
  }
}
.navbar__liga:hover {
  opacity: 1;
}
.navbar__liga:hover:before {
  width: calc(100% - 20px);
}

.profile__liga {
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: #8A671A;
}

.heroHome {
  background-image: url("../img/fondo_Hero_Enkis.png");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: top right;
}
@media (max-width: 768px) {
  .heroHome { /* Puedes ajustar el ancho según lo que consideres "móvil" */
    background-position: top left; /* En móviles, la imagen estará en la parte superior centrada */
    background-size: 600px;
  }
}
.heroHome__direcciones {
  background-image: url("../img/fondo_BN.png");
  background-repeat: repeat-y;
  background-size: auto;
  background-position: top left;
}
.heroHome__sucursales {
  background-color: #1f1f29;
  color: #fdfdfd;
}
.heroHome__texto {
  color: #fdfdfd;
  font-weight: 400;
  font-size: 0.875rem;
}

.cFooter {
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  background-color: #1f1f29;
  color: #fdfdfd;
}
.cFooter__texto {
  font-size: 0.75rem;
}
.cFooter__logos {
  height: 60px;
  margin: 10px;
}
.cFooter__link {
  color: #fdfdfd;
}
.cFooter__ico {
  font-size: 20px;
  color: #fdfdfd;
}

.homeServicios {
  background-color: #1f1f29;
  color: #fdfdfd;
}

.homeSala {
  background-color: #1f1f29;
  color: #fdfdfd;
}
.homeSala__img {
  height: 300px;
  width: 300px;
  border-radius: 16px;
}

.homeEspera {
  background-color: #fdfdfd;
  color: #1f1f29;
}

.serviciosServicios {
  background-color: #1f1f29;
  color: #fdfdfd;
}
@media (min-width: 768px) {
  .serviciosServicios__cards {
    transform: translateY(-80px);
  }
}

.serviciosDetalle {
  background-color: #1f1f29;
  color: #fdfdfd;
}
.serviciosDetalle__servicios {
  font-size: 16px;
  font-weight: 600;
}
.serviciosDetalle__servicios span {
  font-size: 0.875rem;
  font-weight: 300;
}

l + .sucursalesHero__titulo span {
  display: block;
}

.sucursalesSucursales {
  background-color: #1f1f29;
  color: #fdfdfd;
}
.sucursalesSucursales__card {
  border-radius: 20px;
  overflow: hidden;
  background-color: #444453;
  color: #fdfdfd;
  border-color: #8A671A;
}

.sucCard__number {
  font-size: 3.375rem;
  font-weight: 600;
  color: #E7A930;
}
.sucCard__texto {
  font-size: 16px;
  font-weight: 500;
}
.sucCard__texto--subtexto {
  font-size: 0.75rem;
  font-weight: 300;
  display: block;
}

.sucursalesCocteleria {
  background-color: #fdfdfd;
  color: #1f1f29;
}
.sucursalesCocteleria__cocteles {
  font-weight: 600;
}
.sucursalesCocteleria__cocteles span {
  font-weight: 400;
  font-size: 0.875rem;
}
.sucursalesCocteleria__vinos p {
  font-size: 1.25rem;
  font-weight: 600;
}
.sucursalesCocteleria__vinos ul li {
  font-size: 0.875rem;
  font-weight: 300;
}

.cCard-perfil {
  background-color: #fdfdfd;
  border-color: #E7A930;
}
.cCard-perfil__number {
  font-size: 3.375rem;
  font-weight: 600;
  color: #E7A930;
}
.cCard-perfil__texto {
  font-size: 16px;
  font-weight: 500;
}
.cCard-perfil__texto--subtexto {
  font-size: 0.75rem;
  font-weight: 300;
  display: block;
}

.cCard-agenda {
  background-color: #fdfdfd;
  border-color: #E7A930;
}
.cCard-agenda__number {
  font-size: 3.375rem;
  font-weight: 600;
  color: #E7A930;
}
.cCard-agenda__text {
  font-size: 0.75rem;
  font-weight: 500;
}
.cCard-agenda__barberos {
  font-size: 0.75rem;
  font-weight: 300;
}
.cCard-agenda__texto--subtexto {
  font-size: 0.75rem;
  font-weight: 300;
  display: block;
}
.cCard-agenda__close {
  background-color: #fafafa;
  color: #c8c8c8;
  font-size: 0.75rem;
  font-weight: 400;
}

.agenda-button {
  background-color: #fdfdfd;
  border-color: #E7A930;
  color: #E7A930;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}
.agenda-button:hover {
  background-color: #cc8f18 !important; /* Ajusta el color al hacer clic */
  border-color: #cc8f18 !important;
  color: #fdfdfd;
}
.agenda-button:active {
  background-color: #cc8f18 !important; /* Ajusta el color al hacer clic */
  border-color: #cc8f18 !important;
  color: #fdfdfd;
  box-shadow: none; /* Elimina la sombra cuando se hace clic */
}
.agenda-button:focus {
  background-color: #cc8f18 !important; /* Ajusta el color al hacer clic */
  border-color: #cc8f18 !important;
  color: #fdfdfd;
  box-shadow: 0 0 0 0.1rem rgba(231, 169, 48, 0.25) !important; /* Añadir foco con sombra */
}

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}/*# sourceMappingURL=estilos.css.map */