:root {
   --headerBack: #eee;
   --headerBack2: #1c2852;
   --headerText: #447;
   --headerText2: #fff;
   --bodyBack: #fafafa;
   --bodyText: #334;
   --cD: #A0AFAF;
   --cC: #FCFEFF;
   --cL: #4e7c69;
   --radius: .3rem;

   /* --------------------- */
   --inputRadius: 1.2rem;
   --cardRadius:.8rem;
   --textColorDark:#00554F;
   --textColorClear:#337772;
   --inputDecorationColor: #337772;
   /* --inputDecorationColor: #99BBB9; */
   --buttonBackground:#337772;
   --buttonTextColor:#fafafa;

}

* {
   box-sizing: border-box;
}

html {
   font-size: 15px;
   line-height: 1.14;
   -webkit-text-size-adjust: 100%;
   font-weight: bold;
}


@font-face {
   font-family: 'Manrope';
   font-style: normal;
   font-weight: 400;
   font-display: block;
   src: url("../fonts/Manrope/Manrope-VariableFont_wght.ttf");
}

@media screen and (min-width: 1350px) {
   html {
      font-size: 14px;
      font-weight: normal;
   }
}

body {
   font-family: 'Manrope', 'system-ui', 'Arial Narrow', Arial, sans-serif, sans-serif;
   background:
   linear-gradient(118deg,#ffffffab 2%,rgba(255,255,255,.1) 15%),
   linear-gradient(222deg,#47ded473 28%, #99ffc971 45%,#ffffff6e 71%,#47ded467);
   margin: 0;
   padding: 0;
   color: var(--bodyText);
   background-color: #999;
   background-size: cover;
   background-repeat: no-repeat;
   background-attachment: fixed;
}

a {
   font-size: 1rem;
   display: inline;
   text-decoration: none;
   color: var(--cD);
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: "Courier New", Courier, monospace;
   font-weight: bolder;
   margin: 1.5rem .5rem;
}

h1 {
   font-size: 1.7rem;
}

h2 {
   font-size: 1.5rem;
}

h3 {
   font-size: 1.3rem;
}

h4 {
   font-size: 1rem;
}

hr {
   box-sizing: content-box;
   height: 0;
   overflow: visible;
   width: 98%;
   color: var(--cC);
}

code,
pre {
   font-family: monospace, monospace;
   font-size: 1em;
   background-color: #e8e8e8;
   border: 1px solid #ddd;
   padding: 10px;
   border-radius: 4px;
   overflow: auto;
   white-space: pre-wrap; /* Asegura que el texto se ajuste al contenedor */
   word-break: break-all; /* Evita desbordamientos de palabras largas */
}

sub,
sup {
   font-size: 72%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
   color: var(--cL);
}

small {
   font-size: 80%;
}

sub {
   bottom: -0.25em;
}

sup {
   top: -0.5em;
}

button,
input,
select,
textarea {
   font-family: inherit;
   font-size: 100%;
   line-height: 1.15;
   margin: 0;
   border: 1px solid #B0B0C0;
   padding: .6rem;
   border-radius: var(--radius);
}