¿Por que los elementos de mi página se juntan cada vez que ajusto el alto de la pagina?

Question

al ajustar el alto de mi pantalla la pagina se rompe y todos los elementos se empiezan a juntar, cual puede ser el problema?

@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  /* outline: 2px solid red; */
}

:root {
  --color-primary: #1c1c1c;
  --color-secundary: #7c7c7c;
}

/* scroll */
body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0);
}
body::-webkit-scrollbar-thumb {
  background-color: #7c7c7c;
  border-radius: 20px;
  border: 3px solid #ffffff;
}
/* ------ */

body {
  height: max-content;
  font-family: "Inter", sans-serif;
  color: var(--color-primary);
  display: flex;
  justify-content: center;
  font-size: 14px;
  overflow-x: hidden;
}

.fondo {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-image: url(img/grid.svg);
  mask-image: linear-gradient(180deg,white,rgba(255,255,255,0));
  background-color: rgb(249 250 251 / 1);
  opacity: 0.5;
}

.beams {
  z-index: -5;
  position: absolute;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  background-image: url(img/beams.jpg);
  background-position: center;
  background-size: cover;
}

.flex {
  width: 90%;
}

.header {
  display: flex;
  justify-content: center;
}


/* nav section */
.nav {
  font-weight: 500;
  position: fixed;
  top: 1.5rem;
  width: 640px;
  height: 60px;
  background: #fff;
  border-radius: 40px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 100;
}

.nav__item {
  text-decoration: none;
  color: var(--color-secundary);
  padding: 10px 20px;
}

.nav__item:hover {
  background-color: #7c7c7c1f;
  border-radius: 20px;
}


/* main section */
.main {
  /* position: relative; */
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main__texts {
  text-align: center;
  width: 90%;
}

.main__title {
  font-size: 5rem;
  margin-bottom: .5rem;
  animation: lateral 1s forwards ease-in-out;
}

span {
  background-color: var(--color-primary);
  padding: 0 10px;
  color: #fff;
}

.main__desc {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--color-secundary);
  animation: lateral .5s forwards ease-in-out;
}

.main__figure {
  margin-top: 200px;
}

.main__img {
  display: block;
  pointer-events: none;
  max-width: 500px;
  animation: inicio 1s forwards ease-in-out;
}

.main__arrow {
  position: absolute;
  bottom: 64px;
  width: 32px;
  animation: arrow 1.5s ease-in-out infinite;
}

@keyframes arrow {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes inicio {
  0% {
    transform: translateY(-180%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes lateral {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}


/* definicion section */
.definicion {
  height: 100vh;
  color: var(--color-primary);
  display: flex;
  align-items: center;
}

.definicion__texts {
  padding: 20px;
  width: 50%;
}

.definicion__title {
  font-size: 4rem;
  margin-bottom: 0.5rem;
}

.definicion__desc {
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--color-secundary);
}

.grid {
  height: 50%;
  width: 50%;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: repeat(8,1fr) ;
  gap: 1rem;
  position: relative;
  top: -200px;
  z-index: -10;
}

.uno,
.dos,
.tres,
.cuatro {
  height: 300px;
  background-position: center;
  background-size: cover;
  border-radius: 10px;
  box-shadow: 0 0 2px rgba(0, 0, 0, .1);
}

.uno {
  background-image: url(img/uno.jpg);
  grid-column: 3/5;
  grid-row: 1/4;
}

.dos {
  background-image: url(img/dos.jpg);
  grid-column: 1/3;
  grid-row: 3/6;
}

.tres {
  background-image: url(img/tres.jpg);
  grid-column: 3/5;
  grid-row: 4/7;
}

.cuatro {
  background-image: url(img/cuatro.jpg);
  grid-column: 1/3;
  grid-row: 6/-1;
}


/* historia section */
.historia {
  height: 100vh;
}

.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  z-index: -20;
  top: 90px;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #f7f7f7;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

.container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: #f7f7f7;
  border: 4px solid #FFA901;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

.left {
  left: 0;
}

.right {
  left: 50%;
}

.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid #ffffff;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #f7f7f7;
}

.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid #ffffff;
  border-width: 10px 10px 10px 0;
  border-color: transparent #f7f7f7 transparent transparent;
}

.right::after {
  left: -16px;
}

.content {
  padding: 20px 30px;
  background-color: #f7f7f7;
  position: relative;
  border-radius: 6px;
}

@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .timeline::after {
  left: 31px;
  }
  
  /* Full-width containers */
  .container {
  width: 100%;
  padding-left: 70px;
  padding-right: 25px;
  }
  
  /* Make sure that all arrows are pointing leftwards */
  .container::before {
  left: 60px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .left::after, .right::after {
  left: 15px;
  }
  
  /* Make all right containers behave like the left ones */
  .right {
  left: 0%;
  }
}


/* tipos section */
.tipos {
  height: 100vh;
}

.tipos__texts {
  text-align: center;
  padding-top: 6rem;
}

.tipos__title {
  font-size: 4rem;
  margin-bottom: 0.5rem;
}

.tipos__desc {
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--color-secundary);
}

.card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 5px 5px var(--color-primary);
  border: 2px solid var(--color-primary);
  padding: 20px;
  width: 300px;
  height: 300px;
}

.card__title {
  font-size: 1.3rem;
  color: var(--color-primary);
}

.card__desc {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-secundary);
}

.cards {
  display: flex;
  justify-content: space-evenly;
  margin-top: 100px;
}


/* aplicaciones section */
.aplicaciones {
  height: 100vh;
}

.a__texts {
  text-align: center;
  padding-top: 6rem;
}

.a__title {
  font-size: 4rem;
  margin-bottom: 0.5rem;
}

.a__desc {
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--color-secundary);
}

.a__grid {
  width: 100%;
  height: 550px;
  margin-top: 1.5rem;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 2rem;
}

.grid-property {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 5px 5px 0 var(--color-primary);
  border: 1px solid var(--color-primary);
  text-align: center;
  padding: 20px;
  display: grid;
  align-items: center;
  place-content: center;
  justify-items: center;
  gap: 0.3rem;
}


.grid__item1 {
  grid-column: 1/2;
  grid-row: 1/5;
}

.grid__item2 {
  grid-column: 1/2;
  grid-row: 5/-1;
}

.grid__item3 {
  grid-column: 2/3;
  grid-row: 1/6;
}

.grid__item4 {
  grid-column: 2/3;
  grid-row: 6/-1;
}

.grid__item5 {
  grid-column: 3/-1;
  grid-row: 1/5;
}

.grid__item6 {
  grid-column: 3/-1;
  grid-row: 5/-1;
}

.grid__title {
  font-size: 1.5rem;
  color: var(--color-primary);
}

.grid__desc {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-secundary);
}

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Inteligencia Artificial (IA)</title>
</head>

<body>

  <section class="flex">

    <header class="header">
      <nav class="nav">
        <a href="#introduccion" class="nav__item">Introducción</a>
        <a href="#definicion" class="nav__item">Definición</a>
        <a href="#historia" class="nav__item">Historia</a>
        <a href="#tipos" class="nav__item">Tipos</a>
        <a href="#aplicaciones" class="nav__item">Aplicaciones</a>
      </nav>
    </header>

    
    <main class="main" id="introduccion">

      <figure class="main__figure">
        <img src="img/ai-letters.png" alt="" class="main__img">
      </figure>

      <div class="main__texts">
        <h1 class="main__title">Inteligencia <span>Artificial</span></h1>
        <p class="main__desc"><strong>Prepárate</strong> para sumergirte en el fascinante mundo de la Inteligencia Artificial <strong>(IA)</strong>, donde máquinas <strong>emulan</strong> la inteligencia humana, redefiniendo nuestro <strong>futuro</strong>.</p>
      </div>

      <a href="#definicion"><img src="img/down-arrow.svg" class="main__arrow"></a>

    </main>
    <div class="beams"></div>
    <div class="fondo"></div>

    <section class="definicion" id="definicion">
      <div class="definicion__texts">
        <h2 class="definicion__title">¿<span>Qué es</span> la Inteligencia Artificial?</h2>
        <p class="definicion__desc">Imagina <strong>máquinas que aprenden</strong>, razonan y toman decisiones como si fueran humanos. ¡Eso es la <strong>IA!</strong> Un campo en auge que abarca tecnologías que permiten a las computadoras imitar la capacidad cognitiva humana. Desde el reconocimiento de voz hasta los vehículos autónomos, la IA está <strong>revolucionando</strong> nuestra vida diaria.</p>
      </div>

      <div class="grid">
        <div class="uno"></div>
        <div class="dos"></div>
        <div class="tres"></div>
        <div class="cuatro"></div>
      </div>
    </section>

    <section class="historia" id="historia">
      <div class="timeline">
        <div class="container left">
          <div class="content">
            <h2>1950</h2>
            <p>Alan Turing introduce la Prueba de Turing, una prueba para determinar si una máquina puede exhibir un comportamiento inteligente equivalente o indistinguible del de un humano.</p>
          </div>
        </div>
        <div class="container right">
          <div class="content">
            <h2>1956</h2>
            <p>Se acuña el término "inteligencia artificial" en la histórica Conferencia de Dartmouth, dando inicio a un campo de estudio formal.</p>
          </div>
        </div>
        <div class="container left">
          <div class="content">
            <h2>1960</h2>
            <p>Auge del enfoque simbólico, donde la IA se basaba en la manipulación de símbolos y reglas para representar y resolver problemas.</p>
          </div>
        </div>
        <div class="container right">
          <div class="content">
            <h2>1980</h2>
            <p>Invierno de la IA, un período de estancamiento debido a las limitaciones computacionales y la dificultad de replicar el razonamiento humano.</p>
          </div>
        </div>
        <div class="container left">
          <div class="content">
            <h2>1990</h2>
            <p>Resurgimiento de la IA con la llegada de las redes neuronales artificiales, inspiradas en el funcionamiento del cerebro humano.</p>
          </div>
        </div>
        <div class="container right">
          <div class="content">
            <h2>Siglo XXI</h2>
            <p>La IA experimenta un crecimiento exponencial gracias a la explosión de datos, el aumento de la potencia computacional y el desarrollo de algoritmos sofisticados.</p>
          </div>
        </div>
      </div>
    </section>

    <section class="tipos" id="tipos">
      <div class="tipos__texts">
        <h2 class="tipos__title"><span>Tipos de IA:</span> Una diversa gama de inteligencias</h2>
        <p class="tipos__desc">La IA <strong>no es un monolito</strong>, sino un espectro de enfoques y capacidades:</p>
      </div>

      <section class="cards">
        <div class="card">
          <figure class="figure-des">
            <img src="img/ia-debil.gif" class="card__gif">
          </figure>
          <h3 class="card__title">IA débil o estrecha</h3>
          <p class="card__desc">Enfocarse en tareas específicas, como el reconocimiento facial o el juego de ajedrez.</p>
        </div>

        <div class="card">
          <figure class="figure-des">
            <img src="img/ia-fuerte.gif" class="card__gif">
          </figure>
          <h3 class="card__title">IA fuerte o general</h3>
          <p class="card__desc">Alcanzar la inteligencia humana en su totalidad, capaz de realizar cualquier tarea intelectual que pueda realizar un humano.</p>
        </div>

        <div class="card">
          <figure class="figure-des">
            <img src="img/ia-super.gif" class="card__gif">
          </figure>
          <h3 class="card__title">IA artificial general (AGI)</h3>
          <p class="card__desc">Similar a la IA fuerte, pero con la capacidad de aprender y adaptarse a nuevos entornos y situaciones de forma autónoma.</p>
        </div>
      </section>
      
    </section>

    <section class="aplicaciones" id="aplicaciones">
      <div class="a__texts">
        <h2 class="a__title"><span>Aplicaciones de la IA:</span> Un mundo transformado por la inteligencia</h2>
        <p class="a__desc">La IA está <strong>impactando</strong> en prácticamente todos los aspectos de nuestras vidas:</p>
      </div>

      <section class="a__grid">
        <div class="grid__item1 grid-property">
          <img src="img/salud.png" alt="">
          <h2 class="grid__title">Salud</h2>
          <p class="grid__desc">Diagnóstico de enfermedades, desarrollo de medicamentos, asistencia quirúrgica robótica.</p>
        </div>
        <div class="grid__item2 grid-property">
          <img src="img/finanza.png" alt="">
          <h2 class="grid__title">Finanzas</h2>
          <p class="grid__desc">Detección de fraudes, análisis de mercado, gestión de inversiones.</p>
        </div>
        <div class="grid__item3 grid-property">
          <img src="img/transporte.png" alt="">
          <h2 class="grid__title">Transporte</h2>
          <p class="grid__desc">Vehículos autónomos, sistemas de gestión de tráfico inteligente, optimización de rutas de entrega.</p>
        </div>
        <div class="grid__item4 grid-property">
          <img src="img/educacion.png" alt="">
          <h2 class="grid__title">Educación</h2>
          <p class="grid__desc">Tutoría personalizada, aprendizaje adaptativo, evaluación automatizada.</p>
        </div>
        <div class="grid__item5 grid-property">
          <img src="img/agricultura.png" alt="">
          <h2 class="grid__title">Agricultura</h2>
          <p class="grid__desc">Monitoreo de cultivos, predicción de rendimientos, gestión del riego.</p>
        </div>
        <div class="grid__item6 grid-property">
          <img src="img/entretenimiento.png" alt="">
          <h2 class="grid__title">Entretenimiento</h2>
          <p class="grid__desc">Recomendaciones de películas y música, creación de contenido personalizado, experiencias de juego inmersivas.</p>
        </div>
      </section>
    </section>

  </section>


</body>

</html>

Probé mi pagina en un monitor más pequeño y todo el contenido se junta al tener un height menor, como puedo hacer que todos mis elementos queden separados en mi pagina y no se junten al haber una pantalla con un menor height?

al ajustar el alto de mi pantalla la pagina se rompe y todos los elementos se empiezan a juntar, cual puede ser el problema?

Answer 1

El principal problema es que le estas dando un tamaño estático usando height: 100vh;, aquí le estas indicando que debe de tener un tamaño del 100% del alto del viewport, cuando la pantalla se hace menos alta el viewport cambia, los elementos no caben pero el contenedor no crece.

Lo mejor es usar min-height: 100vh; con esto le indicas a css que quieres que use un tamaño mínimo de 100vh pero en caso de necesitar mas espacio puede seguir creciendo el alto.

No olvides aplicar responsive a los items.

@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  /* outline: 2px solid red; */
}

:root {
  --color-primary: #1c1c1c;
  --color-secundary: #7c7c7c;
}

/* scroll */
body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0);
}
body::-webkit-scrollbar-thumb {
  background-color: #7c7c7c;
  border-radius: 20px;
  border: 3px solid #ffffff;
}
/* ------ */

body {
  height: max-content;
  font-family: "Inter", sans-serif;
  color: var(--color-primary);
  display: flex;
  justify-content: center;
  font-size: 14px;
  overflow-x: hidden;
}

.fondo {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  min-height: 100vh;
  background-image: url(img/grid.svg);
  mask-image: linear-gradient(180deg,white,rgba(255,255,255,0));
  background-color: rgb(249 250 251 / 1);
  opacity: 0.5;
}

.beams {
  z-index: -5;
  position: absolute;
  top: 0;
  right: 0;
  width: 100vw;
  min-height: 100vh;
  background-image: url(img/beams.jpg);
  background-position: center;
  background-size: cover;
}

.flex {
  width: 90%;
}

.header {
  display: flex;
  justify-content: center;
}


/* nav section */
.nav {
  font-weight: 500;
  position: fixed;
  top: 1.5rem;
  width: 640px;
  height: 60px;
  background: #fff;
  border-radius: 40px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 100;
}

.nav__item {
  text-decoration: none;
  color: var(--color-secundary);
  padding: 10px 20px;
}

.nav__item:hover {
  background-color: #7c7c7c1f;
  border-radius: 20px;
}


/* main section */
.main {
  /* position: relative; */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main__texts {
  text-align: center;
  width: 90%;
}

.main__title {
  font-size: 5rem;
  margin-bottom: .5rem;
  animation: lateral 1s forwards ease-in-out;
}

span {
  background-color: var(--color-primary);
  padding: 0 10px;
  color: #fff;
}

.main__desc {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--color-secundary);
  animation: lateral .5s forwards ease-in-out;
}

.main__figure {
  margin-top: 200px;
}

.main__img {
  display: block;
  pointer-events: none;
  max-width: 500px;
  animation: inicio 1s forwards ease-in-out;
}

.main__arrow {
  position: absolute;
  bottom: 64px;
  width: 32px;
  animation: arrow 1.5s ease-in-out infinite;
}

@keyframes arrow {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes inicio {
  0% {
    transform: translateY(-180%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes lateral {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}


/* definicion section */
.definicion {
  min-height: 100vh;
  color: var(--color-primary);
  display: flex;
  align-items: center;
}

.definicion__texts {
  padding: 20px;
  width: 50%;
}

.definicion__title {
  font-size: 4rem;
  margin-bottom: 0.5rem;
}

.definicion__desc {
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--color-secundary);
}

.grid {
  height: 50%;
  width: 50%;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: repeat(8,1fr) ;
  gap: 1rem;
  position: relative;
  top: -200px;
  z-index: -10;
}

.uno,
.dos,
.tres,
.cuatro {
  height: 300px;
  background-position: center;
  background-size: cover;
  border-radius: 10px;
  box-shadow: 0 0 2px rgba(0, 0, 0, .1);
}

.uno {
  background-image: url(img/uno.jpg);
  grid-column: 3/5;
  grid-row: 1/4;
}

.dos {
  background-image: url(img/dos.jpg);
  grid-column: 1/3;
  grid-row: 3/6;
}

.tres {
  background-image: url(img/tres.jpg);
  grid-column: 3/5;
  grid-row: 4/7;
}

.cuatro {
  background-image: url(img/cuatro.jpg);
  grid-column: 1/3;
  grid-row: 6/-1;
}


/* historia section */
.historia {
  min-height: 100vh;
}

.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  z-index: -20;
  top: 90px;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #f7f7f7;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

.container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: #f7f7f7;
  border: 4px solid #FFA901;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

.left {
  left: 0;
}

.right {
  left: 50%;
}

.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid #ffffff;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #f7f7f7;
}

.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid #ffffff;
  border-width: 10px 10px 10px 0;
  border-color: transparent #f7f7f7 transparent transparent;
}

.right::after {
  left: -16px;
}

.content {
  padding: 20px 30px;
  background-color: #f7f7f7;
  position: relative;
  border-radius: 6px;
}

@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .timeline::after {
  left: 31px;
  }
  
  /* Full-width containers */
  .container {
  width: 100%;
  padding-left: 70px;
  padding-right: 25px;
  }
  
  /* Make sure that all arrows are pointing leftwards */
  .container::before {
  left: 60px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .left::after, .right::after {
  left: 15px;
  }
  
  /* Make all right containers behave like the left ones */
  .right {
  left: 0%;
  }
}


/* tipos section */
.tipos {
  min-height: 100vh;
}

.tipos__texts {
  text-align: center;
  padding-top: 6rem;
}

.tipos__title {
  font-size: 4rem;
  margin-bottom: 0.5rem;
}

.tipos__desc {
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--color-secundary);
}

.card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 5px 5px var(--color-primary);
  border: 2px solid var(--color-primary);
  padding: 20px;
  width: 300px;
  height: 300px;
}

.card__title {
  font-size: 1.3rem;
  color: var(--color-primary);
}

.card__desc {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-secundary);
}

.cards {
  display: flex;
  justify-content: space-evenly;
  margin-top: 100px;
}


/* aplicaciones section */
.aplicaciones {
  min-height: 100vh;
}

.a__texts {
  text-align: center;
  padding-top: 6rem;
}

.a__title {
  font-size: 4rem;
  margin-bottom: 0.5rem;
}

.a__desc {
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--color-secundary);
}

.a__grid {
  width: 100%;
  height: 550px;
  margin-top: 1.5rem;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 2rem;
}

.grid-property {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 5px 5px 0 var(--color-primary);
  border: 1px solid var(--color-primary);
  text-align: center;
  padding: 20px;
  display: grid;
  align-items: center;
  place-content: center;
  justify-items: center;
  gap: 0.3rem;
}


.grid__item1 {
  grid-column: 1/2;
  grid-row: 1/5;
}

.grid__item2 {
  grid-column: 1/2;
  grid-row: 5/-1;
}

.grid__item3 {
  grid-column: 2/3;
  grid-row: 1/6;
}

.grid__item4 {
  grid-column: 2/3;
  grid-row: 6/-1;
}

.grid__item5 {
  grid-column: 3/-1;
  grid-row: 1/5;
}

.grid__item6 {
  grid-column: 3/-1;
  grid-row: 5/-1;
}

.grid__title {
  font-size: 1.5rem;
  color: var(--color-primary);
}

.grid__desc {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-secundary);
}

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Inteligencia Artificial (IA)</title>
</head>
<body>

  <section class="flex">

    <header class="header">
      <nav class="nav">
        <a href="#introduccion" class="nav__item">Introducción</a>
        <a href="#definicion" class="nav__item">Definición</a>
        <a href="#historia" class="nav__item">Historia</a>
        <a href="#tipos" class="nav__item">Tipos</a>
        <a href="#aplicaciones" class="nav__item">Aplicaciones</a>
      </nav>
    </header>

    
    <main class="main" id="introduccion">

      <figure class="main__figure">
        <img src="img/ai-letters.png" alt="" class="main__img">
      </figure>

      <div class="main__texts">
        <h1 class="main__title">Inteligencia <span>Artificial</span></h1>
        <p class="main__desc"><strong>Prepárate</strong> para sumergirte en el fascinante mundo de la Inteligencia Artificial <strong>(IA)</strong>, donde máquinas <strong>emulan</strong> la inteligencia humana, redefiniendo nuestro <strong>futuro</strong>.</p>
      </div>

      <a href="#definicion"><img src="img/down-arrow.svg" class="main__arrow"></a>

    </main>
    <div class="beams"></div>
    <div class="fondo"></div>

    <section class="definicion" id="definicion">
      <div class="definicion__texts">
        <h2 class="definicion__title">¿<span>Qué es</span> la Inteligencia Artificial?</h2>
        <p class="definicion__desc">Imagina <strong>máquinas que aprenden</strong>, razonan y toman decisiones como si fueran humanos. ¡Eso es la <strong>IA!</strong> Un campo en auge que abarca tecnologías que permiten a las computadoras imitar la capacidad cognitiva humana. Desde el reconocimiento de voz hasta los vehículos autónomos, la IA está <strong>revolucionando</strong> nuestra vida diaria.</p>
      </div>

      <div class="grid">
        <div class="uno"></div>
        <div class="dos"></div>
        <div class="tres"></div>
        <div class="cuatro"></div>
      </div>
    </section>

    <section class="historia" id="historia">
      <div class="timeline">
        <div class="container left">
          <div class="content">
            <h2>1950</h2>
            <p>Alan Turing introduce la Prueba de Turing, una prueba para determinar si una máquina puede exhibir un comportamiento inteligente equivalente o indistinguible del de un humano.</p>
          </div>
        </div>
        <div class="container right">
          <div class="content">
            <h2>1956</h2>
            <p>Se acuña el término "inteligencia artificial" en la histórica Conferencia de Dartmouth, dando inicio a un campo de estudio formal.</p>
          </div>
        </div>
        <div class="container left">
          <div class="content">
            <h2>1960</h2>
            <p>Auge del enfoque simbólico, donde la IA se basaba en la manipulación de símbolos y reglas para representar y resolver problemas.</p>
          </div>
        </div>
        <div class="container right">
          <div class="content">
            <h2>1980</h2>
            <p>Invierno de la IA, un período de estancamiento debido a las limitaciones computacionales y la dificultad de replicar el razonamiento humano.</p>
          </div>
        </div>
        <div class="container left">
          <div class="content">
            <h2>1990</h2>
            <p>Resurgimiento de la IA con la llegada de las redes neuronales artificiales, inspiradas en el funcionamiento del cerebro humano.</p>
          </div>
        </div>
        <div class="container right">
          <div class="content">
            <h2>Siglo XXI</h2>
            <p>La IA experimenta un crecimiento exponencial gracias a la explosión de datos, el aumento de la potencia computacional y el desarrollo de algoritmos sofisticados.</p>
          </div>
        </div>
      </div>
    </section>

    <section class="tipos" id="tipos">
      <div class="tipos__texts">
        <h2 class="tipos__title"><span>Tipos de IA:</span> Una diversa gama de inteligencias</h2>
        <p class="tipos__desc">La IA <strong>no es un monolito</strong>, sino un espectro de enfoques y capacidades:</p>
      </div>

      <section class="cards">
        <div class="card">
          <figure class="figure-des">
            <img src="img/ia-debil.gif" class="card__gif">
          </figure>
          <h3 class="card__title">IA débil o estrecha</h3>
          <p class="card__desc">Enfocarse en tareas específicas, como el reconocimiento facial o el juego de ajedrez.</p>
        </div>

        <div class="card">
          <figure class="figure-des">
            <img src="img/ia-fuerte.gif" class="card__gif">
          </figure>
          <h3 class="card__title">IA fuerte o general</h3>
          <p class="card__desc">Alcanzar la inteligencia humana en su totalidad, capaz de realizar cualquier tarea intelectual que pueda realizar un humano.</p>
        </div>

        <div class="card">
          <figure class="figure-des">
            <img src="img/ia-super.gif" class="card__gif">
          </figure>
          <h3 class="card__title">IA artificial general (AGI)</h3>
          <p class="card__desc">Similar a la IA fuerte, pero con la capacidad de aprender y adaptarse a nuevos entornos y situaciones de forma autónoma.</p>
        </div>
      </section>
      
    </section>

    <section class="aplicaciones" id="aplicaciones">
      <div class="a__texts">
        <h2 class="a__title"><span>Aplicaciones de la IA:</span> Un mundo transformado por la inteligencia</h2>
        <p class="a__desc">La IA está <strong>impactando</strong> en prácticamente todos los aspectos de nuestras vidas:</p>
      </div>

      <section class="a__grid">
        <div class="grid__item1 grid-property">
          <img src="img/salud.png" alt="">
          <h2 class="grid__title">Salud</h2>
          <p class="grid__desc">Diagnóstico de enfermedades, desarrollo de medicamentos, asistencia quirúrgica robótica.</p>
        </div>
        <div class="grid__item2 grid-property">
          <img src="img/finanza.png" alt="">
          <h2 class="grid__title">Finanzas</h2>
          <p class="grid__desc">Detección de fraudes, análisis de mercado, gestión de inversiones.</p>
        </div>
        <div class="grid__item3 grid-property">
          <img src="img/transporte.png" alt="">
          <h2 class="grid__title">Transporte</h2>
          <p class="grid__desc">Vehículos autónomos, sistemas de gestión de tráfico inteligente, optimización de rutas de entrega.</p>
        </div>
        <div class="grid__item4 grid-property">
          <img src="img/educacion.png" alt="">
          <h2 class="grid__title">Educación</h2>
          <p class="grid__desc">Tutoría personalizada, aprendizaje adaptativo, evaluación automatizada.</p>
        </div>
        <div class="grid__item5 grid-property">
          <img src="img/agricultura.png" alt="">
          <h2 class="grid__title">Agricultura</h2>
          <p class="grid__desc">Monitoreo de cultivos, predicción de rendimientos, gestión del riego.</p>
        </div>
        <div class="grid__item6 grid-property">
          <img src="img/entretenimiento.png" alt="">
          <h2 class="grid__title">Entretenimiento</h2>
          <p class="grid__desc">Recomendaciones de películas y música, creación de contenido personalizado, experiencias de juego inmersivas.</p>
        </div>
      </section>
    </section>

  </section>


</body>

</html>