:root {
    --fuenteHeading: 'PT Sans', sans-serif;
    --fuenteParrafos: 'Open Sans', sans-serif;

    --primario: #784d3c;
    --gris: #e1e1e1;
    --blanco: #fff;
    --negro: #000;
    --azul-oscuro: #070C1F;
    --fondo-pricnipal: #1A1818;
    --texto: #F0EDED;
}

html {
    box-sizing: border-box;
    font-size: 62.5%;/*1 rem= 10px*/
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: var(--fuenteParrafos);
    font-size: 1.6rem;
    line-height: 2;
}

/*Globales*/
a {
    text-decoration: none;
    color: gray;
}
a:hover {
    color: var(--gris);

}

@media (max-width: 767px) {
 .contenedor {
    max-width: 120rem;
    width: 90%;
    /*width: min(90%, 120rem);  Esta linea de codigo es lo mismo que las dos linea de arriba. Lo que hace es que toma el menor valor y lo aplica por ejemplo cuando hay espacio sufieciente para aplicar los 120rem se aplican pero cuando no hay espacio suficiente aplica el 90%*/
    margin: 0 auto;
}     
}

h1, h2, h3, h4 {
    font-family: var(--fuenteHeading);
    line-height: 1.2;
} 

h1 {
    font-size: 4.8rem;
}



h3 {
    font-size: 3.2rem;
}

h4 {
    font-size: 2.8rem;
}

img {
    width: 100%;
}


/*Utilidades*/

.no-margin {
    margin: 0;   
}

.no-padding {
    padding: 0;
}

.centrar-texto {
    text-align: center;
}
/*Header*/
.header {
  position: relative;
  background: url(../img/imagen_calistenia.jpg) no-repeat center center/cover;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header .overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.8));
}
.header .content {
  position: relative;
  color: white;
  text-align: center;
}
.header h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

hr {
    margin-right: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
/*Main*/
/*Estilos globales*/
main {
    background: url(../img/ChatGPT\ Image\ 17\ oct\ 2025\,\ 14_19_39.png) center/cover;
}

h2 {
    font-size: 4rem;
    color: var(--texto);
}

p {
    justify-content: center;
    color: var(--texto);
    font-size: 2rem;
}

ol > li::marker {
  font-weight: bold;
}

.none {
    list-style: none;
}

ul,
ol,
span {
    color: var(--texto);
    font-size: 2rem;
}

/*------*/

.color {
    background-color: var(--fondo-pricnipal);
}
@media (min-width: 768px) {
    .contenido_principal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 95%;
    margin: 0 2rem  ;
    gap: 2rem;
}

.columna-completa {
    grid-column: 1/3;
    border-bottom: 1rem solid gray;
    color: var(--texto);
}

.borde {
    border-right: .7rem solid gray;
    margin-right: 2rem;
}
}

.lista {
    font-size: 2.5rem;
}