/*  
	Theme Name: Salty People 
	Version: 1.0 2025
	Author: hctr
*/

/********************************************************************************/
/************************************************************************ RESET */
/********************************************************************************/

* {
  box-sizing: border-box;
  position: relative;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100dvh;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

figure {
  margin: 0;
}

/********************************************************************************/
/************************************************************************ FONTS */
/********************************************************************************/

@font-face {
  font-family: "Neue Montreal";
  src: url("./fonts/NeueMontreal-Medium.eot");
  src: url("./fonts/NeueMontreal-Medium.eot?#iefix") format("embedded-opentype"),
    url("./fonts/NeueMontreal-Medium.woff2") format("woff2"),
    url("./fonts/NeueMontreal-Medium.woff") format("woff"),
    url("./fonts/NeueMontreal-Medium.ttf") format("truetype"),
    url("./fonts/NeueMontreal-Medium.svg#NeueMontreal-Medium") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/********************************************************************************/
/********************************************************************** GENERAL */
/********************************************************************************/

:root {
  --font--Neue: "Neue Montreal", sans-serif;
  --size--30: clamp(20px, 4vw, 3rem);
  --color--primary: #000000;
}

* {
  font-family: var(--font--Neue);
  color: var(--color--primary);
  -webkit-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
  font-size: 10px;
}

@media (min-width: 2559px) and (max-width: 3000px) {
  html {
    font-size: 13.2px;
  }
}
@media (max-width: 1919px) {
  html {
    font-size: 7.5px;
  }
}
@media (max-width: 1279px) {
  html {
    font-size: 7.25px;
  }
}
@media (max-width: 959px) {
  html {
    font-size: 6.5px;
  }
}
@media (max-width: 799px) {
  html {
    font-size: 6px;
  }
}
@media (max-width: 639px) {
  html {
    font-size: 5.5px;
  }
}
@media (max-width: 479px) {
  html {
    font-size: 5px;
  }
}

/********************************************************************************/
/******************************************************************* ESENCIALES */
/********************************************************************************/

/* CONSTRUCCIÓN */

.construccion {
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7.8rem;
}

.construccion h1 {
  width: 42.4rem;
  aspect-ratio: 624 / 337;
  background: url(./img/logo-square-dark.svg);
  background-size: contain;
  background-repeat: no-repeat;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.construccion p {
  font-size: var(--size--30);
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 799px) {
  .construccion {
    gap: 6.9rem;
  }
  .construccion h1 {
    width: 36rem;
  }
}