@charset "UTF-8";
/*------------------------------------*\
  Estilos theme 
  2026
  Autor: Aguayo
\*------------------------------------*/
/**
* Base HTML: 16px
* @nuclide Variables
* @section Settings > Font size
*/
/**
* Font family: 'DM Sans'
* @nuclide Variables
* @section Settings > Font family
*/
/**
* Font family: 'DM Variable'
* @nuclide Variables
* @section Settings > Font family
*/
/**
* font-weight: light | Font family: DM Sans, DM Sans Variable
* @nuclide Variables
* @section Settings > Font weight
*/
/**
* font-weight: Regular | Font family: DM Sans, Alfredino Tuttocurvy, DM Sans Variable
* @nuclide Variables
* @section Settings > Font weight
*/
/**
* font-weight: Medium | Font family: DM Sans, DM Sans Variable
* @nuclide Variables
* @section Settings > Font weight
*/
/**
* font-weight: Semi-bold | Font family: DM Sans, DM Sans Variable
* @nuclide Variables
* @section Settings > Font weight
*/
/**
* font-weight: Bold | Font family: DM Sans, DM 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-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-600
* @color Gris
* @section Gray Scale
*/
/**
* $c-primary
* @color
* @section Primary
*/
/**
* $c-secondary-10
* @color
* @section Secondary
*/
/**
* $c-secondary-60
* @color
* @section Secondary
*/
/**
* $c-secondary
* @color
* @section Secondary
*/
/**
* $c-secondary
* @color
* @section Secondary
*/
/**
* $c-error
* @color Color de error
* @section Status
*/
/**
* $c-succes
* @color Color de éxito
* @section Status
*/
/**
 * $c-on-primary-10
 * @color
 * @section On
 */
/**
 * $c-on-primary-20
 * @color
 * @section On
 */
/**
* $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
 */
/**
 * Flexbox Containers display: flex. Utiliza el soporte nativo de los navegadores.
 * The 'flex' value causes an element to generate a block-level flex container box.
 * http://w3.org/tr/css3-flexbox/#flex-containers
 * @mixin
 * @section Flexbox prefix
 * @example
 *  .foo {
 *    @include flexbox;
 *  }
 */
/**
 * Flexbox Containers display: inline-flex. Utiliza el soporte nativo de los navegadores.
 * The 'inline-flex' value causes an element to generate a inline-level flex container box.
 * http://w3.org/tr/css3-flexbox/#flex-containers
 * @mixin
 * @section Flexbox prefix
 * @example
 *  .foo {
 *    @include inline-flex;
 *  }
 */
/**
 * Flexbox Direction.
 * The 'flex-direction' property specifies how flex items are placed in
 * the flex container, by setting the direction of the flex container's main axis. 
 * This determines the direction that flex items are laid out in.
 * http://w3.org/tr/css3-flexbox/#flex-direction-property
 * @mixin
 * @section Flexbox prefix
 * @param $value
 *	Default: row ♣ 
 * 	Values: row | row-reverse | column | column-reverse
 * @example
 *  .foo {
 *    @include flex-direction(column);
 *  }
 */
/**
 * Flexbox Wrap.
 * The 'flex-wrap' property controls whether the flex container is single-line
 * or multi-line, and the direction of the cross-axis, which determines
 * the direction new lines are stacked in.
 * No Webkit Box fallback.
 * http://w3.org/tr/css3-flexbox/#flex-wrap-property
 * @mixin
 * @section Flexbox prefix
 * @param $value
 *	Default: nowrap ♣  
 * 	Values: nowrap | wrap | wrap-reverse
 * @example
 *  .foo {
 *    @include flex-wrap(wrap);
 *  }
 */
/**
 * Flexbox Flow (shorthand).
 * The 'flex-flow' property is a shorthand for setting the 'flex-direction'
 * and 'flex-wrap' properties, which together define the flex container's
 * main and cross axes.
 * No Webkit Box fallback.
 * http://w3.org/tr/css3-flexbox/#flex-flow-property
 * @mixin
 * @section Flexbox prefix
 * @param $values
 *	Default: row nowrap ♣  
 * 	Values: [flex-direction: row | row-reverse | column | column-reverse] | [flex-wrap: nowrap | wrap | wrap-reverse]
 * @example
 *  .foo {
 *    @include flex-flow(column nowrap);
 *  }
 */
/**
 * Flexbox Order.
 * The 'order' property controls the order in which flex items appear within
 * their flex container, by assigning them to ordinal groups.
 * http://w3.org/tr/css3-flexbox/#order-property
 * @mixin
 * @section Flexbox prefix
 * @param $int
 *	Default: 0
 * @example
 *  .foo {
 *    @include order(1);
 *  }
 */
/**
 * Flexbox Grow.
 * The 'flex-grow' property sets the flex grow factor. Negative numbers are invalid.
 * http://w3.org/tr/css3-flexbox/#flex-grow-property
 * @mixin
 * @section Flexbox prefix
 * @param $int
 *	Default: 0
 * @example
 *  .foo {
 *    @include flex-grow(1);
 *  }
 */
/**
 * Flexbox Shrink.
 * The 'flex-shrink' property sets the flex shrink factor. Negative numbers are invalid.
 * http://w3.org/tr/css3-flexbox/#flex-shrink-property
 * @mixin
 * @section Flexbox prefix
 * @param $int
 *	Default: 1
 * @example
 *  .foo {
 *    @include flex-grow(1);
 *  }
 */
/**
 * Flexbox Basis.
 * The 'flex-basis' property sets the flex basis. Negative lengths are invalid.
 * http://www.w3.org/TR/css3-flexbox/#flex-basis-property
 * @mixin
 * @section Flexbox prefix
 * @param $value
 *	Default: auto ♣
 *	Values: Like "width"
 * @example
 *  .foo {
 *    @include flex-basis(50%);
 *  }
 */
/**
 * Flexbox "Flex" (shorthand).
 * The 'flex' property specifies the components of a flexible length: the
 * flex grow factor and flex shrink factor, and the flex basis. When an
 * element is a flex item, 'flex' is consulted instead of the main size
 * property to determine the main size of the element. If an element is
 * not a flex item, 'flex' has no effect.
 * http://w3.org/tr/css3-flexbox/#flex-property
 * @mixin
 * @section Flexbox prefix
 * @param $fg
 *	Default: See individual properties (1 1 0). ♣
 *	Values: none | <flex-grow>
 * @param $fs
 *	Default: See individual properties (1 1 0). ♣
 *	Values: none | <flex-shrink>
 * @param $fb
 *	Default: See individual properties (1 1 0). ♣
 *	Values: none | <flex-basis>
 * @example
 *  .foo {
 *    @include flex( 1 1 50%);
 *  }
 */
/**
 * Flexbox Justify Content.
 * The 'justify-content' property aligns flex items along the main axis
 * of the current line of the flex container. This is done after any flexible
 * lengths and any auto margins have been resolved. Typically it helps distribute
 * extra free space leftover when either all the flex items on a line are
 * inflexible, or are flexible but have reached their maximum size. It also
 * exerts some control over the alignment of items when they overflow the line.
 * Note: 'space-*' values not supported in older syntaxes.
 * http://w3.org/tr/css3-flexbox/#justify-content-property
 * @mixin
 * @section Flexbox prefix
 * @param $value
 *	Default: flex-start ♣
 *	Values: flex-start | flex-end | center | space-between | space-around
 * @example
 *  .foo {
 *    @include justify-content(space-between);
 *  }
 */
/**
 * Flexbox Align Items.
 * Flex items can be aligned in the cross axis of the current line of the
 * flex container, similar to 'justify-content' but in the perpendicular
 * direction. 'align-items' sets the default alignment for all of the flex
 * container's items, including anonymous flex items. 'align-self' allows
 * this default alignment to be overridden for individual flex items. (For
 * anonymous flex items, 'align-self' always matches the value of 'align-items'
 * on their associated flex container.)
 * http://w3.org/tr/css3-flexbox/#align-items-property
 * @mixin
 * @section Flexbox prefix
 * @param $value
 *	Default: stretch ♣
 *	Values: flex-start | flex-end | center | baseline | stretch
 * @example
 *  .foo {
 *    @include align-items(space-between);
 *  }
 */
/**
 * Flexbox Align Self.
 * https://www.w3.org/TR/css-flexbox-1/#propdef-align-self
 * @mixin
 * @section Flexbox prefix
 * @param $value
 *	Default: auto ♣
 *	Values: auto | flex-start | flex-end | center | baseline | stretch
 * @example
 *  .foo {
 *    @include align-self(flex-end);
 *  }
 */
/**
 * Flexbox Align Content.
 * The 'align-content' property aligns a flex container's lines within the
 * flex container when there is extra space in the cross-axis, similar to
 * how 'justify-content' aligns individual items within the main-axis. Note,
 * this property has no effect when the flexbox has only a single line.
 * http://w3.org/tr/css3-flexbox/#align-content-property
 * @mixin
 * @section Flexbox prefix
 * @param $value
 *	Default: stretch ♣
 *	Values: flex-start | flex-end | center | space-between | space-around | stretch
 * @example
 *  .foo {
 *    @include align-content(flex-end);
 *  }
 */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Montserrat:wght@100..900&display=swap");
.u-hidden {
  display: none !important; }

.u-display-block {
  display: block !important; }

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0; }

.o-border-bottom {
  border-bottom: 2px solid #000; }

.o-border-top {
  border-top: 2px solid #000; }

.o-border-top_1 {
  border-top: 1px solid #000; }

.o-border-all {
  border: 2px solid #000; }

.u-font-bold {
  font-weight: 700; }

.u-margin-top-8 {
  margin-top: 8px;
  margin-top: 0.5rem; }

.u-margin-top-16 {
  margin-top: 16px;
  margin-top: 1rem; }

.u-margin-top-24 {
  margin-top: 24px;
  margin-top: 1.5rem; }

.u-margin-top-40 {
  margin-top: 40px;
  margin-top: 2.5rem; }

.u-margin-bottom-16 {
  margin-bottom: 16px;
  margin-bottom: 1rem; }

.u-margin-bottom-24 {
  margin-bottom: 24px;
  margin-bottom: 1.5rem; }

.u-margin-bottom-40 {
  margin-bottom: 40px;
  margin-bottom: 2.5rem; }

.u-margin-right-56 {
  margin-right: 56px;
  margin-right: 3.5rem; }

.u-margin-both-32 {
  margin: 32px 0;
  margin: 2rem 0; }

.u-flex-center-y {
  display: flex;
  align-items: center; }

.u-flex-center-x {
  display: flex;
  justify-content: center; }

.u-flex-center-both {
  display: flex;
  align-items: center;
  justify-content: center; }

/**
* Desktop | VP: min-width 1024px
*/
@media only screen and (min-width: 1024px) {
  .u-position-sticky-dk {
    position: sticky;
    top: 120px; } }

.o-list {
  list-style: none; }

.o-list_gray {
  color: #4C5051;
  margin-left: 24px;
  margin-left: 1.5rem;
  margin-bottom: 32px;
  margin-bottom: 2rem; }

@media only screen and (min-width: 1024px) {
  .o-list_gray {
    margin-bottom: 40px;
    margin-bottom: 2.5rem; } }

.u-word-break {
  word-break: break-word; }

body,
h1, h2, h3, h4, h5, h6,
dl, dd, ol, ul {
  margin: 0;
  padding: 0; }

html {
  font-size: 16px;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body * {
  box-sizing: border-box; }

article,
aside,
footer,
header,
nav,
section {
  display: block; }

h1 {
  font-size: 2em; }

figcaption,
figure,
main {
  display: block; }

figure,
p {
  margin: 0; }

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible; }

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects; }
  a:active, a:hover {
    outline-width: 0; }

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted; }

abbr[title],
dfn[title] {
  cursor: help; }

b,
strong {
  font-weight: inherit;
  font-weight: bolder; }

code,
pre,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

dfn {
  font-style: italic; }

mark {
  background-color: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

blockquote {
  margin: 0; }

audio,
video {
  display: inline-block;
  vertical-align: baseline; }

audio:not([controls]) {
  display: none;
  height: 0; }

img {
  border-style: none;
  vertical-align: bottom;
  max-width: 100%;
  height: auto; }

svg:not(:root) {
  overflow: hidden; }

input {
  line-height: normal; }

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0; }

button,
input {
  overflow: visible; }

button,
select {
  text-transform: none; }

button {
  background-color: transparent; }

optgroup {
  font-weight: bold; }

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

fieldset {
  margin: 0 2px;
  padding: 0.35em 0.75em 0.625em; }

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
  border: 0; }

progress {
  display: inline-block;
  vertical-align: baseline; }

textarea {
  overflow: auto; }

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px; }

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td, th {
  padding: 0; }

details,
menu {
  display: block; }

summary {
  display: list-item; }

canvas {
  display: inline-block; }

template {
  display: none; }

[hidden] {
  display: none; }

/*---------------------------------------------*\
  #font-face
  $font-family-ico: "ico-hyl-wai" !default;
  URL custom fonts: https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Montserrat:wght@100..900&display=swap
\*---------------------------------------------*/
/**
 * Iconografía
 *
 * Sistema de iconos basado en **Tabler Icons**.
 *
 * Los iconos se implementan como una **fuente web (webfont)** y se renderizan
 * mediante pseudo-elementos (`::before` y `::after`).
 *
 * Convenciones:
 * - Prefijo de clase: `i-`
 * - Uso principal: iconos decorativos
 * - El contenido del icono se define mediante variables SCSS (`$i-*`)
 *
 * Ejemplo:
 * <span class="i-chevron-down"></span>
 *
 * Fuente:
 * Tabler Icons — https://tabler.io/icons
 *
 * Styleguide Foundations.Iconography
 */
@font-face {
  font-family: "hyl-wai";
  src: url("../fonts/hyl-wai.eot?qqnr5");
  src: url("../fonts/hyl-wai.eot?#iefix") format("embedded-opentype"), url("../fonts/hyl-wai.ttf?qqnr5") format("truetype"), url("../fonts/hyl-wai.woff?qqnr5") format("woff"), url("../fonts/hyl-wai.svg?qqnr5#hyl-wai") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block; }

.i-::before,
[class^="i-"]::before,
[class*=" i-"]::before,
.o-ico::before {
  font-family: "hyl-wai";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: never;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 600;
  line-height: 1; }

.i-after-:after,
[class^="i-after-"]:after,
[class*="i-after-"]:after {
  font-family: "hyl-wai";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: never;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 600;
  line-height: 1; }

/**
 * @icon .i-arrow-right
 * @markup
 *   <span class="i-arrow-right"></span>
 */
.i-arrow-right::before {
  content: "\e900"; }

.i-after-arrow-right::after {
  content: "\e900"; }

/**
 * @icon .i-car
 * @markup
 *   <span class="i-car"></span>
 */
.i-car::before {
  content: "\e901"; }

.i-after-car::after {
  content: "\e901"; }

/**
 * @icon .i-check
 * @markup
 *   <span class="i-check"></span>
 */
.i-check::before {
  content: "\e902"; }

/**
 * @icon .i-chevron-down
 * @markup
 *   <span class="i-chevron-down"></span>
 */
.i-chevron-down::before {
  content: "\e903"; }

.i-after-chevron-down::after {
  content: "\e903"; }

/**
 * @icon .i-download
 * @markup
 *   <span class="i-download"></span>
 */
.i-download::before {
  content: "\e904"; }

.i-after-download::after {
  content: "\e904"; }

/**
 * @icon .i-info
 * @markup
 *   <span class="i-info"></span>
 */
.i-info::before {
  content: "\e905"; }

/**
 * @icon .i-menu
 * @markup
 *   <span class="i-menu"></span>
 */
.i-menu::before {
  content: "\e906"; }

/**
 * @icon .i-whatsapp
 * @markup
 *   <span class="i-whatsapp"></span>
 */
.i-whatsapp::before {
  content: "\e907"; }

.i-after-whatsapp::after {
  content: "\e907"; }

/**
 * @icon .i-close
 * @markup
 *   <span class="i-close"></span>
 */
.i-close::before {
  content: "\e908"; }

/**
 * @icon .i-mail
 * @markup
 *   <span class="i-mail"></span>
 */
.i-mail::before {
  content: "\e909"; }

.i-after-mail::after {
  content: "\e909"; }

/**
 * @icon .i-card
 * @markup
 *   <span class="i-card"></span>
 */
.i-card::before {
  content: "\e90a"; }

.i-after-card::after {
  content: "\e90a"; }

.i-after-refresh::after {
  content: "\e90b"; }

html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; }

.o-canvas {
  width: 90%;
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
  transition: all ease-in 0.2s; }

.o-canvas_small {
  max-width: 720px; }

/**
 * Class: o-text | <body> | <p>
 * @description  
 * Estilos tipográficos por defecto aplicados al body.  
 * Usa la fuente INTL Headline Regular, asegurando legibilidad y consistencia entre dispositivos.  
 *  
 * ♣ Propiedades:
 * - Mobile: 16px | 1.4 | Uncut Sans 
 * - Desktop: 18px | 1.5 | Uncut Sans 
 *
 * @atom Body copy
 * @section 01. Estilos textos
 *
 * @markup
 * <p>Este es el texto por defecto del sistema tipográfico.</p>
 */
body,
.o-text {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.4;
  color: #000;
  letter-spacing: normal; }

/* Desktop */
@media (min-width: 768px) {
  body,
  .o-text {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.5; } }

i,
em,
.o-italic {
  font-style: italic; }

.o-center {
  text-align: center; }

.o-right {
  text-align: right; }

/**
* Class: Tag HTML | <u>
* @description  Representa texto que no está articulado y tiene un estilo diferente al texto normal, como palabras mal escritas o nombres propios.
*  ♣ Propiedades: underline-position under
* @atom Texto subrayado
* @section 01. Estilos textos
* @markup
*  <p class="o-text">
*	  Ad ea velit nisi aliquip <u>nostrud laboris laborum</u> aliquip laborum.
*  </p>
*/
u,
.o-underline {
  text-underline-position: under; }

.o-uppercase {
  text-transform: uppercase; }

/**
* Class: .o-bold | <strong>, <b>
* @description  define estilo negrilla para el texto.
*  ♣ Propiedades: 700
* @atom Texto negrilla
* @section 01. Estilos textos
* @markup
*  <p class="o-text">
*	  Ad ea velit nisi <span class="o-bold">aliquip nostrud laboris</span> laborum aliquip laborum.
*  </p>
*  <p class="o-text">
*	  <strong>Ad ea velit nisi aliquip nostrud laboris laborum aliquip laborum</strong>
*  </p>
*/
b,
strong,
.o-bold {
  font-weight: 700; }

.o-semi-bold {
  font-weight: 600; }

.o-medium {
  font-weight: 500; }

.o-primary {
  color: #941B7F; }

.o-dark {
  color: #000; }

.o-gray-700 {
  color: #4C5051; }

.o-white {
  color: #fff; }

.o-error {
  color: #CC0000; }

/**
 * @section Titles
 * @description  
 * Define los estilos tipográficos por defecto aplicados a elementos semánticos HTML: h1–h5.  
 *  
 * ♣ Font families:
 * - "INTL Headline" para títulos
 *
 * @responsive
 * - Mobile (<768px)
 * - Desktop (≥768px)
 *
 * @markup
 * <h1 class="o-title_xl">H1 – INTL Headline Medium</h1>
 * <h2 class="o-title_lg">H2 – INTL Headline Medium</h2>
 * <h3 class="o-title_md">H3 – INTL Headline Medium</h3>
 * <h4 class="o-title_sm">H4 – INTL Headline Medium</h4>
 * <h5 class="o-title_xs">H5 – INTL Headline Medium</h5>
 * <h6 class="o-title_xxs">H6 – INTL Headline Medium</h6>
 */
/* ***********************
   Headlines (h1–h6)
***************************/
/* --- Mobile --- */
h1,
h2,
h3,
h4,
h5 {
  font-family: "DM Sans", sans-serif;
  color: #000;
  letter-spacing: normal;
  line-height: 1.2;
  font-weight: 400; }

.o-title_xl {
  font-size: 32px;
  font-size: 2rem; }

.o-title_lg {
  font-size: 30px;
  font-size: 1.875rem; }

.o-title_md {
  font-size: 28px;
  font-size: 1.75rem; }

.o-title_sm {
  font-size: 24px;
  font-size: 1.5rem; }

.o-title_xs {
  font-size: 20px;
  font-size: 1.25rem; }

.o-title_xxs {
  font-size: 18px;
  font-size: 1.125rem; }

.o-hgroup {
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 40px;
  margin-bottom: 2.5rem;
  margin-left: auto; }

.o-hgroup_centered {
  max-width: 740px;
  max-width: 46.25rem;
  text-align: center; }

.o-hgroup__mb-24 {
  margin-bottom: 24px;
  margin-bottom: 1.5rem; }

/* --- Desktop --- */
@media (min-width: 768px) {
  .o-title_xl {
    font-size: 48px;
    font-size: 3rem; }
  .o-title_lg {
    font-size: 40px;
    font-size: 2.5rem; }
  .o-title_md {
    font-size: 36px;
    font-size: 2.25rem; }
  .o-title_sm {
    font-size: 32px;
    font-size: 2rem; }
  .o-title_xs {
    font-size: 24px;
    font-size: 1.5rem; }
  .o-title_xxs {
    font-size: 20px;
    font-size: 1.25rem; } }

@media only screen and (min-width: 1024px) {
  .o-hgroup_space-80 {
    margin-top: 40px;
    margin-top: 2.5rem; } }

@media only screen and (min-width: 1024px) {
  .o-hgroup_space-80 {
    margin-top: 80px;
    margin-top: 5rem; } }

/**
 * Body text
 *
 * Sistema de tamaños para texto corrido (body).
 *
 * Las clases `o-body_*` definen el tamaño del texto
 * según el breakpoint:
 *
 * - Mobile (default)
 * - Desktop (≥ 767px)
 *
 * Ejemplo:
 * <p class="o-body_m">
 *   Texto base del sistema
 * </p>
 *
 * Notas:
 * - Estas clases solo controlan el `font-size`
 *
 */
.o-body_xl {
  font-size: 20px;
  font-size: 1.25rem; }

.o-body_l {
  font-size: 18px;
  font-size: 1.125rem; }

.o-body_m {
  font-size: 16px;
  font-size: 1rem; }

.o-body_s {
  font-size: 14px;
  font-size: 0.875rem; }

.o-body_xs {
  font-size: 12px;
  font-size: 0.75rem; }

/* --- Desktop --- */
@media (min-width: 767px) {
  .o-body_xl {
    font-size: 24px;
    font-size: 1.5rem; }
  .o-body_l {
    font-size: 20px;
    font-size: 1.25rem; }
  .o-body_m {
    font-size: 18px;
    font-size: 1.125rem; }
  .o-body_s {
    font-size: 16px;
    font-size: 1rem; }
  .o-body_xs {
    font-size: 14px;
    font-size: 0.875rem; } }

*:focus {
  outline: 0; }

button {
  padding: 0;
  line-height: inherit;
  font-family: "DM Sans", sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
  outline-width: 0;
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: all 0.6s; }
  button:focus {
    outline-width: 0; }
  button:disabled {
    cursor: default; }

/**
 * Class: o-btn
 * @atom Botón base
 * @section 03. Botones
 * @description
 *
 *  Este es el botón principal y sirve como base para variaciones como:
 *   - `.o-btn_secondary`: botón principal.
 *
 * @markup
 *  <button class="o-btn" type="button">
 *    Botón base
 *  </button>
 */
.o-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 135px;
  padding: 12px 44px;
  border: 2px solid;
  border-radius: 50px;
  text-decoration: none;
  text-align: center;
  font-weight: 600; }
  .o-btn:disabled {
    opacity: 0.3;
    pointer-events: none; }
  .o-btn::after, .o-btn::before {
    font-size: 18px; }

/**
 * Class: o-btn_primary
 * @atom Botón Primario
 * @section 03. Botones
 *
 * @markup
 *  <button class="o-btn o-btn_primary" type="button">
 *    Botón Primario
 *  </button>
 */
.o-btn_primary {
  border-color: #941B7F;
  color: #fff;
  background-color: #941B7F; }
  .o-btn_primary:hover, .o-btn_primary:focus, .o-btn_primary:active {
    color: #941B7F;
    background-color: #fff; }
  .o-btn_primary:disabled {
    color: #B0B1B2;
    border-color: #B0B1B2;
    background-color: #fff; }

/**
 * Class: o-btn_secondary
 * @atom Botón secundario
 * @section 03. Botones
 *
 * @markup
 *  <button class="o-btn o-btn_secondary" type="button">
 *    Botón Secundario
 *  </button>
 */
.o-btn_secondary {
  border-color: #941B7F;
  color: #941B7F;
  background-color: #fff; }
  .o-btn_secondary:hover, .o-btn_secondary:focus, .o-btn_secondary:active {
    color: #fff;
    background-color: #941B7F; }
  .o-btn_secondary:disabled {
    color: #B0B1B2;
    border-color: #B0B1B2;
    background-color: transparent; }

.o-btn_full {
  width: 100% !important; }

.o-btn_transparent {
  border-color: transparent; }

.o-btn_space {
  padding-right: 16px;
  padding-right: 1rem;
  padding-left: 16px;
  padding-left: 1rem; }

.o-btn_width {
  min-width: 330px;
  min-width: 20.625rem; }

/**
 * Class: o-link
 * @atom Enlace base
 * @section 04. Enlaces
 * @description
 *  Define el estilo base de los enlaces con iconos y sin iconos.
 *
 * @markup
 *  <a href="#" class="o-link">
 *    <span class="o-link_text">Enlace con ícono</span>
 *  </a>
 */
.o-link {
  display: flex;
  align-items: center;
  width: fit-content;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.1;
  color: #941B7F;
  transition: 0.3s all ease-in-out; }
  .o-link:hover, .o-link:focus, .o-link:active {
    color: #12949F; }
    .o-link:hover::after, .o-link:focus::after, .o-link:active::after {
      transform: translateX(10px); }
    .o-link:hover::before, .o-link:focus::before, .o-link:active::before {
      transform: translateX(-10px); }
  .o-link.is-disabled, .o-link:disabled {
    color: #B0B1B2;
    pointer-events: none; }
    .o-link.is-disabled::after, .o-link.is-disabled::before, .o-link:disabled::after, .o-link:disabled::before {
      color: #B0B1B2; }
  .o-link::after, .o-link::before {
    display: inline-block;
    font-size: 18px;
    font-size: 1.125rem;
    color: #12949F;
    transition: all 0.2s ease; }
  .o-link::after {
    margin-left: 8px;
    margin-left: 0.5rem; }
  .o-link::before {
    margin-right: 8px;
    margin-right: 0.5rem; }

.o-link_dark {
  color: #000; }

.o-link_centered {
  justify-content: center; }

@media only screen and (max-width: 510px) {
  .o-btn_width {
    min-width: 200px;
    min-width: 12.5rem; } }

/*------------------------------------*\
  Patterns Elements
    #Styles for Forms
\*------------------------------------*/
/**
 * Form fields
 *
 * Sistema base de campos de formulario.
 *
 * Este patrón define la estructura, estados y comportamiento visual
 * de los siguientes elementos:
 *
 * - Radio button
 * - Checkbox
 * - Select
 * - Input de texto
 *
 * Todos los campos deben construirse usando el wrapper `.o-field`
 * y sus elementos internos para garantizar consistencia visual,
 * accesibilidad y correcta aplicación de estados.
 *
 * ---
 *
 * Estructura base:
 *
 * <div class="o-field">
 *   <input type="radio|checkbox" id="id-ejemplo">
 *   <label class="o-field__label" for="id-ejemplo">
 *     Etiqueta
 *   </label>
 * </div>
 *
 * <div class="o-field">
 *   <label class="o-field__label" for="input-id">
 *     Etiqueta
 *   </label>
 *
 *   <div class="o-field__wrap">
 *     <input type="text" id="input-id">
 *     <!-- o -->
 *     <select id="select-id"></select>
 *   </div>
 *
 *   <p class="o-field__help">
 *     Texto de ayuda
 *   </p>
 * </div>
 *
 * ---
 *
 * Estados:
 *
 * Los estados se controlan aplicando clases al contenedor `.o-field`:
 *
 * - `.is-error`   → estado de error (borde rojo, icono de error, texto de ayuda en rojo)
 * - `.is-succes`  → estado de éxito (borde verde, icono de check, texto de ayuda en verde)
 *
 * Ejemplo:
 *
 * <div class="o-field is-error">
 *   ...
 * </div>
 *
 *
 * Accesibilidad:
 *
 * - El `label` siempre debe estar asociado al `input` mediante `for` / `id`
 * - El `input` real nunca se elimina (solo se oculta visualmente)
 *
 */
input,
select,
textarea {
  outline: none; }

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

fieldset {
  border: none;
  padding: 0;
  margin: 0; }

.o-form__fieldset {
  padding: 0 4px; }

.o-form__field:not(.o-form__field:last-of-type) {
  margin-bottom: 8px; }

.o-form__row .o-form__field {
  flex: 50%; }

.o-form__row_3 .o-form__field {
  flex: 30%; }

.o-form__field_disabled input,
.o-form__field_disabled select {
  border-color: #B0B1B2;
  background-color: rgba(214, 215, 217, 0.5);
  cursor: not-allowed;
  pointer-events: none; }

.is-error .o-form__input, .is-error .o-form__select select {
  border-color: #CC0000; }

.o-form__input:focus,
.o-form__select select:focus {
  border: 2px solid #12949F; }

.o-form__input,
input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 4px;
  border: 1px solid #B0B1B2;
  font-size: 16px;
  color: #4C5051; }
  .is-error .o-form__input, .is-error input {
    border-color: #CC0000; }

.o-form__select {
  position: relative;
  display: flex;
  align-items: center; }
  .o-form__select select {
    width: 100%;
    padding-top: 12px;
    padding-top: 0.75rem;
    padding-bottom: 12px;
    padding-bottom: 0.75rem;
    padding-right: 30px;
    padding-right: 1.875rem;
    padding-left: 16px;
    padding-left: 1rem;
    border-radius: 4px;
    border-color: #B0B1B2;
    font-size: 16px;
    color: #4C5051; }
    .o-form__select select:disabled {
      border-color: #D6D7D9;
      background-color: #F5F7F9;
      cursor: not-allowed; }
  .o-form__select::after {
    position: absolute;
    right: 16px;
    font-size: 14px;
    pointer-events: none; }

.o-field {
  position: relative;
  margin-bottom: 16px; }
  .o-field input[type="radio"],
  .o-field input[type="checkbox"] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
    cursor: pointer; }
    .o-field input[type="radio"] + .o-field__label,
    .o-field input[type="checkbox"] + .o-field__label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 400;
      font-size: 16px; }
      .o-field input[type="radio"] + .o-field__label:before,
      .o-field input[type="checkbox"] + .o-field__label:before {
        content: "";
        font-family: "hyl-wai";
        position: relative;
        display: inline-block;
        min-width: 24px;
        min-width: 1.5rem;
        min-height: 24px;
        min-height: 1.5rem;
        border: 2px solid #B0B1B2;
        text-align: center;
        cursor: pointer;
        background-color: #fff;
        transition: all 0.4s ease;
        color: #fff; }
    .o-field input[type="radio"]:hover + .o-field__label::before,
    .o-field input[type="checkbox"]:hover + .o-field__label::before {
      border-color: #12949F; }
  .o-field input[type="radio"] + .o-field__label:before {
    content: "";
    border-radius: 50%; }
  .o-field input[type="radio"] + .o-field__label::after {
    content: "";
    position: absolute;
    left: 7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #fff; }
  .o-field input[type="radio"]:checked + .o-field__label:before {
    border-color: #12949F;
    background-color: #12949F; }
  .o-field input[type="checkbox"] {
    display: inline-flex;
    align-items: center;
    justify-content: center; }
    .o-field input[type="checkbox"] + .o-field__label:before {
      content: "\e902";
      border-radius: 2px;
      font-family: "hyl-wai";
      font-weight: 700; }
    .o-field input[type="checkbox"]:checked + .o-field__label:before {
      border-color: #12949F;
      color: #fff;
      background-color: #12949F; }

.o-field__radio {
  position: relative; }
  .o-field__radio:first-of-type {
    margin-top: 8px; }
  .o-field__radio:not(.o-field__radio:last-of-type) {
    margin-bottom: 8px; }

.o-form__actions {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 16px; }

.o-form__actions_column {
  flex-direction: column; }

.o-form__back-btn::before {
  transform: rotate(180deg); }

.o-form__back-btn:hover::before {
  transform: rotate(180deg); }

.o-field__flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  gap: 24px;
  gap: 1.5rem; }

.o-field__help {
  font-size: 14px;
  font-size: 0.875rem;
  color: #6E7373;
  transition: all 0.4s ease; }
  .o-field__help.js-form-error {
    opacity: 0;
    transition: all 0.2s ease-in; }
  .is-error .o-field__help {
    font-size: 14px;
    font-size: 0.875rem;
    color: #CC0000;
    transition: all 0.4s ease;
    opacity: 1; }
  .is-succes .o-field__help {
    color: #007E33;
    transition: all 0.4s ease; }

@media only screen and (max-width: 360px) {
  .o-form__actions {
    flex-wrap: wrap;
    justify-content: center; } }

@media only screen and (max-width: 1023px) {
  .o-form__row {
    margin-bottom: 16px;
    margin-bottom: 1rem; }
  .o-form__actions {
    margin-bottom: 16px;
    margin-bottom: 1rem; } }

@media only screen and (min-width: 1024px) {
  .o-form__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px; } }

.o-surface_secondary-100 {
  background-color: #E5F6F9; }

.o-surface_gray-100 {
  background-color: #F5F7F9; }

.o-surface_white {
  background-color: #fff; }

.o-section_bg {
  position: relative; }

.o-section_bg__image {
  width: fit-content;
  margin-left: auto; }

/*------------------------------------*\
  Media querys
\*------------------------------------*/
/**
* Mobile | VP: max-width 768px
*/
@media only screen and (max-width: 767px) {
  .o-section {
    margin-top: 40px;
    margin-top: 2.5rem;
    margin-bottom: 40px;
    margin-bottom: 2.5rem; }
  .o-surface {
    padding-top: 40px;
    padding-top: 2.5rem;
    padding-bottom: 40px;
    padding-bottom: 2.5rem; }
  .o-section_bg__image {
    max-width: 250px;
    max-width: 15.625rem; } }

/**
* Desktop | VP: min-width 768px
*/
@media only screen and (min-width: 768px) {
  .o-section {
    margin-top: 80px;
    margin-top: 5rem;
    margin-bottom: 80px;
    margin-bottom: 5rem; }
  .o-surface {
    padding-top: 80px;
    padding-top: 5rem;
    padding-bottom: 80px;
    padding-bottom: 5rem; } }

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .o-section_bg__image {
    max-width: 320px;
    max-width: 20rem; } }

.o-square {
  padding: 24px 16px;
  padding: 1.5rem 1rem;
  border-radius: 16px;
  border-radius: 1rem;
  border: 1px solid #D6D7D9;
  background-color: #fff;
  transition: all 0.4s ease-in-out; }

.o-square_border {
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to bottom, #12949F, #941B7F) border-box;
  box-shadow: 2px 2px 16px 0px rgba(0, 0, 0, 0.25); }

.o-square_gradient:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  border-radius: 16px;
  background: linear-gradient(140deg, #fff 35%, #E5F6F9 55%, #12949F 200%); }

@media only screen and (min-width: 1024px) {
  .o-square_big {
    padding: 64px 80px;
    padding: 4rem 5rem; }
  .o-square-space {
    margin-bottom: 32px;
    margin-bottom: 2rem; } }

@media only screen and (max-width: 1023px) {
  .o-square_big {
    padding: 24px;
    padding: 1.5rem; }
  .o-square-space {
    margin-bottom: 24px;
    margin-bottom: 1.5rem; } }

.o-spinner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 16px;
  background: rgba(214, 215, 217, 0.3);
  backdrop-filter: blur(1px);
  opacity: 0;
  transition: all 0.4s ease-in-out;
  z-index: -1; }
  .o-spinner.is-spinner-show {
    opacity: 1;
    z-index: 2; }

.o-spinner__container {
  flex-direction: column;
  gap: 15px; }

.o-spinner__dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #12949F;
  animation: pulse 1s ease-in-out infinite; }

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.7; }
  50% {
    transform: scale(1.5);
    opacity: 1; }
  100% {
    transform: scale(1);
    opacity: 0.7; } }

.o-spinner__title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #941B7F; }

.o-alert {
  border-radius: 16px;
  border-radius: 1rem;
  border: 1px solid;
  padding: 12px 20px;
  padding: 0.75rem 1.25rem;
  margin-top: 24px;
  margin-top: 1.5rem;
  margin-bottom: 24px;
  margin-bottom: 1.5rem; }

.o-alert_mw {
  max-width: 500px;
  margin-right: auto;
  margin-left: auto; }

.o-alert_success {
  color: #007E33;
  border-color: rgba(0, 126, 51, 0.3);
  background-color: rgba(0, 126, 51, 0.2); }
  .o-alert_success .o-alert__txt {
    background-color: transparent; }

.o-alert_error {
  border-color: rgba(204, 0, 0, 0.3);
  background-color: rgba(204, 0, 0, 0.2); }
  .o-alert_error .o-alert__txt {
    background-color: transparent; }

.o-alert_warn {
  color: #FDBA74;
  border-color: rgba(253, 186, 116, 0.3);
  background-color: rgba(253, 186, 116, 0.2); }
  .o-alert_warn .o-alert__txt {
    background-color: transparent; }

.o-alert_secondary {
  border-color: rgba(18, 85, 103, 0.3);
  color: #125567;
  background-color: #E5F6F9; }

.o-alert_tertiary {
  margin-bottom: 0;
  border-color: #F7D2F9;
  background-color: #FBE9FC;
  font-size: 16px;
  font-size: 1rem; }

.o-alert__ico {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  width: 48px;
  width: 3rem;
  min-width: 48px;
  min-width: 3rem;
  height: 48px;
  height: 3rem;
  border-radius: 50%;
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
  margin-right: 8px;
  margin-right: 0.5rem;
  font-size: 24px;
  font-size: 1.5rem; }
  .o-alert_error .o-alert__ico {
    background-color: rgba(204, 0, 0, 0.2); }
    .o-alert_error .o-alert__ico::before {
      color: rgba(204, 0, 0, 0.4); }
  .o-alert__ico.o-alert__ico_secondary {
    color: #12949F;
    background-color: rgba(18, 148, 159, 0.2); }
  .o-alert_success .o-alert__ico {
    background-color: rgba(0, 126, 51, 0.2); }
    .o-alert_success .o-alert__ico::before {
      color: rgba(0, 126, 51, 0.4); }
  .o-alert_warn .o-alert__ico {
    background-color: rgba(253, 186, 116, 0.2); }
    .o-alert_warn .o-alert__ico::before {
      color: rgba(253, 186, 116, 0.4); }
  .o-alert__txt .o-alert__ico {
    color: #12949F;
    background-color: #12949f45; }

.o-alert__ico_caption {
  width: 64px;
  width: 4rem;
  height: 64px;
  height: 4rem; }
  .o-alert__ico_caption::before {
    font-size: 32px; }

.o-alert_error .o-alert__txt {
  color: #CC0000; }

.o-dropdown:not(.o-dropdown:last-of-type) {
  margin-bottom: 16px;
  margin-bottom: 1rem; }

.o-dropdown__btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  gap: 16px;
  gap: 1rem;
  text-align: left; }
  .o-dropdown__btn::before {
    content: "\e902";
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    min-width: 24px;
    min-width: 1.5rem;
    min-height: 24px;
    min-height: 1.5rem;
    border: 2px solid #12949F;
    border-radius: 50%;
    font-family: "hyl-wai";
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #12949F;
    transition: all 0.3s ease-in; }
    .is-dropdown-open .o-dropdown__btn::before {
      color: #fff;
      background-color: #12949F; }
  .o-dropdown__btn::after {
    font-size: 14px;
    font-size: 0.875rem;
    color: #6E7373;
    transition: all 0.3s ease-in-out; }
    .is-dropdown-open .o-dropdown__btn::after {
      transform: rotate(-180deg); }

.o-dropdown__content {
  padding: 16px 0;
  padding: 1rem 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease-in;
  /* Estado abierto */ }
  .is-dropdown-open .o-dropdown__content {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.3s ease-in; }
  .o-dropdown__content ul {
    margin-top: 16px;
    margin-top: 1rem;
    padding-left: 24px;
    padding-left: 1.5rem; }
    .o-dropdown__content ul li {
      list-style-type: disc; }
      .o-dropdown__content ul li:not(.o-dropdown__content ul li:last-of-type) {
        margin-bottom: 8px;
        margin-bottom: 0.5rem; }

.o-dropdown__wrap {
  max-height: 0; }

.o-more-content {
  display: block;
  overflow: hidden;
  transition: max-height 0.5s ease; }
  .o-more-content ul {
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 860px;
    max-width: 53.75rem;
    column-gap: 32px;
    column-gap: 2rem;
    row-gap: 8px;
    row-gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none; }
  .o-more-content li {
    position: relative;
    display: inline-block;
    vertical-align: top; }
    .o-more-content li:not(.o-more-content li:last-of-type)::before {
      content: "";
      position: absolute;
      top: 0;
      right: -17px;
      right: -1.0625rem;
      bottom: 0;
      min-width: 4px;
      min-width: 0.25rem;
      max-height: 4px;
      max-height: 0.25rem;
      margin: auto;
      border-radius: 100%;
      background-color: #000; }

.o-more-content__items {
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 860px;
  max-width: 53.75rem;
  column-gap: 32px;
  column-gap: 2rem;
  row-gap: 8px;
  row-gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none; }

.o-more-content__item {
  position: relative;
  display: inline-block;
  vertical-align: top; }
  .o-more-content__item:not(.o-more-content__item:last-of-type)::before {
    content: "";
    position: absolute;
    top: 0;
    right: -17px;
    right: -1.0625rem;
    bottom: 0;
    min-width: 4px;
    min-width: 0.25rem;
    max-height: 4px;
    max-height: 0.25rem;
    margin: auto;
    border-radius: 100%;
    background-color: #000; }

.o-more-content__btn::after {
  transition: all 0.2s ease-in; }

.o-more-content__btn.is-expanded::after {
  transform: rotate(-180deg); }

/**
* Desktop | VP: min-width 1024px
*/
@media only screen and (min-width: 1024px) {
  .o-more-content-wrapp {
    display: flex; } }

.o-tag {
  display: inline-block;
  border: 1px solid;
  border-radius: 50px;
  border-radius: 3.125rem;
  padding: 6px 18px;
  padding: 0.375rem 1.125rem;
  font-size: 16px;
  font-size: 1rem; }

.o-tag_primary {
  border-color: #941B7F;
  color: #941B7F; }

.o-tag-rectangle {
  position: absolute;
  right: 0;
  padding-top: 8px;
  padding-top: 0.5rem;
  padding-right: 16px;
  padding-right: 1rem;
  padding-bottom: 8px;
  padding-bottom: 0.5rem;
  padding-left: 16px;
  padding-left: 1rem;
  font-size: 14px;
  font-size: 0.875rem;
  color: #fff;
  background-color: #12949F;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px; }

.o-paginator {
  position: static !important;
  padding: 24px 0;
  padding: 1.5rem 0; }

.o-paginator .swiper-pagination-bullet {
  width: 12px;
  width: 0.75rem;
  height: 12px;
  height: 0.75rem;
  background-color: #B0B1B2; }

.o-paginator .swiper-pagination-bullet-active {
  background-color: #941B7F; }

@media only screen and (min-width: 1024px) {
  .o-layout-form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
    gap: 32px;
    gap: 2rem; }
  .o-layout-form__box {
    position: relative;
    flex: 60%; }
    .o-layout-form__box .swiper-slide {
      width: 100% !important; }
  .o-layout-form__summary {
    flex: 30%; } }

.o-radio-card {
  margin-bottom: 16px; }

.o-radio-card__box {
  position: relative; }

.o-radio-card__input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  cursor: pointer; }
  .o-radio-card__input:checked + .o-radio-card__label {
    border-color: #12949F;
    box-shadow: 2px 2px 16px 0px rgba(0, 0, 0, 0.25); }
    .o-radio-card__input:checked + .o-radio-card__label .o-radio-card__ico {
      border: 5px solid #12949F; }

.o-radio-card__label {
  display: block;
  width: 100%;
  border: 1px solid #D6D7D9;
  padding: 16px;
  font-size: 20px;
  transition: all 0.3s ease-in-out; }

.o-radio-card__ico {
  display: block;
  width: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 50%;
  border: 1px solid #B0B1B2;
  transition: all 0.3s ease-in-out; }

@media only screen and (max-width: 1023px) {
  .o-radio-card__box:not(.o-radio-card__box:last-of-type) {
    margin-bottom: 16px; } }

@media only screen and (min-width: 1024px) {
  .o-radio-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 24px; }
  .o-radio-card__box {
    flex: 50%; } }

.s-richtext h1 {
  margin-bottom: 16px;
  margin-bottom: 1rem;
  font-size: 32px;
  font-size: 2rem; }

.s-richtext h4 {
  font-size: 20px;
  font-size: 1.25rem;
  margin-bottom: 24px;
  margin-bottom: 1.5rem; }

.s-richtext h5 {
  font-size: 20px;
  font-size: 1.25rem;
  margin-bottom: 24px;
  margin-bottom: 1.5rem; }

.s-richtext mark {
  color: #941B7F;
  background-color: transparent; }

.s-richtext a {
  color: #941B7F; }

.s-richtext ol,
.s-richtext ul {
  margin-top: 16px;
  margin-top: 1rem; }

.s-richtext ul:not(.o-dropdown .s-richtext ul) {
  margin-left: 24px;
  margin-left: 1.5rem;
  list-style: none; }

.s-richtext li:not(.o-dropdown .s-richtext li) {
  position: relative;
  list-style: none;
  padding-left: 24px;
  padding-left: 1.5rem;
  margin-bottom: 16px;
  margin-bottom: 1rem; }
  .s-richtext li:not(.o-dropdown .s-richtext li)::before {
    content: "\e902";
    position: absolute;
    left: 0;
    margin-top: 2px;
    margin-top: 0.125rem;
    font-family: "hyl-wai";
    font-weight: 700;
    font-size: 16px;
    font-size: 1rem;
    color: #12949F; }

/**
* Desktop | VP: min-width 768px
*/
@media only screen and (min-width: 768px) {
  .s-richtext h1 {
    margin-bottom: 24px;
    margin-bottom: 1.5rem;
    font-size: 48px;
    font-size: 3rem; }
  .s-richtext h4 {
    font-size: 24px;
    font-size: 1.5rem; }
  .s-richtext h5 {
    font-size: 24px;
    font-size: 1.5rem; } }

.c-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding: 12px 0;
  padding: 0.75rem 0;
  z-index: 2; }
  .c-header.is-sticky {
    position: sticky;
    background: #941B7F;
    z-index: 1000; }

.c-header__content,
.c-header__actions {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex; }

.c-header__content,
.c-header__actions {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center; }

.c-header__content {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between; }

.c-header__actions {
  gap: 32px;
  gap: 2rem; }

.c-header__btn {
  padding: 12px 16px;
  padding: 0.75rem 1rem;
  border-radius: 50px;
  border-radius: 3.125rem;
  background-color: transparent; }
  .is-sticky .c-header__btn {
    background-color: #fff; }
    .is-sticky .c-header__btn::before {
      color: #941B7F; }

@media only screen and (min-width: 1024px) {
  .c-header__nav .o-btn {
    display: none; }
  .c-header__burger {
    display: none; }
  .c-header__actions {
    flex-direction: row-reverse; }
  .is-sticky .c-header__btn::after {
    color: #941B7F; }
  .c-header__links {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 32px;
    gap: 2rem; }
  .is-sticky .c-header__link {
    color: #fff; } }

@media only screen and (max-width: 1023px) {
  .is-header-show-body {
    overflow: hidden; }
  .is-header-show .c-header__figure, .is-header-show .c-header__burger {
    position: relative;
    z-index: 10; }
  .c-header__burger {
    font-size: 24px;
    font-size: 1.5rem; }
    .is-header-show .c-header__burger {
      color: #fff; }
      .is-header-show .c-header__burger::before {
        content: "\e908"; }
    .is-sticky .c-header__burger {
      color: #fff; }
  .c-header__nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0 20px;
    padding: 0 1.25rem;
    background: #941B7F;
    transform: translateY(-100%);
    transition: all 0.2s ease-in; }
    .is-header-show .c-header__nav {
      transform: translateY(0);
      z-index: 3; }
  .c-header__links,
  .c-header__link {
    width: 100%; }
  .c-header__links {
    margin-top: 32px;
    margin-top: 2rem; }
  .c-header__link {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    padding: 24px 0;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff; }
    .c-header__link:first-of-type {
      border-top: 1px solid rgba(255, 255, 255, 0.2); } }

.c-hero {
  background: #125567;
  background: linear-gradient(335deg, #0097af 0%, #e5f6f9 62%, white 100%); }

.c-hero__box {
  position: relative; }

.c-hero__list {
  list-style: none; }

.c-hero__list__item:not(:last-of-type) {
  margin-bottom: 8px;
  margin-bottom: 0.5rem; }

.c-hero__list__item::before {
  content: "";
  display: inline-block;
  width: 28px;
  width: 1.75rem;
  height: 28px;
  height: 1.75rem;
  border-radius: 50%;
  background-color: #12949F;
  background-image: var(--icon);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 8px;
  margin-right: 0.5rem;
  vertical-align: middle; }

.c-hero__form {
  margin-top: 24px;
  margin-top: 1.5rem; }
  .c-hero__form .swiper {
    padding-bottom: 8px;
    padding-bottom: 0.5rem; }

@media only screen and (min-width: 1024px) {
  .c-hero {
    position: relative;
    padding: 110px 0 56px;
    padding: 6.875rem 0 3.5rem; }
    .c-hero .s-richtext p {
      font-size: 24px; }
  .c-hero__content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
    gap: 40px;
    gap: 2.5rem; }
  .c-hero__caption {
    max-width: 500px;
    max-width: 31.25rem; }
    .c-hero__caption .o-btn {
      position: relative;
      z-index: 2; }
  .c-hero__box {
    flex: 50%;
    max-width: 640px;
    max-width: 40rem;
    z-index: 2; }
  .c-hero__box__layout {
    max-width: 432px;
    max-width: 27rem;
    margin: 0 auto; }
  .c-hero__list {
    position: relative;
    z-index: 2; }
  .c-hero__form {
    margin-top: 24px;
    margin-top: 1.5rem; }
  .c-hero__bg {
    position: absolute;
    bottom: 0;
    right: 400px;
    right: 25rem;
    left: 0;
    margin: 0 auto; } }

@media only screen and (min-width: 768px) {
  .c-hero__bg {
    max-width: 500px;
    max-width: 31.25rem; } }

@media only screen and (max-width: 1023px) {
  .c-hero {
    padding: 80px 0 40px;
    padding: 5rem 0 2.5rem; }
    .c-hero .s-richtext p {
      font-size: 20px; }
  .c-hero__form {
    margin-top: 16px;
    margin-top: 1rem; }
  .c-hero__bg {
    margin-right: 0;
    margin-left: auto; } }

@media only screen and (max-width: 767px) {
  .c-hero__bg {
    max-width: 230px;
    max-width: 14.375rem; } }

.c-stepper,
.c-stepper__item,
.c-stepper__container,
.c-stepper__num {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center; }

.c-stepper {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  list-style: none; }
  .is-header-show-body .c-stepper {
    position: relative;
    z-index: -1; }

.c-stepper__item {
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  flex: 30%;
  cursor: pointer;
  pointer-events: none; }
  .c-stepper__item.is-clickeable {
    pointer-events: all; }

.c-stepper__container {
  position: relative;
  width: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center; }
  .c-stepper__container::before {
    content: "";
    position: absolute;
    left: 0;
    width: 0;
    height: 2px;
    height: 0.125rem;
    background-color: #4C5051;
    z-index: 2;
    transition: all 0.2s ease-in; }
  .is-active .c-stepper__container::before {
    width: 50%; }
  .is-checked .c-stepper__container::before {
    width: 100%; }

.c-stepper__progress {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  height: 0.125rem;
  margin: auto;
  background-color: #D6D7D9; }

.c-stepper__num {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  min-width: 32px;
  min-width: 2rem;
  min-height: 32px;
  min-height: 2rem;
  border-radius: 50%;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1;
  color: #6E7373;
  background-color: #D6D7D9;
  z-index: 2;
  transition: all 0.2s ease-in; }
  .c-stepper__num::before {
    content: attr(data-stepper-number);
    position: absolute;
    font-weight: 700;
    font-size: 14px;
    font-size: 0.875rem;
    transition: all 0.3s ease-in; }
  .is-active .c-stepper__num {
    color: #fff;
    background-color: #12949F; }
  .is-checked .c-stepper__num {
    background-color: #941B7F; }
    .is-checked .c-stepper__num::before {
      content: "\e902";
      position: static;
      font-family: "hyl-wai";
      color: #fff; }

.c-stepper__text {
  margin-top: 4px;
  margin-top: 0.25rem;
  font-size: 14px;
  font-size: 0.875rem;
  color: #6E7373; }

@media only screen and (max-width: 1023px) {
  .c-stepper__text {
    display: none; } }

.c-cards {
  list-style: none; }

.c-cards__item {
  padding: 40px;
  padding: 2.5rem;
  border-radius: 16px;
  border-radius: 1rem;
  border: 1px solid #F5F7F9;
  background-color: #F5F7F9; }

.c-cards__item_neutro {
  border-color: #D6D7D9;
  background-color: #fff; }

.c-cards__item-head {
  margin-bottom: 24px;
  margin-bottom: 1.5rem; }

.c-cards__item-ico {
  max-width: 72px;
  max-width: 4.5rem;
  max-height: 72px;
  max-height: 4.5rem;
  min-height: 72px;
  min-height: 4.5rem;
  border-radius: 50%;
  margin-bottom: 16px;
  margin-bottom: 1rem;
  background-color: #12949F; }

@media only screen and (max-width: 1023px) {
  .c-cards__item:not(.c-cards__item:last-of-type) {
    margin-bottom: 16px;
    margin-bottom: 1rem; } }

@media only screen and (min-width: 1024px) {
  .c-cards {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
    gap: 32px;
    gap: 2rem; }
  .c-cards__item {
    flex: 33%; } }

.c-banner,
.c-banner__list-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex; }

.c-banner__figure {
  max-width: 584px;
  max-width: 36.5rem; }

.c-banner__list {
  margin-left: 24px;
  margin-left: 1.5rem;
  list-style: none; }

.c-banner__list-item {
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  align-items: flex-start;
  gap: 8px;
  gap: 0.5rem;
  margin-bottom: 16px;
  margin-bottom: 1rem; }
  .c-banner__list-item::before {
    content: "\e902";
    font-family: "hyl-wai";
    font-weight: 700;
    font-size: 16px;
    font-size: 1rem;
    color: #12949F; }

@media only screen and (min-width: 1024px) {
  .c-banner {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
    gap: 72px;
    gap: 4.5rem; }
  .c-banner_left {
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row-reverse;
    -moz-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse; }
  .c-banner__content {
    max-width: 510px;
    max-width: 31.875rem; } }

@media only screen and (max-width: 1023px) {
  .c-banner {
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column-reverse;
    -moz-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse; }
  .c-banner__figure {
    margin: 0 auto 24px auto;
    margin: 0 auto 1.5rem auto; } }

.c-comparative-cards {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex; }

/**
* Desktop
*/
@media only screen and (min-width: 1024px) {
  .c-comparative-cards {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    align-items: flex-start;
    gap: 32px;
    gap: 2rem; }
    .c-comparative-cards > * {
      flex: 50%; } }

/**
* Mobile
*/
@media only screen and (max-width: 1023px) {
  .c-comparative-cards {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    gap: 1rem; } }

.c-accordeon__btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  align-items: flex-start;
  gap: 24px;
  gap: 1.5rem;
  position: relative;
  width: 100%;
  padding: 24px 0;
  padding: 1.5rem 0;
  border-bottom: 1px solid #D6D7D9;
  text-align: left;
  transition: all 0.2s ease-in-out; }
  .is-dropdown-open .c-accordeon__btn {
    border-color: transparent;
    padding-bottom: 0; }
    .is-dropdown-open .c-accordeon__btn:hover {
      border-color: transparent; }
  .c-accordeon__btn:hover {
    border-color: #12949F; }
  .c-accordeon__btn::after {
    position: absolute;
    right: 0;
    bottom: 24px;
    bottom: 1.5rem;
    font-size: 16px;
    font-size: 1rem;
    color: #6E7373;
    transition: all 0.3s ease-in-out; }
    .is-dropdown-open .c-accordeon__btn::after {
      bottom: 10px;
      bottom: 0.625rem;
      transform: rotate(-180deg); }

.c-accordeon__content {
  padding: 24px 0;
  padding: 1.5rem 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease-in;
  border-bottom: 1px solid transparent;
  /* Estado abierto */ }
  .is-dropdown-open .c-accordeon__content {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.3s ease-in;
    border-color: #12949F; }

.c-footer {
  padding: 56px 0;
  padding: 3.5rem 0;
  background-color: #941B7F; }

.c-footer-space {
  margin-bottom: 24px;
  margin-bottom: 1.5rem; }

.c-footer__link {
  display: inline-block;
  text-decoration: none; }
  .c-footer__link:not(.c-footer__link:last-of-type) {
    margin-right: 8px;
    margin-right: 0.5rem; }
  .c-footer__link:hover {
    text-decoration: underline; }

.c-footer__figure {
  width: 168px;
  width: 10.5rem; }
  .c-footer__figure * {
    width: 100%; }

@media only screen and (min-width: 1024px) {
  .c-footer__container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center; }
  .c-footer__box {
    flex: 50%; } }

.c-summary {
  background: linear-gradient(342deg, #0097af -38%, #e5f6f9 47%, white 100%); }

.c-summary__info {
  border: 1px solid #F5F7F9;
  border-radius: 8px;
  border-radius: 0.5rem;
  padding: 16px;
  padding: 1rem;
  background-color: #fff; }

.c-summary__info__item {
  padding-top: 12px;
  padding-top: 0.75rem;
  padding-bottom: 12px;
  padding-bottom: 0.75rem; }
  .c-summary__info__item:last-of-type {
    padding-bottom: 0 !important; }
  .c-summary__info__item:first-of-type {
    padding-top: 0; }
  .c-summary__info__item:not(.c-summary__info__item:last-of-type) {
    border-bottom: 1px solid #D6D7D9; }

.c-summary__figure {
  position: relative; }

.c-summary__alert::before {
  display: block;
  color: #941B7F;
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
  font-size: 18px;
  font-size: 1.125rem; }

@media only screen and (max-width: 1023px) {
  .c-summary__caption {
    padding: 24px 0;
    padding: 1.5rem 0; }
  .c-summary__figure img {
    display: block;
    margin: 0 auto; } }

@media only screen and (min-width: 1024px) {
  .c-summary__info {
    max-width: 432px;
    max-width: 27rem; }
  .c-summary__content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: end;
    -moz-align-items: end;
    align-items: end;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between; }
  .c-summary__box {
    flex: 50%; }
  .c-summary__caption {
    padding: 40px 0;
    padding: 2.5rem 0; } }

.c-slider__slide {
  display: flex !important;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between; }

@media only screen and (max-width: 1023px) {
  .js-slider-amplia,
  .js-slider-limitada {
    padding-right: 8px !important; }
  .c-slider__slide {
    width: 300px !important;
    max-width: 300px;
    max-width: 18.75rem;
    min-width: 300px;
    min-width: 18.75rem;
    min-height: 390px;
    min-height: 24.375rem; } }

@media only screen and (min-width: 1024px) {
  .js-slider-amplia,
  .js-slider-limitada {
    overflow: visible !important; }
  .c-slider {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
    gap: 1rem;
    height: auto !important; }
  .c-slider__slide {
    flex: 1;
    max-width: 320px;
    max-width: 20rem;
    min-height: 430px;
    min-height: 26.875rem;
    margin-right: 0 !important; } }

.c-modal {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 5;
  background: rgba(0, 0, 0, 0.5);
  transform: translateY(-100%);
  transition: all 0.3s ease-in-out; }
  .c-modal.is-modal-show {
    transform: translateY(0); }

.c-modal__content {
  position: relative;
  width: 90%;
  max-height: 85%;
  margin-top: 67px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 16px;
  border-radius: 1rem;
  box-shadow: 2px 2px 16px 0px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 2px 2px 16px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 2px 2px 16px 0px rgba(0, 0, 0, 0.25);
  background: #fff;
  overflow: auto; }

.c-modal__content::-webkit-scrollbar {
  width: 8px; }

.c-modal__content::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 20px; }

.c-modal__content::-webkit-scrollbar-thumb {
  background: #D6D7D9;
  border-radius: 20px;
  border: 2px solid transparent;
  background-clip: content-box; }

.c-modal__content::-webkit-scrollbar-thumb:hover {
  background: #B0B1B2; }

.c-modal__close {
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.3s ease-in; }
  .c-modal__close:hover {
    color: #12949F; }

@media only screen and (max-width: 1023px) {
  .c-modal__content {
    padding: 40px 16px;
    padding: 2.5rem 1rem; }
  .c-modal__close {
    padding: 40px 40px 0;
    padding: 2.5rem 2.5rem 0; } }

@media only screen and (min-width: 1024px) {
  .c-modal__content {
    max-width: 668px;
    max-width: 41.75rem;
    padding: 80px 120px;
    padding: 5rem 7.5rem; }
  .c-modal__close {
    padding: 24px 24px 0;
    padding: 1.5rem 1.5rem 0; } }

.c-error-message {
  background: linear-gradient(360deg, #0097af 0%, #e5f6f9 62%, white 100%);
  background-repeat: no-repeat;
  height: 100vh; }

.c-error-message__content {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 120px;
  text-align: center; }

.c-error-message__num {
  color: #941B7F;
  font-weight: bold;
  font-size: 24px;
  font-size: 1.5rem; }

.c-error-message__title {
  font-weight: 700;
  margin-bottom: 16px;
  margin-bottom: 1rem; }

.c-error-message__text {
  color: #4C5051;
  margin-bottom: 40px;
  margin-bottom: 2.5rem; }

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