/* Tarjeta animada (box) y botones con la misma animación, con los colores del logo.
   Adaptado de los patrones de Uiverse; sin imágenes externas. */

/* Tarjeta de tutoriales */
.tutoriales-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 56px; justify-items: center; }
.box {
  position: relative; width: 260px; height: 300px; display: flex; justify-content: center; align-items: center;
  transition: .5s; z-index: 1; text-decoration: none; color: #fff;
}
.box::before, .box::after {
  content: ""; position: absolute; top: 0; left: 50px; width: 50%; height: 100%; border-radius: 8px;
  transform: skewX(15deg); transition: .5s;
  background: linear-gradient(315deg, var(--logo-naranja), var(--logo-azul));
}
.box::after { filter: blur(30px); opacity: .8; }
.box:hover::before, .box:hover::after { transform: skewX(0deg) scaleX(1.3); }

.box .content {
  position: relative; width: 230px; height: 260px; padding: 26px; border-radius: 8px; z-index: 1;
  background: rgba(255,255,255,.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 5px 15px rgba(0,0,0,.25);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px;
}
.box .content small {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--logo-amarillo);
}
.box .content h3 { font-size: 20px; margin: 0; line-height: 1.25; color: #fff; }
.box .content p { margin: 0; font-size: 14px; color: rgba(255,255,255,.75); }
.box .content em { font-style: normal; margin-top: auto; font-family: var(--mono); font-size: 12px; color: #fff; opacity: .85; }

/* Botones con la misma animación (para redes y acciones) */
.btn-caja {
  position: relative; display: inline-flex; align-items: center; justify-content: center; z-index: 1;
  width: 200px; height: 58px; margin: 8px; text-decoration: none; color: #fff;
  font-family: var(--titulo); font-weight: 700; letter-spacing: .04em; font-size: 15px;
  transition: .5s;
}
.btn-caja::before, .btn-caja::after {
  content: ""; position: absolute; top: 0; left: 26px; width: 50%; height: 100%; border-radius: 10px;
  transform: skewX(15deg); transition: .5s;
  background: linear-gradient(315deg, var(--logo-naranja), var(--logo-azul));
}
.btn-caja::after { filter: blur(22px); opacity: .6; }
.btn-caja:hover::before, .btn-caja:hover::after { transform: skewX(0deg) scaleX(1.35); }
.btn-caja .texto {
  position: relative; z-index: 2; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: rgba(5,7,13,.72); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px);
}
.btn-caja:focus-visible { outline: 2px solid var(--logo-amarillo); outline-offset: 4px; }

/* Redes sociales */
.redes-fila { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 40px; }

.pendiente { opacity: .75; }

@media (max-width: 980px) {
  .tutoriales-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .tutoriales-grid { grid-template-columns: 1fr; }
  .box { width: 240px; }
}