@charset "UTF-8";
/*
* CPLib Helper v0.3.0
* https://rcsoft.club.com/cplib/0.3.1/css/helper.css
* Copyright 2011-2021 Raimundo Araujo
* Licensed under (Totally Free, no licence defined)
*/

:root {
    /* Colores básicos globales para elementos */
    --nh: 0;
    --ns: 0%;
    --nl: 44.5%;
    --na: 1;
    --neutral-1: hsla(var(--nh), var(--ns), var(--nl), var(--na));
    --neutral-2: hsla(var(--nh), var(--ns), calc(var(--nl) + 9%), var(--na));
    --neutral-dark: hsla(var(--nh), var(--ns), calc(var(--nl) - 12%), var(--na));
    --neutral-light: hsla(var(--nh), var(--ns), calc(var(--nl) + 24%), var(--na));
    --neutral-lighter: hsla(var(--nh), var(--ns), calc(var(--nl) + 43%), var(--na));
    --neutral-transparent-1: hsla(var(--nh), var(--ns), var(--nl), calc(var(--na) - 0.5));
    --neutral-transparent-2: hsla(var(--nh), var(--ns), var(--nl), calc(var(--na) - 0.7));

    --ih: 210;
    --is: 80%;
    --il: 44.5%;
    --ia: 1;
    --info-1: hsla(var(--ih), var(--is), var(--il), var(--ia));
    --info-2: hsla(var(--ih), calc(var(--is) + 10%), calc(var(--il) + 10%), var(--ia));
    --info-dark: hsla(var(--ih), var(--is), calc(var(--il) - 10%), var(--ia));
    --info-light: hsla(var(--ih), calc(var(--is) + 10%), calc(var(--il) + 30%), var(--ia));
    --info-lighter: hsla(var(--ih), calc(var(--is) + 15%), calc(var(--il) + 51%), var(--ia));
    --info-transparent-1: hsla(var(--ih), var(--is), var(--il), calc(var(--ia) - 0.5));
    --info-transparent-2: hsla(var(--ih), var(--is), var(--il), calc(var(--ia) - 0.7));
    
    --sh: 120;
    --ss: 55.5%;
    --sl: 31.5%;
    --sa: 1;
    --success-1: hsla(var(--sh), var(--ss), var(--sl), var(--sa));
    --success-2: hsla(var(--sh), var(--ss), calc(var(--sl) + 9%), var(--sa));
    --success-dark: hsla(var(--sh), var(--ss), calc(var(--sl) - 10%), var(--sa));
    --success-light: hsla(var(--sh), calc(var(--ss) + 9%), calc(var(--sl) + 34%), var(--sa));
    --success-lighter: hsla(var(--sh), calc(var(--ss) + 25%), calc(var(--sl) + 63%), var(--sa));
    --success-transparent-1: hsla(var(--sh), var(--ss), var(--sl), calc(var(--sa) - 0.5));
    --success-transparent-2: hsla(var(--sh), var(--ss), var(--sl), calc(var(--sa) - 0.7));

    --wh: 28;
    --ws: 61.5%;
    --wl: 54.5%;
    --wa: 1;
    --warning-1: hsla(var(--wh), var(--ws), var(--wl), var(--wa));
    --warning-2: hsla(var(--wh), var(--ws), calc(var(--wl) + 9%), var(--wa));
    --warning-dark: hsla(var(--wh), var(--ws), calc(var(--wl) - 18%), var(--wa));
    --warning-light: hsla(var(--wh), calc(var(--ws) + 39%), calc(var(--wl) + 17.5%), var(--wa));
    --warning-lighter: hsla(var(--wh), calc(var(--ws) + 37%), calc(var(--wl) + 42%), var(--wa));
    --warning-transparent-1: hsla(var(--wh), var(--ws), var(--wl), calc(var(--wa) - 0.5));
    --warning-transparent-2: hsla(var(--wh), var(--ws), var(--wl), calc(var(--wa) - 0.7));

    --dh: 4;
    --ds: 55%;
    --dl: 50%;
    --da: 1;
    --danger-1: hsla(var(--dh), var(--ds), var(--dl), var(--da));
    --danger-2: hsla(var(--dh), calc(var(--ds) + 10%), calc(var(--dl) + 10%), var(--da));
    --danger-dark: hsla(var(--dh), calc(var(--ds) - 10%), calc(var(--dl) - 10%), var(--da));
    --danger-light: hsla(var(--dh), calc(var(--ds) + 10%), calc(var(--dl) + 20%), var(--da));
    --danger-lighter: hsla(var(--dh), calc(var(--ds) + 30%), calc(var(--dl) + 44%), var(--da));
    --danger-transparent-1: hsla(var(--dh), var(--ds), var(--dl), calc(var(--da) - 0.5));
    --danger-transparent-2: hsla(var(--dh), var(--ds), var(--dl), calc(var(--da) - 0.7));

    /* Blancos y negros para accesos directos */
    --white-snow: hsl(0, 100%, 99%);
    --white-ghost: hsl(240, 100%, 99%);
    --white-smoke: hsl(0, 0%, 96%);/*Whitesmoke / Cultured*/
    --white-anti-flash: hsl(0, 0%, 95%);
    --black-pearl: hsl(204, 19%, 15%);
    
    /*
    * Utilizamos el tema oscuro de Whatsapp Web de ejemplo de búsqueda de combinación de colores y buen contraste para hacer un tema oscuro
    *
    * --b-1: #111b21;
    * --b-1: hsl(203, 32%, 10%);
    * --b-2: #202c33;
    * --b-2: hsl(202, 23%, 16%);
    * --b-3: #2a3942;
    * --b-3: hsl(203, 22%, 21%);
    *
    * --t-1: #e9edef;
    * --t-1: hsl(200, 16%, 93%);
    * --t-2: #8696a0;
    * --t-2: hsl(203, 12%, 58%);
    * --t-3: #aebac1;
    * --t-3: hsl(202, 13%, 72%);
    * 
    * --brand-color: hsl(167, 100%, 33%); Color principal de whatsapp
    * 
    * Como podemos ver todos los colores, tanto para los fondos como para los textos son extraidos de una base hue
    * simimimilar, manteniéndose dentro del rango 200-203 y jugando con la saturación y la iluminación
    */

    /* Dark Theme colors */
    --base-color: hsl(194, 100%, 50%);/* Color base de referencia */
    --base-h: 194;
    --dcs: 20%;
    --dcl: 10%;
    --dca: 1;
    --dark-color-1: hsla(var(--base-h), var(--dcs), var(--dcl), var(--dca));
    --dark-color-2: hsla(var(--base-h), calc(var(--dcs) - 10%), calc(var(--dcl) + 5%), var(--dca));
    --dark-color-3: hsla(var(--base-h), var(--dcs), calc(var(--dcl) + 10%), var(--dca));
    --dark-color-transparent-1: hsla(var(--base-h), var(--dcs), var(--dcl), calc(var(--dca) - 0.5));
    --dark-color-transparent-2: hsla(var(--base-h), calc(var(--dcs) - 10%), calc(var(--dcl) + 5%), calc(var(--dca) - 0.7));
    --lcs: 10%;
    --lcl: 95%;
    --lca: 1;
    --light-color-1: hsla(var(--base-h), calc(var(--lcs) + 3%), calc(var(--lcl) - 5%), var(--lca));
    --light-color-2: hsla(var(--base-h), calc(var(--lcs) + 3%), calc(var(--lcl) - 15%), var(--lca));
    --light-color-3: hsla(var(--base-h), calc(var(--lcs) + 1%), calc(var(--lcl) - 30%), var(--lca));
    --light-color-transparent-1: hsla(var(--base-h), calc(var(--lcs) + 3%), calc(var(--lcl) - 5%), calc(var(--lca) - 0.5));
    --light-color-transparent-2: hsla(var(--base-h), calc(var(--lcs) + 3%), calc(var(--lcl) - 15%), calc(var(--lca) - 0.7));

        /* Shadows */
    --s1: 0 0 20px 0;
    --s2: 0 0 0.5rem 1rem;
    --dark-shadow-1: var(--s1) var(--dark-color-transparent-1);
    --dark-shadow-2: var(--s2) var(--dark-color-transparent-2);
    --light-shadow-1: var(--s1) var(--light-color-transparent-1);
    --light-shadow-2: var(--s2) var(--light-color-transparent-2);

    /* Colores de la Marca / App (Brand colors) / Accent Color */
    --brand-color: hsl(12, 80%, 50%);
    --brand-h: 12;
    --brand-s: 80%;
    --brand-l: 50%;
    --brand-a: 1;
    --brand-1: hsla(var(--brand-h), var(--brand-s), var(--brand-l), var(--brand-a));
    --brand-2: hsla(var(--brand-h), var(--brand-s), calc(var(--brand-l) + 10%), var(--brand-a));
    --brand-dark: hsla(var(--brand-h), calc(var(--brand-s) - 10%), calc(var(--brand-l) - 20%), var(--brand-a));
    --brand-light: hsla(var(--brand-h), var(--brand-s), calc(var(--brand-l) + 20%), var(--brand-a));
    --brand-lighter: hsla(var(--brand-h), var(--brand-s), calc(var(--brand-l) + 35%), var(--brand-a));
    --brand-transparent-1: hsla(var(--brand-h), var(--brand-s), var(--brand-l), calc(var(--brand-a) - 0.5));
    --brand-transparent-2: hsla(var(--brand-h), var(--brand-s), var(--brand-l), calc(var(--brand-a) - 0.7));

    --accent-1: var(--brand-1);
    --accent-2: var(--brand-2);
    --accent-dark: var(--brand-dark);
    --accent-light: var(--brand-light);
    --accent-lighter: var(--brand-lighter);
    --accent-transparent-1: var(--brand-transparent-1);
    --accent-transparent-2: var(--brand-transparent-2);

    /* Valores elementos globales */
    --max-width: 1140px;
    --border-radius-1: 5px;
    --border-radius-2: 10px;
    --disabled-opacity: 0.6;
    --global-transition-time: 0.2s;
    --color-transition-time: 0.32s;
    --bg-color-transition-time: 0.32s;
    --padding: 15px;
    --gap: 1rem;

    /*OJO*/
    --scrollbar-width: 0px;
    --body-padding-right: 0px;

    /* Efectos de easing */
    --elastic-ease: cubic-bezier(0.6, -0.5, 0.3, 1.5);
}

html,
.protected-from-dark {
    color-scheme: light;

    /* Colores de Elementos Globales */
    --text-color-1: var(--dark-color-1);
    --text-color-2: var(--dark-color-2);
    --text-color-3: var(--dark-color-3);
    --bg-color-1: var(--light-color-1);
    --bg-color-2: var(--light-color-2);
    --bg-color-3: var(--light-color-3);
    --shadow-1: var(--dark-shadow-1);
    --shadow-2: var(--dark-shadow-2);
}

html.dark,
.protected-from-light {
    color-scheme: dark;

    /* Colores de Elementos Globales */
    --text-color-1: var(--light-color-1);
    --text-color-2: var(--light-color-2);
    --text-color-3: var(--light-color-3);
    --bg-color-1: var(--dark-color-1);
    --bg-color-2: var(--dark-color-2);
    --bg-color-3: var(--dark-color-3);
    --shadow-1: var(--light-shadow-1);
    --shadow-2: var(--light-shadow-2);

    /* Correcciones */
    --disabled-opacity: 0.3;
}

*,
::before,
::after {
    box-sizing: border-box;
    background-repeat: no-repeat;
}

:where(*) { margin: 0; }

body {
    direction: ltr;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color-1);
    text-rendering: optimizeLegibility;
}

body { background-color: var(--bg-color-1); }

/* Aquí deberían ir todos los tags que necesita reset de padding */
ul, li { padding: 0; }

/*
 * Con esta clase evitamos un shift en los elementos con posición fixed y que no ocupan en en ancho de la ventana
 * cuando se abre un modal y le aplica overflow:hidden al body
 */
body[class^="A-DIALOG"] .p-fixed:not(.p-fixed.w100) {
    margin-right: var(--scrollbar-width, 0px);
}
/*OJO: No hemos solucionado el shift generado en los elementos sticky cuando se abre el modal */
/* body[class^="A-DIALOG"] .p-sticky { padding-right: var(--scrollbar-width, 0px); }
body[class^="main-nav"] .p-sticky { padding-right: var(--scrollbar-width, 0px); } */

a, blockquote, form, button, fieldset,
input[type="date"], input[type="checkbox"].switch, 
.container, .form-row, .submit-row, .content-before, .content-after, .img-preloader, .bg-overlay, .one-to-one-ratio {
    position: relative;
}

:where(h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6) {
	margin-bottom: 0.5em;
    font-weight: bold;
    line-height: 1.4em;
    text-wrap: balance;
}
	h1, .h1 {font-size: 2.6rem; }
	h2, .h2 { font-size: 2.2rem; }
	h3, .h3 { font-size: 1.8rem; }
	h4, .h4 { font-size: 1.5rem; }
    h5, .h5 { font-size: 1.2rem; }
    h6, .h6 { font-size: 1rem; }

p {
    line-height: 1.4em;
    text-wrap: pretty;
}
    :where(p):not(p:last-child):not(p:only-of-type) { margin-bottom: 1em; }

small,
.small {
    font-size: 0.85rem;
}

ul { list-style: none; }

table { border-spacing: 0; }

img {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    border: 0;/*border: 0; IE Hack */
}

picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

:where(a):link,
:where(a):visited {
    color: var(--info-1);
}
:where(button).anchor-styled {
    font-family: inherit;
    font-size: inherit;
    color: var(--info-1);
    text-decoration: underline;
    background-color: transparent;
    border: none;
    cursor: pointer;
}
    :where(a[disabled]),
    :where(button[disabled]) {
        opacity: var(--disabled-opacity);
    }
    :where(a):not([disabled]):hover,
    :where(button):not([disabled]).anchor-styled:hover {
        color: var(--info-2);
        text-decoration: none;
    }
    :where(a):not([disabled]):active,
    :where(button):not([disabled]).anchor-styled:active {
        color: var(--info-dark);
    }
:where(button):not(button.anchor-styled) { padding: calc(0.5rem - 1.5px) 0.8rem; }
:where(a) > span,
:where(button) > span {
    color: currentColor;
}

/* Super Form */
:where([is="super-form"]) .form-row:not() { overflow: visible; }
:where([is="super-form"]) .form-row:not(.mb0) { margin-bottom: 2.5rem; }
:where([is="super-form"]) .form-check-row {
    display: flex;
    align-items: center;
    gap: 0.35em;
}
:where([is="super-form"]) .submit-row { margin-bottom: 1rem; }

:where([is="super-form"]) fieldset {
    padding: 1rem;
    margin-bottom: 1rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--border-radius-1);
    outline: none;
    overflow: visible;
}
    :where([is="super-form"]) fieldset:last-child { margin-bottom: 0; }
    :where([is="super-form"]) fieldset legend {
        padding: 0 5px;
        margin-bottom: 0.8rem;
        font-size: 1.2rem;
        font-weight: bold;
    }

:where([is="super-form"]) :is(input, textarea, select) {
    font-size: 1rem;
    color: inherit;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--border-radius-1);
    background: none;
}

/*:where([is="super-form"]) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="reset"]):not([type="submit"]), textarea, select) {*/
:where([is="super-form"]) :is(input:not(:is([type="hidden"], [type="checkbox"], [type="radio"], [type="reset"], [type="submit"], [type="range"], [type="color"])), textarea, select) {
    width: 100%;
    padding: 11px 8px 8px 8px;
}
:where([is="super-form"]) :is(input:is([type="text"], [type="password"], [type="email"], [type="tel"], [type="url"])):not(:placeholder-shown),
:where([is="super-form"]) textarea:not(:placeholder-shown) {
    padding-right: 1.5rem;
}

:where([is="super-form"]) select:not([multiple]) {
    appearance: none;
    padding-right: 2rem;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 11 7" fill="currentColor"><path d="M4.8,6.3L5.5,7l5.4-5.4C11,1.4,11,1.1,10.9,1L10,0.1C9.9,0,9.6,0,9.5,0.1L5.8,3.8C5.6,4,5.4,4,5.2,3.8L1.5,0.1 C1.4,0,1.1,0,1,0.1L0.1,1C0,1.1,0,1.4,0.1,1.6L4.8,6.3z"/></svg>');
    background-position: right 0.5rem center;
    background-size: 0.8em 0.8em;
    background-repeat: no-repeat;
}

:where([is="super-form"]) select :is(optgroup, option) { background: var(--bg-color-1); }
:where([is="super-form"]) select option:checked { background: var(--bg-color-2); }

:where([is="super-form"]) :is(input:not([type="checkbox"]):not([type="radio"]), textarea) { outline-color: transparent; }
:where([is="super-form"]) :is(input[type="checkbox"], input[type="radio"]) {
    width: 1rem;
    height: 1rem;
    padding: 0;
}

:where([is="super-form"]) :is(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
    accent-color: var(--accent-1);
}

    /* Placeholder Effect */
:where([is="super-form"]) ::placeholder { opacity: 0; }

:where([is="super-form"]) label.label-placeholder {
    position: absolute;
    top: 0.8rem;
    left: 0.5rem;
    color: var(--text-color-2);
    cursor: text;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0.8;
}
    :where([is="super-form"]) :is(
        :is(*:not(:placeholder-shown), *:focus, *:disabled, *:-webkit-autofill) ~ label.label-placeholder,
        form[disabled] label.label-placeholder,
        fieldset[disabled] label.label-placeholder,
        .label-placeholder.placeholder-shown
    ) {
        top: -0.8rem;
        left: 0.5rem;
        padding: 2px 5px 3px 5px;
        font-size: 0.85rem;
        background-color: var(--bg-color-2);
        border-radius: var(--border-radius-1);
        cursor: default;
        user-select: auto;
        opacity: 1;
        z-index: 1;
    }
    :where([is="super-form"]) :is(*:disabled ~ label, form[disabled] label.label-placeholder, fieldset[disabled] label.label-placeholder) {
        pointer-events: none;
        opacity: 0.7;
    }

:where([is="super-form"]) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="reset"]):not([type="submit"]), textarea) {
    transition: all var(--global-transition-time);
}

:where([is="super-form"]) :is(
    input:not([type="checkbox"]):not([type="radio"]):not(.invalid):focus,
    textarea:not(.invalid):focus
) {
    box-shadow: 0 0 0 1px var(--neutral-1);
}

:where([is="super-form"]) :is(
    :is([type="text"], [type="password"], [type="email"], [type="tel"], [type="search"]):valid:not(:placeholder-shown),
    textarea:valid:not(:placeholder-shown),
    select.valid,
    input.valid:not([type="range"])
) {
    border-color: var(--success-1);
    box-shadow: 0 0 0 1px var(--success-1);
}

:where([is="super-form"]) .invalid {
    border-color: var(--danger-1);
    box-shadow: 0 0 0 1px var(--danger-1);
}

:where([is="super-form"]) .error-message {
    position: absolute;
    /* height: 100%; *//*OJO: No se porque puse esta altura */
    font-size: 0.85rem;
    color: var(--danger-1);
    opacity: 0;
    display: flex;
}
    :where([is="super-form"]) :is(.invalid ~ .error-message, :invalid:not(form):not(fieldset):not(:focus):not(:placeholder-shown) ~ .error-message) {
        opacity: 1;
    }

:where([is="super-form"]) button[type="submit"] {
    padding: 0.5rem 0.8rem;
    color: var(--white-snow);
    background-color: var(--accent-1);
}
:where([is="super-form"]) button[type="submit"]:not([disabled]):hover {
    color: var(--white-snow);
    background-color: var(--accent-2);
}
:where([is="super-form"]) button[type="submit"]:not([disabled]):active {
    color: var(--white-snow);
    background-color: var(--accent-dark);
    border-color: var(--accent-1);
    box-shadow: 0 0 0 0.15rem var(--accent-2);
}

/*:where([is="super-form"]) :is([disabled], [readonly], fieldset[disabled] *, fieldset[readonly] *) {*/
:where([is="super-form"]) :is([disabled], [readonly], fieldset[disabled] a) {
    opacity: var(--disabled-opacity);
}

/* :where([is="super-form"]) :is(button[disabled], a[disabled], fieldset[disabled] button, fieldset[disabled] a) { */
:where([is="super-form"]) :is(button[disabled], a[disabled], fieldset[disabled] a) {
    cursor: not-allowed;
}

:where([is="super-form"]) option[disabled] { display: none; }

    /* Switch input[type="checkbox"].switch */
input[type="checkbox"].switch {
    width: 2rem;
    height: 1rem;
    cursor: pointer;
    overflow: visible;
}
    .switch::before,
    .switch::after {
        content: "";
        position: absolute;
    }
    .switch::before {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--bg-color-2);
        border: 1px solid var(--text-color-3);
        border-radius: calc(var(--border-radius-1) * 2);
    }
        .switch.invalid::before { border-color: var(--danger-1); }
    .switch::after {
        top: 2px;
        left: 2px;
        height: calc(100% - 4px);
        aspect-ratio: 1 / 1;
        background-color: var(--text-color-3);
        border-radius: 50%;
    }
    .switch:checked::after {
        background-color: var(--accent-1);
        transform: translateX(calc(100% + 4px));
    }

:focus-visible {
    outline-offset: 3px;
    outline: 1px dashed var(--text-color-1);
}

/* Preloaders */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
    .preloader:not(body > .preloader) {
        position: absolute;
        z-index: 0;
    }
    .preloader::after,
    .img-preloader::after {
        content: "";
        height: 40px;
        aspect-ratio: 1 / 1;
        border-width: 7px;
        border-style: solid;
        border-color: inherit;
        border-top-color: transparent;
        border-bottom-color: transparent;
        border-radius: 50%;
        animation: rotate 1s linear infinite;
    }
    .img-preloader::after {
        position: absolute;
        height: 40px;
        left: calc(50% - 20px);
    }
    :where(button) > .preloader::after { height: 80%; }

/* Skip to Content */
.skip-link:link,
.skip-link:active,
.skip-link:visited {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 0;
    overflow: hidden;
    z-index: 9999;
    color: var(--white-snow);
    background-color: var(--accent-1);
}
    .skip-link:focus {
        width: auto;
        overflow: visible;
        padding: 0.75rem 1.2rem;
    }
    .skip-link::before { display: none; }

/*Utility Classes*/
.container {
    width: 100%;
	max-width: var(--max-width);
	padding: 0 var(--padding);
    margin: 0 auto;
}

/* OJO: Evaluar remoción de estas clases */
.size-icon-sm {
    width: 24px;
    height: 24px;
}
.size-icon-md {
    width: 48px;
    height: 48px;
}
.size-icon-lg {
    width: 64px;
    height: 64px;
}
/*************/

.lista {
	list-style: circle;
	margin-left: 2rem;
}
.img-align-left-squared {
	width: 40%;
	float: left;
	margin-right: 1rem;
}
.img-align-right-squared {
	width: 40%;
	float: right;
	margin-left: 1rem;
}

.true-abs-pos,
.true-abs-pos-before::before,
.true-abs-pos-after::after,
.bg-overlay::before,
.true-fixed-pos {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
    .true-fixed-pos { position: fixed; }
.true-abs-pos-before::before,
.true-abs-pos-after::after,
.bg-overlay::before {
    content: "";
}
.bg-overlay::before {
    background-color: rgba(0, 0, 0, 0.35);
}
.bg-overlay.bg-overlay-gradient::before { background: var(--overlay-background-gradient); }
.bg-overlay > * { z-index: 1; }
.bg-overlay * { color: var(--white-ghost); }

.bg-cover,
.bg-cover::before {
	background-size: cover;
}

.content-before::before,
.content-after::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
}

/* .global-shadow { box-shadow: var(--shadow-1); } */

.one-to-one-ratio { padding-top: 100%; }

/*OJO: hacer version para dark mode*/
.joyride-hole {
    border-radius: 4px;
    box-shadow: 0 0 0 9999px rgb(0 0 0 / 50%), 0 0 15px rgb(0 0 0 / 50%);
    position: absolute;
}

.soft-hide {
	position: absolute;
    visibility: hidden;
}

.d-block { display: block; }
.d-none { display: none; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-flex-column {
    display: flex;
    flex-direction: column;
}
.d-flex-wrap {
    display: flex;
    flex-wrap: wrap;
}
.d-flex-center,
.d-iflex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.d-iflex-center { display: inline-flex; }
.items-center { align-items: center; }/* OJO: Revisar este nombre de clase */
.items-stretch { align-items: stretch; }/* OJO: Revisar este nombre de clase */
.justify-center { justify-content: center; }/* OJO: Revisar este nombre de clase */
.space-between { justify-content: space-between; }
.gap0-5 { gap: 0.5rem; }
.gap1 { gap: 1rem; }
.flex-grow-1 { flex-grow: 1; }
.align-self-start { align-self: start; }
.align-self-end { align-self: end; }
.d-grid { display: grid; }
.d-grid-auto-columns {
    display: grid;
    gap: 1rem;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}
.v-hidden { visibility: hidden; }
.v-visible { visibility: visible; }
.p-absolute { position: absolute; }
.p-relative { position: relative; }
.p-fixed { position: fixed; }
.p-sticky { position: sticky; }
.o-hidden { overflow: hidden; }
.o-visible { overflow: visible; }
.v-align-bottom { vertical-align: bottom; }
.t-center { text-align: center; }
.t-left { text-align: left; }
.t-right { text-align: right; }
.m0 { margin: 0; }
.m-center { margin: 0 auto; }
.bg-fixed { background-attachment: fixed; }

.mt0 { margin-top: 0; }
.mt0-5 { margin-top: 0.5rem; }
.mt1 { margin-top: 1rem; }
.mt2 { margin-top: 2rem; }
.mt3 { margin-top: 3rem; }
.mr1 { margin-right: 1rem; }
.mr0-5 { margin-right: 0.5rem; }
.mr-1 { margin-right: -1rem; }
.ml1 { margin-left: 1rem; }
.ml0-5 { margin-left: 0.5rem; }
.ml-1 { margin-left: -1rem; }
/*.mb0.mb0 { padding: 0; } Con este método o con el uso de :where en la clase orginal evitamos el uso de important!*/
.mb0 { margin-bottom: 0; }
.mb0-5 { margin-bottom: 0.5rem; }
.mb1 { margin-bottom: 1rem; }
.mb2 { margin-bottom: 2rem; }
.mb3 { margin-bottom: 3rem; }
.p0 { padding: 0; }
.p1 { padding: 1rem; }
.pt1 { padding-top: 1rem; }
.pr1 { padding-right: 1rem; }
.pb1 { padding-bottom: 1rem; }
.pl1 { padding-left: 1rem; }
.ptb1 { padding: 1rem 0; }
.fw-normal { font-weight: normal; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-bold { font-weight: bold; }
.w100 { width: 100% ;}
.w50 { width: 50%; }
.h100 { height: 100% ;}
.circle {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}
.pill { border-radius: 99999px; }
.radius0 { border-radius: 0; }

/* .text-red { color: var(--red); }
.text-orange { color: var(--orange); }
.text-green { color: var(--green); }
.text-blue { color: var(--blue-1); }
.text-black { color: var(--black); }
.text-grey { color: var(--grey); }
.text-white { color: var(--white); }
.text-black { color: var(--black); }

.bg-red { background-color: var(--red); }
.bg-orange { background-color: var(--orange); }
.bg-green { background-color: var(--green); }
.bg-blue { background-color: var(--blue-1); }
.bg-grey { background-color: var(--grey); }
.bg-white { background-color: var(--white); }
.bg-black { background-color: var(--black); }

.error-text-color { color: var(--error-color); }
.warning-text-color { color: var(--warning-color); }
.valid-text-color { color: var(--valid-color); }
.success-text-color { color: var(--valid-color); } */

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

.a-underline:link,
.a-underline:active,
.a-underline:visited {
    text-decoration: underline;
}
    .a-underline:hover { text-decoration: none; }

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.rotate45 { transform: rotate(45deg); }
.rotate90 { transform: rotate(90deg); }
.rotate135 { transform: rotate(135deg); }
.rotate180 { transform: rotate(180deg); }
.rotate225 { transform: rotate(225deg); }
.rotate270 { transform: rotate(270deg); }

/*Animaciones*/
@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes grow-from-center {
	from { transform: scale(0.5); }
	to { transform: scale(1); }
}
@keyframes grow-from-center-reverse {
	from { transform: scale(1); }
	to { transform: scale(0.5); }
}
@keyframes swipe-up {
    0% { transform: translateY(150%); }
    100% { transform: translateY(0); }
}
@keyframes swipe-up-reverse {
    0% { transform: translateY(0); }
    100% { transform: translateY(150%); }
}
@keyframes swipe-down {
    0% { transform: translateY(-150%); }
    100% { transform: translateY(0); }
}
@keyframes swipe-down-reverse {
    0% { transform: translateY(0); }
    100% { transform: translateY(-150%); }
}
@keyframes swipe-left {
    0% { transform: translateX(150%); }
    100% { transform: translateX(0); }
}
@keyframes swipe-left-reverse {
    0% { transform: translateX(0); }
    100% { transform: translateX(150%); }
}
@keyframes swipe-right {
    0% { transform: translateX(-150%); }
    100% { transform: translateX(0); }
}
@keyframes swipe-right-reverse {
    0% { transform: translateX(0); }
    100% { transform: translateX(-150%); }
}
@keyframes grow-from-right-top {
    from {
        transform-origin: right top;
        transform: scale(0);
    }
	to { transform: scale(1); }
}
@keyframes x-grow {
    from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}
@keyframes x-grow-reverse {
    from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}
@keyframes y-grow {
    from { transform: scaleY(0); }
	to { transform: scaleXY(1); }
}
@keyframes y-grow-reverse {
    from { transform: scaleY(1); }
	to { transform: scaleY(0); }
}

/*
OJO: Tests
@media all and (display-mode: standalone) {}
*/

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
        scroll-padding-top: 0.5rem;
    }

    /* *, *::before, *::after { transition: all 0; } */
}