main {
  max-width    : 1200px;
  margin       : 0 auto;
  background   : rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow   : 0 25px 50px rgba(0, 0, 0, 0.15);
  padding      : 3rem;
}

.titulo-tutoriales {
  font-size              : 3rem;
  font-weight            : 700;
  text-align             : center;
  margin-bottom          : 3rem;
  background             : linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip        : text;
  position               : relative;
}

.titulo-tutoriales::after {
  content      : '';
  position     : absolute;
  bottom       : -10px;
  left         : 50%;
  transform    : translateX(-50%);
  width        : 100px;
  height       : 4px;
  background   : linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 2px;
}

.seccion-dos {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap                  : 3rem;
  margin-top           : 2rem;
}

article {
  background   : #fff;
  border-radius: 20px;
  padding      : 2.5rem;
  box-shadow   : 0 15px 35px rgba(0, 0, 0, 0.1);
  transition   : all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position     : relative;
  overflow     : hidden;
}

article::before {
  content   : '';
  position  : absolute;
  top       : 0;
  left      : 0;
  right     : 0;
  height    : 5px;
  background: linear-gradient(135deg, #667eea, #764ba2);
}

article:hover {
  transform : translateY(-10px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

article h2 {
  font-size    : 2.2rem;
  font-weight  : 600;
  color        : #2d3748;
  margin-bottom: 1.5rem;
  text-align   : center;
  position     : relative;
}

article h2::after {
  content      : '';
  position     : absolute;
  bottom       : -8px;
  left         : 50%;
  transform    : translateX(-50%);
  width        : 50px;
  height       : 2px;
  background   : linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 1px;
}

article img {
  width          : 100%;
  height         : auto;
  aspect-ratio   : 16/10;
  object-fit     : cover;
  object-position: center top;
  border-radius  : 15px;
  margin-bottom  : 1.5rem;
  transition     : transform 0.3s ease;
  box-shadow     : 0 10px 25px rgba(0, 0, 0, 0.1);
}

article:hover img {
  transform: scale(1.05);
}

article p {
  font-size  : 1.1rem;
  line-height: 1.7;
  color      : #4a5568;
  text-align : center;
  font-weight: 400;
}

/* Efectos adicionales */
article {
  position: relative;
}

article::after {
  content       : '';
  position      : absolute;
  top           : 0;
  left          : 0;
  right         : 0;
  bottom        : 0;
  background    : linear-gradient(135deg, rgba(102, 126, 234, 0.03), rgba(118, 75, 162, 0.03));
  pointer-events: none;
  border-radius : 20px;
}

/* Animaciones */
@keyframes fadeInUp {
  from {
    opacity  : 0;
    transform: translateY(30px);
  }

  to {
    opacity  : 1;
    transform: translateY(0);
  }
}

.titulo-tutoriales {
  animation: fadeInUp 0.8s ease-out;
}

article:nth-child(1) {
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

article:nth-child(2) {
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

/* Responsivo */
@media (max-width: 768px) {
  body {
    padding: 1rem;
  }

  main {
    padding: 2rem;
  }

  .titulo-tutoriales {
    font-size: 2.5rem;
  }

  .seccion-dos {
    grid-template-columns: 1fr;
    gap                  : 2rem;
  }

  article {
    padding: 2rem;
  }

  article h2 {
    font-size: 1.8rem;
  }

  article p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .titulo-tutoriales {
    font-size: 2rem;
  }

  article img {
    aspect-ratio   : 4/3;
    object-position: center center;
  }
}