@font-face {
    font-family: "Geist Sans";
    src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype");
  }
  
  *,
  *:after,
  *:before {
      box-sizing: border-box;
  }
  
  html {
      scroll-snap-type: y mandatory;
  }
  
  body {
      min-height: 100vh;
      font-family:  "Geist Sans", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
      font-weight: 80;
      background: #2d2d2d;
      color: hsl(0 0% 90%);
      overflow-x: hidden;
  }
  
  p {
      max-width: 40ch;
  }
  
  section:nth-of-type(1) {
      scroll-snap-align: center;
      height: 100vh;
  }
  
  section:nth-of-type(2) {
      scroll-snap-align: start;
  }
  
  article {
      min-height: 100vh;
  }
  :is(h1, h2) {
      font-weight: 70;
      font-size: clamp(2.5rem, 3.35vw + 1rem, 8rem);
      letter-spacing: -0.075ch;
      margin: 0;
  }
  
  h1 {
      color: hsl(0 0% 90%);
  }
  
  :is(section, article) {
      position: relative;
  }
  
  nav {
      position: fixed;
      top: 0;
      width: 100%;
      padding: 1rem;
      z-index: 999;
      display: flex;
      justify-content: space-between;
  }
  a:first-of-type {
      width: 48px;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      color: white;
  }
  nav a:last-of-type {
    background: hsl(0, 100%, 51%); /* Estilo específico para el último enlace del nav */
    color: rgb(255, 255, 255);
      padding: 1rem 2rem;
      border-radius: 22px;
      text-decoration: none;
      font-weight: 120;
      transition: background 0.2s;
  }

  nav a:last-of-type:is(:hover, :focus-visible) {
      background: hsl(173 100% 40%);
  }
  
  .content {
      margin: 0 auto;
      width: 900px;
      max-width: 100%;
      height: 100%;
      z-index: 2;
      position: absolute;
      inset: 0;
    padding: 1rem;
  }
  
  .fixed img {
      height: 100%;
      width: 150%;
      object-fit: cover;
      z-index: -1;
      position: absolute;
      inset: 0;
      left: 50%;
      translate: -50% 0;
      filter: brightness(0.5);
  }

@keyframes cursorBlink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.cursor {
  display: inline-block;
  width: 0.1em; /* Ancho del cursor */
  height: 1.2em; /* Altura del cursor (ajústalo según tus preferencias) */
  background-color: white; /* Color del cursor */
  animation: cursorBlink 1s infinite; /* Duración de la animación y repetición infinita */
}


section:first-of-type .fixed img {
  height: 100%;
  width: 150%;
  object-fit: cover;
  z-index: -1;
  position: absolute;
  inset: 0;
  left: 50%;
  filter: brightness(0.5);
}

  
  section:first-of-type img {
      left: 50%;
      translate: -50% 0;
  }
  
  section:first-of-type {
      padding: 2rem 1rem;
      display: grid;
      align-content: end;
      justify-content: start;
  }
  
  section:first-of-type .fixed {
      z-index: 5;
  }
  
  section:first-of-type .fixed .content {
      margin: 0 auto;
      width: 900px;
      max-width: 100%;
      display: grid;
      align-content: center;
      justify-content: start;
      padding: 6rem 2rem;
      height: 100%;
  }
  
  section:first-of-type p {
      font-size: clamp(1rem, 0.2vw + 1rem, 2rem);
  }
  
  section:nth-of-type(2) article:first-of-type .fixed {
      z-index: 2;
  }
  
  section:nth-of-type(2) .content {
      display: grid;
      padding: 4rem 1rem;
      align-content: center;
  }
  
  section:nth-of-type(2) article:first-of-type .content {
      align-content: end;
  }
  
  section:nth-of-type(2) article:first-of-type .fixed::after {
      content: "";
      position: absolute;
      inset: 0;
      background: hsl(0 0% 0% / 0.25);
  }
  
  section:nth-of-type(2) article:first-of-type h2 {
      padding: 1rem 0;
  }
  
  section:nth-of-type(2) article:nth-of-type(2) .fixed {
      background: black;
      z-index: 2;
  }
  
  section:nth-of-type(2) article:nth-of-type(3) .content {
      align-content: start;
  }
  
  section:nth-of-type(2) article:nth-of-type(3) .fixed {
      z-index: 2;
  }
  
  section:nth-of-type(2) article:nth-of-type(3) img {
      filter: saturate(0.5) brightness(0.5);
  }
  
  .text-blocks {
      max-width: 100%;
      width: 40ch;
      justify-self: end;
      display: grid;
      place-items: center;
      gap: 2rem 0;
  }
  
  /* Text block styling */
  .chat-container {
      height: 100vh;
      width: 100%;
      position: sticky;
      top: 0;
      display: grid;
      place-items: center;
  }
  .text-blocks p {
      display: inline-block;
      border-radius: 6px;
      margin: 0;
      font-size: clamp(1.5rem, 0.5vw + 1rem, 4rem);
      font-weight: 120;
  }
  .text-blocks p:nth-of-type(even) {
      text-align: right;
  }
  .text-blocks p:nth-of-type(odd) {
      justify-self: start;
  }
  
  .filler {
      display: none;
  }
  
  
  @supports (animation-timeline: scroll()) {
    @media(prefers-reduced-motion: no-preference) {
      article {
        view-timeline: --article;
      }
  
      .fixed {
        position: fixed;
        inset: 0;
      }
      .static {
        position: absolute;
        inset: 0;
        z-index: 6;
      }
      .filler {
        display: block;
        width: 100%;
        position: absolute;
        bottom: 30vh;
        padding: 1rem;
      }
  
      .text-blocks p {
        animation: slide-in, fade-in;
        animation-fill-mode: both;
        animation-timing-function: linear;
        animation-timeline: --article;
      }
  
      .text-blocks p:nth-of-type(1) { animation-range: entry-crossing 50% entry-crossing 55%; }
      .text-blocks p:nth-of-type(2) { animation-range: entry-crossing 55% entry-crossing 60%; }
      .text-blocks p:nth-of-type(3) { animation-range: entry-crossing 60% entry-crossing 65%; }
      .text-blocks p:nth-of-type(4) { animation-range: entry-crossing 65% entry-crossing 70%; }
      .text-blocks p:nth-of-type(5) { animation-range: entry-crossing 70% entry-crossing 75%; }
  
      section:nth-of-type(2) article:last-of-type {
        z-index: 5;
      }
      section:nth-of-type(2) article:nth-of-type(3) {
        height: 400vh;
      }
      section:nth-of-type(2) article:nth-of-type(3) h2 {
        margin-top: 80vh;
      }
      section:nth-of-type(2) article:last-of-type .fixed {
        clip-path: ellipse(220% 200% at 50% 300%);
        animation: unclip both linear;
        animation-timeline: --article;
        animation-range: entry 20% entry 80%;
      }
      .filler h2 {
        animation: fade-away, fade-out;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: --article;
        animation-range: exit 40% exit 75%, exit 70% exit 90%;
      }
      .loud-wrap {
        clip-path: inset(0 0 0 0);
        animation: unmask both linear;
        animation-timeline: --article;
        animation-range: entry 20% entry 80%;
        mask: linear-gradient(white 50%, transparent) 0 100% / 100% 200% no-repeat;
      }
      .text-wrap {
        position: sticky;
        bottom: 4rem;
        transform-origin: 50% 0;
        animation: fade-away both linear, fade-out both linear;
        animation-timeline: --article;
        animation-range: exit 40% exit 75%, exit 70% exit 100%;
      }
      .text-blocks {
        animation: fade-out both linear;
        animation-timeline: --article;
        animation-range: entry-crossing 75% entry-crossing 100%;
      }
      section:nth-of-type(2) article:nth-of-type(3) .fixed {
        animation: fade-in both linear, fade-out both linear;
        animation-timeline: --article, --article;
        animation-range: entry 45% exit-crossing 0%, exit 0% exit 15%;
      }
  
      section:nth-of-type(2) article:nth-of-type(2) .fixed {
        animation: fade-in;
        animation-fill-mode: both;
        animation-timing-function: linear;
        animation-timeline: --article;
        animation-range: entry 60% exit 30%;
      }
      section:nth-of-type(2) article:nth-of-type(2) h2 {
        animation: slide-in, fade-in, fade-away, fade-out;
        animation-fill-mode: both;
        animation-timing-function: linear;
        animation-timeline: view(), view(), --article, --article;
        animation-range: entry 100% cover 25%, entry 100% cover 35%, exit 20% exit 40%, exit 40% exit 50%;
      }
      section:nth-of-type(2) article:first-of-type h2 {
        animation: slide-up both linear;
        animation-timeline: --article;
        animation-range: entry 20% entry 80%;
      }
      section:nth-of-type(2) article:first-of-type img {
        animation: scale-down both linear;
        animation-timeline: --article;
        animation-range: entry;
      }
      section:nth-of-type(2) article:first-of-type .fixed {
        clip-path: ellipse(220% 200% at 50% 300%);
        animation: unclip both linear;
        animation-timeline: --article;
        animation-range: entry 0 entry 100%;
      }
      section:first-of-type {
        view-timeline: --section;
      }
      section:first-of-type .fixed {
        animation: scale-and-move both linear, fade-out both linear;
        animation-timeline: --section;
        animation-range: exit 0% exit 50%, exit 0% exit 25%;
        transform-origin: 50% 0;
      }
      /* Keyframes collection	*/
      @keyframes slide-in {
        0% {
          translate: 0 100%;
        }
      }
  
      @keyframes fade-in {
        0% {
          opacity: 0;
        }
      }
      @keyframes slide-up {
        0% {
          translate: 0 100%;
        }
      }
      @keyframes fade-away {
        to {
          filter: blur(4rem);
        }
      }
      @keyframes unmask {
        to {
          mask-position: 0 0;
        }
      }
      @keyframes scale-down {
        0% {
          scale: 5;
        }
      }
      @keyframes unclip {
        to { clip-path: ellipse(220% 200% at 50% 175%); }
      }
      @keyframes fade-out {
        to { opacity: 0; }
      }
      @keyframes scale-and-move {
        to {
          translate: 0 -10%;
          scale: 0.35 0.5;
        }
      }
    }
  }

/* Estilo base */
.skills-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente línea */
  justify-content: space-around; /* Alinea los elementos horizontalmente */
  margin: 20px auto; /* Añade margen superior e inferior para separar las secciones */
}

.skills-list li {
  text-align: center;
  width: 150px; /* Ajusta el ancho según sea necesario */
  margin: 10px; /* Añade margen entre los elementos */
}

.skills-list img {
  width: 100%; /* Hace que las imágenes ocupen el 100% del ancho del contenedor */
  height: auto; /* Mantiene la proporción original de la imagen */
}

.content h2 {
  text-align: center; /* Centra el texto horizontalmente */
  padding-bottom: 20px; /* Reduce el padding para no afectar la separación de secciones */
}

/* Clearfix para el contenedor */
.content::after {
  content: "";
  display: table;
  clear: both;
}

/* Media queries para dispositivos móviles */
@media (max-width: 600px) {
  .skills-list {
      justify-content: center; /* Centra los elementos en dispositivos móviles */
  }

  .skills-list li {
      width: 60px; /* Reduce el ancho de los elementos en pantallas más pequeñas */
      margin: 5px; /* Reduce el margen para adaptarse a pantallas más pequeñas */
  }
}


.paginas {
  background: none;
  text-decoration: none;
}

/* Responsive  */
@media screen and (max-width: 768px) {
  /* Estilos para dispositivos móviles */
  nav {
    overflow: visible;
    display: flex;
    height: auto; /* Ajusta según sea necesario */
    padding: 1rem;
  }
  img {
    max-width: 100%;
    height: auto;
  }
  .imgHabilidades{
    max-width: 50%;
    height: auto;
  }
  .content {
    width: 90%;
    max-width: 100%;
    padding: 1rem;
 }

 h1 {
    font-size: 2rem; /* Ajusta según sea necesario */
 }
 h2 {
  width: 90%;
  max-width: 100%;
  padding: 1rem;
 }
 .frases {
  width: auto;
  max-width: 100%;
 }
 .frases1 {
  width: 70%
 }
 .paginas {
  width: 90%;
 }
 p {
    font-size: 1rem; /* Ajusta según sea necesario */
 }
 article .content {
  width: 90%;
  max-width: 100%;
  padding: 1rem;
 }
 .skills-list li {
  width: 100%;
  margin-bottom: 1rem;
 }
 .text-blocks {
  max-width: 100%;
} 
.text-blocks p {
  font-size: 2rem; /* Ajusta según sea necesario */
  margin-bottom: 10px; 
}
}


body {
  min-height: 100vh;
  font-family: "Geist Sans", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
  font-weight: 80;
  background: #2c2c2c;
  color: hsl(0 0% 90%);
  /* overflow-x: hidden; */ /* Comenta o elimina esta línea */
}
.content {
  margin: 0 auto;
  width: 90%; /* Ajusta según sea necesario */
  max-width: 900px; /* Ajusta según sea necesario */
  height: 100%;
  z-index: 2;
  position: absolute;
  inset: 0;
  padding: 1rem;
}