/* ---------------------------------------------------
   Taller de Despliegue de Aplicaciones - ORT Uruguay
   Guillermo Correa - 318422 - M15C
   Hoja de estilos
--------------------------------------------------- */

/* Paleta y variables */
:root{
  --paper:#e4e6df;
  --ink:#1c221d;
  --pine:#2f4a3c;
  --soft:#868c81;
}

/* Reset basico */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

/* Estructura general */
body{
  font-family:'Archivo',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  min-height:100vh;
  padding:clamp(28px,7vw,80px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.hoja{
  width:100%;
  max-width:780px;
}

/* Encabezado de la materia */
.arriba{
  font-size:13px;
  color:var(--soft);
  letter-spacing:.02em;
  margin-bottom:clamp(48px,10vw,110px);
}

.arriba b{
  font-weight:500;
  color:var(--ink);
}

/* Nombre */
h1{
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 118,'wght' 800;
  font-size:clamp(40px,9.5vw,92px);
  line-height:.94;
  letter-spacing:-.025em;
  text-transform:uppercase;
}

.carrera{
  font-size:clamp(15px,2.2vw,19px);
  color:var(--soft);
  margin-top:22px;
  max-width:34ch;
  margin-left:auto;
  margin-right:auto;
  line-height:1.5;
}

/* Servidor web utilizado */
.servido{
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 105,'wght' 600;
  font-size:clamp(19px,3.4vw,30px);
  color:var(--pine);
  margin-top:clamp(40px,8vw,72px);
  letter-spacing:-.015em;
  line-height:1.25;
  max-width:22ch;
  margin-left:auto;
  margin-right:auto;
}

/* Numero de estudiante y grupo */
.datos{
  margin-top:clamp(36px,7vw,64px);
  padding-top:22px;
  border-top:1px solid rgba(28,34,29,.16);
  display:flex;
  justify-content:center;
  gap:clamp(28px,6vw,64px);
  flex-wrap:wrap;
}

.dato dt{
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--soft);
  margin-bottom:5px;
}

.dato dd{
  font-size:16px;
  font-weight:500;
}

.pie{
  margin-top:clamp(44px,9vw,88px);
  font-size:12px;
  color:var(--soft);
}

/* Celulares */
@media (max-width:520px){
  .datos{
    gap:24px 36px;
  }
}