.modelo {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin: 12px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.modelo:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.foto-chica {
  max-width: 220px;
  display: block;
  margin: 0 auto 12px auto;
}

.titulo-moto {
  font-size: 1.6em;              /* más grande */
  font-weight: 700;              /* más grueso */
  color: #111;                   /* negro intenso */
  margin: 10px 0;
  text-align: center;
  text-transform: uppercase;     /* todo en mayúsculas */
  letter-spacing: 1px;           /* espacio entre letras */
}

.modelo-anio {
  font-size: 0.95em;
  color: #d32f2f;                /* rojo para destacar el año */
  font-weight: 600;
  margin-left: 6px;
}

.precio-final {
  color: #d32f2f;        /* rojo elegante */
  font-weight: bold;
  font-size: 1.4em;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.2); /* sombra ligera */
}


.precio-publico {
  display: block;
  text-decoration: line-through;
  color: #888;
  font-size: 1em;
  margin-bottom: 6px;
}


.btn-ficha {
  margin: 6px 4px;
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  background: #d32f2f;   /* 👈 rojo */
  color: #fff;
  cursor: pointer;
  font-size: 0.95em;
  font-weight: bold;
  transition: background 0.25s ease, transform 0.2s ease;
}

.btn-ficha:hover {
  background: #b71c1c;   /* 👈 rojo más oscuro al pasar el mouse */
  transform: scale(1.05);
}


.existencias {
  margin-top: 10px;
  font-size: 0.9em;
  color: #555;
  border-top: 1px dashed #ccc;
  padding-top: 6px;
}

.titulo-moto {
  font-size: 1.4em;
  font-weight: bold;
  color: #222;
  margin: 8px 0;
  text-align: center;
}

.modelo-anio {
  font-size: 0.9em;
  color: #555;
}

.descripcion {
  font-size: 0.95em;
  color: #444;
  margin: 10px 0;
  text-align: center;
  line-height: 1.4;
}

.btn-rojo {
  margin: 6px 4px;
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  background: #d32f2f;
  color: #fff;
  cursor: pointer;
  font-size: 0.95em;
  transition: background 0.2s ease;
}

.btn-rojo:hover {
  background: #b71c1c;
}

#lista-motos {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center; /* centra las tarjetas en cada fila */
}

.bono {
  font-size: 0.85rem;
  color: #388e3c;   /* verde elegante */
  font-weight: bold;
  margin-top: 4px;
}



.contenedor-motos {
  display: flex;              /* Activa flexbox */
  flex-wrap: wrap;            /* Permite que las tarjetas bajen a la siguiente fila */
  gap: 24px;                  /* Espacio uniforme entre tarjetas */
  justify-content: center;    /* Centra las tarjetas en la fila */
  padding: 20px 0;            /* Aire arriba y abajo */
}

/* Tarjetas normales en Off-Road */
#lista-offroad .moto-card {
  flex: 0 1 calc(33.333% - 24px);
  max-width: 320px;
}

/* Tarjetas de aniversario en Off-Road (se mandan al contenedor aparte) */
#lista-offroad-aniversario .moto-card {
  flex: 0 1 calc(33.333% - 24px); /* 3 por fila */
  max-width: 320px;
}

@media (max-width: 600px) {
  /* Todas las tarjetas normales siguen 1 por fila */
  #lista-offroad .moto-card {
    flex: 0 1 100%;
    max-width: none;
  }

  /* Tarjetas de aniversario en Off-Road: más aire entre ellas */
  #lista-offroad-aniversario .moto-card {
    flex: 0 1 100%;       /* 1 por fila */
    margin-bottom: 20px;  /* espacio extra entre tarjetas */
    max-width: none;
  }

  /* Opcional: centrar el bloque aniversario */
  #lista-offroad-aniversario {
    padding-top: 10px;    /* separación respecto al bloque normal */
    border-top: 1px solid #ddd; /* línea divisoria sutil */
  }
}


.moto-card {
  flex: 0 1 calc(33.333% - 24px); /* 3 tarjetas por fila */
  max-width: 320px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Bloque superior: nombre, precios, descripción */
.moto-card .contenido-superior {
  flex: 1;              /* ocupa todo el espacio disponible */
  min-height: 220px;    /* altura mínima para alinear todas las tarjetas */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Bloque inferior: botones y aviso */
.moto-card .contenido-inferior {
  margin-top: auto;     /* empuja hacia abajo */
}


.moto-card img.foto-chica {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 12px;
}

.moto-card strong {
  font-size: 1.2rem;
  color: #333;
}

.precio-final,
.precio-publico {
  color: #d32f2f;
  font-weight: bold;
}

.moto-card .descripcion {
  font-size: 0.9rem;
  color: #555;
  margin: 8px 0;
  line-height: 1.4;
  text-align: justify;
}

/* --- BOTONES INDIVIDUALES --- */
.moto-card .btn-ficha,
.moto-card .btn-fotos {
  background: #d32f2f;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  margin: 6px 4px 0 0;
  cursor: pointer;
  transition: background 0.2s ease;
}

.moto-card .btn-ficha:hover,
.moto-card .btn-fotos:hover {
  background: #b71c1c;
}

/* --- CONTENEDOR DE BOTONES --- */
.moto-card .botones {
  display: flex;
  gap: 10px;
  justify-content: flex-start; /* cuando hay ficha */
  margin-top: 10px;
}

.moto-card .botones.solo-fotos {
  justify-content: center; /* centra el botón cuando es único */
}

.moto-card .existencias {
  font-size: 0.8rem;
  color: #666;
  margin-top: 10px;
  text-align: center;
}

.moto-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}


/* 🔹 Responsive */
@media (max-width: 1024px) {
  .moto-card {
    flex: 0 1 calc(50% - 24px); /* 2 por fila en tablets */
  }
}

@media (max-width: 600px) {
  .moto-card {
    flex: 0 1 100%; /* 1 por fila en móviles */
  }
}