@charset "UTF-8";
/**
* Base HTML: 16px
* @nuclide Variables
* @section Settings > Font size
*/
/**
* Font family: 'Uncut Sans'
* @nuclide Variables
* @section Settings > Font family
*/
/**
* Font family: 'Alfredino Tuttocurvy'
* @nuclide Variables
* @section Settings > Font family
*/
/**
* Font family: 'Uncut Sans Variable'
* @nuclide Variables
* @section Settings > Font family
*/
/**
* font-weight: light | Font family: Uncut Sans, Uncut Sans Variable
* @nuclide Variables
* @section Settings > Font weight
*/
/**
* font-weight: Regular | Font family: Uncut Sans, Alfredino Tuttocurvy, Uncut Sans Variable
* @nuclide Variables
* @section Settings > Font weight
*/
/**
* font-weight: Medium | Font family: Uncut Sans, Uncut Sans Variable
* @nuclide Variables
* @section Settings > Font weight
*/
/**
* font-weight: Semi-bold | Font family: Uncut Sans, Uncut Sans Variable
* @nuclide Variables
* @section Settings > Font weight
*/
/**
* font-weight: Bold | Font family: Uncut Sans, Uncut Sans Variable
* @nuclide Variables
* @section Settings > Font weight
*/
/**
* font-weight: Italic
* @nuclide Variables
* @section Settings > Font weight
*/
/**
* Unidad mínima la retícula digital es 8, 
* el sistema de reticula se basa en incrementos verticales y horizontales de 8 píxeles.
* Uso: multiplicar la variable por el número del incremento deseado. Ejemplo: $gutter * 2
* @nuclide Variables
* @section Settings > Gutter 
*/
/**
* $canvas-with: Ancho del canvas en porcentajes
* @nuclide Variables
* @section Settings > Canvas
*/
/**
* Small
* @nuclide Variables
* @section Settings > Breakpoint predefinidos
*/
/**
* small-m
* @nuclide Variables
* @section Settings > Breakpoint predefinidos
*/
/**
* medium
* @nuclide Variables
* @section Settings > Breakpoint predefinidos
*/
/**
* wide
* @nuclide Variables
* @section Settings > Breakpoint predefinidos
*/
/**
* large
* @nuclide Variables
* @section Settings > Breakpoint predefinidos
*/
/**
* big
* @nuclide Variables
* @section Settings > Breakpoint predefinidos
*/
/**
* huge
* @nuclide Variables
* @section Settings > Breakpoint predefinidos
*/
/**
* $c-white
* @color Blanco neutro
* @section Neutro
*/
/**
* $c-dark
* @color Negro oscuro
* @section Dark
*/
/**
* $c-beige
* @color Beige
* @section Neutro
*/
/**
* $c-gray-100
* @color Gris
* @section Gray Scale
*/
/**
* $c-gray-300
* @color Gris
* @section Neutro
*/
/**
* $c-gray-500
* @color Gris
* @section Gray Scale
*/
/**
* $c-gray-600
* @color Gris
* @section Gray Scale
*/
/**
* $c-gray-700
* @color Gris
* @section Gray Scale
*/
/**
* $c-gray-900
* @color Gris
* @section Gray Scale
*/
/**
* $c-primary-purple
* @color
* @section Primary
*/
/**
* $c-primary-yellow
* @color
* @section Primary
*/
/**
* $c-primary-green
* @color
* @section Primary
*/
/**
* $c-primary-pink
* @color
* @section Primary
*/
/**
* $c-primary-blue
* @color
* @section Primary
*/
/**
* $c-error
* @color Color de error
* @section Status
*/
/**
* $c-succes
* @color Color de éxito
* @section Status
*/
/**
* $c-default-text
* @color Color por defecto para texto
* @section Default
*/
/**
 * Convertir valor de (px) a (rem) de cualquier propiedad, agrega fallback en px para navegadores antiguos.
 *
 * @mixin
 * @section Utils
 * @param $property Propiedad css, ej. margin, max-width, etc..
 * @param $values Valor en px
 * @example
 *  .foo {
 *    @include px-to-rem(padding, 20px 10px);
 *  }
 */
/**
 * Incluye Font-family propiedades fuente de iconos para pseudo elementos.
 * @mixin
 * @section Utils
 * @param $font-family Variable Font-family
 * @example
 *  .foo {
 *		Propiedades...
 *		&:before {
 *    	@include font-family-ico($font-family-ico);
 *		}
 *  }
 */
/**
 * Full query: Mediaquerys predefinidos, para el proyecto.
 * Disponibles para 10 screen sizes diferentes.
 * Para modificarlos, editar las variables definidas en los breakpoints.
 *
 * @mixin
 * @section Utils
 * @param $breakpoint-value
 *    ♣ Breakpoint min-width  
 *      small: 375px | small-m: 480px | medium: 768px | wide: 1024px | big: 1280px | huge: 1440px | large: 1180px 
 *    ♣ Breakpoint max-width  
 *      medium-max: 0 - 767px  |  wide-max  : 0 - 1023px  |  large-max : 0 - 1179px
 *
 * @example
 *  || small: breakpoint min-width: 375px --> $bp-small
 *     @include media-query(small) {
 *       PROPERTIES...
 *     }
 *  || small-m: breakpoint min-width 540px --> $bp-small-m
 *     @include media-query(small-m) {
 *        PROPERTIES...
 *     }
 *  || medium: breakpoint min-width 768px --> $bp-medium
 *     @include media-query(medium) {
 *        PROPERTIES...
 *     }
 *  || medium-max: breakpoint max-width 0 - 767px
 *     @include media-query(medium-max) {
 *        PROPERTIES...
 *     }
 *  || wide: breakpoint min-width 1024px --> $bp-wide
 *     @include media-query(wide) {
 *        PROPERTIES...
 *     }
 *  || wide-max: breakpoint max-width 0 - 1023px
 *     @include media-query(wide-max) {
 *        PROPERTIES...
 *     }
 *  || large: breakpoint min-width 1180px --> $bp-large
 *     @include media-query(large) {
 *        PROPERTIES...
 *     }
 *  || huge: breakpoint min-width 1440px --> $bp-huge
 *     @include media-query(huge) {
 *        PROPERTIES...
 *     } 
 *  || large-max: breakpoint max-width 0 - 1179px
 *     @include media-query(large-max) {
 *        PROPERTIES...
 *     }
 *  || big: breakpoint min-width 1280px --> $bp-big
 *     @include media-query(big) {
 *        PROPERTIES...
 *     }
 */
/**
 * Helper para insertar fácilmente mediaquery a un selector específico.
 *
 * @mixin
 * @section Helpers
 * @param $breakpoint-value
 *    ♣ Breakpoint min-width  
 *    【 small: 375px | small-m: 480px | medium: 768px | wide: 1024px | big: 1280px | huge: 1440px | large: 1180px 】 
 *    ♣ Breakpoint max-width
 *    【 medium-max: 0 - 767px  |  wide-max  : 0 - 1023px  |  large-max : 0 - 1179px 】
 * @example
 *  .foo {
 *    PROPERTIES...
 *    @include media-query-help(small) {
 *      PROPERTIES...
 *    }
 *  }
 *  || Variables
 *  ♣ small     : breakpoint min-width 375px
 *  ♣ medium    : breakpoint min-width 768px
 *  ♣ medium-max: breakpoint max-width 0 - 767px
 *  ♣ wide      : breakpoint min-width 1024px
 *  ♣ wide-max  : breakpoint max-width 0 - 1023px
 *  ♣ large     : breakpoint min-width 1180px
 *  ♣ huge      : breakpoint min-width 1440px
 *  ♣ large-max : breakpoint max-width 0 - 1179px
 *  ♣ big       : breakpoint min-width 1280px
 */
.c-post-intro_center .c-post-intro__wrap {
  padding-top: 16px;
  padding-top: 1rem;
  padding-bottom: 16px;
  padding-bottom: 1rem;
  padding-left: 16px;
  padding-left: 1rem;
  padding-right: 16px;
  padding-right: 1rem;
  background-color: #fff; }

.c-post-intro__wrap {
  display: flex; }

.c-post-intro__data {
  flex-wrap: wrap;
  row-gap: 8px;
  row-gap: 0.5rem;
  column-gap: 8px;
  column-gap: 0.5rem; }

.c-post-intro__title {
  margin-top: 12px;
  margin-top: 0.75rem;
  margin-bottom: 24px;
  margin-bottom: 1.5rem; }

.c-post-intro__description {
  margin-bottom: 24px;
  margin-bottom: 1.5rem;
  color: #3F4246; }

.c-post-intro__picture {
  aspect-ratio: 1/1;
  max-width: 450px;
  max-width: 28.125rem;
  margin: 0 auto; }

.c-post-intro__img {
  width: 100%;
  height: 100%;
  object-fit: cover; }

.c-post-intro__link {
  margin-top: 16px;
  margin-top: 1rem; }

/*------------------------------------*\
  Media querys
\*------------------------------------*/
/**
* Mobile | VP: max-width 768px
*/
@media only screen and (max-width: 767px) {
  .c-post-intro__data .o-tag-bullet::after {
    display: none; } }

/**
* Mobile | VP: max-width 1023px
*/
@media only screen and (max-width: 1023px) {
  .c-post-intro__content {
    margin-top: 24px;
    margin-top: 1.5rem; }
  .c-post-intro__wrap {
    flex-direction: column-reverse; } }

/**
* Desktop | VP: min-width 768px
*/
@media only screen and (min-width: 768px) {
  .c-post-intro_center .c-post-intro__wrap {
    padding-top: 40px;
    padding-top: 2.5rem;
    padding-bottom: 40px;
    padding-bottom: 2.5rem;
    padding-left: 40px;
    padding-left: 2.5rem;
    padding-right: 40px;
    padding-right: 2.5rem; } }

/**
* Desktop | VP: min-width 1024px
*/
@media only screen and (min-width: 1024px) {
  .c-post-intro__wrap {
    display: flex;
    align-items: center;
    column-gap: 48px;
    column-gap: 3rem; }
  .c-post-intro__content {
    flex: 60%; }
  .c-post-intro__title {
    margin-bottom: 40px;
    margin-bottom: 2.5rem; }
  .c-post-intro__description {
    margin-bottom: 40px;
    margin-bottom: 2.5rem; }
  .c-post-intro__picture {
    flex: 40%;
    aspect-ratio: 1/1; }
  .c-post-intro__link {
    margin-top: 40px;
    margin-top: 2.5rem; } }

.c-banner-cta__picture {
  display: block;
  aspect-ratio: 1/1; }

.c-banner-cta__img {
  height: 100%;
  width: 100%;
  object-fit: cover; }

.c-banner-cta__content {
  align-content: center;
  text-align: center;
  padding-top: 32px;
  padding-top: 2rem;
  padding-bottom: 32px;
  padding-bottom: 2rem;
  padding-left: 32px;
  padding-left: 2rem;
  padding-right: 32px;
  padding-right: 2rem;
  background-color: #fff; }

.c-banner-cta__txt {
  max-width: 720px;
  max-width: 45rem;
  margin: 0 auto; }

.c-banner-cta__content_w720 {
  max-width: 720px;
  max-width: 45rem;
  margin-left: auto;
  margin-right: auto; }

.c-banner-cta__picture,
.c-banner-cta__content {
  flex: 50%; }

.c-banner-cta__btn {
  margin-top: 40px;
  margin-top: 2.5rem;
  margin-left: auto;
  margin-right: auto; }

/**
* Desktop | VP: min-width 1080px
*/
@media only screen and (min-width: 1024px) {
  .c-banner-cta {
    display: flex; }
  .c-banner-cta__content {
    position: relative;
    padding-top: 96px;
    padding-top: 6rem;
    padding-bottom: 96px;
    padding-bottom: 6rem;
    padding-left: 80px;
    padding-left: 5rem;
    padding-right: 80px;
    padding-right: 5rem; }
  .c-banner-cta__line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #000; }
  .c-banner-cta__content_w720::before {
    display: none; } }

.c-resource-grid {
  display: grid;
  row-gap: 24px;
  row-gap: 1.5rem; }

.c-resource-grid__file {
  width: 100%;
  aspect-ratio: 3/2; }

.c-resource-grid__img,
.c-resource-grid__video,
.c-resource-grid__iframe,
.c-resource-grid__iframe div iframe {
  display: block;
  height: 100%;
  width: 100%; }

.c-resource-grid__img,
.c-resource-grid__video {
  object-fit: cover; }

.c-resource-grid__iframe div {
  width: 100%;
  aspect-ratio: 3/2; }

/*------------------------------------*\
  Media querys
\*------------------------------------*/
/**
* Desktop | VP: min-width 768px
*/
@media only screen and (min-width: 768px) {
  .c-resource-grid {
    display: grid;
    column-gap: 24px;
    column-gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr); }
    .c-resource-grid > .c-resource-grid__file:nth-child(1),
    .c-resource-grid > .c-resource-grid__file:nth-child(4) {
      grid-column: 1/3;
      aspect-ratio: 16/9; }
      .c-resource-grid > .c-resource-grid__file:nth-child(1) .c-resource-grid__iframe div,
      .c-resource-grid > .c-resource-grid__file:nth-child(4) .c-resource-grid__iframe div {
        aspect-ratio: 16/9; }
    .c-resource-grid > .c-resource-grid__file_two:nth-child(1) {
      grid-column: auto;
      aspect-ratio: initial; }
    .c-resource-grid > .c-resource-grid__file_five:nth-child(4) {
      grid-column: 1/2;
      aspect-ratio: 3/2; }
      .c-resource-grid > .c-resource-grid__file_five:nth-child(4) .c-resource-grid__iframe div {
        aspect-ratio: 3/2; }
    .c-resource-grid > .c-resource-grid__file_five:nth-child(5) {
      grid-column: 2/3;
      aspect-ratio: 3/2; } }

.c-dropdown {
  background-color: #fff; }

.c-dropdown__element {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #E7E8EA;
  list-style-type: none; }
  .c-dropdown__element:first-of-type {
    border-top: 1px solid #000; }
  .c-dropdown__element:last-of-type {
    border-top: 1px solid #E7E8EA;
    border-bottom: 1px solid #000; }

.c-dropdown__toggle {
  justify-content: space-between;
  width: 100%;
  padding-bottom: 20px;
  padding-bottom: 1.25rem;
  padding-top: 20px;
  padding-top: 1.25rem;
  padding-left: 20px;
  padding-left: 1.25rem;
  padding-right: 16px;
  padding-right: 1rem;
  text-align: left;
  font-size: 20px;
  font-size: 1.25rem;
  font-weight: 700; }
  .c-dropdown__toggle::after {
    font-size: 35px;
    font-size: 2.1875rem;
    transform: rotate(0deg);
    transition: transform ease-in .3s; }
  .is-dropdown-open .c-dropdown__toggle::after {
    transform: rotate(180deg);
    transition: all ease-in .3s; }

.c-dropdown__content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.7s ease; }
  .is-dropdown-open .c-dropdown__content {
    transition: all 0.7s ease; }

.c-dropdown__wrap-content {
  padding-bottom: 40px;
  padding-bottom: 2.5rem;
  padding-left: 24px;
  padding-left: 1.5rem;
  padding-right: 24px;
  padding-right: 1.5rem;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease-in;
  /* Estado abierto */ }
  .is-dropdown-open .c-dropdown__wrap-content {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
    transition: opacity .3s ease-in; }

/**
* Desktop | VP: min-width 768px
*/
@media only screen and (min-width: 768px) {
  .c-dropdown__toggle {
    font-size: 24px;
    font-size: 1.5rem; }
  .c-dropdown__wrap-content {
    padding-bottom: 24px;
    padding-bottom: 1.5rem;
    padding-left: 16px;
    padding-left: 1rem;
    padding-right: 16px;
    padding-right: 1rem; } }

/**
* Desktop | VP: min-width 1024px
*/
@media only screen and (min-width: 1024px) {
  .c-dropdown-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: 24px;
    column-gap: 1.5rem; }
    .o-canvas_small .c-dropdown-wrap {
      display: block; }
      .o-canvas_small .c-dropdown-wrap .o-title_lg {
        padding-top: 40px;
        padding-top: 2.5rem;
        padding-bottom: 40px;
        padding-bottom: 2.5rem; } }

.c-slider-images__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 170px;
  max-width: 10.625rem;
  margin: 0 auto; }

.c-slider-images__img {
  margin-bottom: 16px;
  margin-bottom: 1rem;
  max-height: 96px;
  max-height: 6rem; }

.c-slider-images__caption {
  text-align: center; }

.c-slider-images__btn svg {
  display: none; }

.c-slider-images__btn::before {
  color: #000;
  font-size: 24px;
  font-size: 1.5rem; }

/**
* Desktop | VP: min-width 768px
*/
@media only screen and (min-width: 768px) {
  .c-slider-images__caption {
    font-size: 18px;
    font-size: 1.125rem; } }

/*# sourceMappingURL=detail_page.css.map */