:root {
  /* Colores */
  --color-title: #191D20;
  --color-text: #717576;
  --color-accent: #EC2739;
  --color-white: #FFFFFF;
  --color-bg: #F3F3F0;

  /* Tipografía */
  --font-family: "Raleway", sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Tamaños (Base 16px) */
  --font-size-base: 1rem;       
  --font-size-subtitle: 2rem; 
  --font-size-subtitle2: 2.5rem; 
  --font-size-heading: 4.7rem;  

  /*movil*/
  --font-size-movil-heading: 3rem;  
}

html {
  font-size: 15px;
}

body {
  font-family: var(--font-family);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-white);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-title);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-heading);
  line-height: 1.1;
}

.subtitle {
  font-size: var(--font-size-subtitle);
}
.subtitle2 {
  font-size: var(--font-size-subtitle2);
}
.subtitle-light {
  font-weight: var(--font-weight-light);
}

.ancho{
    max-width: 100rem;
}

.aparecer {
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

@keyframes pulseBorder {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.animate-pulse-border {
  animation: pulseBorder 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.swiper-pagination-bullet-active{
    background: var(--color-accent);
}

.nav-link{
    font-size: var(--font-size-base);
}

@media (max-width: 800px){
    h1, h2, h3, h4, h5, h6 {
        font-size: var(--font-size-movil-heading);
    }

}