@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeInUp 1s ease-in-out both;
}

/* Retrasos para elementos */
.fade-delay-1 { animation-delay: 0.3s; }
.fade-delay-2 { animation-delay: 0.6s; }
.fade-delay-3 { animation-delay: 0.9s; }



body {
    background-color: black;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    margin: 0;
    padding: 0;
}

h1, h3, h5 {
    text-align: center;
}

p, ul {
    font-size: 1.1em;
    line-height: 1.6;
}

.img-tarjeta {
    height: 200px;
    object-fit: cover;
    border-radius: 16px 16px 0 0;
    width: 100%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s, box-shadow 0.3s;
}

.img-tarjeta:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 32px rgba(255, 255, 255, 0.2);
}

.imagenes-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 40px 0;
    gap: 20px;
}

.imagenes-centro {
    display: flex;
    justify-content: center;   /* Centra horizontalmente */
    align-items: center;       /* Centra verticalmente si hay altura */
    gap: 40px;                 /* Espacio entre imágenes */
    margin: 30px 0;
}

.imagenes-centro .img-detalle {
    width: 40%;                /* Hazlas más grandes y que ocupen el centro */
    max-width: 350px;          /* Tamaño máximo opcional */
}

.img-detalle {
    width: 30%;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.2);
    border: 4px solid white;
    transition: transform 0.3s, box-shadow 0.3s;
}

.img-detalle:hover {
    transform: scale(1.08) rotate(-2deg);
    box-shadow: 0 16px 32px rgba(255, 255, 255, 0.4);
}

.card {
    box-shadow: 0 8px 16px rgba(255, 255, 255, 0
.2);}

.img-software {
    width: 250px;              /* Ajusta el tamaño que prefieras */
    height: 200px;             /* Alto fijo para que sean iguales */
    object-fit: cover;         /* Recorta la imagen para que llene el espacio */
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    margin: 20px 10px 20px 0;
    border: 4px solid white;
    transition: transform 0.3s, box-shadow 0.3s;
    display: inline-block;
    vertical-align: middle;
}

.img-software:hover {
    transform: scale(1.07);
    box-shadow: 0 16px 32px rgba(0,0,0,0.7);
}

.imagenes-software {
    display: flex;
    justify-content: center;   /* Centra horizontalmente */
    align-items: center;       /* Centra verticalmente si hay altura */
    gap: 40px;                 /* Espacio entre imágenes */
    margin: 40px 0;
}

.img-software {
    width: 35vw;               /* Más grandes y responsivas */
    max-width: 400px;          /* Tamaño máximo */
    min-width: 200px;          /* Tamaño mínimo opcional */
    height: 300px;             /* Alto fijo para igualarlas */
    object-fit: cover;         /* Recorta para que llenen el espacio */
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    border: 4px solid white;
    transition: transform 0.3s, box-shadow 0.3s;
    display: block;
}

.img-software:hover {
    transform: scale(1.07);
    box-shadow: 0 16px 32px rgba(0,0,0,0.7);
}

/* ...existing code... */

.title-plate {
  background: linear-gradient(90deg, #d4af37 0%, #ffd66b 50%, #e8c36a 100%); /* dorado */
  color: #1b1200;
  padding: 10px 18px;
  border-radius: 10px;
  display: inline-block; /* para que quede como rectángulo alrededor del texto */
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.2);
  font-weight: 600;
}

/* Variante: placa ancha que ocupa todo el contenedor */
.title-plate.full {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 20px;
}

/* Pequeño ajuste responsive */
@media (max-width: 576px) {
  .title-plate { padding: 8px 12px; border-radius: 8px; }
  .title-plate.full { text-align: center; }
}

/* ...existing code... */