@charset "UTF-8";
/* -- Functions -- */
/* -- reset  -- */
/*
  Con este reset vamos a resolver:
    👉 Unificar el uso de Custom Properties
    👉 Problemas de box-model más generales
    👉 Problemas con imagenes, vídeos e iconos svg
    👉 Problemas con tipografías y etiquetas input en formularios
    👉 Unificar la tipografía de todas las etiquetas de una web
*/
/* Opcional */
/* Configuramos si un usuario ha activado el modo alto contraste. (WD) */
/* Opcional */
/* Desactivamos los animations en el caso de que el usuario haya configurado el modo sin animation */
@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation: none !important;
    animation: none !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}
/* Reseteamos los margin y paddings de todas las etiquetas */
* {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: baseline;
}

/* Evitamos problemas con las imagenes */
img, picture, video, iframe, figure {
  max-width: 100%;
  display: block;
  /* opcional */
  -o-object-fit: cover;
  object-fit: cover;
  /* opcional */
  -o-object-position: center center;
  object-position: center center;
}

/* Reseteamos los enlaces para funcionar como cajas... */
a {
  display: block;
  text-decoration: none;
  color: inherit;
  font-size: inherit;
}

/* ... excepto los que se encuentran en párrafos */
p a {
  display: inline;
}

/* Quitamos los puntos de los <li> */
li {
  list-style-type: none;
}

/* Configuramos anclas suaves */
html {
  scroll-behavior: smooth;
}

/* Desactivamos estilos por defecto de las principales etiquetas de texto */
h1, h2, h3, h4, h5, h6, p, span, a, strong, blockquote, i, b, u, em {
  font-size: 1em;
  font-weight: inherit;
  font-style: inherit;
  text-decoration: none;
  color: inherit;
}

/* Evitamos problemas con los pseudoelementos de quotes */
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

/* Configuramos el texto que seleccionamos */
::-moz-selection {
  background-color: var(--black-color);
  color: var(--white-color);
}

::selection {
  background-color: var(--black-color);
  color: var(--white-color);
}

/* Nivelamos problemas de tipografías y colocación de formularios */
form, input, textarea, select, button, label {
  font-family: inherit;
  font-size: inherit;
  background-color: transparent;
  color: inherit;
  display: block;
  /* opcional */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Reseteamos las tablas */
table, tr, td {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Evitamos problemas con los SVG */
svg {
  width: 100%;
  display: block;
  fill: currentColor;
}

/* Configuramos la tipografía para toda la web */
/* -- Variables -- */
:root {
  --black-color: #1E1E1E;
  --white-color: #ffffff;
  --primary-300: #D95F2E;
  --primary-350: #C94A2E;
  --primary-400: #843529;
  --primary-500: #A03A2E;
  --primary-600: #843529;
  --primary-700: #762e23;
  --secondary-400: #DD781C;
  --secondary-500: #D76B1C;
  --secondary-600: #C65E1C;
  --secondary-700: #B6511C;
  --third-400: #E49F27;
  --third-500: #E4A827;
  --third-600: #E4B027;
  --third-700: #ffc165;
  --light-blue-500: #45b4ff;
  --text-color: #192030;
  --gray-800: #393B3F;
  --gray-700: #979797;
  --gray-600: #81878E;
  --gray-500: #CCD4DF;
  --gray-400: #CECECE;
  --gray-300: #EFEFEF;
  --gray-200: #F8F8F8;
  --gray-100: #F9F9F9;
  --header-height: 5.3125rem;
  --header-height-reverse: -5.3125rem;
  --index-header: 20;
  --index-lightbox: 50;
  --swiper-pagination-color: var(--primary-500);
}
@media screen and (max-width: 1200px) {
  :root {
    --header-height: 4.375rem;
  }
}
@media screen and (max-width: 700px) {
  :root {
    --header-height: 3.75rem;
  }
}

/* -- Classes -- */
.limit {
  width: 100%;
  max-width: 75.625rem;
  padding-inline: 0.9375rem;
  margin-inline: auto;
  position: relative;
}

.section {
  --distance: 3.75rem;
  padding-top: var(--distance);
  padding-bottom: var(--distance);
  position: relative;
}
.section.m--gray {
  background-color: var(--gray-300);
}
.section__shape {
  width: 100%;
  margin-bottom: 3.125rem;
}
.section__shape svg {
  width: 100%;
  height: 7.5rem;
}
.section__shape__fill {
  fill: var(--white-color);
}
.section:has(.section__shape) {
  padding-top: 0;
}
@media screen and (max-width: 1000px) {
  .section {
    --distance: 2.5rem;
  }
  .section__shape {
    margin-bottom: 2.5rem;
  }
  .section__shape svg {
    height: 6.25rem;
  }
}
@media screen and (max-width: 700px) {
  .section {
    --distance: 1.875rem;
  }
  .section__shape svg {
    height: 5rem;
  }
}
@media screen and (max-width: 500px) {
  .section__shape svg {
    height: 3.125rem;
  }
}

.fullPosition {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.ccm_title {
  text-align: center;
  margin-bottom: 2.5rem;
}
.ccm_title.m--white .ccm_title__top {
  color: var(--white-color);
}
@media screen and (max-width: 1000px) {
  .ccm_title {
    margin-bottom: 1.875rem;
  }
}
@media screen and (max-width: 700px) {
  .ccm_title {
    margin-bottom: 1.25rem;
  }
}
.ccm_title__top {
  font-size: 1.875rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--primary-350);
  margin-bottom: 0.3125rem;
}
@media screen and (max-width: 1000px) {
  .ccm_title__top {
    font-size: 2.1875rem;
  }
}
@media screen and (max-width: 700px) {
  .ccm_title__top {
    font-size: 1.875rem;
  }
}
@media screen and (max-width: 500px) {
  .ccm_title__top {
    font-size: 1.5625rem;
    margin-bottom: 0.1875rem;
  }
}
@media screen and (max-width: 500px) {
  .ccm_title__top {
    font-size: 1.4375rem;
  }
}
.ccm_title__bottom {
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--gray-800);
  font-style: italic;
}
@media screen and (max-width: 1000px) {
  .ccm_title__bottom {
    font-size: 1.5625rem;
  }
}
@media screen and (max-width: 700px) {
  .ccm_title__bottom {
    font-size: 1.25rem;
  }
}
@media screen and (max-width: 500px) {
  .ccm_title__bottom {
    font-size: 1.125rem;
  }
}
@media screen and (max-width: 400px) {
  .ccm_title__bottom {
    font-size: 1rem;
  }
}
.ccm_title__text {
  font-size: 1rem;
  line-height: 1.3;
  color: var(--gray-800);
  font-style: italic;
  padding-top: 0.9375rem;
  max-width: 56.25rem;
  margin-inline: auto;
}
@media screen and (max-width: 500px) {
  .ccm_title__text {
    font-size: 0.9375rem;
  }
}

.ccm_button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1;
  font-weight: 700;
  -webkit-transition: all ease 0.25s;
  transition: all ease 0.25s;
}
.ccm_button:hover {
  -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
  -webkit-transform: translate(0, -1px);
          transform: translate(0, -1px);
}
.ccm_button.m--400 {
  font-size: 0.875rem;
  height: 3.125rem;
  border-radius: 1.5625rem;
  padding: 0.5rem 1.75rem;
}
.ccm_button.m--500 {
  font-size: 1rem;
  height: 3.75rem;
  border-radius: 1.875rem;
  padding: 0.625rem 1.875rem;
}
@media screen and (max-width: 1000px) {
  .ccm_button.m--500 {
    font-size: 0.9375rem;
    height: 3.375rem;
    border-radius: 1.6875rem;
  }
}
@media screen and (max-width: 700px) {
  .ccm_button.m--500 {
    font-size: 0.875rem;
    height: 3rem;
    border-radius: 1.5rem;
    padding: 0.5rem 1.5625rem;
  }
}
@media screen and (max-width: 500px) {
  .ccm_button.m--500 {
    font-size: 0.8125rem;
    height: 2.625rem;
    border-radius: 1.3125rem;
    padding: 0.375rem 1.25rem;
  }
}
.ccm_button.m--orange {
  background-color: var(--primary-300);
  color: var(--white-color);
}
.ccm_button.m--orange:hover {
  background-color: var(--primary-500);
}
.ccm_button.m--yellow {
  background-color: var(--third-600);
  color: var(--white-color);
}
.ccm_button.m--yellow:hover {
  background-color: var(--third-400);
}

/* -- Elements -- */
.g-button {
  min-height: 2.5rem;
  border-radius: 0.625rem;
  font-size: 1rem;
  padding: 0.3125rem 1.875rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.625rem;
  -webkit-transition: background-color ease 0.25s;
  transition: background-color ease 0.25s;
}
.g-button strong {
  font-weight: 700;
}
.g-button.m--flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}
.g-button.m--bottom-center {
  margin: 2.5rem auto 0;
}
@media screen and (max-width: 1000px) {
  .g-button.m--bottom-center {
    margin: 1.875rem auto 0;
  }
}
@media screen and (max-width: 600px) {
  .g-button.m--bottom-center {
    margin: 0.9375rem auto 0;
  }
}
.g-button.medium {
  min-height: 3.125rem;
}
@media screen and (max-width: 1000px) {
  .g-button.medium {
    min-height: 2.5rem;
  }
}
.g-button.primary-500 {
  background-color: var(--primary-500);
  color: var(--white-color);
}
.g-button.primary-500:hover {
  background-color: var(--primary-600);
}
.g-button.m--200 {
  width: 12.5rem;
}
.g-button[disabled] {
  pointer-events: none;
  background-color: #fff;
  color: #333;
}

.g-title {
  display: block;
  width: 100%;
  font-size: 2.1875rem;
  font-weight: 700;
  margin-bottom: 2.5rem;
  text-align: center;
}
.g-title:has(+ .g-text) {
  margin-bottom: 0.9375rem;
}
@media screen and (max-width: 700px) {
  .g-title:has(+ .g-text) {
    margin-bottom: 0.625rem;
  }
}
@media screen and (max-width: 1000px) {
  .g-title {
    font-size: 1.5rem;
    margin-bottom: 2.5rem;
  }
}
@media screen and (max-width: 700px) {
  .g-title {
    font-size: 1.375rem;
    margin-bottom: 1.875rem;
  }
}

.g-text {
  font-size: 1.25rem;
  margin-bottom: 1.875rem;
  text-align: center;
  margin: 0 auto 2.5rem;
  max-width: 60rem;
}
@media screen and (max-width: 1000px) {
  .g-text {
    font-size: 1.0625rem;
    margin-bottom: 2.5rem;
  }
}
@media screen and (max-width: 700px) {
  .g-text {
    font-size: 0.9375rem;
    margin-bottom: 1.875rem;
  }
}

.box-button {
  border: 0.0625rem solid var(--primary-500);
  color: var(--white-color);
  min-height: 3.125rem;
  font-size: 1.125rem;
  padding: 0.3125rem 4.6875rem 0.3125rem 1.5625rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.625rem;
  background-color: rgba(0, 0, 0, 0.25);
  -webkit-transition: background-color ease 0.25s;
  transition: background-color ease 0.25s;
  position: relative;
}
.box-button b {
  position: relative;
  z-index: 2;
}
.box-button .icon-arrow-button {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 1.375rem;
  height: auto;
}
.box-button::before {
  content: "";
  display: block;
  width: 3.125rem;
  height: 3.125rem;
  background-color: var(--primary-500);
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transition: width ease 0.25s;
  transition: width ease 0.25s;
}
.box-button:hover::before {
  width: 100%;
}
@media screen and (max-width: 600px) {
  .box-button {
    min-height: 2.625rem;
    font-size: 1.0625rem;
    padding: 0.3125rem 4.375rem 0.3125rem 1.25rem;
  }
  .box-button::before {
    width: 2.625rem;
    height: 2.625rem;
  }
  .box-button .icon-arrow-button {
    top: 0.625rem;
    right: 0.625rem;
    width: 1.25rem;
  }
}

body,
html {
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  color: var(--black-color);
}