:root {
  --primary: #f54e38;
  /*Ogre Odor*/
  --secondary: #e73922;
  /*Vermilion (Plochere) */
  /* bg-body-tertiary*/
}

body,
html {
  height: 100%;
  width: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
}

main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3 {
  font-family: "Playfair Display", serif;
  /*font-optical-sizing: auto;*/
}

p {
  font-size: 1em;
}

h1 {
  font-size: 2rem;
  line-height: 1.5em;
}

.h1 {
  font-size: 3.2em;
  font-weight: 600;
  /*line-height: 3.221em;
  outline-offset: 2px;*/
}

.h2 {
  font-size: 3em;
  font-weight: 500;
}

.sub-heading {
  font-size: 1.2em;
}

/* CSS adicional */
.icon-circle {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  padding: 0.9em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.icon-circle .bi {
  font-size: 0.9em;
}

.primary-circle {
  background: var(--primary);
  color: #fff;
}

.secondary-circle {
  background: white;
  color: var(--secondary);
}

.container-fluid {}

.btn-primary {
  background: var(--primary);
  border: none;
}

.fluffy {
  padding: 0.6em 0.7em;
  border-radius: 16px;
}

.fluffyless {
  padding: 0.8em;
  border-radius: 16px;
}

.btn-secondary {}

.hero {
  height: 100vh;
}

.presentation {
  width: 74%;
}

.pains {
  background: var(--primary);
  color: white;
  padding: 0;
}

.pain {
  /*background: var(--secondary);*/
}

.mySwiper.mySwiper {
  aspect-ratio: 16 / 9;
  /* Relación ancho:alto */
}

.swiper-container {
  display: flex;
  width: 94%;
  max-width: 1000px;
  height: 92vh;
  align-items: center;

}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  padding: 1.7em 1.3em;
  /*text-align: center;*/
  font-size: 1.1em;
  display: flex;
  flex-direction: column;
  /* Cambiado a columna para alinear los elementos verticalmente */
  width: 97%;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
  /* Animación para cambio de fondo */
}

.swiper-slide h2 {
  font-size: 2.2em;
  margin-bottom: 0.6em;
}

.swiper-slide .icon-circle {
  color: var(--secondary);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
}

/* Fondo negro solo para el elemento central */
.swiper-slide.center-slide {
  background-color: var(--secondary);
  border-radius: 25px;
  color: #fff;
  /* Opcional: cambiar el color del texto en el slide central */
}

/* Gradiente transparente para los elementos superior e inferior */
.swiper-slide.fade-gradient {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
  color: #000;
}

/* Estilos para alinear los botones de navegación juntos en una columna */
.swiper-button-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
}

.swiper-button-prev,
.swiper-button-next {
  transform: rotate(90deg);
  position: static;
  color: #fff;
  cursor: pointer;
}

/* Aumentar tamaño y espaciado de los bullets */
.swiper-pagination-bullet {
  width: 18px;
  /* Ancho de cada bullet */
  height: 18px;
  /* Alto de cada bullet */
  margin: 8px;
  /* Separación entre bullets */
}

/* Mejora de foco para accesibilidad */
.swiper-pagination-bullet:focus {
  outline: 2px solid #333;
  /* Añadir contorno visible en el foco */
}

.card {
  background: transparent !important;
  color: #fff;
  border: 0;
}

/* Oculta todos los elementos dentro de .card-body excepto los h3 */
.card-body>*:not(h2) {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Cuando el slide tiene la clase .center-slide, se muestran los elementos de .card-body */
.center-slide .card-body>* {
  visibility: visible;
  opacity: 1;
}

/* Icono de cerrar escondido por defecto */
.close-icon {
  display: none;
}

/* Mostrar icono de cerrar y ocultar el icono hamburguesa al abrir el menú */
.navbar-toggler:not(.collapsed) .default-icon {
  display: none;
}

.navbar-toggler:not(.collapsed) .close-icon {
  display: inline-block;
}

.navbar-brand {
  font-family: "Playfair Display", serif;
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #000;
}

.nav-link.active{
  font-weight: 700;
  color: var(--primary) !important;

}

a.btn-outline-light {
  color: #fff;
}

#about {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer {
  background: #1a1a1a;
}

@media (min-width:1024px) {
  .navbar-nav .nav-item {
    margin: 0 15px;
    /* Ajusta el valor según tus necesidades */
  }

  .pains {
    height: 95vh;
  }

  .presentation {
    padding: 0em 8em 0em 1em;
  }
}

@media screen and (max-width: 1380px) and (min-width: 810px) {

  .h1 {
    font-size: 2.5em;
    font-weight: 600;
    /*line-height: 3.221em;
    outline-offset: 2px;*/
  }
  
  .h2 {
    font-size: 2.43em;
    font-weight: 500;
  }
  
  .sub-heading {
    font-size: 1.12em;
  }

  .presentation {
    width: 74%;
  }

}

@media (max-width: 809px) {
  .h2 {
    font-size: 2.1em;
    font-weight: 600;
  }
  
  .presentation {
    min-height: 40vh;
    width: 90%;
    margin: 4em auto;

  }

  .swiper-container {
    width: 94%;
    max-height: 44vh;
  }

  .swiper-pagination-bullet-active-main {
    background-color: #fff !important; /* Cambia #ff5733 al color que desees */
}

  .swiper-button-container {
    display: none;
  }

  .navbar-custom {
    background-color: #fff;
    /* Café */
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
  }

  .navbar-nav {
    margin-top: 1.8em;
  }

  .nav-link {
    letter-spacing: 1px !important;
  
  }

  .navbar-nav .nav-item {
    border-bottom: 1px solid #c4c4c4;
    /* Ajusta el valor según tus necesidades */
  }

  .navbar-nav .nav-link {
    font-family: "Playfair Display", serif;
    font-weight: 500;
    font-size: 2.25rem;
    /* Aumentar tamaño de letra */
  }

  .navbar-toggler {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5em;
    width: 2.5em;
    border-radius: 50%;
  }

  a.btn-light {
    background: var(--primary);
    color: #fff;
    border-radius: 35px;
    margin: 2.6em 0 0.4em 0;
  }

  .primary-circle {
    background: #fff;
    color: var(--primary);
  }

  .secondary-circle {
    background: var(--primary);
    color: #fff;
  }

  a.btn-outline-light {
    border: 1px solid #dbdbdb;
    color: #1a1a1a;
    border-radius: 35px;
  }

}