/* base forsend */
/* reset basico */
html {
    scroll-behavior: smooth;
}
body {
    margin-bottom: 0;
    font-family: var(--font-fam-primero), sans-serif;
    color: var(--color-marca-primero);
}
/**{
    border: 1px solid red;
}*/
*::selection {
    background-color: #ffac99;
}
.page,
.post {
    margin-bottom: 0;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
input:focus, textarea:focus, select:focus, button:focus, .form-control:focus{
    outline: none;
    box-shadow: none;
    border-color: #999;
}
a,
a:visited,
a:active,
a:link,
a:hover {
    color: inherit;
    text-decoration-line: none;
}
/* clases para el marcador de pagina actual en el menu 
#masthead .current_page_item a{
    color: var(--color-marca-segundo);
    border-top: 3px solid var(--color-marca-segundo) !important;
}
*/
/* clases para la animacion de los elementos en la pagina */
.fade {
    opacity: 1;
}
/* clases base para el sitio web, directamente relacionado al root */
/***************** color background ********************/
.background-primero {
    background-color: var(--color-marca-primero);
}
.background-segundo {
    background-color: var(--color-marca-segundo);
}
.background-tercero {
    background-color: var(--color-marca-tercero);
}
.background-cuarto {
    background-color: var(--color-marca-cuarto);
}
.background-quinto {
    background-color: var(--color-marca-quinto);
}
.background-sexto {
    background-color: var(--color-marca-sexto);
}
.background-septimo {
    background-color: var(--color-marca-septimo);
}
.background-light {
    background-color: var(--color-generico-light);
}
.background-dark {
    background-color: var(--color-generico-dark);
}
.background-white {
    background-color: var(--color-generico-blanco);
}
.background-black {
    background-color: var(--color-generico-negro);
}

/***************** color texto ********************/
.color-primero {
    color: var(--color-marca-primero);
}
.color-segundo {
    color: var(--color-marca-segundo);
}
.color-tercero {
    color: var(--color-marca-tercero);
}
.color-cuarto {
    color: var(--color-marca-cuarto);
}
.color-quinto {
    color: var(--color-marca-quinto);
}
.color-sexto {
    color: var(--color-marca-sexto);
}
.color-septimo {
    color: var(--color-marca-septimo);
}
.color-light {
    color: var(--color-generico-light);
}
.color-dark {
    color: var(--color-generico-dark);
}
.color-white {
    color: var(--color-generico-blanco);
}
.color-black {
    color: var(--color-generico-negro);
}

/***************** fuente de textos ********************/
.font-1 {
    font-family: var(--font-fam-primero), sans-serif;
}
.font-2 {
    font-family: var(--font-fam-segundo), sans-serif;
}
.font-3 {
    font-family: var(--font-fam-tercero), sans-serif;
}
.font-4 {
    font-family: var(--font-fam-cuarto), sans-serif;
}
.font-5 {
    font-family: var(--font-fam-quinto), sans-serif;
}

/***************** tamaño de textos ********************/
.texto-1 {
    font-size: var(--font-size-1);
}
.texto-2 {
    font-size: var(--font-size-2);
}
.texto-3 {
    font-size: var(--font-size-3);
}
.texto-4 {
    font-size: var(--font-size-4);
}
.texto-5 {
    font-size: var(--font-size-5);
}
.texto-6 {
    font-size: var(--font-size-6);
}
.texto-7 {
    font-size: var(--font-size-7);
}
.texto-8 {
    font-size: var(--font-size-8);
}
.texto-9 {
    font-size: var(--font-size-9);
}
.texto-10 {
    font-size: var(--font-size-10);
}

/***************** variaciones texto ********************/
.thin {
    font-weight: 100;
}
.lighter {
    font-weight: lighter;
}
.light{
    font-weight: 300;
}
.normal{
    font-weight: normal;
}
.regular {
    font-weight: 500;
}
.bold {
    font-weight: bold;
}
.bolder {
    font-weight: bolder;
}
.black {
    font-weight: 900;
}
.uppercase {
    text-transform: uppercase;
}
.lowercase {
    text-transform: lowercase;
}
.capitalize {
    text-transform: capitalize;
}
.italic {
    font-style: italic;
}
.word-break {
    word-break: break-word;
}

/***************** tamaños alto ********************/
.ht-full {
    height: 100%;
}
.ht-75 {
    height: 75%;
}
.ht-half {
    height: 50%;
}
.ht-25 {
    height: 25%;
}

/***************** tamaños ancho ********************/
.wt-full {
    width: 100%;
}
.wt-75 {
    width: 75%;
}
.wt-half {
    width: 50%;
}
.wt-25 {
    width: 25%;
}

/***************** backgrounds ********************/
.bg-center {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.bg-top {
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}
.bg-bottom {
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
}
.bg-left {
    background-position: left center;
    background-size: cover;
    background-repeat: no-repeat;
}
.bg-right {
    background-position: right center;
    background-size: cover;
    background-repeat: no-repeat;
}
.bg-fixed {
    background-attachment: fixed;
}
.bg-repeat {
    background-size: 100%;
}

/***************** opacidad ********************/
.opacity-100 {
    opacity: 1;
}
.opacity-90 {
    opacity: 0.9;
}
.opacity-80 {
    opacity: 0.8;
}
.opacity-70 {
    opacity: 0.7;
}
.opacity-60 {
    opacity: 0.6;
}
.opacity-50 {
    opacity: 0.5;
}
.opacity-40 {
    opacity: 0.4;
}
.opacity-30 {
    opacity: 0.3;
}
.opacity-20 {
    opacity: 0.2;
}
.opacity-10 {
    opacity: 0.1;
}
.opacity-0 {
    opacity: 0;
}

/***************** bordes ********************/
/***** bordes generales  *****/
.border-1 {
    border: 1px solid black;
    border-color: inherit;
}
.border-2 {
    border: 2px solid black;
    border-color: inherit;
}
.border-3 {
    border: 3px solid black;
    border-color: inherit;
}
.border-4 {
    border: 4px solid black;
    border-color: inherit;
}
.border-5 {
    border: 5px solid black;
    border-color: inherit;
}
.rounded-full {
    border-radius: 100px;
}

/***************** extras ********************/
.overflow-hidden {
    overflow: hidden;
}
.overflow-scroll {
    overflow: scroll;
}
.t-fast{
    transition: all 0.1s ease;
}
.t-mid{
    transition: all 0.3s ease;
}
.t-slow{
    transition: all 0.6s ease;
}
.mirror-x{
    transform: rotateX(180deg);
}
.mirror-y{
    transform: rotateY(180deg);
}
.mirror-z{
    transform: rotateZ(180deg);
}

/***************** efectos hover basicos ********************/
.hover-1 {
    position: relative;
    bottom: 0;
    transition: all 0.3s ease;
}
.hover-1:hover {
    bottom: 3px;
    box-shadow: 0 3px 3px var(--color-generico-dark);
}

/***************** posiciones ********************/
.p-absolute {
    position: absolute;
}
.p-relative {
    position: relative;
}
.p-fixed {
    position: fixed;
}

/****************** imagenes ***********************/
.contenedor-imagen-bg{
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.imagen-bg{
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: auto;
    object-fit: cover;
    object-position: center;
}