/* fonts */ 
@font-face {
font-family: "Chens Sans";
src: url("ChensSansVF.woff2");
}


:root{

--vh: 100%;

/* Basic colors */
--bg-color: #ffffff; 
--text-color: #333333;
--secundario: #ededed;
--l: 75%;
--l2: 85%;

--size1: 65px;
--size2: 40px;
--size3: 18px;

--padding-big: 2rem;
--padding-medium: 1rem;
--padding-small: 0.5rem;

--font-weight: 90;
--line: 3px;
--strokewidth: 18px;
}


:root[data-theme="dark"] {
--bg-color: #000000; 
--text-color: #cdcdcd;
--secundario: #171717;
--l: 30%;
--l2: 20%;

--font-weight: 80;
--line: 2px;
--strokewidth: 15px;
}

/* CSS Reset */
*,*::before,*::after{
box-sizing:border-box;
}

html {
height: -webkit-fill-available;
}

body {
min-height: 100%;
min-height: -webkit-fill-available;
}

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td,
header,footer,aside,nav,article,figure,figcaption,span,a{
padding:0;
border: 0;
font: inherit;
vertical-align: baseline;
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: 100%;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
margin-block: 0px;
}

html,body,div,dl,dt,dd,ol,li,
pre,form,fieldset,input,textarea,blockquote,th,td,
header,footer,aside,nav,article,figure,figcaption{
margin: 0px;
}

/* Globals */ 
html, body {
max-width: 100%;
color: var(--text-color);
background-color: var(--bg-color);
/* Set the font globally */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
font-family: "Chens Sans", sans-serif;
font-variation-settings: "wght" var(--font-weight), "dspl" var(--display);
}

h1, h2, nav, .big {
font-feature-settings: "liga" on, "dlig" on;
font-variation-settings: "wght" calc(var(--font-weight) - 20), "dspl" 100;
font-feature-settings: "liga" on, "dlig" on, "ss01" off, "ss02" on, "ss03" off;
letter-spacing: -1px;
font-size: var(--size1);
line-height: calc(var(--size1) + 5px);
}

.intro-text p, .bigtext, ul, h3, h4 {
font-feature-settings: "dlig" off, "liga" on;
font-variation-settings: "wght" calc(var(--font-weight) - 5), "dspl" 50;
font-feature-settings: "liga" on, "dlig" off, "ss01" off, "ss02" on, "ss03" off;
letter-spacing: -1px;
font-size: var(--size2);
line-height: calc(var(--size2) + 5px);
}

h3{
text-transform: uppercase;
}

h2 + p {
margin-top: var(--padding-big);
}

.caps {
text-transform: uppercase;
}

p, .divtext ol li, .article-content div {
font-feature-settings: "dlig" off, "liga" on;
font-variation-settings: "wght" calc(var(--font-weight) + 30), "dspl" 0;
font-feature-settings: "liga" on, "dlig" off, "ss01" off, "ss02" on, "ss03" off;
font-size: var(--size3);
line-height: calc(var(--size3) + 5px);
}

.activo {
margin-left: var(--padding-big);
}

p:not(#creditos div p):last-of-type{
margin-bottom: var(--padding-big);
}

h3:not(:first-of-type), h4:not(:first-of-type), p:not(:first-of-type){
text-indent: 40px; /* Sangría de 10px en la primera línea */ 
}

nav li{
transition: all 0.3s ease;
}

a {
color: var(--text-color);
text-decoration: none;
}

p a, h4 a {
text-decoration: underline;
text-underline-offset: .15em;   
}

nav li a, .arrow-links a, .name {
text-decoration: none; /* Quita la subrayado de los enlaces */
}

ol li{
list-style-position: inside;
font-variant-numeric: tabular-nums; /* Aplica formato tabular a los números */
}

main {
display: flex;
height: 100vh; /* Ocupa toda la altura de la ventana */
}


#creditos >  div {
padding: var(--padding-big);
}  

#creditos > div:not(:first-child) {
border-top: var(--line) solid var(--text-color);
} 

.menu {
width: 50%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
height: 100%; /* Ocupar toda la altura del viewport */
padding: var(--padding-big); /* Espaciado para separar del borde */
overflow: hidden; /* Oculta el scroll si hubiera */
}

li.nostyle {
    color: red;
list-style-type: none!important;
list-style:none!important;
}


.hidedesktop{
display: none;  
}

.hidemobile{
display: initial;
}

.contenido {
border-left: var(--line) solid var(--text-color);
width: 50%;
overflow-y: auto; /* Agrega scroll vertical si es necesario */
background-color: var(--secundario); /* Color de fondo para la sección derecha */
}

h1 {
margin: 0; /* Eliminar margen predeterminado */
}

.intro {
padding: var(--padding-big);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
min-height: 100.5vh; /* Ocupar toda la altura del viewport */
}

.nodesktop {
display: hidden;
}

.bottom{
margin-top: auto; /* Alinear al contenedor inferior */
}

.two-column {
width: 100%;
column-count: 2; /* Distribuir en dos columnas */
}

.divtext li:not(:first-of-type) {
margin-top: calc(var(--size3) - 10px);;
}

.conmargen{
margin-top: var(--padding-big);
display: block!important;
margin-bottom: 0px!important;
}

.arrow-links li{
list-style: none;
}

.two-column li:nth-child(even) {
margin-top: var(--padding-medium);
}

.arrow-links ul li::after {
content: " ↗"; /* Código Unicode para una flecha derecha */
}


section:not(:last-child) {
border-bottom: var(--line) solid var(--text-color);
}


/* articulos acordeon */
.articles label {
padding: var(--padding-big);
position: relative;
display: block;
cursor: pointer;
}

.articles{
background-color: hsl(var(--h), var(--s), var(--l)); /* Color de fondo utilizando HSL */
transition: all 0.3s ease;
}


/* Acordeon Content For Anything */
.article-content {
height: 0;
overflow: hidden;
transition: all 0.3s ease;
} 


/* Acordeon Check Box Hidden */
.articles input {
display:none;
position: absolute;
opacity: 0;
z-index: -1;
}

/* :checked */
input:checked ~ .article-content {
height: 100%;
border-top: var(--line) solid var(--text-color);
}


/* Contenido interior articulos */
.doscolumnas {
display: grid;
grid-template-columns: 1fr 1fr; 
}

.unacolumnas {
display: grid;
grid-template-columns: 1fr; 
}

.bordearriba{
border-top: var(--line) solid var(--text-color); 
}

.divpicture {
width: 100%;
border-right: var(--line) solid var(--text-color);
}


.divtext {
width: 100%;
padding: var(--padding-big);
height: 100%;
}

.divpicture img {
width: 100%;
height: 100%;
object-fit: cover;
}

.resumen {
padding: var(--padding-big); 
border-top: var(--line) solid var(--text-color);
}


.trescolumnas  ul{
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* Tres columnas iguales */
font-size: var(--size2);
}

.trescolumnas ul li:last-of-type {
text-align: right;
}

.trescolumnas ul li:nth-child(2) {
text-align: center;
justify-self: center;

}


/* Color svg logo */

.logo{
width: 85px;
height: 85px;
}

.logo svg{
width: 100%;
height: 100%;
}


@media screen and (max-width: 800px) {

:root{
--size1: 30px;
--size2: 25px;
--size3: 18px;

--padding-big: 1.5rem;
--padding-medium: 0.7rem;
--padding-small: 0.3rem;

--line: 1px!important;
--strokewidth: 12px!important;
}

.logo {
    width: 35px;
    height: 35px;
  }
  
  .logo svg {
    width: auto; /* Ajusta el ancho automáticamente */
    height: 100%;
  }

.show {
    display: block; /* Mostrar el menú móvil cuando se aplica la clase 'show' */
  }

.hidemobile{
display: none;
}

.hidedesktop{
display: block;
}

.menumobile{
position: fixed;
display: none;
justify-content: space-between;
width: 100%;
padding: var(--padding-big);   
background-color: var(--secundario);
z-index: 99;
border-bottom: var(--line) solid var(--text-color);
}

li.hidedesktop{
display: list-item;
}

.menu {
width: 100%;
display: none;
position: fixed;
background-color: var(--bg-color);
z-index: 9999;
}

#menuTitle {
cursor: pointer;
}


.menu li:not(:first-child) {
margin-top: var(--padding-medium);
}


.menulink {
padding-top: var(--padding-big);
padding-left: var(--padding-big);
position: fixed;
z-index: 999;
width: 60px;
height: 60px;
}

.mobiletext {
display: block;     
}

.divpicture {
border-right: none;
}


.two-column {
column-count: 1; /* Distribuir en dos columnas */
}

.divtext{
display: none;  
}

.contenido{
width: 100%;
border-left: none;
}

.trescolumnas  ul{
display: grid;
grid-template-columns: 1fr; /* Tres columnas iguales */
font-size: var(--size2);
}

.trescolumnas ul li:last-of-type {
text-align: left;
}

.trescolumnas ul li:nth-child(2) {
text-align: left;
justify-self: left;

}


.arrow-links ul li:not(:first-of-type) {
margin-top: 20px;
}

p, .divtext ol li, .article-content div {
font-variation-settings: "wght" var(--font-weight), "dspl" 0;
}

.doscolumnas {
display: grid;
grid-template-columns: 1fr; 
}


}


@media only screen and (min-width: 768px) {

:root{
--size1: 42px;
--size2: 25px;
--size3: 12px;
}

.articles label:hover{
background-color: hsl(var(--h), calc(var(--s) + 15%), var(--l2)); /* Color de fondo utilizando HSL */
}

.divtext li:hover, .trescolumnas ul li a:hover, .bottom .arrow-links a:hover, div a:hover {
text-decoration: underline;
text-underline-offset: .15em;
}

nav li:hover {
margin-left: var(--padding-big);
}

.name:hover, #creditoslink:hover {
cursor: help;
}

}

@media only screen and (min-width: 1200px) {

  :root{
  --size1: 50px;
  --size2: 32px;
  --size3: 16px;
  }
}