/* padding-x layout --------------------------------------------------------*/

/* @group @variables x-padding */

:root {
--x-padding-base: 4.375vw;
}

@media all and (min-width: 82.75em) {

:root {
--x-padding-base: calc((100vw - 74rem) / 2);
/*--x-padding-base: calc(2.5vw + 1.5rem);*/
}

}

/* @end @variables x-padding */

/* @group @variables x-padding */

:root {
--x-padding: var(--x-padding-base);
--x-padding-right: var(--x-padding);
--x-padding-left: var(--x-padding);
}

@supports (padding-top: constant(safe-area-inset-top)) {

:root {
--x-padding-right: calc(env(safe-area-inset-right) + var(--x-padding));
--x-padding-left: calc(env(safe-area-inset-left) + var(--x-padding));
}

}

/* @end @variables x-padding */

/* --------------------------------------------------------*/

/* @group @variables - color alpha */

:root {
--alpha-disabled: .5;
--alpha-placeholder: .5;
--alpha-highlight: .15;
--alpha-marker: .075;
--alpha-modal: .25;
--alpha-transparent: .1;
--alpha-shadow: .25;
--alpha-shadow-action: .3125;
--alpha-shadow-active: .375;
--alpha-shadow-white: .625;
--alpha-shadow-white-action: .75;
--alpha-shadow-white-active: .875;
--color-neutral-shadow-lightness: 40;
}

/* @end @variables - color alpha */

/* --------------------------------------------------------*/

/* @group @variables */

h1 {
overflow: var(--head-1-overflow);
margin-top: var(--head-1-margin-top);
margin-right: var(--head-1-margin-right);
margin-bottom: var(--head-1-margin-bottom);
margin-left: var(--head-1-margin-left);
font-family: var(--head-1-font-family);
font-size: var(--head-1-font-size);
line-height: var(--head-1-line-height);
color: var(--head-1-color);
font-weight: var(--head-1-font-weight);
font-variation-settings: var(--head-1-font-variation-settings);
text-transform: var(--head-1-text-transform);
word-break: var(--head-1-word-break);
overflow-wrap: var(--head-1-overflow-wrap);
text-align: var(--head-1-text-align);
}

h1 em {
font-family: var(--head-1-emphasis-font-family);
font-size: var(--head-1-emphasis-font-size);
line-height: var(--head-1-emphasis-line-height);
font-weight: var(--head-1-emphasis-font-weight);
font-variation-settings: var(--head-1-emphasis-font-variation-settings);
}

/* @end @variables */

/* @group @variables */

h2 {
overflow: var(--head-2-overflow);
margin-top: var(--head-2-margin-top);
margin-right: var(--head-2-margin-right);
margin-bottom: var(--head-2-margin-bottom);
margin-left: var(--head-2-margin-left);
font-family: var(--head-2-font-family);
font-size: var(--head-2-font-size);
line-height: var(--head-2-line-height);
color: var(--head-2-color);
font-weight: var(--head-2-font-weight);
font-variation-settings: var(--head-2-font-variation-settings);
text-transform: var(--head-2-text-transform);
word-break: var(--head-2-word-break);
overflow-wrap: var(--head-2-overflow-wrap);
text-align: var(--head-2-text-align);
}

h2 em {
font-family: var(--head-2-emphasis-font-family);
font-size: var(--head-2-emphasis-font-size);
line-height: var(--head-2-emphasis-line-height);
font-weight: var(--head-2-emphasis-font-weight);
font-variation-settings: var(--head-2-emphasis-font-variation-settings);
}

/* @end @variables */

/* @group @variables */

h3 {
overflow: var(--head-3-overflow);
margin-top: var(--head-3-margin-top);
margin-right: var(--head-3-margin-right);
margin-bottom: var(--head-3-margin-bottom);
margin-left: var(--head-3-margin-left);
font-family: var(--head-3-font-family);
font-size: var(--head-3-font-size);
line-height: var(--head-3-line-height);
color: var(--head-3-color);
font-weight: var(--head-3-font-weight);
font-variation-settings: var(--head-3-font-variation-settings);
text-transform: var(--head-3-text-transform);
word-break: var(--head-3-word-break);
overflow-wrap: var(--head-3-overflow-wrap);
text-align: var(--head-3-text-align);
}

h3 em {
font-family: var(--head-3-emphasis-font-family);
font-size: var(--head-3-emphasis-font-size);
line-height: var(--head-3-emphasis-line-height);
font-weight: var(--head-3-emphasis-font-weight);
font-variation-settings: var(--head-3-emphasis-font-variation-settings);
}

/* @end @variables */

/* @group @variables */

h4 {
overflow: var(--head-1-overflow);
margin-top: var(--head-4-margin-top);
margin-right: var(--head-4-margin-right);
margin-bottom: var(--head-4-margin-bottom);
margin-left: var(--head-4-margin-left);
font-family: var(--head-4-font-family);
font-size: var(--head-4-font-size);
line-height: var(--head-4-line-height);
color: var(--head-4-color);
font-weight: var(--head-4-font-weight);
font-variation-settings: var(--head-4-font-variation-settings);
text-transform: var(--head-4-text-transform);
word-break: var(--head-4-word-break);
overflow-wrap: var(--head-4-overflow-wrap);
text-align: var(--head-4-text-align);
}

h4 em {
font-family: var(--head-4-emphasis-font-family);
font-size: var(--head-4-emphasis-font-size);
line-height: var(--head-4-emphasis-line-height);
font-weight: var(--head-4-emphasis-font-weight);
font-variation-settings: var(--head-4-emphasis-font-variation-settings);
}

/* @end @variables */

/* @group @variables */

h5 {
overflow: var(--head-5-overflow);
margin-top: var(--head-5-margin-top);
margin-right: var(--head-5-margin-right);
margin-bottom: var(--head-5-margin-bottom);
margin-left: var(--head-5-margin-left);
font-family: var(--head-5-font-family);
font-size: var(--head-5-font-size);
line-height: var(--head-5-line-height);
color: var(--head-5-color);
font-weight: var(--head-5-font-weight);
font-variation-settings: var(--head-5-font-variation-settings);
text-transform: var(--head-5-text-transform);
word-break: var(--head-5-word-break);
overflow-wrap: var(--head-5-overflow-wrap);
text-align: var(--head-5-text-align);
}

/* @end @variables */

/* @group @variables */

body {
font-family: var(--font-family);
font-display: optional;
color: var(--color);
font-weight: var(--font-weight);
font-variation-settings: var(--font-variation-settings);
}

:where(header, footer, p, ul, ol, li, dl, dt, dd, table, tr, th, td, figure, figure, figcaption, time, blockquote, pre, input, textarea, label, select, button, pre, code) {
font-family: var(--font-family);
font-size: var(--font-size);
line-height: var(--line-height);
font-weight: var(--font-weight);
font-variation-settings: var(--font-variation-settings);
color: var(--color);
}

:where(p) {
line-height: var(--paragraph-line-height);
}

:where(dt) {
}

:where(dd) {
}

:where(strong) {
font-weight: var(--strong-font-weight);
font-variation-settings: var(--strong-font-variation-settings);
}

:where(em) {
font-size: var(--emphasis-font-size);
line-height: var(--emphasis-line-height);
color: var(--emphasis-color);
font-weight: var(--emphasis-font-weight);
font-variation-settings: var(--emphasis-font-variation-settings);
}

:where(rt) {
font-size: var(--ruby-rext-font-size);
line-height: var(--ruby-rext-line-height);
color: var(--ruby-rext-color);
font-weight: var(--ruby-rext-font-weight);
font-variation-settings: var(--ruby-rext-font-variation-settings);
}

:where(figcaption) {
margin-top: var(--figcaption-margin-top);
margin-bottom: var(--figcaption-margin-bottom);
font-size: var(--figcaption-font-size);
line-height: var(--figcaption-line-height);
color: var(--figcaption-color);
font-weight: var(--figcaption-font-weight);
font-variation-settings: var(--figcaptionfont-variation-settings);
word-break: var(--figcaption-word-break);
text-align: var(--figcaption-text-align);
}

:where(p, ul, ol, dl, table, blockquote, pre, figure) {
margin-top: var(--margin-top);
margin-right: var(--margin-right);
margin-bottom: var(--margin-bottom);
margin-left: var(--margin-left);
}

:where(p, li, dt, dd, th, td) {
word-wrap: var(--word-wrap);
overflow-wrap: var(--overflow-wrap);
word-break: var(--word-break);
}

:where(pre,code) {font-family: var(--font-family-pre);}
[class*="a-font-numeric"] {font-family: var(--font-family-numeric);}

/* @end @variables */

/* --------------------------------------------------------*/



/* --------------------------------------------------------*/

/* @group @variables */

:root {
--margin-bottom: 0;
--margin-top: 0;
--figcaption-margin-top: 0;
--figcaption-margin-bottom: 0;
--background-color: hsla(220, 5%, 97.5%, 1);
--border-color: hsla(220, 5%, 85%, 1);

--transition: var(--transition-type) var(--transition-time) var(--transition-delay) var(--transition-cubic-bezier);
--transition-action: var(--transition);
--transition-type: all;
--transition-time: .3s;
--transition-delay: 0s;
--transition-cubic-bezier: cubic-bezier(.6, .5, .5, .75);
--link-border-size: 1px;
}

/* @end @variables */

/* @group @variables */

:root {
--font-family: var(--font-family-default);
--font-size: inherit;
--line-height: 1.5;
--paragraph-line-height: 1.875;

--word-wrap: break-word;
--overflow-wrap: break-word;
--word-break: break-all;

--color: var(--color-text);
--head-2-color: hsla(30, 5.9%, 25%, 1);

--font-weight: 300;
--font-variation-settings: "wght" 325;

--font-weight-bold: 500;

--head-1-font-weight: var(--font-weight-bold);
--head-1-font-variation-font-variation-settings: "wght" var(--font-weight-bold);
--head-2-font-weight: var(--font-weight-bold);
--head-2-font-variation-font-variation-settings: "wght" var(--font-weight-bold);
--head-3-font-weight: var(--font-weight-bold);
--head-3-font-variation-font-variation-settings: "wght" var(--font-weight-bold);
--head-4-font-weight: var(--font-weight-bold);
--head-4-font-variation-font-variation-settings: "wght" var(--font-weight-bold);
--head-5-font-weight: var(--font-weight-bold);
--head-5-font-variation-font-variation-settings: "wght" var(--font-weight-bold);
}

[class*="o-mutual-header"],
[class*="o-mutual-footer"],
[class*="o-mutual-nav"] {
--head-1-font-size: inherit;
--head-1-line-height: 1;
--head-2-font-size: inherit;
--head-2-line-height: 1;
}

/* @end @variables */

/* --------------------------------------------------------*/

/* @group @variables - text-align */

@media all and (min-width:48em) {

:root {
--text-align-proto: left;
--text-align-deutero: center;
--text-align-trito: right;
}

}

@media all and (max-width:47.9375em) {

:root {
--text-align-primero: left;
--text-align-segundo: center;
--text-align-right: tercero;
}

}

/* @end @variables - text-align */

/* --------------------------------------------------------*/

/* @group @variables - color black to white */

:root {

--color-heading: hsla(220, 10%, 20%, 1);
--color-caption: hsla(220, 10%, 40%, 1);

--color-border: hsla(242.5, 5%, 75%, 1);
--color-form-checked: hsla(198, 75%, 47.5%, 1);
--color-form-error: hsla(0, 75%, 47.5%, 1);
--color-form-success: hsla(150, 75%, 47.5%, 1);

--color-label: hsla(240, 4%, 16%, 1);
--color-form-icon: hsla(242.5, 5%, 85%, 1);

--check-border: hsla(240, 5%, 65%, 1);

--color-input-disabled: hsla(220, 5%, 60%, .5);
}

/* @end @variables - color black to white */

/* --------------------------------------------------------*/

/* @group @variables - color black to white */

:root {
--color-white: hsla(0, 0%, 100%, 1);
--color-white-action: hsla(0, 0%, 90%, 1);
--color-white-active: hsla(0, 0%, 80%, 1);
--color-white-disabled: hsla(0, 0%, 100%, .5);
}

/* @end @variables - color black to white */

/* --------------------------------------------------------*/

/* @group @variables - color black to white */

:root {
--color-link-border-color: hsla(220, 5%, 92.5%, 1);
--color-link-border-color-action: hsla(220, 5%, 87.5%, 1);
--color-link-border-color-active: hsla(220, 5%, 82.5%, 1);
}

/* @end @variables - color black to white */

/* @group @variables - color */

:root {
--color-silver: hsla(220, 5%, 75%, 1);
--color-darkgray: hsla(220, 5%, 50%, 1);
--color-dimgray: hsla(220, 5%, 40%, 1);
--color-very-dark-gray: hsla(220, 5%, 20%, 1);
--color-black: hsla(0, 0%, 0%, 1);
}

/* @end @variables - color black */

/* --------------------------------------------------------*/

/* @group @variables - color */

:root {
--color-link: hsla(197.5, 75%, 47.5%, 1);
--color-link-border: hsla(197.5, 75%, 47.5%, .85);
--color-link-action: hsla(197.5, 75%, 42.5%, 1);
--color-link-action-border: hsla(197.5, 75%, 47.5%, .85);
--color-link-active: hsla(197.5, 75%, 37.5%, 1);
--color-link-active-border: hsla(197.5, 75%, 37.5%, .85);
--color-link-disabled: hsla(197.5, 75%, 47.5%, .5);
}

/* @end @variables - color */

/* --------------------------------------------------------*/

/* @group @variables - form color */

:root {
--color-autofill-primary: hsla(220, 90%, 45%, 1);
--color-autofill-secondary: hsla(220, 90%, 95%, 1);
--color-input-disabled: hsla(220, 10%, 85%, 1);
--color-success-primary: hsla(120, 55%, 45%, 1);
--color-success-secondary: hsla(120, 60%, 95%, 1);
--color-error-primary: hsla(355, 55%, 55%, 1);
--color-error-secondary: hsla(355, 60%, 95%, 1);
--color-warning-primary: hsla(50, 95%, 47.5%, 1);
--color-warning-secondary:hsla(50, 100%, 95%, 1);
--color-focus-primary: hsla(205, 55%, 55%, 1);
--color-focus-secondary: hsla(205, 90%, 97.5%, 1);
--color-focus-tertiary: hsla(205, 55%, 75%, 1);
}

/* @end @variables - form color */

/* @group @variables - disabed color */

:root {
--btn-disabled-background-color: hsla(30, 5%, 85%, .5);
}

/* @end @variables - disabed color */

/* --------------------------------------------------------*/



/* --------------------------------------------------------*/



/* --------------------------------------------------------*/



/* --------------------------------------------------------*/



/* --------------------------------------------------------*/



/* --------------------------------------------------------*/



/* --------------------------------------------------------*/



/* --------------------------------------------------------*/



/* --------------------------------------------------------*/



/* --------------------------------------------------------*/



/* --------------------------------------------------------*/



/* --------------------------------------------------------*/



/* --------------------------------------------------------*/



/* --------------------------------------------------------*/



/* --------------------------------------------------------*/



/* --------------------------------------------------------*/



/* --------------------------------------------------------*/



/* --------------------------------------------------------*/



/* --------------------------------------------------------*/



/* --------------------------------------------------------*/



/* --------------------------------------------------------*/